@cloudflare/kumo 2.0.1 → 2.0.3

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 (158) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/ai/component-registry.json +227 -16
  3. package/ai/component-registry.md +324 -8
  4. package/ai/schemas.ts +5 -2
  5. package/dist/.build-complete +1 -1
  6. package/dist/ai/schemas.d.ts +10 -4
  7. package/dist/ai/schemas.d.ts.map +1 -1
  8. package/dist/ai/schemas.js +510 -504
  9. package/dist/ai/schemas.js.map +1 -1
  10. package/dist/chunks/{autocomplete-48aq0d244bs2e8zv.js → autocomplete-ln55iimq2n2s5uex.js} +27 -26
  11. package/dist/chunks/autocomplete-ln55iimq2n2s5uex.js.map +1 -0
  12. package/dist/chunks/{badge-dan90i0rzy4pwa1j.js → badge-kqox9toi0sygfbno.js} +16 -16
  13. package/dist/chunks/badge-kqox9toi0sygfbno.js.map +1 -0
  14. package/dist/chunks/{banner-eiwcnk7ts21s3bnb.js → banner-eux4y8xaogjg64af.js} +32 -31
  15. package/dist/chunks/banner-eux4y8xaogjg64af.js.map +1 -0
  16. package/dist/chunks/{breadcrumbs-cxcwf2l1ki3ffg5d.js → breadcrumbs-do6uyvm4msqus0sz.js} +33 -32
  17. package/dist/chunks/breadcrumbs-do6uyvm4msqus0sz.js.map +1 -0
  18. package/dist/chunks/{button-6by9ntsa3nj553mq.js → button-dh366jtvswxj0fw3.js} +63 -62
  19. package/dist/chunks/button-dh366jtvswxj0fw3.js.map +1 -0
  20. package/dist/chunks/{checkbox-hvxfvhtx1qjo2mww.js → checkbox-cf2pwdupyjweg184.js} +2 -2
  21. package/dist/chunks/checkbox-cf2pwdupyjweg184.js.map +1 -0
  22. package/dist/chunks/{clipboard-text-hswydzx3iql369sd.js → clipboard-text-hn2uwdj4ozenezd5.js} +57 -56
  23. package/dist/chunks/clipboard-text-hn2uwdj4ozenezd5.js.map +1 -0
  24. package/dist/chunks/{code-f9v1ikwhekqw274q.js → code-bbnjm8vk9hxl129r.js} +20 -19
  25. package/dist/chunks/code-bbnjm8vk9hxl129r.js.map +1 -0
  26. package/dist/chunks/{collapsible-k8urhi16pg90jvxa.js → collapsible-nlp2jvcyuzxmq28o.js} +12 -11
  27. package/dist/chunks/{collapsible-k8urhi16pg90jvxa.js.map → collapsible-nlp2jvcyuzxmq28o.js.map} +1 -1
  28. package/dist/chunks/{combobox-fq36ye0hstote16x.js → combobox-fivcg1oorkmmmk78.js} +11 -10
  29. package/dist/chunks/combobox-fivcg1oorkmmmk78.js.map +1 -0
  30. package/dist/chunks/{command-palette-md65owxt5hv4rt9r.js → command-palette-kgiso245exdons4r.js} +2 -2
  31. package/dist/chunks/{command-palette-md65owxt5hv4rt9r.js.map → command-palette-kgiso245exdons4r.js.map} +1 -1
  32. package/dist/chunks/{dialog-k3f1fbam6nt96k8x.js → dialog-mqpvaidy0vnjwrfp.js} +16 -15
  33. package/dist/chunks/dialog-mqpvaidy0vnjwrfp.js.map +1 -0
  34. package/dist/chunks/{dropdown-zbax0zowy6m9zhmt.js → dropdown-gp5iptj1niq14lpv.js} +76 -75
  35. package/dist/chunks/dropdown-gp5iptj1niq14lpv.js.map +1 -0
  36. package/dist/chunks/{empty-b82oer7npkhtkx7k.js → empty-fr78te81o3qaj3in.js} +27 -26
  37. package/dist/chunks/empty-fr78te81o3qaj3in.js.map +1 -0
  38. package/dist/chunks/{field-c0wf94plit2gci59.js → field-dgf36p7cmz1crlnu.js} +2 -2
  39. package/dist/chunks/{field-c0wf94plit2gci59.js.map → field-dgf36p7cmz1crlnu.js.map} +1 -1
  40. package/dist/chunks/{grid-hj1ylz16p7g5uelh.js → grid-do93dv1rjggqxx7p.js} +30 -29
  41. package/dist/chunks/grid-do93dv1rjggqxx7p.js.map +1 -0
  42. package/dist/chunks/{input-ncfowphv81yq7fyy.js → input-2y9vg81trmamkb6k.js} +51 -50
  43. package/dist/chunks/input-2y9vg81trmamkb6k.js.map +1 -0
  44. package/dist/chunks/{input-area-bkyzu6f7gsck479h.js → input-area-i5wulip5pau3u6ss.js} +3 -3
  45. package/dist/chunks/{input-area-bkyzu6f7gsck479h.js.map → input-area-i5wulip5pau3u6ss.js.map} +1 -1
  46. package/dist/chunks/{input-group-bidweffa0zyg8gt0.js → input-group-bm9wxzovpvzn1c25.js} +4 -4
  47. package/dist/chunks/{input-group-bidweffa0zyg8gt0.js.map → input-group-bm9wxzovpvzn1c25.js.map} +1 -1
  48. package/dist/chunks/{label-c3h9i3y4wiccelt7.js → label-efa0uvb8zqyjwpc8.js} +2 -2
  49. package/dist/chunks/{label-c3h9i3y4wiccelt7.js.map → label-efa0uvb8zqyjwpc8.js.map} +1 -1
  50. package/dist/chunks/{link-kt74pxkud4olmcer.js → link-m9hlspftl34nseme.js} +28 -27
  51. package/dist/chunks/link-m9hlspftl34nseme.js.map +1 -0
  52. package/dist/chunks/{loader-hr2w7cpqeev3p3vl.js → loader-g8a6j76ue5nq0lr8.js} +15 -14
  53. package/dist/chunks/loader-g8a6j76ue5nq0lr8.js.map +1 -0
  54. package/dist/chunks/{pagination-jb3mncivbwsoi1se.js → pagination-fdmcwreb27eej9l3.js} +3 -3
  55. package/dist/chunks/pagination-fdmcwreb27eej9l3.js.map +1 -0
  56. package/dist/chunks/{radio-datzh3pilz8ojak1.js → radio-f95mt237ru8fyc03.js} +44 -43
  57. package/dist/chunks/radio-f95mt237ru8fyc03.js.map +1 -0
  58. package/dist/chunks/resolve-variant-gw6eh7fa4st8ej7m.js +11 -0
  59. package/dist/chunks/resolve-variant-gw6eh7fa4st8ej7m.js.map +1 -0
  60. package/dist/chunks/{select-g261chvosodu22i8.js → select-j8evv2iblgs5fa9s.js} +4 -4
  61. package/dist/chunks/{select-g261chvosodu22i8.js.map → select-j8evv2iblgs5fa9s.js.map} +1 -1
  62. package/dist/chunks/{sensitive-input-cijagk551mesdtk4.js → sensitive-input-cmb9jt42bv8jftei.js} +3 -3
  63. package/dist/chunks/{sensitive-input-cijagk551mesdtk4.js.map → sensitive-input-cmb9jt42bv8jftei.js.map} +1 -1
  64. package/dist/chunks/surface-k0e8mq1x00b7i8r6.js.map +1 -1
  65. package/dist/chunks/{switch-jdfsr3j3oa1qxegw.js → switch-c4qjga6x3axmoi20.js} +2 -2
  66. package/dist/chunks/switch-c4qjga6x3axmoi20.js.map +1 -0
  67. package/dist/chunks/{table-iudje0lva0z68jto.js → table-jvqy3tu48xa75n2t.js} +56 -55
  68. package/dist/chunks/table-jvqy3tu48xa75n2t.js.map +1 -0
  69. package/dist/chunks/{text-f7t467waymhb30sx.js → text-be7ehenoyldhyjma.js} +32 -28
  70. package/dist/chunks/text-be7ehenoyldhyjma.js.map +1 -0
  71. package/dist/chunks/{toast-h573o0tc7tefivk2.js → toast-c7kqwuj7qj9dx6gs.js} +75 -74
  72. package/dist/chunks/toast-c7kqwuj7qj9dx6gs.js.map +1 -0
  73. package/dist/chunks/tooltip-odudhkxe282wxinq.js.map +1 -1
  74. package/dist/code.js +1 -1
  75. package/dist/components/autocomplete.js +1 -1
  76. package/dist/components/badge.js +1 -1
  77. package/dist/components/banner.js +1 -1
  78. package/dist/components/breadcrumbs.js +1 -1
  79. package/dist/components/button.js +1 -1
  80. package/dist/components/checkbox.js +1 -1
  81. package/dist/components/clipboard-text.js +1 -1
  82. package/dist/components/code.js +1 -1
  83. package/dist/components/collapsible.js +1 -1
  84. package/dist/components/combobox.js +1 -1
  85. package/dist/components/command-palette.js +1 -1
  86. package/dist/components/dialog.js +1 -1
  87. package/dist/components/dropdown.js +1 -1
  88. package/dist/components/empty.js +1 -1
  89. package/dist/components/field.js +1 -1
  90. package/dist/components/grid.js +1 -1
  91. package/dist/components/input-group.js +1 -1
  92. package/dist/components/input.js +3 -3
  93. package/dist/components/label.js +1 -1
  94. package/dist/components/link.js +1 -1
  95. package/dist/components/loader.js +1 -1
  96. package/dist/components/pagination.js +1 -1
  97. package/dist/components/radio.js +1 -1
  98. package/dist/components/select.js +1 -1
  99. package/dist/components/sensitive-input.js +1 -1
  100. package/dist/components/switch.js +1 -1
  101. package/dist/components/table.js +1 -1
  102. package/dist/components/text.js +1 -1
  103. package/dist/components/toast.js +1 -1
  104. package/dist/index.js +34 -34
  105. package/dist/src/components/autocomplete/autocomplete.d.ts.map +1 -1
  106. package/dist/src/components/badge/badge.d.ts.map +1 -1
  107. package/dist/src/components/banner/banner.d.ts.map +1 -1
  108. package/dist/src/components/breadcrumbs/breadcrumbs.d.ts.map +1 -1
  109. package/dist/src/components/button/button.d.ts.map +1 -1
  110. package/dist/src/components/checkbox/checkbox.d.ts.map +1 -1
  111. package/dist/src/components/clipboard-text/clipboard-text.d.ts.map +1 -1
  112. package/dist/src/components/code/code.d.ts.map +1 -1
  113. package/dist/src/components/collapsible/collapsible.d.ts +1 -1
  114. package/dist/src/components/collapsible/collapsible.d.ts.map +1 -1
  115. package/dist/src/components/combobox/combobox.d.ts.map +1 -1
  116. package/dist/src/components/dialog/dialog.d.ts.map +1 -1
  117. package/dist/src/components/dropdown/dropdown.d.ts.map +1 -1
  118. package/dist/src/components/empty/empty.d.ts.map +1 -1
  119. package/dist/src/components/grid/grid.d.ts.map +1 -1
  120. package/dist/src/components/input/input.d.ts.map +1 -1
  121. package/dist/src/components/link/link.d.ts.map +1 -1
  122. package/dist/src/components/loader/loader.d.ts.map +1 -1
  123. package/dist/src/components/pagination/pagination.d.ts.map +1 -1
  124. package/dist/src/components/radio/radio.d.ts.map +1 -1
  125. package/dist/src/components/surface/surface.d.ts.map +1 -1
  126. package/dist/src/components/switch/switch.d.ts.map +1 -1
  127. package/dist/src/components/table/table.d.ts.map +1 -1
  128. package/dist/src/components/text/text.d.ts.map +1 -1
  129. package/dist/src/components/toast/toast.d.ts.map +1 -1
  130. package/dist/src/components/tooltip/tooltip.d.ts.map +1 -1
  131. package/dist/src/utils/resolve-variant.d.ts +27 -0
  132. package/dist/src/utils/resolve-variant.d.ts.map +1 -0
  133. package/package.json +1 -1
  134. package/scripts/component-registry/index.test.ts +42 -0
  135. package/scripts/component-registry/index.ts +18 -4
  136. package/scripts/component-registry/metadata.ts +239 -4
  137. package/dist/chunks/autocomplete-48aq0d244bs2e8zv.js.map +0 -1
  138. package/dist/chunks/badge-dan90i0rzy4pwa1j.js.map +0 -1
  139. package/dist/chunks/banner-eiwcnk7ts21s3bnb.js.map +0 -1
  140. package/dist/chunks/breadcrumbs-cxcwf2l1ki3ffg5d.js.map +0 -1
  141. package/dist/chunks/button-6by9ntsa3nj553mq.js.map +0 -1
  142. package/dist/chunks/checkbox-hvxfvhtx1qjo2mww.js.map +0 -1
  143. package/dist/chunks/clipboard-text-hswydzx3iql369sd.js.map +0 -1
  144. package/dist/chunks/code-f9v1ikwhekqw274q.js.map +0 -1
  145. package/dist/chunks/combobox-fq36ye0hstote16x.js.map +0 -1
  146. package/dist/chunks/dialog-k3f1fbam6nt96k8x.js.map +0 -1
  147. package/dist/chunks/dropdown-zbax0zowy6m9zhmt.js.map +0 -1
  148. package/dist/chunks/empty-b82oer7npkhtkx7k.js.map +0 -1
  149. package/dist/chunks/grid-hj1ylz16p7g5uelh.js.map +0 -1
  150. package/dist/chunks/input-ncfowphv81yq7fyy.js.map +0 -1
  151. package/dist/chunks/link-kt74pxkud4olmcer.js.map +0 -1
  152. package/dist/chunks/loader-hr2w7cpqeev3p3vl.js.map +0 -1
  153. package/dist/chunks/pagination-jb3mncivbwsoi1se.js.map +0 -1
  154. package/dist/chunks/radio-datzh3pilz8ojak1.js.map +0 -1
  155. package/dist/chunks/switch-jdfsr3j3oa1qxegw.js.map +0 -1
  156. package/dist/chunks/table-iudje0lva0z68jto.js.map +0 -1
  157. package/dist/chunks/text-f7t467waymhb30sx.js.map +0 -1
  158. package/dist/chunks/toast-h573o0tc7tefivk2.js.map +0 -1
@@ -943,3 +943,45 @@ interface GroupProps extends BaseProps {
943
943
  expect(props).toEqual({});
944
944
  });
945
945
  });
946
+
947
+ describe("SUB_COMPONENT_OVERRIDES", () => {
948
+ it("declares a Tooltip.Provider entry that passes through to TooltipBase.Provider", async () => {
949
+ const { SUB_COMPONENT_OVERRIDES, PASSTHROUGH_COMPONENT_DOCS } =
950
+ await import("./metadata.js");
951
+
952
+ expect(SUB_COMPONENT_OVERRIDES.Tooltip).toBeDefined();
953
+ const tooltipOverrides = SUB_COMPONENT_OVERRIDES.Tooltip;
954
+ expect(tooltipOverrides).toHaveLength(1);
955
+
956
+ const provider = tooltipOverrides[0];
957
+ expect(provider.name).toBe("Provider");
958
+ expect(provider.valueName).toBe("TooltipProvider");
959
+ expect(provider.isPassThrough).toBe(true);
960
+ expect(provider.baseComponent).toBe("TooltipBase.Provider");
961
+ expect(provider.propsType).toBeNull();
962
+
963
+ // The baseComponent must resolve to a documented passthrough entry so the
964
+ // merge + lookup path in index.ts produces real docs, not an empty stub.
965
+ expect(
966
+ PASSTHROUGH_COMPONENT_DOCS[provider.baseComponent as string],
967
+ ).toBeDefined();
968
+ });
969
+
970
+ it("entries have the same shape as detectSubComponents() results", async () => {
971
+ const { SUB_COMPONENT_OVERRIDES } = await import("./metadata.js");
972
+
973
+ for (const overrides of Object.values(SUB_COMPONENT_OVERRIDES)) {
974
+ for (const entry of overrides) {
975
+ // Required fields of SubComponentConfig.
976
+ expect(typeof entry.name).toBe("string");
977
+ expect(typeof entry.valueName).toBe("string");
978
+ expect(typeof entry.description).toBe("string");
979
+ expect(typeof entry.isPassThrough).toBe("boolean");
980
+ // propsType may be a string or null.
981
+ expect(
982
+ entry.propsType === null || typeof entry.propsType === "string",
983
+ ).toBe(true);
984
+ }
985
+ }
986
+ });
987
+ });
@@ -44,6 +44,7 @@ import {
44
44
  createCacheEntry,
45
45
  } from "./cache.js";
46
46
  import {
47
+ toPascalCase,
47
48
  toScreamingSnakeCase,
48
49
  extractSemanticColors,
49
50
  extractBlockDependencies,
@@ -62,6 +63,7 @@ import {
62
63
  ADDITIONAL_COMPONENT_PROPS,
63
64
  PROP_TYPE_OVERRIDES,
64
65
  COMPONENT_STYLING_METADATA,
66
+ SUB_COMPONENT_OVERRIDES,
65
67
  } from "./metadata.js";
66
68
 
67
69
  // External imports - demo examples from kumo-docs-astro
@@ -585,11 +587,16 @@ async function processComponent(
585
587
  const colors = extractSemanticColors(sourcePath);
586
588
 
587
589
  // Determine examples
590
+ // Demo metadata keys are derived from file names (e.g. DropdownDemo.tsx → "Dropdown")
591
+ // which may differ from the component's export name (e.g. "DropdownMenu").
592
+ // Try the component name first, then fall back to the PascalCase directory name.
588
593
  let examples: readonly string[];
589
594
  if (config.examples !== undefined) {
590
595
  examples = config.examples;
591
596
  } else {
592
- const extracted = input.storyExamples.get(config.name);
597
+ const extracted =
598
+ input.storyExamples.get(config.name) ??
599
+ input.storyExamples.get(toPascalCase(config.dirName));
593
600
  examples = extracted?.aiExamples ?? [];
594
601
  if (examples.length > 0 && CLI_FLAGS.verbose) {
595
602
  console.log(
@@ -598,14 +605,21 @@ async function processComponent(
598
605
  }
599
606
  }
600
607
 
601
- // Detect and process sub-components
608
+ // Merge SUB_COMPONENT_OVERRIDES after source detection.
609
+ // Detected entries win on name conflict so source-level patterns aren't masked.
602
610
  const detectedSubComponents = detectSubComponents(sourcePath);
611
+ const subComponentOverrides = SUB_COMPONENT_OVERRIDES[config.name] ?? [];
612
+ const detectedNames = new Set(detectedSubComponents.map((sc) => sc.name));
613
+ const mergedSubComponents = [
614
+ ...detectedSubComponents,
615
+ ...subComponentOverrides.filter((o) => !detectedNames.has(o.name)),
616
+ ];
603
617
  let subComponentSchemas: Record<string, SubComponentSchema> | undefined;
604
618
 
605
- if (detectedSubComponents.length > 0) {
619
+ if (mergedSubComponents.length > 0) {
606
620
  subComponentSchemas = {};
607
621
 
608
- for (const subComp of detectedSubComponents) {
622
+ for (const subComp of mergedSubComponents) {
609
623
  let subProps = extractSubComponentProps(sourcePath, subComp, CLI_FLAGS);
610
624
  let description = subComp.description;
611
625
  let usageExamples: string[] | undefined;
@@ -8,7 +8,12 @@
8
8
  * - Styling metadata for Figma plugin
9
9
  */
10
10
 
11
- import type { PropSchema, PassthroughDoc, ComponentStyling } from "./types.js";
11
+ import type {
12
+ PropSchema,
13
+ PassthroughDoc,
14
+ ComponentStyling,
15
+ SubComponentConfig,
16
+ } from "./types.js";
12
17
 
13
18
  // =============================================================================
14
19
  // Pass-through Component Documentation
@@ -158,6 +163,66 @@ export const PASSTHROUGH_COMPONENT_DOCS: Record<string, PassthroughDoc> = {
158
163
  </Combobox.Collection>`,
159
164
  ],
160
165
  },
166
+
167
+ // Tooltip sub-components
168
+ "TooltipBase.Provider": {
169
+ description:
170
+ "Groups multiple tooltips so that after the first tooltip is shown, switching to another skips the open delay. Place once at your app root or layout.",
171
+ props: {
172
+ delay: {
173
+ type: "number",
174
+ description:
175
+ "How long to wait (ms) before opening a tooltip once the pointer enters the trigger.",
176
+ default: "600",
177
+ },
178
+ closeDelay: {
179
+ type: "number",
180
+ description: "How long to wait (ms) before closing a tooltip.",
181
+ default: "0",
182
+ },
183
+ timeout: {
184
+ type: "number",
185
+ description:
186
+ "Grace period (ms) during which a just-closed tooltip's delay is skipped when another tooltip opens.",
187
+ default: "400",
188
+ },
189
+ },
190
+ usageExamples: ["<TooltipProvider>\n <App />\n</TooltipProvider>"],
191
+ },
192
+ };
193
+
194
+ // =============================================================================
195
+ // Sub-Component Overrides
196
+ // =============================================================================
197
+
198
+ /**
199
+ * Manual sub-component entries that are merged into the registry alongside
200
+ * entries detected by `detectSubComponents()` in `sub-components.ts`.
201
+ *
202
+ * Use this when a component exposes a related API (e.g., a sibling named
203
+ * export like `TooltipProvider`) that we want documented as a sub-component
204
+ * (e.g., `Tooltip.Provider`) for the registry / docs, *without* changing the
205
+ * component's runtime shape (no `Object.assign`, no attached property).
206
+ *
207
+ * Detected sub-components take precedence over overrides with the same
208
+ * `name`, so a real source-level compound pattern will always win and
209
+ * prevent silent masking of detector regressions.
210
+ *
211
+ * Keyed by the parent component name (e.g., "Tooltip"). Values have the same
212
+ * shape as `detectSubComponents()` entries so they feed directly into the
213
+ * existing processing loop in `index.ts`.
214
+ */
215
+ export const SUB_COMPONENT_OVERRIDES: Record<string, SubComponentConfig[]> = {
216
+ Tooltip: [
217
+ {
218
+ name: "Provider",
219
+ valueName: "TooltipProvider",
220
+ propsType: null,
221
+ description: "Provider sub-component (wraps TooltipBase)",
222
+ isPassThrough: true,
223
+ baseComponent: "TooltipBase.Provider",
224
+ },
225
+ ],
161
226
  };
162
227
 
163
228
  // =============================================================================
@@ -224,13 +289,28 @@ export const ADDITIONAL_COMPONENT_PROPS: Record<
224
289
  },
225
290
  Select: {
226
291
  onValueChange: {
227
- type: "(value: string) => void",
292
+ type: "(value: T) => void",
228
293
  description: "Callback when selection changes",
229
294
  },
230
295
  defaultValue: {
231
- type: "string",
296
+ type: "T",
232
297
  description: "Initial value for uncontrolled mode",
233
298
  },
299
+ renderValue: {
300
+ type: "(value: T) => ReactNode",
301
+ description:
302
+ "A function that returns a ReactNode to format the selected value in the trigger. Required when using object values. Use `placeholder` for the empty state.",
303
+ },
304
+ items: {
305
+ type: 'Record<string, string> | Array<{ label: ReactNode; value: T }>',
306
+ description:
307
+ "Data structure of items rendered in the popup. Accepts a plain object map (`{ key: \"Label\" }`) or an array of `{ label, value }` for object/complex values.",
308
+ },
309
+ isItemEqualToValue: {
310
+ type: "(item: T, value: T) => boolean",
311
+ description:
312
+ "Custom equality function for comparing items. Required when value is an object, since object identity (`===`) won't match across renders.",
313
+ },
234
314
  },
235
315
  DateRangePicker: {
236
316
  onStartDateChange: {
@@ -254,6 +334,161 @@ export const ADDITIONAL_COMPONENT_PROPS: Record<
254
334
  description: "Callback when collapsed state changes",
255
335
  },
256
336
  },
337
+ "DropdownMenu.Item": {
338
+ icon: {
339
+ type: "Icon | ReactNode",
340
+ description: "Icon displayed before the label.",
341
+ },
342
+ variant: {
343
+ type: '"default" | "danger"',
344
+ description: "Visual style of the item.",
345
+ default: '"default"',
346
+ },
347
+ selected: {
348
+ type: "boolean",
349
+ description: "Shows a check mark indicator when true.",
350
+ },
351
+ inset: {
352
+ type: "boolean",
353
+ description: "Adds left padding to align with items that have icons.",
354
+ },
355
+ onClick: {
356
+ type: "(event: React.MouseEvent) => void",
357
+ description: "Callback when the item is clicked.",
358
+ },
359
+ closeOnClick: {
360
+ type: "boolean",
361
+ description: "Whether the menu closes after clicking this item.",
362
+ default: "true",
363
+ },
364
+ disabled: {
365
+ type: "boolean",
366
+ description: "When true, the item cannot be interacted with.",
367
+ },
368
+ },
369
+ "DropdownMenu.LinkItem": {
370
+ href: {
371
+ type: "string",
372
+ description: "URL to navigate to when clicked.",
373
+ },
374
+ icon: {
375
+ type: "Icon | ReactNode",
376
+ description: "Icon displayed before the label.",
377
+ },
378
+ variant: {
379
+ type: '"default" | "danger"',
380
+ description: "Visual style of the item.",
381
+ default: '"default"',
382
+ },
383
+ inset: {
384
+ type: "boolean",
385
+ description: "Adds left padding to align with items that have icons.",
386
+ },
387
+ target: {
388
+ type: "string",
389
+ description: 'Link target attribute (e.g. "_blank" for new tab).',
390
+ },
391
+ render: {
392
+ type: "ReactElement | ((props, state) => ReactElement)",
393
+ description:
394
+ "Custom element to render as the link. Use to integrate with framework routers (e.g. Next.js Link).",
395
+ },
396
+ },
397
+ "DropdownMenu.Content": {
398
+ sideOffset: {
399
+ type: "number",
400
+ description: "Distance in pixels from the trigger.",
401
+ default: "8",
402
+ },
403
+ container: {
404
+ type: "PortalContainer",
405
+ description:
406
+ "Container element for the portal. Use this to render inside a Shadow DOM or custom container.",
407
+ },
408
+ },
409
+ "DropdownMenu.SubTrigger": {
410
+ icon: {
411
+ type: "Icon",
412
+ description: "Icon displayed before the label.",
413
+ },
414
+ inset: {
415
+ type: "boolean",
416
+ description: "Adds left padding to align with items that have icons.",
417
+ },
418
+ },
419
+ "DropdownMenu.CheckboxItem": {
420
+ checked: {
421
+ type: "boolean",
422
+ description: "Whether the item is checked.",
423
+ },
424
+ defaultChecked: {
425
+ type: "boolean",
426
+ description: "Whether the item is initially checked (uncontrolled).",
427
+ default: "false",
428
+ },
429
+ onCheckedChange: {
430
+ type: "(checked: boolean, event: ChangeEventDetails) => void",
431
+ description: "Callback when the checked state changes.",
432
+ },
433
+ closeOnClick: {
434
+ type: "boolean",
435
+ description: "Whether the menu closes after clicking this item.",
436
+ default: "false",
437
+ },
438
+ disabled: {
439
+ type: "boolean",
440
+ description: "When true, the item cannot be interacted with.",
441
+ },
442
+ },
443
+ "DropdownMenu.RadioGroup": {
444
+ value: {
445
+ type: "any",
446
+ description:
447
+ "The controlled value of the currently selected radio item.",
448
+ },
449
+ defaultValue: {
450
+ type: "any",
451
+ description: "The initially selected value (uncontrolled).",
452
+ },
453
+ onValueChange: {
454
+ type: "(value: any, event: ChangeEventDetails) => void",
455
+ description: "Callback when the selected value changes.",
456
+ },
457
+ disabled: {
458
+ type: "boolean",
459
+ description: "When true, all radio items in the group are disabled.",
460
+ },
461
+ },
462
+ "DropdownMenu.RadioItem": {
463
+ value: {
464
+ type: "any",
465
+ required: true,
466
+ description: "The value of this radio item.",
467
+ },
468
+ icon: {
469
+ type: "Icon | ReactNode",
470
+ description: "Icon displayed before the label.",
471
+ },
472
+ inset: {
473
+ type: "boolean",
474
+ description: "Adds left padding to align with items that have icons.",
475
+ },
476
+ closeOnClick: {
477
+ type: "boolean",
478
+ description: "Whether the menu closes after clicking this item.",
479
+ default: "false",
480
+ },
481
+ disabled: {
482
+ type: "boolean",
483
+ description: "When true, the item cannot be interacted with.",
484
+ },
485
+ },
486
+ "DropdownMenu.Label": {
487
+ inset: {
488
+ type: "boolean",
489
+ description: "Adds left padding to align with items that have icons.",
490
+ },
491
+ },
257
492
  "InputGroup.Addon": {
258
493
  align: {
259
494
  type: '"start" | "end"',
@@ -312,7 +547,7 @@ export const PROP_TYPE_OVERRIDES: Record<string, Record<string, string>> = {
312
547
  value: "T | T[]",
313
548
  },
314
549
  Select: {
315
- value: "string",
550
+ value: "T",
316
551
  },
317
552
  };
318
553
 
@@ -1 +0,0 @@
1
- {"version":3,"file":"autocomplete-48aq0d244bs2e8zv.js","sources":["../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import { Autocomplete as AutocompleteBase } from \"@base-ui/react/autocomplete\";\nimport { CheckIcon } from \"@phosphor-icons/react\";\nimport { type ReactNode } from \"react\";\nimport { inputVariants, KUMO_INPUT_VARIANTS } from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Autocomplete variant definitions. */\nexport const KUMO_AUTOCOMPLETE_VARIANTS = {\n size: KUMO_INPUT_VARIANTS.size,\n} as const;\n\nexport const KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\n// Derived types from KUMO_AUTOCOMPLETE_VARIANTS\nexport type KumoAutocompleteSize = keyof typeof KUMO_AUTOCOMPLETE_VARIANTS.size;\n\nexport interface KumoAutocompleteVariantsProps {\n /**\n * Size of the autocomplete input. Matches Input component sizes.\n * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n * - `\"base\"` — Default size (h-9 / 36px)\n * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n * @default \"base\"\n */\n size?: KumoAutocompleteSize;\n}\n\nexport function autocompleteVariants({\n size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n}: KumoAutocompleteVariantsProps = {}) {\n return cn(KUMO_INPUT_VARIANTS.size[size].classes);\n}\n\n/**\n * Autocomplete component props.\n *\n * Autocomplete provides a free-form text input with optional suggestions in a\n * filterable dropdown. Unlike Combobox, the input value is not constrained to\n * the suggestion list items.\n *\n * @example\n * ```tsx\n * <Autocomplete label=\"Country\" items={countries}>\n * <Autocomplete.InputGroup />\n * <Autocomplete.Content>\n * <Autocomplete.List>\n * {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n * </Autocomplete.List>\n * </Autocomplete.Content>\n * </Autocomplete>\n * ```\n */\nexport interface AutocompleteProps {\n /** Array of items to display in the dropdown */\n items: unknown[];\n /** The controlled input value */\n value?: string | number | string[];\n /** The uncontrolled default input value */\n defaultValue?: string | number | string[];\n /** Callback when the input value changes */\n onValueChange?: AutocompleteBase.Root.Props<unknown>[\"onValueChange\"];\n /** Whether the popup is open (controlled) */\n open?: boolean;\n /** Callback when the popup opens or closes */\n onOpenChange?: AutocompleteBase.Root.Props<unknown>[\"onOpenChange\"];\n /** Autocomplete content (input group, popup content) */\n children: ReactNode;\n /** Additional CSS classes */\n className?: string;\n /** Label content (enables Field wrapper) */\n label?: ReactNode;\n /** Whether the field is required */\n required?: boolean;\n /** Tooltip content to display next to the label */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the field */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<ItemValue>({\n label,\n required,\n labelTooltip,\n description,\n error,\n children,\n ...props\n}: AutocompleteBase.Root.Props<ItemValue> & {\n label?: ReactNode;\n required?: boolean;\n labelTooltip?: ReactNode;\n description?: ReactNode;\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}) {\n const rootProps = props as Omit<\n AutocompleteBase.Root.Props<ItemValue>,\n \"items\"\n > & {\n items?: readonly ItemValue[];\n };\n const control = (\n <AutocompleteBase.Root {...rootProps}>{children}</AutocompleteBase.Root>\n );\n\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {control}\n </Field>\n );\n }\n\n return control;\n}\n\nfunction InputGroup({\n className,\n size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n placeholder,\n}: {\n className?: string;\n size?: KumoAutocompleteSize;\n placeholder?: string;\n}) {\n return (\n <AutocompleteBase.Input\n className={cn(\n inputVariants({ size, focusIndicator: true }),\n \"w-full\",\n className,\n )}\n placeholder={placeholder}\n />\n );\n}\n\nfunction Content({\n children,\n className,\n align = \"start\",\n sideOffset = 4,\n alignOffset,\n side,\n}: {\n children?: ReactNode;\n className?: string;\n align?: AutocompleteBase.Positioner.Props[\"align\"];\n alignOffset?: AutocompleteBase.Positioner.Props[\"alignOffset\"];\n side?: AutocompleteBase.Positioner.Props[\"side\"];\n sideOffset?: AutocompleteBase.Positioner.Props[\"sideOffset\"];\n}) {\n return (\n <AutocompleteBase.Portal>\n <AutocompleteBase.Positioner\n className=\"outline-none\"\n align={align}\n sideOffset={sideOffset}\n alignOffset={alignOffset}\n side={side}\n >\n <AutocompleteBase.Popup\n className={(state: AutocompleteBase.Popup.State) =>\n cn(\n \"flex flex-col\",\n \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5\",\n \"bg-kumo-control text-kumo-default\",\n \"rounded-lg shadow-lg ring ring-kumo-line\",\n state.empty && \"hidden\",\n className,\n )\n }\n >\n {children}\n </AutocompleteBase.Popup>\n </AutocompleteBase.Positioner>\n </AutocompleteBase.Portal>\n );\n}\n\nfunction List({\n className,\n ...props\n}: AutocompleteBase.List.Props & { className?: string }) {\n return (\n <AutocompleteBase.List\n {...props}\n className={cn(\n \"min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2\",\n className,\n )}\n />\n );\n}\n\nfunction Item({ children, ...props }: AutocompleteBase.Item.Props) {\n return (\n <AutocompleteBase.Item\n {...props}\n className=\"group mx-1.5 grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay data-selected:font-medium\"\n >\n <div className=\"col-start-1\">{children}</div>\n <span className=\"col-start-2 hidden items-center group-data-selected:flex\">\n <CheckIcon size={14} />\n </span>\n </AutocompleteBase.Item>\n );\n}\n\nfunction GroupLabel(props: AutocompleteBase.GroupLabel.Props) {\n return (\n <AutocompleteBase.GroupLabel\n {...props}\n className={cn(\n \"mx-1.5 px-2 py-1.5 text-sm text-kumo-strong\",\n props.className,\n )}\n />\n );\n}\n\nfunction Group(props: AutocompleteBase.Group.Props) {\n return (\n <AutocompleteBase.Group\n {...props}\n className=\"border-t border-kumo-line mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0\"\n />\n );\n}\n\nfunction Separator(props: AutocompleteBase.Separator.Props) {\n return (\n <AutocompleteBase.Separator\n {...props}\n className={cn(\"mx-0 my-1 h-px bg-kumo-line\", props.className)}\n />\n );\n}\n\nRoot.displayName = \"Autocomplete.Root\";\nInputGroup.displayName = \"Autocomplete.InputGroup\";\nContent.displayName = \"Autocomplete.Content\";\nItem.displayName = \"Autocomplete.Item\";\nGroupLabel.displayName = \"Autocomplete.GroupLabel\";\nGroup.displayName = \"Autocomplete.Group\";\nSeparator.displayName = \"Autocomplete.Separator\";\n\n/**\n * Autocomplete — free-form text input with an optional filtered suggestion list.\n *\n * Unlike Combobox, the input value is not restricted to items in the list.\n * Use Combobox when the selected value must come from the list.\n *\n * Compound component: `Autocomplete` (Root), `.InputGroup`, `.Content`, `.Item`,\n * `.GroupLabel`, `.Group`, `.Separator`, `.List`, `.Collection`.\n *\n * `InputGroup` renders the text input with Input component styling.\n * Pass a `size` prop to `InputGroup` to match the Input component sizes.\n *\n * @example\n * ```tsx\n * <Autocomplete items={fruits} label=\"Fruit\">\n * <Autocomplete.InputGroup size=\"base\" />\n * <Autocomplete.Content>\n * <Autocomplete.List>\n * {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n * </Autocomplete.List>\n * </Autocomplete.Content>\n * </Autocomplete>\n * ```\n *\n * @see https://base-ui.com/react/components/autocomplete\n */\nexport const Autocomplete = Object.assign(Root, {\n // Styled compound sub-components\n InputGroup,\n Content,\n Item,\n GroupLabel,\n Group,\n Separator,\n List,\n\n // Pass-through Base UI sub-components\n Empty: AutocompleteBase.Empty,\n Collection: AutocompleteBase.Collection,\n});\n"],"names":["KUMO_AUTOCOMPLETE_VARIANTS","KUMO_INPUT_VARIANTS","KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS","autocompleteVariants","size","cn","Root","label","required","labelTooltip","description","error","children","props","control","jsx","AutocompleteBase.Root","Field","InputGroup","className","placeholder","AutocompleteBase.Input","inputVariants","Content","align","sideOffset","alignOffset","side","AutocompleteBase.Portal","AutocompleteBase.Positioner","AutocompleteBase.Popup","state","List","AutocompleteBase.List","Item","jsxs","AutocompleteBase.Item","CheckIcon","GroupLabel","AutocompleteBase.GroupLabel","Group","AutocompleteBase.Group","Separator","AutocompleteBase.Separator","Autocomplete","AutocompleteBase.Empty","AutocompleteBase.Collection"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"badge-dan90i0rzy4pwa1j.js","sources":["../../src/components/badge/badge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Base styles applied to all badge variants. */\nexport const KUMO_BADGE_BASE_STYLES =\n \"inline-flex w-fit flex-none shrink-0 items-center justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap\";\n\n/** Badge variant definitions mapping variant names to their Tailwind classes and descriptions. */\nexport const KUMO_BADGE_VARIANTS = {\n variant: {\n /** Semantic token badges */\n primary: {\n classes: \"bg-kumo-badge-inverted text-kumo-badge-inverted\",\n description: \"Primary badge\",\n },\n secondary: {\n classes: \"bg-kumo-fill text-kumo-badge-neutral-subtle\",\n description: \"Secondary badge\",\n },\n error: {\n classes: \"bg-kumo-danger-tint/60 text-kumo-danger\",\n description: \"Error badge\",\n },\n warning: {\n classes: \"bg-kumo-warning-tint/70 text-kumo-warning\",\n description: \"Warning badge\",\n },\n success: {\n classes: \"bg-kumo-success-tint/70 text-kumo-success\",\n description: \"Success badge\",\n },\n destructive: {\n classes: \"bg-kumo-badge-red text-white\",\n description: \"Deprecated. Use red instead.\",\n },\n info: {\n classes: \"bg-kumo-info-tint/70 text-kumo-info\",\n description: \"Info badge\",\n },\n beta: {\n classes:\n \"border border-dashed border-kumo-brand bg-transparent text-kumo-link\",\n description: \"Indicates beta or experimental features\",\n },\n outline: {\n classes: \"border border-kumo-fill bg-transparent text-kumo-default\",\n description: \"Bordered badge with transparent background\",\n },\n\n /** Other color token variants */\n\n red: {\n classes: \"bg-kumo-badge-red text-white\",\n description: \"Red badge\",\n },\n green: {\n classes: \"bg-kumo-badge-green text-white\",\n description: \"Green badge\",\n },\n neutral: {\n classes: \"bg-kumo-badge-neutral text-white\",\n description: \"Neutral badge\",\n },\n orange: {\n classes: \"bg-kumo-badge-orange text-black\",\n description: \"Orange badge\",\n },\n purple: {\n classes: \"bg-kumo-badge-purple text-white\",\n description: \"Purple badge\",\n },\n teal: {\n classes: \"bg-kumo-badge-teal text-white\",\n description: \"Teal badge\",\n },\n \"teal-subtle\": {\n classes: \"bg-kumo-badge-teal-subtle text-kumo-badge-teal-subtle\",\n description: \"Subtle teal badge\",\n },\n blue: {\n classes: \"bg-kumo-badge-blue text-white\",\n description: \"Blue badge\",\n },\n },\n} as const;\n\nexport const KUMO_BADGE_DEFAULT_VARIANTS = {\n variant: \"primary\",\n} as const;\n\n// Derived types from KUMO_BADGE_VARIANTS\nexport type KumoBadgeVariant = keyof typeof KUMO_BADGE_VARIANTS.variant;\n\nexport interface KumoBadgeVariantsProps {\n variant?: KumoBadgeVariant;\n}\n\nexport function badgeVariants({\n variant = KUMO_BADGE_DEFAULT_VARIANTS.variant,\n}: KumoBadgeVariantsProps = {}) {\n const variantConfig = KUMO_BADGE_VARIANTS.variant[variant];\n return cn(\n // Base styles (exported as KUMO_BADGE_BASE_STYLES for Figma plugin)\n KUMO_BADGE_BASE_STYLES,\n // Apply variant styles from KUMO_BADGE_VARIANTS (fallback to primary if variant not found)\n variantConfig?.classes ??\n KUMO_BADGE_VARIANTS.variant[KUMO_BADGE_DEFAULT_VARIANTS.variant].classes,\n );\n}\n\n// Legacy type alias for backwards compatibility\nexport type BadgeVariant = KumoBadgeVariant;\n\n/**\n * Badge component props.\n *\n * @example\n * ```tsx\n * <Badge variant=\"green\">Active</Badge>\n * <Badge variant=\"red\">Error</Badge>\n * <Badge variant=\"neutral\">Inactive</Badge>\n * ```\n */\nexport interface BadgeProps {\n /**\n * Color variant of the badge.\n * Recommended semantic variants:\n * - `\"primary\"` — Primary badge\n * - `\"secondary\"` — Secondary badge\n * - `\"error\"` — Error badge\n * - `\"warning\"` — Warning badge\n * - `\"success\"` — Success badge\n * - `\"info\"` — Info badge\n *\n * Additional token variants:\n * - `\"red\"`, `\"orange\"`, `\"green\"`, `\"teal\"`, `\"blue\"`, `\"purple\"`, `\"neutral\"`\n * - `\"teal-subtle\"`, `\"neutral-subtle\"`\n * - `\"inverted\"`\n * - `\"outline\"` — Bordered badge with transparent background\n * - `\"beta\"` — Dashed-border badge for beta/experimental features\n * @default \"secondary\"\n */\n variant?: KumoBadgeVariant;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Content rendered inside the badge. */\n children: ReactNode;\n}\n\n/**\n * Small status label for categorizing or highlighting content.\n *\n * @example\n * ```tsx\n * <Badge variant=\"green\">Active</Badge>\n * ```\n */\nexport function Badge({\n variant = KUMO_BADGE_DEFAULT_VARIANTS.variant,\n className,\n children,\n}: BadgeProps) {\n return (\n <span className={cn(badgeVariants({ variant }), className)}>\n {children}\n </span>\n );\n}\n"],"names":["KUMO_BADGE_BASE_STYLES","KUMO_BADGE_VARIANTS","KUMO_BADGE_DEFAULT_VARIANTS","badgeVariants","variant","variantConfig","cn","Badge","className","children","jsx"],"mappings":";;;AAIO,MAAMA,IACX,uIAGWC,IAAsB;AAAA,EACjC,SAAS;AAAA;AAAA,IAEP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,WAAW;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,aAAa;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA;AAAA,IAKf,KAAK;AAAA,MACH,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,eAAe;AAAA,MACb,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,SAAS;AACX;AASO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AACxC,IAA4B,IAAI;AAC9B,QAAMG,IAAgBJ,EAAoB,QAAQG,CAAO;AACzD,SAAOE;AAAA;AAAA,IAELN;AAAA;AAAA,IAEAK,GAAe,WACbJ,EAAoB,QAAQC,EAA4B,OAAO,EAAE;AAAA,EAAA;AAEvE;AAiDO,SAASK,EAAM;AAAA,EACpB,SAAAH,IAAUF,EAA4B;AAAA,EACtC,WAAAM;AAAA,EACA,UAAAC;AACF,GAAe;AACb,SACE,gBAAAC,EAAC,QAAA,EAAK,WAAWJ,EAAGH,EAAc,EAAE,SAAAC,GAAS,GAAGI,CAAS,GACtD,UAAAC,EAAA,CACH;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"banner-eiwcnk7ts21s3bnb.js","sources":["../../src/components/banner/banner.tsx"],"sourcesContent":["import { type ReactNode, isValidElement, forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Base styles applied to all banner variants. */\nexport const KUMO_BANNER_BASE_STYLES =\n \"flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-base\";\n\n/** Banner variant definitions mapping variant names to their Tailwind classes and descriptions. */\nexport const KUMO_BANNER_VARIANTS = {\n variant: {\n default: {\n classes:\n \"bg-kumo-info-tint/30 border-kumo-info/50 text-kumo-info selection:bg-kumo-info\",\n iconClasses: \"text-kumo-info\",\n description: \"Informational banner for general messages\",\n },\n alert: {\n classes:\n \"bg-kumo-warning-tint/15 border-kumo-warning/50 text-kumo-warning selection:bg-kumo-warning\",\n iconClasses: \"text-kumo-warning\",\n description: \"Warning banner for cautionary messages\",\n },\n error: {\n classes:\n \"bg-kumo-danger-tint/15 border-kumo-danger/50 text-kumo-danger selection:bg-kumo-danger\",\n iconClasses: \"text-kumo-danger\",\n description: \"Error banner for critical issues\",\n },\n },\n} as const;\n\nexport const KUMO_BANNER_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_BANNER_VARIANTS\nexport type KumoBannerVariant = keyof typeof KUMO_BANNER_VARIANTS.variant;\n\nexport interface KumoBannerVariantsProps {\n /**\n * Visual style of the banner.\n * - `\"default\"` — Informational banner for general messages\n * - `\"alert\"` — Warning banner for cautionary messages\n * - `\"error\"` — Error banner for critical issues\n * @default \"default\"\n */\n variant?: KumoBannerVariant;\n}\n\nexport function bannerVariants({\n variant = KUMO_BANNER_DEFAULT_VARIANTS.variant,\n}: KumoBannerVariantsProps = {}) {\n return cn(\n // Base styles (exported as KUMO_BANNER_BASE_STYLES for Figma plugin)\n KUMO_BANNER_BASE_STYLES,\n // Apply variant styles from KUMO_BANNER_VARIANTS\n KUMO_BANNER_VARIANTS.variant[variant].classes,\n );\n}\n\n// Legacy enum for backwards compatibility\nexport enum BannerVariant {\n DEFAULT,\n ALERT,\n ERROR,\n}\n\n/**\n * Banner component props.\n *\n * @example\n * ```tsx\n * <Banner title=\"Update available\" description=\"A new version is ready to install.\" />\n * <Banner variant=\"alert\" title=\"Session expiring\" description=\"Your session will expire soon.\" />\n * <Banner variant=\"error\" title=\"Save failed\" description=\"We couldn't save your changes.\" />\n * ```\n */\nexport interface BannerProps {\n /** Icon element rendered before the banner content (e.g. from `@phosphor-icons/react`). */\n icon?: ReactNode;\n /** Primary heading text for the banner. Use for i18n string injection. */\n title?: string;\n /** Secondary description text displayed below the title. Use for i18n string injection. */\n description?: ReactNode;\n /** Action slot rendered at the trailing end of the banner (e.g. a CTA button or link). Only used in structured mode (with `title` or `description`). */\n action?: ReactNode;\n /** @deprecated Use `title` and `description` instead. Will be removed in a future major version. */\n text?: string;\n /** @deprecated Use `title` and `description` instead for better i18n support. */\n children?: ReactNode;\n /**\n * Visual style of the banner.\n * - `\"default\"` — Informational blue banner for general messages\n * - `\"alert\"` — Warning yellow banner for cautionary messages\n * - `\"error\"` — Error red banner for critical issues\n * @default \"default\"\n */\n variant?: KumoBannerVariant;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n}\n\n/**\n * Full-width message bar for informational, warning, or error notices.\n * Supports structured title/description for i18n, or simple children for basic usage.\n *\n * @example\n * ```tsx\n * // Structured (recommended for i18n)\n * <Banner\n * variant=\"alert\"\n * icon={<WarningCircle />}\n * title=\"Review required\"\n * description=\"Please review your billing information.\"\n * />\n *\n * // Simple (backwards compatible)\n * <Banner variant=\"alert\" icon={<WarningCircle />}>\n * Review your billing information.\n * </Banner>\n * ```\n */\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n {\n icon,\n title,\n description,\n action,\n children,\n text,\n variant = KUMO_BANNER_DEFAULT_VARIANTS.variant,\n className,\n },\n ref,\n) {\n const variantConfig = KUMO_BANNER_VARIANTS.variant[variant];\n\n // Structured mode: title and/or description provided\n if (title || description) {\n return (\n <div ref={ref} className={cn(bannerVariants({ variant }), className)}>\n {icon && (\n <span\n className={cn(\n \"shrink-0 flex items-center h-[1.375em]\",\n variantConfig.iconClasses,\n )}\n >\n {icon}\n </span>\n )}\n <div className=\"flex min-w-0 flex-1 items-center justify-between gap-3\">\n <div className=\"flex flex-col gap-0.5\">\n {title && <p className=\"font-medium leading-snug\">{title}</p>}\n {description && (\n <div className=\"text-sm leading-snug\">\n {isValidElement(description) ? (\n description\n ) : (\n <p>{description}</p>\n )}\n </div>\n )}\n </div>\n {action && (\n <div className=\"flex shrink-0 items-center gap-2\">{action}</div>\n )}\n </div>\n </div>\n );\n }\n\n // Legacy mode: children or text prop\n const value = children ?? text;\n const content = isValidElement(value) ? value : <p>{value}</p>;\n\n return (\n <div ref={ref} className={cn(bannerVariants({ variant }), className)}>\n {icon && (\n <span className={cn(\"shrink-0\", variantConfig.iconClasses)}>\n {icon}\n </span>\n )}\n {content}\n </div>\n );\n});\n\nBanner.displayName = \"Banner\";\n"],"names":["KUMO_BANNER_BASE_STYLES","KUMO_BANNER_VARIANTS","KUMO_BANNER_DEFAULT_VARIANTS","bannerVariants","variant","cn","BannerVariant","Banner","forwardRef","icon","title","description","action","children","text","className","ref","variantConfig","jsxs","jsx","isValidElement","value","content"],"mappings":";;;;AAIO,MAAMA,IACX,uEAGWC,IAAuB;AAAA,EAClC,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SACE;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SACE;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SACE;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA+B;AAAA,EAC1C,SAAS;AACX;AAgBO,SAASC,EAAe;AAAA,EAC7B,SAAAC,IAAUF,EAA6B;AACzC,IAA6B,IAAI;AAC/B,SAAOG;AAAA;AAAA,IAELL;AAAA;AAAA,IAEAC,EAAqB,QAAQG,CAAO,EAAE;AAAA,EAAA;AAE1C;AAGO,IAAKE,sBAAAA,OACVA,EAAAA,EAAA,UAAA,CAAA,IAAA,WACAA,EAAAA,EAAA,QAAA,CAAA,IAAA,SACAA,EAAAA,EAAA,QAAA,CAAA,IAAA,SAHUA,IAAAA,KAAA,CAAA,CAAA;AA6DL,MAAMC,IAASC,EAAwC,SAC5D;AAAA,EACE,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAV,IAAUF,EAA6B;AAAA,EACvC,WAAAa;AACF,GACAC,GACA;AACA,QAAMC,IAAgBhB,EAAqB,QAAQG,CAAO;AAG1D,MAAIM,KAASC;AACX,WACE,gBAAAO,EAAC,OAAA,EAAI,KAAAF,GAAU,WAAWX,EAAGF,EAAe,EAAE,SAAAC,EAAA,CAAS,GAAGW,CAAS,GAChE,UAAA;AAAA,MAAAN,KACC,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWd;AAAA,YACT;AAAA,YACAY,EAAc;AAAA,UAAA;AAAA,UAGf,UAAAR;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAS,EAAC,OAAA,EAAI,WAAU,0DACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAAR,KAAS,gBAAAS,EAAC,KAAA,EAAE,WAAU,4BAA4B,UAAAT,GAAM;AAAA,UACxDC,KACC,gBAAAQ,EAAC,OAAA,EAAI,WAAU,wBACZ,UAAAC,EAAeT,CAAW,IACzBA,IAEA,gBAAAQ,EAAC,KAAA,EAAG,UAAAR,EAAA,CAAY,EAAA,CAEpB;AAAA,QAAA,GAEJ;AAAA,QACCC,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAU,oCAAoC,UAAAP,EAAA,CAAO;AAAA,MAAA,EAAA,CAE9D;AAAA,IAAA,GACF;AAKJ,QAAMS,IAAQR,KAAYC,GACpBQ,IAAUF,EAAeC,CAAK,IAAIA,IAAQ,gBAAAF,EAAC,OAAG,UAAAE,GAAM;AAE1D,SACE,gBAAAH,EAAC,OAAA,EAAI,KAAAF,GAAU,WAAWX,EAAGF,EAAe,EAAE,SAAAC,EAAA,CAAS,GAAGW,CAAS,GAChE,UAAA;AAAA,IAAAN,KACC,gBAAAU,EAAC,UAAK,WAAWd,EAAG,YAAYY,EAAc,WAAW,GACtD,UAAAR,EAAA,CACH;AAAA,IAEDa;AAAA,EAAA,GACH;AAEJ,CAAC;AAEDf,EAAO,cAAc;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"breadcrumbs-cxcwf2l1ki3ffg5d.js","sources":["../../src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n useEffect,\n useState,\n type PropsWithChildren,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { Button } from \"../../components/button\";\nimport { SkeletonLine } from \"../../components/loader/skeleton-line\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { cn } from \"../../utils/cn\";\n\n/** Breadcrumbs size variant definitions. */\nexport const KUMO_BREADCRUMBS_VARIANTS = {\n size: {\n sm: {\n classes: \"text-sm h-10 gap-0.5\",\n description: \"Compact breadcrumbs for dense UIs\",\n },\n base: {\n classes: \"text-base h-12 gap-1\",\n description: \"Default breadcrumbs size\",\n },\n },\n} as const;\n\nexport const KUMO_BREADCRUMBS_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\nexport type KumoBreadcrumbsSize = keyof typeof KUMO_BREADCRUMBS_VARIANTS.size;\n\nexport interface KumoBreadcrumbsVariantsProps {\n /**\n * Size of the breadcrumbs.\n * - `\"sm\"` — Compact breadcrumbs for dense UIs\n * - `\"base\"` — Default breadcrumbs size\n * @default \"base\"\n */\n size?: KumoBreadcrumbsSize;\n}\n\nexport function breadcrumbsVariants({\n size = KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size,\n}: KumoBreadcrumbsVariantsProps = {}) {\n return cn(\n \"group mr-4 flex min-w-0 grow items-center overflow-hidden whitespace-nowrap\",\n KUMO_BREADCRUMBS_VARIANTS.size[size].classes,\n );\n}\n\nexport interface BreadcrumbsItemProps {\n href: string;\n icon?: React.ReactNode;\n}\n\nconst Link = ({\n href,\n icon,\n children,\n}: PropsWithChildren<BreadcrumbsItemProps>) => {\n const LinkComponent = useLinkComponent();\n\n return (\n <LinkComponent\n to={href}\n className=\"flex min-w-0 max-w-full items-center gap-1 text-kumo-subtle no-underline\"\n >\n {!!icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <span className=\"truncate\">{children}</span>\n </LinkComponent>\n );\n};\n\ninterface BreadcrumbsCurrentProps {\n loading?: boolean;\n icon?: React.ReactNode;\n}\n\nfunction Current({\n children,\n icon,\n loading,\n}: PropsWithChildren<BreadcrumbsCurrentProps>) {\n if (loading) {\n return (\n <div className=\"flex w-[125px] min-w-0 items-center gap-1\">\n {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <SkeletonLine />\n </div>\n );\n }\n\n return (\n <div\n className=\"flex min-w-0 max-w-full items-center gap-1 font-medium\"\n aria-current=\"page\"\n >\n {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <span className=\"truncate\">{children}</span>\n </div>\n );\n}\n\nfunction Separator() {\n return (\n <span\n className=\"flex shrink-0 items-center text-kumo-inactive\"\n aria-hidden=\"true\"\n >\n <svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n d=\"M10.75 8.75L14.25 12L10.75 15.25\"\n />\n </svg>\n </span>\n );\n}\n\nfunction MobileEllipsis() {\n return (\n <span className=\"flex shrink-0 items-center text-kumo-subtle\" aria-hidden>\n ...\n </span>\n );\n}\n\nfunction Clipboard({ text }: { text: string }) {\n const [isCopied, setIsCopied] = useState(false);\n\n useEffect(() => {\n if (!isCopied) return;\n\n const timeoutId = setTimeout(() => setIsCopied(false), 2000);\n return () => clearTimeout(timeoutId);\n }, [isCopied]);\n\n const handleCopyDeeplink = async () => {\n if (!text) return;\n\n try {\n await navigator.clipboard.writeText(text);\n setIsCopied(true);\n } catch (err) {\n console.error(\"Failed to copy deeplink:\", err);\n }\n };\n\n return (\n <Button\n variant=\"ghost\"\n shape=\"square\"\n size=\"sm\"\n className=\"opacity-0 transition-[opacity] group-hover:opacity-100\"\n onClick={handleCopyDeeplink}\n title=\"Click to copy\"\n aria-label=\"Copy\"\n >\n {isCopied ? (\n <CheckIcon weight=\"bold\" className=\"text-kumo-success\" />\n ) : (\n <CopyIcon weight=\"regular\" />\n )}\n </Button>\n );\n}\n\n/**\n * Breadcrumbs component props.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n * <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Link href=\"/docs\">Docs</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Current>Current Page</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport interface BreadcrumbsProps\n extends PropsWithChildren,\n KumoBreadcrumbsVariantsProps {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n}\n\n/**\n * Navigation breadcrumb trail showing the current page's location in a hierarchy.\n * Compound component with `Breadcrumbs.Link`, `Breadcrumbs.Current`, `Breadcrumbs.Separator`, and `Breadcrumbs.Clipboard`.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n * <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport function Breadcrumb({\n children,\n size = \"base\",\n className,\n}: BreadcrumbsProps) {\n const childArray = Children.toArray(children);\n const mobileChildren = getMobileBreadcrumbChildren(childArray);\n\n return (\n <nav\n className={cn(breadcrumbsVariants({ size }), className)}\n aria-label=\"breadcrumb\"\n >\n <div className=\"contents sm:hidden\">{mobileChildren}</div>\n <div className=\"hidden sm:contents\">{childArray}</div>\n </nav>\n );\n}\n\nfunction isComponentElement(\n child: ReactNode,\n component: unknown,\n): child is ReactElement {\n return isValidElement(child) && child.type === component;\n}\n\nfunction getMobileBreadcrumbChildren(children: ReactNode[]): ReactNode[] {\n const breadcrumbItems = children.filter(\n (child) =>\n isComponentElement(child, Link) || isComponentElement(child, Current),\n ) as ReactElement[];\n\n if (breadcrumbItems.length <= 2) {\n return children;\n }\n\n const [parentItem, currentItem] = breadcrumbItems.slice(-2);\n const trailingItems: ReactNode[] = [\n <MobileEllipsis key=\"kumo-breadcrumb-mobile-ellipsis\" />,\n <Separator key=\"kumo-breadcrumb-mobile-separator-leading\" />,\n cloneElement(parentItem, { key: \"kumo-breadcrumb-mobile-parent\" }),\n <Separator key=\"kumo-breadcrumb-mobile-separator-trailing\" />,\n cloneElement(currentItem, { key: \"kumo-breadcrumb-mobile-current\" }),\n ];\n\n const extras = children.filter(\n (child) =>\n !isComponentElement(child, Link) &&\n !isComponentElement(child, Current) &&\n !isComponentElement(child, Separator),\n );\n\n return [...trailingItems, ...extras];\n}\n\nBreadcrumb.Link = Link;\nBreadcrumb.Current = Current;\nBreadcrumb.Separator = Separator;\nBreadcrumb.Clipboard = Clipboard;\n"],"names":["KUMO_BREADCRUMBS_VARIANTS","KUMO_BREADCRUMBS_DEFAULT_VARIANTS","breadcrumbsVariants","size","cn","Link","href","icon","children","LinkComponent","useLinkComponent","jsxs","jsx","Current","loading","SkeletonLine","Separator","MobileEllipsis","Clipboard","text","isCopied","setIsCopied","useState","useEffect","timeoutId","Button","err","CheckIcon","CopyIcon","Breadcrumb","className","childArray","Children","mobileChildren","getMobileBreadcrumbChildren","isComponentElement","child","component","isValidElement","breadcrumbItems","parentItem","currentItem","trailingItems","cloneElement","extras"],"mappings":";;;;;;;;AAiBO,MAAMA,IAA4B;AAAA,EACvC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAAoC;AAAA,EAC/C,MAAM;AACR;AAcO,SAASC,EAAoB;AAAA,EAClC,MAAAC,IAAOF,EAAkC;AAC3C,IAAkC,IAAI;AACpC,SAAOG;AAAA,IACL;AAAA,IACAJ,EAA0B,KAAKG,CAAI,EAAE;AAAA,EAAA;AAEzC;AAOA,MAAME,IAAO,CAAC;AAAA,EACZ,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AACF,MAA+C;AAC7C,QAAMC,IAAgBC,EAAA;AAEtB,SACE,gBAAAC;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,IAAIH;AAAA,MACJ,WAAU;AAAA,MAET,UAAA;AAAA,QAAA,CAAC,CAACC,KAAQ,gBAAAK,EAAC,QAAA,EAAK,WAAU,8BAA8B,UAAAL,GAAK;AAAA,QAC9D,gBAAAK,EAAC,QAAA,EAAK,WAAU,YAAY,UAAAJ,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3C;AAOA,SAASK,EAAQ;AAAA,EACf,UAAAL;AAAA,EACA,MAAAD;AAAA,EACA,SAAAO;AACF,GAA+C;AAC7C,SAAIA,IAEA,gBAAAH,EAAC,OAAA,EAAI,WAAU,6CACZ,UAAA;AAAA,IAAAJ,KAAQ,gBAAAK,EAAC,QAAA,EAAK,WAAU,8BAA8B,UAAAL,GAAK;AAAA,sBAC3DQ,GAAA,CAAA,CAAa;AAAA,EAAA,GAChB,IAKF,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,gBAAa;AAAA,MAEZ,UAAA;AAAA,QAAAJ,KAAQ,gBAAAK,EAAC,QAAA,EAAK,WAAU,8BAA8B,UAAAL,GAAK;AAAA,QAC5D,gBAAAK,EAAC,QAAA,EAAK,WAAU,YAAY,UAAAJ,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3C;AAEA,SAASQ,IAAY;AACnB,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MAEZ,UAAA,gBAAAA,EAAC,SAAI,OAAM,MAAK,QAAO,MAAK,MAAK,QAAO,SAAQ,aAC9C,UAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAY;AAAA,UACZ,GAAE;AAAA,QAAA;AAAA,MAAA,EACJ,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAASK,IAAiB;AACxB,2BACG,QAAA,EAAK,WAAU,+CAA8C,eAAW,IAAC,UAAA,OAE1E;AAEJ;AAEA,SAASC,EAAU,EAAE,MAAAC,KAA0B;AAC7C,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK;AAE9C,SAAAC,EAAU,MAAM;AACd,QAAI,CAACH,EAAU;AAEf,UAAMI,IAAY,WAAW,MAAMH,EAAY,EAAK,GAAG,GAAI;AAC3D,WAAO,MAAM,aAAaG,CAAS;AAAA,EACrC,GAAG,CAACJ,CAAQ,CAAC,GAcX,gBAAAR;AAAA,IAACa;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,MAAK;AAAA,MACL,WAAU;AAAA,MACV,SAjBuB,YAAY;AACrC,YAAKN;AAEL,cAAI;AACF,kBAAM,UAAU,UAAU,UAAUA,CAAI,GACxCE,EAAY,EAAI;AAAA,UAClB,SAASK,GAAK;AACZ,oBAAQ,MAAM,4BAA4BA,CAAG;AAAA,UAC/C;AAAA,MACF;AAAA,MASI,OAAM;AAAA,MACN,cAAW;AAAA,MAEV,UAAAN,IACC,gBAAAR,EAACe,GAAA,EAAU,QAAO,QAAO,WAAU,oBAAA,CAAoB,IAEvD,gBAAAf,EAACgB,GAAA,EAAS,QAAO,UAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAInC;AAoCO,SAASC,EAAW;AAAA,EACzB,UAAArB;AAAA,EACA,MAAAL,IAAO;AAAA,EACP,WAAA2B;AACF,GAAqB;AACnB,QAAMC,IAAaC,EAAS,QAAQxB,CAAQ,GACtCyB,IAAiBC,EAA4BH,CAAU;AAE7D,SACE,gBAAApB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWP,EAAGF,EAAoB,EAAE,MAAAC,EAAA,CAAM,GAAG2B,CAAS;AAAA,MACtD,cAAW;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAlB,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAqB,GAAe;AAAA,QACpD,gBAAArB,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAmB,EAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtD;AAEA,SAASI,EACPC,GACAC,GACuB;AACvB,SAAOC,EAAeF,CAAK,KAAKA,EAAM,SAASC;AACjD;AAEA,SAASH,EAA4B1B,GAAoC;AACvE,QAAM+B,IAAkB/B,EAAS;AAAA,IAC/B,CAAC4B,MACCD,EAAmBC,GAAO/B,CAAI,KAAK8B,EAAmBC,GAAOvB,CAAO;AAAA,EAAA;AAGxE,MAAI0B,EAAgB,UAAU;AAC5B,WAAO/B;AAGT,QAAM,CAACgC,GAAYC,CAAW,IAAIF,EAAgB,MAAM,EAAE,GACpDG,IAA6B;AAAA,IACjC,gBAAA9B,EAACK,OAAmB,iCAAkC;AAAA,IACtD,gBAAAL,EAACI,OAAc,0CAA2C;AAAA,IAC1D2B,EAAaH,GAAY,EAAE,KAAK,iCAAiC;AAAA,IACjE,gBAAA5B,EAACI,OAAc,2CAA4C;AAAA,IAC3D2B,EAAaF,GAAa,EAAE,KAAK,kCAAkC;AAAA,EAAA,GAG/DG,IAASpC,EAAS;AAAA,IACtB,CAAC4B,MACC,CAACD,EAAmBC,GAAO/B,CAAI,KAC/B,CAAC8B,EAAmBC,GAAOvB,CAAO,KAClC,CAACsB,EAAmBC,GAAOpB,CAAS;AAAA,EAAA;AAGxC,SAAO,CAAC,GAAG0B,GAAe,GAAGE,CAAM;AACrC;AAEAf,EAAW,OAAOxB;AAClBwB,EAAW,UAAUhB;AACrBgB,EAAW,YAAYb;AACvBa,EAAW,YAAYX;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"button-6by9ntsa3nj553mq.js","sources":["../../src/components/button/button.tsx"],"sourcesContent":["import React from \"react\";\nimport { ArrowsClockwise, type Icon } from \"@phosphor-icons/react\";\nimport { Loader } from \"../loader/loader\";\nimport { Tooltip } from \"../tooltip/tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\n\n/** Button variant definitions mapping shape, size, and variant names to their Tailwind classes. */\nexport const KUMO_BUTTON_VARIANTS = {\n shape: {\n base: {\n classes: \"\",\n description: \"Default rectangular button shape\",\n },\n square: {\n classes: \"items-center justify-center p-0\",\n description: \"Square button for icon-only actions\",\n },\n circle: {\n classes: \"items-center justify-center p-0 rounded-full\",\n description: \"Circular button for icon-only actions\",\n },\n },\n size: {\n xs: {\n classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n description: \"Extra small button for compact UIs\",\n },\n sm: {\n classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n description: \"Small button for secondary actions\",\n },\n base: {\n classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n description: \"Default button size\",\n },\n lg: {\n classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n description: \"Large button for primary CTAs\",\n },\n },\n compactSize: {\n xs: { classes: \"size-3.5\" },\n sm: { classes: \"size-6.5\" },\n base: { classes: \"size-9\" },\n lg: { classes: \"size-10\" },\n },\n variant: {\n primary: {\n classes:\n \"bg-kumo-brand !text-white hover:bg-kumo-brand-hover disabled:bg-kumo-brand/50\",\n description: \"High-emphasis button for primary actions\",\n },\n secondary: {\n classes:\n \"bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-hairline data-[state=open]:bg-kumo-base\",\n description: \"Default button style for most actions\",\n },\n ghost: {\n classes: \"text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit\",\n description: \"Minimal button with no background\",\n },\n destructive: {\n classes: \"bg-kumo-danger !text-white hover:bg-kumo-danger/70\",\n description: \"Danger button for destructive actions like delete\",\n },\n \"secondary-destructive\": {\n classes:\n \"bg-kumo-base !text-kumo-danger ring not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-hairline data-[state=open]:bg-kumo-base\",\n description:\n \"Secondary button with destructive text for less prominent dangerous actions\",\n },\n outline: {\n classes: \"bg-transparent text-kumo-default ring ring-kumo-hairline\",\n description: \"Bordered button with transparent background\",\n },\n },\n} as const;\n\nexport const KUMO_BUTTON_DEFAULT_VARIANTS = {\n shape: \"base\",\n size: \"base\",\n variant: \"secondary\",\n} as const;\n\n// Derived types from KUMO_BUTTON_VARIANTS\nexport type KumoButtonShape = keyof typeof KUMO_BUTTON_VARIANTS.shape;\nexport type KumoButtonSize = keyof typeof KUMO_BUTTON_VARIANTS.size;\nexport type KumoButtonVariant = keyof typeof KUMO_BUTTON_VARIANTS.variant;\n\nexport interface KumoButtonVariantsProps {\n /**\n * Button shape.\n * - `\"base\"` — Default rectangular button\n * - `\"square\"` — Square button for icon-only actions\n * - `\"circle\"` — Circular button for icon-only actions\n * @default \"base\"\n */\n shape?: KumoButtonShape;\n /**\n * Button size.\n * - `\"xs\"` — Extra small for compact UIs\n * - `\"sm\"` — Small for secondary actions\n * - `\"base\"` — Default size\n * - `\"lg\"` — Large for primary CTAs\n * @default \"base\"\n */\n size?: KumoButtonSize;\n /**\n * Visual style of the button.\n * - `\"primary\"` — High-emphasis, brand-colored for primary actions\n * - `\"secondary\"` — Default style with border for most actions\n * - `\"ghost\"` — Minimal, no background for tertiary actions\n * - `\"destructive\"` — Danger button for destructive actions\n * - `\"secondary-destructive\"` — Secondary style with destructive text\n * - `\"outline\"` — Bordered with transparent background\n * @default \"secondary\"\n */\n variant?: KumoButtonVariant;\n}\n\nexport function buttonVariants({\n variant = KUMO_BUTTON_DEFAULT_VARIANTS.variant,\n size = KUMO_BUTTON_DEFAULT_VARIANTS.size,\n shape = KUMO_BUTTON_DEFAULT_VARIANTS.shape,\n}: KumoButtonVariantsProps = {}) {\n const isCompactShape = shape === \"square\" || shape === \"circle\";\n\n return cn(\n // Base styles\n \"group flex w-max shrink-0 items-center font-medium select-none\",\n \"border-0 shadow-xs\",\n \"focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n \"cursor-pointer\",\n // Disabled state\n \"disabled:cursor-not-allowed disabled:text-kumo-subtle\",\n // Apply variant, size, shape styles from KUMO_BUTTON_VARIANTS\n KUMO_BUTTON_VARIANTS.variant[variant].classes,\n KUMO_BUTTON_VARIANTS.size[size].classes,\n KUMO_BUTTON_VARIANTS.shape[shape].classes,\n isCompactShape && KUMO_BUTTON_VARIANTS.compactSize[size].classes,\n );\n}\n\n// Normalize icon prop to support both React elements and component types\nconst renderIconNode = (IconComponent?: Icon | React.ReactNode) => {\n if (!IconComponent) return null;\n if (React.isValidElement(IconComponent)) return IconComponent;\n const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;\n return <Comp />;\n};\n\n/**\n * Button component props.\n *\n * Uses a discriminated union on `shape` so that icon-only buttons\n * (`shape=\"square\"` or `shape=\"circle\"`) require an `aria-label`.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\">Save</Button>\n * <Button variant=\"secondary\" shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n * <Button variant=\"destructive\" loading>Deleting...</Button>\n * ```\n */\ntype ButtonBaseProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n /** Content rendered inside the button. */\n children?: React.ReactNode;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */\n icon?: Icon | React.ReactNode;\n /** Shows a loading spinner and disables interaction. */\n loading?: boolean;\n /** When set, wraps the button in a Tooltip with this content. */\n title?: React.ReactNode;\n};\n\ntype ButtonWithTextProps = ButtonBaseProps & {\n shape?: \"base\";\n size?: KumoButtonSize;\n variant?: KumoButtonVariant;\n};\n\ntype IconOnlyButtonProps = ButtonBaseProps & {\n shape: \"square\" | \"circle\";\n size?: KumoButtonSize;\n variant?: KumoButtonVariant;\n /** Required for icon-only buttons to provide accessible label for screen readers */\n \"aria-label\": string;\n};\n\nexport type ButtonProps = ButtonWithTextProps | IconOnlyButtonProps;\n\n/**\n * LinkButton component props — renders an anchor styled as a button.\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/docs\" variant=\"ghost\" icon={BookIcon}>Docs</LinkButton>\n * <LinkButton href=\"https://example.com\" external>Visit Site</LinkButton>\n * ```\n */\nexport type LinkButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &\n KumoButtonVariantsProps & {\n /** Content rendered inside the link button. */\n children?: React.ReactNode;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */\n icon?: Icon | React.ReactNode;\n /** When `true`, opens in a new tab with `rel=\"noopener noreferrer\"`. */\n external?: boolean;\n linksExternal?: boolean;\n };\n\n/**\n * Primary action trigger. Supports multiple variants, sizes, shapes, icons, and loading state.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\">Save</Button>\n * <Button variant=\"secondary\" icon={PlusIcon}>Create Worker</Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n className,\n disabled,\n loading,\n shape = \"base\",\n size = \"base\",\n variant = \"secondary\",\n icon: IconComponent,\n title,\n ...props\n },\n ref,\n ) => {\n const { type, ...restProps } = props;\n const button = (\n <button\n ref={ref}\n className={cn(\n buttonVariants({ variant, size, shape }),\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n disabled={loading || disabled}\n type={type ?? \"button\"}\n {...restProps}\n >\n {loading && <Loader size={size === \"lg\" ? 16 : 14} />}\n {!loading && renderIconNode(IconComponent)}\n\n {children}\n </button>\n );\n\n if (title) {\n return <Tooltip content={title} render={button} />;\n }\n\n return button;\n },\n);\n\nButton.displayName = \"Button\";\n\n/**\n * Square button with a rotating arrows icon, used to trigger data refresh actions.\n *\n * @example\n * ```tsx\n * <RefreshButton loading={isRefreshing} onClick={refresh} />\n * ```\n */\nexport const RefreshButton = ({\n \"aria-label\": ariaLabel = \"Refresh\",\n loading,\n ...props\n}: ButtonProps) => (\n <Button shape=\"square\" aria-label={ariaLabel} {...props}>\n <ArrowsClockwise\n className={cn({\n \"animate-refresh\": loading,\n \"size-4.5\": props.size === \"base\" || !props.size,\n \"size-4\": props.size === \"sm\",\n \"size-5\": props.size === \"lg\",\n })}\n />\n </Button>\n);\n\n/**\n * Anchor element styled as a button. Integrates with `LinkProvider` for framework routing.\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/settings\" variant=\"ghost\">Settings</LinkButton>\n * ```\n */\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n (\n {\n children,\n className,\n external,\n href,\n shape = \"base\",\n size = \"base\",\n variant = \"ghost\",\n icon: IconComponent,\n // linksExternal = false,\n ...props\n },\n ref,\n ) => {\n const LinkComponent = useLinkComponent();\n const externalProps = external\n ? { target: \"_blank\", rel: \"noopener noreferrer\" }\n : {};\n\n return (\n <LinkComponent\n ref={ref}\n className={cn(\n buttonVariants({ variant, size, shape }),\n \"flex items-center no-underline!\",\n className,\n )}\n href={href}\n to={typeof href === \"string\" ? href : undefined}\n {...externalProps}\n {...props}\n >\n {renderIconNode(IconComponent)}\n {children}\n </LinkComponent>\n );\n },\n);\n\nLinkButton.displayName = \"LinkButton\";\n"],"names":["KUMO_BUTTON_VARIANTS","KUMO_BUTTON_DEFAULT_VARIANTS","buttonVariants","variant","size","shape","isCompactShape","cn","renderIconNode","IconComponent","React","Button","children","className","disabled","loading","title","props","ref","type","restProps","button","jsxs","Loader","jsx","Tooltip","RefreshButton","ariaLabel","ArrowsClockwise","LinkButton","external","href","LinkComponent","useLinkComponent","externalProps"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox-hvxfvhtx1qjo2mww.js","sources":["../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { CheckIcon, MinusIcon } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\n\n/** Event details passed to onCheckedChange callback. Re-exported from Base UI. */\nexport type CheckboxChangeEventDetails = Parameters<\n NonNullable<BaseCheckbox.Root.Props[\"onCheckedChange\"]>\n>[1];\n\n/** Checkbox variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_CHECKBOX_VARIANTS = {\n variant: {\n default: {\n classes:\n \"[&:focus-within>span]:ring-kumo-focus [&:hover>span]:ring-kumo-hairline\",\n description: \"Default checkbox appearance\",\n },\n error: {\n classes: \"[&>span]:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_CHECKBOX_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_CHECKBOX_VARIANTS\nexport type KumoCheckboxVariant = keyof typeof KUMO_CHECKBOX_VARIANTS.variant;\n\nexport interface KumoCheckboxVariantsProps {\n /**\n * Visual variant.\n * - `\"default\"` — Standard checkbox appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoCheckboxVariant;\n}\n\nexport function checkboxVariants({\n variant = KUMO_CHECKBOX_DEFAULT_VARIANTS.variant,\n}: KumoCheckboxVariantsProps = {}) {\n return cn(KUMO_CHECKBOX_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type CheckboxVariant = KumoCheckboxVariant;\n\n// Context for passing controlFirst from Group to Items\nconst CheckboxGroupContext = createContext<{ controlFirst: boolean }>({\n controlFirst: true,\n});\n\n/**\n * Single checkbox component props with accessibility guidance.\n *\n * **Accessible Name Required:** Checkbox should have one of:\n * 1. `label` prop (recommended) - built-in Field wrapper with horizontal layout\n * 2. `aria-label` - for checkboxes without visible label\n * 3. `aria-labelledby` - for custom label association\n *\n * **Note:** When used inside Checkbox.Group or Dropdown, label is optional (parent provides context).\n *\n * Missing accessible names will trigger console warnings in development (unless inside a group).\n *\n * @example\n * // Recommended: Built-in Field wrapper with label\n * <Checkbox label=\"Accept terms and conditions\" />\n *\n * @example\n * // Control-first layout (checkbox before label)\n * <Checkbox label=\"Remember me\" controlFirst={true} />\n *\n * @example\n * // Label-first layout (label before checkbox)\n * <Checkbox label=\"Enable notifications\" controlFirst={false} />\n *\n * @example\n * // Error variant (visual only, no error text for single checkboxes)\n * <Checkbox label=\"Required field\" variant=\"error\" />\n *\n * @example\n * // Without visible label (aria-label required)\n * <Checkbox aria-label=\"Select all items\" />\n *\n * @example\n * // Custom label association\n * <label id=\"terms-label\">I accept the terms</label>\n * <Checkbox aria-labelledby=\"terms-label\" />\n *\n * @example\n * // Inside Checkbox.Group (label optional)\n * <Checkbox.Group legend=\"Preferences\">\n * <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n * <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n * </Checkbox.Group>\n */\nexport type CheckboxProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n variant?: CheckboxVariant;\n /** Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n controlFirst?: boolean;\n /** Whether the checkbox is checked (controlled) */\n checked?: boolean;\n /** Whether the checkbox is in indeterminate state */\n indeterminate?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: BaseCheckbox.Root.Props[\"onCheckedChange\"];\n /** Name for form submission */\n name?: string;\n /** Whether the field is required */\n required?: boolean;\n /** Additional class name */\n className?: string;\n /** Accessible label when no visible label is provided */\n \"aria-label\"?: string;\n /** ID of element that labels this checkbox */\n \"aria-labelledby\"?: string;\n};\n\n/**\n * Checkbox group component props (with built-in Fieldset and CheckboxGroup)\n *\n * Usage:\n * ```tsx\n * <Checkbox.Group\n * legend=\"Choose preferences\"\n * defaultValue={['email']}\n * error=\"You must select at least one option\"\n * >\n * <Checkbox.Item label=\"Email notifications\" value=\"email\" />\n * <Checkbox.Item label=\"SMS notifications\" value=\"sms\" />\n * </Checkbox.Group>\n * ```\n */\n/**\n * Props for Checkbox.Legend — a composable sub-component for labeling a Checkbox.Group.\n *\n * Place as a direct child of `<Checkbox.Group>` to provide a styled, accessible legend.\n * Accepts `className` for full styling control (e.g. `className=\"sr-only\"` to visually hide).\n *\n * @example\n * ```tsx\n * <Checkbox.Group>\n * <Checkbox.Legend className=\"sr-only\">Preferences</Checkbox.Legend>\n * <Checkbox.Item label=\"Email\" value=\"email\" />\n * </Checkbox.Group>\n * ```\n */\nexport interface CheckboxLegendProps {\n /** Legend content */\n children: ReactNode;\n /** Additional CSS classes (e.g. \"sr-only\" to visually hide the legend) */\n className?: string;\n}\n\nexport interface CheckboxGroupProps {\n /**\n * Legend text for the group.\n * For more control over legend styling, omit this prop and use `<Checkbox.Legend>` as a child instead.\n */\n legend?: string;\n /** Child Checkbox.Item components (and optionally a Checkbox.Legend) */\n children: ReactNode;\n /** Error message for the group (only appears in groups, not single checkboxes) */\n error?: string;\n /** Helper text for the group */\n description?: ReactNode;\n /** Values of checkboxes that should be initially checked (uncontrolled) */\n defaultValue?: string[];\n /** Values of checkboxes that should be checked (controlled) */\n value?: string[];\n /** Event handler called when checkbox values change */\n onValueChange?: (value: string[]) => void;\n /** All possible checkbox values (required for parent checkbox pattern) */\n allValues?: string[];\n /** Whether all checkboxes in the group are disabled */\n disabled?: boolean;\n /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n controlFirst?: boolean;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Individual checkbox item within a group\n */\nexport type CheckboxItemProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures */\n variant?: CheckboxVariant;\n /** Label text displayed next to checkbox */\n label: string;\n /** Value of the checkbox (required when used in Checkbox.Group) */\n value?: string;\n /** Additional CSS classes for the label wrapper */\n className?: string;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: BaseCheckbox.Root.Props[\"onCheckedChange\"];\n name?: string;\n};\n\n// Single checkbox with built-in Field\nconst CheckboxBase = forwardRef<HTMLButtonElement, CheckboxProps>(\n (\n {\n className,\n checked,\n indeterminate,\n disabled,\n variant = \"default\",\n label,\n labelTooltip,\n controlFirst = true,\n onCheckedChange,\n required,\n name,\n ...props\n },\n ref,\n ) => {\n // A11y enforcement: warn in dev if no accessible name provided\n if (process.env.NODE_ENV !== \"production\") {\n const hasLabel = Boolean(label);\n const hasAriaLabel = Boolean(props[\"aria-label\"]);\n const hasAriaLabelledBy = Boolean(props[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Checkbox]: Checkbox must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Checkbox label='Accept terms' />\\n\" +\n \" - aria-label: <Checkbox aria-label='Select item' />\\n\" +\n \" - aria-labelledby for custom label association\\n\" +\n \" Note: When used inside Checkbox.Group, label is optional\",\n );\n }\n }\n\n const checkboxControl = (\n <BaseCheckbox.Root\n ref={ref}\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={onCheckedChange}\n className={cn(\n \"relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring focus:outline-none after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-hairline\",\n !disabled &&\n \"hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n {...props}\n >\n <BaseCheckbox.Indicator\n keepMounted\n className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n render={(renderProps, state) => (\n <span {...renderProps}>\n {state.indeterminate ? (\n <MinusIcon weight=\"bold\" size={12} />\n ) : (\n <CheckIcon weight=\"bold\" size={12} />\n )}\n </span>\n )}\n />\n </BaseCheckbox.Root>\n );\n\n // If no label provided, return bare checkbox (for use in other components like Dropdown)\n if (!label) {\n return checkboxControl;\n }\n\n // Use Field.Root + Field.Label enclosing pattern for proper a11y association\n // See: https://base-ui.com/react/components/field\n return (\n <FieldBase.Root className=\"inline-flex\">\n <FieldBase.Label\n className={cn(\n \"!m-0 !min-h-0 !text-base inline-flex items-center gap-2\",\n controlFirst ? \"flex-row\" : \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n )}\n >\n {checkboxControl}\n <Label\n showOptional={required === false}\n tooltip={labelTooltip}\n asContent\n >\n {label}\n </Label>\n </FieldBase.Label>\n </FieldBase.Root>\n );\n },\n);\n\nCheckboxBase.displayName = \"Checkbox\";\n\n// Checkbox.Item for use within Checkbox.Group\nconst CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(\n (\n {\n className,\n checked,\n indeterminate,\n disabled,\n variant = \"default\",\n label,\n value,\n onCheckedChange,\n name,\n },\n ref,\n ) => {\n const { controlFirst } = useContext(CheckboxGroupContext);\n\n return (\n <label\n className={cn(\n \"m-0 relative inline-flex items-center gap-2\",\n // Control first (default): checkbox before label\n // Label first: label before checkbox using flex-row-reverse\n !controlFirst && \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n className,\n )}\n >\n <BaseCheckbox.Root\n ref={ref}\n value={value}\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={onCheckedChange}\n className={cn(\n \"peer relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-hairline\",\n !disabled &&\n \"group-hover:ring-kumo-hairline hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n )}\n >\n <BaseCheckbox.Indicator\n keepMounted\n className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n render={(renderProps, state) => (\n <span {...renderProps}>\n {state.indeterminate ? (\n <MinusIcon weight=\"bold\" size={12} />\n ) : (\n <CheckIcon weight=\"bold\" size={12} />\n )}\n </span>\n )}\n />\n </BaseCheckbox.Root>\n <span className=\"text-base text-kumo-default\">{label}</span>\n </label>\n );\n },\n);\n\nCheckboxItem.displayName = \"Checkbox.Item\";\n\n// Checkbox.Legend — composable legend sub-component for Checkbox.Group\nfunction CheckboxLegend({ children, className }: CheckboxLegendProps) {\n return (\n <Fieldset.Legend\n className={cn(\"text-base font-medium text-kumo-default\", className)}\n >\n {children}\n </Fieldset.Legend>\n );\n}\n\nCheckboxLegend.displayName = \"Checkbox.Legend\";\n\n// Checkbox.Group with built-in Fieldset and CheckboxGroup\nfunction CheckboxGroup({\n legend,\n children,\n error,\n description,\n defaultValue,\n value,\n onValueChange,\n allValues,\n disabled,\n controlFirst = true,\n className,\n}: CheckboxGroupProps) {\n return (\n <CheckboxGroupContext.Provider value={{ controlFirst }}>\n <BaseCheckboxGroup\n defaultValue={defaultValue}\n value={value}\n onValueChange={onValueChange}\n allValues={allValues}\n disabled={disabled}\n >\n <Fieldset.Root className={cn(\"flex flex-col gap-4\", className)}>\n {legend && (\n <Fieldset.Legend className=\"text-base font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n )}\n <div className=\"flex flex-col gap-2\">{children}</div>\n {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n {description && (\n <p className=\"text-sm text-kumo-subtle\">{description}</p>\n )}\n </Fieldset.Root>\n </BaseCheckboxGroup>\n </CheckboxGroupContext.Provider>\n );\n}\n\n// Compound component\nexport const Checkbox = Object.assign(CheckboxBase, {\n Item: CheckboxItem,\n Group: CheckboxGroup,\n Legend: CheckboxLegend,\n});\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["KUMO_CHECKBOX_VARIANTS","KUMO_CHECKBOX_DEFAULT_VARIANTS","CheckboxGroupContext","createContext","CheckboxBase","forwardRef","className","checked","indeterminate","disabled","variant","label","labelTooltip","controlFirst","onCheckedChange","required","name","props","ref","hasLabel","hasAriaLabel","hasAriaLabelledBy","checkboxControl","jsx","BaseCheckbox.Root","cn","BaseCheckbox.Indicator","renderProps","state","MinusIcon","CheckIcon","FieldBase.Root","jsxs","FieldBase.Label","Label","CheckboxItem","value","useContext","CheckboxLegend","children","Fieldset.Legend","CheckboxGroup","legend","error","description","defaultValue","onValueChange","allValues","BaseCheckboxGroup","Fieldset.Root","Checkbox"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"clipboard-text-hswydzx3iql369sd.js","sources":["../../src/components/clipboard-text/clipboard-text.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Toast } from \"@base-ui/react/toast\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { Button } from \"../button\";\nimport { inputVariants } from \"../input\";\nimport { cn } from \"../../utils/cn\";\n\n// Create a toast manager for anchored \"Copied\" toasts\nconst clipboardToastManager = Toast.createToastManager();\n\n/** ClipboardText size variant definitions mapping sizes to their Tailwind classes. */\nexport const KUMO_CLIPBOARD_TEXT_VARIANTS = {\n size: {\n sm: {\n classes: \"text-xs\",\n buttonSize: \"sm\" as const,\n description: \"Small clipboard text for compact UIs\",\n },\n base: {\n classes: \"text-sm\",\n buttonSize: \"base\" as const,\n description: \"Default clipboard text size\",\n },\n lg: {\n classes: \"text-sm\",\n buttonSize: \"lg\" as const,\n description: \"Large clipboard text for prominent display\",\n },\n },\n} as const;\n\nexport const KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS = {\n size: \"lg\",\n} as const;\n\nconst clipboardTextAnimations = {\n slide: {\n initial:\n \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 translate-y-full\",\n animate: \"translate-y-0 opacity-100\",\n end: \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full\",\n },\n} as const;\n\n// Derived types from KUMO_CLIPBOARD_TEXT_VARIANTS\nexport type KumoClipboardTextSize =\n keyof typeof KUMO_CLIPBOARD_TEXT_VARIANTS.size;\n\nexport interface KumoClipboardTextVariantsProps {\n /**\n * Size of the clipboard text field.\n * - `\"sm\"` — Small clipboard text for compact UIs\n * - `\"base\"` — Default clipboard text size\n * - `\"lg\"` — Large clipboard text for prominent display\n * @default \"lg\"\n */\n size?: KumoClipboardTextSize;\n}\n\nexport function clipboardTextVariants({\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n}: KumoClipboardTextVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex items-center overflow-hidden bg-kumo-base px-0 font-mono\",\n // Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS\n KUMO_CLIPBOARD_TEXT_VARIANTS.size[size].classes,\n );\n}\n\n// Legacy type alias for backwards compatibility\nexport type ClipboardTextSize = KumoClipboardTextSize;\n\n/**\n * ClipboardText component props.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"sk_live_abc123\" />\n * <ClipboardText text=\"npm install @cloudflare/kumo\" size=\"sm\" />\n * ```\n */\nexport interface ClipboardTextProps extends KumoClipboardTextVariantsProps {\n /** The text to display and copy to clipboard. */\n text: string;\n /** If provided, this text will be copied to clipboard instead of the `text` prop. */\n textToCopy?: string;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Callback fired after text is copied to clipboard. */\n onCopy?: () => void;\n /**\n * Tooltip config. Shows tooltip on hover, anchored toast on click.\n * @example\n * ```tsx\n * <ClipboardText\n * text=\"abc123\"\n * tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n * />\n * ```\n */\n tooltip?: {\n /** Text shown in tooltip on hover. @default \"Copy\" */\n text?: string;\n /** Text shown in toast after copying. @default \"Copied\" */\n copiedText?: string;\n /** Tooltip/toast placement. @default \"top\" */\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n };\n /** Accessible labels for i18n. */\n labels?: {\n /** @default \"Copy to clipboard\" */\n copyAction?: string;\n };\n}\n\n/**\n * Anchored toasts viewport - renders \"Copied\" toasts anchored to buttons\n */\nfunction AnchoredToasts() {\n const { toasts } = Toast.useToastManager();\n return (\n <Toast.Viewport className=\"pointer-events-none fixed inset-0 isolate\">\n {toasts.map((toast) => (\n <Toast.Positioner key={toast.id} toast={toast} className=\"absolute\">\n <Toast.Root\n toast={toast}\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n <Toast.Description />\n </Toast.Root>\n </Toast.Positioner>\n ))}\n </Toast.Viewport>\n );\n}\n\n/**\n * Internal wrapper that provides Toast context when tooltip is enabled.\n */\nfunction TooltipWrapper({ children }: { children: React.ReactNode }) {\n return (\n <Tooltip.Provider>\n <Toast.Provider toastManager={clipboardToastManager}>\n <AnchoredToasts />\n {children}\n </Toast.Provider>\n </Tooltip.Provider>\n );\n}\n\n/**\n * Read-only text field with a one-click copy-to-clipboard button.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"0c239dd2\" />\n * ```\n */\nexport const ClipboardText = forwardRef<HTMLDivElement, ClipboardTextProps>(\n (\n {\n text,\n textToCopy,\n className,\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n onCopy,\n tooltip,\n labels: { copyAction = \"Copy to clipboard\" } = {},\n },\n ref,\n ) => {\n const [copied, setCopied] = useState(false);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const sizeConfig = KUMO_CLIPBOARD_TEXT_VARIANTS.size[size];\n\n // Destructure tooltip config with defaults\n const {\n text: tooltipText = \"Copy\",\n copiedText = \"Copied\",\n side: tooltipSide = \"top\",\n } = tooltip ?? {};\n\n const copyToClipboard = useCallback(async () => {\n try {\n if (\n typeof navigator !== \"undefined\" &&\n navigator.clipboard &&\n typeof navigator.clipboard.writeText === \"function\"\n ) {\n await navigator.clipboard.writeText(textToCopy ?? text);\n } else if (typeof document !== \"undefined\") {\n // Fallback for older browsers\n const textarea = document.createElement(\"textarea\");\n textarea.value = textToCopy ?? text;\n textarea.setAttribute(\"readonly\", \"\");\n textarea.style.position = \"absolute\";\n textarea.style.left = \"-9999px\";\n document.body.appendChild(textarea);\n const selection = document.getSelection();\n const previousRange = selection?.rangeCount\n ? selection.getRangeAt(0)\n : null;\n textarea.select();\n try {\n document.execCommand(\"copy\");\n } finally {\n document.body.removeChild(textarea);\n if (previousRange) {\n selection?.removeAllRanges();\n selection?.addRange(previousRange);\n }\n }\n }\n\n setCopied(true);\n\n // Show anchored toast if tooltip mode is enabled\n if (tooltip) {\n clipboardToastManager.add({\n description: copiedText,\n positionerProps: {\n anchor: buttonRef.current,\n side: tooltipSide,\n sideOffset: 8,\n },\n timeout: 1500,\n onClose() {\n setCopied(false);\n },\n });\n } else {\n // Reset copied state after delay when no tooltip\n setTimeout(() => setCopied(false), 1500);\n }\n\n onCopy?.();\n } catch (error) {\n console.warn(\"Clipboard copy failed\", error);\n }\n }, [text, onCopy, tooltip, copiedText, tooltipSide]);\n\n const copyButton = (\n <Button\n ref={buttonRef}\n size={sizeConfig.buttonSize}\n variant=\"ghost\"\n className={cn(\n \"rounded-l-none rounded-r-[inherit] border-l! border-kumo-line! px-3 relative isolate overflow-hidden transition-all duration-200\",\n \"focus:ring-inset focus:ring-kumo-focus/50\",\n \"focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand\",\n )}\n onClick={copyToClipboard}\n aria-label={copyAction}\n >\n <span\n className={cn(\n \"flex items-center gap-1 transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.animate\n : clipboardTextAnimations.slide.initial,\n )}\n >\n <CheckIcon />\n </span>\n <span\n className={cn(\n \"flex items-center justify-center transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.end\n : clipboardTextAnimations.slide.animate,\n )}\n >\n <CopyIcon />\n </span>\n </Button>\n );\n\n return (\n <div\n ref={ref}\n className={cn(\n inputVariants({ size: sizeConfig.buttonSize }),\n clipboardTextVariants({ size }),\n className,\n )}\n >\n <span className=\"grow truncate ps-4 pe-2\">{text}</span>\n {tooltip ? (\n <TooltipWrapper>\n <Tooltip.Root\n disabled={copied}\n onOpenChange={(open, eventDetails) => {\n // Prevent tooltip from closing when button is clicked\n if (eventDetails.reason === \"trigger-press\") {\n eventDetails.cancel();\n }\n }}\n >\n <Tooltip.Trigger render={copyButton} />\n <Tooltip.Portal>\n <Tooltip.Positioner side={tooltipSide} sideOffset={8}>\n <Tooltip.Popup\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n {tooltipText}\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Portal>\n </Tooltip.Root>\n </TooltipWrapper>\n ) : (\n copyButton\n )}\n <span className=\"sr-only\" aria-live=\"polite\">\n {copied ? copiedText : \"\"}\n </span>\n </div>\n );\n },\n);\n\nClipboardText.displayName = \"ClipboardText\";\n"],"names":["clipboardToastManager","Toast.createToastManager","KUMO_CLIPBOARD_TEXT_VARIANTS","KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS","clipboardTextAnimations","clipboardTextVariants","size","cn","AnchoredToasts","toasts","Toast.useToastManager","Toast.Viewport","toast","Toast.Positioner","jsx","Toast.Root","Toast.Description","TooltipWrapper","children","Tooltip.Provider","Toast.Provider","ClipboardText","forwardRef","text","textToCopy","className","onCopy","tooltip","copyAction","ref","copied","setCopied","useState","buttonRef","useRef","sizeConfig","tooltipText","copiedText","tooltipSide","copyToClipboard","useCallback","textarea","selection","previousRange","error","copyButton","jsxs","Button","CheckIcon","CopyIcon","inputVariants","Tooltip.Root","open","eventDetails","Tooltip.Trigger","Tooltip.Portal","Tooltip.Positioner","Tooltip.Popup"],"mappings":"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"}