@nexub/react 3.0.0 → 3.1.0

package/dist/{chunk-JZCZ2SDT.js → components/CountryBadge/CountryBadge.js}

@@ -1,20 +1,13 @@
-'use client';
-import {
-  Flag
-} from "./chunk-HOQPHAGW.js";
-import {
-  cn
-} from "./chunk-WRVFNYO3.js";
-
-// src/components/CountryBadge/CountryBadge.tsx
-import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var sizeClass = {
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { Flag } from "../Flag/Flag.js";
+const sizeClass = {
   sm: "px-2 py-0.5 text-xs gap-1",
   md: "px-2.5 py-1 text-sm gap-1.5",
   lg: "px-3 py-1.5 text-base gap-2"
 };
-var CountryBadge = React.forwardRef(
+const CountryBadge = React.forwardRef(
   ({ code, label, size = "md", className, ...rest }, ref) => {
     const displayLabel = label ?? code;
     return /* @__PURE__ */ jsxs(
@@ -38,7 +31,6 @@ var CountryBadge = React.forwardRef(
   }
 );
 CountryBadge.displayName = "CountryBadge";
-
 export {
   CountryBadge
 };

package/dist/components/CountryBadge/index.d.ts

@@ -0,0 +1,2 @@
+export { CountryBadge } from './CountryBadge.js';
+export type { CountryBadgeProps } from './CountryBadge.js';

package/dist/components/CountryBadge/index.js

@@ -1,9 +1,4 @@
-'use client';
-import {
-  CountryBadge
-} from "../../chunk-JZCZ2SDT.js";
-import "../../chunk-HOQPHAGW.js";
-import "../../chunk-WRVFNYO3.js";
+import { CountryBadge } from "./CountryBadge.js";
 export {
   CountryBadge
 };

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type ColumnDef, type RowData } from '@tanstack/react-table';
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /** Horizontal alignment of the header and cells. Use 'end' for numbers. @default 'start' */
+        align?: 'start' | 'end' | 'center';
+    }
+}
+/** A DataTable column: TanStack's `ColumnDef`, with `meta.align` for numeric columns. */
+export type DataTableColumn<TData> = ColumnDef<TData, unknown>;
+export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivElement> {
+    columns: DataTableColumn<TData>[];
+    /** Names the table for assistive tech (and is shown below it unless `captionHidden`). */
+    caption?: React.ReactNode;
+    /** Keep the caption for screen readers only. */
+    captionHidden?: boolean;
+    data: TData[];
+    enableSorting?: boolean;
+    enableRowSelection?: boolean;
+    pagination?: {
+        pageSize?: number;
+    };
+}
+export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, pagination, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;

package/dist/{chunk-A7PS3EZO.js → components/DataTable/DataTable.js}

@@ -1,19 +1,5 @@
-'use client';
-import {
-  Table
-} from "./chunk-KA6RZ7VN.js";
-import {
-  disabledContainer,
-  pressable
-} from "./chunk-VALIDQXU.js";
-import {
-  useNexubMessages
-} from "./chunk-VMSWIC3O.js";
-import {
-  cn
-} from "./chunk-WRVFNYO3.js";
-
-// src/components/DataTable/DataTable.tsx
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import {
   useReactTable,
@@ -24,24 +10,27 @@ import {
   flexRender
 } from "@tanstack/react-table";
 import { ArrowUp, ArrowDown, ChevronsUpDown } from "@nexub/icons";
-import { jsx, jsxs } from "react/jsx-runtime";
-var alignText = {
+import { cn } from "../../utils/cn.js";
+import { disabledContainer, pressable } from "../../utils/control.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { Table } from "../Table/Table.js";
+const alignText = {
   start: "text-start",
   end: "text-end",
   center: "text-center"
 };
-var alignJustify = {
+const alignJustify = {
   start: "justify-start",
   end: "justify-end",
   center: "justify-center"
 };
-var pagerButton = cn(
+const pagerButton = cn(
   pressable,
   "border border-[var(--color-outline-variant)] bg-transparent px-4 py-2 min-h-[44px] text-label-lg text-[var(--color-on-surface)]",
   disabledContainer
 );
-var TableRoot = Table.Root;
-var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const TableRoot = Table.Root;
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "thead",
   {
     ref,
@@ -50,9 +39,9 @@ var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHeader.displayName = "DataTable.TableHeader";
-var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
 TableBody.displayName = "DataTable.TableBody";
-var TableRow = React.forwardRef(
+const TableRow = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "tr",
     {
@@ -66,7 +55,7 @@ var TableRow = React.forwardRef(
   )
 );
 TableRow.displayName = "DataTable.TableRow";
-var TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -78,7 +67,7 @@ var TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableHead.displayName = "DataTable.TableHead";
-var TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -211,7 +200,6 @@ function DataTable({
     ] })
   ] });
 }
-
 export {
   DataTable
 };

package/dist/components/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+export { DataTable } from './DataTable.js';
+export type { DataTableProps, DataTableColumn } from './DataTable.js';

package/dist/components/DataTable/index.js

@@ -1,11 +1,4 @@
-'use client';
-import {
-  DataTable
-} from "../../chunk-A7PS3EZO.js";
-import "../../chunk-KA6RZ7VN.js";
-import "../../chunk-VALIDQXU.js";
-import "../../chunk-VMSWIC3O.js";
-import "../../chunk-WRVFNYO3.js";
+import { DataTable } from "./DataTable.js";
 export {
   DataTable
 };

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { type ChevronProps, type Labels } from 'react-day-picker';
+import { type Locale } from 'date-fns';
+/**
+ * A date-fns Locale wins (date-fns 'PP'); else with a NexubProvider locale,
+ * Intl's medium date; otherwise date-fns 'PP' as before.
+ */
+export declare function formatDate(date: Date, locale: string | undefined, dateLocale?: Locale): string;
+/** Nav chevrons point to the inline side they move toward: mirrored in RTL. */
+declare function CalendarChevron({ orientation, ...rest }: ChevronProps): React.JSX.Element;
+/** Internal: locale, dir, translated labels and chevrons shared by both pickers. */
+export declare function useCalendarLocale(localeProp?: Locale): {
+    dayPickerProps: {
+        locale: Locale | undefined;
+        dir: import("@nexub/core").Direction;
+        labels: Partial<Labels>;
+        components: {
+            Chevron: typeof CalendarChevron;
+        };
+    };
+    format: (date: Date) => string;
+};
+export interface DatePickerProps {
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    className?: string;
+    /** Id for the trigger button, e.g. to pair with a `<label htmlFor>`. */
+    id?: string;
+    /** Field name for screen readers; the current value is appended. */
+    'aria-label'?: string;
+    /** date-fns Locale for the calendar and trigger text; wins over NexubProvider's `dateLocale`. */
+    locale?: Locale;
+}
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/{chunk-OY5CWWIM.js → components/DatePicker/DatePicker.js}

@@ -1,27 +1,14 @@
-'use client';
-import {
-  floatingSurface
-} from "./chunk-5FWJXSXT.js";
-import {
-  field,
-  fieldFocusVisible
-} from "./chunk-VALIDQXU.js";
-import {
-  useIntlLocale,
-  useLocale,
-  useNexubMessages
-} from "./chunk-VMSWIC3O.js";
-import {
-  cn
-} from "./chunk-WRVFNYO3.js";
-
-// src/components/DatePicker/DatePicker.tsx
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixPopover from "@radix-ui/react-popover";
 import { DayPicker } from "react-day-picker";
 import { format } from "date-fns";
 import { CalendarDays, ChevronLeft, ChevronRight } from "@nexub/icons";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useIntlLocale, useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { field, fieldFocusVisible } from "../../utils/control.js";
+import { floatingSurface } from "../../utils/surface.js";
 function formatDate(date, locale, dateLocale) {
   if (dateLocale) return format(date, "PP", { locale: dateLocale });
   return locale ? new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date) : format(date, "PP");
@@ -60,7 +47,7 @@ function useCalendarLocale(localeProp) {
     format: (date) => formatDate(date, intlLocale, locale)
   };
 }
-var calendarClassNames = {
+const calendarClassNames = {
   months: "flex flex-col sm:flex-row gap-4",
   month: "flex flex-col gap-4",
   month_caption: "flex h-8 items-center justify-center",
@@ -86,7 +73,7 @@ var calendarClassNames = {
   disabled: "",
   hidden: "invisible"
 };
-var DatePicker = React.forwardRef(
+const DatePicker = React.forwardRef(
   function DatePicker2({
     value,
     onChange,
@@ -162,8 +149,8 @@ var DatePicker = React.forwardRef(
   }
 );
 DatePicker.displayName = "DatePicker";
-
 export {
-  useCalendarLocale,
-  DatePicker
+  DatePicker,
+  formatDate,
+  useCalendarLocale
 };

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker.js';
+export type { DatePickerProps } from './DatePicker.js';

package/dist/components/DatePicker/index.js

@@ -1,12 +1,4 @@
-'use client';
-import "../../chunk-52ZVJPF7.js";
-import {
-  DatePicker
-} from "../../chunk-OY5CWWIM.js";
-import "../../chunk-5FWJXSXT.js";
-import "../../chunk-VALIDQXU.js";
-import "../../chunk-VMSWIC3O.js";
-import "../../chunk-WRVFNYO3.js";
+import { DatePicker } from "./DatePicker.js";
 export {
   DatePicker
 };

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type DateRange } from 'react-day-picker';
+import type { Locale } from 'date-fns';
+export type { DateRange };
+export interface DateRangePickerProps {
+    value?: DateRange;
+    onChange?: (range: DateRange | undefined) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    className?: string;
+    /** Id for the trigger button, e.g. to pair with a `<label htmlFor>`. */
+    id?: string;
+    /** Field name for screen readers; the current value is appended. */
+    'aria-label'?: string;
+    /** date-fns Locale for the calendar and trigger text; wins over NexubProvider's `dateLocale`. */
+    locale?: Locale;
+}
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/{chunk-YYAXXJH3.js → components/DateRangePicker/DateRangePicker.js}

@@ -1,27 +1,14 @@
-'use client';
-import {
-  useCalendarLocale
-} from "./chunk-OY5CWWIM.js";
-import {
-  floatingSurface
-} from "./chunk-5FWJXSXT.js";
-import {
-  field,
-  fieldFocusVisible
-} from "./chunk-VALIDQXU.js";
-import {
-  useNexubMessages
-} from "./chunk-VMSWIC3O.js";
-import {
-  cn
-} from "./chunk-WRVFNYO3.js";
-
-// src/components/DateRangePicker/DateRangePicker.tsx
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixPopover from "@radix-ui/react-popover";
 import { DayPicker } from "react-day-picker";
 import { CalendarDays } from "@nexub/icons";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { useCalendarLocale } from "../DatePicker/DatePicker.js";
+import { field, fieldFocusVisible } from "../../utils/control.js";
+import { floatingSurface } from "../../utils/surface.js";
 function formatRange(range, placeholder, formatDate) {
   if (!range) return placeholder;
   if (range.from && range.to) {
@@ -30,7 +17,7 @@ function formatRange(range, placeholder, formatDate) {
   if (range.from) return `${formatDate(range.from)} \u2013 \u2026`;
   return placeholder;
 }
-var calendarClassNames = {
+const calendarClassNames = {
   months: "flex flex-col sm:flex-row gap-4",
   month: "flex flex-col gap-4",
   month_caption: "flex h-8 items-center justify-center",
@@ -64,7 +51,7 @@ var calendarClassNames = {
   disabled: "",
   hidden: "invisible"
 };
-var DateRangePicker = React.forwardRef(function DateRangePicker2({
+const DateRangePicker = React.forwardRef(function DateRangePicker2({
   value,
   onChange,
   placeholder: placeholderProp,
@@ -137,7 +124,6 @@ var DateRangePicker = React.forwardRef(function DateRangePicker2({
   ] });
 });
 DateRangePicker.displayName = "DateRangePicker";
-
 export {
   DateRangePicker
 };

package/dist/components/DateRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DateRangePicker } from './DateRangePicker.js';
+export type { DateRangePickerProps, DateRange } from './DateRangePicker.js';

package/dist/components/DateRangePicker/index.js

@@ -1,12 +1,4 @@
-'use client';
-import {
-  DateRangePicker
-} from "../../chunk-YYAXXJH3.js";
-import "../../chunk-OY5CWWIM.js";
-import "../../chunk-5FWJXSXT.js";
-import "../../chunk-VALIDQXU.js";
-import "../../chunk-VMSWIC3O.js";
-import "../../chunk-WRVFNYO3.js";
+import { DateRangePicker } from "./DateRangePicker.js";
 export {
   DateRangePicker
 };

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import type { Size } from '../../utils/control.js';
+import { type SurfaceValue } from '../../utils/glass.js';
+interface ContentProps extends RadixDialog.DialogContentProps {
+    size?: Size | 'xl' | 'full';
+    surface?: SurfaceValue;
+}
+export declare const Dialog: {
+    Root: React.FC<RadixDialog.DialogProps>;
+    Trigger: React.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Portal: React.FC<RadixDialog.DialogPortalProps>;
+    Overlay: React.ForwardRefExoticComponent<RadixDialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<RadixDialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<RadixDialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/{chunk-CEFGILJY.js → components/Dialog/Dialog.js}

@@ -1,24 +1,15 @@
-'use client';
-import {
-  overlaySurface,
-  scrim
-} from "./chunk-5FWJXSXT.js";
-import {
-  glassSurfaceClass
-} from "./chunk-DEIBF3P7.js";
-import {
-  cn
-} from "./chunk-WRVFNYO3.js";
-
-// src/components/Dialog/Dialog.tsx
+"use client";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
-import { jsx } from "react/jsx-runtime";
-var Root2 = RadixDialog.Root;
-var Trigger2 = RadixDialog.Trigger;
-var Portal2 = RadixDialog.Portal;
-var Close2 = RadixDialog.Close;
-var Overlay2 = React.forwardRef(
+import { cn } from "../../utils/cn.js";
+import { overlaySurface, scrim } from "../../utils/surface.js";
+import { glassSurfaceClass } from "../../utils/glass.js";
+const Root = RadixDialog.Root;
+const Trigger = RadixDialog.Trigger;
+const Portal = RadixDialog.Portal;
+const Close = RadixDialog.Close;
+const Overlay = React.forwardRef(
   function DialogOverlay({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx(
       RadixDialog.Overlay,
@@ -34,8 +25,8 @@ var Overlay2 = React.forwardRef(
     );
   }
 );
-Overlay2.displayName = "Dialog.Overlay";
-var Content2 = React.forwardRef(
+Overlay.displayName = "Dialog.Overlay";
+const Content = React.forwardRef(
   function DialogContent({ className, size = "md", surface = "solid", children, ...props }, ref) {
     const sizeMap = {
       sm: "max-w-sm",
@@ -65,8 +56,8 @@ var Content2 = React.forwardRef(
     );
   }
 );
-Content2.displayName = "Dialog.Content";
-var Title2 = React.forwardRef(
+Content.displayName = "Dialog.Content";
+const Title = React.forwardRef(
   function DialogTitle({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx(
       RadixDialog.Title,
@@ -78,8 +69,8 @@ var Title2 = React.forwardRef(
     );
   }
 );
-Title2.displayName = "Dialog.Title";
-var Description2 = React.forwardRef(
+Title.displayName = "Dialog.Title";
+const Description = React.forwardRef(
   function DialogDescription({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx(
       RadixDialog.Description,
@@ -91,32 +82,31 @@ var Description2 = React.forwardRef(
     );
   }
 );
-Description2.displayName = "Dialog.Description";
-var Header = React.forwardRef(
+Description.displayName = "Dialog.Description";
+const Header = React.forwardRef(
   function DialogHeader({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4 flex flex-col gap-1", className), ...props });
   }
 );
 Header.displayName = "Dialog.Header";
-var Footer = React.forwardRef(
+const Footer = React.forwardRef(
   function DialogFooter({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
   }
 );
 Footer.displayName = "Dialog.Footer";
-var Dialog = {
-  Root: Root2,
-  Trigger: Trigger2,
-  Portal: Portal2,
-  Overlay: Overlay2,
-  Content: Content2,
-  Close: Close2,
-  Title: Title2,
-  Description: Description2,
+const Dialog = {
+  Root,
+  Trigger,
+  Portal,
+  Overlay,
+  Content,
+  Close,
+  Title,
+  Description,
   Header,
   Footer
 };
-
 export {
   Dialog
 };

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1 @@
+export { Dialog } from './Dialog.js';

package/dist/components/Dialog/index.js

@@ -1,10 +1,4 @@
-'use client';
-import {
-  Dialog
-} from "../../chunk-CEFGILJY.js";
-import "../../chunk-5FWJXSXT.js";
-import "../../chunk-DEIBF3P7.js";
-import "../../chunk-WRVFNYO3.js";
+import { Dialog } from "./Dialog.js";
 export {
   Dialog
 };

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { type SurfaceValue } from '../../utils/glass.js';
+export interface DrawerRootProps {
+    children?: React.ReactNode;
+    open?: boolean;
+    /** Opened by default, skips the initial enter animation. Still reacts to `open` changes. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Gets triggered after the open or close animation ends. */
+    onAnimationEnd?: (open: boolean) => void;
+    onClose?: () => void;
+    /** Edge the drawer slides in from. Match it to `Content`'s `side`. @default 'bottom' */
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    /** When `false`, the page behind stays interactive and nothing is locked or trapped. @default true */
+    modal?: boolean;
+    /**
+     * How page scroll is locked while the drawer is open (modal only).
+     * - `'style'` (default): Radix's scroll lock. It injects a `<style>` tag, which a strict
+     *   `style-src` CSP blocks.
+     * - `'class'`: adds the `nexub-scroll-lock` class from `@nexub/themes/base` to `<html>`.
+     *   Injects nothing, so it works under `style-src 'self'`. Focus trap, Escape and
+     *   outside-click dismissal are unchanged.
+     * @default 'style'
+     */
+    scrollLock?: 'style' | 'class';
+    /** When `false`, dragging, outside clicks and Escape don't close the drawer. @default true */
+    dismissible?: boolean;
+    /** Only the `Drawer.Handle` starts a drag. @default false */
+    handleOnly?: boolean;
+    /** Fraction (0–1) of the drawer that must be dragged away to close it. @default 0.25 */
+    closeThreshold?: number;
+    /** Snap points, as fractions of the screen (e.g. `[0.4, 1]`) or px strings. */
+    snapPoints?: (number | string)[];
+    activeSnapPoint?: number | string | null;
+    setActiveSnapPoint?: (snapPoint: number | string | null) => void;
+    /** Index of the snap point from which the overlay fades. Defaults to the last one. */
+    fadeFromIndex?: number;
+    /** Don't skip snap points on fast swipes. @default false */
+    snapToSequentialPoint?: boolean;
+    /** ms during which the drawer can't be dragged after its content scrolls. @default 500 */
+    scrollLockTimeout?: number;
+    onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
+    onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
+    shouldScaleBackground?: boolean;
+    /** @default true */
+    setBackgroundColorOnScale?: boolean;
+    /** When `true`, vaul sets no styles on `body`. */
+    noBodyStyles?: boolean;
+    /** Only resize (don't move) the drawer when the on-screen keyboard opens. */
+    fixed?: boolean;
+    nested?: boolean;
+    disablePreventScroll?: boolean;
+    preventScrollRestoration?: boolean;
+    /** Reposition inputs instead of scrolling them into view when the keyboard opens. */
+    repositionInputs?: boolean;
+    container?: HTMLElement | null;
+    autoFocus?: boolean;
+}
+declare function Root({ scrollLock, onOpenChange, ...props }: DrawerRootProps): React.JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
+export declare const Drawer: {
+    Root: typeof Root;
+    Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Portal: (props: DialogPrimitive.DialogPortalProps) => React.JSX.Element;
+    Overlay: React.ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & {
+        side?: "left" | "right" | "top" | "bottom";
+        surface?: SurfaceValue;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+    Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const Sheet: {
+    Root: typeof Root;
+    Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Portal: (props: DialogPrimitive.DialogPortalProps) => React.JSX.Element;
+    Overlay: React.ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & {
+        side?: "left" | "right" | "top" | "bottom";
+        surface?: SurfaceValue;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+    Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+};
+export {};