@bmsuisse/ui 0.6.3 → 0.8.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ReactElement, ComponentPropsWithoutRef, TdHTMLAttributes, ThHTMLAttributes, ReactNode, ComponentProps, ComponentType, Ref } from 'react';
+import { ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, ReactElement, ComponentPropsWithoutRef, TdHTMLAttributes, ThHTMLAttributes, ReactNode, ComponentProps, ComponentType, Ref, ElementType } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -356,6 +356,67 @@ type ComboboxProps = ComboboxSingleProps | ComboboxMultiProps;
  */
 declare function Combobox(props: ComboboxProps): ReactElement;
 
+interface TagComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Groups this option under a header with the given key, rendered as a bold label
+     * 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. */
+    group?: string;
+}
+interface TagComboboxProps {
+    /** The full option list. Filtering happens client-side against `label`,
+     * unless `onSearchChange` is given (see below). */
+    options: TagComboboxOption[];
+    /** Selected options' `value`s. */
+    value: string[];
+    /** Called with the full updated selection after a toggle or a chip removal. */
+    onChange: (value: string[]) => void;
+    /** Shown in the field when nothing is selected and nothing is typed. Defaults to `"Select…"`. */
+    placeholder?: string;
+    /** Shown when the search term matches nothing. Defaults to `"No matches."`. */
+    emptyMessage?: string;
+    disabled?: boolean;
+    /** Shows `loadingMessage` in the option list instead of `emptyMessage`, for a
+     * combobox whose `options` are still being fetched (e.g. a server search whose
+     * request hasn't resolved yet). Defaults to `false`. */
+    loading?: boolean;
+    /** Message shown in the option list while `loading` is true. Defaults to `"Loading…"`. */
+    loadingMessage?: string;
+    className?: string;
+    id?: string;
+    /** Forwarded to the field, for test targeting (e.g. Playwright/Testing Library). */
+    "data-testid"?: string;
+    /** Switches the search input to server-driven mode: called with the raw search
+     * text on every keystroke, and `options` is rendered as-is instead of being
+     * filtered locally against `label`. Omit for the default client-side filtering
+     * behavior — see `Combobox`'s own `onSearchChange` for the same contract. */
+    onSearchChange?: (search: string) => void;
+    /** Portal target for the popover, forwarded to the underlying `PopoverContent`.
+     * Needed when the combobox is opened from inside a modal Dialog/Sheet — pass the
+     * Dialog/Sheet content element so the popover portals inside it instead of
+     * `document.body`, which would otherwise fight with the Dialog's focus trap. */
+    container?: ComponentProps<typeof PopoverContent>["container"];
+    /** 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>;
+}
+/**
+ * A tags-and-search multi-select: selected options render as removable chips
+ * inline inside one bordered field, with a search input immediately after
+ * the last chip. Typing opens a popover listing matches below the field;
+ * picking one adds a chip right where the caret was and clears the search
+ * term so the user can keep typing. Complements `Combobox`'s `multiple`
+ * mode (a trigger button + a summary count) for the case where every
+ * individual selection needs to stay visible and removable at a glance —
+ * 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;
+
 type AlertBoxVariant = "error" | "warning" | "info" | "success";
 interface AlertBoxProps {
     /** Determines the color scheme and the default icon. */
@@ -465,7 +526,111 @@ interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "ty
  */
 declare function SearchBar({ value, onChange, isLoading, onClear, clearLabel, inputRef, className, ...props }: SearchBarProps): ReactElement;
 
+/** Shape a `lucide-react` icon component satisfies — `NavItem` sizes and colors it itself. */
+interface NavIconProps {
+    className?: string;
+    strokeWidth?: string | number;
+    "aria-hidden"?: boolean | "true" | "false";
+}
+type NavItemProps<T extends ElementType = "a"> = {
+    /** The element (or router `Link`) this renders as, e.g. `as={Link} to="/overview"`. @default "a" */
+    as?: T;
+    icon?: ElementType<NavIconProps>;
+    label: ReactNode;
+    /** Highlights this row as the current page. The caller computes this from its own router — `NavItem` has no router opinion. */
+    active?: boolean;
+    /** Rendered after the label, and again in the collapsed-rail tooltip — e.g. an experimental-status `Badge`. */
+    badge?: ReactNode;
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<T>, "as" | "className">;
+/**
+ * One row inside a `Sidebar`/`NavGroup`. Polymorphic via `as` so it renders a
+ * plain `<a>` by default or a router's own `Link` (extra props like `to`/
+ * `href` pass straight through). When the nearest `Sidebar` is rail-
+ * collapsed, the row shrinks to icon-only and shows `label`/`badge` in a
+ * hover tooltip instead.
+ */
+declare function NavItem<T extends ElementType = "a">({ as, icon: Icon, label, active, badge, className, ...rest }: NavItemProps<T>): ReactElement;
+
+interface NavGroupProps {
+    /** Section header. Omit for a flat group with no header/collapse affordance. */
+    label?: ReactNode;
+    /** Uncontrolled starting collapsed state. @default false */
+    defaultCollapsed?: boolean;
+    /** Controlled collapsed state. */
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * A labeled, independently collapsible section of `NavItem`s inside a
+ * `Sidebar`. This group's own collapsed state (items hidden/shown) is
+ * separate from the sidebar's rail-collapse: when the sidebar itself is
+ * rail-collapsed, this group's header shrinks to a thin divider (its items
+ * stay visible as icons) rather than disappearing, since there's no room for
+ * a clickable label to toggle.
+ */
+declare function NavGroup({ label, defaultCollapsed, collapsed, onCollapsedChange, children, className, }: NavGroupProps): ReactElement;
+
+interface SidebarProps {
+    /** Rail-collapse the whole sidebar to an icon-only strip. Controlled. */
+    collapsed?: boolean;
+    /** Renders a built-in collapse/expand toggle button and fires when it's clicked. Omit to hide the toggle and drive `collapsed` some other way. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Lets the user drag the trailing edge to resize. @default false */
+    resizable?: boolean;
+    /** Controlled width in px (only meaningful while expanded). */
+    width?: number;
+    onWidthChange?: (width: number) => void;
+    /** Uncontrolled starting width in px, and the double-click-to-reset target. @default 240 */
+    defaultWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    /** Width of the icon-only rail. @default 56 */
+    railWidth?: number;
+    /** Logo/wordmark slot. Pass a function to swap in a compact mark once `collapsed` — the shared component only owns the collapse *toggle button*, not your branding. */
+    header?: ReactNode | ((collapsed: boolean) => ReactNode);
+    /** Pinned below the scrollable nav area (e.g. a user-profile row), outside the scroll-fade. */
+    footer?: ReactNode | ((collapsed: boolean) => ReactNode);
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * App shell's left navigation panel: fixed-width or drag-resizable, with an
+ * optional icon-only rail-collapse mode (tooltips on hover, via `NavItem`).
+ * Renders `children` (typically one or more `NavGroup`s of `NavItem`s)
+ * inside a scrollable area with a bottom scroll-fade once content overflows.
+ *
+ * For a mobile drawer, don't reuse `Sidebar` itself (its resize handle and
+ * rail-collapse don't apply there) — render the same `NavGroup`/`NavItem`
+ * children inside a `Sheet`, wrapped in the separately-exported `SidebarNav`
+ * for the scroll-fade behavior.
+ */
+declare function Sidebar({ collapsed, onCollapsedChange, resizable, width, onWidthChange, defaultWidth, minWidth, maxWidth, railWidth, header, footer, children, className, }: SidebarProps): ReactElement;
+type SidebarNavProps = {
+    children: ReactNode;
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<"div">, "className" | "children" | "ref">;
+/**
+ * The scrollable nav-item area, with a bottom scroll-fade once content
+ * overflows. Used internally by `Sidebar`; exported separately so a mobile
+ * drawer can wrap the same `NavGroup`/`NavItem` children in it without the
+ * rest of the `Sidebar` shell. Extra props (`onClick`, `data-testid`, …)
+ * forward to the scrollable element itself — e.g. `onClick` to close a
+ * mobile drawer when any nav link inside is tapped.
+ */
+declare function SidebarNav({ children, className, ...rest }: SidebarNavProps): ReactElement;
+
+/**
+ * Whether the nearest ancestor `<Sidebar>` is rail-collapsed. Defaults to
+ * `false` when there is no ancestor `<Sidebar>` — this is what lets
+ * `NavGroup`/`NavItem` be reused standalone inside a mobile drawer (`Sheet`),
+ * which is never rail-collapsed.
+ */
+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, 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, Skeleton, StatusBadge, type StatusBadgeProps, type StatusTone, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, loadingSpinnerIconVariants, sheetVariants };
+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 };