@k8ordo/ui 1.0.0

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

@@ -0,0 +1,311 @@
+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 { autoFixSpec, defineCatalog, isNonEmptySpec, validateSpec } from "@json-render/core";
+import { schema } from "@json-render/react/schema";
+//#region src/integrations/json-render/catalog.ts
+/**
+* `@k8ordo/ui/json-render`（サーバー安全）
+*
+* LLM が生成してよい部品の契約（Zod スキーマのみ）。React に依存しないので
+* RSC のサーバーコンポーネントから import して `catalog.prompt()` で
+* システムプロンプトを生成できる。
+*
+* 実際の描画は `@k8ordo/ui/json-render/registry`（'use client'）。
+*/
+const catalog = defineCatalog(schema, {
+	components: {
+		Stack: {
+			props: stackProps,
+			slots: ["default"],
+			description: "子要素を縦/横に等間隔で並べるレイアウトコンテナ。gap で子要素間の間隔、padding（none〜xl）で内側の余白を付ける。セクションに余白が欲しいときは padding を指定する。"
+		},
+		Grid: {
+			props: gridProps,
+			slots: ["default"],
+			description: "子要素をグリッド状に並べる。cols（1〜6 / auto-fill / auto-fit）と gap、auto-fill/fit 時は minItemSize で各セルの最小サイズを制御。"
+		},
+		Button: {
+			props: buttonProps,
+			description: "アクションボタン。href を指定するとリンク（<a>）になる。"
+		},
+		Card: {
+			props: cardProps,
+			slots: ["default"],
+			description: "コンテンツをまとめるカード（コンテナ）。内側 padding は size（sm/md/lg、デフォルト md）で決まる。中身を Stack で囲む場合に重ねて padding を指定する必要はない。interactive を付けるとホバー時にスケールする。"
+		},
+		Badge: {
+			props: badgeProps,
+			description: "ステータスやラベルのバッジ。"
+		},
+		Heading: {
+			props: headingProps,
+			description: "見出し（h1〜h6）。"
+		},
+		Alert: {
+			props: alertProps,
+			description: "状態を伝えるアラート。message は文字列または文字列配列。"
+		},
+		Spinner: {
+			props: spinnerProps,
+			description: "ローディングスピナー。"
+		},
+		Separator: {
+			props: separatorProps,
+			description: "区切り線。"
+		},
+		TextField: {
+			props: textFieldProps,
+			description: "1行テキスト入力。defaultValue を $bindState で状態に束縛できる。"
+		},
+		Checkbox: {
+			props: checkboxProps,
+			description: "チェックボックス。defaultChecked を $bindState で束縛できる。"
+		},
+		Switch: {
+			props: switchProps,
+			description: "オン/オフスイッチ。defaultChecked を $bindState で束縛できる。"
+		},
+		Select: {
+			props: selectProps,
+			description: "ドロップダウン選択。defaultValue を $bindState で状態に束縛できる。"
+		},
+		Tabs: {
+			props: tabsProps,
+			description: "タブ。各タブは label とテキスト content を持つ。"
+		},
+		Accordion: {
+			props: accordionProps,
+			description: "開閉できるアコーディオン。各項目は title とテキスト content。"
+		},
+		Breadcrumb: {
+			props: breadcrumbProps,
+			description: "パンくずリスト。"
+		},
+		Table: {
+			props: tableProps,
+			description: "テーブル。columns（見出し）と rows（行ごとのセル文字列）。"
+		},
+		Anchor: {
+			props: anchorProps,
+			description: "テキストリンク。"
+		},
+		Avatar: {
+			props: avatarProps,
+			description: "アバター（画像 or イニシャル）。"
+		},
+		Code: {
+			props: codeProps,
+			description: "インラインのコード/値表示。"
+		},
+		Progress: {
+			props: progressProps,
+			description: "進捗バー。"
+		},
+		Skeleton: {
+			props: skeletonProps,
+			description: "ローディングのプレースホルダ。"
+		},
+		Icon: {
+			props: iconProps,
+			description: "アイコン（name で指定）。"
+		},
+		ChevronIcon: {
+			props: chevronIconProps,
+			description: "矢印アイコン。direction で向きを指定。"
+		},
+		StatusIcon: {
+			props: statusIconProps,
+			description: "ステータスを表すアイコン（success/info/warning/error）。装飾用途で、メッセージ表示なら Alert を使う。"
+		},
+		IconButton: {
+			props: iconButtonProps,
+			description: "アイコンのみのボタン（label は必須・ツールチップ）。"
+		},
+		Textarea: {
+			props: textareaProps,
+			description: "複数行テキスト入力。defaultValue を $bindState で束縛できる。"
+		},
+		PasswordInput: {
+			props: passwordInputProps,
+			description: "パスワード入力。defaultValue を $bindState で束縛できる。"
+		},
+		NumberField: {
+			props: numberFieldProps,
+			description: "数値入力。defaultValue を $bindState で束縛できる。"
+		},
+		Slider: {
+			props: sliderProps,
+			description: "スライダー。defaultValue を $bindState で束縛できる。"
+		},
+		Radio: {
+			props: radioProps,
+			description: "単一選択ラジオ。defaultValue を $bindState で束縛できる。"
+		},
+		RadioCard: {
+			props: radioCardProps,
+			description: "カード型の単一選択。defaultValue を $bindState で束縛できる。"
+		},
+		CheckboxCard: {
+			props: checkboxCardProps,
+			description: "カード型の複数選択。defaultValue を $bindState で束縛できる。"
+		},
+		Pagination: {
+			props: paginationProps,
+			description: "ページネーション。defaultPage を $bindState で束縛できる。"
+		},
+		Form: {
+			props: formProps,
+			slots: ["default"],
+			description: "フォーム要素のラッパー（縦並びレイアウト）。"
+		},
+		Modal: {
+			props: modalProps,
+			slots: ["default"],
+			description: "モーダルダイアログ。triggerLabel のボタンで開く自己完結ウィジェット。"
+		},
+		Dialog: {
+			props: dialogProps,
+			slots: ["default"],
+			description: "センターダイアログ。triggerLabel のボタンで開く。"
+		},
+		Drawer: {
+			props: drawerProps,
+			slots: ["default"],
+			description: "サイドドロワー。triggerLabel のボタンで開く。"
+		},
+		Popover: {
+			props: popoverProps,
+			slots: ["default"],
+			description: "ポップオーバー。triggerLabel のボタンで開閉。"
+		},
+		Tooltip: {
+			props: tooltipProps,
+			description: "ツールチップ。ホバー/フォーカスで表示。"
+		},
+		DropdownMenu: {
+			props: dropdownMenuProps,
+			description: "ドロップダウンメニュー。"
+		},
+		Toast: {
+			props: toastProps,
+			description: "トースト通知。triggerLabel のボタンで発火。"
+		},
+		ScrollLinked: {
+			props: scrollLinkedProps,
+			description: "ページスクロール進捗バー（fixed top）。"
+		},
+		ListBox: {
+			props: listBoxProps,
+			description: "ポップアップ型の単一選択リスト。"
+		},
+		CheckboxGroup: {
+			props: checkboxGroupProps,
+			description: "チェックボックスグループ。"
+		},
+		Autocomplete: {
+			props: autocompleteProps,
+			description: "タグ風の複数選択オートコンプリート。"
+		},
+		FileField: {
+			props: fileFieldProps,
+			description: "ファイル選択フィールド。"
+		},
+		FormControl: {
+			props: formControlProps,
+			description: "ラベル＋ヘルプ/エラー付きフィールド（text/textarea/password）。"
+		}
+	},
+	actions: {}
+});
+/**
+* LLM が破りやすい制約を `catalog.prompt({ customRules })` に注入するための
+* 横断ルール集。json-render のシステムプロンプト本文に追記される。
+*
+* @example
+* const systemPrompt = catalog.prompt({ customRules: [...uiRules] });
+*/
+const uiRules = [
+	"Table の rows は各行のセル数を columns の数と必ず一致させる。",
+	"href は https:// もしくは http:// で始まる絶対 URL か、/ で始まるパスのみ。",
+	"Tabs と Accordion の content はプレーンテキストのみ。コンポーネントは入れ子にできない。"
+];
+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");
+/**
+* スキーマが受け付ける prop キーの集合。
+*
+* zod の `z.object` は未知のキーを **エラーにせず黙って落とす**。そのため
+* `safeParse` だけでは「旧 API のキーを渡した spec」が `ok: true` で通り、
+* 既定値のまま描画されて壊れたことにすら気づけない。キー集合を取り出して
+* 自前で照合する。
+*/
+const knownPropKeys = (propsSchema) => propsSchema instanceof z.ZodObject ? Object.keys(propsSchema.shape) : void 0;
+/** spec 側は LLM 出力なので、型に反して props が欠けていることがある。 */
+const givenPropKeys = (props) => typeof props === "object" && props !== null ? Object.keys(props) : [];
+/**
+* LLM が生成した spec を検証し、描画可能なら型付き spec を、壊れていれば
+* そのまま LLM に投げ返せる修復プロンプトを返す。
+*
+* 内部では (1) 機械修正（`autoFixSpec`）→ (2) 構造検証（`validateSpec`）→
+* (3) 要素ごとに catalog の Zod スキーマで props 検証（未知キーの検出を含む）、
+* を行う。`catalog.validate()` は使わない（現行の上流バージョンでは正常な spec を
+* 誤って弾き、props 検証も実質無効になるため）。
+*
+* @example
+* const result = validateGeneratedSpec(JSON.parse(llmOutput));
+* if (result.ok) {
+*   return <JsonRenderUI spec={result.spec} />;
+* }
+* const retried = await llm(result.repairPrompt);
+*/
+const validateGeneratedSpec = (input) => {
+	if (!isNonEmptySpec(input)) {
+		const issues = [{ message: "The spec must be an object with a `root` key and an `elements` map." }];
+		return {
+			ok: false,
+			issues,
+			repairPrompt: buildRepairPrompt(issues)
+		};
+	}
+	const { spec, fixes } = autoFixSpec(input);
+	const issues = validateSpec(spec).issues.map((issue) => ({
+		elementKey: issue.elementKey,
+		message: issue.message
+	}));
+	const components = catalog.data.components;
+	for (const [key, element] of Object.entries(spec.elements)) {
+		const def = components[element.type];
+		if (!def) {
+			issues.push({
+				elementKey: key,
+				message: `Unknown component type "${element.type}". Use one of: ${catalog.componentNames.join(", ")}.`
+			});
+			continue;
+		}
+		const parsed = def.props.safeParse(element.props);
+		if (!parsed.success) for (const issue of parsed.error.issues) {
+			const path = issue.path.join(".");
+			issues.push({
+				elementKey: key,
+				message: `${element.type}${path ? `.${path}` : ""}: ${issue.message}`
+			});
+		}
+		const allowed = knownPropKeys(def.props);
+		if (allowed === void 0) continue;
+		for (const propKey of givenPropKeys(element.props)) if (!allowed.includes(propKey)) issues.push({
+			elementKey: key,
+			message: `${element.type}: Unknown prop "${propKey}". Allowed props: ${allowed.join(", ")}.`
+		});
+	}
+	if (issues.length === 0) return {
+		ok: true,
+		spec,
+		fixes
+	};
+	return {
+		ok: false,
+		issues,
+		repairPrompt: buildRepairPrompt(issues)
+	};
+};
+//#endregion
+export { catalog, uiRules, validateGeneratedSpec };

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

@@ -0,0 +1,29 @@
+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;
+/**
+ * spec を @k8ordo/ui の部品で描画する、事前結線済みコンポーネント。
+ *
+ * `JSONUIProvider` と `Renderer` を内部で結線し registry も渡し済みなので、
+ * 利用者は spec を渡すだけでよい（上流の生 import や 'use client' 境界ファイルの
+ * 自作が不要）。フォーム値を回収したいときは `onStateChange` を渡す。
+ * 高度な構成（navigate / handlers / validationFunctions など）が必要なら、
+ * 引き続き `registry` を `JSONUIProvider` に直接渡す。
+ *
+ * @example
+ * 'use client';
+ * import { JsonRenderUI } from '@k8ordo/ui/json-render/registry';
+ *
+ * <JsonRenderUI spec={spec} />
+ */
+declare const JsonRenderUI: FC<{
+  spec: Spec | null;
+  loading?: boolean;
+  onStateChange?: (changes: Array<{
+    path: string;
+    value: unknown;
+  }>) => void;
+}>;
+//#endregion
+export { JsonRenderUI, registry };

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

@@ -0,0 +1,159 @@
+"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 { catalog } from "./catalog.mjs";
+import { 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
+/**
+* `@k8ordo/ui/json-render/registry`（'use client'）
+*
+* `<Renderer registry={registry} spec={...} />` に渡す実装対応表。
+* フックを使うためクライアント専用。プロンプト生成だけ行いたい場合は
+* サーバー安全な `@k8ordo/ui/json-render`（catalog）を使う。
+*/
+const useBoundOrLocal = (sourceValue, path, fallback, initial = sourceValue ?? fallback) => {
+	const hasBinding = path !== void 0 && path !== "";
+	const [bound, setBound] = useBoundProp(sourceValue, path);
+	const [local, setLocal] = useState(initial);
+	return [hasBinding ? bound ?? fallback : local, hasBinding ? setBound : setLocal];
+};
+const { registry } = defineRegistry(catalog, { components: {
+	Stack: ({ props, children }) => renderStack(props, children),
+	Grid: ({ props, children }) => renderGrid(props, children),
+	Card: ({ props, children }) => renderCard(props, children),
+	Button: ({ props }) => renderButton(props),
+	Badge: ({ props }) => renderBadge(props),
+	Heading: ({ props }) => renderHeading(props),
+	Alert: ({ props }) => renderAlert(props),
+	Spinner: ({ props }) => renderSpinner(props),
+	Separator: ({ props }) => renderSeparator(props),
+	Tabs: ({ props }) => renderTabs(props),
+	TextField: ({ props, bindings }) => {
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, "");
+		return renderTextField(props, value, setValue);
+	},
+	Checkbox: ({ props, bindings }) => {
+		const [checked, setChecked] = useBoundOrLocal(props.defaultChecked, bindings?.defaultChecked, false);
+		return renderCheckbox(props, checked, setChecked);
+	},
+	Switch: ({ props, bindings }) => {
+		const [checked, setChecked] = useBoundOrLocal(props.defaultChecked, bindings?.defaultChecked, false);
+		return renderSwitch(props, checked, setChecked);
+	},
+	Select: ({ props, bindings }) => {
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, "", props.defaultValue ?? props.options[0]?.value ?? "");
+		return renderSelect(props, value, setValue);
+	},
+	Anchor: ({ props }) => renderAnchor(props),
+	Avatar: ({ props }) => renderAvatar(props),
+	Code: ({ props }) => renderCode(props),
+	Progress: ({ props }) => renderProgress(props),
+	Skeleton: ({ props }) => renderSkeleton(props),
+	Icon: ({ props }) => renderIcon(props),
+	ChevronIcon: ({ props }) => renderChevronIcon(props),
+	StatusIcon: ({ props }) => renderStatusIcon(props),
+	IconButton: ({ props }) => renderIconButton(props),
+	Accordion: ({ props }) => renderAccordion(props),
+	Breadcrumb: ({ props }) => renderBreadcrumb(props),
+	Table: ({ props }) => renderTable(props),
+	Textarea: ({ props, bindings }) => {
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, "");
+		return renderTextarea(props, value, setValue);
+	},
+	PasswordInput: ({ props, bindings }) => {
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, "");
+		return renderPasswordInput(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);
+	},
+	RadioCard: ({ props, bindings }) => {
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, "", props.defaultValue ?? props.options[0]?.value ?? "");
+		return renderRadioCard(props, value, setValue);
+	},
+	NumberField: ({ props, bindings }) => {
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, 0);
+		return renderNumberField(props, value, setValue);
+	},
+	Slider: ({ props, bindings }) => {
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, 0, props.defaultValue ?? props.min ?? 0);
+		return renderSlider(props, value, setValue);
+	},
+	CheckboxCard: ({ props, bindings }) => {
+		const [value, setValue] = useBoundOrLocal(props.defaultValue, bindings?.defaultValue, []);
+		return renderCheckboxCard(props, value, setValue);
+	},
+	Pagination: ({ props, bindings }) => {
+		const [page, setPage] = useBoundOrLocal(props.defaultPage, bindings?.defaultPage, 1);
+		return renderPagination(props, page, setPage);
+	},
+	Form: ({ props, children }) => renderForm(props, children),
+	Modal: ({ props, children }) => /* @__PURE__ */ jsx(ModalWidget, {
+		props,
+		children
+	}),
+	Dialog: ({ props, children }) => /* @__PURE__ */ jsx(DialogWidget, {
+		props,
+		children
+	}),
+	Drawer: ({ props, children }) => /* @__PURE__ */ jsx(DrawerWidget, {
+		props,
+		children
+	}),
+	Popover: ({ props, children }) => renderPopover(props, children),
+	Tooltip: ({ props }) => renderTooltip(props),
+	DropdownMenu: ({ props }) => renderDropdownMenu(props),
+	Toast: ({ props }) => /* @__PURE__ */ jsx(ToastWidget, { props }),
+	ScrollLinked: ({ props }) => renderScrollLinked(props),
+	ListBox: ({ props, bindings }) => {
+		const path = bindings?.defaultValue;
+		const hasBinding = path !== void 0 && path !== "";
+		const [bound, setBound] = useBoundProp(props.defaultValue, path);
+		const [local, setLocal] = useState(props.defaultValue ?? props.options[0]?.value ?? "");
+		return renderListBox(props, hasBinding ? bound ?? "" : local, hasBinding ? setBound : setLocal);
+	},
+	CheckboxGroup: ({ props, bindings }) => {
+		const path = bindings?.defaultValue;
+		const hasBinding = path !== void 0 && path !== "";
+		const [bound, setBound] = useBoundProp(props.defaultValue, path);
+		const [local, setLocal] = useState(props.defaultValue ?? []);
+		return renderCheckboxGroup(props, hasBinding ? bound ?? [] : local, hasBinding ? setBound : setLocal);
+	},
+	Autocomplete: ({ props, bindings }) => {
+		const path = bindings?.defaultValue;
+		const hasBinding = path !== void 0 && path !== "";
+		const [bound, setBound] = useBoundProp(props.defaultValue, path);
+		const [local, setLocal] = useState(props.defaultValue ?? []);
+		return renderAutocomplete(props, hasBinding ? bound ?? [] : local, hasBinding ? setBound : setLocal);
+	},
+	FileField: ({ props }) => /* @__PURE__ */ jsx(FileFieldWidget, { props }),
+	FormControl: ({ props }) => /* @__PURE__ */ jsx(FormControlWidget, { props })
+} });
+/**
+* spec を @k8ordo/ui の部品で描画する、事前結線済みコンポーネント。
+*
+* `JSONUIProvider` と `Renderer` を内部で結線し registry も渡し済みなので、
+* 利用者は spec を渡すだけでよい（上流の生 import や 'use client' 境界ファイルの
+* 自作が不要）。フォーム値を回収したいときは `onStateChange` を渡す。
+* 高度な構成（navigate / handlers / validationFunctions など）が必要なら、
+* 引き続き `registry` を `JSONUIProvider` に直接渡す。
+*
+* @example
+* 'use client';
+* import { JsonRenderUI } from '@k8ordo/ui/json-render/registry';
+*
+* <JsonRenderUI spec={spec} />
+*/
+const JsonRenderUI = ({ spec, loading, onStateChange }) => /* @__PURE__ */ jsx(JSONUIProvider, {
+	registry,
+	onStateChange,
+	children: /* @__PURE__ */ jsx(Renderer, {
+		registry,
+		spec,
+		loading
+	})
+});
+//#endregion
+export { JsonRenderUI, registry };

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

@@ -0,0 +1,21 @@
+import { AutocompleteProps, CheckboxCardProps, CheckboxGroupProps, CheckboxProps, ListBoxProps, NumberFieldProps, PaginationProps, PasswordInputProps, RadioCardProps, RadioProps, 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 };

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

@@ -0,0 +1,66 @@
+"use client";
+import { renderAutocomplete, renderCheckbox, renderCheckboxCard, renderCheckboxGroup, renderListBox, renderNumberField, renderPagination, renderPasswordInput, renderRadio, renderRadioCard, 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 }) => {
+	const field = useStateField(props.name, props.defaultValue ?? "");
+	return renderTextField(props, field.value, field.setValue);
+};
+const CheckboxView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultChecked ?? false);
+	return renderCheckbox(props, field.value, field.setValue);
+};
+const SwitchView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultChecked ?? false);
+	return renderSwitch(props, field.value, field.setValue);
+};
+const SelectView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? props.options[0]?.value ?? "");
+	return renderSelect(props, field.value, field.setValue);
+};
+const TextareaView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? "");
+	return renderTextarea(props, field.value, field.setValue);
+};
+const PasswordInputView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? "");
+	return renderPasswordInput(props, field.value, field.setValue);
+};
+const NumberFieldView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? 0);
+	return renderNumberField(props, field.value, field.setValue);
+};
+const SliderView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? props.min ?? 0);
+	return renderSlider(props, field.value, field.setValue);
+};
+const RadioView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? props.options[0]?.value ?? "");
+	return renderRadio(props, field.value, field.setValue);
+};
+const RadioCardView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? props.options[0]?.value ?? "");
+	return renderRadioCard(props, field.value, field.setValue);
+};
+const CheckboxCardView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? []);
+	return renderCheckboxCard(props, field.value, field.setValue);
+};
+const PaginationView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultPage ?? 1);
+	return renderPagination(props, field.value, field.setValue);
+};
+const ListBoxView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? props.options[0]?.value ?? "");
+	return renderListBox(props, field.value, field.setValue);
+};
+const CheckboxGroupView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? []);
+	return renderCheckboxGroup(props, field.value, field.setValue);
+};
+const AutocompleteView = ({ props }) => {
+	const field = useStateField(props.name, props.defaultValue ?? []);
+	return renderAutocomplete(props, field.value, field.setValue);
+};
+//#endregion
+export { AutocompleteView, CheckboxCardView, CheckboxGroupView, CheckboxView, ListBoxView, NumberFieldView, PaginationView, PasswordInputView, RadioCardView, RadioView, SelectView, SliderView, SwitchView, TextFieldView, TextareaView };