@campfire-interactive/ui 0.10.4 → 0.10.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +19 -4
- package/dist/index.js +14 -9
- package/package.json +56 -56
package/dist/index.d.ts
CHANGED
|
@@ -289,6 +289,19 @@ interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
|
289
289
|
/** Appends the required marker. Purely visual — set `required` on the control too. */
|
|
290
290
|
required?: boolean;
|
|
291
291
|
}
|
|
292
|
+
/**
|
|
293
|
+
* The required-field asterisk, on its own. `Label required` and `Field required`
|
|
294
|
+
* draw it for a form label; this is the same mark for the places a label is
|
|
295
|
+
* not: a table header over an editable column, a checklist item, a label whose
|
|
296
|
+
* text is built from several pieces. One element, so the mark looks the same
|
|
297
|
+
* wherever it appears.
|
|
298
|
+
*
|
|
299
|
+
* Visual only (aria-hidden). Put `required` / `aria-required` on the control
|
|
300
|
+
* itself, which is what assistive technology reads.
|
|
301
|
+
*/
|
|
302
|
+
declare function RequiredMark({ className }: {
|
|
303
|
+
className?: string;
|
|
304
|
+
}): react.JSX.Element;
|
|
292
305
|
/** A form label. Standalone, for the cases that don't want the full `Field` wrapper. */
|
|
293
306
|
declare function Label({ required, className, children, ...rest }: LabelProps): react.JSX.Element;
|
|
294
307
|
interface FieldContextValue {
|
|
@@ -727,8 +740,8 @@ interface ComboboxProps<T extends string = string> {
|
|
|
727
740
|
* the domain rather than by the customer.
|
|
728
741
|
*/
|
|
729
742
|
maxResults?: number;
|
|
730
|
-
/** Overrides the truncation notice. Receives how many rows are shown. */
|
|
731
|
-
truncatedLabel?: (shown: number) => string;
|
|
743
|
+
/** Overrides the truncation notice. Receives how many rows are shown and how many matched in all. */
|
|
744
|
+
truncatedLabel?: (shown: number, total: number) => string;
|
|
732
745
|
/**
|
|
733
746
|
* Fires as the list opens and closes. `Select` has had this since pm's
|
|
734
747
|
* click-to-edit cells needed it: those save on blur, and a portalled list
|
|
@@ -744,6 +757,8 @@ interface ComboboxProps<T extends string = string> {
|
|
|
744
757
|
onBlur?: React.FocusEventHandler<HTMLButtonElement>;
|
|
745
758
|
/** Adds a "Clear" affordance to the trigger once something is selected. */
|
|
746
759
|
clearable?: boolean;
|
|
760
|
+
/** Names the clear control, for screen readers and its tooltip. Pass a translated string in an i18n app. */
|
|
761
|
+
clearLabel?: (selected: string) => string;
|
|
747
762
|
size?: 'sm' | 'md' | 'lg';
|
|
748
763
|
invalid?: boolean;
|
|
749
764
|
disabled?: boolean;
|
|
@@ -793,7 +808,7 @@ interface ComboboxProps<T extends string = string> {
|
|
|
793
808
|
* closes. The list is `aria-activedescendant`-driven, so focus stays in the
|
|
794
809
|
* search field and a screen reader announces each row as it is highlighted.
|
|
795
810
|
*/
|
|
796
|
-
declare function Combobox<T extends string = string>({ options, value, onValueChange, placeholder, searchPlaceholder, onSearchChange, loading, emptyLabel, loadingLabel, maxResults, truncatedLabel, onOpenChange, onBlur, clearable, size, invalid, disabled, id, name, className, style, fullWidth, ...aria }: ComboboxProps<T>): react.JSX.Element;
|
|
811
|
+
declare function Combobox<T extends string = string>({ options, value, onValueChange, placeholder, searchPlaceholder, onSearchChange, loading, emptyLabel, loadingLabel, maxResults, truncatedLabel, onOpenChange, onBlur, clearable, clearLabel, size, invalid, disabled, id, name, className, style, fullWidth, ...aria }: ComboboxProps<T>): react.JSX.Element;
|
|
797
812
|
|
|
798
813
|
declare const TooltipProvider: react.FC<RadixTooltip.TooltipProviderProps>;
|
|
799
814
|
declare const TooltipRoot: react.FC<RadixTooltip.TooltipProps>;
|
|
@@ -1969,4 +1984,4 @@ declare function formatNumber(value: number | null | undefined, decimals?: numbe
|
|
|
1969
1984
|
*/
|
|
1970
1985
|
declare function formatPercent(value: number | null | undefined, decimals?: number): string;
|
|
1971
1986
|
|
|
1972
|
-
export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionRoot, type AccordionSection, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BootScreen, type BootScreenProps, type Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardDescription, CardFooter, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ClassValue, Combobox, type ComboboxOption, type ComboboxProps, ComingSoon, type ComingSoonProps, ConfirmDialog, type ConfirmDialogProps, CountBadge, type CountBadgeProps, CreatableSelect, type CreatableSelectProps, DataList, DataListItem, type DataListItemProps, type DataListProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogRoot, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, ExternalLink, type ExternalLinkProps, Field, type FieldProps, Fieldset, type FieldsetProps, FileButton, type FileButtonProps, FilterBar, type FilterBarProps, type FilterSelect, type FilterToggle, type FilterValue, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, Label, type LabelProps, ListToolbar, type ListToolbarProps, LoadingState, type LoadingStateProps, Menu, type MenuAction, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, type ModalProps, type MoneyOptions, PageHeader, type PageHeaderProps, type PagedRows, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, SelectionBar, type SelectionBarProps, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, SideModal, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortDirection, type SortState, SplitButton, type SplitButtonProps, StatGrid, type StatGridProps, StatTile, type StatTileProps, type StatTone, Switch, type SwitchProps, type TabDefinition, TabSet, type TabSetProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableEmpty, TableFoot, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, TableScroller, Tabs, TabsContent, TabsList, type TabsListProps, TabsRoot, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, ToggleGroup, type ToggleGroupProps, type ToggleOption, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseSortStateResult, cn, formatCalendarDate, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, useDebouncedValue, useFieldControl, usePagedRows, usePersistentState, useSortState, useToast };
|
|
1987
|
+
export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionRoot, type AccordionSection, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BootScreen, type BootScreenProps, type Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardDescription, CardFooter, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ClassValue, Combobox, type ComboboxOption, type ComboboxProps, ComingSoon, type ComingSoonProps, ConfirmDialog, type ConfirmDialogProps, CountBadge, type CountBadgeProps, CreatableSelect, type CreatableSelectProps, DataList, DataListItem, type DataListItemProps, type DataListProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogRoot, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, ExternalLink, type ExternalLinkProps, Field, type FieldProps, Fieldset, type FieldsetProps, FileButton, type FileButtonProps, FilterBar, type FilterBarProps, type FilterSelect, type FilterToggle, type FilterValue, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, Label, type LabelProps, ListToolbar, type ListToolbarProps, LoadingState, type LoadingStateProps, Menu, type MenuAction, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, type ModalProps, type MoneyOptions, PageHeader, type PageHeaderProps, type PagedRows, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, RequiredMark, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, SelectionBar, type SelectionBarProps, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, SideModal, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortDirection, type SortState, SplitButton, type SplitButtonProps, StatGrid, type StatGridProps, StatTile, type StatTileProps, type StatTone, Switch, type SwitchProps, type TabDefinition, TabSet, type TabSetProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableEmpty, TableFoot, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, TableScroller, Tabs, TabsContent, TabsList, type TabsListProps, TabsRoot, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, ToggleGroup, type ToggleGroupProps, type ToggleOption, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseSortStateResult, cn, formatCalendarDate, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, useDebouncedValue, useFieldControl, usePagedRows, usePersistentState, useSortState, useToast };
|
package/dist/index.js
CHANGED
|
@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
// src/styles/base.css
|
|
24
|
-
styleInject('@layer components {\n :where(:root) {\n --cfi-ui-surface: var(--cfi-surface, #ffffff);\n --cfi-ui-surface-raised: var(--cfi-surface-raised, #ffffff);\n --cfi-ui-surface-sunken: var(--cfi-surface-sunken, #f9fafb);\n --cfi-ui-surface-hover: var(--cfi-surface-hover, #f9fafb);\n --cfi-ui-surface-active: var(--cfi-surface-active, #f3f4f6);\n --cfi-ui-surface-selected: var(--cfi-surface-selected, #f3f4f6);\n --cfi-ui-surface-disabled: var(--cfi-surface-disabled, #f3f4f6);\n --cfi-ui-surface-muted: var(--cfi-surface-muted, #ececf0);\n --cfi-ui-input-bg: var(--cfi-input-bg, #f3f3f5);\n --cfi-ui-switch-bg: var(--cfi-switch-bg, #cbced4);\n --cfi-ui-content: var(--cfi-content, oklch(0.145 0 0));\n --cfi-ui-content-muted: var(--cfi-content-muted, #666676);\n --cfi-ui-content-subtle: var(--cfi-content-subtle, #9ca3af);\n --cfi-ui-content-inverse: var(--cfi-content-inverse, #ffffff);\n --cfi-ui-content-disabled: var(--cfi-content-disabled, #9ca3af);\n --cfi-ui-content-link: var(--cfi-content-link, #1d4ed8);\n --cfi-ui-border: var(--cfi-border, #e5e7eb);\n --cfi-ui-border-subtle: var(--cfi-border-subtle, #f3f4f6);\n --cfi-ui-border-strong: var(--cfi-border-strong, #d1d5db);\n --cfi-ui-accent: var(--cfi-action, #030213);\n --cfi-ui-accent-hover: var(--cfi-action-hover, #1a1a2e);\n --cfi-ui-accent-soft: var(--cfi-action-soft, #f3f4f6);\n --cfi-ui-accent-fg: var(--cfi-action-fg, #ffffff);\n --cfi-ui-success: var(--cfi-color-success, #10b981);\n --cfi-ui-success-soft: var(--cfi-color-success-soft, #ecfdf5);\n --cfi-ui-success-text: var(--cfi-color-success-text, #047857);\n --cfi-ui-success-border: var(--cfi-color-success-border, #a7f3d0);\n --cfi-ui-warning: var(--cfi-color-warning, #f59e0b);\n --cfi-ui-warning-soft: var(--cfi-color-warning-soft, #fffbeb);\n --cfi-ui-warning-text: var(--cfi-color-warning-text, #b45309);\n --cfi-ui-warning-border: var(--cfi-color-warning-border, #fde68a);\n --cfi-ui-error: var(--cfi-color-error, #ef4444);\n --cfi-ui-error-strong: var(--cfi-color-error-strong, #dc2626);\n --cfi-ui-error-soft: var(--cfi-color-error-soft, #fef2f2);\n --cfi-ui-error-text: var(--cfi-color-error-text, #b91c1c);\n --cfi-ui-error-border: var(--cfi-color-error-border, #fecaca);\n --cfi-ui-info: var(--cfi-color-info, #3b82f6);\n --cfi-ui-info-soft: var(--cfi-color-info-soft, #eff6ff);\n --cfi-ui-info-text: var(--cfi-color-info-text, #1d4ed8);\n --cfi-ui-info-border: var(--cfi-color-info-border, #bfdbfe);\n --cfi-ui-neutral-soft: var(--cfi-color-neutral-soft, #f3f4f6);\n --cfi-ui-neutral-text: var(--cfi-color-neutral-text, #374151);\n --cfi-ui-neutral-border: var(--cfi-color-neutral-border, #e5e7eb);\n --cfi-ui-focus-color: var(--cfi-focus-ring-color, var(--cfi-ui-accent));\n --cfi-ui-focus-width: var(--cfi-focus-ring-width, 2px);\n --cfi-ui-focus-offset: var(--cfi-focus-ring-offset, 2px);\n --cfi-ui-overlay: var(--cfi-overlay, rgb(17 24 39 / 0.45));\n --cfi-ui-font: var(--cfi-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);\n --cfi-ui-font-mono: var(--cfi-font-family-mono, ui-monospace, Consolas, monospace);\n --cfi-ui-text-xs: var(--cfi-font-size-xs, 0.75rem);\n --cfi-ui-text-sm: var(--cfi-font-size-sm, 0.875rem);\n --cfi-ui-text-base: var(--cfi-font-size-base, 1rem);\n --cfi-ui-text-lg: var(--cfi-font-size-lg, 1.125rem);\n --cfi-ui-text-xl: var(--cfi-font-size-xl, 1.25rem);\n --cfi-ui-weight-normal: var(--cfi-font-weight-normal, 400);\n --cfi-ui-weight-medium: var(--cfi-font-weight-medium, 500);\n --cfi-ui-weight-semibold: var(--cfi-font-weight-semibold, 600);\n --cfi-ui-leading-tight: var(--cfi-line-height-tight, 1.2);\n --cfi-ui-leading-snug: var(--cfi-line-height-snug, 1.35);\n --cfi-ui-leading-normal: var(--cfi-line-height-normal, 1.5);\n --cfi-ui-tracking-caps: var(--cfi-letter-spacing-caps, 0.08em);\n --cfi-ui-space-3xs: var(--cfi-spacing-3xs, 0.125rem);\n --cfi-ui-space-2xs: var(--cfi-spacing-2xs, 0.1875rem);\n --cfi-ui-space-xs: var(--cfi-spacing-xs, 0.25rem);\n --cfi-ui-space-sm: var(--cfi-spacing-sm, 0.5rem);\n --cfi-ui-space-md: var(--cfi-spacing-md, 1rem);\n --cfi-ui-space-lg: var(--cfi-spacing-lg, 1.5rem);\n --cfi-ui-space-xl: var(--cfi-spacing-xl, 2rem);\n --cfi-ui-radius-sm: var(--cfi-radius-sm, 0.375rem);\n --cfi-ui-radius-md: var(--cfi-radius-md, 0.5rem);\n --cfi-ui-radius-lg: var(--cfi-radius-lg, 0.625rem);\n --cfi-ui-radius-xl: var(--cfi-radius-xl, 0.875rem);\n --cfi-ui-radius-full: var(--cfi-radius-full, 9999px);\n --cfi-ui-shadow-xs: var(--cfi-shadow-xs, 0 1px 1px rgb(17 24 39 / 0.04));\n --cfi-ui-shadow-sm: var(--cfi-shadow-sm, 0 1px 2px rgb(17 24 39 / 0.05));\n --cfi-ui-shadow-md: var(--cfi-shadow-md, 0 4px 6px rgb(17 24 39 / 0.07));\n --cfi-ui-shadow-lg: var(--cfi-shadow-lg, 0 10px 15px rgb(17 24 39 / 0.1));\n --cfi-ui-shadow-xl: var(--cfi-shadow-xl, 0 20px 40px -12px rgb(17 24 39 / 0.22));\n --cfi-ui-transition-fast: var(--cfi-transition-fast, 120ms cubic-bezier(0.4, 0, 0.2, 1));\n --cfi-ui-transition-base: var(--cfi-transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1));\n --cfi-ui-z-dropdown: max(var(--cfi-z-dropdown, 1350), calc(var(--cfi-z-popover, 1300) + 50));\n --cfi-ui-z-overlay: var(--cfi-z-overlay, 1100);\n --cfi-ui-z-modal: var(--cfi-z-modal, 1200);\n --cfi-ui-z-popover: var(--cfi-z-popover, 1300);\n --cfi-ui-z-toast: var(--cfi-z-toast, 1400);\n --cfi-ui-z-tooltip: var(--cfi-z-tooltip, 1500);\n --cfi-ui-control-height-sm: 2rem;\n --cfi-ui-control-height-md: 2.25rem;\n --cfi-ui-control-height-lg: 2.75rem;\n }\n .cfi-ui {\n box-sizing: border-box;\n font-family: var(--cfi-ui-font);\n }\n .cfi-ui *,\n .cfi-ui *::before,\n .cfi-ui *::after {\n box-sizing: border-box;\n }\n .cfi-ui:focus-visible,\n .cfi-ui :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 .cfi-ui-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n @keyframes cfi-ui-spin {\n to {\n transform: rotate(360deg);\n }\n }\n @keyframes cfi-ui-pulse {\n 50% {\n opacity: 0.45;\n }\n }\n @keyframes cfi-ui-fade-in {\n from {\n opacity: 0;\n }\n }\n @keyframes cfi-ui-zoom-in {\n from {\n opacity: 0;\n transform: scale(0.97);\n }\n }\n @keyframes cfi-ui-slide-in-right {\n from {\n transform: translateX(100%);\n }\n }\n @keyframes cfi-ui-slide-in-left {\n from {\n transform: translateX(-100%);\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .cfi-ui,\n .cfi-ui *,\n [data-cfi-ui-portal],\n [data-cfi-ui-portal] * {\n animation-duration: 1ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 1ms !important;\n }\n }\n}\n');
|
|
24
|
+
styleInject('@layer components {\n :where(:root) {\n --cfi-ui-surface: var(--cfi-surface, #ffffff);\n --cfi-ui-surface-raised: var(--cfi-surface-raised, #ffffff);\n --cfi-ui-surface-sunken: var(--cfi-surface-sunken, #f9fafb);\n --cfi-ui-surface-hover: var(--cfi-surface-hover, #f9fafb);\n --cfi-ui-surface-active: var(--cfi-surface-active, #f3f4f6);\n --cfi-ui-surface-selected: var(--cfi-surface-selected, #f3f4f6);\n --cfi-ui-surface-disabled: var(--cfi-surface-disabled, #f3f4f6);\n --cfi-ui-surface-muted: var(--cfi-surface-muted, #ececf0);\n --cfi-ui-surface-segment-selected: var(--cfi-surface-segment-selected, var(--cfi-surface, #ffffff));\n --cfi-ui-input-bg: var(--cfi-input-bg, #f3f3f5);\n --cfi-ui-switch-bg: var(--cfi-switch-bg, #cbced4);\n --cfi-ui-content: var(--cfi-content, oklch(0.145 0 0));\n --cfi-ui-content-muted: var(--cfi-content-muted, #666676);\n --cfi-ui-content-subtle: var(--cfi-content-subtle, #9ca3af);\n --cfi-ui-content-inverse: var(--cfi-content-inverse, #ffffff);\n --cfi-ui-content-disabled: var(--cfi-content-disabled, #9ca3af);\n --cfi-ui-content-link: var(--cfi-content-link, #1d4ed8);\n --cfi-ui-border: var(--cfi-border, #e5e7eb);\n --cfi-ui-border-subtle: var(--cfi-border-subtle, #f3f4f6);\n --cfi-ui-border-strong: var(--cfi-border-strong, #d1d5db);\n --cfi-ui-accent: var(--cfi-action, #030213);\n --cfi-ui-accent-hover: var(--cfi-action-hover, #1a1a2e);\n --cfi-ui-accent-soft: var(--cfi-action-soft, #f3f4f6);\n --cfi-ui-accent-fg: var(--cfi-action-fg, #ffffff);\n --cfi-ui-success: var(--cfi-color-success, #10b981);\n --cfi-ui-success-soft: var(--cfi-color-success-soft, #ecfdf5);\n --cfi-ui-success-text: var(--cfi-color-success-text, #047857);\n --cfi-ui-success-border: var(--cfi-color-success-border, #a7f3d0);\n --cfi-ui-warning: var(--cfi-color-warning, #f59e0b);\n --cfi-ui-warning-soft: var(--cfi-color-warning-soft, #fffbeb);\n --cfi-ui-warning-text: var(--cfi-color-warning-text, #b45309);\n --cfi-ui-warning-border: var(--cfi-color-warning-border, #fde68a);\n --cfi-ui-error: var(--cfi-color-error, #ef4444);\n --cfi-ui-error-strong: var(--cfi-color-error-strong, #dc2626);\n --cfi-ui-error-soft: var(--cfi-color-error-soft, #fef2f2);\n --cfi-ui-error-text: var(--cfi-color-error-text, #b91c1c);\n --cfi-ui-error-border: var(--cfi-color-error-border, #fecaca);\n --cfi-ui-info: var(--cfi-color-info, #3b82f6);\n --cfi-ui-info-soft: var(--cfi-color-info-soft, #eff6ff);\n --cfi-ui-info-text: var(--cfi-color-info-text, #1d4ed8);\n --cfi-ui-info-border: var(--cfi-color-info-border, #bfdbfe);\n --cfi-ui-neutral-soft: var(--cfi-color-neutral-soft, #f3f4f6);\n --cfi-ui-neutral-text: var(--cfi-color-neutral-text, #374151);\n --cfi-ui-neutral-border: var(--cfi-color-neutral-border, #e5e7eb);\n --cfi-ui-focus-color: var(--cfi-focus-ring-color, var(--cfi-ui-accent));\n --cfi-ui-focus-width: var(--cfi-focus-ring-width, 2px);\n --cfi-ui-focus-offset: var(--cfi-focus-ring-offset, 2px);\n --cfi-ui-overlay: var(--cfi-overlay, rgb(17 24 39 / 0.45));\n --cfi-ui-font: var(--cfi-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);\n --cfi-ui-font-mono: var(--cfi-font-family-mono, ui-monospace, Consolas, monospace);\n --cfi-ui-text-xs: var(--cfi-font-size-xs, 0.75rem);\n --cfi-ui-text-sm: var(--cfi-font-size-sm, 0.875rem);\n --cfi-ui-text-base: var(--cfi-font-size-base, 1rem);\n --cfi-ui-text-lg: var(--cfi-font-size-lg, 1.125rem);\n --cfi-ui-text-xl: var(--cfi-font-size-xl, 1.25rem);\n --cfi-ui-weight-normal: var(--cfi-font-weight-normal, 400);\n --cfi-ui-weight-medium: var(--cfi-font-weight-medium, 500);\n --cfi-ui-weight-semibold: var(--cfi-font-weight-semibold, 600);\n --cfi-ui-leading-tight: var(--cfi-line-height-tight, 1.2);\n --cfi-ui-leading-snug: var(--cfi-line-height-snug, 1.35);\n --cfi-ui-leading-normal: var(--cfi-line-height-normal, 1.5);\n --cfi-ui-tracking-caps: var(--cfi-letter-spacing-caps, 0.08em);\n --cfi-ui-space-3xs: var(--cfi-spacing-3xs, 0.125rem);\n --cfi-ui-space-2xs: var(--cfi-spacing-2xs, 0.1875rem);\n --cfi-ui-space-xs: var(--cfi-spacing-xs, 0.25rem);\n --cfi-ui-space-sm: var(--cfi-spacing-sm, 0.5rem);\n --cfi-ui-space-md: var(--cfi-spacing-md, 1rem);\n --cfi-ui-space-lg: var(--cfi-spacing-lg, 1.5rem);\n --cfi-ui-space-xl: var(--cfi-spacing-xl, 2rem);\n --cfi-ui-radius-sm: var(--cfi-radius-sm, 0.375rem);\n --cfi-ui-radius-md: var(--cfi-radius-md, 0.5rem);\n --cfi-ui-radius-lg: var(--cfi-radius-lg, 0.625rem);\n --cfi-ui-radius-xl: var(--cfi-radius-xl, 0.875rem);\n --cfi-ui-radius-full: var(--cfi-radius-full, 9999px);\n --cfi-ui-shadow-xs: var(--cfi-shadow-xs, 0 1px 1px rgb(17 24 39 / 0.04));\n --cfi-ui-shadow-sm: var(--cfi-shadow-sm, 0 1px 2px rgb(17 24 39 / 0.05));\n --cfi-ui-shadow-md: var(--cfi-shadow-md, 0 4px 6px rgb(17 24 39 / 0.07));\n --cfi-ui-shadow-lg: var(--cfi-shadow-lg, 0 10px 15px rgb(17 24 39 / 0.1));\n --cfi-ui-shadow-xl: var(--cfi-shadow-xl, 0 20px 40px -12px rgb(17 24 39 / 0.22));\n --cfi-ui-transition-fast: var(--cfi-transition-fast, 120ms cubic-bezier(0.4, 0, 0.2, 1));\n --cfi-ui-transition-base: var(--cfi-transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1));\n --cfi-ui-z-dropdown: max(var(--cfi-z-dropdown, 1350), calc(var(--cfi-z-popover, 1300) + 50));\n --cfi-ui-z-overlay: var(--cfi-z-overlay, 1100);\n --cfi-ui-z-modal: var(--cfi-z-modal, 1200);\n --cfi-ui-z-popover: var(--cfi-z-popover, 1300);\n --cfi-ui-z-toast: var(--cfi-z-toast, 1400);\n --cfi-ui-z-tooltip: var(--cfi-z-tooltip, 1500);\n --cfi-ui-control-height-sm: 2rem;\n --cfi-ui-control-height-md: 2.25rem;\n --cfi-ui-control-height-lg: 2.75rem;\n }\n .cfi-ui {\n box-sizing: border-box;\n font-family: var(--cfi-ui-font);\n }\n .cfi-ui *,\n .cfi-ui *::before,\n .cfi-ui *::after {\n box-sizing: border-box;\n }\n .cfi-ui:focus-visible,\n .cfi-ui :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 .cfi-ui-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n @keyframes cfi-ui-spin {\n to {\n transform: rotate(360deg);\n }\n }\n @keyframes cfi-ui-pulse {\n 50% {\n opacity: 0.45;\n }\n }\n @keyframes cfi-ui-fade-in {\n from {\n opacity: 0;\n }\n }\n @keyframes cfi-ui-zoom-in {\n from {\n opacity: 0;\n transform: scale(0.97);\n }\n }\n @keyframes cfi-ui-slide-in-right {\n from {\n transform: translateX(100%);\n }\n }\n @keyframes cfi-ui-slide-in-left {\n from {\n transform: translateX(-100%);\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .cfi-ui,\n .cfi-ui *,\n [data-cfi-ui-portal],\n [data-cfi-ui-portal] * {\n animation-duration: 1ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 1ms !important;\n }\n }\n}\n');
|
|
25
25
|
|
|
26
26
|
// src/lib/cn.ts
|
|
27
27
|
function cn(...values) {
|
|
@@ -666,14 +666,17 @@ var Textarea = forwardRef8(function Textarea2({ invalid, className, rows = 3, ..
|
|
|
666
666
|
import { Children, cloneElement as cloneElement2, createContext, isValidElement as isValidElement2, useContext, useId as useId2 } from "react";
|
|
667
667
|
|
|
668
668
|
// src/Field.css
|
|
669
|
-
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');
|
|
669
|
+
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 :not(.cfi-ui-label) > .cfi-ui-label__required {\n margin-inline-start: var(--cfi-ui-space-3xs);\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');
|
|
670
670
|
|
|
671
671
|
// src/Field.tsx
|
|
672
672
|
import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
673
|
+
function RequiredMark({ className }) {
|
|
674
|
+
return /* @__PURE__ */ jsx10("span", { className: cn("cfi-ui-label__required", className), "aria-hidden": "true", children: "*" });
|
|
675
|
+
}
|
|
673
676
|
function Label3({ required, className, children, ...rest }) {
|
|
674
677
|
return /* @__PURE__ */ jsxs10("label", { className: cn("cfi-ui", "cfi-ui-label", className), ...rest, children: [
|
|
675
678
|
children,
|
|
676
|
-
required && /* @__PURE__ */ jsx10(
|
|
679
|
+
required && /* @__PURE__ */ jsx10(RequiredMark, {})
|
|
677
680
|
] });
|
|
678
681
|
}
|
|
679
682
|
var FieldContext = createContext(null);
|
|
@@ -1118,10 +1121,11 @@ function Combobox({
|
|
|
1118
1121
|
emptyLabel = "No matches",
|
|
1119
1122
|
loadingLabel = "Searching...",
|
|
1120
1123
|
maxResults = 50,
|
|
1121
|
-
truncatedLabel = (shown) => `Showing
|
|
1124
|
+
truncatedLabel = (shown, total) => `Showing ${shown} of ${total.toLocaleString()}. Keep typing to narrow.`,
|
|
1122
1125
|
onOpenChange,
|
|
1123
1126
|
onBlur,
|
|
1124
1127
|
clearable = false,
|
|
1128
|
+
clearLabel = (selected) => `Clear ${selected}`,
|
|
1125
1129
|
size = "md",
|
|
1126
1130
|
invalid,
|
|
1127
1131
|
disabled,
|
|
@@ -1248,8 +1252,8 @@ function Combobox({
|
|
|
1248
1252
|
{
|
|
1249
1253
|
type: "button",
|
|
1250
1254
|
className: "cfi-ui-combobox__clear",
|
|
1251
|
-
"aria-label":
|
|
1252
|
-
title:
|
|
1255
|
+
"aria-label": clearLabel(selectedLabel),
|
|
1256
|
+
title: clearLabel(selectedLabel),
|
|
1253
1257
|
onClick: () => onValueChange(null),
|
|
1254
1258
|
children: /* @__PURE__ */ jsx15(X3, { "aria-hidden": "true" })
|
|
1255
1259
|
}
|
|
@@ -1331,7 +1335,7 @@ function Combobox({
|
|
|
1331
1335
|
})
|
|
1332
1336
|
}
|
|
1333
1337
|
),
|
|
1334
|
-
!loading && truncated && /* @__PURE__ */ jsx15("p", { className: "cfi-ui-combobox__truncated", children: truncatedLabel(visible.length) })
|
|
1338
|
+
!loading && truncated && /* @__PURE__ */ jsx15("p", { className: "cfi-ui-combobox__truncated", children: truncatedLabel(visible.length, filtered.length) })
|
|
1335
1339
|
]
|
|
1336
1340
|
}
|
|
1337
1341
|
)
|
|
@@ -1752,7 +1756,7 @@ import { forwardRef as forwardRef15 } from "react";
|
|
|
1752
1756
|
import * as RadixTabs from "@radix-ui/react-tabs";
|
|
1753
1757
|
|
|
1754
1758
|
// src/Tabs.css
|
|
1755
|
-
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
|
|
1759
|
+
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 flex-wrap: wrap;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n }\n :where(.cfi-ui-tabs__trigger) {\n display: inline-flex;\n align-items: center;\n justify-content: 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__label {\n display: inline-flex;\n flex-direction: inherit;\n align-items: inherit;\n gap: inherit;\n white-space: nowrap;\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=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-segment-selected);\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");
|
|
1756
1760
|
|
|
1757
1761
|
// src/Tabs.tsx
|
|
1758
1762
|
import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
@@ -1938,7 +1942,7 @@ import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
|
|
|
1938
1942
|
import { ChevronDown as ChevronDown4 } from "lucide-react";
|
|
1939
1943
|
|
|
1940
1944
|
// src/Accordion.css
|
|
1941
|
-
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");
|
|
1945
|
+
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-segment-selected);\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");
|
|
1942
1946
|
|
|
1943
1947
|
// src/Accordion.tsx
|
|
1944
1948
|
import { jsx as jsx24, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
@@ -2659,6 +2663,7 @@ export {
|
|
|
2659
2663
|
PopoverRoot,
|
|
2660
2664
|
PopoverTrigger,
|
|
2661
2665
|
Progress,
|
|
2666
|
+
RequiredMark,
|
|
2662
2667
|
ScrollArea,
|
|
2663
2668
|
SearchInput,
|
|
2664
2669
|
Select,
|
package/package.json
CHANGED
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@campfire-interactive/ui",
|
|
3
|
-
"version": "0.10.
|
|
4
|
-
"description": "Shared UI primitives for the Campfire Suite — Radix behavior, plain CSS styled entirely from the design tokens, no Tailwind required",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "dist/index.js",
|
|
7
|
-
"types": "dist/index.d.ts",
|
|
8
|
-
"exports": {
|
|
9
|
-
".": {
|
|
10
|
-
"types": "./dist/index.d.ts",
|
|
11
|
-
"import": "./dist/index.js"
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
"files": [
|
|
15
|
-
"dist"
|
|
16
|
-
],
|
|
17
|
-
"scripts": {
|
|
18
|
-
"build": "tsup",
|
|
19
|
-
"prepublishOnly": "npm run build",
|
|
20
|
-
"dev": "tsup --watch",
|
|
21
|
-
"test": "vitest run",
|
|
22
|
-
"typecheck": "tsc --noEmit"
|
|
23
|
-
},
|
|
24
|
-
"peerDependencies": {
|
|
25
|
-
"react": "^18.0.0 || ^19.0.0",
|
|
26
|
-
"react-dom": "^18.0.0 || ^19.0.0"
|
|
27
|
-
},
|
|
28
|
-
"dependencies": {
|
|
29
|
-
"@campfire-interactive/design-tokens": "*",
|
|
30
|
-
"@radix-ui/react-accordion": "^1.2.12",
|
|
31
|
-
"@radix-ui/react-checkbox": "^1.3.3",
|
|
32
|
-
"@radix-ui/react-dialog": "^1.1.15",
|
|
33
|
-
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
34
|
-
"@radix-ui/react-popover": "^1.1.15",
|
|
35
|
-
"@radix-ui/react-select": "^2.2.6",
|
|
36
|
-
"@radix-ui/react-slider": "^1.3.6",
|
|
37
|
-
"@radix-ui/react-slot": "^1.2.3",
|
|
38
|
-
"@radix-ui/react-switch": "^1.2.6",
|
|
39
|
-
"@radix-ui/react-tabs": "^1.1.13",
|
|
40
|
-
"@radix-ui/react-toggle-group": "^1.1.11",
|
|
41
|
-
"@radix-ui/react-tooltip": "^1.2.8",
|
|
42
|
-
"lucide-react": "^0.487.0"
|
|
43
|
-
},
|
|
44
|
-
"devDependencies": {
|
|
45
|
-
"@types/react": "^19.0.0",
|
|
46
|
-
"@types/react-dom": "^19.0.0",
|
|
47
|
-
"react": "^19.0.0",
|
|
48
|
-
"react-dom": "^19.0.0",
|
|
49
|
-
"tsup": "^8.0.0",
|
|
50
|
-
"typescript": "^5.3.3"
|
|
51
|
-
},
|
|
52
|
-
"publishConfig": {
|
|
53
|
-
"registry": "https://registry.npmjs.org",
|
|
54
|
-
"access": "public"
|
|
55
|
-
}
|
|
56
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@campfire-interactive/ui",
|
|
3
|
+
"version": "0.10.6",
|
|
4
|
+
"description": "Shared UI primitives for the Campfire Suite — Radix behavior, plain CSS styled entirely from the design tokens, no Tailwind required",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.js"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build": "tsup",
|
|
19
|
+
"prepublishOnly": "npm run build",
|
|
20
|
+
"dev": "tsup --watch",
|
|
21
|
+
"test": "vitest run",
|
|
22
|
+
"typecheck": "tsc --noEmit"
|
|
23
|
+
},
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
26
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
27
|
+
},
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"@campfire-interactive/design-tokens": "*",
|
|
30
|
+
"@radix-ui/react-accordion": "^1.2.12",
|
|
31
|
+
"@radix-ui/react-checkbox": "^1.3.3",
|
|
32
|
+
"@radix-ui/react-dialog": "^1.1.15",
|
|
33
|
+
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
34
|
+
"@radix-ui/react-popover": "^1.1.15",
|
|
35
|
+
"@radix-ui/react-select": "^2.2.6",
|
|
36
|
+
"@radix-ui/react-slider": "^1.3.6",
|
|
37
|
+
"@radix-ui/react-slot": "^1.2.3",
|
|
38
|
+
"@radix-ui/react-switch": "^1.2.6",
|
|
39
|
+
"@radix-ui/react-tabs": "^1.1.13",
|
|
40
|
+
"@radix-ui/react-toggle-group": "^1.1.11",
|
|
41
|
+
"@radix-ui/react-tooltip": "^1.2.8",
|
|
42
|
+
"lucide-react": "^0.487.0"
|
|
43
|
+
},
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"@types/react": "^19.0.0",
|
|
46
|
+
"@types/react-dom": "^19.0.0",
|
|
47
|
+
"react": "^19.0.0",
|
|
48
|
+
"react-dom": "^19.0.0",
|
|
49
|
+
"tsup": "^8.0.0",
|
|
50
|
+
"typescript": "^5.3.3"
|
|
51
|
+
},
|
|
52
|
+
"publishConfig": {
|
|
53
|
+
"registry": "https://registry.npmjs.org",
|
|
54
|
+
"access": "public"
|
|
55
|
+
}
|
|
56
|
+
}
|