@bmsuisse/ui 0.7.0 → 0.11.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-4xl";
+};
+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;
@@ -356,6 +428,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. */
@@ -572,4 +705,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, 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 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 };