@kennycorrea/ui 0.10.0 → 0.11.0

package/dist/atoms/NavBar/BackButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiStrings } from '../../strings.js';
+import { Icon } from '../Icon/index.js';
+/**
+ * A chevron with an optional label. The target is at least 44px square; with no `label` the
+ * accessible name comes from `UiStrings.back`.
+ */
+export function BackButton({ label, className, type = 'button', ...rest }) {
+    const strings = useUiStrings();
+    return (_jsxs("button", { type: type, "aria-label": label ? undefined : strings.back, className: ['ui-backbutton', className].filter(Boolean).join(' '), ...rest, children: [_jsx(Icon, { name: "collapse", className: "ui-backbutton__icon" }), label && _jsx("span", { className: "ui-backbutton__label", children: label })] }));
+}

package/dist/atoms/NavBar/NavBar.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+export interface NavBarProps {
+    title: string;
+    /** Left slot: a `BackButton`, usually. */
+    leading?: ReactNode;
+    /** Right slot: icon buttons. */
+    trailing?: ReactNode;
+    /**
+     * A large left-aligned title in the content flow. It is the page's `h1`; once it has scrolled
+     * under the bar, a small centred copy fades in (that copy is `aria-hidden`).
+     * Without it the small title is the `h1`.
+     */
+    largeTitle?: boolean;
+    className?: string;
+}
+/**
+ * A sticky top bar for small screens. Render it as the first child of the scrolling content:
+ * the large title follows it in the flow. The bar is transparent at the top of the page and
+ * gains `--material-bar` and a hairline once content has moved beneath it. Scroll state comes
+ * from one IntersectionObserver, with no scroll listeners.
+ */
+export declare function NavBar({ title, leading, trailing, largeTitle, className }: NavBarProps): import("react").JSX.Element;

package/dist/atoms/NavBar/NavBar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+/** Height of the bar proper, `--safe-top` excluded. Mirrored in tokens.css. */
+const BAR_HEIGHT = 44;
+/**
+ * A sticky top bar for small screens. Render it as the first child of the scrolling content:
+ * the large title follows it in the flow. The bar is transparent at the top of the page and
+ * gains `--material-bar` and a hairline once content has moved beneath it. Scroll state comes
+ * from one IntersectionObserver, with no scroll listeners.
+ */
+export function NavBar({ title, leading, trailing, largeTitle = false, className }) {
+    const [scrolled, setScrolled] = useState(false);
+    const target = useRef(null);
+    useEffect(() => {
+        const el = target.current;
+        if (!el || typeof IntersectionObserver === 'undefined')
+            return;
+        // With a large title, "scrolled" means it is gone beneath the bar; without one, that the
+        // page has moved at all (the sentinel is a zero-height element at the top of the flow).
+        const io = new IntersectionObserver(([entry]) => {
+            if (entry)
+                setScrolled(!entry.isIntersecting);
+        }, { rootMargin: largeTitle ? `-${BAR_HEIGHT}px 0px 0px 0px` : '0px' });
+        io.observe(el);
+        return () => io.disconnect();
+    }, [largeTitle]);
+    const root = ['ui-navbar', className].filter(Boolean).join(' ');
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: root, "data-scrolled": scrolled ? 'true' : 'false', "data-large": largeTitle ? 'true' : 'false', children: [_jsx("div", { className: "ui-navbar__side", children: leading }), largeTitle ? (_jsx("div", { className: "ui-navbar__title", "aria-hidden": "true", children: title })) : (_jsx("h1", { className: "ui-navbar__title", children: title })), _jsx("div", { className: "ui-navbar__side ui-navbar__side--trailing", children: trailing })] }), largeTitle ? (_jsx("div", { className: "ui-navbar__large", children: _jsx("h1", { ref: target, className: "ui-navbar__large-title", children: title }) })) : (_jsx("div", { ref: target, className: "ui-navbar__sentinel", "aria-hidden": "true" }))] }));
+}

package/dist/atoms/NavBar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BackButton.js';
+export * from './NavBar.js';

package/dist/atoms/NavBar/index.js

@@ -0,0 +1,2 @@
+export * from './BackButton.js';
+export * from './NavBar.js';

package/dist/atoms/PullToRefresh/PullToRefresh.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+export interface PullToRefreshProps {
+    /** Called once the pull passes the threshold. The indicator is held until the promise settles. */
+    onRefresh: () => Promise<void>;
+    children?: ReactNode;
+    /**
+     * Which thing scrolls. `document` (default) watches the page and the wrapper is a plain block;
+     * `self` makes the wrapper the scroll container (give it a height via `className`).
+     */
+    scroller?: 'document' | 'self';
+    /** Pixels of (damped) pull that commit a refresh. Default 64. */
+    threshold?: number;
+    /** Most the content is pushed down. Default 112. */
+    maxPull?: number;
+    /** Turns the gesture off. */
+    disabled?: boolean;
+    /** Overrides the announced label (otherwise the `refreshing` UI string). */
+    label?: string;
+    className?: string;
+}
+/**
+ * Pull-to-refresh for touch screens.
+ *
+ * **A shortcut, never the only way**: the parent must still offer a visible refresh action,
+ * because the gesture is invisible, touch-only and unavailable to switch and keyboard users.
+ *
+ * Active only on coarse pointers, only when the scroller is at the very top when the touch
+ * begins, and only for a downward drag; otherwise the browser's own scroll is untouched.
+ * `onRefresh` should handle its own errors — a rejection just ends the wait.
+ */
+export declare function PullToRefresh({ onRefresh, children, scroller, threshold, maxPull, disabled, label, className, }: PullToRefreshProps): import("react").JSX.Element;

package/dist/atoms/PullToRefresh/PullToRefresh.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useUiStrings } from '../../strings.js';
+import { cn } from '../../utils/cn.js';
+import { Spinner } from '../Spinner/index.js';
+/** A finger travels this many pixels for each pixel the content moves. */
+const RESISTANCE = 2;
+const query = (q) => typeof window.matchMedia === 'function' && window.matchMedia(q).matches;
+/**
+ * Pull-to-refresh for touch screens.
+ *
+ * **A shortcut, never the only way**: the parent must still offer a visible refresh action,
+ * because the gesture is invisible, touch-only and unavailable to switch and keyboard users.
+ *
+ * Active only on coarse pointers, only when the scroller is at the very top when the touch
+ * begins, and only for a downward drag; otherwise the browser's own scroll is untouched.
+ * `onRefresh` should handle its own errors — a rejection just ends the wait.
+ */
+export function PullToRefresh({ onRefresh, children, scroller = 'document', threshold = 64, maxPull = 112, disabled = false, label, className, }) {
+    const strings = useUiStrings();
+    const rootRef = useRef(null);
+    const [pull, setPull] = useState(0);
+    const [dragging, setDragging] = useState(false);
+    const [refreshing, setRefreshing] = useState(false);
+    const busy = useRef(false);
+    const refresh = useRef(onRefresh);
+    refresh.current = onRefresh;
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root || disabled)
+            return;
+        let startY = 0;
+        let tracking = false;
+        let current = 0;
+        const atTop = () => (scroller === 'self' ? root.scrollTop <= 0 : window.scrollY <= 0);
+        const set = (v) => {
+            current = v;
+            setPull(v);
+        };
+        const start = (e) => {
+            tracking = false;
+            if (busy.current || e.touches.length !== 1)
+                return;
+            if (!query('(pointer: coarse)') || !atTop())
+                return;
+            startY = e.touches[0].clientY;
+            tracking = true;
+        };
+        const move = (e) => {
+            if (!tracking)
+                return;
+            const dy = e.touches[0].clientY - startY;
+            if (dy <= 0 || !atTop()) {
+                if (current > 0)
+                    set(0);
+                setDragging(false);
+                if (dy <= 0)
+                    tracking = false;
+                return;
+            }
+            if (e.cancelable)
+                e.preventDefault();
+            setDragging(true);
+            set(Math.min(maxPull, dy / RESISTANCE));
+        };
+        const end = async () => {
+            if (!tracking)
+                return;
+            tracking = false;
+            setDragging(false);
+            if (current < threshold)
+                return set(0);
+            busy.current = true;
+            setRefreshing(true);
+            set(threshold);
+            try {
+                await refresh.current();
+            }
+            catch {
+                // The caller owns error reporting; the gesture only ends the wait.
+            }
+            finally {
+                busy.current = false;
+                setRefreshing(false);
+                set(0);
+            }
+        };
+        const cancel = () => {
+            if (!tracking)
+                return;
+            tracking = false;
+            setDragging(false);
+            if (!busy.current)
+                set(0);
+        };
+        root.addEventListener('touchstart', start, { passive: true });
+        root.addEventListener('touchmove', move, { passive: false });
+        root.addEventListener('touchend', end);
+        root.addEventListener('touchcancel', cancel);
+        return () => {
+            root.removeEventListener('touchstart', start);
+            root.removeEventListener('touchmove', move);
+            root.removeEventListener('touchend', end);
+            root.removeEventListener('touchcancel', cancel);
+        };
+    }, [disabled, scroller, threshold, maxPull]);
+    const progress = Math.min(1, pull / threshold);
+    const name = label ?? strings.refreshing;
+    return (_jsxs("div", { ref: rootRef, "aria-busy": refreshing || undefined, className: cn('relative', scroller === 'self' && 'overflow-y-auto overscroll-y-contain', className), children: [_jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 flex items-center justify-center overflow-hidden", style: { height: pull, opacity: refreshing ? 1 : progress }, children: refreshing ? (_jsx(Spinner, { label: name })) : pull > 0 ? (_jsx("span", { "aria-hidden": "true", className: "size-5 rounded-full border-2 border-[var(--gray-8)] border-t-[var(--accent-9)] motion-reduce:rotate-0!", style: { transform: `rotate(${progress * 270}deg)` } })) : null }), _jsx("div", { className: cn(!dragging && 'transition-transform duration-200 ease-out motion-reduce:transition-none'), style: { transform: pull ? `translateY(${pull}px)` : undefined }, children: children })] }));
+}

package/dist/atoms/PullToRefresh/index.d.ts

@@ -0,0 +1 @@
+export * from './PullToRefresh.js';

package/dist/atoms/PullToRefresh/index.js

@@ -0,0 +1 @@
+export * from './PullToRefresh.js';

package/dist/atoms/ResponsiveDialog/ResponsiveDialog.d.ts

@@ -0,0 +1,13 @@
+import { type DialogProps } from '../Dialog/Dialog.js';
+import { type SheetDetent } from '../Sheet/Sheet.js';
+export interface ResponsiveDialogProps extends DialogProps {
+    /** The detent the sheet opens at below `md`. Default `fit`. */
+    sheetDetent?: SheetDetent;
+}
+/**
+ * The same props as {@link Dialog}, presented the way the screen asks: a centred dialog on a
+ * desktop, a bottom sheet on a phone. Both sit on Radix Dialog, so the role, the focus trap,
+ * Escape and the labelling are the same either way. Crossing the breakpoint while open remounts
+ * the content, which loses uncommitted state inside `children` — keep form state in the parent.
+ */
+export declare function ResponsiveDialog({ sheetDetent, ...props }: ResponsiveDialogProps): import("react").JSX.Element;

package/dist/atoms/ResponsiveDialog/ResponsiveDialog.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from 'react';
+import { Dialog } from '../Dialog/Dialog.js';
+import { Sheet } from '../Sheet/Sheet.js';
+/** Tailwind's `md`. Below it the dialog becomes a bottom sheet. */
+const MD = '(min-width: 768px)';
+function subscribe(onChange) {
+    const query = window.matchMedia(MD);
+    query.addEventListener('change', onChange);
+    return () => query.removeEventListener('change', onChange);
+}
+/** A Dialog at `md` and up, a Sheet below. Without `matchMedia` (SSR) the Dialog. */
+function useIsMdUp() {
+    return useSyncExternalStore(subscribe, () => window.matchMedia(MD).matches, () => true);
+}
+/**
+ * The same props as {@link Dialog}, presented the way the screen asks: a centred dialog on a
+ * desktop, a bottom sheet on a phone. Both sit on Radix Dialog, so the role, the focus trap,
+ * Escape and the labelling are the same either way. Crossing the breakpoint while open remounts
+ * the content, which loses uncommitted state inside `children` — keep form state in the parent.
+ */
+export function ResponsiveDialog({ sheetDetent = 'fit', ...props }) {
+    const mdUp = useIsMdUp();
+    if (mdUp)
+        return _jsx(Dialog, { ...props });
+    return (_jsx(Sheet, { open: props.open, onOpenChange: props.onOpenChange, title: props.title, description: props.description, footer: props.footer, className: props.className, detent: sheetDetent, showCloseButton: true, children: props.children }));
+}

package/dist/atoms/ResponsiveDialog/index.d.ts

@@ -0,0 +1 @@
+export * from './ResponsiveDialog.js';

package/dist/atoms/ResponsiveDialog/index.js

@@ -0,0 +1 @@
+export * from './ResponsiveDialog.js';

package/dist/atoms/ScrollStrip/ScrollStrip.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react';
+export type ScrollStripBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface ScrollStripProps extends HTMLAttributes<HTMLDivElement> {
+    /** From this breakpoint the strip stops scrolling and lays its children out as a grid. */
+    gridFrom?: ScrollStripBreakpoint;
+    /** Grid columns from `gridFrom`. */
+    columns?: number;
+    /** Width of each item while scrolling, so the next one peeks at the edge. Any CSS length. */
+    itemWidth?: string;
+}
+/**
+ * A horizontal scroll-snap row that becomes a grid at a breakpoint. Items snap to the start edge,
+ * the scroll padding equals the page gutter (`--page-gutter`, 16px unless the app sets it) so a
+ * snapped item lines up with the content above it, and the scrollbar is hidden. Items default to
+ * 78% of the strip so the next one shows. Use it for KPI rows and card carousels.
+ */
+export declare function ScrollStrip({ gridFrom, columns, itemWidth, className, style, ...props }: ScrollStripProps): import("react").JSX.Element;

package/dist/atoms/ScrollStrip/ScrollStrip.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+/**
+ * A horizontal scroll-snap row that becomes a grid at a breakpoint. Items snap to the start edge,
+ * the scroll padding equals the page gutter (`--page-gutter`, 16px unless the app sets it) so a
+ * snapped item lines up with the content above it, and the scrollbar is hidden. Items default to
+ * 78% of the strip so the next one shows. Use it for KPI rows and card carousels.
+ */
+export function ScrollStrip({ gridFrom = 'md', columns = 3, itemWidth, className, style, ...props }) {
+    return (_jsx("div", { className: cn('ui-strip', className), "data-grid-from": gridFrom, style: {
+            '--strip-cols': columns,
+            ...(itemWidth ? { '--strip-item': itemWidth } : null),
+            ...style,
+        }, ...props }));
+}

package/dist/atoms/ScrollStrip/index.d.ts

@@ -0,0 +1 @@
+export * from './ScrollStrip.js';

package/dist/atoms/ScrollStrip/index.js

@@ -0,0 +1 @@
+export * from './ScrollStrip.js';

package/dist/atoms/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+export interface SegmentedControlOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    /** 2–5 options. */
+    options: SegmentedControlOption[];
+    value: string;
+    onValueChange?: (value: string) => void;
+    size?: 'sm' | 'md';
+    /** Stretch the track to its container; segments are always equal width. */
+    fullWidth?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+}
+/**
+ * A pill track with a sliding thumb: one choice from 2–5. Radio semantics with a roving tabindex —
+ * arrow keys move and select (wrapping, skipping disabled), Home/End jump to the ends.
+ */
+export declare function SegmentedControl({ options, value, onValueChange, size, fullWidth, className, ...aria }: SegmentedControlProps): import("react").JSX.Element;

package/dist/atoms/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+/**
+ * A pill track with a sliding thumb: one choice from 2–5. Radio semantics with a roving tabindex —
+ * arrow keys move and select (wrapping, skipping disabled), Home/End jump to the ends.
+ */
+export function SegmentedControl({ options, value, onValueChange, size = 'md', fullWidth = false, className, ...aria }) {
+    const refs = useRef([]);
+    const count = options.length;
+    const active = options.findIndex((o) => o.value === value);
+    const tabbable = active >= 0 && !options[active].disabled ? active : options.findIndex((o) => !o.disabled);
+    const select = (to) => {
+        refs.current[to]?.focus();
+        onValueChange?.(options[to].value);
+    };
+    const step = (from, dir) => {
+        let i = from;
+        for (let n = 0; n < count; n++) {
+            i = (i + dir + count) % count;
+            if (!options[i].disabled)
+                return select(i);
+        }
+    };
+    const onKeyDown = (e, i) => {
+        const enabled = options.map((o, k) => (o.disabled ? -1 : k)).filter((k) => k >= 0);
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown')
+            step(i, 1);
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
+            step(i, -1);
+        else if (e.key === 'Home')
+            select(enabled[0]);
+        else if (e.key === 'End')
+            select(enabled[enabled.length - 1]);
+        else
+            return;
+        e.preventDefault();
+    };
+    return (_jsxs("div", { role: "radiogroup", className: ['ui-segmented', className].filter(Boolean).join(' '), "data-size": size, "data-full": fullWidth ? 'true' : undefined, style: { '--seg-count': count, '--seg-index': Math.max(active, 0) }, ...aria, children: [active >= 0 && _jsx("span", { className: "ui-segmented__thumb", "aria-hidden": "true" }), options.map((o, i) => (_jsx("button", { ref: (el) => {
+                    refs.current[i] = el;
+                }, type: "button", role: "radio", "aria-checked": i === active, disabled: o.disabled, tabIndex: i === tabbable ? 0 : -1, className: "ui-segmented__item", onClick: () => onValueChange?.(o.value), onKeyDown: (e) => onKeyDown(e, i), children: o.label }, o.value)))] }));
+}

package/dist/atoms/SegmentedControl/index.d.ts

@@ -0,0 +1 @@
+export * from './SegmentedControl.js';

package/dist/atoms/SegmentedControl/index.js

@@ -0,0 +1 @@
+export * from './SegmentedControl.js';

package/dist/atoms/Select/Select.js

@@ -12,5 +12,5 @@ import { cn } from '../../utils/cn.js';
  */
 export const Select = forwardRef(function Select({ value, onValueChange, options, placeholder, invalid = false, disabled, required, id, name, className, ...props }, ref) {
     const strings = useUiStrings();
-    return (_jsxs(ThemedSelect.Root, { value: value, onValueChange: onValueChange, disabled: disabled, required: required, name: name, children: [_jsx(ThemedSelect.Trigger, { ref: ref, id: id, placeholder: placeholder ?? strings.select, color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('w-full', className), ...props }), _jsx(ThemedSelect.Content, { position: "popper", children: options.map((option) => (_jsx(ThemedSelect.Item, { value: option.value, children: option.label }, option.value))) })] }));
+    return (_jsxs(ThemedSelect.Root, { value: value, onValueChange: onValueChange, disabled: disabled, required: required, name: name, children: [_jsx(ThemedSelect.Trigger, { ref: ref, id: id, placeholder: placeholder ?? strings.select, color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('ui-select-trigger w-full', className), ...props }), _jsx(ThemedSelect.Content, { position: "popper", children: options.map((option) => (_jsx(ThemedSelect.Item, { value: option.value, children: option.label }, option.value))) })] }));
 });

package/dist/atoms/Sheet/Sheet.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from 'react';
+/**
+ * Resting heights of a sheet. `medium` is half the visible viewport, `large` nearly all of it, and
+ * `fit` is the content's own height, capped at 90% of the viewport.
+ */
+export type SheetDetent = 'medium' | 'large' | 'fit';
+export interface SheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Labels the sheet (`aria-labelledby`). */
+    title: ReactNode;
+    /** Optional, wired up via `aria-describedby`. */
+    description?: ReactNode;
+    /** The body. Scrolls inside the sheet; a drag down from its top moves the sheet instead. */
+    children?: ReactNode;
+    /** Action row pinned below the body, above the bottom safe area and above the keyboard. */
+    footer?: ReactNode;
+    /** Controlled resting detent. */
+    detent?: SheetDetent;
+    /** Initial detent when uncontrolled. Default `fit`. */
+    defaultDetent?: SheetDetent;
+    /** Called when a drag or the handle moves the sheet to another detent. */
+    onDetentChange?: (detent: SheetDetent) => void;
+    /**
+     * The detents the sheet may rest at, shortest first (`fit` < `medium` < `large`). Dragging up
+     * moves to the next, down to the previous, and down from the lowest dismisses. Default: just
+     * the current detent, so the sheet dismisses or springs back and never resizes.
+     */
+    detents?: SheetDetent[];
+    /**
+     * Scale and round the page behind while the sheet is at `large`, as iOS does. The page is
+     * everything beside the sheet inside the same Theme. Note that a transformed ancestor becomes
+     * the containing block of any `position: fixed` descendant, so fixed bars in the page scale too.
+     */
+    scaleBackground?: boolean;
+    /** Whether a drag down, Escape, the scrim or the close button may close it. Default `true`. */
+    dismissible?: boolean;
+    /** Render a close button in the header. Default `false`. */
+    showCloseButton?: boolean;
+    /** Overrides the close button's accessible name (otherwise the `close` UI string). */
+    closeLabel?: string;
+    /** Overrides the handle's accessible name when it raises the sheet (otherwise `expand`). */
+    expandLabel?: string;
+    /** Overrides the handle's accessible name when it lowers the sheet (otherwise `collapse`). */
+    collapseLabel?: string;
+    /** Caps the width on wider screens. Default `max-w-lg`; pass `max-w-none` for full width. */
+    maxWidthClassName?: string;
+    className?: string;
+    /** Where the portal mounts. Default: the nearest `<Theme>` (`.radix-themes`), else rendered in place. */
+    container?: HTMLElement | null;
+}
+/**
+ * A native-feeling bottom sheet on Radix Dialog.
+ *
+ * Radix owns what must not be reimplemented: the focus trap and its return on close, Escape,
+ * the scrim, `aria-modal`, and the page behind being hidden from assistive technology. This adds
+ * the sheet: a drag handle, detents, velocity-based dismissal, a body that scrolls until it is at
+ * its top and only then hands the gesture to the sheet, a footer that stays above the safe area
+ * and the keyboard, and an optional iOS-style scaled page behind the `large` detent.
+ *
+ * Like every floating atom here it portals into the nearest `<Theme>` rather than `<body>`.
+ */
+export declare function Sheet({ open, onOpenChange, title, description, children, footer, detent: detentProp, defaultDetent, onDetentChange, detents, scaleBackground, dismissible, showCloseButton, closeLabel, expandLabel, collapseLabel, maxWidthClassName, className, container, }: SheetProps): import("react").JSX.Element;