캔버스 컴포넌트

셀 내용은 렌더 인스트럭션으로 표현합니다. 아래 컴포넌트는 지원됨(캔버스에 완전히 그려짐); 나머지는 추후 구현 예정 스텁입니다.

지원 컴포넌트

컴포넌트	설명	주요 props
Text	한 줄 텍스트	`value`, `style?`, `color?`, `fontWeight?`, `fontSize?`
Badge	배경이 있는 pill/chip	`value`, `style?`, `color?`, `backgroundColor?`, `borderRadius?`
Flex	Taffy 호환 flex 컨테이너; 자식 레이아웃 및 그리기	`children`, `style?`, `flexDirection?`, `gap?`, `alignItems?`, `justifyContent?`
Box	패딩, 마진, 테두리; 자식은 콘텐츠 영역에 세로 스택	`children?`, `style?`, `padding?`, `margin?`, `borderWidth?`, `backgroundColor?`
Stack	gap이 있는 행/열 레이아웃	`children?`, `direction?` ("row" \| "column"), `gap?`, `style?`
Sparkline	`data`(number[])로 그리는 인라인 미니 라인 차트	`data`, `style?`, `color?`, `strokeWidth?`, `variant?` ("line" \| "area")
Color	중앙 정렬 정사각형 색상 견본	`value` (hex), `borderRadius?`, `borderWidth?`, `borderColor?`
Tag	테두리가 있는 텍스트 (stroke + text)	`value`, `color?`, `borderColor?`, `borderRadius?`, `fontSize?`
Rating	채워진 ★과 빈 ☆ 별점	`value`, `max?`, `color?`, `emptyColor?`, `size?`
Chip	배경이 있는 pill (닫기 버튼 선택)	`value`, `color?`, `backgroundColor?`, `borderRadius?`, `closable?`
Link	링크 색상 + 밑줄 텍스트; 클릭 시 URL 열기	`value`, `href?`, `color?`, `underline?`, `fontSize?`

모두 선택적 style 객체를 지원하며, 개별 props가 동일 키일 때 style보다 우선합니다.

Text와 Badge

import React from "react";
import { import TextText, import BadgeBadge } from "@ohah/react-wasm-table";

export const const Example: () => React.JSX.ElementExample = () => (
  <>
    <import TextText value: stringvalue="Hello" style: {
    color: string;
    fontWeight: string;
}
style={{ color: stringcolor: "#333", fontWeight: stringfontWeight: "bold" }} />
    <import BadgeBadge value: stringvalue="active" style: {
    backgroundColor: string;
    color: string;
}
style={{ backgroundColor: stringbackgroundColor: "#d1fae5", color: stringcolor: "#065f46" }} />
  </>
);

Flex (Taffy 레이아웃)

Flex는 레이아웃 엔진과 동일한 스타일 표면을 사용합니다: flexDirection, gap, alignItems, justifyContent, padding, margin, borderWidth, boxSizing 등.

import React from "react";
import { import FlexFlex, import TextText, import BadgeBadge } from "@ohah/react-wasm-table";

export const const Example: () => React.JSX.ElementExample = () => (
  <import FlexFlex flexDirection: stringflexDirection="row" gap: numbergap={8} alignItems: stringalignItems="center">
    <import TextText value: stringvalue="Name" />
    <import BadgeBadge value: stringvalue="New" />
  </import FlexFlex>
);

개별 props가 style을 덮어씁니다:

import React from "react";
import { import FlexFlex, import TextText } from "@ohah/react-wasm-table";

export const const Example: () => React.JSX.ElementExample = () => (
  <import FlexFlex style: {
    flexDirection: string;
    gap: number;
}
style={{ flexDirection: stringflexDirection: "column", gap: numbergap: 8 }} flexDirection: stringflexDirection="row" gap: numbergap={4}>
    <import TextText value: stringvalue="결과: flexDirection = 'row', gap = 4" />
  </import FlexFlex>
);

Box와 Stack

Box: padding, margin, border; 자식은 콘텐츠 영역에 세로로 쌓임.
Stack: gap이 있는 row/column; 레이아웃 버퍼에서 오는 padding 없음.

import React from "react";
import { import BoxBox, import StackStack, import TextText } from "@ohah/react-wasm-table";

export const const Example: () => React.JSX.ElementExample = () => (
  <>
    <import BoxBox padding: numberpadding={8} borderWidth: numberborderWidth={1} borderColor: stringborderColor="#eee">
      <import TextText value: stringvalue="Inside box" />
    </import BoxBox>
    <import StackStack direction: stringdirection="row" gap: numbergap={8}>
      <import TextText value: stringvalue="A" />
      <import TextText value: stringvalue="B" />
    </import StackStack>
  </>
);

Sparkline

숫자 배열로 인라인 미니 차트. 캔버스에 그려집니다.

import React from "react";
import { import SparklineSparkline } from "@ohah/react-wasm-table";Cannot find module '@ohah/react-wasm-table' or its corresponding type declarations.

const const series: number[]series = [10, 20, 15, 30, 25, 40];

export const const Example: () => React.JSX.ElementExample = () => (
  <import SparklineSparkline data: number[]data={const series: number[]series} variant: stringvariant="line" color: stringcolor="#2563eb" strokeWidth: numberstrokeWidth={2} />
);

Color, Tag, Rating, Chip, Link

import React from "react";
import { import ColorColor, import TagTag, import RatingRating, import ChipChip, import LinkLink } from "@ohah/react-wasm-table";

export const const Example: () => React.JSX.ElementExample = () => (
  <>
    <import ColorColor value: stringvalue="#e53935" borderRadius: numberborderRadius={4} />
    <import TagTag value: stringvalue="frontend" color: stringcolor="#1565c0" borderColor: stringborderColor="#1565c0" />
    <import RatingRating value: numbervalue={4} max: numbermax={5} color: stringcolor="#f59e0b" />
    <import ChipChip value: stringvalue="React" backgroundColor: stringbackgroundColor="#1976d2" color: stringcolor="#fff" />
    <import LinkLink value: stringvalue="Docs" href: stringhref="https://example.com" underline: trueunderline />
  </>
);

이벤트 핸들러

모든 캔버스 컴포넌트는 CanvasEventHandlers 인터페이스를 통해 HTMLElement과 동일한 이벤트 핸들러를 지원합니다. 이벤트는 컴포넌트별로 발생하며, 셀 좌표와 네이티브 MouseEvent를 포함하는 GridCellEvent를 받습니다.

핸들러	발생 시점
`onClick`	컴포넌트 셀 클릭
`onDoubleClick`	컴포넌트 셀 더블클릭
`onMouseDown`	컴포넌트 셀에서 마우스 버튼 누름
`onMouseUp`	컴포넌트 셀에서 마우스 버튼 놓음
`onMouseEnter`	커서가 컴포넌트 셀에 진입
`onMouseLeave`	커서가 컴포넌트 셀에서 벗어남

실행 순서

이벤트 핸들러는 DOM 시맨틱스를 따르는 3단계 실행 순서로 동작합니다:

컴포넌트 레벨 — 컴포넌트의 onClick (요소 핸들러)
Grid 레벨 — Grid의 onCellClick prop (부모/버블링)
렌더러 기본 동작 — 예: Link가 URL 열기

어느 레벨에서든 e.preventDefault()를 호출하면 하위 단계가 차단됩니다.

예제

import React from "react";
import { import LinkLink, import ChipChip, type import GridCellEventGridCellEvent } from "@ohah/react-wasm-table";

export const const Example: () => React.JSX.ElementExample = () => (
  <>
    {/* preventDefault()로 Link 렌더러의 URL 열기를 차단 */}
    <import LinkLink
      value: stringvalue="Click me"
      href: stringhref="https://example.com"
      onClick: (e: any) => voidonClick={(e: anye) => {
        e: anye.preventDefault();
        var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("clicked link at", e: anye.cell);
      }}
    />

    {/* 호버 이벤트 */}
    <import ChipChip
      value: stringvalue="Hover me"
      backgroundColor: stringbackgroundColor="#e3f2fd"
      color: stringcolor="#1565c0"
      onMouseEnter: (e: any) => voidonMouseEnter={(e: anye) => var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("enter", e: anye.cell)}
      onMouseLeave: (e: any) => voidonMouseLeave={(e: anye) => var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("leave", e: anye.cell)}
    />

    {/* 하나의 컴포넌트에 여러 이벤트 */}
    <import ChipChip
      value: stringvalue="All events"
      backgroundColor: stringbackgroundColor="#e8f5e9"
      color: stringcolor="#2e7d32"
      onClick: (e: any) => voidonClick={(e: anye) => var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("click", e: anye.cell)}
      onDoubleClick: (e: any) => voidonDoubleClick={(e: anye) => var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("dblclick", e: anye.cell)}
      onMouseDown: (e: any) => voidonMouseDown={(e: anye) => var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("mousedown", e: anye.cell)}
      onMouseUp: (e: any) => voidonMouseUp={(e: anye) => var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.
@sincev0 .1.100log("mouseup", e: anye.cell)}
    />
  </>
);

인터랙티브 컴포넌트

아래 컴포넌트는 사용자 상호작용을 위해 DOM 오버레이와 통합됩니다:

컴포넌트	설명	주요 props
Avatar	이미지 또는 이니셜이 있는 원형 아바타	`value`, `src?`, `size?`, `borderRadius?`, `color?`
DatePicker	DOM 오버레이 피커가 있는 날짜 입력	`value`, `onChange?`, `format?`, `style?`
Dropdown	DOM 오버레이 드롭다운이 있는 선택 입력	`value`, `options`, `onChange?`, `style?`

#캔버스 컴포넌트

#지원 컴포넌트

#Text와 Badge

#Flex (Taffy 레이아웃)

#Box와 Stack

#Sparkline

#Color, Tag, Rating, Chip, Link

#이벤트 핸들러

#실행 순서

#예제

#인터랙티브 컴포넌트