@cloudflare/kumo 1.13.0 → 1.14.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.
- package/CHANGELOG.md +35 -0
- package/ai/component-registry.json +47 -21
- package/ai/component-registry.md +243 -15
- package/ai/schemas.ts +3 -2
- package/dist/.build-complete +1 -1
- package/dist/ai/schemas.d.ts +10 -2
- package/dist/ai/schemas.d.ts.map +1 -1
- package/dist/ai/schemas.js +175 -173
- package/dist/ai/schemas.js.map +1 -1
- package/dist/chunks/Legend-mkh1v83sz972e29d.js +407 -0
- package/dist/chunks/Legend-mkh1v83sz972e29d.js.map +1 -0
- package/dist/chunks/{breadcrumbs-e564gabk59go37cg.js → breadcrumbs-gr907zcoo65rpn90.js} +2 -2
- package/dist/chunks/{breadcrumbs-e564gabk59go37cg.js.map → breadcrumbs-gr907zcoo65rpn90.js.map} +1 -1
- package/dist/chunks/{button-b1yp3lbrhjr9eg07.js → button-d82sexqgnd834eaa.js} +2 -2
- package/dist/chunks/{button-b1yp3lbrhjr9eg07.js.map → button-d82sexqgnd834eaa.js.map} +1 -1
- package/dist/chunks/{checkbox-khvh0efmlzvlo6qi.js → checkbox-gebzflhsvo6zkcrm.js} +3 -3
- package/dist/chunks/{checkbox-khvh0efmlzvlo6qi.js.map → checkbox-gebzflhsvo6zkcrm.js.map} +1 -1
- package/dist/chunks/{clipboard-text-jvrlvyz5ulm49h5b.js → clipboard-text-nnmfwusts804p1qd.js} +4 -4
- package/dist/chunks/{clipboard-text-jvrlvyz5ulm49h5b.js.map → clipboard-text-nnmfwusts804p1qd.js.map} +1 -1
- package/dist/chunks/{combobox-hdstt4dqqxbtxwod.js → combobox-ds8qzpuaagb1udzg.js} +88 -77
- package/dist/chunks/combobox-ds8qzpuaagb1udzg.js.map +1 -0
- package/dist/chunks/{command-palette-l8dym46a74o7j8ci.js → command-palette-essubhvibj84mhx8.js} +3 -3
- package/dist/chunks/{command-palette-l8dym46a74o7j8ci.js.map → command-palette-essubhvibj84mhx8.js.map} +1 -1
- package/dist/chunks/{dialog-emk68n0piw8u7hkb.js → dialog-hmfums1yr41afbsx.js} +2 -2
- package/dist/chunks/{dialog-emk68n0piw8u7hkb.js.map → dialog-hmfums1yr41afbsx.js.map} +1 -1
- package/dist/chunks/{dropdown-ejgjnn9gq3daua1h.js → dropdown-nhhm3rddlt7fmd2a.js} +2 -2
- package/dist/chunks/{dropdown-ejgjnn9gq3daua1h.js.map → dropdown-nhhm3rddlt7fmd2a.js.map} +1 -1
- package/dist/chunks/{empty-crbntv0dhud7besh.js → empty-h3qhwtx0z8arupc9.js} +2 -2
- package/dist/chunks/{empty-crbntv0dhud7besh.js.map → empty-h3qhwtx0z8arupc9.js.map} +1 -1
- package/dist/chunks/{engine-javascript-hi1kqifa6nkcridk.js → engine-javascript-cvvdau2e8o59vsx6.js} +5 -5
- package/dist/chunks/{engine-javascript-hi1kqifa6nkcridk.js.map → engine-javascript-cvvdau2e8o59vsx6.js.map} +1 -1
- package/dist/chunks/{field-ftrgblg9mbmz9eo3.js → field-pcsc33yrvgq6g9ll.js} +3 -3
- package/dist/chunks/{field-ftrgblg9mbmz9eo3.js.map → field-pcsc33yrvgq6g9ll.js.map} +1 -1
- package/dist/chunks/input-area-oyw0rq0q2wm0blmb.js +74 -0
- package/dist/chunks/input-area-oyw0rq0q2wm0blmb.js.map +1 -0
- package/dist/chunks/{input-group-g6qyhe5jvpe02hee.js → input-group-fjq64pzze8kklmni.js} +3 -3
- package/dist/chunks/{input-group-g6qyhe5jvpe02hee.js.map → input-group-fjq64pzze8kklmni.js.map} +1 -1
- package/dist/chunks/{input-me56hug8sl0u650q.js → input-oaa51811nxs0z2mw.js} +20 -20
- package/dist/chunks/input-oaa51811nxs0z2mw.js.map +1 -0
- package/dist/chunks/{label-eooot7dhtfvw7n3x.js → label-m5dcn3mqhnmi0dgq.js} +3 -3
- package/dist/chunks/{label-eooot7dhtfvw7n3x.js.map → label-m5dcn3mqhnmi0dgq.js.map} +1 -1
- package/dist/chunks/{link-moetfdbgxda0yhwg.js → link-desli097365ac82o.js} +2 -2
- package/dist/chunks/{link-moetfdbgxda0yhwg.js.map → link-desli097365ac82o.js.map} +1 -1
- package/dist/chunks/{menubar-c2zwv4mbo3xqq7is.js → menubar-eir09makes5l9xby.js} +2 -2
- package/dist/chunks/{menubar-c2zwv4mbo3xqq7is.js.map → menubar-eir09makes5l9xby.js.map} +1 -1
- package/dist/chunks/{meter-em2hfu8j2rhmf5ae.js → meter-kl2puqzdbfkwrok9.js} +2 -2
- package/dist/chunks/{meter-em2hfu8j2rhmf5ae.js.map → meter-kl2puqzdbfkwrok9.js.map} +1 -1
- package/dist/chunks/{pagination-xt93wvwvow4z44lc.js → pagination-c2sv9vs43whhvznh.js} +3 -3
- package/dist/chunks/{pagination-xt93wvwvow4z44lc.js.map → pagination-c2sv9vs43whhvznh.js.map} +1 -1
- package/dist/chunks/{popover-irccwetx73p8pnua.js → popover-ji1zh9zqrj6at834.js} +2 -2
- package/dist/chunks/{popover-irccwetx73p8pnua.js.map → popover-ji1zh9zqrj6at834.js.map} +1 -1
- package/dist/chunks/radio-cnsup12f302rxkxl.js +200 -0
- package/dist/chunks/radio-cnsup12f302rxkxl.js.map +1 -0
- package/dist/chunks/{select-jxxef2rf76pgdrf8.js → select-hgn6ikyor1p6jd9r.js} +21 -14
- package/dist/chunks/select-hgn6ikyor1p6jd9r.js.map +1 -0
- package/dist/chunks/{sensitive-input-i7ey1w0ky7nco012.js → sensitive-input-drdu6upod3ucl6vt.js} +34 -34
- package/dist/chunks/sensitive-input-drdu6upod3ucl6vt.js.map +1 -0
- package/dist/chunks/switch-n7zyzirax1l016n2.js +241 -0
- package/dist/chunks/switch-n7zyzirax1l016n2.js.map +1 -0
- package/dist/chunks/{table-d4ql7fjvok30xs1f.js → table-l2yy3jtkbhvqlq43.js} +3 -3
- package/dist/chunks/table-l2yy3jtkbhvqlq43.js.map +1 -0
- package/dist/chunks/{tabs-n3rcvuzx0gbslyy6.js → tabs-omc1n6jaxkf41pvg.js} +2 -2
- package/dist/chunks/{tabs-n3rcvuzx0gbslyy6.js.map → tabs-omc1n6jaxkf41pvg.js.map} +1 -1
- package/dist/chunks/{toast-j05qj3vk688ht1i1.js → toast-bkvbwc1x3s7fbzkt.js} +3 -3
- package/dist/chunks/{toast-j05qj3vk688ht1i1.js.map → toast-bkvbwc1x3s7fbzkt.js.map} +1 -1
- package/dist/chunks/{tooltip-es2dwwbhftg4k2jy.js → tooltip-nwvv7fhpqpo2rqlc.js} +2 -2
- package/dist/chunks/{tooltip-es2dwwbhftg4k2jy.js.map → tooltip-nwvv7fhpqpo2rqlc.js.map} +1 -1
- package/dist/chunks/{vendor-base-ui-kxxocm122zr4pipe.js → vendor-base-ui-lgoligkf81eyvnde.js} +21 -21
- package/dist/chunks/{vendor-base-ui-kxxocm122zr4pipe.js.map → vendor-base-ui-lgoligkf81eyvnde.js.map} +1 -1
- package/dist/code/server.js +0 -2
- package/dist/code/server.js.map +1 -1
- package/dist/code.js +2 -3
- package/dist/code.js.map +1 -1
- package/dist/components/breadcrumbs.js +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/chart.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/clipboard-text.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/command-palette.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/empty.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/flow.js +1435 -1431
- package/dist/components/flow.js.map +1 -1
- package/dist/components/input.js +3 -3
- package/dist/components/label.js +1 -1
- package/dist/components/link.js +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/meter.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sensitive-input.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/toast.js +2 -2
- package/dist/components/tooltip.js +1 -1
- package/dist/index.js +69 -68
- package/dist/primitives/accordion.js +1 -1
- package/dist/primitives/alert-dialog.js +1 -1
- package/dist/primitives/autocomplete.js +1 -1
- package/dist/primitives/avatar.js +1 -1
- package/dist/primitives/button.js +1 -1
- package/dist/primitives/checkbox-group.js +1 -1
- package/dist/primitives/checkbox.js +1 -1
- package/dist/primitives/collapsible.js +1 -1
- package/dist/primitives/combobox.js +1 -1
- package/dist/primitives/context-menu.js +1 -1
- package/dist/primitives/csp-provider.js +1 -1
- package/dist/primitives/dialog.js +1 -1
- package/dist/primitives/direction-provider.js +1 -1
- package/dist/primitives/drawer.js +1 -1
- package/dist/primitives/field.js +1 -1
- package/dist/primitives/fieldset.js +1 -1
- package/dist/primitives/form.js +1 -1
- package/dist/primitives/input.js +1 -1
- package/dist/primitives/menu.js +1 -1
- package/dist/primitives/menubar.js +1 -1
- package/dist/primitives/meter.js +1 -1
- package/dist/primitives/navigation-menu.js +1 -1
- package/dist/primitives/number-field.js +1 -1
- package/dist/primitives/popover.js +1 -1
- package/dist/primitives/preview-card.js +1 -1
- package/dist/primitives/progress.js +1 -1
- package/dist/primitives/radio-group.js +1 -1
- package/dist/primitives/radio.js +1 -1
- package/dist/primitives/scroll-area.js +1 -1
- package/dist/primitives/select.js +1 -1
- package/dist/primitives/separator.js +1 -1
- package/dist/primitives/slider.js +1 -1
- package/dist/primitives/switch.js +1 -1
- package/dist/primitives/tabs.js +1 -1
- package/dist/primitives/toast.js +1 -1
- package/dist/primitives/toggle-group.js +1 -1
- package/dist/primitives/toggle.js +1 -1
- package/dist/primitives/toolbar.js +1 -1
- package/dist/primitives/tooltip.js +1 -1
- package/dist/primitives.js +1 -1
- package/dist/scripts/theme-generator/config.d.ts.map +1 -1
- package/dist/scripts/theme-generator/config.js +12 -3
- package/dist/scripts/theme-generator/config.js.map +1 -1
- package/dist/src/code/code-highlighted.d.ts +2 -2
- package/dist/src/code/code-highlighted.d.ts.map +1 -1
- package/dist/src/code/provider.d.ts +2 -2
- package/dist/src/code/provider.d.ts.map +1 -1
- package/dist/src/components/chart/EChart.d.ts +7 -2
- package/dist/src/components/chart/EChart.d.ts.map +1 -1
- package/dist/src/components/chart/TimeseriesChart.d.ts.map +1 -1
- package/dist/src/components/combobox/combobox.d.ts.map +1 -1
- package/dist/src/components/flow/diagram.d.ts.map +1 -1
- package/dist/src/components/input/input-area.d.ts.map +1 -1
- package/dist/src/components/radio/index.d.ts +1 -1
- package/dist/src/components/radio/index.d.ts.map +1 -1
- package/dist/src/components/radio/radio.d.ts +43 -4
- package/dist/src/components/radio/radio.d.ts.map +1 -1
- package/dist/src/components/select/select.d.ts.map +1 -1
- package/dist/src/components/switch/switch.d.ts +8 -8
- package/dist/src/components/switch/switch.d.ts.map +1 -1
- package/dist/src/index.d.ts +1 -1
- package/dist/src/index.d.ts.map +1 -1
- package/dist/styles/kumo-binding.css +5 -0
- package/dist/styles/kumo-standalone.css +1 -1
- package/dist/styles/theme-kumo.css +7 -0
- package/package.json +3 -6
- package/scripts/theme-generator/config.ts +12 -3
- package/dist/chunks/Legend-o2bjbo2pp24c2fqd.js +0 -402
- package/dist/chunks/Legend-o2bjbo2pp24c2fqd.js.map +0 -1
- package/dist/chunks/combobox-hdstt4dqqxbtxwod.js.map +0 -1
- package/dist/chunks/input-area-hxtyrqpp44m18j72.js +0 -59
- package/dist/chunks/input-area-hxtyrqpp44m18j72.js.map +0 -1
- package/dist/chunks/input-me56hug8sl0u650q.js.map +0 -1
- package/dist/chunks/radio-394mfs3au5m8cgd8.js +0 -125
- package/dist/chunks/radio-394mfs3au5m8cgd8.js.map +0 -1
- package/dist/chunks/select-jxxef2rf76pgdrf8.js.map +0 -1
- package/dist/chunks/sensitive-input-i7ey1w0ky7nco012.js.map +0 -1
- package/dist/chunks/switch-b0xo8fxsfzv87krj.js +0 -257
- package/dist/chunks/switch-b0xo8fxsfzv87krj.js.map +0 -1
- package/dist/chunks/table-d4ql7fjvok30xs1f.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-me56hug8sl0u650q.js","sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Input size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_INPUT_VARIANTS = {\n size: {\n xs: {\n classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n description: \"Extra small input for compact UIs\",\n },\n sm: {\n classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n description: \"Small input for secondary fields\",\n },\n base: {\n classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n description: \"Default input size\",\n },\n lg: {\n classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n description: \"Large input for prominent fields\",\n },\n },\n variant: {\n default: {\n classes: \"focus:ring-kumo-ring\",\n description: \"Default input appearance\",\n },\n error: {\n classes: \"!ring-kumo-danger focus:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\nexport const KUMO_INPUT_STYLING = {\n dimensions: {\n xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n base: {\n height: 36,\n paddingX: 12,\n fontSize: 16,\n borderRadius: 8,\n width: 280,\n },\n lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n },\n baseTokens: {\n background: \"color-secondary\",\n text: \"text-color-surface\",\n placeholder: \"text-color-muted\",\n ring: \"color-border\",\n },\n stateTokens: {\n focus: { ring: \"color-active\" },\n error: { ring: \"color-error\" },\n disabled: { opacity: 0.5, text: \"text-color-muted\" },\n },\n} as const;\n\n// Derived types from KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\n /**\n * Input size.\n * - `\"xs\"` — Extra small for compact UIs\n * - `\"sm\"` — Small for secondary fields\n * - `\"base\"` — Default size\n * - `\"lg\"` — Large for prominent fields\n * @default \"base\"\n */\n size?: KumoInputSize;\n /**\n * Visual variant.\n * - `\"default\"` — Standard input\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoInputVariant;\n parentFocusIndicator?: boolean;\n focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n variant = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n parentFocusIndicator = false,\n focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n return cn(\n // Base styles\n \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-line\",\n // Disabled state and placeholder styles\n \"outline-none placeholder:text-kumo-subtle disabled:text-kumo-subtle\",\n // Apply size styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.size[size].classes,\n // Apply variant styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.variant[variant].classes,\n // Focus state handling\n parentFocusIndicator && \"[&:has(:focus-within)]:ring-kumo-ring\",\n focusIndicator && \"focus:ring-kumo-ring\",\n );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n const {\n className,\n size = \"base\",\n variant = \"default\",\n label,\n labelTooltip,\n description,\n error,\n ...inputProps\n } = props;\n\n // Extract required from inputProps to pass to Field for label decoration\n const { required } = inputProps;\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 hasPlaceholderAndAriaLabel = Boolean(\n inputProps.placeholder && inputProps[\"aria-label\"],\n );\n const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasPlaceholderAndAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Input label='Email' />\\n\" +\n \" - placeholder + aria-label: <Input placeholder='Email' aria-label='Email address' />\\n\" +\n \" - aria-labelledby for custom label association\",\n );\n }\n }\n\n const input = (\n <BaseInput\n ref={ref}\n className={cn(\n inputVariants({ size, variant, focusIndicator: true }),\n className,\n )}\n {...inputProps}\n />\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\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n * label=\"Password\"\n * description=\"Must be at least 8 characters\"\n * error=\"Password is too short\"\n * variant=\"error\"\n * />\n */\nexport type InputProps = Pick<KumoInputVariantsProps, \"size\" | \"variant\"> &\n BaseInputProps & {\n /** Label content for the input (enables 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 /** 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"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","Input","forwardRef","props","ref","className","label","labelTooltip","description","error","inputProps","required","hasLabel","hasPlaceholderAndAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AAUO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AAwDO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAP,EAAoB,KAAKI,CAAI,EAAE;AAAA;AAAA,IAE/BJ,EAAoB,QAAQG,CAAO,EAAE;AAAA;AAAA,IAErCE,KAAwB;AAAA,IACxBC,KAAkB;AAAA,EAAA;AAEtB;AAEO,MAAME,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAR,IAAO;AAAA,IACP,SAAAD,IAAU;AAAA,IACV,OAAAU;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDP,GAGE,EAAE,UAAAQ,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAA6B,GACjCH,EAAW,eAAeA,EAAW,YAAY,IAE7CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAA8B,CAACC,KAC/C,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;AAAA,MAAA;AAAA,MAED,GAAGK;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDd,EAAM,cAAc;"}
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as e, jsxs as c } from "react/jsx-runtime";
|
|
3
|
-
import { forwardRef as b, createContext as h, useContext as k } from "react";
|
|
4
|
-
import { c as a } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
|
-
import { R as N, P as I, Q as w, bi as y, bj as A } from "./vendor-base-ui-kxxocm122zr4pipe.js";
|
|
6
|
-
const j = {
|
|
7
|
-
variant: {
|
|
8
|
-
default: {
|
|
9
|
-
classes: "ring-kumo-line",
|
|
10
|
-
description: "Default radio appearance"
|
|
11
|
-
},
|
|
12
|
-
error: {
|
|
13
|
-
classes: "ring-destructive",
|
|
14
|
-
description: "Error state for validation failures"
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}, G = {
|
|
18
|
-
variant: "default"
|
|
19
|
-
};
|
|
20
|
-
function P({
|
|
21
|
-
variant: r = G.variant
|
|
22
|
-
} = {}) {
|
|
23
|
-
return a(j.variant[r].classes);
|
|
24
|
-
}
|
|
25
|
-
const u = h({
|
|
26
|
-
controlPosition: "start"
|
|
27
|
-
}), d = b(
|
|
28
|
-
({ className: r, disabled: t, variant: i = "default", label: o, value: s }, n) => {
|
|
29
|
-
const { controlPosition: l } = k(u);
|
|
30
|
-
return /* @__PURE__ */ c(
|
|
31
|
-
"label",
|
|
32
|
-
{
|
|
33
|
-
className: a(
|
|
34
|
-
"m-0 group relative inline-flex items-center gap-2",
|
|
35
|
-
// "start" (default): radio before label
|
|
36
|
-
// "end": label before radio using flex-row-reverse
|
|
37
|
-
l === "end" && "flex-row-reverse justify-end",
|
|
38
|
-
t ? "cursor-not-allowed opacity-50" : "cursor-pointer",
|
|
39
|
-
r
|
|
40
|
-
),
|
|
41
|
-
children: [
|
|
42
|
-
/* @__PURE__ */ e(
|
|
43
|
-
y,
|
|
44
|
-
{
|
|
45
|
-
ref: n,
|
|
46
|
-
value: s,
|
|
47
|
-
disabled: t,
|
|
48
|
-
className: a(
|
|
49
|
-
"relative flex h-4 w-4 items-center justify-center rounded-full border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2",
|
|
50
|
-
i === "error" ? "ring-kumo-danger" : "ring-kumo-line",
|
|
51
|
-
!t && "group-hover:ring-kumo-ring focus-visible:ring-kumo-ring focus-visible:outline-offset-3",
|
|
52
|
-
"data-checked:bg-kumo-contrast"
|
|
53
|
-
),
|
|
54
|
-
children: /* @__PURE__ */ e(A, { className: "flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "h-2 w-2 rounded-full bg-kumo-base" }) })
|
|
55
|
-
}
|
|
56
|
-
),
|
|
57
|
-
/* @__PURE__ */ e("span", { className: "text-base font-medium text-kumo-default", children: o })
|
|
58
|
-
]
|
|
59
|
-
}
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
);
|
|
63
|
-
d.displayName = "Radio.Item";
|
|
64
|
-
function m({
|
|
65
|
-
legend: r,
|
|
66
|
-
children: t,
|
|
67
|
-
orientation: i = "vertical",
|
|
68
|
-
error: o,
|
|
69
|
-
description: s,
|
|
70
|
-
defaultValue: n,
|
|
71
|
-
value: l,
|
|
72
|
-
onValueChange: f,
|
|
73
|
-
disabled: p,
|
|
74
|
-
controlPosition: x = "start",
|
|
75
|
-
name: g,
|
|
76
|
-
className: R
|
|
77
|
-
}) {
|
|
78
|
-
return /* @__PURE__ */ e(u.Provider, { value: { controlPosition: x }, children: /* @__PURE__ */ e(
|
|
79
|
-
N,
|
|
80
|
-
{
|
|
81
|
-
defaultValue: n,
|
|
82
|
-
value: l,
|
|
83
|
-
onValueChange: (v) => f?.(v),
|
|
84
|
-
disabled: p,
|
|
85
|
-
name: g,
|
|
86
|
-
children: /* @__PURE__ */ c(
|
|
87
|
-
I,
|
|
88
|
-
{
|
|
89
|
-
className: a(
|
|
90
|
-
"flex flex-col gap-4 rounded-lg border border-kumo-line p-4",
|
|
91
|
-
R
|
|
92
|
-
),
|
|
93
|
-
children: [
|
|
94
|
-
/* @__PURE__ */ e(w, { className: "text-lg font-medium text-kumo-default", children: r }),
|
|
95
|
-
/* @__PURE__ */ e(
|
|
96
|
-
"div",
|
|
97
|
-
{
|
|
98
|
-
className: a(
|
|
99
|
-
"flex gap-2",
|
|
100
|
-
i === "vertical" ? "flex-col" : "flex-row flex-wrap"
|
|
101
|
-
),
|
|
102
|
-
children: t
|
|
103
|
-
}
|
|
104
|
-
),
|
|
105
|
-
o && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-danger", children: o }),
|
|
106
|
-
s && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-subtle", children: s })
|
|
107
|
-
]
|
|
108
|
-
}
|
|
109
|
-
)
|
|
110
|
-
}
|
|
111
|
-
) });
|
|
112
|
-
}
|
|
113
|
-
m.displayName = "Radio.Group";
|
|
114
|
-
const V = {
|
|
115
|
-
Item: d,
|
|
116
|
-
Group: m
|
|
117
|
-
};
|
|
118
|
-
export {
|
|
119
|
-
j as K,
|
|
120
|
-
V as R,
|
|
121
|
-
m as a,
|
|
122
|
-
G as b,
|
|
123
|
-
P as r
|
|
124
|
-
};
|
|
125
|
-
//# sourceMappingURL=radio-394mfs3au5m8cgd8.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"radio-394mfs3au5m8cgd8.js","sources":["../../src/components/radio/radio.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\n\n/** Radio variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_RADIO_VARIANTS = {\n variant: {\n default: {\n classes: \"ring-kumo-line\",\n description: \"Default radio appearance\",\n },\n error: {\n classes: \"ring-destructive\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_RADIO_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_RADIO_VARIANTS\nexport type KumoRadioVariant = keyof typeof KUMO_RADIO_VARIANTS.variant;\n\nexport interface KumoRadioVariantsProps {\n /**\n * Visual variant.\n * - `\"default\"` — Standard radio appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoRadioVariant;\n}\n\nexport function radioVariants({\n variant = KUMO_RADIO_DEFAULT_VARIANTS.variant,\n}: KumoRadioVariantsProps = {}) {\n return cn(KUMO_RADIO_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type RadioVariant = KumoRadioVariant;\n\n/** Position of the radio control relative to its label */\nexport type RadioControlPosition = \"start\" | \"end\";\n\n// Context for passing controlPosition from Group to Items\nconst RadioGroupContext = createContext<{\n controlPosition: RadioControlPosition;\n}>({\n controlPosition: \"start\",\n});\n\n/**\n * Radio group component props (with built-in Fieldset and RadioGroup)\n *\n * @example\n * // Basic usage\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n * <Radio.Item label=\"Email\" value=\"email\" />\n * <Radio.Item label=\"SMS\" value=\"sms\" />\n * <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Horizontal layout\n * ```tsx\n * <Radio.Group legend=\"Size\" orientation=\"horizontal\" defaultValue=\"md\">\n * <Radio.Item label=\"Small\" value=\"sm\" />\n * <Radio.Item label=\"Medium\" value=\"md\" />\n * <Radio.Item label=\"Large\" value=\"lg\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // With error and description\n * ```tsx\n * <Radio.Group\n * legend=\"Payment method\"\n * error=\"Please select a payment method\"\n * description=\"Choose how you'd like to pay\"\n * >\n * <Radio.Item label=\"Credit Card\" value=\"card\" />\n * <Radio.Item label=\"PayPal\" value=\"paypal\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Controlled\n * ```tsx\n * const [value, setValue] = useState(\"email\");\n * <Radio.Group legend=\"Contact\" value={value} onValueChange={setValue}>\n * <Radio.Item label=\"Email\" value=\"email\" />\n * <Radio.Item label=\"Phone\" value=\"phone\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Label before radio (controlPosition=\"end\")\n * ```tsx\n * <Radio.Group legend=\"Options\" controlPosition=\"end\" defaultValue=\"a\">\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * <Radio.Item label=\"Option B\" value=\"b\" />\n * </Radio.Group>\n * ```\n */\nexport interface RadioGroupProps {\n /** Legend text for the group (required for accessibility) */\n legend: string;\n /** Child Radio.Item components */\n children: ReactNode;\n /** Layout direction of the radio items */\n orientation?: \"vertical\" | \"horizontal\";\n /** Error message for the group */\n error?: string;\n /** Helper text for the group */\n description?: ReactNode;\n /** Value of the radio that should be initially selected (uncontrolled) */\n defaultValue?: string;\n /** Value of the radio that should be selected (controlled) */\n value?: string;\n /** Event handler called when radio value changes */\n onValueChange?: (value: string) => void;\n /** Whether all radios in the group are disabled */\n disabled?: boolean;\n /** Position of radio control relative to label: \"start\" (default) puts radio before label, \"end\" puts label before radio */\n controlPosition?: RadioControlPosition;\n /** Form submission name for the radio group */\n name?: string;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Individual radio item within a group\n *\n * @example\n * ```tsx\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * ```\n *\n * @example\n * // Disabled item\n * ```tsx\n * <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n * ```\n */\nexport type RadioItemProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures */\n variant?: RadioVariant;\n /** Label text displayed next to radio (required) */\n label: string;\n /** Value of the radio (required) */\n value: string;\n /** Additional CSS classes for the label wrapper */\n className?: string;\n /** Whether the radio is disabled */\n disabled?: boolean;\n};\n\n// Radio.Item for use within Radio.Group\nconst RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(\n ({ className, disabled, variant = \"default\", label, value }, ref) => {\n const { controlPosition } = useContext(RadioGroupContext);\n\n return (\n <label\n className={cn(\n \"m-0 group relative inline-flex items-center gap-2\",\n // \"start\" (default): radio before label\n // \"end\": label before radio using flex-row-reverse\n controlPosition === \"end\" && \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n className,\n )}\n >\n <BaseRadio.Root\n ref={ref}\n value={value}\n disabled={disabled}\n className={cn(\n \"relative flex h-4 w-4 items-center justify-center rounded-full border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n !disabled &&\n \"group-hover:ring-kumo-ring focus-visible:ring-kumo-ring focus-visible:outline-offset-3\",\n \"data-checked:bg-kumo-contrast\",\n )}\n >\n <BaseRadio.Indicator className=\"flex items-center justify-center\">\n <span className=\"h-2 w-2 rounded-full bg-kumo-base\" />\n </BaseRadio.Indicator>\n </BaseRadio.Root>\n <span className=\"text-base font-medium text-kumo-default\">{label}</span>\n </label>\n );\n },\n);\n\nRadioItem.displayName = \"Radio.Item\";\n\n// Radio.Group with built-in Fieldset and RadioGroup\nfunction RadioGroup({\n legend,\n children,\n orientation = \"vertical\",\n error,\n description,\n defaultValue,\n value,\n onValueChange,\n disabled,\n controlPosition = \"start\",\n name,\n className,\n}: RadioGroupProps) {\n return (\n <RadioGroupContext.Provider value={{ controlPosition }}>\n <BaseRadioGroup\n defaultValue={defaultValue}\n value={value}\n onValueChange={(newValue) => onValueChange?.(newValue as string)}\n disabled={disabled}\n name={name}\n >\n <Fieldset.Root\n className={cn(\n \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n className,\n )}\n >\n <Fieldset.Legend className=\"text-lg font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n <div\n className={cn(\n \"flex gap-2\",\n orientation === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\",\n )}\n >\n {children}\n </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 </BaseRadioGroup>\n </RadioGroupContext.Provider>\n );\n}\n\nRadioGroup.displayName = \"Radio.Group\";\n\n// Export RadioGroup directly for external usage\nexport { RadioGroup };\n\n/**\n * Radio — radio button group for single-select choices.\n *\n * Compound component: `Radio.Group` (with built-in Fieldset) and `Radio.Item`.\n * Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.\n *\n * @example\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n * <Radio.Item label=\"Email\" value=\"email\" />\n * <Radio.Item label=\"SMS\" value=\"sms\" />\n * <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n */\nexport const Radio = {\n Item: RadioItem,\n Group: RadioGroup,\n};\n"],"names":["KUMO_RADIO_VARIANTS","KUMO_RADIO_DEFAULT_VARIANTS","radioVariants","variant","cn","RadioGroupContext","createContext","RadioItem","forwardRef","className","disabled","label","value","ref","controlPosition","useContext","jsxs","jsx","BaseRadio.Root","BaseRadio.Indicator","RadioGroup","legend","children","orientation","error","description","defaultValue","onValueChange","name","BaseRadioGroup","newValue","Fieldset.Root","Fieldset.Legend","Radio"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"select-jxxef2rf76pgdrf8.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\n/**\n * Normalizes items to array format for Base UI.\n * Object maps are converted to array format so Base UI can properly\n * handle value matching and placeholder display.\n */\nfunction normalizeItems<T>(\n items:\n | Record<string, ReactNode>\n | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReadonlyArray<{ label: ReactNode; value: T }> {\n if (Array.isArray(items)) {\n return items;\n }\n // Convert object map to array format\n return Object.entries(items).map(([key, label]) => ({\n value: key as T,\n label,\n }));\n}\n\n/**\n * Auto-generates Select.Option elements from items prop.\n * Only used when children are not explicitly provided.\n * Filters out null values (typically used for placeholders).\n */\nfunction renderOptionsFromItems<T>(\n items:\n | Record<string, ReactNode>\n | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReactNode {\n const normalizedItems = normalizeItems(items);\n\n // Filter out null values and render options\n return normalizedItems\n .filter((item) => item.value !== null)\n .map((item, index) => (\n <Option\n key={typeof item.value === \"string\" ? item.value : `option-${index}`}\n value={item.value}\n >\n {item.label}\n </Option>\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 /**\n * Label content for the select.\n * When provided, enables the Field wrapper with a visible label.\n * For accessibility without a visible label, use `aria-label` instead.\n */\n label?: ReactNode;\n /**\n * @deprecated Use `aria-label` for hidden labels instead of `label` + `hideLabel={true}`.\n * When `label` is provided without `hideLabel`, the label is now visible by default (matching Input behavior).\n * This prop will be removed in a future version.\n */\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 * **Accessible Name Required:** Select should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with visible label\n * 2. `aria-label` - for selects without visible label (accessibility-only)\n * 3. `aria-labelledby` - for custom label association\n *\n * @example\n * ```tsx\n * // With visible label (recommended)\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 * // Without visible label (use aria-label for accessibility)\n * <Select aria-label=\"Select a country\" onValueChange={setValue}>\n * <Select.Option value=\"us\">United States</Select.Option>\n * </Select>\n * ```\n */\nexport interface SelectProps {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /**\n * Label content for the select.\n * When provided, enables the Field wrapper with a visible label above the select.\n * For accessibility without a visible label, use `aria-label` instead.\n */\n label?: ReactNode;\n /**\n * @deprecated Use `aria-label` for hidden labels instead of `label` + `hideLabel={true}`.\n * When `label` is provided without `hideLabel`, the label is now visible by default (matching Input behavior).\n * This prop will be removed in a future version.\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,\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 // Deprecation warning for hideLabel\n if (process.env.NODE_ENV !== \"production\" && hideLabel !== undefined) {\n console.warn(\n \"[Kumo Select]: `hideLabel` is deprecated. For hidden labels, use `aria-label` instead of `label` + `hideLabel={true}`.\\n\" +\n \" Migration:\\n\" +\n ' - For visible labels: <Select label=\"Country\" /> (hideLabel no longer needed)\\n' +\n ' - For hidden labels: <Select aria-label=\"Select a country\" /> (remove label and hideLabel)',\n );\n }\n\n // New behavior: label presence determines Field wrapper visibility (like Input)\n // hideLabel is only respected for backward compatibility when explicitly set to true\n const useFieldWrapper = label && hideLabel !== true;\n const triggerLabelledBy = useFieldWrapper\n ? undefined\n : (ariaLabelledby ?? (label ? labelId : undefined));\n const triggerAriaLabel =\n ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : undefined);\n\n // Normalize items to array format for Base UI compatibility\n // This fixes placeholder not showing with object map items\n const normalizedItems = props.items ? normalizeItems(props.items) : undefined;\n\n // Auto-render children from items if children not provided\n const renderedChildren =\n children ?? (props.items ? renderOptionsFromItems(props.items) : null);\n\n const selectControl = (\n <SelectBase.Root\n {...props}\n items={normalizedItems}\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 placeholder={placeholder}>\n {renderValue}\n </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 {renderedChildren}\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 // Still show description/error for accessibility and UX\n const normalizedError = error\n ? typeof error === \"string\"\n ? { message: error, match: true as const }\n : error\n : undefined;\n\n return (\n <div className=\"grid gap-2\">\n {label && (\n <span id={labelId} className=\"sr-only\">\n {label}\n </span>\n )}\n {selectControl}\n {normalizedError ? (\n <span className=\"text-sm text-kumo-danger\">\n {normalizedError.message}\n </span>\n ) : (\n description && (\n <span className=\"text-sm leading-snug text-kumo-subtle\">\n {description}\n </span>\n )\n )}\n </div>\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":["normalizeItems","items","key","label","renderOptionsFromItems","item","index","jsx","Option","Select","children","className","renderValue","hideLabel","placeholder","loading","labelTooltip","description","error","required","props","labelId","useId","propLookup","ariaLabel","ariaLabelledby","fallbackLabel","useFieldWrapper","triggerLabelledBy","triggerAriaLabel","normalizedItems","renderedChildren","selectControl","jsxs","SelectBase.Root","SelectBase.Trigger","cn","buttonVariants","SkeletonLine","SelectBase.Value","SelectBase.Icon","CaretUpDownIcon","SelectBase.Portal","SelectBase.Positioner","SelectBase.Popup","Field","normalizedError","value","SelectBase.Item","SelectBase.ItemText","SelectBase.ItemIndicator","CheckIcon"],"mappings":";;;;;;;;;AAsEA,SAASA,EACPC,GAG+C;AAC/C,SAAI,MAAM,QAAQA,CAAK,IACdA,IAGF,OAAO,QAAQA,CAAK,EAAE,IAAI,CAAC,CAACC,GAAKC,CAAK,OAAO;AAAA,IAClD,OAAOD;AAAA,IACP,OAAAC;AAAA,EAAA,EACA;AACJ;AAOA,SAASC,EACPH,GAGW;AAIX,SAHwBD,EAAeC,CAAK,EAIzC,OAAO,CAACI,MAASA,EAAK,UAAU,IAAI,EACpC,IAAI,CAACA,GAAMC,MACV,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,OAAOH,EAAK;AAAA,MAEX,UAAAA,EAAK;AAAA,IAAA;AAAA,IAHD,OAAOA,EAAK,SAAU,WAAWA,EAAK,QAAQ,UAAUC,CAAK;AAAA,EAAA,CAKrE;AACL;AA2GO,SAASG,EAAwD;AAAA,EACtE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAT;AAAA,EACA,WAAAU;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAA6D;AAC3D,QAAMC,IAAUC,EAAA,GACVC,IAAaH,GACbI,IAAYD,EAAW,YAAY,GACnCE,IAAiBF,EAAW,iBAAiB,GAE7CG,IAAgB,OAAOvB,KAAU,WAAWA,IAAQW;AAG1D,EAAI,QAAQ,IAAI,aAAa,gBAAgBD,MAAc,UACzD,QAAQ;AAAA,IACN;AAAA,EAAA;AASJ,QAAMc,IAAkBxB,KAASU,MAAc,IACzCe,IAAoBD,IACtB,SACCF,MAAmBtB,IAAQkB,IAAU,SACpCQ,IACJL,MAAeI,IAAoC,SAAhBF,IAI/BI,IAAkBV,EAAM,QAAQpB,EAAeoB,EAAM,KAAK,IAAI,QAG9DW,IACJrB,MAAaU,EAAM,QAAQhB,EAAuBgB,EAAM,KAAK,IAAI,OAE7DY,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGd;AAAA,MACJ,OAAOU;AAAA,MACP,UAAUf,KAAWK,EAAM;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAa;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACTC,EAAA;AAAA,cACA;AAAA,cACA;AAAA,cACAjB,EAAM,YAAY;AAAA,cAClBT;AAAA,YAAA;AAAA,YAEF,cAAYkB;AAAA,YACZ,mBAAiBD;AAAA,YAEhB,UAAA;AAAA,cAAAb,IACC,gBAAAR,EAAC+B,GAAA,EAAa,WAAU,OAAA,CAAO,sBAE9BC,GAAA,EAAiB,aAAAzB,GACf,UAAAF,EAAA,CACH;AAAA,cAEF,gBAAAL,EAACiC,GAAA,EAAgB,WAAU,qBACzB,UAAA,gBAAAjC,EAACkC,KAAgB,EAAA,CACnB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEDC,GAAA,EACC,UAAA,gBAAAnC,EAACoC,GAAA,EACC,UAAA,gBAAApC;AAAA,UAACqC;AAAAA,UAAA;AAAA,YACC,WAAWR;AAAA,cACT;AAAA;AAAA,cACA;AAAA;AAAA;AAAA,cAEA;AAAA;AAAA,YAAA;AAAA,YAGD,UAAAL;AAAA,UAAA;AAAA,QAAA,GAEL,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKJ,MAAIJ;AACF,WACE,gBAAApB;AAAA,MAACsC;AAAA,MAAA;AAAA,QACC,OAAA1C;AAAA,QACA,UAAAgB;AAAA,QACA,cAAAH;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGL,UAAAc;AAAA,MAAA;AAAA,IAAA;AAOP,QAAMc,IAAkB5B,IACpB,OAAOA,KAAU,WACf,EAAE,SAASA,EAA4B,IACvCA,IACF;AAEJ,SACE,gBAAAe,EAAC,OAAA,EAAI,WAAU,cACZ,UAAA;AAAA,IAAA9B,uBACE,QAAA,EAAK,IAAIkB,GAAS,WAAU,WAC1B,UAAAlB,GACH;AAAA,IAED6B;AAAA,IACAc,IACC,gBAAAvC,EAAC,QAAA,EAAK,WAAU,4BACb,UAAAuC,EAAgB,QAAA,CACnB,IAEA7B,KACE,gBAAAV,EAAC,QAAA,EAAK,WAAU,yCACb,UAAAU,EAAA,CACH;AAAA,EAAA,GAGN;AAEJ;AAOA,SAAST,EAAU,EAAE,UAAAE,GAAU,OAAAqC,KAAyB;AACtD,SACE,gBAAAd;AAAA,IAACe;AAAAA,IAAA;AAAA,MACC,OAAAD;AAAA,MACA,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAxC,EAAC0C,GAAA,EAAqB,UAAAvC,GAAS;AAAA,0BAC9BwC,GAAA,EACC,UAAA,gBAAA3C,EAAC4C,KAAU,EAAA,CACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA1C,EAAO,SAASD;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sensitive-input-i7ey1w0ky7nco012.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,257 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as o, jsxs as R } from "react/jsx-runtime";
|
|
3
|
-
import { forwardRef as _, createContext as B, useContext as D } from "react";
|
|
4
|
-
import { c as u } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
|
-
import { F as G } from "./field-ftrgblg9mbmz9eo3.js";
|
|
6
|
-
import { P as K, Q as O, b2 as F, b3 as I } from "./vendor-base-ui-kxxocm122zr4pipe.js";
|
|
7
|
-
const y = {
|
|
8
|
-
size: {
|
|
9
|
-
sm: {
|
|
10
|
-
classes: "h-5.5 w-8.5",
|
|
11
|
-
description: "Small switch for compact UIs"
|
|
12
|
-
},
|
|
13
|
-
base: {
|
|
14
|
-
classes: "h-6.5 w-10.5",
|
|
15
|
-
description: "Default switch size"
|
|
16
|
-
},
|
|
17
|
-
lg: {
|
|
18
|
-
classes: "h-7.5 w-12.5",
|
|
19
|
-
description: "Large switch for prominent toggles"
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
variant: {
|
|
23
|
-
default: {
|
|
24
|
-
classes: "",
|
|
25
|
-
description: "Default switch appearance"
|
|
26
|
-
},
|
|
27
|
-
error: {
|
|
28
|
-
classes: "ring-kumo-danger",
|
|
29
|
-
description: "Error state for validation failures"
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
}, C = {
|
|
33
|
-
size: "base",
|
|
34
|
-
variant: "default"
|
|
35
|
-
};
|
|
36
|
-
function P({
|
|
37
|
-
size: a = C.size,
|
|
38
|
-
variant: l = C.variant
|
|
39
|
-
} = {}) {
|
|
40
|
-
return u(
|
|
41
|
-
y.size[a].classes,
|
|
42
|
-
y.variant[l].classes
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
const A = B({
|
|
46
|
-
controlFirst: !0
|
|
47
|
-
}), T = _(
|
|
48
|
-
({
|
|
49
|
-
className: a,
|
|
50
|
-
checked: l,
|
|
51
|
-
disabled: e,
|
|
52
|
-
size: d = "base",
|
|
53
|
-
variant: r = "default",
|
|
54
|
-
label: t,
|
|
55
|
-
labelTooltip: h,
|
|
56
|
-
required: n,
|
|
57
|
-
controlFirst: f = !0,
|
|
58
|
-
onCheckedChange: k,
|
|
59
|
-
transitioning: i,
|
|
60
|
-
...c
|
|
61
|
-
}, w) => {
|
|
62
|
-
const b = typeof t == "string" ? t : "Switch", m = /* @__PURE__ */ o(
|
|
63
|
-
F,
|
|
64
|
-
{
|
|
65
|
-
ref: w,
|
|
66
|
-
checked: l,
|
|
67
|
-
disabled: e,
|
|
68
|
-
onCheckedChange: k,
|
|
69
|
-
nativeButton: !0,
|
|
70
|
-
render: (N, s) => {
|
|
71
|
-
const {
|
|
72
|
-
ref: g,
|
|
73
|
-
className: x,
|
|
74
|
-
role: p,
|
|
75
|
-
"aria-checked": v,
|
|
76
|
-
"aria-pressed": E,
|
|
77
|
-
...j
|
|
78
|
-
} = N, L = u(
|
|
79
|
-
"interactive flex items-center gap-2 rounded-full border border-transparent bg-kumo-recessed p-1 transition-colors",
|
|
80
|
-
P({ size: d, variant: r }),
|
|
81
|
-
{
|
|
82
|
-
"bg-kumo-brand": s.checked && !e && r !== "error",
|
|
83
|
-
"bg-kumo-danger": s.checked && !e && r === "error",
|
|
84
|
-
"hover:bg-kumo-brand-hover": s.checked && !i && !e && r !== "error",
|
|
85
|
-
"hover:bg-kumo-danger/90": s.checked && !i && !e && r === "error",
|
|
86
|
-
"hover:bg-kumo-interact": !s.checked && !i && !e,
|
|
87
|
-
"cursor-not-allowed opacity-50": e
|
|
88
|
-
},
|
|
89
|
-
i ? "cursor-wait" : e ? "" : "cursor-pointer",
|
|
90
|
-
a,
|
|
91
|
-
x
|
|
92
|
-
), S = c.role ?? p ?? "switch", U = S === "switch" ? { "aria-checked": s.checked } : { "aria-pressed": s.checked };
|
|
93
|
-
return /* @__PURE__ */ o(
|
|
94
|
-
"button",
|
|
95
|
-
{
|
|
96
|
-
...j,
|
|
97
|
-
...c,
|
|
98
|
-
ref: g,
|
|
99
|
-
type: "button",
|
|
100
|
-
role: S,
|
|
101
|
-
...U,
|
|
102
|
-
"aria-busy": i || void 0,
|
|
103
|
-
"aria-label": c["aria-label"] ?? b,
|
|
104
|
-
className: L,
|
|
105
|
-
children: /* @__PURE__ */ o(
|
|
106
|
-
I,
|
|
107
|
-
{
|
|
108
|
-
className: u(
|
|
109
|
-
"pointer-events-none aspect-square h-full rounded-full bg-white transition-all",
|
|
110
|
-
{
|
|
111
|
-
"translate-x-full rtl:translate-x-[-100%]": s.checked
|
|
112
|
-
}
|
|
113
|
-
)
|
|
114
|
-
}
|
|
115
|
-
)
|
|
116
|
-
}
|
|
117
|
-
);
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
);
|
|
121
|
-
return t ? /* @__PURE__ */ o(
|
|
122
|
-
G,
|
|
123
|
-
{
|
|
124
|
-
label: t,
|
|
125
|
-
required: n,
|
|
126
|
-
labelTooltip: h,
|
|
127
|
-
controlFirst: f,
|
|
128
|
-
children: m
|
|
129
|
-
}
|
|
130
|
-
) : m;
|
|
131
|
-
}
|
|
132
|
-
);
|
|
133
|
-
T.displayName = "Switch";
|
|
134
|
-
const z = _(
|
|
135
|
-
({
|
|
136
|
-
className: a,
|
|
137
|
-
checked: l,
|
|
138
|
-
disabled: e,
|
|
139
|
-
size: d = "base",
|
|
140
|
-
variant: r = "default",
|
|
141
|
-
label: t,
|
|
142
|
-
onCheckedChange: h,
|
|
143
|
-
transitioning: n
|
|
144
|
-
}, f) => {
|
|
145
|
-
const { controlFirst: k } = D(A);
|
|
146
|
-
return /* @__PURE__ */ R(
|
|
147
|
-
"label",
|
|
148
|
-
{
|
|
149
|
-
className: u(
|
|
150
|
-
"m-0 relative inline-flex items-center gap-2",
|
|
151
|
-
// Control first (default): switch before label
|
|
152
|
-
// Label first: label before switch using flex-row-reverse
|
|
153
|
-
!k && "flex-row-reverse justify-end",
|
|
154
|
-
e ? "cursor-not-allowed opacity-50" : "cursor-pointer",
|
|
155
|
-
a
|
|
156
|
-
),
|
|
157
|
-
children: [
|
|
158
|
-
/* @__PURE__ */ o(
|
|
159
|
-
F,
|
|
160
|
-
{
|
|
161
|
-
ref: f,
|
|
162
|
-
checked: l,
|
|
163
|
-
disabled: e,
|
|
164
|
-
onCheckedChange: h,
|
|
165
|
-
nativeButton: !0,
|
|
166
|
-
render: (i, c) => {
|
|
167
|
-
const {
|
|
168
|
-
ref: w,
|
|
169
|
-
className: b,
|
|
170
|
-
role: m,
|
|
171
|
-
"aria-checked": N,
|
|
172
|
-
"aria-pressed": s,
|
|
173
|
-
...g
|
|
174
|
-
} = i, x = u(
|
|
175
|
-
"interactive flex items-center gap-2 rounded-full border border-transparent bg-kumo-recessed p-1 transition-colors",
|
|
176
|
-
P({ size: d, variant: r }),
|
|
177
|
-
{
|
|
178
|
-
"bg-kumo-brand": c.checked && !e && r !== "error",
|
|
179
|
-
"bg-kumo-danger": c.checked && !e && r === "error",
|
|
180
|
-
"hover:bg-kumo-brand-hover": c.checked && !n && !e && r !== "error",
|
|
181
|
-
"hover:bg-kumo-danger/90": c.checked && !n && !e && r === "error",
|
|
182
|
-
"hover:bg-kumo-interact": !c.checked && !n && !e,
|
|
183
|
-
"cursor-not-allowed opacity-50": e
|
|
184
|
-
},
|
|
185
|
-
n ? "cursor-wait" : e ? "" : "cursor-pointer",
|
|
186
|
-
b
|
|
187
|
-
), p = m ?? "switch", v = p === "switch" ? { "aria-checked": c.checked } : { "aria-pressed": c.checked };
|
|
188
|
-
return /* @__PURE__ */ o(
|
|
189
|
-
"button",
|
|
190
|
-
{
|
|
191
|
-
...g,
|
|
192
|
-
ref: w,
|
|
193
|
-
type: "button",
|
|
194
|
-
role: p,
|
|
195
|
-
...v,
|
|
196
|
-
"aria-busy": n || void 0,
|
|
197
|
-
className: x,
|
|
198
|
-
children: /* @__PURE__ */ o(
|
|
199
|
-
I,
|
|
200
|
-
{
|
|
201
|
-
className: u(
|
|
202
|
-
"pointer-events-none aspect-square h-full rounded-full bg-white transition-all",
|
|
203
|
-
{
|
|
204
|
-
"translate-x-full rtl:translate-x-[-100%]": c.checked
|
|
205
|
-
}
|
|
206
|
-
)
|
|
207
|
-
}
|
|
208
|
-
)
|
|
209
|
-
}
|
|
210
|
-
);
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
),
|
|
214
|
-
/* @__PURE__ */ o("span", { className: "text-base font-medium text-kumo-default", children: t })
|
|
215
|
-
]
|
|
216
|
-
}
|
|
217
|
-
);
|
|
218
|
-
}
|
|
219
|
-
);
|
|
220
|
-
z.displayName = "Switch.Item";
|
|
221
|
-
function V({
|
|
222
|
-
legend: a,
|
|
223
|
-
children: l,
|
|
224
|
-
error: e,
|
|
225
|
-
description: d,
|
|
226
|
-
disabled: r,
|
|
227
|
-
controlFirst: t = !0,
|
|
228
|
-
className: h
|
|
229
|
-
}) {
|
|
230
|
-
return /* @__PURE__ */ o(A.Provider, { value: { controlFirst: t }, children: /* @__PURE__ */ R(
|
|
231
|
-
K,
|
|
232
|
-
{
|
|
233
|
-
className: u(
|
|
234
|
-
"flex flex-col gap-4 rounded-lg border border-kumo-line p-4",
|
|
235
|
-
h
|
|
236
|
-
),
|
|
237
|
-
disabled: r,
|
|
238
|
-
children: [
|
|
239
|
-
/* @__PURE__ */ o(O, { className: "text-lg font-medium text-kumo-default", children: a }),
|
|
240
|
-
/* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: l }),
|
|
241
|
-
e && /* @__PURE__ */ o("p", { className: "text-sm text-kumo-danger", children: e }),
|
|
242
|
-
d && /* @__PURE__ */ o("p", { className: "text-sm text-kumo-subtle", children: d })
|
|
243
|
-
]
|
|
244
|
-
}
|
|
245
|
-
) });
|
|
246
|
-
}
|
|
247
|
-
const q = Object.assign(T, {
|
|
248
|
-
Item: z,
|
|
249
|
-
Group: V
|
|
250
|
-
});
|
|
251
|
-
q.displayName = "Switch";
|
|
252
|
-
export {
|
|
253
|
-
y as K,
|
|
254
|
-
q as S,
|
|
255
|
-
C as a
|
|
256
|
-
};
|
|
257
|
-
//# sourceMappingURL=switch-b0xo8fxsfzv87krj.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"switch-b0xo8fxsfzv87krj.js","sources":["../../src/components/switch/switch.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport {\n forwardRef,\n type ButtonHTMLAttributes,\n type Ref,\n type ReactNode,\n createContext,\n useContext,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Field } from \"../field/field\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\n\n/** Switch size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_SWITCH_VARIANTS = {\n size: {\n sm: {\n classes: \"h-5.5 w-8.5\",\n description: \"Small switch for compact UIs\",\n },\n base: {\n classes: \"h-6.5 w-10.5\",\n description: \"Default switch size\",\n },\n lg: {\n classes: \"h-7.5 w-12.5\",\n description: \"Large switch for prominent toggles\",\n },\n },\n variant: {\n default: {\n classes: \"\",\n description: \"Default switch appearance\",\n },\n error: {\n classes: \"ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_SWITCH_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_SWITCH_VARIANTS\nexport type KumoSwitchSize = keyof typeof KUMO_SWITCH_VARIANTS.size;\nexport type KumoSwitchVariant = keyof typeof KUMO_SWITCH_VARIANTS.variant;\n\nexport interface KumoSwitchVariantsProps {\n /**\n * Switch size.\n * - `\"sm\"` — Small for compact UIs\n * - `\"base\"` — Default size\n * - `\"lg\"` — Large for prominent toggles\n * @default \"base\"\n */\n size?: KumoSwitchSize;\n /**\n * Visual variant.\n * - `\"default\"` — Standard switch appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoSwitchVariant;\n}\n\nexport function switchVariants({\n size = KUMO_SWITCH_DEFAULT_VARIANTS.size,\n variant = KUMO_SWITCH_DEFAULT_VARIANTS.variant,\n}: KumoSwitchVariantsProps = {}) {\n return cn(\n KUMO_SWITCH_VARIANTS.size[size].classes,\n KUMO_SWITCH_VARIANTS.variant[variant].classes,\n );\n}\n\n// Legacy type aliases for backwards compatibility\nexport type SwitchSize = KumoSwitchSize;\nexport type SwitchVariant = KumoSwitchVariant;\n\n// Context for passing controlFirst from Group to Items\nconst SwitchGroupContext = createContext<{ controlFirst: boolean }>({\n controlFirst: true,\n});\n\n/**\n * Single switch component props (with built-in Field)\n *\n * Usage patterns:\n *\n * Basic usage:\n * ```tsx\n * <Switch label=\"Enable notifications\" checked={true} onCheckedChange={setChecked} />\n * ```\n *\n * Label first layout:\n * ```tsx\n * <Switch label=\"Dark mode\" checked={false} onCheckedChange={setChecked} controlFirst={false} />\n * ```\n *\n * Error variant (visual only, no error text):\n * ```tsx\n * <Switch label=\"Required setting\" variant=\"error\" checked={false} onCheckedChange={setChecked} />\n * ```\n *\n * @property {string} label - Label text for the switch (Field wrapper is built-in)\n * @property {boolean} [controlFirst] - When true (default), switch appears before label\n */\nexport type SwitchProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"children\"\n> & {\n /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n variant?: SwitchVariant;\n /** Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes. */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /**\n * Whether the switch is required.\n * When explicitly false, shows \"(optional)\" text after the label.\n */\n required?: boolean;\n /** When true (default), switch appears before label. When false, label appears before switch. */\n controlFirst?: boolean;\n size?: KumoSwitchSize;\n checked?: boolean;\n disabled?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n transitioning?: boolean;\n};\n\n/**\n * Switch group component props (with built-in Fieldset)\n *\n * Usage:\n * ```tsx\n * <Switch.Group\n * legend=\"Notification settings\"\n * error=\"You must enable at least one notification type\"\n * >\n * <Switch.Item label=\"Email notifications\" value=\"email\" />\n * <Switch.Item label=\"SMS notifications\" value=\"sms\" />\n * </Switch.Group>\n * ```\n */\nexport interface SwitchGroupProps {\n /** Legend text for the group */\n legend: string;\n /** Child Switch.Item components */\n children: ReactNode;\n /** Error message for the group (only appears in groups, not single switches) */\n error?: string;\n /** Helper text for the group */\n description?: ReactNode;\n /** Whether all switches in the group are disabled */\n disabled?: boolean;\n /** When true (default), switch appears before label. When false, label appears before switch. */\n controlFirst?: boolean;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Individual switch item within a group\n */\nexport type SwitchItemProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures */\n variant?: SwitchVariant;\n /** Label text displayed next to switch */\n label: string;\n /** Additional CSS classes for the label wrapper */\n className?: string;\n checked?: boolean;\n disabled?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n size?: KumoSwitchSize;\n transitioning?: boolean;\n};\n\n// Single switch with built-in Field\nconst SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(\n (\n {\n className,\n checked,\n disabled,\n size = \"base\",\n variant = \"default\",\n label,\n labelTooltip,\n required,\n controlFirst = true,\n onCheckedChange,\n transitioning,\n ...props\n },\n ref,\n ) => {\n // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n const ariaLabelFallback = typeof label === \"string\" ? label : \"Switch\";\n const switchControl = (\n <BaseSwitch.Root\n ref={ref}\n checked={checked}\n disabled={disabled}\n onCheckedChange={onCheckedChange}\n nativeButton\n render={(rootProps, state) => {\n const {\n ref: rootRef,\n className: baseClassName,\n role: baseRole,\n \"aria-checked\": _ariaChecked,\n \"aria-pressed\": _ariaPressed,\n ...restRootProps\n } = rootProps as typeof rootProps & {\n ref?: Ref<HTMLButtonElement>;\n className?: string;\n role?: string;\n \"aria-checked\"?: boolean;\n \"aria-pressed\"?: boolean;\n };\n\n const mergedClassName = cn(\n \"interactive flex items-center gap-2 rounded-full border border-transparent bg-kumo-recessed p-1 transition-colors\",\n switchVariants({ size, variant }),\n {\n \"bg-kumo-brand\":\n state.checked && !disabled && variant !== \"error\",\n \"bg-kumo-danger\":\n state.checked && !disabled && variant === \"error\",\n \"hover:bg-kumo-brand-hover\":\n state.checked &&\n !transitioning &&\n !disabled &&\n variant !== \"error\",\n \"hover:bg-kumo-danger/90\":\n state.checked &&\n !transitioning &&\n !disabled &&\n variant === \"error\",\n \"hover:bg-kumo-interact\":\n !state.checked && !transitioning && !disabled,\n \"cursor-not-allowed opacity-50\": disabled,\n },\n transitioning ? \"cursor-wait\" : !disabled ? \"cursor-pointer\" : \"\",\n className,\n baseClassName,\n );\n\n const role =\n (props.role as string | undefined) ?? baseRole ?? \"switch\";\n const checkedA11yProps =\n role === \"switch\"\n ? { \"aria-checked\": state.checked }\n : { \"aria-pressed\": state.checked };\n\n return (\n <button\n {...restRootProps}\n {...props}\n ref={rootRef}\n type=\"button\"\n role={role}\n {...checkedA11yProps}\n aria-busy={transitioning || undefined}\n aria-label={props[\"aria-label\"] ?? ariaLabelFallback}\n className={mergedClassName}\n >\n <BaseSwitch.Thumb\n className={cn(\n \"pointer-events-none aspect-square h-full rounded-full bg-white transition-all\",\n {\n \"translate-x-full rtl:translate-x-[-100%]\": state.checked,\n },\n )}\n />\n </button>\n );\n }}\n />\n );\n\n // Wrap in Field (built-in) - no description for single switches\n // If no label provided, return bare switch (for use in other components)\n if (!label) {\n return switchControl;\n }\n\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n controlFirst={controlFirst}\n >\n {switchControl}\n </Field>\n );\n },\n);\n\nSwitchBase.displayName = \"Switch\";\n\n// Switch.Item for use within Switch.Group\nconst SwitchItem = forwardRef<HTMLButtonElement, SwitchItemProps>(\n (\n {\n className,\n checked,\n disabled,\n size = \"base\",\n variant = \"default\",\n label,\n onCheckedChange,\n transitioning,\n },\n ref,\n ) => {\n const { controlFirst } = useContext(SwitchGroupContext);\n\n return (\n <label\n className={cn(\n \"m-0 relative inline-flex items-center gap-2\",\n // Control first (default): switch before label\n // Label first: label before switch 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 <BaseSwitch.Root\n ref={ref}\n checked={checked}\n disabled={disabled}\n onCheckedChange={onCheckedChange}\n nativeButton\n render={(rootProps, state) => {\n const {\n ref: rootRef,\n className: baseClassName,\n role: baseRole,\n \"aria-checked\": _ariaChecked,\n \"aria-pressed\": _ariaPressed,\n ...restRootProps\n } = rootProps as typeof rootProps & {\n ref?: Ref<HTMLButtonElement>;\n className?: string;\n role?: string;\n \"aria-checked\"?: boolean;\n \"aria-pressed\"?: boolean;\n };\n\n const mergedClassName = cn(\n \"interactive flex items-center gap-2 rounded-full border border-transparent bg-kumo-recessed p-1 transition-colors\",\n switchVariants({ size, variant }),\n {\n \"bg-kumo-brand\":\n state.checked && !disabled && variant !== \"error\",\n \"bg-kumo-danger\":\n state.checked && !disabled && variant === \"error\",\n \"hover:bg-kumo-brand-hover\":\n state.checked &&\n !transitioning &&\n !disabled &&\n variant !== \"error\",\n \"hover:bg-kumo-danger/90\":\n state.checked &&\n !transitioning &&\n !disabled &&\n variant === \"error\",\n \"hover:bg-kumo-interact\":\n !state.checked && !transitioning && !disabled,\n \"cursor-not-allowed opacity-50\": disabled,\n },\n transitioning ? \"cursor-wait\" : !disabled ? \"cursor-pointer\" : \"\",\n baseClassName,\n );\n\n const role = baseRole ?? \"switch\";\n const checkedA11yProps =\n role === \"switch\"\n ? { \"aria-checked\": state.checked }\n : { \"aria-pressed\": state.checked };\n\n return (\n <button\n {...restRootProps}\n ref={rootRef}\n type=\"button\"\n role={role}\n {...checkedA11yProps}\n aria-busy={transitioning || undefined}\n className={mergedClassName}\n >\n <BaseSwitch.Thumb\n className={cn(\n \"pointer-events-none aspect-square h-full rounded-full bg-white transition-all\",\n {\n \"translate-x-full rtl:translate-x-[-100%]\": state.checked,\n },\n )}\n />\n </button>\n );\n }}\n />\n <span className=\"text-base font-medium text-kumo-default\">{label}</span>\n </label>\n );\n },\n);\n\nSwitchItem.displayName = \"Switch.Item\";\n\n// Switch.Group with built-in Fieldset\nfunction SwitchGroup({\n legend,\n children,\n error,\n description,\n disabled,\n controlFirst = true,\n className,\n}: SwitchGroupProps) {\n return (\n <SwitchGroupContext.Provider value={{ controlFirst }}>\n <Fieldset.Root\n className={cn(\n \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n className,\n )}\n disabled={disabled}\n >\n <Fieldset.Legend className=\"text-lg font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\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 </SwitchGroupContext.Provider>\n );\n}\n\n// Compound component\nexport const Switch = Object.assign(SwitchBase, {\n Item: SwitchItem,\n Group: SwitchGroup,\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["KUMO_SWITCH_VARIANTS","KUMO_SWITCH_DEFAULT_VARIANTS","switchVariants","size","variant","cn","SwitchGroupContext","createContext","SwitchBase","forwardRef","className","checked","disabled","label","labelTooltip","required","controlFirst","onCheckedChange","transitioning","props","ref","ariaLabelFallback","switchControl","jsx","BaseSwitch.Root","rootProps","state","rootRef","baseClassName","baseRole","_ariaChecked","_ariaPressed","restRootProps","mergedClassName","role","checkedA11yProps","BaseSwitch.Thumb","Field","SwitchItem","useContext","jsxs","SwitchGroup","legend","children","error","description","Fieldset.Root","Fieldset.Legend","Switch"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"table-d4ql7fjvok30xs1f.js","sources":["../../src/components/table/table.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils\";\nimport { Checkbox } from \"../checkbox\";\n\n/** Table layout and row variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_TABLE_VARIANTS = {\n layout: {\n auto: {\n classes: \"\",\n description: \"Auto table layout - columns resize based on content\",\n },\n fixed: {\n classes: \"table-fixed\",\n description:\n \"Fixed table layout - columns have equal width, controlled via colgroup\",\n },\n },\n variant: {\n default: {\n classes: \"\",\n description: \"Default row variant\",\n },\n selected: {\n classes: \"bg-kumo-tint\",\n description: \"Selected row variant\",\n },\n },\n} as const;\n\nexport const KUMO_TABLE_DEFAULT_VARIANTS = {\n layout: \"auto\",\n variant: \"default\",\n} as const;\n\nexport type KumoTableRowVariant = keyof typeof KUMO_TABLE_VARIANTS.variant;\nexport type KumoTableLayout = keyof typeof KUMO_TABLE_VARIANTS.layout;\n\n/**\n * Table root — applies layout, borders, padding, and header styles.\n *\n * @example\n * ```tsx\n * <Table layout=\"fixed\">\n * <Table.Header>\n * <Table.Row>\n * <Table.Head>Name</Table.Head>\n * <Table.Head>Status</Table.Head>\n * </Table.Row>\n * </Table.Header>\n * <Table.Body>\n * <Table.Row>\n * <Table.Cell>Worker A</Table.Cell>\n * <Table.Cell>Active</Table.Cell>\n * </Table.Row>\n * </Table.Body>\n * </Table>\n * ```\n */\nconst TableRoot = forwardRef<\n HTMLTableElement,\n React.HTMLAttributes<HTMLTableElement> & {\n /**\n * Table layout algorithm.\n * - `\"auto\"` — columns resize based on content\n * - `\"fixed\"` — equal-width columns, controlled via `<colgroup>`\n * @default \"auto\"\n */\n layout?: KumoTableLayout;\n }\n>(({ layout = \"auto\", ...props }, ref) => {\n const className = cn(\n \"w-full\",\n KUMO_TABLE_VARIANTS.layout[layout].classes,\n \"[&_td]:border-b [&_td]:border-kumo-fill [&_tr:last-child_td]:border-b-0\", // Row border\n \"[&_td]:p-3\", // Cell padding\n \"[&_th]:border-b [&_th]:border-kumo-fill [&_th]:p-3 [&_th]:font-semibold\", // Header styles\n \"[&_th]:bg-kumo-base\", // Header background color\n \"text-left text-kumo-default\",\n props.className,\n );\n\n return <table ref={ref} {...props} className={className} />;\n});\n\nconst TableHeader = forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement> & {\n variant?: \"default\" | \"compact\";\n }\n>(({ variant = \"default\", ...props }, ref) => {\n const className = cn(\n variant === \"compact\" &&\n \"[&_th]:bg-kumo-elevated [&_th]:py-2 text-xs text-kumo-strong\",\n props.className,\n );\n\n return <thead ref={ref} {...props} className={className} />;\n});\n\nconst TableHead = forwardRef<\n HTMLTableCellElement,\n React.HTMLAttributes<HTMLTableCellElement>\n>((props, ref) => {\n const className = cn(\"group relative\", props.className);\n return <th ref={ref} {...props} className={className} />;\n});\n\nconst TableRow = forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes<HTMLTableRowElement> & {\n variant?: KumoTableRowVariant;\n }\n>(({ variant = KUMO_TABLE_DEFAULT_VARIANTS.variant, ...props }, ref) => {\n const className = cn(\n KUMO_TABLE_VARIANTS.variant[variant].classes,\n props.className,\n );\n\n return <tr ref={ref} {...props} className={className} />;\n});\n\nconst TableBody = forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n return <tbody ref={ref} {...props} />;\n});\n\nconst TableCell = forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes<HTMLTableCellElement>\n>((props, ref) => {\n return <td ref={ref} {...props} />;\n});\n\nconst TableFooter = forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n return <tfoot ref={ref} {...props} />;\n});\n\nconst TableResizeHandle = forwardRef<\n HTMLButtonElement,\n React.HTMLAttributes<HTMLButtonElement>\n>((props, ref) => {\n return (\n <button\n ref={ref}\n {...props}\n type=\"button\"\n aria-label=\"Resize column\"\n className={cn(\n \"invisible h-full group-hover:visible\", // Make the handle invisible by default\n \"w-[10px]\", // Hitting area\n \"flex items-center justify-center\", // Center the handle\n \"cursor-col-resize touch-none select-none\", // Prevent selection and touch events\n \"absolute top-0 right-0\", // Position the handle\n \"m-0 bg-kumo-base p-0\", // Override the stratus button styles\n )}\n >\n <span className=\"h-5 w-[2px] rounded bg-kumo-ring\" />\n </button>\n );\n});\n\n/**\n * Special cell that makes the entire cell area a hit target for the checkbox.\n */\n\nconst TableCheckCell = forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes<HTMLTableCellElement> & {\n checked?: boolean;\n indeterminate?: boolean;\n onValueChange?: (checked: boolean) => void;\n label?: string;\n disabled?: boolean;\n }\n>(\n (\n { checked, indeterminate, onValueChange, label, disabled, ...props },\n ref,\n ) => {\n return (\n <TableCell\n ref={ref}\n {...props}\n className={cn(\"w-10 leading-none\", props.className)}\n >\n <Checkbox\n checked={checked}\n indeterminate={indeterminate}\n onCheckedChange={(newChecked) => {\n onValueChange?.(newChecked);\n }}\n aria-label={label ?? \"Select row\"}\n disabled={disabled}\n className=\"relative before:absolute before:-inset-3 before:content-['']\"\n />\n </TableCell>\n );\n },\n);\n\nconst TableCheckHead = forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes<HTMLTableCellElement> & {\n checked?: boolean;\n indeterminate?: boolean;\n onValueChange?: (checked: boolean) => void;\n label?: string;\n disabled?: boolean;\n }\n>(\n (\n { checked, indeterminate, onValueChange, label, disabled, ...props },\n ref,\n ) => {\n return (\n <TableHead\n ref={ref}\n {...props}\n className={cn(\"w-10 leading-none\", props.className)}\n >\n <Checkbox\n checked={checked}\n indeterminate={indeterminate}\n onCheckedChange={(newChecked) => {\n onValueChange?.(newChecked);\n }}\n aria-label={label ?? \"Select all rows\"}\n disabled={disabled}\n className=\"relative before:absolute before:-inset-3 before:content-['']\"\n />\n </TableHead>\n );\n },\n);\n\nTableRoot.displayName = \"Table\";\nTableBody.displayName = \"Table.Body\";\nTableHead.displayName = \"Table.Head\";\nTableRow.displayName = \"Table.Row\";\nTableCell.displayName = \"Table.Cell\";\nTableFooter.displayName = \"Table.Footer\";\nTableHeader.displayName = \"Table.Header\";\nTableResizeHandle.displayName = \"Table.ResizeHandle\";\nTableCheckCell.displayName = \"Table.CheckCell\";\nTableCheckHead.displayName = \"Table.CheckHead\";\n\n/**\n * Table — semantic HTML table with styled rows, cells, and selection support.\n *\n * Compound component: `Table` (Root), `.Header`, `.Head`, `.Body`, `.Row`,\n * `.Cell`, `.Footer`, `.CheckCell`, `.CheckHead`, `.ResizeHandle`.\n *\n * @example\n * ```tsx\n * <Table>\n * <Table.Header>\n * <Table.Row>\n * <Table.CheckHead checked={allSelected} onValueChange={toggleAll} />\n * <Table.Head>Name</Table.Head>\n * </Table.Row>\n * </Table.Header>\n * <Table.Body>\n * {rows.map((row) => (\n * <Table.Row key={row.id} variant={selected.has(row.id) ? \"selected\" : \"default\"}>\n * <Table.CheckCell checked={selected.has(row.id)} onValueChange={() => toggle(row.id)} />\n * <Table.Cell>{row.name}</Table.Cell>\n * </Table.Row>\n * ))}\n * </Table.Body>\n * </Table>\n * ```\n */\nexport const Table = Object.assign(TableRoot, {\n Header: TableHeader,\n Head: TableHead,\n Row: TableRow,\n Body: TableBody,\n Cell: TableCell,\n CheckCell: TableCheckCell,\n CheckHead: TableCheckHead,\n Footer: TableFooter,\n ResizeHandle: TableResizeHandle,\n});\n"],"names":["KUMO_TABLE_VARIANTS","KUMO_TABLE_DEFAULT_VARIANTS","TableRoot","forwardRef","layout","props","ref","className","cn","jsx","TableHeader","variant","TableHead","TableRow","TableBody","TableCell","TableFooter","TableResizeHandle","TableCheckCell","checked","indeterminate","onValueChange","label","disabled","Checkbox","newChecked","TableCheckHead","Table"],"mappings":"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"}
|