tembro 2.0.3 → 2.0.5

package/dist/showcase/premium/date-range-picker/showcase.js

@@ -18,7 +18,38 @@ function i({ mode: i }) {
 				}),
 				min: "2026-06-01",
 				max: "2026-12-31",
-				disabledDates: ["2026-06-21", "2026-06-22"]
+				disabledDates: ["2026-06-21", "2026-06-22"],
+				closeOnPresetSelect: !0,
+				presets: [
+					{
+						label: "This week",
+						value: {
+							from: "2026-06-01",
+							to: "2026-06-07"
+						}
+					},
+					{
+						label: "Next 14 days",
+						value: {
+							from: "2026-06-08",
+							to: "2026-06-20"
+						}
+					},
+					{
+						label: "Q3",
+						value: {
+							from: "2026-07-01",
+							to: "2026-09-30"
+						}
+					}
+				],
+				labels: {
+					placeholder: "Choose reporting range",
+					apply: "Apply range",
+					clear: "Clear",
+					start: "Start",
+					end: "End"
+				}
 			}),
 			/* @__PURE__ */ r("p", {
 				className: "aui-text-subtle text-sm",

package/dist/showcase/premium/dropdown-menu/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/dropdown-menu/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`border-t border-[color:var(--aui-divider)] py-6`;function o({mode:e}){let[o,s]=r.useState(`private`),[c,l]=r.useState(!0);return(0,i.jsxs)(`div`,{className:`space-y-0`,children:[(0,i.jsx)(`section`,{className:`pb-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Dropdown menu`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Secondary actions belong here`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Use one trigger for quick actions, tiny settings, and destructive follow-ups.`})]}),(0,i.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Status`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:o===`public`?`Public`:`Private`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Notifications`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:c?`On`:`Off`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Route`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e===`playground`?`Interactive`:`Docs`})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Live menu`}),(0,i.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:`Open and verify small state changes`})]}),(0,i.jsxs)(n.DropdownMenu,{children:[(0,i.jsx)(n.DropdownMenuTrigger,{children:(0,i.jsx)(t.Button,{children:`Open menu`})}),(0,i.jsxs)(n.DropdownMenuContent,{children:[(0,i.jsx)(n.DropdownMenuLabel,{children:`Workspace actions`}),(0,i.jsx)(n.DropdownMenuItem,{children:`Open workspace`}),(0,i.jsx)(n.DropdownMenuItem,{disabled:!0,children:`Delete from archive`}),(0,i.jsx)(n.DropdownMenuSeparator,{}),(0,i.jsx)(n.DropdownMenuCheckboxItem,{checked:c,onCheckedChange:e=>l(!!e),children:`Notification access`}),(0,i.jsx)(n.DropdownMenuGroup,{children:(0,i.jsxs)(n.DropdownMenuRadioGroup,{value:o,onValueChange:e=>s(e),children:[(0,i.jsx)(n.DropdownMenuRadioItem,{value:`public`,children:`Public`}),(0,i.jsx)(n.DropdownMenuRadioItem,{value:`private`,children:`Private`})]})}),(0,i.jsx)(n.DropdownMenuSeparator,{}),(0,i.jsxs)(n.DropdownMenuItem,{variant:`destructive`,children:[`Remove workspace`,(0,i.jsx)(n.DropdownMenuShortcut,{children:`⌘D`})]})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Keep the main CTA outside the menu.`,`Use radio and checkbox items only for very small settings.`,`Destructive items should still be explicit and easy to notice.`].map(e=>(0,i.jsx)(`div`,{className:`border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0`,children:e},e))})})]})}exports.DropdownMenuShowcase=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/dropdown-menu/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=`border-t border-[color:var(--aui-divider)] py-6`;function o({mode:e}){let[o,s]=r.useState(`private`),[c,l]=r.useState(!0),[u,d]=r.useState(!1),[f,p]=r.useState(!1);return(0,i.jsxs)(`div`,{className:`space-y-0`,children:[(0,i.jsx)(`section`,{className:`pb-6`,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Dropdown menu`}),(0,i.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Secondary actions belong here`}),(0,i.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Use one trigger for quick actions, tiny settings, and destructive follow-ups.`})]}),(0,i.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Status`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:o===`public`?`Public`:`Private`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Notifications`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:c?`On`:`Off`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Route`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:e===`playground`?`Interactive`:`Docs`})]}),(0,i.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Menu close`}),(0,i.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:f?`Pinned open`:`Auto close`})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsxs)(`div`,{className:`flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between`,children:[(0,i.jsxs)(`div`,{className:`max-w-xl`,children:[(0,i.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Live menu`}),(0,i.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:`Open and verify small state changes`})]}),(0,i.jsxs)(n.DropdownMenu,{children:[(0,i.jsx)(n.DropdownMenuTrigger,{children:(0,i.jsx)(t.Button,{children:`Open menu`})}),(0,i.jsxs)(n.DropdownMenuContent,{children:[(0,i.jsx)(n.DropdownMenuLabel,{children:`Workspace actions`}),(0,i.jsxs)(n.DropdownMenuItem,{children:[(0,i.jsxs)(`span`,{className:`grid gap-0.5`,children:[(0,i.jsx)(`span`,{children:`Open workspace`}),(0,i.jsx)(n.DropdownMenuItemDescription,{children:`Go to the main dashboard route`})]}),(0,i.jsx)(n.DropdownMenuShortcut,{children:`↵`})]}),(0,i.jsx)(n.DropdownMenuItem,{disabled:!0,children:(0,i.jsxs)(`span`,{className:`grid gap-0.5`,children:[(0,i.jsx)(`span`,{children:`Delete from archive`}),(0,i.jsx)(n.DropdownMenuItemDescription,{children:`Locked until retention expires`})]})}),(0,i.jsx)(n.DropdownMenuSeparator,{}),(0,i.jsx)(n.DropdownMenuCheckboxItem,{checked:c,closeOnSelect:!f,onCheckedChange:e=>l(!!e),children:`Notification access`}),(0,i.jsx)(n.DropdownMenuCheckboxItem,{checked:u,closeOnSelect:!f,onCheckedChange:e=>d(!!e),children:`Compact density`}),(0,i.jsx)(n.DropdownMenuCheckboxItem,{checked:f,closeOnSelect:!1,onCheckedChange:e=>p(!!e),children:`Keep menu open`}),(0,i.jsxs)(n.DropdownMenuSub,{children:[(0,i.jsx)(n.DropdownMenuSubTrigger,{children:`Export`}),(0,i.jsxs)(n.DropdownMenuSubContent,{children:[(0,i.jsx)(n.DropdownMenuItem,{children:`CSV`}),(0,i.jsx)(n.DropdownMenuItem,{children:`PDF summary`}),(0,i.jsx)(n.DropdownMenuItem,{children:`JSON payload`})]})]}),(0,i.jsx)(n.DropdownMenuGroup,{children:(0,i.jsxs)(n.DropdownMenuRadioGroup,{value:o,onValueChange:e=>s(e),children:[(0,i.jsx)(n.DropdownMenuRadioItem,{value:`public`,children:`Public`}),(0,i.jsx)(n.DropdownMenuRadioItem,{value:`private`,children:`Private`})]})}),(0,i.jsx)(n.DropdownMenuSeparator,{}),(0,i.jsxs)(n.DropdownMenuItem,{variant:`destructive`,children:[`Remove workspace`,(0,i.jsx)(n.DropdownMenuShortcut,{children:`⌘D`})]})]})]})]})}),(0,i.jsx)(`section`,{className:a,children:(0,i.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Keep the main CTA outside the menu.`,`Use radio and checkbox items only for very small settings.`,`Destructive items should still be explicit and easy to notice.`].map(e=>(0,i.jsx)(`div`,{className:`border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0`,children:e},e))})})]})}exports.DropdownMenuShowcase=o;

package/dist/showcase/premium/dropdown-menu/showcase.js

@@ -1,125 +1,159 @@
 import { Button as e } from "../../../components/ui/button/index.js";
-import { DropdownMenu as t, DropdownMenuCheckboxItem as n, DropdownMenuContent as r, DropdownMenuGroup as i, DropdownMenuItem as a, DropdownMenuLabel as o, DropdownMenuRadioGroup as s, DropdownMenuRadioItem as c, DropdownMenuSeparator as l, DropdownMenuShortcut as u, DropdownMenuTrigger as d } from "../../../components/ui/dropdown-menu/index.js";
-import * as f from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { DropdownMenu as t, DropdownMenuCheckboxItem as n, DropdownMenuContent as r, DropdownMenuGroup as i, DropdownMenuItem as a, DropdownMenuItemDescription as o, DropdownMenuLabel as s, DropdownMenuRadioGroup as c, DropdownMenuRadioItem as l, DropdownMenuSeparator as u, DropdownMenuShortcut as d, DropdownMenuSub as f, DropdownMenuSubContent as p, DropdownMenuSubTrigger as m, DropdownMenuTrigger as h } from "../../../components/ui/dropdown-menu/index.js";
+import * as g from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/showcase/premium/dropdown-menu/showcase.tsx
-var h = "border-t border-[color:var(--aui-divider)] py-6";
-function g({ mode: g }) {
-	let [_, v] = f.useState("private"), [y, b] = f.useState(!0);
-	return /* @__PURE__ */ m("div", {
+var y = "border-t border-[color:var(--aui-divider)] py-6";
+function b({ mode: b }) {
+	let [x, S] = g.useState("private"), [C, w] = g.useState(!0), [T, E] = g.useState(!1), [D, O] = g.useState(!1);
+	return /* @__PURE__ */ v("div", {
 		className: "space-y-0",
 		children: [
-			/* @__PURE__ */ p("section", {
+			/* @__PURE__ */ _("section", {
 				className: "pb-6",
-				children: /* @__PURE__ */ m("div", {
+				children: /* @__PURE__ */ v("div", {
 					className: "flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between",
-					children: [/* @__PURE__ */ m("div", {
+					children: [/* @__PURE__ */ v("div", {
 						className: "max-w-xl",
 						children: [
-							/* @__PURE__ */ p("p", {
+							/* @__PURE__ */ _("p", {
 								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
 								children: "Dropdown menu"
 							}),
-							/* @__PURE__ */ p("h3", {
+							/* @__PURE__ */ _("h3", {
 								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
 								children: "Secondary actions belong here"
 							}),
-							/* @__PURE__ */ p("p", {
+							/* @__PURE__ */ _("p", {
 								className: "mt-3 text-sm leading-6 aui-text-muted",
 								children: "Use one trigger for quick actions, tiny settings, and destructive follow-ups."
 							})
 						]
-					}), /* @__PURE__ */ m("div", {
+					}), /* @__PURE__ */ v("div", {
 						className: "grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]",
 						children: [
-							/* @__PURE__ */ m("div", {
+							/* @__PURE__ */ v("div", {
 								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ p("p", {
+								children: [/* @__PURE__ */ _("p", {
 									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 									children: "Status"
-								}), /* @__PURE__ */ p("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: _ === "public" ? "Public" : "Private"
+									children: x === "public" ? "Public" : "Private"
 								})]
 							}),
-							/* @__PURE__ */ m("div", {
+							/* @__PURE__ */ v("div", {
 								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ p("p", {
+								children: [/* @__PURE__ */ _("p", {
 									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 									children: "Notifications"
-								}), /* @__PURE__ */ p("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: y ? "On" : "Off"
+									children: C ? "On" : "Off"
 								})]
 							}),
-							/* @__PURE__ */ m("div", {
+							/* @__PURE__ */ v("div", {
 								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ p("p", {
+								children: [/* @__PURE__ */ _("p", {
 									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 									children: "Route"
-								}), /* @__PURE__ */ p("p", {
+								}), /* @__PURE__ */ _("p", {
 									className: "mt-2 text-lg font-semibold aui-text-strong",
-									children: g === "playground" ? "Interactive" : "Docs"
+									children: b === "playground" ? "Interactive" : "Docs"
+								})]
+							}),
+							/* @__PURE__ */ v("div", {
+								className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3",
+								children: [/* @__PURE__ */ _("p", {
+									className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
+									children: "Menu close"
+								}), /* @__PURE__ */ _("p", {
+									className: "mt-2 text-lg font-semibold aui-text-strong",
+									children: D ? "Pinned open" : "Auto close"
 								})]
 							})
 						]
 					})]
 				})
 			}),
-			/* @__PURE__ */ p("section", {
-				className: h,
-				children: /* @__PURE__ */ m("div", {
+			/* @__PURE__ */ _("section", {
+				className: y,
+				children: /* @__PURE__ */ v("div", {
 					className: "flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between",
-					children: [/* @__PURE__ */ m("div", {
+					children: [/* @__PURE__ */ v("div", {
 						className: "max-w-xl",
-						children: [/* @__PURE__ */ p("p", {
+						children: [/* @__PURE__ */ _("p", {
 							className: "text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted",
 							children: "Live menu"
-						}), /* @__PURE__ */ p("h4", {
+						}), /* @__PURE__ */ _("h4", {
 							className: "mt-2 text-xl font-semibold tracking-tight aui-text-strong",
 							children: "Open and verify small state changes"
 						})]
-					}), /* @__PURE__ */ m(t, { children: [/* @__PURE__ */ p(d, { children: /* @__PURE__ */ p(e, { children: "Open menu" }) }), /* @__PURE__ */ m(r, { children: [
-						/* @__PURE__ */ p(o, { children: "Workspace actions" }),
-						/* @__PURE__ */ p(a, { children: "Open workspace" }),
-						/* @__PURE__ */ p(a, {
+					}), /* @__PURE__ */ v(t, { children: [/* @__PURE__ */ _(h, { children: /* @__PURE__ */ _(e, { children: "Open menu" }) }), /* @__PURE__ */ v(r, { children: [
+						/* @__PURE__ */ _(s, { children: "Workspace actions" }),
+						/* @__PURE__ */ v(a, { children: [/* @__PURE__ */ v("span", {
+							className: "grid gap-0.5",
+							children: [/* @__PURE__ */ _("span", { children: "Open workspace" }), /* @__PURE__ */ _(o, { children: "Go to the main dashboard route" })]
+						}), /* @__PURE__ */ _(d, { children: "↵" })] }),
+						/* @__PURE__ */ _(a, {
 							disabled: !0,
-							children: "Delete from archive"
+							children: /* @__PURE__ */ v("span", {
+								className: "grid gap-0.5",
+								children: [/* @__PURE__ */ _("span", { children: "Delete from archive" }), /* @__PURE__ */ _(o, { children: "Locked until retention expires" })]
+							})
 						}),
-						/* @__PURE__ */ p(l, {}),
-						/* @__PURE__ */ p(n, {
-							checked: y,
-							onCheckedChange: (e) => b(!!e),
+						/* @__PURE__ */ _(u, {}),
+						/* @__PURE__ */ _(n, {
+							checked: C,
+							closeOnSelect: !D,
+							onCheckedChange: (e) => w(!!e),
 							children: "Notification access"
 						}),
-						/* @__PURE__ */ p(i, { children: /* @__PURE__ */ m(s, {
-							value: _,
-							onValueChange: (e) => v(e),
-							children: [/* @__PURE__ */ p(c, {
+						/* @__PURE__ */ _(n, {
+							checked: T,
+							closeOnSelect: !D,
+							onCheckedChange: (e) => E(!!e),
+							children: "Compact density"
+						}),
+						/* @__PURE__ */ _(n, {
+							checked: D,
+							closeOnSelect: !1,
+							onCheckedChange: (e) => O(!!e),
+							children: "Keep menu open"
+						}),
+						/* @__PURE__ */ v(f, { children: [/* @__PURE__ */ _(m, { children: "Export" }), /* @__PURE__ */ v(p, { children: [
+							/* @__PURE__ */ _(a, { children: "CSV" }),
+							/* @__PURE__ */ _(a, { children: "PDF summary" }),
+							/* @__PURE__ */ _(a, { children: "JSON payload" })
+						] })] }),
+						/* @__PURE__ */ _(i, { children: /* @__PURE__ */ v(c, {
+							value: x,
+							onValueChange: (e) => S(e),
+							children: [/* @__PURE__ */ _(l, {
 								value: "public",
 								children: "Public"
-							}), /* @__PURE__ */ p(c, {
+							}), /* @__PURE__ */ _(l, {
 								value: "private",
 								children: "Private"
 							})]
 						}) }),
-						/* @__PURE__ */ p(l, {}),
-						/* @__PURE__ */ m(a, {
+						/* @__PURE__ */ _(u, {}),
+						/* @__PURE__ */ v(a, {
 							variant: "destructive",
-							children: ["Remove workspace", /* @__PURE__ */ p(u, { children: "⌘D" })]
+							children: ["Remove workspace", /* @__PURE__ */ _(d, { children: "⌘D" })]
 						})
 					] })] })]
 				})
 			}),
-			/* @__PURE__ */ p("section", {
-				className: h,
-				children: /* @__PURE__ */ p("div", {
+			/* @__PURE__ */ _("section", {
+				className: y,
+				children: /* @__PURE__ */ _("div", {
 					className: "border-y border-[color:var(--aui-divider)]",
 					children: [
 						"Keep the main CTA outside the menu.",
 						"Use radio and checkbox items only for very small settings.",
 						"Destructive items should still be explicit and easy to notice."
-					].map((e) => /* @__PURE__ */ p("div", {
+					].map((e) => /* @__PURE__ */ _("div", {
 						className: "border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0",
 						children: e
 					}, e))
@@ -129,4 +163,4 @@ function g({ mode: g }) {
 	});
 }
 //#endregion
-export { g as DropdownMenuShowcase };
+export { b as DropdownMenuShowcase };

package/dist/showcase/premium/form-wrapper/mock.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { useForm } from "react-hook-form"
-import { Button, FormFieldShell, FormInput, FormSwitch, FormTextarea } from "@/index"
+import { Button, FormInput, FormSwitch, FormTextarea } from "tembro"
 
 type DemoValues = {
   name: string
@@ -26,19 +26,17 @@ export function Example() {
 
   return (
     <form onSubmit={onSubmit} className="space-y-4">
-      <FormFieldShell label="Workspace name" required>
-        <FormInput
-          control={form.control}
-          name="name"
-          label="Workspace name"
-          required
-          placeholder="Write a workspace title"
-          rules={{
-            required: "Workspace name is required",
-            minLength: { value: 3, message: "At least 3 characters" },
-          }}
-        />
-      </FormFieldShell>
+      <FormInput
+        control={form.control}
+        name="name"
+        label="Workspace name"
+        required
+        placeholder="Write a workspace title"
+        rules={{
+          required: "Workspace name is required",
+          minLength: { value: 3, message: "At least 3 characters" },
+        }}
+      />
 
       <FormInput
         control={form.control}
@@ -72,7 +70,7 @@ export function Example() {
 
       <Button type="submit">Save</Button>
     </form>
-  )`,htmlCode:`<form><label for="workspace">Workspace</label><input id="workspace" value="Azamat UI" /></form>`,cliCommand:`npx tembro add form-wrapper`,highlights:[`control + name contract`,"Universal `kind` variants",`Error display and required markers`,`Consistent wrapper shell behavior`],relatedBlockSlugs:[`settings-form`,`crm-dashboard`,`users-table`],scenarios:[{title:`Required validation`,description:"Use `rules` for required and length constraints and show errors in shell."},{title:`Error display`,description:`Inject custom error messages for required and domain checks.`},{title:`Read-only states`,description:`Support locked and disabled states from parent screens.`},{title:`Unified layout`,description:`Keep one shell language for input, select and toggle types without multiplying wrapper names.`}],capabilityNotes:["Use `control` and `name` from a shared `useForm` call for every field wrapper.","Prefer `FormInput kind=...` and `FormSelect kind=...` for new work; keep alias wrappers only for migration.","Pass RHF `rules` or `validate` to each wrapper, instead of inline ad-hoc checks.","`required` should be explicit both in copy (UI marker) and schema.","Render validation messages through wrapper-level `error` or formState errors for consistent spacing."]},t={code:`import { useForm } from "react-hook-form"
+  )`,htmlCode:`<form><label for="workspace">Workspace</label><input id="workspace" value="Azamat UI" /></form>`,cliCommand:`npx tembro add form-input form-textarea form-switch`,highlights:[`control + name contract`,"Universal `kind` variants",`Error display and required markers`,`Consistent wrapper shell behavior`],relatedBlockSlugs:[`settings-form`,`crm-dashboard`,`users-table`],scenarios:[{title:`Required validation`,description:"Use `rules` for required and length constraints and show errors in shell."},{title:`Error display`,description:`Inject custom error messages for required and domain checks.`},{title:`Read-only states`,description:`Support locked and disabled states from parent screens.`},{title:`Unified layout`,description:`Keep one shell language for input, select and toggle types without multiplying wrapper names.`}],capabilityNotes:["Use `control` and `name` from a shared `useForm` call for every field wrapper.","Prefer `FormInput kind=...` and `FormSelect kind=...` for new work; keep alias wrappers only for migration.","Pass RHF `rules` or `validate` to each wrapper, instead of inline ad-hoc checks.","`required` should be explicit both in copy (UI marker) and schema.","Render validation messages through wrapper-level `error` or formState errors for consistent spacing."]},t={code:`import { useForm } from "react-hook-form"
 import { Button, FormSelect } from "tembro"
 
 const statusOptions = [
@@ -81,6 +79,20 @@ const statusOptions = [
   { label: "Live", value: "live" },
 ]
 
+const workspaceOptions = [
+  { value: "workspace-alpha", label: "Workspace Alpha", description: "Core design system route" },
+  { value: "workspace-beta", label: "Workspace Beta", description: "CRM rollout workspace" },
+]
+
+async function loadWorkspaces(search: string) {
+  const query = search.trim().toLowerCase()
+  return workspaceOptions.filter((option) => !query || option.label.toLowerCase().includes(query))
+}
+
+async function loadWorkspace(value: string) {
+  return workspaceOptions.find((option) => option.value === value) ?? null
+}
+
 export function Example() {
   const form = useForm({
     defaultValues: {
@@ -114,6 +126,20 @@ export function Example() {
 }`,cliCommand:`npx tembro add form-select`,highlights:[`One RHF select wrapper`,`Simple + async under one API`,`Shared shell labels and errors`,`Preferred select-form entry`],relatedBlockSlugs:[`settings-form`,`crm-dashboard`,`users-table`],scenarios:[{title:`Static form choices`,description:`Use the default FormSelect mode for known statuses, roles, or visibility controls.`},{title:`Remote edit flows`,description:`Switch to kind="async" when the form hydrates saved entity values from remote search results.`},{title:`Shared validation shell`,description:`Keep labels, descriptions, and errors aligned across simple and async field variants.`}],capabilityNotes:[`Prefer FormSelect for new select fields instead of splitting wrappers too early.`,`Use kind="async" only when loading and hydration are remote concerns.`,`Keep the RHF contract identical while the field interaction model changes underneath.`]},n={code:`import { useForm } from "react-hook-form"
 import { Button, FormAsyncSelect } from "tembro"
 
+const workspaceOptions = [
+  { value: "workspace-alpha", label: "Workspace Alpha", description: "Core design system route" },
+  { value: "workspace-beta", label: "Workspace Beta", description: "CRM rollout workspace" },
+]
+
+async function loadWorkspaces(search: string) {
+  const query = search.trim().toLowerCase()
+  return workspaceOptions.filter((option) => !query || option.label.toLowerCase().includes(query))
+}
+
+async function loadWorkspace(value: string) {
+  return workspaceOptions.find((option) => option.value === value) ?? null
+}
+
 export function Example() {
   const form = useForm({
     defaultValues: {

package/dist/showcase/premium/form-wrapper/mock.js

@@ -1,8 +1,8 @@
 //#region src/showcase/premium/form-wrapper/mock.ts
 var e = {
-	code: "import { useForm } from \"react-hook-form\"\nimport { Button, FormFieldShell, FormInput, FormSwitch, FormTextarea } from \"@/index\"\n\ntype DemoValues = {\n  name: string\n  ownerPhone: string\n  price: number | null\n  notes: string\n  active: boolean\n}\n\nexport function Example() {\n  const form = useForm<DemoValues>({\n    defaultValues: {\n      name: \"Azamat UI\",\n      ownerPhone: \"+998 90 123 45 67\",\n      price: 120,\n      notes: \"Use control, name, rules, error, and required labels.\",\n      active: true,\n    },\n  })\n\n  const onSubmit = form.handleSubmit((values) => {\n    console.log(values)\n  })\n\n  return (\n    <form onSubmit={onSubmit} className=\"space-y-4\">\n      <FormFieldShell label=\"Workspace name\" required>\n        <FormInput\n          control={form.control}\n          name=\"name\"\n          label=\"Workspace name\"\n          required\n          placeholder=\"Write a workspace title\"\n          rules={{\n            required: \"Workspace name is required\",\n            minLength: { value: 3, message: \"At least 3 characters\" },\n          }}\n        />\n      </FormFieldShell>\n\n      <FormInput\n        control={form.control}\n        name=\"ownerPhone\"\n        kind=\"phone\"\n        label=\"Owner phone\"\n        description=\"Use canonical phone value for API payloads.\"\n        rules={{ required: \"Phone number is required\" }}\n      />\n\n      <FormInput\n        control={form.control}\n        name=\"price\"\n        kind=\"number\"\n        label=\"Budget\"\n        min={0}\n        max={100000}\n        required\n      />\n\n      <FormTextarea\n        control={form.control}\n        name=\"notes\"\n        label=\"Notes\"\n        required\n        rows={3}\n        description=\"RHF handles error and required states.\"\n      />\n\n      <FormSwitch control={form.control} name=\"active\" label=\"Active\" />\n\n      <Button type=\"submit\">Save</Button>\n    </form>\n  )",
+	code: "import { useForm } from \"react-hook-form\"\nimport { Button, FormInput, FormSwitch, FormTextarea } from \"tembro\"\n\ntype DemoValues = {\n  name: string\n  ownerPhone: string\n  price: number | null\n  notes: string\n  active: boolean\n}\n\nexport function Example() {\n  const form = useForm<DemoValues>({\n    defaultValues: {\n      name: \"Azamat UI\",\n      ownerPhone: \"+998 90 123 45 67\",\n      price: 120,\n      notes: \"Use control, name, rules, error, and required labels.\",\n      active: true,\n    },\n  })\n\n  const onSubmit = form.handleSubmit((values) => {\n    console.log(values)\n  })\n\n  return (\n    <form onSubmit={onSubmit} className=\"space-y-4\">\n      <FormInput\n        control={form.control}\n        name=\"name\"\n        label=\"Workspace name\"\n        required\n        placeholder=\"Write a workspace title\"\n        rules={{\n          required: \"Workspace name is required\",\n          minLength: { value: 3, message: \"At least 3 characters\" },\n        }}\n      />\n\n      <FormInput\n        control={form.control}\n        name=\"ownerPhone\"\n        kind=\"phone\"\n        label=\"Owner phone\"\n        description=\"Use canonical phone value for API payloads.\"\n        rules={{ required: \"Phone number is required\" }}\n      />\n\n      <FormInput\n        control={form.control}\n        name=\"price\"\n        kind=\"number\"\n        label=\"Budget\"\n        min={0}\n        max={100000}\n        required\n      />\n\n      <FormTextarea\n        control={form.control}\n        name=\"notes\"\n        label=\"Notes\"\n        required\n        rows={3}\n        description=\"RHF handles error and required states.\"\n      />\n\n      <FormSwitch control={form.control} name=\"active\" label=\"Active\" />\n\n      <Button type=\"submit\">Save</Button>\n    </form>\n  )",
 	htmlCode: "<form><label for=\"workspace\">Workspace</label><input id=\"workspace\" value=\"Azamat UI\" /></form>",
-	cliCommand: "npx tembro add form-wrapper",
+	cliCommand: "npx tembro add form-input form-textarea form-switch",
 	highlights: [
 		"control + name contract",
 		"Universal `kind` variants",
@@ -40,7 +40,7 @@ var e = {
 		"Render validation messages through wrapper-level `error` or formState errors for consistent spacing."
 	]
 }, t = {
-	code: "import { useForm } from \"react-hook-form\"\nimport { Button, FormSelect } from \"tembro\"\n\nconst statusOptions = [\n  { label: \"Draft\", value: \"draft\" },\n  { label: \"Review\", value: \"review\" },\n  { label: \"Live\", value: \"live\" },\n]\n\nexport function Example() {\n  const form = useForm({\n    defaultValues: {\n      status: \"review\",\n      ownerId: \"workspace-alpha\",\n    },\n  })\n\n  return (\n    <form className=\"space-y-4\">\n      <FormSelect\n        control={form.control}\n        name=\"status\"\n        label=\"Release status\"\n        options={statusOptions}\n        placeholder=\"Choose status\"\n      />\n\n      <FormSelect\n        control={form.control}\n        name=\"ownerId\"\n        kind=\"async\"\n        label=\"Linked workspace\"\n        loadOptions={loadWorkspaces}\n        loadSelectedOption={loadWorkspace}\n      />\n\n      <Button type=\"submit\">Save</Button>\n    </form>\n  )\n}",
+	code: "import { useForm } from \"react-hook-form\"\nimport { Button, FormSelect } from \"tembro\"\n\nconst statusOptions = [\n  { label: \"Draft\", value: \"draft\" },\n  { label: \"Review\", value: \"review\" },\n  { label: \"Live\", value: \"live\" },\n]\n\nconst workspaceOptions = [\n  { value: \"workspace-alpha\", label: \"Workspace Alpha\", description: \"Core design system route\" },\n  { value: \"workspace-beta\", label: \"Workspace Beta\", description: \"CRM rollout workspace\" },\n]\n\nasync function loadWorkspaces(search: string) {\n  const query = search.trim().toLowerCase()\n  return workspaceOptions.filter((option) => !query || option.label.toLowerCase().includes(query))\n}\n\nasync function loadWorkspace(value: string) {\n  return workspaceOptions.find((option) => option.value === value) ?? null\n}\n\nexport function Example() {\n  const form = useForm({\n    defaultValues: {\n      status: \"review\",\n      ownerId: \"workspace-alpha\",\n    },\n  })\n\n  return (\n    <form className=\"space-y-4\">\n      <FormSelect\n        control={form.control}\n        name=\"status\"\n        label=\"Release status\"\n        options={statusOptions}\n        placeholder=\"Choose status\"\n      />\n\n      <FormSelect\n        control={form.control}\n        name=\"ownerId\"\n        kind=\"async\"\n        label=\"Linked workspace\"\n        loadOptions={loadWorkspaces}\n        loadSelectedOption={loadWorkspace}\n      />\n\n      <Button type=\"submit\">Save</Button>\n    </form>\n  )\n}",
 	cliCommand: "npx tembro add form-select",
 	highlights: [
 		"One RHF select wrapper",
@@ -73,7 +73,7 @@ var e = {
 		"Keep the RHF contract identical while the field interaction model changes underneath."
 	]
 }, n = {
-	code: "import { useForm } from \"react-hook-form\"\nimport { Button, FormAsyncSelect } from \"tembro\"\n\nexport function Example() {\n  const form = useForm({\n    defaultValues: {\n      ownerId: \"workspace-alpha\",\n    },\n  })\n\n  return (\n    <form className=\"space-y-4\">\n      <FormAsyncSelect\n        control={form.control}\n        name=\"ownerId\"\n        label=\"Linked workspace\"\n        loadOptions={loadWorkspaces}\n        loadSelectedOption={loadWorkspace}\n      />\n\n      <Button type=\"submit\">Save</Button>\n    </form>\n  )\n}\n\n// New work should prefer:\n// <FormSelect control={form.control} name=\"ownerId\" kind=\"async\" ... />",
+	code: "import { useForm } from \"react-hook-form\"\nimport { Button, FormAsyncSelect } from \"tembro\"\n\nconst workspaceOptions = [\n  { value: \"workspace-alpha\", label: \"Workspace Alpha\", description: \"Core design system route\" },\n  { value: \"workspace-beta\", label: \"Workspace Beta\", description: \"CRM rollout workspace\" },\n]\n\nasync function loadWorkspaces(search: string) {\n  const query = search.trim().toLowerCase()\n  return workspaceOptions.filter((option) => !query || option.label.toLowerCase().includes(query))\n}\n\nasync function loadWorkspace(value: string) {\n  return workspaceOptions.find((option) => option.value === value) ?? null\n}\n\nexport function Example() {\n  const form = useForm({\n    defaultValues: {\n      ownerId: \"workspace-alpha\",\n    },\n  })\n\n  return (\n    <form className=\"space-y-4\">\n      <FormAsyncSelect\n        control={form.control}\n        name=\"ownerId\"\n        label=\"Linked workspace\"\n        loadOptions={loadWorkspaces}\n        loadSelectedOption={loadWorkspace}\n      />\n\n      <Button type=\"submit\">Save</Button>\n    </form>\n  )\n}\n\n// New work should prefer:\n// <FormSelect control={form.control} name=\"ownerId\" kind=\"async\" ... />",
 	cliCommand: "npx tembro add form-async-select",
 	highlights: [
 		"Compatibility alias",

package/dist/showcase/premium/form-wrapper/showcase.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/form/form-field-shell.cjs"),i=require("../../../components/form/form-input.cjs"),a=require("../../../components/form/form-select.cjs"),o=require("../../../components/form/form-switch.cjs"),s=require("../../../components/form/form-textarea.cjs"),c=require("../../../components/form/form-async-select.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime"),d=require("react-hook-form");var f=[{label:`Draft`,value:`draft`},{label:`Review`,value:`review`},{label:`Live`,value:`live`}],p=[{value:`workspace-alpha`,label:`Workspace Alpha`,description:`Core design system route`},{value:`workspace-beta`,label:`Workspace Beta`,description:`CRM rollout workspace`},{value:`workspace-gamma`,label:`Workspace Gamma`,description:`Billing and pricing flows`}];function m(e){let t=e.trim().toLowerCase();return Promise.resolve(p.filter(e=>!t||e.label.toLowerCase().includes(t)).map(e=>({...e})))}function h(e){let t=p.find(t=>t.value===e);return Promise.resolve(t?{...t}:null)}function g({mode:e}){let[g,_]=l.useState(``);l.useEffect(()=>{_(window.location.pathname)},[]);let v=(0,d.useForm)({defaultValues:{name:`Azamat UI`,ownerPhone:`+998 90 123 45 67`,budget:120,notes:`RHF wrapper coverage for control, name, and validation.`,active:!0,status:`review`,ownerId:`workspace-alpha`}}),y=(0,d.useWatch)({control:v.control,name:`active`}),b=g.split(`/`).filter(Boolean).at(-1);return b===`form-select`?(0,u.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,u.jsx)(a.FormSelect,{control:v.control,name:`status`,label:`Release status`,options:[...f]}),(0,u.jsx)(a.FormSelect,{control:v.control,name:`ownerId`,kind:`async`,label:`Linked workspace`,defaultOptions:p.map(e=>({...e})),loadOptions:m,loadSelectedOption:h})]}):b===`form-async-select`?(0,u.jsx)(c.FormAsyncSelect,{control:v.control,name:`ownerId`,label:`Linked workspace`,defaultOptions:p.map(e=>({...e})),loadOptions:m,loadSelectedOption:h}):(0,u.jsxs)(`form`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,u.jsx)(r.FormFieldShell,{label:`Workspace setup`,description:`Shared shell for required marker, error flow and spacing.`,required:!0,children:(0,u.jsx)(i.FormInput,{control:v.control,name:`name`,label:`Workspace name`,required:!0})}),(0,u.jsx)(i.FormInput,{control:v.control,name:`ownerPhone`,kind:`phone`,label:`Owner phone`}),(0,u.jsx)(i.FormInput,{control:v.control,name:`budget`,kind:`number`,label:`Budget`,min:0,max:999999}),(0,u.jsx)(s.FormTextarea,{control:v.control,name:`notes`,label:`Notes`,rows:3})]}),(0,u.jsx)(o.FormSwitch,{control:v.control,name:`active`,label:`Active`}),(0,u.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,u.jsx)(t.Button,{type:`button`,children:`Save`}),(0,u.jsx)(t.Button,{type:`button`,variant:`outline`,onClick:()=>v.reset(),children:`Reset`}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e===`playground`?`Interactive`:y?`Active`:`Paused`})]})]})}exports.FormWrapperShowcase=g;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/form/form-input.cjs"),i=require("../../../components/form/form-select.cjs"),a=require("../../../components/form/form-switch.cjs"),o=require("../../../components/form/form-textarea.cjs"),s=require("../../../components/form/form-date-picker.cjs"),c=require("../../../components/form/form-date-range-picker.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime"),d=require("react-hook-form");var f=[{label:`Draft`,value:`draft`},{label:`Review`,value:`review`},{label:`Live`,value:`live`}],p=[{value:`workspace-alpha`,label:`Workspace Alpha`,description:`Core design system route`},{value:`workspace-beta`,label:`Workspace Beta`,description:`CRM rollout workspace`},{value:`workspace-gamma`,label:`Workspace Gamma`,description:`Billing and pricing flows`}];function m(e){let t=e.trim().toLowerCase();return Promise.resolve(p.filter(e=>!t||e.label.toLowerCase().includes(t)).map(e=>({...e})))}function h(e){let t=p.find(t=>t.value===e);return Promise.resolve(t?{...t}:null)}function g({mode:e}){let[g,_]=l.useState(``);l.useEffect(()=>{_(window.location.pathname)},[]);let v=(0,d.useForm)({defaultValues:{name:`Azamat UI`,ownerPhone:`+998 90 123 45 67`,budget:120,notes:`RHF wrapper coverage for control, name, and validation.`,active:!0,query:`billing`,password:``,dueDate:`2026-07-18`,period:{from:`2026-07-01`,to:`2026-07-14`},periodFrom:`2026-07-01`,periodTo:`2026-07-14`,status:`review`,ownerId:`workspace-alpha`}}),y=(0,d.useWatch)({control:v.control,name:`active`}),b=g.split(`/`).filter(Boolean).at(-1);return b===`form-select`||b===`form-async-select`?(0,u.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,u.jsx)(i.FormSelect,{control:v.control,name:`status`,label:`Release status`,options:[...f]}),(0,u.jsx)(i.FormSelect,{control:v.control,name:`ownerId`,kind:`async`,label:`Linked workspace`,defaultOptions:p.map(e=>({...e})),loadOptions:m,loadSelectedOption:h})]}):b===`form-search-input`?(0,u.jsx)(r.FormInput,{control:v.control,name:`query`,kind:`search`,label:`Search query`,description:`Search wrapper should keep label, hint and result-ready spacing together.`,placeholder:`Search workspaces`}):b===`form-password-input`?(0,u.jsx)(r.FormInput,{control:v.control,name:`password`,kind:`password`,label:`Workspace password`,description:`Password wrapper keeps toggle behavior inside the same form shell.`,placeholder:`Enter secure password`}):b===`form-number-input`?(0,u.jsx)(r.FormInput,{control:v.control,name:`budget`,kind:`number`,label:`Budget`,description:`Numeric wrapper keeps parsed value handling inside the field contract.`,min:0,max:999999}):b===`form-phone-input`?(0,u.jsx)(r.FormInput,{control:v.control,name:`ownerPhone`,kind:`phone`,label:`Owner phone`,description:`Phone wrapper preserves stable raw value while showing a formatted UI.`}):b===`form-date-input`?(0,u.jsx)(r.FormInput,{control:v.control,name:`dueDate`,kind:`date`,label:`Due date`,description:`Use the lightweight date input wrapper when string date entry is enough.`}):b===`form-date-range-input`?(0,u.jsx)(r.FormInput,{control:v.control,name:`period`,kind:`date-range`,label:`Reporting period`,description:`Range input wrapper keeps from/to fields under one shell.`}):b===`form-date-picker`?(0,u.jsx)(s.FormDatePicker,{control:v.control,name:`dueDate`,label:`Launch date`,description:`Use the picker wrapper when calendar selection matters more than raw typing.`}):b===`form-date-range-picker`?(0,u.jsx)(c.FormDateRangePicker,{control:v.control,fromName:`periodFrom`,toName:`periodTo`,label:`Launch window`,description:`Popover range picker keeps both fields synchronized inside one wrapper.`}):(0,u.jsxs)(`form`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,u.jsx)(r.FormInput,{control:v.control,name:`name`,label:`Workspace name`,description:`Shared shell keeps required marker, helper text and error spacing aligned.`,required:!0}),(0,u.jsx)(r.FormInput,{control:v.control,name:`ownerPhone`,kind:`phone`,label:`Owner phone`}),(0,u.jsx)(r.FormInput,{control:v.control,name:`budget`,kind:`number`,label:`Budget`,min:0,max:999999}),(0,u.jsx)(o.FormTextarea,{control:v.control,name:`notes`,label:`Notes`,rows:3})]}),(0,u.jsx)(a.FormSwitch,{control:v.control,name:`active`,label:`Active`}),(0,u.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,u.jsx)(t.Button,{type:`button`,children:`Save`}),(0,u.jsx)(t.Button,{type:`button`,variant:`outline`,onClick:()=>v.reset(),children:`Reset`}),(0,u.jsx)(n.Badge,{variant:`outline`,children:e===`playground`?`Interactive`:y?`Active`:`Paused`})]})]})}exports.FormWrapperShowcase=g;

package/dist/showcase/premium/form-wrapper/showcase.js

@@ -1,11 +1,11 @@
 import { Button as e } from "../../../components/ui/button/index.js";
 import { Badge as t } from "../../../components/ui/badge/index.js";
-import { FormFieldShell as n } from "../../../components/form/form-field-shell.js";
-import { FormInput as r } from "../../../components/form/form-input.js";
-import { FormSelect as i } from "../../../components/form/form-select.js";
-import { FormSwitch as a } from "../../../components/form/form-switch.js";
-import { FormTextarea as o } from "../../../components/form/form-textarea.js";
-import { FormAsyncSelect as s } from "../../../components/form/form-async-select.js";
+import { FormInput as n } from "../../../components/form/form-input.js";
+import { FormSelect as r } from "../../../components/form/form-select.js";
+import { FormSwitch as i } from "../../../components/form/form-switch.js";
+import { FormTextarea as a } from "../../../components/form/form-textarea.js";
+import { FormDatePicker as o } from "../../../components/form/form-date-picker.js";
+import { FormDateRangePicker as s } from "../../../components/form/form-date-range-picker.js";
 import * as c from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { useForm as d, useWatch as f } from "react-hook-form";
@@ -59,20 +59,29 @@ function _({ mode: _ }) {
 		budget: 120,
 		notes: "RHF wrapper coverage for control, name, and validation.",
 		active: !0,
+		query: "billing",
+		password: "",
+		dueDate: "2026-07-18",
+		period: {
+			from: "2026-07-01",
+			to: "2026-07-14"
+		},
+		periodFrom: "2026-07-01",
+		periodTo: "2026-07-14",
 		status: "review",
 		ownerId: "workspace-alpha"
 	} }), x = f({
 		control: b.control,
 		name: "active"
 	}), S = v.split("/").filter(Boolean).at(-1);
-	return S === "form-select" ? /* @__PURE__ */ u("div", {
+	return S === "form-select" || S === "form-async-select" ? /* @__PURE__ */ u("div", {
 		className: "grid gap-4 xl:grid-cols-2",
-		children: [/* @__PURE__ */ l(i, {
+		children: [/* @__PURE__ */ l(r, {
 			control: b.control,
 			name: "status",
 			label: "Release status",
 			options: [...p]
-		}), /* @__PURE__ */ l(i, {
+		}), /* @__PURE__ */ l(r, {
 			control: b.control,
 			name: "ownerId",
 			kind: "async",
@@ -81,13 +90,57 @@ function _({ mode: _ }) {
 			loadOptions: h,
 			loadSelectedOption: g
 		})]
-	}) : S === "form-async-select" ? /* @__PURE__ */ l(s, {
+	}) : S === "form-search-input" ? /* @__PURE__ */ l(n, {
 		control: b.control,
-		name: "ownerId",
-		label: "Linked workspace",
-		defaultOptions: m.map((e) => ({ ...e })),
-		loadOptions: h,
-		loadSelectedOption: g
+		name: "query",
+		kind: "search",
+		label: "Search query",
+		description: "Search wrapper should keep label, hint and result-ready spacing together.",
+		placeholder: "Search workspaces"
+	}) : S === "form-password-input" ? /* @__PURE__ */ l(n, {
+		control: b.control,
+		name: "password",
+		kind: "password",
+		label: "Workspace password",
+		description: "Password wrapper keeps toggle behavior inside the same form shell.",
+		placeholder: "Enter secure password"
+	}) : S === "form-number-input" ? /* @__PURE__ */ l(n, {
+		control: b.control,
+		name: "budget",
+		kind: "number",
+		label: "Budget",
+		description: "Numeric wrapper keeps parsed value handling inside the field contract.",
+		min: 0,
+		max: 999999
+	}) : S === "form-phone-input" ? /* @__PURE__ */ l(n, {
+		control: b.control,
+		name: "ownerPhone",
+		kind: "phone",
+		label: "Owner phone",
+		description: "Phone wrapper preserves stable raw value while showing a formatted UI."
+	}) : S === "form-date-input" ? /* @__PURE__ */ l(n, {
+		control: b.control,
+		name: "dueDate",
+		kind: "date",
+		label: "Due date",
+		description: "Use the lightweight date input wrapper when string date entry is enough."
+	}) : S === "form-date-range-input" ? /* @__PURE__ */ l(n, {
+		control: b.control,
+		name: "period",
+		kind: "date-range",
+		label: "Reporting period",
+		description: "Range input wrapper keeps from/to fields under one shell."
+	}) : S === "form-date-picker" ? /* @__PURE__ */ l(o, {
+		control: b.control,
+		name: "dueDate",
+		label: "Launch date",
+		description: "Use the picker wrapper when calendar selection matters more than raw typing."
+	}) : S === "form-date-range-picker" ? /* @__PURE__ */ l(s, {
+		control: b.control,
+		fromName: "periodFrom",
+		toName: "periodTo",
+		label: "Launch window",
+		description: "Popover range picker keeps both fields synchronized inside one wrapper."
 	}) : /* @__PURE__ */ u("form", {
 		className: "space-y-5",
 		children: [
@@ -95,23 +148,19 @@ function _({ mode: _ }) {
 				className: "grid gap-4 xl:grid-cols-2",
 				children: [
 					/* @__PURE__ */ l(n, {
-						label: "Workspace setup",
-						description: "Shared shell for required marker, error flow and spacing.",
-						required: !0,
-						children: /* @__PURE__ */ l(r, {
-							control: b.control,
-							name: "name",
-							label: "Workspace name",
-							required: !0
-						})
+						control: b.control,
+						name: "name",
+						label: "Workspace name",
+						description: "Shared shell keeps required marker, helper text and error spacing aligned.",
+						required: !0
 					}),
-					/* @__PURE__ */ l(r, {
+					/* @__PURE__ */ l(n, {
 						control: b.control,
 						name: "ownerPhone",
 						kind: "phone",
 						label: "Owner phone"
 					}),
-					/* @__PURE__ */ l(r, {
+					/* @__PURE__ */ l(n, {
 						control: b.control,
 						name: "budget",
 						kind: "number",
@@ -119,7 +168,7 @@ function _({ mode: _ }) {
 						min: 0,
 						max: 999999
 					}),
-					/* @__PURE__ */ l(o, {
+					/* @__PURE__ */ l(a, {
 						control: b.control,
 						name: "notes",
 						label: "Notes",
@@ -127,7 +176,7 @@ function _({ mode: _ }) {
 					})
 				]
 			}),
-			/* @__PURE__ */ l(a, {
+			/* @__PURE__ */ l(i, {
 				control: b.control,
 				name: "active",
 				label: "Active"