@alepha/ui 0.18.2 → 0.19.0

package/dist/{auth/AuthLayout-C161NeF6.js → demo/AuthLayout-Dq5tSLSc.js}

@@ -1,8 +1,7 @@
-import { o as AlephaMantineProvider } from "./core-DyfeVr5c.js";
+import { _ as AlephaMantineProvider } from "./core-DRtQklr3.js";
 import { Flex } from "@mantine/core";
 import { jsx } from "react/jsx-runtime";
 import { NestedView } from "alepha/react/router";
-
 //#region ../../src/auth/components/AuthLayout.tsx
 const AuthLayout = () => {
 	return /* @__PURE__ */ jsx(AlephaMantineProvider, {
@@ -16,7 +15,7 @@ const AuthLayout = () => {
 		})
 	});
 };
-
 //#endregion
 export { AuthLayout as default };
-//# sourceMappingURL=AuthLayout-C161NeF6.js.map
+
+//# sourceMappingURL=AuthLayout-Dq5tSLSc.js.map

package/dist/demo/{AuthLayout-DN-ClJQk.js.map → AuthLayout-Dq5tSLSc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"AuthLayout-DN-ClJQk.js","names":[],"sources":["../../src/auth/components/AuthLayout.tsx"],"sourcesContent":["import { AlephaMantineProvider } from \"@alepha/ui\";\nimport { Flex } from \"@mantine/core\";\nimport { NestedView } from \"alepha/react/router\";\n\nconst AuthLayout = () => {\n  return (\n    <AlephaMantineProvider omnibar={false}>\n      <Flex flex={1} align={\"center\"} h={\"100vh\"} justify={\"center\"}>\n        <NestedView />\n      </Flex>\n    </AlephaMantineProvider>\n  );\n};\n\nexport default AuthLayout;\n"],"mappings":";;;;;;AAIA,MAAM,mBAAmB;AACvB,QACE,oBAAC;EAAsB,SAAS;YAC9B,oBAAC;GAAK,MAAM;GAAG,OAAO;GAAU,GAAG;GAAS,SAAS;aACnD,oBAAC,eAAa;IACT;GACe"}
+{"version":3,"file":"AuthLayout-Dq5tSLSc.js","names":[],"sources":["../../src/auth/components/AuthLayout.tsx"],"sourcesContent":["import { AlephaMantineProvider } from \"@alepha/ui\";\nimport { Flex } from \"@mantine/core\";\nimport { NestedView } from \"alepha/react/router\";\n\nconst AuthLayout = () => {\n  return (\n    <AlephaMantineProvider omnibar={false}>\n      <Flex flex={1} align={\"center\"} h={\"100vh\"} justify={\"center\"}>\n        <NestedView />\n      </Flex>\n    </AlephaMantineProvider>\n  );\n};\n\nexport default AuthLayout;\n"],"mappings":";;;;;AAIA,MAAM,mBAAmB;AACvB,QACE,oBAAC,uBAAD;EAAuB,SAAS;YAC9B,oBAAC,MAAD;GAAM,MAAM;GAAG,OAAO;GAAU,GAAG;GAAS,SAAS;aACnD,oBAAC,YAAD,EAAc,CAAA;GACT,CAAA;EACe,CAAA"}

package/dist/demo/DemoButton-_Ws2w-J0.js

@@ -0,0 +1,181 @@
+import { f as Flex, h as ActionButton, m as useDialog } from "./core-DRtQklr3.js";
+import { t as Showcase } from "./Showcase-D49Wud2v.js";
+import { t } from "alepha";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconDownload, IconPlus, IconSettings, IconTrash } from "@tabler/icons-react";
+//#region ../../src/demo/components/core/DemoButton.tsx
+const showcaseSchema = t.object({
+	variant: t.enum([
+		"filled",
+		"light",
+		"outline",
+		"subtle",
+		"default",
+		"transparent"
+	], {
+		title: "variant",
+		default: "filled"
+	}),
+	size: t.enum([
+		"xs",
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	], {
+		title: "size",
+		default: "md"
+	}),
+	intent: t.enum([
+		"none",
+		"primary",
+		"success",
+		"danger",
+		"warning",
+		"info"
+	], {
+		title: "intent",
+		default: "none"
+	}),
+	disabled: t.boolean({
+		title: "disabled",
+		default: false,
+		$control: { switch: true }
+	}),
+	loading: t.boolean({
+		title: "loading",
+		default: false,
+		$control: { switch: true }
+	})
+});
+const ButtonPreview = (props) => {
+	const dialog = useDialog();
+	return /* @__PURE__ */ jsxs(Flex, {
+		col: true,
+		gap: "xl",
+		p: "md",
+		children: [
+			/* @__PURE__ */ jsxs(Flex, {
+				gap: "md",
+				wrap: "wrap",
+				centerY: true,
+				children: [
+					/* @__PURE__ */ jsx(ActionButton, {
+						variant: props.variant,
+						size: props.size,
+						intent: props.intent,
+						disabled: props.disabled,
+						loading: props.loading,
+						onClick: () => dialog.alert({ message: "Clicked" }),
+						children: "Default"
+					}),
+					/* @__PURE__ */ jsx(ActionButton, {
+						variant: props.variant,
+						size: props.size,
+						intent: props.intent,
+						disabled: props.disabled,
+						loading: props.loading,
+						icon: IconPlus,
+						onClick: () => dialog.alert({ message: "Create" }),
+						children: "Create"
+					}),
+					/* @__PURE__ */ jsx(ActionButton, {
+						variant: props.variant,
+						size: props.size,
+						intent: props.intent,
+						disabled: props.disabled,
+						loading: props.loading,
+						icon: IconTrash,
+						onClick: () => dialog.alert({ message: "Delete" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Flex, {
+				gap: "md",
+				wrap: "wrap",
+				centerY: true,
+				children: [
+					/* @__PURE__ */ jsx(ActionButton, {
+						variant: "filled",
+						size: props.size,
+						intent: "primary",
+						icon: IconCheck,
+						onClick: () => {},
+						children: "Save"
+					}),
+					/* @__PURE__ */ jsx(ActionButton, {
+						variant: "filled",
+						size: props.size,
+						intent: "danger",
+						icon: IconTrash,
+						confirm: "Are you sure?",
+						onClick: () => dialog.alert({ message: "Deleted" }),
+						children: "Delete"
+					}),
+					/* @__PURE__ */ jsx(ActionButton, {
+						variant: "light",
+						size: props.size,
+						icon: IconDownload,
+						onClick: () => {},
+						children: "Export"
+					}),
+					/* @__PURE__ */ jsx(ActionButton, {
+						variant: "subtle",
+						size: props.size,
+						icon: IconSettings,
+						onClick: () => {}
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Flex, {
+				gap: "md",
+				wrap: "wrap",
+				centerY: true,
+				children: [/* @__PURE__ */ jsx(ActionButton, {
+					variant: props.variant,
+					size: props.size,
+					menu: { items: [
+						{
+							label: "Edit",
+							icon: /* @__PURE__ */ jsx(IconSettings, { size: 14 })
+						},
+						{ type: "divider" },
+						{
+							label: "Delete",
+							icon: /* @__PURE__ */ jsx(IconTrash, { size: 14 }),
+							color: "red"
+						}
+					] },
+					onClick: () => {},
+					children: "With Menu"
+				}), /* @__PURE__ */ jsx(ActionButton, {
+					variant: props.variant,
+					size: props.size,
+					tooltip: "This button has a tooltip",
+					icon: IconSettings,
+					onClick: () => {},
+					children: "With Tooltip"
+				})]
+			})
+		]
+	});
+};
+const DemoActionButton = () => {
+	return /* @__PURE__ */ jsx(Showcase, {
+		title: "ActionButton",
+		schema: showcaseSchema,
+		initialValues: {
+			variant: "filled",
+			size: "md",
+			intent: "none",
+			disabled: false,
+			loading: false
+		},
+		columns: 1,
+		children: (props) => /* @__PURE__ */ jsx(ButtonPreview, { ...props })
+	});
+};
+//#endregion
+export { DemoActionButton as default };
+
+//# sourceMappingURL=DemoButton-_Ws2w-J0.js.map

package/dist/demo/DemoButton-_Ws2w-J0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoButton-_Ws2w-J0.js","names":[],"sources":["../../src/demo/components/core/DemoButton.tsx"],"sourcesContent":["import { ActionButton, Flex, useDialog } from \"@alepha/ui\";\nimport {\n  IconCheck,\n  IconDownload,\n  IconPlus,\n  IconSettings,\n  IconTrash,\n} from \"@tabler/icons-react\";\nimport { t } from \"alepha\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst showcaseSchema = t.object({\n  variant: t.enum(\n    [\"filled\", \"light\", \"outline\", \"subtle\", \"default\", \"transparent\"],\n    {\n      title: \"variant\",\n      default: \"filled\",\n    },\n  ),\n  size: t.enum([\"xs\", \"sm\", \"md\", \"lg\", \"xl\"], {\n    title: \"size\",\n    default: \"md\",\n  }),\n  intent: t.enum([\"none\", \"primary\", \"success\", \"danger\", \"warning\", \"info\"], {\n    title: \"intent\",\n    default: \"none\",\n  }),\n  disabled: t.boolean({\n    title: \"disabled\",\n    default: false,\n    $control: { switch: true },\n  }),\n  loading: t.boolean({\n    title: \"loading\",\n    default: false,\n    $control: { switch: true },\n  }),\n});\n\ninterface ButtonPreviewProps {\n  variant:\n    | \"filled\"\n    | \"light\"\n    | \"outline\"\n    | \"subtle\"\n    | \"default\"\n    | \"transparent\";\n  size: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  intent: \"none\" | \"primary\" | \"success\" | \"danger\" | \"warning\" | \"info\";\n  disabled: boolean;\n  loading: boolean;\n}\n\nconst ButtonPreview = (props: ButtonPreviewProps) => {\n  const dialog = useDialog();\n\n  return (\n    <Flex col gap=\"xl\" p=\"md\">\n      <Flex gap=\"md\" wrap=\"wrap\" centerY>\n        <ActionButton\n          variant={props.variant}\n          size={props.size}\n          intent={props.intent}\n          disabled={props.disabled}\n          loading={props.loading}\n          onClick={() => dialog.alert({ message: \"Clicked\" })}\n        >\n          Default\n        </ActionButton>\n        <ActionButton\n          variant={props.variant}\n          size={props.size}\n          intent={props.intent}\n          disabled={props.disabled}\n          loading={props.loading}\n          icon={IconPlus}\n          onClick={() => dialog.alert({ message: \"Create\" })}\n        >\n          Create\n        </ActionButton>\n        <ActionButton\n          variant={props.variant}\n          size={props.size}\n          intent={props.intent}\n          disabled={props.disabled}\n          loading={props.loading}\n          icon={IconTrash}\n          onClick={() => dialog.alert({ message: \"Delete\" })}\n        />\n      </Flex>\n\n      <Flex gap=\"md\" wrap=\"wrap\" centerY>\n        <ActionButton\n          variant=\"filled\"\n          size={props.size}\n          intent=\"primary\"\n          icon={IconCheck}\n          onClick={() => {}}\n        >\n          Save\n        </ActionButton>\n        <ActionButton\n          variant=\"filled\"\n          size={props.size}\n          intent=\"danger\"\n          icon={IconTrash}\n          confirm=\"Are you sure?\"\n          onClick={() => dialog.alert({ message: \"Deleted\" })}\n        >\n          Delete\n        </ActionButton>\n        <ActionButton\n          variant=\"light\"\n          size={props.size}\n          icon={IconDownload}\n          onClick={() => {}}\n        >\n          Export\n        </ActionButton>\n        <ActionButton\n          variant=\"subtle\"\n          size={props.size}\n          icon={IconSettings}\n          onClick={() => {}}\n        />\n      </Flex>\n\n      <Flex gap=\"md\" wrap=\"wrap\" centerY>\n        <ActionButton\n          variant={props.variant}\n          size={props.size}\n          menu={{\n            items: [\n              { label: \"Edit\", icon: <IconSettings size={14} /> },\n              { type: \"divider\" },\n              {\n                label: \"Delete\",\n                icon: <IconTrash size={14} />,\n                color: \"red\",\n              },\n            ],\n          }}\n          onClick={() => {}}\n        >\n          With Menu\n        </ActionButton>\n        <ActionButton\n          variant={props.variant}\n          size={props.size}\n          tooltip=\"This button has a tooltip\"\n          icon={IconSettings}\n          onClick={() => {}}\n        >\n          With Tooltip\n        </ActionButton>\n      </Flex>\n    </Flex>\n  );\n};\n\nconst DemoActionButton = () => {\n  return (\n    <Showcase\n      title=\"ActionButton\"\n      schema={showcaseSchema}\n      initialValues={{\n        variant: \"filled\",\n        size: \"md\",\n        intent: \"none\",\n        disabled: false,\n        loading: false,\n      }}\n      columns={1}\n    >\n      {(props) => <ButtonPreview {...(props as ButtonPreviewProps)} />}\n    </Showcase>\n  );\n};\n\nexport default DemoActionButton;\n"],"mappings":"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"}

package/dist/demo/DemoControlSelect-ChP4ZOpQ.js

@@ -0,0 +1,304 @@
+import { a as TypeForm, f as Flex, l as Text, m as useDialog, o as Control } from "./core-DRtQklr3.js";
+import { t as Showcase } from "./Showcase-D49Wud2v.js";
+import { t } from "alepha";
+import { useForm } from "alepha/react/form";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../../src/demo/components/core/DemoControlSelect.tsx
+const selectSchema = t.object({
+	status: t.enum([
+		"active",
+		"inactive",
+		"pending"
+	], {
+		title: "Status",
+		default: "active"
+	}),
+	priority: t.enum([
+		"low",
+		"medium",
+		"high",
+		"critical"
+	], { title: "Priority" })
+});
+const multiSelectSchema = t.object({ roles: t.array(t.enum([
+	"admin",
+	"editor",
+	"viewer",
+	"moderator"
+]), {
+	title: "Roles",
+	default: ["editor"]
+}) });
+const autocompleteSchema = t.object({ city: t.enum([
+	"Paris",
+	"London",
+	"Tokyo",
+	"New York",
+	"Berlin",
+	"Sydney"
+], {
+	title: "City",
+	default: "Paris"
+}) });
+const tagsSchema = t.object({ tags: t.array(t.text(), {
+	title: "Tags",
+	default: ["typescript", "react"]
+}) });
+const segmentedSchema = t.object({ theme: t.enum([
+	"light",
+	"dark",
+	"auto"
+], {
+	title: "Theme",
+	default: "auto"
+}) });
+const booleanSchema = t.object({ enabled: t.boolean({
+	title: "Enabled",
+	default: true
+}) });
+const numericSchema = t.object({ rating: t.integer({
+	title: "Rating",
+	enum: [
+		1,
+		2,
+		3,
+		4,
+		5
+	]
+}) });
+const allCities = Array.from({ length: 200 }, (_, i) => ({
+	value: `city-${i}`,
+	label: `City ${i} - ${[
+		"Alpha",
+		"Beta",
+		"Gamma",
+		"Delta",
+		"Epsilon"
+	][i % 5]}`
+}));
+const cityLoader = async (search, resolve) => {
+	await new Promise((r) => setTimeout(r, 300));
+	if (resolve) return allCities.filter((c) => resolve.includes(c.value));
+	if (!search) return allCities;
+	return allCities.filter((c) => c.label.toLowerCase().includes(search.toLowerCase()));
+};
+const shortCities = allCities.slice(0, 20);
+const shortCityLoader = async () => {
+	await new Promise((r) => setTimeout(r, 300));
+	return shortCities;
+};
+const useAlertValues = () => {
+	const dialog = useDialog();
+	return (values) => {
+		dialog.alert({
+			title: "Submitted",
+			message: JSON.stringify(values, null, 2)
+		});
+	};
+};
+const SelectVariant = () => {
+	return /* @__PURE__ */ jsx(TypeForm, {
+		fill: true,
+		form: useForm({
+			schema: selectSchema,
+			handler: useAlertValues()
+		}, []),
+		submitButtonProps: { children: "Submit" }
+	});
+};
+const MultiSelectVariant = () => {
+	return /* @__PURE__ */ jsx(TypeForm, {
+		fill: true,
+		form: useForm({
+			schema: multiSelectSchema,
+			handler: useAlertValues()
+		}, []),
+		submitButtonProps: { children: "Submit" }
+	});
+};
+const AutocompleteVariant = () => {
+	return /* @__PURE__ */ jsx(TypeForm, {
+		fill: true,
+		form: useForm({
+			schema: autocompleteSchema,
+			handler: useAlertValues()
+		}, []),
+		fieldControlProps: { city: { select: { creatable: true } } },
+		submitButtonProps: { children: "Submit" }
+	});
+};
+const TagsVariant = () => {
+	return /* @__PURE__ */ jsx(TypeForm, {
+		fill: true,
+		form: useForm({
+			schema: tagsSchema,
+			handler: useAlertValues()
+		}, []),
+		fieldControlProps: { tags: { select: { creatable: true } } },
+		submitButtonProps: { children: "Submit" }
+	});
+};
+const SegmentedVariant = () => {
+	return /* @__PURE__ */ jsx(TypeForm, {
+		fill: true,
+		form: useForm({
+			schema: segmentedSchema,
+			handler: useAlertValues()
+		}, []),
+		fieldControlProps: { theme: { segmented: true } },
+		submitButtonProps: { children: "Submit" }
+	});
+};
+const BooleanVariant = () => {
+	return /* @__PURE__ */ jsx(TypeForm, {
+		fill: true,
+		form: useForm({
+			schema: booleanSchema,
+			handler: useAlertValues()
+		}, []),
+		submitButtonProps: { children: "Submit" }
+	});
+};
+const NumericVariant = () => {
+	return /* @__PURE__ */ jsx(TypeForm, {
+		fill: true,
+		form: useForm({
+			schema: numericSchema,
+			handler: useAlertValues()
+		}, []),
+		fieldControlProps: { rating: { select: { selectProps: { data: [
+			{
+				value: "1",
+				label: "1 - Poor"
+			},
+			{
+				value: "2",
+				label: "2 - Fair"
+			},
+			{
+				value: "3",
+				label: "3 - Good"
+			},
+			{
+				value: "4",
+				label: "4 - Great"
+			},
+			{
+				value: "5",
+				label: "5 - Excellent"
+			}
+		] } } } },
+		submitButtonProps: { children: "Submit" }
+	});
+};
+const AsyncShortVariant = () => {
+	const handler = useAlertValues();
+	return /* @__PURE__ */ jsx(Control, {
+		input: useForm({
+			schema: t.object({ city: t.text({ title: "City" }) }),
+			handler
+		}, []).input.city,
+		select: { loader: shortCityLoader }
+	});
+};
+const AsyncLongVariant = () => {
+	const handler = useAlertValues();
+	return /* @__PURE__ */ jsx(Control, {
+		input: useForm({
+			schema: t.object({ city: t.text({ title: "City" }) }),
+			handler
+		}, []).input.city,
+		select: {
+			loader: cityLoader,
+			selectProps: { defaultValue: "city-42" }
+		}
+	});
+};
+const variants = [
+	{
+		title: "Select",
+		description: "Single enum value with dropdown",
+		component: SelectVariant
+	},
+	{
+		title: "Multi Select",
+		description: "Array of enum values with multi-select dropdown",
+		component: MultiSelectVariant
+	},
+	{
+		title: "Autocomplete",
+		description: "Single value with freeform text input — type any value or pick from suggestions",
+		component: AutocompleteVariant
+	},
+	{
+		title: "Tags",
+		description: "Array of freeform values — type and press Enter to add tags",
+		component: TagsVariant
+	},
+	{
+		title: "Segmented",
+		description: "Enum rendered as segmented toggle buttons",
+		component: SegmentedVariant
+	},
+	{
+		title: "Boolean",
+		description: "Boolean value — select value is coerced to true/false on submit",
+		component: BooleanVariant
+	},
+	{
+		title: "Numeric",
+		description: "Integer enum — select value is coerced to number on submit",
+		component: NumericVariant
+	},
+	{
+		title: "Async (Short)",
+		description: "Loader returns <= 100 items — client-side filtering, single network call",
+		component: AsyncShortVariant
+	},
+	{
+		title: "Async (Long)",
+		description: "Loader returns > 100 items — server-side filtering with debounced search",
+		component: AsyncLongVariant
+	}
+];
+const showcaseSchema = t.object({});
+const DemoControlSelect = () => {
+	return /* @__PURE__ */ jsx(Showcase, {
+		title: "ControlSelect",
+		schema: showcaseSchema,
+		children: () => /* @__PURE__ */ jsx(Flex, {
+			direction: "column",
+			gap: "xl",
+			children: variants.map((variant) => /* @__PURE__ */ jsxs(Flex, {
+				rounded: true,
+				shadowed: "sm",
+				bordered: true,
+				direction: "column",
+				children: [/* @__PURE__ */ jsxs(Flex, {
+					elevated: true,
+					rounded: true,
+					col: true,
+					borderedBottom: true,
+					p: "sm",
+					children: [/* @__PURE__ */ jsx(Text, {
+						fw: 600,
+						children: variant.title
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						c: "dimmed",
+						children: variant.description
+					})]
+				}), /* @__PURE__ */ jsx(Flex, {
+					rounded: true,
+					surface: true,
+					p: "xs",
+					children: /* @__PURE__ */ jsx(variant.component, {})
+				})]
+			}, variant.title))
+		})
+	});
+};
+//#endregion
+export { DemoControlSelect as default };
+
+//# sourceMappingURL=DemoControlSelect-ChP4ZOpQ.js.map

package/dist/demo/DemoControlSelect-ChP4ZOpQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoControlSelect-ChP4ZOpQ.js","names":[],"sources":["../../src/demo/components/core/DemoControlSelect.tsx"],"sourcesContent":["import {\n  Control,\n  Flex,\n  type SelectValueLabel,\n  Text,\n  TypeForm,\n  useDialog,\n} from \"@alepha/ui\";\nimport { t } from \"alepha\";\nimport { useForm } from \"alepha/react/form\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\n// region schemas\n\nconst selectSchema = t.object({\n  status: t.enum([\"active\", \"inactive\", \"pending\"], {\n    title: \"Status\",\n    default: \"active\",\n  }),\n  priority: t.enum([\"low\", \"medium\", \"high\", \"critical\"], {\n    title: \"Priority\",\n  }),\n});\n\nconst multiSelectSchema = t.object({\n  roles: t.array(t.enum([\"admin\", \"editor\", \"viewer\", \"moderator\"]), {\n    title: \"Roles\",\n    default: [\"editor\"],\n  }),\n});\n\nconst autocompleteSchema = t.object({\n  city: t.enum([\"Paris\", \"London\", \"Tokyo\", \"New York\", \"Berlin\", \"Sydney\"], {\n    title: \"City\",\n    default: \"Paris\",\n  }),\n});\n\nconst tagsSchema = t.object({\n  tags: t.array(t.text(), {\n    title: \"Tags\",\n    default: [\"typescript\", \"react\"],\n  }),\n});\n\nconst segmentedSchema = t.object({\n  theme: t.enum([\"light\", \"dark\", \"auto\"], {\n    title: \"Theme\",\n    default: \"auto\",\n  }),\n});\n\nconst booleanSchema = t.object({\n  enabled: t.boolean({\n    title: \"Enabled\",\n    default: true,\n  }),\n});\n\nconst numericSchema = t.object({\n  rating: t.integer({\n    title: \"Rating\",\n    enum: [1, 2, 3, 4, 5] as any,\n  }),\n});\n\n// endregion\n\n// region async loader\n\nconst allCities = Array.from({ length: 200 }, (_, i) => ({\n  value: `city-${i}`,\n  label: `City ${i} - ${[\"Alpha\", \"Beta\", \"Gamma\", \"Delta\", \"Epsilon\"][i % 5]}`,\n}));\n\nconst cityLoader = async (\n  search: string,\n  resolve?: string[],\n): Promise<SelectValueLabel[]> => {\n  await new Promise((r) => setTimeout(r, 300));\n\n  if (resolve) {\n    return allCities.filter((c) => resolve.includes(c.value));\n  }\n\n  if (!search) return allCities;\n  return allCities.filter((c) =>\n    c.label.toLowerCase().includes(search.toLowerCase()),\n  );\n};\n\nconst shortCities = allCities.slice(0, 20);\nconst shortCityLoader = async (): Promise<SelectValueLabel[]> => {\n  await new Promise((r) => setTimeout(r, 300));\n  return shortCities;\n};\n\n// endregion\n\n// region shared hook\n\nconst useAlertValues = () => {\n  const dialog = useDialog();\n  return (values: any) => {\n    dialog.alert({\n      title: \"Submitted\",\n      message: JSON.stringify(values, null, 2),\n    });\n  };\n};\n\n// endregion\n\n// region variant components\n\nconst SelectVariant = () => {\n  const handler = useAlertValues();\n  const form = useForm({ schema: selectSchema, handler }, []);\n  return (\n    <TypeForm fill form={form} submitButtonProps={{ children: \"Submit\" }} />\n  );\n};\n\nconst MultiSelectVariant = () => {\n  const handler = useAlertValues();\n  const form = useForm({ schema: multiSelectSchema, handler }, []);\n  return (\n    <TypeForm fill form={form} submitButtonProps={{ children: \"Submit\" }} />\n  );\n};\n\nconst AutocompleteVariant = () => {\n  const handler = useAlertValues();\n  const form = useForm({ schema: autocompleteSchema, handler }, []);\n  return (\n    <TypeForm\n      fill\n      form={form}\n      fieldControlProps={{ city: { select: { creatable: true } } }}\n      submitButtonProps={{ children: \"Submit\" }}\n    />\n  );\n};\n\nconst TagsVariant = () => {\n  const handler = useAlertValues();\n  const form = useForm({ schema: tagsSchema, handler }, []);\n  return (\n    <TypeForm\n      fill\n      form={form}\n      fieldControlProps={{ tags: { select: { creatable: true } } }}\n      submitButtonProps={{ children: \"Submit\" }}\n    />\n  );\n};\n\nconst SegmentedVariant = () => {\n  const handler = useAlertValues();\n  const form = useForm({ schema: segmentedSchema, handler }, []);\n  return (\n    <TypeForm\n      fill\n      form={form}\n      fieldControlProps={{ theme: { segmented: true } }}\n      submitButtonProps={{ children: \"Submit\" }}\n    />\n  );\n};\n\nconst BooleanVariant = () => {\n  const handler = useAlertValues();\n  const form = useForm({ schema: booleanSchema, handler }, []);\n  return (\n    <TypeForm fill form={form} submitButtonProps={{ children: \"Submit\" }} />\n  );\n};\n\nconst NumericVariant = () => {\n  const handler = useAlertValues();\n  const form = useForm({ schema: numericSchema, handler }, []);\n  return (\n    <TypeForm\n      fill\n      form={form}\n      fieldControlProps={{\n        rating: {\n          select: {\n            selectProps: {\n              data: [\n                { value: \"1\", label: \"1 - Poor\" },\n                { value: \"2\", label: \"2 - Fair\" },\n                { value: \"3\", label: \"3 - Good\" },\n                { value: \"4\", label: \"4 - Great\" },\n                { value: \"5\", label: \"5 - Excellent\" },\n              ],\n            },\n          },\n        },\n      }}\n      submitButtonProps={{ children: \"Submit\" }}\n    />\n  );\n};\n\nconst AsyncShortVariant = () => {\n  const handler = useAlertValues();\n  const asyncSchema = t.object({ city: t.text({ title: \"City\" }) });\n  const form = useForm({ schema: asyncSchema, handler }, []);\n  return (\n    <Control\n      input={form.input.city}\n      select={{\n        loader: shortCityLoader,\n      }}\n    />\n  );\n};\n\nconst AsyncLongVariant = () => {\n  const handler = useAlertValues();\n  const asyncSchema = t.object({ city: t.text({ title: \"City\" }) });\n  const form = useForm({ schema: asyncSchema, handler }, []);\n  return (\n    <Control\n      input={form.input.city}\n      select={{\n        loader: cityLoader,\n        selectProps: { defaultValue: \"city-42\" },\n      }}\n    />\n  );\n};\n\n// endregion\n\nconst variants: {\n  title: string;\n  description: string;\n  component: () => React.ReactNode;\n}[] = [\n  {\n    title: \"Select\",\n    description: \"Single enum value with dropdown\",\n    component: SelectVariant,\n  },\n  {\n    title: \"Multi Select\",\n    description: \"Array of enum values with multi-select dropdown\",\n    component: MultiSelectVariant,\n  },\n  {\n    title: \"Autocomplete\",\n    description:\n      \"Single value with freeform text input — type any value or pick from suggestions\",\n    component: AutocompleteVariant,\n  },\n  {\n    title: \"Tags\",\n    description: \"Array of freeform values — type and press Enter to add tags\",\n    component: TagsVariant,\n  },\n  {\n    title: \"Segmented\",\n    description: \"Enum rendered as segmented toggle buttons\",\n    component: SegmentedVariant,\n  },\n  {\n    title: \"Boolean\",\n    description:\n      \"Boolean value — select value is coerced to true/false on submit\",\n    component: BooleanVariant,\n  },\n  {\n    title: \"Numeric\",\n    description: \"Integer enum — select value is coerced to number on submit\",\n    component: NumericVariant,\n  },\n  {\n    title: \"Async (Short)\",\n    description:\n      \"Loader returns <= 100 items — client-side filtering, single network call\",\n    component: AsyncShortVariant,\n  },\n  {\n    title: \"Async (Long)\",\n    description:\n      \"Loader returns > 100 items — server-side filtering with debounced search\",\n    component: AsyncLongVariant,\n  },\n];\n\nconst showcaseSchema = t.object({});\n\nconst DemoControlSelect = () => {\n  return (\n    <Showcase title=\"ControlSelect\" schema={showcaseSchema}>\n      {() => (\n        <Flex direction=\"column\" gap=\"xl\">\n          {variants.map((variant) => (\n            <Flex\n              rounded\n              shadowed={\"sm\"}\n              bordered\n              key={variant.title}\n              direction=\"column\"\n            >\n              <Flex elevated rounded col borderedBottom p={\"sm\"}>\n                <Text fw={600}>{variant.title}</Text>\n                <Text size=\"sm\" c=\"dimmed\">\n                  {variant.description}\n                </Text>\n              </Flex>\n              <Flex rounded surface p={\"xs\"}>\n                <variant.component />\n              </Flex>\n            </Flex>\n          ))}\n        </Flex>\n      )}\n    </Showcase>\n  );\n};\n\nexport default DemoControlSelect;\n"],"mappings":"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"}