@k8ordo/ui 2.0.0 → 2.2.0

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;

package/dist/integrations/_shared/renderers.d.mts

@@ -1,71 +1,90 @@
-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 { TreeItem } from "../../components/data-display/tree/tree.mjs";
+import "../../components/data-display/tree/index.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 { FC, ReactNode } from "react";
 //#region src/integrations/_shared/renderers.d.ts
-declare function renderButton(props: ButtonProps): ReactNode;
-declare function renderBadge(props: BadgeProps): ReactNode;
-declare function renderHeading(props: HeadingProps): ReactNode;
-declare function renderAlert(props: AlertProps): ReactNode;
-declare function renderSpinner(props: SpinnerProps): ReactNode;
-declare function renderSeparator(props: SeparatorProps): ReactNode;
-declare function renderCard(props: CardProps, children: ReactNode): ReactNode;
-declare const TabsView: FC<{
+export declare function renderButton(props: ButtonProps): ReactNode;
+export declare function renderBadge(props: BadgeProps): ReactNode;
+export declare function renderHeading(props: HeadingProps): ReactNode;
+export declare function renderAlert(props: AlertProps): ReactNode;
+export declare function renderCallout(props: CalloutProps): ReactNode;
+export declare function renderSpinner(props: SpinnerProps): ReactNode;
+export declare function renderSeparator(props: SeparatorProps): ReactNode;
+export declare function renderCard(props: CardProps, children: ReactNode): ReactNode;
+export declare const TabsView: FC<{
   props: TabsProps;
 }>;
-declare function renderTabs(props: TabsProps): ReactNode;
-declare function renderStack(props: StackProps, children: ReactNode): ReactNode;
-declare function renderGrid(props: GridProps, children: ReactNode): ReactNode;
-declare function renderTextField(props: TextFieldProps, value: string, onChange: (next: string) => void): ReactNode;
-declare function renderCheckbox(props: CheckboxProps, checked: boolean, onChange: (next: boolean) => void): ReactNode;
-declare function renderSwitch(props: SwitchProps, checked: boolean, onChange: (next: boolean) => void): ReactNode;
-declare function renderSelect(props: SelectProps, value: string, onChange: (next: string) => void): ReactNode;
-declare function renderTextarea(props: TextareaProps, value: string, onChange: (next: string) => void): ReactNode;
-declare function renderPasswordInput(props: PasswordInputProps, value: string, onChange: (next: string) => void): ReactNode;
-declare function renderNumberField(props: NumberFieldProps, value: number, onChange: (next: number) => void): ReactNode;
-declare function renderSlider(props: SliderProps, value: number, onChange: (next: number) => void): ReactNode;
-declare function renderRadio(props: RadioProps, value: string, onChange: (next: string) => void): ReactNode;
-declare function renderRadioCard(props: RadioCardProps, value: string, onChange: (next: string) => void): ReactNode;
-declare function renderCheckboxCard(props: CheckboxCardProps, value: string[], onChange: (next: string[]) => void): ReactNode;
-declare function renderPagination(props: PaginationProps, currentPage: number, onChange: (next: number) => void): ReactNode;
-declare function renderIcon(props: IconProps): ReactNode;
-declare function renderChevronIcon(props: ChevronIconProps): ReactNode;
-declare function renderStatusIcon(props: StatusIconProps): ReactNode;
-declare function renderIconButton(props: IconButtonProps): ReactNode;
-declare function renderAnchor(props: AnchorProps): ReactNode;
-declare function renderAvatar(props: AvatarProps): ReactNode;
-declare function renderCode(props: CodeProps): ReactNode;
-declare function renderProgress(props: ProgressProps): ReactNode;
-declare function renderSkeleton(props: SkeletonProps): ReactNode;
-declare function renderAccordion(props: AccordionProps): ReactNode;
-declare function renderBreadcrumb(props: BreadcrumbProps): ReactNode;
-declare function renderTable(props: TableProps): ReactNode;
-declare function renderForm(props: FormProps, children: ReactNode): ReactNode;
-declare const ModalWidget: FC<{
+export declare function renderTabs(props: TabsProps): ReactNode;
+export declare function renderStack(props: StackProps, children: ReactNode): ReactNode;
+export declare function renderGrid(props: GridProps, children: ReactNode): ReactNode;
+export declare function renderTextField(props: TextFieldProps, value: string, onChange: (next: string) => void): ReactNode;
+export declare function renderCheckbox(props: CheckboxProps, checked: boolean, onChange: (next: boolean) => void): ReactNode;
+export declare function renderSwitch(props: SwitchProps, checked: boolean, onChange: (next: boolean) => void): ReactNode;
+export declare function renderSelect(props: SelectProps, value: string, onChange: (next: string) => void): ReactNode;
+export declare function renderTextarea(props: TextareaProps, value: string, onChange: (next: string) => void): ReactNode;
+export declare function renderPasswordInput(props: PasswordInputProps, value: string, onChange: (next: string) => void): ReactNode;
+export declare function renderNumberField(props: NumberFieldProps, value: number | null, onChange: (next: number | null) => void): ReactNode;
+export declare function renderSlider(props: SliderProps, value: number, onChange: (next: number) => void): ReactNode;
+export declare function renderRangeSlider(props: RangeSliderProps, value: readonly [number, number], onChange: (next: readonly [number, number]) => void): ReactNode;
+export declare function renderColorPicker(props: ColorPickerProps, value: string, onChange: (next: string) => void): ReactNode;
+export declare function renderDateField(props: DateFieldProps, value: string, onChange: (next: string) => void): ReactNode;
+export declare function renderDatePicker(props: DatePickerProps, value: string, onChange: (next: string) => void): ReactNode;
+export declare function renderCalendar(props: CalendarProps, value: string, onChange: (next: string) => void): ReactNode;
+export declare function renderRadio(props: RadioProps, value: string, onChange: (next: string) => void): ReactNode;
+export declare function renderRadioCard(props: RadioCardProps, value: string, onChange: (next: string) => void): ReactNode;
+export declare function renderCheckboxCard(props: CheckboxCardProps, value: string[], onChange: (next: string[]) => void): ReactNode;
+export declare function renderPagination(props: PaginationProps, currentPage: number, onChange: (next: number) => void): ReactNode;
+export declare function renderIcon(props: IconProps): ReactNode;
+export declare function renderChevronIcon(props: ChevronIconProps): ReactNode;
+export declare function renderStatusIcon(props: StatusIconProps): ReactNode;
+export declare function renderIconButton(props: IconButtonProps): ReactNode;
+export declare function renderCopyButton(props: CopyButtonProps): ReactNode;
+export declare function renderAnchor(props: AnchorProps): ReactNode;
+export declare function renderAvatar(props: AvatarProps): ReactNode;
+export declare function renderCode(props: CodeProps): ReactNode;
+export declare function renderKbd(props: KbdProps): ReactNode;
+export declare function renderEmptyState(props: EmptyStateProps): ReactNode;
+export declare function renderCarousel(props: CarouselProps, slides: readonly ReactNode[]): ReactNode;
+export declare function renderProgress(props: ProgressProps): ReactNode;
+export declare function renderSkeleton(props: SkeletonProps): ReactNode;
+export declare function renderAccordion(props: AccordionProps): ReactNode;
+export declare function renderBreadcrumb(props: BreadcrumbProps): ReactNode;
+export declare function renderStepper(props: StepperProps): ReactNode;
+export declare const toTree: (items: TreeProps['items']) => TreeItem[];
+export declare function renderTree(props: TreeProps): ReactNode;
+export declare function renderSideNav(props: SideNavProps): ReactNode;
+export declare function renderTable(props: TableProps): ReactNode;
+export declare function renderForm(props: FormProps, children: ReactNode): ReactNode;
+export declare const ModalWidget: FC<{
   props: ModalProps;
   children: ReactNode;
 }>;
-declare const DialogWidget: FC<{
+export declare const DialogWidget: FC<{
   props: DialogProps;
   children: ReactNode;
 }>;
-declare const DrawerWidget: FC<{
+export declare const DrawerWidget: FC<{
   props: DrawerProps;
   children: ReactNode;
 }>;
-declare function renderPopover(props: PopoverProps, children: ReactNode): ReactNode;
-declare function renderTooltip(props: TooltipProps): ReactNode;
-declare function renderDropdownMenu(props: DropdownMenuProps): ReactNode;
-declare function renderScrollLinked(_props: ScrollLinkedProps): ReactNode;
-declare const ToastWidget: FC<{
+export declare function renderPopover(props: PopoverProps, children: ReactNode): ReactNode;
+export declare function renderTooltip(props: TooltipProps): ReactNode;
+export declare function renderToolbar(props: ToolbarProps): ReactNode;
+export declare function renderDropdownMenu(props: DropdownMenuProps): ReactNode;
+export declare const DataTableWidget: FC<{
+  props: DataTableProps;
+}>;
+export declare const ToastWidget: FC<{
   props: ToastProps;
 }>;
-declare function renderListBox(props: ListBoxProps, value: string, onChange: (next: string) => void): ReactNode;
-declare function renderCheckboxGroup(props: CheckboxGroupProps, value: string[], onChange: (next: string[]) => void): ReactNode;
-declare function renderAutocomplete(props: AutocompleteProps, value: string[], onChange: (next: string[]) => void): ReactNode;
-declare const FileFieldWidget: FC<{
+export declare function renderListBox(props: ListBoxProps, value: string, onChange: (next: string) => void): ReactNode;
+export declare function renderCheckboxGroup(props: CheckboxGroupProps, value: string[], onChange: (next: string[]) => void): ReactNode;
+export declare function renderAutocomplete(props: AutocompleteProps, value: string[], onChange: (next: string[]) => void): ReactNode;
+export declare function renderCombobox(props: ComboboxProps, value: string, onChange: (next: string) => void): ReactNode;
+export declare const FileFieldWidget: FC<{
   props: FileFieldProps;
 }>;
-declare const FormControlWidget: FC<{
+export declare const FormControlWidget: FC<{
   props: FormControlProps;
 }>;
-//#endregion
-export { DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, TabsView, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAutocomplete, renderAvatar, renderBadge, renderBreadcrumb, renderButton, renderCard, renderCheckbox, renderCheckboxCard, renderCheckboxGroup, renderChevronIcon, renderCode, renderDropdownMenu, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderListBox, renderNumberField, renderPagination, renderPasswordInput, renderPopover, renderProgress, renderRadio, renderRadioCard, renderScrollLinked, renderSelect, renderSeparator, renderSkeleton, renderSlider, renderSpinner, renderStack, renderStatusIcon, renderSwitch, renderTable, renderTabs, renderTextField, renderTextarea, renderTooltip };
+//#endregion