@campfire-interactive/ui 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import * as react from 'react';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as RadixSwitch from '@radix-ui/react-switch';
 import * as RadixSlider from '@radix-ui/react-slider';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as RadixPopover from '@radix-ui/react-popover';
-import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import * as RadixSelect from '@radix-ui/react-select';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import * as RadixTabs from '@radix-ui/react-tabs';
@@ -74,6 +74,146 @@ interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 /** A row of buttons with the suite's gap. Saves the `flex items-center gap-2` every call site repeats. */
 declare function ButtonGroup({ align, className, ...rest }: ButtonGroupProps): react.JSX.Element;
 
+declare const MenuRoot: react.FC<RadixMenu.DropdownMenuProps>;
+declare const MenuTrigger: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const MenuGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuSub: react.FC<RadixMenu.DropdownMenuSubProps>;
+declare const MenuRadioGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuContent: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface MenuItemProps extends React.ComponentPropsWithoutRef<typeof RadixMenu.Item> {
+    icon?: React.ReactNode;
+    /** Right-aligned shortcut hint, e.g. "⌘K". Display only — bind the key yourself. */
+    shortcut?: string;
+    /** `danger` colors the item red. Destructive items should also confirm. */
+    variant?: 'default' | 'danger';
+}
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const MenuCheckboxItem: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuRadioItem: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare function MenuLabel({ className, ...rest }: React.ComponentPropsWithoutRef<typeof RadixMenu.Label>): react.JSX.Element;
+declare function MenuSeparator({ className, ...rest }: React.ComponentPropsWithoutRef<typeof RadixMenu.Separator>): react.JSX.Element;
+declare const MenuSubTrigger: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuSubContent: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface MenuAction {
+    /** Stable key. Also used as the value when the item is part of a radio group. */
+    id: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    shortcut?: string;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+    onSelect?: () => void;
+    /** Draws a separator above this item. */
+    separatorBefore?: boolean;
+}
+interface MenuProps {
+    /** Rendered with `asChild` — pass a Button or IconButton and it keeps its own styling. */
+    trigger: React.ReactNode;
+    items: MenuAction[];
+    align?: 'start' | 'center' | 'end';
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    className?: string;
+}
+/**
+ * The row-actions menu.
+ *
+ * Four apps vendored Radix's dropdown-menu and every one of them wrote the same
+ * item markup by hand at each call site. `items` is the shape a table's
+ * per-row menu actually wants: a flat list with icons, separators and
+ * destructive styling. Drop to the primitives above for submenus, checkbox
+ * items or a menu whose contents are a live query.
+ */
+declare function Menu({ trigger, items, align, side, className }: MenuProps): react.JSX.Element;
+
+interface SplitButtonProps extends Omit<ButtonProps, 'children' | 'onClick' | 'variant' | 'size'> {
+    /** The label on the pressable half — the row's next step. */
+    children: React.ReactNode;
+    /** What the pressable half does. Omit for a menu-only control. */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Everything else, behind the chevron. */
+    items: MenuAction[];
+    variant?: ButtonVariant;
+    size?: Exclude<ButtonSize, 'icon'>;
+    /** Names the chevron for a screen reader. Required — "More" twelve times over is not a name. */
+    menuLabel: string;
+    align?: 'start' | 'center' | 'end';
+}
+/**
+ * A button joined to a menu of its alternatives.
+ *
+ * WHY THIS EXISTS. A table's action column has one obvious next step per row
+ * and a handful of rarer ones. Rendering them as separate buttons makes the
+ * column the tallest thing in the table; collapsing all of them into a `⋮`
+ * costs two clicks to do the ordinary thing. The split does neither: the step
+ * is a button, the rest is a chevron beside it.
+ *
+ * The reason it is a COMPONENT rather than two elements at the call site is
+ * that the pairing has to be exact — a shared border, one radius across the
+ * pair, and a single focus treatment — and pm had already grown a version
+ * where some rows showed the chevron and some did not, which read as broken
+ * rather than as "this row has fewer options".
+ *
+ * WITH NO ITEMS IT IS A PLAIN BUTTON, not a button with a dead chevron. That
+ * is the case that made the column look inconsistent in the first place, so it
+ * is handled here rather than left to every caller to remember.
+ *
+ * WITH NO `onClick` it is a menu with a label — for a row whose actions are
+ * all equal and none is the obvious one.
+ */
+declare const SplitButton: react.ForwardRefExoticComponent<SplitButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface FilterSelect {
+    id: string;
+    label: string;
+    options: {
+        value: string;
+        label: React.ReactNode;
+    }[];
+}
+interface FilterToggle {
+    id: string;
+    label: string;
+    /** Explains what the toggle narrows to, on the row inside the menu. */
+    hint?: string;
+}
+type FilterValue = Record<string, string | boolean | undefined>;
+interface FilterBarProps {
+    selects?: FilterSelect[];
+    toggles?: FilterToggle[];
+    value: FilterValue;
+    onChange: (next: FilterValue) => void;
+    /** The button's label. Defaults to "Filters". */
+    label?: string;
+    clearLabel?: string;
+    /** Announced on each chip's remove button — "Remove {{name}} filter". */
+    removeLabel?: (name: string) => string;
+    className?: string;
+}
+/**
+ * Filters behind one control, with what is APPLIED shown as chips beside it.
+ *
+ * WHY THIS SHAPE. A filter row grows one control per filter, and every one of
+ * them spends width saying "All statuses / All health / All OEMs" — a row's
+ * worth of chrome to report that NOTHING IS FILTERED, which is the least
+ * useful state to spend width on. pm's portfolio had five such dropdowns plus
+ * a search box, a Reset view, a Save as my default and a Columns control.
+ *
+ * Chips invert that. The bar is a button and a count when nothing is applied,
+ * and grows only to show what IS applied — the state worth the width, one
+ * click to remove, and no per-control judgement about which filters are
+ * "used constantly" and deserve to stay visible. That judgement is the thing
+ * that does not survive the next filter being added.
+ *
+ * WHAT STAYS OUT: a search box. It is a text input rather than a value, it is
+ * how most people start, and hiding it behind a menu is the one change here
+ * that would cost somebody a step on every visit.
+ *
+ * Single-select only, which is what the call sites have. A multi-select filter
+ * wants a different chip — "OEM: 3 selected" — and inventing it before there
+ * is a screen for it is how a shared component grows an API nobody uses.
+ */
+declare function FilterBar({ selects, toggles, value, onChange, label, clearLabel, removeLabel, className, }: FilterBarProps): react.JSX.Element;
+
 type InputSize = 'sm' | 'md' | 'lg';
 /**
  * `size` and `prefix` are dropped from the native attribute set on purpose.
@@ -363,57 +503,6 @@ interface PopoverProps extends Omit<PopoverContentProps, 'children'> {
  */
 declare function Popover({ trigger, open, onOpenChange, defaultOpen, modal, children, ...content }: PopoverProps): react.JSX.Element;
 
-declare const MenuRoot: react.FC<RadixMenu.DropdownMenuProps>;
-declare const MenuTrigger: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
-declare const MenuGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
-declare const MenuSub: react.FC<RadixMenu.DropdownMenuSubProps>;
-declare const MenuRadioGroup: react.ForwardRefExoticComponent<RadixMenu.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
-declare const MenuContent: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-interface MenuItemProps extends React.ComponentPropsWithoutRef<typeof RadixMenu.Item> {
-    icon?: React.ReactNode;
-    /** Right-aligned shortcut hint, e.g. "⌘K". Display only — bind the key yourself. */
-    shortcut?: string;
-    /** `danger` colors the item red. Destructive items should also confirm. */
-    variant?: 'default' | 'danger';
-}
-declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLDivElement>>;
-declare const MenuCheckboxItem: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-declare const MenuRadioItem: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-declare function MenuLabel({ className, ...rest }: React.ComponentPropsWithoutRef<typeof RadixMenu.Label>): react.JSX.Element;
-declare function MenuSeparator({ className, ...rest }: React.ComponentPropsWithoutRef<typeof RadixMenu.Separator>): react.JSX.Element;
-declare const MenuSubTrigger: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-declare const MenuSubContent: react.ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-interface MenuAction {
-    /** Stable key. Also used as the value when the item is part of a radio group. */
-    id: string;
-    label: React.ReactNode;
-    icon?: React.ReactNode;
-    shortcut?: string;
-    disabled?: boolean;
-    variant?: 'default' | 'danger';
-    onSelect?: () => void;
-    /** Draws a separator above this item. */
-    separatorBefore?: boolean;
-}
-interface MenuProps {
-    /** Rendered with `asChild` — pass a Button or IconButton and it keeps its own styling. */
-    trigger: React.ReactNode;
-    items: MenuAction[];
-    align?: 'start' | 'center' | 'end';
-    side?: 'top' | 'right' | 'bottom' | 'left';
-    className?: string;
-}
-/**
- * The row-actions menu.
- *
- * Four apps vendored Radix's dropdown-menu and every one of them wrote the same
- * item markup by hand at each call site. `items` is the shape a table's
- * per-row menu actually wants: a flat list with icons, separators and
- * destructive styling. Drop to the primitives above for submenus, checkbox
- * items or a menu whose contents are a live query.
- */
-declare function Menu({ trigger, items, align, side, className }: MenuProps): react.JSX.Element;
-
 declare const SelectRoot: react.FC<RadixSelect.SelectProps>;
 declare const SelectValue: react.ForwardRefExoticComponent<RadixSelect.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
 declare const SelectGroup: react.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
@@ -801,6 +890,15 @@ interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     density?: 'comfortable' | 'compact';
     /** Keeps the header visible while the body scrolls. Requires a scrolling ancestor with a height. */
     stickyHeader?: boolean;
+    /**
+     * Pins the first column while the rest scrolls sideways.
+     *
+     * For any table wide enough to scroll in its `TableScroller` — which is most
+     * wide ones — because scrolling right otherwise takes the column that says
+     * which row you are looking at. Put the row's identity in the first column
+     * before turning this on; it pins position, not meaning.
+     */
+    stickyFirstColumn?: boolean;
 }
 /**
  * A data table.
@@ -1286,4 +1384,4 @@ declare function formatNumber(value: number | null | undefined, decimals?: numbe
  */
 declare function formatPercent(value: number | null | undefined, decimals?: number): string;
 
-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 };
+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 };