@bug-on/m3-expressive 1.0.0

package/dist/side-sheet-modal-CglP6KYA.d.ts

@@ -0,0 +1,553 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as React$1 from 'react';
+import { MotionStyle, useMotionValue, useTransform } from 'motion/react';
+import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.js';
+
+/**
+ * Thuộc tính của cội gốc Root `Dialog`. Chức năng làm gương phản hồi của Radix `Dialog.Root` qua dạng controlled state đóng hay mở.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = React.useState(false);
+ *
+ * <Dialog open={open} onOpenChange={setOpen}>
+ *   <DialogTrigger asChild>
+ *      <Button>Bấm Mở Dialog</Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *        <DialogTitle>Bạn có muốn phiêu lưu không?</DialogTitle>
+ *     </DialogHeader>
+ *     <DialogBody>Chuẩn bị lên đồ rời khỏi hang nào.</DialogBody>
+ *     <DialogFooter>
+ *        <Button onClick={() => setOpen(false)} variant="text">Đóng</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
+interface DialogProps {
+    /** Whether the dialog is open (controlled). Omit for uncontrolled. */
+    open?: boolean;
+    /** Called when the open state should change. */
+    onOpenChange?: (open: boolean) => void;
+    /** Dialog trigger + content. */
+    children: React$1.ReactNode;
+}
+/**
+ * Các props được tiêm vào component bao ngoài Container `DialogContent` thuộc dạng Normal Standard.
+ *
+ * @see {@link DialogContent}
+ */
+interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
+    /** Vô hình đi đi nút Close dấu (X) góc phải trên. @default false */
+    hideCloseButton?: boolean;
+    className?: string;
+}
+/**
+ * Thuộc tính Props của biến thể `DialogFullScreenContent` chuyên dụng dành riêng cho Mode Full-Screen tràn màn hình.
+ *
+ * @remarks
+ * Những hộp thoại Full-screen có biệt tài tự nới rộng và xâm chiếm cả bề ngang dọc nguyên thiết bị. Nó còn thiết lập một đường Top App bar (thanh ngang đỉnh)
+ * kẹp chung cả 1 nhãn title mô tả đỉnh, một nút icon X dẹp ở rìa, thêm luôn hẳn cái nút Confirm cực xịn xò.
+ *
+ * @see {@link DialogFullScreenContent}
+ * @see https://m3.material.io/components/dialogs/guidelines#full-screen
+ */
+interface DialogFullScreenContentProps extends React$1.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
+    /** Nhãn Title nằm vùng khu vực thanh ngang Top Bar. */
+    title?: string;
+    /** Chữ viết đính kèm bên trong cục Nút nhấn thao tác ngay trên góc Top App bar đó (VD: "Lưu lại", "Save"). */
+    actionLabel?: string;
+    /** Hàm handler phát động cờ để kích chạy tính năng lưu, xác nhận kia. */
+    onAction?: () => void;
+    /** Rạch một làn kẻ chia cách thân body nội dung cuộn bên dưới và dòng App bar cố thủ bên trên. @default false */
+    showDivider?: boolean;
+    className?: string;
+}
+/**
+ * Gốc rễ Root của Component Dialog — trạc lấp lên cái module `Dialog.Root` của nhà Radix.
+ *
+ * @remarks Cơ năng hoạt động ở chế độ Controlled (kiểm soát vòng đời ở Client) xài mảng `open`/`onOpenChange`.
+ *  Tuy thế bạn nếu không thích thì đừng có xài truyền mấy cái Props tay đôi trên, mà bỏ xài kiểu Untracked thông qua cái cục `DialogTrigger` là đủ.
+ */
+declare const Dialog: {
+    ({ open, onOpenChange, children }: DialogProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/** Bộ Trigger gieo phát đà giúp tắt bật cờ State đóng mở của Dialog con, dùng kèm kĩ năng nhét thông qua cái cầu `asChild`. */
+declare const DialogTrigger: React$1.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: {
+    ({ open, children, }: {
+        open?: boolean;
+        children: React$1.ReactNode;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const DialogBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogClose: React$1.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogFullScreenContent: React$1.ForwardRefExoticComponent<DialogFullScreenContentProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface DrawerProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React$1.ReactNode;
+}
+interface DrawerContentProps extends Omit<React$1.ComponentPropsWithoutRef<typeof RadixDialog.Content>, "asChild"> {
+    /** Chiều cao tối đa (vh). Mặc định 90vh */
+    maxHeight?: string;
+    /** Ẩn drag handle */
+    hideHandle?: boolean;
+    /** Ẩn nút đóng */
+    hideCloseButton?: boolean;
+    className?: string;
+}
+declare const Drawer: {
+    ({ open, onOpenChange, children }: DrawerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerTrigger: React$1.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DrawerClose: React$1.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: ({ open, children, }: {
+    open?: boolean;
+    children: React$1.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const DrawerOverlay: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: React$1.ForwardRefExoticComponent<DrawerContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DrawerTitle: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: React$1.ForwardRefExoticComponent<Omit<RadixDialog.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * @file sheets/shared/types.ts
+ *
+ * Shared TypeScript type definitions for Bottom Sheet and Side Sheet components.
+ *
+ * @see https://m3.material.io/components/sheets-bottom/overview
+ * @see https://m3.material.io/components/side-sheets/overview
+ */
+
+/**
+ * Discrete states of a Bottom Sheet, mirroring Android's `SheetValue` enum.
+ *
+ * - `hidden`            — Sheet is fully off-screen (below viewport).
+ * - `partiallyExpanded` — Sheet is visible at ≤ 50% of screen height.
+ * - `expanded`          — Sheet is fully expanded (full screen height).
+ */
+type SheetValue = "hidden" | "partiallyExpanded" | "expanded";
+/**
+ * Lifecycle state of a Sheet component.
+ *
+ * - `closed`   — Fully hidden, not in the DOM.
+ * - `opening`  — Animating into view.
+ * - `open`     — Fully visible and interactive.
+ * - `dragging` — User is actively dragging (bottom sheet only).
+ * - `closing`  — Animating out of view.
+ */
+type SheetState = "closed" | "opening" | "open" | "dragging" | "closing";
+/**
+ * Screen edge a Side Sheet slides in from.
+ * Supports RTL layouts.
+ *
+ * - `start` — Logical start edge (left in LTR, right in RTL).
+ * - `end`   — Logical end edge (right in LTR, left in RTL).
+ */
+type SheetEdge = "start" | "end";
+/**
+ * Base props shared across all Sheet component variants.
+ */
+interface BaseSheetProps {
+    /** Controls whether the sheet is visible. */
+    isOpen: boolean;
+    /** Called when the sheet should close (drag-dismiss, Escape key, scrim click). */
+    onClose: () => void;
+    /** Content rendered inside the sheet. */
+    children: React$1.ReactNode;
+    /** Additional CSS classes applied to the sheet container. */
+    className?: string;
+    /** ID of the element labelling this sheet (`aria-labelledby`). */
+    "aria-labelledby"?: string;
+    /** Accessible label when no visible heading is present (`aria-label`). */
+    "aria-label"?: string;
+    /**
+     * Whether to render the sheet inside a React Portal (at `document.body`).
+     * Defaults to `true` for standard sheets. Modals always use portals.
+     */
+    portal?: boolean;
+    /** Fixed header slot rendered above the scrollable content area. */
+    header?: React$1.ReactNode;
+    /** Fixed footer slot rendered below the scrollable content area. */
+    footer?: React$1.ReactNode;
+    /**
+     * Controls divider visibility between header/footer and the scroll area.
+     * - `true` (default) — Show divider when header/footer is present.
+     * - `false` — Hide all dividers.
+     * - `{ header?, footer? }` — Toggle each position independently.
+     */
+    divider?: boolean | {
+        header?: boolean;
+        footer?: boolean;
+    };
+    /** Props forwarded to the inner `ScrollArea` component. */
+    scrollAreaProps?: Omit<ScrollAreaProps, "children">;
+    /**
+     * Snap points for the Bottom Sheet.
+     * @example `['fit', '70%', 'full']`
+     */
+    snapPoints?: BottomSheetSnapPoint[];
+    /**
+     * Initial snap point when the Bottom Sheet opens.
+     * Defaults to the first entry in `snapPoints`.
+     */
+    defaultSnapPoint?: BottomSheetSnapPoint;
+    /** Called when the Bottom Sheet moves to a new snap point. */
+    onSnapChange?: (snapPoint: BottomSheetSnapPoint) => void;
+    /**
+     * When `false`, skip the `partiallyExpanded` state and open directly to full height.
+     * Mirrors `skipPartiallyExpanded` in Android's `SheetState`.
+     * @default false
+     */
+    skipPartiallyExpanded?: boolean;
+    /**
+     * Whether drag/swipe gestures are enabled on this sheet.
+     * When `false`, the sheet can only be dismissed programmatically.
+     * Mirrors `sheetGesturesEnabled` in Android's `ModalBottomSheet`.
+     * @default true
+     */
+    gesturesEnabled?: boolean;
+    /**
+     * Override the background color of the sheet container.
+     * Accepts any CSS color value. Defaults to `surfaceContainerLow` token.
+     */
+    containerColor?: string;
+    /**
+     * Max width of the sheet. On viewports wider than this value, the sheet
+     * is centered with equal margins on both sides.
+     * Accepts any CSS length. Defaults to `var(--m3-bottom-sheet-max-width, 640px)`.
+     */
+    sheetMaxWidth?: string | number;
+}
+/** Valid snap point values for Bottom Sheet. */
+type BottomSheetSnapPoint = "fit" | "max-content" | "full" | string | number;
+/**
+ * Imperative handle exposed on the Bottom Sheet's DOM node.
+ * Allows programmatic snapping via `ref.current.snapTo(snapPoint)`.
+ *
+ * @example
+ * ```tsx
+ * const sheetRef = useRef<HTMLDivElement & BottomSheetHandle>(null);
+ * sheetRef.current?.snapTo('full');
+ * ```
+ */
+interface BottomSheetHandle {
+    /** Programmatically animate the sheet to a specific snap point. */
+    snapTo: (snapPoint: BottomSheetSnapPoint) => void;
+}
+/** Props for the `DragHandle` component used in Bottom Sheets. */
+interface DragHandleProps {
+    /** Additional CSS classes. */
+    className?: string;
+    /**
+     * Called when the drag handle is activated via click, Space, or Enter.
+     * Should cycle the sheet through its available snap points / dismiss.
+     * When provided, the handle becomes keyboard-interactive with `role="button"`.
+     */
+    onCycle?: () => void;
+    /** Accessible label for the drag handle button. */
+    "aria-label"?: string;
+}
+/** Props for the `Scrim` backdrop overlay component. */
+interface ScrimProps {
+    /** Called when the scrim is clicked — typically closes the sheet. */
+    onClick: () => void;
+    /** Additional CSS classes. */
+    className?: string;
+    /** Motion style (supports MotionValue for animated opacity). */
+    style?: MotionStyle;
+}
+
+/**
+ * @file sheets/bottom-sheet/bottom-sheet.tsx
+ *
+ * Standard (non-modal) Bottom Sheet following MD3 specification.
+ *
+ * - Slide-up animation with DEFAULT_SPATIAL_SPRING
+ * - Drag-to-dismiss with seamless nested scroll handling
+ * - Visual Viewport API for mobile keyboard resize
+ * - WAI-ARIA: `role="dialog"`, `aria-modal="false"`
+ * - SSR-safe portal rendering
+ *
+ * @see https://m3.material.io/components/sheets-bottom/overview
+ */
+
+/**
+ * Props for the standard (non-modal) Bottom Sheet.
+ */
+interface BottomSheetProps extends BaseSheetProps {
+    /**
+     * Maximum height of the sheet.
+     * @default "90dvh"
+     */
+    maxHeight?: string;
+    /**
+     * Hide the drag handle visual indicator.
+     * @default false
+     */
+    hideHandle?: boolean;
+}
+/**
+ * Standard (non-modal) Bottom Sheet that slides up from the bottom edge.
+ *
+ * Does NOT trap focus or block background interaction. Use `BottomSheetModal`
+ * for blocking behaviour.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheet isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <p>Sheet content</p>
+ * </BottomSheet>
+ * ```
+ */
+declare const BottomSheet: React$1.ForwardRefExoticComponent<BottomSheetProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @file sheets/bottom-sheet/bottom-sheet-modal.tsx
+ *
+ * Modal Bottom Sheet — blocks background interaction.
+ *
+ * Android Jetpack Compose parity:
+ * - Entry animation: slides up from y=100% (GAP 6 fix)
+ * - PartiallyExpanded default: opens at 50% screen (GAP 1 via isModal flag)
+ * - sheetMaxWidth: max-width 640px centered (GAP 2 fix)
+ * - Scrim opacity linked to drag position via MotionValue (GAP 8 fix)
+ * - DragHandle keyboard-accessible with cycle (GAP 3 fix)
+ * - gesturesEnabled prop to disable all drag (GAP 7 fix)
+ * - containerColor / contentColor props (GAP 9 fix)
+ * - IME / Visual Viewport handled by hook (GAP 11 fix)
+ *
+ * @see https://m3.material.io/components/sheets-bottom/guidelines#modal
+ */
+
+/**
+ * Props for the modal Bottom Sheet.
+ */
+interface BottomSheetModalProps extends BaseSheetProps {
+    /**
+     * Maximum height of the sheet.
+     * @default "90dvh"
+     */
+    maxHeight?: string;
+    /**
+     * Hide the drag handle visual indicator.
+     * @default false
+     */
+    hideHandle?: boolean;
+}
+/**
+ * Modal Bottom Sheet that slides up from the bottom edge.
+ *
+ * Renders into a portal, traps focus, locks body scroll, and blocks
+ * background interaction with an animated Scrim.
+ *
+ * Dismiss by: swiping down, clicking the Scrim, or pressing Escape.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheetModal isOpen={isOpen} onClose={() => setIsOpen(false)} aria-labelledby="sheet-title">
+ *   <h2 id="sheet-title">Title</h2>
+ *   <p>Modal sheet content</p>
+ * </BottomSheetModal>
+ * ```
+ */
+declare const BottomSheetModal: React$1.ForwardRefExoticComponent<BottomSheetModalProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @file sheets/bottom-sheet/use-bottom-sheet.ts
+ *
+ * Custom hook encapsulating drag-to-dismiss and snap point gesture logic
+ * for Bottom Sheet components, using manual touch/pointer events to allow
+ * seamless scroll-to-drag handoffs without locking native nested scrolling.
+ */
+
+interface UseBottomSheetOptions {
+    isOpen: boolean;
+    onClose: () => void;
+    snapPoints?: BottomSheetSnapPoint[];
+    defaultSnapPoint?: BottomSheetSnapPoint;
+    onSnapChange?: (snapPoint: BottomSheetSnapPoint) => void;
+    gesturesEnabled?: boolean;
+    isModal?: boolean;
+    maxHeight?: string;
+}
+interface UseBottomSheetReturn {
+    scope: React.RefCallback<HTMLDivElement | null>;
+    y: ReturnType<typeof useMotionValue<number>>;
+    scrimOpacity: ReturnType<typeof useTransform<number, number>>;
+    activeSnapPoint: BottomSheetSnapPoint;
+    isContentScrollable: boolean;
+    snapTo: (snapPoint: BottomSheetSnapPoint) => void;
+    cycleSnapPoint: () => void;
+    dragConstraints: {
+        top: number;
+        bottom: number;
+    };
+}
+declare function useBottomSheet({ isOpen, onClose, snapPoints, defaultSnapPoint, onSnapChange, gesturesEnabled, isModal, maxHeight, }: UseBottomSheetOptions): UseBottomSheetReturn;
+
+/**
+ * @file sheets/shared/drag-handle.tsx
+ *
+ * Visual drag handle for Bottom Sheet components.
+ *
+ * MD3 spec:
+ * - Padding top/bottom: 22dp ("Drag handle padding top/bottom: 22dp")
+ * - Width: 32dp, Height: 4dp, corner-full radius
+ * - Color: on-surface-variant @ 40% opacity
+ * - Touch target: top 48dp of sheet is interactive (py-[22px])
+ * - When interactive: renders as `<button>`, Tab-focusable, Space/Enter cycles snap points
+ * - When decorative: purely visual, no semantics
+ *
+ * @see https://m3.material.io/components/sheets-bottom/guidelines#handle
+ * @see https://m3.material.io/components/sheets-bottom/accessibility
+ */
+
+declare const DragHandle: React$1.ForwardRefExoticComponent<DragHandleProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @file sheets/shared/scrim.tsx
+ *
+ * Animated backdrop overlay (Scrim) for Modal Sheet variants.
+ *
+ * Supports animated opacity via `style.opacity` (MotionValue) so the scrim
+ * fades in real-time as the user drags the sheet toward dismiss position.
+ *
+ * @see https://m3.material.io/components/sheets-bottom/guidelines#b0025900-5e5b-4c4a-9a76-e0d09d63afdb
+ */
+
+/**
+ * Translucent backdrop rendered behind modal sheet variants.
+ * Clicking the scrim triggers `onClick`.
+ * Pass `style.opacity` as a MotionValue to link scrim opacity with sheet drag position.
+ */
+declare const Scrim: React$1.ForwardRefExoticComponent<ScrimProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @file sheets/side-sheet/side-sheet.tsx
+ *
+ * Standard (non-modal) Side Sheet following MD3 specification.
+ *
+ * - Slides from `start` (left in LTR) or `end` (right in LTR) edge
+ * - Coplanar sibling support via `coplanarSiblingRef` — animates adjacent
+ *   content's margin using a CSS transition
+ * - Inline rendering (no portal) — does not block background interaction
+ * - WAI-ARIA: `role="complementary"`
+ *
+ * @see https://m3.material.io/components/side-sheets/overview
+ */
+
+/**
+ * Props for the standard (non-modal) Side Sheet.
+ */
+interface SideSheetProps extends BaseSheetProps {
+    /**
+     * Which edge the sheet slides in from.
+     * - `start` — left in LTR, right in RTL
+     * - `end`   — right in LTR, left in RTL
+     * @default "end"
+     */
+    edge?: SheetEdge;
+    /**
+     * Width of the sheet.
+     * @default "360px"
+     */
+    width?: string;
+    /**
+     * Ref to the sibling element that should animate its margin when the
+     * sheet opens/closes (coplanar layout).
+     *
+     * @example
+     * ```tsx
+     * const mainRef = useRef<HTMLDivElement>(null);
+     * <main ref={mainRef}>...</main>
+     * <SideSheet coplanarSiblingRef={mainRef} isOpen={open} onClose={handleClose}>
+     *   ...
+     * </SideSheet>
+     * ```
+     */
+    coplanarSiblingRef?: React$1.RefObject<HTMLElement | null>;
+}
+/**
+ * Standard (non-modal) Side Sheet that slides in from a screen edge.
+ *
+ * Does NOT block background interaction. Pass `coplanarSiblingRef` to
+ * enable automatic margin animation on an adjacent element.
+ */
+declare const SideSheet: React$1.ForwardRefExoticComponent<SideSheetProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * @file sheets/side-sheet/side-sheet-modal.tsx
+ *
+ * Modal Side Sheet — blocks background interaction with a Scrim overlay.
+ *
+ * Differences from `SideSheet` (standard):
+ * - Uses `@radix-ui/react-dialog` for focus trap & scroll lock
+ * - Portal rendering outside current DOM tree
+ * - Scrim blocks background; clicking it calls `onClose`
+ * - Escape key calls `onClose` (Radix built-in)
+ * - `aria-modal="true"`
+ *
+ * @see https://m3.material.io/components/side-sheets/guidelines#modal
+ */
+
+/**
+ * Props for the modal Side Sheet.
+ */
+interface SideSheetModalProps extends BaseSheetProps {
+    /**
+     * Which edge the sheet slides in from.
+     * @default "end"
+     */
+    edge?: SheetEdge;
+    /**
+     * Width of the sheet.
+     * @default "360px"
+     */
+    width?: string;
+}
+/**
+ * Modal Side Sheet that slides in from a screen edge and blocks background interaction.
+ *
+ * Dismiss by: clicking the Scrim or pressing Escape.
+ *
+ * @example
+ * ```tsx
+ * <SideSheetModal isOpen={isOpen} onClose={() => setIsOpen(false)} edge="end" aria-labelledby="panel-title">
+ *   <h2 id="panel-title">Panel</h2>
+ *   <p>Modal side content</p>
+ * </SideSheetModal>
+ * ```
+ */
+declare const SideSheetModal: React$1.ForwardRefExoticComponent<SideSheetModalProps & React$1.RefAttributes<HTMLDivElement>>;
+
+export { type DrawerContentProps as A, type BaseSheetProps as B, DrawerDescription as C, Dialog as D, DrawerFooter as E, DrawerHeader as F, DrawerOverlay as G, DrawerPortal as H, type DrawerProps as I, DrawerTitle as J, DrawerTrigger as K, type ScrimProps as L, type SheetEdge as M, type SheetState as N, SideSheet as O, SideSheetModal as P, type SideSheetModalProps as Q, type SideSheetProps as R, Scrim as S, type UseBottomSheetReturn as T, type UseBottomSheetOptions as U, useBottomSheet as V, type SheetValue as W, BottomSheet as a, type BottomSheetHandle as b, BottomSheetModal as c, type BottomSheetModalProps as d, type BottomSheetProps as e, type BottomSheetSnapPoint as f, DialogBody as g, DialogClose as h, DialogContent as i, type DialogContentProps as j, DialogDescription as k, DialogFooter as l, DialogFullScreenContent as m, type DialogFullScreenContentProps as n, DialogHeader as o, DialogIcon as p, DialogOverlay as q, DialogPortal as r, type DialogProps as s, DialogTitle as t, DialogTrigger as u, DragHandle as v, type DragHandleProps as w, Drawer as x, DrawerClose as y, DrawerContent as z };