@cloudflare/kumo 2.5.1 → 2.5.2
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 +8 -0
- package/ai/component-registry.json +10 -5
- package/ai/component-registry.md +4 -2
- package/dist/.build-complete +1 -1
- package/dist/chunks/{autocomplete-d0w42h1frdu03df6.js → autocomplete-d52negr21cedr4rm.js} +3 -3
- package/dist/chunks/{autocomplete-d0w42h1frdu03df6.js.map → autocomplete-d52negr21cedr4rm.js.map} +1 -1
- package/dist/chunks/{breadcrumbs-j214mimk5zj4ffp4.js → breadcrumbs-bfuf7g8hh36rg7h8.js} +2 -2
- package/dist/chunks/{breadcrumbs-j214mimk5zj4ffp4.js.map → breadcrumbs-bfuf7g8hh36rg7h8.js.map} +1 -1
- package/dist/chunks/{button-mnrxu6dud2x5js5b.js → button-ov39dxshqbqrthhd.js} +11 -11
- package/dist/chunks/button-ov39dxshqbqrthhd.js.map +1 -0
- package/dist/chunks/{checkbox-dqih8tzzt3vhp870.js → checkbox-bt4nfv1i2142kykg.js} +2 -2
- package/dist/chunks/{checkbox-dqih8tzzt3vhp870.js.map → checkbox-bt4nfv1i2142kykg.js.map} +1 -1
- package/dist/chunks/{clipboard-text-mrut8z3dt1w0efxz.js → clipboard-text-h3oi6wm5vj2q7q4h.js} +3 -3
- package/dist/chunks/{clipboard-text-mrut8z3dt1w0efxz.js.map → clipboard-text-h3oi6wm5vj2q7q4h.js.map} +1 -1
- package/dist/chunks/{combobox-msvukodjsqzlvpqc.js → combobox-l6qcou2s3xmsbplp.js} +3 -3
- package/dist/chunks/{combobox-msvukodjsqzlvpqc.js.map → combobox-l6qcou2s3xmsbplp.js.map} +1 -1
- package/dist/chunks/{empty-n17inn1z67bpohkw.js → empty-frsjvok4w6i0fyex.js} +2 -2
- package/dist/chunks/{empty-n17inn1z67bpohkw.js.map → empty-frsjvok4w6i0fyex.js.map} +1 -1
- package/dist/chunks/{field-c8o7h3rlam4c9pcx.js → field-m57qcw5b1zt1ohfz.js} +2 -2
- package/dist/chunks/{field-c8o7h3rlam4c9pcx.js.map → field-m57qcw5b1zt1ohfz.js.map} +1 -1
- package/dist/chunks/{input-area-eurk3seud30ricwn.js → input-area-o2avpahffav0gydf.js} +3 -3
- package/dist/chunks/{input-area-eurk3seud30ricwn.js.map → input-area-o2avpahffav0gydf.js.map} +1 -1
- package/dist/chunks/{input-group-d09ocmjcbdai0gze.js → input-group-os810pmsqcftt6mq.js} +4 -4
- package/dist/chunks/{input-group-d09ocmjcbdai0gze.js.map → input-group-os810pmsqcftt6mq.js.map} +1 -1
- package/dist/chunks/{input-en8hhb14mmt3tfwn.js → input-iahz0dpc9xdar2ju.js} +2 -2
- package/dist/chunks/{input-en8hhb14mmt3tfwn.js.map → input-iahz0dpc9xdar2ju.js.map} +1 -1
- package/dist/chunks/{label-c8rz453pti66slki.js → label-kib2hn4pkbn28c31.js} +2 -2
- package/dist/chunks/{label-c8rz453pti66slki.js.map → label-kib2hn4pkbn28c31.js.map} +1 -1
- package/dist/chunks/{pagination-bw7vwca4wrfjm8vb.js → pagination-mvvg7qfvoqr5l4vt.js} +3 -3
- package/dist/chunks/{pagination-bw7vwca4wrfjm8vb.js.map → pagination-mvvg7qfvoqr5l4vt.js.map} +1 -1
- package/dist/chunks/{select-dw9iw35ug7yer3o3.js → select-c79vjqmcytn2oujb.js} +5 -5
- package/dist/chunks/{select-dw9iw35ug7yer3o3.js.map → select-c79vjqmcytn2oujb.js.map} +1 -1
- package/dist/chunks/{sensitive-input-dgoxjtoxl4zqa51v.js → sensitive-input-mxbd0ayw2mbju4ii.js} +3 -3
- package/dist/chunks/{sensitive-input-dgoxjtoxl4zqa51v.js.map → sensitive-input-mxbd0ayw2mbju4ii.js.map} +1 -1
- package/dist/chunks/{sidebar-nbdw4rgvuabxp5nj.js → sidebar-dqw2uxx6xqln639l.js} +2 -2
- package/dist/chunks/{sidebar-nbdw4rgvuabxp5nj.js.map → sidebar-dqw2uxx6xqln639l.js.map} +1 -1
- package/dist/chunks/{switch-g8f77h69h34xld06.js → switch-dld1q6qdzhe1uip7.js} +2 -2
- package/dist/chunks/{switch-g8f77h69h34xld06.js.map → switch-dld1q6qdzhe1uip7.js.map} +1 -1
- package/dist/chunks/{table-e1te1im2tt2ez05y.js → table-l64wm81r9t67mtzm.js} +2 -2
- package/dist/chunks/{table-e1te1im2tt2ez05y.js.map → table-l64wm81r9t67mtzm.js.map} +1 -1
- package/dist/chunks/{toast-kvbgct0jvfmn4mas.js → toast-gewrapiiy5x9ak0o.js} +2 -2
- package/dist/chunks/{toast-kvbgct0jvfmn4mas.js.map → toast-gewrapiiy5x9ak0o.js.map} +1 -1
- package/dist/code.js +1 -1
- package/dist/components/autocomplete.js +1 -1
- package/dist/components/breadcrumbs.js +1 -1
- package/dist/components/button.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/empty.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/input-group.js +1 -1
- package/dist/components/input.js +3 -3
- package/dist/components/label.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sensitive-input.js +1 -1
- package/dist/components/sidebar.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/toast.js +1 -1
- package/dist/index.js +21 -21
- package/dist/src/components/button/button.d.ts +3 -3
- package/dist/src/components/button/button.d.ts.map +1 -1
- package/dist/styles/kumo-standalone.css +1 -1
- package/package.json +1 -1
- package/dist/chunks/button-mnrxu6dud2x5js5b.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @cloudflare/kumo
|
|
2
2
|
|
|
3
|
+
## 2.5.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 9a13576: fix(button): use ring-kumo-line for default secondary button ring
|
|
8
|
+
- b18837c: Refine outline and secondary destructive button hover states.
|
|
9
|
+
- 595d10e: fix(sidebar): correct GroupLabel top margin from mt-6 to mt-4
|
|
10
|
+
|
|
3
11
|
## 2.5.1
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -561,11 +561,11 @@
|
|
|
561
561
|
},
|
|
562
562
|
"classes": {
|
|
563
563
|
"primary": "bg-kumo-brand !text-white hover:bg-kumo-brand-hover disabled:bg-kumo-brand/50",
|
|
564
|
-
"secondary": "bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-
|
|
564
|
+
"secondary": "bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-line data-[state=open]:bg-kumo-base",
|
|
565
565
|
"ghost": "text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit",
|
|
566
566
|
"destructive": "bg-kumo-danger !text-white hover:bg-kumo-danger/70",
|
|
567
|
-
"secondary-destructive": "bg-kumo-base !text-kumo-danger ring not-disabled:hover:
|
|
568
|
-
"outline": "bg-transparent text-kumo-default ring ring-kumo-
|
|
567
|
+
"secondary-destructive": "bg-kumo-base !text-kumo-danger ring not-disabled:hover:!text-kumo-danger not-disabled:hover:ring-kumo-danger/30 disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-base",
|
|
568
|
+
"outline": "bg-transparent text-kumo-default ring ring-kumo-line transition-colors not-disabled:hover:text-kumo-strong not-disabled:hover:ring-kumo-focus/25"
|
|
569
569
|
},
|
|
570
570
|
"stateClasses": {
|
|
571
571
|
"primary": {
|
|
@@ -584,9 +584,12 @@
|
|
|
584
584
|
"hover": "hover:bg-kumo-danger/70"
|
|
585
585
|
},
|
|
586
586
|
"secondary-destructive": {
|
|
587
|
-
"not-disabled": "not-disabled:hover:
|
|
587
|
+
"not-disabled": "not-disabled:hover:!text-kumo-danger not-disabled:hover:ring-kumo-danger/30",
|
|
588
588
|
"disabled": "disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70",
|
|
589
589
|
"data-state": "data-[state=open]:bg-kumo-base"
|
|
590
|
+
},
|
|
591
|
+
"outline": {
|
|
592
|
+
"not-disabled": "not-disabled:hover:text-kumo-strong not-disabled:hover:ring-kumo-focus/25"
|
|
590
593
|
}
|
|
591
594
|
},
|
|
592
595
|
"default": "secondary"
|
|
@@ -667,10 +670,12 @@
|
|
|
667
670
|
"bg-kumo-danger",
|
|
668
671
|
"bg-kumo-tint",
|
|
669
672
|
"ring-kumo-brand",
|
|
673
|
+
"ring-kumo-danger",
|
|
670
674
|
"ring-kumo-focus",
|
|
671
|
-
"ring-kumo-
|
|
675
|
+
"ring-kumo-line",
|
|
672
676
|
"text-kumo-danger",
|
|
673
677
|
"text-kumo-default",
|
|
678
|
+
"text-kumo-strong",
|
|
674
679
|
"text-kumo-subtle"
|
|
675
680
|
]
|
|
676
681
|
},
|
package/ai/component-registry.md
CHANGED
|
@@ -639,9 +639,11 @@ Primary action trigger. Supports multiple variants, sizes, shapes, icons, and lo
|
|
|
639
639
|
- `"destructive"`:
|
|
640
640
|
- `hover`: `hover:bg-kumo-danger/70`
|
|
641
641
|
- `"secondary-destructive"`:
|
|
642
|
-
- `not-disabled`: `not-disabled:hover:
|
|
642
|
+
- `not-disabled`: `not-disabled:hover:!text-kumo-danger not-disabled:hover:ring-kumo-danger/30`
|
|
643
643
|
- `disabled`: `disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70`
|
|
644
644
|
- `data-state`: `data-[state=open]:bg-kumo-base`
|
|
645
|
+
- `"outline"`:
|
|
646
|
+
- `not-disabled`: `not-disabled:hover:text-kumo-strong not-disabled:hover:ring-kumo-focus/25`
|
|
645
647
|
- `children`: ReactNode
|
|
646
648
|
- `className`: string
|
|
647
649
|
- `icon`: ReactNode
|
|
@@ -658,7 +660,7 @@ Primary action trigger. Supports multiple variants, sizes, shapes, icons, and lo
|
|
|
658
660
|
|
|
659
661
|
**Colors (kumo tokens used):**
|
|
660
662
|
|
|
661
|
-
`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-brand-hover`, `bg-kumo-danger`, `bg-kumo-tint`, `ring-kumo-brand`, `ring-kumo-focus`, `ring-kumo-
|
|
663
|
+
`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-brand-hover`, `bg-kumo-danger`, `bg-kumo-tint`, `ring-kumo-brand`, `ring-kumo-danger`, `ring-kumo-focus`, `ring-kumo-line`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
|
|
662
664
|
|
|
663
665
|
**Examples:**
|
|
664
666
|
|
package/dist/.build-complete
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
1781116139367
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
import { jsx as t, jsxs as C } from "react/jsx-runtime";
|
|
3
3
|
import { CheckIcon as y } from "@phosphor-icons/react";
|
|
4
4
|
import { createContext as v, useContext as I } from "react";
|
|
5
|
-
import { K as u, i as k } from "./input-
|
|
5
|
+
import { K as u, i as k } from "./input-iahz0dpc9xdar2ju.js";
|
|
6
6
|
import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
|
|
7
7
|
import { r as E } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
|
|
8
|
-
import { F as T } from "./field-
|
|
8
|
+
import { F as T } from "./field-m57qcw5b1zt1ohfz.js";
|
|
9
9
|
import { by as w, aa as z, af as G, bx as L, ac as O, S as P, ad as _, ae as S, bw as U, an as R, ao as V, ap as F, ag as K } from "./vendor-base-ui-knphx7dts1vm1x37.js";
|
|
10
10
|
const p = v({
|
|
11
11
|
hasError: !1
|
|
@@ -190,4 +190,4 @@ export {
|
|
|
190
190
|
X as a,
|
|
191
191
|
l as b
|
|
192
192
|
};
|
|
193
|
-
//# sourceMappingURL=autocomplete-
|
|
193
|
+
//# sourceMappingURL=autocomplete-d52negr21cedr4rm.js.map
|
package/dist/chunks/{autocomplete-d0w42h1frdu03df6.js.map → autocomplete-d52negr21cedr4rm.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete-d0w42h1frdu03df6.js","sources":["../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import { Autocomplete as AutocompleteBase } from \"@base-ui/react/autocomplete\";\nimport { CheckIcon } from \"@phosphor-icons/react\";\nimport { createContext, useContext, type ReactNode } from \"react\";\nimport { inputVariants, KUMO_INPUT_VARIANTS } from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\nconst AutocompleteContext = createContext<{ hasError: boolean }>({\n hasError: false,\n});\n\n/** Autocomplete variant definitions. */\nexport const KUMO_AUTOCOMPLETE_VARIANTS = {\n size: KUMO_INPUT_VARIANTS.size,\n} as const;\n\nexport const KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\n// Derived types from KUMO_AUTOCOMPLETE_VARIANTS\nexport type KumoAutocompleteSize = keyof typeof KUMO_AUTOCOMPLETE_VARIANTS.size;\n\nexport interface KumoAutocompleteVariantsProps {\n /**\n * Size of the autocomplete input. Matches Input component sizes.\n * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n * - `\"base\"` — Default size (h-9 / 36px)\n * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n * @default \"base\"\n */\n size?: KumoAutocompleteSize;\n}\n\nexport function autocompleteVariants({\n size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n}: KumoAutocompleteVariantsProps = {}) {\n return cn(\n resolveVariant(\n KUMO_INPUT_VARIANTS.size,\n size,\n KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n ).classes,\n );\n}\n\n/**\n * Autocomplete component props.\n *\n * Autocomplete provides a free-form text input with optional suggestions in a\n * filterable dropdown. Unlike Combobox, the input value is not constrained to\n * the suggestion list items.\n *\n * @example\n * ```tsx\n * <Autocomplete label=\"Country\" items={countries}>\n * <Autocomplete.InputGroup />\n * <Autocomplete.Content>\n * <Autocomplete.List>\n * {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n * </Autocomplete.List>\n * </Autocomplete.Content>\n * </Autocomplete>\n * ```\n */\nexport interface AutocompleteProps {\n /** Array of items to display in the dropdown */\n items: unknown[];\n /** The controlled input value */\n value?: string | number | string[];\n /** The uncontrolled default input value */\n defaultValue?: string | number | string[];\n /** Callback when the input value changes */\n onValueChange?: AutocompleteBase.Root.Props<unknown>[\"onValueChange\"];\n /** Whether the popup is open (controlled) */\n open?: boolean;\n /** Callback when the popup opens or closes */\n onOpenChange?: AutocompleteBase.Root.Props<unknown>[\"onOpenChange\"];\n /** Autocomplete content (input group, popup content) */\n children: ReactNode;\n /** Additional CSS classes */\n className?: string;\n /** Label content (enables Field wrapper) */\n label?: ReactNode;\n /** Whether the field is required */\n required?: boolean;\n /** Tooltip content to display next to the label */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the field */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<ItemValue>({\n label,\n required,\n labelTooltip,\n description,\n error,\n children,\n ...props\n}: AutocompleteBase.Root.Props<ItemValue> & {\n label?: ReactNode;\n required?: boolean;\n labelTooltip?: ReactNode;\n description?: ReactNode;\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}) {\n const rootProps = props as Omit<\n AutocompleteBase.Root.Props<ItemValue>,\n \"items\"\n > & {\n items?: readonly ItemValue[];\n };\n const control = (\n <AutocompleteContext.Provider value={{ hasError: Boolean(error) }}>\n <AutocompleteBase.Root {...rootProps}>{children}</AutocompleteBase.Root>\n </AutocompleteContext.Provider>\n );\n\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {control}\n </Field>\n );\n }\n\n return control;\n}\n\nfunction InputGroup({\n className,\n size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n placeholder,\n}: {\n className?: string;\n size?: KumoAutocompleteSize;\n placeholder?: string;\n}) {\n const { hasError } = useContext(AutocompleteContext);\n return (\n <AutocompleteBase.Input\n className={cn(\n inputVariants({\n size,\n variant: hasError ? \"error\" : \"default\",\n focusIndicator: true,\n }),\n \"w-full\",\n className,\n )}\n placeholder={placeholder}\n />\n );\n}\n\nfunction Content({\n children,\n className,\n align = \"start\",\n sideOffset = 4,\n alignOffset,\n side,\n}: {\n children?: ReactNode;\n className?: string;\n align?: AutocompleteBase.Positioner.Props[\"align\"];\n alignOffset?: AutocompleteBase.Positioner.Props[\"alignOffset\"];\n side?: AutocompleteBase.Positioner.Props[\"side\"];\n sideOffset?: AutocompleteBase.Positioner.Props[\"sideOffset\"];\n}) {\n return (\n <AutocompleteBase.Portal>\n <AutocompleteBase.Positioner\n className=\"outline-none\"\n align={align}\n sideOffset={sideOffset}\n alignOffset={alignOffset}\n side={side}\n >\n <AutocompleteBase.Popup\n className={(state: AutocompleteBase.Popup.State) =>\n cn(\n \"flex flex-col\",\n \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5\",\n \"bg-kumo-control text-kumo-default\",\n \"rounded-lg shadow-lg ring ring-kumo-line\",\n state.empty && \"hidden\",\n className,\n )\n }\n >\n {children}\n </AutocompleteBase.Popup>\n </AutocompleteBase.Positioner>\n </AutocompleteBase.Portal>\n );\n}\n\nfunction List({\n className,\n ...props\n}: AutocompleteBase.List.Props & { className?: string }) {\n return (\n <AutocompleteBase.List\n {...props}\n className={cn(\n \"min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2\",\n className,\n )}\n />\n );\n}\n\nfunction Item({ children, ...props }: AutocompleteBase.Item.Props) {\n return (\n <AutocompleteBase.Item\n data-kumo-component=\"Autocomplete\"\n data-kumo-part=\"item\"\n {...props}\n className=\"group mx-1.5 grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay data-selected:font-medium\"\n >\n <div className=\"col-start-1\">{children}</div>\n <span className=\"col-start-2 hidden items-center group-data-selected:flex\">\n <CheckIcon size={14} />\n </span>\n </AutocompleteBase.Item>\n );\n}\n\nfunction GroupLabel(props: AutocompleteBase.GroupLabel.Props) {\n return (\n <AutocompleteBase.GroupLabel\n {...props}\n className={cn(\n \"mx-1.5 px-2 py-1.5 text-sm text-kumo-strong\",\n props.className,\n )}\n />\n );\n}\n\nfunction Group(props: AutocompleteBase.Group.Props) {\n return (\n <AutocompleteBase.Group\n {...props}\n className=\"border-t border-kumo-line mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0\"\n />\n );\n}\n\nfunction Separator(props: AutocompleteBase.Separator.Props) {\n return (\n <AutocompleteBase.Separator\n {...props}\n className={cn(\"mx-0 my-1 h-px bg-kumo-line\", props.className)}\n />\n );\n}\n\nRoot.displayName = \"Autocomplete.Root\";\nInputGroup.displayName = \"Autocomplete.InputGroup\";\nContent.displayName = \"Autocomplete.Content\";\nItem.displayName = \"Autocomplete.Item\";\nGroupLabel.displayName = \"Autocomplete.GroupLabel\";\nGroup.displayName = \"Autocomplete.Group\";\nSeparator.displayName = \"Autocomplete.Separator\";\n\n/**\n * Autocomplete — free-form text input with an optional filtered suggestion list.\n *\n * Unlike Combobox, the input value is not restricted to items in the list.\n * Use Combobox when the selected value must come from the list.\n *\n * Compound component: `Autocomplete` (Root), `.InputGroup`, `.Content`, `.Item`,\n * `.GroupLabel`, `.Group`, `.Separator`, `.List`, `.Collection`.\n *\n * `InputGroup` renders the text input with Input component styling.\n * Pass a `size` prop to `InputGroup` to match the Input component sizes.\n *\n * @example\n * ```tsx\n * <Autocomplete items={fruits} label=\"Fruit\">\n * <Autocomplete.InputGroup size=\"base\" />\n * <Autocomplete.Content>\n * <Autocomplete.List>\n * {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n * </Autocomplete.List>\n * </Autocomplete.Content>\n * </Autocomplete>\n * ```\n *\n * @see https://base-ui.com/react/components/autocomplete\n */\nexport const Autocomplete = Object.assign(Root, {\n // Styled compound sub-components\n InputGroup,\n Content,\n Item,\n GroupLabel,\n Group,\n Separator,\n List,\n\n // Pass-through Base UI sub-components\n Empty: AutocompleteBase.Empty,\n Collection: AutocompleteBase.Collection,\n\n // Filtering\n useFilter: AutocompleteBase.useFilter,\n});\n"],"names":["AutocompleteContext","createContext","KUMO_AUTOCOMPLETE_VARIANTS","KUMO_INPUT_VARIANTS","KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS","autocompleteVariants","size","cn","resolveVariant","Root","label","required","labelTooltip","description","error","children","props","rootProps","control","jsx","AutocompleteBase.Root","Field","InputGroup","className","placeholder","hasError","useContext","AutocompleteBase.Input","inputVariants","Content","align","sideOffset","alignOffset","side","AutocompleteBase.Portal","AutocompleteBase.Positioner","AutocompleteBase.Popup","state","List","AutocompleteBase.List","Item","jsxs","AutocompleteBase.Item","CheckIcon","GroupLabel","AutocompleteBase.GroupLabel","Group","AutocompleteBase.Group","Separator","AutocompleteBase.Separator","Autocomplete","AutocompleteBase.Empty","AutocompleteBase.Collection","AutocompleteBase.useFilter"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"autocomplete-d52negr21cedr4rm.js","sources":["../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import { Autocomplete as AutocompleteBase } from \"@base-ui/react/autocomplete\";\nimport { CheckIcon } from \"@phosphor-icons/react\";\nimport { createContext, useContext, type ReactNode } from \"react\";\nimport { inputVariants, KUMO_INPUT_VARIANTS } from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\nconst AutocompleteContext = createContext<{ hasError: boolean }>({\n hasError: false,\n});\n\n/** Autocomplete variant definitions. */\nexport const KUMO_AUTOCOMPLETE_VARIANTS = {\n size: KUMO_INPUT_VARIANTS.size,\n} as const;\n\nexport const KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\n// Derived types from KUMO_AUTOCOMPLETE_VARIANTS\nexport type KumoAutocompleteSize = keyof typeof KUMO_AUTOCOMPLETE_VARIANTS.size;\n\nexport interface KumoAutocompleteVariantsProps {\n /**\n * Size of the autocomplete input. Matches Input component sizes.\n * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n * - `\"base\"` — Default size (h-9 / 36px)\n * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n * @default \"base\"\n */\n size?: KumoAutocompleteSize;\n}\n\nexport function autocompleteVariants({\n size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n}: KumoAutocompleteVariantsProps = {}) {\n return cn(\n resolveVariant(\n KUMO_INPUT_VARIANTS.size,\n size,\n KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n ).classes,\n );\n}\n\n/**\n * Autocomplete component props.\n *\n * Autocomplete provides a free-form text input with optional suggestions in a\n * filterable dropdown. Unlike Combobox, the input value is not constrained to\n * the suggestion list items.\n *\n * @example\n * ```tsx\n * <Autocomplete label=\"Country\" items={countries}>\n * <Autocomplete.InputGroup />\n * <Autocomplete.Content>\n * <Autocomplete.List>\n * {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n * </Autocomplete.List>\n * </Autocomplete.Content>\n * </Autocomplete>\n * ```\n */\nexport interface AutocompleteProps {\n /** Array of items to display in the dropdown */\n items: unknown[];\n /** The controlled input value */\n value?: string | number | string[];\n /** The uncontrolled default input value */\n defaultValue?: string | number | string[];\n /** Callback when the input value changes */\n onValueChange?: AutocompleteBase.Root.Props<unknown>[\"onValueChange\"];\n /** Whether the popup is open (controlled) */\n open?: boolean;\n /** Callback when the popup opens or closes */\n onOpenChange?: AutocompleteBase.Root.Props<unknown>[\"onOpenChange\"];\n /** Autocomplete content (input group, popup content) */\n children: ReactNode;\n /** Additional CSS classes */\n className?: string;\n /** Label content (enables Field wrapper) */\n label?: ReactNode;\n /** Whether the field is required */\n required?: boolean;\n /** Tooltip content to display next to the label */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the field */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<ItemValue>({\n label,\n required,\n labelTooltip,\n description,\n error,\n children,\n ...props\n}: AutocompleteBase.Root.Props<ItemValue> & {\n label?: ReactNode;\n required?: boolean;\n labelTooltip?: ReactNode;\n description?: ReactNode;\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}) {\n const rootProps = props as Omit<\n AutocompleteBase.Root.Props<ItemValue>,\n \"items\"\n > & {\n items?: readonly ItemValue[];\n };\n const control = (\n <AutocompleteContext.Provider value={{ hasError: Boolean(error) }}>\n <AutocompleteBase.Root {...rootProps}>{children}</AutocompleteBase.Root>\n </AutocompleteContext.Provider>\n );\n\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {control}\n </Field>\n );\n }\n\n return control;\n}\n\nfunction InputGroup({\n className,\n size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n placeholder,\n}: {\n className?: string;\n size?: KumoAutocompleteSize;\n placeholder?: string;\n}) {\n const { hasError } = useContext(AutocompleteContext);\n return (\n <AutocompleteBase.Input\n className={cn(\n inputVariants({\n size,\n variant: hasError ? \"error\" : \"default\",\n focusIndicator: true,\n }),\n \"w-full\",\n className,\n )}\n placeholder={placeholder}\n />\n );\n}\n\nfunction Content({\n children,\n className,\n align = \"start\",\n sideOffset = 4,\n alignOffset,\n side,\n}: {\n children?: ReactNode;\n className?: string;\n align?: AutocompleteBase.Positioner.Props[\"align\"];\n alignOffset?: AutocompleteBase.Positioner.Props[\"alignOffset\"];\n side?: AutocompleteBase.Positioner.Props[\"side\"];\n sideOffset?: AutocompleteBase.Positioner.Props[\"sideOffset\"];\n}) {\n return (\n <AutocompleteBase.Portal>\n <AutocompleteBase.Positioner\n className=\"outline-none\"\n align={align}\n sideOffset={sideOffset}\n alignOffset={alignOffset}\n side={side}\n >\n <AutocompleteBase.Popup\n className={(state: AutocompleteBase.Popup.State) =>\n cn(\n \"flex flex-col\",\n \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5\",\n \"bg-kumo-control text-kumo-default\",\n \"rounded-lg shadow-lg ring ring-kumo-line\",\n state.empty && \"hidden\",\n className,\n )\n }\n >\n {children}\n </AutocompleteBase.Popup>\n </AutocompleteBase.Positioner>\n </AutocompleteBase.Portal>\n );\n}\n\nfunction List({\n className,\n ...props\n}: AutocompleteBase.List.Props & { className?: string }) {\n return (\n <AutocompleteBase.List\n {...props}\n className={cn(\n \"min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2\",\n className,\n )}\n />\n );\n}\n\nfunction Item({ children, ...props }: AutocompleteBase.Item.Props) {\n return (\n <AutocompleteBase.Item\n data-kumo-component=\"Autocomplete\"\n data-kumo-part=\"item\"\n {...props}\n className=\"group mx-1.5 grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay data-selected:font-medium\"\n >\n <div className=\"col-start-1\">{children}</div>\n <span className=\"col-start-2 hidden items-center group-data-selected:flex\">\n <CheckIcon size={14} />\n </span>\n </AutocompleteBase.Item>\n );\n}\n\nfunction GroupLabel(props: AutocompleteBase.GroupLabel.Props) {\n return (\n <AutocompleteBase.GroupLabel\n {...props}\n className={cn(\n \"mx-1.5 px-2 py-1.5 text-sm text-kumo-strong\",\n props.className,\n )}\n />\n );\n}\n\nfunction Group(props: AutocompleteBase.Group.Props) {\n return (\n <AutocompleteBase.Group\n {...props}\n className=\"border-t border-kumo-line mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0\"\n />\n );\n}\n\nfunction Separator(props: AutocompleteBase.Separator.Props) {\n return (\n <AutocompleteBase.Separator\n {...props}\n className={cn(\"mx-0 my-1 h-px bg-kumo-line\", props.className)}\n />\n );\n}\n\nRoot.displayName = \"Autocomplete.Root\";\nInputGroup.displayName = \"Autocomplete.InputGroup\";\nContent.displayName = \"Autocomplete.Content\";\nItem.displayName = \"Autocomplete.Item\";\nGroupLabel.displayName = \"Autocomplete.GroupLabel\";\nGroup.displayName = \"Autocomplete.Group\";\nSeparator.displayName = \"Autocomplete.Separator\";\n\n/**\n * Autocomplete — free-form text input with an optional filtered suggestion list.\n *\n * Unlike Combobox, the input value is not restricted to items in the list.\n * Use Combobox when the selected value must come from the list.\n *\n * Compound component: `Autocomplete` (Root), `.InputGroup`, `.Content`, `.Item`,\n * `.GroupLabel`, `.Group`, `.Separator`, `.List`, `.Collection`.\n *\n * `InputGroup` renders the text input with Input component styling.\n * Pass a `size` prop to `InputGroup` to match the Input component sizes.\n *\n * @example\n * ```tsx\n * <Autocomplete items={fruits} label=\"Fruit\">\n * <Autocomplete.InputGroup size=\"base\" />\n * <Autocomplete.Content>\n * <Autocomplete.List>\n * {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n * </Autocomplete.List>\n * </Autocomplete.Content>\n * </Autocomplete>\n * ```\n *\n * @see https://base-ui.com/react/components/autocomplete\n */\nexport const Autocomplete = Object.assign(Root, {\n // Styled compound sub-components\n InputGroup,\n Content,\n Item,\n GroupLabel,\n Group,\n Separator,\n List,\n\n // Pass-through Base UI sub-components\n Empty: AutocompleteBase.Empty,\n Collection: AutocompleteBase.Collection,\n\n // Filtering\n useFilter: AutocompleteBase.useFilter,\n});\n"],"names":["AutocompleteContext","createContext","KUMO_AUTOCOMPLETE_VARIANTS","KUMO_INPUT_VARIANTS","KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS","autocompleteVariants","size","cn","resolveVariant","Root","label","required","labelTooltip","description","error","children","props","rootProps","control","jsx","AutocompleteBase.Root","Field","InputGroup","className","placeholder","hasError","useContext","AutocompleteBase.Input","inputVariants","Content","align","sideOffset","alignOffset","side","AutocompleteBase.Portal","AutocompleteBase.Positioner","AutocompleteBase.Popup","state","List","AutocompleteBase.List","Item","jsxs","AutocompleteBase.Item","CheckIcon","GroupLabel","AutocompleteBase.GroupLabel","Group","AutocompleteBase.Group","Separator","AutocompleteBase.Separator","Autocomplete","AutocompleteBase.Empty","AutocompleteBase.Collection","AutocompleteBase.useFilter"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsxs as l, jsx as r } from "react/jsx-runtime";
|
|
3
3
|
import { Children as k, cloneElement as d, isValidElement as x, useState as C, useEffect as g } from "react";
|
|
4
4
|
import { CheckIcon as w, CopyIcon as N } from "@phosphor-icons/react";
|
|
5
|
-
import { B as y } from "./button-
|
|
5
|
+
import { B as y } from "./button-ov39dxshqbqrthhd.js";
|
|
6
6
|
import { S as v } from "./skeleton-line-epxenksfesr2fkcv.js";
|
|
7
7
|
import { u as B } from "./link-provider-mn2voeohon7cj9o4.js";
|
|
8
8
|
import { c as f } from "./cn-ct4n7r74mh8y0f48.js";
|
|
@@ -166,4 +166,4 @@ export {
|
|
|
166
166
|
b as a,
|
|
167
167
|
A as b
|
|
168
168
|
};
|
|
169
|
-
//# sourceMappingURL=breadcrumbs-
|
|
169
|
+
//# sourceMappingURL=breadcrumbs-bfuf7g8hh36rg7h8.js.map
|
package/dist/chunks/{breadcrumbs-j214mimk5zj4ffp4.js.map → breadcrumbs-bfuf7g8hh36rg7h8.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumbs-j214mimk5zj4ffp4.js","sources":["../../src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n useEffect,\n useState,\n type PropsWithChildren,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { Button } from \"../../components/button\";\nimport { SkeletonLine } from \"../../components/loader/skeleton-line\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\n\n/** Breadcrumbs size variant definitions. */\nexport const KUMO_BREADCRUMBS_VARIANTS = {\n size: {\n sm: {\n classes: \"text-sm h-10 gap-0.5\",\n description: \"Compact breadcrumbs for dense UIs\",\n },\n base: {\n classes: \"text-base h-12 gap-1\",\n description: \"Default breadcrumbs size\",\n },\n },\n} as const;\n\nexport const KUMO_BREADCRUMBS_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\nexport type KumoBreadcrumbsSize = keyof typeof KUMO_BREADCRUMBS_VARIANTS.size;\n\nexport interface KumoBreadcrumbsVariantsProps {\n /**\n * Size of the breadcrumbs.\n * - `\"sm\"` — Compact breadcrumbs for dense UIs\n * - `\"base\"` — Default breadcrumbs size\n * @default \"base\"\n */\n size?: KumoBreadcrumbsSize;\n}\n\nexport function breadcrumbsVariants({\n size = KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size,\n}: KumoBreadcrumbsVariantsProps = {}) {\n return cn(\n \"group mr-4 flex min-w-0 grow items-center overflow-hidden whitespace-nowrap\",\n resolveVariant(KUMO_BREADCRUMBS_VARIANTS.size, size, KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size).classes,\n );\n}\n\nexport interface BreadcrumbsItemProps {\n href: string;\n icon?: React.ReactNode;\n}\n\nconst Link = ({\n href,\n icon,\n children,\n}: PropsWithChildren<BreadcrumbsItemProps>) => {\n const LinkComponent = useLinkComponent();\n\n return (\n <LinkComponent\n data-kumo-component=\"Breadcrumbs\"\n data-kumo-part=\"link\"\n to={href}\n className=\"flex min-w-0 max-w-full items-center gap-1 text-kumo-subtle no-underline\"\n >\n {!!icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <span className=\"truncate\">{children}</span>\n </LinkComponent>\n );\n};\n\ninterface BreadcrumbsCurrentProps {\n loading?: boolean;\n icon?: React.ReactNode;\n}\n\nfunction Current({\n children,\n icon,\n loading,\n}: PropsWithChildren<BreadcrumbsCurrentProps>) {\n if (loading) {\n return (\n <div className=\"flex w-[125px] min-w-0 items-center gap-1\">\n {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <SkeletonLine />\n </div>\n );\n }\n\n return (\n <div\n className=\"flex min-w-0 max-w-full items-center gap-1 font-medium\"\n aria-current=\"page\"\n >\n {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <span className=\"truncate\">{children}</span>\n </div>\n );\n}\n\nfunction Separator() {\n return (\n <span\n className=\"flex shrink-0 items-center text-kumo-inactive\"\n aria-hidden=\"true\"\n >\n <svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n d=\"M10.75 8.75L14.25 12L10.75 15.25\"\n />\n </svg>\n </span>\n );\n}\n\nfunction MobileEllipsis() {\n return (\n <span className=\"flex shrink-0 items-center text-kumo-subtle\" aria-hidden>\n ...\n </span>\n );\n}\n\nfunction Clipboard({ text }: { text: string }) {\n const [isCopied, setIsCopied] = useState(false);\n\n useEffect(() => {\n if (!isCopied) return;\n\n const timeoutId = setTimeout(() => setIsCopied(false), 2000);\n return () => clearTimeout(timeoutId);\n }, [isCopied]);\n\n const handleCopyDeeplink = async () => {\n if (!text) return;\n\n try {\n await navigator.clipboard.writeText(text);\n setIsCopied(true);\n } catch (err) {\n console.error(\"Failed to copy deeplink:\", err);\n }\n };\n\n return (\n <Button\n variant=\"ghost\"\n shape=\"square\"\n size=\"sm\"\n className=\"opacity-0 transition-[opacity] group-hover:opacity-100\"\n onClick={handleCopyDeeplink}\n title=\"Click to copy\"\n aria-label=\"Copy\"\n >\n {isCopied ? (\n <CheckIcon weight=\"bold\" className=\"text-kumo-success\" />\n ) : (\n <CopyIcon weight=\"regular\" />\n )}\n </Button>\n );\n}\n\n/**\n * Breadcrumbs component props.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n * <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Link href=\"/docs\">Docs</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Current>Current Page</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport interface BreadcrumbsProps\n extends PropsWithChildren,\n KumoBreadcrumbsVariantsProps {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n}\n\n/**\n * Navigation breadcrumb trail showing the current page's location in a hierarchy.\n * Compound component with `Breadcrumbs.Link`, `Breadcrumbs.Current`, `Breadcrumbs.Separator`, and `Breadcrumbs.Clipboard`.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n * <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport function Breadcrumb({\n children,\n size = \"base\",\n className,\n}: BreadcrumbsProps) {\n const childArray = Children.toArray(children);\n const mobileChildren = getMobileBreadcrumbChildren(childArray);\n\n return (\n <nav\n className={cn(breadcrumbsVariants({ size }), className)}\n aria-label=\"breadcrumb\"\n >\n <div className=\"contents sm:hidden\">{mobileChildren}</div>\n <div className=\"hidden sm:contents\">{childArray}</div>\n </nav>\n );\n}\n\nfunction isComponentElement(\n child: ReactNode,\n component: unknown,\n): child is ReactElement {\n return isValidElement(child) && child.type === component;\n}\n\nfunction getMobileBreadcrumbChildren(children: ReactNode[]): ReactNode[] {\n const breadcrumbItems = children.filter(\n (child) =>\n isComponentElement(child, Link) || isComponentElement(child, Current),\n ) as ReactElement[];\n\n if (breadcrumbItems.length <= 2) {\n return children;\n }\n\n const [parentItem, currentItem] = breadcrumbItems.slice(-2);\n const trailingItems: ReactNode[] = [\n <MobileEllipsis key=\"kumo-breadcrumb-mobile-ellipsis\" />,\n <Separator key=\"kumo-breadcrumb-mobile-separator-leading\" />,\n cloneElement(parentItem, { key: \"kumo-breadcrumb-mobile-parent\" }),\n <Separator key=\"kumo-breadcrumb-mobile-separator-trailing\" />,\n cloneElement(currentItem, { key: \"kumo-breadcrumb-mobile-current\" }),\n ];\n\n const extras = children.filter(\n (child) =>\n !isComponentElement(child, Link) &&\n !isComponentElement(child, Current) &&\n !isComponentElement(child, Separator),\n );\n\n return [...trailingItems, ...extras];\n}\n\nBreadcrumb.Link = Link;\nBreadcrumb.Current = Current;\nBreadcrumb.Separator = Separator;\nBreadcrumb.Clipboard = Clipboard;\n"],"names":["KUMO_BREADCRUMBS_VARIANTS","KUMO_BREADCRUMBS_DEFAULT_VARIANTS","breadcrumbsVariants","size","cn","resolveVariant","Link","href","icon","children","LinkComponent","useLinkComponent","jsxs","jsx","Current","loading","SkeletonLine","Separator","MobileEllipsis","Clipboard","text","isCopied","setIsCopied","useState","useEffect","timeoutId","Button","err","CheckIcon","CopyIcon","Breadcrumb","className","childArray","Children","mobileChildren","getMobileBreadcrumbChildren","isComponentElement","child","component","isValidElement","breadcrumbItems","parentItem","currentItem","trailingItems","cloneElement","extras"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"breadcrumbs-bfuf7g8hh36rg7h8.js","sources":["../../src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n useEffect,\n useState,\n type PropsWithChildren,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { Button } from \"../../components/button\";\nimport { SkeletonLine } from \"../../components/loader/skeleton-line\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\n\n/** Breadcrumbs size variant definitions. */\nexport const KUMO_BREADCRUMBS_VARIANTS = {\n size: {\n sm: {\n classes: \"text-sm h-10 gap-0.5\",\n description: \"Compact breadcrumbs for dense UIs\",\n },\n base: {\n classes: \"text-base h-12 gap-1\",\n description: \"Default breadcrumbs size\",\n },\n },\n} as const;\n\nexport const KUMO_BREADCRUMBS_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\nexport type KumoBreadcrumbsSize = keyof typeof KUMO_BREADCRUMBS_VARIANTS.size;\n\nexport interface KumoBreadcrumbsVariantsProps {\n /**\n * Size of the breadcrumbs.\n * - `\"sm\"` — Compact breadcrumbs for dense UIs\n * - `\"base\"` — Default breadcrumbs size\n * @default \"base\"\n */\n size?: KumoBreadcrumbsSize;\n}\n\nexport function breadcrumbsVariants({\n size = KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size,\n}: KumoBreadcrumbsVariantsProps = {}) {\n return cn(\n \"group mr-4 flex min-w-0 grow items-center overflow-hidden whitespace-nowrap\",\n resolveVariant(KUMO_BREADCRUMBS_VARIANTS.size, size, KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size).classes,\n );\n}\n\nexport interface BreadcrumbsItemProps {\n href: string;\n icon?: React.ReactNode;\n}\n\nconst Link = ({\n href,\n icon,\n children,\n}: PropsWithChildren<BreadcrumbsItemProps>) => {\n const LinkComponent = useLinkComponent();\n\n return (\n <LinkComponent\n data-kumo-component=\"Breadcrumbs\"\n data-kumo-part=\"link\"\n to={href}\n className=\"flex min-w-0 max-w-full items-center gap-1 text-kumo-subtle no-underline\"\n >\n {!!icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <span className=\"truncate\">{children}</span>\n </LinkComponent>\n );\n};\n\ninterface BreadcrumbsCurrentProps {\n loading?: boolean;\n icon?: React.ReactNode;\n}\n\nfunction Current({\n children,\n icon,\n loading,\n}: PropsWithChildren<BreadcrumbsCurrentProps>) {\n if (loading) {\n return (\n <div className=\"flex w-[125px] min-w-0 items-center gap-1\">\n {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <SkeletonLine />\n </div>\n );\n }\n\n return (\n <div\n className=\"flex min-w-0 max-w-full items-center gap-1 font-medium\"\n aria-current=\"page\"\n >\n {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <span className=\"truncate\">{children}</span>\n </div>\n );\n}\n\nfunction Separator() {\n return (\n <span\n className=\"flex shrink-0 items-center text-kumo-inactive\"\n aria-hidden=\"true\"\n >\n <svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n d=\"M10.75 8.75L14.25 12L10.75 15.25\"\n />\n </svg>\n </span>\n );\n}\n\nfunction MobileEllipsis() {\n return (\n <span className=\"flex shrink-0 items-center text-kumo-subtle\" aria-hidden>\n ...\n </span>\n );\n}\n\nfunction Clipboard({ text }: { text: string }) {\n const [isCopied, setIsCopied] = useState(false);\n\n useEffect(() => {\n if (!isCopied) return;\n\n const timeoutId = setTimeout(() => setIsCopied(false), 2000);\n return () => clearTimeout(timeoutId);\n }, [isCopied]);\n\n const handleCopyDeeplink = async () => {\n if (!text) return;\n\n try {\n await navigator.clipboard.writeText(text);\n setIsCopied(true);\n } catch (err) {\n console.error(\"Failed to copy deeplink:\", err);\n }\n };\n\n return (\n <Button\n variant=\"ghost\"\n shape=\"square\"\n size=\"sm\"\n className=\"opacity-0 transition-[opacity] group-hover:opacity-100\"\n onClick={handleCopyDeeplink}\n title=\"Click to copy\"\n aria-label=\"Copy\"\n >\n {isCopied ? (\n <CheckIcon weight=\"bold\" className=\"text-kumo-success\" />\n ) : (\n <CopyIcon weight=\"regular\" />\n )}\n </Button>\n );\n}\n\n/**\n * Breadcrumbs component props.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n * <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Link href=\"/docs\">Docs</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Current>Current Page</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport interface BreadcrumbsProps\n extends PropsWithChildren,\n KumoBreadcrumbsVariantsProps {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n}\n\n/**\n * Navigation breadcrumb trail showing the current page's location in a hierarchy.\n * Compound component with `Breadcrumbs.Link`, `Breadcrumbs.Current`, `Breadcrumbs.Separator`, and `Breadcrumbs.Clipboard`.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n * <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport function Breadcrumb({\n children,\n size = \"base\",\n className,\n}: BreadcrumbsProps) {\n const childArray = Children.toArray(children);\n const mobileChildren = getMobileBreadcrumbChildren(childArray);\n\n return (\n <nav\n className={cn(breadcrumbsVariants({ size }), className)}\n aria-label=\"breadcrumb\"\n >\n <div className=\"contents sm:hidden\">{mobileChildren}</div>\n <div className=\"hidden sm:contents\">{childArray}</div>\n </nav>\n );\n}\n\nfunction isComponentElement(\n child: ReactNode,\n component: unknown,\n): child is ReactElement {\n return isValidElement(child) && child.type === component;\n}\n\nfunction getMobileBreadcrumbChildren(children: ReactNode[]): ReactNode[] {\n const breadcrumbItems = children.filter(\n (child) =>\n isComponentElement(child, Link) || isComponentElement(child, Current),\n ) as ReactElement[];\n\n if (breadcrumbItems.length <= 2) {\n return children;\n }\n\n const [parentItem, currentItem] = breadcrumbItems.slice(-2);\n const trailingItems: ReactNode[] = [\n <MobileEllipsis key=\"kumo-breadcrumb-mobile-ellipsis\" />,\n <Separator key=\"kumo-breadcrumb-mobile-separator-leading\" />,\n cloneElement(parentItem, { key: \"kumo-breadcrumb-mobile-parent\" }),\n <Separator key=\"kumo-breadcrumb-mobile-separator-trailing\" />,\n cloneElement(currentItem, { key: \"kumo-breadcrumb-mobile-current\" }),\n ];\n\n const extras = children.filter(\n (child) =>\n !isComponentElement(child, Link) &&\n !isComponentElement(child, Current) &&\n !isComponentElement(child, Separator),\n );\n\n return [...trailingItems, ...extras];\n}\n\nBreadcrumb.Link = Link;\nBreadcrumb.Current = Current;\nBreadcrumb.Separator = Separator;\nBreadcrumb.Clipboard = Clipboard;\n"],"names":["KUMO_BREADCRUMBS_VARIANTS","KUMO_BREADCRUMBS_DEFAULT_VARIANTS","breadcrumbsVariants","size","cn","resolveVariant","Link","href","icon","children","LinkComponent","useLinkComponent","jsxs","jsx","Current","loading","SkeletonLine","Separator","MobileEllipsis","Clipboard","text","isCopied","setIsCopied","useState","useEffect","timeoutId","Button","err","CheckIcon","CopyIcon","Breadcrumb","className","childArray","Children","mobileChildren","getMobileBreadcrumbChildren","isComponentElement","child","component","isValidElement","breadcrumbItems","parentItem","currentItem","trailingItems","cloneElement","extras"],"mappings":";;;;;;;;;AAkBO,MAAMA,IAA4B;AAAA,EACvC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAAoC;AAAA,EAC/C,MAAM;AACR;AAcO,SAASC,EAAoB;AAAA,EAClC,MAAAC,IAAOF,EAAkC;AAC3C,IAAkC,IAAI;AACpC,SAAOG;AAAA,IACL;AAAA,IACAC,EAAeL,EAA0B,MAAMG,GAAMF,EAAkC,IAAI,EAAE;AAAA,EAAA;AAEjG;AAOA,MAAMK,IAAO,CAAC;AAAA,EACZ,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AACF,MAA+C;AAC7C,QAAMC,IAAgBC,EAAA;AAEtB,SACE,gBAAAC;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,uBAAoB;AAAA,MACpB,kBAAe;AAAA,MACf,IAAIH;AAAA,MACJ,WAAU;AAAA,MAET,UAAA;AAAA,QAAA,CAAC,CAACC,KAAQ,gBAAAK,EAAC,QAAA,EAAK,WAAU,8BAA8B,UAAAL,GAAK;AAAA,QAC9D,gBAAAK,EAAC,QAAA,EAAK,WAAU,YAAY,UAAAJ,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3C;AAOA,SAASK,EAAQ;AAAA,EACf,UAAAL;AAAA,EACA,MAAAD;AAAA,EACA,SAAAO;AACF,GAA+C;AAC7C,SAAIA,IAEA,gBAAAH,EAAC,OAAA,EAAI,WAAU,6CACZ,UAAA;AAAA,IAAAJ,KAAQ,gBAAAK,EAAC,QAAA,EAAK,WAAU,8BAA8B,UAAAL,GAAK;AAAA,sBAC3DQ,GAAA,CAAA,CAAa;AAAA,EAAA,GAChB,IAKF,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,gBAAa;AAAA,MAEZ,UAAA;AAAA,QAAAJ,KAAQ,gBAAAK,EAAC,QAAA,EAAK,WAAU,8BAA8B,UAAAL,GAAK;AAAA,QAC5D,gBAAAK,EAAC,QAAA,EAAK,WAAU,YAAY,UAAAJ,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3C;AAEA,SAASQ,IAAY;AACnB,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAY;AAAA,MAEZ,UAAA,gBAAAA,EAAC,SAAI,OAAM,MAAK,QAAO,MAAK,MAAK,QAAO,SAAQ,aAC9C,UAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAY;AAAA,UACZ,GAAE;AAAA,QAAA;AAAA,MAAA,EACJ,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAASK,IAAiB;AACxB,2BACG,QAAA,EAAK,WAAU,+CAA8C,eAAW,IAAC,UAAA,OAE1E;AAEJ;AAEA,SAASC,EAAU,EAAE,MAAAC,KAA0B;AAC7C,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK;AAE9C,SAAAC,EAAU,MAAM;AACd,QAAI,CAACH,EAAU;AAEf,UAAMI,IAAY,WAAW,MAAMH,EAAY,EAAK,GAAG,GAAI;AAC3D,WAAO,MAAM,aAAaG,CAAS;AAAA,EACrC,GAAG,CAACJ,CAAQ,CAAC,GAcX,gBAAAR;AAAA,IAACa;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,MAAK;AAAA,MACL,WAAU;AAAA,MACV,SAjBuB,YAAY;AACrC,YAAKN;AAEL,cAAI;AACF,kBAAM,UAAU,UAAU,UAAUA,CAAI,GACxCE,EAAY,EAAI;AAAA,UAClB,SAASK,GAAK;AACZ,oBAAQ,MAAM,4BAA4BA,CAAG;AAAA,UAC/C;AAAA,MACF;AAAA,MASI,OAAM;AAAA,MACN,cAAW;AAAA,MAEV,UAAAN,IACC,gBAAAR,EAACe,GAAA,EAAU,QAAO,QAAO,WAAU,oBAAA,CAAoB,IAEvD,gBAAAf,EAACgB,GAAA,EAAS,QAAO,UAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAInC;AAoCO,SAASC,EAAW;AAAA,EACzB,UAAArB;AAAA,EACA,MAAAN,IAAO;AAAA,EACP,WAAA4B;AACF,GAAqB;AACnB,QAAMC,IAAaC,EAAS,QAAQxB,CAAQ,GACtCyB,IAAiBC,EAA4BH,CAAU;AAE7D,SACE,gBAAApB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWR,EAAGF,EAAoB,EAAE,MAAAC,EAAA,CAAM,GAAG4B,CAAS;AAAA,MACtD,cAAW;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAlB,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAqB,GAAe;AAAA,QACpD,gBAAArB,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAmB,EAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtD;AAEA,SAASI,EACPC,GACAC,GACuB;AACvB,SAAOC,EAAeF,CAAK,KAAKA,EAAM,SAASC;AACjD;AAEA,SAASH,EAA4B1B,GAAoC;AACvE,QAAM+B,IAAkB/B,EAAS;AAAA,IAC/B,CAAC4B,MACCD,EAAmBC,GAAO/B,CAAI,KAAK8B,EAAmBC,GAAOvB,CAAO;AAAA,EAAA;AAGxE,MAAI0B,EAAgB,UAAU;AAC5B,WAAO/B;AAGT,QAAM,CAACgC,GAAYC,CAAW,IAAIF,EAAgB,MAAM,EAAE,GACpDG,IAA6B;AAAA,IACjC,gBAAA9B,EAACK,OAAmB,iCAAkC;AAAA,IACtD,gBAAAL,EAACI,OAAc,0CAA2C;AAAA,IAC1D2B,EAAaH,GAAY,EAAE,KAAK,iCAAiC;AAAA,IACjE,gBAAA5B,EAACI,OAAc,2CAA4C;AAAA,IAC3D2B,EAAaF,GAAa,EAAE,KAAK,kCAAkC;AAAA,EAAA,GAG/DG,IAASpC,EAAS;AAAA,IACtB,CAAC4B,MACC,CAACD,EAAmBC,GAAO/B,CAAI,KAC/B,CAAC8B,EAAmBC,GAAOvB,CAAO,KAClC,CAACsB,EAAmBC,GAAOpB,CAAS;AAAA,EAAA;AAGxC,SAAO,CAAC,GAAG0B,GAAe,GAAGE,CAAM;AACrC;AAEAf,EAAW,OAAOxB;AAClBwB,EAAW,UAAUhB;AACrBgB,EAAW,YAAYb;AACvBa,EAAW,YAAYX;"}
|
|
@@ -52,7 +52,7 @@ const u = {
|
|
|
52
52
|
description: "High-emphasis button for primary actions"
|
|
53
53
|
},
|
|
54
54
|
secondary: {
|
|
55
|
-
classes: "bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-
|
|
55
|
+
classes: "bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-line data-[state=open]:bg-kumo-base",
|
|
56
56
|
description: "Default button style for most actions"
|
|
57
57
|
},
|
|
58
58
|
ghost: {
|
|
@@ -64,11 +64,11 @@ const u = {
|
|
|
64
64
|
description: "Danger button for destructive actions like delete"
|
|
65
65
|
},
|
|
66
66
|
"secondary-destructive": {
|
|
67
|
-
classes: "bg-kumo-base !text-kumo-danger ring not-disabled:hover:
|
|
67
|
+
classes: "bg-kumo-base !text-kumo-danger ring not-disabled:hover:!text-kumo-danger not-disabled:hover:ring-kumo-danger/30 disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-base",
|
|
68
68
|
description: "Secondary button with destructive text for less prominent dangerous actions"
|
|
69
69
|
},
|
|
70
70
|
outline: {
|
|
71
|
-
classes: "bg-transparent text-kumo-default ring ring-kumo-
|
|
71
|
+
classes: "bg-transparent text-kumo-default ring ring-kumo-line transition-colors not-disabled:hover:text-kumo-strong not-disabled:hover:ring-kumo-focus/25",
|
|
72
72
|
description: "Bordered button with transparent background"
|
|
73
73
|
}
|
|
74
74
|
}
|
|
@@ -77,7 +77,7 @@ const u = {
|
|
|
77
77
|
size: "base",
|
|
78
78
|
variant: "secondary"
|
|
79
79
|
};
|
|
80
|
-
function
|
|
80
|
+
function v({
|
|
81
81
|
variant: s = a.variant,
|
|
82
82
|
size: t = a.size,
|
|
83
83
|
shape: e = a.shape
|
|
@@ -114,7 +114,7 @@ function y({
|
|
|
114
114
|
).classes
|
|
115
115
|
);
|
|
116
116
|
}
|
|
117
|
-
const
|
|
117
|
+
const y = (s) => s ? k.isValidElement(s) ? s : /* @__PURE__ */ n(s, {}) : null, z = k.forwardRef(
|
|
118
118
|
({
|
|
119
119
|
children: s,
|
|
120
120
|
className: t,
|
|
@@ -133,7 +133,7 @@ const v = (s) => s ? k.isValidElement(s) ? s : /* @__PURE__ */ n(s, {}) : null,
|
|
|
133
133
|
ref: g,
|
|
134
134
|
"data-kumo-component": "Button",
|
|
135
135
|
className: l(
|
|
136
|
-
|
|
136
|
+
v({ variant: m, size: r, shape: d }),
|
|
137
137
|
e && "cursor-not-allowed opacity-50",
|
|
138
138
|
t
|
|
139
139
|
),
|
|
@@ -141,7 +141,7 @@ const v = (s) => s ? k.isValidElement(s) ? s : /* @__PURE__ */ n(s, {}) : null,
|
|
|
141
141
|
type: f ?? "button",
|
|
142
142
|
...w,
|
|
143
143
|
children: [
|
|
144
|
-
o ? /* @__PURE__ */ n(N, { size: r === "lg" ? 16 : 14 }) :
|
|
144
|
+
o ? /* @__PURE__ */ n(N, { size: r === "lg" ? 16 : 14 }) : y(b),
|
|
145
145
|
s != null && /* @__PURE__ */ n("span", { className: "contents", children: s })
|
|
146
146
|
]
|
|
147
147
|
}
|
|
@@ -184,7 +184,7 @@ const q = ({
|
|
|
184
184
|
ref: p,
|
|
185
185
|
"data-kumo-component": "LinkButton",
|
|
186
186
|
className: l(
|
|
187
|
-
|
|
187
|
+
v({ variant: m, size: r, shape: d }),
|
|
188
188
|
"flex items-center no-underline!",
|
|
189
189
|
t
|
|
190
190
|
),
|
|
@@ -193,7 +193,7 @@ const q = ({
|
|
|
193
193
|
...f,
|
|
194
194
|
...i,
|
|
195
195
|
children: [
|
|
196
|
-
|
|
196
|
+
y(b),
|
|
197
197
|
s
|
|
198
198
|
]
|
|
199
199
|
}
|
|
@@ -205,6 +205,6 @@ export {
|
|
|
205
205
|
z as B,
|
|
206
206
|
S as L,
|
|
207
207
|
q as R,
|
|
208
|
-
|
|
208
|
+
v as b
|
|
209
209
|
};
|
|
210
|
-
//# sourceMappingURL=button-
|
|
210
|
+
//# sourceMappingURL=button-ov39dxshqbqrthhd.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-ov39dxshqbqrthhd.js","sources":["../../src/components/button/button.tsx"],"sourcesContent":["import React from \"react\";\nimport { ArrowsClockwise, type Icon } from \"@phosphor-icons/react\";\nimport { Loader } from \"../loader/loader\";\nimport { Tooltip } from \"../tooltip/tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\n\n/** Button variant definitions mapping shape, size, and variant names to their Tailwind classes. */\nexport const KUMO_BUTTON_VARIANTS = {\n shape: {\n base: {\n classes: \"\",\n description: \"Default rectangular button shape\",\n },\n square: {\n classes: \"items-center justify-center p-0\",\n description: \"Square button for icon-only actions\",\n },\n circle: {\n classes: \"items-center justify-center p-0 rounded-full\",\n description: \"Circular button for icon-only actions\",\n },\n },\n size: {\n xs: {\n classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n description: \"Extra small button for compact UIs\",\n },\n sm: {\n classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n description: \"Small button for secondary actions\",\n },\n base: {\n classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n description: \"Default button size\",\n },\n lg: {\n classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n description: \"Large button for primary CTAs\",\n },\n },\n compactSize: {\n xs: { classes: \"size-3.5\" },\n sm: { classes: \"size-6.5\" },\n base: { classes: \"size-9\" },\n lg: { classes: \"size-10\" },\n },\n variant: {\n primary: {\n classes:\n \"bg-kumo-brand !text-white hover:bg-kumo-brand-hover disabled:bg-kumo-brand/50\",\n description: \"High-emphasis button for primary actions\",\n },\n secondary: {\n classes:\n \"bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-line data-[state=open]:bg-kumo-base\",\n description: \"Default button style for most actions\",\n },\n ghost: {\n classes: \"text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit\",\n description: \"Minimal button with no background\",\n },\n destructive: {\n classes: \"bg-kumo-danger !text-white hover:bg-kumo-danger/70\",\n description: \"Danger button for destructive actions like delete\",\n },\n \"secondary-destructive\": {\n classes:\n \"bg-kumo-base !text-kumo-danger ring not-disabled:hover:!text-kumo-danger not-disabled:hover:ring-kumo-danger/30 disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-base\",\n description:\n \"Secondary button with destructive text for less prominent dangerous actions\",\n },\n outline: {\n classes:\n \"bg-transparent text-kumo-default ring ring-kumo-line transition-colors not-disabled:hover:text-kumo-strong not-disabled:hover:ring-kumo-focus/25\",\n description: \"Bordered button with transparent background\",\n },\n },\n} as const;\n\nexport const KUMO_BUTTON_DEFAULT_VARIANTS = {\n shape: \"base\",\n size: \"base\",\n variant: \"secondary\",\n} as const;\n\n// Derived types from KUMO_BUTTON_VARIANTS\nexport type KumoButtonShape = keyof typeof KUMO_BUTTON_VARIANTS.shape;\nexport type KumoButtonSize = keyof typeof KUMO_BUTTON_VARIANTS.size;\nexport type KumoButtonVariant = keyof typeof KUMO_BUTTON_VARIANTS.variant;\n\nexport interface KumoButtonVariantsProps {\n /**\n * Button shape.\n * - `\"base\"` — Default rectangular button\n * - `\"square\"` — Square button for icon-only actions\n * - `\"circle\"` — Circular button for icon-only actions\n * @default \"base\"\n */\n shape?: KumoButtonShape;\n /**\n * Button size.\n * - `\"xs\"` — Extra small for compact UIs\n * - `\"sm\"` — Small for secondary actions\n * - `\"base\"` — Default size\n * - `\"lg\"` — Large for primary CTAs\n * @default \"base\"\n */\n size?: KumoButtonSize;\n /**\n * Visual style of the button.\n * - `\"primary\"` — High-emphasis, brand-colored for primary actions\n * - `\"secondary\"` — Default style with border for most actions\n * - `\"ghost\"` — Minimal, no background for tertiary actions\n * - `\"destructive\"` — Danger button for destructive actions\n * - `\"secondary-destructive\"` — Secondary style with destructive text\n * - `\"outline\"` — Bordered with transparent background\n * @default \"secondary\"\n */\n variant?: KumoButtonVariant;\n}\n\nexport function buttonVariants({\n variant = KUMO_BUTTON_DEFAULT_VARIANTS.variant,\n size = KUMO_BUTTON_DEFAULT_VARIANTS.size,\n shape = KUMO_BUTTON_DEFAULT_VARIANTS.shape,\n}: KumoButtonVariantsProps = {}) {\n const isCompactShape = shape === \"square\" || shape === \"circle\";\n\n return cn(\n // Base styles\n \"group flex w-max shrink-0 items-center font-medium select-none\",\n \"border-0 shadow-xs\",\n \"focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n \"cursor-pointer\",\n // Disabled state\n \"disabled:cursor-not-allowed disabled:text-kumo-subtle\",\n // Apply variant, size, shape styles from KUMO_BUTTON_VARIANTS\n resolveVariant(\n KUMO_BUTTON_VARIANTS.variant,\n variant,\n KUMO_BUTTON_DEFAULT_VARIANTS.variant,\n ).classes,\n resolveVariant(\n KUMO_BUTTON_VARIANTS.size,\n size,\n KUMO_BUTTON_DEFAULT_VARIANTS.size,\n ).classes,\n resolveVariant(\n KUMO_BUTTON_VARIANTS.shape,\n shape,\n KUMO_BUTTON_DEFAULT_VARIANTS.shape,\n ).classes,\n isCompactShape &&\n resolveVariant(\n KUMO_BUTTON_VARIANTS.compactSize,\n size,\n KUMO_BUTTON_DEFAULT_VARIANTS.size,\n ).classes,\n );\n}\n\n// Normalize icon prop to support both React elements and component types\nconst renderIconNode = (IconComponent?: Icon | React.ReactNode) => {\n if (!IconComponent) return null;\n if (React.isValidElement(IconComponent)) return IconComponent;\n const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;\n return <Comp />;\n};\n\n/**\n * Button component props.\n *\n * Uses a discriminated union on `shape` so that icon-only buttons\n * (`shape=\"square\"` or `shape=\"circle\"`) require an `aria-label`.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\">Save</Button>\n * <Button variant=\"secondary\" shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n * <Button variant=\"destructive\" loading>Deleting...</Button>\n * ```\n */\ntype ButtonBaseProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n /** Content rendered inside the button. */\n children?: React.ReactNode;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */\n icon?: Icon | React.ReactNode;\n /** Shows a loading spinner and disables interaction. */\n loading?: boolean;\n /** When set, wraps the button in a Tooltip with this content. */\n title?: React.ReactNode;\n};\n\ntype ButtonWithTextProps = ButtonBaseProps & {\n shape?: \"base\";\n size?: KumoButtonSize;\n variant?: KumoButtonVariant;\n};\n\ntype IconOnlyButtonProps = ButtonBaseProps & {\n shape: \"square\" | \"circle\";\n size?: KumoButtonSize;\n variant?: KumoButtonVariant;\n /** Required for icon-only buttons to provide accessible label for screen readers */\n \"aria-label\": string;\n};\n\nexport type ButtonProps = ButtonWithTextProps | IconOnlyButtonProps;\n\n/**\n * LinkButton component props — renders an anchor styled as a button.\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/docs\" variant=\"ghost\" icon={BookIcon}>Docs</LinkButton>\n * <LinkButton href=\"https://example.com\" external>Visit Site</LinkButton>\n * ```\n */\nexport type LinkButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &\n KumoButtonVariantsProps & {\n /** Content rendered inside the link button. */\n children?: React.ReactNode;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */\n icon?: Icon | React.ReactNode;\n /** When `true`, opens in a new tab with `rel=\"noopener noreferrer\"`. */\n external?: boolean;\n linksExternal?: boolean;\n };\n\n/**\n * Primary action trigger. Supports multiple variants, sizes, shapes, icons, and loading state.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\">Save</Button>\n * <Button variant=\"secondary\" icon={PlusIcon}>Create Worker</Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n className,\n disabled,\n loading,\n shape = \"base\",\n size = \"base\",\n variant = \"secondary\",\n icon: IconComponent,\n title,\n ...props\n },\n ref,\n ) => {\n const { type, ...restProps } = props;\n const button = (\n <button\n ref={ref}\n data-kumo-component=\"Button\"\n className={cn(\n buttonVariants({ variant, size, shape }),\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n disabled={loading || disabled}\n type={type ?? \"button\"}\n {...restProps}\n >\n {loading ? (\n <Loader size={size === \"lg\" ? 16 : 14} />\n ) : (\n renderIconNode(IconComponent)\n )}\n {children != null && <span className=\"contents\">{children}</span>}\n </button>\n );\n\n if (title) {\n return <Tooltip content={title} render={button} />;\n }\n\n return button;\n },\n);\n\nButton.displayName = \"Button\";\n\n/**\n * Square button with a rotating arrows icon, used to trigger data refresh actions.\n *\n * @example\n * ```tsx\n * <RefreshButton loading={isRefreshing} onClick={refresh} />\n * ```\n */\nexport const RefreshButton = ({\n \"aria-label\": ariaLabel = \"Refresh\",\n loading,\n ...props\n}: ButtonProps) => (\n <Button shape=\"square\" aria-label={ariaLabel} {...props}>\n <ArrowsClockwise\n className={cn({\n \"animate-refresh\": loading,\n \"size-4.5\": props.size === \"base\" || !props.size,\n \"size-4\": props.size === \"sm\",\n \"size-5\": props.size === \"lg\",\n })}\n />\n </Button>\n);\n\n/**\n * Anchor element styled as a button. Integrates with `LinkProvider` for framework routing.\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/settings\" variant=\"ghost\">Settings</LinkButton>\n * ```\n */\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n (\n {\n children,\n className,\n external,\n href,\n shape = \"base\",\n size = \"base\",\n variant = \"ghost\",\n icon: IconComponent,\n // linksExternal = false,\n ...props\n },\n ref,\n ) => {\n const LinkComponent = useLinkComponent();\n const externalProps = external\n ? { target: \"_blank\", rel: \"noopener noreferrer\" }\n : {};\n\n return (\n <LinkComponent\n ref={ref}\n data-kumo-component=\"LinkButton\"\n className={cn(\n buttonVariants({ variant, size, shape }),\n \"flex items-center no-underline!\",\n className,\n )}\n href={href}\n to={typeof href === \"string\" ? href : undefined}\n {...externalProps}\n {...props}\n >\n {renderIconNode(IconComponent)}\n {children}\n </LinkComponent>\n );\n },\n);\n\nLinkButton.displayName = \"LinkButton\";\n"],"names":["KUMO_BUTTON_VARIANTS","KUMO_BUTTON_DEFAULT_VARIANTS","buttonVariants","variant","size","shape","isCompactShape","cn","resolveVariant","renderIconNode","IconComponent","React","Button","children","className","disabled","loading","title","props","ref","type","restProps","button","jsxs","jsx","Loader","Tooltip","RefreshButton","ariaLabel","ArrowsClockwise","LinkButton","external","href","LinkComponent","useLinkComponent","externalProps"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { jsx as e, jsxs as x } from "react/jsx-runtime";
|
|
|
3
3
|
import { forwardRef as g, createContext as B, useContext as F } from "react";
|
|
4
4
|
import { MinusIcon as C, CheckIcon as v } from "@phosphor-icons/react";
|
|
5
5
|
import { c as i } from "./cn-ct4n7r74mh8y0f48.js";
|
|
6
|
-
import { L as E } from "./label-
|
|
6
|
+
import { L as E } from "./label-kib2hn4pkbn28c31.js";
|
|
7
7
|
import { L as N, N as y, O as K, P as R, Q as w, C as _, U as G } from "./vendor-base-ui-knphx7dts1vm1x37.js";
|
|
8
8
|
const H = {
|
|
9
9
|
variant: {
|
|
@@ -213,4 +213,4 @@ export {
|
|
|
213
213
|
H as K,
|
|
214
214
|
X as a
|
|
215
215
|
};
|
|
216
|
-
//# sourceMappingURL=checkbox-
|
|
216
|
+
//# sourceMappingURL=checkbox-bt4nfv1i2142kykg.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-dqih8tzzt3vhp870.js","sources":["../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { CheckIcon, MinusIcon } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Label } from \"../label\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\n\n/** Event details passed to onCheckedChange callback. Re-exported from Base UI. */\nexport type CheckboxChangeEventDetails = Parameters<\n NonNullable<BaseCheckbox.Root.Props[\"onCheckedChange\"]>\n>[1];\n\n/** Checkbox variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_CHECKBOX_VARIANTS = {\n variant: {\n default: {\n classes:\n \"[&:focus-within>span]:ring-kumo-focus [&:hover>span]:ring-kumo-hairline\",\n description: \"Default checkbox appearance\",\n },\n error: {\n classes: \"[&>span]:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_CHECKBOX_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_CHECKBOX_VARIANTS\nexport type KumoCheckboxVariant = keyof typeof KUMO_CHECKBOX_VARIANTS.variant;\n\nexport interface KumoCheckboxVariantsProps {\n /**\n * Visual variant.\n * - `\"default\"` — Standard checkbox appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoCheckboxVariant;\n}\n\nexport function checkboxVariants({\n variant = KUMO_CHECKBOX_DEFAULT_VARIANTS.variant,\n}: KumoCheckboxVariantsProps = {}) {\n return cn(resolveVariant(KUMO_CHECKBOX_VARIANTS.variant, variant, KUMO_CHECKBOX_DEFAULT_VARIANTS.variant).classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type CheckboxVariant = KumoCheckboxVariant;\n\n// Context for passing controlFirst from Group to Items\nconst CheckboxGroupContext = createContext<{ controlFirst: boolean }>({\n controlFirst: true,\n});\n\n/**\n * Single checkbox component props with accessibility guidance.\n *\n * **Accessible Name Required:** Checkbox should have one of:\n * 1. `label` prop (recommended) - built-in Field wrapper with horizontal layout\n * 2. `aria-label` - for checkboxes without visible label\n * 3. `aria-labelledby` - for custom label association\n *\n * **Note:** When used inside Checkbox.Group or Dropdown, label is optional (parent provides context).\n *\n * Missing accessible names will trigger console warnings in development (unless inside a group).\n *\n * @example\n * // Recommended: Built-in Field wrapper with label\n * <Checkbox label=\"Accept terms and conditions\" />\n *\n * @example\n * // Control-first layout (checkbox before label)\n * <Checkbox label=\"Remember me\" controlFirst={true} />\n *\n * @example\n * // Label-first layout (label before checkbox)\n * <Checkbox label=\"Enable notifications\" controlFirst={false} />\n *\n * @example\n * // Error variant (visual only, no error text for single checkboxes)\n * <Checkbox label=\"Required field\" variant=\"error\" />\n *\n * @example\n * // Without visible label (aria-label required)\n * <Checkbox aria-label=\"Select all items\" />\n *\n * @example\n * // Custom label association\n * <label id=\"terms-label\">I accept the terms</label>\n * <Checkbox aria-labelledby=\"terms-label\" />\n *\n * @example\n * // Inside Checkbox.Group (label optional)\n * <Checkbox.Group legend=\"Preferences\">\n * <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n * <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n * </Checkbox.Group>\n */\nexport type CheckboxProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n variant?: CheckboxVariant;\n /** Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n controlFirst?: boolean;\n /** Whether the checkbox is checked (controlled) */\n checked?: boolean;\n /** Whether the checkbox is in indeterminate state */\n indeterminate?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: BaseCheckbox.Root.Props[\"onCheckedChange\"];\n /** Name for form submission */\n name?: string;\n /** Whether the field is required */\n required?: boolean;\n /** Additional class name */\n className?: string;\n /** Accessible label when no visible label is provided */\n \"aria-label\"?: string;\n /** ID of element that labels this checkbox */\n \"aria-labelledby\"?: string;\n};\n\n/**\n * Checkbox group component props (with built-in Fieldset and CheckboxGroup)\n *\n * Usage:\n * ```tsx\n * <Checkbox.Group\n * legend=\"Choose preferences\"\n * defaultValue={['email']}\n * error=\"You must select at least one option\"\n * >\n * <Checkbox.Item label=\"Email notifications\" value=\"email\" />\n * <Checkbox.Item label=\"SMS notifications\" value=\"sms\" />\n * </Checkbox.Group>\n * ```\n */\n/**\n * Props for Checkbox.Legend — a composable sub-component for labeling a Checkbox.Group.\n *\n * Place as a direct child of `<Checkbox.Group>` to provide a styled, accessible legend.\n * Accepts `className` for full styling control (e.g. `className=\"sr-only\"` to visually hide).\n *\n * @example\n * ```tsx\n * <Checkbox.Group>\n * <Checkbox.Legend className=\"sr-only\">Preferences</Checkbox.Legend>\n * <Checkbox.Item label=\"Email\" value=\"email\" />\n * </Checkbox.Group>\n * ```\n */\nexport interface CheckboxLegendProps {\n /** Legend content */\n children: ReactNode;\n /** Additional CSS classes (e.g. \"sr-only\" to visually hide the legend) */\n className?: string;\n}\n\nexport interface CheckboxGroupProps {\n /**\n * Legend text for the group.\n * For more control over legend styling, omit this prop and use `<Checkbox.Legend>` as a child instead.\n */\n legend?: string;\n /** Child Checkbox.Item components (and optionally a Checkbox.Legend) */\n children: ReactNode;\n /** Error message for the group (only appears in groups, not single checkboxes) */\n error?: string;\n /** Helper text for the group */\n description?: ReactNode;\n /** Values of checkboxes that should be initially checked (uncontrolled) */\n defaultValue?: string[];\n /** Values of checkboxes that should be checked (controlled) */\n value?: string[];\n /** Event handler called when checkbox values change */\n onValueChange?: (value: string[]) => void;\n /** All possible checkbox values (required for parent checkbox pattern) */\n allValues?: string[];\n /** Whether all checkboxes in the group are disabled */\n disabled?: boolean;\n /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n controlFirst?: boolean;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Individual checkbox item within a group\n */\nexport type CheckboxItemProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures */\n variant?: CheckboxVariant;\n /** Label text displayed next to checkbox */\n label: string;\n /** Value of the checkbox (required when used in Checkbox.Group) */\n value?: string;\n /** Additional CSS classes for the label wrapper */\n className?: string;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: BaseCheckbox.Root.Props[\"onCheckedChange\"];\n name?: string;\n};\n\n// Single checkbox with built-in Field\nconst CheckboxBase = forwardRef<HTMLButtonElement, CheckboxProps>(\n (\n {\n className,\n checked,\n indeterminate,\n disabled,\n variant = \"default\",\n label,\n labelTooltip,\n controlFirst = true,\n onCheckedChange,\n required,\n name,\n ...props\n },\n ref,\n ) => {\n // A11y enforcement: warn in dev if no accessible name provided\n if (process.env.NODE_ENV !== \"production\") {\n const hasLabel = Boolean(label);\n const hasAriaLabel = Boolean(props[\"aria-label\"]);\n const hasAriaLabelledBy = Boolean(props[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Checkbox]: Checkbox must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Checkbox label='Accept terms' />\\n\" +\n \" - aria-label: <Checkbox aria-label='Select item' />\\n\" +\n \" - aria-labelledby for custom label association\\n\" +\n \" Note: When used inside Checkbox.Group, label is optional\",\n );\n }\n }\n\n const checkboxControl = (\n <BaseCheckbox.Root\n ref={ref}\n data-kumo-component=\"Checkbox\"\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={onCheckedChange}\n className={cn(\n \"relative flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border-0 bg-kumo-base ring focus:outline-none after:absolute after:-inset-x-3 after:-inset-y-2\",\n label && \"mt-0.5\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-hairline\",\n !disabled &&\n \"hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n {...props}\n >\n <BaseCheckbox.Indicator\n keepMounted\n className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n render={(renderProps, state) => (\n <span {...renderProps}>\n {state.indeterminate ? (\n <MinusIcon weight=\"bold\" size={12} />\n ) : (\n <CheckIcon weight=\"bold\" size={12} />\n )}\n </span>\n )}\n />\n </BaseCheckbox.Root>\n );\n\n // If no label provided, return bare checkbox (for use in other components like Dropdown)\n if (!label) {\n return checkboxControl;\n }\n\n // Use Field.Root + Field.Label enclosing pattern for proper a11y association\n // See: https://base-ui.com/react/components/field\n return (\n <FieldBase.Root className=\"inline-flex\">\n <FieldBase.Label\n className={cn(\n \"!m-0 !min-h-0 !text-base inline-flex items-start gap-2\",\n controlFirst ? \"flex-row\" : \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n )}\n >\n {checkboxControl}\n <Label\n showOptional={required === false}\n tooltip={labelTooltip}\n asContent\n >\n {label}\n </Label>\n </FieldBase.Label>\n </FieldBase.Root>\n );\n },\n);\n\nCheckboxBase.displayName = \"Checkbox\";\n\n// Checkbox.Item for use within Checkbox.Group\nconst CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(\n (\n {\n className,\n checked,\n indeterminate,\n disabled,\n variant = \"default\",\n label,\n value,\n onCheckedChange,\n name,\n },\n ref,\n ) => {\n const { controlFirst } = useContext(CheckboxGroupContext);\n\n return (\n <label\n data-kumo-component=\"Checkbox\"\n data-kumo-part=\"item-label\"\n className={cn(\n \"m-0 relative inline-flex items-start gap-2\",\n // Control first (default): checkbox before label\n // Label first: label before checkbox using flex-row-reverse\n !controlFirst && \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n className,\n )}\n >\n <BaseCheckbox.Root\n ref={ref}\n data-kumo-component=\"Checkbox\"\n data-kumo-part=\"item\"\n value={value}\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={onCheckedChange}\n className={cn(\n \"peer relative mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-hairline\",\n !disabled &&\n \"group-hover:ring-kumo-hairline hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n )}\n >\n <BaseCheckbox.Indicator\n keepMounted\n className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n render={(renderProps, state) => (\n <span {...renderProps}>\n {state.indeterminate ? (\n <MinusIcon weight=\"bold\" size={12} />\n ) : (\n <CheckIcon weight=\"bold\" size={12} />\n )}\n </span>\n )}\n />\n </BaseCheckbox.Root>\n <span className=\"text-base text-kumo-default\">{label}</span>\n </label>\n );\n },\n);\n\nCheckboxItem.displayName = \"Checkbox.Item\";\n\n// Checkbox.Legend — composable legend sub-component for Checkbox.Group\nfunction CheckboxLegend({ children, className }: CheckboxLegendProps) {\n return (\n <Fieldset.Legend\n className={cn(\"text-base font-medium text-kumo-default\", className)}\n >\n {children}\n </Fieldset.Legend>\n );\n}\n\nCheckboxLegend.displayName = \"Checkbox.Legend\";\n\n// Checkbox.Group with built-in Fieldset and CheckboxGroup\nfunction CheckboxGroup({\n legend,\n children,\n error,\n description,\n defaultValue,\n value,\n onValueChange,\n allValues,\n disabled,\n controlFirst = true,\n className,\n}: CheckboxGroupProps) {\n return (\n <CheckboxGroupContext.Provider value={{ controlFirst }}>\n <BaseCheckboxGroup\n defaultValue={defaultValue}\n value={value}\n onValueChange={onValueChange}\n allValues={allValues}\n disabled={disabled}\n >\n <Fieldset.Root className={cn(\"flex flex-col gap-4\", className)}>\n {legend && (\n <Fieldset.Legend className=\"text-base font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n )}\n <div className=\"flex flex-col gap-2\">{children}</div>\n {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n {description && (\n <p className=\"text-sm text-kumo-subtle\">{description}</p>\n )}\n </Fieldset.Root>\n </BaseCheckboxGroup>\n </CheckboxGroupContext.Provider>\n );\n}\n\n// Compound component\nexport const Checkbox = Object.assign(CheckboxBase, {\n Item: CheckboxItem,\n Group: CheckboxGroup,\n Legend: CheckboxLegend,\n});\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["KUMO_CHECKBOX_VARIANTS","KUMO_CHECKBOX_DEFAULT_VARIANTS","CheckboxGroupContext","createContext","CheckboxBase","forwardRef","className","checked","indeterminate","disabled","variant","label","labelTooltip","controlFirst","onCheckedChange","required","name","props","ref","hasLabel","hasAriaLabel","hasAriaLabelledBy","checkboxControl","jsx","BaseCheckbox.Root","cn","BaseCheckbox.Indicator","renderProps","state","MinusIcon","CheckIcon","FieldBase.Root","jsxs","FieldBase.Label","Label","CheckboxItem","value","useContext","CheckboxLegend","children","Fieldset.Legend","CheckboxGroup","legend","error","description","defaultValue","onValueChange","allValues","BaseCheckboxGroup","Fieldset.Root","Checkbox"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"checkbox-bt4nfv1i2142kykg.js","sources":["../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { CheckIcon, MinusIcon } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Label } from \"../label\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\n\n/** Event details passed to onCheckedChange callback. Re-exported from Base UI. */\nexport type CheckboxChangeEventDetails = Parameters<\n NonNullable<BaseCheckbox.Root.Props[\"onCheckedChange\"]>\n>[1];\n\n/** Checkbox variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_CHECKBOX_VARIANTS = {\n variant: {\n default: {\n classes:\n \"[&:focus-within>span]:ring-kumo-focus [&:hover>span]:ring-kumo-hairline\",\n description: \"Default checkbox appearance\",\n },\n error: {\n classes: \"[&>span]:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_CHECKBOX_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_CHECKBOX_VARIANTS\nexport type KumoCheckboxVariant = keyof typeof KUMO_CHECKBOX_VARIANTS.variant;\n\nexport interface KumoCheckboxVariantsProps {\n /**\n * Visual variant.\n * - `\"default\"` — Standard checkbox appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoCheckboxVariant;\n}\n\nexport function checkboxVariants({\n variant = KUMO_CHECKBOX_DEFAULT_VARIANTS.variant,\n}: KumoCheckboxVariantsProps = {}) {\n return cn(resolveVariant(KUMO_CHECKBOX_VARIANTS.variant, variant, KUMO_CHECKBOX_DEFAULT_VARIANTS.variant).classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type CheckboxVariant = KumoCheckboxVariant;\n\n// Context for passing controlFirst from Group to Items\nconst CheckboxGroupContext = createContext<{ controlFirst: boolean }>({\n controlFirst: true,\n});\n\n/**\n * Single checkbox component props with accessibility guidance.\n *\n * **Accessible Name Required:** Checkbox should have one of:\n * 1. `label` prop (recommended) - built-in Field wrapper with horizontal layout\n * 2. `aria-label` - for checkboxes without visible label\n * 3. `aria-labelledby` - for custom label association\n *\n * **Note:** When used inside Checkbox.Group or Dropdown, label is optional (parent provides context).\n *\n * Missing accessible names will trigger console warnings in development (unless inside a group).\n *\n * @example\n * // Recommended: Built-in Field wrapper with label\n * <Checkbox label=\"Accept terms and conditions\" />\n *\n * @example\n * // Control-first layout (checkbox before label)\n * <Checkbox label=\"Remember me\" controlFirst={true} />\n *\n * @example\n * // Label-first layout (label before checkbox)\n * <Checkbox label=\"Enable notifications\" controlFirst={false} />\n *\n * @example\n * // Error variant (visual only, no error text for single checkboxes)\n * <Checkbox label=\"Required field\" variant=\"error\" />\n *\n * @example\n * // Without visible label (aria-label required)\n * <Checkbox aria-label=\"Select all items\" />\n *\n * @example\n * // Custom label association\n * <label id=\"terms-label\">I accept the terms</label>\n * <Checkbox aria-labelledby=\"terms-label\" />\n *\n * @example\n * // Inside Checkbox.Group (label optional)\n * <Checkbox.Group legend=\"Preferences\">\n * <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n * <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n * </Checkbox.Group>\n */\nexport type CheckboxProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n variant?: CheckboxVariant;\n /** Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n controlFirst?: boolean;\n /** Whether the checkbox is checked (controlled) */\n checked?: boolean;\n /** Whether the checkbox is in indeterminate state */\n indeterminate?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: BaseCheckbox.Root.Props[\"onCheckedChange\"];\n /** Name for form submission */\n name?: string;\n /** Whether the field is required */\n required?: boolean;\n /** Additional class name */\n className?: string;\n /** Accessible label when no visible label is provided */\n \"aria-label\"?: string;\n /** ID of element that labels this checkbox */\n \"aria-labelledby\"?: string;\n};\n\n/**\n * Checkbox group component props (with built-in Fieldset and CheckboxGroup)\n *\n * Usage:\n * ```tsx\n * <Checkbox.Group\n * legend=\"Choose preferences\"\n * defaultValue={['email']}\n * error=\"You must select at least one option\"\n * >\n * <Checkbox.Item label=\"Email notifications\" value=\"email\" />\n * <Checkbox.Item label=\"SMS notifications\" value=\"sms\" />\n * </Checkbox.Group>\n * ```\n */\n/**\n * Props for Checkbox.Legend — a composable sub-component for labeling a Checkbox.Group.\n *\n * Place as a direct child of `<Checkbox.Group>` to provide a styled, accessible legend.\n * Accepts `className` for full styling control (e.g. `className=\"sr-only\"` to visually hide).\n *\n * @example\n * ```tsx\n * <Checkbox.Group>\n * <Checkbox.Legend className=\"sr-only\">Preferences</Checkbox.Legend>\n * <Checkbox.Item label=\"Email\" value=\"email\" />\n * </Checkbox.Group>\n * ```\n */\nexport interface CheckboxLegendProps {\n /** Legend content */\n children: ReactNode;\n /** Additional CSS classes (e.g. \"sr-only\" to visually hide the legend) */\n className?: string;\n}\n\nexport interface CheckboxGroupProps {\n /**\n * Legend text for the group.\n * For more control over legend styling, omit this prop and use `<Checkbox.Legend>` as a child instead.\n */\n legend?: string;\n /** Child Checkbox.Item components (and optionally a Checkbox.Legend) */\n children: ReactNode;\n /** Error message for the group (only appears in groups, not single checkboxes) */\n error?: string;\n /** Helper text for the group */\n description?: ReactNode;\n /** Values of checkboxes that should be initially checked (uncontrolled) */\n defaultValue?: string[];\n /** Values of checkboxes that should be checked (controlled) */\n value?: string[];\n /** Event handler called when checkbox values change */\n onValueChange?: (value: string[]) => void;\n /** All possible checkbox values (required for parent checkbox pattern) */\n allValues?: string[];\n /** Whether all checkboxes in the group are disabled */\n disabled?: boolean;\n /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n controlFirst?: boolean;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Individual checkbox item within a group\n */\nexport type CheckboxItemProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures */\n variant?: CheckboxVariant;\n /** Label text displayed next to checkbox */\n label: string;\n /** Value of the checkbox (required when used in Checkbox.Group) */\n value?: string;\n /** Additional CSS classes for the label wrapper */\n className?: string;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: BaseCheckbox.Root.Props[\"onCheckedChange\"];\n name?: string;\n};\n\n// Single checkbox with built-in Field\nconst CheckboxBase = forwardRef<HTMLButtonElement, CheckboxProps>(\n (\n {\n className,\n checked,\n indeterminate,\n disabled,\n variant = \"default\",\n label,\n labelTooltip,\n controlFirst = true,\n onCheckedChange,\n required,\n name,\n ...props\n },\n ref,\n ) => {\n // A11y enforcement: warn in dev if no accessible name provided\n if (process.env.NODE_ENV !== \"production\") {\n const hasLabel = Boolean(label);\n const hasAriaLabel = Boolean(props[\"aria-label\"]);\n const hasAriaLabelledBy = Boolean(props[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Checkbox]: Checkbox must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Checkbox label='Accept terms' />\\n\" +\n \" - aria-label: <Checkbox aria-label='Select item' />\\n\" +\n \" - aria-labelledby for custom label association\\n\" +\n \" Note: When used inside Checkbox.Group, label is optional\",\n );\n }\n }\n\n const checkboxControl = (\n <BaseCheckbox.Root\n ref={ref}\n data-kumo-component=\"Checkbox\"\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={onCheckedChange}\n className={cn(\n \"relative flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border-0 bg-kumo-base ring focus:outline-none after:absolute after:-inset-x-3 after:-inset-y-2\",\n label && \"mt-0.5\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-hairline\",\n !disabled &&\n \"hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n {...props}\n >\n <BaseCheckbox.Indicator\n keepMounted\n className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n render={(renderProps, state) => (\n <span {...renderProps}>\n {state.indeterminate ? (\n <MinusIcon weight=\"bold\" size={12} />\n ) : (\n <CheckIcon weight=\"bold\" size={12} />\n )}\n </span>\n )}\n />\n </BaseCheckbox.Root>\n );\n\n // If no label provided, return bare checkbox (for use in other components like Dropdown)\n if (!label) {\n return checkboxControl;\n }\n\n // Use Field.Root + Field.Label enclosing pattern for proper a11y association\n // See: https://base-ui.com/react/components/field\n return (\n <FieldBase.Root className=\"inline-flex\">\n <FieldBase.Label\n className={cn(\n \"!m-0 !min-h-0 !text-base inline-flex items-start gap-2\",\n controlFirst ? \"flex-row\" : \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n )}\n >\n {checkboxControl}\n <Label\n showOptional={required === false}\n tooltip={labelTooltip}\n asContent\n >\n {label}\n </Label>\n </FieldBase.Label>\n </FieldBase.Root>\n );\n },\n);\n\nCheckboxBase.displayName = \"Checkbox\";\n\n// Checkbox.Item for use within Checkbox.Group\nconst CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(\n (\n {\n className,\n checked,\n indeterminate,\n disabled,\n variant = \"default\",\n label,\n value,\n onCheckedChange,\n name,\n },\n ref,\n ) => {\n const { controlFirst } = useContext(CheckboxGroupContext);\n\n return (\n <label\n data-kumo-component=\"Checkbox\"\n data-kumo-part=\"item-label\"\n className={cn(\n \"m-0 relative inline-flex items-start gap-2\",\n // Control first (default): checkbox before label\n // Label first: label before checkbox using flex-row-reverse\n !controlFirst && \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n className,\n )}\n >\n <BaseCheckbox.Root\n ref={ref}\n data-kumo-component=\"Checkbox\"\n data-kumo-part=\"item\"\n value={value}\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={onCheckedChange}\n className={cn(\n \"peer relative mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-hairline\",\n !disabled &&\n \"group-hover:ring-kumo-hairline hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n )}\n >\n <BaseCheckbox.Indicator\n keepMounted\n className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n render={(renderProps, state) => (\n <span {...renderProps}>\n {state.indeterminate ? (\n <MinusIcon weight=\"bold\" size={12} />\n ) : (\n <CheckIcon weight=\"bold\" size={12} />\n )}\n </span>\n )}\n />\n </BaseCheckbox.Root>\n <span className=\"text-base text-kumo-default\">{label}</span>\n </label>\n );\n },\n);\n\nCheckboxItem.displayName = \"Checkbox.Item\";\n\n// Checkbox.Legend — composable legend sub-component for Checkbox.Group\nfunction CheckboxLegend({ children, className }: CheckboxLegendProps) {\n return (\n <Fieldset.Legend\n className={cn(\"text-base font-medium text-kumo-default\", className)}\n >\n {children}\n </Fieldset.Legend>\n );\n}\n\nCheckboxLegend.displayName = \"Checkbox.Legend\";\n\n// Checkbox.Group with built-in Fieldset and CheckboxGroup\nfunction CheckboxGroup({\n legend,\n children,\n error,\n description,\n defaultValue,\n value,\n onValueChange,\n allValues,\n disabled,\n controlFirst = true,\n className,\n}: CheckboxGroupProps) {\n return (\n <CheckboxGroupContext.Provider value={{ controlFirst }}>\n <BaseCheckboxGroup\n defaultValue={defaultValue}\n value={value}\n onValueChange={onValueChange}\n allValues={allValues}\n disabled={disabled}\n >\n <Fieldset.Root className={cn(\"flex flex-col gap-4\", className)}>\n {legend && (\n <Fieldset.Legend className=\"text-base font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n )}\n <div className=\"flex flex-col gap-2\">{children}</div>\n {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n {description && (\n <p className=\"text-sm text-kumo-subtle\">{description}</p>\n )}\n </Fieldset.Root>\n </BaseCheckboxGroup>\n </CheckboxGroupContext.Provider>\n );\n}\n\n// Compound component\nexport const Checkbox = Object.assign(CheckboxBase, {\n Item: CheckboxItem,\n Group: CheckboxGroup,\n Legend: CheckboxLegend,\n});\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["KUMO_CHECKBOX_VARIANTS","KUMO_CHECKBOX_DEFAULT_VARIANTS","CheckboxGroupContext","createContext","CheckboxBase","forwardRef","className","checked","indeterminate","disabled","variant","label","labelTooltip","controlFirst","onCheckedChange","required","name","props","ref","hasLabel","hasAriaLabel","hasAriaLabelledBy","checkboxControl","jsx","BaseCheckbox.Root","cn","BaseCheckbox.Indicator","renderProps","state","MinusIcon","CheckIcon","FieldBase.Root","jsxs","FieldBase.Label","Label","CheckboxItem","value","useContext","CheckboxLegend","children","Fieldset.Legend","CheckboxGroup","legend","error","description","defaultValue","onValueChange","allValues","BaseCheckboxGroup","Fieldset.Root","Checkbox"],"mappings":"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"}
|
package/dist/chunks/{clipboard-text-mrut8z3dt1w0efxz.js → clipboard-text-h3oi6wm5vj2q7q4h.js}
RENAMED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { jsxs as c, jsx as e } from "react/jsx-runtime";
|
|
3
3
|
import { CheckIcon as A, CopyIcon as S } from "@phosphor-icons/react";
|
|
4
4
|
import { forwardRef as P, useState as _, useRef as I, useCallback as O } from "react";
|
|
5
|
-
import { B as V } from "./button-
|
|
6
|
-
import { i as M } from "./input-
|
|
5
|
+
import { B as V } from "./button-ov39dxshqbqrthhd.js";
|
|
6
|
+
import { i as M } from "./input-iahz0dpc9xdar2ju.js";
|
|
7
7
|
import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
|
|
8
8
|
import { r as y } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
|
|
9
9
|
import { V as j, W as B, X as D, Y as E, Z as L, _ as U, $ as X, a0 as K, a1 as W, a2 as F, a3 as Y, a4 as Z, a5 as $ } from "./vendor-base-ui-knphx7dts1vm1x37.js";
|
|
@@ -188,4 +188,4 @@ J.displayName = "ClipboardText";
|
|
|
188
188
|
export {
|
|
189
189
|
J as C
|
|
190
190
|
};
|
|
191
|
-
//# sourceMappingURL=clipboard-text-
|
|
191
|
+
//# sourceMappingURL=clipboard-text-h3oi6wm5vj2q7q4h.js.map
|