@cloudflare/kumo 1.8.0 → 1.9.0

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 (162) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/ai/component-registry.json +117 -42
  3. package/ai/component-registry.md +124 -17
  4. package/ai/schemas.ts +7 -6
  5. package/dist/.build-complete +1 -1
  6. package/dist/ai/schemas.d.ts +43 -41
  7. package/dist/ai/schemas.d.ts.map +1 -1
  8. package/dist/catalog.js +1 -1
  9. package/dist/{checkbox-BUV90tNU.js → checkbox-CfFoTNFI.js} +8 -8
  10. package/dist/{checkbox-BUV90tNU.js.map → checkbox-CfFoTNFI.js.map} +1 -1
  11. package/dist/{clipboard-text-BVKGunue.js → clipboard-text-1d0rHIhb.js} +24 -24
  12. package/dist/{clipboard-text-BVKGunue.js.map → clipboard-text-1d0rHIhb.js.map} +1 -1
  13. package/dist/{combobox-DyTgHki4.js → combobox-vnvi22pn.js} +4 -4
  14. package/dist/{combobox-DyTgHki4.js.map → combobox-vnvi22pn.js.map} +1 -1
  15. package/dist/{command-palette-B2hkPSQm.js → command-palette-B80cqB7K.js} +2 -2
  16. package/dist/{command-palette-B2hkPSQm.js.map → command-palette-B80cqB7K.js.map} +1 -1
  17. package/dist/components/checkbox.js +1 -1
  18. package/dist/components/clipboard-text.js +1 -1
  19. package/dist/components/combobox.js +1 -1
  20. package/dist/components/command-palette.js +1 -1
  21. package/dist/components/dialog.js +1 -1
  22. package/dist/components/dropdown.js +1 -1
  23. package/dist/components/field.js +1 -1
  24. package/dist/components/flow.js +1472 -1412
  25. package/dist/components/flow.js.map +1 -1
  26. package/dist/components/input.js +3 -3
  27. package/dist/components/label.js +1 -1
  28. package/dist/components/link.js +1 -1
  29. package/dist/components/menubar.js +1 -1
  30. package/dist/components/meter.js +1 -1
  31. package/dist/components/pagination.js +1 -1
  32. package/dist/components/popover.js +1 -1
  33. package/dist/components/radio.js +1 -1
  34. package/dist/components/select.js +1 -1
  35. package/dist/components/sensitive-input.js +1 -1
  36. package/dist/components/switch.js +1 -1
  37. package/dist/components/table.js +1 -1
  38. package/dist/components/tabs.js +1 -1
  39. package/dist/components/toast.js +2 -2
  40. package/dist/components/tooltip.js +1 -1
  41. package/dist/{dialog-B2EHaSoL.js → dialog-C4BIM-74.js} +6 -6
  42. package/dist/{dialog-B2EHaSoL.js.map → dialog-C4BIM-74.js.map} +1 -1
  43. package/dist/dropdown-CfS4QcSR.js +295 -0
  44. package/dist/dropdown-CfS4QcSR.js.map +1 -0
  45. package/dist/{field-Bkh5pJay.js → field-B8xISAuX.js} +5 -5
  46. package/dist/{field-Bkh5pJay.js.map → field-B8xISAuX.js.map} +1 -1
  47. package/dist/index.js +27 -27
  48. package/dist/{input-DjItb3_k.js → input-DCzpefuq.js} +3 -3
  49. package/dist/{input-DjItb3_k.js.map → input-DCzpefuq.js.map} +1 -1
  50. package/dist/{input-area-BcidmGaO.js → input-area-DCaAN9nG.js} +3 -3
  51. package/dist/{input-area-BcidmGaO.js.map → input-area-DCaAN9nG.js.map} +1 -1
  52. package/dist/{input-group-CMAvOKIV.js → input-group-BbaVpJnA.js} +2 -2
  53. package/dist/{input-group-CMAvOKIV.js.map → input-group-BbaVpJnA.js.map} +1 -1
  54. package/dist/{label-Cjpb7l1F.js → label-Cd6nCDWj.js} +2 -2
  55. package/dist/{label-Cjpb7l1F.js.map → label-Cd6nCDWj.js.map} +1 -1
  56. package/dist/{link-DUqZGMVk.js → link-DJq9RWpK.js} +11 -11
  57. package/dist/{link-DUqZGMVk.js.map → link-DJq9RWpK.js.map} +1 -1
  58. package/dist/{menubar-bgBP3EJi.js → menubar-Chchzst0.js} +2 -2
  59. package/dist/{menubar-bgBP3EJi.js.map → menubar-Chchzst0.js.map} +1 -1
  60. package/dist/{meter-BziPAH9D.js → meter-Wk7_EhaO.js} +4 -4
  61. package/dist/{meter-BziPAH9D.js.map → meter-Wk7_EhaO.js.map} +1 -1
  62. package/dist/pagination-DFHoZwPJ.js +208 -0
  63. package/dist/pagination-DFHoZwPJ.js.map +1 -0
  64. package/dist/{popover-C2w2uRlu.js → popover-D20xpmdk.js} +22 -20
  65. package/dist/{popover-C2w2uRlu.js.map → popover-D20xpmdk.js.map} +1 -1
  66. package/dist/primitives/accordion.js +1 -1
  67. package/dist/primitives/alert-dialog.js +1 -1
  68. package/dist/primitives/autocomplete.js +1 -1
  69. package/dist/primitives/avatar.js +1 -1
  70. package/dist/primitives/button.js +1 -1
  71. package/dist/primitives/checkbox-group.js +1 -1
  72. package/dist/primitives/checkbox.js +1 -1
  73. package/dist/primitives/collapsible.js +1 -1
  74. package/dist/primitives/combobox.js +1 -1
  75. package/dist/primitives/context-menu.js +1 -1
  76. package/dist/primitives/csp-provider.js +6 -0
  77. package/dist/primitives/csp-provider.js.map +1 -0
  78. package/dist/primitives/dialog.js +1 -1
  79. package/dist/primitives/direction-provider.js +1 -1
  80. package/dist/primitives/drawer.js +6 -0
  81. package/dist/primitives/drawer.js.map +1 -0
  82. package/dist/primitives/field.js +1 -1
  83. package/dist/primitives/fieldset.js +2 -2
  84. package/dist/primitives/form.js +1 -1
  85. package/dist/primitives/input.js +1 -1
  86. package/dist/primitives/menu.js +1 -1
  87. package/dist/primitives/menubar.js +1 -1
  88. package/dist/primitives/meter.js +1 -1
  89. package/dist/primitives/navigation-menu.js +2 -2
  90. package/dist/primitives/number-field.js +1 -1
  91. package/dist/primitives/popover.js +1 -1
  92. package/dist/primitives/preview-card.js +2 -2
  93. package/dist/primitives/progress.js +2 -2
  94. package/dist/primitives/radio-group.js +1 -1
  95. package/dist/primitives/radio.js +2 -2
  96. package/dist/primitives/scroll-area.js +1 -1
  97. package/dist/primitives/select.js +1 -1
  98. package/dist/primitives/separator.js +1 -1
  99. package/dist/primitives/slider.js +1 -1
  100. package/dist/primitives/switch.js +1 -1
  101. package/dist/primitives/tabs.js +1 -1
  102. package/dist/primitives/toast.js +1 -1
  103. package/dist/primitives/toggle-group.js +1 -1
  104. package/dist/primitives/toggle.js +1 -1
  105. package/dist/primitives/toolbar.js +1 -1
  106. package/dist/primitives/tooltip.js +1 -1
  107. package/dist/primitives.js +31 -29
  108. package/dist/{radio-B8Jk1PFe.js → radio-ibVa4Y8a.js} +18 -18
  109. package/dist/{radio-B8Jk1PFe.js.map → radio-ibVa4Y8a.js.map} +1 -1
  110. package/dist/{schemas-DKFFjjzb.js → schemas-CdpAeJKO.js} +183 -183
  111. package/dist/{schemas-DKFFjjzb.js.map → schemas-CdpAeJKO.js.map} +1 -1
  112. package/dist/{select-BWTULnCR.js → select-DtcT1zGm.js} +21 -21
  113. package/dist/{select-BWTULnCR.js.map → select-DtcT1zGm.js.map} +1 -1
  114. package/dist/{sensitive-input-CgjTfZLO.js → sensitive-input-DHDRZRC7.js} +4 -4
  115. package/dist/{sensitive-input-CgjTfZLO.js.map → sensitive-input-DHDRZRC7.js.map} +1 -1
  116. package/dist/src/components/dropdown/dropdown.d.ts +26 -16
  117. package/dist/src/components/dropdown/dropdown.d.ts.map +1 -1
  118. package/dist/src/components/flow/connectors.d.ts +3 -1
  119. package/dist/src/components/flow/connectors.d.ts.map +1 -1
  120. package/dist/src/components/flow/diagram.d.ts +1 -0
  121. package/dist/src/components/flow/diagram.d.ts.map +1 -1
  122. package/dist/src/components/flow/node.d.ts +5 -1
  123. package/dist/src/components/flow/node.d.ts.map +1 -1
  124. package/dist/src/components/flow/parallel.d.ts +10 -2
  125. package/dist/src/components/flow/parallel.d.ts.map +1 -1
  126. package/dist/src/components/pagination/pagination.d.ts +134 -13
  127. package/dist/src/components/pagination/pagination.d.ts.map +1 -1
  128. package/dist/src/components/popover/popover.d.ts +7 -1
  129. package/dist/src/components/popover/popover.d.ts.map +1 -1
  130. package/dist/src/components/toast/toast.d.ts +4 -4
  131. package/dist/src/components/toast/toast.d.ts.map +1 -1
  132. package/dist/src/components/tooltip/tooltip.d.ts +1 -1
  133. package/dist/src/components/tooltip/tooltip.d.ts.map +1 -1
  134. package/dist/src/primitives/csp-provider.d.ts +13 -0
  135. package/dist/src/primitives/csp-provider.d.ts.map +1 -0
  136. package/dist/src/primitives/drawer.d.ts +13 -0
  137. package/dist/src/primitives/drawer.d.ts.map +1 -0
  138. package/dist/src/primitives/index.d.ts +2 -0
  139. package/dist/src/primitives/index.d.ts.map +1 -1
  140. package/dist/styles/kumo-standalone.css +1 -1
  141. package/dist/{switch-DdjM7eh6.js → switch-DrbaX2iC.js} +15 -15
  142. package/dist/{switch-DdjM7eh6.js.map → switch-DrbaX2iC.js.map} +1 -1
  143. package/dist/{table-D1EXUDHL.js → table-CH9KC36S.js} +2 -2
  144. package/dist/{table-D1EXUDHL.js.map → table-CH9KC36S.js.map} +1 -1
  145. package/dist/{tabs-Bs43O3E4.js → tabs-B-Fxc6Zo.js} +2 -2
  146. package/dist/{tabs-Bs43O3E4.js.map → tabs-B-Fxc6Zo.js.map} +1 -1
  147. package/dist/{toast-BqZw7a2p.js → toast-DUYp3EtH.js} +6 -6
  148. package/dist/{toast-BqZw7a2p.js.map → toast-DUYp3EtH.js.map} +1 -1
  149. package/dist/{tooltip-BwOFPK5h.js → tooltip-D-KwZQDV.js} +2 -2
  150. package/dist/{tooltip-BwOFPK5h.js.map → tooltip-D-KwZQDV.js.map} +1 -1
  151. package/dist/vendor-base-ui-Bsg5ebHI.js +22806 -0
  152. package/dist/vendor-base-ui-Bsg5ebHI.js.map +1 -0
  153. package/dist/{vendor-utils-DD8jNJwD.js → vendor-utils-DKXfkDYu.js} +100 -101
  154. package/dist/vendor-utils-DKXfkDYu.js.map +1 -0
  155. package/package.json +10 -2
  156. package/dist/dropdown-mGDt95gv.js +0 -263
  157. package/dist/dropdown-mGDt95gv.js.map +0 -1
  158. package/dist/pagination-dNzgZRjV.js +0 -100
  159. package/dist/pagination-dNzgZRjV.js.map +0 -1
  160. package/dist/vendor-base-ui-B61LL9jT.js +0 -20448
  161. package/dist/vendor-base-ui-B61LL9jT.js.map +0 -1
  162. package/dist/vendor-utils-DD8jNJwD.js.map +0 -1
@@ -1,13 +1,13 @@
1
1
  "use client";
2
2
  import { jsxs as n, jsx as e, Fragment as N } from "react/jsx-runtime";
3
- import { CaretUpDownIcon as F, CheckIcon as P } from "@phosphor-icons/react";
4
- import { useId as A } from "react";
3
+ import { CaretUpDownIcon as F, CheckIcon as A } from "@phosphor-icons/react";
4
+ import { useId as C } from "react";
5
5
  import { c as g } from "./cn-Bhsu1vx2.js";
6
- import { b as C } from "./button-Bh96oxRL.js";
7
- import { S as O } from "./skeleton-line-CtpS1u1J.js";
8
- import { F as T } from "./field-Bkh5pJay.js";
9
- import { aP as V, aQ as R, aR as U, aS as W, aT as B, aU as D, aV as Q, aW as X, aX as Y, aY as q } from "./vendor-base-ui-B61LL9jT.js";
10
- function z({
6
+ import { b as O } from "./button-Bh96oxRL.js";
7
+ import { S as P } from "./skeleton-line-CtpS1u1J.js";
8
+ import { F as T } from "./field-B8xISAuX.js";
9
+ import { aS as V, aT as U, aU as W, aV as B, aW as D, aX as R, aY as X, aZ as Y, a_ as Z, a$ as _ } from "./vendor-base-ui-Bsg5ebHI.js";
10
+ function $({
11
11
  children: r,
12
12
  className: s,
13
13
  renderValue: p,
@@ -21,7 +21,7 @@ function z({
21
21
  required: v,
22
22
  ...l
23
23
  }) {
24
- const m = A(), u = l, x = u["aria-label"], k = u["aria-labelledby"], w = typeof a == "string" ? a : i, d = a && !y, f = d ? void 0 : k ?? (a ? m : void 0), I = x ?? (f ? void 0 : w);
24
+ const m = C(), u = l, x = u["aria-label"], k = u["aria-labelledby"], w = typeof a == "string" ? a : i, d = a && !y, f = d ? void 0 : k ?? (a ? m : void 0), I = x ?? (f ? void 0 : w);
25
25
  let t = l.items;
26
26
  i && (t ? typeof t == "object" ? t = [
27
27
  {
@@ -52,10 +52,10 @@ function z({
52
52
  disabled: c || l.disabled,
53
53
  children: [
54
54
  /* @__PURE__ */ n(
55
- R,
55
+ U,
56
56
  {
57
57
  className: g(
58
- C(),
58
+ O(),
59
59
  "justify-between font-normal",
60
60
  "outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100",
61
61
  l.disabled && "cursor-not-allowed opacity-50",
@@ -64,13 +64,13 @@ function z({
64
64
  "aria-label": I,
65
65
  "aria-labelledby": f,
66
66
  children: [
67
- c ? /* @__PURE__ */ e(O, { className: "w-32" }) : /* @__PURE__ */ e(U, { children: p }),
68
- /* @__PURE__ */ e(W, { className: "flex items-center", children: /* @__PURE__ */ e(F, {}) })
67
+ c ? /* @__PURE__ */ e(P, { className: "w-32" }) : /* @__PURE__ */ e(W, { children: p }),
68
+ /* @__PURE__ */ e(B, { className: "flex items-center", children: /* @__PURE__ */ e(F, {}) })
69
69
  ]
70
70
  }
71
71
  ),
72
- /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(
73
- Q,
72
+ /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(R, { children: /* @__PURE__ */ e(
73
+ X,
74
74
  {
75
75
  className: g(
76
76
  "overflow-hidden bg-kumo-control text-kumo-default",
@@ -102,21 +102,21 @@ function z({
102
102
  b
103
103
  ] });
104
104
  }
105
- function E({ children: r, value: s }) {
105
+ function q({ children: r, value: s }) {
106
106
  return /* @__PURE__ */ n(
107
- X,
107
+ Y,
108
108
  {
109
109
  value: s,
110
110
  className: "group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay",
111
111
  children: [
112
- /* @__PURE__ */ e(Y, { children: r }),
113
- /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(P, {}) })
112
+ /* @__PURE__ */ e(Z, { children: r }),
113
+ /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(A, {}) })
114
114
  ]
115
115
  }
116
116
  );
117
117
  }
118
- z.Option = E;
118
+ $.Option = q;
119
119
  export {
120
- z as S
120
+ $ as S
121
121
  };
122
- //# sourceMappingURL=select-BWTULnCR.js.map
122
+ //# sourceMappingURL=select-DtcT1zGm.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"select-BWTULnCR.js","sources":["../src/components/select/select.tsx"],"sourcesContent":["import { Select as SelectBase } from \"@base-ui/react/select\";\nimport { CaretUpDownIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { buttonVariants } from \"../button\";\nimport { SkeletonLine } from \"../loader\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Select variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_SELECT_VARIANTS = {\n // Select currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_SELECT_DEFAULT_VARIANTS = {} as const;\n\n/**\n * Select component styling metadata for Figma plugin code generation\n * Extracted from select.tsx implementation (source of truth)\n */\nexport const KUMO_SELECT_STYLING = {\n trigger: {\n height: 36, // h-9\n paddingX: 12, // px-3\n borderRadius: 8, // rounded-lg\n background: \"color-secondary\",\n text: \"text-color-surface\",\n ring: \"color-border\",\n fontSize: 16, // text-base\n fontWeight: 400, // font-normal\n },\n stateTokens: {\n focus: { ring: \"color-active\" },\n disabled: { opacity: 0.5 },\n },\n icons: {\n caret: { name: \"ph-caret-up-down\", size: 20 },\n check: { name: \"ph-check\", size: 20 },\n },\n popup: {\n background: \"color-secondary\",\n ring: \"color-border\",\n borderRadius: 8, // rounded-lg\n padding: 6, // p-1.5\n },\n option: {\n paddingX: 8, // px-2\n paddingY: 6, // py-1.5\n borderRadius: 4, // rounded\n fontSize: 16, // text-base\n highlightBackground: \"color-surface-secondary\",\n },\n} as const;\n\n// Derived types from KUMO_SELECT_VARIANTS\nexport interface KumoSelectVariantsProps {}\n\nexport function selectVariants(_props: KumoSelectVariantsProps = {}) {\n return cn(\n buttonVariants(),\n \"justify-between font-normal\",\n \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100\",\n );\n}\n\ntype SelectPropsGeneric<\n T,\n Multiple extends boolean | undefined = false,\n> = SelectBase.Root.Props<T, Multiple> &\n KumoSelectVariantsProps & {\n multiple?: Multiple;\n renderValue?: (value: Multiple extends true ? T[] : T) => ReactNode;\n className?: string;\n /** Label content for the select (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Visually hide the label (sr-only). Set to `false` for a visible label. @default true */\n hideLabel?: boolean;\n placeholder?: string;\n loading?: boolean;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the select */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n };\n\n/**\n * Select component props.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" onValueChange={setValue}>\n * <Select.Option value=\"us\">United States</Select.Option>\n * <Select.Option value=\"uk\">United Kingdom</Select.Option>\n * </Select>\n * ```\n */\nexport interface SelectProps {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Label content for the select (enables Field wrapper) — can be a string or any React node. */\n label?: ReactNode;\n /**\n * Visually hide the label while keeping it accessible to screen readers.\n * Set to `false` to show a visible label above the select via the Field wrapper.\n * @default true\n */\n hideLabel?: boolean;\n /** Placeholder text shown when no value is selected. */\n placeholder?: string;\n /** When `true`, shows a skeleton loader in place of the selected value. */\n loading?: boolean;\n /** Whether the select is disabled. */\n disabled?: boolean;\n /** Whether the select is required. When `false`, shows \"(optional)\" text. */\n required?: boolean;\n /** Tooltip content displayed next to the label via an info icon. */\n labelTooltip?: ReactNode;\n /** Currently selected value (controlled mode). */\n value?: unknown;\n /** Initial value for uncontrolled mode. */\n defaultValue?: unknown;\n /** Callback fired when the selected value changes. */\n onValueChange?: (value: unknown) => void;\n /** Enable multi-select mode. */\n multiple?: boolean;\n /** `Select.Option` elements to render in the dropdown. */\n children?: ReactNode;\n /** Helper text displayed below the select. */\n description?: ReactNode;\n /** Error message string or validation error object with `match` key. */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Dropdown for selecting a value from a list of options.\n * Wraps Base UI Select with Kumo styling and optional Field integration.\n *\n * @example\n * ```tsx\n * <Select label=\"Fruit\" onValueChange={setFruit}>\n * <Select.Option value=\"apple\">Apple</Select.Option>\n * <Select.Option value=\"banana\">Banana</Select.Option>\n * </Select>\n * ```\n */\nexport function Select<T, Multiple extends boolean | undefined = false>({\n children,\n className,\n renderValue,\n label,\n hideLabel = true,\n placeholder,\n loading,\n labelTooltip,\n description,\n error,\n required,\n ...props\n}: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {\n const labelId = useId();\n const propLookup = props as Record<string, unknown>;\n const ariaLabel = propLookup[\"aria-label\"] as string | undefined;\n const ariaLabelledby = propLookup[\"aria-labelledby\"] as string | undefined;\n // For aria-label, use string label or placeholder (ReactNode labels can't be used for aria-label)\n const fallbackLabel = typeof label === \"string\" ? label : placeholder;\n\n // Use Field wrapper when label is provided and not hidden\n const useFieldWrapper = label && !hideLabel;\n const triggerLabelledBy = useFieldWrapper\n ? undefined\n : (ariaLabelledby ?? (label ? labelId : undefined));\n const triggerAriaLabel =\n ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : undefined);\n\n // Placeholder must be provide via the items props\n // We need to fake the items or do some transformation\n let items = props.items;\n if (placeholder) {\n if (!items) {\n items = [\n {\n value: null as T,\n label: placeholder,\n },\n ];\n } else if (typeof items === \"object\") {\n items = [\n {\n value: null as T,\n label: placeholder,\n },\n ...Object.entries(items).map(([key, value]) => ({\n value: key as T,\n label: value,\n })),\n ];\n } else if (Array.isArray(items)) {\n items = [\n {\n value: null as T,\n label: placeholder,\n },\n ...items,\n ];\n }\n }\n\n const selectControl = (\n <SelectBase.Root\n {...props}\n items={items}\n disabled={loading || props.disabled}\n >\n <SelectBase.Trigger\n className={cn(\n buttonVariants(),\n \"justify-between font-normal\",\n \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100\",\n props.disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n aria-label={triggerAriaLabel}\n aria-labelledby={triggerLabelledBy}\n >\n {loading ? (\n <SkeletonLine className=\"w-32\" />\n ) : (\n <SelectBase.Value>{renderValue}</SelectBase.Value>\n )}\n <SelectBase.Icon className=\"flex items-center\">\n <CaretUpDownIcon />\n </SelectBase.Icon>\n </SelectBase.Trigger>\n <SelectBase.Portal>\n <SelectBase.Positioner>\n <SelectBase.Popup\n className={cn(\n \"overflow-hidden bg-kumo-control text-kumo-default\", // background\n \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n // 3px adjustment to account for padding + border differences\n \"min-w-[calc(var(--anchor-width)+3px)] p-1.5\", // spacing\n )}\n >\n {children}\n </SelectBase.Popup>\n </SelectBase.Positioner>\n </SelectBase.Portal>\n </SelectBase.Root>\n );\n\n // Use Field wrapper when label is provided and not hidden\n if (useFieldWrapper) {\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 {selectControl}\n </Field>\n );\n }\n\n // Render with standalone label when label is hidden (sr-only)\n return (\n <>\n {label && (\n <span id={labelId} className=\"sr-only\">\n {label}\n </span>\n )}\n {selectControl}\n </>\n );\n}\n\ntype OptionProps<T> = {\n children: ReactNode;\n value: T;\n};\n\nfunction Option<T>({ children, value }: OptionProps<T>) {\n return (\n <SelectBase.Item\n value={value}\n className=\"group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay\"\n >\n <SelectBase.ItemText>{children}</SelectBase.ItemText>\n <SelectBase.ItemIndicator>\n <CheckIcon />\n </SelectBase.ItemIndicator>\n </SelectBase.Item>\n );\n}\n\nSelect.Option = Option;\n"],"names":["Select","children","className","renderValue","label","hideLabel","placeholder","loading","labelTooltip","description","error","required","props","labelId","useId","propLookup","ariaLabel","ariaLabelledby","fallbackLabel","useFieldWrapper","triggerLabelledBy","triggerAriaLabel","items","key","value","selectControl","jsxs","SelectBase.Root","SelectBase.Trigger","cn","buttonVariants","jsx","SkeletonLine","SelectBase.Value","SelectBase.Icon","CaretUpDownIcon","SelectBase.Portal","SelectBase.Positioner","SelectBase.Popup","Field","Fragment","Option","SelectBase.Item","SelectBase.ItemText","SelectBase.ItemIndicator","CheckIcon"],"mappings":"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"}
1
+ {"version":3,"file":"select-DtcT1zGm.js","sources":["../src/components/select/select.tsx"],"sourcesContent":["import { Select as SelectBase } from \"@base-ui/react/select\";\nimport { CaretUpDownIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { buttonVariants } from \"../button\";\nimport { SkeletonLine } from \"../loader\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Select variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_SELECT_VARIANTS = {\n // Select currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_SELECT_DEFAULT_VARIANTS = {} as const;\n\n/**\n * Select component styling metadata for Figma plugin code generation\n * Extracted from select.tsx implementation (source of truth)\n */\nexport const KUMO_SELECT_STYLING = {\n trigger: {\n height: 36, // h-9\n paddingX: 12, // px-3\n borderRadius: 8, // rounded-lg\n background: \"color-secondary\",\n text: \"text-color-surface\",\n ring: \"color-border\",\n fontSize: 16, // text-base\n fontWeight: 400, // font-normal\n },\n stateTokens: {\n focus: { ring: \"color-active\" },\n disabled: { opacity: 0.5 },\n },\n icons: {\n caret: { name: \"ph-caret-up-down\", size: 20 },\n check: { name: \"ph-check\", size: 20 },\n },\n popup: {\n background: \"color-secondary\",\n ring: \"color-border\",\n borderRadius: 8, // rounded-lg\n padding: 6, // p-1.5\n },\n option: {\n paddingX: 8, // px-2\n paddingY: 6, // py-1.5\n borderRadius: 4, // rounded\n fontSize: 16, // text-base\n highlightBackground: \"color-surface-secondary\",\n },\n} as const;\n\n// Derived types from KUMO_SELECT_VARIANTS\nexport interface KumoSelectVariantsProps {}\n\nexport function selectVariants(_props: KumoSelectVariantsProps = {}) {\n return cn(\n buttonVariants(),\n \"justify-between font-normal\",\n \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100\",\n );\n}\n\ntype SelectPropsGeneric<\n T,\n Multiple extends boolean | undefined = false,\n> = SelectBase.Root.Props<T, Multiple> &\n KumoSelectVariantsProps & {\n multiple?: Multiple;\n renderValue?: (value: Multiple extends true ? T[] : T) => ReactNode;\n className?: string;\n /** Label content for the select (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Visually hide the label (sr-only). Set to `false` for a visible label. @default true */\n hideLabel?: boolean;\n placeholder?: string;\n loading?: boolean;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the select */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n };\n\n/**\n * Select component props.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" onValueChange={setValue}>\n * <Select.Option value=\"us\">United States</Select.Option>\n * <Select.Option value=\"uk\">United Kingdom</Select.Option>\n * </Select>\n * ```\n */\nexport interface SelectProps {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Label content for the select (enables Field wrapper) — can be a string or any React node. */\n label?: ReactNode;\n /**\n * Visually hide the label while keeping it accessible to screen readers.\n * Set to `false` to show a visible label above the select via the Field wrapper.\n * @default true\n */\n hideLabel?: boolean;\n /** Placeholder text shown when no value is selected. */\n placeholder?: string;\n /** When `true`, shows a skeleton loader in place of the selected value. */\n loading?: boolean;\n /** Whether the select is disabled. */\n disabled?: boolean;\n /** Whether the select is required. When `false`, shows \"(optional)\" text. */\n required?: boolean;\n /** Tooltip content displayed next to the label via an info icon. */\n labelTooltip?: ReactNode;\n /** Currently selected value (controlled mode). */\n value?: unknown;\n /** Initial value for uncontrolled mode. */\n defaultValue?: unknown;\n /** Callback fired when the selected value changes. */\n onValueChange?: (value: unknown) => void;\n /** Enable multi-select mode. */\n multiple?: boolean;\n /** `Select.Option` elements to render in the dropdown. */\n children?: ReactNode;\n /** Helper text displayed below the select. */\n description?: ReactNode;\n /** Error message string or validation error object with `match` key. */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Dropdown for selecting a value from a list of options.\n * Wraps Base UI Select with Kumo styling and optional Field integration.\n *\n * @example\n * ```tsx\n * <Select label=\"Fruit\" onValueChange={setFruit}>\n * <Select.Option value=\"apple\">Apple</Select.Option>\n * <Select.Option value=\"banana\">Banana</Select.Option>\n * </Select>\n * ```\n */\nexport function Select<T, Multiple extends boolean | undefined = false>({\n children,\n className,\n renderValue,\n label,\n hideLabel = true,\n placeholder,\n loading,\n labelTooltip,\n description,\n error,\n required,\n ...props\n}: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {\n const labelId = useId();\n const propLookup = props as Record<string, unknown>;\n const ariaLabel = propLookup[\"aria-label\"] as string | undefined;\n const ariaLabelledby = propLookup[\"aria-labelledby\"] as string | undefined;\n // For aria-label, use string label or placeholder (ReactNode labels can't be used for aria-label)\n const fallbackLabel = typeof label === \"string\" ? label : placeholder;\n\n // Use Field wrapper when label is provided and not hidden\n const useFieldWrapper = label && !hideLabel;\n const triggerLabelledBy = useFieldWrapper\n ? undefined\n : (ariaLabelledby ?? (label ? labelId : undefined));\n const triggerAriaLabel =\n ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : undefined);\n\n // Placeholder must be provide via the items props\n // We need to fake the items or do some transformation\n let items = props.items;\n if (placeholder) {\n if (!items) {\n items = [\n {\n value: null as T,\n label: placeholder,\n },\n ];\n } else if (typeof items === \"object\") {\n items = [\n {\n value: null as T,\n label: placeholder,\n },\n ...Object.entries(items).map(([key, value]) => ({\n value: key as T,\n label: value,\n })),\n ];\n } else if (Array.isArray(items)) {\n items = [\n {\n value: null as T,\n label: placeholder,\n },\n ...items,\n ];\n }\n }\n\n const selectControl = (\n <SelectBase.Root\n {...props}\n items={items}\n disabled={loading || props.disabled}\n >\n <SelectBase.Trigger\n className={cn(\n buttonVariants(),\n \"justify-between font-normal\",\n \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100\",\n props.disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n aria-label={triggerAriaLabel}\n aria-labelledby={triggerLabelledBy}\n >\n {loading ? (\n <SkeletonLine className=\"w-32\" />\n ) : (\n <SelectBase.Value>{renderValue}</SelectBase.Value>\n )}\n <SelectBase.Icon className=\"flex items-center\">\n <CaretUpDownIcon />\n </SelectBase.Icon>\n </SelectBase.Trigger>\n <SelectBase.Portal>\n <SelectBase.Positioner>\n <SelectBase.Popup\n className={cn(\n \"overflow-hidden bg-kumo-control text-kumo-default\", // background\n \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n // 3px adjustment to account for padding + border differences\n \"min-w-[calc(var(--anchor-width)+3px)] p-1.5\", // spacing\n )}\n >\n {children}\n </SelectBase.Popup>\n </SelectBase.Positioner>\n </SelectBase.Portal>\n </SelectBase.Root>\n );\n\n // Use Field wrapper when label is provided and not hidden\n if (useFieldWrapper) {\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 {selectControl}\n </Field>\n );\n }\n\n // Render with standalone label when label is hidden (sr-only)\n return (\n <>\n {label && (\n <span id={labelId} className=\"sr-only\">\n {label}\n </span>\n )}\n {selectControl}\n </>\n );\n}\n\ntype OptionProps<T> = {\n children: ReactNode;\n value: T;\n};\n\nfunction Option<T>({ children, value }: OptionProps<T>) {\n return (\n <SelectBase.Item\n value={value}\n className=\"group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay\"\n >\n <SelectBase.ItemText>{children}</SelectBase.ItemText>\n <SelectBase.ItemIndicator>\n <CheckIcon />\n </SelectBase.ItemIndicator>\n </SelectBase.Item>\n );\n}\n\nSelect.Option = Option;\n"],"names":["Select","children","className","renderValue","label","hideLabel","placeholder","loading","labelTooltip","description","error","required","props","labelId","useId","propLookup","ariaLabel","ariaLabelledby","fallbackLabel","useFieldWrapper","triggerLabelledBy","triggerAriaLabel","items","key","value","selectControl","jsxs","SelectBase.Root","SelectBase.Trigger","cn","buttonVariants","jsx","SkeletonLine","SelectBase.Value","SelectBase.Icon","CaretUpDownIcon","SelectBase.Portal","SelectBase.Positioner","SelectBase.Popup","Field","Fragment","Option","SelectBase.Item","SelectBase.ItemText","SelectBase.ItemIndicator","CheckIcon"],"mappings":"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"}
@@ -3,9 +3,9 @@ import { jsxs as b, Fragment as ce, jsx as i } from "react/jsx-runtime";
3
3
  import { EyeSlash as ue, Eye as pe } from "@phosphor-icons/react";
4
4
  import { forwardRef as de, useState as w, useRef as N, useId as T, useCallback as l, useEffect as fe } from "react";
5
5
  import { c as p } from "./cn-Bhsu1vx2.js";
6
- import { K as me, i as ve } from "./input-DjItb3_k.js";
7
- import { F as ge } from "./field-Bkh5pJay.js";
8
- import { I as he } from "./vendor-base-ui-B61LL9jT.js";
6
+ import { K as me, i as ve } from "./input-DCzpefuq.js";
7
+ import { F as ge } from "./field-B8xISAuX.js";
8
+ import { I as he } from "./vendor-base-ui-Bsg5ebHI.js";
9
9
  const Te = me, M = {
10
10
  size: "base",
11
11
  variant: "default"
@@ -255,4 +255,4 @@ export {
255
255
  ye as S,
256
256
  M as a
257
257
  };
258
- //# sourceMappingURL=sensitive-input-CgjTfZLO.js.map
258
+ //# sourceMappingURL=sensitive-input-DHDRZRC7.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"sensitive-input-CgjTfZLO.js","sources":["../src/components/sensitive-input/sensitive-input.tsx"],"sourcesContent":["import { Eye, EyeSlash } from \"@phosphor-icons/react\";\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport {\n inputVariants,\n KUMO_INPUT_VARIANTS,\n type KumoInputSize,\n type KumoInputVariant,\n} from \"../input/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\nexport const KUMO_SENSITIVE_INPUT_VARIANTS = KUMO_INPUT_VARIANTS;\n\nexport const KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\ntype Mode = \"masked\" | \"revealed\" | \"empty\";\n\n/**\n * SensitiveInput component props.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * <SensitiveInput label=\"Secret\" value={secret} onValueChange={setSecret} />\n * ```\n */\nexport interface SensitiveInputProps\n extends Omit<\n ComponentPropsWithoutRef<\"input\">,\n \"size\" | \"type\" | \"value\" | \"defaultValue\"\n > {\n /** Controlled value */\n value?: string;\n /** Uncontrolled default value */\n defaultValue?: string;\n /** Simplified change handler receiving just the value */\n onValueChange?: (value: string) => void;\n /** Callback fired after value is copied to clipboard */\n onCopy?: () => void;\n /**\n * Size of the input.\n * - `\"xs\"` — Extra small for compact UIs\n * - `\"sm\"` — Small for secondary fields\n * - `\"base\"` — Default input size\n * - `\"lg\"` — Large for prominent fields\n * @default \"base\"\n */\n size?: KumoInputSize;\n /**\n * Style variant of the input.\n * - `\"default\"` — Default input appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoInputVariant;\n /** Label content for the input (enables Field wrapper and sets masked state label) - 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 /** Helper text displayed below the input */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Password/secret input that masks its value by default and reveals on click.\n * Includes a built-in copy-to-clipboard button on hover.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * ```\n */\nexport const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(\n (\n {\n value: controlledValue,\n defaultValue = \"\",\n onChange,\n onValueChange,\n onCopy,\n size = KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS.size,\n variant = KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS.variant,\n disabled = false,\n readOnly = false,\n id,\n autoComplete = \"off\",\n className,\n label,\n labelTooltip,\n description,\n error,\n required,\n ...inputProps\n },\n ref,\n ) => {\n // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n const ariaLabelFallback =\n typeof label === \"string\" ? label : \"Sensitive value\";\n const isControlled = controlledValue !== undefined;\n const [internalValue, setInternalValue] = useState(defaultValue);\n const value = isControlled ? controlledValue : internalValue;\n const hasValue = value.length > 0;\n\n const [mode, setMode] = useState<Mode>(() =>\n hasValue ? \"masked\" : \"empty\",\n );\n\n const [copied, setCopied] = useState(false);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const liveRegionId = useId();\n const generatedId = useId();\n const inputId = id ?? generatedId;\n const maskedInstructionId = useId();\n\n const mergedRef = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n },\n [ref],\n );\n\n // Reset copied state after 2 seconds\n useEffect(() => {\n if (copied) {\n const timeoutId = setTimeout(() => setCopied(false), 2000);\n return () => clearTimeout(timeoutId);\n }\n }, [copied]);\n\n const copyToClipboard = useCallback(\n async (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n try {\n if (\n typeof navigator !== \"undefined\" &&\n navigator.clipboard &&\n typeof navigator.clipboard.writeText === \"function\"\n ) {\n await navigator.clipboard.writeText(value);\n setCopied(true);\n onCopy?.();\n return;\n }\n } catch {\n // Fall through to manual fallback\n }\n\n if (typeof document !== \"undefined\") {\n const textarea = document.createElement(\"textarea\");\n textarea.value = value;\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 setCopied(true);\n onCopy?.();\n } catch (error) {\n console.warn(\"Clipboard copy failed\", error);\n } finally {\n document.body.removeChild(textarea);\n if (previousRange) {\n selection?.removeAllRanges();\n selection?.addRange(previousRange);\n }\n }\n }\n },\n [value, onCopy],\n );\n\n // Sync mode when value changes externally\n const prevHasValueRef = useRef(hasValue);\n if (prevHasValueRef.current !== hasValue) {\n prevHasValueRef.current = hasValue;\n if (!hasValue && mode === \"masked\") {\n setMode(\"empty\");\n }\n }\n\n const handleContainerClick = useCallback(\n (e: React.MouseEvent) => {\n if (disabled) return;\n // Ignore clicks that originated from outside (e.g., label click focusing input)\n // Label clicks trigger a click on the input, but the click coordinates are outside the container\n if (containerRef.current) {\n const rect = containerRef.current.getBoundingClientRect();\n const isClickInsideContainer =\n e.clientX >= rect.left &&\n e.clientX <= rect.right &&\n e.clientY >= rect.top &&\n e.clientY <= rect.bottom;\n if (!isClickInsideContainer) return;\n }\n if (mode === \"masked\" && hasValue) {\n setMode(\"revealed\");\n if (!readOnly) {\n setTimeout(() => inputRef.current?.focus(), 0);\n }\n }\n },\n [mode, hasValue, disabled, readOnly],\n );\n\n const handleToggleVisibility = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n if (mode === \"revealed\") {\n setMode(\"masked\");\n } else if (mode === \"empty\" && hasValue) {\n setMode(\"revealed\");\n }\n },\n [mode, hasValue],\n );\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n if (!isControlled) {\n setInternalValue(newValue);\n }\n onChange?.(e);\n onValueChange?.(newValue);\n },\n [isControlled, onChange, onValueChange],\n );\n\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n // Don't mask if focus is moving to a button inside the container (copy/eye buttons)\n if (\n containerRef.current &&\n e.relatedTarget instanceof Node &&\n containerRef.current.contains(e.relatedTarget)\n ) {\n return;\n }\n if (hasValue) {\n setMode(\"masked\");\n }\n },\n [hasValue],\n );\n\n const handleContainerKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return;\n if (mode === \"masked\" && hasValue) {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n setMode(\"revealed\");\n if (!readOnly) {\n setTimeout(() => inputRef.current?.focus(), 0);\n }\n }\n }\n },\n [mode, hasValue, disabled, readOnly],\n );\n\n const handleInputKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (mode === \"revealed\" && e.key === \"Escape\") {\n setMode(\"masked\");\n // Move focus to container to avoid focus trap (input becomes tabIndex={-1})\n setTimeout(() => containerRef.current?.focus(), 0);\n }\n },\n [mode],\n );\n\n const isMaskedWithValue = mode === \"masked\" && hasValue;\n const showEyeButton =\n !disabled && (mode === \"revealed\" || (mode === \"empty\" && hasValue));\n\n // Icon sizes matching input sizes\n const iconSize = size === \"xs\" || size === \"sm\" ? \"size-3\" : \"size-4\";\n\n const containerClassName = cn(\n inputVariants({ size, variant, parentFocusIndicator: true }),\n \"group/container relative flex w-full items-center\",\n isMaskedWithValue && !disabled && \"cursor-pointer\",\n disabled && \"cursor-not-allowed\",\n className,\n );\n\n const containerContent = (\n <>\n {/* Input - defines the width, always rendered */}\n <BaseInput\n ref={mergedRef}\n id={inputId}\n type={mode === \"revealed\" ? \"text\" : \"password\"}\n value={value}\n onChange={handleChange}\n onBlur={handleBlur}\n onKeyDown={handleInputKeyDown}\n disabled={disabled}\n readOnly={readOnly || isMaskedWithValue}\n autoComplete={autoComplete}\n tabIndex={isMaskedWithValue ? -1 : 0}\n className={cn(\n \"w-full border-0 bg-transparent p-0 text-kumo-default ring-0 outline-none placeholder:text-kumo-subtle disabled:cursor-not-allowed disabled:text-kumo-subtle\",\n size === \"xs\" && \"pr-5\",\n size === \"sm\" && \"pr-6\",\n size === \"base\" && \"pr-8\",\n size === \"lg\" && \"pr-10\",\n isMaskedWithValue && \"pointer-events-none text-transparent\",\n )}\n aria-hidden={isMaskedWithValue}\n {...inputProps}\n />\n\n {/* Mask overlay - absolutely positioned, doesn't affect layout */}\n <span\n className={cn(\n \"pointer-events-none absolute inset-y-0 left-0 flex items-center overflow-hidden select-none\",\n // Match input pr padding (space for icon)\n size === \"xs\" && \"right-5\",\n size === \"sm\" && \"right-6\",\n size === \"base\" && \"right-8\",\n size === \"lg\" && \"right-10\",\n // Match the padding from inputVariants\n size === \"xs\" && \"px-1.5\",\n size === \"sm\" && \"px-2\",\n size === \"base\" && \"px-3\",\n size === \"lg\" && \"px-4\",\n // Hidden when not masked\n !isMaskedWithValue && \"invisible\",\n // When masked: enable pointer events\n isMaskedWithValue && \"pointer-events-auto\",\n // Text color - use text-kumo-default to contrast with bg-kumo-control input background\n \"text-kumo-default\",\n // Hover state - pure CSS, no React state (group for children)\n \"group/mask\",\n )}\n aria-hidden=\"true\"\n >\n {/* Both texts rendered, stacked. Visibility toggled on hover to prevent layout shift */}\n <span className=\"relative\">\n <span\n className={cn(\n isMaskedWithValue &&\n !disabled &&\n \"group-focus-within/container:invisible group-hover/mask:invisible\",\n )}\n >\n ••••••••\n </span>\n {isMaskedWithValue && !disabled && (\n <span className=\"invisible absolute left-0 top-0 whitespace-nowrap text-kumo-subtle group-focus-within/container:visible group-hover/mask:visible\">\n Click to reveal\n </span>\n )}\n </span>\n </span>\n\n {/* Eye button - absolutely positioned to the right */}\n <button\n type=\"button\"\n onClick={handleToggleVisibility}\n onKeyDown={(e) => e.stopPropagation()}\n aria-label={mode === \"revealed\" ? \"Hide value\" : \"Reveal value\"}\n tabIndex={showEyeButton ? 0 : -1}\n className={cn(\n \"absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-kumo-subtle outline-none hover:text-kumo-default focus:text-kumo-default\",\n // Match right padding from inputVariants\n size === \"xs\" && \"right-1.5\",\n size === \"sm\" && \"right-2\",\n size === \"base\" && \"right-3\",\n size === \"lg\" && \"right-4\",\n iconSize,\n !showEyeButton && \"pointer-events-none opacity-0\",\n )}\n >\n {mode === \"revealed\" ? (\n <EyeSlash className=\"size-full\" />\n ) : (\n <Eye className=\"size-full\" />\n )}\n </button>\n\n {/* Copy tab - appears on hover/focus at top right (hidden when disabled) */}\n {hasValue && !disabled && (\n <button\n type=\"button\"\n onClick={copyToClipboard}\n onKeyDown={(e) => e.stopPropagation()}\n aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n className={cn(\n \"absolute -top-px right-2 -translate-y-full cursor-pointer rounded-t-md bg-kumo-brand px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-focus-within/container:opacity-100 group-hover/container:opacity-100 hover:brightness-120 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-kumo-ring\",\n )}\n >\n {copied ? \"Copied\" : \"Copy\"}\n </button>\n )}\n </>\n );\n\n const input = (\n <div>\n {isMaskedWithValue ? (\n <div\n ref={containerRef}\n // Cannot use <button> here because containerContent contains interactive button elements (Copy, Reveal).\n // Using role=\"button\" with proper keyboard handling instead.\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"button\"\n tabIndex={disabled ? -1 : 0}\n className={containerClassName}\n onClick={handleContainerClick}\n onKeyDown={handleContainerKeyDown}\n aria-label={`${ariaLabelFallback}, masked.`}\n aria-describedby={`${maskedInstructionId} ${liveRegionId}`}\n aria-disabled={disabled}\n >\n {containerContent}\n </div>\n ) : (\n <div ref={containerRef} className={containerClassName}>\n {containerContent}\n </div>\n )}\n {isMaskedWithValue && (\n <span id={maskedInstructionId} className=\"sr-only\">\n Click or press Enter to reveal.\n </span>\n )}\n <span id={liveRegionId} className=\"sr-only\" aria-live=\"polite\">\n {mode === \"masked\" && hasValue && \"Value hidden\"}\n {copied && \"Copied to clipboard\"}\n </span>\n </div>\n );\n\n // Render with Field wrapper if label is provided\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 {input}\n </Field>\n );\n }\n\n // Render bare input without Field wrapper\n return input;\n },\n);\n\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"names":["KUMO_SENSITIVE_INPUT_VARIANTS","KUMO_INPUT_VARIANTS","KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS","SensitiveInput","forwardRef","controlledValue","defaultValue","onChange","onValueChange","onCopy","size","variant","disabled","readOnly","id","autoComplete","className","label","labelTooltip","description","error","required","inputProps","ref","ariaLabelFallback","isControlled","internalValue","setInternalValue","useState","value","hasValue","mode","setMode","copied","setCopied","inputRef","useRef","containerRef","liveRegionId","useId","generatedId","inputId","maskedInstructionId","mergedRef","useCallback","node","useEffect","timeoutId","copyToClipboard","textarea","selection","previousRange","prevHasValueRef","handleContainerClick","rect","handleToggleVisibility","handleChange","newValue","handleBlur","handleContainerKeyDown","handleInputKeyDown","isMaskedWithValue","showEyeButton","iconSize","containerClassName","cn","inputVariants","containerContent","jsxs","Fragment","jsx","BaseInput","EyeSlash","Eye","input","Field"],"mappings":"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"}
1
+ {"version":3,"file":"sensitive-input-DHDRZRC7.js","sources":["../src/components/sensitive-input/sensitive-input.tsx"],"sourcesContent":["import { Eye, EyeSlash } from \"@phosphor-icons/react\";\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport {\n inputVariants,\n KUMO_INPUT_VARIANTS,\n type KumoInputSize,\n type KumoInputVariant,\n} from \"../input/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\nexport const KUMO_SENSITIVE_INPUT_VARIANTS = KUMO_INPUT_VARIANTS;\n\nexport const KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\ntype Mode = \"masked\" | \"revealed\" | \"empty\";\n\n/**\n * SensitiveInput component props.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * <SensitiveInput label=\"Secret\" value={secret} onValueChange={setSecret} />\n * ```\n */\nexport interface SensitiveInputProps\n extends Omit<\n ComponentPropsWithoutRef<\"input\">,\n \"size\" | \"type\" | \"value\" | \"defaultValue\"\n > {\n /** Controlled value */\n value?: string;\n /** Uncontrolled default value */\n defaultValue?: string;\n /** Simplified change handler receiving just the value */\n onValueChange?: (value: string) => void;\n /** Callback fired after value is copied to clipboard */\n onCopy?: () => void;\n /**\n * Size of the input.\n * - `\"xs\"` — Extra small for compact UIs\n * - `\"sm\"` — Small for secondary fields\n * - `\"base\"` — Default input size\n * - `\"lg\"` — Large for prominent fields\n * @default \"base\"\n */\n size?: KumoInputSize;\n /**\n * Style variant of the input.\n * - `\"default\"` — Default input appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoInputVariant;\n /** Label content for the input (enables Field wrapper and sets masked state label) - 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 /** Helper text displayed below the input */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Password/secret input that masks its value by default and reveals on click.\n * Includes a built-in copy-to-clipboard button on hover.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * ```\n */\nexport const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(\n (\n {\n value: controlledValue,\n defaultValue = \"\",\n onChange,\n onValueChange,\n onCopy,\n size = KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS.size,\n variant = KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS.variant,\n disabled = false,\n readOnly = false,\n id,\n autoComplete = \"off\",\n className,\n label,\n labelTooltip,\n description,\n error,\n required,\n ...inputProps\n },\n ref,\n ) => {\n // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n const ariaLabelFallback =\n typeof label === \"string\" ? label : \"Sensitive value\";\n const isControlled = controlledValue !== undefined;\n const [internalValue, setInternalValue] = useState(defaultValue);\n const value = isControlled ? controlledValue : internalValue;\n const hasValue = value.length > 0;\n\n const [mode, setMode] = useState<Mode>(() =>\n hasValue ? \"masked\" : \"empty\",\n );\n\n const [copied, setCopied] = useState(false);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const liveRegionId = useId();\n const generatedId = useId();\n const inputId = id ?? generatedId;\n const maskedInstructionId = useId();\n\n const mergedRef = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n },\n [ref],\n );\n\n // Reset copied state after 2 seconds\n useEffect(() => {\n if (copied) {\n const timeoutId = setTimeout(() => setCopied(false), 2000);\n return () => clearTimeout(timeoutId);\n }\n }, [copied]);\n\n const copyToClipboard = useCallback(\n async (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n try {\n if (\n typeof navigator !== \"undefined\" &&\n navigator.clipboard &&\n typeof navigator.clipboard.writeText === \"function\"\n ) {\n await navigator.clipboard.writeText(value);\n setCopied(true);\n onCopy?.();\n return;\n }\n } catch {\n // Fall through to manual fallback\n }\n\n if (typeof document !== \"undefined\") {\n const textarea = document.createElement(\"textarea\");\n textarea.value = value;\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 setCopied(true);\n onCopy?.();\n } catch (error) {\n console.warn(\"Clipboard copy failed\", error);\n } finally {\n document.body.removeChild(textarea);\n if (previousRange) {\n selection?.removeAllRanges();\n selection?.addRange(previousRange);\n }\n }\n }\n },\n [value, onCopy],\n );\n\n // Sync mode when value changes externally\n const prevHasValueRef = useRef(hasValue);\n if (prevHasValueRef.current !== hasValue) {\n prevHasValueRef.current = hasValue;\n if (!hasValue && mode === \"masked\") {\n setMode(\"empty\");\n }\n }\n\n const handleContainerClick = useCallback(\n (e: React.MouseEvent) => {\n if (disabled) return;\n // Ignore clicks that originated from outside (e.g., label click focusing input)\n // Label clicks trigger a click on the input, but the click coordinates are outside the container\n if (containerRef.current) {\n const rect = containerRef.current.getBoundingClientRect();\n const isClickInsideContainer =\n e.clientX >= rect.left &&\n e.clientX <= rect.right &&\n e.clientY >= rect.top &&\n e.clientY <= rect.bottom;\n if (!isClickInsideContainer) return;\n }\n if (mode === \"masked\" && hasValue) {\n setMode(\"revealed\");\n if (!readOnly) {\n setTimeout(() => inputRef.current?.focus(), 0);\n }\n }\n },\n [mode, hasValue, disabled, readOnly],\n );\n\n const handleToggleVisibility = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n if (mode === \"revealed\") {\n setMode(\"masked\");\n } else if (mode === \"empty\" && hasValue) {\n setMode(\"revealed\");\n }\n },\n [mode, hasValue],\n );\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n if (!isControlled) {\n setInternalValue(newValue);\n }\n onChange?.(e);\n onValueChange?.(newValue);\n },\n [isControlled, onChange, onValueChange],\n );\n\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n // Don't mask if focus is moving to a button inside the container (copy/eye buttons)\n if (\n containerRef.current &&\n e.relatedTarget instanceof Node &&\n containerRef.current.contains(e.relatedTarget)\n ) {\n return;\n }\n if (hasValue) {\n setMode(\"masked\");\n }\n },\n [hasValue],\n );\n\n const handleContainerKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return;\n if (mode === \"masked\" && hasValue) {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n setMode(\"revealed\");\n if (!readOnly) {\n setTimeout(() => inputRef.current?.focus(), 0);\n }\n }\n }\n },\n [mode, hasValue, disabled, readOnly],\n );\n\n const handleInputKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (mode === \"revealed\" && e.key === \"Escape\") {\n setMode(\"masked\");\n // Move focus to container to avoid focus trap (input becomes tabIndex={-1})\n setTimeout(() => containerRef.current?.focus(), 0);\n }\n },\n [mode],\n );\n\n const isMaskedWithValue = mode === \"masked\" && hasValue;\n const showEyeButton =\n !disabled && (mode === \"revealed\" || (mode === \"empty\" && hasValue));\n\n // Icon sizes matching input sizes\n const iconSize = size === \"xs\" || size === \"sm\" ? \"size-3\" : \"size-4\";\n\n const containerClassName = cn(\n inputVariants({ size, variant, parentFocusIndicator: true }),\n \"group/container relative flex w-full items-center\",\n isMaskedWithValue && !disabled && \"cursor-pointer\",\n disabled && \"cursor-not-allowed\",\n className,\n );\n\n const containerContent = (\n <>\n {/* Input - defines the width, always rendered */}\n <BaseInput\n ref={mergedRef}\n id={inputId}\n type={mode === \"revealed\" ? \"text\" : \"password\"}\n value={value}\n onChange={handleChange}\n onBlur={handleBlur}\n onKeyDown={handleInputKeyDown}\n disabled={disabled}\n readOnly={readOnly || isMaskedWithValue}\n autoComplete={autoComplete}\n tabIndex={isMaskedWithValue ? -1 : 0}\n className={cn(\n \"w-full border-0 bg-transparent p-0 text-kumo-default ring-0 outline-none placeholder:text-kumo-subtle disabled:cursor-not-allowed disabled:text-kumo-subtle\",\n size === \"xs\" && \"pr-5\",\n size === \"sm\" && \"pr-6\",\n size === \"base\" && \"pr-8\",\n size === \"lg\" && \"pr-10\",\n isMaskedWithValue && \"pointer-events-none text-transparent\",\n )}\n aria-hidden={isMaskedWithValue}\n {...inputProps}\n />\n\n {/* Mask overlay - absolutely positioned, doesn't affect layout */}\n <span\n className={cn(\n \"pointer-events-none absolute inset-y-0 left-0 flex items-center overflow-hidden select-none\",\n // Match input pr padding (space for icon)\n size === \"xs\" && \"right-5\",\n size === \"sm\" && \"right-6\",\n size === \"base\" && \"right-8\",\n size === \"lg\" && \"right-10\",\n // Match the padding from inputVariants\n size === \"xs\" && \"px-1.5\",\n size === \"sm\" && \"px-2\",\n size === \"base\" && \"px-3\",\n size === \"lg\" && \"px-4\",\n // Hidden when not masked\n !isMaskedWithValue && \"invisible\",\n // When masked: enable pointer events\n isMaskedWithValue && \"pointer-events-auto\",\n // Text color - use text-kumo-default to contrast with bg-kumo-control input background\n \"text-kumo-default\",\n // Hover state - pure CSS, no React state (group for children)\n \"group/mask\",\n )}\n aria-hidden=\"true\"\n >\n {/* Both texts rendered, stacked. Visibility toggled on hover to prevent layout shift */}\n <span className=\"relative\">\n <span\n className={cn(\n isMaskedWithValue &&\n !disabled &&\n \"group-focus-within/container:invisible group-hover/mask:invisible\",\n )}\n >\n ••••••••\n </span>\n {isMaskedWithValue && !disabled && (\n <span className=\"invisible absolute left-0 top-0 whitespace-nowrap text-kumo-subtle group-focus-within/container:visible group-hover/mask:visible\">\n Click to reveal\n </span>\n )}\n </span>\n </span>\n\n {/* Eye button - absolutely positioned to the right */}\n <button\n type=\"button\"\n onClick={handleToggleVisibility}\n onKeyDown={(e) => e.stopPropagation()}\n aria-label={mode === \"revealed\" ? \"Hide value\" : \"Reveal value\"}\n tabIndex={showEyeButton ? 0 : -1}\n className={cn(\n \"absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-kumo-subtle outline-none hover:text-kumo-default focus:text-kumo-default\",\n // Match right padding from inputVariants\n size === \"xs\" && \"right-1.5\",\n size === \"sm\" && \"right-2\",\n size === \"base\" && \"right-3\",\n size === \"lg\" && \"right-4\",\n iconSize,\n !showEyeButton && \"pointer-events-none opacity-0\",\n )}\n >\n {mode === \"revealed\" ? (\n <EyeSlash className=\"size-full\" />\n ) : (\n <Eye className=\"size-full\" />\n )}\n </button>\n\n {/* Copy tab - appears on hover/focus at top right (hidden when disabled) */}\n {hasValue && !disabled && (\n <button\n type=\"button\"\n onClick={copyToClipboard}\n onKeyDown={(e) => e.stopPropagation()}\n aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n className={cn(\n \"absolute -top-px right-2 -translate-y-full cursor-pointer rounded-t-md bg-kumo-brand px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-focus-within/container:opacity-100 group-hover/container:opacity-100 hover:brightness-120 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-kumo-ring\",\n )}\n >\n {copied ? \"Copied\" : \"Copy\"}\n </button>\n )}\n </>\n );\n\n const input = (\n <div>\n {isMaskedWithValue ? (\n <div\n ref={containerRef}\n // Cannot use <button> here because containerContent contains interactive button elements (Copy, Reveal).\n // Using role=\"button\" with proper keyboard handling instead.\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"button\"\n tabIndex={disabled ? -1 : 0}\n className={containerClassName}\n onClick={handleContainerClick}\n onKeyDown={handleContainerKeyDown}\n aria-label={`${ariaLabelFallback}, masked.`}\n aria-describedby={`${maskedInstructionId} ${liveRegionId}`}\n aria-disabled={disabled}\n >\n {containerContent}\n </div>\n ) : (\n <div ref={containerRef} className={containerClassName}>\n {containerContent}\n </div>\n )}\n {isMaskedWithValue && (\n <span id={maskedInstructionId} className=\"sr-only\">\n Click or press Enter to reveal.\n </span>\n )}\n <span id={liveRegionId} className=\"sr-only\" aria-live=\"polite\">\n {mode === \"masked\" && hasValue && \"Value hidden\"}\n {copied && \"Copied to clipboard\"}\n </span>\n </div>\n );\n\n // Render with Field wrapper if label is provided\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 {input}\n </Field>\n );\n }\n\n // Render bare input without Field wrapper\n return input;\n },\n);\n\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"names":["KUMO_SENSITIVE_INPUT_VARIANTS","KUMO_INPUT_VARIANTS","KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS","SensitiveInput","forwardRef","controlledValue","defaultValue","onChange","onValueChange","onCopy","size","variant","disabled","readOnly","id","autoComplete","className","label","labelTooltip","description","error","required","inputProps","ref","ariaLabelFallback","isControlled","internalValue","setInternalValue","useState","value","hasValue","mode","setMode","copied","setCopied","inputRef","useRef","containerRef","liveRegionId","useId","generatedId","inputId","maskedInstructionId","mergedRef","useCallback","node","useEffect","timeoutId","copyToClipboard","textarea","selection","previousRange","prevHasValueRef","handleContainerClick","rect","handleToggleVisibility","handleChange","newValue","handleBlur","handleContainerKeyDown","handleInputKeyDown","isMaskedWithValue","showEyeButton","iconSize","containerClassName","cn","inputVariants","containerContent","jsxs","Fragment","jsx","BaseInput","EyeSlash","Eye","input","Field"],"mappings":"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"}
@@ -32,7 +32,7 @@ export declare function dropdownVariants({ variant, }?: KumoDropdownVariantsProp
32
32
  * DropdownMenu — accessible dropdown menu anchored to a trigger.
33
33
  *
34
34
  * Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`,
35
- * `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`,
35
+ * `.LinkItem`, `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`,
36
36
  * `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`.
37
37
  *
38
38
  * Built on `@base-ui/react/menu`.
@@ -46,6 +46,7 @@ export declare function dropdownVariants({ variant, }?: KumoDropdownVariantsProp
46
46
  * <DropdownMenu.Content>
47
47
  * <DropdownMenu.Item>Edit</DropdownMenu.Item>
48
48
  * <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>
49
+ * <DropdownMenu.LinkItem href="/settings" icon={GearIcon}>Settings</DropdownMenu.LinkItem>
49
50
  * <DropdownMenu.Separator />
50
51
  * <DropdownMenu.Item variant="danger">Delete</DropdownMenu.Item>
51
52
  * </DropdownMenu.Content>
@@ -54,38 +55,47 @@ export declare function dropdownVariants({ variant, }?: KumoDropdownVariantsProp
54
55
  *
55
56
  * @see https://base-ui.com/react/components/menu
56
57
  */
57
- export declare const DropdownMenu: typeof DropdownMenuPrimitive.Root & {
58
- Trigger: React.ForwardRefExoticComponent<Omit<import('@base-ui/react/menu').MenuTriggerProps<unknown> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
59
- Portal: React.ForwardRefExoticComponent<import('@base-ui/react/menu').MenuPortalProps & React.RefAttributes<HTMLDivElement>>;
58
+ export declare const DropdownMenu: (<Payload>(props: DropdownMenuPrimitive.Root.Props<Payload>) => import("react/jsx-runtime").JSX.Element) & {
59
+ Trigger: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').MenuTriggerProps<unknown> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
60
+ Portal: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').ContextMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
60
61
  Sub: typeof DropdownMenuPrimitive.SubmenuRoot;
61
- SubTrigger: React.ForwardRefExoticComponent<Omit<import('@base-ui/react/menu').MenuSubmenuTriggerProps & React.RefAttributes<HTMLElement>, "ref"> & {
62
+ SubTrigger: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ContextMenuSubmenuTriggerProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
62
63
  inset?: boolean;
63
64
  icon?: Icon;
64
65
  } & React.RefAttributes<HTMLElement>>;
65
- SubContent: React.ForwardRefExoticComponent<Omit<import('@base-ui/react/menu').MenuPositionerProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
66
- Content: React.ForwardRefExoticComponent<Omit<import('@base-ui/react/menu').MenuPositionerProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
67
- Item: React.ForwardRefExoticComponent<Omit<import('@base-ui/react/menu').MenuItemProps & React.RefAttributes<Element>, "ref"> & {
66
+ SubContent: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ContextMenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
67
+ Content: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ContextMenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
68
+ Item: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ContextMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
68
69
  inset?: boolean;
69
70
  icon?: Icon | React.ReactNode;
70
71
  selected?: boolean;
72
+ /**
73
+ * @deprecated Use `DropdownMenu.LinkItem` instead for navigation links.
74
+ * This prop will be removed in a future major version.
75
+ */
71
76
  href?: string;
72
77
  variant?: "default" | "danger";
73
- } & React.RefAttributes<Element>>;
74
- CheckboxItem: React.ForwardRefExoticComponent<Omit<import('@base-ui/react/menu').MenuCheckboxItemProps & React.RefAttributes<Element>, "ref"> & React.RefAttributes<Element>>;
75
- RadioGroup: React.NamedExoticComponent<import('@base-ui/react/menu').MenuRadioGroupProps & React.RefAttributes<Element>>;
76
- RadioItem: React.ForwardRefExoticComponent<Omit<import('@base-ui/react/menu').MenuRadioItemProps & React.RefAttributes<Element>, "ref"> & {
78
+ } & React.RefAttributes<HTMLElement>>;
79
+ LinkItem: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ContextMenuLinkItemProps, "ref"> & React.RefAttributes<Element>, "ref"> & {
77
80
  inset?: boolean;
78
81
  icon?: Icon | React.ReactNode;
82
+ variant?: "default" | "danger";
79
83
  } & React.RefAttributes<Element>>;
80
- RadioItemIndicator: React.ForwardRefExoticComponent<Omit<import('@base-ui/react/menu').MenuRadioItemIndicatorProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
81
- Label: React.ForwardRefExoticComponent<Omit<import('@base-ui/react/menu').MenuGroupLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
84
+ CheckboxItem: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ContextMenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
85
+ RadioGroup: React.NamedExoticComponent<Omit<import('@base-ui/react').ContextMenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
86
+ RadioItem: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ContextMenuRadioItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
87
+ inset?: boolean;
88
+ icon?: Icon | React.ReactNode;
89
+ } & React.RefAttributes<HTMLElement>>;
90
+ RadioItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ContextMenuRadioItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
91
+ Label: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ContextMenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
82
92
  inset?: boolean;
83
93
  } & React.RefAttributes<HTMLDivElement>>;
84
- Separator: React.ForwardRefExoticComponent<Omit<import('@base-ui/react/separator').SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
94
+ Separator: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
85
95
  Shortcut: {
86
96
  ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
87
97
  displayName: string;
88
98
  };
89
- Group: React.ForwardRefExoticComponent<import('@base-ui/react/menu').MenuGroupProps & React.RefAttributes<Element>>;
99
+ Group: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').ContextMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
90
100
  };
91
101
  //# sourceMappingURL=dropdown.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAGL,KAAK,IAAI,EACV,MAAM,uBAAuB,CAAC;AAE/B,qEAAqE;AACrE,eAAO,MAAM,sBAAsB;;;;;;;;;;;CAYzB,CAAC;AAEX,eAAO,MAAM,8BAA8B;;CAEjC,CAAC;AAGX,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,sBAAsB,CAAC,OAAO,CAAC;AAE9E,MAAM,WAAW,yBAAyB;IACxC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAgD,GACjD,GAAE,yBAA8B,UAEhC;AAoTD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,YAAY;;;;;gBAvUb,OAAO;eACR,IAAI;;;;;gBAgEH,OAAO;eACR,IAAI,GAAG,KAAK,CAAC,SAAS;mBAClB,OAAO;eACX,MAAM;kBACH,SAAS,GAAG,QAAQ;;;;;gBAwKtB,OAAO;eACR,IAAI,GAAG,KAAK,CAAC,SAAS;;;;gBA5CrB,OAAO;;;;kCA8BhB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;;;CAuHtC,CAAC"}
1
+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAGL,KAAK,IAAI,EACV,MAAM,uBAAuB,CAAC;AAE/B,qEAAqE;AACrE,eAAO,MAAM,sBAAsB;;;;;;;;;;;CAYzB,CAAC;AAEX,eAAO,MAAM,8BAA8B;;CAEjC,CAAC;AAGX,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,sBAAsB,CAAC,OAAO,CAAC;AAE9E,MAAM,WAAW,yBAAyB;IACxC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAgD,GACjD,GAAE,yBAA8B,UAEhC;AAgYD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,YAAY;;;;;gBApZb,OAAO;eACR,IAAI;;;;;gBA4EH,OAAO;eACR,IAAI,GAAG,KAAK,CAAC,SAAS;mBAClB,OAAO;QAClB;;;WAGG;eACI,MAAM;kBACH,SAAS,GAAG,QAAQ;;;gBA0HtB,OAAO;eACR,IAAI,GAAG,KAAK,CAAC,SAAS;kBACnB,SAAS,GAAG,QAAQ;;;;;gBAwGtB,OAAO;eACR,IAAI,GAAG,KAAK,CAAC,SAAS;;;;gBA5CrB,OAAO;;;;kCA8BhB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;;;CAyHtC,CAAC"}
@@ -5,6 +5,8 @@ export interface Connector {
5
5
  x2: number;
6
6
  y2: number;
7
7
  isBottom?: boolean;
8
+ disabled?: boolean;
9
+ single?: boolean;
8
10
  }
9
11
  type PathProps = Partial<{
10
12
  cornerRadius: number;
@@ -30,6 +32,6 @@ export declare const Connectors: import('react').ForwardRefExoticComponent<{
30
32
  isBottom: boolean;
31
33
  single: boolean;
32
34
  orientation: "vertical" | "horizontal";
33
- }>, "isBottom"> & import('react').RefAttributes<SVGSVGElement>>;
35
+ }>, "single" | "isBottom"> & import('react').RefAttributes<SVGSVGElement>>;
34
36
  export {};
35
37
  //# sourceMappingURL=connectors.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"connectors.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/connectors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAOD,KAAK,SAAS,GAAG,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;CACxC,CAAC,CAAC;AASH,wBAAgB,iBAAiB,CAC/B,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,EACtE,EACE,YAAY,EAAE,eAAmB,EACjC,SAAc,EACd,eAAmB,EACnB,QAAgB,EAChB,MAAc,EACd,WAAwB,GACzB,GAAE,SAAc,UAiGlB;AAED,eAAO,MAAM,UAAU;gBAhIT,SAAS,EAAE;eACZ,SAAS;;kBAIN,MAAM;eACT,MAAM;qBACA,MAAM;cACb,OAAO;YACT,OAAO;iBACF,UAAU,GAAG,YAAY;+DAuKvC,CAAC"}
1
+ {"version":3,"file":"connectors.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/connectors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAOD,KAAK,SAAS,GAAG,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;CACxC,CAAC,CAAC;AASH,wBAAgB,iBAAiB,CAC/B,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,EACtE,EACE,YAAY,EAAE,eAAmB,EACjC,SAAc,EACd,eAAmB,EACnB,QAAgB,EAChB,MAAc,EACd,WAAwB,GACzB,GAAE,SAAc,UAyGlB;AAED,eAAO,MAAM,UAAU;gBAxIT,SAAS,EAAE;eACZ,SAAS;;kBAIN,MAAM;eACT,MAAM;qBACA,MAAM;cACb,OAAO;YACT,OAAO;iBACF,UAAU,GAAG,YAAY;0EA2LvC,CAAC"}
@@ -36,6 +36,7 @@ export type RectLike = {
36
36
  };
37
37
  export type NodeData = {
38
38
  parallel?: boolean;
39
+ disabled?: boolean;
39
40
  start?: RectLike | null;
40
41
  end?: RectLike | null;
41
42
  };
@@ -1 +1 @@
1
- {"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/diagram.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,KAAK,WAAW,EAEjB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAWxB,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7C,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhC,UAAU,mBAAmB;IAC3B,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvB,iDAAiD;IACjD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACpD;AAID,wBAAgB,iBAAiB,IAAI,mBAAmB,CAMvD;AAED,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,WAA0B,EAC1B,KAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,2CAgNlB;AAID,MAAM,MAAM,QAAQ,GAAG;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;CAAmC,CAAC;AAE7D,eAAO,MAAM,OAAO,GAAI,OAAO,QAAQ;;;;;CAAwC,CAAC;AAEhF,eAAO,MAAM,WAAW,GACtB,MAAM,cAAc,CAAC,QAAQ,CAAC,GAAG,SAAS,EAC1C,UAAoB;IAAE,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAAE,KAC7C,QAAQ,GAAG,IAGb,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAuDjE"}
1
+ {"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/diagram.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,KAAK,WAAW,EAEjB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAWxB,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7C,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhC,UAAU,mBAAmB;IAC3B,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvB,iDAAiD;IACjD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACpD;AAID,wBAAgB,iBAAiB,IAAI,mBAAmB,CAMvD;AAED,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,WAA0B,EAC1B,KAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,2CA2NlB;AAID,MAAM,MAAM,QAAQ,GAAG;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;CAAmC,CAAC;AAE7D,eAAO,MAAM,OAAO,GAAI,OAAO,QAAQ;;;;;CAAwC,CAAC;AAEhF,eAAO,MAAM,WAAW,GACtB,MAAM,cAAc,CAAC,QAAQ,CAAC,GAAG,SAAS,EAC1C,UAAoB;IAAE,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAAE,KAC7C,QAAQ,GAAG,IAGb,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CA4DjE"}
@@ -19,6 +19,10 @@ export type FlowNodeProps = {
19
19
  */
20
20
  render?: ReactElement;
21
21
  children?: ReactNode;
22
+ /**
23
+ * When true, any connector linking to this node will be greyed out.
24
+ */
25
+ disabled?: boolean;
22
26
  };
23
27
  export declare const FlowNode: import('react').ForwardRefExoticComponent<FlowNodeProps & import('react').RefAttributes<HTMLElement>>;
24
28
  /**
@@ -40,7 +44,7 @@ export type FlowAnchorProps = {
40
44
  * _next_ connector or the "end" point for the _previous_ connector.
41
45
  * When omitted, it serves as both the start and end points.
42
46
  */
43
- type?: "start" | "end";
47
+ type?: 'start' | 'end';
44
48
  /**
45
49
  * Custom element to render instead of the default div.
46
50
  * When provided, completely replaces the default element.
@@ -1 +1 @@
1
- {"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAkBf;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,QAAQ,uGA4FpB,CAAC;AAaF;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,UAAU,yGA6CtB,CAAC"}
1
+ {"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAkBf;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,QAAQ,uGAkGpB,CAAC;AAaF;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,UAAU,yGA6CtB,CAAC"}
@@ -1,5 +1,13 @@
1
1
  import { ReactNode } from 'react';
2
- export declare function FlowParallelNode({ children }: {
2
+ type FlowParallelNodeProps = {
3
3
  children: ReactNode;
4
- }): import("react/jsx-runtime").JSX.Element;
4
+ /**
5
+ * Controls alignment of nodes within the parallel group.
6
+ * - `start`: Nodes align to the left (default)
7
+ * - `end`: Nodes align to the right
8
+ */
9
+ align?: "start" | "end";
10
+ };
11
+ export declare function FlowParallelNode({ children, align, }: FlowParallelNodeProps): import("react/jsx-runtime").JSX.Element;
12
+ export {};
5
13
  //# sourceMappingURL=parallel.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"parallel.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/parallel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAyDxD,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAuKrE"}
1
+ {"version":3,"file":"parallel.d.ts","sourceRoot":"","sources":["../../../../src/components/flow/parallel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAyD7E,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,KAAe,GAChB,EAAE,qBAAqB,2CAyQvB"}