tembro 3.1.5 → 3.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/README.md +241 -91
  3. package/dist/components/ui/dialog/index.d.ts +3 -1
  4. package/dist/components/ui/select/index.d.ts +6 -3
  5. package/dist/showcase/package-meta.d.ts +3 -3
  6. package/dist/showcase/premium/wizard/index.cjs +1 -0
  7. package/dist/showcase/premium/wizard/index.d.ts +2 -0
  8. package/dist/showcase/premium/wizard/index.js +1 -0
  9. package/dist/showcase/premium/wizard/mock.cjs +1 -0
  10. package/dist/showcase/premium/wizard/mock.d.ts +2 -0
  11. package/dist/showcase/premium/wizard/mock.js +1 -0
  12. package/dist/showcase/premium/wizard/showcase.cjs +1 -0
  13. package/dist/showcase/premium/wizard/showcase.d.ts +2 -0
  14. package/dist/showcase/premium/wizard/showcase.js +1 -0
  15. package/dist/showcase/search-utils.d.ts +1 -1
  16. package/dist/showcase/site-data.d.ts +6 -6
  17. package/dist/src/components/layout/app-sidebar.cjs +1 -1
  18. package/dist/src/components/layout/app-sidebar.js +49 -36
  19. package/dist/src/components/theme-provider.cjs +1 -1
  20. package/dist/src/components/theme-provider.js +1 -1
  21. package/dist/src/components/ui/dialog/index.cjs +1 -1
  22. package/dist/src/components/ui/dialog/index.js +14 -7
  23. package/dist/src/components/ui/select/index.cjs +1 -1
  24. package/dist/src/components/ui/select/index.js +44 -43
  25. package/dist/src/index.cjs +1 -1
  26. package/dist/src/index.js +101 -101
  27. package/dist/src/showcase/component-api-schema.cjs +1 -1
  28. package/dist/src/showcase/component-api-schema.js +868 -9
  29. package/dist/src/showcase/demo-snippets/forms/index.cjs +1 -1
  30. package/dist/src/showcase/demo-snippets/forms/index.js +1 -1
  31. package/dist/src/showcase/fallback.cjs +4 -4
  32. package/dist/src/showcase/fallback.js +354 -181
  33. package/dist/src/showcase/index.cjs +1 -1
  34. package/dist/src/showcase/index.js +2 -2
  35. package/dist/src/showcase/package-meta.cjs +1 -1
  36. package/dist/src/showcase/package-meta.js +1 -1
  37. package/dist/src/showcase/premium/app-sidebar/mock.cjs +3 -2
  38. package/dist/src/showcase/premium/app-sidebar/mock.js +1 -1
  39. package/dist/src/showcase/premium/app-sidebar/showcase.cjs +1 -1
  40. package/dist/src/showcase/premium/app-sidebar/showcase.js +1 -1
  41. package/dist/src/showcase/premium/async-select/showcase.cjs +1 -1
  42. package/dist/src/showcase/premium/async-select/showcase.js +118 -74
  43. package/dist/src/showcase/premium/avatar/showcase.cjs +1 -1
  44. package/dist/src/showcase/premium/avatar/showcase.js +5 -5
  45. package/dist/src/showcase/premium/dialog/mock.cjs +6 -1
  46. package/dist/src/showcase/premium/dialog/mock.js +1 -1
  47. package/dist/src/showcase/premium/dialog/showcase.cjs +1 -1
  48. package/dist/src/showcase/premium/dialog/showcase.js +101 -39
  49. package/dist/src/showcase/premium/form-wrapper/mock.cjs +2 -2
  50. package/dist/src/showcase/premium/form-wrapper/mock.js +2 -2
  51. package/dist/src/showcase/premium/form-wrapper/showcase.cjs +1 -1
  52. package/dist/src/showcase/premium/form-wrapper/showcase.js +1 -1
  53. package/dist/src/showcase/premium/index.cjs +1 -1
  54. package/dist/src/showcase/premium/index.js +9 -3
  55. package/dist/src/showcase/premium/input/showcase.cjs +1 -1
  56. package/dist/src/showcase/premium/input/showcase.js +1 -1
  57. package/dist/src/showcase/premium/json-input/showcase.cjs +1 -1
  58. package/dist/src/showcase/premium/json-input/showcase.js +1 -1
  59. package/dist/src/showcase/premium/select/showcase.cjs +1 -1
  60. package/dist/src/showcase/premium/select/showcase.js +53 -0
  61. package/dist/src/showcase/premium/table/mock.cjs +1 -1
  62. package/dist/src/showcase/premium/table/mock.js +1 -1
  63. package/dist/src/showcase/premium/types.cjs +1 -1
  64. package/dist/src/showcase/premium/types.js +1 -1
  65. package/dist/src/showcase/premium/wizard/index.cjs +1 -0
  66. package/dist/src/showcase/premium/wizard/index.js +3 -0
  67. package/dist/src/showcase/premium/wizard/mock.cjs +25 -0
  68. package/dist/src/showcase/premium/wizard/mock.js +32 -0
  69. package/dist/src/showcase/premium/wizard/showcase.cjs +1 -0
  70. package/dist/src/showcase/premium/wizard/showcase.js +130 -0
  71. package/dist/src/showcase/preview-registry.cjs +1 -1
  72. package/dist/src/showcase/preview-registry.js +6 -6
  73. package/dist/src/showcase/registry-quality.cjs +1 -1
  74. package/dist/src/showcase/registry-quality.js +5 -0
  75. package/dist/src/showcase/registry-specific.cjs +1 -1
  76. package/dist/src/showcase/registry-specific.js +2 -2
  77. package/dist/src/showcase/render-registry-preview.cjs +1 -1
  78. package/dist/src/showcase/render-registry-preview.js +2 -2
  79. package/dist/src/showcase/site-data.cjs +1 -1
  80. package/dist/src/showcase/site-data.js +198 -44
  81. package/dist/src/showcase/tembro-registry.json.cjs +1 -1
  82. package/dist/src/showcase/tembro-registry.json.js +1 -1
  83. package/dist/src/showcase/types.cjs +1 -1
  84. package/dist/src/showcase/types.js +1 -1
  85. package/package.json +13 -9
  86. package/packages/cli/dist/index.cjs +127 -127
  87. package/packages/cli/vendor/src/components/layout/app-sidebar.tsx +31 -6
  88. package/packages/cli/vendor/src/components/theme-provider.tsx +1 -1
  89. package/packages/cli/vendor/src/components/ui/dialog/index.tsx +15 -3
  90. package/packages/cli/vendor/src/components/ui/select/index.tsx +17 -10
  91. package/packages/cli/vendor/src/showcase/component-api-schema.ts +269 -39
  92. package/packages/cli/vendor/src/showcase/demo-snippets/forms/index.ts +1 -1
  93. package/packages/cli/vendor/src/showcase/fallback.tsx +202 -39
  94. package/packages/cli/vendor/src/showcase/index.ts +6 -6
  95. package/packages/cli/vendor/src/showcase/package-meta.ts +3 -3
  96. package/packages/cli/vendor/src/showcase/premium/app-sidebar/mock.ts +3 -2
  97. package/packages/cli/vendor/src/showcase/premium/app-sidebar/showcase.tsx +1 -1
  98. package/packages/cli/vendor/src/showcase/premium/async-select/showcase.tsx +50 -4
  99. package/packages/cli/vendor/src/showcase/premium/avatar/showcase.tsx +5 -5
  100. package/packages/cli/vendor/src/showcase/premium/dialog/mock.ts +6 -1
  101. package/packages/cli/vendor/src/showcase/premium/dialog/showcase.tsx +53 -1
  102. package/packages/cli/vendor/src/showcase/premium/form-wrapper/mock.ts +2 -2
  103. package/packages/cli/vendor/src/showcase/premium/form-wrapper/showcase.tsx +1 -1
  104. package/packages/cli/vendor/src/showcase/premium/index.ts +5 -3
  105. package/packages/cli/vendor/src/showcase/premium/input/showcase.tsx +1 -1
  106. package/packages/cli/vendor/src/showcase/premium/json-input/showcase.tsx +1 -1
  107. package/packages/cli/vendor/src/showcase/premium/select/showcase.tsx +38 -0
  108. package/packages/cli/vendor/src/showcase/premium/table/mock.ts +1 -1
  109. package/packages/cli/vendor/src/showcase/premium/types.ts +1 -1
  110. package/packages/cli/vendor/src/showcase/premium/wizard/index.ts +2 -0
  111. package/packages/cli/vendor/src/showcase/premium/wizard/mock.ts +41 -0
  112. package/packages/cli/vendor/src/showcase/premium/wizard/showcase.tsx +88 -0
  113. package/packages/cli/vendor/src/showcase/preview-registry.tsx +6 -6
  114. package/packages/cli/vendor/src/showcase/registry-quality.ts +5 -0
  115. package/packages/cli/vendor/src/showcase/registry-specific.tsx +2 -2
  116. package/packages/cli/vendor/src/showcase/render-registry-preview.tsx +2 -2
  117. package/packages/cli/vendor/src/showcase/site-data.tsx +89 -32
  118. package/packages/cli/vendor/src/showcase/tembro-registry.json +1 -1
  119. package/packages/cli/vendor/src/showcase/types.ts +1 -1
  120. package/registry.json +1 -1
@@ -1,77 +1,139 @@
1
1
  import { Button as e } from "../../../components/ui/button/index.js";
2
2
  import { Badge as t } from "../../../components/ui/badge/index.js";
3
- import { Dialog as n, DialogContent as r, DialogDescription as i, DialogFooter as a, DialogHeader as o, DialogTitle as s, DialogTrigger as c } from "../../../components/ui/dialog/index.js";
4
- import { dialogDemoItems as l } from "./data.js";
5
- import { jsx as u, jsxs as d } from "react/jsx-runtime";
3
+ import { Dialog as n, DialogBody as r, DialogContent as i, DialogDescription as a, DialogFooter as o, DialogHeader as s, DialogTitle as c, DialogTrigger as l } from "../../../components/ui/dialog/index.js";
4
+ import { dialogDemoItems as u } from "./data.js";
5
+ import { jsx as d, jsxs as f } from "react/jsx-runtime";
6
6
  //#region src/showcase/premium/dialog/showcase.tsx
7
- var f = "border-t border-[color:var(--aui-divider)] py-6";
8
- function p() {
9
- return /* @__PURE__ */ d("div", {
7
+ var p = "border-t border-[color:var(--aui-divider)] py-6";
8
+ function m() {
9
+ return /* @__PURE__ */ f("div", {
10
10
  className: "space-y-0",
11
11
  children: [
12
- /* @__PURE__ */ u("section", {
12
+ /* @__PURE__ */ d("section", {
13
13
  className: "pb-6",
14
- children: /* @__PURE__ */ d("div", {
14
+ children: /* @__PURE__ */ f("div", {
15
15
  className: "max-w-xl",
16
16
  children: [
17
- /* @__PURE__ */ u("p", {
17
+ /* @__PURE__ */ d("p", {
18
18
  className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
19
19
  children: "Overlay"
20
20
  }),
21
- /* @__PURE__ */ u("h3", {
21
+ /* @__PURE__ */ d("h3", {
22
22
  className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
23
23
  children: "Dialogs should justify focus"
24
24
  }),
25
- /* @__PURE__ */ u("p", {
25
+ /* @__PURE__ */ d("p", {
26
26
  className: "mt-3 text-sm leading-6 aui-text-muted",
27
27
  children: "Use them for short, high-risk, or confirm-first actions. Keep the trigger, title, description, and footer actions explicit."
28
28
  })
29
29
  ]
30
30
  })
31
31
  }),
32
- /* @__PURE__ */ u("section", {
33
- className: f,
34
- children: /* @__PURE__ */ u("div", {
32
+ /* @__PURE__ */ d("section", {
33
+ className: p,
34
+ children: /* @__PURE__ */ d("div", {
35
35
  className: "grid gap-4 xl:grid-cols-3",
36
- children: l.map((l) => /* @__PURE__ */ d("div", {
36
+ children: u.map((u) => /* @__PURE__ */ f("div", {
37
37
  className: "rounded-[20px] border border-[color:var(--aui-divider)] px-4 py-4",
38
- children: [/* @__PURE__ */ d("div", {
38
+ children: [/* @__PURE__ */ f("div", {
39
39
  className: "flex items-start justify-between gap-4",
40
- children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
40
+ children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
41
41
  className: "text-sm font-semibold aui-text-strong",
42
- children: l.title
43
- }), /* @__PURE__ */ u("p", {
42
+ children: u.title
43
+ }), /* @__PURE__ */ d("p", {
44
44
  className: "mt-2 text-sm leading-6 aui-text-muted",
45
- children: l.description
46
- })] }), /* @__PURE__ */ u(t, {
47
- variant: l.confirmVariant === "destructive" ? "destructive" : "outline",
48
- children: l.confirmLabel
45
+ children: u.description
46
+ })] }), /* @__PURE__ */ d(t, {
47
+ variant: u.confirmVariant === "destructive" ? "destructive" : "outline",
48
+ children: u.confirmLabel
49
49
  })]
50
- }), /* @__PURE__ */ u("div", {
50
+ }), /* @__PURE__ */ d("div", {
51
51
  className: "mt-4",
52
- children: /* @__PURE__ */ d(n, { children: [/* @__PURE__ */ u(c, {
53
- render: /* @__PURE__ */ u(e, { variant: l.triggerVariant }),
54
- children: l.label
55
- }), /* @__PURE__ */ d(r, { children: [/* @__PURE__ */ d(o, { children: [/* @__PURE__ */ u(s, { children: l.title }), /* @__PURE__ */ u(i, { children: l.description })] }), /* @__PURE__ */ u(a, {
56
- showCloseButton: !0,
57
- children: /* @__PURE__ */ u(e, {
58
- variant: l.confirmVariant,
59
- children: l.confirmLabel
52
+ children: /* @__PURE__ */ f(n, { children: [/* @__PURE__ */ d(l, {
53
+ render: /* @__PURE__ */ d(e, { variant: u.triggerVariant }),
54
+ children: u.label
55
+ }), /* @__PURE__ */ f(i, { children: [
56
+ /* @__PURE__ */ f(s, { children: [/* @__PURE__ */ d(c, { children: u.title }), /* @__PURE__ */ d(a, { children: u.description })] }),
57
+ /* @__PURE__ */ d(r, { children: /* @__PURE__ */ d("div", {
58
+ className: "rounded-[16px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm leading-6 aui-text-muted",
59
+ children: "This body area scrolls independently when content becomes long. Footer actions stay visible and aligned."
60
+ }) }),
61
+ /* @__PURE__ */ d(o, {
62
+ showCloseButton: !0,
63
+ children: /* @__PURE__ */ d(e, {
64
+ variant: u.confirmVariant,
65
+ children: u.confirmLabel
66
+ })
60
67
  })
61
- })] })] })
68
+ ] })] })
62
69
  })]
63
- }, l.label))
70
+ }, u.label))
64
71
  })
65
72
  }),
66
- /* @__PURE__ */ u("section", {
67
- className: f,
68
- children: /* @__PURE__ */ u("div", {
73
+ /* @__PURE__ */ d("section", {
74
+ className: p,
75
+ children: /* @__PURE__ */ f("div", {
76
+ className: "grid gap-4 xl:grid-cols-2",
77
+ children: [/* @__PURE__ */ f(n, { children: [/* @__PURE__ */ d(l, {
78
+ render: /* @__PURE__ */ d(e, { variant: "outline" }),
79
+ children: "Open form dialog"
80
+ }), /* @__PURE__ */ f(i, {
81
+ size: "lg",
82
+ children: [
83
+ /* @__PURE__ */ f(s, { children: [/* @__PURE__ */ d(c, { children: "Create staff member" }), /* @__PURE__ */ d(a, { children: "Use focused form dialogs for short admin tasks with stable footer actions." })] }),
84
+ /* @__PURE__ */ d(r, { children: /* @__PURE__ */ d("div", {
85
+ className: "grid gap-4 sm:grid-cols-2",
86
+ children: [
87
+ "Full name",
88
+ "Phone",
89
+ "Role",
90
+ "Status",
91
+ "Branch",
92
+ "Temporary password"
93
+ ].map((e) => /* @__PURE__ */ f("label", {
94
+ className: "grid gap-2 text-sm font-medium aui-text-strong",
95
+ children: [e, /* @__PURE__ */ d("input", {
96
+ className: "h-10 rounded-xl border border-[color:var(--aui-input-border)] bg-[color:var(--aui-input-bg)] px-3 text-sm outline-none focus-visible:border-[color:var(--aui-ring)]",
97
+ placeholder: e
98
+ })]
99
+ }, e))
100
+ }) }),
101
+ /* @__PURE__ */ f(o, { children: [/* @__PURE__ */ d(e, {
102
+ variant: "outline",
103
+ children: "Cancel"
104
+ }), /* @__PURE__ */ d(e, { children: "Create staff" })] })
105
+ ]
106
+ })] }), /* @__PURE__ */ f(n, { children: [/* @__PURE__ */ d(l, {
107
+ render: /* @__PURE__ */ d(e, { variant: "destructive" }),
108
+ children: "Open destructive dialog"
109
+ }), /* @__PURE__ */ f(i, {
110
+ size: "sm",
111
+ children: [
112
+ /* @__PURE__ */ f(s, { children: [/* @__PURE__ */ d(c, { children: "Deactivate restaurant" }), /* @__PURE__ */ d(a, { children: "This action pauses public ordering and hides active shifts from the restaurant." })] }),
113
+ /* @__PURE__ */ d(r, { children: /* @__PURE__ */ d("div", {
114
+ className: "rounded-[16px] border border-red-200 bg-red-50 px-4 py-3 text-sm leading-6 text-red-700",
115
+ children: "Operators can reactivate it later, but active customer sessions will be interrupted."
116
+ }) }),
117
+ /* @__PURE__ */ f(o, { children: [/* @__PURE__ */ d(e, {
118
+ variant: "outline",
119
+ children: "Keep active"
120
+ }), /* @__PURE__ */ d(e, {
121
+ variant: "destructive",
122
+ children: "Deactivate"
123
+ })] })
124
+ ]
125
+ })] })]
126
+ })
127
+ }),
128
+ /* @__PURE__ */ d("section", {
129
+ className: p,
130
+ children: /* @__PURE__ */ d("div", {
69
131
  className: "grid gap-3",
70
132
  children: [
71
133
  "Keep the page understandable before the overlay opens.",
72
134
  "Use outcome-specific action labels inside the dialog footer.",
73
135
  "Do not move long multi-step workflows into a small modal by default."
74
- ].map((e) => /* @__PURE__ */ u("div", {
136
+ ].map((e) => /* @__PURE__ */ d("div", {
75
137
  className: "rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3 text-sm leading-6 aui-text-muted",
76
138
  children: e
77
139
  }, e))
@@ -81,4 +143,4 @@ function p() {
81
143
  });
82
144
  }
83
145
  //#endregion
84
- export { p as DialogShowcase };
146
+ export { m as DialogShowcase };
@@ -12,7 +12,7 @@ type DemoValues = {
12
12
  export function Example() {
13
13
  const form = useForm<DemoValues>({
14
14
  defaultValues: {
15
- name: "Azamat UI",
15
+ name: "Tembro",
16
16
  ownerPhone: "+998 90 123 45 67",
17
17
  price: 120,
18
18
  notes: "Use control, name, rules, error, and required labels.",
@@ -70,7 +70,7 @@ export function Example() {
70
70
 
71
71
  <Button type="submit">Save</Button>
72
72
  </form>
73
- )`,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"
73
+ )`,htmlCode:`<form><label for="workspace">Workspace</label><input id="workspace" value="Tembro" /></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"
74
74
  import { Button, FormSelect } from "tembro"
75
75
 
76
76
  const statusOptions = [
@@ -1,7 +1,7 @@
1
1
  //#region src/showcase/premium/form-wrapper/mock.ts
2
2
  var e = {
3
- 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 )",
4
- htmlCode: "<form><label for=\"workspace\">Workspace</label><input id=\"workspace\" value=\"Azamat UI\" /></form>",
3
+ 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: \"Tembro\",\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 )",
4
+ htmlCode: "<form><label for=\"workspace\">Workspace</label><input id=\"workspace\" value=\"Tembro\" /></form>",
5
5
  cliCommand: "npx tembro add form-input form-textarea form-switch",
6
6
  highlights: [
7
7
  "control + name contract",
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/form/form-input.cjs"),r=require("../../../components/form/form-select.cjs"),i=require("../../../components/form/form-switch.cjs"),a=require("../../../components/form/form-textarea.cjs");let o=require("react/jsx-runtime"),s=require("react-hook-form");var c=[{label:`Draft`,value:`draft`},{label:`Review`,value:`review`},{label:`Live`,value:`live`}],l=[{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 u(e){let t=e.trim().toLowerCase();return Promise.resolve(l.filter(e=>!t||e.label.toLowerCase().includes(t)).map(e=>({...e})))}function d(e){let t=l.find(t=>t.value===e);return Promise.resolve(t?{...t}:null)}function f({mode:f}){let p=(0,s.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`}}),m=(0,s.useWatch)({control:p.control,name:`active`}),h=typeof window>`u`?void 0:window.location.pathname.split(`/`).filter(Boolean).at(-1);return h===`form-select`||h===`form-async-select`?(0,o.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,o.jsx)(r.FormSelect,{control:p.control,name:`status`,label:`Release status`,options:[...c]}),(0,o.jsx)(r.FormSelect,{control:p.control,name:`ownerId`,kind:`async`,label:`Linked workspace`,defaultOptions:l.map(e=>({...e})),loadOptions:u,loadSelectedOption:d})]}):(0,o.jsxs)(`form`,{className:`space-y-5`,children:[(0,o.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,o.jsx)(n.FormInput,{control:p.control,name:`name`,label:`Workspace name`,description:`Shared shell keeps required marker, helper text and error spacing aligned.`,required:!0}),(0,o.jsx)(n.FormInput,{control:p.control,name:`ownerPhone`,kind:`phone`,label:`Owner phone`}),(0,o.jsx)(n.FormInput,{control:p.control,name:`budget`,kind:`number`,label:`Budget`,min:0,max:999999}),(0,o.jsx)(a.FormTextarea,{control:p.control,name:`notes`,label:`Notes`,rows:3})]}),(0,o.jsx)(i.FormSwitch,{control:p.control,name:`active`,label:`Active`}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,o.jsx)(e.Button,{type:`button`,children:`Save`}),(0,o.jsx)(e.Button,{type:`button`,variant:`outline`,onClick:()=>p.reset(),children:`Reset`}),(0,o.jsx)(t.Badge,{variant:`outline`,children:f===`playground`?`Interactive`:m?`Active`:`Paused`})]})]})}exports.FormWrapperShowcase=f;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../components/ui/button/index.cjs"),t=require("../../../components/ui/badge/index.cjs"),n=require("../../../components/form/form-input.cjs"),r=require("../../../components/form/form-select.cjs"),i=require("../../../components/form/form-switch.cjs"),a=require("../../../components/form/form-textarea.cjs");let o=require("react/jsx-runtime"),s=require("react-hook-form");var c=[{label:`Draft`,value:`draft`},{label:`Review`,value:`review`},{label:`Live`,value:`live`}],l=[{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 u(e){let t=e.trim().toLowerCase();return Promise.resolve(l.filter(e=>!t||e.label.toLowerCase().includes(t)).map(e=>({...e})))}function d(e){let t=l.find(t=>t.value===e);return Promise.resolve(t?{...t}:null)}function f({mode:f}){let p=(0,s.useForm)({defaultValues:{name:`Tembro`,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`}}),m=(0,s.useWatch)({control:p.control,name:`active`}),h=typeof window>`u`?void 0:window.location.pathname.split(`/`).filter(Boolean).at(-1);return h===`form-select`||h===`form-async-select`?(0,o.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,o.jsx)(r.FormSelect,{control:p.control,name:`status`,label:`Release status`,options:[...c]}),(0,o.jsx)(r.FormSelect,{control:p.control,name:`ownerId`,kind:`async`,label:`Linked workspace`,defaultOptions:l.map(e=>({...e})),loadOptions:u,loadSelectedOption:d})]}):(0,o.jsxs)(`form`,{className:`space-y-5`,children:[(0,o.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,o.jsx)(n.FormInput,{control:p.control,name:`name`,label:`Workspace name`,description:`Shared shell keeps required marker, helper text and error spacing aligned.`,required:!0}),(0,o.jsx)(n.FormInput,{control:p.control,name:`ownerPhone`,kind:`phone`,label:`Owner phone`}),(0,o.jsx)(n.FormInput,{control:p.control,name:`budget`,kind:`number`,label:`Budget`,min:0,max:999999}),(0,o.jsx)(a.FormTextarea,{control:p.control,name:`notes`,label:`Notes`,rows:3})]}),(0,o.jsx)(i.FormSwitch,{control:p.control,name:`active`,label:`Active`}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,o.jsx)(e.Button,{type:`button`,children:`Save`}),(0,o.jsx)(e.Button,{type:`button`,variant:`outline`,onClick:()=>p.reset(),children:`Reset`}),(0,o.jsx)(t.Badge,{variant:`outline`,children:f===`playground`?`Interactive`:m?`Active`:`Paused`})]})]})}exports.FormWrapperShowcase=f;
@@ -47,7 +47,7 @@ function p(e) {
47
47
  }
48
48
  function m({ mode: m }) {
49
49
  let h = c({ defaultValues: {
50
- name: "Azamat UI",
50
+ name: "Tembro",
51
51
  ownerPhone: "+998 90 123 45 67",
52
52
  budget: 120,
53
53
  notes: "RHF wrapper coverage for control, name, and validation.",
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const ee=require("./data-table/showcase.cjs"),te=require("./data-table/mock.cjs"),ne=require("./alert/showcase.cjs"),re=require("./alert/mock.cjs"),ie=require("./alert-dialog/showcase.cjs"),ae=require("./alert-dialog/mock.cjs"),oe=require("./activity-feed/showcase.cjs"),se=require("./activity-feed/mock.cjs"),e=require("./action-menu/showcase.cjs"),t=require("./action-menu/mock.cjs"),n=require("./app-sidebar/showcase.cjs"),r=require("./app-sidebar/mock.cjs"),i=require("./async-select/showcase.cjs"),a=require("./async-select/mock.cjs"),o=require("./async-multi-select/showcase.cjs"),s=require("./async-multi-select/mock.cjs"),c=require("./avatar/mock.cjs"),l=require("./avatar/showcase.cjs"),u=require("./carousel/mock.cjs"),d=require("./carousel/showcase.cjs"),f=require("./color-picker/mock.cjs"),p=require("./color-picker/showcase.cjs"),m=require("./json-input/mock.cjs"),h=require("./json-input/showcase.cjs"),g=require("./badge/showcase.cjs"),_=require("./badge/mock.cjs"),v=require("./divider/mock.cjs"),y=require("./divider/showcase.cjs"),b=require("./breadcrumbs/showcase.cjs"),x=require("./breadcrumbs/mock.cjs"),S=require("./button/showcase.cjs"),C=require("./button/mock.cjs"),w=require("./button-group/showcase.cjs"),T=require("./button-group/mock.cjs"),E=require("./calendar/showcase.cjs"),D=require("./calendar/mock.cjs"),O=require("./calendar-scheduler/mock.cjs"),k=require("./calendar-scheduler/showcase.cjs"),A=require("./card/showcase.cjs"),j=require("./card/mock.cjs"),M=require("./checkbox/showcase.cjs"),N=require("./checkbox/mock.cjs"),P=require("./code-block/mock.cjs"),F=require("./code-block/showcase.cjs"),I=require("./dual-list-picker/mock.cjs"),L=require("./dual-list-picker/showcase.cjs"),R=require("./collapse/showcase.cjs"),z=require("./collapse/mock.cjs"),B=require("./command-palette/showcase.cjs"),V=require("./command-palette/mock.cjs"),H=require("./confirm-dialog/showcase.cjs"),U=require("./confirm-dialog/mock.cjs"),W=require("./copy-button/mock.cjs"),G=require("./copy-button/showcase.cjs"),K=require("./data-state/mock.cjs"),ce=require("./data-state/showcase.cjs"),le=require("./date-picker/showcase.cjs"),ue=require("./date-picker/mock.cjs"),de=require("./date-range-picker/showcase.cjs"),fe=require("./date-range-picker/mock.cjs"),pe=require("./description-list/showcase.cjs"),me=require("./description-list/mock.cjs"),he=require("./dialog/showcase.cjs"),ge=require("./dialog/mock.cjs"),_e=require("./dropdown-menu/showcase.cjs"),ve=require("./dropdown-menu/mock.cjs"),ye=require("./drawer/showcase.cjs"),be=require("./drawer/mock.cjs"),q=require("./form-wrapper/showcase.cjs"),J=require("./form-wrapper/mock.cjs"),xe=require("./kanban-board/mock.cjs"),Se=require("./kanban-board/showcase.cjs"),Ce=require("./info-card/showcase.cjs"),we=require("./info-card/mock.cjs"),Te=require("./image-cropper/mock.cjs"),Ee=require("./image-cropper/showcase.cjs"),Y=require("./input/showcase.cjs"),X=require("./input/mock.cjs"),De=require("./kbd/showcase.cjs"),Oe=require("./kbd/mock.cjs"),ke=require("./list/mock.cjs"),Ae=require("./list/showcase.cjs"),je=require("./loading-state/showcase.cjs"),Me=require("./loading-state/mock.cjs"),Ne=require("./time-picker/mock.cjs"),Pe=require("./time-picker/showcase.cjs"),Fe=require("./resizable-panel/mock.cjs"),Ie=require("./resizable-panel/showcase.cjs"),Z=require("./notification-center/showcase.cjs"),Le=require("./notification-center/mock.cjs"),Re=require("./otp-input/showcase.cjs"),ze=require("./otp-input/mock.cjs"),Be=require("./section/mock.cjs"),Ve=require("./section/showcase.cjs"),He=require("./page-state/showcase.cjs"),Ue=require("./page-state/mock.cjs"),We=require("./pagination/showcase.cjs"),Ge=require("./pagination/mock.cjs"),Ke=require("./popover/showcase.cjs"),qe=require("./popover/mock.cjs"),Q=require("./progress/showcase.cjs"),$=require("./progress/mock.cjs"),Je=require("./qr-code/mock.cjs"),Ye=require("./qr-code/showcase.cjs"),Xe=require("./radio-group/showcase.cjs"),Ze=require("./radio-group/mock.cjs"),Qe=require("./right-click-menu/showcase.cjs"),$e=require("./right-click-menu/mock.cjs"),et=require("./rich-text-editor/mock.cjs"),tt=require("./rich-text-editor/showcase.cjs"),nt=require("./scroll-box/showcase.cjs"),rt=require("./scroll-box/mock.cjs"),it=require("./saved-filter-select/showcase.cjs"),at=require("./saved-filter-select/mock.cjs"),ot=require("./sortable-list/mock.cjs"),st=require("./sortable-list/showcase.cjs"),ct=require("./signature-pad/mock.cjs"),lt=require("./signature-pad/showcase.cjs"),ut=require("./segmented-control/mock.cjs"),dt=require("./segmented-control/showcase.cjs"),ft=require("./select/showcase.cjs"),pt=require("./select/mock.cjs"),mt=require("./slider/showcase.cjs"),ht=require("./slider/mock.cjs"),gt=require("./skeleton/mock.cjs"),_t=require("./skeleton/showcase.cjs"),vt=require("./spinner/mock.cjs"),yt=require("./spinner/showcase.cjs"),bt=require("./statistic/mock.cjs"),xt=require("./statistic/showcase.cjs"),St=require("./switch/showcase.cjs"),Ct=require("./switch/mock.cjs"),wt=require("./tag-input/showcase.cjs"),Tt=require("./tag-input/mock.cjs"),Et=require("./table/showcase.cjs"),Dt=require("./table/mock.cjs"),Ot=require("./tabs/showcase.cjs"),kt=require("./tabs/mock.cjs"),At=require("./textarea/showcase.cjs"),jt=require("./textarea/mock.cjs"),Mt=require("./timeline/showcase.cjs"),Nt=require("./timeline/mock.cjs"),Pt=require("./tag/mock.cjs"),Ft=require("./tag/showcase.cjs"),It=require("./typography/mock.cjs"),Lt=require("./typography/showcase.cjs"),Rt=require("./tree-view/mock.cjs"),zt=require("./tree-view/showcase.cjs"),Bt=require("./toast/showcase.cjs"),Vt=require("./toast/mock.cjs"),Ht=require("./tooltip/showcase.cjs"),Ut=require("./tooltip/mock.cjs"),Wt=require("./file-upload/showcase.cjs"),Gt=require("./file-upload/mock.cjs"),Kt=require("./image-upload/showcase.cjs"),qt=require("./image-upload/mock.cjs"),Jt=require("./rating/showcase.cjs"),Yt=require("./rating/mock.cjs"),Xt=require("./virtual-list/mock.cjs"),Zt=require("./virtual-list/showcase.cjs"),Qt=require("./types.cjs");var $t={alert:{mock:re.alertMock,Showcase:ne.AlertShowcase},"alert-dialog":{mock:ae.alertDialogMock,Showcase:ie.AlertDialogShowcase},"action-menu":{mock:t.actionMenuMock,Showcase:e.ActionMenuShowcase},button:{mock:C.buttonMock,Showcase:S.ButtonShowcase},"button-group":{mock:T.buttonGroupMock,Showcase:w.ButtonGroupShowcase},calendar:{mock:D.calendarMock,Showcase:E.CalendarShowcase},"calendar-scheduler":{mock:O.calendarSchedulerMock,Showcase:k.CalendarSchedulerShowcase},"command-palette":{mock:V.commandPaletteMock,Showcase:B.CommandPaletteShowcase},carousel:{mock:u.carouselMock,Showcase:d.CarouselShowcase},"color-picker":{mock:f.colorPickerMock,Showcase:p.ColorPickerShowcase},"code-block":{mock:P.codeBlockMock,Showcase:F.CodeBlockShowcase},"dual-list-picker":{mock:I.dualListPickerMock,Showcase:L.DualListPickerShowcase},divider:{mock:v.dividerMock,Showcase:y.DividerShowcase},input:{mock:X.inputMock,Showcase:Y.InputShowcase},"number-input":{mock:X.inputMock,Showcase:Y.InputShowcase},textarea:{mock:jt.textareaMock,Showcase:At.TextareaShowcase},select:{mock:pt.selectMock,Showcase:ft.SelectShowcase},"radio-group":{mock:Ze.radioGroupMock,Showcase:Xe.RadioGroupShowcase},"async-select":{mock:a.asyncSelectMock,Showcase:i.AsyncSelectShowcase},"async-multi-select":{mock:s.asyncMultiSelectMock,Showcase:o.AsyncMultiSelectShowcase},avatar:{mock:c.avatarMock,Showcase:l.AvatarShowcase},"date-picker":{mock:ue.datePickerMock,Showcase:le.DatePickerShowcase},"date-range-picker":{mock:fe.dateRangePickerMock,Showcase:de.DateRangePickerShowcase},"description-list":{mock:me.descriptionListMock,Showcase:pe.DescriptionListShowcase},drawer:{mock:be.drawerMock,Showcase:ye.DrawerShowcase},"json-input":{mock:m.jsonInputMock,Showcase:h.JsonInputShowcase},kanban:{mock:xe.kanbanBoardMock,Showcase:Se.KanbanBoardShowcase},"otp-input":{mock:ze.otpInputMock,Showcase:Re.OtpInputShowcase},"qr-code":{mock:Je.qrCodeMock,Showcase:Ye.QRCodeShowcase},rating:{mock:Yt.ratingMock,Showcase:Jt.RatingShowcase},"signature-pad":{mock:ct.signaturePadMock,Showcase:lt.SignaturePadShowcase},slider:{mock:ht.sliderMock,Showcase:mt.SliderShowcase},"time-picker":{mock:Ne.timePickerMock,Showcase:Pe.TimePickerShowcase},"tag-input":{mock:Tt.tagInputMock,Showcase:wt.TagInputShowcase},"dropdown-menu":{mock:ve.dropdownMenuMock,Showcase:_e.DropdownMenuShowcase},"confirm-dialog":{mock:U.confirmDialogMock,Showcase:H.ConfirmDialogShowcase},checkbox:{mock:N.checkboxMock,Showcase:M.CheckboxShowcase},"copy-button":{mock:W.copyButtonMock,Showcase:G.CopyButtonShowcase},switch:{mock:Ct.switchMock,Showcase:St.SwitchShowcase},badge:{mock:_.badgeMock,Showcase:g.BadgeShowcase},card:{mock:j.cardMock,Showcase:A.CardShowcase},tabs:{mock:kt.tabsMock,Showcase:Ot.TabsShowcase},collapse:{mock:z.collapseMock,Showcase:R.CollapseShowcase},kbd:{mock:Oe.kbdMock,Showcase:De.KbdShowcase},dialog:{mock:ge.dialogMock,Showcase:he.DialogShowcase},popover:{mock:qe.popoverMock,Showcase:Ke.PopoverShowcase},tooltip:{mock:Ut.tooltipMock,Showcase:Ht.TooltipShowcase},"right-click-menu":{mock:$e.rightClickMenuMock,Showcase:Qe.RightClickMenuShowcase},"rich-text-editor":{mock:et.richTextEditorMock,Showcase:tt.RichTextEditorShowcase},"data-table":{mock:te.dataTableMock,Showcase:ee.DataTableShowcase},"saved-filter-select":{mock:at.savedFilterSelectMock,Showcase:it.SavedFilterSelectShowcase},"sortable-list":{mock:ot.sortableListMock,Showcase:st.SortableListShowcase},"form-field":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-field-shell":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-input":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-select":{mock:J.formSelectMock,Showcase:q.FormWrapperShowcase},"form-textarea":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-switch":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-date-range-input":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-date-picker":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-date-range-picker":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"segmented-control":{mock:ut.segmentedControlMock,Showcase:dt.SegmentedControlShowcase},skeleton:{mock:gt.skeletonMock,Showcase:_t.SkeletonShowcase},spinner:{mock:vt.spinnerMock,Showcase:yt.SpinnerShowcase},table:{mock:Dt.tableMock,Showcase:Et.TableShowcase},sidebar:{mock:r.appSidebarMock,Showcase:n.AppSidebarShowcase},breadcrumbs:{mock:x.breadcrumbsMock,Showcase:b.BreadcrumbsShowcase},"page-state":{mock:Ue.pageStateMock,Showcase:He.PageStateShowcase},pagination:{mock:Ge.paginationMock,Showcase:We.PaginationShowcase},"notification-center":{mock:Le.notificationCenterMock,Showcase:Z.NotificationCenterShowcase},"info-card":{mock:we.infoCardMock,Showcase:Ce.InfoCardShowcase},"image-cropper":{mock:Te.imageCropperMock,Showcase:Ee.ImageCropperShowcase},list:{mock:ke.listMock,Showcase:Ae.ListShowcase},"activity-feed":{mock:se.activityFeedMock,Showcase:oe.ActivityFeedShowcase},"loading-state":{mock:Me.loadingStateMock,Showcase:je.LoadingStateShowcase},"data-state":{mock:K.dataStateMock,Showcase:ce.DataStateShowcase},progress:{mock:$.progressMock,Showcase:Q.ProgressShowcase},"progress-circle":{mock:$.progressMock,Showcase:Q.ProgressShowcase},"resizable-panel":{mock:Fe.resizablePanelMock,Showcase:Ie.ResizablePanelShowcase},section:{mock:Be.sectionMock,Showcase:Ve.SectionShowcase},statistic:{mock:bt.statisticMock,Showcase:xt.StatisticShowcase},tag:{mock:Pt.tagMock,Showcase:Ft.TagShowcase},typography:{mock:It.typographyMock,Showcase:Lt.TypographyShowcase},"tree-view":{mock:Rt.treeViewMock,Showcase:zt.TreeViewShowcase},"file-upload":{mock:Gt.fileUploadMock,Showcase:Wt.FileUploadShowcase},"image-upload":{mock:qt.imageUploadMock,Showcase:Kt.ImageUploadShowcase},"scroll-box":{mock:rt.scrollBoxMock,Showcase:nt.ScrollBoxShowcase},timeline:{mock:Nt.timelineMock,Showcase:Mt.TimelineShowcase},toast:{mock:Vt.toastMock,Showcase:Bt.ToastShowcase},"virtual-list":{mock:Xt.virtualListMock,Showcase:Zt.VirtualListShowcase}};exports.defaultComponentDemoState=Qt.defaultComponentDemoState,exports.premiumShowcaseDemoRegistry=$t;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const ee=require("./data-table/showcase.cjs"),te=require("./data-table/mock.cjs"),ne=require("./alert/showcase.cjs"),re=require("./alert/mock.cjs"),ie=require("./alert-dialog/showcase.cjs"),ae=require("./alert-dialog/mock.cjs"),oe=require("./activity-feed/showcase.cjs"),se=require("./activity-feed/mock.cjs"),e=require("./action-menu/showcase.cjs"),t=require("./action-menu/mock.cjs"),n=require("./app-sidebar/showcase.cjs"),r=require("./app-sidebar/mock.cjs"),i=require("./async-select/showcase.cjs"),a=require("./async-select/mock.cjs"),o=require("./async-multi-select/showcase.cjs"),s=require("./async-multi-select/mock.cjs"),c=require("./avatar/mock.cjs"),l=require("./avatar/showcase.cjs"),u=require("./carousel/mock.cjs"),d=require("./carousel/showcase.cjs"),f=require("./color-picker/mock.cjs"),p=require("./color-picker/showcase.cjs"),m=require("./json-input/mock.cjs"),h=require("./json-input/showcase.cjs"),g=require("./badge/showcase.cjs"),_=require("./badge/mock.cjs"),v=require("./divider/mock.cjs"),y=require("./divider/showcase.cjs"),b=require("./breadcrumbs/showcase.cjs"),x=require("./breadcrumbs/mock.cjs"),S=require("./button/showcase.cjs"),C=require("./button/mock.cjs"),w=require("./button-group/showcase.cjs"),T=require("./button-group/mock.cjs"),E=require("./calendar/showcase.cjs"),D=require("./calendar/mock.cjs"),O=require("./calendar-scheduler/mock.cjs"),k=require("./calendar-scheduler/showcase.cjs"),A=require("./card/showcase.cjs"),j=require("./card/mock.cjs"),M=require("./checkbox/showcase.cjs"),N=require("./checkbox/mock.cjs"),P=require("./code-block/mock.cjs"),F=require("./code-block/showcase.cjs"),I=require("./dual-list-picker/mock.cjs"),L=require("./dual-list-picker/showcase.cjs"),R=require("./collapse/showcase.cjs"),z=require("./collapse/mock.cjs"),B=require("./command-palette/showcase.cjs"),V=require("./command-palette/mock.cjs"),H=require("./confirm-dialog/showcase.cjs"),U=require("./confirm-dialog/mock.cjs"),W=require("./copy-button/mock.cjs"),G=require("./copy-button/showcase.cjs"),K=require("./data-state/mock.cjs"),ce=require("./data-state/showcase.cjs"),le=require("./date-picker/showcase.cjs"),ue=require("./date-picker/mock.cjs"),de=require("./date-range-picker/showcase.cjs"),fe=require("./date-range-picker/mock.cjs"),pe=require("./description-list/showcase.cjs"),me=require("./description-list/mock.cjs"),he=require("./dialog/showcase.cjs"),ge=require("./dialog/mock.cjs"),_e=require("./dropdown-menu/showcase.cjs"),ve=require("./dropdown-menu/mock.cjs"),ye=require("./drawer/showcase.cjs"),be=require("./drawer/mock.cjs"),q=require("./form-wrapper/showcase.cjs"),J=require("./form-wrapper/mock.cjs"),xe=require("./kanban-board/mock.cjs"),Se=require("./kanban-board/showcase.cjs"),Ce=require("./info-card/showcase.cjs"),we=require("./info-card/mock.cjs"),Te=require("./image-cropper/mock.cjs"),Ee=require("./image-cropper/showcase.cjs"),Y=require("./input/showcase.cjs"),X=require("./input/mock.cjs"),De=require("./kbd/showcase.cjs"),Oe=require("./kbd/mock.cjs"),ke=require("./list/mock.cjs"),Ae=require("./list/showcase.cjs"),je=require("./loading-state/showcase.cjs"),Me=require("./loading-state/mock.cjs"),Ne=require("./time-picker/mock.cjs"),Pe=require("./time-picker/showcase.cjs"),Fe=require("./resizable-panel/mock.cjs"),Ie=require("./resizable-panel/showcase.cjs"),Z=require("./notification-center/showcase.cjs"),Le=require("./notification-center/mock.cjs"),Re=require("./otp-input/showcase.cjs"),ze=require("./otp-input/mock.cjs"),Be=require("./section/mock.cjs"),Ve=require("./section/showcase.cjs"),He=require("./page-state/showcase.cjs"),Ue=require("./page-state/mock.cjs"),We=require("./pagination/showcase.cjs"),Ge=require("./pagination/mock.cjs"),Ke=require("./popover/showcase.cjs"),qe=require("./popover/mock.cjs"),Q=require("./progress/showcase.cjs"),$=require("./progress/mock.cjs"),Je=require("./qr-code/mock.cjs"),Ye=require("./qr-code/showcase.cjs"),Xe=require("./radio-group/showcase.cjs"),Ze=require("./radio-group/mock.cjs"),Qe=require("./right-click-menu/showcase.cjs"),$e=require("./right-click-menu/mock.cjs"),et=require("./rich-text-editor/mock.cjs"),tt=require("./rich-text-editor/showcase.cjs"),nt=require("./scroll-box/showcase.cjs"),rt=require("./scroll-box/mock.cjs"),it=require("./saved-filter-select/showcase.cjs"),at=require("./saved-filter-select/mock.cjs"),ot=require("./sortable-list/mock.cjs"),st=require("./sortable-list/showcase.cjs"),ct=require("./signature-pad/mock.cjs"),lt=require("./signature-pad/showcase.cjs"),ut=require("./segmented-control/mock.cjs"),dt=require("./segmented-control/showcase.cjs"),ft=require("./select/showcase.cjs"),pt=require("./select/mock.cjs"),mt=require("./slider/showcase.cjs"),ht=require("./slider/mock.cjs"),gt=require("./skeleton/mock.cjs"),_t=require("./skeleton/showcase.cjs"),vt=require("./spinner/mock.cjs"),yt=require("./spinner/showcase.cjs"),bt=require("./statistic/mock.cjs"),xt=require("./statistic/showcase.cjs"),St=require("./switch/showcase.cjs"),Ct=require("./switch/mock.cjs"),wt=require("./tag-input/showcase.cjs"),Tt=require("./tag-input/mock.cjs"),Et=require("./table/showcase.cjs"),Dt=require("./table/mock.cjs"),Ot=require("./tabs/showcase.cjs"),kt=require("./tabs/mock.cjs"),At=require("./textarea/showcase.cjs"),jt=require("./textarea/mock.cjs"),Mt=require("./timeline/showcase.cjs"),Nt=require("./timeline/mock.cjs"),Pt=require("./tag/mock.cjs"),Ft=require("./tag/showcase.cjs"),It=require("./typography/mock.cjs"),Lt=require("./typography/showcase.cjs"),Rt=require("./tree-view/mock.cjs"),zt=require("./tree-view/showcase.cjs"),Bt=require("./toast/showcase.cjs"),Vt=require("./toast/mock.cjs"),Ht=require("./tooltip/showcase.cjs"),Ut=require("./tooltip/mock.cjs"),Wt=require("./file-upload/showcase.cjs"),Gt=require("./file-upload/mock.cjs"),Kt=require("./image-upload/showcase.cjs"),qt=require("./image-upload/mock.cjs"),Jt=require("./rating/showcase.cjs"),Yt=require("./rating/mock.cjs"),Xt=require("./virtual-list/mock.cjs"),Zt=require("./virtual-list/showcase.cjs"),Qt=require("./wizard/mock.cjs"),$t=require("./wizard/showcase.cjs"),en=require("./types.cjs");var tn={alert:{mock:re.alertMock,Showcase:ne.AlertShowcase},"alert-dialog":{mock:ae.alertDialogMock,Showcase:ie.AlertDialogShowcase},"action-menu":{mock:t.actionMenuMock,Showcase:e.ActionMenuShowcase},button:{mock:C.buttonMock,Showcase:S.ButtonShowcase},"button-group":{mock:T.buttonGroupMock,Showcase:w.ButtonGroupShowcase},calendar:{mock:D.calendarMock,Showcase:E.CalendarShowcase},"calendar-scheduler":{mock:O.calendarSchedulerMock,Showcase:k.CalendarSchedulerShowcase},"command-palette":{mock:V.commandPaletteMock,Showcase:B.CommandPaletteShowcase},carousel:{mock:u.carouselMock,Showcase:d.CarouselShowcase},"color-picker":{mock:f.colorPickerMock,Showcase:p.ColorPickerShowcase},"code-block":{mock:P.codeBlockMock,Showcase:F.CodeBlockShowcase},"dual-list-picker":{mock:I.dualListPickerMock,Showcase:L.DualListPickerShowcase},divider:{mock:v.dividerMock,Showcase:y.DividerShowcase},input:{mock:X.inputMock,Showcase:Y.InputShowcase},"number-input":{mock:X.inputMock,Showcase:Y.InputShowcase},textarea:{mock:jt.textareaMock,Showcase:At.TextareaShowcase},select:{mock:pt.selectMock,Showcase:ft.SelectShowcase},"radio-group":{mock:Ze.radioGroupMock,Showcase:Xe.RadioGroupShowcase},"async-select":{mock:a.asyncSelectMock,Showcase:i.AsyncSelectShowcase},"async-multi-select":{mock:s.asyncMultiSelectMock,Showcase:o.AsyncMultiSelectShowcase},avatar:{mock:c.avatarMock,Showcase:l.AvatarShowcase},"date-picker":{mock:ue.datePickerMock,Showcase:le.DatePickerShowcase},"date-range-picker":{mock:fe.dateRangePickerMock,Showcase:de.DateRangePickerShowcase},"description-list":{mock:me.descriptionListMock,Showcase:pe.DescriptionListShowcase},drawer:{mock:be.drawerMock,Showcase:ye.DrawerShowcase},"json-input":{mock:m.jsonInputMock,Showcase:h.JsonInputShowcase},kanban:{mock:xe.kanbanBoardMock,Showcase:Se.KanbanBoardShowcase},"otp-input":{mock:ze.otpInputMock,Showcase:Re.OtpInputShowcase},"qr-code":{mock:Je.qrCodeMock,Showcase:Ye.QRCodeShowcase},rating:{mock:Yt.ratingMock,Showcase:Jt.RatingShowcase},"signature-pad":{mock:ct.signaturePadMock,Showcase:lt.SignaturePadShowcase},slider:{mock:ht.sliderMock,Showcase:mt.SliderShowcase},"time-picker":{mock:Ne.timePickerMock,Showcase:Pe.TimePickerShowcase},"tag-input":{mock:Tt.tagInputMock,Showcase:wt.TagInputShowcase},"dropdown-menu":{mock:ve.dropdownMenuMock,Showcase:_e.DropdownMenuShowcase},"confirm-dialog":{mock:U.confirmDialogMock,Showcase:H.ConfirmDialogShowcase},checkbox:{mock:N.checkboxMock,Showcase:M.CheckboxShowcase},"copy-button":{mock:W.copyButtonMock,Showcase:G.CopyButtonShowcase},switch:{mock:Ct.switchMock,Showcase:St.SwitchShowcase},badge:{mock:_.badgeMock,Showcase:g.BadgeShowcase},card:{mock:j.cardMock,Showcase:A.CardShowcase},tabs:{mock:kt.tabsMock,Showcase:Ot.TabsShowcase},collapse:{mock:z.collapseMock,Showcase:R.CollapseShowcase},kbd:{mock:Oe.kbdMock,Showcase:De.KbdShowcase},dialog:{mock:ge.dialogMock,Showcase:he.DialogShowcase},popover:{mock:qe.popoverMock,Showcase:Ke.PopoverShowcase},tooltip:{mock:Ut.tooltipMock,Showcase:Ht.TooltipShowcase},"right-click-menu":{mock:$e.rightClickMenuMock,Showcase:Qe.RightClickMenuShowcase},"rich-text-editor":{mock:et.richTextEditorMock,Showcase:tt.RichTextEditorShowcase},"data-table":{mock:te.dataTableMock,Showcase:ee.DataTableShowcase},"saved-filter-select":{mock:at.savedFilterSelectMock,Showcase:it.SavedFilterSelectShowcase},"sortable-list":{mock:ot.sortableListMock,Showcase:st.SortableListShowcase},"form-field":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-field-shell":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-input":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-select":{mock:J.formSelectMock,Showcase:q.FormWrapperShowcase},"form-textarea":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-switch":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-date-range-input":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-date-picker":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"form-date-range-picker":{mock:J.formRHFWrapperMock,Showcase:q.FormWrapperShowcase},"segmented-control":{mock:ut.segmentedControlMock,Showcase:dt.SegmentedControlShowcase},skeleton:{mock:gt.skeletonMock,Showcase:_t.SkeletonShowcase},spinner:{mock:vt.spinnerMock,Showcase:yt.SpinnerShowcase},table:{mock:Dt.tableMock,Showcase:Et.TableShowcase},sidebar:{mock:r.appSidebarMock,Showcase:n.AppSidebarShowcase},breadcrumbs:{mock:x.breadcrumbsMock,Showcase:b.BreadcrumbsShowcase},"page-state":{mock:Ue.pageStateMock,Showcase:He.PageStateShowcase},pagination:{mock:Ge.paginationMock,Showcase:We.PaginationShowcase},"notification-center":{mock:Le.notificationCenterMock,Showcase:Z.NotificationCenterShowcase},"info-card":{mock:we.infoCardMock,Showcase:Ce.InfoCardShowcase},"image-cropper":{mock:Te.imageCropperMock,Showcase:Ee.ImageCropperShowcase},list:{mock:ke.listMock,Showcase:Ae.ListShowcase},"activity-feed":{mock:se.activityFeedMock,Showcase:oe.ActivityFeedShowcase},"loading-state":{mock:Me.loadingStateMock,Showcase:je.LoadingStateShowcase},"data-state":{mock:K.dataStateMock,Showcase:ce.DataStateShowcase},progress:{mock:$.progressMock,Showcase:Q.ProgressShowcase},"progress-circle":{mock:$.progressMock,Showcase:Q.ProgressShowcase},"resizable-panel":{mock:Fe.resizablePanelMock,Showcase:Ie.ResizablePanelShowcase},section:{mock:Be.sectionMock,Showcase:Ve.SectionShowcase},statistic:{mock:bt.statisticMock,Showcase:xt.StatisticShowcase},tag:{mock:Pt.tagMock,Showcase:Ft.TagShowcase},typography:{mock:It.typographyMock,Showcase:Lt.TypographyShowcase},"tree-view":{mock:Rt.treeViewMock,Showcase:zt.TreeViewShowcase},"file-upload":{mock:Gt.fileUploadMock,Showcase:Wt.FileUploadShowcase},"image-upload":{mock:qt.imageUploadMock,Showcase:Kt.ImageUploadShowcase},"scroll-box":{mock:rt.scrollBoxMock,Showcase:nt.ScrollBoxShowcase},timeline:{mock:Nt.timelineMock,Showcase:Mt.TimelineShowcase},toast:{mock:Vt.toastMock,Showcase:Bt.ToastShowcase},"virtual-list":{mock:Xt.virtualListMock,Showcase:Zt.VirtualListShowcase},wizard:{mock:Qt.wizardMock,Showcase:$t.WizardShowcase}};exports.defaultComponentDemoState=en.defaultComponentDemoState,exports.premiumShowcaseDemoRegistry=tn;
@@ -158,9 +158,11 @@ import { RatingShowcase as Yt } from "./rating/showcase.js";
158
158
  import { ratingMock as Xt } from "./rating/mock.js";
159
159
  import { virtualListMock as Zt } from "./virtual-list/mock.js";
160
160
  import { VirtualListShowcase as Qt } from "./virtual-list/showcase.js";
161
- import { defaultComponentDemoState as $t } from "./types.js";
161
+ import { wizardMock as $t } from "./wizard/mock.js";
162
+ import { WizardShowcase as en } from "./wizard/showcase.js";
163
+ import { defaultComponentDemoState as tn } from "./types.js";
162
164
  //#region src/showcase/premium/index.ts
163
- var en = {
165
+ var nn = {
164
166
  alert: {
165
167
  mock: re,
166
168
  Showcase: ne
@@ -520,7 +522,11 @@ var en = {
520
522
  "virtual-list": {
521
523
  mock: Zt,
522
524
  Showcase: Qt
525
+ },
526
+ wizard: {
527
+ mock: $t,
528
+ Showcase: en
523
529
  }
524
530
  };
525
531
  //#endregion
526
- export { $t as defaultComponentDemoState, en as premiumShowcaseDemoRegistry };
532
+ export { tn as defaultComponentDemoState, nn as premiumShowcaseDemoRegistry };
@@ -1 +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/input/index.cjs"),r=require("./data.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s=`border-t border-[color:var(--aui-divider)] py-6`;function c({state:e,setState:c}){let l=r.inputDemoFields[0],u=e.textValue.trim().length>0,[d,f]=i.useState(`search`),p=d===`search`?l.label:`Profile contact`,m=d===`search`?l.placeholder:`owner@azamatui.dev`,h=d===`search`?`text`:`email`,[g,_]=i.useState(1250),[v,y]=i.useState(3),[b,x]=i.useState(`+998 90 123 45 67`),[S,C]=i.useState(`2026-07-13`),[w,T]=i.useState(`Azamat UI`);return(0,o.jsxs)(`div`,{className:`space-y-0`,children:[(0,o.jsxs)(`section`,{className:`pb-6`,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between`,children:[(0,o.jsxs)(`div`,{className:`max-w-xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Text entry`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`One field should define the rhythm`}),(0,o.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Show the real input first, then verify disabled and read-only states around it.`})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Mode`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold capitalize aui-text-strong`,children:d})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Value`}),(0,o.jsx)(`p`,{className:`mt-2 truncate text-lg font-semibold aui-text-strong`,children:u?e.textValue:`Empty`})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`State`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:u?`Filled`:`Ready`})]})]})]}),(0,o.jsxs)(`div`,{className:`mt-6 flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{size:`sm`,variant:d===`search`?`default`:`outline`,onClick:()=>f(`search`),children:`Search field`}),(0,o.jsx)(t.Button,{size:`sm`,variant:d===`profile`?`default`:`outline`,onClick:()=>f(`profile`),children:`Email field`})]})]}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]`,children:[(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Primary field`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:d===`search`?`Search-driven input`:`Profile contact field`})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:p}),(0,o.jsx)(`div`,{className:`mt-3`,children:(0,o.jsx)(n.Input,{"aria-label":p,value:e.textValue,onChange:e=>c({textValue:e.target.value}),placeholder:m,type:h,kind:d===`search`?`search`:`text`,className:`w-full`})})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-2`,children:[(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs aui-text-muted`,children:`Email sample`}),(0,o.jsx)(`div`,{className:`mt-2`,children:(0,o.jsx)(n.Input,{defaultValue:r.inputDemoFields[1].defaultValue,type:`email`,"aria-label":r.inputDemoFields[1].label})})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs aui-text-muted`,children:`Disabled sample`}),(0,o.jsx)(`div`,{className:`mt-2`,children:(0,o.jsx)(n.Input,{value:r.inputDemoFields[2].defaultValue,disabled:!0,"aria-label":r.inputDemoFields[2].label})})]})]})]}),(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,o.jsx)(a.MailIcon,{className:`size-4 aui-text-muted`}),(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Read only`}),(0,o.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:r.inputDemoFields[3].label})]})]}),(0,o.jsx)(n.Input,{defaultValue:r.inputDemoFields[3].defaultValue,readOnly:!0,"aria-label":r.inputDemoFields[3].label}),(0,o.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Default field should stay legible before any decorators or wrappers are added.`,`Disabled state should look intentionally inactive without losing structure.`,`Read-only fields must remain easy to scan and copy.`,`Avoid extra shells when the real input already provides the right chrome.`].map(e=>(0,o.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))}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{type:`button`,size:`sm`,onClick:()=>c({textValue:`Dashboard`}),children:`Fill sample`}),(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:`outline`,onClick:()=>c({textValue:`finance@azamat.dev`}),children:`Email sample`}),(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c({textValue:``}),children:`Clear`})]})]})]})}),(0,o.jsxs)(`section`,{className:s,"data-slot":`input-kind-showcase`,children:[(0,o.jsxs)(`div`,{className:`max-w-2xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Unified kind API`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:`One import, every production input`}),(0,o.jsxs)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:[`Change only the `,(0,o.jsx)(`code`,{children:`kind`}),` prop. Validation, disabled state, value callbacks and keyboard behavior stay in the same public component.`]})]}),(0,o.jsxs)(`div`,{className:`mt-6 grid gap-x-6 gap-y-5 md:grid-cols-2 xl:grid-cols-3`,children:[(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Password`,(0,o.jsx)(n.Input,{kind:`password`,defaultValue:`tembro-2026`,autoComplete:`current-password`}),(0,o.jsx)(`span`,{className:`text-xs font-normal aui-text-muted`,children:`Built-in visibility toggle and caps-lock feedback.`})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Numeric threshold`,(0,o.jsx)(n.Input,{kind:`number`,defaultValue:24,min:0,max:100,step:1}),(0,o.jsx)(`span`,{className:`text-xs font-normal aui-text-muted`,children:`Native limits with normalized numeric callbacks.`})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Budget`,(0,o.jsx)(n.Input,{kind:`money`,value:g,onValueChange:_,prefix:`$`,suffix:`USD`}),(0,o.jsxs)(`span`,{className:`text-xs font-normal aui-text-muted`,children:[`Current value: `,g??`empty`]})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Phone`,(0,o.jsx)(n.Input,{kind:`phone`,value:b,onValueChange:x}),(0,o.jsxs)(`span`,{className:`text-xs font-normal aui-text-muted`,children:[`Normalized value: `,b||`empty`]})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Release date`,(0,o.jsx)(n.Input,{kind:`date`,value:S,onValueChange:C}),(0,o.jsxs)(`span`,{className:`text-xs font-normal aui-text-muted`,children:[`ISO value: `,S||`empty`]})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Seats`,(0,o.jsx)(n.Input,{kind:`quantity`,value:v,onValueChange:y,min:1,max:12}),(0,o.jsx)(`span`,{className:`text-xs font-normal aui-text-muted`,children:`Use the buttons or type a value directly.`})]})]}),(0,o.jsx)(`div`,{className:`mt-6 border-t border-[color:var(--aui-divider)] pt-5`,children:(0,o.jsxs)(`label`,{className:`grid max-w-xl gap-2 text-sm font-medium aui-text-strong`,children:[`Clearable project name`,(0,o.jsx)(n.Input,{kind:`clearable`,value:w,onValueChange:T,placeholder:`Enter a project name`,clearOnEscape:!0}),(0,o.jsx)(`span`,{className:`text-xs font-normal aui-text-muted`,children:`Use the clear control or press Escape while the field is focused.`})]})})]})]})}exports.InputShowcase=c;
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/input/index.cjs"),r=require("./data.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s=`border-t border-[color:var(--aui-divider)] py-6`;function c({state:e,setState:c}){let l=r.inputDemoFields[0],u=e.textValue.trim().length>0,[d,f]=i.useState(`search`),p=d===`search`?l.label:`Profile contact`,m=d===`search`?l.placeholder:`owner@azamatui.dev`,h=d===`search`?`text`:`email`,[g,_]=i.useState(1250),[v,y]=i.useState(3),[b,x]=i.useState(`+998 90 123 45 67`),[S,C]=i.useState(`2026-07-13`),[w,T]=i.useState(`Tembro`);return(0,o.jsxs)(`div`,{className:`space-y-0`,children:[(0,o.jsxs)(`section`,{className:`pb-6`,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between`,children:[(0,o.jsxs)(`div`,{className:`max-w-xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Text entry`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`One field should define the rhythm`}),(0,o.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Show the real input first, then verify disabled and read-only states around it.`})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Mode`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold capitalize aui-text-strong`,children:d})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Value`}),(0,o.jsx)(`p`,{className:`mt-2 truncate text-lg font-semibold aui-text-strong`,children:u?e.textValue:`Empty`})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`State`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:u?`Filled`:`Ready`})]})]})]}),(0,o.jsxs)(`div`,{className:`mt-6 flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{size:`sm`,variant:d===`search`?`default`:`outline`,onClick:()=>f(`search`),children:`Search field`}),(0,o.jsx)(t.Button,{size:`sm`,variant:d===`profile`?`default`:`outline`,onClick:()=>f(`profile`),children:`Email field`})]})]}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]`,children:[(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Primary field`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:d===`search`?`Search-driven input`:`Profile contact field`})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:p}),(0,o.jsx)(`div`,{className:`mt-3`,children:(0,o.jsx)(n.Input,{"aria-label":p,value:e.textValue,onChange:e=>c({textValue:e.target.value}),placeholder:m,type:h,kind:d===`search`?`search`:`text`,className:`w-full`})})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-2`,children:[(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs aui-text-muted`,children:`Email sample`}),(0,o.jsx)(`div`,{className:`mt-2`,children:(0,o.jsx)(n.Input,{defaultValue:r.inputDemoFields[1].defaultValue,type:`email`,"aria-label":r.inputDemoFields[1].label})})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs aui-text-muted`,children:`Disabled sample`}),(0,o.jsx)(`div`,{className:`mt-2`,children:(0,o.jsx)(n.Input,{value:r.inputDemoFields[2].defaultValue,disabled:!0,"aria-label":r.inputDemoFields[2].label})})]})]})]}),(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,o.jsx)(a.MailIcon,{className:`size-4 aui-text-muted`}),(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Read only`}),(0,o.jsx)(`p`,{className:`mt-1 text-sm aui-text-muted`,children:r.inputDemoFields[3].label})]})]}),(0,o.jsx)(n.Input,{defaultValue:r.inputDemoFields[3].defaultValue,readOnly:!0,"aria-label":r.inputDemoFields[3].label}),(0,o.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Default field should stay legible before any decorators or wrappers are added.`,`Disabled state should look intentionally inactive without losing structure.`,`Read-only fields must remain easy to scan and copy.`,`Avoid extra shells when the real input already provides the right chrome.`].map(e=>(0,o.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))}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{type:`button`,size:`sm`,onClick:()=>c({textValue:`Dashboard`}),children:`Fill sample`}),(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:`outline`,onClick:()=>c({textValue:`finance@azamat.dev`}),children:`Email sample`}),(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c({textValue:``}),children:`Clear`})]})]})]})}),(0,o.jsxs)(`section`,{className:s,"data-slot":`input-kind-showcase`,children:[(0,o.jsxs)(`div`,{className:`max-w-2xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Unified kind API`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:`One import, every production input`}),(0,o.jsxs)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:[`Change only the `,(0,o.jsx)(`code`,{children:`kind`}),` prop. Validation, disabled state, value callbacks and keyboard behavior stay in the same public component.`]})]}),(0,o.jsxs)(`div`,{className:`mt-6 grid gap-x-6 gap-y-5 md:grid-cols-2 xl:grid-cols-3`,children:[(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Password`,(0,o.jsx)(n.Input,{kind:`password`,defaultValue:`tembro-2026`,autoComplete:`current-password`}),(0,o.jsx)(`span`,{className:`text-xs font-normal aui-text-muted`,children:`Built-in visibility toggle and caps-lock feedback.`})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Numeric threshold`,(0,o.jsx)(n.Input,{kind:`number`,defaultValue:24,min:0,max:100,step:1}),(0,o.jsx)(`span`,{className:`text-xs font-normal aui-text-muted`,children:`Native limits with normalized numeric callbacks.`})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Budget`,(0,o.jsx)(n.Input,{kind:`money`,value:g,onValueChange:_,prefix:`$`,suffix:`USD`}),(0,o.jsxs)(`span`,{className:`text-xs font-normal aui-text-muted`,children:[`Current value: `,g??`empty`]})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Phone`,(0,o.jsx)(n.Input,{kind:`phone`,value:b,onValueChange:x}),(0,o.jsxs)(`span`,{className:`text-xs font-normal aui-text-muted`,children:[`Normalized value: `,b||`empty`]})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Release date`,(0,o.jsx)(n.Input,{kind:`date`,value:S,onValueChange:C}),(0,o.jsxs)(`span`,{className:`text-xs font-normal aui-text-muted`,children:[`ISO value: `,S||`empty`]})]}),(0,o.jsxs)(`label`,{className:`grid gap-2 text-sm font-medium aui-text-strong`,children:[`Seats`,(0,o.jsx)(n.Input,{kind:`quantity`,value:v,onValueChange:y,min:1,max:12}),(0,o.jsx)(`span`,{className:`text-xs font-normal aui-text-muted`,children:`Use the buttons or type a value directly.`})]})]}),(0,o.jsx)(`div`,{className:`mt-6 border-t border-[color:var(--aui-divider)] pt-5`,children:(0,o.jsxs)(`label`,{className:`grid max-w-xl gap-2 text-sm font-medium aui-text-strong`,children:[`Clearable project name`,(0,o.jsx)(n.Input,{kind:`clearable`,value:w,onValueChange:T,placeholder:`Enter a project name`,clearOnEscape:!0}),(0,o.jsx)(`span`,{className:`text-xs font-normal aui-text-muted`,children:`Use the clear control or press Escape while the field is focused.`})]})})]})]})}exports.InputShowcase=c;
@@ -7,7 +7,7 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
7
7
  //#region src/showcase/premium/input/showcase.tsx
8
8
  var s = "border-t border-[color:var(--aui-divider)] py-6";
9
9
  function c({ state: c, setState: l }) {
10
- let u = n[0], d = c.textValue.trim().length > 0, [f, p] = r.useState("search"), m = f === "search" ? u.label : "Profile contact", h = f === "search" ? u.placeholder : "owner@azamatui.dev", g = f === "search" ? "text" : "email", [_, v] = r.useState(1250), [y, b] = r.useState(3), [x, S] = r.useState("+998 90 123 45 67"), [C, w] = r.useState("2026-07-13"), [T, E] = r.useState("Azamat UI");
10
+ let u = n[0], d = c.textValue.trim().length > 0, [f, p] = r.useState("search"), m = f === "search" ? u.label : "Profile contact", h = f === "search" ? u.placeholder : "owner@azamatui.dev", g = f === "search" ? "text" : "email", [_, v] = r.useState(1250), [y, b] = r.useState(3), [x, S] = r.useState("+998 90 123 45 67"), [C, w] = r.useState("2026-07-13"), [T, E] = r.useState("Tembro");
11
11
  return /* @__PURE__ */ o("div", {
12
12
  className: "space-y-0",
13
13
  children: [
@@ -1,4 +1,4 @@
1
1
  Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/inputs/json-input.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i(){let[e,i]=n.useState(`{
2
- "name": "Azamat UI",
2
+ "name": "Tembro",
3
3
  "version": 1
4
4
  }`),[a,o]=n.useState(!0);return(0,r.jsxs)(`div`,{className:`space-y-3`,children:[(0,r.jsx)(t.JsonInput,{value:e,onValueChange:(e,t,n)=>{o(n)},onChange:e=>i(e.target.value)}),(0,r.jsx)(`p`,{className:`text-sm ${a?`text-emerald-600`:`text-destructive`}`,children:a?`JSON is valid`:`JSON is invalid`})]})}exports.JsonInputShowcase=i;
@@ -3,7 +3,7 @@ import * as t from "react";
3
3
  import { jsx as n, jsxs as r } from "react/jsx-runtime";
4
4
  //#region src/showcase/premium/json-input/showcase.tsx
5
5
  function i() {
6
- let [i, a] = t.useState("{\n \"name\": \"Azamat UI\",\n \"version\": 1\n}"), [o, s] = t.useState(!0);
6
+ let [i, a] = t.useState("{\n \"name\": \"Tembro\",\n \"version\": 1\n}"), [o, s] = t.useState(!0);
7
7
  return /* @__PURE__ */ r("div", {
8
8
  className: "space-y-3",
9
9
  children: [/* @__PURE__ */ n(e, {
@@ -1 +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/ui/select/index.cjs"),i=require("./data.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=`border-t border-[color:var(--aui-divider)] py-6`;function c({state:e,setState:c}){let l=i.selectDemoGroups[0].options,u=i.selectDemoGroups[1].options,d=i.selectDemoGroups[2].options,f=e.selectValue??l[0].value,p=l.find(e=>e.value===f)??l[0],m=l[1]??l[0],[h,g]=a.useState(`plan`),[_,v]=a.useState(`north`),y=p.value===`enterprise`?[[`Seats`,`Unlimited`],[`Support`,`Dedicated`],[`SLA`,`Priority`]]:p.value===`growth`?[[`Seats`,`25`],[`Support`,`Shared`],[`SLA`,`Same day`]]:[[`Seats`,`5`],[`Support`,`Email`],[`SLA`,`Standard`]];return(0,o.jsxs)(`div`,{className:`space-y-0`,children:[(0,o.jsxs)(`section`,{className:`pb-6`,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between`,children:[(0,o.jsxs)(`div`,{className:`max-w-xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Selection`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`One clean select surface first`}),(0,o.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Show the default trigger, controlled value, and summary update in one place.`})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Choice`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:p.label})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Mode`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold capitalize aui-text-strong`,children:h})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Options`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:h===`plan`?l.length:u.length})]})]})]}),(0,o.jsxs)(`div`,{className:`mt-6 flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{size:`sm`,variant:h===`plan`?`default`:`outline`,onClick:()=>g(`plan`),children:`Default trigger`}),(0,o.jsx)(t.Button,{size:`sm`,variant:h===`density`?`default`:`outline`,onClick:()=>g(`density`),children:`Compact trigger`})]})]}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]`,children:[(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Primary select`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:h===`plan`?`Standard choice trigger`:`Compact toolbar trigger`})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:h===`plan`?`Workspace plan`:`Toolbar density`}),(0,o.jsx)(`div`,{className:`mt-3`,children:h===`plan`?(0,o.jsx)(r.Select,{value:f,onValueChange:e=>c({selectValue:e??l[0].value}),options:l,triggerClassName:`w-full`}):(0,o.jsx)(r.Select,{defaultValue:u[0].value,options:u,size:`sm`,triggerClassName:`w-full`})})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Grouped searchable select`}),(0,o.jsx)(`div`,{className:`mt-3`,children:(0,o.jsx)(r.Select,{value:_,onValueChange:e=>v(e??`north`),searchable:!0,clearable:!0,placeholder:`Choose workspace`,emptyMessage:`No workspace matched`,groups:[{label:`Regions`,options:d.slice(0,2)},{label:`Operations`,options:d.slice(2)}],triggerClassName:`w-full`})})]}),(0,o.jsx)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:y.map(([e,t])=>(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs aui-text-muted`,children:e}),(0,o.jsx)(`p`,{className:`mt-1 text-sm font-medium aui-text-strong`,children:t})]},e))})]}),(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Controlled result`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:p.label})]}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:p.value})]}),(0,o.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Base Select should cover normal forms and static choices first.`,`Async and searchable variants should be documented as upgrades, not parallel defaults.`,`Controlled value must update nearby product UI immediately.`].map(e=>(0,o.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))}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsxs)(t.Button,{type:`button`,size:`sm`,onClick:()=>c({selectValue:m.value}),children:[`Choose `,m.label]}),(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c({selectValue:l[0].value}),children:`Reset`})]})]})]})})]})}exports.SelectShowcase=c;
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/ui/select/index.cjs"),i=require("./data.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=`border-t border-[color:var(--aui-divider)] py-6`;function c({state:e,setState:c}){let l=i.selectDemoGroups[0].options,u=i.selectDemoGroups[1].options,d=i.selectDemoGroups[2].options,f=e.selectValue??l[0].value,p=l.find(e=>e.value===f)??l[0],m=l[1]??l[0],[h,g]=a.useState(`plan`),[_,v]=a.useState(`north`),y=p.value===`enterprise`?[[`Seats`,`Unlimited`],[`Support`,`Dedicated`],[`SLA`,`Priority`]]:p.value===`growth`?[[`Seats`,`25`],[`Support`,`Shared`],[`SLA`,`Same day`]]:[[`Seats`,`5`],[`Support`,`Email`],[`SLA`,`Standard`]];return(0,o.jsxs)(`div`,{className:`space-y-0`,children:[(0,o.jsxs)(`section`,{className:`pb-6`,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between`,children:[(0,o.jsxs)(`div`,{className:`max-w-xl`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Selection`}),(0,o.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`One clean select surface first`}),(0,o.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Show the default trigger, controlled value, and summary update in one place.`})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]`,children:[(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Choice`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:p.label})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Mode`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold capitalize aui-text-strong`,children:h})]}),(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Options`}),(0,o.jsx)(`p`,{className:`mt-2 text-lg font-semibold aui-text-strong`,children:h===`plan`?l.length:u.length})]})]})]}),(0,o.jsxs)(`div`,{className:`mt-6 flex flex-wrap gap-2`,children:[(0,o.jsx)(t.Button,{size:`sm`,variant:h===`plan`?`default`:`outline`,onClick:()=>g(`plan`),children:`Default trigger`}),(0,o.jsx)(t.Button,{size:`sm`,variant:h===`density`?`default`:`outline`,onClick:()=>g(`density`),children:`Compact trigger`})]})]}),(0,o.jsx)(`section`,{className:s,children:(0,o.jsxs)(`div`,{className:`grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]`,children:[(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Primary select`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:h===`plan`?`Standard choice trigger`:`Compact toolbar trigger`})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:h===`plan`?`Workspace plan`:`Toolbar density`}),(0,o.jsx)(`div`,{className:`mt-3`,children:h===`plan`?(0,o.jsx)(r.Select,{value:f,onValueChange:e=>c({selectValue:e??l[0].value}),options:l,triggerClassName:`w-full`}):(0,o.jsx)(r.Select,{defaultValue:u[0].value,options:u,size:`sm`,triggerClassName:`w-full`})})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Grouped searchable select`}),(0,o.jsx)(`div`,{className:`mt-3`,children:(0,o.jsx)(r.Select,{value:_,onValueChange:e=>v(e??`north`),searchable:!0,clearable:!0,placeholder:`Choose workspace`,emptyMessage:`No workspace matched`,groups:[{label:`Regions`,options:d.slice(0,2)},{label:`Operations`,options:d.slice(2)}],triggerClassName:`w-full`})})]}),(0,o.jsxs)(`div`,{className:`rounded-[20px] border border-[color:var(--aui-divider)] p-4`,children:[(0,o.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Custom option renderer without duplicate check icons`}),(0,o.jsx)(`div`,{className:`mt-3`,children:(0,o.jsx)(r.Select,{defaultValue:l[1].value,options:l,showSelectedIndicator:!1,renderOption:(e,t)=>(0,o.jsxs)(`span`,{className:`flex min-w-0 flex-1 items-center justify-between gap-3`,children:[(0,o.jsxs)(`span`,{className:`min-w-0`,children:[(0,o.jsx)(`span`,{className:`block truncate font-medium`,children:e.label}),e.description?(0,o.jsx)(`span`,{className:`block truncate text-xs aui-text-muted`,children:e.description}):null]}),t.selected?(0,o.jsx)(`span`,{className:`rounded-full bg-[color:var(--aui-control-bg)] px-2 py-0.5 text-xs font-semibold`,children:`Selected`}):null]}),triggerClassName:`w-full`})})]}),(0,o.jsx)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:y.map(([e,t])=>(0,o.jsxs)(`div`,{className:`rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3`,children:[(0,o.jsx)(`p`,{className:`text-xs aui-text-muted`,children:e}),(0,o.jsx)(`p`,{className:`mt-1 text-sm font-medium aui-text-strong`,children:t})]},e))})]}),(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted`,children:`Controlled result`}),(0,o.jsx)(`h4`,{className:`mt-2 text-xl font-semibold tracking-tight aui-text-strong`,children:p.label})]}),(0,o.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:p.value})]}),(0,o.jsx)(`div`,{className:`border-y border-[color:var(--aui-divider)]`,children:[`Base Select should cover normal forms and static choices first.`,`Async and searchable variants should be documented as upgrades, not parallel defaults.`,`Controlled value must update nearby product UI immediately.`].map(e=>(0,o.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))}),(0,o.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,o.jsxs)(t.Button,{type:`button`,size:`sm`,onClick:()=>c({selectValue:m.value}),children:[`Choose `,m.label]}),(0,o.jsx)(t.Button,{type:`button`,size:`sm`,variant:`secondary`,onClick:()=>c({selectValue:l[0].value}),children:`Reset`})]}),(0,o.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-2`,children:[(0,o.jsx)(r.Select,{value:`invalid`,onValueChange:()=>void 0,options:[{value:`invalid`,label:`Invalid selection`}],invalid:!0,triggerClassName:`w-full`}),(0,o.jsx)(r.Select,{value:`loading`,onValueChange:()=>void 0,options:[{value:`loading`,label:`Loading options`}],loading:!0,triggerClassName:`w-full`})]})]})]})})]})}exports.SelectShowcase=c;
@@ -150,6 +150,37 @@ function c({ state: c, setState: l }) {
150
150
  })
151
151
  })]
152
152
  }),
153
+ /* @__PURE__ */ o("div", {
154
+ className: "rounded-[20px] border border-[color:var(--aui-divider)] p-4",
155
+ children: [/* @__PURE__ */ a("p", {
156
+ className: "text-sm font-medium aui-text-muted",
157
+ children: "Custom option renderer without duplicate check icons"
158
+ }), /* @__PURE__ */ a("div", {
159
+ className: "mt-3",
160
+ children: /* @__PURE__ */ a(n, {
161
+ defaultValue: u[1].value,
162
+ options: u,
163
+ showSelectedIndicator: !1,
164
+ renderOption: (e, t) => /* @__PURE__ */ o("span", {
165
+ className: "flex min-w-0 flex-1 items-center justify-between gap-3",
166
+ children: [/* @__PURE__ */ o("span", {
167
+ className: "min-w-0",
168
+ children: [/* @__PURE__ */ a("span", {
169
+ className: "block truncate font-medium",
170
+ children: e.label
171
+ }), e.description ? /* @__PURE__ */ a("span", {
172
+ className: "block truncate text-xs aui-text-muted",
173
+ children: e.description
174
+ }) : null]
175
+ }), t.selected ? /* @__PURE__ */ a("span", {
176
+ className: "rounded-full bg-[color:var(--aui-control-bg)] px-2 py-0.5 text-xs font-semibold",
177
+ children: "Selected"
178
+ }) : null]
179
+ }),
180
+ triggerClassName: "w-full"
181
+ })
182
+ })]
183
+ }),
153
184
  /* @__PURE__ */ a("div", {
154
185
  className: "grid gap-3 sm:grid-cols-3",
155
186
  children: b.map(([e, t]) => /* @__PURE__ */ o("div", {
@@ -206,6 +237,28 @@ function c({ state: c, setState: l }) {
206
237
  onClick: () => l({ selectValue: u[0].value }),
207
238
  children: "Reset"
208
239
  })]
240
+ }),
241
+ /* @__PURE__ */ o("div", {
242
+ className: "grid gap-3 sm:grid-cols-2",
243
+ children: [/* @__PURE__ */ a(n, {
244
+ value: "invalid",
245
+ onValueChange: () => void 0,
246
+ options: [{
247
+ value: "invalid",
248
+ label: "Invalid selection"
249
+ }],
250
+ invalid: !0,
251
+ triggerClassName: "w-full"
252
+ }), /* @__PURE__ */ a(n, {
253
+ value: "loading",
254
+ onValueChange: () => void 0,
255
+ options: [{
256
+ value: "loading",
257
+ label: "Loading options"
258
+ }],
259
+ loading: !0,
260
+ triggerClassName: "w-full"
261
+ })]
209
262
  })
210
263
  ]
211
264
  })]
@@ -4,7 +4,7 @@ export function Example() {
4
4
  return (
5
5
  <Table>
6
6
  <TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader>
7
- <TableBody><TableRow><TableCell>Azamat UI</TableCell></TableRow></TableBody>
7
+ <TableBody><TableRow><TableCell>Tembro</TableCell></TableRow></TableBody>
8
8
  </Table>
9
9
  )
10
10
  }`,htmlCode:`<table data-slot="table">
@@ -1,6 +1,6 @@
1
1
  //#region src/showcase/premium/table/mock.ts
2
2
  var e = {
3
- code: "import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"tembro\"\n\nexport function Example() {\n return (\n <Table>\n <TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader>\n <TableBody><TableRow><TableCell>Azamat UI</TableCell></TableRow></TableBody>\n </Table>\n )\n}",
3
+ code: "import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"tembro\"\n\nexport function Example() {\n return (\n <Table>\n <TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader>\n <TableBody><TableRow><TableCell>Tembro</TableCell></TableRow></TableBody>\n </Table>\n )\n}",
4
4
  htmlCode: "<table data-slot=\"table\">\n <thead><tr><th>Name</th><th>Status</th><th>Revenue</th></tr></thead>\n <tbody><tr><td>Acme Dashboard</td><td>Live</td><td>$24,780</td></tr></tbody>\n</table>",
5
5
  cliCommand: "npx tembro add table",
6
6
  highlights: [
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={textValue:`Azamat UI`,textareaValue:`Controlled preview content for the selected component.`,checked:!0,switchOn:!0,selectValue:`starter`,badgeVariant:`default`,cardCompact:!1,activeTab:`overview`};exports.defaultComponentDemoState=e;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={textValue:`Tembro`,textareaValue:`Controlled preview content for the selected component.`,checked:!0,switchOn:!0,selectValue:`starter`,badgeVariant:`default`,cardCompact:!1,activeTab:`overview`};exports.defaultComponentDemoState=e;
@@ -1,6 +1,6 @@
1
1
  //#region src/showcase/premium/types.ts
2
2
  var e = {
3
- textValue: "Azamat UI",
3
+ textValue: "Tembro",
4
4
  textareaValue: "Controlled preview content for the selected component.",
5
5
  checked: !0,
6
6
  switchOn: !0,
@@ -0,0 +1 @@
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./mock.cjs"),t=require("./showcase.cjs");exports.WizardShowcase=t.WizardShowcase,exports.wizardMock=e.wizardMock;
@@ -0,0 +1,3 @@
1
+ import { wizardMock as e } from "./mock.js";
2
+ import { WizardShowcase as t } from "./showcase.js";
3
+ export { t as WizardShowcase, e as wizardMock };
@@ -0,0 +1,25 @@
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
2
+ import { Wizard } from "tembro"
3
+
4
+ const steps = [
5
+ { id: "profile", title: "Profile", description: "Basic account" },
6
+ { id: "team", title: "Team", description: "Invite members" },
7
+ { id: "finish", title: "Finish", description: "Review setup" },
8
+ ]
9
+
10
+ export function Example() {
11
+ const [step, setStep] = React.useState("profile")
12
+
13
+ return (
14
+ <Wizard
15
+ steps={steps}
16
+ currentStep={step}
17
+ onStepChange={setStep}
18
+ onNext={() => setStep(step === "profile" ? "team" : "finish")}
19
+ onPrevious={() => setStep(step === "finish" ? "team" : "profile")}
20
+ onFinish={() => console.log("complete")}
21
+ >
22
+ <div>Current step: {step}</div>
23
+ </Wizard>
24
+ )
25
+ }`,cliCommand:`npx tembro add wizard`,highlights:[`Stepper and footer controls in one workflow`,`Controlled current step`,`Clickable step navigation`,`Custom content slots`],scenarios:[{title:`Onboarding`,description:`Guide users through profile, team and confirmation screens.`},{title:`Multi-step forms`,description:`Keep form sections small while preserving progress context.`},{title:`Setup flows`,description:`Review final state before enabling the submit action.`}],capabilityNotes:[`Keep currentStep controlled so route or form state can persist.`,`Disable future steps when the user must complete validation first.`,`Keep the footer action labels specific to the workflow.`]};exports.wizardMock=e;