@cloudflare/kumo 1.18.0 → 1.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +90 -0
- package/ai/component-registry.json +174 -66
- package/ai/component-registry.md +836 -503
- package/ai/schemas.ts +19 -3
- package/dist/.build-complete +1 -1
- package/dist/ai/schemas.d.ts +55 -8
- package/dist/ai/schemas.d.ts.map +1 -1
- package/dist/ai/schemas.js +163 -146
- package/dist/ai/schemas.js.map +1 -1
- package/dist/chunks/{Legend-o0ntojbaplmszwk0.js → Legend-ks7se6149vsa3tze.js} +127 -118
- package/dist/chunks/Legend-ks7se6149vsa3tze.js.map +1 -0
- package/dist/chunks/{breadcrumbs-k39s28qx05vbxxth.js → breadcrumbs-ge20hcb3o5spswrk.js} +2 -2
- package/dist/chunks/{breadcrumbs-k39s28qx05vbxxth.js.map → breadcrumbs-ge20hcb3o5spswrk.js.map} +1 -1
- package/dist/chunks/{button-cdxnqcgzwko8ooha.js → button-oaqi7ykdisyskoos.js} +12 -12
- package/dist/chunks/button-oaqi7ykdisyskoos.js.map +1 -0
- package/dist/chunks/{checkbox-kt1uojk2f9e0d0h1.js → checkbox-mwgmohffm22ut13s.js} +5 -5
- package/dist/chunks/checkbox-mwgmohffm22ut13s.js.map +1 -0
- package/dist/chunks/{clipboard-text-vcbvmtne4zjk4b18.js → clipboard-text-dxczqon3d27xp6f0.js} +10 -10
- package/dist/chunks/{clipboard-text-vcbvmtne4zjk4b18.js.map → clipboard-text-dxczqon3d27xp6f0.js.map} +1 -1
- package/dist/chunks/{cloudflare-logo-bgts2jgsdh7sslw4.js → cloudflare-logo-pbavoe1wu8nr5c4n.js} +9 -9
- package/dist/chunks/{cloudflare-logo-bgts2jgsdh7sslw4.js.map → cloudflare-logo-pbavoe1wu8nr5c4n.js.map} +1 -1
- package/dist/chunks/{combobox-he2hd9e2ruknq5mp.js → combobox-eaowwt1xr4d23gsn.js} +113 -101
- package/dist/chunks/combobox-eaowwt1xr4d23gsn.js.map +1 -0
- package/dist/chunks/{command-palette-jc1w07jwakxvj23a.js → command-palette-maqtbmpfev9mysqd.js} +19 -19
- package/dist/chunks/command-palette-maqtbmpfev9mysqd.js.map +1 -0
- package/dist/chunks/{dialog-oqh8l3l3zutpibxx.js → dialog-e3m5bhs7fds26p9y.js} +25 -25
- package/dist/chunks/dialog-e3m5bhs7fds26p9y.js.map +1 -0
- package/dist/chunks/{dropdown-ncwhcd912vmone8k.js → dropdown-ewte287db3vyt8t5.js} +94 -92
- package/dist/chunks/{dropdown-ncwhcd912vmone8k.js.map → dropdown-ewte287db3vyt8t5.js.map} +1 -1
- package/dist/chunks/{empty-cj898km1r8xwuw44.js → empty-dr1eckm2z40euns6.js} +2 -2
- package/dist/chunks/{empty-cj898km1r8xwuw44.js.map → empty-dr1eckm2z40euns6.js.map} +1 -1
- package/dist/chunks/{field-krp6z6vfbkrvufz2.js → field-bo5gmna16odrrb1q.js} +3 -3
- package/dist/chunks/{field-krp6z6vfbkrvufz2.js.map → field-bo5gmna16odrrb1q.js.map} +1 -1
- package/dist/chunks/{grid-m9r71jxo2b8q1972.js → grid-hj1ylz16p7g5uelh.js} +2 -2
- package/dist/chunks/{grid-m9r71jxo2b8q1972.js.map → grid-hj1ylz16p7g5uelh.js.map} +1 -1
- package/dist/chunks/{input-area-no30c09udyjxshu5.js → input-area-jkkkjej6luumrqpa.js} +4 -4
- package/dist/chunks/{input-area-no30c09udyjxshu5.js.map → input-area-jkkkjej6luumrqpa.js.map} +1 -1
- package/dist/chunks/{input-h48k3uagzrgb98au.js → input-cw05pbqdburghkus.js} +31 -31
- package/dist/chunks/input-cw05pbqdburghkus.js.map +1 -0
- package/dist/chunks/{input-group-lxdd09p60cf27pe1.js → input-group-lfugneuz71g42n0w.js} +6 -6
- package/dist/chunks/input-group-lfugneuz71g42n0w.js.map +1 -0
- package/dist/chunks/label-cvyvbqmt4mt757ff.js +68 -0
- package/dist/chunks/{label-latndvb1ngem7we8.js.map → label-cvyvbqmt4mt757ff.js.map} +1 -1
- package/dist/chunks/layer-card-ljqth3yxgnk04v2o.js +46 -0
- package/dist/chunks/layer-card-ljqth3yxgnk04v2o.js.map +1 -0
- package/dist/chunks/{link-hn5ejal7nhh0o0b4.js → link-fjnhtxvfe5ieamjf.js} +2 -2
- package/dist/chunks/{link-hn5ejal7nhh0o0b4.js.map → link-fjnhtxvfe5ieamjf.js.map} +1 -1
- package/dist/chunks/menubar-e5e4zwfagr0wx023.js +96 -0
- package/dist/chunks/menubar-e5e4zwfagr0wx023.js.map +1 -0
- package/dist/chunks/{meter-gfa1hz9fhjnvx784.js → meter-duj3micor1lqj3y2.js} +2 -2
- package/dist/chunks/{meter-gfa1hz9fhjnvx784.js.map → meter-duj3micor1lqj3y2.js.map} +1 -1
- package/dist/chunks/pagination-olaypvwr8swsmn8m.js +266 -0
- package/dist/chunks/pagination-olaypvwr8swsmn8m.js.map +1 -0
- package/dist/chunks/{popover-h300w4vit0s2ayej.js → popover-nv9cmzbo7mf6bky0.js} +70 -74
- package/dist/chunks/popover-nv9cmzbo7mf6bky0.js.map +1 -0
- package/dist/chunks/{radio-jouttv89lbvhs55r.js → radio-ihxbe37us2jnqtzf.js} +5 -5
- package/dist/chunks/radio-ihxbe37us2jnqtzf.js.map +1 -0
- package/dist/chunks/select-nx6ded5swra74iar.js +213 -0
- package/dist/chunks/select-nx6ded5swra74iar.js.map +1 -0
- package/dist/chunks/{sensitive-input-hd4tpqkzifad1yca.js → sensitive-input-00fujb510rrn61v9.js} +4 -4
- package/dist/chunks/{sensitive-input-hd4tpqkzifad1yca.js.map → sensitive-input-00fujb510rrn61v9.js.map} +1 -1
- package/dist/chunks/{sidebar-hljy3ssm8itc0ucx.js → sidebar-ltbfius1eolkl8tb.js} +22 -26
- package/dist/chunks/sidebar-ltbfius1eolkl8tb.js.map +1 -0
- package/dist/chunks/surface-dfgurg5eu3et4vw1.js +29 -0
- package/dist/chunks/surface-dfgurg5eu3et4vw1.js.map +1 -0
- package/dist/chunks/{switch-ihaydbzem62bey4p.js → switch-fbv3iawqo3o3jgap.js} +17 -17
- package/dist/chunks/switch-fbv3iawqo3o3jgap.js.map +1 -0
- package/dist/chunks/table-of-contents-f813ivi7ta23vqdm.js +88 -0
- package/dist/chunks/table-of-contents-f813ivi7ta23vqdm.js.map +1 -0
- package/dist/chunks/table-olwwulga2l3hdwlx.js +189 -0
- package/dist/chunks/table-olwwulga2l3hdwlx.js.map +1 -0
- package/dist/chunks/{tabs-e7eh7l3mpk3xgmwq.js → tabs-lohcglgppp6gj0hp.js} +4 -4
- package/dist/chunks/{tabs-e7eh7l3mpk3xgmwq.js.map → tabs-lohcglgppp6gj0hp.js.map} +1 -1
- package/dist/chunks/{toast-bpz6iaq54u9jmuu8.js → toast-dg52x89yd231mxhe.js} +4 -4
- package/dist/chunks/{toast-bpz6iaq54u9jmuu8.js.map → toast-dg52x89yd231mxhe.js.map} +1 -1
- package/dist/chunks/{tooltip-belkznz8t8333h5f.js → tooltip-hikjvdbg3xghnq1x.js} +38 -37
- package/dist/chunks/tooltip-hikjvdbg3xghnq1x.js.map +1 -0
- package/dist/chunks/{vendor-base-ui-k7bzesq81ie36nya.js → vendor-base-ui-m5pz3e8c4grg5qmj.js} +21 -21
- package/dist/chunks/{vendor-base-ui-k7bzesq81ie36nya.js.map → vendor-base-ui-m5pz3e8c4grg5qmj.js.map} +1 -1
- package/dist/code.js +1 -1
- package/dist/components/breadcrumbs.js +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/chart.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/clipboard-text.js +1 -1
- package/dist/components/cloudflare-logo.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/command-palette.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/empty.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/flow.js +2 -2
- package/dist/components/flow.js.map +1 -1
- package/dist/components/grid.js +1 -1
- package/dist/components/input.js +3 -3
- package/dist/components/label.js +1 -1
- package/dist/components/layer-card.js +1 -1
- package/dist/components/link.js +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/meter.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sensitive-input.js +1 -1
- package/dist/components/sidebar.js +1 -1
- package/dist/components/surface.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/table-of-contents.js +8 -0
- package/dist/components/table-of-contents.js.map +1 -0
- package/dist/components/table.js +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/toast.js +2 -2
- package/dist/components/tooltip.js +1 -1
- package/dist/index.js +124 -120
- package/dist/index.js.map +1 -1
- package/dist/primitives/accordion.js +1 -1
- package/dist/primitives/alert-dialog.js +1 -1
- package/dist/primitives/autocomplete.js +1 -1
- package/dist/primitives/avatar.js +1 -1
- package/dist/primitives/button.js +1 -1
- package/dist/primitives/checkbox-group.js +1 -1
- package/dist/primitives/checkbox.js +1 -1
- package/dist/primitives/collapsible.js +1 -1
- package/dist/primitives/combobox.js +1 -1
- package/dist/primitives/context-menu.js +1 -1
- package/dist/primitives/csp-provider.js +1 -1
- package/dist/primitives/dialog.js +1 -1
- package/dist/primitives/direction-provider.js +1 -1
- package/dist/primitives/drawer.js +1 -1
- package/dist/primitives/field.js +1 -1
- package/dist/primitives/fieldset.js +1 -1
- package/dist/primitives/form.js +1 -1
- package/dist/primitives/input.js +1 -1
- package/dist/primitives/menu.js +1 -1
- package/dist/primitives/menubar.js +1 -1
- package/dist/primitives/meter.js +1 -1
- package/dist/primitives/navigation-menu.js +1 -1
- package/dist/primitives/number-field.js +1 -1
- package/dist/primitives/popover.js +1 -1
- package/dist/primitives/preview-card.js +1 -1
- package/dist/primitives/progress.js +1 -1
- package/dist/primitives/radio-group.js +1 -1
- package/dist/primitives/radio.js +1 -1
- package/dist/primitives/scroll-area.js +1 -1
- package/dist/primitives/select.js +1 -1
- package/dist/primitives/separator.js +1 -1
- package/dist/primitives/slider.js +1 -1
- package/dist/primitives/switch.js +1 -1
- package/dist/primitives/tabs.js +1 -1
- package/dist/primitives/toast.js +1 -1
- package/dist/primitives/toggle-group.js +1 -1
- package/dist/primitives/toggle.js +1 -1
- package/dist/primitives/toolbar.js +1 -1
- package/dist/primitives/tooltip.js +1 -1
- package/dist/primitives.js +1 -1
- package/dist/scripts/theme-generator/config.d.ts.map +1 -1
- package/dist/scripts/theme-generator/config.js +3 -3
- package/dist/scripts/theme-generator/config.js.map +1 -1
- package/dist/src/components/button/button.d.ts +1 -1
- package/dist/src/components/button/button.d.ts.map +1 -1
- package/dist/src/components/chart/EChart.d.ts +18 -2
- package/dist/src/components/chart/EChart.d.ts.map +1 -1
- package/dist/src/components/chart/TimeseriesChart.d.ts.map +1 -1
- package/dist/src/components/chart/index.d.ts +1 -1
- package/dist/src/components/chart/index.d.ts.map +1 -1
- package/dist/src/components/combobox/combobox.d.ts +16 -2
- package/dist/src/components/combobox/combobox.d.ts.map +1 -1
- package/dist/src/components/dropdown/dropdown.d.ts.map +1 -1
- package/dist/src/components/input/input.d.ts.map +1 -1
- package/dist/src/components/label/label.d.ts.map +1 -1
- package/dist/src/components/layer-card/layer-card.d.ts +39 -5
- package/dist/src/components/layer-card/layer-card.d.ts.map +1 -1
- package/dist/src/components/menubar/menubar.d.ts.map +1 -1
- package/dist/src/components/pagination/pagination.d.ts +51 -1
- package/dist/src/components/pagination/pagination.d.ts.map +1 -1
- package/dist/src/components/popover/popover.d.ts +35 -8
- package/dist/src/components/popover/popover.d.ts.map +1 -1
- package/dist/src/components/radio/radio.d.ts +1 -1
- package/dist/src/components/select/select.d.ts +49 -5
- package/dist/src/components/select/select.d.ts.map +1 -1
- package/dist/src/components/sidebar/sidebar.d.ts +2 -2
- package/dist/src/components/sidebar/sidebar.d.ts.map +1 -1
- package/dist/src/components/surface/index.d.ts +3 -0
- package/dist/src/components/surface/index.d.ts.map +1 -1
- package/dist/src/components/surface/surface.d.ts +14 -10
- package/dist/src/components/surface/surface.d.ts.map +1 -1
- package/dist/src/components/table/table.d.ts.map +1 -1
- package/dist/src/components/table-of-contents/index.d.ts +2 -0
- package/dist/src/components/table-of-contents/index.d.ts.map +1 -0
- package/dist/src/components/table-of-contents/table-of-contents.d.ts +70 -0
- package/dist/src/components/table-of-contents/table-of-contents.d.ts.map +1 -0
- package/dist/src/components/tooltip/tooltip.d.ts +15 -6
- package/dist/src/components/tooltip/tooltip.d.ts.map +1 -1
- package/dist/src/index.d.ts +6 -2
- package/dist/src/index.d.ts.map +1 -1
- package/dist/styles/kumo-binding.css +1 -0
- package/dist/styles/kumo-standalone.css +1 -1
- package/dist/styles/theme-kumo.css +6 -6
- package/package.json +5 -1
- package/scripts/theme-generator/config.ts +8 -6
- package/dist/chunks/Legend-o0ntojbaplmszwk0.js.map +0 -1
- package/dist/chunks/button-cdxnqcgzwko8ooha.js.map +0 -1
- package/dist/chunks/checkbox-kt1uojk2f9e0d0h1.js.map +0 -1
- package/dist/chunks/combobox-he2hd9e2ruknq5mp.js.map +0 -1
- package/dist/chunks/command-palette-jc1w07jwakxvj23a.js.map +0 -1
- package/dist/chunks/dialog-oqh8l3l3zutpibxx.js.map +0 -1
- package/dist/chunks/input-group-lxdd09p60cf27pe1.js.map +0 -1
- package/dist/chunks/input-h48k3uagzrgb98au.js.map +0 -1
- package/dist/chunks/label-latndvb1ngem7we8.js +0 -62
- package/dist/chunks/layer-card-l5yjvrxry1dhte57.js +0 -44
- package/dist/chunks/layer-card-l5yjvrxry1dhte57.js.map +0 -1
- package/dist/chunks/menubar-f1pilzooe5mue7c4.js +0 -92
- package/dist/chunks/menubar-f1pilzooe5mue7c4.js.map +0 -1
- package/dist/chunks/pagination-cu5lm6p5dxuycta4.js +0 -243
- package/dist/chunks/pagination-cu5lm6p5dxuycta4.js.map +0 -1
- package/dist/chunks/popover-h300w4vit0s2ayej.js.map +0 -1
- package/dist/chunks/radio-jouttv89lbvhs55r.js.map +0 -1
- package/dist/chunks/select-kva5ru5f673kah1m.js +0 -179
- package/dist/chunks/select-kva5ru5f673kah1m.js.map +0 -1
- package/dist/chunks/sidebar-hljy3ssm8itc0ucx.js.map +0 -1
- package/dist/chunks/surface-cilvbyhmyujz1bee.js +0 -36
- package/dist/chunks/surface-cilvbyhmyujz1bee.js.map +0 -1
- package/dist/chunks/switch-ihaydbzem62bey4p.js.map +0 -1
- package/dist/chunks/table-inweecadl3her7pd.js +0 -183
- package/dist/chunks/table-inweecadl3her7pd.js.map +0 -1
- package/dist/chunks/tooltip-belkznz8t8333h5f.js.map +0 -1
package/dist/chunks/{breadcrumbs-k39s28qx05vbxxth.js.map → breadcrumbs-ge20hcb3o5spswrk.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumbs-k39s28qx05vbxxth.js","sources":["../../src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n useEffect,\n useState,\n type PropsWithChildren,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { Button } from \"../../components/button\";\nimport { SkeletonLine } from \"../../components/loader/skeleton-line\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { cn } from \"../../utils/cn\";\n\n/** Breadcrumbs size variant definitions. */\nexport const KUMO_BREADCRUMBS_VARIANTS = {\n size: {\n sm: {\n classes: \"text-sm h-10 gap-0.5\",\n description: \"Compact breadcrumbs for dense UIs\",\n },\n base: {\n classes: \"text-base h-12 gap-1\",\n description: \"Default breadcrumbs size\",\n },\n },\n} as const;\n\nexport const KUMO_BREADCRUMBS_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\nexport type KumoBreadcrumbsSize = keyof typeof KUMO_BREADCRUMBS_VARIANTS.size;\n\nexport interface KumoBreadcrumbsVariantsProps {\n /**\n * Size of the breadcrumbs.\n * - `\"sm\"` — Compact breadcrumbs for dense UIs\n * - `\"base\"` — Default breadcrumbs size\n * @default \"base\"\n */\n size?: KumoBreadcrumbsSize;\n}\n\nexport function breadcrumbsVariants({\n size = KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size,\n}: KumoBreadcrumbsVariantsProps = {}) {\n return cn(\n \"group mr-4 flex min-w-0 grow items-center overflow-hidden whitespace-nowrap\",\n KUMO_BREADCRUMBS_VARIANTS.size[size].classes,\n );\n}\n\nexport interface BreadcrumbsItemProps {\n href: string;\n icon?: React.ReactNode;\n}\n\nconst Link = ({\n href,\n icon,\n children,\n}: PropsWithChildren<BreadcrumbsItemProps>) => {\n const LinkComponent = useLinkComponent();\n\n return (\n <LinkComponent\n to={href}\n className=\"flex min-w-0 max-w-full items-center gap-1 text-kumo-subtle no-underline\"\n >\n {!!icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <span className=\"truncate\">{children}</span>\n </LinkComponent>\n );\n};\n\ninterface BreadcrumbsCurrentProps {\n loading?: boolean;\n icon?: React.ReactNode;\n}\n\nfunction Current({\n children,\n icon,\n loading,\n}: PropsWithChildren<BreadcrumbsCurrentProps>) {\n if (loading) {\n return (\n <div className=\"flex w-[125px] min-w-0 items-center gap-1\">\n {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <SkeletonLine />\n </div>\n );\n }\n\n return (\n <div\n className=\"flex min-w-0 max-w-full items-center gap-1 font-medium\"\n aria-current=\"page\"\n >\n {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <span className=\"truncate\">{children}</span>\n </div>\n );\n}\n\nfunction Separator() {\n return (\n <span\n className=\"flex shrink-0 items-center text-kumo-inactive\"\n aria-hidden=\"true\"\n >\n <svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n d=\"M10.75 8.75L14.25 12L10.75 15.25\"\n />\n </svg>\n </span>\n );\n}\n\nfunction MobileEllipsis() {\n return (\n <span className=\"flex shrink-0 items-center text-kumo-subtle\" aria-hidden>\n ...\n </span>\n );\n}\n\nfunction Clipboard({ text }: { text: string }) {\n const [isCopied, setIsCopied] = useState(false);\n\n useEffect(() => {\n if (!isCopied) return;\n\n const timeoutId = setTimeout(() => setIsCopied(false), 2000);\n return () => clearTimeout(timeoutId);\n }, [isCopied]);\n\n const handleCopyDeeplink = async () => {\n if (!text) return;\n\n try {\n await navigator.clipboard.writeText(text);\n setIsCopied(true);\n } catch (err) {\n console.error(\"Failed to copy deeplink:\", err);\n }\n };\n\n return (\n <Button\n variant=\"ghost\"\n shape=\"square\"\n size=\"sm\"\n className=\"opacity-0 transition-[opacity] group-hover:opacity-100\"\n onClick={handleCopyDeeplink}\n title=\"Click to copy\"\n aria-label=\"Copy\"\n >\n {isCopied ? (\n <CheckIcon weight=\"bold\" className=\"text-kumo-success\" />\n ) : (\n <CopyIcon weight=\"regular\" />\n )}\n </Button>\n );\n}\n\n/**\n * Breadcrumbs component props.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n * <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Link href=\"/docs\">Docs</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Current>Current Page</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport interface BreadcrumbsProps\n extends PropsWithChildren,\n KumoBreadcrumbsVariantsProps {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n}\n\n/**\n * Navigation breadcrumb trail showing the current page's location in a hierarchy.\n * Compound component with `Breadcrumbs.Link`, `Breadcrumbs.Current`, `Breadcrumbs.Separator`, and `Breadcrumbs.Clipboard`.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n * <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport function Breadcrumb({\n children,\n size = \"base\",\n className,\n}: BreadcrumbsProps) {\n const childArray = Children.toArray(children);\n const mobileChildren = getMobileBreadcrumbChildren(childArray);\n\n return (\n <nav\n className={cn(breadcrumbsVariants({ size }), className)}\n aria-label=\"breadcrumb\"\n >\n <div className=\"contents sm:hidden\">{mobileChildren}</div>\n <div className=\"hidden sm:contents\">{childArray}</div>\n </nav>\n );\n}\n\nfunction isComponentElement(\n child: ReactNode,\n component: unknown,\n): child is ReactElement {\n return isValidElement(child) && child.type === component;\n}\n\nfunction getMobileBreadcrumbChildren(children: ReactNode[]): ReactNode[] {\n const breadcrumbItems = children.filter(\n (child) =>\n isComponentElement(child, Link) || isComponentElement(child, Current),\n ) as ReactElement[];\n\n if (breadcrumbItems.length <= 2) {\n return children;\n }\n\n const [parentItem, currentItem] = breadcrumbItems.slice(-2);\n const trailingItems: ReactNode[] = [\n <MobileEllipsis key=\"kumo-breadcrumb-mobile-ellipsis\" />,\n <Separator key=\"kumo-breadcrumb-mobile-separator-leading\" />,\n cloneElement(parentItem, { key: \"kumo-breadcrumb-mobile-parent\" }),\n <Separator key=\"kumo-breadcrumb-mobile-separator-trailing\" />,\n cloneElement(currentItem, { key: \"kumo-breadcrumb-mobile-current\" }),\n ];\n\n const extras = children.filter(\n (child) =>\n !isComponentElement(child, Link) &&\n !isComponentElement(child, Current) &&\n !isComponentElement(child, Separator),\n );\n\n return [...trailingItems, ...extras];\n}\n\nBreadcrumb.Link = Link;\nBreadcrumb.Current = Current;\nBreadcrumb.Separator = Separator;\nBreadcrumb.Clipboard = Clipboard;\n"],"names":["KUMO_BREADCRUMBS_VARIANTS","KUMO_BREADCRUMBS_DEFAULT_VARIANTS","breadcrumbsVariants","size","cn","Link","href","icon","children","LinkComponent","useLinkComponent","jsxs","jsx","Current","loading","SkeletonLine","Separator","MobileEllipsis","Clipboard","text","isCopied","setIsCopied","useState","useEffect","timeoutId","Button","err","CheckIcon","CopyIcon","Breadcrumb","className","childArray","Children","mobileChildren","getMobileBreadcrumbChildren","isComponentElement","child","component","isValidElement","breadcrumbItems","parentItem","currentItem","trailingItems","cloneElement","extras"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"breadcrumbs-ge20hcb3o5spswrk.js","sources":["../../src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n useEffect,\n useState,\n type PropsWithChildren,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { Button } from \"../../components/button\";\nimport { SkeletonLine } from \"../../components/loader/skeleton-line\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { cn } from \"../../utils/cn\";\n\n/** Breadcrumbs size variant definitions. */\nexport const KUMO_BREADCRUMBS_VARIANTS = {\n size: {\n sm: {\n classes: \"text-sm h-10 gap-0.5\",\n description: \"Compact breadcrumbs for dense UIs\",\n },\n base: {\n classes: \"text-base h-12 gap-1\",\n description: \"Default breadcrumbs size\",\n },\n },\n} as const;\n\nexport const KUMO_BREADCRUMBS_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\nexport type KumoBreadcrumbsSize = keyof typeof KUMO_BREADCRUMBS_VARIANTS.size;\n\nexport interface KumoBreadcrumbsVariantsProps {\n /**\n * Size of the breadcrumbs.\n * - `\"sm\"` — Compact breadcrumbs for dense UIs\n * - `\"base\"` — Default breadcrumbs size\n * @default \"base\"\n */\n size?: KumoBreadcrumbsSize;\n}\n\nexport function breadcrumbsVariants({\n size = KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size,\n}: KumoBreadcrumbsVariantsProps = {}) {\n return cn(\n \"group mr-4 flex min-w-0 grow items-center overflow-hidden whitespace-nowrap\",\n KUMO_BREADCRUMBS_VARIANTS.size[size].classes,\n );\n}\n\nexport interface BreadcrumbsItemProps {\n href: string;\n icon?: React.ReactNode;\n}\n\nconst Link = ({\n href,\n icon,\n children,\n}: PropsWithChildren<BreadcrumbsItemProps>) => {\n const LinkComponent = useLinkComponent();\n\n return (\n <LinkComponent\n to={href}\n className=\"flex min-w-0 max-w-full items-center gap-1 text-kumo-subtle no-underline\"\n >\n {!!icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <span className=\"truncate\">{children}</span>\n </LinkComponent>\n );\n};\n\ninterface BreadcrumbsCurrentProps {\n loading?: boolean;\n icon?: React.ReactNode;\n}\n\nfunction Current({\n children,\n icon,\n loading,\n}: PropsWithChildren<BreadcrumbsCurrentProps>) {\n if (loading) {\n return (\n <div className=\"flex w-[125px] min-w-0 items-center gap-1\">\n {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <SkeletonLine />\n </div>\n );\n }\n\n return (\n <div\n className=\"flex min-w-0 max-w-full items-center gap-1 font-medium\"\n aria-current=\"page\"\n >\n {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <span className=\"truncate\">{children}</span>\n </div>\n );\n}\n\nfunction Separator() {\n return (\n <span\n className=\"flex shrink-0 items-center text-kumo-inactive\"\n aria-hidden=\"true\"\n >\n <svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"1.5\"\n d=\"M10.75 8.75L14.25 12L10.75 15.25\"\n />\n </svg>\n </span>\n );\n}\n\nfunction MobileEllipsis() {\n return (\n <span className=\"flex shrink-0 items-center text-kumo-subtle\" aria-hidden>\n ...\n </span>\n );\n}\n\nfunction Clipboard({ text }: { text: string }) {\n const [isCopied, setIsCopied] = useState(false);\n\n useEffect(() => {\n if (!isCopied) return;\n\n const timeoutId = setTimeout(() => setIsCopied(false), 2000);\n return () => clearTimeout(timeoutId);\n }, [isCopied]);\n\n const handleCopyDeeplink = async () => {\n if (!text) return;\n\n try {\n await navigator.clipboard.writeText(text);\n setIsCopied(true);\n } catch (err) {\n console.error(\"Failed to copy deeplink:\", err);\n }\n };\n\n return (\n <Button\n variant=\"ghost\"\n shape=\"square\"\n size=\"sm\"\n className=\"opacity-0 transition-[opacity] group-hover:opacity-100\"\n onClick={handleCopyDeeplink}\n title=\"Click to copy\"\n aria-label=\"Copy\"\n >\n {isCopied ? (\n <CheckIcon weight=\"bold\" className=\"text-kumo-success\" />\n ) : (\n <CopyIcon weight=\"regular\" />\n )}\n </Button>\n );\n}\n\n/**\n * Breadcrumbs component props.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n * <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Link href=\"/docs\">Docs</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Current>Current Page</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport interface BreadcrumbsProps\n extends PropsWithChildren,\n KumoBreadcrumbsVariantsProps {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n}\n\n/**\n * Navigation breadcrumb trail showing the current page's location in a hierarchy.\n * Compound component with `Breadcrumbs.Link`, `Breadcrumbs.Current`, `Breadcrumbs.Separator`, and `Breadcrumbs.Clipboard`.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n * <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n * <Breadcrumbs.Separator />\n * <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport function Breadcrumb({\n children,\n size = \"base\",\n className,\n}: BreadcrumbsProps) {\n const childArray = Children.toArray(children);\n const mobileChildren = getMobileBreadcrumbChildren(childArray);\n\n return (\n <nav\n className={cn(breadcrumbsVariants({ size }), className)}\n aria-label=\"breadcrumb\"\n >\n <div className=\"contents sm:hidden\">{mobileChildren}</div>\n <div className=\"hidden sm:contents\">{childArray}</div>\n </nav>\n );\n}\n\nfunction isComponentElement(\n child: ReactNode,\n component: unknown,\n): child is ReactElement {\n return isValidElement(child) && child.type === component;\n}\n\nfunction getMobileBreadcrumbChildren(children: ReactNode[]): ReactNode[] {\n const breadcrumbItems = children.filter(\n (child) =>\n isComponentElement(child, Link) || isComponentElement(child, Current),\n ) as ReactElement[];\n\n if (breadcrumbItems.length <= 2) {\n return children;\n }\n\n const [parentItem, currentItem] = breadcrumbItems.slice(-2);\n const trailingItems: ReactNode[] = [\n <MobileEllipsis key=\"kumo-breadcrumb-mobile-ellipsis\" />,\n <Separator key=\"kumo-breadcrumb-mobile-separator-leading\" />,\n cloneElement(parentItem, { key: \"kumo-breadcrumb-mobile-parent\" }),\n <Separator key=\"kumo-breadcrumb-mobile-separator-trailing\" />,\n cloneElement(currentItem, { key: \"kumo-breadcrumb-mobile-current\" }),\n ];\n\n const extras = children.filter(\n (child) =>\n !isComponentElement(child, Link) &&\n !isComponentElement(child, Current) &&\n !isComponentElement(child, Separator),\n );\n\n return [...trailingItems, ...extras];\n}\n\nBreadcrumb.Link = Link;\nBreadcrumb.Current = Current;\nBreadcrumb.Separator = Separator;\nBreadcrumb.Clipboard = Clipboard;\n"],"names":["KUMO_BREADCRUMBS_VARIANTS","KUMO_BREADCRUMBS_DEFAULT_VARIANTS","breadcrumbsVariants","size","cn","Link","href","icon","children","LinkComponent","useLinkComponent","jsxs","jsx","Current","loading","SkeletonLine","Separator","MobileEllipsis","Clipboard","text","isCopied","setIsCopied","useState","useEffect","timeoutId","Button","err","CheckIcon","CopyIcon","Breadcrumb","className","childArray","Children","mobileChildren","getMobileBreadcrumbChildren","isComponentElement","child","component","isValidElement","breadcrumbItems","parentItem","currentItem","trailingItems","cloneElement","extras"],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
2
|
+
import { jsx as r, jsxs as k } from "react/jsx-runtime";
|
|
3
3
|
import f from "react";
|
|
4
4
|
import { ArrowsClockwise as w } from "@phosphor-icons/react";
|
|
5
5
|
import { L as N } from "./loader-hr2w7cpqeev3p3vl.js";
|
|
6
|
-
import { T } from "./tooltip-
|
|
6
|
+
import { T } from "./tooltip-hikjvdbg3xghnq1x.js";
|
|
7
7
|
import { c } from "./cn-ct4n7r74mh8y0f48.js";
|
|
8
8
|
import { u as B } from "./link-provider-mn2voeohon7cj9o4.js";
|
|
9
9
|
const i = {
|
|
@@ -63,7 +63,7 @@ const i = {
|
|
|
63
63
|
description: "Danger button for destructive actions like delete"
|
|
64
64
|
},
|
|
65
65
|
"secondary-destructive": {
|
|
66
|
-
classes: "bg-kumo-base !text-kumo-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-
|
|
66
|
+
classes: "bg-kumo-base !text-kumo-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-hairline data-[state=open]:bg-kumo-base",
|
|
67
67
|
description: "Secondary button with destructive text for less prominent dangerous actions"
|
|
68
68
|
},
|
|
69
69
|
outline: {
|
|
@@ -96,14 +96,14 @@ function x({
|
|
|
96
96
|
o && i.compactSize[t].classes
|
|
97
97
|
);
|
|
98
98
|
}
|
|
99
|
-
const y = (s) => s ? f.isValidElement(s) ? s : /* @__PURE__ */
|
|
99
|
+
const y = (s) => s ? f.isValidElement(s) ? s : /* @__PURE__ */ r(s, {}) : null, v = f.forwardRef(
|
|
100
100
|
({
|
|
101
101
|
children: s,
|
|
102
102
|
className: t,
|
|
103
103
|
disabled: e,
|
|
104
104
|
loading: o,
|
|
105
105
|
shape: u = "base",
|
|
106
|
-
size:
|
|
106
|
+
size: a = "base",
|
|
107
107
|
variant: d = "secondary",
|
|
108
108
|
icon: l,
|
|
109
109
|
title: n,
|
|
@@ -114,7 +114,7 @@ const y = (s) => s ? f.isValidElement(s) ? s : /* @__PURE__ */ a(s, {}) : null,
|
|
|
114
114
|
{
|
|
115
115
|
ref: m,
|
|
116
116
|
className: c(
|
|
117
|
-
x({ variant: d, size:
|
|
117
|
+
x({ variant: d, size: a, shape: u }),
|
|
118
118
|
"focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-hairline *:in-focus:opacity-100",
|
|
119
119
|
// Focus styles
|
|
120
120
|
e && "cursor-not-allowed opacity-50",
|
|
@@ -124,13 +124,13 @@ const y = (s) => s ? f.isValidElement(s) ? s : /* @__PURE__ */ a(s, {}) : null,
|
|
|
124
124
|
type: p ?? "button",
|
|
125
125
|
...z,
|
|
126
126
|
children: [
|
|
127
|
-
o && /* @__PURE__ */
|
|
127
|
+
o && /* @__PURE__ */ r(N, { size: a === "lg" ? 16 : 14 }),
|
|
128
128
|
!o && y(l),
|
|
129
129
|
s
|
|
130
130
|
]
|
|
131
131
|
}
|
|
132
132
|
);
|
|
133
|
-
return n ? /* @__PURE__ */
|
|
133
|
+
return n ? /* @__PURE__ */ r(T, { content: n, render: h }) : h;
|
|
134
134
|
}
|
|
135
135
|
);
|
|
136
136
|
v.displayName = "Button";
|
|
@@ -138,7 +138,7 @@ const j = ({
|
|
|
138
138
|
"aria-label": s = "Refresh",
|
|
139
139
|
loading: t,
|
|
140
140
|
...e
|
|
141
|
-
}) => /* @__PURE__ */
|
|
141
|
+
}) => /* @__PURE__ */ r(v, { shape: "square", "aria-label": s, ...e, children: /* @__PURE__ */ r(
|
|
142
142
|
w,
|
|
143
143
|
{
|
|
144
144
|
className: c({
|
|
@@ -155,7 +155,7 @@ const j = ({
|
|
|
155
155
|
external: e,
|
|
156
156
|
href: o,
|
|
157
157
|
shape: u = "base",
|
|
158
|
-
size:
|
|
158
|
+
size: a = "base",
|
|
159
159
|
variant: d = "ghost",
|
|
160
160
|
icon: l,
|
|
161
161
|
// linksExternal = false,
|
|
@@ -167,7 +167,7 @@ const j = ({
|
|
|
167
167
|
{
|
|
168
168
|
ref: b,
|
|
169
169
|
className: c(
|
|
170
|
-
x({ variant: d, size:
|
|
170
|
+
x({ variant: d, size: a, shape: u }),
|
|
171
171
|
"flex items-center no-underline!",
|
|
172
172
|
t
|
|
173
173
|
),
|
|
@@ -190,4 +190,4 @@ export {
|
|
|
190
190
|
j as R,
|
|
191
191
|
x as b
|
|
192
192
|
};
|
|
193
|
-
//# sourceMappingURL=button-
|
|
193
|
+
//# sourceMappingURL=button-oaqi7ykdisyskoos.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-oaqi7ykdisyskoos.js","sources":["../../src/components/button/button.tsx"],"sourcesContent":["import React from \"react\";\nimport { ArrowsClockwise, type Icon } from \"@phosphor-icons/react\";\nimport { Loader } from \"../loader/loader\";\nimport { Tooltip } from \"../tooltip/tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\n\n/** Button variant definitions mapping shape, size, and variant names to their Tailwind classes. */\nexport const KUMO_BUTTON_VARIANTS = {\n shape: {\n base: {\n classes: \"\",\n description: \"Default rectangular button shape\",\n },\n square: {\n classes: \"items-center justify-center p-0\",\n description: \"Square button for icon-only actions\",\n },\n circle: {\n classes: \"items-center justify-center p-0 rounded-full\",\n description: \"Circular button for icon-only actions\",\n },\n },\n size: {\n xs: {\n classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n description: \"Extra small button for compact UIs\",\n },\n sm: {\n classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n description: \"Small button for secondary actions\",\n },\n base: {\n classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n description: \"Default button size\",\n },\n lg: {\n classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n description: \"Large button for primary CTAs\",\n },\n },\n compactSize: {\n xs: { classes: \"size-3.5\" },\n sm: { classes: \"size-6.5\" },\n base: { classes: \"size-9\" },\n lg: { classes: \"size-10\" },\n },\n variant: {\n primary: {\n classes:\n \"bg-kumo-brand !text-white hover:bg-kumo-brand-hover focus: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:border-secondary! not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-hairline data-[state=open]:bg-kumo-base\",\n description: \"Default button style for most actions\",\n },\n ghost: {\n classes: \"text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit\",\n description: \"Minimal button with no background\",\n },\n destructive: {\n classes: \"bg-kumo-danger !text-white hover:bg-kumo-danger/70\",\n description: \"Danger button for destructive actions like delete\",\n },\n \"secondary-destructive\": {\n classes:\n \"bg-kumo-base !text-kumo-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-hairline data-[state=open]:bg-kumo-base\",\n description:\n \"Secondary button with destructive text for less prominent dangerous actions\",\n },\n outline: {\n classes: \"bg-transparent text-kumo-default ring ring-kumo-hairline\",\n description: \"Bordered button with transparent background\",\n },\n },\n} as const;\n\nexport const KUMO_BUTTON_DEFAULT_VARIANTS = {\n shape: \"base\",\n size: \"base\",\n variant: \"secondary\",\n} as const;\n\n// Derived types from KUMO_BUTTON_VARIANTS\nexport type KumoButtonShape = keyof typeof KUMO_BUTTON_VARIANTS.shape;\nexport type KumoButtonSize = keyof typeof KUMO_BUTTON_VARIANTS.size;\nexport type KumoButtonVariant = keyof typeof KUMO_BUTTON_VARIANTS.variant;\n\nexport interface KumoButtonVariantsProps {\n /**\n * Button shape.\n * - `\"base\"` — Default rectangular button\n * - `\"square\"` — Square button for icon-only actions\n * - `\"circle\"` — Circular button for icon-only actions\n * @default \"base\"\n */\n shape?: KumoButtonShape;\n /**\n * Button size.\n * - `\"xs\"` — Extra small for compact UIs\n * - `\"sm\"` — Small for secondary actions\n * - `\"base\"` — Default size\n * - `\"lg\"` — Large for primary CTAs\n * @default \"base\"\n */\n size?: KumoButtonSize;\n /**\n * Visual style of the button.\n * - `\"primary\"` — High-emphasis, brand-colored for primary actions\n * - `\"secondary\"` — Default style with border for most actions\n * - `\"ghost\"` — Minimal, no background for tertiary actions\n * - `\"destructive\"` — Danger button for destructive actions\n * - `\"secondary-destructive\"` — Secondary style with destructive text\n * - `\"outline\"` — Bordered with transparent background\n * @default \"secondary\"\n */\n variant?: KumoButtonVariant;\n}\n\nexport function buttonVariants({\n variant = KUMO_BUTTON_DEFAULT_VARIANTS.variant,\n size = KUMO_BUTTON_DEFAULT_VARIANTS.size,\n shape = KUMO_BUTTON_DEFAULT_VARIANTS.shape,\n}: KumoButtonVariantsProps = {}) {\n const isCompactShape = shape === \"square\" || shape === \"circle\";\n\n return cn(\n // Base styles\n \"group flex w-max shrink-0 items-center font-medium select-none\",\n \"border-0 shadow-xs\",\n \"cursor-pointer\",\n // Disabled state\n \"disabled:cursor-not-allowed disabled:text-kumo-subtle\",\n // Apply variant, size, shape styles from KUMO_BUTTON_VARIANTS\n KUMO_BUTTON_VARIANTS.variant[variant].classes,\n KUMO_BUTTON_VARIANTS.size[size].classes,\n KUMO_BUTTON_VARIANTS.shape[shape].classes,\n isCompactShape && KUMO_BUTTON_VARIANTS.compactSize[size].classes,\n );\n}\n\n// Normalize icon prop to support both React elements and component types\nconst renderIconNode = (IconComponent?: Icon | React.ReactNode) => {\n if (!IconComponent) return null;\n if (React.isValidElement(IconComponent)) return IconComponent;\n const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;\n return <Comp />;\n};\n\n/**\n * Button component props.\n *\n * Uses a discriminated union on `shape` so that icon-only buttons\n * (`shape=\"square\"` or `shape=\"circle\"`) require an `aria-label`.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\">Save</Button>\n * <Button variant=\"secondary\" shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n * <Button variant=\"destructive\" loading>Deleting...</Button>\n * ```\n */\ntype ButtonBaseProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n /** Content rendered inside the button. */\n children?: React.ReactNode;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */\n icon?: Icon | React.ReactNode;\n /** Shows a loading spinner and disables interaction. */\n loading?: boolean;\n /** When set, wraps the button in a Tooltip with this content. */\n title?: React.ReactNode;\n};\n\ntype ButtonWithTextProps = ButtonBaseProps & {\n shape?: \"base\";\n size?: KumoButtonSize;\n variant?: KumoButtonVariant;\n};\n\ntype IconOnlyButtonProps = ButtonBaseProps & {\n shape: \"square\" | \"circle\";\n size?: KumoButtonSize;\n variant?: KumoButtonVariant;\n /** Required for icon-only buttons to provide accessible label for screen readers */\n \"aria-label\": string;\n};\n\nexport type ButtonProps = ButtonWithTextProps | IconOnlyButtonProps;\n\n/**\n * LinkButton component props — renders an anchor styled as a button.\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/docs\" variant=\"ghost\" icon={BookIcon}>Docs</LinkButton>\n * <LinkButton href=\"https://example.com\" external>Visit Site</LinkButton>\n * ```\n */\nexport type LinkButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &\n KumoButtonVariantsProps & {\n /** Content rendered inside the link button. */\n children?: React.ReactNode;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */\n icon?: Icon | React.ReactNode;\n /** When `true`, opens in a new tab with `rel=\"noopener noreferrer\"`. */\n external?: boolean;\n linksExternal?: boolean;\n };\n\n/**\n * Primary action trigger. Supports multiple variants, sizes, shapes, icons, and loading state.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\">Save</Button>\n * <Button variant=\"secondary\" icon={PlusIcon}>Create Worker</Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n className,\n disabled,\n loading,\n shape = \"base\",\n size = \"base\",\n variant = \"secondary\",\n icon: IconComponent,\n title,\n ...props\n },\n ref,\n ) => {\n const { type, ...restProps } = props;\n const button = (\n <button\n ref={ref}\n className={cn(\n buttonVariants({ variant, size, shape }),\n \"focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-hairline *:in-focus:opacity-100\", // Focus styles\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n disabled={loading || disabled}\n type={type ?? \"button\"}\n {...restProps}\n >\n {loading && <Loader size={size === \"lg\" ? 16 : 14} />}\n {!loading && renderIconNode(IconComponent)}\n\n {children}\n </button>\n );\n\n if (title) {\n return <Tooltip content={title} render={button} />;\n }\n\n return button;\n },\n);\n\nButton.displayName = \"Button\";\n\n/**\n * Square button with a rotating arrows icon, used to trigger data refresh actions.\n *\n * @example\n * ```tsx\n * <RefreshButton loading={isRefreshing} onClick={refresh} />\n * ```\n */\nexport const RefreshButton = ({\n \"aria-label\": ariaLabel = \"Refresh\",\n loading,\n ...props\n}: ButtonProps) => (\n <Button shape=\"square\" aria-label={ariaLabel} {...props}>\n <ArrowsClockwise\n className={cn({\n \"animate-refresh\": loading,\n \"size-4.5\": props.size === \"base\" || !props.size,\n \"size-4\": props.size === \"sm\",\n \"size-5\": props.size === \"lg\",\n })}\n />\n </Button>\n);\n\n/**\n * Anchor element styled as a button. Integrates with `LinkProvider` for framework routing.\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/settings\" variant=\"ghost\">Settings</LinkButton>\n * ```\n */\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n (\n {\n children,\n className,\n external,\n href,\n shape = \"base\",\n size = \"base\",\n variant = \"ghost\",\n icon: IconComponent,\n // linksExternal = false,\n ...props\n },\n ref,\n ) => {\n const LinkComponent = useLinkComponent();\n const externalProps = external\n ? { target: \"_blank\", rel: \"noopener noreferrer\" }\n : {};\n\n return (\n <LinkComponent\n ref={ref}\n className={cn(\n buttonVariants({ variant, size, shape }),\n \"flex items-center no-underline!\",\n className,\n )}\n href={href}\n to={typeof href === \"string\" ? href : undefined}\n {...externalProps}\n {...props}\n >\n {renderIconNode(IconComponent)}\n {children}\n </LinkComponent>\n );\n },\n);\n\nLinkButton.displayName = \"LinkButton\";\n"],"names":["KUMO_BUTTON_VARIANTS","KUMO_BUTTON_DEFAULT_VARIANTS","buttonVariants","variant","size","shape","isCompactShape","cn","renderIconNode","IconComponent","React","Button","children","className","disabled","loading","title","props","ref","type","restProps","button","jsxs","Loader","jsx","Tooltip","RefreshButton","ariaLabel","ArrowsClockwise","LinkButton","external","href","LinkComponent","useLinkComponent","externalProps"],"mappings":"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"}
|
|
@@ -3,8 +3,8 @@ import { jsx as e, jsxs as C } from "react/jsx-runtime";
|
|
|
3
3
|
import { forwardRef as N, createContext as B, useContext as F } from "react";
|
|
4
4
|
import { MinusIcon as y, CheckIcon as w } from "@phosphor-icons/react";
|
|
5
5
|
import { c as b } from "./cn-ct4n7r74mh8y0f48.js";
|
|
6
|
-
import { L as K } from "./label-
|
|
7
|
-
import { K as j, L, N as E, O as R, C as _, P as G, Q as M } from "./vendor-base-ui-
|
|
6
|
+
import { L as K } from "./label-cvyvbqmt4mt757ff.js";
|
|
7
|
+
import { K as j, L, N as E, O as R, C as _, P as G, Q as M } from "./vendor-base-ui-m5pz3e8c4grg5qmj.js";
|
|
8
8
|
const Q = {
|
|
9
9
|
variant: {
|
|
10
10
|
default: {
|
|
@@ -65,7 +65,7 @@ const Q = {
|
|
|
65
65
|
},
|
|
66
66
|
className: b(
|
|
67
67
|
"relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2",
|
|
68
|
-
l === "error" ? "ring-kumo-danger" : "ring-kumo-
|
|
68
|
+
l === "error" ? "ring-kumo-danger" : "ring-kumo-hairline",
|
|
69
69
|
!t && "hover:ring-kumo-hairline focus-visible:ring-kumo-hairline",
|
|
70
70
|
"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast",
|
|
71
71
|
t && "cursor-not-allowed opacity-50",
|
|
@@ -147,7 +147,7 @@ const I = N(
|
|
|
147
147
|
onCheckedChange: x,
|
|
148
148
|
className: b(
|
|
149
149
|
"peer relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2",
|
|
150
|
-
l === "error" ? "ring-kumo-danger" : "ring-kumo-
|
|
150
|
+
l === "error" ? "ring-kumo-danger" : "ring-kumo-hairline",
|
|
151
151
|
!t && "group-hover:ring-kumo-hairline hover:ring-kumo-hairline focus-visible:ring-kumo-hairline",
|
|
152
152
|
"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast"
|
|
153
153
|
),
|
|
@@ -208,4 +208,4 @@ export {
|
|
|
208
208
|
Q as K,
|
|
209
209
|
W as a
|
|
210
210
|
};
|
|
211
|
-
//# sourceMappingURL=checkbox-
|
|
211
|
+
//# sourceMappingURL=checkbox-mwgmohffm22ut13s.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-mwgmohffm22ut13s.js","sources":["../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { CheckIcon, MinusIcon } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport {\n Checkbox as BaseCheckbox,\n type CheckboxRootChangeEventDetails,\n} from \"@base-ui/react/checkbox\";\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-hairline [&:hover>span]:ring-kumo-hairline\",\n description: \"Default checkbox appearance\",\n },\n error: {\n classes: \"[&>span]:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_CHECKBOX_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_CHECKBOX_VARIANTS\nexport type KumoCheckboxVariant = keyof typeof KUMO_CHECKBOX_VARIANTS.variant;\n\nexport interface KumoCheckboxVariantsProps {\n /**\n * Visual variant.\n * - `\"default\"` — Standard checkbox appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoCheckboxVariant;\n}\n\nexport function checkboxVariants({\n variant = KUMO_CHECKBOX_DEFAULT_VARIANTS.variant,\n}: KumoCheckboxVariantsProps = {}) {\n return cn(KUMO_CHECKBOX_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type CheckboxVariant = KumoCheckboxVariant;\n\n// Context for passing controlFirst from Group to Items\nconst CheckboxGroupContext = createContext<{ controlFirst: boolean }>({\n controlFirst: true,\n});\n\n/**\n * Single checkbox component props with accessibility guidance.\n *\n * **Accessible Name Required:** Checkbox should have one of:\n * 1. `label` prop (recommended) - built-in Field wrapper with horizontal layout\n * 2. `aria-label` - for checkboxes without visible label\n * 3. `aria-labelledby` - for custom label association\n *\n * **Note:** When used inside Checkbox.Group or Dropdown, label is optional (parent provides context).\n *\n * Missing accessible names will trigger console warnings in development (unless inside a group).\n *\n * @example\n * // Recommended: Built-in Field wrapper with label\n * <Checkbox label=\"Accept terms and conditions\" />\n *\n * @example\n * // Control-first layout (checkbox before label)\n * <Checkbox label=\"Remember me\" controlFirst={true} />\n *\n * @example\n * // Label-first layout (label before checkbox)\n * <Checkbox label=\"Enable notifications\" controlFirst={false} />\n *\n * @example\n * // Error variant (visual only, no error text for single checkboxes)\n * <Checkbox label=\"Required field\" variant=\"error\" />\n *\n * @example\n * // Without visible label (aria-label required)\n * <Checkbox aria-label=\"Select all items\" />\n *\n * @example\n * // Custom label association\n * <label id=\"terms-label\">I accept the terms</label>\n * <Checkbox aria-labelledby=\"terms-label\" />\n *\n * @example\n * // Inside Checkbox.Group (label optional)\n * <Checkbox.Group legend=\"Preferences\">\n * <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n * <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n * </Checkbox.Group>\n */\nexport type CheckboxProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n variant?: CheckboxVariant;\n /** Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n controlFirst?: boolean;\n /** Whether the checkbox is checked (controlled) */\n checked?: boolean;\n /** Whether the checkbox is in indeterminate state */\n indeterminate?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: (checked: boolean) => void;\n /** @deprecated Use onCheckedChange instead */\n onValueChange?: (checked: boolean) => void;\n /** @deprecated Use onCheckedChange instead */\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n /** Click handler */\n onClick?: (event: React.MouseEvent) => void;\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 */\nexport interface CheckboxGroupProps {\n /** Legend text for the group */\n legend: string;\n /** Child Checkbox.Item components */\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?: (checked: boolean) => void;\n /** @deprecated Use onCheckedChange instead */\n onValueChange?: (checked: boolean) => void;\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 onValueChange,\n onChange,\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 // Handle onCheckedChange (preferred) and deprecated onValueChange/onChange\n const handleCheckedChange = (\n newChecked: boolean,\n eventDetails: CheckboxRootChangeEventDetails,\n ) => {\n onCheckedChange?.(newChecked);\n onValueChange?.(newChecked);\n if (onChange) {\n // Backwards compatibility: extend native event with target.checked\n // so existing code using `e.target.checked` continues to work\n const event = Object.assign(eventDetails.event, {\n target: { checked: newChecked },\n });\n onChange(event as never);\n }\n };\n\n const checkboxControl = (\n <BaseCheckbox.Root\n ref={ref}\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={handleCheckedChange}\n className={cn(\n \"relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-hairline\",\n !disabled && \"hover:ring-kumo-hairline focus-visible:ring-kumo-hairline\",\n \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n {...props}\n >\n <BaseCheckbox.Indicator\n keepMounted\n className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n render={(renderProps, state) => (\n <span {...renderProps}>\n {state.indeterminate ? (\n <MinusIcon weight=\"bold\" size={12} />\n ) : (\n <CheckIcon weight=\"bold\" size={12} />\n )}\n </span>\n )}\n />\n </BaseCheckbox.Root>\n );\n\n // If no label provided, return bare checkbox (for use in other components like Dropdown)\n if (!label) {\n return checkboxControl;\n }\n\n // Use Field.Root + Field.Label enclosing pattern for proper a11y association\n // See: https://base-ui.com/react/components/field\n return (\n <FieldBase.Root className=\"inline-flex\">\n <FieldBase.Label\n className={cn(\n \"!m-0 !min-h-0 !text-base inline-flex items-center gap-2\",\n controlFirst ? \"flex-row\" : \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n )}\n >\n {checkboxControl}\n <Label\n showOptional={required === false}\n tooltip={labelTooltip}\n asContent\n >\n {label}\n </Label>\n </FieldBase.Label>\n </FieldBase.Root>\n );\n },\n);\n\nCheckboxBase.displayName = \"Checkbox\";\n\n// Checkbox.Item for use within Checkbox.Group\nconst CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(\n (\n {\n className,\n checked,\n indeterminate,\n disabled,\n variant = \"default\",\n label,\n value,\n onCheckedChange,\n onValueChange,\n name,\n },\n ref,\n ) => {\n const { controlFirst } = useContext(CheckboxGroupContext);\n\n // Handle onCheckedChange (preferred) and deprecated onValueChange\n const handleCheckedChange = (newChecked: boolean) => {\n onCheckedChange?.(newChecked);\n onValueChange?.(newChecked);\n };\n\n return (\n <label\n className={cn(\n \"m-0 relative inline-flex items-center gap-2\",\n // Control first (default): checkbox before label\n // Label first: label before checkbox using flex-row-reverse\n !controlFirst && \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n className,\n )}\n >\n <BaseCheckbox.Root\n ref={ref}\n value={value}\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={handleCheckedChange}\n className={cn(\n \"peer relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-hairline\",\n !disabled &&\n \"group-hover:ring-kumo-hairline hover:ring-kumo-hairline focus-visible:ring-kumo-hairline\",\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.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 <Fieldset.Legend className=\"text-base font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n <div className=\"flex flex-col gap-2\">{children}</div>\n {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n {description && (\n <p className=\"text-sm text-kumo-subtle\">{description}</p>\n )}\n </Fieldset.Root>\n </BaseCheckboxGroup>\n </CheckboxGroupContext.Provider>\n );\n}\n\n// Compound component\nexport const Checkbox = Object.assign(CheckboxBase, {\n Item: CheckboxItem,\n Group: CheckboxGroup,\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","onValueChange","onChange","required","name","props","ref","hasLabel","hasAriaLabel","hasAriaLabelledBy","checkboxControl","jsx","BaseCheckbox.Root","newChecked","eventDetails","event","cn","BaseCheckbox.Indicator","renderProps","state","MinusIcon","CheckIcon","FieldBase.Root","jsxs","FieldBase.Label","Label","CheckboxItem","value","useContext","handleCheckedChange","CheckboxGroup","legend","children","error","description","defaultValue","allValues","BaseCheckboxGroup","Fieldset.Root","Fieldset.Legend","Checkbox"],"mappings":"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"}
|
package/dist/chunks/{clipboard-text-vcbvmtne4zjk4b18.js → clipboard-text-dxczqon3d27xp6f0.js}
RENAMED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
import { jsxs as c, jsx as e } from "react/jsx-runtime";
|
|
3
3
|
import { CheckIcon as R, CopyIcon as A } from "@phosphor-icons/react";
|
|
4
4
|
import { forwardRef as S, useState as P, useRef as _, useCallback as I } from "react";
|
|
5
|
-
import { B as O } from "./button-
|
|
6
|
-
import { i as M } from "./input-
|
|
5
|
+
import { B as O } from "./button-oaqi7ykdisyskoos.js";
|
|
6
|
+
import { i as M } from "./input-cw05pbqdburghkus.js";
|
|
7
7
|
import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
|
|
8
|
-
import { U as V, V as j, W as B, X as U, Y as D, Z as E, _ as L, $ as X, a0 as K, a1 as W, a2 as F, a3 as Y, a4 as Z } from "./vendor-base-ui-
|
|
9
|
-
const
|
|
8
|
+
import { U as V, V as j, W as B, X as U, Y as D, Z as E, _ as L, $ as X, a0 as K, a1 as W, a2 as F, a3 as Y, a4 as Z } from "./vendor-base-ui-m5pz3e8c4grg5qmj.js";
|
|
9
|
+
const T = V(), y = {
|
|
10
10
|
size: {
|
|
11
11
|
sm: {
|
|
12
12
|
classes: "text-xs",
|
|
@@ -58,7 +58,7 @@ function q() {
|
|
|
58
58
|
) }, i.id)) });
|
|
59
59
|
}
|
|
60
60
|
function G({ children: t }) {
|
|
61
|
-
return /* @__PURE__ */ e(L, { children: /* @__PURE__ */ c(X, { toastManager:
|
|
61
|
+
return /* @__PURE__ */ e(L, { children: /* @__PURE__ */ c(X, { toastManager: T, children: [
|
|
62
62
|
/* @__PURE__ */ e(q, {}),
|
|
63
63
|
t
|
|
64
64
|
] }) });
|
|
@@ -84,15 +84,15 @@ const H = S(
|
|
|
84
84
|
else if (typeof document < "u") {
|
|
85
85
|
const o = document.createElement("textarea");
|
|
86
86
|
o.value = i ?? t, o.setAttribute("readonly", ""), o.style.position = "absolute", o.style.left = "-9999px", document.body.appendChild(o);
|
|
87
|
-
const a = document.getSelection(),
|
|
87
|
+
const a = document.getSelection(), h = a?.rangeCount ? a.getRangeAt(0) : null;
|
|
88
88
|
o.select();
|
|
89
89
|
try {
|
|
90
90
|
document.execCommand("copy");
|
|
91
91
|
} finally {
|
|
92
|
-
document.body.removeChild(o),
|
|
92
|
+
document.body.removeChild(o), h && (a?.removeAllRanges(), a?.addRange(h));
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
|
-
d(!0), n ?
|
|
95
|
+
d(!0), n ? T.add({
|
|
96
96
|
description: p,
|
|
97
97
|
positionerProps: {
|
|
98
98
|
anchor: b.current,
|
|
@@ -113,7 +113,7 @@ const H = S(
|
|
|
113
113
|
ref: b,
|
|
114
114
|
size: x.buttonSize,
|
|
115
115
|
variant: "ghost",
|
|
116
|
-
className: "rounded-none border-l! border-kumo-
|
|
116
|
+
className: "rounded-none border-l! border-kumo-hairline! px-3 relative overflow-hidden transition-all duration-200",
|
|
117
117
|
onClick: N,
|
|
118
118
|
"aria-label": w,
|
|
119
119
|
children: [
|
|
@@ -183,4 +183,4 @@ H.displayName = "ClipboardText";
|
|
|
183
183
|
export {
|
|
184
184
|
H as C
|
|
185
185
|
};
|
|
186
|
-
//# sourceMappingURL=clipboard-text-
|
|
186
|
+
//# sourceMappingURL=clipboard-text-dxczqon3d27xp6f0.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clipboard-text-vcbvmtne4zjk4b18.js","sources":["../../src/components/clipboard-text/clipboard-text.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Toast } from \"@base-ui/react/toast\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { Button } from \"../button\";\nimport { inputVariants } from \"../input\";\nimport { cn } from \"../../utils/cn\";\n\n// Create a toast manager for anchored \"Copied\" toasts\nconst clipboardToastManager = Toast.createToastManager();\n\n/** ClipboardText size variant definitions mapping sizes to their Tailwind classes. */\nexport const KUMO_CLIPBOARD_TEXT_VARIANTS = {\n size: {\n sm: {\n classes: \"text-xs\",\n buttonSize: \"sm\" as const,\n description: \"Small clipboard text for compact UIs\",\n },\n base: {\n classes: \"text-sm\",\n buttonSize: \"base\" as const,\n description: \"Default clipboard text size\",\n },\n lg: {\n classes: \"text-sm\",\n buttonSize: \"lg\" as const,\n description: \"Large clipboard text for prominent display\",\n },\n },\n} as const;\n\nexport const KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS = {\n size: \"lg\",\n} as const;\n\nconst clipboardTextAnimations = {\n slide: {\n initial:\n \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 translate-y-full\",\n animate: \"translate-y-0 opacity-100\",\n end: \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full\",\n },\n} as const;\n\n// Derived types from KUMO_CLIPBOARD_TEXT_VARIANTS\nexport type KumoClipboardTextSize =\n keyof typeof KUMO_CLIPBOARD_TEXT_VARIANTS.size;\n\nexport interface KumoClipboardTextVariantsProps {\n /**\n * Size of the clipboard text field.\n * - `\"sm\"` — Small clipboard text for compact UIs\n * - `\"base\"` — Default clipboard text size\n * - `\"lg\"` — Large clipboard text for prominent display\n * @default \"lg\"\n */\n size?: KumoClipboardTextSize;\n}\n\nexport function clipboardTextVariants({\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n}: KumoClipboardTextVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex items-center overflow-hidden bg-kumo-base px-0 font-mono\",\n // Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS\n KUMO_CLIPBOARD_TEXT_VARIANTS.size[size].classes,\n );\n}\n\n// Legacy type alias for backwards compatibility\nexport type ClipboardTextSize = KumoClipboardTextSize;\n\n/**\n * ClipboardText component props.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"sk_live_abc123\" />\n * <ClipboardText text=\"npm install @cloudflare/kumo\" size=\"sm\" />\n * ```\n */\nexport interface ClipboardTextProps extends KumoClipboardTextVariantsProps {\n /** The text to display and copy to clipboard. */\n text: string;\n /** If provided, this text will be copied to clipboard instead of the `text` prop. */\n textToCopy?: string;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Callback fired after text is copied to clipboard. */\n onCopy?: () => void;\n /**\n * Tooltip config. Shows tooltip on hover, anchored toast on click.\n * @example\n * ```tsx\n * <ClipboardText\n * text=\"abc123\"\n * tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n * />\n * ```\n */\n tooltip?: {\n /** Text shown in tooltip on hover. @default \"Copy\" */\n text?: string;\n /** Text shown in toast after copying. @default \"Copied\" */\n copiedText?: string;\n /** Tooltip/toast placement. @default \"top\" */\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n };\n /** Accessible labels for i18n. */\n labels?: {\n /** @default \"Copy to clipboard\" */\n copyAction?: string;\n };\n}\n\n/**\n * Anchored toasts viewport - renders \"Copied\" toasts anchored to buttons\n */\nfunction AnchoredToasts() {\n const { toasts } = Toast.useToastManager();\n return (\n <Toast.Viewport className=\"pointer-events-none fixed inset-0 isolate\">\n {toasts.map((toast) => (\n <Toast.Positioner key={toast.id} toast={toast} className=\"absolute\">\n <Toast.Root\n toast={toast}\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n <Toast.Description />\n </Toast.Root>\n </Toast.Positioner>\n ))}\n </Toast.Viewport>\n );\n}\n\n/**\n * Internal wrapper that provides Toast context when tooltip is enabled.\n */\nfunction TooltipWrapper({ children }: { children: React.ReactNode }) {\n return (\n <Tooltip.Provider>\n <Toast.Provider toastManager={clipboardToastManager}>\n <AnchoredToasts />\n {children}\n </Toast.Provider>\n </Tooltip.Provider>\n );\n}\n\n/**\n * Read-only text field with a one-click copy-to-clipboard button.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"0c239dd2\" />\n * ```\n */\nexport const ClipboardText = forwardRef<HTMLDivElement, ClipboardTextProps>(\n (\n {\n text,\n textToCopy,\n className,\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n onCopy,\n tooltip,\n labels: { copyAction = \"Copy to clipboard\" } = {},\n },\n ref,\n ) => {\n const [copied, setCopied] = useState(false);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const sizeConfig = KUMO_CLIPBOARD_TEXT_VARIANTS.size[size];\n\n // Destructure tooltip config with defaults\n const {\n text: tooltipText = \"Copy\",\n copiedText = \"Copied\",\n side: tooltipSide = \"top\",\n } = tooltip ?? {};\n\n const copyToClipboard = useCallback(async () => {\n try {\n if (\n typeof navigator !== \"undefined\" &&\n navigator.clipboard &&\n typeof navigator.clipboard.writeText === \"function\"\n ) {\n await navigator.clipboard.writeText(textToCopy ?? text);\n } else if (typeof document !== \"undefined\") {\n // Fallback for older browsers\n const textarea = document.createElement(\"textarea\");\n textarea.value = textToCopy ?? text;\n textarea.setAttribute(\"readonly\", \"\");\n textarea.style.position = \"absolute\";\n textarea.style.left = \"-9999px\";\n document.body.appendChild(textarea);\n const selection = document.getSelection();\n const previousRange = selection?.rangeCount\n ? selection.getRangeAt(0)\n : null;\n textarea.select();\n try {\n document.execCommand(\"copy\");\n } finally {\n document.body.removeChild(textarea);\n if (previousRange) {\n selection?.removeAllRanges();\n selection?.addRange(previousRange);\n }\n }\n }\n\n setCopied(true);\n\n // Show anchored toast if tooltip mode is enabled\n if (tooltip) {\n clipboardToastManager.add({\n description: copiedText,\n positionerProps: {\n anchor: buttonRef.current,\n side: tooltipSide,\n sideOffset: 8,\n },\n timeout: 1500,\n onClose() {\n setCopied(false);\n },\n });\n } else {\n // Reset copied state after delay when no tooltip\n setTimeout(() => setCopied(false), 1500);\n }\n\n onCopy?.();\n } catch (error) {\n console.warn(\"Clipboard copy failed\", error);\n }\n }, [text, onCopy, tooltip, copiedText, tooltipSide]);\n\n const copyButton = (\n <Button\n ref={buttonRef}\n size={sizeConfig.buttonSize}\n variant=\"ghost\"\n className=\"rounded-none border-l! border-kumo-line! px-3 relative overflow-hidden transition-all duration-200\"\n onClick={copyToClipboard}\n aria-label={copyAction}\n >\n <span\n className={cn(\n \"flex items-center gap-1 transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.animate\n : clipboardTextAnimations.slide.initial,\n )}\n >\n <CheckIcon />\n </span>\n <span\n className={cn(\n \"flex items-center justify-center transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.end\n : clipboardTextAnimations.slide.animate,\n )}\n >\n <CopyIcon />\n </span>\n </Button>\n );\n\n return (\n <div\n ref={ref}\n className={cn(\n inputVariants({ size: sizeConfig.buttonSize }),\n clipboardTextVariants({ size }),\n className,\n )}\n >\n <span className=\"grow truncate ps-4 pe-2\">{text}</span>\n {tooltip ? (\n <TooltipWrapper>\n <Tooltip.Root\n disabled={copied}\n onOpenChange={(open, eventDetails) => {\n // Prevent tooltip from closing when button is clicked\n if (eventDetails.reason === \"trigger-press\") {\n eventDetails.cancel();\n }\n }}\n >\n <Tooltip.Trigger render={copyButton} />\n <Tooltip.Portal>\n <Tooltip.Positioner side={tooltipSide} sideOffset={8}>\n <Tooltip.Popup\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n {tooltipText}\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Portal>\n </Tooltip.Root>\n </TooltipWrapper>\n ) : (\n copyButton\n )}\n <span className=\"sr-only\" aria-live=\"polite\">\n {copied ? copiedText : \"\"}\n </span>\n </div>\n );\n },\n);\n\nClipboardText.displayName = \"ClipboardText\";\n"],"names":["clipboardToastManager","Toast.createToastManager","KUMO_CLIPBOARD_TEXT_VARIANTS","KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS","clipboardTextAnimations","clipboardTextVariants","size","cn","AnchoredToasts","toasts","Toast.useToastManager","Toast.Viewport","toast","Toast.Positioner","jsx","Toast.Root","Toast.Description","TooltipWrapper","children","Tooltip.Provider","Toast.Provider","ClipboardText","forwardRef","text","textToCopy","className","onCopy","tooltip","copyAction","ref","copied","setCopied","useState","buttonRef","useRef","sizeConfig","tooltipText","copiedText","tooltipSide","copyToClipboard","useCallback","textarea","selection","previousRange","error","copyButton","jsxs","Button","CheckIcon","CopyIcon","inputVariants","Tooltip.Root","open","eventDetails","Tooltip.Trigger","Tooltip.Portal","Tooltip.Positioner","Tooltip.Popup"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"clipboard-text-dxczqon3d27xp6f0.js","sources":["../../src/components/clipboard-text/clipboard-text.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Toast } from \"@base-ui/react/toast\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { Button } from \"../button\";\nimport { inputVariants } from \"../input\";\nimport { cn } from \"../../utils/cn\";\n\n// Create a toast manager for anchored \"Copied\" toasts\nconst clipboardToastManager = Toast.createToastManager();\n\n/** ClipboardText size variant definitions mapping sizes to their Tailwind classes. */\nexport const KUMO_CLIPBOARD_TEXT_VARIANTS = {\n size: {\n sm: {\n classes: \"text-xs\",\n buttonSize: \"sm\" as const,\n description: \"Small clipboard text for compact UIs\",\n },\n base: {\n classes: \"text-sm\",\n buttonSize: \"base\" as const,\n description: \"Default clipboard text size\",\n },\n lg: {\n classes: \"text-sm\",\n buttonSize: \"lg\" as const,\n description: \"Large clipboard text for prominent display\",\n },\n },\n} as const;\n\nexport const KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS = {\n size: \"lg\",\n} as const;\n\nconst clipboardTextAnimations = {\n slide: {\n initial:\n \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 translate-y-full\",\n animate: \"translate-y-0 opacity-100\",\n end: \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full\",\n },\n} as const;\n\n// Derived types from KUMO_CLIPBOARD_TEXT_VARIANTS\nexport type KumoClipboardTextSize =\n keyof typeof KUMO_CLIPBOARD_TEXT_VARIANTS.size;\n\nexport interface KumoClipboardTextVariantsProps {\n /**\n * Size of the clipboard text field.\n * - `\"sm\"` — Small clipboard text for compact UIs\n * - `\"base\"` — Default clipboard text size\n * - `\"lg\"` — Large clipboard text for prominent display\n * @default \"lg\"\n */\n size?: KumoClipboardTextSize;\n}\n\nexport function clipboardTextVariants({\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n}: KumoClipboardTextVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex items-center overflow-hidden bg-kumo-base px-0 font-mono\",\n // Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS\n KUMO_CLIPBOARD_TEXT_VARIANTS.size[size].classes,\n );\n}\n\n// Legacy type alias for backwards compatibility\nexport type ClipboardTextSize = KumoClipboardTextSize;\n\n/**\n * ClipboardText component props.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"sk_live_abc123\" />\n * <ClipboardText text=\"npm install @cloudflare/kumo\" size=\"sm\" />\n * ```\n */\nexport interface ClipboardTextProps extends KumoClipboardTextVariantsProps {\n /** The text to display and copy to clipboard. */\n text: string;\n /** If provided, this text will be copied to clipboard instead of the `text` prop. */\n textToCopy?: string;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Callback fired after text is copied to clipboard. */\n onCopy?: () => void;\n /**\n * Tooltip config. Shows tooltip on hover, anchored toast on click.\n * @example\n * ```tsx\n * <ClipboardText\n * text=\"abc123\"\n * tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n * />\n * ```\n */\n tooltip?: {\n /** Text shown in tooltip on hover. @default \"Copy\" */\n text?: string;\n /** Text shown in toast after copying. @default \"Copied\" */\n copiedText?: string;\n /** Tooltip/toast placement. @default \"top\" */\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n };\n /** Accessible labels for i18n. */\n labels?: {\n /** @default \"Copy to clipboard\" */\n copyAction?: string;\n };\n}\n\n/**\n * Anchored toasts viewport - renders \"Copied\" toasts anchored to buttons\n */\nfunction AnchoredToasts() {\n const { toasts } = Toast.useToastManager();\n return (\n <Toast.Viewport className=\"pointer-events-none fixed inset-0 isolate\">\n {toasts.map((toast) => (\n <Toast.Positioner key={toast.id} toast={toast} className=\"absolute\">\n <Toast.Root\n toast={toast}\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n <Toast.Description />\n </Toast.Root>\n </Toast.Positioner>\n ))}\n </Toast.Viewport>\n );\n}\n\n/**\n * Internal wrapper that provides Toast context when tooltip is enabled.\n */\nfunction TooltipWrapper({ children }: { children: React.ReactNode }) {\n return (\n <Tooltip.Provider>\n <Toast.Provider toastManager={clipboardToastManager}>\n <AnchoredToasts />\n {children}\n </Toast.Provider>\n </Tooltip.Provider>\n );\n}\n\n/**\n * Read-only text field with a one-click copy-to-clipboard button.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"0c239dd2\" />\n * ```\n */\nexport const ClipboardText = forwardRef<HTMLDivElement, ClipboardTextProps>(\n (\n {\n text,\n textToCopy,\n className,\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n onCopy,\n tooltip,\n labels: { copyAction = \"Copy to clipboard\" } = {},\n },\n ref,\n ) => {\n const [copied, setCopied] = useState(false);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const sizeConfig = KUMO_CLIPBOARD_TEXT_VARIANTS.size[size];\n\n // Destructure tooltip config with defaults\n const {\n text: tooltipText = \"Copy\",\n copiedText = \"Copied\",\n side: tooltipSide = \"top\",\n } = tooltip ?? {};\n\n const copyToClipboard = useCallback(async () => {\n try {\n if (\n typeof navigator !== \"undefined\" &&\n navigator.clipboard &&\n typeof navigator.clipboard.writeText === \"function\"\n ) {\n await navigator.clipboard.writeText(textToCopy ?? text);\n } else if (typeof document !== \"undefined\") {\n // Fallback for older browsers\n const textarea = document.createElement(\"textarea\");\n textarea.value = textToCopy ?? text;\n textarea.setAttribute(\"readonly\", \"\");\n textarea.style.position = \"absolute\";\n textarea.style.left = \"-9999px\";\n document.body.appendChild(textarea);\n const selection = document.getSelection();\n const previousRange = selection?.rangeCount\n ? selection.getRangeAt(0)\n : null;\n textarea.select();\n try {\n document.execCommand(\"copy\");\n } finally {\n document.body.removeChild(textarea);\n if (previousRange) {\n selection?.removeAllRanges();\n selection?.addRange(previousRange);\n }\n }\n }\n\n setCopied(true);\n\n // Show anchored toast if tooltip mode is enabled\n if (tooltip) {\n clipboardToastManager.add({\n description: copiedText,\n positionerProps: {\n anchor: buttonRef.current,\n side: tooltipSide,\n sideOffset: 8,\n },\n timeout: 1500,\n onClose() {\n setCopied(false);\n },\n });\n } else {\n // Reset copied state after delay when no tooltip\n setTimeout(() => setCopied(false), 1500);\n }\n\n onCopy?.();\n } catch (error) {\n console.warn(\"Clipboard copy failed\", error);\n }\n }, [text, onCopy, tooltip, copiedText, tooltipSide]);\n\n const copyButton = (\n <Button\n ref={buttonRef}\n size={sizeConfig.buttonSize}\n variant=\"ghost\"\n className=\"rounded-none border-l! border-kumo-hairline! px-3 relative overflow-hidden transition-all duration-200\"\n onClick={copyToClipboard}\n aria-label={copyAction}\n >\n <span\n className={cn(\n \"flex items-center gap-1 transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.animate\n : clipboardTextAnimations.slide.initial,\n )}\n >\n <CheckIcon />\n </span>\n <span\n className={cn(\n \"flex items-center justify-center transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.end\n : clipboardTextAnimations.slide.animate,\n )}\n >\n <CopyIcon />\n </span>\n </Button>\n );\n\n return (\n <div\n ref={ref}\n className={cn(\n inputVariants({ size: sizeConfig.buttonSize }),\n clipboardTextVariants({ size }),\n className,\n )}\n >\n <span className=\"grow truncate ps-4 pe-2\">{text}</span>\n {tooltip ? (\n <TooltipWrapper>\n <Tooltip.Root\n disabled={copied}\n onOpenChange={(open, eventDetails) => {\n // Prevent tooltip from closing when button is clicked\n if (eventDetails.reason === \"trigger-press\") {\n eventDetails.cancel();\n }\n }}\n >\n <Tooltip.Trigger render={copyButton} />\n <Tooltip.Portal>\n <Tooltip.Positioner side={tooltipSide} sideOffset={8}>\n <Tooltip.Popup\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n {tooltipText}\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Portal>\n </Tooltip.Root>\n </TooltipWrapper>\n ) : (\n copyButton\n )}\n <span className=\"sr-only\" aria-live=\"polite\">\n {copied ? copiedText : \"\"}\n </span>\n </div>\n );\n },\n);\n\nClipboardText.displayName = \"ClipboardText\";\n"],"names":["clipboardToastManager","Toast.createToastManager","KUMO_CLIPBOARD_TEXT_VARIANTS","KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS","clipboardTextAnimations","clipboardTextVariants","size","cn","AnchoredToasts","toasts","Toast.useToastManager","Toast.Viewport","toast","Toast.Positioner","jsx","Toast.Root","Toast.Description","TooltipWrapper","children","Tooltip.Provider","Toast.Provider","ClipboardText","forwardRef","text","textToCopy","className","onCopy","tooltip","copyAction","ref","copied","setCopied","useState","buttonRef","useRef","sizeConfig","tooltipText","copiedText","tooltipSide","copyToClipboard","useCallback","textarea","selection","previousRange","error","copyButton","jsxs","Button","CheckIcon","CopyIcon","inputVariants","Tooltip.Root","open","eventDetails","Tooltip.Trigger","Tooltip.Portal","Tooltip.Positioner","Tooltip.Popup"],"mappings":"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"}
|
package/dist/chunks/{cloudflare-logo-bgts2jgsdh7sslw4.js → cloudflare-logo-pbavoe1wu8nr5c4n.js}
RENAMED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as h, jsx as t } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef as L } from "react";
|
|
4
|
-
import { c as
|
|
4
|
+
import { c as i } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
5
|
const m = "#F48120", v = "#FAAD3F", w = "#404041", p = "M33.204 20.4C33.3649 19.9741 33.4217 19.5159 33.3695 19.0636C33.3173 18.6113 33.1577 18.1781 32.904 17.8C32.6435 17.4876 32.3239 17.2297 31.9636 17.0409C31.6032 16.8522 31.2092 16.7363 30.804 16.7L13.404 16.5C13.304 16.5 13.204 16.4 13.104 16.4C13.0808 16.3825 13.0618 16.3599 13.0488 16.3339C13.0358 16.3078 13.029 16.2791 13.029 16.25C13.029 16.2209 13.0358 16.1922 13.0488 16.1662C13.0618 16.1401 13.0808 16.1175 13.104 16.1C13.204 15.9 13.304 15.8 13.504 15.8L31.004 15.6C32.115 15.4767 33.1731 15.0597 34.0695 14.3918C34.9659 13.7239 35.6681 12.8293 36.104 11.8L37.104 9.20002C37.104 9.10002 37.204 9.00001 37.104 8.90001C36.5604 6.47843 35.2411 4.30052 33.3466 2.69721C31.4521 1.09391 29.086 0.152865 26.6079 0.0170769C24.1298 -0.118712 21.675 0.558179 19.6167 1.94489C17.5584 3.33161 16.009 5.35233 15.204 7.70002C14.159 6.95365 12.8843 6.59957 11.604 6.70002C10.4291 6.83102 9.33369 7.35777 8.49774 8.19372C7.66179 9.02966 7.13505 10.1251 7.00404 11.3C6.93745 11.9014 6.97125 12.5097 7.10404 13.1C5.20298 13.1526 3.39743 13.9448 2.07147 15.3081C0.745511 16.6714 0.00377461 18.4982 0.00403983 20.4C-0.0123708 20.7695 0.0212659 21.1395 0.104038 21.5C0.10863 21.5781 0.141713 21.6517 0.19701 21.707C0.252307 21.7623 0.325975 21.7954 0.404041 21.8H32.504C32.704 21.8 32.904 21.7 32.904 21.5L33.204 20.4Z", u = "M38.704 9.20002H38.204C38.104 9.20002 38.004 9.30001 37.904 9.40001L37.204 11.8C37.0431 12.2259 36.9864 12.6841 37.0386 13.1364C37.0908 13.5887 37.2504 14.0219 37.504 14.4C37.7646 14.7124 38.0842 14.9704 38.4445 15.1591C38.8049 15.3479 39.1989 15.4637 39.604 15.5L43.304 15.7C43.404 15.7 43.504 15.8 43.604 15.8C43.6273 15.8175 43.6462 15.8401 43.6592 15.8662C43.6723 15.8922 43.679 15.9209 43.679 15.95C43.679 15.9791 43.6723 16.0078 43.6592 16.0339C43.6462 16.0599 43.6273 16.0826 43.604 16.1C43.504 16.3 43.404 16.4 43.204 16.4L39.404 16.6C38.293 16.7233 37.2349 17.1403 36.3386 17.8082C35.4422 18.4761 34.74 19.3707 34.304 20.4L34.104 21.3C34.004 21.4 34.104 21.6 34.304 21.6H47.504C47.5448 21.6058 47.5863 21.6021 47.6254 21.5891C47.6644 21.5761 47.6999 21.5541 47.729 21.525C47.7581 21.4959 47.7801 21.4604 47.7931 21.4214C47.8061 21.3823 47.8099 21.3408 47.804 21.3C48.0421 20.4527 48.1764 19.5797 48.204 18.7C48.1882 16.1854 47.1822 13.7782 45.404 12C43.6259 10.2218 41.2187 9.21587 38.704 9.20002Z", A = "M100.5,27.2a.9.9,0,1,1,.9-.9.89626.89626,0,0,1-.9.9m0-1.6a.7.7,0,1,0,.7.7.68354.68354,0,0,0-.7-.7m.4,1.2h-.2l-.2-.3h-.2v.3h-.2v-.9h.5a.26517.26517,0,0,1,.3.3c0,.1-.1.2-.2.3l.2.3Zm-.3-.5c.1,0,.1,0,.1-.1a.09794.09794,0,0,0-.1-.1h-.3v.3h.3Zm-89.7-.9h2.2v6h3.8v1.9h-6Zm8.3,3.9a4.10491,4.10491,0,0,1,4.3-4.1,4.02,4.02,0,0,1,4.2,4.1,4.10491,4.10491,0,0,1-4.3,4.1,4.07888,4.07888,0,0,1-4.2-4.1m6.3,0a2.05565,2.05565,0,0,0-2-2.2,2.1025,2.1025,0,0,0,0,4.2c1.2.2,2-.8,2-2m4.9.5V25.4h2.2v4.4c0,1.1.6,1.7,1.5,1.7a1.39926,1.39926,0,0,0,1.5-1.6V25.4h2.2v4.4c0,2.6-1.5,3.7-3.7,3.7-2.3-.1-3.7-1.2-3.7-3.7m10.7-4.4h3.1c2.8,0,4.5,1.6,4.5,3.9s-1.7,4-4.5,4h-3V25.4Zm3.1,5.9a2.00909,2.00909,0,1,0,0-4h-.9v4Zm7.6-5.9h6.3v1.9H54v1.3h3.7v1.8H54v2.9H51.8Zm9.4,0h2.2v6h3.8v1.9h-6Zm11.7-.1h2.2l3.4,8H76.1l-.6-1.4H72.4l-.6,1.4H69.5Zm2,4.9L74,28l-.9,2.2Zm6.4-4.8H85a3.41818,3.41818,0,0,1,2.6.9,2.62373,2.62373,0,0,1-.9,4.2l1.9,2.8H86.1l-1.6-2.4h-1v2.4H81.3Zm3.6,3.8c.7,0,1.2-.4,1.2-.9,0-.6-.5-.9-1.2-.9H83.5v1.9h1.4Zm6.5-3.8h6.4v1.8H93.6v1.2h3.8v1.8H93.6v1.2h4.3v1.9H91.4ZM6.1,30.3a1.97548,1.97548,0,0,1-1.8,1.2,2.1025,2.1025,0,0,1,0-4.2,2.0977,2.0977,0,0,1,1.9,1.3H8.5a4.13459,4.13459,0,0,0-4.2-3.3A4.1651,4.1651,0,0,0,0,29.4a4.07888,4.07888,0,0,0,4.2,4.1,4.31812,4.31812,0,0,0,4.2-3.2Z", O = "M84.2,20.4a2.85546,2.85546,0,0,0-.3-2.6,3.09428,3.09428,0,0,0-2.1-1.1l-17.4-.2c-.1,0-.2-.1-.3-.1a.1875.1875,0,0,1,0-.3c.1-.2.2-.3.4-.3L82,15.6a6.29223,6.29223,0,0,0,5.1-3.8l1-2.6c0-.1.1-.2,0-.3A11.39646,11.39646,0,0,0,66.2,7.7a5.45941,5.45941,0,0,0-3.6-1A5.20936,5.20936,0,0,0,58,11.3a5.46262,5.46262,0,0,0,.1,1.8A7.30177,7.30177,0,0,0,51,20.4a4.102,4.102,0,0,0,.1,1.1.3193.3193,0,0,0,.3.3H83.5c.2,0,.4-.1.4-.3Z", _ = "M89.7,9.2h-.5c-.1,0-.2.1-.3.2l-.7,2.4a2.85546,2.85546,0,0,0,.3,2.6,3.09428,3.09428,0,0,0,2.1,1.1l3.7.2c.1,0,.2.1.3.1a.1875.1875,0,0,1,0,.3c-.1.2-.2.3-.4.3l-3.8.2a6.29223,6.29223,0,0,0-5.1,3.8l-.2.9c-.1.1,0,.3.2.3H98.5a.26517.26517,0,0,0,.3-.3,10.87184,10.87184,0,0,0,.4-2.6,9.56045,9.56045,0,0,0-9.5-9.5", d = "0 0 49 22", g = "0 0 101.4 33.5", k = {
|
|
6
6
|
variant: {
|
|
7
7
|
glyph: {
|
|
@@ -32,7 +32,7 @@ const m = "#F48120", v = "#FAAD3F", w = "#404041", p = "M33.204 20.4C33.3649 19.
|
|
|
32
32
|
className: a,
|
|
33
33
|
...e
|
|
34
34
|
}, C) => {
|
|
35
|
-
const r = o === "glyph", c = l === "color" ? m : "currentColor",
|
|
35
|
+
const r = o === "glyph", c = l === "color" ? m : "currentColor", n = l === "color" ? v : "currentColor", H = "currentColor";
|
|
36
36
|
return r ? /* @__PURE__ */ h(
|
|
37
37
|
"svg",
|
|
38
38
|
{
|
|
@@ -42,7 +42,7 @@ const m = "#F48120", v = "#FAAD3F", w = "#404041", p = "M33.204 20.4C33.3649 19.
|
|
|
42
42
|
xmlns: "http://www.w3.org/2000/svg",
|
|
43
43
|
role: "img",
|
|
44
44
|
"aria-label": "Cloudflare logo",
|
|
45
|
-
className:
|
|
45
|
+
className: i(
|
|
46
46
|
l === "white" && "text-white",
|
|
47
47
|
l === "black" && "text-black",
|
|
48
48
|
a
|
|
@@ -60,7 +60,7 @@ const m = "#F48120", v = "#FAAD3F", w = "#404041", p = "M33.204 20.4C33.3649 19.
|
|
|
60
60
|
"path",
|
|
61
61
|
{
|
|
62
62
|
d: "M38.704 9.20002H38.204C38.104 9.20002 38.004 9.30001 37.904 9.40001L37.204 11.8C37.0431 12.2259 36.9864 12.6841 37.0386 13.1364C37.0908 13.5887 37.2504 14.0219 37.504 14.4C37.7646 14.7124 38.0842 14.9704 38.4445 15.1591C38.8049 15.3479 39.1989 15.4637 39.604 15.5L43.304 15.7C43.404 15.7 43.504 15.8 43.604 15.8C43.6273 15.8175 43.6462 15.8401 43.6592 15.8662C43.6723 15.8922 43.679 15.9209 43.679 15.95C43.679 15.9791 43.6723 16.0078 43.6592 16.0339C43.6462 16.0599 43.6273 16.0826 43.604 16.1C43.504 16.3 43.404 16.4 43.204 16.4L39.404 16.6C38.293 16.7233 37.2349 17.1403 36.3386 17.8082C35.4422 18.4761 34.74 19.3707 34.304 20.4L34.104 21.3C34.004 21.4 34.104 21.6 34.304 21.6H47.504C47.5448 21.6058 47.5863 21.6021 47.6254 21.5891C47.6644 21.5761 47.6999 21.5541 47.729 21.525C47.7581 21.4959 47.7801 21.4604 47.7931 21.4214C47.8061 21.3823 47.8099 21.3408 47.804 21.3C48.0421 20.4527 48.1764 19.5797 48.204 18.7C48.1882 16.1854 47.1822 13.7782 45.404 12C43.6259 10.2218 41.2187 9.21587 38.704 9.20002Z",
|
|
63
|
-
fill:
|
|
63
|
+
fill: n
|
|
64
64
|
}
|
|
65
65
|
)
|
|
66
66
|
]
|
|
@@ -74,7 +74,7 @@ const m = "#F48120", v = "#FAAD3F", w = "#404041", p = "M33.204 20.4C33.3649 19.
|
|
|
74
74
|
xmlns: "http://www.w3.org/2000/svg",
|
|
75
75
|
role: "img",
|
|
76
76
|
"aria-label": "Cloudflare logo",
|
|
77
|
-
className:
|
|
77
|
+
className: i(
|
|
78
78
|
// Wordmark text color - respects dark mode
|
|
79
79
|
l === "color" && "text-kumo-default",
|
|
80
80
|
l === "white" && "text-white",
|
|
@@ -94,7 +94,7 @@ const m = "#F48120", v = "#FAAD3F", w = "#404041", p = "M33.204 20.4C33.3649 19.
|
|
|
94
94
|
"path",
|
|
95
95
|
{
|
|
96
96
|
d: "M89.7,9.2h-.5c-.1,0-.2.1-.3.2l-.7,2.4a2.85546,2.85546,0,0,0,.3,2.6,3.09428,3.09428,0,0,0,2.1,1.1l3.7.2c.1,0,.2.1.3.1a.1875.1875,0,0,1,0,.3c-.1.2-.2.3-.4.3l-3.8.2a6.29223,6.29223,0,0,0-5.1,3.8l-.2.9c-.1.1,0,.3.2.3H98.5a.26517.26517,0,0,0,.3-.3,10.87184,10.87184,0,0,0,.4-2.6,9.56045,9.56045,0,0,0-9.5-9.5",
|
|
97
|
-
fill:
|
|
97
|
+
fill: n
|
|
98
98
|
}
|
|
99
99
|
),
|
|
100
100
|
/* @__PURE__ */ t(
|
|
@@ -123,12 +123,12 @@ const Z = L(
|
|
|
123
123
|
href: l,
|
|
124
124
|
target: "_blank",
|
|
125
125
|
rel: "noopener noreferrer",
|
|
126
|
-
className:
|
|
126
|
+
className: i(
|
|
127
127
|
// Base badge styles
|
|
128
128
|
"inline-flex items-center gap-2 rounded-lg py-2 pl-2.5 pr-3 text-sm font-medium",
|
|
129
129
|
"ring-1 ring-inset transition-all hover:shadow-sm",
|
|
130
130
|
// Color variants using semantic tokens
|
|
131
|
-
o === "color" && "bg-kumo-base text-kumo-default ring-kumo-
|
|
131
|
+
o === "color" && "bg-kumo-base text-kumo-default ring-kumo-hairline",
|
|
132
132
|
o === "black" && "bg-white text-black ring-black/20",
|
|
133
133
|
o === "white" && "bg-black text-white ring-white/20",
|
|
134
134
|
a
|
|
@@ -163,4 +163,4 @@ export {
|
|
|
163
163
|
s as a,
|
|
164
164
|
R as g
|
|
165
165
|
};
|
|
166
|
-
//# sourceMappingURL=cloudflare-logo-
|
|
166
|
+
//# sourceMappingURL=cloudflare-logo-pbavoe1wu8nr5c4n.js.map
|