@bmsuisse/ui 0.8.0 → 0.12.0

package/dist/index.d.ts

@@ -134,6 +134,13 @@ declare const sheetVariants: (props?: ({
     side?: "top" | "right" | "bottom" | "left" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+    /**
+     * Bottom sheets only: adds a drag handle so the user can pull the sheet
+     * taller (up to 95% of the viewport) or shorter (down to 30%) with the
+     * mouse/touch instead of being stuck with the height set by className.
+     * Ignored for other sides.
+     */
+    resizable?: boolean;
 }
 declare const SheetContent: react.ForwardRefExoticComponent<SheetContentProps & react.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => ReactElement;
@@ -241,6 +248,71 @@ interface FormModalProps {
  */
 declare const FormModal: ({ open, onOpenChange, title, description, children, onSubmit, submitLabel, cancelLabel, submitDisabled, className, submitTestId, cancelTestId, }: FormModalProps) => ReactElement;
 
+declare const desktopSizeClasses: {
+    readonly sm: "max-w-md";
+    readonly md: "max-w-xl";
+    readonly lg: "max-w-2xl";
+    readonly xl: "max-w-7xl";
+};
+type ResponsivePanelSize = keyof typeof desktopSizeClasses;
+interface ResponsivePanelProps {
+    /** Whether the panel is open. Fully controlled — no internal open state. */
+    open: boolean;
+    /** Called when Radix wants to change the open state (backdrop click, Esc, close button). */
+    onOpenChange: (open: boolean) => void;
+    /** Panel title. */
+    title: string;
+    /** Optional supporting copy shown under the title. */
+    description?: string;
+    /** Body content of the panel. */
+    children: ReactNode;
+    /** Optional footer content (typically action buttons). */
+    footer?: ReactNode;
+    /** Extra classes applied to the panel content, e.g. to override the default width/height. */
+    className?: string;
+    /**
+     * `matchMedia` query that decides desktop vs. mobile layout. Defaults to
+     * Tailwind's `lg` breakpoint, matching the rest of `@bmsuisse/ui`'s responsive patterns.
+     */
+    breakpoint?: string;
+    /**
+     * Panel size, `sm`/`md`/`lg` (default)/`xl`. On desktop this is the dialog
+     * width (`max-w-md`/`max-w-xl`/`max-w-2xl`/`max-w-4xl`); on mobile — where
+     * width is always full-bleed — it's the drawer's max height instead
+     * (`50vh`/`70vh`/`90vh`/`96vh`).
+     */
+    size?: ResponsivePanelSize;
+    /**
+     * Adds drag handles so the user can resize the panel with the mouse:
+     * on desktop, a grip on all four corners (each anchors the opposite
+     * corner, so `size` just becomes the starting size); on the mobile
+     * drawer, a handle at the top (drags height between 30vh and 95vh).
+     * Default `false`.
+     */
+    resizable?: boolean;
+    /**
+     * Desktop only: lets the user drag the panel by its header to reposition
+     * it anywhere in the viewport. Default `false`. No effect on the mobile
+     * drawer, which is always docked to the bottom.
+     */
+    draggable?: boolean;
+    /**
+     * Whether clicking/tapping outside the panel closes it. Default `true`.
+     * When `false`, only the header's close button (and Esc) can close it —
+     * use this for panels guarding unsaved work the user shouldn't lose to a
+     * stray click.
+     */
+    closeOnOutsideClick?: boolean;
+}
+/**
+ * Like `Modal`, but uses the extra desktop space instead of a fixed small
+ * dialog, and becomes a native bottom-sheet drawer below `breakpoint` — a
+ * centered floating box with its own scroll region reads as a leftover
+ * desktop shape on a phone. Use this over `Modal` for content that benefits
+ * from more room (multi-section forms, longer lists) on both form factors.
+ */
+declare const ResponsivePanel: ({ open, onOpenChange, title, description, children, footer, className, breakpoint, size, resizable, draggable, closeOnOutsideClick, }: ResponsivePanelProps) => ReactElement;
+
 interface FormFieldProps {
     /** Visible label text for the field. */
     label: string;
@@ -269,6 +341,15 @@ interface FormFieldProps {
  */
 declare function FormField({ label, htmlFor, error, description, required, children, className, }: FormFieldProps): ReactElement;
 
+/** A column shown in a grid-style option popup (see `renderGridOptions`). `key`
+ * selects what each row shows in that column: the literal string `"label"` reads
+ * the option's own `label`, anything else reads `option.data?.[key]`. */
+interface GridColumn {
+    key: string;
+    header: string;
+    className?: string;
+}
+
 interface ComboboxOption {
     value: string;
     label: string;
@@ -278,8 +359,13 @@ interface ComboboxOption {
      * on the base props). Options sharing a `group` must be contiguous in `options` —
      * the component renders a header the first time a group key is seen and does not
      * re-sort the list, so interleaved groups would render more than one header for the
-     * same key. Ungrouped options (no `group`) render individually, with no header. */
+     * same key. Ungrouped options (no `group`) render individually, with no header.
+     * Ignored when `columns` is set (see that prop's own doc). */
     group?: string;
+    /** Extra fields for this option, surfaced as additional columns when the
+     * base props' `columns` is set — e.g. `{ email: "a@b.com", role: "Admin" }`.
+     * Ignored otherwise. */
+    data?: Record<string, ReactNode>;
 }
 interface ComboboxBaseProps {
     /** The full option list. Filtering happens client-side against `label`. */
@@ -321,6 +407,15 @@ interface ComboboxBaseProps {
      * selected option was found by an earlier query and isn't part of the current
      * result page. Ignored once a matching option is found in `options`. */
     selectedLabel?: string;
+    /** Renders the popup's option list as a multi-column grid instead of a flat
+     * label list — one column per entry here, each reading either the option's
+     * own `label` (`key: "label"`) or `option.data[key]`. Useful when users need
+     * more context than a label to tell options apart (e.g. an id/email/role
+     * table instead of a bare name). Mutually exclusive with `group` — a grid
+     * row has no natural place for a group header spanning several unrelated
+     * columns, so `group` is ignored on every option while this is set. The
+     * popup grows to fit the columns (at least as wide as the trigger). */
+    columns?: GridColumn[];
 }
 interface ComboboxSingleProps extends ComboboxBaseProps {
     /** Omitted or `false` for the (default) single-select shape below. */
@@ -364,8 +459,13 @@ interface TagComboboxOption {
      * plus a tri-state "select all" checkbox (unchecked/checked/indeterminate, reflecting
      * how many of the group's members are selected — toggling it selects or clears the
      * whole group). Options sharing a `group` must be contiguous in `options` — see
-     * `Combobox`'s own `group` doc for the same constraint and the reasoning behind it. */
+     * `Combobox`'s own `group` doc for the same constraint and the reasoning behind it.
+     * Ignored when `columns` is set (see that prop's own doc). */
     group?: string;
+    /** Extra fields for this option, surfaced as additional columns when
+     * `columns` is set — e.g. `{ email: "a@b.com", role: "Admin" }`. Ignored
+     * otherwise. */
+    data?: Record<string, ReactNode>;
 }
 interface TagComboboxProps {
     /** The full option list. Filtering happens client-side against `label`,
@@ -403,6 +503,10 @@ interface TagComboboxProps {
     /** Display label for a group key (`TagComboboxOption.group`). Falls back to the raw
      * key when an entry is missing. Only relevant when at least one option sets `group`. */
     groupLabels?: Record<string, string>;
+    /** Renders the popup's option list as a multi-column grid instead of a flat
+     * label list — see `Combobox`'s own `columns` doc for the full contract
+     * (including its interaction with `group`, and the widened popup). */
+    columns?: GridColumn[];
 }
 /**
  * A tags-and-search multi-select: selected options render as removable chips
@@ -415,7 +519,7 @@ interface TagComboboxProps {
  * built on the same `Popover`/keyboard-nav shape rather than forking it,
  * so both patterns share one mental model.
  */
-declare function TagCombobox({ options, value, onChange, placeholder, emptyMessage, disabled, loading, loadingMessage, className, id, onSearchChange, container, groupLabels, ...rest }: TagComboboxProps): ReactElement;
+declare function TagCombobox({ options, value, onChange, placeholder, emptyMessage, disabled, loading, loadingMessage, className, id, onSearchChange, container, groupLabels, columns, ...rest }: TagComboboxProps): ReactElement;
 
 type AlertBoxVariant = "error" | "warning" | "info" | "success";
 interface AlertBoxProps {
@@ -526,6 +630,108 @@ interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "ty
  */
 declare function SearchBar({ value, onChange, isLoading, onClear, clearLabel, inputRef, className, ...props }: SearchBarProps): ReactElement;
 
+interface KpiCardProps {
+    label: string;
+    value?: string | number | null;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    badge?: {
+        text: string;
+        positive?: boolean;
+    };
+    badgeLabel?: string;
+    /** @default "default" */
+    variant?: "hero" | "mini" | "default" | "donut";
+    loading?: boolean;
+    sub?: string;
+    /** Colors `sub` on the mini variant — "warn"/"danger" flag something worth acting on (overdue, at-risk), "default" stays muted. */
+    subTone?: "default" | "warn" | "danger";
+    /** Makes the icon (mini variant) or the whole card clickable. */
+    href?: string;
+    sparkline?: number[];
+    /** @default "var(--color-primary, #3b82f6)" */
+    sparklineColor?: string;
+    /** Hero variant only: 0-100 achievement-vs-target bar rendered under `sub`. */
+    progress?: number;
+    progressLabel?: string;
+    /** Donut variant only: the proportions to render as a ring chart, with a legend listing each segment's share. */
+    segments?: DonutSegment[];
+    /** Donut variant only: big label centered in the ring. Defaults to the sum of `segments`' values. */
+    centerValue?: string;
+    /** For E2E tests to target a specific tile unambiguously when `label` also appears elsewhere on the page (e.g. a chart legend). */
+    testId?: string;
+}
+interface DonutSegment {
+    label: string;
+    value: number;
+    /** @default a color from the built-in palette, cycling by index */
+    color?: string;
+}
+declare function DonutChart({ data, size, thickness, centerValue, centerLabel, }: {
+    data: DonutSegment[];
+    size?: number;
+    thickness?: number;
+    centerValue?: string;
+    centerLabel?: string;
+}): ReactElement | null;
+declare function Sparkline({ data, color }: {
+    data: number[];
+    color: string;
+}): ReactElement | null;
+/**
+ * Dashboard KPI tile in three variants — `hero` (large, primary-colored,
+ * for the single headline metric), `default` (bordered card for a KPI
+ * grid), and `mini` (compact, for dense grids of secondary metrics).
+ * Optionally shows a badge, a trend sparkline, and (hero only) a
+ * progress-vs-target bar.
+ */
+declare const KpiCard: react.NamedExoticComponent<KpiCardProps>;
+
+interface SearchPanelMode {
+    key: string;
+    label: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+}
+interface SearchPanelProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange" | "size"> {
+    value: string;
+    onChange: (value: string) => void;
+    /** Swaps the leading search icon for a spinner while a search request is in flight. */
+    isLoading?: boolean;
+    /** Extra content after the input, e.g. a mic button. */
+    trailingSlot?: ReactNode;
+    /** Keyboard-shortcut hint rendered after `trailingSlot`, e.g. `"⌘K"`. Omit to hide it. */
+    shortcutHint?: string;
+    /** Mode-switcher pills rendered below the input row (e.g. "Search" / "Ask AI"). Omit to hide the row entirely. */
+    modes?: SearchPanelMode[];
+    activeMode?: string;
+    onModeChange?: (key: string) => void;
+    /** Squares the panel's bottom corners so a results dropdown anchored directly below it reads as one continuous surface. */
+    expanded?: boolean;
+    inputRef?: Ref<HTMLInputElement>;
+    className?: string;
+}
+/**
+ * Bordered search card: an input row (leading icon/spinner, input, optional
+ * trailing slot and keyboard-shortcut hint) plus an optional row of
+ * mode-switcher pills below it. Headless on results — the caller renders
+ * whatever dropdown or inline results belong under it.
+ */
+declare function SearchPanel({ value, onChange, isLoading, trailingSlot, shortcutHint, modes, activeMode, onModeChange, expanded, inputRef, className, ...props }: SearchPanelProps): ReactElement;
+
+interface SearchTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Accessible label, also used as the tooltip text by callers that wrap this in one. @default "Search" */
+    label?: string;
+}
+/**
+ * Icon-only header button that opens a search overlay (a `SearchPanel`, a
+ * dropdown, a `Sheet` — this owns no state or panel of its own). For a
+ * full-width always-visible input instead, use `SearchBar`.
+ */
+declare function SearchTrigger({ label, ...props }: SearchTriggerProps): ReactElement;
+
 /** Shape a `lucide-react` icon component satisfies — `NavItem` sizes and colors it itself. */
 interface NavIconProps {
     className?: string;
@@ -633,4 +839,10 @@ declare function useSidebarCollapsed(): boolean;
 /** Merges conditional class names, then dedupes conflicting Tailwind utility classes. */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AlertBox, type AlertBoxProps, type AlertBoxVariant, Badge, type BadgeProps, Button, ButtonGroup, type ButtonGroupOption, type ButtonGroupProps, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, type ComboboxMultiProps, type ComboboxOption, type ComboboxProps, type ComboboxSingleProps, ConfirmDialog, type ConfirmDialogProps, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FormField, type FormFieldProps, FormModal, type FormModalProps, Input, type InputProps, Label, LoadingOverlay, type LoadingOverlayProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, NavGroup, type NavGroupProps, type NavIconProps, NavItem, type NavItemProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, SearchBar, type SearchBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarNav, type SidebarNavProps, type SidebarProps, Skeleton, StatusBadge, type StatusBadgeProps, type StatusTone, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagCombobox, type TagComboboxOption, type TagComboboxProps, Textarea, type TextareaProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, loadingSpinnerIconVariants, sheetVariants, useSidebarCollapsed };
+/**
+ * Tracks whether a `matchMedia` query currently matches, updating on change.
+ * Used to switch between desktop/mobile layouts (see `ResponsivePanel`).
+ */
+declare function useMediaQuery(query: string): boolean;
+
+export { AlertBox, type AlertBoxProps, type AlertBoxVariant, Badge, type BadgeProps, Button, ButtonGroup, type ButtonGroupOption, type ButtonGroupProps, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, type GridColumn as ComboboxColumn, type ComboboxMultiProps, type ComboboxOption, type ComboboxProps, type ComboboxSingleProps, ConfirmDialog, type ConfirmDialogProps, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, type DonutSegment, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FormField, type FormFieldProps, FormModal, type FormModalProps, Input, type InputProps, KpiCard, type KpiCardProps, Label, LoadingOverlay, type LoadingOverlayProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, NavGroup, type NavGroupProps, type NavIconProps, NavItem, type NavItemProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResponsivePanel, type ResponsivePanelProps, type ResponsivePanelSize, ScrollArea, ScrollBar, SearchBar, type SearchBarProps, SearchPanel, type SearchPanelMode, type SearchPanelProps, SearchTrigger, type SearchTriggerProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarNav, type SidebarNavProps, type SidebarProps, Skeleton, Sparkline, StatusBadge, type StatusBadgeProps, type StatusTone, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagCombobox, type TagComboboxOption, type TagComboboxProps, Textarea, type TextareaProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, loadingSpinnerIconVariants, sheetVariants, useMediaQuery, useSidebarCollapsed };