@bmsuisse/ui 0.8.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;
@@ -633,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, 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 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 };