@cloudflare/kumo 2.0.2 → 2.0.3
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 +19 -0
- package/ai/component-registry.json +17 -3
- package/ai/component-registry.md +34 -4
- package/ai/schemas.ts +5 -2
- package/dist/.build-complete +1 -1
- package/dist/ai/schemas.d.ts +10 -4
- package/dist/ai/schemas.d.ts.map +1 -1
- package/dist/ai/schemas.js +510 -504
- package/dist/ai/schemas.js.map +1 -1
- package/dist/chunks/{autocomplete-48aq0d244bs2e8zv.js → autocomplete-ln55iimq2n2s5uex.js} +27 -26
- package/dist/chunks/autocomplete-ln55iimq2n2s5uex.js.map +1 -0
- package/dist/chunks/{badge-dan90i0rzy4pwa1j.js → badge-kqox9toi0sygfbno.js} +16 -16
- package/dist/chunks/badge-kqox9toi0sygfbno.js.map +1 -0
- package/dist/chunks/{banner-eiwcnk7ts21s3bnb.js → banner-eux4y8xaogjg64af.js} +32 -31
- package/dist/chunks/banner-eux4y8xaogjg64af.js.map +1 -0
- package/dist/chunks/{breadcrumbs-cxcwf2l1ki3ffg5d.js → breadcrumbs-do6uyvm4msqus0sz.js} +33 -32
- package/dist/chunks/breadcrumbs-do6uyvm4msqus0sz.js.map +1 -0
- package/dist/chunks/{button-6by9ntsa3nj553mq.js → button-dh366jtvswxj0fw3.js} +63 -62
- package/dist/chunks/button-dh366jtvswxj0fw3.js.map +1 -0
- package/dist/chunks/{checkbox-hvxfvhtx1qjo2mww.js → checkbox-cf2pwdupyjweg184.js} +2 -2
- package/dist/chunks/checkbox-cf2pwdupyjweg184.js.map +1 -0
- package/dist/chunks/{clipboard-text-hswydzx3iql369sd.js → clipboard-text-hn2uwdj4ozenezd5.js} +57 -56
- package/dist/chunks/clipboard-text-hn2uwdj4ozenezd5.js.map +1 -0
- package/dist/chunks/{code-f9v1ikwhekqw274q.js → code-bbnjm8vk9hxl129r.js} +20 -19
- package/dist/chunks/code-bbnjm8vk9hxl129r.js.map +1 -0
- package/dist/chunks/{combobox-fq36ye0hstote16x.js → combobox-fivcg1oorkmmmk78.js} +11 -10
- package/dist/chunks/combobox-fivcg1oorkmmmk78.js.map +1 -0
- package/dist/chunks/{command-palette-md65owxt5hv4rt9r.js → command-palette-kgiso245exdons4r.js} +2 -2
- package/dist/chunks/{command-palette-md65owxt5hv4rt9r.js.map → command-palette-kgiso245exdons4r.js.map} +1 -1
- package/dist/chunks/{dialog-k3f1fbam6nt96k8x.js → dialog-mqpvaidy0vnjwrfp.js} +16 -15
- package/dist/chunks/dialog-mqpvaidy0vnjwrfp.js.map +1 -0
- package/dist/chunks/{dropdown-zbax0zowy6m9zhmt.js → dropdown-gp5iptj1niq14lpv.js} +76 -75
- package/dist/chunks/dropdown-gp5iptj1niq14lpv.js.map +1 -0
- package/dist/chunks/{empty-b82oer7npkhtkx7k.js → empty-fr78te81o3qaj3in.js} +27 -26
- package/dist/chunks/empty-fr78te81o3qaj3in.js.map +1 -0
- package/dist/chunks/{field-c0wf94plit2gci59.js → field-dgf36p7cmz1crlnu.js} +2 -2
- package/dist/chunks/{field-c0wf94plit2gci59.js.map → field-dgf36p7cmz1crlnu.js.map} +1 -1
- package/dist/chunks/{grid-hj1ylz16p7g5uelh.js → grid-do93dv1rjggqxx7p.js} +30 -29
- package/dist/chunks/grid-do93dv1rjggqxx7p.js.map +1 -0
- package/dist/chunks/{input-ncfowphv81yq7fyy.js → input-2y9vg81trmamkb6k.js} +51 -50
- package/dist/chunks/input-2y9vg81trmamkb6k.js.map +1 -0
- package/dist/chunks/{input-area-bkyzu6f7gsck479h.js → input-area-i5wulip5pau3u6ss.js} +3 -3
- package/dist/chunks/{input-area-bkyzu6f7gsck479h.js.map → input-area-i5wulip5pau3u6ss.js.map} +1 -1
- package/dist/chunks/{input-group-bidweffa0zyg8gt0.js → input-group-bm9wxzovpvzn1c25.js} +4 -4
- package/dist/chunks/{input-group-bidweffa0zyg8gt0.js.map → input-group-bm9wxzovpvzn1c25.js.map} +1 -1
- package/dist/chunks/{label-c3h9i3y4wiccelt7.js → label-efa0uvb8zqyjwpc8.js} +2 -2
- package/dist/chunks/{label-c3h9i3y4wiccelt7.js.map → label-efa0uvb8zqyjwpc8.js.map} +1 -1
- package/dist/chunks/{link-kt74pxkud4olmcer.js → link-m9hlspftl34nseme.js} +28 -27
- package/dist/chunks/link-m9hlspftl34nseme.js.map +1 -0
- package/dist/chunks/{loader-hr2w7cpqeev3p3vl.js → loader-g8a6j76ue5nq0lr8.js} +15 -14
- package/dist/chunks/loader-g8a6j76ue5nq0lr8.js.map +1 -0
- package/dist/chunks/{pagination-jb3mncivbwsoi1se.js → pagination-fdmcwreb27eej9l3.js} +3 -3
- package/dist/chunks/pagination-fdmcwreb27eej9l3.js.map +1 -0
- package/dist/chunks/{radio-datzh3pilz8ojak1.js → radio-f95mt237ru8fyc03.js} +44 -43
- package/dist/chunks/radio-f95mt237ru8fyc03.js.map +1 -0
- package/dist/chunks/resolve-variant-gw6eh7fa4st8ej7m.js +11 -0
- package/dist/chunks/resolve-variant-gw6eh7fa4st8ej7m.js.map +1 -0
- package/dist/chunks/{select-g261chvosodu22i8.js → select-j8evv2iblgs5fa9s.js} +4 -4
- package/dist/chunks/{select-g261chvosodu22i8.js.map → select-j8evv2iblgs5fa9s.js.map} +1 -1
- package/dist/chunks/{sensitive-input-cijagk551mesdtk4.js → sensitive-input-cmb9jt42bv8jftei.js} +3 -3
- package/dist/chunks/{sensitive-input-cijagk551mesdtk4.js.map → sensitive-input-cmb9jt42bv8jftei.js.map} +1 -1
- package/dist/chunks/surface-k0e8mq1x00b7i8r6.js.map +1 -1
- package/dist/chunks/{switch-jdfsr3j3oa1qxegw.js → switch-c4qjga6x3axmoi20.js} +2 -2
- package/dist/chunks/switch-c4qjga6x3axmoi20.js.map +1 -0
- package/dist/chunks/{table-iudje0lva0z68jto.js → table-jvqy3tu48xa75n2t.js} +56 -55
- package/dist/chunks/table-jvqy3tu48xa75n2t.js.map +1 -0
- package/dist/chunks/{text-f7t467waymhb30sx.js → text-be7ehenoyldhyjma.js} +32 -28
- package/dist/chunks/text-be7ehenoyldhyjma.js.map +1 -0
- package/dist/chunks/{toast-h573o0tc7tefivk2.js → toast-c7kqwuj7qj9dx6gs.js} +75 -74
- package/dist/chunks/toast-c7kqwuj7qj9dx6gs.js.map +1 -0
- package/dist/chunks/tooltip-odudhkxe282wxinq.js.map +1 -1
- package/dist/code.js +1 -1
- package/dist/components/autocomplete.js +1 -1
- package/dist/components/badge.js +1 -1
- package/dist/components/banner.js +1 -1
- package/dist/components/breadcrumbs.js +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/clipboard-text.js +1 -1
- package/dist/components/code.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/grid.js +1 -1
- package/dist/components/input-group.js +1 -1
- package/dist/components/input.js +3 -3
- package/dist/components/label.js +1 -1
- package/dist/components/link.js +1 -1
- package/dist/components/loader.js +1 -1
- package/dist/components/pagination.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/text.js +1 -1
- package/dist/components/toast.js +1 -1
- package/dist/index.js +33 -33
- package/dist/src/components/autocomplete/autocomplete.d.ts.map +1 -1
- package/dist/src/components/badge/badge.d.ts.map +1 -1
- package/dist/src/components/banner/banner.d.ts.map +1 -1
- package/dist/src/components/breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/dist/src/components/button/button.d.ts.map +1 -1
- package/dist/src/components/checkbox/checkbox.d.ts.map +1 -1
- package/dist/src/components/clipboard-text/clipboard-text.d.ts.map +1 -1
- package/dist/src/components/code/code.d.ts.map +1 -1
- package/dist/src/components/combobox/combobox.d.ts.map +1 -1
- package/dist/src/components/dialog/dialog.d.ts.map +1 -1
- package/dist/src/components/dropdown/dropdown.d.ts.map +1 -1
- package/dist/src/components/empty/empty.d.ts.map +1 -1
- package/dist/src/components/grid/grid.d.ts.map +1 -1
- package/dist/src/components/input/input.d.ts.map +1 -1
- package/dist/src/components/link/link.d.ts.map +1 -1
- package/dist/src/components/loader/loader.d.ts.map +1 -1
- package/dist/src/components/pagination/pagination.d.ts.map +1 -1
- package/dist/src/components/radio/radio.d.ts.map +1 -1
- package/dist/src/components/surface/surface.d.ts.map +1 -1
- package/dist/src/components/switch/switch.d.ts.map +1 -1
- package/dist/src/components/table/table.d.ts.map +1 -1
- package/dist/src/components/text/text.d.ts.map +1 -1
- package/dist/src/components/toast/toast.d.ts.map +1 -1
- package/dist/src/components/tooltip/tooltip.d.ts.map +1 -1
- package/dist/src/utils/resolve-variant.d.ts +27 -0
- package/dist/src/utils/resolve-variant.d.ts.map +1 -0
- package/package.json +1 -1
- package/scripts/component-registry/metadata.ts +18 -3
- package/dist/chunks/autocomplete-48aq0d244bs2e8zv.js.map +0 -1
- package/dist/chunks/badge-dan90i0rzy4pwa1j.js.map +0 -1
- package/dist/chunks/banner-eiwcnk7ts21s3bnb.js.map +0 -1
- package/dist/chunks/breadcrumbs-cxcwf2l1ki3ffg5d.js.map +0 -1
- package/dist/chunks/button-6by9ntsa3nj553mq.js.map +0 -1
- package/dist/chunks/checkbox-hvxfvhtx1qjo2mww.js.map +0 -1
- package/dist/chunks/clipboard-text-hswydzx3iql369sd.js.map +0 -1
- package/dist/chunks/code-f9v1ikwhekqw274q.js.map +0 -1
- package/dist/chunks/combobox-fq36ye0hstote16x.js.map +0 -1
- package/dist/chunks/dialog-k3f1fbam6nt96k8x.js.map +0 -1
- package/dist/chunks/dropdown-zbax0zowy6m9zhmt.js.map +0 -1
- package/dist/chunks/empty-b82oer7npkhtkx7k.js.map +0 -1
- package/dist/chunks/grid-hj1ylz16p7g5uelh.js.map +0 -1
- package/dist/chunks/input-ncfowphv81yq7fyy.js.map +0 -1
- package/dist/chunks/link-kt74pxkud4olmcer.js.map +0 -1
- package/dist/chunks/loader-hr2w7cpqeev3p3vl.js.map +0 -1
- package/dist/chunks/pagination-jb3mncivbwsoi1se.js.map +0 -1
- package/dist/chunks/radio-datzh3pilz8ojak1.js.map +0 -1
- package/dist/chunks/switch-jdfsr3j3oa1qxegw.js.map +0 -1
- package/dist/chunks/table-iudje0lva0z68jto.js.map +0 -1
- package/dist/chunks/text-f7t467waymhb30sx.js.map +0 -1
- package/dist/chunks/toast-h573o0tc7tefivk2.js.map +0 -1
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as n, jsxs as u, Fragment as
|
|
2
|
+
import { jsx as n, jsxs as u, Fragment as U } from "react/jsx-runtime";
|
|
3
3
|
import * as s from "react";
|
|
4
4
|
import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
|
-
import {
|
|
6
|
-
import { u as
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
5
|
+
import { r as W } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
|
|
6
|
+
import { u as B } from "./link-provider-mn2voeohon7cj9o4.js";
|
|
7
|
+
import { u as H } from "./portal-provider-hwmkdmkpvct0cb76.js";
|
|
8
|
+
import { CheckIcon as f, CaretRightIcon as J } from "@phosphor-icons/react";
|
|
9
|
+
import { ay as q, az as Q, aA as X, aB as Y, aC as N, S as M, aD as y, aE as Z, aF as $, aG as v, aH as ee, aI as te, aJ as R, aK as ae, aL as oe, aM as D, aN as x } from "./vendor-base-ui-ie71jahf0czyf58j.js";
|
|
10
|
+
const ne = {
|
|
10
11
|
variant: {
|
|
11
12
|
default: {
|
|
12
13
|
classes: "",
|
|
@@ -17,16 +18,16 @@ const ae = {
|
|
|
17
18
|
description: "Destructive action item"
|
|
18
19
|
}
|
|
19
20
|
}
|
|
20
|
-
},
|
|
21
|
+
}, k = {
|
|
21
22
|
variant: "default"
|
|
22
23
|
};
|
|
23
|
-
function
|
|
24
|
-
variant: e =
|
|
24
|
+
function I({
|
|
25
|
+
variant: e = k.variant
|
|
25
26
|
} = {}) {
|
|
26
|
-
return r(
|
|
27
|
+
return r(W(ne.variant, e, k.variant).classes);
|
|
27
28
|
}
|
|
28
|
-
const
|
|
29
|
-
|
|
29
|
+
const S = s.forwardRef(({ className: e, inset: t, children: a, icon: o, ...i }, l) => /* @__PURE__ */ u(
|
|
30
|
+
D,
|
|
30
31
|
{
|
|
31
32
|
ref: l,
|
|
32
33
|
className: r(
|
|
@@ -46,22 +47,22 @@ const I = s.forwardRef(({ className: e, inset: t, children: a, icon: o, ...i },
|
|
|
46
47
|
children: [
|
|
47
48
|
o && /* @__PURE__ */ n(o, { className: "mr-2 h-4 w-4" }),
|
|
48
49
|
a,
|
|
49
|
-
/* @__PURE__ */ n(
|
|
50
|
+
/* @__PURE__ */ n(J, { className: "ml-auto h-4 w-4" })
|
|
50
51
|
]
|
|
51
52
|
}
|
|
52
53
|
));
|
|
53
|
-
|
|
54
|
-
const
|
|
54
|
+
S.displayName = D.displayName;
|
|
55
|
+
const w = s.forwardRef(
|
|
55
56
|
({ className: e, sideOffset: t = 8, children: a, container: o, ...i }, l) => {
|
|
56
|
-
const d =
|
|
57
|
-
return /* @__PURE__ */ n(
|
|
58
|
-
|
|
57
|
+
const d = H();
|
|
58
|
+
return /* @__PURE__ */ n(N, { container: o ?? d ?? void 0, children: /* @__PURE__ */ n(
|
|
59
|
+
ae,
|
|
59
60
|
{
|
|
60
61
|
ref: l,
|
|
61
62
|
sideOffset: t,
|
|
62
63
|
...i,
|
|
63
64
|
children: /* @__PURE__ */ n(
|
|
64
|
-
|
|
65
|
+
oe,
|
|
65
66
|
{
|
|
66
67
|
className: r(
|
|
67
68
|
"overflow-hidden bg-kumo-control text-kumo-default",
|
|
@@ -90,7 +91,7 @@ const k = s.forwardRef(
|
|
|
90
91
|
}
|
|
91
92
|
) });
|
|
92
93
|
}
|
|
93
|
-
), g = (e) => e ? s.isValidElement(e) ? e : /* @__PURE__ */ n(e, { className: "mr-2 h-4 w-4" }) : null,
|
|
94
|
+
), g = (e) => e ? s.isValidElement(e) ? e : /* @__PURE__ */ n(e, { className: "mr-2 h-4 w-4" }) : null, C = s.forwardRef(
|
|
94
95
|
({
|
|
95
96
|
className: e,
|
|
96
97
|
inset: t,
|
|
@@ -101,21 +102,21 @@ const k = s.forwardRef(
|
|
|
101
102
|
href: d,
|
|
102
103
|
variant: c = "default",
|
|
103
104
|
..._
|
|
104
|
-
},
|
|
105
|
-
const b =
|
|
106
|
-
() => /* @__PURE__ */ u(
|
|
105
|
+
}, j) => {
|
|
106
|
+
const b = B(), m = s.useMemo(
|
|
107
|
+
() => /* @__PURE__ */ u(U, { children: [
|
|
107
108
|
a && g(a),
|
|
108
109
|
o,
|
|
109
110
|
i && /* @__PURE__ */ n("span", { className: "inline-flex", children: /* @__PURE__ */ n(f, {}) })
|
|
110
111
|
] }),
|
|
111
112
|
[a, o, i]
|
|
112
|
-
),
|
|
113
|
+
), z = s.useMemo(() => {
|
|
113
114
|
if (!d) return;
|
|
114
|
-
const
|
|
115
|
+
const K = /^(https?:)?\/\//.test(d), h = r(
|
|
115
116
|
"flex items-center",
|
|
116
117
|
c === "danger" && "text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger"
|
|
117
118
|
);
|
|
118
|
-
return
|
|
119
|
+
return K ? /* @__PURE__ */ n(
|
|
119
120
|
"a",
|
|
120
121
|
{
|
|
121
122
|
className: r(h, "w-full text-inherit! no-underline!"),
|
|
@@ -135,26 +136,26 @@ const k = s.forwardRef(
|
|
|
135
136
|
children: m
|
|
136
137
|
}
|
|
137
138
|
);
|
|
138
|
-
}, [d, m, c, b]),
|
|
139
|
+
}, [d, m, c, b]), F = d || l;
|
|
139
140
|
return /* @__PURE__ */ n(
|
|
140
141
|
R,
|
|
141
142
|
{
|
|
142
|
-
ref:
|
|
143
|
+
ref: j,
|
|
143
144
|
className: r(
|
|
144
145
|
"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none focus:text-kumo-default focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-overlay",
|
|
145
146
|
t && "pl-8",
|
|
146
|
-
|
|
147
|
+
I({ variant: c }),
|
|
147
148
|
e
|
|
148
149
|
),
|
|
149
|
-
render: d ?
|
|
150
|
+
render: d ? z : l,
|
|
150
151
|
..._,
|
|
151
|
-
children:
|
|
152
|
+
children: F ? void 0 : m
|
|
152
153
|
}
|
|
153
154
|
);
|
|
154
155
|
}
|
|
155
156
|
);
|
|
156
|
-
|
|
157
|
-
const
|
|
157
|
+
C.displayName = R.displayName;
|
|
158
|
+
const L = s.forwardRef(
|
|
158
159
|
({
|
|
159
160
|
className: e,
|
|
160
161
|
inset: t,
|
|
@@ -163,7 +164,7 @@ const C = s.forwardRef(
|
|
|
163
164
|
variant: i = "default",
|
|
164
165
|
...l
|
|
165
166
|
}, d) => /* @__PURE__ */ u(
|
|
166
|
-
|
|
167
|
+
te,
|
|
167
168
|
{
|
|
168
169
|
ref: d,
|
|
169
170
|
className: r(
|
|
@@ -171,7 +172,7 @@ const C = s.forwardRef(
|
|
|
171
172
|
"focus:text-kumo-default focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-overlay",
|
|
172
173
|
"text-inherit no-underline",
|
|
173
174
|
t && "pl-8",
|
|
174
|
-
|
|
175
|
+
I({ variant: i }),
|
|
175
176
|
e
|
|
176
177
|
),
|
|
177
178
|
...l,
|
|
@@ -182,9 +183,9 @@ const C = s.forwardRef(
|
|
|
182
183
|
}
|
|
183
184
|
)
|
|
184
185
|
);
|
|
185
|
-
|
|
186
|
-
const
|
|
187
|
-
|
|
186
|
+
L.displayName = "DropdownMenuLinkItem";
|
|
187
|
+
const P = s.forwardRef(({ className: e, children: t, checked: a, ...o }, i) => /* @__PURE__ */ u(
|
|
188
|
+
v,
|
|
188
189
|
{
|
|
189
190
|
ref: i,
|
|
190
191
|
className: r(
|
|
@@ -194,14 +195,14 @@ const L = s.forwardRef(({ className: e, children: t, checked: a, ...o }, i) => /
|
|
|
194
195
|
checked: a,
|
|
195
196
|
...o,
|
|
196
197
|
children: [
|
|
197
|
-
/* @__PURE__ */ n(
|
|
198
|
+
/* @__PURE__ */ n(ee, { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-inherit", children: /* @__PURE__ */ n(f, { weight: "bold", size: 12 }) }),
|
|
198
199
|
t
|
|
199
200
|
]
|
|
200
201
|
}
|
|
201
202
|
));
|
|
202
|
-
|
|
203
|
-
const
|
|
204
|
-
|
|
203
|
+
P.displayName = v.displayName;
|
|
204
|
+
const T = s.forwardRef(({ className: e, inset: t, ...a }, o) => /* @__PURE__ */ n(
|
|
205
|
+
y,
|
|
205
206
|
{
|
|
206
207
|
ref: o,
|
|
207
208
|
className: r(
|
|
@@ -212,17 +213,17 @@ const P = s.forwardRef(({ className: e, inset: t, ...a }, o) => /* @__PURE__ */
|
|
|
212
213
|
...a
|
|
213
214
|
}
|
|
214
215
|
));
|
|
215
|
-
|
|
216
|
-
const
|
|
217
|
-
|
|
216
|
+
T.displayName = y.displayName;
|
|
217
|
+
const O = s.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ n(
|
|
218
|
+
M,
|
|
218
219
|
{
|
|
219
220
|
ref: a,
|
|
220
221
|
className: r("-mx-1 my-1 h-px bg-kumo-hairline", e),
|
|
221
222
|
...t
|
|
222
223
|
}
|
|
223
224
|
));
|
|
224
|
-
|
|
225
|
-
const
|
|
225
|
+
O.displayName = M.displayName;
|
|
226
|
+
const A = ({
|
|
226
227
|
className: e,
|
|
227
228
|
...t
|
|
228
229
|
}) => /* @__PURE__ */ n(
|
|
@@ -232,9 +233,9 @@ const O = ({
|
|
|
232
233
|
...t
|
|
233
234
|
}
|
|
234
235
|
);
|
|
235
|
-
|
|
236
|
-
const
|
|
237
|
-
|
|
236
|
+
A.displayName = "DropdownMenuShortcut";
|
|
237
|
+
const E = s.forwardRef(({ className: e, children: t, inset: a, icon: o, ...i }, l) => /* @__PURE__ */ u(
|
|
238
|
+
$,
|
|
238
239
|
{
|
|
239
240
|
ref: l,
|
|
240
241
|
className: r(
|
|
@@ -250,9 +251,9 @@ const A = s.forwardRef(({ className: e, children: t, inset: a, icon: o, ...i },
|
|
|
250
251
|
]
|
|
251
252
|
}
|
|
252
253
|
));
|
|
253
|
-
|
|
254
|
-
const
|
|
255
|
-
|
|
254
|
+
E.displayName = "DropdownMenuRadioItem";
|
|
255
|
+
const G = s.forwardRef(({ className: e, children: t, ...a }, o) => /* @__PURE__ */ n(
|
|
256
|
+
Z,
|
|
256
257
|
{
|
|
257
258
|
ref: o,
|
|
258
259
|
className: r("ml-auto", e),
|
|
@@ -260,8 +261,8 @@ const E = s.forwardRef(({ className: e, children: t, ...a }, o) => /* @__PURE__
|
|
|
260
261
|
children: t ?? /* @__PURE__ */ n(f, { className: "h-4 w-4" })
|
|
261
262
|
}
|
|
262
263
|
));
|
|
263
|
-
|
|
264
|
-
const
|
|
264
|
+
G.displayName = "DropdownMenuRadioItemIndicator";
|
|
265
|
+
const V = s.forwardRef(({ children: e, render: t, ...a }, o) => {
|
|
265
266
|
if (t)
|
|
266
267
|
return /* @__PURE__ */ n(x, { ref: o, ...a, render: t, children: e });
|
|
267
268
|
const i = s.isValidElement(e) ? e : null;
|
|
@@ -277,26 +278,26 @@ const G = s.forwardRef(({ children: e, render: t, ...a }, o) => {
|
|
|
277
278
|
}
|
|
278
279
|
);
|
|
279
280
|
});
|
|
280
|
-
|
|
281
|
-
const
|
|
282
|
-
Trigger:
|
|
283
|
-
Portal:
|
|
284
|
-
Sub:
|
|
285
|
-
SubTrigger:
|
|
286
|
-
SubContent:
|
|
287
|
-
Content:
|
|
288
|
-
Item:
|
|
289
|
-
LinkItem:
|
|
290
|
-
CheckboxItem:
|
|
291
|
-
RadioGroup:
|
|
292
|
-
RadioItem:
|
|
293
|
-
RadioItemIndicator:
|
|
294
|
-
Label:
|
|
295
|
-
Separator:
|
|
296
|
-
Shortcut:
|
|
297
|
-
Group:
|
|
281
|
+
V.displayName = "DropdownMenuTrigger";
|
|
282
|
+
const me = Object.assign(q, {
|
|
283
|
+
Trigger: V,
|
|
284
|
+
Portal: N,
|
|
285
|
+
Sub: Y,
|
|
286
|
+
SubTrigger: S,
|
|
287
|
+
SubContent: w,
|
|
288
|
+
Content: w,
|
|
289
|
+
Item: C,
|
|
290
|
+
LinkItem: L,
|
|
291
|
+
CheckboxItem: P,
|
|
292
|
+
RadioGroup: X,
|
|
293
|
+
RadioItem: E,
|
|
294
|
+
RadioItemIndicator: G,
|
|
295
|
+
Label: T,
|
|
296
|
+
Separator: O,
|
|
297
|
+
Shortcut: A,
|
|
298
|
+
Group: Q
|
|
298
299
|
});
|
|
299
300
|
export {
|
|
300
|
-
|
|
301
|
+
me as D
|
|
301
302
|
};
|
|
302
|
-
//# sourceMappingURL=dropdown-
|
|
303
|
+
//# sourceMappingURL=dropdown-gp5iptj1niq14lpv.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dropdown-gp5iptj1niq14lpv.js","sources":["../../src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { Menu as DropdownMenuPrimitive } from \"@base-ui/react/menu\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport {\n usePortalContainer,\n type PortalContainer,\n} from \"../../utils/portal-provider\";\nimport {\n CaretRightIcon as CaretRight,\n CheckIcon,\n CheckIcon as Check,\n type Icon,\n} from \"@phosphor-icons/react\";\n\n/** Dropdown item variant definitions (default and danger styles). */\nexport const KUMO_DROPDOWN_VARIANTS = {\n variant: {\n default: {\n classes: \"\",\n description: \"Default dropdown item appearance\",\n },\n danger: {\n classes:\n \"text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger\",\n description: \"Destructive action item\",\n },\n },\n} as const;\n\nexport const KUMO_DROPDOWN_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_DROPDOWN_VARIANTS\nexport type KumoDropdownVariant = keyof typeof KUMO_DROPDOWN_VARIANTS.variant;\n\nexport interface KumoDropdownVariantsProps {\n /**\n * Visual style of the dropdown item.\n * - `\"default\"` — Standard item appearance\n * - `\"danger\"` — Destructive action with red text\n * @default \"default\"\n */\n variant?: KumoDropdownVariant;\n}\n\nexport function dropdownVariants({\n variant = KUMO_DROPDOWN_DEFAULT_VARIANTS.variant,\n}: KumoDropdownVariantsProps = {}) {\n return cn(resolveVariant(KUMO_DROPDOWN_VARIANTS.variant, variant, KUMO_DROPDOWN_DEFAULT_VARIANTS.variant).classes);\n}\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubmenuTrigger>,\n React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.SubmenuTrigger\n > & {\n inset?: boolean;\n icon?: Icon;\n }\n>(({ className, inset, children, icon: IconComponent, ...props }, ref) => (\n <DropdownMenuPrimitive.SubmenuTrigger\n ref={ref}\n className={cn(\n \"flex cursor-default items-center rounded-sm text-base outline-hidden select-none\", // base styles\n \"px-2 py-1.5\", // spacing\n \"focus:bg-kumo-tint focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand\", // focus state\n \"data-[state=open]:bg-kumo-tint\", // open state\n inset && \"pl-8\", // conditional inset\n className,\n )}\n {...props}\n >\n {IconComponent && <IconComponent className=\"mr-2 h-4 w-4\" />}\n {children}\n <CaretRight className=\"ml-auto h-4 w-4\" />\n </DropdownMenuPrimitive.SubmenuTrigger>\n));\n\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubmenuTrigger.displayName;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Positioner>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Positioner> & {\n /**\n * Container element for the portal. Use this to render the dropdown inside\n * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n * @default document.body (or KumoPortalProvider container if set)\n */\n container?: PortalContainer;\n }\n>(\n (\n { className, sideOffset = 8, children, container: containerProp, ...props },\n ref,\n ) => {\n const contextContainer = usePortalContainer();\n const container = containerProp ?? contextContainer ?? undefined;\n\n return (\n <DropdownMenuPrimitive.Portal container={container}>\n <DropdownMenuPrimitive.Positioner\n ref={ref}\n sideOffset={sideOffset}\n {...props}\n >\n <DropdownMenuPrimitive.Popup\n className={cn(\n \"overflow-hidden bg-kumo-control text-kumo-default\", // background\n \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n \"min-w-36 p-1.5\", // spacing\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\", // open animation\n \"data-[side=bottom]:slide-in-from-top-2\", // bottom side animation\n \"data-[side=left]:slide-in-from-right-2\", // left side animation\n \"data-[side=right]:slide-in-from-left-2\", // right side animation\n \"data-[side=top]:slide-in-from-bottom-2\", // top side animation\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\", // close animation\n className,\n )}\n >\n {children}\n </DropdownMenuPrimitive.Popup>\n </DropdownMenuPrimitive.Positioner>\n </DropdownMenuPrimitive.Portal>\n );\n },\n);\n\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 className=\"mr-2 h-4 w-4\" />;\n};\n\n/**\n * DropdownMenuItem — a single actionable item within a dropdown menu.\n *\n * For navigation links, use `DropdownMenu.LinkItem` instead.\n *\n * @example\n * ```tsx\n * <DropdownMenu.Item>Edit</DropdownMenu.Item>\n * <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>\n * <DropdownMenu.Item variant=\"danger\">Delete</DropdownMenu.Item>\n * ```\n */\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n icon?: Icon | React.ReactNode;\n selected?: boolean;\n /**\n * @deprecated Use `DropdownMenu.LinkItem` instead for navigation links.\n * This prop will be removed in a future major version.\n */\n href?: string;\n variant?: \"default\" | \"danger\";\n }\n>(\n (\n {\n className,\n inset,\n icon: IconComponent,\n children,\n selected,\n render,\n href,\n variant = \"default\",\n ...props\n },\n ref,\n ) => {\n const LinkComponent = useLinkComponent();\n\n // Build the inner content with icon, children, and selected indicator\n const innerContent = React.useMemo(\n () => (\n <>\n {IconComponent && renderIconNode(IconComponent)}\n {children}\n {selected && (\n <span className=\"inline-flex\">\n <Check />\n </span>\n )}\n </>\n ),\n [IconComponent, children, selected],\n );\n\n // Legacy href support (deprecated)\n const linkContent = React.useMemo(() => {\n if (!href) return undefined;\n\n // Matches http://, https://, or protocol-relative //\n const isExternal = /^(https?:)?\\/\\//.test(href);\n const styles = cn(\n \"flex items-center\",\n variant === \"danger\" &&\n \"text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger\",\n );\n if (isExternal) {\n return (\n <a\n className={cn(styles, \"w-full text-inherit! no-underline!\")}\n href={href}\n target=\"_blank\"\n rel=\"noreferrer\"\n onClick={(e) => e.stopPropagation()}\n >\n {innerContent}\n </a>\n );\n }\n return (\n <LinkComponent\n className={cn(styles, \"w-full text-inherit! no-underline!\")}\n href={href}\n to={href}\n onClick={(e) => e.stopPropagation()}\n >\n {innerContent}\n </LinkComponent>\n );\n }, [href, innerContent, variant, LinkComponent]);\n\n // When href is provided, use linkContent as render prop\n // When render prop is provided, caller controls children rendering\n const useRenderProp = href || render;\n\n return (\n <DropdownMenuPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none focus:text-kumo-default focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-overlay\",\n inset && \"pl-8\",\n dropdownVariants({ variant }),\n className,\n )}\n render={href ? linkContent : render}\n {...props}\n >\n {useRenderProp ? undefined : innerContent}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\n\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\n/**\n * DropdownMenuLinkItem — a menu item that navigates to a URL.\n *\n * Use this instead of `DropdownMenu.Item` with `href` for navigation links.\n * Provides full control over link attributes like `target` and `rel`.\n *\n * @example\n * ```tsx\n * // External link\n * <DropdownMenu.LinkItem href=\"https://example.com\" target=\"_blank\">\n * Documentation\n * </DropdownMenu.LinkItem>\n *\n * // Internal link\n * <DropdownMenu.LinkItem href=\"/settings\">\n * Settings\n * </DropdownMenu.LinkItem>\n *\n * // With icon\n * <DropdownMenu.LinkItem href=\"/profile\" icon={UserIcon}>\n * Profile\n * </DropdownMenu.LinkItem>\n * ```\n */\nconst DropdownMenuLinkItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.LinkItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.LinkItem> & {\n inset?: boolean;\n icon?: Icon | React.ReactNode;\n variant?: \"default\" | \"danger\";\n }\n>(\n (\n {\n className,\n inset,\n icon: IconComponent,\n children,\n variant = \"default\",\n ...props\n },\n ref,\n ) => {\n return (\n <DropdownMenuPrimitive.LinkItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none\",\n \"focus:text-kumo-default focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-overlay\",\n \"text-inherit no-underline\",\n inset && \"pl-8\",\n dropdownVariants({ variant }),\n className,\n )}\n {...props}\n >\n {IconComponent && renderIconNode(IconComponent)}\n {children}\n </DropdownMenuPrimitive.LinkItem>\n );\n },\n);\n\nDropdownMenuLinkItem.displayName = \"DropdownMenuLinkItem\";\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n <DropdownMenuPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-base outline-hidden transition-colors select-none focus:bg-kumo-tint focus:text-kumo-default focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand data-disabled:pointer-events-none data-disabled:opacity-50\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <DropdownMenuPrimitive.CheckboxItemIndicator className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-inherit\">\n <CheckIcon weight=\"bold\" size={12} />\n </DropdownMenuPrimitive.CheckboxItemIndicator>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.GroupLabel>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.GroupLabel> & {\n inset?: boolean;\n }\n>(({ className, inset, ...props }, ref) => (\n <DropdownMenuPrimitive.GroupLabel\n ref={ref}\n className={cn(\n \"px-2 py-1.5 text-base font-semibold\",\n inset && \"pl-8\",\n className,\n )}\n {...props}\n />\n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.GroupLabel.displayName;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 my-1 h-px bg-kumo-hairline\", className)}\n {...props}\n />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n {...props}\n />\n );\n};\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {\n inset?: boolean;\n icon?: Icon | React.ReactNode;\n }\n>(({ className, children, inset, icon: IconComponent, ...props }, ref) => (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none\",\n \"data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-tint\",\n inset && \"pl-8\",\n className,\n )}\n {...props}\n >\n {IconComponent && renderIconNode(IconComponent)}\n {children}\n </DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n\nconst DropdownMenuRadioItemIndicator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItemIndicator>,\n React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.RadioItemIndicator\n >\n>(({ className, children, ...props }, ref) => (\n <DropdownMenuPrimitive.RadioItemIndicator\n ref={ref}\n className={cn(\"ml-auto\", className)}\n {...props}\n >\n {children ?? <Check className=\"h-4 w-4\" />}\n </DropdownMenuPrimitive.RadioItemIndicator>\n));\nDropdownMenuRadioItemIndicator.displayName = \"DropdownMenuRadioItemIndicator\";\n\n/**\n * Custom Trigger that converts a single child element to the `render` prop\n * to avoid nested button issues with base-ui's Menu.Trigger.\n *\n * When an explicit `render` prop is provided, children are passed through\n * to the rendered element.\n */\nconst DropdownMenuTrigger = React.forwardRef<\n HTMLButtonElement,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ children, render, ...props }, ref) => {\n // If render prop is explicitly provided, use it and pass children through\n if (render) {\n return (\n <DropdownMenuPrimitive.Trigger ref={ref} {...props} render={render}>\n {children}\n </DropdownMenuPrimitive.Trigger>\n );\n }\n\n // Otherwise, auto-promote single child element to render prop\n const childElement = React.isValidElement(children) ? children : null;\n\n return (\n <DropdownMenuPrimitive.Trigger\n ref={ref}\n {...props}\n {...(childElement && {\n render: childElement as React.ReactElement<Record<string, unknown>>,\n })}\n >\n {childElement ? undefined : children}\n </DropdownMenuPrimitive.Trigger>\n );\n});\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\n/**\n * DropdownMenu — accessible dropdown menu anchored to a trigger.\n *\n * Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`,\n * `.LinkItem`, `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`,\n * `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`.\n *\n * Built on `@base-ui/react/menu`.\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n * <DropdownMenu.Trigger>\n * <Button>Actions</Button>\n * </DropdownMenu.Trigger>\n * <DropdownMenu.Content>\n * <DropdownMenu.Item>Edit</DropdownMenu.Item>\n * <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>\n * <DropdownMenu.LinkItem href=\"/settings\" icon={GearIcon}>Settings</DropdownMenu.LinkItem>\n * <DropdownMenu.Separator />\n * <DropdownMenu.Item variant=\"danger\">Delete</DropdownMenu.Item>\n * </DropdownMenu.Content>\n * </DropdownMenu>\n * ```\n *\n * @see https://base-ui.com/react/components/menu\n */\nexport const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {\n Trigger: DropdownMenuTrigger,\n Portal: DropdownMenuPrimitive.Portal,\n Sub: DropdownMenuPrimitive.SubmenuRoot,\n SubTrigger: DropdownMenuSubTrigger,\n SubContent: DropdownMenuContent,\n Content: DropdownMenuContent,\n Item: DropdownMenuItem,\n LinkItem: DropdownMenuLinkItem,\n CheckboxItem: DropdownMenuCheckboxItem,\n RadioGroup: DropdownMenuPrimitive.RadioGroup,\n RadioItem: DropdownMenuRadioItem,\n RadioItemIndicator: DropdownMenuRadioItemIndicator,\n Label: DropdownMenuLabel,\n Separator: DropdownMenuSeparator,\n Shortcut: DropdownMenuShortcut,\n Group: DropdownMenuPrimitive.Group,\n});\n"],"names":["KUMO_DROPDOWN_VARIANTS","KUMO_DROPDOWN_DEFAULT_VARIANTS","dropdownVariants","variant","cn","resolveVariant","DropdownMenuSubTrigger","React","className","inset","children","IconComponent","props","ref","jsxs","DropdownMenuPrimitive.SubmenuTrigger","jsx","CaretRight","DropdownMenuContent","sideOffset","containerProp","contextContainer","usePortalContainer","DropdownMenuPrimitive.Portal","DropdownMenuPrimitive.Positioner","DropdownMenuPrimitive.Popup","renderIconNode","DropdownMenuItem","selected","render","href","LinkComponent","useLinkComponent","innerContent","Fragment","Check","linkContent","isExternal","styles","e","useRenderProp","DropdownMenuPrimitive.Item","DropdownMenuLinkItem","DropdownMenuPrimitive.LinkItem","DropdownMenuCheckboxItem","checked","DropdownMenuPrimitive.CheckboxItem","DropdownMenuPrimitive.CheckboxItemIndicator","CheckIcon","DropdownMenuLabel","DropdownMenuPrimitive.GroupLabel","DropdownMenuSeparator","DropdownMenuPrimitive.Separator","DropdownMenuShortcut","DropdownMenuRadioItem","DropdownMenuPrimitive.RadioItem","DropdownMenuRadioItemIndicator","DropdownMenuPrimitive.RadioItemIndicator","DropdownMenuTrigger","DropdownMenuPrimitive.Trigger","childElement","DropdownMenu","DropdownMenuPrimitive.Root","DropdownMenuPrimitive.SubmenuRoot","DropdownMenuPrimitive.RadioGroup","DropdownMenuPrimitive.Group"],"mappings":"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"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { CheckIcon as
|
|
4
|
-
import { useState as
|
|
5
|
-
import { B as
|
|
2
|
+
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import { CheckIcon as d, CopyIcon as x } from "@phosphor-icons/react";
|
|
4
|
+
import { useState as f } from "react";
|
|
5
|
+
import { B as b } from "./button-dh366jtvswxj0fw3.js";
|
|
6
6
|
import { c as a } from "./cn-ct4n7r74mh8y0f48.js";
|
|
7
|
-
|
|
7
|
+
import { r as h } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
|
|
8
|
+
const g = {
|
|
8
9
|
size: {
|
|
9
10
|
sm: {
|
|
10
11
|
classes: "px-6 py-8 gap-4",
|
|
@@ -19,32 +20,32 @@ const b = {
|
|
|
19
20
|
description: "Large empty state for prominent placement"
|
|
20
21
|
}
|
|
21
22
|
}
|
|
22
|
-
},
|
|
23
|
+
}, l = {
|
|
23
24
|
size: "base"
|
|
24
25
|
};
|
|
25
|
-
function
|
|
26
|
-
size: t =
|
|
26
|
+
function k({
|
|
27
|
+
size: t = l.size
|
|
27
28
|
} = {}) {
|
|
28
29
|
return a(
|
|
29
30
|
"flex w-full flex-col items-center rounded-xl border border-kumo-fill bg-kumo-control text-kumo-default",
|
|
30
|
-
|
|
31
|
+
h(g.size, t, l.size).classes
|
|
31
32
|
);
|
|
32
33
|
}
|
|
33
|
-
function
|
|
34
|
+
function T({
|
|
34
35
|
icon: t,
|
|
35
|
-
title:
|
|
36
|
+
title: n,
|
|
36
37
|
description: o,
|
|
37
38
|
commandLine: s,
|
|
38
|
-
contents:
|
|
39
|
+
contents: m,
|
|
39
40
|
size: c = "base",
|
|
40
|
-
className:
|
|
41
|
+
className: p
|
|
41
42
|
}) {
|
|
42
|
-
const [
|
|
43
|
-
return /* @__PURE__ */
|
|
43
|
+
const [u, r] = f(!1);
|
|
44
|
+
return /* @__PURE__ */ i("div", { className: a(k({ size: c }), p), children: [
|
|
44
45
|
t,
|
|
45
|
-
/* @__PURE__ */ e("h2", { className: "text-2xl font-semibold", children:
|
|
46
|
+
/* @__PURE__ */ e("h2", { className: "text-2xl font-semibold", children: n }),
|
|
46
47
|
o && /* @__PURE__ */ e("p", { className: "max-w-140 text-center text-kumo-subtle", children: o }),
|
|
47
|
-
s && /* @__PURE__ */
|
|
48
|
+
s && /* @__PURE__ */ i(
|
|
48
49
|
"div",
|
|
49
50
|
{
|
|
50
51
|
className: a(
|
|
@@ -57,7 +58,7 @@ function z({
|
|
|
57
58
|
/* @__PURE__ */ e("span", { className: "text-xs text-kumo-inactive select-none", children: "$" }),
|
|
58
59
|
/* @__PURE__ */ e("span", { className: "no-scrollbar overflow-scroll text-base whitespace-nowrap text-kumo-brand", children: s }),
|
|
59
60
|
/* @__PURE__ */ e(
|
|
60
|
-
|
|
61
|
+
b,
|
|
61
62
|
{
|
|
62
63
|
className: "group",
|
|
63
64
|
size: "sm",
|
|
@@ -69,8 +70,8 @@ function z({
|
|
|
69
70
|
r(!1);
|
|
70
71
|
}, 1e3), await navigator.clipboard.writeText(s);
|
|
71
72
|
},
|
|
72
|
-
children:
|
|
73
|
-
|
|
73
|
+
children: u ? /* @__PURE__ */ e(d, { size: 16, className: "animate-bounce-in text-kumo-success" }) : /* @__PURE__ */ e(
|
|
74
|
+
x,
|
|
74
75
|
{
|
|
75
76
|
size: 16,
|
|
76
77
|
className: "text-kumo-inactive group-hover:text-kumo-brand"
|
|
@@ -81,13 +82,13 @@ function z({
|
|
|
81
82
|
]
|
|
82
83
|
}
|
|
83
84
|
),
|
|
84
|
-
|
|
85
|
+
m
|
|
85
86
|
] });
|
|
86
87
|
}
|
|
87
88
|
export {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
89
|
+
T as E,
|
|
90
|
+
g as K,
|
|
91
|
+
l as a,
|
|
92
|
+
k as e
|
|
92
93
|
};
|
|
93
|
-
//# sourceMappingURL=empty-
|
|
94
|
+
//# sourceMappingURL=empty-fr78te81o3qaj3in.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty-fr78te81o3qaj3in.js","sources":["../../src/components/empty/empty.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\n\n/** Empty state size variant definitions mapping sizes to their Tailwind classes. */\nexport const KUMO_EMPTY_VARIANTS = {\n size: {\n sm: {\n classes: \"px-6 py-8 gap-4\",\n description: \"Compact empty state for smaller containers\",\n },\n base: {\n classes: \"px-10 py-16 gap-6\",\n description: \"Default empty state size\",\n },\n lg: {\n classes: \"px-12 py-20 gap-8\",\n description: \"Large empty state for prominent placement\",\n },\n },\n} as const;\n\nexport const KUMO_EMPTY_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\nexport type KumoEmptySize = keyof typeof KUMO_EMPTY_VARIANTS.size;\n\nexport interface KumoEmptyVariantsProps {\n /**\n * Size of the empty state container.\n * - `\"sm\"` — Compact empty state for smaller containers\n * - `\"base\"` — Default empty state size\n * - `\"lg\"` — Large empty state for prominent placement\n * @default \"base\"\n */\n size?: KumoEmptySize;\n}\n\nexport function emptyVariants({\n size = KUMO_EMPTY_DEFAULT_VARIANTS.size,\n}: KumoEmptyVariantsProps = {}) {\n return cn(\n \"flex w-full flex-col items-center rounded-xl border border-kumo-fill bg-kumo-control text-kumo-default\",\n resolveVariant(KUMO_EMPTY_VARIANTS.size, size, KUMO_EMPTY_DEFAULT_VARIANTS.size).classes,\n );\n}\n\n/**\n * Empty state component props.\n *\n * @example\n * ```tsx\n * <Empty\n * icon={<PackageIcon size={48} />}\n * title=\"No packages found\"\n * description=\"Get started by installing your first package.\"\n * commandLine=\"npm install @cloudflare/kumo\"\n * />\n * ```\n */\nexport interface EmptyProps extends KumoEmptyVariantsProps {\n /** Decorative icon displayed above the title (e.g. from `@phosphor-icons/react`). */\n icon?: React.ReactNode;\n /** Primary heading text for the empty state. */\n title: string;\n /** Secondary description text displayed below the title. */\n description?: string;\n /** Shell command displayed in a copyable code block. */\n commandLine?: string;\n /** Additional content (buttons, links) rendered below the description. */\n contents?: React.ReactNode;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n}\n\n/**\n * Placeholder shown when a list, table, or page has no content to display.\n *\n * @example\n * ```tsx\n * <Empty title=\"No results found\" description=\"Try adjusting your search.\" />\n * ```\n */\nexport function Empty({\n icon,\n title,\n description,\n commandLine,\n contents,\n size = \"base\",\n className,\n}: EmptyProps) {\n const [emptyStateCopied, setEmptyStateCopied] = useState<boolean>(false);\n\n return (\n <div className={cn(emptyVariants({ size }), className)}>\n {icon}\n <h2 className=\"text-2xl font-semibold\">{title}</h2>\n\n {description && (\n <p className=\"max-w-140 text-center text-kumo-subtle\">{description}</p>\n )}\n\n {commandLine && (\n <div\n className={cn(\n \"group/cmd relative inline-flex h-10 max-w-8/10 transform-gpu items-center gap-2 rounded-lg font-mono shadow-sm\",\n \"bg-kumo-overlay pr-2 pl-3\",\n \"transition-all duration-300 hover:border-kumo-interact/80 hover:shadow-md\",\n \"border border-kumo-fill/60\",\n )}\n >\n <span className=\"text-xs text-kumo-inactive select-none\">$</span>\n <span className=\"no-scrollbar overflow-scroll text-base whitespace-nowrap text-kumo-brand\">\n {commandLine}\n </span>\n <Button\n className=\"group\"\n size=\"sm\"\n variant=\"ghost\"\n shape=\"square\"\n aria-label=\"Copy command\"\n onClick={async () => {\n setEmptyStateCopied(true);\n setTimeout(() => {\n setEmptyStateCopied(false);\n }, 1000);\n await navigator.clipboard.writeText(commandLine);\n }}\n >\n {emptyStateCopied ? (\n <CheckIcon size={16} className=\"animate-bounce-in text-kumo-success\" />\n ) : (\n <CopyIcon\n size={16}\n className=\"text-kumo-inactive group-hover:text-kumo-brand\"\n />\n )}\n </Button>\n </div>\n )}\n\n {contents}\n </div>\n );\n}\n"],"names":["KUMO_EMPTY_VARIANTS","KUMO_EMPTY_DEFAULT_VARIANTS","emptyVariants","size","cn","resolveVariant","Empty","icon","title","description","commandLine","contents","className","emptyStateCopied","setEmptyStateCopied","useState","jsxs","jsx","Button","CheckIcon","CopyIcon"],"mappings":";;;;;;;AAOO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AACR;AAeO,SAASC,EAAc;AAAA,EAC5B,MAAAC,IAAOF,EAA4B;AACrC,IAA4B,IAAI;AAC9B,SAAOG;AAAA,IACL;AAAA,IACAC,EAAeL,EAAoB,MAAMG,GAAMF,EAA4B,IAAI,EAAE;AAAA,EAAA;AAErF;AAsCO,SAASK,EAAM;AAAA,EACpB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAR,IAAO;AAAA,EACP,WAAAS;AACF,GAAe;AACb,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAkB,EAAK;AAEvE,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWZ,EAAGF,EAAc,EAAE,MAAAC,EAAA,CAAM,GAAGS,CAAS,GAClD,UAAA;AAAA,IAAAL;AAAA,IACD,gBAAAU,EAAC,MAAA,EAAG,WAAU,0BAA0B,UAAAT,GAAM;AAAA,IAE7CC,KACC,gBAAAQ,EAAC,KAAA,EAAE,WAAU,0CAA0C,UAAAR,GAAY;AAAA,IAGpEC,KACC,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWZ;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAa,EAAC,QAAA,EAAK,WAAU,0CAAyC,UAAA,KAAC;AAAA,UAC1D,gBAAAA,EAAC,QAAA,EAAK,WAAU,4EACb,UAAAP,GACH;AAAA,UACA,gBAAAO;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,cAAW;AAAA,cACX,SAAS,YAAY;AACnB,gBAAAJ,EAAoB,EAAI,GACxB,WAAW,MAAM;AACf,kBAAAA,EAAoB,EAAK;AAAA,gBAC3B,GAAG,GAAI,GACP,MAAM,UAAU,UAAU,UAAUJ,CAAW;AAAA,cACjD;AAAA,cAEC,cACC,gBAAAO,EAACE,GAAA,EAAU,MAAM,IAAI,WAAU,uCAAsC,IAErE,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACZ;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAIHT;AAAA,EAAA,GACH;AAEJ;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as h, jsx as e } from "react/jsx-runtime";
|
|
3
3
|
import { c as a } from "./cn-ct4n7r74mh8y0f48.js";
|
|
4
|
-
import { L as m } from "./label-
|
|
4
|
+
import { L as m } from "./label-efa0uvb8zqyjwpc8.js";
|
|
5
5
|
import { O as f, P as p, aR as u, aS as x } from "./vendor-base-ui-ie71jahf0czyf58j.js";
|
|
6
6
|
const F = {
|
|
7
7
|
// Field currently has no variant options but structure is ready for future additions
|
|
@@ -68,4 +68,4 @@ export {
|
|
|
68
68
|
_ as a,
|
|
69
69
|
d as f
|
|
70
70
|
};
|
|
71
|
-
//# sourceMappingURL=field-
|
|
71
|
+
//# sourceMappingURL=field-dgf36p7cmz1crlnu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-
|
|
1
|
+
{"version":3,"file":"field-dgf36p7cmz1crlnu.js","sources":["../../src/components/field/field.tsx"],"sourcesContent":["import { Field as FieldBase } from \"@base-ui/react/field\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\n\n/** Field variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_FIELD_VARIANTS = {\n // Field currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_FIELD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_FIELD_VARIANTS\nexport interface KumoFieldVariantsProps {\n /**\n * When true, places the control (checkbox/switch) before the label visually.\n * When false (default), places the label before the control.\n * Used to support different layout patterns (e.g., iOS-style toggles on the right).\n */\n controlFirst?: boolean;\n}\n\nexport function fieldVariants({\n controlFirst = false,\n}: KumoFieldVariantsProps = {}) {\n return cn(\n // Base styles - vertical layout (default)\n \"grid gap-2\",\n\n // Horizontal layout for checkbox and switch\n // Default: Grid auto-reverses in RTL (desired)\n \"has-[input[type=checkbox]]:grid-cols-[auto_1fr] has-[input[type=checkbox]]:items-center\",\n \"has-[[role=switch]]:grid-cols-[auto_1fr] has-[[role=switch]]:items-center\",\n\n // Control first: use flexbox with row-reverse to flip visual order without affecting text direction\n // flex-row-reverse in LTR: Control→Label, in RTL: Label→Control (opposite of grid default)\n controlFirst && [\n \"has-[input[type=checkbox]]:flex has-[input[type=checkbox]]:flex-row-reverse has-[input[type=checkbox]]:flex-wrap has-[input[type=checkbox]]:items-center\",\n \"has-[[role=switch]]:flex has-[[role=switch]]:flex-row-reverse has-[[role=switch]]:flex-wrap has-[[role=switch]]:items-center\",\n \"[&>label]:flex-1\",\n ],\n );\n}\n\n/**\n * Match type for field validation errors.\n * Can be a boolean or a key from the browser's ValidityState interface.\n * Source: BaseErrorProps[\"match\"] (ComponentPropsWithoutRef<typeof FieldBase.Error>)\n */\nexport type FieldErrorMatch =\n | boolean\n | \"badInput\"\n | \"customError\"\n | \"patternMismatch\"\n | \"rangeOverflow\"\n | \"rangeUnderflow\"\n | \"stepMismatch\"\n | \"tooLong\"\n | \"tooShort\"\n | \"typeMismatch\"\n | \"valid\"\n | \"valueMissing\";\n\n/**\n * Field component props — wraps a form control with label, description, and error message.\n *\n * @example\n * ```tsx\n * <Field label=\"Email\" required>\n * <Input placeholder=\"you@example.com\" />\n * </Field>\n *\n * <Field label=\"Phone\" required={false} description=\"We'll only use this for account recovery.\">\n * <Input placeholder=\"+1 555-0000\" />\n * </Field>\n * ```\n */\nexport interface FieldProps extends KumoFieldVariantsProps {\n /** The form control element(s) to wrap (Input, Select, Checkbox, etc.). */\n children: ReactNode;\n /** The label content — can be a string or any React node. */\n label: ReactNode;\n /**\n * When explicitly `false`, shows gray \"(optional)\" text after the label.\n * When `true` or `undefined`, no indicator is shown.\n */\n required?: boolean;\n /** Tooltip content displayed next to the label via an info icon. */\n labelTooltip?: ReactNode;\n /** Validation error with a message and a browser `ValidityState` match key. */\n error?: {\n message: ReactNode;\n match: FieldErrorMatch;\n };\n /** Helper text displayed below the control (hidden when `error` is present). */\n description?: ReactNode;\n /** When `true`, places the control before the label (for checkbox/switch layouts). */\n controlFirst?: boolean;\n}\n\n/**\n * Form field wrapper that provides a label, optional description, and error display\n * around any form control. Built on Base UI Field primitives.\n *\n * @example\n * ```tsx\n * <Field label=\"Username\">\n * <Input placeholder=\"Choose a username\" />\n * </Field>\n * ```\n */\nexport function Field({\n children,\n label,\n required,\n labelTooltip,\n error,\n description,\n controlFirst = false,\n}: FieldProps) {\n // Show \"(optional)\" when required is explicitly false\n const showOptional = required === false;\n\n return (\n <FieldBase.Root className={fieldVariants({ controlFirst })}>\n <FieldBase.Label className=\"m-0 text-base font-medium text-kumo-default\">\n <Label showOptional={showOptional} tooltip={labelTooltip} asContent>\n {label}\n </Label>\n </FieldBase.Label>\n {children}\n {error ? (\n <FieldBase.Error\n className={cn(\n \"text-sm leading-snug text-kumo-danger\",\n // Span full width in horizontal layout\n \"col-span-full\",\n )}\n match={error.match}\n >\n {error.message}\n </FieldBase.Error>\n ) : (\n description && (\n <FieldBase.Description\n className={cn(\n \"text-sm leading-snug text-kumo-subtle\",\n // Span full width in horizontal layout\n \"col-span-full\",\n )}\n >\n {description}\n </FieldBase.Description>\n )\n )}\n </FieldBase.Root>\n );\n}\n"],"names":["KUMO_FIELD_VARIANTS","KUMO_FIELD_DEFAULT_VARIANTS","fieldVariants","controlFirst","cn","Field","children","label","required","labelTooltip","error","description","showOptional","jsxs","FieldBase.Root","jsx","FieldBase.Label","Label","FieldBase.Error","FieldBase.Description"],"mappings":";;;;;AAMO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAYpC,SAASC,EAAc;AAAA,EAC5B,cAAAC,IAAe;AACjB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA;AAAA;AAAA,IAIAD,KAAgB;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;AAqEO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAR,IAAe;AACjB,GAAe;AAEb,QAAMS,IAAeJ,MAAa;AAElC,SACE,gBAAAK,EAACC,GAAA,EAAe,WAAWZ,EAAc,EAAE,cAAAC,EAAA,CAAc,GACvD,UAAA;AAAA,IAAA,gBAAAY,EAACC,GAAA,EAAgB,WAAU,+CACzB,UAAA,gBAAAD,EAACE,GAAA,EAAM,cAAAL,GAA4B,SAASH,GAAc,WAAS,IAChE,aACH,GACF;AAAA,IACCH;AAAA,IACAI,IACC,gBAAAK;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,WAAWd;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAEF,OAAOM,EAAM;AAAA,QAEZ,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA,IAGTC,KACE,gBAAAI;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,WAAWf;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAGD,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAGN;AAEJ;"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as l } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
4
|
-
import { c as
|
|
5
|
-
|
|
3
|
+
import a from "react";
|
|
4
|
+
import { c as d } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
|
+
import { r as n } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
|
|
6
|
+
const g = {
|
|
6
7
|
variant: {
|
|
7
8
|
"2up": {
|
|
8
9
|
classes: "grid-cols-1 md:grid-cols-2",
|
|
@@ -59,69 +60,69 @@ const t = {
|
|
|
59
60
|
description: "Large gap between grid items"
|
|
60
61
|
}
|
|
61
62
|
}
|
|
62
|
-
},
|
|
63
|
+
}, t = {
|
|
63
64
|
gap: "base"
|
|
64
|
-
},
|
|
65
|
+
}, p = a.createContext({
|
|
65
66
|
gap: "base"
|
|
66
67
|
});
|
|
67
|
-
function
|
|
68
|
+
function u({
|
|
68
69
|
variant: s,
|
|
69
|
-
gap: e =
|
|
70
|
+
gap: e = t.gap
|
|
70
71
|
} = {}) {
|
|
71
|
-
return
|
|
72
|
+
return d(
|
|
72
73
|
"grid",
|
|
73
|
-
s &&
|
|
74
|
-
|
|
74
|
+
s && n(g.variant, s, "2up").classes,
|
|
75
|
+
n(g.gap, e, t.gap).classes
|
|
75
76
|
);
|
|
76
77
|
}
|
|
77
|
-
function
|
|
78
|
+
function b({
|
|
78
79
|
variant: s,
|
|
79
80
|
mobileDivider: e
|
|
80
81
|
} = {}) {
|
|
81
|
-
return
|
|
82
|
+
return d(
|
|
82
83
|
e && s === "4up" && "border-b border-kumo-hairline pb-8 md:border-b-0 md:pb-0"
|
|
83
84
|
);
|
|
84
85
|
}
|
|
85
|
-
const
|
|
86
|
+
const f = a.forwardRef(
|
|
86
87
|
({
|
|
87
88
|
children: s,
|
|
88
89
|
className: e,
|
|
89
90
|
mobileDivider: o,
|
|
90
|
-
gap: r =
|
|
91
|
+
gap: r = t.gap,
|
|
91
92
|
variant: i,
|
|
92
93
|
...c
|
|
93
|
-
},
|
|
94
|
+
}, m) => /* @__PURE__ */ l(p.Provider, { value: { variant: i, gap: r, mobileDivider: o }, children: /* @__PURE__ */ l(
|
|
94
95
|
"div",
|
|
95
96
|
{
|
|
96
|
-
ref:
|
|
97
|
-
className:
|
|
97
|
+
ref: m,
|
|
98
|
+
className: d(u({ variant: i, gap: r }), e),
|
|
98
99
|
...c,
|
|
99
100
|
children: s
|
|
100
101
|
}
|
|
101
102
|
) })
|
|
102
103
|
);
|
|
103
|
-
|
|
104
|
-
const
|
|
104
|
+
f.displayName = "Grid";
|
|
105
|
+
const G = a.forwardRef(
|
|
105
106
|
({ children: s, className: e, ...o }, r) => {
|
|
106
|
-
const { variant: i, mobileDivider: c } =
|
|
107
|
+
const { variant: i, mobileDivider: c } = a.useContext(p);
|
|
107
108
|
return /* @__PURE__ */ l(
|
|
108
109
|
"div",
|
|
109
110
|
{
|
|
110
111
|
ref: r,
|
|
111
|
-
className:
|
|
112
|
+
className: d(b({ variant: i, mobileDivider: c }), e),
|
|
112
113
|
...o,
|
|
113
114
|
children: s
|
|
114
115
|
}
|
|
115
116
|
);
|
|
116
117
|
}
|
|
117
118
|
);
|
|
118
|
-
|
|
119
|
+
G.displayName = "GridItem";
|
|
119
120
|
export {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
121
|
+
f as G,
|
|
122
|
+
g as K,
|
|
123
|
+
G as a,
|
|
124
|
+
b,
|
|
125
|
+
t as c,
|
|
126
|
+
u as g
|
|
126
127
|
};
|
|
127
|
-
//# sourceMappingURL=grid-
|
|
128
|
+
//# sourceMappingURL=grid-do93dv1rjggqxx7p.js.map
|