@medalsocial/meda 2.8.1 → 3.2.0

package/dist/primitives/avatar.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps } from 'react';
+export type AvatarSize = 'sm' | 'md' | 'lg';
+export interface AvatarProps extends Omit<ComponentProps<'span'>, 'children'> {
+    /** Person or entity name. Drives the accessible name and the initials. */
+    name: string;
+    /** Image URL. Falls back to initials when missing or when it fails to load. */
+    src?: string | null;
+    /** Override the computed initials (e.g. a single brand letter). */
+    initials?: string;
+    size?: AvatarSize;
+}
+/**
+ * Up to two initials from a name, letters only: the first letter of the first
+ * and of the last word. Digits, punctuation and emoji are ignored, so
+ * "Ali (Medal) 2" gives "AM" and "  " gives "". Any script is supported via
+ * Unicode letter classes ("Åse Øien" -> "ÅØ").
+ */
+export declare function getInitials(name: string): string;
+/**
+ * Image avatar with an initials fallback. The wrapper carries `role="img"` +
+ * `aria-label={name}`, so the name is announced once whether the photo or the
+ * initials are showing.
+ */
+export declare function Avatar({ name, src, initials, size, className, ...props }: AvatarProps): import("react").JSX.Element;

package/dist/primitives/avatar.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { cn } from '../lib/utils.js';
+const SIZE_CLASSES = {
+    sm: 'size-8 text-xs',
+    md: 'size-10 text-sm',
+    lg: 'size-12 text-base',
+};
+/**
+ * Up to two initials from a name, letters only: the first letter of the first
+ * and of the last word. Digits, punctuation and emoji are ignored, so
+ * "Ali (Medal) 2" gives "AM" and "  " gives "". Any script is supported via
+ * Unicode letter classes ("Åse Øien" -> "ÅØ").
+ */
+export function getInitials(name) {
+    const words = name
+        .split(/\s+/)
+        .map((word) => word.replace(/[^\p{L}]/gu, ''))
+        .filter(Boolean);
+    if (words.length === 0)
+        return '';
+    const first = words[0] ?? '';
+    const last = words.length > 1 ? (words[words.length - 1] ?? '') : '';
+    return (Array.from(first)[0] ?? '').concat(Array.from(last)[0] ?? '').toLocaleUpperCase();
+}
+/**
+ * Image avatar with an initials fallback. The wrapper carries `role="img"` +
+ * `aria-label={name}`, so the name is announced once whether the photo or the
+ * initials are showing.
+ */
+export function Avatar({ name, src, initials, size = 'md', className, ...props }) {
+    // Keyed by URL, so a new `src` automatically gets a fresh chance.
+    const [failedSrc, setFailedSrc] = useState(null);
+    const showImage = Boolean(src) && failedSrc !== src;
+    const text = initials ?? getInitials(name);
+    // An SSR-rendered <img> can fail before React hydrates and attaches
+    // onError; catch that case by inspecting the element once it mounts.
+    const imageRef = useCallback((image) => {
+        if (image?.complete && image.naturalWidth === 0 && src)
+            setFailedSrc(src);
+    }, [src]);
+    return (_jsx("span", { role: "img", "aria-label": name, "data-slot": "avatar", "data-size": size, "data-state": showImage ? 'image' : 'fallback', className: cn('relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-muted font-medium text-muted-foreground', SIZE_CLASSES[size], className), ...props, children: showImage ? (_jsx("img", { ref: imageRef, src: src ?? undefined, alt: "", decoding: "async", loading: "lazy", onError: () => setFailedSrc(src ?? null), className: "size-full object-cover" })) : (_jsx("span", { "aria-hidden": "true", "data-slot": "avatar-fallback", children: text })) }));
+}

package/dist/primitives/button.d.ts

@@ -0,0 +1,21 @@
+import type { ButtonHTMLAttributes, ComponentProps, ReactNode } from 'react';
+import { type RenderElement } from '../lib/render-element.js';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends ComponentProps<'button'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /**
+     * Shows a spinner, sets `aria-busy`, and swallows clicks while keeping the
+     * button focusable (so focus is not lost mid-submit) and its width stable.
+     */
+    loading?: boolean;
+    /** Screen-reader text announced while `loading`. Defaults to "Loading". */
+    loadingLabel?: string;
+    /**
+     * Render as another element (e.g. a router `<Link>` or `<a>`), merging
+     * meda's props and classes onto it — same pattern as `AuthProviderButton`.
+     */
+    render?: RenderElement<ButtonHTMLAttributes<HTMLElement>>;
+}
+export declare function Button({ variant, size, loading, loadingLabel, render, type, disabled, className, children, onClick, ...props }: ButtonProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/primitives/button.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { LoaderCircle } from 'lucide-react';
+import { renderElement } from '../lib/render-element.js';
+import { cn } from '../lib/utils.js';
+// Semantic tokens only, so a consumer's own `--primary` / `--secondary` /
+// `--accent` re-theme the button without touching meda.
+const VARIANT_CLASSES = {
+    primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+    secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+    ghost: 'text-foreground hover:bg-accent hover:text-accent-foreground',
+    outline: 'border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
+};
+const SIZE_CLASSES = {
+    sm: 'h-8 gap-1.5 px-3 text-xs [&_svg]:size-3.5',
+    md: 'h-10 gap-2 px-4 text-sm [&_svg]:size-4',
+    lg: 'h-11 gap-2 px-5 text-base [&_svg]:size-4',
+};
+export function Button({ variant = 'primary', size = 'md', loading = false, loadingLabel = 'Loading', render, type = 'button', disabled, className, children, onClick, ...props }) {
+    // A rendered link can't be natively disabled, so swallow its clicks too.
+    const inert = loading || (render !== undefined && Boolean(disabled));
+    const handleClick = (event) => {
+        if (inert) {
+            event.preventDefault();
+            return;
+        }
+        onClick?.(event);
+    };
+    const content = (_jsxs(_Fragment, { children: [loading ? (_jsxs(_Fragment, { children: [_jsx(LoaderCircle, { "data-slot": "button-spinner", "aria-hidden": "true", className: "animate-spin motion-reduce:animate-none" }), _jsx("span", { className: "sr-only", children: loadingLabel })] })) : null, children] }));
+    const buttonProps = {
+        ...props,
+        'data-slot': 'button',
+        'data-variant': variant,
+        'data-size': size,
+        'data-loading': loading || undefined,
+        'aria-busy': loading || undefined,
+        'aria-disabled': loading || undefined,
+        className: cn('relative inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 data-loading:cursor-progress [&_svg]:pointer-events-none [&_svg]:shrink-0', VARIANT_CLASSES[variant], SIZE_CLASSES[size], className),
+        onClick: handleClick,
+        children: content,
+    };
+    if (render) {
+        // Non-button hosts (links) have no `disabled`; expose it via ARIA instead.
+        return renderElement(render, {
+            ...buttonProps,
+            'aria-disabled': inert || undefined,
+            'data-disabled': disabled || undefined,
+        });
+    }
+    return _jsx("button", { type: type, disabled: disabled, ...buttonProps });
+}

package/dist/primitives/checkbox.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+export interface CheckboxProps extends Omit<ComponentProps<'input'>, 'type' | 'size'> {
+    /**
+     * Called with the new checked state. Fires alongside `onChange`, so a form
+     * can use whichever it prefers.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Marks the box invalid: sets `aria-invalid="true"` and the destructive
+     * border. An explicit `aria-invalid` prop still wins.
+     */
+    invalid?: boolean;
+    /** Class for the wrapping `<span>` (the input itself takes `className`). */
+    rootClassName?: string;
+}
+/**
+ * A native `<input type="checkbox">` drawn as a 16 px box with a check mark.
+ * Native on purpose: it submits with a form, works with `<label htmlFor>`,
+ * answers Space without JavaScript, and costs no dialog/portal machinery.
+ * The input carries `data-slot="checkbox"` and a `data-invalid` hook; style
+ * the checked state with `checked:` / `peer-checked:`.
+ */
+export declare function Checkbox({ className, rootClassName, invalid, onCheckedChange, onChange, checked, defaultChecked, 'aria-invalid': ariaInvalid, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/primitives/checkbox.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+/**
+ * A native `<input type="checkbox">` drawn as a 16 px box with a check mark.
+ * Native on purpose: it submits with a form, works with `<label htmlFor>`,
+ * answers Space without JavaScript, and costs no dialog/portal machinery.
+ * The input carries `data-slot="checkbox"` and a `data-invalid` hook; style
+ * the checked state with `checked:` / `peer-checked:`.
+ */
+export function Checkbox({ className, rootClassName, invalid = false, onCheckedChange, onChange, checked, defaultChecked, 'aria-invalid': ariaInvalid, ...props }) {
+    const resolvedInvalid = ariaInvalid ?? (invalid || undefined);
+    return (_jsxs("span", { "data-slot": "checkbox-root", className: cn('relative inline-flex size-4 shrink-0', rootClassName), children: [_jsx("input", { type: "checkbox", "data-slot": "checkbox", "data-invalid": resolvedInvalid === true || resolvedInvalid === 'true' ? '' : undefined, "aria-invalid": resolvedInvalid, checked: checked, defaultChecked: defaultChecked, onChange: (event) => {
+                    onChange?.(event);
+                    onCheckedChange?.(event.currentTarget.checked);
+                }, className: cn(
+                // Same focus / invalid treatment as Input, so the two sit together.
+                'peer size-4 shrink-0 cursor-pointer appearance-none rounded-[4px] border border-input bg-background transition-colors outline-none checked:border-primary checked:bg-primary focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/30 disabled:cursor-not-allowed disabled:opacity-50', className), ...props }), _jsx(Check, { "aria-hidden": "true", "data-slot": "checkbox-indicator", className: "pointer-events-none absolute inset-0 m-auto size-3.5 text-primary-foreground opacity-0 peer-checked:opacity-100" })] }));
+}

package/dist/primitives/field.d.ts

@@ -0,0 +1,47 @@
+import type { ComponentProps } from 'react';
+export type FieldOrientation = 'vertical' | 'horizontal';
+export interface FieldProps extends ComponentProps<'div'> {
+    /**
+     * `vertical` (default) stacks label, control, description and error.
+     * `horizontal` puts a checkbox/switch beside its label.
+     */
+    orientation?: FieldOrientation;
+    /**
+     * Dims the label. A disabled control inside the field does this on its
+     * own (`:has(:disabled)`); the prop is for fields whose control cannot be.
+     */
+    disabled?: boolean;
+}
+export type FieldLabelProps = ComponentProps<'label'>;
+export type FieldDescriptionProps = ComponentProps<'p'>;
+export type FieldSetProps = ComponentProps<'fieldset'>;
+export type FieldLegendProps = ComponentProps<'legend'>;
+export interface FieldErrorProps extends ComponentProps<'p'> {
+    /**
+     * Several messages at once (e.g. from a schema validator). Each renders as
+     * its own `<p data-slot="field-error">` inside one wrapper that takes `id`
+     * and the other props; duplicates are shown once.
+     */
+    errors?: readonly string[];
+}
+declare function FieldRoot({ orientation, disabled, className, ...props }: FieldProps): import("react").JSX.Element;
+declare function FieldLabel({ className, ...props }: FieldLabelProps): import("react").JSX.Element;
+declare function FieldDescription({ className, ...props }: FieldDescriptionProps): import("react").JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: FieldErrorProps): import("react").JSX.Element | null;
+declare function FieldSet({ className, ...props }: FieldSetProps): import("react").JSX.Element;
+declare function FieldLegend({ className, ...props }: FieldLegendProps): import("react").JSX.Element;
+/**
+ * Form field layout: `Field` groups a control with `Field.Label`,
+ * `Field.Description` and `Field.Error`. It owns no state and no ids — wire
+ * `htmlFor` / `aria-describedby` yourself, so the markup stays obvious and
+ * works with any form library. `Field.Set` + `Field.Legend` group related
+ * fields (radio sets, consent boxes).
+ */
+export declare const Field: typeof FieldRoot & {
+    Label: typeof FieldLabel;
+    Description: typeof FieldDescription;
+    Error: typeof FieldError;
+    Set: typeof FieldSet;
+    Legend: typeof FieldLegend;
+};
+export {};

package/dist/primitives/field.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+const ORIENTATION_CLASSES = {
+    vertical: '',
+    horizontal: 'grid-cols-[auto_1fr] items-center',
+};
+function FieldRoot({ orientation = 'vertical', disabled, className, ...props }) {
+    return (_jsx("div", { "data-slot": "field", "data-orientation": orientation, "data-disabled": disabled ? 'true' : undefined, className: cn('group/field grid gap-2', ORIENTATION_CLASSES[orientation], className), ...props }));
+}
+function FieldLabel({ className, ...props }) {
+    return (_jsx("label", { "data-slot": "field-label", className: cn('flex select-none items-center gap-2 text-sm font-medium leading-none group-has-disabled/field:cursor-not-allowed group-has-disabled/field:opacity-50 group-data-[disabled=true]/field:pointer-events-none group-data-[disabled=true]/field:opacity-50', className), ...props }));
+}
+function FieldDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "field-description", className: cn('text-sm text-muted-foreground', className), ...props }));
+}
+function FieldError({ className, children, errors, ...props }) {
+    const unique = errors ? Array.from(new Set(errors)) : [];
+    if (unique.length > 0) {
+        // One element owns the id (and every other prop), so `aria-describedby`
+        // pointing at it reads out all of the messages.
+        const { id, ...rest } = props;
+        return (_jsx("div", { id: id, "data-slot": "field-errors", className: "flex flex-col gap-1", ...rest, children: unique.map((error) => (_jsx("p", { "data-slot": "field-error", className: cn('text-sm text-destructive', className), children: error }, error))) }));
+    }
+    if (children == null || children === false)
+        return null;
+    return (_jsx("p", { "data-slot": "field-error", className: cn('text-sm text-destructive', className), ...props, children: children }));
+}
+function FieldSet({ className, ...props }) {
+    return _jsx("fieldset", { "data-slot": "field-set", className: cn('grid gap-6', className), ...props });
+}
+function FieldLegend({ className, ...props }) {
+    return (_jsx("legend", { "data-slot": "field-legend", className: cn('text-base font-medium leading-none text-foreground', className), ...props }));
+}
+/**
+ * Form field layout: `Field` groups a control with `Field.Label`,
+ * `Field.Description` and `Field.Error`. It owns no state and no ids — wire
+ * `htmlFor` / `aria-describedby` yourself, so the markup stays obvious and
+ * works with any form library. `Field.Set` + `Field.Legend` group related
+ * fields (radio sets, consent boxes).
+ */
+export const Field = Object.assign(FieldRoot, {
+    Label: FieldLabel,
+    Description: FieldDescription,
+    Error: FieldError,
+    Set: FieldSet,
+    Legend: FieldLegend,
+});

package/dist/primitives/index.d.ts

@@ -1,10 +1,26 @@
+export type { AvatarProps, AvatarSize } from './avatar.js';
+export { Avatar, getInitials } from './avatar.js';
+export type { ButtonProps, ButtonSize, ButtonVariant } from './button.js';
+export { Button } from './button.js';
 export type { CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, } from './card.js';
 export { Card } from './card.js';
+export type { CheckboxProps } from './checkbox.js';
+export { Checkbox } from './checkbox.js';
 export type { EmptyStateProps, EmptyStateVariant } from './empty-state.js';
 export { EmptyState } from './empty-state.js';
+export type { FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldLegendProps, FieldOrientation, FieldProps, FieldSetProps, } from './field.js';
+export { Field } from './field.js';
 export type { FilterRailGroupProps, FilterRailProps } from './filter-rail.js';
 export { FilterRail } from './filter-rail.js';
+export type { InputProps } from './input.js';
+export { Input } from './input.js';
+export type { SheetCloseProps, SheetContentProps, SheetProps, SheetSide, SheetTriggerProps, } from './sheet.js';
+export { Sheet } from './sheet.js';
 export type { SkeletonProps } from './skeleton.js';
 export { Skeleton } from './skeleton.js';
 export type { StatusPillProps, StatusPillSize, StatusPillTone } from './status-pill.js';
 export { StatusPill } from './status-pill.js';
+export type { TextareaProps } from './textarea.js';
+export { Textarea } from './textarea.js';
+export type { ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupSize, } from './toggle-group.js';
+export { ToggleGroup } from './toggle-group.js';

package/dist/primitives/index.js

@@ -1,5 +1,13 @@
+export { Avatar, getInitials } from './avatar.js';
+export { Button } from './button.js';
 export { Card } from './card.js';
+export { Checkbox } from './checkbox.js';
 export { EmptyState } from './empty-state.js';
+export { Field } from './field.js';
 export { FilterRail } from './filter-rail.js';
+export { Input } from './input.js';
+export { Sheet } from './sheet.js';
 export { Skeleton } from './skeleton.js';
 export { StatusPill } from './status-pill.js';
+export { Textarea } from './textarea.js';
+export { ToggleGroup } from './toggle-group.js';

package/dist/primitives/input.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+export interface InputProps extends ComponentProps<'input'> {
+    /**
+     * Marks the field invalid: sets `aria-invalid="true"` and the destructive
+     * border/ring. Pair it with `aria-describedby` pointing at the error text.
+     * An explicit `aria-invalid` prop still wins.
+     */
+    invalid?: boolean;
+}
+export declare function Input({ invalid, type, className, 'aria-invalid': ariaInvalid, ...props }: InputProps): import("react").JSX.Element;

package/dist/primitives/input.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+export function Input({ invalid = false, type = 'text', className, 'aria-invalid': ariaInvalid, ...props }) {
+    const resolvedInvalid = ariaInvalid ?? (invalid || undefined);
+    return (_jsx("input", { type: type, "data-slot": "input", "data-invalid": resolvedInvalid === true || resolvedInvalid === 'true' ? '' : undefined, "aria-invalid": resolvedInvalid, className: cn(
+        // text-base below `sm` keeps iOS Safari from zooming on focus.
+        'flex h-10 w-full min-w-0 rounded-md border border-input bg-background px-3 py-2 text-base text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/30 file:border-0 file:bg-transparent file:text-sm file:font-medium sm:text-sm', className), ...props }));
+}

package/dist/primitives/sheet.d.ts

@@ -0,0 +1,68 @@
+import { type ButtonHTMLAttributes, type ComponentProps, type ReactNode } from 'react';
+import { type RenderElement } from '../lib/render-element.js';
+export type SheetSide = 'responsive' | 'bottom';
+export interface SheetProps {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called with the requested state (trigger, close button, Escape, backdrop). */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * `false` ignores every close request (Escape, backdrop, `Sheet.Close`,
+     * a native `dialog.close()`) — use it while a submit is in flight so the
+     * sheet cannot vanish under the user. Default `true`.
+     */
+    dismissible?: boolean;
+    children?: ReactNode;
+}
+export interface SheetTriggerProps extends ComponentProps<'button'> {
+    /** Render as another element, merging the trigger's props onto it. */
+    render?: RenderElement<ButtonHTMLAttributes<HTMLElement>>;
+}
+export interface SheetContentProps extends Omit<ComponentProps<'dialog'>, 'open'> {
+    /**
+     * `responsive` (default): a bottom sheet on phones, a centred dialog from
+     * `md` up. `bottom` keeps the bottom sheet at every width.
+     */
+    side?: SheetSide;
+    /** Class for the padded inner wrapper that holds the children. */
+    bodyClassName?: string;
+}
+export interface SheetCloseProps extends ComponentProps<'button'> {
+    /** Render as another element (e.g. a meda `Button`), merging close behaviour onto it. */
+    render?: RenderElement<ButtonHTMLAttributes<HTMLElement>>;
+}
+declare function SheetRoot({ open: openProp, defaultOpen, onOpenChange, dismissible, children, }: SheetProps): import("react").JSX.Element;
+declare function SheetTrigger({ render, onClick, className, children, ...props }: SheetTriggerProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+declare function SheetContent({ side, className, bodyClassName, children, onCancel, onClick, onClose, onKeyDown, onPointerDown, ...props }: SheetContentProps): import("react").JSX.Element;
+declare function SheetTitle({ className, id, ...props }: ComponentProps<'h2'>): import("react").JSX.Element;
+declare function SheetDescription({ className, id, ...props }: ComponentProps<'p'>): import("react").JSX.Element;
+declare function SheetClose({ render, onClick, children, ...props }: SheetCloseProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+/**
+ * A modal sheet on the native `<dialog>` element: a bottom sheet on phones and
+ * a centred dialog from `md` up. `showModal()` gives the top layer, an inert
+ * background and a Tab trap for free; the component adds controlled state,
+ * Escape / backdrop dismissal, scroll lock and focus return to the trigger.
+ * The entry fade is skipped under `prefers-reduced-motion`.
+ *
+ * ```tsx
+ * <Sheet>
+ *   <Sheet.Trigger>Add child</Sheet.Trigger>
+ *   <Sheet.Content>
+ *     <Sheet.Title>Add child</Sheet.Title>
+ *     <Sheet.Description>Only for this booking.</Sheet.Description>
+ *     …
+ *     <Sheet.Close aria-label="Close">×</Sheet.Close>
+ *   </Sheet.Content>
+ * </Sheet>
+ * ```
+ */
+export declare const Sheet: typeof SheetRoot & {
+    Trigger: typeof SheetTrigger;
+    Content: typeof SheetContent;
+    Title: typeof SheetTitle;
+    Description: typeof SheetDescription;
+    Close: typeof SheetClose;
+};
+export {};