@campfire-interactive/ui 0.3.0 → 0.4.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.
Files changed (3) hide show
  1. package/dist/index.d.ts +142 -53
  2. package/dist/index.js +824 -658
  3. package/package.json +55 -55
package/dist/index.js CHANGED
@@ -97,16 +97,505 @@ function ButtonGroup({ align = "end", className, ...rest }) {
97
97
  return /* @__PURE__ */ jsx("div", { "data-align": align, className: cn("cfi-ui", "cfi-ui-btn-group", className), ...rest });
98
98
  }
99
99
 
100
+ // src/SplitButton.tsx
101
+ import { forwardRef as forwardRef3 } from "react";
102
+ import { ChevronDown } from "lucide-react";
103
+
104
+ // src/Menu.tsx
105
+ import { Fragment, forwardRef as forwardRef2 } from "react";
106
+ import * as RadixMenu from "@radix-ui/react-dropdown-menu";
107
+ import { Check } from "lucide-react";
108
+
109
+ // src/Floating.css
110
+ styleInject("@layer components {\n .cfi-ui-floating {\n z-index: var(--cfi-ui-z-popover);\n background: var(--cfi-ui-surface-raised);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border);\n border-radius: var(--cfi-ui-radius-md);\n box-shadow: var(--cfi-ui-shadow-lg);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n max-height: var(--radix-popper-available-height, none);\n overflow: hidden auto;\n }\n .cfi-ui-floating__arrow {\n fill: var(--cfi-ui-surface-raised);\n filter: drop-shadow(0 -1px 0 var(--cfi-ui-border));\n }\n .cfi-ui-popover {\n padding: var(--cfi-ui-space-md);\n min-width: 12rem;\n }\n .cfi-ui-popover[data-flush] {\n padding: 0;\n }\n .cfi-ui-menu {\n z-index: var(--cfi-ui-z-dropdown);\n min-width: 11rem;\n padding: var(--cfi-ui-space-xs);\n }\n .cfi-ui-menu__item {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n padding: 0.375rem 0.5rem;\n border-radius: var(--cfi-ui-radius-sm);\n font-size: var(--cfi-ui-text-sm);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content);\n cursor: pointer;\n user-select: none;\n outline: none;\n }\n .cfi-ui-menu__item[data-highlighted] {\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-menu__item[data-disabled] {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-menu__item[data-variant=danger] {\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-menu__item[data-variant=danger][data-highlighted] {\n background: var(--cfi-ui-error-soft);\n }\n .cfi-ui-menu__item > svg,\n .cfi-ui-menu__item .cfi-ui-menu__icon > svg {\n width: 0.875rem;\n height: 0.875rem;\n flex: none;\n }\n .cfi-ui-menu__icon {\n display: inline-flex;\n flex: none;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-menu__item[data-variant=danger] .cfi-ui-menu__icon {\n color: inherit;\n }\n .cfi-ui-menu__shortcut {\n margin-left: auto;\n padding-left: var(--cfi-ui-space-md);\n font-family: var(--cfi-ui-font-mono);\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-menu__label {\n padding: 0.375rem 0.5rem 0.25rem;\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-semibold);\n letter-spacing: var(--cfi-ui-tracking-caps);\n text-transform: uppercase;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-menu__separator {\n height: 1px;\n margin: var(--cfi-ui-space-xs) calc(-1 * var(--cfi-ui-space-xs));\n background: var(--cfi-ui-border);\n }\n .cfi-ui-select-content {\n z-index: var(--cfi-ui-z-dropdown);\n padding: var(--cfi-ui-space-xs);\n min-width: var(--radix-select-trigger-width, 11rem);\n }\n .cfi-ui-select-viewport {\n max-height: min(18rem, var(--radix-select-content-available-height, 18rem));\n }\n .cfi-ui-select-item {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n padding: 0.375rem 0.5rem;\n border-radius: var(--cfi-ui-radius-sm);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content);\n cursor: pointer;\n user-select: none;\n outline: none;\n }\n .cfi-ui-select-item[data-highlighted] {\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-select-item[data-state=checked] {\n font-weight: var(--cfi-ui-weight-medium);\n }\n .cfi-ui-select-item[data-disabled] {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-select-item__indicator {\n display: inline-flex;\n flex: none;\n width: 0.875rem;\n color: var(--cfi-ui-accent);\n }\n .cfi-ui-select-item__indicator > svg {\n width: 0.875rem;\n height: 0.875rem;\n }\n .cfi-ui-select-empty {\n padding: var(--cfi-ui-space-sm);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content-muted);\n text-align: center;\n }\n .cfi-ui-tooltip {\n z-index: var(--cfi-ui-z-tooltip);\n max-width: 20rem;\n padding: 0.3125rem 0.5rem;\n border-radius: var(--cfi-ui-radius-sm);\n background: var(--cfi-ui-content);\n color: var(--cfi-ui-surface);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-xs);\n line-height: var(--cfi-ui-leading-normal);\n box-shadow: var(--cfi-ui-shadow-md);\n animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n }\n .cfi-ui-tooltip__arrow {\n fill: var(--cfi-ui-content);\n }\n}\n");
111
+
112
+ // src/Menu.tsx
113
+ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
114
+ var MenuRoot = RadixMenu.Root;
115
+ var MenuTrigger = RadixMenu.Trigger;
116
+ var MenuGroup = RadixMenu.Group;
117
+ var MenuSub = RadixMenu.Sub;
118
+ var MenuRadioGroup = RadixMenu.RadioGroup;
119
+ var MenuContent = forwardRef2(function MenuContent2({ className, sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
120
+ return /* @__PURE__ */ jsx2(RadixMenu.Portal, { children: /* @__PURE__ */ jsx2(
121
+ RadixMenu.Content,
122
+ {
123
+ ref,
124
+ sideOffset,
125
+ collisionPadding,
126
+ "data-cfi-ui-portal": "",
127
+ className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-menu", className),
128
+ ...rest
129
+ }
130
+ ) });
131
+ });
132
+ var MenuItem = forwardRef2(
133
+ function MenuItem2({ icon, shortcut, variant = "default", className, children, ...rest }, ref) {
134
+ return /* @__PURE__ */ jsxs2(
135
+ RadixMenu.Item,
136
+ {
137
+ ref,
138
+ "data-variant": variant,
139
+ className: cn("cfi-ui-menu__item", className),
140
+ ...rest,
141
+ children: [
142
+ icon && /* @__PURE__ */ jsx2("span", { className: "cfi-ui-menu__icon", children: icon }),
143
+ /* @__PURE__ */ jsx2("span", { children }),
144
+ shortcut && /* @__PURE__ */ jsx2("span", { className: "cfi-ui-menu__shortcut", children: shortcut })
145
+ ]
146
+ }
147
+ );
148
+ }
149
+ );
150
+ var MenuCheckboxItem = forwardRef2(function MenuCheckboxItem2({ className, children, ...rest }, ref) {
151
+ return /* @__PURE__ */ jsxs2(RadixMenu.CheckboxItem, { ref, className: cn("cfi-ui-menu__item", className), ...rest, children: [
152
+ /* @__PURE__ */ jsx2("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx2(RadixMenu.ItemIndicator, { children: /* @__PURE__ */ jsx2(Check, {}) }) }),
153
+ /* @__PURE__ */ jsx2("span", { children })
154
+ ] });
155
+ });
156
+ var MenuRadioItem = forwardRef2(function MenuRadioItem2({ className, children, ...rest }, ref) {
157
+ return /* @__PURE__ */ jsxs2(RadixMenu.RadioItem, { ref, className: cn("cfi-ui-menu__item", className), ...rest, children: [
158
+ /* @__PURE__ */ jsx2("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx2(RadixMenu.ItemIndicator, { children: /* @__PURE__ */ jsx2(Check, {}) }) }),
159
+ /* @__PURE__ */ jsx2("span", { children })
160
+ ] });
161
+ });
162
+ function MenuLabel({ className, ...rest }) {
163
+ return /* @__PURE__ */ jsx2(RadixMenu.Label, { className: cn("cfi-ui-menu__label", className), ...rest });
164
+ }
165
+ function MenuSeparator({
166
+ className,
167
+ ...rest
168
+ }) {
169
+ return /* @__PURE__ */ jsx2(RadixMenu.Separator, { className: cn("cfi-ui-menu__separator", className), ...rest });
170
+ }
171
+ var MenuSubTrigger = forwardRef2(function MenuSubTrigger2({ className, ...rest }, ref) {
172
+ return /* @__PURE__ */ jsx2(RadixMenu.SubTrigger, { ref, className: cn("cfi-ui-menu__item", className), ...rest });
173
+ });
174
+ var MenuSubContent = forwardRef2(function MenuSubContent2({ className, ...rest }, ref) {
175
+ return /* @__PURE__ */ jsx2(RadixMenu.Portal, { children: /* @__PURE__ */ jsx2(
176
+ RadixMenu.SubContent,
177
+ {
178
+ ref,
179
+ "data-cfi-ui-portal": "",
180
+ className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-menu", className),
181
+ ...rest
182
+ }
183
+ ) });
184
+ });
185
+ function Menu({ trigger, items, align = "end", side = "bottom", className }) {
186
+ return /* @__PURE__ */ jsxs2(MenuRoot, { children: [
187
+ /* @__PURE__ */ jsx2(MenuTrigger, { asChild: true, children: trigger }),
188
+ /* @__PURE__ */ jsx2(MenuContent, { align, side, className, children: items.map((item) => /* @__PURE__ */ jsxs2(Fragment, { children: [
189
+ item.separatorBefore && /* @__PURE__ */ jsx2(MenuSeparator, {}),
190
+ /* @__PURE__ */ jsx2(
191
+ MenuItem,
192
+ {
193
+ icon: item.icon,
194
+ shortcut: item.shortcut,
195
+ variant: item.variant,
196
+ disabled: item.disabled,
197
+ onSelect: item.onSelect,
198
+ children: item.label
199
+ }
200
+ )
201
+ ] }, item.id)) })
202
+ ] });
203
+ }
204
+
205
+ // src/SplitButton.css
206
+ styleInject("@layer components {\n :where(.cfi-ui-splitbutton) {\n display: inline-flex;\n align-items: stretch;\n gap: 0;\n }\n .cfi-ui-splitbutton__main {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n .cfi-ui-splitbutton__toggle {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n padding-inline: var(--cfi-ui-space-xs);\n margin-inline-start: -1px;\n }\n .cfi-ui-splitbutton__toggle--only {\n border-radius: var(--cfi-ui-radius-md);\n margin-inline-start: 0;\n padding-inline: var(--cfi-ui-space-sm);\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-splitbutton__main:focus-visible,\n .cfi-ui-splitbutton__toggle:focus-visible {\n position: relative;\n z-index: 1;\n }\n .cfi-ui-splitbutton__main:hover,\n .cfi-ui-splitbutton__toggle:hover {\n position: relative;\n z-index: 1;\n }\n}\n");
207
+
208
+ // src/SplitButton.tsx
209
+ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
210
+ var SplitButton = forwardRef3(function SplitButton2({ children, onClick, items, variant = "secondary", size = "md", menuLabel, align = "end", className, disabled, ...rest }, ref) {
211
+ if (items.length === 0) {
212
+ return /* @__PURE__ */ jsx3(
213
+ Button,
214
+ {
215
+ ref,
216
+ variant,
217
+ size,
218
+ onClick,
219
+ disabled,
220
+ className,
221
+ ...rest,
222
+ children
223
+ }
224
+ );
225
+ }
226
+ return /* @__PURE__ */ jsxs3("span", { className: cn("cfi-ui", "cfi-ui-splitbutton", className), "data-variant": variant, children: [
227
+ onClick && /* @__PURE__ */ jsx3(
228
+ Button,
229
+ {
230
+ ref,
231
+ variant,
232
+ size,
233
+ onClick,
234
+ disabled,
235
+ className: "cfi-ui-splitbutton__main",
236
+ ...rest,
237
+ children
238
+ }
239
+ ),
240
+ /* @__PURE__ */ jsx3(
241
+ Menu,
242
+ {
243
+ items,
244
+ align,
245
+ trigger: /* @__PURE__ */ jsxs3(
246
+ Button,
247
+ {
248
+ variant,
249
+ size,
250
+ disabled,
251
+ "aria-label": menuLabel,
252
+ title: menuLabel,
253
+ className: cn(
254
+ "cfi-ui-splitbutton__toggle",
255
+ !onClick && "cfi-ui-splitbutton__toggle--only"
256
+ ),
257
+ children: [
258
+ !onClick && children,
259
+ /* @__PURE__ */ jsx3(ChevronDown, { size: 14, "aria-hidden": "true" })
260
+ ]
261
+ }
262
+ )
263
+ }
264
+ )
265
+ ] });
266
+ });
267
+
268
+ // src/FilterBar.tsx
269
+ import { useMemo, useState } from "react";
270
+ import { ListFilter, X } from "lucide-react";
271
+
272
+ // src/Badge.tsx
273
+ import { forwardRef as forwardRef4 } from "react";
274
+
275
+ // src/Badge.css
276
+ styleInject("@layer components {\n :where(.cfi-ui-badge) {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n padding: 0.125rem 0.5rem;\n border: 1px solid transparent;\n border-radius: var(--cfi-ui-radius-full);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-medium);\n line-height: 1.4;\n white-space: nowrap;\n vertical-align: middle;\n }\n .cfi-ui-badge[data-size=sm] {\n padding: 0 0.375rem;\n font-size: 0.6875rem;\n }\n .cfi-ui-badge__dot {\n flex: none;\n width: 0.375rem;\n height: 0.375rem;\n border-radius: var(--cfi-ui-radius-full);\n background: currentColor;\n }\n .cfi-ui-badge__icon {\n display: inline-flex;\n flex: none;\n }\n .cfi-ui-badge__icon > svg {\n width: 0.75rem;\n height: 0.75rem;\n display: block;\n }\n .cfi-ui-badge--count {\n justify-content: center;\n min-width: 1.25rem;\n padding-inline: 0.375rem;\n font-variant-numeric: tabular-nums;\n }\n .cfi-ui-badge[data-variant=soft][data-tone=neutral] {\n background: var(--cfi-ui-neutral-soft);\n color: var(--cfi-ui-neutral-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=success] {\n background: var(--cfi-ui-success-soft);\n color: var(--cfi-ui-success-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=warning] {\n background: var(--cfi-ui-warning-soft);\n color: var(--cfi-ui-warning-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=error] {\n background: var(--cfi-ui-error-soft);\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=info] {\n background: var(--cfi-ui-info-soft);\n color: var(--cfi-ui-info-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=accent] {\n background: var(--cfi-ui-accent-soft);\n color: var(--cfi-ui-accent-hover);\n }\n .cfi-ui-badge[data-variant=solid] {\n color: var(--cfi-ui-content-inverse);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=neutral] {\n background: var(--cfi-ui-content-muted);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=success] {\n background: var(--cfi-ui-success-text);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=warning] {\n background: var(--cfi-ui-warning-text);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=error] {\n background: var(--cfi-ui-error-text);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=info] {\n background: var(--cfi-ui-info-text);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=accent] {\n background: var(--cfi-ui-accent);\n color: var(--cfi-ui-accent-fg);\n }\n .cfi-ui-badge[data-variant=outline] {\n background: transparent;\n }\n .cfi-ui-badge[data-variant=outline][data-tone=neutral] {\n border-color: var(--cfi-ui-neutral-border);\n color: var(--cfi-ui-neutral-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=success] {\n border-color: var(--cfi-ui-success-border);\n color: var(--cfi-ui-success-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=warning] {\n border-color: var(--cfi-ui-warning-border);\n color: var(--cfi-ui-warning-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=error] {\n border-color: var(--cfi-ui-error-border);\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=info] {\n border-color: var(--cfi-ui-info-border);\n color: var(--cfi-ui-info-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=accent] {\n border-color: var(--cfi-ui-accent);\n color: var(--cfi-ui-accent-hover);\n }\n}\n");
277
+
278
+ // src/Badge.tsx
279
+ import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
280
+ var Badge = forwardRef4(function Badge2({ tone = "neutral", variant = "soft", size = "md", dot = false, icon, className, children, ...rest }, ref) {
281
+ return /* @__PURE__ */ jsxs4(
282
+ "span",
283
+ {
284
+ ref,
285
+ "data-tone": tone,
286
+ "data-variant": variant,
287
+ "data-size": size,
288
+ className: cn("cfi-ui", "cfi-ui-badge", className),
289
+ ...rest,
290
+ children: [
291
+ icon ? /* @__PURE__ */ jsx4("span", { className: "cfi-ui-badge__icon", children: icon }) : dot && /* @__PURE__ */ jsx4("span", { className: "cfi-ui-badge__dot", "aria-hidden": "true" }),
292
+ children
293
+ ]
294
+ }
295
+ );
296
+ });
297
+ var CountBadge = forwardRef4(function CountBadge2({ count, max = 99, hideZero = true, className, ...rest }, ref) {
298
+ if (count === 0 && hideZero) return null;
299
+ return /* @__PURE__ */ jsx4(Badge, { ref, className: cn("cfi-ui-badge--count", className), ...rest, children: count > max ? `${max}+` : count });
300
+ });
301
+
302
+ // src/Popover.tsx
303
+ import { forwardRef as forwardRef5 } from "react";
304
+ import * as RadixPopover from "@radix-ui/react-popover";
305
+ import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
306
+ var PopoverRoot = RadixPopover.Root;
307
+ var PopoverTrigger = RadixPopover.Trigger;
308
+ var PopoverAnchor = RadixPopover.Anchor;
309
+ var PopoverClose = RadixPopover.Close;
310
+ var PopoverContent = forwardRef5(function PopoverContent2({ showArrow = false, flush = false, className, children, sideOffset = 6, collisionPadding = 8, ...rest }, ref) {
311
+ return /* @__PURE__ */ jsx5(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs5(
312
+ RadixPopover.Content,
313
+ {
314
+ ref,
315
+ sideOffset,
316
+ collisionPadding,
317
+ "data-cfi-ui-portal": "",
318
+ "data-flush": flush || void 0,
319
+ className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-popover", className),
320
+ ...rest,
321
+ children: [
322
+ children,
323
+ showArrow && /* @__PURE__ */ jsx5(RadixPopover.Arrow, { className: "cfi-ui-floating__arrow", width: 11, height: 5 })
324
+ ]
325
+ }
326
+ ) });
327
+ });
328
+ function Popover({ trigger, open, onOpenChange, defaultOpen, modal, children, ...content }) {
329
+ return /* @__PURE__ */ jsxs5(PopoverRoot, { open, onOpenChange, defaultOpen, modal, children: [
330
+ /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: trigger }),
331
+ /* @__PURE__ */ jsx5(PopoverContent, { ...content, children })
332
+ ] });
333
+ }
334
+
335
+ // src/Select.tsx
336
+ import { forwardRef as forwardRef6 } from "react";
337
+ import * as RadixSelect from "@radix-ui/react-select";
338
+ import { Check as Check2, ChevronDown as ChevronDown2, ChevronUp } from "lucide-react";
339
+
340
+ // src/Select.css
341
+ styleInject("@layer components {\n :where(.cfi-ui-select) {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--cfi-ui-space-sm);\n height: var(--cfi-ui-control-height-md);\n padding-inline: 0.625rem;\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border-strong);\n border-radius: var(--cfi-ui-radius-md);\n font-family: inherit;\n font-size: var(--cfi-ui-text-sm);\n line-height: normal;\n cursor: pointer;\n transition: border-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-select--full {\n width: 100%;\n }\n .cfi-ui-select:hover:not(:disabled) {\n border-color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-select:disabled {\n background: var(--cfi-ui-surface-disabled);\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-select[data-invalid] {\n border-color: var(--cfi-ui-error);\n }\n .cfi-ui-select[data-size=sm] {\n height: var(--cfi-ui-control-height-sm);\n padding-inline: 0.5rem;\n font-size: var(--cfi-ui-text-xs);\n }\n .cfi-ui-select[data-size=lg] {\n height: var(--cfi-ui-control-height-lg);\n padding-inline: 0.875rem;\n font-size: var(--cfi-ui-text-base);\n }\n .cfi-ui-select[data-placeholder] .cfi-ui-select__value {\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-select__value {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n }\n .cfi-ui-select__chevron {\n display: inline-flex;\n flex: none;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-select__chevron > svg {\n width: 0.875rem;\n height: 0.875rem;\n display: block;\n }\n .cfi-ui-select-scroll {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 1.25rem;\n color: var(--cfi-ui-content-muted);\n cursor: default;\n }\n .cfi-ui-select-scroll > svg {\n width: 0.875rem;\n height: 0.875rem;\n }\n}\n");
342
+
343
+ // src/Select.tsx
344
+ import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
345
+ var SelectRoot = RadixSelect.Root;
346
+ var SelectValue = RadixSelect.Value;
347
+ var SelectGroup = RadixSelect.Group;
348
+ var SelectTrigger = forwardRef6(
349
+ function SelectTrigger2({ size = "md", invalid, className, children, ...rest }, ref) {
350
+ return /* @__PURE__ */ jsxs6(
351
+ RadixSelect.Trigger,
352
+ {
353
+ ref,
354
+ "data-size": size,
355
+ "data-invalid": invalid || void 0,
356
+ "aria-invalid": invalid || void 0,
357
+ className: cn("cfi-ui", "cfi-ui-select", className),
358
+ ...rest,
359
+ children: [
360
+ /* @__PURE__ */ jsx6("span", { className: "cfi-ui-select__value", children }),
361
+ /* @__PURE__ */ jsx6(RadixSelect.Icon, { className: "cfi-ui-select__chevron", children: /* @__PURE__ */ jsx6(ChevronDown2, {}) })
362
+ ]
363
+ }
364
+ );
365
+ }
366
+ );
367
+ var SelectContent = forwardRef6(function SelectContent2({ className, children, position = "popper", sideOffset = 4, ...rest }, ref) {
368
+ return /* @__PURE__ */ jsx6(RadixSelect.Portal, { children: /* @__PURE__ */ jsxs6(
369
+ RadixSelect.Content,
370
+ {
371
+ ref,
372
+ position,
373
+ sideOffset,
374
+ "data-cfi-ui-portal": "",
375
+ className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-select-content", className),
376
+ ...rest,
377
+ children: [
378
+ /* @__PURE__ */ jsx6(RadixSelect.ScrollUpButton, { className: "cfi-ui-select-scroll", children: /* @__PURE__ */ jsx6(ChevronUp, {}) }),
379
+ /* @__PURE__ */ jsx6(RadixSelect.Viewport, { className: "cfi-ui-select-viewport", children }),
380
+ /* @__PURE__ */ jsx6(RadixSelect.ScrollDownButton, { className: "cfi-ui-select-scroll", children: /* @__PURE__ */ jsx6(ChevronDown2, {}) })
381
+ ]
382
+ }
383
+ ) });
384
+ });
385
+ var SelectItem = forwardRef6(function SelectItem2({ className, children, ...rest }, ref) {
386
+ return /* @__PURE__ */ jsxs6(RadixSelect.Item, { ref, className: cn("cfi-ui-select-item", className), ...rest, children: [
387
+ /* @__PURE__ */ jsx6("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx6(RadixSelect.ItemIndicator, { children: /* @__PURE__ */ jsx6(Check2, {}) }) }),
388
+ /* @__PURE__ */ jsx6(RadixSelect.ItemText, { children })
389
+ ] });
390
+ });
391
+ function SelectLabel({ className, ...rest }) {
392
+ return /* @__PURE__ */ jsx6(RadixSelect.Label, { className: cn("cfi-ui-menu__label", className), ...rest });
393
+ }
394
+ function SelectSeparator({
395
+ className,
396
+ ...rest
397
+ }) {
398
+ return /* @__PURE__ */ jsx6(RadixSelect.Separator, { className: cn("cfi-ui-menu__separator", className), ...rest });
399
+ }
400
+ function Select({
401
+ options,
402
+ value,
403
+ onValueChange,
404
+ defaultValue,
405
+ placeholder = "Select...",
406
+ size = "md",
407
+ invalid,
408
+ disabled,
409
+ required,
410
+ name,
411
+ id,
412
+ className,
413
+ fullWidth = true,
414
+ emptyLabel = "No options",
415
+ onOpenChange,
416
+ onBlur,
417
+ ...aria
418
+ }) {
419
+ const groups = [];
420
+ for (const option of options) {
421
+ const existing = groups.find((g) => g.name === option.group);
422
+ if (existing) existing.options.push(option);
423
+ else groups.push({ name: option.group, options: [option] });
424
+ }
425
+ return /* @__PURE__ */ jsxs6(
426
+ SelectRoot,
427
+ {
428
+ value,
429
+ onValueChange,
430
+ defaultValue,
431
+ disabled,
432
+ required,
433
+ name,
434
+ onOpenChange,
435
+ children: [
436
+ /* @__PURE__ */ jsx6(
437
+ SelectTrigger,
438
+ {
439
+ id,
440
+ size,
441
+ invalid,
442
+ className: cn(fullWidth && "cfi-ui-select--full", className),
443
+ onBlur,
444
+ ...aria,
445
+ children: /* @__PURE__ */ jsx6(SelectValue, { placeholder })
446
+ }
447
+ ),
448
+ /* @__PURE__ */ jsxs6(SelectContent, { children: [
449
+ groups.map(
450
+ (group, i) => group.name ? /* @__PURE__ */ jsxs6(SelectGroup, { children: [
451
+ i > 0 && /* @__PURE__ */ jsx6(SelectSeparator, {}),
452
+ /* @__PURE__ */ jsx6(SelectLabel, { children: group.name }),
453
+ group.options.map((o) => /* @__PURE__ */ jsx6(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
454
+ ] }, group.name) : group.options.map((o) => /* @__PURE__ */ jsx6(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
455
+ ),
456
+ options.length === 0 && /* @__PURE__ */ jsx6("p", { className: "cfi-ui-select-empty", children: emptyLabel })
457
+ ] })
458
+ ]
459
+ }
460
+ );
461
+ }
462
+
463
+ // src/Switch.tsx
464
+ import { forwardRef as forwardRef7 } from "react";
465
+ import * as RadixSwitch from "@radix-ui/react-switch";
466
+
467
+ // src/Switch.css
468
+ styleInject("@layer components {\n .cfi-ui-switch {\n flex: none;\n position: relative;\n display: inline-flex;\n align-items: center;\n width: 2rem;\n height: 1.125rem;\n padding: 0;\n border: 1px solid transparent;\n border-radius: var(--cfi-ui-radius-full);\n background: var(--cfi-ui-switch-bg);\n cursor: pointer;\n transition: background-color var(--cfi-ui-transition-base);\n }\n .cfi-ui-switch[data-state=checked] {\n background: var(--cfi-ui-accent);\n }\n .cfi-ui-switch:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n .cfi-ui-switch__thumb {\n display: block;\n width: 0.875rem;\n height: 0.875rem;\n border-radius: var(--cfi-ui-radius-full);\n background: #ffffff;\n box-shadow: var(--cfi-ui-shadow-sm);\n transform: translateX(0.125rem);\n transition: transform var(--cfi-ui-transition-base);\n will-change: transform;\n }\n .cfi-ui-switch__thumb[data-state=checked] {\n transform: translateX(1rem);\n }\n .cfi-ui-switch-row {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-md);\n }\n .cfi-ui-switch-row[data-label-position=end] .cfi-ui-switch-row__text {\n flex: 1 1 auto;\n }\n .cfi-ui-switch-row__text {\n display: grid;\n gap: var(--cfi-ui-space-3xs);\n min-width: 0;\n }\n .cfi-ui-switch-row__label {\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content);\n cursor: pointer;\n }\n .cfi-ui-switch-row__description {\n font-size: var(--cfi-ui-text-xs);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content-muted);\n }\n}\n");
469
+
470
+ // src/Switch.tsx
471
+ import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
472
+ var Switch = forwardRef7(
473
+ function Switch2({ label, description, labelPosition = "end", className, id, ...rest }, ref) {
474
+ const control = /* @__PURE__ */ jsx7(
475
+ RadixSwitch.Root,
476
+ {
477
+ ref,
478
+ id,
479
+ className: cn("cfi-ui", "cfi-ui-switch", !label && className),
480
+ ...rest,
481
+ children: /* @__PURE__ */ jsx7(RadixSwitch.Thumb, { className: "cfi-ui-switch__thumb" })
482
+ }
483
+ );
484
+ if (!label) return control;
485
+ return /* @__PURE__ */ jsxs7("div", { "data-label-position": labelPosition, className: cn("cfi-ui", "cfi-ui-switch-row", className), children: [
486
+ labelPosition === "start" && control,
487
+ /* @__PURE__ */ jsxs7("div", { className: "cfi-ui-switch-row__text", children: [
488
+ /* @__PURE__ */ jsx7("label", { htmlFor: id, className: "cfi-ui-switch-row__label", children: label }),
489
+ description && /* @__PURE__ */ jsx7("span", { className: "cfi-ui-switch-row__description", children: description })
490
+ ] }),
491
+ labelPosition === "end" && control
492
+ ] });
493
+ }
494
+ );
495
+
496
+ // src/FilterBar.css
497
+ styleInject('@layer components {\n :where(.cfi-ui-filterbar) {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--cfi-ui-space-xs);\n min-width: 0;\n }\n .cfi-ui-filterbar__panel {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-ui-space-sm);\n min-width: 15rem;\n }\n .cfi-ui-filterbar__field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n .cfi-ui-filterbar__field-label {\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-filterbar__toggle {\n padding-block: 0.125rem;\n }\n .cfi-ui-filterbar__chip {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.125rem 0.25rem 0.125rem 0.5rem;\n border: 1px solid var(--cfi-ui-border);\n border-radius: var(--cfi-ui-radius-full);\n background: var(--cfi-ui-surface);\n font-size: var(--cfi-ui-text-xs);\n white-space: nowrap;\n }\n .cfi-ui-filterbar__chip-name {\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-filterbar__chip-name::after {\n content: ":";\n }\n .cfi-ui-filterbar__chip-x {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n border: 0;\n border-radius: var(--cfi-ui-radius-full);\n background: none;\n color: var(--cfi-ui-content-muted);\n cursor: pointer;\n }\n .cfi-ui-filterbar__chip-x:hover {\n background: var(--cfi-ui-surface-hover);\n color: var(--cfi-ui-content);\n }\n}\n');
498
+
499
+ // src/FilterBar.tsx
500
+ import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
501
+ function FilterBar({
502
+ selects = [],
503
+ toggles = [],
504
+ value,
505
+ onChange,
506
+ label = "Filters",
507
+ clearLabel = "Clear filters",
508
+ removeLabel = (name) => `Remove the ${name} filter`,
509
+ className
510
+ }) {
511
+ const [open, setOpen] = useState(false);
512
+ const applied = useMemo(() => {
513
+ const out = [];
514
+ for (const s of selects) {
515
+ const v = value[s.id];
516
+ if (typeof v !== "string" || v === "") continue;
517
+ const opt = s.options.find((o) => o.value === v);
518
+ out.push({ id: s.id, name: s.label, display: opt ? opt.label : v });
519
+ }
520
+ for (const tg of toggles) {
521
+ if (value[tg.id] === true) out.push({ id: tg.id, name: tg.label, display: tg.label });
522
+ }
523
+ return out;
524
+ }, [selects, toggles, value]);
525
+ const set = (id, next) => onChange({ ...value, [id]: next });
526
+ const clearAll = () => {
527
+ const next = { ...value };
528
+ for (const s of selects) delete next[s.id];
529
+ for (const tg of toggles) delete next[tg.id];
530
+ onChange(next);
531
+ };
532
+ return /* @__PURE__ */ jsxs8("div", { className: cn("cfi-ui", "cfi-ui-filterbar", className), children: [
533
+ /* @__PURE__ */ jsx8(
534
+ Popover,
535
+ {
536
+ open,
537
+ onOpenChange: setOpen,
538
+ align: "start",
539
+ trigger: /* @__PURE__ */ jsxs8(Button, { leadingIcon: /* @__PURE__ */ jsx8(ListFilter, { size: 14 }), "aria-expanded": open, children: [
540
+ label,
541
+ applied.length > 0 && /* @__PURE__ */ jsx8(CountBadge, { count: applied.length, size: "sm" })
542
+ ] }),
543
+ children: /* @__PURE__ */ jsxs8("div", { className: "cfi-ui-filterbar__panel", children: [
544
+ selects.map((s) => /* @__PURE__ */ jsxs8("label", { className: "cfi-ui-filterbar__field", children: [
545
+ /* @__PURE__ */ jsx8("span", { className: "cfi-ui-filterbar__field-label", children: s.label }),
546
+ /* @__PURE__ */ jsx8(
547
+ Select,
548
+ {
549
+ size: "sm",
550
+ fullWidth: true,
551
+ "aria-label": s.label,
552
+ value: typeof value[s.id] === "string" ? value[s.id] : void 0,
553
+ placeholder: `All ${s.label.toLowerCase()}`,
554
+ options: s.options,
555
+ onValueChange: (v) => set(s.id, v)
556
+ }
557
+ )
558
+ ] }, s.id)),
559
+ toggles.map((tg) => /* @__PURE__ */ jsx8("div", { className: "cfi-ui-filterbar__toggle", children: /* @__PURE__ */ jsx8(
560
+ Switch,
561
+ {
562
+ checked: value[tg.id] === true,
563
+ onCheckedChange: (on) => set(tg.id, on || void 0),
564
+ label: tg.label,
565
+ description: tg.hint
566
+ }
567
+ ) }, tg.id)),
568
+ applied.length > 0 && /* @__PURE__ */ jsx8(Button, { variant: "ghost", size: "sm", onClick: clearAll, children: clearLabel })
569
+ ] })
570
+ }
571
+ ),
572
+ applied.map((a) => /* @__PURE__ */ jsxs8("span", { className: "cfi-ui-filterbar__chip", children: [
573
+ /* @__PURE__ */ jsx8("span", { className: "cfi-ui-filterbar__chip-name", children: a.name }),
574
+ a.display,
575
+ /* @__PURE__ */ jsx8(
576
+ "button",
577
+ {
578
+ type: "button",
579
+ className: "cfi-ui-filterbar__chip-x",
580
+ "aria-label": removeLabel(a.name),
581
+ onClick: () => set(a.id, void 0),
582
+ children: /* @__PURE__ */ jsx8(X, { size: 12, "aria-hidden": "true" })
583
+ }
584
+ )
585
+ ] }, a.id))
586
+ ] });
587
+ }
588
+
100
589
  // src/Input.tsx
101
- import { forwardRef as forwardRef2 } from "react";
590
+ import { forwardRef as forwardRef8 } from "react";
102
591
 
103
592
  // src/Input.css
104
593
  styleInject("@layer components {\n :where(.cfi-ui-input, .cfi-ui-textarea) {\n display: block;\n width: 100%;\n min-width: 0;\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border-strong);\n border-radius: var(--cfi-ui-radius-md);\n font-family: inherit;\n font-size: var(--cfi-ui-text-sm);\n transition: border-color var(--cfi-ui-transition-fast), background-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-input {\n height: var(--cfi-ui-control-height-md);\n padding-inline: 0.625rem;\n }\n .cfi-ui-textarea {\n padding: 0.5rem 0.625rem;\n line-height: var(--cfi-ui-leading-normal);\n resize: vertical;\n min-height: calc(var(--cfi-ui-control-height-md) * 1.5);\n }\n .cfi-ui-input[data-size=sm] {\n height: var(--cfi-ui-control-height-sm);\n padding-inline: 0.5rem;\n font-size: var(--cfi-ui-text-xs);\n }\n .cfi-ui-input[data-size=lg] {\n height: var(--cfi-ui-control-height-lg);\n padding-inline: 0.875rem;\n font-size: var(--cfi-ui-text-base);\n }\n .cfi-ui-input::placeholder,\n .cfi-ui-textarea::placeholder {\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-input:hover:not(:disabled),\n .cfi-ui-textarea:hover:not(:disabled) {\n border-color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-input:disabled,\n .cfi-ui-textarea:disabled {\n background: var(--cfi-ui-surface-disabled);\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-input:read-only:not(:disabled),\n .cfi-ui-textarea:read-only:not(:disabled) {\n background: var(--cfi-ui-surface-sunken);\n border-color: var(--cfi-ui-border);\n }\n .cfi-ui-input[data-invalid],\n .cfi-ui-textarea[data-invalid] {\n border-color: var(--cfi-ui-error);\n }\n .cfi-ui-input[type=number],\n .cfi-ui-input[inputmode=decimal],\n .cfi-ui-input[inputmode=numeric] {\n font-variant-numeric: tabular-nums;\n text-align: right;\n }\n .cfi-ui-input[type=number]::-webkit-outer-spin-button,\n .cfi-ui-input[type=number]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n .cfi-ui-input[type=number] {\n appearance: textfield;\n }\n :where(.cfi-ui-input-wrap) {\n display: flex;\n align-items: center;\n width: 100%;\n background: var(--cfi-ui-surface);\n border: 1px solid var(--cfi-ui-border-strong);\n border-radius: var(--cfi-ui-radius-md);\n transition: border-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-input-wrap:hover:not([data-disabled]) {\n border-color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-input-wrap:focus-within {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: var(--cfi-ui-focus-offset);\n }\n .cfi-ui-input-wrap[data-invalid] {\n border-color: var(--cfi-ui-error);\n }\n .cfi-ui-input-wrap[data-disabled] {\n background: var(--cfi-ui-surface-disabled);\n }\n .cfi-ui-input-wrap > .cfi-ui-input {\n border: 0;\n background: transparent;\n border-radius: 0;\n flex: 1 1 auto;\n }\n .cfi-ui-input-wrap > .cfi-ui-input:focus-visible {\n outline: none;\n }\n .cfi-ui-input-wrap__affix {\n display: inline-flex;\n align-items: center;\n flex: none;\n padding-inline: 0.625rem;\n color: var(--cfi-ui-content-muted);\n font-size: var(--cfi-ui-text-sm);\n white-space: nowrap;\n }\n .cfi-ui-input-wrap__affix > svg {\n width: 1em;\n height: 1em;\n display: block;\n }\n .cfi-ui-input-wrap__affix:first-child {\n padding-right: 0;\n }\n .cfi-ui-input-wrap__affix:last-child {\n padding-left: 0;\n }\n .cfi-ui-input-wrap[data-size=sm] {\n font-size: var(--cfi-ui-text-xs);\n }\n .cfi-ui-input-wrap[data-size=sm] > .cfi-ui-input {\n height: var(--cfi-ui-control-height-sm);\n }\n .cfi-ui-input-wrap[data-size=lg] > .cfi-ui-input {\n height: var(--cfi-ui-control-height-lg);\n }\n}\n");
105
594
 
106
595
  // src/Input.tsx
107
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
108
- var Input = forwardRef2(function Input2({ size = "md", invalid, prefix, suffix, className, disabled, ...rest }, ref) {
109
- const field = /* @__PURE__ */ jsx2(
596
+ import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
597
+ var Input = forwardRef8(function Input2({ size = "md", invalid, prefix, suffix, className, disabled, ...rest }, ref) {
598
+ const field = /* @__PURE__ */ jsx9(
110
599
  "input",
111
600
  {
112
601
  ref,
@@ -119,7 +608,7 @@ var Input = forwardRef2(function Input2({ size = "md", invalid, prefix, suffix,
119
608
  }
120
609
  );
121
610
  if (!prefix && !suffix) return field;
122
- return /* @__PURE__ */ jsxs2(
611
+ return /* @__PURE__ */ jsxs9(
123
612
  "div",
124
613
  {
125
614
  "data-size": size,
@@ -127,15 +616,15 @@ var Input = forwardRef2(function Input2({ size = "md", invalid, prefix, suffix,
127
616
  "data-disabled": disabled || void 0,
128
617
  className: cn("cfi-ui", "cfi-ui-input-wrap"),
129
618
  children: [
130
- prefix && /* @__PURE__ */ jsx2("span", { className: "cfi-ui-input-wrap__affix", children: prefix }),
619
+ prefix && /* @__PURE__ */ jsx9("span", { className: "cfi-ui-input-wrap__affix", children: prefix }),
131
620
  field,
132
- suffix && /* @__PURE__ */ jsx2("span", { className: "cfi-ui-input-wrap__affix", children: suffix })
621
+ suffix && /* @__PURE__ */ jsx9("span", { className: "cfi-ui-input-wrap__affix", children: suffix })
133
622
  ]
134
623
  }
135
624
  );
136
625
  });
137
- var Textarea = forwardRef2(function Textarea2({ invalid, className, rows = 3, ...rest }, ref) {
138
- return /* @__PURE__ */ jsx2(
626
+ var Textarea = forwardRef8(function Textarea2({ invalid, className, rows = 3, ...rest }, ref) {
627
+ return /* @__PURE__ */ jsx9(
139
628
  "textarea",
140
629
  {
141
630
  ref,
@@ -155,11 +644,11 @@ import { Children, cloneElement, createContext, isValidElement, useContext, useI
155
644
  styleInject('@layer components {\n .cfi-ui-label {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-3xs);\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n color: var(--cfi-ui-content);\n line-height: var(--cfi-ui-leading-normal);\n }\n .cfi-ui-label__required {\n color: var(--cfi-ui-error);\n font-weight: var(--cfi-ui-weight-semibold);\n }\n .cfi-ui-field {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-field__label {\n justify-self: start;\n }\n .cfi-ui-field__body {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--cfi-ui-space-xs);\n min-width: 0;\n }\n .cfi-ui-field__hint,\n .cfi-ui-field__error {\n margin: 0;\n font-size: var(--cfi-ui-text-xs);\n line-height: var(--cfi-ui-leading-normal);\n }\n .cfi-ui-field__hint {\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-field__error {\n color: var(--cfi-ui-error-text);\n font-weight: var(--cfi-ui-weight-medium);\n }\n .cfi-ui-field[data-orientation=horizontal] {\n grid-template-columns: minmax(8rem, 12rem) 1fr;\n align-items: start;\n gap: var(--cfi-ui-space-md);\n }\n .cfi-ui-field[data-orientation=horizontal] .cfi-ui-field__label {\n padding-top: 0.4375rem;\n }\n @media (max-width: 640px) {\n .cfi-ui-field[data-orientation=horizontal] {\n grid-template-columns: 1fr;\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-field[data-orientation=horizontal] .cfi-ui-field__label {\n padding-top: 0;\n }\n }\n .cfi-ui-fieldset {\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n }\n .cfi-ui-fieldset__legend {\n padding: 0 0 var(--cfi-ui-space-sm);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-semibold);\n letter-spacing: var(--cfi-ui-tracking-caps);\n text-transform: uppercase;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-fieldset__body {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--cfi-ui-space-md);\n }\n .cfi-ui-fieldset[data-columns="2"] .cfi-ui-fieldset__body {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .cfi-ui-fieldset[data-columns="3"] .cfi-ui-fieldset__body {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n @media (max-width: 720px) {\n .cfi-ui-fieldset[data-columns="2"] .cfi-ui-fieldset__body,\n .cfi-ui-fieldset[data-columns="3"] .cfi-ui-fieldset__body {\n grid-template-columns: 1fr;\n }\n }\n}\n');
156
645
 
157
646
  // src/Field.tsx
158
- import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
159
- function Label({ required, className, children, ...rest }) {
160
- return /* @__PURE__ */ jsxs3("label", { className: cn("cfi-ui", "cfi-ui-label", className), ...rest, children: [
647
+ import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
648
+ function Label3({ required, className, children, ...rest }) {
649
+ return /* @__PURE__ */ jsxs10("label", { className: cn("cfi-ui", "cfi-ui-label", className), ...rest, children: [
161
650
  children,
162
- required && /* @__PURE__ */ jsx3("span", { className: "cfi-ui-label__required", "aria-hidden": "true", children: "*" })
651
+ required && /* @__PURE__ */ jsx10("span", { className: "cfi-ui-label__required", "aria-hidden": "true", children: "*" })
163
652
  ] });
164
653
  }
165
654
  var FieldContext = createContext(null);
@@ -182,19 +671,19 @@ function Field({
182
671
  const errorId = `${controlId}-error`;
183
672
  const invalid = error != null && error !== false && error !== "";
184
673
  const describedBy = invalid ? errorId : hint ? hintId : void 0;
185
- return /* @__PURE__ */ jsx3(FieldContext.Provider, { value: { controlId, describedBy, invalid, required }, children: /* @__PURE__ */ jsxs3("div", { "data-orientation": orientation, className: cn("cfi-ui", "cfi-ui-field", className), children: [
186
- /* @__PURE__ */ jsx3(Label, { htmlFor: controlId, required, className: "cfi-ui-field__label", children: label }),
187
- /* @__PURE__ */ jsxs3("div", { className: "cfi-ui-field__body", children: [
188
- /* @__PURE__ */ jsx3(FieldControl, { children }),
189
- invalid ? /* @__PURE__ */ jsx3("p", { id: errorId, className: "cfi-ui-field__error", role: "alert", children: error }) : hint && /* @__PURE__ */ jsx3("p", { id: hintId, className: "cfi-ui-field__hint", children: hint })
674
+ return /* @__PURE__ */ jsx10(FieldContext.Provider, { value: { controlId, describedBy, invalid, required }, children: /* @__PURE__ */ jsxs10("div", { "data-orientation": orientation, className: cn("cfi-ui", "cfi-ui-field", className), children: [
675
+ /* @__PURE__ */ jsx10(Label3, { htmlFor: controlId, required, className: "cfi-ui-field__label", children: label }),
676
+ /* @__PURE__ */ jsxs10("div", { className: "cfi-ui-field__body", children: [
677
+ /* @__PURE__ */ jsx10(FieldControl, { children }),
678
+ invalid ? /* @__PURE__ */ jsx10("p", { id: errorId, className: "cfi-ui-field__error", role: "alert", children: error }) : hint && /* @__PURE__ */ jsx10("p", { id: hintId, className: "cfi-ui-field__hint", children: hint })
190
679
  ] })
191
680
  ] }) });
192
681
  }
193
682
  function FieldControl({ children }) {
194
683
  const ctx = useContext(FieldContext);
195
- if (!ctx) return /* @__PURE__ */ jsx3(Fragment, { children });
684
+ if (!ctx) return /* @__PURE__ */ jsx10(Fragment2, { children });
196
685
  const only = Children.count(children) === 1 ? Children.toArray(children)[0] : null;
197
- if (!only || !isValidElement(only)) return /* @__PURE__ */ jsx3(Fragment, { children });
686
+ if (!only || !isValidElement(only)) return /* @__PURE__ */ jsx10(Fragment2, { children });
198
687
  const props = only.props;
199
688
  return cloneElement(only, {
200
689
  id: props.id ?? ctx.controlId,
@@ -207,25 +696,25 @@ function FieldControl({ children }) {
207
696
  });
208
697
  }
209
698
  function Fieldset({ legend, columns = 1, className, children, ...rest }) {
210
- return /* @__PURE__ */ jsxs3("fieldset", { "data-columns": columns, className: cn("cfi-ui", "cfi-ui-fieldset", className), ...rest, children: [
211
- /* @__PURE__ */ jsx3("legend", { className: "cfi-ui-fieldset__legend", children: legend }),
212
- /* @__PURE__ */ jsx3("div", { className: "cfi-ui-fieldset__body", children })
699
+ return /* @__PURE__ */ jsxs10("fieldset", { "data-columns": columns, className: cn("cfi-ui", "cfi-ui-fieldset", className), ...rest, children: [
700
+ /* @__PURE__ */ jsx10("legend", { className: "cfi-ui-fieldset__legend", children: legend }),
701
+ /* @__PURE__ */ jsx10("div", { className: "cfi-ui-fieldset__body", children })
213
702
  ] });
214
703
  }
215
704
 
216
705
  // src/Checkbox.tsx
217
- import { forwardRef as forwardRef3 } from "react";
706
+ import { forwardRef as forwardRef9 } from "react";
218
707
  import * as RadixCheckbox from "@radix-ui/react-checkbox";
219
- import { Check, Minus } from "lucide-react";
708
+ import { Check as Check3, Minus } from "lucide-react";
220
709
 
221
710
  // src/Checkbox.css
222
711
  styleInject("@layer components {\n .cfi-ui-checkbox {\n flex: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n padding: 0;\n background: var(--cfi-ui-input-bg);\n border: 1px solid var(--cfi-ui-border-strong);\n border-radius: 4px;\n cursor: pointer;\n transition: background-color var(--cfi-ui-transition-fast), border-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-checkbox:hover:not(:disabled) {\n border-color: var(--cfi-ui-accent);\n }\n .cfi-ui-checkbox[data-state=checked],\n .cfi-ui-checkbox[data-state=indeterminate] {\n background: var(--cfi-ui-accent);\n border-color: var(--cfi-ui-accent);\n color: var(--cfi-ui-accent-fg);\n }\n .cfi-ui-checkbox[data-invalid] {\n border-color: var(--cfi-ui-error);\n }\n .cfi-ui-checkbox:disabled {\n cursor: not-allowed;\n background: var(--cfi-ui-surface-disabled);\n border-color: var(--cfi-ui-border);\n opacity: 0.65;\n }\n .cfi-ui-checkbox__indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .cfi-ui-checkbox__indicator > svg {\n width: 0.75rem;\n height: 0.75rem;\n stroke-width: 3;\n display: block;\n }\n .cfi-ui-checkbox-row {\n display: flex;\n align-items: flex-start;\n gap: var(--cfi-ui-space-sm);\n }\n .cfi-ui-checkbox-row > .cfi-ui-checkbox {\n margin-top: 0.1875rem;\n }\n .cfi-ui-checkbox-row__text {\n display: grid;\n gap: var(--cfi-ui-space-3xs);\n min-width: 0;\n }\n .cfi-ui-checkbox-row__label {\n font-size: var(--cfi-ui-text-sm);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content);\n cursor: pointer;\n }\n .cfi-ui-checkbox-row__description {\n font-size: var(--cfi-ui-text-xs);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content-muted);\n }\n}\n");
223
712
 
224
713
  // src/Checkbox.tsx
225
- import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
226
- var Checkbox = forwardRef3(
714
+ import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
715
+ var Checkbox = forwardRef9(
227
716
  function Checkbox2({ label, description, invalid, className, id, ...rest }, ref) {
228
- const box = /* @__PURE__ */ jsx4(
717
+ const box = /* @__PURE__ */ jsx11(
229
718
  RadixCheckbox.Root,
230
719
  {
231
720
  ref,
@@ -234,96 +723,63 @@ var Checkbox = forwardRef3(
234
723
  "data-invalid": invalid || void 0,
235
724
  className: cn("cfi-ui", "cfi-ui-checkbox", !label && className),
236
725
  ...rest,
237
- children: /* @__PURE__ */ jsx4(RadixCheckbox.Indicator, { className: "cfi-ui-checkbox__indicator", children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx4(Minus, {}) : /* @__PURE__ */ jsx4(Check, {}) })
726
+ children: /* @__PURE__ */ jsx11(RadixCheckbox.Indicator, { className: "cfi-ui-checkbox__indicator", children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx11(Minus, {}) : /* @__PURE__ */ jsx11(Check3, {}) })
238
727
  }
239
728
  );
240
729
  if (!label) return box;
241
- return /* @__PURE__ */ jsxs4("div", { className: cn("cfi-ui", "cfi-ui-checkbox-row", className), children: [
730
+ return /* @__PURE__ */ jsxs11("div", { className: cn("cfi-ui", "cfi-ui-checkbox-row", className), children: [
242
731
  box,
243
- /* @__PURE__ */ jsxs4("div", { className: "cfi-ui-checkbox-row__text", children: [
244
- /* @__PURE__ */ jsx4("label", { htmlFor: id, className: "cfi-ui-checkbox-row__label", children: label }),
245
- description && /* @__PURE__ */ jsx4("span", { className: "cfi-ui-checkbox-row__description", children: description })
732
+ /* @__PURE__ */ jsxs11("div", { className: "cfi-ui-checkbox-row__text", children: [
733
+ /* @__PURE__ */ jsx11("label", { htmlFor: id, className: "cfi-ui-checkbox-row__label", children: label }),
734
+ description && /* @__PURE__ */ jsx11("span", { className: "cfi-ui-checkbox-row__description", children: description })
246
735
  ] })
247
736
  ] });
248
737
  }
249
738
  );
250
739
 
251
- // src/Switch.tsx
252
- import { forwardRef as forwardRef4 } from "react";
253
- import * as RadixSwitch from "@radix-ui/react-switch";
254
-
255
- // src/Switch.css
256
- styleInject("@layer components {\n .cfi-ui-switch {\n flex: none;\n position: relative;\n display: inline-flex;\n align-items: center;\n width: 2rem;\n height: 1.125rem;\n padding: 0;\n border: 1px solid transparent;\n border-radius: var(--cfi-ui-radius-full);\n background: var(--cfi-ui-switch-bg);\n cursor: pointer;\n transition: background-color var(--cfi-ui-transition-base);\n }\n .cfi-ui-switch[data-state=checked] {\n background: var(--cfi-ui-accent);\n }\n .cfi-ui-switch:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n .cfi-ui-switch__thumb {\n display: block;\n width: 0.875rem;\n height: 0.875rem;\n border-radius: var(--cfi-ui-radius-full);\n background: #ffffff;\n box-shadow: var(--cfi-ui-shadow-sm);\n transform: translateX(0.125rem);\n transition: transform var(--cfi-ui-transition-base);\n will-change: transform;\n }\n .cfi-ui-switch__thumb[data-state=checked] {\n transform: translateX(1rem);\n }\n .cfi-ui-switch-row {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-md);\n }\n .cfi-ui-switch-row[data-label-position=end] .cfi-ui-switch-row__text {\n flex: 1 1 auto;\n }\n .cfi-ui-switch-row__text {\n display: grid;\n gap: var(--cfi-ui-space-3xs);\n min-width: 0;\n }\n .cfi-ui-switch-row__label {\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content);\n cursor: pointer;\n }\n .cfi-ui-switch-row__description {\n font-size: var(--cfi-ui-text-xs);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content-muted);\n }\n}\n");
257
-
258
- // src/Switch.tsx
259
- import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
260
- var Switch = forwardRef4(
261
- function Switch2({ label, description, labelPosition = "end", className, id, ...rest }, ref) {
262
- const control = /* @__PURE__ */ jsx5(
263
- RadixSwitch.Root,
264
- {
265
- ref,
266
- id,
267
- className: cn("cfi-ui", "cfi-ui-switch", !label && className),
268
- ...rest,
269
- children: /* @__PURE__ */ jsx5(RadixSwitch.Thumb, { className: "cfi-ui-switch__thumb" })
270
- }
271
- );
272
- if (!label) return control;
273
- return /* @__PURE__ */ jsxs5("div", { "data-label-position": labelPosition, className: cn("cfi-ui", "cfi-ui-switch-row", className), children: [
274
- labelPosition === "start" && control,
275
- /* @__PURE__ */ jsxs5("div", { className: "cfi-ui-switch-row__text", children: [
276
- /* @__PURE__ */ jsx5("label", { htmlFor: id, className: "cfi-ui-switch-row__label", children: label }),
277
- description && /* @__PURE__ */ jsx5("span", { className: "cfi-ui-switch-row__description", children: description })
278
- ] }),
279
- labelPosition === "end" && control
280
- ] });
281
- }
282
- );
283
-
284
740
  // src/Slider.tsx
285
- import { forwardRef as forwardRef5 } from "react";
741
+ import { forwardRef as forwardRef10 } from "react";
286
742
  import * as RadixSlider from "@radix-ui/react-slider";
287
743
 
288
744
  // src/Slider.css
289
745
  styleInject("@layer components {\n .cfi-ui-slider-wrap {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-md);\n width: 100%;\n }\n .cfi-ui-slider {\n position: relative;\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n height: 1.25rem;\n touch-action: none;\n user-select: none;\n }\n .cfi-ui-slider[data-orientation=vertical] {\n flex-direction: column;\n width: 1.25rem;\n height: 8rem;\n }\n .cfi-ui-slider__track {\n position: relative;\n flex-grow: 1;\n height: 0.25rem;\n border-radius: var(--cfi-ui-radius-full);\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-slider[data-orientation=vertical] .cfi-ui-slider__track {\n width: 0.25rem;\n height: auto;\n }\n .cfi-ui-slider__range {\n position: absolute;\n height: 100%;\n border-radius: var(--cfi-ui-radius-full);\n background: var(--cfi-ui-accent);\n }\n .cfi-ui-slider[data-orientation=vertical] .cfi-ui-slider__range {\n width: 100%;\n height: auto;\n }\n .cfi-ui-slider__thumb {\n display: block;\n width: 1rem;\n height: 1rem;\n border: 1px solid var(--cfi-ui-accent);\n border-radius: var(--cfi-ui-radius-full);\n background: var(--cfi-ui-surface);\n box-shadow: var(--cfi-ui-shadow-sm);\n cursor: grab;\n }\n .cfi-ui-slider__thumb:active {\n cursor: grabbing;\n }\n .cfi-ui-slider[data-disabled] {\n opacity: 0.55;\n }\n .cfi-ui-slider[data-disabled] .cfi-ui-slider__thumb {\n cursor: not-allowed;\n }\n .cfi-ui-slider__value {\n flex: none;\n min-width: 3.5ch;\n font-size: var(--cfi-ui-text-sm);\n font-variant-numeric: tabular-nums;\n color: var(--cfi-ui-content-muted);\n text-align: right;\n }\n}\n");
290
746
 
291
747
  // src/Slider.tsx
292
- import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
293
- var Slider = forwardRef5(
748
+ import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
749
+ var Slider = forwardRef10(
294
750
  function Slider2({ showValue = false, formatValue, className, ...rest }, ref) {
295
751
  const values = rest.value ?? rest.defaultValue ?? [rest.min ?? 0];
296
752
  const format = formatValue ?? ((v) => String(v));
297
- return /* @__PURE__ */ jsxs6("div", { className: cn("cfi-ui", "cfi-ui-slider-wrap", className), children: [
298
- /* @__PURE__ */ jsxs6(RadixSlider.Root, { ref, className: "cfi-ui-slider", ...rest, children: [
299
- /* @__PURE__ */ jsx6(RadixSlider.Track, { className: "cfi-ui-slider__track", children: /* @__PURE__ */ jsx6(RadixSlider.Range, { className: "cfi-ui-slider__range" }) }),
300
- values.map((_, i) => /* @__PURE__ */ jsx6(RadixSlider.Thumb, { className: "cfi-ui-slider__thumb" }, i))
753
+ return /* @__PURE__ */ jsxs12("div", { className: cn("cfi-ui", "cfi-ui-slider-wrap", className), children: [
754
+ /* @__PURE__ */ jsxs12(RadixSlider.Root, { ref, className: "cfi-ui-slider", ...rest, children: [
755
+ /* @__PURE__ */ jsx12(RadixSlider.Track, { className: "cfi-ui-slider__track", children: /* @__PURE__ */ jsx12(RadixSlider.Range, { className: "cfi-ui-slider__range" }) }),
756
+ values.map((_, i) => /* @__PURE__ */ jsx12(RadixSlider.Thumb, { className: "cfi-ui-slider__thumb" }, i))
301
757
  ] }),
302
- showValue && /* @__PURE__ */ jsx6("output", { className: "cfi-ui-slider__value", children: values.map(format).join(" \u2013 ") })
758
+ showValue && /* @__PURE__ */ jsx12("output", { className: "cfi-ui-slider__value", children: values.map(format).join(" \u2013 ") })
303
759
  ] });
304
760
  }
305
761
  );
306
762
 
307
763
  // src/Dialog.tsx
308
- import { forwardRef as forwardRef6 } from "react";
764
+ import { forwardRef as forwardRef11 } from "react";
309
765
  import * as RadixDialog from "@radix-ui/react-dialog";
310
- import { X } from "lucide-react";
766
+ import { X as X2 } from "lucide-react";
311
767
 
312
768
  // src/Dialog.css
313
769
  styleInject("@layer components {\n .cfi-ui-dialog__overlay {\n position: fixed;\n inset: 0;\n z-index: var(--cfi-ui-z-overlay);\n background: var(--cfi-ui-overlay);\n animation: cfi-ui-fade-in var(--cfi-ui-transition-base);\n }\n .cfi-ui-dialog {\n position: fixed;\n z-index: var(--cfi-ui-z-modal);\n display: flex;\n flex-direction: column;\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border);\n box-shadow: var(--cfi-ui-shadow-lg);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-dialog[data-side=center] {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: calc(100vw - 2 * var(--cfi-ui-space-md));\n max-height: calc(100vh - 2 * var(--cfi-ui-space-xl));\n border-radius: var(--cfi-ui-radius-lg);\n animation: cfi-ui-zoom-in var(--cfi-ui-transition-base);\n }\n .cfi-ui-dialog[data-side=center][data-size=sm] {\n max-width: 26rem;\n }\n .cfi-ui-dialog[data-side=center][data-size=md] {\n max-width: 34rem;\n }\n .cfi-ui-dialog[data-side=center][data-size=lg] {\n max-width: 48rem;\n }\n .cfi-ui-dialog[data-side=center][data-size=xl] {\n max-width: 64rem;\n }\n .cfi-ui-dialog[data-side=center][data-size=full] {\n max-width: none;\n width: calc(100vw - 2 * var(--cfi-ui-space-xl));\n height: calc(100vh - 2 * var(--cfi-ui-space-xl));\n max-height: none;\n }\n .cfi-ui-dialog[data-side=right],\n .cfi-ui-dialog[data-side=left] {\n top: 0;\n bottom: 0;\n height: 100vh;\n max-height: 100vh;\n width: calc(100vw - var(--cfi-ui-space-xl));\n border-radius: 0;\n border: 0;\n }\n .cfi-ui-dialog[data-side=right] {\n right: 0;\n border-right: 0;\n animation: cfi-ui-slide-in-right var(--cfi-ui-transition-base);\n }\n .cfi-ui-dialog[data-side=left] {\n left: 0;\n border-left: 0;\n animation: cfi-ui-slide-in-left var(--cfi-ui-transition-base);\n }\n .cfi-ui-dialog[data-side=right][data-size=sm],\n .cfi-ui-dialog[data-side=left][data-size=sm] {\n max-width: 22rem;\n }\n .cfi-ui-dialog[data-side=right][data-size=md],\n .cfi-ui-dialog[data-side=left][data-size=md] {\n max-width: 24rem;\n }\n .cfi-ui-dialog[data-side=right][data-size=lg],\n .cfi-ui-dialog[data-side=left][data-size=lg] {\n max-width: 42rem;\n }\n .cfi-ui-dialog[data-side=right][data-size=xl],\n .cfi-ui-dialog[data-side=left][data-size=xl] {\n max-width: 56rem;\n }\n .cfi-ui-dialog[data-side=right][data-size=full],\n .cfi-ui-dialog[data-side=left][data-size=full] {\n max-width: none;\n }\n .cfi-ui-dialog__header {\n flex: none;\n display: grid;\n gap: var(--cfi-ui-space-xs);\n padding: var(--cfi-ui-space-md) 3rem var(--cfi-ui-space-md) var(--cfi-ui-space-md);\n border-bottom: 1px solid var(--cfi-ui-border);\n }\n .cfi-ui-dialog__title {\n margin: 0;\n font-size: var(--cfi-ui-text-lg);\n font-weight: var(--cfi-ui-weight-semibold);\n line-height: var(--cfi-ui-leading-tight);\n letter-spacing: var(--cfi-letter-spacing-tight, -0.015em);\n color: var(--cfi-ui-content);\n text-wrap: balance;\n }\n .cfi-ui-sheet__title {\n font-size: var(--cfi-ui-text-base);\n }\n .cfi-ui-dialog__description {\n margin: 0;\n font-size: var(--cfi-ui-text-sm);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content-muted);\n }\n :where(.cfi-ui-dialog__body) {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n padding: var(--cfi-ui-space-md);\n }\n .cfi-ui-dialog__footer {\n flex: none;\n padding: var(--cfi-ui-space-md);\n border-top: 1px solid var(--cfi-ui-border);\n background: var(--cfi-ui-surface-sunken);\n }\n .cfi-ui-dialog[data-side=center] .cfi-ui-dialog__footer {\n border-bottom-left-radius: var(--cfi-ui-radius-lg);\n border-bottom-right-radius: var(--cfi-ui-radius-lg);\n }\n .cfi-ui-dialog__close {\n position: absolute;\n top: var(--cfi-ui-space-sm);\n right: var(--cfi-ui-space-sm);\n }\n .cfi-ui-dialog:not(:has(.cfi-ui-dialog__header)) .cfi-ui-dialog__body {\n padding-right: 3rem;\n }\n}\n");
314
770
 
315
771
  // src/Dialog.tsx
316
- import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
772
+ import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
317
773
  var Dialog = RadixDialog.Root;
318
774
  var DialogRoot = RadixDialog.Root;
319
775
  var DialogTrigger = RadixDialog.Trigger;
320
776
  var DialogClose = RadixDialog.Close;
321
777
  var DialogPortal = RadixDialog.Portal;
322
- var DialogContent = forwardRef6(
778
+ var DialogContent = forwardRef11(
323
779
  function DialogContent2({ size = "md", side = "center", hideClose = false, closeLabel = "Close", className, children, ...rest }, ref) {
324
- return /* @__PURE__ */ jsxs7(RadixDialog.Portal, { children: [
325
- /* @__PURE__ */ jsx7(RadixDialog.Overlay, { className: "cfi-ui-dialog__overlay", "data-cfi-ui-portal": "" }),
326
- /* @__PURE__ */ jsxs7(
780
+ return /* @__PURE__ */ jsxs13(RadixDialog.Portal, { children: [
781
+ /* @__PURE__ */ jsx13(RadixDialog.Overlay, { className: "cfi-ui-dialog__overlay", "data-cfi-ui-portal": "" }),
782
+ /* @__PURE__ */ jsxs13(
327
783
  RadixDialog.Content,
328
784
  {
329
785
  ref,
@@ -334,12 +790,12 @@ var DialogContent = forwardRef6(
334
790
  ...rest,
335
791
  children: [
336
792
  children,
337
- !hideClose && /* @__PURE__ */ jsx7(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
793
+ !hideClose && /* @__PURE__ */ jsx13(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx13(
338
794
  IconButton,
339
795
  {
340
796
  variant: "ghost",
341
797
  size: "sm",
342
- icon: /* @__PURE__ */ jsx7(X, {}),
798
+ icon: /* @__PURE__ */ jsx13(X2, {}),
343
799
  label: closeLabel,
344
800
  className: "cfi-ui-dialog__close"
345
801
  }
@@ -350,389 +806,127 @@ var DialogContent = forwardRef6(
350
806
  ] });
351
807
  }
352
808
  );
353
- function DialogHeader({ className, ...rest }) {
354
- return /* @__PURE__ */ jsx7("div", { className: cn("cfi-ui-dialog__header", className), ...rest });
355
- }
356
- var DialogTitle = forwardRef6(function DialogTitle2({ className, ...rest }, ref) {
357
- return /* @__PURE__ */ jsx7(RadixDialog.Title, { ref, className: cn("cfi-ui-dialog__title", className), ...rest });
358
- });
359
- var DialogDescription = forwardRef6(function DialogDescription2({ className, ...rest }, ref) {
360
- return /* @__PURE__ */ jsx7(RadixDialog.Description, { ref, className: cn("cfi-ui-dialog__description", className), ...rest });
361
- });
362
- function DialogBody({ className, ...rest }) {
363
- return /* @__PURE__ */ jsx7("div", { className: cn("cfi-ui-dialog__body", className), ...rest });
364
- }
365
- function DialogFooter({ className, ...rest }) {
366
- return /* @__PURE__ */ jsx7("div", { className: cn("cfi-ui-dialog__footer", className), ...rest });
367
- }
368
- function Modal({
369
- open,
370
- onOpenChange,
371
- title,
372
- description,
373
- size = "md",
374
- side = "center",
375
- footer,
376
- hideClose,
377
- dismissible = true,
378
- className,
379
- children
380
- }) {
381
- const block = dismissible ? void 0 : (e) => e.preventDefault();
382
- return /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs7(
383
- DialogContent,
384
- {
385
- size,
386
- side,
387
- hideClose,
388
- className,
389
- onEscapeKeyDown: block,
390
- onPointerDownOutside: block,
391
- onInteractOutside: block,
392
- children: [
393
- /* @__PURE__ */ jsxs7(DialogHeader, { children: [
394
- /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
395
- description && /* @__PURE__ */ jsx7(DialogDescription, { children: description })
396
- ] }),
397
- /* @__PURE__ */ jsx7(DialogBody, { children }),
398
- footer && /* @__PURE__ */ jsx7(DialogFooter, { children: footer })
399
- ]
400
- }
401
- ) });
402
- }
403
- function SideModal({ side = "right", size = "md", ...rest }) {
404
- return /* @__PURE__ */ jsx7(Modal, { side, size, ...rest });
405
- }
406
- var Sheet = RadixDialog.Root;
407
- var SheetTrigger = RadixDialog.Trigger;
408
- var SheetClose = RadixDialog.Close;
409
- var SheetPortal = RadixDialog.Portal;
410
- var SheetContent = forwardRef6(
411
- function SheetContent2({ side = "right", ...rest }, ref) {
412
- return /* @__PURE__ */ jsx7(DialogContent, { ref, side, ...rest });
413
- }
414
- );
415
- var SheetHeader = DialogHeader;
416
- var SheetTitle = forwardRef6(function SheetTitle2({ className, ...rest }, ref) {
417
- return /* @__PURE__ */ jsx7(DialogTitle, { ref, className: cn("cfi-ui-sheet__title", className), ...rest });
418
- });
419
- var SheetDescription = DialogDescription;
420
- var SheetBody = DialogBody;
421
- var SheetFooter = DialogFooter;
422
- function ConfirmDialog({
423
- open,
424
- onOpenChange,
425
- title,
426
- description,
427
- confirmLabel = "Confirm",
428
- cancelLabel = "Cancel",
429
- destructive = true,
430
- loading = false,
431
- onConfirm,
432
- children
433
- }) {
434
- return /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs7(
435
- DialogContent,
436
- {
437
- size: "sm",
438
- role: "alertdialog",
439
- hideClose: true,
440
- onPointerDownOutside: (e) => e.preventDefault(),
441
- onInteractOutside: (e) => e.preventDefault(),
442
- children: [
443
- /* @__PURE__ */ jsxs7(DialogHeader, { children: [
444
- /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
445
- description && /* @__PURE__ */ jsx7(DialogDescription, { children: description })
446
- ] }),
447
- children && /* @__PURE__ */ jsx7(DialogBody, { children }),
448
- /* @__PURE__ */ jsx7(DialogFooter, { children: /* @__PURE__ */ jsxs7(ButtonGroup, { children: [
449
- /* @__PURE__ */ jsx7(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx7(Button, { autoFocus: true, disabled: loading, children: cancelLabel }) }),
450
- /* @__PURE__ */ jsx7(
451
- Button,
452
- {
453
- variant: destructive ? "danger" : "primary",
454
- loading,
455
- onClick: onConfirm,
456
- children: confirmLabel
457
- }
458
- )
459
- ] }) })
460
- ]
461
- }
462
- ) });
463
- }
464
-
465
- // src/Popover.tsx
466
- import { forwardRef as forwardRef7 } from "react";
467
- import * as RadixPopover from "@radix-ui/react-popover";
468
-
469
- // src/Floating.css
470
- styleInject("@layer components {\n .cfi-ui-floating {\n z-index: var(--cfi-ui-z-popover);\n background: var(--cfi-ui-surface-raised);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border);\n border-radius: var(--cfi-ui-radius-md);\n box-shadow: var(--cfi-ui-shadow-lg);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n max-height: var(--radix-popper-available-height, none);\n overflow: hidden auto;\n }\n .cfi-ui-floating__arrow {\n fill: var(--cfi-ui-surface-raised);\n filter: drop-shadow(0 -1px 0 var(--cfi-ui-border));\n }\n .cfi-ui-popover {\n padding: var(--cfi-ui-space-md);\n min-width: 12rem;\n }\n .cfi-ui-popover[data-flush] {\n padding: 0;\n }\n .cfi-ui-menu {\n z-index: var(--cfi-ui-z-dropdown);\n min-width: 11rem;\n padding: var(--cfi-ui-space-xs);\n }\n .cfi-ui-menu__item {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n padding: 0.375rem 0.5rem;\n border-radius: var(--cfi-ui-radius-sm);\n font-size: var(--cfi-ui-text-sm);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content);\n cursor: pointer;\n user-select: none;\n outline: none;\n }\n .cfi-ui-menu__item[data-highlighted] {\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-menu__item[data-disabled] {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-menu__item[data-variant=danger] {\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-menu__item[data-variant=danger][data-highlighted] {\n background: var(--cfi-ui-error-soft);\n }\n .cfi-ui-menu__item > svg,\n .cfi-ui-menu__item .cfi-ui-menu__icon > svg {\n width: 0.875rem;\n height: 0.875rem;\n flex: none;\n }\n .cfi-ui-menu__icon {\n display: inline-flex;\n flex: none;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-menu__item[data-variant=danger] .cfi-ui-menu__icon {\n color: inherit;\n }\n .cfi-ui-menu__shortcut {\n margin-left: auto;\n padding-left: var(--cfi-ui-space-md);\n font-family: var(--cfi-ui-font-mono);\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-menu__label {\n padding: 0.375rem 0.5rem 0.25rem;\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-semibold);\n letter-spacing: var(--cfi-ui-tracking-caps);\n text-transform: uppercase;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-menu__separator {\n height: 1px;\n margin: var(--cfi-ui-space-xs) calc(-1 * var(--cfi-ui-space-xs));\n background: var(--cfi-ui-border);\n }\n .cfi-ui-select-content {\n z-index: var(--cfi-ui-z-dropdown);\n padding: var(--cfi-ui-space-xs);\n min-width: var(--radix-select-trigger-width, 11rem);\n }\n .cfi-ui-select-viewport {\n max-height: min(18rem, var(--radix-select-content-available-height, 18rem));\n }\n .cfi-ui-select-item {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n padding: 0.375rem 0.5rem;\n border-radius: var(--cfi-ui-radius-sm);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content);\n cursor: pointer;\n user-select: none;\n outline: none;\n }\n .cfi-ui-select-item[data-highlighted] {\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-select-item[data-state=checked] {\n font-weight: var(--cfi-ui-weight-medium);\n }\n .cfi-ui-select-item[data-disabled] {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-select-item__indicator {\n display: inline-flex;\n flex: none;\n width: 0.875rem;\n color: var(--cfi-ui-accent);\n }\n .cfi-ui-select-item__indicator > svg {\n width: 0.875rem;\n height: 0.875rem;\n }\n .cfi-ui-select-empty {\n padding: var(--cfi-ui-space-sm);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content-muted);\n text-align: center;\n }\n .cfi-ui-tooltip {\n z-index: var(--cfi-ui-z-tooltip);\n max-width: 20rem;\n padding: 0.3125rem 0.5rem;\n border-radius: var(--cfi-ui-radius-sm);\n background: var(--cfi-ui-content);\n color: var(--cfi-ui-surface);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-xs);\n line-height: var(--cfi-ui-leading-normal);\n box-shadow: var(--cfi-ui-shadow-md);\n animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n }\n .cfi-ui-tooltip__arrow {\n fill: var(--cfi-ui-content);\n }\n}\n");
471
-
472
- // src/Popover.tsx
473
- import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
474
- var PopoverRoot = RadixPopover.Root;
475
- var PopoverTrigger = RadixPopover.Trigger;
476
- var PopoverAnchor = RadixPopover.Anchor;
477
- var PopoverClose = RadixPopover.Close;
478
- var PopoverContent = forwardRef7(function PopoverContent2({ showArrow = false, flush = false, className, children, sideOffset = 6, collisionPadding = 8, ...rest }, ref) {
479
- return /* @__PURE__ */ jsx8(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs8(
480
- RadixPopover.Content,
481
- {
482
- ref,
483
- sideOffset,
484
- collisionPadding,
485
- "data-cfi-ui-portal": "",
486
- "data-flush": flush || void 0,
487
- className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-popover", className),
488
- ...rest,
489
- children: [
490
- children,
491
- showArrow && /* @__PURE__ */ jsx8(RadixPopover.Arrow, { className: "cfi-ui-floating__arrow", width: 11, height: 5 })
492
- ]
493
- }
494
- ) });
495
- });
496
- function Popover({ trigger, open, onOpenChange, defaultOpen, modal, children, ...content }) {
497
- return /* @__PURE__ */ jsxs8(PopoverRoot, { open, onOpenChange, defaultOpen, modal, children: [
498
- /* @__PURE__ */ jsx8(PopoverTrigger, { asChild: true, children: trigger }),
499
- /* @__PURE__ */ jsx8(PopoverContent, { ...content, children })
500
- ] });
501
- }
502
-
503
- // src/Menu.tsx
504
- import { Fragment as Fragment2, forwardRef as forwardRef8 } from "react";
505
- import * as RadixMenu from "@radix-ui/react-dropdown-menu";
506
- import { Check as Check2 } from "lucide-react";
507
- import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
508
- var MenuRoot = RadixMenu.Root;
509
- var MenuTrigger = RadixMenu.Trigger;
510
- var MenuGroup = RadixMenu.Group;
511
- var MenuSub = RadixMenu.Sub;
512
- var MenuRadioGroup = RadixMenu.RadioGroup;
513
- var MenuContent = forwardRef8(function MenuContent2({ className, sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
514
- return /* @__PURE__ */ jsx9(RadixMenu.Portal, { children: /* @__PURE__ */ jsx9(
515
- RadixMenu.Content,
516
- {
517
- ref,
518
- sideOffset,
519
- collisionPadding,
520
- "data-cfi-ui-portal": "",
521
- className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-menu", className),
522
- ...rest
523
- }
524
- ) });
525
- });
526
- var MenuItem = forwardRef8(
527
- function MenuItem2({ icon, shortcut, variant = "default", className, children, ...rest }, ref) {
528
- return /* @__PURE__ */ jsxs9(
529
- RadixMenu.Item,
530
- {
531
- ref,
532
- "data-variant": variant,
533
- className: cn("cfi-ui-menu__item", className),
534
- ...rest,
535
- children: [
536
- icon && /* @__PURE__ */ jsx9("span", { className: "cfi-ui-menu__icon", children: icon }),
537
- /* @__PURE__ */ jsx9("span", { children }),
538
- shortcut && /* @__PURE__ */ jsx9("span", { className: "cfi-ui-menu__shortcut", children: shortcut })
539
- ]
540
- }
541
- );
542
- }
543
- );
544
- var MenuCheckboxItem = forwardRef8(function MenuCheckboxItem2({ className, children, ...rest }, ref) {
545
- return /* @__PURE__ */ jsxs9(RadixMenu.CheckboxItem, { ref, className: cn("cfi-ui-menu__item", className), ...rest, children: [
546
- /* @__PURE__ */ jsx9("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx9(RadixMenu.ItemIndicator, { children: /* @__PURE__ */ jsx9(Check2, {}) }) }),
547
- /* @__PURE__ */ jsx9("span", { children })
548
- ] });
809
+ function DialogHeader({ className, ...rest }) {
810
+ return /* @__PURE__ */ jsx13("div", { className: cn("cfi-ui-dialog__header", className), ...rest });
811
+ }
812
+ var DialogTitle = forwardRef11(function DialogTitle2({ className, ...rest }, ref) {
813
+ return /* @__PURE__ */ jsx13(RadixDialog.Title, { ref, className: cn("cfi-ui-dialog__title", className), ...rest });
549
814
  });
550
- var MenuRadioItem = forwardRef8(function MenuRadioItem2({ className, children, ...rest }, ref) {
551
- return /* @__PURE__ */ jsxs9(RadixMenu.RadioItem, { ref, className: cn("cfi-ui-menu__item", className), ...rest, children: [
552
- /* @__PURE__ */ jsx9("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx9(RadixMenu.ItemIndicator, { children: /* @__PURE__ */ jsx9(Check2, {}) }) }),
553
- /* @__PURE__ */ jsx9("span", { children })
554
- ] });
815
+ var DialogDescription = forwardRef11(function DialogDescription2({ className, ...rest }, ref) {
816
+ return /* @__PURE__ */ jsx13(RadixDialog.Description, { ref, className: cn("cfi-ui-dialog__description", className), ...rest });
555
817
  });
556
- function MenuLabel({ className, ...rest }) {
557
- return /* @__PURE__ */ jsx9(RadixMenu.Label, { className: cn("cfi-ui-menu__label", className), ...rest });
818
+ function DialogBody({ className, ...rest }) {
819
+ return /* @__PURE__ */ jsx13("div", { className: cn("cfi-ui-dialog__body", className), ...rest });
558
820
  }
559
- function MenuSeparator({
821
+ function DialogFooter({ className, ...rest }) {
822
+ return /* @__PURE__ */ jsx13("div", { className: cn("cfi-ui-dialog__footer", className), ...rest });
823
+ }
824
+ function Modal({
825
+ open,
826
+ onOpenChange,
827
+ title,
828
+ description,
829
+ size = "md",
830
+ side = "center",
831
+ footer,
832
+ hideClose,
833
+ dismissible = true,
560
834
  className,
561
- ...rest
835
+ children
562
836
  }) {
563
- return /* @__PURE__ */ jsx9(RadixMenu.Separator, { className: cn("cfi-ui-menu__separator", className), ...rest });
564
- }
565
- var MenuSubTrigger = forwardRef8(function MenuSubTrigger2({ className, ...rest }, ref) {
566
- return /* @__PURE__ */ jsx9(RadixMenu.SubTrigger, { ref, className: cn("cfi-ui-menu__item", className), ...rest });
567
- });
568
- var MenuSubContent = forwardRef8(function MenuSubContent2({ className, ...rest }, ref) {
569
- return /* @__PURE__ */ jsx9(RadixMenu.Portal, { children: /* @__PURE__ */ jsx9(
570
- RadixMenu.SubContent,
571
- {
572
- ref,
573
- "data-cfi-ui-portal": "",
574
- className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-menu", className),
575
- ...rest
576
- }
577
- ) });
578
- });
579
- function Menu({ trigger, items, align = "end", side = "bottom", className }) {
580
- return /* @__PURE__ */ jsxs9(MenuRoot, { children: [
581
- /* @__PURE__ */ jsx9(MenuTrigger, { asChild: true, children: trigger }),
582
- /* @__PURE__ */ jsx9(MenuContent, { align, side, className, children: items.map((item) => /* @__PURE__ */ jsxs9(Fragment2, { children: [
583
- item.separatorBefore && /* @__PURE__ */ jsx9(MenuSeparator, {}),
584
- /* @__PURE__ */ jsx9(
585
- MenuItem,
586
- {
587
- icon: item.icon,
588
- shortcut: item.shortcut,
589
- variant: item.variant,
590
- disabled: item.disabled,
591
- onSelect: item.onSelect,
592
- children: item.label
593
- }
594
- )
595
- ] }, item.id)) })
596
- ] });
597
- }
598
-
599
- // src/Select.tsx
600
- import { forwardRef as forwardRef9 } from "react";
601
- import * as RadixSelect from "@radix-ui/react-select";
602
- import { Check as Check3, ChevronDown, ChevronUp } from "lucide-react";
603
-
604
- // src/Select.css
605
- styleInject("@layer components {\n :where(.cfi-ui-select) {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--cfi-ui-space-sm);\n height: var(--cfi-ui-control-height-md);\n padding-inline: 0.625rem;\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border-strong);\n border-radius: var(--cfi-ui-radius-md);\n font-family: inherit;\n font-size: var(--cfi-ui-text-sm);\n line-height: normal;\n cursor: pointer;\n transition: border-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-select--full {\n width: 100%;\n }\n .cfi-ui-select:hover:not(:disabled) {\n border-color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-select:disabled {\n background: var(--cfi-ui-surface-disabled);\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-select[data-invalid] {\n border-color: var(--cfi-ui-error);\n }\n .cfi-ui-select[data-size=sm] {\n height: var(--cfi-ui-control-height-sm);\n padding-inline: 0.5rem;\n font-size: var(--cfi-ui-text-xs);\n }\n .cfi-ui-select[data-size=lg] {\n height: var(--cfi-ui-control-height-lg);\n padding-inline: 0.875rem;\n font-size: var(--cfi-ui-text-base);\n }\n .cfi-ui-select[data-placeholder] .cfi-ui-select__value {\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-select__value {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n }\n .cfi-ui-select__chevron {\n display: inline-flex;\n flex: none;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-select__chevron > svg {\n width: 0.875rem;\n height: 0.875rem;\n display: block;\n }\n .cfi-ui-select-scroll {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 1.25rem;\n color: var(--cfi-ui-content-muted);\n cursor: default;\n }\n .cfi-ui-select-scroll > svg {\n width: 0.875rem;\n height: 0.875rem;\n }\n}\n");
606
-
607
- // src/Select.tsx
608
- import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
609
- var SelectRoot = RadixSelect.Root;
610
- var SelectValue = RadixSelect.Value;
611
- var SelectGroup = RadixSelect.Group;
612
- var SelectTrigger = forwardRef9(
613
- function SelectTrigger2({ size = "md", invalid, className, children, ...rest }, ref) {
614
- return /* @__PURE__ */ jsxs10(
615
- RadixSelect.Trigger,
616
- {
617
- ref,
618
- "data-size": size,
619
- "data-invalid": invalid || void 0,
620
- "aria-invalid": invalid || void 0,
621
- className: cn("cfi-ui", "cfi-ui-select", className),
622
- ...rest,
623
- children: [
624
- /* @__PURE__ */ jsx10("span", { className: "cfi-ui-select__value", children }),
625
- /* @__PURE__ */ jsx10(RadixSelect.Icon, { className: "cfi-ui-select__chevron", children: /* @__PURE__ */ jsx10(ChevronDown, {}) })
626
- ]
627
- }
628
- );
629
- }
630
- );
631
- var SelectContent = forwardRef9(function SelectContent2({ className, children, position = "popper", sideOffset = 4, ...rest }, ref) {
632
- return /* @__PURE__ */ jsx10(RadixSelect.Portal, { children: /* @__PURE__ */ jsxs10(
633
- RadixSelect.Content,
837
+ const block = dismissible ? void 0 : (e) => e.preventDefault();
838
+ return /* @__PURE__ */ jsx13(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs13(
839
+ DialogContent,
634
840
  {
635
- ref,
636
- position,
637
- sideOffset,
638
- "data-cfi-ui-portal": "",
639
- className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-select-content", className),
640
- ...rest,
841
+ size,
842
+ side,
843
+ hideClose,
844
+ className,
845
+ onEscapeKeyDown: block,
846
+ onPointerDownOutside: block,
847
+ onInteractOutside: block,
641
848
  children: [
642
- /* @__PURE__ */ jsx10(RadixSelect.ScrollUpButton, { className: "cfi-ui-select-scroll", children: /* @__PURE__ */ jsx10(ChevronUp, {}) }),
643
- /* @__PURE__ */ jsx10(RadixSelect.Viewport, { className: "cfi-ui-select-viewport", children }),
644
- /* @__PURE__ */ jsx10(RadixSelect.ScrollDownButton, { className: "cfi-ui-select-scroll", children: /* @__PURE__ */ jsx10(ChevronDown, {}) })
849
+ /* @__PURE__ */ jsxs13(DialogHeader, { children: [
850
+ /* @__PURE__ */ jsx13(DialogTitle, { children: title }),
851
+ description && /* @__PURE__ */ jsx13(DialogDescription, { children: description })
852
+ ] }),
853
+ /* @__PURE__ */ jsx13(DialogBody, { children }),
854
+ footer && /* @__PURE__ */ jsx13(DialogFooter, { children: footer })
645
855
  ]
646
856
  }
647
857
  ) });
648
- });
649
- var SelectItem = forwardRef9(function SelectItem2({ className, children, ...rest }, ref) {
650
- return /* @__PURE__ */ jsxs10(RadixSelect.Item, { ref, className: cn("cfi-ui-select-item", className), ...rest, children: [
651
- /* @__PURE__ */ jsx10("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx10(RadixSelect.ItemIndicator, { children: /* @__PURE__ */ jsx10(Check3, {}) }) }),
652
- /* @__PURE__ */ jsx10(RadixSelect.ItemText, { children })
653
- ] });
654
- });
655
- function SelectLabel({ className, ...rest }) {
656
- return /* @__PURE__ */ jsx10(RadixSelect.Label, { className: cn("cfi-ui-menu__label", className), ...rest });
657
858
  }
658
- function SelectSeparator({
659
- className,
660
- ...rest
661
- }) {
662
- return /* @__PURE__ */ jsx10(RadixSelect.Separator, { className: cn("cfi-ui-menu__separator", className), ...rest });
859
+ function SideModal({ side = "right", size = "md", ...rest }) {
860
+ return /* @__PURE__ */ jsx13(Modal, { side, size, ...rest });
663
861
  }
664
- function Select({
665
- options,
666
- value,
667
- onValueChange,
668
- defaultValue,
669
- placeholder = "Select...",
670
- size = "md",
671
- invalid,
672
- disabled,
673
- required,
674
- name,
675
- id,
676
- className,
677
- fullWidth = true,
678
- emptyLabel = "No options",
862
+ var Sheet = RadixDialog.Root;
863
+ var SheetTrigger = RadixDialog.Trigger;
864
+ var SheetClose = RadixDialog.Close;
865
+ var SheetPortal = RadixDialog.Portal;
866
+ var SheetContent = forwardRef11(
867
+ function SheetContent2({ side = "right", ...rest }, ref) {
868
+ return /* @__PURE__ */ jsx13(DialogContent, { ref, side, ...rest });
869
+ }
870
+ );
871
+ var SheetHeader = DialogHeader;
872
+ var SheetTitle = forwardRef11(function SheetTitle2({ className, ...rest }, ref) {
873
+ return /* @__PURE__ */ jsx13(DialogTitle, { ref, className: cn("cfi-ui-sheet__title", className), ...rest });
874
+ });
875
+ var SheetDescription = DialogDescription;
876
+ var SheetBody = DialogBody;
877
+ var SheetFooter = DialogFooter;
878
+ function ConfirmDialog({
879
+ open,
679
880
  onOpenChange,
680
- onBlur,
681
- ...aria
881
+ title,
882
+ description,
883
+ confirmLabel = "Confirm",
884
+ cancelLabel = "Cancel",
885
+ destructive = true,
886
+ loading = false,
887
+ onConfirm,
888
+ children
682
889
  }) {
683
- const groups = [];
684
- for (const option of options) {
685
- const existing = groups.find((g) => g.name === option.group);
686
- if (existing) existing.options.push(option);
687
- else groups.push({ name: option.group, options: [option] });
688
- }
689
- return /* @__PURE__ */ jsxs10(
690
- SelectRoot,
890
+ return /* @__PURE__ */ jsx13(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs13(
891
+ DialogContent,
691
892
  {
692
- value,
693
- onValueChange,
694
- defaultValue,
695
- disabled,
696
- required,
697
- name,
698
- onOpenChange,
893
+ size: "sm",
894
+ role: "alertdialog",
895
+ hideClose: true,
896
+ onPointerDownOutside: (e) => e.preventDefault(),
897
+ onInteractOutside: (e) => e.preventDefault(),
699
898
  children: [
700
- /* @__PURE__ */ jsx10(
701
- SelectTrigger,
702
- {
703
- id,
704
- size,
705
- invalid,
706
- className: cn(fullWidth && "cfi-ui-select--full", className),
707
- onBlur,
708
- ...aria,
709
- children: /* @__PURE__ */ jsx10(SelectValue, { placeholder })
710
- }
711
- ),
712
- /* @__PURE__ */ jsxs10(SelectContent, { children: [
713
- groups.map(
714
- (group, i) => group.name ? /* @__PURE__ */ jsxs10(SelectGroup, { children: [
715
- i > 0 && /* @__PURE__ */ jsx10(SelectSeparator, {}),
716
- /* @__PURE__ */ jsx10(SelectLabel, { children: group.name }),
717
- group.options.map((o) => /* @__PURE__ */ jsx10(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
718
- ] }, group.name) : group.options.map((o) => /* @__PURE__ */ jsx10(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
719
- ),
720
- options.length === 0 && /* @__PURE__ */ jsx10("p", { className: "cfi-ui-select-empty", children: emptyLabel })
721
- ] })
899
+ /* @__PURE__ */ jsxs13(DialogHeader, { children: [
900
+ /* @__PURE__ */ jsx13(DialogTitle, { children: title }),
901
+ description && /* @__PURE__ */ jsx13(DialogDescription, { children: description })
902
+ ] }),
903
+ children && /* @__PURE__ */ jsx13(DialogBody, { children }),
904
+ /* @__PURE__ */ jsx13(DialogFooter, { children: /* @__PURE__ */ jsxs13(ButtonGroup, { children: [
905
+ /* @__PURE__ */ jsx13(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx13(Button, { autoFocus: true, disabled: loading, children: cancelLabel }) }),
906
+ /* @__PURE__ */ jsx13(
907
+ Button,
908
+ {
909
+ variant: destructive ? "danger" : "primary",
910
+ loading,
911
+ onClick: onConfirm,
912
+ children: confirmLabel
913
+ }
914
+ )
915
+ ] }) })
722
916
  ]
723
917
  }
724
- );
918
+ ) });
725
919
  }
726
920
 
727
921
  // src/CreatableSelect.tsx
728
- import { useMemo, useState } from "react";
922
+ import { useMemo as useMemo2, useState as useState2 } from "react";
729
923
  import { Plus } from "lucide-react";
730
924
 
731
925
  // src/CreatableSelect.css
732
926
  styleInject("@layer components {\n :where(.cfi-creatable) {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n width: 100%;\n }\n :where(.cfi-creatable__select) {\n flex: 1 1 auto;\n min-width: 0;\n }\n :where(.cfi-creatable) > :where(button) {\n flex: 0 0 auto;\n }\n}\n");
733
927
 
734
928
  // src/CreatableSelect.tsx
735
- import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
929
+ import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
736
930
  function normalize(value) {
737
931
  return value.trim().toLowerCase();
738
932
  }
@@ -757,16 +951,16 @@ function CreatableSelect({
757
951
  disabled,
758
952
  ...select
759
953
  }) {
760
- const [open, setOpen] = useState(false);
761
- const [draft, setDraft] = useState("");
762
- const [pending, setPending] = useState(false);
763
- const [error, setError] = useState(null);
764
- const [created, setCreated] = useState([]);
765
- const merged = useMemo(() => {
954
+ const [open, setOpen] = useState2(false);
955
+ const [draft, setDraft] = useState2("");
956
+ const [pending, setPending] = useState2(false);
957
+ const [error, setError] = useState2(null);
958
+ const [created, setCreated] = useState2([]);
959
+ const merged = useMemo2(() => {
766
960
  const seen = new Set(options.map((o) => o.value));
767
961
  return [...options, ...created.filter((o) => !seen.has(o.value))];
768
962
  }, [options, created]);
769
- const match = useMemo(() => {
963
+ const match = useMemo2(() => {
770
964
  const wanted = normalize(draft);
771
965
  if (wanted === "") return null;
772
966
  return merged.find((o) => {
@@ -801,20 +995,20 @@ function CreatableSelect({
801
995
  setPending(false);
802
996
  }
803
997
  }
804
- return /* @__PURE__ */ jsxs11("div", { className: cn("cfi-creatable", className), children: [
805
- /* @__PURE__ */ jsx11("div", { className: "cfi-creatable__select", children: /* @__PURE__ */ jsx11(Select, { ...select, options: merged, onValueChange, disabled }) }),
806
- showAdd && /* @__PURE__ */ jsx11(
998
+ return /* @__PURE__ */ jsxs14("div", { className: cn("cfi-creatable", className), children: [
999
+ /* @__PURE__ */ jsx14("div", { className: "cfi-creatable__select", children: /* @__PURE__ */ jsx14(Select, { ...select, options: merged, onValueChange, disabled }) }),
1000
+ showAdd && /* @__PURE__ */ jsx14(
807
1001
  IconButton,
808
1002
  {
809
1003
  type: "button",
810
1004
  variant: "secondary",
811
1005
  size: select.size ?? "md",
812
- icon: /* @__PURE__ */ jsx11(Plus, { "aria-hidden": "true" }),
1006
+ icon: /* @__PURE__ */ jsx14(Plus, { "aria-hidden": "true" }),
813
1007
  label: addLabel,
814
1008
  onClick: () => setOpen(true)
815
1009
  }
816
1010
  ),
817
- /* @__PURE__ */ jsx11(
1011
+ /* @__PURE__ */ jsx14(
818
1012
  Modal,
819
1013
  {
820
1014
  open,
@@ -822,9 +1016,9 @@ function CreatableSelect({
822
1016
  title: createTitle,
823
1017
  description: createDescription,
824
1018
  size: "sm",
825
- footer: /* @__PURE__ */ jsxs11(ButtonGroup, { children: [
826
- /* @__PURE__ */ jsx11(Button, { type: "button", variant: "secondary", onClick: close, disabled: pending, children: createCancelLabel }),
827
- /* @__PURE__ */ jsx11(
1019
+ footer: /* @__PURE__ */ jsxs14(ButtonGroup, { children: [
1020
+ /* @__PURE__ */ jsx14(Button, { type: "button", variant: "secondary", onClick: close, disabled: pending, children: createCancelLabel }),
1021
+ /* @__PURE__ */ jsx14(
828
1022
  Button,
829
1023
  {
830
1024
  type: "button",
@@ -835,7 +1029,7 @@ function CreatableSelect({
835
1029
  }
836
1030
  )
837
1031
  ] }),
838
- children: /* @__PURE__ */ jsxs11(
1032
+ children: /* @__PURE__ */ jsxs14(
839
1033
  "form",
840
1034
  {
841
1035
  onSubmit: (event) => {
@@ -843,14 +1037,14 @@ function CreatableSelect({
843
1037
  void submit();
844
1038
  },
845
1039
  children: [
846
- /* @__PURE__ */ jsx11(
1040
+ /* @__PURE__ */ jsx14(
847
1041
  Field,
848
1042
  {
849
1043
  label: createFieldLabel,
850
1044
  required: true,
851
1045
  error,
852
1046
  hint: match ? duplicateHint : void 0,
853
- children: /* @__PURE__ */ jsx11(
1047
+ children: /* @__PURE__ */ jsx14(
854
1048
  Input,
855
1049
  {
856
1050
  value: draft,
@@ -862,7 +1056,7 @@ function CreatableSelect({
862
1056
  )
863
1057
  }
864
1058
  ),
865
- /* @__PURE__ */ jsx11("button", { type: "submit", hidden: true, "aria-hidden": "true", tabIndex: -1 })
1059
+ /* @__PURE__ */ jsx14("button", { type: "submit", hidden: true, "aria-hidden": "true", tabIndex: -1 })
866
1060
  ]
867
1061
  }
868
1062
  )
@@ -872,14 +1066,14 @@ function CreatableSelect({
872
1066
  }
873
1067
 
874
1068
  // src/Combobox.tsx
875
- import { useEffect, useId as useId2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
876
- import { Check as Check4, ChevronDown as ChevronDown2, Search, X as X2 } from "lucide-react";
1069
+ import { useEffect, useId as useId2, useMemo as useMemo3, useRef, useState as useState3 } from "react";
1070
+ import { Check as Check4, ChevronDown as ChevronDown3, Search, X as X3 } from "lucide-react";
877
1071
 
878
1072
  // src/Combobox.css
879
1073
  styleInject("@layer components {\n .cfi-ui-combobox {\n position: relative;\n display: inline-flex;\n align-items: center;\n }\n .cfi-ui-combobox--full {\n display: flex;\n width: 100%;\n }\n :where(.cfi-ui-combobox__trigger) {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--cfi-ui-space-sm);\n width: 100%;\n height: var(--cfi-ui-control-height-md);\n padding-inline: 0.625rem;\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border-strong);\n border-radius: var(--cfi-ui-radius-md);\n font-family: inherit;\n font-size: var(--cfi-ui-text-sm);\n line-height: normal;\n cursor: pointer;\n transition: border-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-combobox__trigger:hover:not(:disabled) {\n border-color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-combobox__trigger:disabled {\n background: var(--cfi-ui-surface-disabled);\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-combobox__trigger[data-invalid] {\n border-color: var(--cfi-ui-error);\n }\n .cfi-ui-combobox__trigger[data-size=sm] {\n height: var(--cfi-ui-control-height-sm);\n padding-inline: 0.5rem;\n font-size: var(--cfi-ui-text-xs);\n }\n .cfi-ui-combobox__trigger[data-size=lg] {\n height: var(--cfi-ui-control-height-lg);\n padding-inline: 0.875rem;\n font-size: var(--cfi-ui-text-base);\n }\n .cfi-ui-combobox__trigger[data-placeholder] .cfi-ui-combobox__value {\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-combobox__value {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n }\n .cfi-ui-combobox__chevron {\n display: inline-flex;\n flex: none;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-combobox__chevron > svg,\n .cfi-ui-combobox__clear > svg {\n width: 0.875rem;\n height: 0.875rem;\n display: block;\n }\n .cfi-ui-combobox__clear {\n position: absolute;\n right: 1.75rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: 0;\n border-radius: var(--cfi-ui-radius-sm);\n background: transparent;\n color: var(--cfi-ui-content-muted);\n cursor: pointer;\n }\n .cfi-ui-combobox__clear:hover {\n background: var(--cfi-ui-surface-active);\n color: var(--cfi-ui-content);\n }\n .cfi-ui-combobox__panel {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n max-height: min(22rem, var(--radix-popover-content-available-height, 22rem));\n }\n .cfi-ui-combobox__search {\n flex: none;\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n padding: var(--cfi-ui-space-sm);\n border-bottom: 1px solid var(--cfi-ui-border);\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-combobox__search > svg {\n width: 0.875rem;\n height: 0.875rem;\n flex: none;\n }\n .cfi-ui-combobox__search input {\n flex: 1 1 auto;\n min-width: 0;\n border: 0;\n background: transparent;\n color: var(--cfi-ui-content);\n font-family: inherit;\n font-size: var(--cfi-ui-text-sm);\n outline: none;\n }\n .cfi-ui-combobox__search input::placeholder {\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-combobox__list {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n padding: var(--cfi-ui-space-xs);\n }\n .cfi-ui-combobox__option {\n align-items: flex-start;\n }\n .cfi-ui-combobox__option > .cfi-ui-select-item__indicator {\n padding-top: 0.125rem;\n }\n .cfi-ui-combobox__option-text {\n display: grid;\n gap: var(--cfi-ui-space-3xs);\n min-width: 0;\n }\n .cfi-ui-combobox__option-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ui-combobox__option-hint {\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n");
880
1074
 
881
1075
  // src/Combobox.tsx
882
- import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
1076
+ import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
883
1077
  function Combobox({
884
1078
  options,
885
1079
  value,
@@ -901,13 +1095,13 @@ function Combobox({
901
1095
  fullWidth = true,
902
1096
  ...aria
903
1097
  }) {
904
- const [open, setOpen] = useState2(false);
905
- const [search, setSearch] = useState2("");
906
- const [highlighted, setHighlighted] = useState2(0);
1098
+ const [open, setOpen] = useState3(false);
1099
+ const [search, setSearch] = useState3("");
1100
+ const [highlighted, setHighlighted] = useState3(0);
907
1101
  const listId = useId2();
908
1102
  const searchRef = useRef(null);
909
1103
  const listRef = useRef(null);
910
- const filtered = useMemo2(() => {
1104
+ const filtered = useMemo3(() => {
911
1105
  if (onSearchChange) return options;
912
1106
  const q = search.trim().toLowerCase();
913
1107
  if (!q) return options;
@@ -961,14 +1155,14 @@ function Combobox({
961
1155
  setHighlighted(0);
962
1156
  onSearchChange?.(next);
963
1157
  }
964
- return /* @__PURE__ */ jsxs12(PopoverRoot, { open, onOpenChange: setOpen, children: [
965
- /* @__PURE__ */ jsx12(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs12(
1158
+ return /* @__PURE__ */ jsxs15(PopoverRoot, { open, onOpenChange: setOpen, children: [
1159
+ /* @__PURE__ */ jsx15(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs15(
966
1160
  "div",
967
1161
  {
968
1162
  style,
969
1163
  className: cn("cfi-ui", "cfi-ui-combobox", fullWidth && "cfi-ui-combobox--full", className),
970
1164
  children: [
971
- /* @__PURE__ */ jsxs12(
1165
+ /* @__PURE__ */ jsxs15(
972
1166
  "button",
973
1167
  {
974
1168
  type: "button",
@@ -985,12 +1179,12 @@ function Combobox({
985
1179
  onClick: () => setOpen((o) => !o),
986
1180
  ...aria,
987
1181
  children: [
988
- /* @__PURE__ */ jsx12("span", { className: "cfi-ui-combobox__value", children: selected ? selected.label : placeholder }),
989
- /* @__PURE__ */ jsx12("span", { className: "cfi-ui-combobox__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx12(ChevronDown2, {}) })
1182
+ /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__value", children: selected ? selected.label : placeholder }),
1183
+ /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx15(ChevronDown3, {}) })
990
1184
  ]
991
1185
  }
992
1186
  ),
993
- clearable && selected && !disabled && /* @__PURE__ */ jsx12(
1187
+ clearable && selected && !disabled && /* @__PURE__ */ jsx15(
994
1188
  "button",
995
1189
  {
996
1190
  type: "button",
@@ -998,14 +1192,14 @@ function Combobox({
998
1192
  "aria-label": `Clear ${selected.label}`,
999
1193
  title: "Clear",
1000
1194
  onClick: () => onValueChange(null),
1001
- children: /* @__PURE__ */ jsx12(X2, { "aria-hidden": "true" })
1195
+ children: /* @__PURE__ */ jsx15(X3, { "aria-hidden": "true" })
1002
1196
  }
1003
1197
  ),
1004
- name && /* @__PURE__ */ jsx12("input", { type: "hidden", name, value: value ?? "" })
1198
+ name && /* @__PURE__ */ jsx15("input", { type: "hidden", name, value: value ?? "" })
1005
1199
  ]
1006
1200
  }
1007
1201
  ) }),
1008
- /* @__PURE__ */ jsxs12(
1202
+ /* @__PURE__ */ jsxs15(
1009
1203
  PopoverContent,
1010
1204
  {
1011
1205
  flush: true,
@@ -1017,9 +1211,9 @@ function Combobox({
1017
1211
  },
1018
1212
  style: { width: "var(--radix-popover-trigger-width)" },
1019
1213
  children: [
1020
- /* @__PURE__ */ jsxs12("div", { className: "cfi-ui-combobox__search", children: [
1021
- /* @__PURE__ */ jsx12(Search, { "aria-hidden": "true" }),
1022
- /* @__PURE__ */ jsx12(
1214
+ /* @__PURE__ */ jsxs15("div", { className: "cfi-ui-combobox__search", children: [
1215
+ /* @__PURE__ */ jsx15(Search, { "aria-hidden": "true" }),
1216
+ /* @__PURE__ */ jsx15(
1023
1217
  "input",
1024
1218
  {
1025
1219
  ref: searchRef,
@@ -1035,7 +1229,7 @@ function Combobox({
1035
1229
  }
1036
1230
  )
1037
1231
  ] }),
1038
- /* @__PURE__ */ jsx12(
1232
+ /* @__PURE__ */ jsx15(
1039
1233
  "div",
1040
1234
  {
1041
1235
  ref: listRef,
@@ -1043,10 +1237,10 @@ function Combobox({
1043
1237
  role: "listbox",
1044
1238
  "aria-busy": loading || void 0,
1045
1239
  className: "cfi-ui-combobox__list",
1046
- children: loading ? /* @__PURE__ */ jsx12("p", { className: "cfi-ui-select-empty", children: loadingLabel }) : filtered.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "cfi-ui-select-empty", children: emptyLabel }) : filtered.map((option) => {
1240
+ children: loading ? /* @__PURE__ */ jsx15("p", { className: "cfi-ui-select-empty", children: loadingLabel }) : filtered.length === 0 ? /* @__PURE__ */ jsx15("p", { className: "cfi-ui-select-empty", children: emptyLabel }) : filtered.map((option) => {
1047
1241
  const index = selectable.indexOf(option);
1048
1242
  const isHighlighted = index !== -1 && index === highlighted;
1049
- return /* @__PURE__ */ jsxs12(
1243
+ return /* @__PURE__ */ jsxs15(
1050
1244
  "div",
1051
1245
  {
1052
1246
  id: `${listId}-${option.value}`,
@@ -1059,10 +1253,10 @@ function Combobox({
1059
1253
  onClick: () => !option.disabled && commit(option),
1060
1254
  onPointerMove: () => index !== -1 && setHighlighted(index),
1061
1255
  children: [
1062
- /* @__PURE__ */ jsx12("span", { className: "cfi-ui-select-item__indicator", children: option.value === value && /* @__PURE__ */ jsx12(Check4, { "aria-hidden": "true" }) }),
1063
- /* @__PURE__ */ jsxs12("span", { className: "cfi-ui-combobox__option-text", children: [
1064
- /* @__PURE__ */ jsx12("span", { className: "cfi-ui-combobox__option-label", children: option.label }),
1065
- option.hint && /* @__PURE__ */ jsx12("span", { className: "cfi-ui-combobox__option-hint", children: option.hint })
1256
+ /* @__PURE__ */ jsx15("span", { className: "cfi-ui-select-item__indicator", children: option.value === value && /* @__PURE__ */ jsx15(Check4, { "aria-hidden": "true" }) }),
1257
+ /* @__PURE__ */ jsxs15("span", { className: "cfi-ui-combobox__option-text", children: [
1258
+ /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__option-label", children: option.label }),
1259
+ option.hint && /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__option-hint", children: option.hint })
1066
1260
  ] })
1067
1261
  ]
1068
1262
  },
@@ -1078,14 +1272,14 @@ function Combobox({
1078
1272
  }
1079
1273
 
1080
1274
  // src/Tooltip.tsx
1081
- import { forwardRef as forwardRef10 } from "react";
1275
+ import { forwardRef as forwardRef12 } from "react";
1082
1276
  import * as RadixTooltip from "@radix-ui/react-tooltip";
1083
- import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
1277
+ import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
1084
1278
  var TooltipProvider = RadixTooltip.Provider;
1085
1279
  var TooltipRoot = RadixTooltip.Root;
1086
1280
  var TooltipTrigger = RadixTooltip.Trigger;
1087
- var TooltipContent = forwardRef10(function TooltipContent2({ className, children, sideOffset = 5, ...rest }, ref) {
1088
- return /* @__PURE__ */ jsx13(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs13(
1281
+ var TooltipContent = forwardRef12(function TooltipContent2({ className, children, sideOffset = 5, ...rest }, ref) {
1282
+ return /* @__PURE__ */ jsx16(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs16(
1089
1283
  RadixTooltip.Content,
1090
1284
  {
1091
1285
  ref,
@@ -1096,28 +1290,28 @@ var TooltipContent = forwardRef10(function TooltipContent2({ className, children
1096
1290
  ...rest,
1097
1291
  children: [
1098
1292
  children,
1099
- /* @__PURE__ */ jsx13(RadixTooltip.Arrow, { className: "cfi-ui-tooltip__arrow", width: 10, height: 4 })
1293
+ /* @__PURE__ */ jsx16(RadixTooltip.Arrow, { className: "cfi-ui-tooltip__arrow", width: 10, height: 4 })
1100
1294
  ]
1101
1295
  }
1102
1296
  ) });
1103
1297
  });
1104
1298
  function Tooltip({ content, side = "top", align = "center", delay = 300, disabled, children }) {
1105
- if (disabled || content == null || content === "") return /* @__PURE__ */ jsx13(Fragment3, { children });
1106
- return /* @__PURE__ */ jsx13(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs13(TooltipRoot, { children: [
1107
- /* @__PURE__ */ jsx13(TooltipTrigger, { asChild: true, children }),
1108
- /* @__PURE__ */ jsx13(TooltipContent, { side, align, children: content })
1299
+ if (disabled || content == null || content === "") return /* @__PURE__ */ jsx16(Fragment3, { children });
1300
+ return /* @__PURE__ */ jsx16(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs16(TooltipRoot, { children: [
1301
+ /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children }),
1302
+ /* @__PURE__ */ jsx16(TooltipContent, { side, align, children: content })
1109
1303
  ] }) });
1110
1304
  }
1111
1305
 
1112
1306
  // src/Toast.tsx
1113
- import { createContext as createContext2, useCallback, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
1114
- import { AlertTriangle, CheckCircle2, Info, X as X3, XCircle } from "lucide-react";
1307
+ import { createContext as createContext2, useCallback, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2, useState as useState4 } from "react";
1308
+ import { AlertTriangle, CheckCircle2, Info, X as X4, XCircle } from "lucide-react";
1115
1309
 
1116
1310
  // src/Toast.css
1117
1311
  styleInject("@layer components {\n .cfi-ui-toast-viewport {\n position: fixed;\n z-index: var(--cfi-ui-z-toast);\n display: flex;\n flex-direction: column;\n gap: var(--cfi-ui-space-sm);\n width: min(24rem, calc(100vw - 2 * var(--cfi-ui-space-md)));\n pointer-events: none;\n }\n .cfi-ui-toast-viewport[data-position=bottom-right] {\n right: var(--cfi-ui-space-md);\n bottom: var(--cfi-ui-space-md);\n }\n .cfi-ui-toast-viewport[data-position=top-right] {\n right: var(--cfi-ui-space-md);\n top: calc(var(--cfi-shell-header-height, 48px) + var(--cfi-ui-space-md));\n flex-direction: column-reverse;\n }\n .cfi-ui-toast-viewport[data-position=bottom-center] {\n left: 50%;\n bottom: var(--cfi-ui-space-md);\n transform: translateX(-50%);\n }\n .cfi-ui-toast-viewport[data-position=top-center] {\n left: 50%;\n top: calc(var(--cfi-shell-header-height, 48px) + var(--cfi-ui-space-md));\n transform: translateX(-50%);\n flex-direction: column-reverse;\n }\n .cfi-ui-toast {\n pointer-events: auto;\n display: grid;\n grid-template-columns: auto 1fr auto;\n gap: var(--cfi-ui-space-sm);\n align-items: start;\n padding: var(--cfi-ui-space-sm) var(--cfi-ui-space-sm) var(--cfi-ui-space-sm) var(--cfi-ui-space-md);\n background: var(--cfi-ui-surface-raised);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border);\n border-left: 3px solid var(--cfi-ui-border-strong);\n border-radius: var(--cfi-ui-radius-md);\n box-shadow: var(--cfi-ui-shadow-lg);\n font-family: var(--cfi-ui-font);\n animation: cfi-ui-zoom-in var(--cfi-ui-transition-base);\n }\n .cfi-ui-toast[data-tone=success] {\n border-left-color: var(--cfi-ui-success);\n }\n .cfi-ui-toast[data-tone=warning] {\n border-left-color: var(--cfi-ui-warning);\n }\n .cfi-ui-toast[data-tone=error] {\n border-left-color: var(--cfi-ui-error);\n }\n .cfi-ui-toast[data-tone=info] {\n border-left-color: var(--cfi-ui-info);\n }\n .cfi-ui-toast__icon {\n display: inline-flex;\n flex: none;\n padding-top: 0.0625rem;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-toast[data-tone=success] .cfi-ui-toast__icon {\n color: var(--cfi-ui-success-text);\n }\n .cfi-ui-toast[data-tone=warning] .cfi-ui-toast__icon {\n color: var(--cfi-ui-warning-text);\n }\n .cfi-ui-toast[data-tone=error] .cfi-ui-toast__icon {\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-toast[data-tone=info] .cfi-ui-toast__icon {\n color: var(--cfi-ui-info-text);\n }\n .cfi-ui-toast__icon > svg {\n width: 1rem;\n height: 1rem;\n display: block;\n }\n .cfi-ui-toast__text {\n display: grid;\n gap: var(--cfi-ui-space-3xs);\n min-width: 0;\n }\n .cfi-ui-toast__title {\n margin: 0;\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n line-height: var(--cfi-ui-leading-normal);\n }\n .cfi-ui-toast__description {\n margin: 0;\n font-size: var(--cfi-ui-text-xs);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content-muted);\n overflow-wrap: anywhere;\n }\n .cfi-ui-toast__action {\n justify-self: start;\n margin-top: var(--cfi-ui-space-xs);\n padding: 0;\n border: 0;\n background: none;\n color: var(--cfi-ui-content-link);\n font-family: inherit;\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-medium);\n text-decoration: underline;\n text-underline-offset: 2px;\n cursor: pointer;\n }\n .cfi-ui-toast__close {\n flex: none;\n color: var(--cfi-ui-content-muted);\n }\n}\n");
1118
1312
 
1119
1313
  // src/Toast.tsx
1120
- import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
1314
+ import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
1121
1315
  var ToastContext = createContext2(null);
1122
1316
  function useToast() {
1123
1317
  const api = useContext2(ToastContext);
@@ -1130,7 +1324,7 @@ function ToastProvider({
1130
1324
  max = 4,
1131
1325
  position = "bottom-right"
1132
1326
  }) {
1133
- const [items, setItems] = useState3([]);
1327
+ const [items, setItems] = useState4([]);
1134
1328
  const nextId = useRef2(1);
1135
1329
  const timers = useRef2(/* @__PURE__ */ new Map());
1136
1330
  const dismiss = useCallback((id) => {
@@ -1164,7 +1358,7 @@ function ToastProvider({
1164
1358
  pending.clear();
1165
1359
  };
1166
1360
  }, []);
1167
- const api = useMemo3(
1361
+ const api = useMemo4(
1168
1362
  () => ({
1169
1363
  toast,
1170
1364
  dismiss,
@@ -1175,24 +1369,24 @@ function ToastProvider({
1175
1369
  }),
1176
1370
  [toast, dismiss]
1177
1371
  );
1178
- return /* @__PURE__ */ jsxs14(ToastContext.Provider, { value: api, children: [
1372
+ return /* @__PURE__ */ jsxs17(ToastContext.Provider, { value: api, children: [
1179
1373
  children,
1180
- /* @__PURE__ */ jsx14(ToastViewport, { items, onDismiss: dismiss, position })
1374
+ /* @__PURE__ */ jsx17(ToastViewport, { items, onDismiss: dismiss, position })
1181
1375
  ] });
1182
1376
  }
1183
1377
  var TONE_ICON = {
1184
- neutral: /* @__PURE__ */ jsx14(Info, {}),
1185
- info: /* @__PURE__ */ jsx14(Info, {}),
1186
- success: /* @__PURE__ */ jsx14(CheckCircle2, {}),
1187
- warning: /* @__PURE__ */ jsx14(AlertTriangle, {}),
1188
- error: /* @__PURE__ */ jsx14(XCircle, {})
1378
+ neutral: /* @__PURE__ */ jsx17(Info, {}),
1379
+ info: /* @__PURE__ */ jsx17(Info, {}),
1380
+ success: /* @__PURE__ */ jsx17(CheckCircle2, {}),
1381
+ warning: /* @__PURE__ */ jsx17(AlertTriangle, {}),
1382
+ error: /* @__PURE__ */ jsx17(XCircle, {})
1189
1383
  };
1190
1384
  function ToastViewport({
1191
1385
  items,
1192
1386
  onDismiss,
1193
1387
  position
1194
1388
  }) {
1195
- return /* @__PURE__ */ jsx14(
1389
+ return /* @__PURE__ */ jsx17(
1196
1390
  "div",
1197
1391
  {
1198
1392
  role: "region",
@@ -1201,12 +1395,12 @@ function ToastViewport({
1201
1395
  "data-position": position,
1202
1396
  "data-cfi-ui-portal": "",
1203
1397
  className: cn("cfi-ui", "cfi-ui-toast-viewport"),
1204
- children: items.map((item) => /* @__PURE__ */ jsxs14("div", { "data-tone": item.tone, className: "cfi-ui-toast", children: [
1205
- /* @__PURE__ */ jsx14("span", { className: "cfi-ui-toast__icon", "aria-hidden": "true", children: TONE_ICON[item.tone ?? "neutral"] }),
1206
- /* @__PURE__ */ jsxs14("div", { className: "cfi-ui-toast__text", children: [
1207
- /* @__PURE__ */ jsx14("p", { className: "cfi-ui-toast__title", children: item.title }),
1208
- item.description && /* @__PURE__ */ jsx14("p", { className: "cfi-ui-toast__description", children: item.description }),
1209
- item.action && /* @__PURE__ */ jsx14(
1398
+ children: items.map((item) => /* @__PURE__ */ jsxs17("div", { "data-tone": item.tone, className: "cfi-ui-toast", children: [
1399
+ /* @__PURE__ */ jsx17("span", { className: "cfi-ui-toast__icon", "aria-hidden": "true", children: TONE_ICON[item.tone ?? "neutral"] }),
1400
+ /* @__PURE__ */ jsxs17("div", { className: "cfi-ui-toast__text", children: [
1401
+ /* @__PURE__ */ jsx17("p", { className: "cfi-ui-toast__title", children: item.title }),
1402
+ item.description && /* @__PURE__ */ jsx17("p", { className: "cfi-ui-toast__description", children: item.description }),
1403
+ item.action && /* @__PURE__ */ jsx17(
1210
1404
  "button",
1211
1405
  {
1212
1406
  type: "button",
@@ -1219,12 +1413,12 @@ function ToastViewport({
1219
1413
  }
1220
1414
  )
1221
1415
  ] }),
1222
- /* @__PURE__ */ jsx14(
1416
+ /* @__PURE__ */ jsx17(
1223
1417
  IconButton,
1224
1418
  {
1225
1419
  variant: "ghost",
1226
1420
  size: "sm",
1227
- icon: /* @__PURE__ */ jsx14(X3, {}),
1421
+ icon: /* @__PURE__ */ jsx17(X4, {}),
1228
1422
  label: "Dismiss",
1229
1423
  className: "cfi-ui-toast__close",
1230
1424
  onClick: () => onDismiss(item.id)
@@ -1236,15 +1430,15 @@ function ToastViewport({
1236
1430
  }
1237
1431
 
1238
1432
  // src/Card.tsx
1239
- import { forwardRef as forwardRef11 } from "react";
1433
+ import { forwardRef as forwardRef13 } from "react";
1240
1434
 
1241
1435
  // src/Card.css
1242
1436
  styleInject("@layer components {\n :where(.cfi-ui-card) {\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border);\n border-radius: var(--cfi-ui-radius-xl);\n box-shadow: var(--cfi-ui-shadow-xs);\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-card[data-variant=outline] {\n box-shadow: none;\n }\n .cfi-ui-card[data-variant=plain] {\n border-color: transparent;\n box-shadow: none;\n background: transparent;\n }\n .cfi-ui-card[data-interactive] {\n cursor: pointer;\n transition: border-color var(--cfi-ui-transition-fast), box-shadow var(--cfi-ui-transition-fast);\n }\n .cfi-ui-card[data-interactive]:hover {\n border-color: var(--cfi-ui-border-strong);\n box-shadow: var(--cfi-ui-shadow-md);\n }\n :where(.cfi-ui-card__header) {\n flex: none;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: var(--cfi-ui-space-md);\n padding: var(--cfi-ui-space-md);\n border-bottom: 1px solid var(--cfi-ui-border);\n }\n .cfi-ui-card__heading {\n display: grid;\n gap: var(--cfi-ui-space-3xs);\n min-width: 0;\n }\n .cfi-ui-card__actions {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n flex: none;\n }\n :where(.cfi-ui-card__title) {\n margin: 0;\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-semibold);\n line-height: var(--cfi-ui-leading-snug);\n color: var(--cfi-ui-content);\n text-wrap: balance;\n }\n .cfi-ui-card__description {\n flex-basis: 100%;\n margin: 0;\n font-size: var(--cfi-ui-text-xs);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content-muted);\n }\n :where(.cfi-ui-card__body) {\n flex: 1 1 auto;\n min-width: 0;\n padding: var(--cfi-ui-space-md);\n }\n .cfi-ui-card[data-flush] > .cfi-ui-card__body {\n padding: 0;\n }\n .cfi-ui-card[data-flush] > .cfi-ui-card__body:last-child {\n overflow: hidden;\n border-bottom-left-radius: var(--cfi-ui-radius-lg);\n border-bottom-right-radius: var(--cfi-ui-radius-lg);\n }\n :where(.cfi-ui-card__footer) {\n flex: none;\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n padding: var(--cfi-ui-space-sm) var(--cfi-ui-space-md);\n border-top: 1px solid var(--cfi-ui-border);\n background: var(--cfi-ui-surface-sunken);\n border-bottom-left-radius: var(--cfi-ui-radius-lg);\n border-bottom-right-radius: var(--cfi-ui-radius-lg);\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n }\n}\n");
1243
1437
 
1244
1438
  // src/Card.tsx
1245
- import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
1246
- var Card = forwardRef11(function Card2({ variant = "default", flush = false, interactive = false, className, ...rest }, ref) {
1247
- return /* @__PURE__ */ jsx15(
1439
+ import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
1440
+ var Card = forwardRef13(function Card2({ variant = "default", flush = false, interactive = false, className, ...rest }, ref) {
1441
+ return /* @__PURE__ */ jsx18(
1248
1442
  "div",
1249
1443
  {
1250
1444
  ref,
@@ -1257,65 +1451,35 @@ var Card = forwardRef11(function Card2({ variant = "default", flush = false, int
1257
1451
  );
1258
1452
  });
1259
1453
  function CardHeader({ actions, className, children, ...rest }) {
1260
- return /* @__PURE__ */ jsxs15("div", { className: cn("cfi-ui-card__header", className), ...rest, children: [
1261
- actions ? /* @__PURE__ */ jsx15("div", { className: "cfi-ui-card__heading", children }) : children,
1262
- actions && /* @__PURE__ */ jsx15("div", { className: "cfi-ui-card__actions", children: actions })
1454
+ return /* @__PURE__ */ jsxs18("div", { className: cn("cfi-ui-card__header", className), ...rest, children: [
1455
+ actions ? /* @__PURE__ */ jsx18("div", { className: "cfi-ui-card__heading", children }) : children,
1456
+ actions && /* @__PURE__ */ jsx18("div", { className: "cfi-ui-card__actions", children: actions })
1263
1457
  ] });
1264
1458
  }
1265
1459
  function CardTitle({ as: Tag = "h3", className, ...rest }) {
1266
- return /* @__PURE__ */ jsx15(Tag, { className: cn("cfi-ui-card__title", className), ...rest });
1460
+ return /* @__PURE__ */ jsx18(Tag, { className: cn("cfi-ui-card__title", className), ...rest });
1267
1461
  }
1268
1462
  function CardDescription({ className, ...rest }) {
1269
- return /* @__PURE__ */ jsx15("p", { className: cn("cfi-ui-card__description", className), ...rest });
1463
+ return /* @__PURE__ */ jsx18("p", { className: cn("cfi-ui-card__description", className), ...rest });
1270
1464
  }
1271
1465
  function CardBody({ className, ...rest }) {
1272
- return /* @__PURE__ */ jsx15("div", { className: cn("cfi-ui-card__body", className), ...rest });
1466
+ return /* @__PURE__ */ jsx18("div", { className: cn("cfi-ui-card__body", className), ...rest });
1273
1467
  }
1274
1468
  function CardFooter({ className, ...rest }) {
1275
- return /* @__PURE__ */ jsx15("div", { className: cn("cfi-ui-card__footer", className), ...rest });
1469
+ return /* @__PURE__ */ jsx18("div", { className: cn("cfi-ui-card__footer", className), ...rest });
1276
1470
  }
1277
1471
 
1278
- // src/Badge.tsx
1279
- import { forwardRef as forwardRef12 } from "react";
1280
-
1281
- // src/Badge.css
1282
- styleInject("@layer components {\n :where(.cfi-ui-badge) {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n padding: 0.125rem 0.5rem;\n border: 1px solid transparent;\n border-radius: var(--cfi-ui-radius-full);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-medium);\n line-height: 1.4;\n white-space: nowrap;\n vertical-align: middle;\n }\n .cfi-ui-badge[data-size=sm] {\n padding: 0 0.375rem;\n font-size: 0.6875rem;\n }\n .cfi-ui-badge__dot {\n flex: none;\n width: 0.375rem;\n height: 0.375rem;\n border-radius: var(--cfi-ui-radius-full);\n background: currentColor;\n }\n .cfi-ui-badge__icon {\n display: inline-flex;\n flex: none;\n }\n .cfi-ui-badge__icon > svg {\n width: 0.75rem;\n height: 0.75rem;\n display: block;\n }\n .cfi-ui-badge--count {\n justify-content: center;\n min-width: 1.25rem;\n padding-inline: 0.375rem;\n font-variant-numeric: tabular-nums;\n }\n .cfi-ui-badge[data-variant=soft][data-tone=neutral] {\n background: var(--cfi-ui-neutral-soft);\n color: var(--cfi-ui-neutral-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=success] {\n background: var(--cfi-ui-success-soft);\n color: var(--cfi-ui-success-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=warning] {\n background: var(--cfi-ui-warning-soft);\n color: var(--cfi-ui-warning-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=error] {\n background: var(--cfi-ui-error-soft);\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=info] {\n background: var(--cfi-ui-info-soft);\n color: var(--cfi-ui-info-text);\n }\n .cfi-ui-badge[data-variant=soft][data-tone=accent] {\n background: var(--cfi-ui-accent-soft);\n color: var(--cfi-ui-accent-hover);\n }\n .cfi-ui-badge[data-variant=solid] {\n color: var(--cfi-ui-content-inverse);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=neutral] {\n background: var(--cfi-ui-content-muted);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=success] {\n background: var(--cfi-ui-success-text);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=warning] {\n background: var(--cfi-ui-warning-text);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=error] {\n background: var(--cfi-ui-error-text);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=info] {\n background: var(--cfi-ui-info-text);\n }\n .cfi-ui-badge[data-variant=solid][data-tone=accent] {\n background: var(--cfi-ui-accent);\n color: var(--cfi-ui-accent-fg);\n }\n .cfi-ui-badge[data-variant=outline] {\n background: transparent;\n }\n .cfi-ui-badge[data-variant=outline][data-tone=neutral] {\n border-color: var(--cfi-ui-neutral-border);\n color: var(--cfi-ui-neutral-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=success] {\n border-color: var(--cfi-ui-success-border);\n color: var(--cfi-ui-success-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=warning] {\n border-color: var(--cfi-ui-warning-border);\n color: var(--cfi-ui-warning-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=error] {\n border-color: var(--cfi-ui-error-border);\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=info] {\n border-color: var(--cfi-ui-info-border);\n color: var(--cfi-ui-info-text);\n }\n .cfi-ui-badge[data-variant=outline][data-tone=accent] {\n border-color: var(--cfi-ui-accent);\n color: var(--cfi-ui-accent-hover);\n }\n}\n");
1283
-
1284
- // src/Badge.tsx
1285
- import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
1286
- var Badge = forwardRef12(function Badge2({ tone = "neutral", variant = "soft", size = "md", dot = false, icon, className, children, ...rest }, ref) {
1287
- return /* @__PURE__ */ jsxs16(
1288
- "span",
1289
- {
1290
- ref,
1291
- "data-tone": tone,
1292
- "data-variant": variant,
1293
- "data-size": size,
1294
- className: cn("cfi-ui", "cfi-ui-badge", className),
1295
- ...rest,
1296
- children: [
1297
- icon ? /* @__PURE__ */ jsx16("span", { className: "cfi-ui-badge__icon", children: icon }) : dot && /* @__PURE__ */ jsx16("span", { className: "cfi-ui-badge__dot", "aria-hidden": "true" }),
1298
- children
1299
- ]
1300
- }
1301
- );
1302
- });
1303
- var CountBadge = forwardRef12(function CountBadge2({ count, max = 99, hideZero = true, className, ...rest }, ref) {
1304
- if (count === 0 && hideZero) return null;
1305
- return /* @__PURE__ */ jsx16(Badge, { ref, className: cn("cfi-ui-badge--count", className), ...rest, children: count > max ? `${max}+` : count });
1306
- });
1307
-
1308
1472
  // src/Table.tsx
1309
- import { forwardRef as forwardRef13 } from "react";
1473
+ import { forwardRef as forwardRef14 } from "react";
1310
1474
  import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
1311
1475
 
1312
1476
  // src/Table.css
1313
1477
  styleInject("@layer components {\n :where(.cfi-ui-table-scroller) {\n width: 100%;\n overflow-x: auto;\n position: relative;\n }\n :where(.cfi-ui-table) {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content);\n text-align: left;\n }\n :where(.cfi-ui-table__th) {\n height: 2.75rem;\n padding: 0.5rem 0.75rem;\n border-bottom: 1px solid var(--cfi-ui-border);\n background: transparent;\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n color: var(--cfi-ui-content);\n white-space: nowrap;\n text-align: left;\n vertical-align: middle;\n }\n .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n background: var(--cfi-ui-surface-sunken);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-semibold);\n color: var(--cfi-ui-content-muted);\n border-bottom-color: var(--cfi-ui-border-strong);\n }\n .cfi-ui-table[data-sticky] .cfi-ui-table__th {\n position: sticky;\n top: 0;\n z-index: var(--cfi-ui-z-raised, 10);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child,\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n position: sticky;\n left: 0;\n background: var(--cfi-ui-surface);\n box-shadow: 1px 0 0 0 var(--cfi-ui-border-subtle);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n z-index: 1;\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child {\n z-index: calc(var(--cfi-ui-z-raised, 10) + 1);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td:first-child {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-selected] .cfi-ui-table__td:first-child {\n background: var(--cfi-ui-surface-selected);\n }\n .cfi-ui-table__sort {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n margin: -0.125rem -0.25rem;\n padding: 0.125rem 0.25rem;\n border: 0;\n border-radius: var(--cfi-ui-radius-sm);\n background: none;\n color: inherit;\n font: inherit;\n cursor: pointer;\n }\n .cfi-ui-table__sort:hover {\n color: var(--cfi-ui-content);\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-table__sort-icon {\n display: inline-flex;\n flex: none;\n opacity: 0.55;\n }\n .cfi-ui-table__th[aria-sort=ascending] .cfi-ui-table__sort-icon,\n .cfi-ui-table__th[aria-sort=descending] .cfi-ui-table__sort-icon {\n opacity: 1;\n color: var(--cfi-ui-accent);\n }\n .cfi-ui-table__sort-icon > svg {\n width: 0.75rem;\n height: 0.75rem;\n display: block;\n }\n :where(.cfi-ui-table__td) {\n padding: 0.5rem 0.75rem;\n border-bottom: 1px solid var(--cfi-ui-border-subtle);\n vertical-align: middle;\n }\n .cfi-ui-table[data-density=compact] .cfi-ui-table__td,\n .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n padding: 0.3125rem 0.625rem;\n }\n .cfi-ui-table__row[data-interactive] {\n cursor: pointer;\n }\n .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-table__row[data-selected] .cfi-ui-table__td {\n background: var(--cfi-ui-surface-selected);\n }\n .cfi-ui-table__body .cfi-ui-table__row:last-child .cfi-ui-table__td {\n border-bottom: 0;\n }\n .cfi-ui-table__th[data-numeric],\n .cfi-ui-table__td[data-numeric] {\n text-align: right;\n font-variant-numeric: tabular-nums;\n }\n .cfi-ui-table__td[data-truncate] {\n max-width: 18rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ui-table__foot .cfi-ui-table__td {\n border-top: 1px solid var(--cfi-ui-border-strong);\n border-bottom: 0;\n background: var(--cfi-ui-surface-sunken);\n font-weight: var(--cfi-ui-weight-semibold);\n }\n .cfi-ui-table__empty {\n padding: var(--cfi-ui-space-xl) var(--cfi-ui-space-md);\n border-bottom: 0;\n color: var(--cfi-ui-content-muted);\n text-align: center;\n }\n .cfi-ui-table__caption {\n padding: var(--cfi-ui-space-sm) 0;\n caption-side: bottom;\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n text-align: left;\n }\n}\n");
1314
1478
 
1315
1479
  // src/Table.tsx
1316
- import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
1317
- var Table = forwardRef13(function Table2({ density = "comfortable", stickyHeader = false, stickyFirstColumn = false, className, ...rest }, ref) {
1318
- return /* @__PURE__ */ jsx17(
1480
+ import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
1481
+ var Table = forwardRef14(function Table2({ density = "comfortable", stickyHeader = false, stickyFirstColumn = false, className, ...rest }, ref) {
1482
+ return /* @__PURE__ */ jsx19(
1319
1483
  "table",
1320
1484
  {
1321
1485
  ref,
@@ -1328,20 +1492,20 @@ var Table = forwardRef13(function Table2({ density = "comfortable", stickyHeader
1328
1492
  );
1329
1493
  });
1330
1494
  function TableScroller({ className, ...rest }) {
1331
- return /* @__PURE__ */ jsx17("div", { className: cn("cfi-ui", "cfi-ui-table-scroller", className), ...rest });
1495
+ return /* @__PURE__ */ jsx19("div", { className: cn("cfi-ui", "cfi-ui-table-scroller", className), ...rest });
1332
1496
  }
1333
1497
  function TableHeader({ className, ...rest }) {
1334
- return /* @__PURE__ */ jsx17("thead", { className: cn("cfi-ui-table__head", className), ...rest });
1498
+ return /* @__PURE__ */ jsx19("thead", { className: cn("cfi-ui-table__head", className), ...rest });
1335
1499
  }
1336
1500
  function TableBody({ className, ...rest }) {
1337
- return /* @__PURE__ */ jsx17("tbody", { className: cn("cfi-ui-table__body", className), ...rest });
1501
+ return /* @__PURE__ */ jsx19("tbody", { className: cn("cfi-ui-table__body", className), ...rest });
1338
1502
  }
1339
1503
  function TableFooter({ className, ...rest }) {
1340
- return /* @__PURE__ */ jsx17("tfoot", { className: cn("cfi-ui-table__foot", className), ...rest });
1504
+ return /* @__PURE__ */ jsx19("tfoot", { className: cn("cfi-ui-table__foot", className), ...rest });
1341
1505
  }
1342
1506
  var TableFoot = TableFooter;
1343
1507
  function TableRow({ selected, interactive, className, ...rest }) {
1344
- return /* @__PURE__ */ jsx17(
1508
+ return /* @__PURE__ */ jsx19(
1345
1509
  "tr",
1346
1510
  {
1347
1511
  "data-selected": selected || void 0,
@@ -1364,7 +1528,7 @@ function TableHead({
1364
1528
  ...rest
1365
1529
  }) {
1366
1530
  const ariaSort = sortable ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
1367
- return /* @__PURE__ */ jsx17(
1531
+ return /* @__PURE__ */ jsx19(
1368
1532
  "th",
1369
1533
  {
1370
1534
  scope: "col",
@@ -1373,15 +1537,15 @@ function TableHead({
1373
1537
  style: { width, ...style },
1374
1538
  className: cn("cfi-ui-table__th", className),
1375
1539
  ...rest,
1376
- children: sortable ? /* @__PURE__ */ jsxs17("button", { type: "button", className: "cfi-ui-table__sort", onClick: onSort, children: [
1377
- /* @__PURE__ */ jsx17("span", { children }),
1378
- /* @__PURE__ */ jsx17("span", { className: "cfi-ui-table__sort-icon", "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsx17(ArrowUp, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ChevronsUpDown, {}) })
1540
+ children: sortable ? /* @__PURE__ */ jsxs19("button", { type: "button", className: "cfi-ui-table__sort", onClick: onSort, children: [
1541
+ /* @__PURE__ */ jsx19("span", { children }),
1542
+ /* @__PURE__ */ jsx19("span", { className: "cfi-ui-table__sort-icon", "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsx19(ArrowUp, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsx19(ArrowDown, {}) : /* @__PURE__ */ jsx19(ChevronsUpDown, {}) })
1379
1543
  ] }) : children
1380
1544
  }
1381
1545
  );
1382
1546
  }
1383
1547
  function TableCell({ numeric, truncate, className, ...rest }) {
1384
- return /* @__PURE__ */ jsx17(
1548
+ return /* @__PURE__ */ jsx19(
1385
1549
  "td",
1386
1550
  {
1387
1551
  "data-numeric": numeric || void 0,
@@ -1392,26 +1556,26 @@ function TableCell({ numeric, truncate, className, ...rest }) {
1392
1556
  );
1393
1557
  }
1394
1558
  function TableEmpty({ colSpan, children }) {
1395
- return /* @__PURE__ */ jsx17("tr", { className: "cfi-ui-table__row", children: /* @__PURE__ */ jsx17("td", { colSpan, className: "cfi-ui-table__empty", children }) });
1559
+ return /* @__PURE__ */ jsx19("tr", { className: "cfi-ui-table__row", children: /* @__PURE__ */ jsx19("td", { colSpan, className: "cfi-ui-table__empty", children }) });
1396
1560
  }
1397
1561
  function TableCaption({ className, ...rest }) {
1398
- return /* @__PURE__ */ jsx17("caption", { className: cn("cfi-ui-table__caption", className), ...rest });
1562
+ return /* @__PURE__ */ jsx19("caption", { className: cn("cfi-ui-table__caption", className), ...rest });
1399
1563
  }
1400
1564
 
1401
1565
  // src/Tabs.tsx
1402
- import { forwardRef as forwardRef14 } from "react";
1566
+ import { forwardRef as forwardRef15 } from "react";
1403
1567
  import * as RadixTabs from "@radix-ui/react-tabs";
1404
1568
 
1405
1569
  // src/Tabs.css
1406
1570
  styleInject("@layer components {\n .cfi-ui-tabs {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n :where(.cfi-ui-tabs__list) {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n overflow-x: auto;\n scrollbar-width: none;\n }\n .cfi-ui-tabs__list::-webkit-scrollbar {\n display: none;\n }\n :where(.cfi-ui-tabs__trigger) {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n flex: none;\n border: 0;\n background: none;\n color: var(--cfi-ui-content-muted);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n cursor: pointer;\n transition:\n color var(--cfi-ui-transition-fast),\n background-color var(--cfi-ui-transition-fast),\n border-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-tabs__trigger:disabled {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-tabs__icon {\n display: inline-flex;\n flex: none;\n }\n .cfi-ui-tabs__icon > svg {\n width: 0.875rem;\n height: 0.875rem;\n display: block;\n }\n .cfi-ui-tabs__list[data-variant=underline] {\n gap: var(--cfi-ui-space-md);\n border-bottom: 1px solid var(--cfi-ui-border);\n }\n .cfi-ui-tabs__list[data-variant=underline] .cfi-ui-tabs__trigger {\n padding: 0.5rem 0.125rem;\n border-bottom: 2px solid transparent;\n margin-bottom: -1px;\n }\n .cfi-ui-tabs__list[data-variant=underline] .cfi-ui-tabs__trigger:hover:not(:disabled) {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-tabs__list[data-variant=underline] .cfi-ui-tabs__trigger[data-state=active] {\n color: var(--cfi-ui-content);\n border-bottom-color: var(--cfi-ui-accent);\n }\n .cfi-ui-tabs__list[data-variant=pill] {\n gap: 0;\n padding: 0.1875rem;\n background: var(--cfi-ui-surface-muted);\n border: 0;\n border-radius: 14px;\n align-self: flex-start;\n }\n .cfi-ui-tabs__list[data-variant=pill] .cfi-ui-tabs__trigger {\n padding: 0.25rem 0.75rem;\n border-radius: 14px;\n color: var(--cfi-ui-content);\n }\n .cfi-ui-tabs__list[data-variant=pill] .cfi-ui-tabs__trigger:hover:not(:disabled) {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-tabs__list[data-variant=pill] .cfi-ui-tabs__trigger[data-state=active] {\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n box-shadow: var(--cfi-ui-shadow-xs);\n }\n :where(.cfi-ui-tabs__content) {\n min-width: 0;\n padding-top: var(--cfi-ui-space-md);\n }\n .cfi-ui-tabs__content:focus-visible {\n outline: none;\n }\n}\n");
1407
1571
 
1408
1572
  // src/Tabs.tsx
1409
- import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
1573
+ import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
1410
1574
  var Tabs = RadixTabs.Root;
1411
1575
  var TabsRoot = RadixTabs.Root;
1412
- var TabsList = forwardRef14(
1576
+ var TabsList = forwardRef15(
1413
1577
  function TabsList2({ variant = "pill", className, ...rest }, ref) {
1414
- return /* @__PURE__ */ jsx18(
1578
+ return /* @__PURE__ */ jsx20(
1415
1579
  RadixTabs.List,
1416
1580
  {
1417
1581
  ref,
@@ -1422,20 +1586,20 @@ var TabsList = forwardRef14(
1422
1586
  );
1423
1587
  }
1424
1588
  );
1425
- var TabsTrigger = forwardRef14(
1589
+ var TabsTrigger = forwardRef15(
1426
1590
  function TabsTrigger2({ icon, count, className, children, ...rest }, ref) {
1427
- return /* @__PURE__ */ jsxs18(RadixTabs.Trigger, { ref, className: cn("cfi-ui-tabs__trigger", className), ...rest, children: [
1428
- icon && /* @__PURE__ */ jsx18("span", { className: "cfi-ui-tabs__icon", children: icon }),
1429
- /* @__PURE__ */ jsx18("span", { children }),
1430
- count !== void 0 && /* @__PURE__ */ jsx18(CountBadge, { count, size: "sm" })
1591
+ return /* @__PURE__ */ jsxs20(RadixTabs.Trigger, { ref, className: cn("cfi-ui-tabs__trigger", className), ...rest, children: [
1592
+ icon && /* @__PURE__ */ jsx20("span", { className: "cfi-ui-tabs__icon", children: icon }),
1593
+ /* @__PURE__ */ jsx20("span", { children }),
1594
+ count !== void 0 && /* @__PURE__ */ jsx20(CountBadge, { count, size: "sm" })
1431
1595
  ] });
1432
1596
  }
1433
1597
  );
1434
- var TabsContent = forwardRef14(function TabsContent2({ className, ...rest }, ref) {
1435
- return /* @__PURE__ */ jsx18(RadixTabs.Content, { ref, className: cn("cfi-ui-tabs__content", className), ...rest });
1598
+ var TabsContent = forwardRef15(function TabsContent2({ className, ...rest }, ref) {
1599
+ return /* @__PURE__ */ jsx20(RadixTabs.Content, { ref, className: cn("cfi-ui-tabs__content", className), ...rest });
1436
1600
  });
1437
1601
  function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }) {
1438
- return /* @__PURE__ */ jsxs18(
1602
+ return /* @__PURE__ */ jsxs20(
1439
1603
  Tabs,
1440
1604
  {
1441
1605
  value,
@@ -1443,7 +1607,7 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
1443
1607
  defaultValue: defaultValue ?? tabs[0]?.value,
1444
1608
  className: cn("cfi-ui", "cfi-ui-tabs", className),
1445
1609
  children: [
1446
- /* @__PURE__ */ jsx18(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx18(
1610
+ /* @__PURE__ */ jsx20(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx20(
1447
1611
  TabsTrigger,
1448
1612
  {
1449
1613
  value: tab.value,
@@ -1454,25 +1618,25 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
1454
1618
  },
1455
1619
  tab.value
1456
1620
  )) }),
1457
- tabs.map((tab) => /* @__PURE__ */ jsx18(TabsContent, { value: tab.value, children: tab.content }, tab.value))
1621
+ tabs.map((tab) => /* @__PURE__ */ jsx20(TabsContent, { value: tab.value, children: tab.content }, tab.value))
1458
1622
  ]
1459
1623
  }
1460
1624
  );
1461
1625
  }
1462
1626
 
1463
1627
  // src/Display.tsx
1464
- import { forwardRef as forwardRef15 } from "react";
1628
+ import { forwardRef as forwardRef16 } from "react";
1465
1629
 
1466
1630
  // src/Display.css
1467
1631
  styleInject('@layer components {\n :where(.cfi-ui-separator) {\n flex: none;\n background: var(--cfi-ui-border);\n }\n .cfi-ui-separator[data-orientation=horizontal] {\n width: 100%;\n height: 1px;\n }\n .cfi-ui-separator[data-orientation=vertical] {\n width: 1px;\n align-self: stretch;\n min-height: 1rem;\n }\n .cfi-ui-separator-labeled {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n width: 100%;\n color: var(--cfi-ui-content-muted);\n font-size: var(--cfi-ui-text-xs);\n }\n .cfi-ui-separator-labeled::before,\n .cfi-ui-separator-labeled::after {\n content: "";\n flex: 1 1 auto;\n height: 1px;\n background: var(--cfi-ui-border);\n }\n .cfi-ui-separator-labeled__label {\n flex: none;\n white-space: nowrap;\n }\n .cfi-ui-progress-wrap {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n width: 100%;\n }\n .cfi-ui-progress {\n position: relative;\n flex: 1 1 auto;\n height: 0.5rem;\n overflow: hidden;\n border-radius: var(--cfi-ui-radius-full);\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-progress[data-size=sm] {\n height: 0.25rem;\n }\n .cfi-ui-progress__fill {\n height: 100%;\n border-radius: var(--cfi-ui-radius-full);\n background: var(--cfi-ui-accent);\n transition: width var(--cfi-ui-transition-base);\n }\n .cfi-ui-progress[data-tone=success] .cfi-ui-progress__fill {\n background: var(--cfi-ui-success);\n }\n .cfi-ui-progress[data-tone=warning] .cfi-ui-progress__fill {\n background: var(--cfi-ui-warning);\n }\n .cfi-ui-progress[data-tone=error] .cfi-ui-progress__fill {\n background: var(--cfi-ui-error);\n }\n .cfi-ui-progress[data-indeterminate] .cfi-ui-progress__fill {\n width: 35%;\n animation: cfi-ui-progress-slide 1.2s ease-in-out infinite;\n transition: none;\n }\n @keyframes cfi-ui-progress-slide {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(300%);\n }\n }\n .cfi-ui-progress__value {\n flex: none;\n min-width: 3ch;\n font-size: var(--cfi-ui-text-xs);\n font-variant-numeric: tabular-nums;\n color: var(--cfi-ui-content-muted);\n text-align: right;\n }\n :where(.cfi-ui-skeleton) {\n background: var(--cfi-ui-surface-active);\n border-radius: var(--cfi-ui-radius-sm);\n animation: cfi-ui-pulse 1.6s ease-in-out infinite;\n }\n .cfi-ui-skeleton[data-shape=text] {\n height: 0.875em;\n margin-block: 0.25em;\n border-radius: var(--cfi-ui-radius-sm);\n }\n .cfi-ui-skeleton[data-shape=circle] {\n border-radius: var(--cfi-ui-radius-full);\n aspect-ratio: 1;\n }\n .cfi-ui-skeleton-stack {\n display: grid;\n gap: 0;\n }\n :where(.cfi-ui-avatar) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n overflow: hidden;\n width: 2rem;\n height: 2rem;\n border-radius: var(--cfi-ui-radius-full);\n background: var(--cfi-ui-surface-active);\n color: var(--cfi-ui-content-muted);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-semibold);\n letter-spacing: 0.02em;\n user-select: none;\n }\n .cfi-ui-avatar[data-size=xs] {\n width: 1.25rem;\n height: 1.25rem;\n font-size: 0.5625rem;\n }\n .cfi-ui-avatar[data-size=sm] {\n width: 1.5rem;\n height: 1.5rem;\n font-size: 0.625rem;\n }\n .cfi-ui-avatar[data-size=lg] {\n width: 2.5rem;\n height: 2.5rem;\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n .cfi-ui-avatar-group {\n display: inline-flex;\n align-items: center;\n }\n .cfi-ui-avatar-group > .cfi-ui-avatar {\n box-shadow: 0 0 0 2px var(--cfi-ui-surface);\n }\n .cfi-ui-avatar-group > .cfi-ui-avatar + .cfi-ui-avatar {\n margin-left: -0.5rem;\n }\n .cfi-ui-avatar--overflow {\n background: var(--cfi-ui-surface-sunken);\n color: var(--cfi-ui-content-muted);\n font-variant-numeric: tabular-nums;\n }\n :where(.cfi-ui-scroll-area) {\n min-width: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--cfi-ui-border-strong) transparent;\n overscroll-behavior: contain;\n }\n .cfi-ui-scroll-area[data-orientation=vertical] {\n overflow-y: auto;\n overflow-x: hidden;\n }\n .cfi-ui-scroll-area[data-orientation=horizontal] {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .cfi-ui-scroll-area[data-orientation=both] {\n overflow: auto;\n }\n .cfi-ui-scroll-area::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }\n .cfi-ui-scroll-area::-webkit-scrollbar-track {\n background: transparent;\n }\n .cfi-ui-scroll-area::-webkit-scrollbar-thumb {\n background: var(--cfi-ui-border-strong);\n border-radius: var(--cfi-ui-radius-full);\n border: 3px solid transparent;\n background-clip: content-box;\n }\n .cfi-ui-scroll-area::-webkit-scrollbar-thumb:hover {\n background: var(--cfi-ui-content-subtle);\n background-clip: content-box;\n }\n}\n');
1468
1632
 
1469
1633
  // src/Display.tsx
1470
- import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
1634
+ import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
1471
1635
  function Separator3({ orientation = "horizontal", label, className, ...rest }) {
1472
1636
  if (label) {
1473
- return /* @__PURE__ */ jsx19("div", { className: cn("cfi-ui", "cfi-ui-separator-labeled", className), ...rest, children: /* @__PURE__ */ jsx19("span", { className: "cfi-ui-separator-labeled__label", children: label }) });
1637
+ return /* @__PURE__ */ jsx21("div", { className: cn("cfi-ui", "cfi-ui-separator-labeled", className), ...rest, children: /* @__PURE__ */ jsx21("span", { className: "cfi-ui-separator-labeled__label", children: label }) });
1474
1638
  }
1475
- return /* @__PURE__ */ jsx19(
1639
+ return /* @__PURE__ */ jsx21(
1476
1640
  "div",
1477
1641
  {
1478
1642
  role: "separator",
@@ -1493,8 +1657,8 @@ function Progress({
1493
1657
  ...rest
1494
1658
  }) {
1495
1659
  const clamped = value == null ? null : Math.max(0, Math.min(100, value));
1496
- return /* @__PURE__ */ jsxs19("div", { className: cn("cfi-ui", "cfi-ui-progress-wrap", className), ...rest, children: [
1497
- /* @__PURE__ */ jsx19(
1660
+ return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-progress-wrap", className), ...rest, children: [
1661
+ /* @__PURE__ */ jsx21(
1498
1662
  "div",
1499
1663
  {
1500
1664
  role: "progressbar",
@@ -1506,7 +1670,7 @@ function Progress({
1506
1670
  "data-size": size,
1507
1671
  "data-indeterminate": clamped == null || void 0,
1508
1672
  className: "cfi-ui-progress",
1509
- children: /* @__PURE__ */ jsx19(
1673
+ children: /* @__PURE__ */ jsx21(
1510
1674
  "div",
1511
1675
  {
1512
1676
  className: "cfi-ui-progress__fill",
@@ -1515,7 +1679,7 @@ function Progress({
1515
1679
  )
1516
1680
  }
1517
1681
  ),
1518
- showValue && clamped != null && /* @__PURE__ */ jsxs19("span", { className: "cfi-ui-progress__value", children: [
1682
+ showValue && clamped != null && /* @__PURE__ */ jsxs21("span", { className: "cfi-ui-progress__value", children: [
1519
1683
  Math.round(clamped),
1520
1684
  "%"
1521
1685
  ] })
@@ -1523,7 +1687,7 @@ function Progress({
1523
1687
  }
1524
1688
  function Skeleton({ shape = "block", width, height, lines = 1, className, style, ...rest }) {
1525
1689
  if (shape === "text" && lines > 1) {
1526
- return /* @__PURE__ */ jsx19("div", { className: cn("cfi-ui", "cfi-ui-skeleton-stack", className), "aria-hidden": "true", ...rest, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx19(
1690
+ return /* @__PURE__ */ jsx21("div", { className: cn("cfi-ui", "cfi-ui-skeleton-stack", className), "aria-hidden": "true", ...rest, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx21(
1527
1691
  "div",
1528
1692
  {
1529
1693
  "data-shape": "text",
@@ -1533,7 +1697,7 @@ function Skeleton({ shape = "block", width, height, lines = 1, className, style,
1533
1697
  i
1534
1698
  )) });
1535
1699
  }
1536
- return /* @__PURE__ */ jsx19(
1700
+ return /* @__PURE__ */ jsx21(
1537
1701
  "div",
1538
1702
  {
1539
1703
  "aria-hidden": "true",
@@ -1544,21 +1708,21 @@ function Skeleton({ shape = "block", width, height, lines = 1, className, style,
1544
1708
  }
1545
1709
  );
1546
1710
  }
1547
- var Avatar = forwardRef15(function Avatar2({ name, src, size = "md", className, ...rest }, ref) {
1711
+ var Avatar = forwardRef16(function Avatar2({ name, src, size = "md", className, ...rest }, ref) {
1548
1712
  const parts = name.trim().split(/\s+/).filter(Boolean);
1549
1713
  const initials = parts.length === 0 ? "?" : parts.length === 1 ? parts[0].slice(0, 2).toUpperCase() : `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
1550
- return /* @__PURE__ */ jsxs19("span", { ref, "data-size": size, className: cn("cfi-ui", "cfi-ui-avatar", className), ...rest, children: [
1551
- src ? /* @__PURE__ */ jsx19("img", { src, alt: name, className: "cfi-ui-avatar__image" }) : /* @__PURE__ */ jsx19("span", { "aria-hidden": "true", children: initials }),
1552
- !src && /* @__PURE__ */ jsx19("span", { className: "cfi-ui-sr-only", children: name })
1714
+ return /* @__PURE__ */ jsxs21("span", { ref, "data-size": size, className: cn("cfi-ui", "cfi-ui-avatar", className), ...rest, children: [
1715
+ src ? /* @__PURE__ */ jsx21("img", { src, alt: name, className: "cfi-ui-avatar__image" }) : /* @__PURE__ */ jsx21("span", { "aria-hidden": "true", children: initials }),
1716
+ !src && /* @__PURE__ */ jsx21("span", { className: "cfi-ui-sr-only", children: name })
1553
1717
  ] });
1554
1718
  });
1555
1719
  function AvatarGroup({ max, className, children, ...rest }) {
1556
1720
  const items = Array.isArray(children) ? children : [children];
1557
1721
  const shown = max ? items.slice(0, max) : items;
1558
1722
  const hidden = items.length - shown.length;
1559
- return /* @__PURE__ */ jsxs19("div", { className: cn("cfi-ui", "cfi-ui-avatar-group", className), ...rest, children: [
1723
+ return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-avatar-group", className), ...rest, children: [
1560
1724
  shown,
1561
- hidden > 0 && /* @__PURE__ */ jsxs19("span", { className: "cfi-ui-avatar cfi-ui-avatar--overflow", children: [
1725
+ hidden > 0 && /* @__PURE__ */ jsxs21("span", { className: "cfi-ui-avatar cfi-ui-avatar--overflow", children: [
1562
1726
  "+",
1563
1727
  hidden
1564
1728
  ] })
@@ -1571,7 +1735,7 @@ function ScrollArea({
1571
1735
  style,
1572
1736
  ...rest
1573
1737
  }) {
1574
- return /* @__PURE__ */ jsx19(
1738
+ return /* @__PURE__ */ jsx21(
1575
1739
  "div",
1576
1740
  {
1577
1741
  "data-orientation": orientation,
@@ -1583,29 +1747,29 @@ function ScrollArea({
1583
1747
  }
1584
1748
 
1585
1749
  // src/Accordion.tsx
1586
- import { forwardRef as forwardRef16 } from "react";
1750
+ import { forwardRef as forwardRef17 } from "react";
1587
1751
  import * as RadixAccordion from "@radix-ui/react-accordion";
1588
1752
  import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
1589
- import { ChevronDown as ChevronDown3 } from "lucide-react";
1753
+ import { ChevronDown as ChevronDown4 } from "lucide-react";
1590
1754
 
1591
1755
  // src/Accordion.css
1592
1756
  styleInject("@layer components {\n :where(.cfi-ui-accordion) {\n display: flex;\n flex-direction: column;\n min-width: 0;\n border: 1px solid var(--cfi-ui-border);\n border-radius: var(--cfi-ui-radius-lg);\n background: var(--cfi-ui-surface);\n overflow: hidden;\n }\n .cfi-ui-accordion__item + .cfi-ui-accordion__item {\n border-top: 1px solid var(--cfi-ui-border);\n }\n .cfi-ui-accordion__header {\n margin: 0;\n }\n .cfi-ui-accordion__trigger {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n width: 100%;\n padding: 0.625rem var(--cfi-ui-space-md);\n border: 0;\n background: none;\n color: var(--cfi-ui-content);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n text-align: left;\n cursor: pointer;\n transition: background-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-accordion__trigger:hover:not(:disabled) {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-accordion__trigger:disabled {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-accordion__chevron {\n display: inline-flex;\n flex: none;\n color: var(--cfi-ui-content-muted);\n transition: transform var(--cfi-ui-transition-fast);\n }\n .cfi-ui-accordion__trigger[data-state=open] .cfi-ui-accordion__chevron {\n transform: rotate(180deg);\n }\n .cfi-ui-accordion__chevron > svg {\n width: 0.875rem;\n height: 0.875rem;\n display: block;\n }\n .cfi-ui-accordion__label {\n flex: 1 1 auto;\n min-width: 0;\n }\n .cfi-ui-accordion__meta {\n flex: none;\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-normal);\n font-variant-numeric: tabular-nums;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-accordion__content {\n overflow: hidden;\n }\n .cfi-ui-accordion__content[data-state=open] {\n animation: cfi-ui-accordion-open var(--cfi-ui-transition-base);\n }\n .cfi-ui-accordion__content[data-state=closed] {\n animation: cfi-ui-accordion-close var(--cfi-ui-transition-base);\n }\n @keyframes cfi-ui-accordion-open {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n @keyframes cfi-ui-accordion-close {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n .cfi-ui-accordion__inner {\n padding: 0 var(--cfi-ui-space-md) var(--cfi-ui-space-md);\n }\n :where(.cfi-ui-toggle-group) {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-3xs);\n padding: var(--cfi-ui-space-3xs);\n background: var(--cfi-ui-surface-sunken);\n border: 1px solid var(--cfi-ui-border);\n border-radius: var(--cfi-ui-radius-md);\n }\n :where(.cfi-ui-toggle-group__item) {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n height: 1.625rem;\n padding-inline: 0.5rem;\n border: 0;\n border-radius: var(--cfi-ui-radius-sm);\n background: transparent;\n color: var(--cfi-ui-content-muted);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-medium);\n white-space: nowrap;\n cursor: pointer;\n transition: background-color var(--cfi-ui-transition-fast), color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-toggle-group[data-size=md] .cfi-ui-toggle-group__item {\n height: 1.875rem;\n padding-inline: 0.625rem;\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-toggle-group__item:hover:not(:disabled) {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-toggle-group__item[data-state=on] {\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n box-shadow: var(--cfi-ui-shadow-xs);\n }\n .cfi-ui-toggle-group__item:disabled {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-toggle-group__icon {\n display: inline-flex;\n flex: none;\n }\n .cfi-ui-toggle-group__icon > svg {\n width: 0.875rem;\n height: 0.875rem;\n display: block;\n }\n}\n");
1593
1757
 
1594
1758
  // src/Accordion.tsx
1595
- import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
1759
+ import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
1596
1760
  var AccordionRoot = RadixAccordion.Root;
1597
- var AccordionItem = forwardRef16(function AccordionItem2({ className, ...rest }, ref) {
1598
- return /* @__PURE__ */ jsx20(RadixAccordion.Item, { ref, className: cn("cfi-ui-accordion__item", className), ...rest });
1761
+ var AccordionItem = forwardRef17(function AccordionItem2({ className, ...rest }, ref) {
1762
+ return /* @__PURE__ */ jsx22(RadixAccordion.Item, { ref, className: cn("cfi-ui-accordion__item", className), ...rest });
1599
1763
  });
1600
- var AccordionTrigger = forwardRef16(function AccordionTrigger2({ meta, className, children, ...rest }, ref) {
1601
- return /* @__PURE__ */ jsx20(RadixAccordion.Header, { className: "cfi-ui-accordion__header", children: /* @__PURE__ */ jsxs20(RadixAccordion.Trigger, { ref, className: cn("cfi-ui-accordion__trigger", className), ...rest, children: [
1602
- /* @__PURE__ */ jsx20("span", { className: "cfi-ui-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(ChevronDown3, {}) }),
1603
- /* @__PURE__ */ jsx20("span", { className: "cfi-ui-accordion__label", children }),
1604
- meta && /* @__PURE__ */ jsx20("span", { className: "cfi-ui-accordion__meta", children: meta })
1764
+ var AccordionTrigger = forwardRef17(function AccordionTrigger2({ meta, className, children, ...rest }, ref) {
1765
+ return /* @__PURE__ */ jsx22(RadixAccordion.Header, { className: "cfi-ui-accordion__header", children: /* @__PURE__ */ jsxs22(RadixAccordion.Trigger, { ref, className: cn("cfi-ui-accordion__trigger", className), ...rest, children: [
1766
+ /* @__PURE__ */ jsx22("span", { className: "cfi-ui-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx22(ChevronDown4, {}) }),
1767
+ /* @__PURE__ */ jsx22("span", { className: "cfi-ui-accordion__label", children }),
1768
+ meta && /* @__PURE__ */ jsx22("span", { className: "cfi-ui-accordion__meta", children: meta })
1605
1769
  ] }) });
1606
1770
  });
1607
- var AccordionContent = forwardRef16(function AccordionContent2({ className, children, ...rest }, ref) {
1608
- return /* @__PURE__ */ jsx20(RadixAccordion.Content, { ref, className: cn("cfi-ui-accordion__content", className), ...rest, children: /* @__PURE__ */ jsx20("div", { className: "cfi-ui-accordion__inner", children }) });
1771
+ var AccordionContent = forwardRef17(function AccordionContent2({ className, children, ...rest }, ref) {
1772
+ return /* @__PURE__ */ jsx22(RadixAccordion.Content, { ref, className: cn("cfi-ui-accordion__content", className), ...rest, children: /* @__PURE__ */ jsx22("div", { className: "cfi-ui-accordion__inner", children }) });
1609
1773
  });
1610
1774
  function Accordion({
1611
1775
  sections,
@@ -1622,9 +1786,9 @@ function Accordion({
1622
1786
  onValueChange,
1623
1787
  className: cn("cfi-ui", "cfi-ui-accordion", className)
1624
1788
  };
1625
- return /* @__PURE__ */ jsx20(AccordionRoot, { ...rootProps, children: sections.map((section) => /* @__PURE__ */ jsxs20(AccordionItem, { value: section.value, disabled: section.disabled, children: [
1626
- /* @__PURE__ */ jsx20(AccordionTrigger, { meta: section.meta, children: section.label }),
1627
- /* @__PURE__ */ jsx20(AccordionContent, { children: section.content })
1789
+ return /* @__PURE__ */ jsx22(AccordionRoot, { ...rootProps, children: sections.map((section) => /* @__PURE__ */ jsxs22(AccordionItem, { value: section.value, disabled: section.disabled, children: [
1790
+ /* @__PURE__ */ jsx22(AccordionTrigger, { meta: section.meta, children: section.label }),
1791
+ /* @__PURE__ */ jsx22(AccordionContent, { children: section.content })
1628
1792
  ] }, section.value)) });
1629
1793
  }
1630
1794
  function ToggleGroup({
@@ -1636,7 +1800,7 @@ function ToggleGroup({
1636
1800
  className,
1637
1801
  ...aria
1638
1802
  }) {
1639
- return /* @__PURE__ */ jsx20(
1803
+ return /* @__PURE__ */ jsx22(
1640
1804
  RadixToggleGroup.Root,
1641
1805
  {
1642
1806
  type: "single",
@@ -1648,7 +1812,7 @@ function ToggleGroup({
1648
1812
  "data-size": size,
1649
1813
  className: cn("cfi-ui", "cfi-ui-toggle-group", className),
1650
1814
  ...aria,
1651
- children: options.map((option) => /* @__PURE__ */ jsxs20(
1815
+ children: options.map((option) => /* @__PURE__ */ jsxs22(
1652
1816
  RadixToggleGroup.Item,
1653
1817
  {
1654
1818
  value: option.value,
@@ -1657,7 +1821,7 @@ function ToggleGroup({
1657
1821
  title: option.ariaLabel,
1658
1822
  className: "cfi-ui-toggle-group__item",
1659
1823
  children: [
1660
- option.icon && /* @__PURE__ */ jsx20("span", { className: "cfi-ui-toggle-group__icon", children: option.icon }),
1824
+ option.icon && /* @__PURE__ */ jsx22("span", { className: "cfi-ui-toggle-group__icon", children: option.icon }),
1661
1825
  option.label
1662
1826
  ]
1663
1827
  },
@@ -1674,9 +1838,9 @@ import { AlertCircle, Loader2 } from "lucide-react";
1674
1838
  styleInject("@layer components {\n :where(.cfi-ui-pagestate) {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--cfi-ui-space-sm);\n padding-block: var(--cfi-ui-space-2xl, 4rem);\n text-align: center;\n color: var(--cfi-ui-content);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-pagestate[data-size=inline] {\n padding-block: var(--cfi-ui-space-md);\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-pagestate:has(> .cfi-ui-pagestate__spinner) {\n flex-direction: row;\n }\n .cfi-ui-pagestate__spinner {\n width: 1rem;\n height: 1rem;\n flex: none;\n color: var(--cfi-ui-content-muted);\n animation: cfi-ui-pagestate-spin 1s linear infinite;\n }\n @media (prefers-reduced-motion: reduce) {\n .cfi-ui-pagestate__spinner {\n animation-duration: 2.4s;\n }\n }\n .cfi-ui-pagestate__icon {\n display: inline-flex;\n color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-pagestate__icon > svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n .cfi-ui-pagestate__icon[data-tone=error] {\n width: 1.5rem;\n height: 1.5rem;\n color: var(--cfi-ui-error-strong);\n }\n .cfi-ui-pagestate__title {\n margin: 0;\n font-weight: var(--cfi-ui-weight-medium);\n color: var(--cfi-ui-content);\n }\n .cfi-ui-pagestate__muted {\n margin: 0;\n max-width: 34rem;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-pagestate__title + .cfi-ui-pagestate__muted {\n margin-top: var(--cfi-ui-space-3xs);\n }\n .cfi-ui-pagestate__action {\n margin-top: var(--cfi-ui-space-xs);\n }\n .cfi-ui-pagestate__retry {\n height: var(--cfi-ui-control-height-sm);\n padding-inline: var(--cfi-ui-space-sm);\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border-strong);\n border-radius: var(--cfi-ui-radius-md);\n font-family: inherit;\n font-size: var(--cfi-ui-text-sm);\n line-height: normal;\n cursor: pointer;\n }\n .cfi-ui-pagestate__retry:hover {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-pagestate__retry:focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: var(--cfi-ui-focus-offset);\n }\n}\n@keyframes cfi-ui-pagestate-spin {\n to {\n transform: rotate(360deg);\n }\n}\n");
1675
1839
 
1676
1840
  // src/PageState.tsx
1677
- import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
1841
+ import { jsx as jsx23, jsxs as jsxs23 } from "react/jsx-runtime";
1678
1842
  function LoadingState({ label = "Loading\u2026", size = "block", className }) {
1679
- return /* @__PURE__ */ jsxs21(
1843
+ return /* @__PURE__ */ jsxs23(
1680
1844
  "div",
1681
1845
  {
1682
1846
  className: cn("cfi-ui", "cfi-ui-pagestate", className),
@@ -1684,8 +1848,8 @@ function LoadingState({ label = "Loading\u2026", size = "block", className }) {
1684
1848
  role: "status",
1685
1849
  "aria-live": "polite",
1686
1850
  children: [
1687
- /* @__PURE__ */ jsx21(Loader2, { className: "cfi-ui-pagestate__spinner", "aria-hidden": "true" }),
1688
- /* @__PURE__ */ jsx21("span", { className: "cfi-ui-pagestate__muted", children: label })
1851
+ /* @__PURE__ */ jsx23(Loader2, { className: "cfi-ui-pagestate__spinner", "aria-hidden": "true" }),
1852
+ /* @__PURE__ */ jsx23("span", { className: "cfi-ui-pagestate__muted", children: label })
1689
1853
  ]
1690
1854
  }
1691
1855
  );
@@ -1699,13 +1863,13 @@ function ErrorState({
1699
1863
  className
1700
1864
  }) {
1701
1865
  const message = error instanceof Error ? error.message : error == null ? "" : String(error);
1702
- return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, role: "alert", children: [
1703
- /* @__PURE__ */ jsx21(AlertCircle, { className: "cfi-ui-pagestate__icon", "data-tone": "error", "aria-hidden": "true" }),
1704
- /* @__PURE__ */ jsxs21("div", { children: [
1705
- /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__title", children: title }),
1706
- message && /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__muted", children: message })
1866
+ return /* @__PURE__ */ jsxs23("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, role: "alert", children: [
1867
+ /* @__PURE__ */ jsx23(AlertCircle, { className: "cfi-ui-pagestate__icon", "data-tone": "error", "aria-hidden": "true" }),
1868
+ /* @__PURE__ */ jsxs23("div", { children: [
1869
+ /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__title", children: title }),
1870
+ message && /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__muted", children: message })
1707
1871
  ] }),
1708
- onRetry && /* @__PURE__ */ jsx21("button", { type: "button", className: "cfi-ui-pagestate__retry", onClick: onRetry, children: retryLabel })
1872
+ onRetry && /* @__PURE__ */ jsx23("button", { type: "button", className: "cfi-ui-pagestate__retry", onClick: onRetry, children: retryLabel })
1709
1873
  ] });
1710
1874
  }
1711
1875
  function EmptyState({
@@ -1716,17 +1880,17 @@ function EmptyState({
1716
1880
  size = "block",
1717
1881
  className
1718
1882
  }) {
1719
- return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, children: [
1720
- icon && /* @__PURE__ */ jsx21("span", { className: "cfi-ui-pagestate__icon", children: icon }),
1721
- /* @__PURE__ */ jsxs21("div", { children: [
1722
- /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__title", children: title }),
1723
- description && /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__muted", children: description })
1883
+ return /* @__PURE__ */ jsxs23("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, children: [
1884
+ icon && /* @__PURE__ */ jsx23("span", { className: "cfi-ui-pagestate__icon", children: icon }),
1885
+ /* @__PURE__ */ jsxs23("div", { children: [
1886
+ /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__title", children: title }),
1887
+ description && /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__muted", children: description })
1724
1888
  ] }),
1725
- action && /* @__PURE__ */ jsx21("div", { className: "cfi-ui-pagestate__action", children: action })
1889
+ action && /* @__PURE__ */ jsx23("div", { className: "cfi-ui-pagestate__action", children: action })
1726
1890
  ] });
1727
1891
  }
1728
1892
  function ComingSoon({ title, detail, className }) {
1729
- return /* @__PURE__ */ jsx21(
1893
+ return /* @__PURE__ */ jsx23(
1730
1894
  EmptyState,
1731
1895
  {
1732
1896
  title,
@@ -1737,9 +1901,9 @@ function ComingSoon({ title, detail, className }) {
1737
1901
  }
1738
1902
 
1739
1903
  // src/useSortState.ts
1740
- import { useCallback as useCallback2, useMemo as useMemo4, useState as useState4 } from "react";
1904
+ import { useCallback as useCallback2, useMemo as useMemo5, useState as useState5 } from "react";
1741
1905
  function useSortState(initialKey, initialDirection = "asc") {
1742
- const [sort, setSort] = useState4({ key: initialKey, direction: initialDirection });
1906
+ const [sort, setSort] = useState5({ key: initialKey, direction: initialDirection });
1743
1907
  const toggle = useCallback2((key) => {
1744
1908
  setSort(
1745
1909
  (current) => current.key === key ? { key, direction: current.direction === "asc" ? "desc" : "asc" } : { key, direction: "asc" }
@@ -1769,23 +1933,23 @@ function useSortState(initialKey, initialDirection = "asc") {
1769
1933
  },
1770
1934
  [sort]
1771
1935
  );
1772
- return useMemo4(
1936
+ return useMemo5(
1773
1937
  () => ({ sort, toggle, setSort, sortProps, sortBy }),
1774
1938
  [sort, toggle, sortProps, sortBy]
1775
1939
  );
1776
1940
  }
1777
1941
 
1778
1942
  // src/SearchInput.tsx
1779
- import { forwardRef as forwardRef17, useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
1780
- import { Search as Search2, X as X4 } from "lucide-react";
1943
+ import { forwardRef as forwardRef18, useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
1944
+ import { Search as Search2, X as X5 } from "lucide-react";
1781
1945
 
1782
1946
  // src/SearchInput.css
1783
1947
  styleInject("@layer components {\n .cfi-ui-search__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n background: none;\n border: none;\n color: var(--cfi-ui-content-muted);\n cursor: pointer;\n border-radius: var(--cfi-ui-radius-sm);\n }\n .cfi-ui-search__clear > svg {\n width: 0.875rem;\n height: 0.875rem;\n }\n .cfi-ui-search__clear:hover {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-search__clear:focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: 1px;\n }\n}\n");
1784
1948
 
1785
1949
  // src/SearchInput.tsx
1786
- import { jsx as jsx22 } from "react/jsx-runtime";
1787
- var SearchInput = forwardRef17(function SearchInput2({ value, onChange, delay = 250, placeholder = "Search\u2026", clearLabel = "Clear search", ...rest }, ref) {
1788
- const [local, setLocal] = useState5(value);
1950
+ import { jsx as jsx24 } from "react/jsx-runtime";
1951
+ var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay = 250, placeholder = "Search\u2026", clearLabel = "Clear search", ...rest }, ref) {
1952
+ const [local, setLocal] = useState6(value);
1789
1953
  const timer = useRef3(void 0);
1790
1954
  const latest = useRef3(onChange);
1791
1955
  latest.current = onChange;
@@ -1802,7 +1966,7 @@ var SearchInput = forwardRef17(function SearchInput2({ value, onChange, delay =
1802
1966
  setLocal("");
1803
1967
  latest.current("");
1804
1968
  };
1805
- return /* @__PURE__ */ jsx22(
1969
+ return /* @__PURE__ */ jsx24(
1806
1970
  Input,
1807
1971
  {
1808
1972
  ...rest,
@@ -1811,8 +1975,8 @@ var SearchInput = forwardRef17(function SearchInput2({ value, onChange, delay =
1811
1975
  value: local,
1812
1976
  placeholder,
1813
1977
  onChange: (e) => push(e.target.value),
1814
- prefix: /* @__PURE__ */ jsx22(Search2, { "aria-hidden": "true" }),
1815
- suffix: local ? /* @__PURE__ */ jsx22("button", { type: "button", className: "cfi-ui-search__clear", onClick: clear, "aria-label": clearLabel, children: /* @__PURE__ */ jsx22(X4, { "aria-hidden": "true" }) }) : void 0
1978
+ prefix: /* @__PURE__ */ jsx24(Search2, { "aria-hidden": "true" }),
1979
+ suffix: local ? /* @__PURE__ */ jsx24("button", { type: "button", className: "cfi-ui-search__clear", onClick: clear, "aria-label": clearLabel, children: /* @__PURE__ */ jsx24(X5, { "aria-hidden": "true" }) }) : void 0
1816
1980
  }
1817
1981
  );
1818
1982
  });
@@ -1824,7 +1988,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
1824
1988
  styleInject("@layer components {\n :where(.cfi-ui-pagination) {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--cfi-ui-space-md);\n padding-block: var(--cfi-ui-space-sm);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-pagination__controls {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n margin-left: auto;\n }\n .cfi-ui-pagination__page {\n font-variant-numeric: tabular-nums;\n color: var(--cfi-ui-content);\n }\n .cfi-ui-pagination__range {\n font-variant-numeric: tabular-nums;\n }\n .cfi-ui-pagination__btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--cfi-ui-control-height-sm);\n height: var(--cfi-ui-control-height-sm);\n padding: 0;\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border-strong);\n border-radius: var(--cfi-ui-radius-md);\n cursor: pointer;\n }\n .cfi-ui-pagination__btn > svg {\n width: 1rem;\n height: 1rem;\n }\n .cfi-ui-pagination__btn:hover:not(:disabled) {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-pagination__btn:disabled {\n color: var(--cfi-ui-content-disabled);\n cursor: default;\n }\n .cfi-ui-pagination__btn:focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: var(--cfi-ui-focus-offset);\n }\n}\n");
1825
1989
 
1826
1990
  // src/Pagination.tsx
1827
- import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
1991
+ import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
1828
1992
  function Pagination({
1829
1993
  page,
1830
1994
  pageSize,
@@ -1840,12 +2004,12 @@ function Pagination({
1840
2004
  const from = (current - 1) * pageSize + 1;
1841
2005
  const to = Math.min(current * pageSize, totalItems);
1842
2006
  const range = labels?.range?.(from, to, totalItems) ?? `${from}\u2013${to} of ${totalItems.toLocaleString()}`;
1843
- return /* @__PURE__ */ jsxs22("nav", { className: cn("cfi-ui", "cfi-ui-pagination", className), "aria-label": "Pagination", children: [
2007
+ return /* @__PURE__ */ jsxs24("nav", { className: cn("cfi-ui", "cfi-ui-pagination", className), "aria-label": "Pagination", children: [
1844
2008
  showRange && // aria-live so a screen-reader user hears where they landed; paging
1845
2009
  // otherwise moves focus nowhere and announces nothing.
1846
- /* @__PURE__ */ jsx23("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
1847
- /* @__PURE__ */ jsxs22("div", { className: "cfi-ui-pagination__controls", children: [
1848
- /* @__PURE__ */ jsx23(
2010
+ /* @__PURE__ */ jsx25("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
2011
+ /* @__PURE__ */ jsxs24("div", { className: "cfi-ui-pagination__controls", children: [
2012
+ /* @__PURE__ */ jsx25(
1849
2013
  "button",
1850
2014
  {
1851
2015
  type: "button",
@@ -1853,15 +2017,15 @@ function Pagination({
1853
2017
  onClick: () => onPageChange(current - 1),
1854
2018
  disabled: current <= 1,
1855
2019
  "aria-label": labels?.previous ?? "Previous page",
1856
- children: /* @__PURE__ */ jsx23(ChevronLeft, { "aria-hidden": "true" })
2020
+ children: /* @__PURE__ */ jsx25(ChevronLeft, { "aria-hidden": "true" })
1857
2021
  }
1858
2022
  ),
1859
- /* @__PURE__ */ jsxs22("span", { className: "cfi-ui-pagination__page", children: [
2023
+ /* @__PURE__ */ jsxs24("span", { className: "cfi-ui-pagination__page", children: [
1860
2024
  current,
1861
2025
  " / ",
1862
2026
  pageCount
1863
2027
  ] }),
1864
- /* @__PURE__ */ jsx23(
2028
+ /* @__PURE__ */ jsx25(
1865
2029
  "button",
1866
2030
  {
1867
2031
  type: "button",
@@ -1869,7 +2033,7 @@ function Pagination({
1869
2033
  onClick: () => onPageChange(current + 1),
1870
2034
  disabled: current >= pageCount,
1871
2035
  "aria-label": labels?.next ?? "Next page",
1872
- children: /* @__PURE__ */ jsx23(ChevronRight, { "aria-hidden": "true" })
2036
+ children: /* @__PURE__ */ jsx25(ChevronRight, { "aria-hidden": "true" })
1873
2037
  }
1874
2038
  )
1875
2039
  ] })
@@ -1953,9 +2117,10 @@ export {
1953
2117
  ErrorState,
1954
2118
  Field,
1955
2119
  Fieldset,
2120
+ FilterBar,
1956
2121
  IconButton,
1957
2122
  Input,
1958
- Label,
2123
+ Label3 as Label,
1959
2124
  LoadingState,
1960
2125
  Menu,
1961
2126
  MenuCheckboxItem,
@@ -2005,6 +2170,7 @@ export {
2005
2170
  SideModal,
2006
2171
  Skeleton,
2007
2172
  Slider,
2173
+ SplitButton,
2008
2174
  Switch,
2009
2175
  TabSet,
2010
2176
  Table,