@campfire-interactive/ui 0.2.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 +151 -53
  2. package/dist/index.js +826 -659
  3. package/package.json +1 -1
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,90 +1451,61 @@ 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
- 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__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");
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, 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,
1322
1486
  "data-density": density,
1323
1487
  "data-sticky": stickyHeader || void 0,
1488
+ "data-sticky-col": stickyFirstColumn || void 0,
1324
1489
  className: cn("cfi-ui", "cfi-ui-table", className),
1325
1490
  ...rest
1326
1491
  }
1327
1492
  );
1328
1493
  });
1329
1494
  function TableScroller({ className, ...rest }) {
1330
- 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 });
1331
1496
  }
1332
1497
  function TableHeader({ className, ...rest }) {
1333
- 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 });
1334
1499
  }
1335
1500
  function TableBody({ className, ...rest }) {
1336
- 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 });
1337
1502
  }
1338
1503
  function TableFooter({ className, ...rest }) {
1339
- 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 });
1340
1505
  }
1341
1506
  var TableFoot = TableFooter;
1342
1507
  function TableRow({ selected, interactive, className, ...rest }) {
1343
- return /* @__PURE__ */ jsx17(
1508
+ return /* @__PURE__ */ jsx19(
1344
1509
  "tr",
1345
1510
  {
1346
1511
  "data-selected": selected || void 0,
@@ -1363,7 +1528,7 @@ function TableHead({
1363
1528
  ...rest
1364
1529
  }) {
1365
1530
  const ariaSort = sortable ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
1366
- return /* @__PURE__ */ jsx17(
1531
+ return /* @__PURE__ */ jsx19(
1367
1532
  "th",
1368
1533
  {
1369
1534
  scope: "col",
@@ -1372,15 +1537,15 @@ function TableHead({
1372
1537
  style: { width, ...style },
1373
1538
  className: cn("cfi-ui-table__th", className),
1374
1539
  ...rest,
1375
- children: sortable ? /* @__PURE__ */ jsxs17("button", { type: "button", className: "cfi-ui-table__sort", onClick: onSort, children: [
1376
- /* @__PURE__ */ jsx17("span", { children }),
1377
- /* @__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, {}) })
1378
1543
  ] }) : children
1379
1544
  }
1380
1545
  );
1381
1546
  }
1382
1547
  function TableCell({ numeric, truncate, className, ...rest }) {
1383
- return /* @__PURE__ */ jsx17(
1548
+ return /* @__PURE__ */ jsx19(
1384
1549
  "td",
1385
1550
  {
1386
1551
  "data-numeric": numeric || void 0,
@@ -1391,26 +1556,26 @@ function TableCell({ numeric, truncate, className, ...rest }) {
1391
1556
  );
1392
1557
  }
1393
1558
  function TableEmpty({ colSpan, children }) {
1394
- 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 }) });
1395
1560
  }
1396
1561
  function TableCaption({ className, ...rest }) {
1397
- 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 });
1398
1563
  }
1399
1564
 
1400
1565
  // src/Tabs.tsx
1401
- import { forwardRef as forwardRef14 } from "react";
1566
+ import { forwardRef as forwardRef15 } from "react";
1402
1567
  import * as RadixTabs from "@radix-ui/react-tabs";
1403
1568
 
1404
1569
  // src/Tabs.css
1405
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");
1406
1571
 
1407
1572
  // src/Tabs.tsx
1408
- import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
1573
+ import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
1409
1574
  var Tabs = RadixTabs.Root;
1410
1575
  var TabsRoot = RadixTabs.Root;
1411
- var TabsList = forwardRef14(
1576
+ var TabsList = forwardRef15(
1412
1577
  function TabsList2({ variant = "pill", className, ...rest }, ref) {
1413
- return /* @__PURE__ */ jsx18(
1578
+ return /* @__PURE__ */ jsx20(
1414
1579
  RadixTabs.List,
1415
1580
  {
1416
1581
  ref,
@@ -1421,20 +1586,20 @@ var TabsList = forwardRef14(
1421
1586
  );
1422
1587
  }
1423
1588
  );
1424
- var TabsTrigger = forwardRef14(
1589
+ var TabsTrigger = forwardRef15(
1425
1590
  function TabsTrigger2({ icon, count, className, children, ...rest }, ref) {
1426
- return /* @__PURE__ */ jsxs18(RadixTabs.Trigger, { ref, className: cn("cfi-ui-tabs__trigger", className), ...rest, children: [
1427
- icon && /* @__PURE__ */ jsx18("span", { className: "cfi-ui-tabs__icon", children: icon }),
1428
- /* @__PURE__ */ jsx18("span", { children }),
1429
- 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" })
1430
1595
  ] });
1431
1596
  }
1432
1597
  );
1433
- var TabsContent = forwardRef14(function TabsContent2({ className, ...rest }, ref) {
1434
- 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 });
1435
1600
  });
1436
1601
  function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }) {
1437
- return /* @__PURE__ */ jsxs18(
1602
+ return /* @__PURE__ */ jsxs20(
1438
1603
  Tabs,
1439
1604
  {
1440
1605
  value,
@@ -1442,7 +1607,7 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
1442
1607
  defaultValue: defaultValue ?? tabs[0]?.value,
1443
1608
  className: cn("cfi-ui", "cfi-ui-tabs", className),
1444
1609
  children: [
1445
- /* @__PURE__ */ jsx18(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx18(
1610
+ /* @__PURE__ */ jsx20(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx20(
1446
1611
  TabsTrigger,
1447
1612
  {
1448
1613
  value: tab.value,
@@ -1453,25 +1618,25 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
1453
1618
  },
1454
1619
  tab.value
1455
1620
  )) }),
1456
- 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))
1457
1622
  ]
1458
1623
  }
1459
1624
  );
1460
1625
  }
1461
1626
 
1462
1627
  // src/Display.tsx
1463
- import { forwardRef as forwardRef15 } from "react";
1628
+ import { forwardRef as forwardRef16 } from "react";
1464
1629
 
1465
1630
  // src/Display.css
1466
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');
1467
1632
 
1468
1633
  // src/Display.tsx
1469
- import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
1634
+ import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
1470
1635
  function Separator3({ orientation = "horizontal", label, className, ...rest }) {
1471
1636
  if (label) {
1472
- 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 }) });
1473
1638
  }
1474
- return /* @__PURE__ */ jsx19(
1639
+ return /* @__PURE__ */ jsx21(
1475
1640
  "div",
1476
1641
  {
1477
1642
  role: "separator",
@@ -1492,8 +1657,8 @@ function Progress({
1492
1657
  ...rest
1493
1658
  }) {
1494
1659
  const clamped = value == null ? null : Math.max(0, Math.min(100, value));
1495
- return /* @__PURE__ */ jsxs19("div", { className: cn("cfi-ui", "cfi-ui-progress-wrap", className), ...rest, children: [
1496
- /* @__PURE__ */ jsx19(
1660
+ return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-progress-wrap", className), ...rest, children: [
1661
+ /* @__PURE__ */ jsx21(
1497
1662
  "div",
1498
1663
  {
1499
1664
  role: "progressbar",
@@ -1505,7 +1670,7 @@ function Progress({
1505
1670
  "data-size": size,
1506
1671
  "data-indeterminate": clamped == null || void 0,
1507
1672
  className: "cfi-ui-progress",
1508
- children: /* @__PURE__ */ jsx19(
1673
+ children: /* @__PURE__ */ jsx21(
1509
1674
  "div",
1510
1675
  {
1511
1676
  className: "cfi-ui-progress__fill",
@@ -1514,7 +1679,7 @@ function Progress({
1514
1679
  )
1515
1680
  }
1516
1681
  ),
1517
- 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: [
1518
1683
  Math.round(clamped),
1519
1684
  "%"
1520
1685
  ] })
@@ -1522,7 +1687,7 @@ function Progress({
1522
1687
  }
1523
1688
  function Skeleton({ shape = "block", width, height, lines = 1, className, style, ...rest }) {
1524
1689
  if (shape === "text" && lines > 1) {
1525
- 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(
1526
1691
  "div",
1527
1692
  {
1528
1693
  "data-shape": "text",
@@ -1532,7 +1697,7 @@ function Skeleton({ shape = "block", width, height, lines = 1, className, style,
1532
1697
  i
1533
1698
  )) });
1534
1699
  }
1535
- return /* @__PURE__ */ jsx19(
1700
+ return /* @__PURE__ */ jsx21(
1536
1701
  "div",
1537
1702
  {
1538
1703
  "aria-hidden": "true",
@@ -1543,21 +1708,21 @@ function Skeleton({ shape = "block", width, height, lines = 1, className, style,
1543
1708
  }
1544
1709
  );
1545
1710
  }
1546
- 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) {
1547
1712
  const parts = name.trim().split(/\s+/).filter(Boolean);
1548
1713
  const initials = parts.length === 0 ? "?" : parts.length === 1 ? parts[0].slice(0, 2).toUpperCase() : `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
1549
- return /* @__PURE__ */ jsxs19("span", { ref, "data-size": size, className: cn("cfi-ui", "cfi-ui-avatar", className), ...rest, children: [
1550
- src ? /* @__PURE__ */ jsx19("img", { src, alt: name, className: "cfi-ui-avatar__image" }) : /* @__PURE__ */ jsx19("span", { "aria-hidden": "true", children: initials }),
1551
- !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 })
1552
1717
  ] });
1553
1718
  });
1554
1719
  function AvatarGroup({ max, className, children, ...rest }) {
1555
1720
  const items = Array.isArray(children) ? children : [children];
1556
1721
  const shown = max ? items.slice(0, max) : items;
1557
1722
  const hidden = items.length - shown.length;
1558
- 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: [
1559
1724
  shown,
1560
- 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: [
1561
1726
  "+",
1562
1727
  hidden
1563
1728
  ] })
@@ -1570,7 +1735,7 @@ function ScrollArea({
1570
1735
  style,
1571
1736
  ...rest
1572
1737
  }) {
1573
- return /* @__PURE__ */ jsx19(
1738
+ return /* @__PURE__ */ jsx21(
1574
1739
  "div",
1575
1740
  {
1576
1741
  "data-orientation": orientation,
@@ -1582,29 +1747,29 @@ function ScrollArea({
1582
1747
  }
1583
1748
 
1584
1749
  // src/Accordion.tsx
1585
- import { forwardRef as forwardRef16 } from "react";
1750
+ import { forwardRef as forwardRef17 } from "react";
1586
1751
  import * as RadixAccordion from "@radix-ui/react-accordion";
1587
1752
  import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
1588
- import { ChevronDown as ChevronDown3 } from "lucide-react";
1753
+ import { ChevronDown as ChevronDown4 } from "lucide-react";
1589
1754
 
1590
1755
  // src/Accordion.css
1591
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");
1592
1757
 
1593
1758
  // src/Accordion.tsx
1594
- import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
1759
+ import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
1595
1760
  var AccordionRoot = RadixAccordion.Root;
1596
- var AccordionItem = forwardRef16(function AccordionItem2({ className, ...rest }, ref) {
1597
- 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 });
1598
1763
  });
1599
- var AccordionTrigger = forwardRef16(function AccordionTrigger2({ meta, className, children, ...rest }, ref) {
1600
- 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: [
1601
- /* @__PURE__ */ jsx20("span", { className: "cfi-ui-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(ChevronDown3, {}) }),
1602
- /* @__PURE__ */ jsx20("span", { className: "cfi-ui-accordion__label", children }),
1603
- 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 })
1604
1769
  ] }) });
1605
1770
  });
1606
- var AccordionContent = forwardRef16(function AccordionContent2({ className, children, ...rest }, ref) {
1607
- 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 }) });
1608
1773
  });
1609
1774
  function Accordion({
1610
1775
  sections,
@@ -1621,9 +1786,9 @@ function Accordion({
1621
1786
  onValueChange,
1622
1787
  className: cn("cfi-ui", "cfi-ui-accordion", className)
1623
1788
  };
1624
- return /* @__PURE__ */ jsx20(AccordionRoot, { ...rootProps, children: sections.map((section) => /* @__PURE__ */ jsxs20(AccordionItem, { value: section.value, disabled: section.disabled, children: [
1625
- /* @__PURE__ */ jsx20(AccordionTrigger, { meta: section.meta, children: section.label }),
1626
- /* @__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 })
1627
1792
  ] }, section.value)) });
1628
1793
  }
1629
1794
  function ToggleGroup({
@@ -1635,7 +1800,7 @@ function ToggleGroup({
1635
1800
  className,
1636
1801
  ...aria
1637
1802
  }) {
1638
- return /* @__PURE__ */ jsx20(
1803
+ return /* @__PURE__ */ jsx22(
1639
1804
  RadixToggleGroup.Root,
1640
1805
  {
1641
1806
  type: "single",
@@ -1647,7 +1812,7 @@ function ToggleGroup({
1647
1812
  "data-size": size,
1648
1813
  className: cn("cfi-ui", "cfi-ui-toggle-group", className),
1649
1814
  ...aria,
1650
- children: options.map((option) => /* @__PURE__ */ jsxs20(
1815
+ children: options.map((option) => /* @__PURE__ */ jsxs22(
1651
1816
  RadixToggleGroup.Item,
1652
1817
  {
1653
1818
  value: option.value,
@@ -1656,7 +1821,7 @@ function ToggleGroup({
1656
1821
  title: option.ariaLabel,
1657
1822
  className: "cfi-ui-toggle-group__item",
1658
1823
  children: [
1659
- 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 }),
1660
1825
  option.label
1661
1826
  ]
1662
1827
  },
@@ -1673,9 +1838,9 @@ import { AlertCircle, Loader2 } from "lucide-react";
1673
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");
1674
1839
 
1675
1840
  // src/PageState.tsx
1676
- import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
1841
+ import { jsx as jsx23, jsxs as jsxs23 } from "react/jsx-runtime";
1677
1842
  function LoadingState({ label = "Loading\u2026", size = "block", className }) {
1678
- return /* @__PURE__ */ jsxs21(
1843
+ return /* @__PURE__ */ jsxs23(
1679
1844
  "div",
1680
1845
  {
1681
1846
  className: cn("cfi-ui", "cfi-ui-pagestate", className),
@@ -1683,8 +1848,8 @@ function LoadingState({ label = "Loading\u2026", size = "block", className }) {
1683
1848
  role: "status",
1684
1849
  "aria-live": "polite",
1685
1850
  children: [
1686
- /* @__PURE__ */ jsx21(Loader2, { className: "cfi-ui-pagestate__spinner", "aria-hidden": "true" }),
1687
- /* @__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 })
1688
1853
  ]
1689
1854
  }
1690
1855
  );
@@ -1698,13 +1863,13 @@ function ErrorState({
1698
1863
  className
1699
1864
  }) {
1700
1865
  const message = error instanceof Error ? error.message : error == null ? "" : String(error);
1701
- return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, role: "alert", children: [
1702
- /* @__PURE__ */ jsx21(AlertCircle, { className: "cfi-ui-pagestate__icon", "data-tone": "error", "aria-hidden": "true" }),
1703
- /* @__PURE__ */ jsxs21("div", { children: [
1704
- /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__title", children: title }),
1705
- 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 })
1706
1871
  ] }),
1707
- 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 })
1708
1873
  ] });
1709
1874
  }
1710
1875
  function EmptyState({
@@ -1715,17 +1880,17 @@ function EmptyState({
1715
1880
  size = "block",
1716
1881
  className
1717
1882
  }) {
1718
- return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, children: [
1719
- icon && /* @__PURE__ */ jsx21("span", { className: "cfi-ui-pagestate__icon", children: icon }),
1720
- /* @__PURE__ */ jsxs21("div", { children: [
1721
- /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__title", children: title }),
1722
- 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 })
1723
1888
  ] }),
1724
- action && /* @__PURE__ */ jsx21("div", { className: "cfi-ui-pagestate__action", children: action })
1889
+ action && /* @__PURE__ */ jsx23("div", { className: "cfi-ui-pagestate__action", children: action })
1725
1890
  ] });
1726
1891
  }
1727
1892
  function ComingSoon({ title, detail, className }) {
1728
- return /* @__PURE__ */ jsx21(
1893
+ return /* @__PURE__ */ jsx23(
1729
1894
  EmptyState,
1730
1895
  {
1731
1896
  title,
@@ -1736,9 +1901,9 @@ function ComingSoon({ title, detail, className }) {
1736
1901
  }
1737
1902
 
1738
1903
  // src/useSortState.ts
1739
- 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";
1740
1905
  function useSortState(initialKey, initialDirection = "asc") {
1741
- const [sort, setSort] = useState4({ key: initialKey, direction: initialDirection });
1906
+ const [sort, setSort] = useState5({ key: initialKey, direction: initialDirection });
1742
1907
  const toggle = useCallback2((key) => {
1743
1908
  setSort(
1744
1909
  (current) => current.key === key ? { key, direction: current.direction === "asc" ? "desc" : "asc" } : { key, direction: "asc" }
@@ -1768,23 +1933,23 @@ function useSortState(initialKey, initialDirection = "asc") {
1768
1933
  },
1769
1934
  [sort]
1770
1935
  );
1771
- return useMemo4(
1936
+ return useMemo5(
1772
1937
  () => ({ sort, toggle, setSort, sortProps, sortBy }),
1773
1938
  [sort, toggle, sortProps, sortBy]
1774
1939
  );
1775
1940
  }
1776
1941
 
1777
1942
  // src/SearchInput.tsx
1778
- import { forwardRef as forwardRef17, useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
1779
- 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";
1780
1945
 
1781
1946
  // src/SearchInput.css
1782
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");
1783
1948
 
1784
1949
  // src/SearchInput.tsx
1785
- import { jsx as jsx22 } from "react/jsx-runtime";
1786
- var SearchInput = forwardRef17(function SearchInput2({ value, onChange, delay = 250, placeholder = "Search\u2026", clearLabel = "Clear search", ...rest }, ref) {
1787
- 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);
1788
1953
  const timer = useRef3(void 0);
1789
1954
  const latest = useRef3(onChange);
1790
1955
  latest.current = onChange;
@@ -1801,7 +1966,7 @@ var SearchInput = forwardRef17(function SearchInput2({ value, onChange, delay =
1801
1966
  setLocal("");
1802
1967
  latest.current("");
1803
1968
  };
1804
- return /* @__PURE__ */ jsx22(
1969
+ return /* @__PURE__ */ jsx24(
1805
1970
  Input,
1806
1971
  {
1807
1972
  ...rest,
@@ -1810,8 +1975,8 @@ var SearchInput = forwardRef17(function SearchInput2({ value, onChange, delay =
1810
1975
  value: local,
1811
1976
  placeholder,
1812
1977
  onChange: (e) => push(e.target.value),
1813
- prefix: /* @__PURE__ */ jsx22(Search2, { "aria-hidden": "true" }),
1814
- 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
1815
1980
  }
1816
1981
  );
1817
1982
  });
@@ -1823,7 +1988,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
1823
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");
1824
1989
 
1825
1990
  // src/Pagination.tsx
1826
- import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
1991
+ import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
1827
1992
  function Pagination({
1828
1993
  page,
1829
1994
  pageSize,
@@ -1839,12 +2004,12 @@ function Pagination({
1839
2004
  const from = (current - 1) * pageSize + 1;
1840
2005
  const to = Math.min(current * pageSize, totalItems);
1841
2006
  const range = labels?.range?.(from, to, totalItems) ?? `${from}\u2013${to} of ${totalItems.toLocaleString()}`;
1842
- 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: [
1843
2008
  showRange && // aria-live so a screen-reader user hears where they landed; paging
1844
2009
  // otherwise moves focus nowhere and announces nothing.
1845
- /* @__PURE__ */ jsx23("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
1846
- /* @__PURE__ */ jsxs22("div", { className: "cfi-ui-pagination__controls", children: [
1847
- /* @__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(
1848
2013
  "button",
1849
2014
  {
1850
2015
  type: "button",
@@ -1852,15 +2017,15 @@ function Pagination({
1852
2017
  onClick: () => onPageChange(current - 1),
1853
2018
  disabled: current <= 1,
1854
2019
  "aria-label": labels?.previous ?? "Previous page",
1855
- children: /* @__PURE__ */ jsx23(ChevronLeft, { "aria-hidden": "true" })
2020
+ children: /* @__PURE__ */ jsx25(ChevronLeft, { "aria-hidden": "true" })
1856
2021
  }
1857
2022
  ),
1858
- /* @__PURE__ */ jsxs22("span", { className: "cfi-ui-pagination__page", children: [
2023
+ /* @__PURE__ */ jsxs24("span", { className: "cfi-ui-pagination__page", children: [
1859
2024
  current,
1860
2025
  " / ",
1861
2026
  pageCount
1862
2027
  ] }),
1863
- /* @__PURE__ */ jsx23(
2028
+ /* @__PURE__ */ jsx25(
1864
2029
  "button",
1865
2030
  {
1866
2031
  type: "button",
@@ -1868,7 +2033,7 @@ function Pagination({
1868
2033
  onClick: () => onPageChange(current + 1),
1869
2034
  disabled: current >= pageCount,
1870
2035
  "aria-label": labels?.next ?? "Next page",
1871
- children: /* @__PURE__ */ jsx23(ChevronRight, { "aria-hidden": "true" })
2036
+ children: /* @__PURE__ */ jsx25(ChevronRight, { "aria-hidden": "true" })
1872
2037
  }
1873
2038
  )
1874
2039
  ] })
@@ -1952,9 +2117,10 @@ export {
1952
2117
  ErrorState,
1953
2118
  Field,
1954
2119
  Fieldset,
2120
+ FilterBar,
1955
2121
  IconButton,
1956
2122
  Input,
1957
- Label,
2123
+ Label3 as Label,
1958
2124
  LoadingState,
1959
2125
  Menu,
1960
2126
  MenuCheckboxItem,
@@ -2004,6 +2170,7 @@ export {
2004
2170
  SideModal,
2005
2171
  Skeleton,
2006
2172
  Slider,
2173
+ SplitButton,
2007
2174
  Switch,
2008
2175
  TabSet,
2009
2176
  Table,