@bmsuisse/ui 0.11.0 → 0.12.0

package/dist/index.d.ts

@@ -252,7 +252,7 @@ declare const desktopSizeClasses: {
     readonly sm: "max-w-md";
     readonly md: "max-w-xl";
     readonly lg: "max-w-2xl";
-    readonly xl: "max-w-4xl";
+    readonly xl: "max-w-7xl";
 };
 type ResponsivePanelSize = keyof typeof desktopSizeClasses;
 interface ResponsivePanelProps {
@@ -341,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;
@@ -350,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`. */
@@ -393,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. */
@@ -436,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`,
@@ -475,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
@@ -487,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 {
@@ -598,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;
@@ -711,4 +845,4 @@ declare function cn(...inputs: ClassValue[]): string;
  */
 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 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, ResponsivePanel, type ResponsivePanelProps, type ResponsivePanelSize, 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, useMediaQuery, useSidebarCollapsed };
+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 };