@k8ordo/ui 1.0.0 → 2.1.0

package/dist/index.mjs

@@ -1,36 +1,5 @@
-import { cn } from "./helpers/cn.mjs";
 import { Spinner } from "./components/feedback/spinner/spinner.mjs";
 import { Button } from "./components/buttons/button/button.mjs";
-import { chain } from "./helpers/chain.mjs";
-import { createSafeContext } from "./helpers/create-safe-context.mjs";
-import { mergeProps } from "./helpers/merge-props.mjs";
-import { mergeRefs } from "./helpers/merge-refs.mjs";
-import { useClickAway } from "./hooks/click-away/index.mjs";
-import { useClient } from "./hooks/client/index.mjs";
-import { useClipboard } from "./hooks/clipboard/index.mjs";
-import { useControllableState } from "./hooks/controllable-state/index.mjs";
-import { useDebouncedTransition } from "./hooks/debounced-transition/index.mjs";
-import { useDeferredDebounce } from "./hooks/deferred-debounce/index.mjs";
-import { useDisclosure } from "./hooks/disclosure/index.mjs";
-import { useHash } from "./hooks/hash/index.mjs";
-import { useHover } from "./hooks/hover/index.mjs";
-import { useIntersectionObserver } from "./hooks/intersection-observer/use-intersection-observer.mjs";
-import { useInView } from "./hooks/intersection-observer/use-in-view.mjs";
-import { useInterval } from "./hooks/interval/index.mjs";
-import { useBreakpoint } from "./hooks/breakpoint/index.mjs";
-import { useLocalStorage } from "./hooks/local-storage/index.mjs";
-import { useResize } from "./hooks/resize/index.mjs";
-import { useScrollDirection } from "./hooks/scroll-direction/index.mjs";
-import { useScrollLock } from "./hooks/scroll-lock/index.mjs";
-import { useSessionStorage } from "./hooks/session-storage/index.mjs";
-import { useStep } from "./hooks/step/index.mjs";
-import { useTimeout } from "./hooks/timeout/index.mjs";
-import { useWindowResize } from "./hooks/window-resize/index.mjs";
-import { useWindowSize } from "./hooks/window-size/index.mjs";
-import { useWritingMode } from "./hooks/writing-mode/index.mjs";
-import { Popover } from "./components/overlays/popover/popover.mjs";
-import { Tooltip } from "./components/overlays/tooltip/tooltip.mjs";
-import { IconButton } from "./components/buttons/icon-button/icon-button.mjs";
 import { ChromeIcon, EdgeIcon, FirefoxIcon, SafariIcon } from "./components/icons/browsers.mjs";
 import { ColorScaleIcon } from "./components/icons/color-scale.mjs";
 import { GitHubIcon } from "./components/icons/github-mark.mjs";
@@ -39,47 +8,72 @@ import { AIIcon, AccessibilityIcon, AlertIcon, AssistantIcon, AtomIcon, BadIcon,
 import { QiitaIcon } from "./components/icons/qiita.mjs";
 import { TwitterIcon } from "./components/icons/twitter.mjs";
 import { VerticalWritingIcon } from "./components/icons/vertical-writing.mjs";
+import { Popover } from "./components/overlays/popover/index.mjs";
+import { Tooltip } from "./components/overlays/tooltip/index.mjs";
+import { IconButton } from "./components/buttons/icon-button/icon-button.mjs";
+import { CopyButton } from "./components/buttons/copy-button/copy-button.mjs";
+import { Separator } from "./components/layout/separator/separator.mjs";
+import { Toolbar } from "./components/buttons/toolbar/index.mjs";
 import { Accordion } from "./components/data-display/accordion/index.mjs";
 import { Avatar } from "./components/data-display/avatar/avatar.mjs";
 import { Badge } from "./components/data-display/badge/badge.mjs";
 import { Card } from "./components/data-display/card/card.mjs";
+import { Carousel } from "./components/data-display/carousel/index.mjs";
 import { Code } from "./components/data-display/code/code.mjs";
-import { Heading } from "./components/data-display/heading/heading.mjs";
+import { Checkbox } from "./components/form/checkbox/checkbox.mjs";
+import { CheckboxGroup } from "./components/form/checkbox-group/index.mjs";
+import { EmptyState } from "./components/feedback/empty-state/empty-state.mjs";
 import { Table } from "./components/data-display/table/table.mjs";
+import { DataTable } from "./components/data-display/data-table/data-table.mjs";
+import { Heading } from "./components/data-display/heading/heading.mjs";
+import { Kbd } from "./components/data-display/kbd/kbd.mjs";
+import { Prose } from "./components/data-display/prose/prose.mjs";
+import { Tree } from "./components/data-display/tree/tree.mjs";
 import { Alert } from "./components/feedback/alert/alert.mjs";
+import { Callout } from "./components/feedback/callout/callout.mjs";
 import { Progress } from "./components/feedback/progress/progress.mjs";
 import { Skeleton } from "./components/feedback/skeleton/skeleton.mjs";
 import { useToast } from "./components/feedback/toast/context.mjs";
 import { ToastProvider } from "./components/feedback/toast/provider.mjs";
 import { Autocomplete } from "./components/form/autocomplete/autocomplete.mjs";
-import { Checkbox } from "./components/form/checkbox/checkbox.mjs";
+import { Calendar } from "./components/form/calendar/calendar.mjs";
 import { CheckboxCard } from "./components/form/checkbox-card/checkbox-card.mjs";
-import { CheckboxGroup } from "./components/form/checkbox-group/index.mjs";
-import { FileField } from "./components/form/file-field/file-field.mjs";
+import { ColorPicker } from "./components/form/color-picker/color-picker.mjs";
+import { Combobox } from "./components/form/combobox/combobox.mjs";
+import { DateField } from "./components/form/date-field/date-field.mjs";
+import { DatePicker } from "./components/form/date-picker/date-picker.mjs";
+import { FileField } from "./components/form/file-field/index.mjs";
 import { Form } from "./components/form/form/form.mjs";
 import { FormControl } from "./components/form/form-control/form-control.mjs";
 import { NumberField } from "./components/form/number-field/number-field.mjs";
 import { PasswordInput } from "./components/form/password-input/password-input.mjs";
 import { Radio } from "./components/form/radio/radio.mjs";
 import { RadioCard } from "./components/form/radio-card/radio-card.mjs";
+import { RangeSlider } from "./components/form/range-slider/range-slider.mjs";
 import { Select } from "./components/form/select/select.mjs";
 import { Slider } from "./components/form/slider/slider.mjs";
 import { Switch } from "./components/form/switch/switch.mjs";
 import { TextField } from "./components/form/text-field/text-field.mjs";
 import { Textarea } from "./components/form/textarea/textarea.mjs";
 import { Grid } from "./components/layout/grid/grid.mjs";
-import { ScrollLinked } from "./components/layout/scroll-linked/scroll-linked.mjs";
-import { Separator } from "./components/layout/separator/separator.mjs";
+import { ResizablePanels } from "./components/layout/resizable-panels/index.mjs";
 import { Stack } from "./components/layout/stack/stack.mjs";
 import { Anchor } from "./components/navigation/anchor/anchor.mjs";
 import { Breadcrumb } from "./components/navigation/breadcrumb/index.mjs";
 import { Pagination } from "./components/navigation/pagination/pagination.mjs";
-import { Tabs } from "./components/navigation/tabs/tabs.mjs";
-import { Dialog } from "./components/overlays/dialog/dialog.mjs";
+import { Stepper } from "./components/navigation/stepper/stepper.mjs";
+import { SideNav } from "./components/navigation/side-nav/index.mjs";
+import { TableOfContents } from "./components/navigation/table-of-contents/table-of-contents.mjs";
+import { Tabs } from "./components/navigation/tabs/index.mjs";
+import { InView } from "./components/observers/in-view/in-view.mjs";
+import { Resize } from "./components/observers/resize/resize.mjs";
 import { UIProvider } from "./components/providers/ui-provider.mjs";
 import { PortalRootProvider, usePortalRoot } from "./components/providers/portal-root.mjs";
 import { Modal } from "./components/overlays/modal/modal.mjs";
+import { CommandPalette } from "./components/overlays/command-palette/command-palette.mjs";
+import { ContextMenu } from "./components/overlays/context-menu/index.mjs";
+import { Dialog } from "./components/overlays/dialog/index.mjs";
 import { Drawer } from "./components/overlays/drawer/drawer.mjs";
-import { DropdownMenu } from "./components/overlays/dropdown-menu/dropdown-menu.mjs";
-import { ListBox } from "./components/overlays/list-box/list-box.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, AssistantIcon, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, ChromeIcon, CloseIcon, Code, CodeXmlIcon, ColorContrastIcon, ColorInfoIcon, ColorScaleIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, EdgeIcon, ExternalLinkIcon, FileField, FirefoxIcon, FlaskIcon, ForkIcon, Form, FormControl, FormIcon, FullscreenIcon, GitHubIcon, GoodIcon, Grid, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, LockIcon, LockOpenIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PackageIcon, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, RefreshIcon, SafariIcon, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SquircleIcon, Stack, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UIProvider, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, chain, cn, createSafeContext, mergeProps, mergeRefs, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebouncedTransition, useDeferredDebounce, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useTimeout, useToast, useWindowResize, useWindowSize, useWritingMode };
+import { DropdownMenu } from "./components/overlays/dropdown-menu/index.mjs";
+import { ListBox } from "./components/overlays/list-box/index.mjs";
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, AssistantIcon, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BlogIcon, BoringIcon, Breadcrumb, Button, Calendar, Callout, Card, Carousel, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, ChromeIcon, CloseIcon, Code, CodeXmlIcon, ColorContrastIcon, ColorInfoIcon, ColorPicker, ColorScaleIcon, Combobox, CommandPalette, ContextMenu, CopyButton, CopyIcon, DarkModeIcon, DataTable, DateField, DatePicker, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, EdgeIcon, EmptyState, ExternalLinkIcon, FileField, FirefoxIcon, FlaskIcon, ForkIcon, Form, FormControl, FormIcon, FullscreenIcon, GitHubIcon, GoodIcon, Grid, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InView, InformativeIcon, InterestingIcon, Kbd, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, LockIcon, LockOpenIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PackageIcon, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, Prose, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, RangeSlider, RefreshIcon, ResizablePanels, Resize, SafariIcon, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, SideNav, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SquircleIcon, Stack, Stepper, SubscribeIcon, Switch, Table, TableIcon, TableOfContents, Tabs, TagIcon, TextField, Textarea, ToastProvider, Toolbar, Tooltip, Tree, TwitterIcon, UIProvider, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, usePortalRoot, useToast };

package/dist/integrations/_shared/openui-defs.d.mts

@@ -12,7 +12,6 @@ import { Library } from "@openuidev/lang-core";
  * OpenUI は schema と描画関数を `defineComponent` で同居させる設計なので、
  * このファクトリ自体は描画関数を opaque な `C` として受け取り中身を見ない。
  */
-type ComponentRenderers<C> = Partial<Record<string, C>>;
-declare const buildComponentLibrary: <C>(render: ComponentRenderers<C>) => Library<C>;
-//#endregion
-export { ComponentRenderers, buildComponentLibrary };
+export type ComponentRenderers<C> = Partial<Record<string, C>>;
+export declare const buildComponentLibrary: <C>(render: ComponentRenderers<C>) => Library<C>;
+//#endregion

package/dist/integrations/_shared/openui-defs.mjs

@@ -1,4 +1,4 @@
-import { accordionProps, alertProps, anchorProps, autocompleteProps, avatarProps, badgeProps, breadcrumbProps, buttonProps, cardProps, checkboxCardProps, checkboxGroupProps, checkboxProps, chevronIconProps, codeProps, dialogProps, drawerProps, dropdownMenuProps, fileFieldProps, formControlProps, formProps, gridProps, headingProps, iconButtonProps, iconProps, listBoxProps, modalProps, numberFieldProps, paginationProps, passwordInputProps, popoverProps, progressProps, radioCardProps, radioProps, scrollLinkedProps, selectProps, separatorProps, skeletonProps, sliderProps, spinnerProps, stackProps, statusIconProps, switchProps, tableProps, tabsProps, textFieldProps, textareaProps, toastProps, tooltipProps } from "./schemas.mjs";
+import { accordionProps, alertProps, anchorProps, autocompleteProps, avatarProps, badgeProps, breadcrumbProps, buttonProps, calendarProps, calloutProps, cardProps, carouselProps, checkboxCardProps, checkboxGroupProps, checkboxProps, chevronIconProps, codeProps, colorPickerProps, comboboxProps, copyButtonProps, dataTableProps, dateFieldProps, datePickerProps, dialogProps, drawerProps, dropdownMenuProps, emptyStateProps, fileFieldProps, formControlProps, formProps, gridProps, headingProps, iconButtonProps, iconProps, kbdProps, listBoxProps, modalProps, numberFieldProps, paginationProps, passwordInputProps, popoverProps, progressProps, radioCardProps, radioProps, rangeSliderProps, selectProps, separatorProps, sideNavProps, skeletonProps, sliderProps, spinnerProps, stackProps, statusIconProps, stepperProps, switchProps, tableProps, tabsProps, textFieldProps, textareaProps, toastProps, toolbarProps, tooltipProps, treeProps } from "./schemas.mjs";
 import { createLibrary, defineComponent } from "@openuidev/lang-core";
 import { z } from "zod";
 //#region src/integrations/_shared/openui-defs.ts
@@ -9,58 +9,76 @@ const buildComponentLibrary = (render) => {
 		props,
 		component: render[name]
 	});
-	const Button = def("Button", "アクションボタン。href を指定するとリンク（<a>）になる。", buttonProps);
-	const IconButton = def("IconButton", "アイコンのみのボタン（label は必須）。", iconButtonProps);
-	const Badge = def("Badge", "ステータスやラベルのバッジ。", badgeProps);
-	const Heading = def("Heading", "見出し（h1〜h6）。", headingProps);
-	const Anchor = def("Anchor", "テキストリンク。", anchorProps);
-	const Avatar = def("Avatar", "アバター（画像 or イニシャル）。", avatarProps);
-	const Code = def("Code", "インラインのコード/値表示。", codeProps);
-	const Icon = def("Icon", "アイコン（name で指定）。", iconProps);
-	const ChevronIcon = def("ChevronIcon", "矢印アイコン。direction で向きを指定。", chevronIconProps);
-	const StatusIcon = def("StatusIcon", "ステータスを表すアイコン（success/info/warning/error）。装飾用途で、メッセージ表示なら Alert を使う。", statusIconProps);
-	const Alert = def("Alert", "状態を伝えるアラート。message は文字列または文字列配列。", alertProps);
-	const Spinner = def("Spinner", "ローディングスピナー。", spinnerProps);
-	const Progress = def("Progress", "進捗バー。", progressProps);
-	const Skeleton = def("Skeleton", "ローディングのプレースホルダ。", skeletonProps);
-	const Separator = def("Separator", "区切り線。", separatorProps);
-	const Tabs = def("Tabs", "タブ。各タブは label とテキスト content を持つ。content は文字列のみ。", tabsProps);
-	const Accordion = def("Accordion", "開閉できるアコーディオン。各項目は title とテキスト content。content は文字列のみ。", accordionProps);
-	const Breadcrumb = def("Breadcrumb", "パンくずリスト。", breadcrumbProps);
-	const Table = def("Table", "テーブル。columns と rows（行ごとのセル文字列）。各行のセル数は columns の数と一致させる。", tableProps);
-	const TextField = def("TextField", "1行テキスト入力。name でフォーム状態に束縛される。", textFieldProps);
-	const Textarea = def("Textarea", "複数行テキスト入力。name でフォーム状態に束縛される。", textareaProps);
-	const PasswordInput = def("PasswordInput", "パスワード入力。name でフォーム状態に束縛される。", passwordInputProps);
-	const NumberField = def("NumberField", "数値入力。name でフォーム状態に束縛される。", numberFieldProps);
-	const Slider = def("Slider", "スライダー。name でフォーム状態に束縛される。", sliderProps);
-	const Checkbox = def("Checkbox", "チェックボックス。name でフォーム状態に束縛される。", checkboxProps);
-	const Switch = def("Switch", "オン/オフスイッチ。name でフォーム状態に束縛される。", switchProps);
-	const Select = def("Select", "ドロップダウン選択。name でフォーム状態に束縛される。", selectProps);
-	const Radio = def("Radio", "単一選択ラジオ。name でフォーム状態に束縛される。", radioProps);
-	const RadioCard = def("RadioCard", "カード型の単一選択。name でフォーム状態に束縛される。", radioCardProps);
-	const CheckboxCard = def("CheckboxCard", "カード型の複数選択。name でフォーム状態に束縛される。", checkboxCardProps);
-	const Pagination = def("Pagination", "ページネーション。name でフォーム状態に束縛される。", paginationProps);
-	const Tooltip = def("Tooltip", "ツールチップ。ホバー/フォーカスで表示。", tooltipProps);
-	const DropdownMenu = def("DropdownMenu", "ドロップダウンメニュー。", dropdownMenuProps);
-	const Toast = def("Toast", "トースト通知。triggerLabel のボタンで発火。", toastProps);
-	const ScrollLinked = def("ScrollLinked", "ページスクロール進捗バー（fixed top）。", scrollLinkedProps);
-	const ListBox = def("ListBox", "ポップアップ型の単一選択リスト。", listBoxProps);
-	const CheckboxGroup = def("CheckboxGroup", "チェックボックスグループ。name でフォーム状態に束縛。", checkboxGroupProps);
-	const Autocomplete = def("Autocomplete", "タグ風の複数選択オートコンプリート。", autocompleteProps);
-	const FileField = def("FileField", "ファイル選択フィールド（自己完結ウィジェット）。", fileFieldProps);
-	const FormControl = def("FormControl", "ラベル＋ヘルプ/エラー付きフィールド（text/textarea/password）。", formControlProps);
+	const Button = def("Button", "Action button. With href it renders as a link (<a>).", buttonProps);
+	const IconButton = def("IconButton", "Icon-only button (label is required).", iconButtonProps);
+	const CopyButton = def("CopyButton", "Button that copies value to the clipboard and confirms it.", copyButtonProps);
+	const Badge = def("Badge", "Badge for a status or a label.", badgeProps);
+	const Heading = def("Heading", "Heading (h1 to h6).", headingProps);
+	const Anchor = def("Anchor", "Text link.", anchorProps);
+	const Avatar = def("Avatar", "Avatar (an image or initials).", avatarProps);
+	const Code = def("Code", "Inline code or value.", codeProps);
+	const Kbd = def("Kbd", "Keyboard shortcut. keys lists the keys pressed together, and each is drawn as its own key cap.", kbdProps);
+	const EmptyState = def("EmptyState", "Placeholder for a list, table, or search with nothing to show: a title, an optional description, and an optional icon.", emptyStateProps);
+	const Icon = def("Icon", "Icon, chosen by name.", iconProps);
+	const ChevronIcon = def("ChevronIcon", "Arrow icon. direction sets which way it points.", chevronIconProps);
+	const StatusIcon = def("StatusIcon", "Icon for a status (success/info/warning/error). It is decorative; to show a message, use Alert.", statusIconProps);
+	const Alert = def("Alert", "Alert that reports a status. message is a string or an array of strings.", alertProps);
+	const Callout = def("Callout", "Note inside the content (a tip, a caveat). Unlike Alert, it is not announced as a status. content is plain text; label is an optional bold line above it.", calloutProps);
+	const Spinner = def("Spinner", "Loading spinner.", spinnerProps);
+	const Progress = def("Progress", "Progress bar. Leave value out when progress is unknown; it then shows an animated bar.", progressProps);
+	const Skeleton = def("Skeleton", "Loading placeholder.", skeletonProps);
+	const Separator = def("Separator", "Divider line.", separatorProps);
+	const Tabs = def("Tabs", "Tabs. Each tab has a label and text content; content must be a plain string.", tabsProps);
+	const Accordion = def("Accordion", "Accordion of items that open and close. Each item has a title and text content; content must be a plain string.", accordionProps);
+	const Stepper = def("Stepper", "Steps of a process in order, marking the ones done and the current one (display only).", stepperProps);
+	const Breadcrumb = def("Breadcrumb", "Breadcrumb trail.", breadcrumbProps);
+	const SideNav = def("SideNav", "Side navigation: groups of links, each group under a small title. Mark the page being shown with current: true.", sideNavProps);
+	const Table = def("Table", "Table with columns and rows (the cell strings of each row). Every row must have exactly as many cells as there are columns.", tableProps);
+	const DataTable = def("DataTable", "Table the reader can sort (by the columns marked sortable) and, with selectable, pick rows from. Every row must have exactly as many cells as there are columns.", dataTableProps);
+	const Tree = def("Tree", "Tree of nodes that open and close, such as files and folders, navigable with the arrow keys. List every node flat; a child names its parent by parentId.", treeProps);
+	const TextField = def("TextField", "Single-line text input, bound to form state by name.", textFieldProps);
+	const Textarea = def("Textarea", "Multi-line text input, bound to form state by name.", textareaProps);
+	const PasswordInput = def("PasswordInput", "Password input, bound to form state by name.", passwordInputProps);
+	const NumberField = def("NumberField", "Number input, bound to form state by name.", numberFieldProps);
+	const Slider = def("Slider", "Slider, bound to form state by name.", sliderProps);
+	const RangeSlider = def("RangeSlider", "Slider with two thumbs for picking a range, bound to form state by name as [lower, upper].", rangeSliderProps);
+	const ColorPicker = def("ColorPicker", "Color input with a visible label (#rrggbb), hue / saturation / lightness sliders, and optional preset swatches, bound to form state by name.", colorPickerProps);
+	const DateField = def("DateField", "Date input with a visible label (YYYY-MM-DD), bound to form state by name.", dateFieldProps);
+	const DatePicker = def("DatePicker", "Date input with a visible label and a calendar popover (YYYY-MM-DD), bound to form state by name.", datePickerProps);
+	const Calendar = def("Calendar", "Month calendar shown inline for picking one day (YYYY-MM-DD), bound to state by name. It submits nothing; in a form, use DatePicker.", calendarProps);
+	const Checkbox = def("Checkbox", "Checkbox, bound to form state by name.", checkboxProps);
+	const Switch = def("Switch", "On/off switch, bound to form state by name.", switchProps);
+	const Select = def("Select", "Dropdown select, bound to form state by name.", selectProps);
+	const Radio = def("Radio", "Radio buttons for a single choice, bound to form state by name.", radioProps);
+	const RadioCard = def("RadioCard", "Single choice presented as cards, bound to form state by name.", radioCardProps);
+	const CheckboxCard = def("CheckboxCard", "Multiple choice presented as cards, bound to form state by name.", checkboxCardProps);
+	const Pagination = def("Pagination", "Pagination, bound to form state by name.", paginationProps);
+	const Tooltip = def("Tooltip", "Tooltip shown on hover or focus.", tooltipProps);
+	const Toolbar = def("Toolbar", "Row (or column) of buttons that arrow keys move between, e.g. formatting actions. Give each item an icon to show only the icon.", toolbarProps);
+	const DropdownMenu = def("DropdownMenu", "Dropdown menu.", dropdownMenuProps);
+	const Toast = def("Toast", "Toast notification that a button labeled triggerLabel shows.", toastProps);
+	const ListBox = def("ListBox", "Single-choice list in a popup.", listBoxProps);
+	const CheckboxGroup = def("CheckboxGroup", "Group of checkboxes, bound to form state by name.", checkboxGroupProps);
+	const Combobox = def("Combobox", "Text field with a visible label that filters options as you type, for picking one, bound to form state by name. Prefer it to ListBox when there are many options.", comboboxProps);
+	const Autocomplete = def("Autocomplete", "Tag-style autocomplete for multiple choices.", autocompleteProps);
+	const FileField = def("FileField", "File picker field (a self-contained widget). With dropzone, files can also be dropped onto it.", fileFieldProps);
+	const FormControl = def("FormControl", "Field with a label and help or error text (text/textarea/password).", formControlProps);
 	const childRefs = [
 		Button.ref,
 		IconButton.ref,
+		CopyButton.ref,
 		Badge.ref,
 		Heading.ref,
 		Anchor.ref,
 		Avatar.ref,
 		Code.ref,
+		Kbd.ref,
+		EmptyState.ref,
 		Icon.ref,
 		ChevronIcon.ref,
 		StatusIcon.ref,
 		Alert.ref,
+		Callout.ref,
 		Spinner.ref,
 		Progress.ref,
 		Skeleton.ref,
@@ -68,12 +86,21 @@ const buildComponentLibrary = (render) => {
 		Tabs.ref,
 		Accordion.ref,
 		Breadcrumb.ref,
+		Stepper.ref,
+		SideNav.ref,
 		Table.ref,
+		DataTable.ref,
+		Tree.ref,
 		TextField.ref,
 		Textarea.ref,
 		PasswordInput.ref,
 		NumberField.ref,
 		Slider.ref,
+		RangeSlider.ref,
+		DateField.ref,
+		DatePicker.ref,
+		Calendar.ref,
+		ColorPicker.ref,
 		Checkbox.ref,
 		Switch.ref,
 		Select.ref,
@@ -83,27 +110,54 @@ const buildComponentLibrary = (render) => {
 		Pagination.ref,
 		Tooltip.ref,
 		DropdownMenu.ref,
+		Toolbar.ref,
 		Toast.ref,
-		ScrollLinked.ref,
 		ListBox.ref,
 		CheckboxGroup.ref,
+		Combobox.ref,
 		Autocomplete.ref,
 		FileField.ref,
 		FormControl.ref
 	];
-	const Stack = def("Stack", "子要素を縦/横に等間隔で並べるレイアウトコンテナ。Stack の直下に Stack/Grid/Card は置けない。入れ子レイアウトが必要なら Card の中に Stack や Grid を入れる。", stackProps.extend({ children: z.array(z.union(childRefs)).describe("並べる子要素") }));
-	const Grid = def("Grid", "子要素をグリッド状に並べる。cols（1〜6 / auto-fill / auto-fit）と gap、auto-fill/fit 時は minItemSize で各セルの最小サイズを制御。Grid の直下に Stack/Grid/Card は置けない。", gridProps.extend({ children: z.array(z.union(childRefs)).describe("グリッド内の子要素") }));
-	const containerChildRefs = [
+	const containerChildren = (description) => z.array(z.union([
 		...childRefs,
 		Stack.ref,
-		Grid.ref
-	];
-	const Card = def("Card", "コンテンツをまとめるカード（コンテナ）。Stack や Grid も入れられる。interactive を付けるとホバー時にスケールする。", cardProps.extend({ children: z.array(z.union(containerChildRefs)).describe("カード内の子要素") }));
-	const Form = def("Form", "フォーム要素のラッパー（縦並びレイアウト）。", formProps.extend({ children: z.array(z.union(containerChildRefs)).describe("フォーム内の要素") }));
-	const Modal = def("Modal", "モーダルダイアログ。triggerLabel のボタンで開く。", modalProps.extend({ children: z.array(z.union(containerChildRefs)).describe("モーダル内の要素") }));
-	const Dialog = def("Dialog", "センターダイアログ。triggerLabel のボタンで開く。", dialogProps.extend({ children: z.array(z.union(containerChildRefs)).describe("ダイアログ内の要素") }));
-	const Drawer = def("Drawer", "サイドドロワー。triggerLabel のボタンで開く。", drawerProps.extend({ children: z.array(z.union(containerChildRefs)).describe("ドロワー内の要素") }));
-	const Popover = def("Popover", "ポップオーバー。triggerLabel のボタンで開閉。", popoverProps.extend({ children: z.array(z.union(containerChildRefs)).describe("ポップオーバー内の要素") }));
+		Grid.ref,
+		Card.ref,
+		Form.ref,
+		Modal.ref,
+		Dialog.ref,
+		Drawer.ref,
+		Popover.ref,
+		Carousel.ref
+	])).describe(description);
+	const Stack = def("Stack", "Layout container that places its children in a row or a column with even spacing.", stackProps.extend({ get children() {
+		return containerChildren("Children to lay out");
+	} }));
+	const Grid = def("Grid", "Places its children in a grid. Set cols (1 to 6, auto-fill, or auto-fit) and gap; with auto-fill or auto-fit, minItemSize sets the smallest size of each cell.", gridProps.extend({ get children() {
+		return containerChildren("Children of the grid");
+	} }));
+	const Card = def("Card", "Card that groups content (a container). interactive makes it scale up on hover.", cardProps.extend({ get children() {
+		return containerChildren("Children of the card");
+	} }));
+	const Form = def("Form", "Wrapper for form elements (a vertical layout).", formProps.extend({ get children() {
+		return containerChildren("Elements in the form");
+	} }));
+	const Modal = def("Modal", "Modal dialog that opens from a button labeled triggerLabel.", modalProps.extend({ get children() {
+		return containerChildren("Elements in the modal");
+	} }));
+	const Dialog = def("Dialog", "Centered dialog that opens from a button labeled triggerLabel.", dialogProps.extend({ get children() {
+		return containerChildren("Elements in the dialog");
+	} }));
+	const Drawer = def("Drawer", "Side drawer that opens from a button labeled triggerLabel.", drawerProps.extend({ get children() {
+		return containerChildren("Elements in the drawer");
+	} }));
+	const Popover = def("Popover", "Popover that a button labeled triggerLabel opens and closes.", popoverProps.extend({ get children() {
+		return containerChildren("Elements in the popover");
+	} }));
+	const Carousel = def("Carousel", "Horizontally scrolling carousel with previous and next buttons. Each child is one slide. slideSize sets how much of the track one slide takes (full, lg, md for two, sm for three).", carouselProps.extend({ get children() {
+		return containerChildren("Slides, one child per slide");
+	} }));
 	return createLibrary({
 		components: [
 			Stack,
@@ -114,34 +168,48 @@ const buildComponentLibrary = (render) => {
 			Dialog,
 			Drawer,
 			Popover,
+			Carousel,
 			Tooltip,
 			DropdownMenu,
+			Toolbar,
 			Toast,
 			Button,
 			IconButton,
+			CopyButton,
 			Badge,
 			Heading,
 			Anchor,
 			Avatar,
 			Code,
+			Kbd,
+			EmptyState,
 			Icon,
 			ChevronIcon,
 			StatusIcon,
 			Alert,
+			Callout,
 			Spinner,
 			Progress,
 			Skeleton,
 			Separator,
-			ScrollLinked,
 			Tabs,
 			Accordion,
 			Breadcrumb,
+			Stepper,
+			SideNav,
 			Table,
+			DataTable,
+			Tree,
 			TextField,
 			Textarea,
 			PasswordInput,
 			NumberField,
 			Slider,
+			RangeSlider,
+			DateField,
+			DatePicker,
+			Calendar,
+			ColorPicker,
 			Checkbox,
 			Switch,
 			Select,
@@ -151,6 +219,7 @@ const buildComponentLibrary = (render) => {
 			Pagination,
 			ListBox,
 			CheckboxGroup,
+			Combobox,
 			Autocomplete,
 			FileField,
 			FormControl

package/dist/integrations/_shared/renderers.css

@@ -0,0 +1,50 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._6aBdoW_cardSm {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  ._6aBdoW_cardMd {
+    padding: calc(var(--spacing) * 6);
+  }
+
+  ._6aBdoW_cardLg {
+    padding: calc(var(--spacing) * 8);
+  }
+
+  ._6aBdoW_field {
+    gap: calc(var(--spacing) * 1);
+    flex-direction: column;
+    display: flex;
+  }
+
+  ._6aBdoW_fieldLabel {
+    color: var(--color-fg-base);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-sm);
+  }
+
+  ._6aBdoW_keys {
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
+    display: inline-flex;
+  }
+
+  ._6aBdoW_popover {
+    padding: calc(var(--spacing) * 4);
+    border-radius: var(--radius-lg);
+    background-color: var(--color-bg-raised);
+    color: var(--color-fg-base);
+    box-shadow: var(--shadow-md);
+  }
+
+  ._6aBdoW_dropHint {
+    color: var(--color-fg-mute);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+}
+
+@layer utilities;