@k8ordo/ui 1.0.0

package/dist/integrations/_shared/renderers.mjs

@@ -0,0 +1,679 @@
+"use client";
+import { useMessages } from "../../i18n/context.mjs";
+import { Spinner } from "../../components/feedback/spinner/spinner.mjs";
+import { Button } from "../../components/buttons/button/button.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 { GitHubIcon } from "../../components/icons/github-mark.mjs";
+import { LogoIcon } from "../../components/icons/logo.mjs";
+import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "../../components/icons/lucide.mjs";
+import { QiitaIcon } from "../../components/icons/qiita.mjs";
+import { TwitterIcon } from "../../components/icons/twitter.mjs";
+import { VerticalWritingIcon } from "../../components/icons/vertical-writing.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 { Code } from "../../components/data-display/code/code.mjs";
+import { Heading } from "../../components/data-display/heading/heading.mjs";
+import { Table } from "../../components/data-display/table/table.mjs";
+import { Alert } from "../../components/feedback/alert/alert.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 { 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 { 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 { 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 { 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 { Modal } from "../../components/overlays/modal/modal.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";
+import { Fragment, useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/integrations/_shared/renderers.tsx
+const iconMap = {
+	plus: PlusIcon,
+	minus: MinusIcon,
+	check: CheckIcon,
+	close: CloseIcon,
+	copy: CopyIcon,
+	send: SendIcon,
+	mail: MailIcon,
+	subscribe: SubscribeIcon,
+	rss: RSSIcon,
+	history: HistoryIcon,
+	"update-date": UpdateDateIcon,
+	"publish-date": PublishDateIcon,
+	link: LinkIcon,
+	"external-link": ExternalLinkIcon,
+	location: LocationIcon,
+	"navigation-menu": NavigationMenuIcon,
+	list: ListIcon,
+	table: TableIcon,
+	form: FormIcon,
+	view: ViewIcon,
+	"view-off": ViewOffIcon,
+	"light-mode": LightModeIcon,
+	"dark-mode": DarkModeIcon,
+	palette: PaletteIcon,
+	"color-contrast": ColorContrastIcon,
+	"color-info": ColorInfoIcon,
+	"mixed-color": MixedColorIcon,
+	"horizontal-writing": HorizontalWritingIcon,
+	"vertical-writing": VerticalWritingIcon,
+	tag: TagIcon,
+	blog: BlogIcon,
+	news: NewsIcon,
+	slide: SlideIcon,
+	sparkles: SparklesIcon,
+	ai: AIIcon,
+	atom: AtomIcon,
+	accessibility: AccessibilityIcon,
+	"shield-check": ShieldCheckIcon,
+	prepare: PrepareIcon,
+	informative: InformativeIcon,
+	good: GoodIcon,
+	bad: BadIcon,
+	easy: EasyIcon,
+	difficult: DifficultIcon,
+	interesting: InterestingIcon,
+	boring: BoringIcon,
+	shallow: ShallowIcon,
+	logo: LogoIcon,
+	github: GitHubIcon,
+	twitter: TwitterIcon,
+	qiita: QiitaIcon
+};
+/**
+* Generative UI 統合の描画関数（'use client'）。
+*
+* @k8ordo/ui のコンポーネントを無改造で使い、関数 prop（renderItem など）は
+* ここで内部的に組み立てる。json-render / OpenUI の両アダプタがこのモジュールを
+* 参照することで「見た目・橋渡しロジック」を 1 ソースに保つ。
+*
+* NOTE: OpenUI Lang は位置引数のため、省略された中間オプションが `null` で
+* 届きうる。@k8ordo/ui 側は `undefined` のみ想定するので `?? undefined` で正規化。
+*/
+const u = (value) => value ?? void 0;
+function renderButton(props) {
+	const { label, href } = props;
+	return /* @__PURE__ */ jsx(Button, {
+		color: u(props.color),
+		fullWidth: u(props.fullWidth),
+		renderItem: href !== void 0 && href !== "" ? ({ className, children }) => /* @__PURE__ */ jsx("a", {
+			className,
+			href,
+			children
+		}) : void 0,
+		size: u(props.size),
+		variant: u(props.variant),
+		children: label
+	});
+}
+function renderBadge(props) {
+	return /* @__PURE__ */ jsx(Badge, {
+		label: props.label,
+		size: u(props.size),
+		tone: u(props.tone),
+		variant: u(props.variant)
+	});
+}
+function renderHeading(props) {
+	return /* @__PURE__ */ jsx(Heading, {
+		lineClamp: u(props.lineClamp),
+		level: u(props.level) ?? "h2",
+		children: props.label
+	});
+}
+function renderAlert(props) {
+	return /* @__PURE__ */ jsx(Alert, {
+		message: props.message,
+		tone: props.tone
+	});
+}
+function renderSpinner(props) {
+	return /* @__PURE__ */ jsx(Spinner, {
+		label: u(props.label),
+		size: u(props.size)
+	});
+}
+function renderSeparator(props) {
+	return /* @__PURE__ */ jsx(Separator, {
+		color: u(props.color),
+		orientation: u(props.orientation)
+	});
+}
+const CARD_PADDING_CLASS = {
+	sm: "p-4",
+	md: "p-6",
+	lg: "p-8"
+};
+function renderCard(props, children) {
+	return /* @__PURE__ */ jsx(Card, {
+		variant: u(props.variant),
+		interactive: u(props.interactive),
+		width: u(props.width),
+		children: /* @__PURE__ */ jsx("div", {
+			className: CARD_PADDING_CLASS[props.size ?? "md"],
+			children
+		})
+	});
+}
+const TabsView = ({ props }) => {
+	const messages = useMessages();
+	const baseId = useId();
+	const ids = props.tabs.map((_, index) => `${baseId}-tab-${index}`);
+	return /* @__PURE__ */ jsxs(Tabs.Root, {
+		ids,
+		children: [/* @__PURE__ */ jsx(Tabs.List, {
+			label: u(props.label) ?? messages.tabList,
+			children: props.tabs.map((tab, index) => /* @__PURE__ */ jsx(Tabs.Tab, {
+				id: ids[index] ?? "",
+				children: tab.label
+			}, ids[index]))
+		}), props.tabs.map((tab, index) => /* @__PURE__ */ jsx(Tabs.Panel, {
+			id: ids[index] ?? "",
+			children: tab.content
+		}, ids[index]))]
+	});
+};
+function renderTabs(props) {
+	return /* @__PURE__ */ jsx(TabsView, { props });
+}
+function renderStack(props, children) {
+	return /* @__PURE__ */ jsx(Stack, {
+		align: u(props.align),
+		direction: u(props.direction),
+		gap: u(props.gap),
+		justify: u(props.justify),
+		padding: u(props.padding),
+		children
+	});
+}
+function renderGrid(props, children) {
+	return /* @__PURE__ */ jsx(Grid, {
+		cols: u(props.cols),
+		gap: u(props.gap),
+		minItemSize: u(props.minItemSize),
+		children
+	});
+}
+function renderTextField(props, value, onChange) {
+	return /* @__PURE__ */ jsx(TextField, {
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		name: props.name,
+		onChange: (event) => {
+			onChange(event.target.value);
+		},
+		placeholder: u(props.placeholder),
+		readOnly: u(props.readOnly),
+		value
+	});
+}
+function renderCheckbox(props, checked, onChange) {
+	return /* @__PURE__ */ jsx(Checkbox, {
+		checked,
+		disabled: u(props.disabled),
+		label: props.label,
+		name: props.name,
+		onChange
+	});
+}
+function renderSwitch(props, checked, onChange) {
+	return /* @__PURE__ */ jsx(Switch, {
+		checked,
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		label: props.label,
+		name: props.name,
+		onChange,
+		required: u(props.required)
+	});
+}
+function renderSelect(props, value, onChange) {
+	return /* @__PURE__ */ jsx(Select, {
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		name: props.name,
+		onChange: (event) => {
+			onChange(event.target.value);
+		},
+		options: props.options,
+		value
+	});
+}
+function renderTextarea(props, value, onChange) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		autoResize: u(props.autoResize),
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		name: props.name,
+		onChange: (event) => {
+			onChange(event.target.value);
+		},
+		placeholder: u(props.placeholder),
+		readOnly: u(props.readOnly),
+		rows: u(props.rows),
+		value
+	});
+}
+function renderPasswordInput(props, value, onChange) {
+	return /* @__PURE__ */ jsx(PasswordInput, {
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		name: props.name,
+		onChange: (event) => {
+			onChange(event.target.value);
+		},
+		placeholder: u(props.placeholder),
+		value
+	});
+}
+function renderNumberField(props, value, onChange) {
+	return /* @__PURE__ */ jsx(NumberField, {
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		max: u(props.max),
+		min: u(props.min),
+		name: props.name,
+		onChange,
+		step: u(props.step),
+		value
+	});
+}
+function renderSlider(props, value, onChange) {
+	return /* @__PURE__ */ jsx(Slider, {
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		max: u(props.max),
+		min: u(props.min),
+		name: props.name,
+		onChange,
+		step: u(props.step),
+		value
+	});
+}
+const LabeledField = ({ label, children }) => {
+	const labelId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-fg-base text-sm font-medium",
+			id: labelId,
+			children: label
+		}), children(labelId)]
+	});
+};
+const RadioView = ({ props, value, onChange }) => /* @__PURE__ */ jsx(LabeledField, {
+	label: props.label,
+	children: (labelId) => /* @__PURE__ */ jsx(Radio, {
+		"aria-labelledby": labelId,
+		disabled: u(props.disabled),
+		name: props.name,
+		onChange,
+		options: props.options,
+		value
+	})
+});
+const RadioCardView = ({ props, value, onChange }) => /* @__PURE__ */ jsx(LabeledField, {
+	label: props.label,
+	children: (labelId) => /* @__PURE__ */ jsx(RadioCard, {
+		"aria-labelledby": labelId,
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		name: props.name,
+		onChange,
+		options: props.options,
+		value
+	})
+});
+function renderRadio(props, value, onChange) {
+	return /* @__PURE__ */ jsx(RadioView, {
+		onChange,
+		props,
+		value
+	});
+}
+function renderRadioCard(props, value, onChange) {
+	return /* @__PURE__ */ jsx(RadioCardView, {
+		onChange,
+		props,
+		value
+	});
+}
+const CheckboxCardView = ({ props, value, onChange }) => /* @__PURE__ */ jsx(LabeledField, {
+	label: props.label,
+	children: (labelId) => /* @__PURE__ */ jsx(CheckboxCard, {
+		"aria-labelledby": labelId,
+		disabled: u(props.disabled),
+		invalid: u(props.invalid),
+		name: props.name,
+		onChange,
+		options: props.options,
+		value
+	})
+});
+function renderCheckboxCard(props, value, onChange) {
+	return /* @__PURE__ */ jsx(CheckboxCardView, {
+		onChange,
+		props,
+		value
+	});
+}
+function renderPagination(props, currentPage, onChange) {
+	return /* @__PURE__ */ jsx(Pagination, {
+		currentPage,
+		disabled: u(props.disabled),
+		nextLabel: u(props.nextLabel),
+		onChange,
+		prevLabel: u(props.prevLabel),
+		totalPages: props.totalPages
+	});
+}
+function renderIcon(props) {
+	const IconComponent = iconMap[props.name];
+	return /* @__PURE__ */ jsx(IconComponent, { size: u(props.size) ?? "md" });
+}
+function renderChevronIcon(props) {
+	return /* @__PURE__ */ jsx(ChevronIcon, {
+		direction: props.direction,
+		size: u(props.size) ?? "md"
+	});
+}
+function renderStatusIcon(props) {
+	return /* @__PURE__ */ jsx(AlertIcon, {
+		size: u(props.size) ?? "md",
+		status: props.status
+	});
+}
+function renderIconButton(props) {
+	const IconComponent = iconMap[props.icon];
+	return /* @__PURE__ */ jsx(IconButton, {
+		color: u(props.color),
+		label: props.label,
+		size: u(props.size),
+		children: /* @__PURE__ */ jsx(IconComponent, { size: u(props.size) ?? "md" })
+	});
+}
+function renderAnchor(props) {
+	return /* @__PURE__ */ jsx(Anchor, {
+		href: props.href,
+		openInNewTab: u(props.openInNewTab),
+		children: props.label
+	});
+}
+function renderAvatar(props) {
+	return /* @__PURE__ */ jsx(Avatar, {
+		alt: u(props.alt),
+		fallback: u(props.fallback),
+		name: u(props.name),
+		size: u(props.size),
+		src: u(props.src)
+	});
+}
+function renderCode(props) {
+	return /* @__PURE__ */ jsx(Code, { children: props.code });
+}
+function renderProgress(props) {
+	return /* @__PURE__ */ jsx(Progress, {
+		label: u(props.label),
+		max: props.max,
+		min: u(props.min),
+		value: props.value
+	});
+}
+function renderSkeleton(props) {
+	return /* @__PURE__ */ jsx(Skeleton, {
+		animate: u(props.animate),
+		shape: u(props.shape),
+		size: u(props.size)
+	});
+}
+function renderAccordion(props) {
+	return /* @__PURE__ */ jsx(Accordion.Root, { children: props.items.map((item) => /* @__PURE__ */ jsxs(Accordion.Item, {
+		defaultOpen: u(item.defaultOpen),
+		children: [/* @__PURE__ */ jsx(Accordion.Button, { children: item.title }), /* @__PURE__ */ jsx(Accordion.Panel, { children: item.content })]
+	}, item.title)) });
+}
+function renderBreadcrumb(props) {
+	return /* @__PURE__ */ jsx(Breadcrumb.List, {
+		size: u(props.size),
+		children: props.items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(Breadcrumb.Separator, {}), /* @__PURE__ */ jsx(Breadcrumb.Item, { children: item.href !== void 0 && item.href !== "" ? /* @__PURE__ */ jsx(Breadcrumb.Link, {
+			current: u(item.current),
+			href: item.href,
+			children: item.label
+		}) : item.label })] }, item.label))
+	});
+}
+function renderTable(props) {
+	return /* @__PURE__ */ jsxs(Table.Root, { children: [
+		props.caption !== void 0 && props.caption !== "" ? /* @__PURE__ */ jsx(Table.Caption, { children: props.caption }) : null,
+		/* @__PURE__ */ jsx(Table.Head, { children: /* @__PURE__ */ jsx(Table.Row, { children: props.columns.map((column) => /* @__PURE__ */ jsx(Table.HeaderCell, {
+			align: u(column.align),
+			children: column.label
+		}, column.label)) }) }),
+		/* @__PURE__ */ jsx(Table.Body, { children: props.rows.map((row, rowIndex) => /* @__PURE__ */ jsx(Table.Row, { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx(Table.Cell, {
+			align: u(props.columns[cellIndex]?.align),
+			children: cell
+		}, cellIndex)) }, rowIndex)) })
+	] });
+}
+function renderForm(props, children) {
+	return /* @__PURE__ */ jsx(Form, {
+		action: u(props.action),
+		children
+	});
+}
+const OverlayWidget = ({ triggerLabel, title, side, buttonProps, children }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		onClick: () => {
+			setIsOpen(true);
+		},
+		children: triggerLabel
+	}), /* @__PURE__ */ jsx(Modal, {
+		isOpen,
+		onClose: () => {
+			setIsOpen(false);
+		},
+		side,
+		children: /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(Dialog.Header, {
+			onClose: () => {
+				setIsOpen(false);
+			},
+			title
+		}), /* @__PURE__ */ jsx(Dialog.Content, { children })] })
+	})] });
+};
+const ModalWidget = ({ props, children }) => /* @__PURE__ */ jsx(OverlayWidget, {
+	buttonProps: {
+		size: "md",
+		variant: "solid"
+	},
+	side: u(props.side),
+	title: props.title,
+	triggerLabel: props.triggerLabel,
+	children
+});
+const DialogWidget = ({ props, children }) => /* @__PURE__ */ jsx(OverlayWidget, {
+	side: "center",
+	title: props.title,
+	triggerLabel: props.triggerLabel,
+	children
+});
+const DrawerWidget = ({ props, children }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+		onClick: () => {
+			setIsOpen(true);
+		},
+		variant: "outline",
+		children: props.triggerLabel
+	}), /* @__PURE__ */ jsx(Drawer, {
+		isOpen,
+		onClose: () => {
+			setIsOpen(false);
+		},
+		side: u(props.side),
+		title: props.title,
+		children
+	})] });
+};
+function renderPopover(props, children) {
+	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (triggerProps) => /* @__PURE__ */ jsx(Button, {
+		...triggerProps,
+		variant: "outline",
+		children: props.triggerLabel
+	}) }), /* @__PURE__ */ jsx(Popover.Content, { renderItem: ({ id, ref }) => /* @__PURE__ */ jsx("div", {
+		className: "bg-bg-raised text-fg-base rounded-lg p-4 shadow-md",
+		id,
+		ref,
+		children
+	}) })] });
+}
+function renderTooltip(props) {
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { renderItem: (triggerProps) => /* @__PURE__ */ jsx(Button, {
+		...triggerProps,
+		variant: "outline",
+		children: props.triggerLabel
+	}) }), /* @__PURE__ */ jsx(Tooltip.Content, { children: props.content })] });
+}
+function renderDropdownMenu(props) {
+	return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, { label: props.triggerLabel }), /* @__PURE__ */ jsx(DropdownMenu.Content, { children: props.items.map((item) => /* @__PURE__ */ jsx(DropdownMenu.Item, {
+		label: item.label,
+		onAction: () => {}
+	}, item.label)) })] });
+}
+function renderScrollLinked(_props) {
+	return /* @__PURE__ */ jsx(ScrollLinked, {});
+}
+const ToastTriggerInner = ({ props }) => {
+	const { open } = useToast();
+	return /* @__PURE__ */ jsx(Button, {
+		onClick: () => {
+			open(props.tone, props.message);
+		},
+		variant: "outline",
+		children: props.triggerLabel
+	});
+};
+const ToastWidget = ({ props }) => /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(ToastTriggerInner, { props }) });
+function renderListBox(props, value, onChange) {
+	return /* @__PURE__ */ jsxs(ListBox.Root, {
+		onChange,
+		options: props.options,
+		value: value === "" ? void 0 : value,
+		children: [/* @__PURE__ */ jsx(ListBox.Trigger, { label: u(props.label) }), /* @__PURE__ */ jsx(ListBox.Content, {})]
+	});
+}
+function renderCheckboxGroup(props, value, onChange) {
+	return /* @__PURE__ */ jsx(LabeledField, {
+		label: props.label,
+		children: (labelId) => /* @__PURE__ */ jsx(CheckboxGroup.Root, {
+			"aria-labelledby": labelId,
+			name: props.name,
+			onChange,
+			value,
+			children: props.options.map((option) => /* @__PURE__ */ jsx(CheckboxGroup.Item, {
+				itemValue: option.value,
+				label: option.label
+			}, option.value))
+		})
+	});
+}
+const AutocompleteView = ({ props, value, onChange }) => {
+	const id = useId();
+	return /* @__PURE__ */ jsx(Autocomplete, {
+		disabled: u(props.disabled),
+		id,
+		invalid: u(props.invalid),
+		name: props.name,
+		onChange,
+		options: props.options,
+		value
+	});
+};
+function renderAutocomplete(props, value, onChange) {
+	return /* @__PURE__ */ jsx(AutocompleteView, {
+		onChange,
+		props,
+		value
+	});
+}
+const FileFieldWidget = ({ props }) => {
+	const messages = useMessages();
+	return /* @__PURE__ */ jsxs(FileField.Root, {
+		maxFiles: u(props.maxFiles),
+		multiple: u(props.multiple),
+		children: [/* @__PURE__ */ jsx(FileField.Trigger, { renderItem: ({ onClick, disabled }) => /* @__PURE__ */ jsx(Button, {
+			disabled,
+			onClick,
+			variant: "outline",
+			children: u(props.triggerLabel) ?? messages.fileFieldTrigger
+		}) }), /* @__PURE__ */ jsx(FileField.ItemList, { clearable: u(props.clearable) })]
+	});
+};
+const FormControlWidget = ({ props }) => {
+	const [value, setValue] = useState(props.defaultValue ?? "");
+	const fieldType = u(props.fieldType) ?? "text";
+	return /* @__PURE__ */ jsx(FormControl, {
+		errorText: u(props.errorText),
+		helpText: u(props.helpText),
+		invalid: u(props.invalid),
+		label: props.label,
+		renderInput: (inputProps) => fieldType === "textarea" ? /* @__PURE__ */ jsx(Textarea, {
+			...inputProps,
+			name: props.name,
+			onChange: (event) => {
+				setValue(event.target.value);
+			},
+			placeholder: u(props.placeholder),
+			value
+		}) : fieldType === "password" ? /* @__PURE__ */ jsx(PasswordInput, {
+			...inputProps,
+			name: props.name,
+			onChange: (event) => {
+				setValue(event.target.value);
+			},
+			placeholder: u(props.placeholder),
+			value
+		}) : /* @__PURE__ */ jsx(TextField, {
+			...inputProps,
+			name: props.name,
+			onChange: (event) => {
+				setValue(event.target.value);
+			},
+			placeholder: u(props.placeholder),
+			value
+		}),
+		required: u(props.required)
+	});
+};
+//#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 };