@k8ordo/ui 2.0.0 → 2.2.0

package/dist/integrations/json-render/catalog.mjs

@@ -1,5 +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 "../_shared/schemas.mjs";
-import { z } from "zod";
+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 "../_shared/schemas.mjs";
 import { autoFixSpec, defineCatalog, isNonEmptySpec, validateSpec } from "@json-render/core";
 import { schema } from "@json-render/react/schema";
 //#region src/integrations/json-render/catalog.ts
@@ -17,202 +16,263 @@ const catalog = defineCatalog(schema, {
 		Stack: {
 			props: stackProps,
 			slots: ["default"],
-			description: "子要素を縦/横に等間隔で並べるレイアウトコンテナ。gap で子要素間の間隔、padding（none〜xl）で内側の余白を付ける。セクションに余白が欲しいときは padding を指定する。"
+			description: "Layout container that places its children in a row or a column with even spacing. gap sets the space between children and padding (none to xl) the space inside; give a section padding when it needs room around its content."
 		},
 		Grid: {
 			props: gridProps,
 			slots: ["default"],
-			description: "子要素をグリッド状に並べる。cols（1〜6 / auto-fill / auto-fit）と gap、auto-fill/fit 時は minItemSize で各セルの最小サイズを制御。"
+			description: "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."
 		},
 		Button: {
 			props: buttonProps,
-			description: "アクションボタン。href を指定するとリンク（<a>）になる。"
+			description: "Action button. With href it renders as a link (<a>)."
 		},
 		Card: {
 			props: cardProps,
 			slots: ["default"],
-			description: "コンテンツをまとめるカード（コンテナ）。内側 padding は size（sm/md/lg、デフォルト md）で決まる。中身を Stack で囲む場合に重ねて padding を指定する必要はない。interactive を付けるとホバー時にスケールする。"
+			description: "Card that groups content (a container). size (sm/md/lg, default md) sets its inner padding, so a Stack inside it needs no padding of its own. interactive makes it scale up on hover."
 		},
 		Badge: {
 			props: badgeProps,
-			description: "ステータスやラベルのバッジ。"
+			description: "Badge for a status or a label."
 		},
 		Heading: {
 			props: headingProps,
-			description: "見出し（h1〜h6）。"
+			description: "Heading (h1 to h6)."
 		},
 		Alert: {
 			props: alertProps,
-			description: "状態を伝えるアラート。message は文字列または文字列配列。"
+			description: "Alert that reports a status. message is a string or an array of strings."
+		},
+		Callout: {
+			props: calloutProps,
+			description: "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."
 		},
 		Spinner: {
 			props: spinnerProps,
-			description: "ローディングスピナー。"
+			description: "Loading spinner."
 		},
 		Separator: {
 			props: separatorProps,
-			description: "区切り線。"
+			description: "Divider line."
 		},
 		TextField: {
 			props: textFieldProps,
-			description: "1行テキスト入力。defaultValue を $bindState で状態に束縛できる。"
+			description: "Single-line text input. defaultValue can be bound to state with $bindState."
 		},
 		Checkbox: {
 			props: checkboxProps,
-			description: "チェックボックス。defaultChecked を $bindState で束縛できる。"
+			description: "Checkbox. defaultChecked can be bound to state with $bindState."
 		},
 		Switch: {
 			props: switchProps,
-			description: "オン/オフスイッチ。defaultChecked を $bindState で束縛できる。"
+			description: "On/off switch. defaultChecked can be bound to state with $bindState."
 		},
 		Select: {
 			props: selectProps,
-			description: "ドロップダウン選択。defaultValue を $bindState で状態に束縛できる。"
+			description: "Dropdown select. defaultValue can be bound to state with $bindState."
 		},
 		Tabs: {
 			props: tabsProps,
-			description: "タブ。各タブは label とテキスト content を持つ。"
+			description: "Tabs. Each tab has a label and text content."
 		},
 		Accordion: {
 			props: accordionProps,
-			description: "開閉できるアコーディオン。各項目は title とテキスト content。"
+			description: "Accordion of items that open and close. Each item has a title and text content."
+		},
+		Stepper: {
+			props: stepperProps,
+			description: "Steps of a process in order, marking the ones done and the current one (display only)."
 		},
 		Breadcrumb: {
 			props: breadcrumbProps,
-			description: "パンくずリスト。"
+			description: "Breadcrumb trail."
+		},
+		DataTable: {
+			props: dataTableProps,
+			description: "Table the reader can sort (by the columns marked sortable) and, with selectable, pick rows from. Use it for records someone works through; use Table for data only read."
+		},
+		Tree: {
+			props: treeProps,
+			description: "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."
+		},
+		SideNav: {
+			props: sideNavProps,
+			description: "Side navigation: groups of links, each group under a small title. Mark the page being shown with current: true."
 		},
 		Table: {
 			props: tableProps,
-			description: "テーブル。columns（見出し）と rows（行ごとのセル文字列）。"
+			description: "Table with columns (the headers) and rows (the cell strings of each row)."
 		},
 		Anchor: {
 			props: anchorProps,
-			description: "テキストリンク。"
+			description: "Text link."
 		},
 		Avatar: {
 			props: avatarProps,
-			description: "アバター（画像 or イニシャル）。"
+			description: "Avatar (an image or initials)."
 		},
 		Code: {
 			props: codeProps,
-			description: "インラインのコード/値表示。"
+			description: "Inline code or value."
+		},
+		Kbd: {
+			props: kbdProps,
+			description: "Keyboard shortcut. keys lists the keys pressed together, and each is drawn as its own key cap."
+		},
+		EmptyState: {
+			props: emptyStateProps,
+			description: "Placeholder for a list, table, or search with nothing to show: a title, an optional description, and an optional icon."
+		},
+		Carousel: {
+			props: carouselProps,
+			slots: ["default"],
+			description: "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)."
 		},
 		Progress: {
 			props: progressProps,
-			description: "進捗バー。"
+			description: "Progress bar. Leave value out when progress is unknown; it then shows an animated bar."
 		},
 		Skeleton: {
 			props: skeletonProps,
-			description: "ローディングのプレースホルダ。"
+			description: "Loading placeholder."
 		},
 		Icon: {
 			props: iconProps,
-			description: "アイコン（name で指定）。"
+			description: "Icon, chosen by name."
 		},
 		ChevronIcon: {
 			props: chevronIconProps,
-			description: "矢印アイコン。direction で向きを指定。"
+			description: "Arrow icon. direction sets which way it points."
 		},
 		StatusIcon: {
 			props: statusIconProps,
-			description: "ステータスを表すアイコン（success/info/warning/error）。装飾用途で、メッセージ表示なら Alert を使う。"
+			description: "Icon for a status (success/info/warning/error). It is decorative; to show a message, use Alert."
 		},
 		IconButton: {
 			props: iconButtonProps,
-			description: "アイコンのみのボタン（label は必須・ツールチップ）。"
+			description: "Icon-only button (label is required and shown as its tooltip)."
+		},
+		CopyButton: {
+			props: copyButtonProps,
+			description: "Button that copies value to the clipboard and confirms it. With iconOnly, label becomes its tooltip."
 		},
 		Textarea: {
 			props: textareaProps,
-			description: "複数行テキスト入力。defaultValue を $bindState で束縛できる。"
+			description: "Multi-line text input. defaultValue can be bound to state with $bindState."
 		},
 		PasswordInput: {
 			props: passwordInputProps,
-			description: "パスワード入力。defaultValue を $bindState で束縛できる。"
+			description: "Password input. defaultValue can be bound to state with $bindState."
 		},
 		NumberField: {
 			props: numberFieldProps,
-			description: "数値入力。defaultValue を $bindState で束縛できる。"
+			description: "Number input. defaultValue can be bound to state with $bindState."
 		},
 		Slider: {
 			props: sliderProps,
-			description: "スライダー。defaultValue を $bindState で束縛できる。"
+			description: "Slider. defaultValue can be bound to state with $bindState."
+		},
+		RangeSlider: {
+			props: rangeSliderProps,
+			description: "Slider with two thumbs for picking a range. defaultValue ([lower, upper]) can be bound to state with $bindState."
+		},
+		DateField: {
+			props: dateFieldProps,
+			description: "Date input with a visible label. Dates are YYYY-MM-DD strings. defaultValue can be bound to state with $bindState."
+		},
+		DatePicker: {
+			props: datePickerProps,
+			description: "Date input with a visible label and a button that opens a calendar. Dates are YYYY-MM-DD strings. defaultValue can be bound to state with $bindState."
+		},
+		Calendar: {
+			props: calendarProps,
+			description: "Month calendar shown inline for picking one day (YYYY-MM-DD). It submits nothing; in a form, use DatePicker. defaultValue can be bound to state with $bindState."
+		},
+		ColorPicker: {
+			props: colorPickerProps,
+			description: "Color input with a visible label: a #rrggbb text field, hue / saturation / lightness sliders, and optional preset swatches. defaultValue can be bound to state with $bindState."
 		},
 		Radio: {
 			props: radioProps,
-			description: "単一選択ラジオ。defaultValue を $bindState で束縛できる。"
+			description: "Radio buttons for a single choice. defaultValue can be bound to state with $bindState."
 		},
 		RadioCard: {
 			props: radioCardProps,
-			description: "カード型の単一選択。defaultValue を $bindState で束縛できる。"
+			description: "Single choice presented as cards. defaultValue can be bound to state with $bindState."
 		},
 		CheckboxCard: {
 			props: checkboxCardProps,
-			description: "カード型の複数選択。defaultValue を $bindState で束縛できる。"
+			description: "Multiple choice presented as cards. defaultValue can be bound to state with $bindState."
 		},
 		Pagination: {
 			props: paginationProps,
-			description: "ページネーション。defaultPage を $bindState で束縛できる。"
+			description: "Pagination. defaultPage can be bound to state with $bindState."
 		},
 		Form: {
 			props: formProps,
 			slots: ["default"],
-			description: "フォーム要素のラッパー（縦並びレイアウト）。"
+			description: "Wrapper for form elements (a vertical layout)."
 		},
 		Modal: {
 			props: modalProps,
 			slots: ["default"],
-			description: "モーダルダイアログ。triggerLabel のボタンで開く自己完結ウィジェット。"
+			description: "Modal dialog. A self-contained widget that opens from a button labeled triggerLabel."
 		},
 		Dialog: {
 			props: dialogProps,
 			slots: ["default"],
-			description: "センターダイアログ。triggerLabel のボタンで開く。"
+			description: "Centered dialog that opens from a button labeled triggerLabel."
 		},
 		Drawer: {
 			props: drawerProps,
 			slots: ["default"],
-			description: "サイドドロワー。triggerLabel のボタンで開く。"
+			description: "Side drawer that opens from a button labeled triggerLabel."
 		},
 		Popover: {
 			props: popoverProps,
 			slots: ["default"],
-			description: "ポップオーバー。triggerLabel のボタンで開閉。"
+			description: "Popover that a button labeled triggerLabel opens and closes."
 		},
 		Tooltip: {
 			props: tooltipProps,
-			description: "ツールチップ。ホバー/フォーカスで表示。"
+			description: "Tooltip shown on hover or focus."
+		},
+		Toolbar: {
+			props: toolbarProps,
+			description: "Row (or column) of buttons that arrow keys move between, e.g. formatting actions. Give each item an icon to show only the icon."
 		},
 		DropdownMenu: {
 			props: dropdownMenuProps,
-			description: "ドロップダウンメニュー。"
+			description: "Dropdown menu."
 		},
 		Toast: {
 			props: toastProps,
-			description: "トースト通知。triggerLabel のボタンで発火。"
-		},
-		ScrollLinked: {
-			props: scrollLinkedProps,
-			description: "ページスクロール進捗バー（fixed top）。"
+			description: "Toast notification that a button labeled triggerLabel shows."
 		},
 		ListBox: {
 			props: listBoxProps,
-			description: "ポップアップ型の単一選択リスト。"
+			description: "Single-choice list in a popup."
 		},
 		CheckboxGroup: {
 			props: checkboxGroupProps,
-			description: "チェックボックスグループ。"
+			description: "Group of checkboxes."
+		},
+		Combobox: {
+			props: comboboxProps,
+			description: "Text field with a visible label that filters a list of options as you type, for picking one. Prefer it to ListBox when there are many options. defaultValue can be bound to state with $bindState."
 		},
 		Autocomplete: {
 			props: autocompleteProps,
-			description: "タグ風の複数選択オートコンプリート。"
+			description: "Tag-style autocomplete for multiple choices."
 		},
 		FileField: {
 			props: fileFieldProps,
-			description: "ファイル選択フィールド。"
+			description: "File picker field. With dropzone, files can also be dropped onto it."
 		},
 		FormControl: {
 			props: formControlProps,
-			description: "ラベル＋ヘルプ/エラー付きフィールド（text/textarea/password）。"
+			description: "Field with a label and help or error text (text/textarea/password)."
 		}
 	},
 	actions: {}
@@ -225,9 +285,9 @@ const catalog = defineCatalog(schema, {
 * const systemPrompt = catalog.prompt({ customRules: [...uiRules] });
 */
 const uiRules = [
-	"Table の rows は各行のセル数を columns の数と必ず一致させる。",
-	"href は https:// もしくは http:// で始まる絶対 URL か、/ で始まるパスのみ。",
-	"Tabs と Accordion の content はプレーンテキストのみ。コンポーネントは入れ子にできない。"
+	"Every row in rows of a Table must have exactly as many cells as there are columns.",
+	"An href must be an absolute URL starting with https:// or http://, or a path starting with /.",
+	"The content of Tabs and Accordion must be plain text; components cannot be nested inside it."
 ];
 const buildRepairPrompt = (issues) => ["The generated UI spec is invalid. Fix the following issues and return the corrected spec:", ...issues.map((issue) => issue.elementKey === void 0 ? `- ${issue.message}` : `- [${issue.elementKey}] ${issue.message}`)].join("\n");
 /**
@@ -238,7 +298,10 @@ const buildRepairPrompt = (issues) => ["The generated UI spec is invalid. Fix th
 * 既定値のまま描画されて壊れたことにすら気づけない。キー集合を取り出して
 * 自前で照合する。
 */
-const knownPropKeys = (propsSchema) => propsSchema instanceof z.ZodObject ? Object.keys(propsSchema.shape) : void 0;
+const knownPropKeys = (propsSchema) => {
+	const shape = "shape" in propsSchema ? propsSchema.shape : void 0;
+	return typeof shape === "object" && shape !== null ? Object.keys(shape) : void 0;
+};
 /** spec 側は LLM 出力なので、型に反して props が欠けていることがある。 */
 const givenPropKeys = (props) => typeof props === "object" && props !== null ? Object.keys(props) : [];
 /**

package/dist/integrations/json-render/registry.d.mts

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { Spec } from "@json-render/core";
 //#region src/integrations/json-render/registry.d.ts
-declare const registry: import("@json-render/react").ComponentRegistry;
+export declare const registry: import("@json-render/react").ComponentRegistry;
 /**
  * spec を @k8ordo/ui の部品で描画する、事前結線済みコンポーネント。
  *
@@ -17,7 +17,7 @@ declare const registry: import("@json-render/react").ComponentRegistry;
  *
  * <JsonRenderUI spec={spec} />
  */
-declare const JsonRenderUI: FC<{
+export declare const JsonRenderUI: FC<{
   spec: Spec | null;
   loading?: boolean;
   onStateChange?: (changes: Array<{
@@ -25,5 +25,4 @@ declare const JsonRenderUI: FC<{
     value: unknown;
   }>) => void;
 }>;
-//#endregion
-export { JsonRenderUI, registry };
+//#endregion

package/dist/integrations/json-render/registry.mjs

@@ -1,7 +1,7 @@
 "use client";
-import { DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, 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 } from "../_shared/renderers.mjs";
+import { DataTableWidget, DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAutocomplete, renderAvatar, renderBadge, renderBreadcrumb, renderButton, renderCalendar, renderCallout, renderCard, renderCarousel, renderCheckbox, renderCheckboxCard, renderCheckboxGroup, renderChevronIcon, renderCode, renderColorPicker, renderCombobox, renderCopyButton, renderDateField, renderDatePicker, renderDropdownMenu, renderEmptyState, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderKbd, renderListBox, renderNumberField, renderPagination, renderPasswordInput, renderPopover, renderProgress, renderRadio, renderRadioCard, renderRangeSlider, renderSelect, renderSeparator, renderSideNav, renderSkeleton, renderSlider, renderSpinner, renderStack, renderStatusIcon, renderStepper, renderSwitch, renderTable, renderTabs, renderTextField, renderTextarea, renderToolbar, renderTooltip, renderTree } from "../_shared/renderers.mjs";
 import { catalog } from "./catalog.mjs";
-import { useState } from "react";
+import { Children, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { JSONUIProvider, Renderer, defineRegistry, useBoundProp } from "@json-render/react";
 //#region src/integrations/json-render/registry.tsx
@@ -26,6 +26,7 @@ const { registry } = defineRegistry(catalog, { components: {
 	Badge: ({ props }) => renderBadge(props),
 	Heading: ({ props }) => renderHeading(props),
 	Alert: ({ props }) => renderAlert(props),
+	Callout: ({ props }) => renderCallout(props),
 	Spinner: ({ props }) => renderSpinner(props),
 	Separator: ({ props }) => renderSeparator(props),
 	Tabs: ({ props }) => renderTabs(props),
@@ -48,15 +49,23 @@ const { registry } = defineRegistry(catalog, { components: {
 	Anchor: ({ props }) => renderAnchor(props),
 	Avatar: ({ props }) => renderAvatar(props),
 	Code: ({ props }) => renderCode(props),
+	Kbd: ({ props }) => renderKbd(props),
+	EmptyState: ({ props }) => renderEmptyState(props),
+	Carousel: ({ props, children }) => renderCarousel(props, Children.toArray(children)),
 	Progress: ({ props }) => renderProgress(props),
 	Skeleton: ({ props }) => renderSkeleton(props),
 	Icon: ({ props }) => renderIcon(props),
 	ChevronIcon: ({ props }) => renderChevronIcon(props),
 	StatusIcon: ({ props }) => renderStatusIcon(props),
 	IconButton: ({ props }) => renderIconButton(props),
+	CopyButton: ({ props }) => renderCopyButton(props),
 	Accordion: ({ props }) => renderAccordion(props),
 	Breadcrumb: ({ props }) => renderBreadcrumb(props),
+	Stepper: ({ props }) => renderStepper(props),
 	Table: ({ props }) => renderTable(props),
+	DataTable: ({ props }) => /* @__PURE__ */ jsx(DataTableWidget, { props }),
+	Tree: ({ props }) => renderTree(props),
+	SideNav: ({ props }) => renderSideNav(props),
 	Textarea: ({ props, bindings }) => {
 		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, "");
 		return renderTextarea(props, value, setValue);
@@ -65,6 +74,27 @@ const { registry } = defineRegistry(catalog, { components: {
 		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, "");
 		return renderPasswordInput(props, value, setValue);
 	},
+	RangeSlider: ({ props, bindings }) => {
+		const whole = [props.min ?? 0, props.max ?? 100];
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, whole);
+		return renderRangeSlider(props, value, setValue);
+	},
+	ColorPicker: ({ props, bindings }) => {
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, "");
+		return renderColorPicker(props, value, setValue);
+	},
+	DateField: ({ props, bindings }) => {
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, "");
+		return renderDateField(props, value, setValue);
+	},
+	DatePicker: ({ props, bindings }) => {
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, "");
+		return renderDatePicker(props, value, setValue);
+	},
+	Calendar: ({ props, bindings }) => {
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, "");
+		return renderCalendar(props, value, setValue);
+	},
 	Radio: ({ props, bindings }) => {
 		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, "", props.defaultValue ?? props.options[0]?.value ?? "");
 		return renderRadio(props, value, setValue);
@@ -74,7 +104,7 @@ const { registry } = defineRegistry(catalog, { components: {
 		return renderRadioCard(props, value, setValue);
 	},
 	NumberField: ({ props, bindings }) => {
-		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, 0);
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, null);
 		return renderNumberField(props, value, setValue);
 	},
 	Slider: ({ props, bindings }) => {
@@ -105,8 +135,8 @@ const { registry } = defineRegistry(catalog, { components: {
 	Popover: ({ props, children }) => renderPopover(props, children),
 	Tooltip: ({ props }) => renderTooltip(props),
 	DropdownMenu: ({ props }) => renderDropdownMenu(props),
+	Toolbar: ({ props }) => renderToolbar(props),
 	Toast: ({ props }) => /* @__PURE__ */ jsx(ToastWidget, { props }),
-	ScrollLinked: ({ props }) => renderScrollLinked(props),
 	ListBox: ({ props, bindings }) => {
 		const path = bindings?.defaultValue;
 		const hasBinding = path !== void 0 && path !== "";
@@ -121,6 +151,10 @@ const { registry } = defineRegistry(catalog, { components: {
 		const [local, setLocal] = useState(props.defaultValue ?? []);
 		return renderCheckboxGroup(props, hasBinding ? bound ?? [] : local, hasBinding ? setBound : setLocal);
 	},
+	Combobox: ({ props, bindings }) => {
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, "");
+		return renderCombobox(props, value, setValue);
+	},
 	Autocomplete: ({ props, bindings }) => {
 		const path = bindings?.defaultValue;
 		const hasBinding = path !== void 0 && path !== "";

package/dist/integrations/openui/form-views.d.mts

@@ -1,21 +1,26 @@
-import { AutocompleteProps, CheckboxCardProps, CheckboxGroupProps, CheckboxProps, ListBoxProps, NumberFieldProps, PaginationProps, PasswordInputProps, RadioCardProps, RadioProps, SelectProps, SliderProps, SwitchProps, TextFieldProps, TextareaProps } from "../_shared/schemas.mjs";
+import { AutocompleteProps, CalendarProps, CheckboxCardProps, CheckboxGroupProps, CheckboxProps, ColorPickerProps, ComboboxProps, DateFieldProps, DatePickerProps, ListBoxProps, NumberFieldProps, PaginationProps, PasswordInputProps, RadioCardProps, RadioProps, RangeSliderProps, SelectProps, SliderProps, SwitchProps, TextFieldProps, TextareaProps } from "../_shared/schemas.mjs";
 import { FC } from "react";
 import { ComponentRenderProps } from "@openuidev/react-lang";
 //#region src/integrations/openui/form-views.d.ts
-declare const TextFieldView: FC<ComponentRenderProps<TextFieldProps>>;
-declare const CheckboxView: FC<ComponentRenderProps<CheckboxProps>>;
-declare const SwitchView: FC<ComponentRenderProps<SwitchProps>>;
-declare const SelectView: FC<ComponentRenderProps<SelectProps>>;
-declare const TextareaView: FC<ComponentRenderProps<TextareaProps>>;
-declare const PasswordInputView: FC<ComponentRenderProps<PasswordInputProps>>;
-declare const NumberFieldView: FC<ComponentRenderProps<NumberFieldProps>>;
-declare const SliderView: FC<ComponentRenderProps<SliderProps>>;
-declare const RadioView: FC<ComponentRenderProps<RadioProps>>;
-declare const RadioCardView: FC<ComponentRenderProps<RadioCardProps>>;
-declare const CheckboxCardView: FC<ComponentRenderProps<CheckboxCardProps>>;
-declare const PaginationView: FC<ComponentRenderProps<PaginationProps>>;
-declare const ListBoxView: FC<ComponentRenderProps<ListBoxProps>>;
-declare const CheckboxGroupView: FC<ComponentRenderProps<CheckboxGroupProps>>;
-declare const AutocompleteView: FC<ComponentRenderProps<AutocompleteProps>>;
-//#endregion
-export { AutocompleteView, CheckboxCardView, CheckboxGroupView, CheckboxView, ListBoxView, NumberFieldView, PaginationView, PasswordInputView, RadioCardView, RadioView, SelectView, SliderView, SwitchView, TextFieldView, TextareaView };
+export declare const TextFieldView: FC<ComponentRenderProps<TextFieldProps>>;
+export declare const CheckboxView: FC<ComponentRenderProps<CheckboxProps>>;
+export declare const SwitchView: FC<ComponentRenderProps<SwitchProps>>;
+export declare const SelectView: FC<ComponentRenderProps<SelectProps>>;
+export declare const TextareaView: FC<ComponentRenderProps<TextareaProps>>;
+export declare const PasswordInputView: FC<ComponentRenderProps<PasswordInputProps>>;
+export declare const NumberFieldView: FC<ComponentRenderProps<NumberFieldProps>>;
+export declare const SliderView: FC<ComponentRenderProps<SliderProps>>;
+export declare const RadioView: FC<ComponentRenderProps<RadioProps>>;
+export declare const RadioCardView: FC<ComponentRenderProps<RadioCardProps>>;
+export declare const CheckboxCardView: FC<ComponentRenderProps<CheckboxCardProps>>;
+export declare const PaginationView: FC<ComponentRenderProps<PaginationProps>>;
+export declare const ListBoxView: FC<ComponentRenderProps<ListBoxProps>>;
+export declare const CheckboxGroupView: FC<ComponentRenderProps<CheckboxGroupProps>>;
+export declare const ComboboxView: FC<ComponentRenderProps<ComboboxProps>>;
+export declare const AutocompleteView: FC<ComponentRenderProps<AutocompleteProps>>;
+export declare const ColorPickerView: FC<ComponentRenderProps<ColorPickerProps>>;
+export declare const DateFieldView: FC<ComponentRenderProps<DateFieldProps>>;
+export declare const DatePickerView: FC<ComponentRenderProps<DatePickerProps>>;
+export declare const CalendarView: FC<ComponentRenderProps<CalendarProps>>;
+export declare const RangeSliderView: FC<ComponentRenderProps<RangeSliderProps>>;
+//#endregion

package/dist/integrations/openui/form-views.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { renderAutocomplete, renderCheckbox, renderCheckboxCard, renderCheckboxGroup, renderListBox, renderNumberField, renderPagination, renderPasswordInput, renderRadio, renderRadioCard, renderSelect, renderSlider, renderSwitch, renderTextField, renderTextarea } from "../_shared/renderers.mjs";
+import { renderAutocomplete, renderCalendar, renderCheckbox, renderCheckboxCard, renderCheckboxGroup, renderColorPicker, renderCombobox, renderDateField, renderDatePicker, renderListBox, renderNumberField, renderPagination, renderPasswordInput, renderRadio, renderRadioCard, renderRangeSlider, renderSelect, renderSlider, renderSwitch, renderTextField, renderTextarea } from "../_shared/renderers.mjs";
 import { useStateField } from "@openuidev/react-lang";
 //#region src/integrations/openui/form-views.tsx
 const TextFieldView = ({ props }) => {
@@ -27,7 +27,7 @@ const PasswordInputView = ({ props }) => {
 	return renderPasswordInput(props, field.value, field.setValue);
 };
 const NumberFieldView = ({ props }) => {
-	const field = useStateField(props.name, props.defaultValue ?? 0);
+	const field = useStateField(props.name, props.defaultValue ?? null);
 	return renderNumberField(props, field.value, field.setValue);
 };
 const SliderView = ({ props }) => {
@@ -58,9 +58,33 @@ const CheckboxGroupView = ({ props }) => {
 	const field = useStateField(props.name, props.defaultValue ?? []);
 	return renderCheckboxGroup(props, field.value, field.setValue);
 };
+const ComboboxView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? "");
+	return renderCombobox(props, field.value, field.setValue);
+};
 const AutocompleteView = ({ props }) => {
 	const field = useStateField(props.name, props.defaultValue ?? []);
 	return renderAutocomplete(props, field.value, field.setValue);
 };
+const ColorPickerView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? "");
+	return renderColorPicker(props, field.value, field.setValue);
+};
+const DateFieldView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? "");
+	return renderDateField(props, field.value, field.setValue);
+};
+const DatePickerView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? "");
+	return renderDatePicker(props, field.value, field.setValue);
+};
+const CalendarView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? "");
+	return renderCalendar(props, field.value, field.setValue);
+};
+const RangeSliderView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? [props.min ?? 0, props.max ?? 100]);
+	return renderRangeSlider(props, field.value, field.setValue);
+};
 //#endregion
-export { AutocompleteView, CheckboxCardView, CheckboxGroupView, CheckboxView, ListBoxView, NumberFieldView, PaginationView, PasswordInputView, RadioCardView, RadioView, SelectView, SliderView, SwitchView, TextFieldView, TextareaView };
+export { AutocompleteView, CalendarView, CheckboxCardView, CheckboxGroupView, CheckboxView, ColorPickerView, ComboboxView, DateFieldView, DatePickerView, ListBoxView, NumberFieldView, PaginationView, PasswordInputView, RadioCardView, RadioView, RangeSliderView, SelectView, SliderView, SwitchView, TextFieldView, TextareaView };