@campfire-interactive/ui 0.3.0 → 0.4.1

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 +153 -53
  2. package/dist/index.js +825 -658
  3. package/package.json +55 -55
package/dist/index.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as react from 'react';
2
+ import * as RadixMenu from '@radix-ui/react-dropdown-menu';
2
3
  import * as RadixCheckbox from '@radix-ui/react-checkbox';
3
4
  import * as RadixSwitch from '@radix-ui/react-switch';
4
5
  import * as RadixSlider from '@radix-ui/react-slider';
5
6
  import * as RadixDialog from '@radix-ui/react-dialog';
6
7
  import * as RadixPopover from '@radix-ui/react-popover';
7
- import * as RadixMenu from '@radix-ui/react-dropdown-menu';
8
8
  import * as RadixSelect from '@radix-ui/react-select';
9
9
  import * as RadixTooltip from '@radix-ui/react-tooltip';
10
10
  import * as RadixTabs from '@radix-ui/react-tabs';
@@ -74,6 +74,157 @@ interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
74
74
  /** A row of buttons with the suite's gap. Saves the `flex items-center gap-2` every call site repeats. */
75
75
  declare function ButtonGroup({ align, className, ...rest }: ButtonGroupProps): react.JSX.Element;
76
76
 
77
+ declare const MenuRoot: react.FC<RadixMenu.DropdownMenuProps>;
78
+ declare const MenuTrigger: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
79
+ declare const MenuGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
80
+ declare const MenuSub: react.FC<RadixMenu.DropdownMenuSubProps>;
81
+ declare const MenuRadioGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
82
+ declare const MenuContent: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
83
+ interface MenuItemProps extends React.ComponentPropsWithoutRef<typeof RadixMenu.Item> {
84
+ icon?: React.ReactNode;
85
+ /** Right-aligned shortcut hint, e.g. "⌘K". Display only — bind the key yourself. */
86
+ shortcut?: string;
87
+ /** `danger` colors the item red. Destructive items should also confirm. */
88
+ variant?: 'default' | 'danger';
89
+ }
90
+ declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLDivElement>>;
91
+ declare const MenuCheckboxItem: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
92
+ declare const MenuRadioItem: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
93
+ declare function MenuLabel({ className, ...rest }: React.ComponentPropsWithoutRef<typeof RadixMenu.Label>): react.JSX.Element;
94
+ declare function MenuSeparator({ className, ...rest }: React.ComponentPropsWithoutRef<typeof RadixMenu.Separator>): react.JSX.Element;
95
+ declare const MenuSubTrigger: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
96
+ declare const MenuSubContent: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
97
+ interface MenuAction {
98
+ /** Stable key. Also used as the value when the item is part of a radio group. */
99
+ id: string;
100
+ label: React.ReactNode;
101
+ icon?: React.ReactNode;
102
+ shortcut?: string;
103
+ disabled?: boolean;
104
+ variant?: 'default' | 'danger';
105
+ onSelect?: () => void;
106
+ /** Draws a separator above this item. */
107
+ separatorBefore?: boolean;
108
+ }
109
+ interface MenuProps {
110
+ /** Rendered with `asChild` — pass a Button or IconButton and it keeps its own styling. */
111
+ trigger: React.ReactNode;
112
+ items: MenuAction[];
113
+ align?: 'start' | 'center' | 'end';
114
+ side?: 'top' | 'right' | 'bottom' | 'left';
115
+ className?: string;
116
+ }
117
+ /**
118
+ * The row-actions menu.
119
+ *
120
+ * Four apps vendored Radix's dropdown-menu and every one of them wrote the same
121
+ * item markup by hand at each call site. `items` is the shape a table's
122
+ * per-row menu actually wants: a flat list with icons, separators and
123
+ * destructive styling. Drop to the primitives above for submenus, checkbox
124
+ * items or a menu whose contents are a live query.
125
+ */
126
+ declare function Menu({ trigger, items, align, side, className }: MenuProps): react.JSX.Element;
127
+
128
+ interface SplitButtonProps extends Omit<ButtonProps, 'children' | 'onClick' | 'variant' | 'size'> {
129
+ /** The label on the pressable half — the row's next step. */
130
+ children: React.ReactNode;
131
+ /** What the pressable half does. Omit for a menu-only control. */
132
+ onClick?: React.MouseEventHandler<HTMLButtonElement>;
133
+ /** Everything else, behind the chevron. */
134
+ items: MenuAction[];
135
+ variant?: ButtonVariant;
136
+ size?: Exclude<ButtonSize, 'icon'>;
137
+ /** Names the chevron for a screen reader. Required — "More" twelve times over is not a name. */
138
+ menuLabel: string;
139
+ align?: 'start' | 'center' | 'end';
140
+ }
141
+ /**
142
+ * A button joined to a menu of its alternatives.
143
+ *
144
+ * WHY THIS EXISTS. A table's action column has one obvious next step per row
145
+ * and a handful of rarer ones. Rendering them as separate buttons makes the
146
+ * column the tallest thing in the table; collapsing all of them into a `⋮`
147
+ * costs two clicks to do the ordinary thing. The split does neither: the step
148
+ * is a button, the rest is a chevron beside it.
149
+ *
150
+ * The reason it is a COMPONENT rather than two elements at the call site is
151
+ * that the pairing has to be exact — a shared border, one radius across the
152
+ * pair, and a single focus treatment — and pm had already grown a version
153
+ * where some rows showed the chevron and some did not, which read as broken
154
+ * rather than as "this row has fewer options".
155
+ *
156
+ * WITH NO ITEMS IT IS A PLAIN BUTTON, not a button with a dead chevron. That
157
+ * is the case that made the column look inconsistent in the first place, so it
158
+ * is handled here rather than left to every caller to remember.
159
+ *
160
+ * WITH NO `onClick` it is a menu with a label — for a row whose actions are
161
+ * all equal and none is the obvious one.
162
+ */
163
+ declare const SplitButton: react.ForwardRefExoticComponent<SplitButtonProps & react.RefAttributes<HTMLButtonElement>>;
164
+
165
+ interface FilterSelect {
166
+ id: string;
167
+ label: string;
168
+ options: {
169
+ value: string;
170
+ label: React.ReactNode;
171
+ }[];
172
+ /**
173
+ * What the select reads when nothing is chosen. Defaults to "Any".
174
+ *
175
+ * Built from the label it was — `All ${label.toLowerCase()}` — which reads
176
+ * fine for "All statuses" and badly for everything else: the first two call
177
+ * sites produced "All area" and "All who". A caller that wants a plural
178
+ * passes one; the default is a word that works under any label.
179
+ */
180
+ placeholder?: string;
181
+ }
182
+ interface FilterToggle {
183
+ id: string;
184
+ label: string;
185
+ /** Explains what the toggle narrows to, on the row inside the menu. */
186
+ hint?: string;
187
+ }
188
+ type FilterValue = Record<string, string | boolean | undefined>;
189
+ interface FilterBarProps {
190
+ selects?: FilterSelect[];
191
+ toggles?: FilterToggle[];
192
+ value: FilterValue;
193
+ onChange: (next: FilterValue) => void;
194
+ /** The button's label. Defaults to "Filters". */
195
+ label?: string;
196
+ /** The empty state of every select that does not name its own. Defaults to "Any". */
197
+ anyLabel?: string;
198
+ clearLabel?: string;
199
+ /** Announced on each chip's remove button — "Remove {{name}} filter". */
200
+ removeLabel?: (name: string) => string;
201
+ className?: string;
202
+ }
203
+ /**
204
+ * Filters behind one control, with what is APPLIED shown as chips beside it.
205
+ *
206
+ * WHY THIS SHAPE. A filter row grows one control per filter, and every one of
207
+ * them spends width saying "All statuses / All health / All OEMs" — a row's
208
+ * worth of chrome to report that NOTHING IS FILTERED, which is the least
209
+ * useful state to spend width on. pm's portfolio had five such dropdowns plus
210
+ * a search box, a Reset view, a Save as my default and a Columns control.
211
+ *
212
+ * Chips invert that. The bar is a button and a count when nothing is applied,
213
+ * and grows only to show what IS applied — the state worth the width, one
214
+ * click to remove, and no per-control judgement about which filters are
215
+ * "used constantly" and deserve to stay visible. That judgement is the thing
216
+ * that does not survive the next filter being added.
217
+ *
218
+ * WHAT STAYS OUT: a search box. It is a text input rather than a value, it is
219
+ * how most people start, and hiding it behind a menu is the one change here
220
+ * that would cost somebody a step on every visit.
221
+ *
222
+ * Single-select only, which is what the call sites have. A multi-select filter
223
+ * wants a different chip — "OEM: 3 selected" — and inventing it before there
224
+ * is a screen for it is how a shared component grows an API nobody uses.
225
+ */
226
+ declare function FilterBar({ selects, toggles, value, onChange, label, anyLabel, clearLabel, removeLabel, className, }: FilterBarProps): react.JSX.Element;
227
+
77
228
  type InputSize = 'sm' | 'md' | 'lg';
78
229
  /**
79
230
  * `size` and `prefix` are dropped from the native attribute set on purpose.
@@ -363,57 +514,6 @@ interface PopoverProps extends Omit<PopoverContentProps, 'children'> {
363
514
  */
364
515
  declare function Popover({ trigger, open, onOpenChange, defaultOpen, modal, children, ...content }: PopoverProps): react.JSX.Element;
365
516
 
366
- declare const MenuRoot: react.FC<RadixMenu.DropdownMenuProps>;
367
- declare const MenuTrigger: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
368
- declare const MenuGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
369
- declare const MenuSub: react.FC<RadixMenu.DropdownMenuSubProps>;
370
- declare const MenuRadioGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
371
- declare const MenuContent: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
372
- interface MenuItemProps extends React.ComponentPropsWithoutRef<typeof RadixMenu.Item> {
373
- icon?: React.ReactNode;
374
- /** Right-aligned shortcut hint, e.g. "⌘K". Display only — bind the key yourself. */
375
- shortcut?: string;
376
- /** `danger` colors the item red. Destructive items should also confirm. */
377
- variant?: 'default' | 'danger';
378
- }
379
- declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLDivElement>>;
380
- declare const MenuCheckboxItem: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
381
- declare const MenuRadioItem: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
382
- declare function MenuLabel({ className, ...rest }: React.ComponentPropsWithoutRef<typeof RadixMenu.Label>): react.JSX.Element;
383
- declare function MenuSeparator({ className, ...rest }: React.ComponentPropsWithoutRef<typeof RadixMenu.Separator>): react.JSX.Element;
384
- declare const MenuSubTrigger: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
385
- declare const MenuSubContent: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
386
- interface MenuAction {
387
- /** Stable key. Also used as the value when the item is part of a radio group. */
388
- id: string;
389
- label: React.ReactNode;
390
- icon?: React.ReactNode;
391
- shortcut?: string;
392
- disabled?: boolean;
393
- variant?: 'default' | 'danger';
394
- onSelect?: () => void;
395
- /** Draws a separator above this item. */
396
- separatorBefore?: boolean;
397
- }
398
- interface MenuProps {
399
- /** Rendered with `asChild` — pass a Button or IconButton and it keeps its own styling. */
400
- trigger: React.ReactNode;
401
- items: MenuAction[];
402
- align?: 'start' | 'center' | 'end';
403
- side?: 'top' | 'right' | 'bottom' | 'left';
404
- className?: string;
405
- }
406
- /**
407
- * The row-actions menu.
408
- *
409
- * Four apps vendored Radix's dropdown-menu and every one of them wrote the same
410
- * item markup by hand at each call site. `items` is the shape a table's
411
- * per-row menu actually wants: a flat list with icons, separators and
412
- * destructive styling. Drop to the primitives above for submenus, checkbox
413
- * items or a menu whose contents are a live query.
414
- */
415
- declare function Menu({ trigger, items, align, side, className }: MenuProps): react.JSX.Element;
416
-
417
517
  declare const SelectRoot: react.FC<RadixSelect.SelectProps>;
418
518
  declare const SelectValue: react.ForwardRefExoticComponent<RadixSelect.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
419
519
  declare const SelectGroup: react.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
@@ -1295,4 +1395,4 @@ declare function formatNumber(value: number | null | undefined, decimals?: numbe
1295
1395
  */
1296
1396
  declare function formatPercent(value: number | null | undefined, decimals?: number): string;
1297
1397
 
1298
- export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionRoot, type AccordionSection, AccordionTrigger, type AccordionTriggerProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeTone, 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, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogRoot, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, Label, type LabelProps, 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, 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, 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, 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, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, useFieldControl, useSortState, useToast };
1398
+ export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionRoot, type AccordionSection, AccordionTrigger, type AccordionTriggerProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeTone, 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, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogRoot, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, FilterBar, type FilterBarProps, type FilterSelect, type FilterToggle, type FilterValue, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, Label, type LabelProps, 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, 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, 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, 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, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, useFieldControl, useSortState, useToast };