@cloudflare/kumo 1.5.1 → 1.6.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 +52 -3
- package/ai/component-registry.md +291 -2
- package/ai/schemas.ts +11 -2
- package/dist/.build-complete +1 -1
- package/dist/ai/schemas.d.ts +24 -5
- package/dist/ai/schemas.d.ts.map +1 -1
- package/dist/catalog.js +1 -1
- package/dist/{checkbox-CWANiedi.js → checkbox-Dt8iSNOg.js} +3 -3
- package/dist/{checkbox-CWANiedi.js.map → checkbox-Dt8iSNOg.js.map} +1 -1
- package/dist/clipboard-text-Bw5rKPXz.js +185 -0
- package/dist/clipboard-text-Bw5rKPXz.js.map +1 -0
- package/dist/{combobox-C9koouxM.js → combobox-BIC-YZ2L.js} +41 -41
- package/dist/combobox-BIC-YZ2L.js.map +1 -0
- package/dist/command-line/cli.js +88 -30
- package/dist/command-line/commands/add.js +88 -30
- package/dist/{command-palette-TGXgr6Vq.js → command-palette-D3MNR7w9.js} +31 -31
- package/dist/{command-palette-TGXgr6Vq.js.map → command-palette-D3MNR7w9.js.map} +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/clipboard-text.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/command-palette.js +1 -1
- package/dist/components/date-picker.js +6 -0
- package/dist/components/date-picker.js.map +1 -0
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/input.js +3 -3
- package/dist/components/label.js +1 -1
- package/dist/components/link.js +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/meter.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sensitive-input.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/toast.js +2 -2
- package/dist/components/tooltip.js +1 -1
- package/dist/date-picker-M6uNX5Ca.js +2921 -0
- package/dist/date-picker-M6uNX5Ca.js.map +1 -0
- package/dist/{dialog-CpCeOqSZ.js → dialog-toS9krNF.js} +17 -17
- package/dist/dialog-toS9krNF.js.map +1 -0
- package/dist/{dropdown-DFeFcKfn.js → dropdown-BquiYKKC.js} +38 -38
- package/dist/dropdown-BquiYKKC.js.map +1 -0
- package/dist/{field-Dt-XuSaQ.js → field-DCq04TgZ.js} +3 -3
- package/dist/{field-Dt-XuSaQ.js.map → field-DCq04TgZ.js.map} +1 -1
- package/dist/index.js +51 -49
- package/dist/index.js.map +1 -1
- package/dist/{input-GZAWBXYX.js → input-CCR8NGG7.js} +3 -3
- package/dist/{input-GZAWBXYX.js.map → input-CCR8NGG7.js.map} +1 -1
- package/dist/{input-area-CS1-ceY4.js → input-area-DU2Yvp_t.js} +3 -3
- package/dist/{input-area-CS1-ceY4.js.map → input-area-DU2Yvp_t.js.map} +1 -1
- package/dist/{input-group-COo-wz5O.js → input-group-C365-qBq.js} +2 -2
- package/dist/{input-group-COo-wz5O.js.map → input-group-C365-qBq.js.map} +1 -1
- package/dist/{label-ChZ2Pp5p.js → label-zjtV7oXa.js} +2 -2
- package/dist/{label-ChZ2Pp5p.js.map → label-zjtV7oXa.js.map} +1 -1
- package/dist/{link-Mj2WM1AS.js → link-C8pUZ4Q-.js} +8 -8
- package/dist/{link-Mj2WM1AS.js.map → link-C8pUZ4Q-.js.map} +1 -1
- package/dist/{menubar-CbXWXQYR.js → menubar-D7WvAf6x.js} +6 -6
- package/dist/menubar-D7WvAf6x.js.map +1 -0
- package/dist/{meter-Bu5f3mAc.js → meter-jQGKS1z4.js} +4 -4
- package/dist/{meter-Bu5f3mAc.js.map → meter-jQGKS1z4.js.map} +1 -1
- package/dist/{pagination-Cf-yRO-n.js → pagination-BN80iKY6.js} +2 -2
- package/dist/{pagination-Cf-yRO-n.js.map → pagination-BN80iKY6.js.map} +1 -1
- package/dist/{popover-D7yeRosi.js → popover-syU1104E.js} +4 -4
- package/dist/{popover-D7yeRosi.js.map → popover-syU1104E.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/dialog.js +1 -1
- package/dist/primitives/direction-provider.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/{radio-CKn09bGo.js → radio-CWMtSx65.js} +8 -8
- package/dist/{radio-CKn09bGo.js.map → radio-CWMtSx65.js.map} +1 -1
- package/dist/{schemas-H10xB2M_.js → schemas-DbIwo0ET.js} +251 -239
- package/dist/{schemas-H10xB2M_.js.map → schemas-DbIwo0ET.js.map} +1 -1
- package/dist/{select-DvpgiOau.js → select-G6JqBVkg.js} +37 -37
- package/dist/{select-DvpgiOau.js.map → select-G6JqBVkg.js.map} +1 -1
- package/dist/{sensitive-input-BuYT6U6C.js → sensitive-input-DNFpycoy.js} +4 -4
- package/dist/{sensitive-input-BuYT6U6C.js.map → sensitive-input-DNFpycoy.js.map} +1 -1
- package/dist/src/command-line/utils/transformer.d.ts +8 -4
- package/dist/src/command-line/utils/transformer.d.ts.map +1 -1
- package/dist/src/components/clipboard-text/clipboard-text.d.ts +23 -0
- package/dist/src/components/clipboard-text/clipboard-text.d.ts.map +1 -1
- package/dist/src/components/date-picker/date-picker.d.ts +65 -0
- package/dist/src/components/date-picker/date-picker.d.ts.map +1 -0
- package/dist/src/components/date-picker/index.d.ts +4 -0
- package/dist/src/components/date-picker/index.d.ts.map +1 -0
- package/dist/src/components/dropdown/dropdown.d.ts.map +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/styles/kumo-binding.css +0 -4
- package/dist/styles/kumo-standalone.css +1 -1
- package/dist/styles/kumo.css +541 -0
- package/dist/{switch-Tu34uFoa.js → switch-CmsZ4z-g.js} +9 -9
- package/dist/{switch-Tu34uFoa.js.map → switch-CmsZ4z-g.js.map} +1 -1
- package/dist/{table-DtUrZ2Rj.js → table-Dc0AGcLV.js} +2 -2
- package/dist/{table-DtUrZ2Rj.js.map → table-Dc0AGcLV.js.map} +1 -1
- package/dist/{tabs-B7THfqHW.js → tabs-BpD1iUiz.js} +2 -2
- package/dist/{tabs-B7THfqHW.js.map → tabs-BpD1iUiz.js.map} +1 -1
- package/dist/{toast-Du4y8qng.js → toast-BrR0pjLE.js} +8 -8
- package/dist/{toast-Du4y8qng.js.map → toast-BrR0pjLE.js.map} +1 -1
- package/dist/{tooltip-BxV1H6AV.js → tooltip-daVJYtXY.js} +2 -2
- package/dist/{tooltip-BxV1H6AV.js.map → tooltip-daVJYtXY.js.map} +1 -1
- package/dist/{vendor-base-ui-CQ6wEonS.js → vendor-base-ui-9w7J6BvW.js} +7246 -7245
- package/dist/{vendor-base-ui-CQ6wEonS.js.map → vendor-base-ui-9w7J6BvW.js.map} +1 -1
- package/package.json +6 -1
- package/scripts/component-registry/discovery.ts +1 -7
- package/dist/clipboard-text-B32_yb2r.js +0 -108
- package/dist/clipboard-text-B32_yb2r.js.map +0 -1
- package/dist/combobox-C9koouxM.js.map +0 -1
- package/dist/dialog-CpCeOqSZ.js.map +0 -1
- package/dist/dropdown-DFeFcKfn.js.map +0 -1
- package/dist/menubar-CbXWXQYR.js.map +0 -1
package/dist/ai/schemas.d.ts
CHANGED
|
@@ -201,6 +201,8 @@ export declare const ClipboardTextPropsSchema: z.ZodObject<{
|
|
|
201
201
|
}>>;
|
|
202
202
|
text: z.ZodString;
|
|
203
203
|
className: z.ZodOptional<z.ZodString>;
|
|
204
|
+
tooltip: z.ZodOptional<z.ZodUnknown>;
|
|
205
|
+
labels: z.ZodOptional<z.ZodUnknown>;
|
|
204
206
|
}, z.core.$strip>;
|
|
205
207
|
export declare const CloudflareLogoPropsSchema: z.ZodObject<{
|
|
206
208
|
children: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodNull, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodNull, z.ZodObject<{
|
|
@@ -582,6 +584,12 @@ export declare const CommandPalettePropsSchema: z.ZodObject<{
|
|
|
582
584
|
path: z.ZodString;
|
|
583
585
|
}, z.core.$strip>]>]>>;
|
|
584
586
|
}, z.core.$strip>;
|
|
587
|
+
export declare const DatePickerPropsSchema: z.ZodObject<{
|
|
588
|
+
className: z.ZodOptional<z.ZodString>;
|
|
589
|
+
children: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodNull, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodNull, z.ZodObject<{
|
|
590
|
+
path: z.ZodString;
|
|
591
|
+
}, z.core.$strip>]>]>>;
|
|
592
|
+
}, z.core.$strip>;
|
|
585
593
|
export declare const DateRangePickerPropsSchema: z.ZodObject<{
|
|
586
594
|
size: z.ZodOptional<z.ZodEnum<{
|
|
587
595
|
base: "base";
|
|
@@ -1008,7 +1016,7 @@ export declare const TooltipPropsSchema: z.ZodObject<{
|
|
|
1008
1016
|
/**
|
|
1009
1017
|
* All valid component type names
|
|
1010
1018
|
*/
|
|
1011
|
-
export type KumoComponentType = "Badge" | "Banner" | "Breadcrumbs" | "Button" | "Checkbox" | "ClipboardText" | "CloudflareLogo" | "Code" | "Collapsible" | "Combobox" | "CommandPalette" | "DateRangePicker" | "Dialog" | "DropdownMenu" | "Empty" | "Field" | "Grid" | "Input" | "InputArea" | "Label" | "LayerCard" | "Link" | "Loader" | "MenuBar" | "Meter" | "Pagination" | "Popover" | "Radio" | "Select" | "SensitiveInput" | "Surface" | "Switch" | "Table" | "Tabs" | "Text" | "Toasty" | "Tooltip";
|
|
1019
|
+
export type KumoComponentType = "Badge" | "Banner" | "Breadcrumbs" | "Button" | "Checkbox" | "ClipboardText" | "CloudflareLogo" | "Code" | "Collapsible" | "Combobox" | "CommandPalette" | "DatePicker" | "DateRangePicker" | "Dialog" | "DropdownMenu" | "Empty" | "Field" | "Grid" | "Input" | "InputArea" | "Label" | "LayerCard" | "Link" | "Loader" | "MenuBar" | "Meter" | "Pagination" | "Popover" | "Radio" | "Select" | "SensitiveInput" | "Surface" | "Switch" | "Table" | "Tabs" | "Text" | "Toasty" | "Tooltip";
|
|
1012
1020
|
export declare const KumoComponentTypeSchema: z.ZodEnum<{
|
|
1013
1021
|
Button: "Button";
|
|
1014
1022
|
Label: "Label";
|
|
@@ -1025,6 +1033,8 @@ export declare const KumoComponentTypeSchema: z.ZodEnum<{
|
|
|
1025
1033
|
Link: "Link";
|
|
1026
1034
|
Grid: "Grid";
|
|
1027
1035
|
CloudflareLogo: "CloudflareLogo";
|
|
1036
|
+
DatePicker: "DatePicker";
|
|
1037
|
+
Select: "Select";
|
|
1028
1038
|
Badge: "Badge";
|
|
1029
1039
|
Banner: "Banner";
|
|
1030
1040
|
Breadcrumbs: "Breadcrumbs";
|
|
@@ -1041,7 +1051,6 @@ export declare const KumoComponentTypeSchema: z.ZodEnum<{
|
|
|
1041
1051
|
Meter: "Meter";
|
|
1042
1052
|
Pagination: "Pagination";
|
|
1043
1053
|
Radio: "Radio";
|
|
1044
|
-
Select: "Select";
|
|
1045
1054
|
Surface: "Surface";
|
|
1046
1055
|
Tabs: "Tabs";
|
|
1047
1056
|
Text: "Text";
|
|
@@ -1158,6 +1167,8 @@ export declare const ComponentPropsSchemas: {
|
|
|
1158
1167
|
}>>;
|
|
1159
1168
|
text: z.ZodString;
|
|
1160
1169
|
className: z.ZodOptional<z.ZodString>;
|
|
1170
|
+
tooltip: z.ZodOptional<z.ZodUnknown>;
|
|
1171
|
+
labels: z.ZodOptional<z.ZodUnknown>;
|
|
1161
1172
|
}, z.core.$strip>;
|
|
1162
1173
|
readonly CloudflareLogo: z.ZodObject<{
|
|
1163
1174
|
children: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodNull, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodNull, z.ZodObject<{
|
|
@@ -1539,6 +1550,12 @@ export declare const ComponentPropsSchemas: {
|
|
|
1539
1550
|
path: z.ZodString;
|
|
1540
1551
|
}, z.core.$strip>]>]>>;
|
|
1541
1552
|
}, z.core.$strip>;
|
|
1553
|
+
readonly DatePicker: z.ZodObject<{
|
|
1554
|
+
className: z.ZodOptional<z.ZodString>;
|
|
1555
|
+
children: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodNull, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodNull, z.ZodObject<{
|
|
1556
|
+
path: z.ZodString;
|
|
1557
|
+
}, z.core.$strip>]>]>>;
|
|
1558
|
+
}, z.core.$strip>;
|
|
1542
1559
|
readonly DateRangePicker: z.ZodObject<{
|
|
1543
1560
|
size: z.ZodOptional<z.ZodEnum<{
|
|
1544
1561
|
base: "base";
|
|
@@ -1984,6 +2001,8 @@ export declare const UIElementBaseSchema: z.ZodObject<{
|
|
|
1984
2001
|
Link: "Link";
|
|
1985
2002
|
Grid: "Grid";
|
|
1986
2003
|
CloudflareLogo: "CloudflareLogo";
|
|
2004
|
+
DatePicker: "DatePicker";
|
|
2005
|
+
Select: "Select";
|
|
1987
2006
|
Badge: "Badge";
|
|
1988
2007
|
Banner: "Banner";
|
|
1989
2008
|
Breadcrumbs: "Breadcrumbs";
|
|
@@ -2000,7 +2019,6 @@ export declare const UIElementBaseSchema: z.ZodObject<{
|
|
|
2000
2019
|
Meter: "Meter";
|
|
2001
2020
|
Pagination: "Pagination";
|
|
2002
2021
|
Radio: "Radio";
|
|
2003
|
-
Select: "Select";
|
|
2004
2022
|
Surface: "Surface";
|
|
2005
2023
|
Tabs: "Tabs";
|
|
2006
2024
|
Text: "Text";
|
|
@@ -2069,6 +2087,8 @@ export declare const UITreeSchema: z.ZodObject<{
|
|
|
2069
2087
|
Link: "Link";
|
|
2070
2088
|
Grid: "Grid";
|
|
2071
2089
|
CloudflareLogo: "CloudflareLogo";
|
|
2090
|
+
DatePicker: "DatePicker";
|
|
2091
|
+
Select: "Select";
|
|
2072
2092
|
Badge: "Badge";
|
|
2073
2093
|
Banner: "Banner";
|
|
2074
2094
|
Breadcrumbs: "Breadcrumbs";
|
|
@@ -2085,7 +2105,6 @@ export declare const UITreeSchema: z.ZodObject<{
|
|
|
2085
2105
|
Meter: "Meter";
|
|
2086
2106
|
Pagination: "Pagination";
|
|
2087
2107
|
Radio: "Radio";
|
|
2088
|
-
Select: "Select";
|
|
2089
2108
|
Surface: "Surface";
|
|
2090
2109
|
Tabs: "Tabs";
|
|
2091
2110
|
Text: "Text";
|
|
@@ -2143,5 +2162,5 @@ export declare function validateUITree(tree: unknown): SafeParseResult<UITree>;
|
|
|
2143
2162
|
/**
|
|
2144
2163
|
* List of all component names (for catalog generation)
|
|
2145
2164
|
*/
|
|
2146
|
-
export declare const KUMO_COMPONENT_NAMES: readonly ["Badge", "Banner", "Breadcrumbs", "Button", "Checkbox", "ClipboardText", "CloudflareLogo", "Code", "Collapsible", "Combobox", "CommandPalette", "DateRangePicker", "Dialog", "DropdownMenu", "Empty", "Field", "Grid", "Input", "InputArea", "Label", "LayerCard", "Link", "Loader", "MenuBar", "Meter", "Pagination", "Popover", "Radio", "Select", "SensitiveInput", "Surface", "Switch", "Table", "Tabs", "Text", "Toasty", "Tooltip"];
|
|
2165
|
+
export declare const KUMO_COMPONENT_NAMES: readonly ["Badge", "Banner", "Breadcrumbs", "Button", "Checkbox", "ClipboardText", "CloudflareLogo", "Code", "Collapsible", "Combobox", "CommandPalette", "DatePicker", "DateRangePicker", "Dialog", "DropdownMenu", "Empty", "Field", "Grid", "Input", "InputArea", "Label", "LayerCard", "Link", "Loader", "MenuBar", "Meter", "Pagination", "Popover", "Radio", "Select", "SensitiveInput", "Surface", "Switch", "Table", "Tabs", "Text", "Toasty", "Tooltip"];
|
|
2147
2166
|
//# sourceMappingURL=schemas.d.ts.map
|
package/dist/ai/schemas.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schemas.d.ts","sourceRoot":"","sources":["../../ai/schemas.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,eAAe,CAAC,CAAC,IACzB;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACzC;IAAE,OAAO,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAM7D;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;mBAM7B,CAAC;AAEH,MAAM,MAAM,YAAY,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAM7D;;;GAGG;AAIH,MAAM,MAAM,eAAe,GACvB;IAAE,GAAG,EAAE,eAAe,EAAE,CAAA;CAAE,GAC1B;IAAE,EAAE,EAAE,eAAe,EAAE,CAAA;CAAE,GACzB;IAAE,GAAG,EAAE,eAAe,CAAA;CAAE,GACxB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,EAAE,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CAAE,GACpC;IAAE,GAAG,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CAAE,GACrC;IAAE,EAAE,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CAAE,GACpC;IAAE,GAAG,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CAAE,GACrC;IAAE,EAAE,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CAAE,GACpC;IAAE,GAAG,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;CAAE,CAAC;AAkB1C,eAAO,MAAM,yBAAyB;;;;;;;4GAKpC,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAM5E;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;iBAM9B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;iBAMvB,CAAC;AAEH,MAAM,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAMlD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;iBAI3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;iBAM5B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;iBAIjC,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAe5B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;iBAY9B,CAAC;AAEH,eAAO,MAAM,wBAAwB
|
|
1
|
+
{"version":3,"file":"schemas.d.ts","sourceRoot":"","sources":["../../ai/schemas.ts"],"names":[],"mappings":"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"}
|
package/dist/catalog.js
CHANGED
|
@@ -3,8 +3,8 @@ import { jsx as e, jsxs as C } from "react/jsx-runtime";
|
|
|
3
3
|
import { forwardRef as y, createContext as F, useContext as K } from "react";
|
|
4
4
|
import { MinusIcon as w, CheckIcon as j } from "@phosphor-icons/react";
|
|
5
5
|
import { c as g } from "./cn-Bhsu1vx2.js";
|
|
6
|
-
import { L as E } from "./label-
|
|
7
|
-
import { H as I, J as L, K as R, L as _, C as G, N as D, O as H } from "./vendor-base-ui-
|
|
6
|
+
import { L as E } from "./label-zjtV7oXa.js";
|
|
7
|
+
import { H as I, J as L, K as R, L as _, C as G, N as D, O as H } from "./vendor-base-ui-9w7J6BvW.js";
|
|
8
8
|
const J = {
|
|
9
9
|
variant: {
|
|
10
10
|
default: {
|
|
@@ -221,4 +221,4 @@ export {
|
|
|
221
221
|
J as K,
|
|
222
222
|
W as a
|
|
223
223
|
};
|
|
224
|
-
//# sourceMappingURL=checkbox-
|
|
224
|
+
//# sourceMappingURL=checkbox-Dt8iSNOg.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-CWANiedi.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: \"[&:focus-within>span]:ring-kumo-ring [&:hover>span]:ring-kumo-ring\",\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 \"flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n !disabled && \"hover:ring-kumo-ring focus-visible:ring-kumo-ring\",\n \"data-[checked]:bg-kumo-contrast data-[indeterminate]:bg-kumo-contrast\",\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n {...props}\n >\n <BaseCheckbox.Indicator\n className=\"flex items-center justify-center text-kumo-inverse\"\n render={(renderProps, state) => {\n const Icon = state.indeterminate ? MinusIcon : CheckIcon;\n return (\n <span {...renderProps}>\n {(state.checked || state.indeterminate) && (\n <Icon weight=\"bold\" size={12} />\n )}\n </span>\n );\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 \"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 \"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 flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n !disabled &&\n \"group-hover:ring-kumo-ring hover:ring-kumo-ring focus-visible:ring-kumo-ring\",\n \"data-[checked]:bg-kumo-contrast data-[indeterminate]:bg-kumo-contrast\",\n )}\n >\n <BaseCheckbox.Indicator\n className=\"flex items-center justify-center text-kumo-inverse\"\n render={(props, state) => {\n const Icon = state.indeterminate ? MinusIcon : CheckIcon;\n return (\n <span {...props}>\n {(state.checked || state.indeterminate) && (\n <Icon weight=\"bold\" size={12} />\n )}\n </span>\n );\n }}\n />\n </BaseCheckbox.Root>\n <span className=\"text-base font-medium 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\n className={cn(\n \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n className,\n )}\n >\n <Fieldset.Legend className=\"text-lg font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n <div className=\"flex flex-col gap-2\">{children}</div>\n {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n {description && <p className=\"text-sm text-kumo-subtle\">{description}</p>}\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","Icon","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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"}
|
|
1
|
+
{"version":3,"file":"checkbox-Dt8iSNOg.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: \"[&:focus-within>span]:ring-kumo-ring [&:hover>span]:ring-kumo-ring\",\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 \"flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n !disabled && \"hover:ring-kumo-ring focus-visible:ring-kumo-ring\",\n \"data-[checked]:bg-kumo-contrast data-[indeterminate]:bg-kumo-contrast\",\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n {...props}\n >\n <BaseCheckbox.Indicator\n className=\"flex items-center justify-center text-kumo-inverse\"\n render={(renderProps, state) => {\n const Icon = state.indeterminate ? MinusIcon : CheckIcon;\n return (\n <span {...renderProps}>\n {(state.checked || state.indeterminate) && (\n <Icon weight=\"bold\" size={12} />\n )}\n </span>\n );\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 \"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 \"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 flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n !disabled &&\n \"group-hover:ring-kumo-ring hover:ring-kumo-ring focus-visible:ring-kumo-ring\",\n \"data-[checked]:bg-kumo-contrast data-[indeterminate]:bg-kumo-contrast\",\n )}\n >\n <BaseCheckbox.Indicator\n className=\"flex items-center justify-center text-kumo-inverse\"\n render={(props, state) => {\n const Icon = state.indeterminate ? MinusIcon : CheckIcon;\n return (\n <span {...props}>\n {(state.checked || state.indeterminate) && (\n <Icon weight=\"bold\" size={12} />\n )}\n </span>\n );\n }}\n />\n </BaseCheckbox.Root>\n <span className=\"text-base font-medium 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\n className={cn(\n \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n className,\n )}\n >\n <Fieldset.Legend className=\"text-lg font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n <div className=\"flex flex-col gap-2\">{children}</div>\n {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n {description && <p className=\"text-sm text-kumo-subtle\">{description}</p>}\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","Icon","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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"}
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as c, jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import { CheckIcon as N, CopyIcon as R } from "@phosphor-icons/react";
|
|
4
|
+
import { forwardRef as A, useState as S, useRef as P, useCallback as _ } from "react";
|
|
5
|
+
import { B as I } from "./button-Bh96oxRL.js";
|
|
6
|
+
import { i as O } from "./input-CCR8NGG7.js";
|
|
7
|
+
import { c as a } from "./cn-Bhsu1vx2.js";
|
|
8
|
+
import { P as M, Q as V, U as j, V as B, W as U, X as D, Y as E, Z as L, _ as X, $ as K, a0 as W, a1 as F, a2 as Q } from "./vendor-base-ui-9w7J6BvW.js";
|
|
9
|
+
const h = M(), y = {
|
|
10
|
+
size: {
|
|
11
|
+
sm: {
|
|
12
|
+
classes: "text-xs",
|
|
13
|
+
buttonSize: "sm",
|
|
14
|
+
description: "Small clipboard text for compact UIs"
|
|
15
|
+
},
|
|
16
|
+
base: {
|
|
17
|
+
classes: "text-sm",
|
|
18
|
+
buttonSize: "base",
|
|
19
|
+
description: "Default clipboard text size"
|
|
20
|
+
},
|
|
21
|
+
lg: {
|
|
22
|
+
classes: "text-sm",
|
|
23
|
+
buttonSize: "lg",
|
|
24
|
+
description: "Large clipboard text for prominent display"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}, C = {
|
|
28
|
+
size: "lg"
|
|
29
|
+
}, l = {
|
|
30
|
+
slide: {
|
|
31
|
+
initial: "pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 translate-y-full",
|
|
32
|
+
animate: "translate-y-0 opacity-100",
|
|
33
|
+
end: "pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full"
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
function Y({
|
|
37
|
+
size: t = C.size
|
|
38
|
+
} = {}) {
|
|
39
|
+
return a(
|
|
40
|
+
// Base styles
|
|
41
|
+
"flex items-center overflow-hidden bg-kumo-base px-0 font-mono",
|
|
42
|
+
// Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS
|
|
43
|
+
y.size[t].classes
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
function Z() {
|
|
47
|
+
const { toasts: t } = X();
|
|
48
|
+
return /* @__PURE__ */ e(K, { className: "pointer-events-none fixed inset-0 z-50", children: t.map((s) => /* @__PURE__ */ e(W, { toast: s, className: "absolute", children: /* @__PURE__ */ e(
|
|
49
|
+
F,
|
|
50
|
+
{
|
|
51
|
+
toast: s,
|
|
52
|
+
className: a(
|
|
53
|
+
"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans",
|
|
54
|
+
"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill"
|
|
55
|
+
),
|
|
56
|
+
children: /* @__PURE__ */ e(Q, {})
|
|
57
|
+
}
|
|
58
|
+
) }, s.id)) });
|
|
59
|
+
}
|
|
60
|
+
function $({ children: t }) {
|
|
61
|
+
return /* @__PURE__ */ e(E, { children: /* @__PURE__ */ c(L, { toastManager: h, children: [
|
|
62
|
+
/* @__PURE__ */ e(Z, {}),
|
|
63
|
+
t
|
|
64
|
+
] }) });
|
|
65
|
+
}
|
|
66
|
+
const q = A(
|
|
67
|
+
({
|
|
68
|
+
text: t,
|
|
69
|
+
className: s,
|
|
70
|
+
size: m = C.size,
|
|
71
|
+
onCopy: f,
|
|
72
|
+
tooltip: n,
|
|
73
|
+
labels: { copyAction: v = "Copy to clipboard" } = {}
|
|
74
|
+
}, w) => {
|
|
75
|
+
const [r, d] = S(!1), b = P(null), x = y.size[m], {
|
|
76
|
+
text: z = "Copy",
|
|
77
|
+
copiedText: p = "Copied",
|
|
78
|
+
side: u = "top"
|
|
79
|
+
} = n ?? {}, k = _(async () => {
|
|
80
|
+
try {
|
|
81
|
+
if (typeof navigator < "u" && navigator.clipboard && typeof navigator.clipboard.writeText == "function")
|
|
82
|
+
await navigator.clipboard.writeText(t);
|
|
83
|
+
else if (typeof document < "u") {
|
|
84
|
+
const o = document.createElement("textarea");
|
|
85
|
+
o.value = t, o.setAttribute("readonly", ""), o.style.position = "absolute", o.style.left = "-9999px", document.body.appendChild(o);
|
|
86
|
+
const i = document.getSelection(), T = i?.rangeCount ? i.getRangeAt(0) : null;
|
|
87
|
+
o.select();
|
|
88
|
+
try {
|
|
89
|
+
document.execCommand("copy");
|
|
90
|
+
} finally {
|
|
91
|
+
document.body.removeChild(o), T && (i?.removeAllRanges(), i?.addRange(T));
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
d(!0), n ? h.add({
|
|
95
|
+
description: p,
|
|
96
|
+
positionerProps: {
|
|
97
|
+
anchor: b.current,
|
|
98
|
+
side: u,
|
|
99
|
+
sideOffset: 8
|
|
100
|
+
},
|
|
101
|
+
timeout: 1500,
|
|
102
|
+
onClose() {
|
|
103
|
+
d(!1);
|
|
104
|
+
}
|
|
105
|
+
}) : setTimeout(() => d(!1), 1500), f?.();
|
|
106
|
+
} catch (o) {
|
|
107
|
+
console.warn("Clipboard copy failed", o);
|
|
108
|
+
}
|
|
109
|
+
}, [t, f, n, p, u]), g = /* @__PURE__ */ c(
|
|
110
|
+
I,
|
|
111
|
+
{
|
|
112
|
+
ref: b,
|
|
113
|
+
size: x.buttonSize,
|
|
114
|
+
variant: "ghost",
|
|
115
|
+
className: "rounded-none border-l! border-kumo-line! px-3 relative overflow-hidden transition-all duration-200",
|
|
116
|
+
onClick: k,
|
|
117
|
+
"aria-label": v,
|
|
118
|
+
children: [
|
|
119
|
+
/* @__PURE__ */ e(
|
|
120
|
+
"span",
|
|
121
|
+
{
|
|
122
|
+
className: a(
|
|
123
|
+
"flex items-center gap-1 transition-all duration-200",
|
|
124
|
+
r ? l.slide.animate : l.slide.initial
|
|
125
|
+
),
|
|
126
|
+
children: /* @__PURE__ */ e(N, {})
|
|
127
|
+
}
|
|
128
|
+
),
|
|
129
|
+
/* @__PURE__ */ e(
|
|
130
|
+
"span",
|
|
131
|
+
{
|
|
132
|
+
className: a(
|
|
133
|
+
"flex items-center justify-center transition-all duration-200",
|
|
134
|
+
r ? l.slide.end : l.slide.animate
|
|
135
|
+
),
|
|
136
|
+
children: /* @__PURE__ */ e(R, {})
|
|
137
|
+
}
|
|
138
|
+
)
|
|
139
|
+
]
|
|
140
|
+
}
|
|
141
|
+
);
|
|
142
|
+
return /* @__PURE__ */ c(
|
|
143
|
+
"div",
|
|
144
|
+
{
|
|
145
|
+
ref: w,
|
|
146
|
+
className: a(
|
|
147
|
+
O({ size: x.buttonSize }),
|
|
148
|
+
Y({ size: m }),
|
|
149
|
+
s
|
|
150
|
+
),
|
|
151
|
+
children: [
|
|
152
|
+
/* @__PURE__ */ e("span", { className: "grow px-4", children: t }),
|
|
153
|
+
n ? /* @__PURE__ */ e($, { children: /* @__PURE__ */ c(
|
|
154
|
+
V,
|
|
155
|
+
{
|
|
156
|
+
disabled: r,
|
|
157
|
+
onOpenChange: (o, i) => {
|
|
158
|
+
i.reason === "trigger-press" && i.cancel();
|
|
159
|
+
},
|
|
160
|
+
children: [
|
|
161
|
+
/* @__PURE__ */ e(j, { render: g }),
|
|
162
|
+
/* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(U, { side: u, sideOffset: 8, children: /* @__PURE__ */ e(
|
|
163
|
+
D,
|
|
164
|
+
{
|
|
165
|
+
className: a(
|
|
166
|
+
"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default",
|
|
167
|
+
"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill"
|
|
168
|
+
),
|
|
169
|
+
children: z
|
|
170
|
+
}
|
|
171
|
+
) }) })
|
|
172
|
+
]
|
|
173
|
+
}
|
|
174
|
+
) }) : g,
|
|
175
|
+
/* @__PURE__ */ e("span", { className: "sr-only", "aria-live": "polite", children: r ? p : "" })
|
|
176
|
+
]
|
|
177
|
+
}
|
|
178
|
+
);
|
|
179
|
+
}
|
|
180
|
+
);
|
|
181
|
+
q.displayName = "ClipboardText";
|
|
182
|
+
export {
|
|
183
|
+
q as C
|
|
184
|
+
};
|
|
185
|
+
//# sourceMappingURL=clipboard-text-Bw5rKPXz.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"clipboard-text-Bw5rKPXz.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 /** 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 z-50\">\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 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(text);\n } else if (typeof document !== \"undefined\") {\n // Fallback for older browsers\n const textarea = document.createElement(\"textarea\");\n textarea.value = 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 px-4\">{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","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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"}
|