@medalsocial/meda 3.0.0 → 3.2.0

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

@@ -4,15 +4,23 @@ 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,9 +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/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 {};

package/dist/primitives/sheet.js

@@ -0,0 +1,303 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { renderElement } from '../lib/render-element.js';
+import { cn } from '../lib/utils.js';
+const SheetContext = createContext(null);
+function useSheetContext(part) {
+    const context = useContext(SheetContext);
+    if (!context)
+        throw new Error(`Sheet.${part} must be rendered inside <Sheet>.`);
+    return context;
+}
+const FOCUSABLE = 'a[href],area[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
+// One page-wide scroll lock, reference-counted, so a second sheet closing
+// cannot unlock the page under a first that is still open.
+let scrollLocks = 0;
+let scrollOverflowBefore = '';
+function lockScroll() {
+    const root = document.documentElement;
+    if (scrollLocks === 0) {
+        scrollOverflowBefore = root.style.overflow;
+        root.style.overflow = 'hidden';
+    }
+    scrollLocks += 1;
+}
+function unlockScroll() {
+    scrollLocks = Math.max(0, scrollLocks - 1);
+    if (scrollLocks === 0)
+        document.documentElement.style.overflow = scrollOverflowBefore;
+}
+/**
+ * A rendered host that is a bare `<button>` defaults to `type="submit"` inside
+ * a form; give it `type="button"` unless the caller chose a type.
+ */
+function hostDefaults(render) {
+    if (!isValidElement(render) || render.type !== 'button')
+        return {};
+    const own = render.props.type;
+    return own === undefined ? { type: 'button' } : {};
+}
+/** A rendered `<a href>` must not navigate away from the sheet it opens or closes. */
+function stopAnchorNavigation(event) {
+    if (event.currentTarget instanceof HTMLAnchorElement)
+        event.preventDefault();
+}
+function SheetRoot({ open: openProp, defaultOpen = false, onOpenChange, dismissible = true, children, }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const open = isControlled ? openProp : uncontrolled;
+    const [titleId, registerTitle] = useState(undefined);
+    const [descriptionId, registerDescription] = useState(undefined);
+    const triggerRef = useRef(null);
+    const defaultTitleId = useId();
+    const defaultDescriptionId = useId();
+    const requestOpenChange = useCallback((next) => {
+        if (!next && !dismissible)
+            return;
+        if (!isControlled)
+            setUncontrolled(next);
+        onOpenChange?.(next);
+    }, [dismissible, isControlled, onOpenChange]);
+    return (_jsx(SheetContext.Provider, { value: {
+            open,
+            dismissible,
+            requestOpenChange,
+            titleId,
+            descriptionId,
+            defaultTitleId,
+            defaultDescriptionId,
+            registerTitle,
+            registerDescription,
+            triggerRef,
+        }, children: children }));
+}
+function SheetTrigger({ render, onClick, className, children, ...props }) {
+    const sheet = useSheetContext('Trigger');
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        stopAnchorNavigation(event);
+        sheet.triggerRef.current = event.currentTarget;
+        sheet.requestOpenChange(true);
+    };
+    const triggerProps = {
+        ...props,
+        'data-slot': 'sheet-trigger',
+        'aria-haspopup': 'dialog',
+        'aria-expanded': sheet.open,
+        'data-state': sheet.open ? 'open' : 'closed',
+        className,
+        onClick: handleClick,
+    };
+    if (render) {
+        // Children given to the trigger win; otherwise the rendered element keeps its own.
+        return renderElement(render, {
+            ...hostDefaults(render),
+            ...triggerProps,
+            ...(children == null ? {} : { children }),
+        });
+    }
+    return (_jsx("button", { type: "button", ...triggerProps, children: children }));
+}
+const SIDE_CLASSES = {
+    responsive: cn('inset-x-0 top-auto bottom-0 w-full max-w-none rounded-t-2xl', 'md:inset-x-auto md:top-1/2 md:bottom-auto md:left-1/2 md:w-full md:max-w-md md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-xl'),
+    bottom: 'inset-x-0 top-auto bottom-0 w-full max-w-none rounded-t-2xl',
+};
+// Padding lives on the inner wrapper, never on the <dialog>: a click that
+// lands on the <dialog> element itself is then always a backdrop click.
+const BODY_CLASSES = {
+    responsive: 'pb-[max(1.5rem,env(safe-area-inset-bottom))] md:pb-6',
+    bottom: 'pb-[max(1.5rem,env(safe-area-inset-bottom))]',
+};
+function SheetContent({ side = 'responsive', className, bodyClassName, children, onCancel, onClick, onClose, onKeyDown, onPointerDown, ...props }) {
+    const sheet = useSheetContext('Content');
+    const dialogRef = useRef(null);
+    const restoreRef = useRef(null);
+    const closingRef = useRef(false);
+    const pressStartedOnBackdrop = useRef(false);
+    const { open, dismissible, requestOpenChange } = sheet;
+    const showDialog = useCallback((dialog) => {
+        if (typeof dialog.showModal === 'function') {
+            dialog.showModal();
+            return;
+        }
+        dialog.setAttribute('open', '');
+        // React focuses `autoFocus` children itself (it never renders the
+        // attribute), so only pick a target when focus is still outside.
+        if (dialog.contains(document.activeElement))
+            return;
+        const target = dialog.querySelector('[autofocus]') ??
+            dialog.querySelector(FOCUSABLE);
+        target?.focus();
+    }, []);
+    // Open with showModal(): the browser puts the sheet in the top layer, makes
+    // everything behind it inert and traps Tab inside. Environments without it
+    // (jsdom, very old engines) fall back to the `open` attribute and a manual
+    // first-focus, so the sheet still renders and is still operable.
+    useLayoutEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (open) {
+            if (dialog.hasAttribute('open'))
+                return;
+            const active = document.activeElement;
+            restoreRef.current =
+                sheet.triggerRef.current ?? (active instanceof HTMLElement ? active : null);
+            showDialog(dialog);
+            return;
+        }
+        if (!dialog.hasAttribute('open'))
+            return;
+        closingRef.current = true;
+        if (typeof dialog.close === 'function')
+            dialog.close();
+        else
+            dialog.removeAttribute('open');
+        closingRef.current = false;
+        const restore = restoreRef.current;
+        restoreRef.current = null;
+        if (restore?.isConnected)
+            restore.focus();
+    }, [open, sheet.triggerRef, showDialog]);
+    // The top layer does not stop the page behind from scrolling on touch
+    // devices, so hold the root's overflow while the sheet is open.
+    useEffect(() => {
+        if (!open)
+            return;
+        lockScroll();
+        return unlockScroll;
+    }, [open]);
+    // Unmounting while open (route change) must still hand focus back.
+    useEffect(() => () => {
+        const restore = restoreRef.current;
+        if (restore?.isConnected)
+            restore.focus();
+    }, []);
+    const handleCancel = (event) => {
+        // A platform close request (Android back, Escape where keydown did not
+        // run): keep React in charge of the open state.
+        onCancel?.(event);
+        const consumerPrevented = event.defaultPrevented;
+        event.preventDefault();
+        if (!consumerPrevented)
+            requestOpenChange(false);
+    };
+    // A close nobody asked React for — `<form method="dialog">`, a direct
+    // `dialog.close()` — must not leave the state (and the scroll lock) open.
+    const handleClose = (event) => {
+        onClose?.(event);
+        if (closingRef.current || !open)
+            return;
+        const dialog = event.currentTarget;
+        if (!dismissible) {
+            showDialog(dialog);
+            return;
+        }
+        requestOpenChange(false);
+    };
+    const handlePointerDown = (event) => {
+        onPointerDown?.(event);
+        pressStartedOnBackdrop.current = event.target === event.currentTarget;
+    };
+    const handleClick = (event) => {
+        onClick?.(event);
+        const startedOnBackdrop = pressStartedOnBackdrop.current;
+        pressStartedOnBackdrop.current = false;
+        if (event.defaultPrevented || event.target !== event.currentTarget)
+            return;
+        // A press that began inside (selecting text) and ended over the
+        // backdrop is not a dismissal. `detail === 0` is a keyboard/synthetic
+        // click, which has no pointerdown to compare against.
+        if (!startedOnBackdrop && event.detail !== 0)
+            return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const inside = rect.width > 0 &&
+            event.clientX >= rect.left &&
+            event.clientX <= rect.right &&
+            event.clientY >= rect.top &&
+            event.clientY <= rect.bottom;
+        if (!inside)
+            requestOpenChange(false);
+    };
+    return (_jsx("dialog", { ref: dialogRef, "data-slot": "sheet", "data-side": side, "data-state": open ? 'open' : 'closed', "aria-modal": "true", "aria-labelledby": sheet.titleId, "aria-describedby": sheet.descriptionId, onCancel: handleCancel, onClose: handleClose, onClick: handleClick, onPointerDown: handlePointerDown, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            // Handle Escape here (preventing it also stops the native `cancel`),
+            // so it behaves the same in every engine, jsdom included.
+            if (!event.defaultPrevented && event.key === 'Escape') {
+                event.preventDefault();
+                requestOpenChange(false);
+            }
+        }, className: cn(
+        // Reset the UA dialog box, then place it ourselves.
+        'fixed m-0 max-h-[90dvh] overflow-y-auto border-0 bg-background p-0 text-sm text-foreground shadow-lg outline-none', 
+        // A scrim, not a theme colour: it must darken in light AND dark mode.
+        'backdrop:bg-black/10', 'opacity-100 transition-opacity duration-200 starting:opacity-0 motion-reduce:transition-none', SIDE_CLASSES[side], className), ...props, children: open ? (_jsx("div", { "data-slot": "sheet-body", className: cn('relative p-6', BODY_CLASSES[side], bodyClassName), children: children })) : null }));
+}
+function SheetTitle({ className, id, ...props }) {
+    const sheet = useSheetContext('Title');
+    const { registerTitle } = sheet;
+    const resolvedId = id ?? sheet.defaultTitleId;
+    useLayoutEffect(() => {
+        registerTitle(resolvedId);
+        return () => registerTitle(undefined);
+    }, [registerTitle, resolvedId]);
+    return (_jsx("h2", { "data-slot": "sheet-title", id: resolvedId, className: cn('text-lg font-semibold', className), ...props }));
+}
+function SheetDescription({ className, id, ...props }) {
+    const sheet = useSheetContext('Description');
+    const { registerDescription } = sheet;
+    const resolvedId = id ?? sheet.defaultDescriptionId;
+    useLayoutEffect(() => {
+        registerDescription(resolvedId);
+        return () => registerDescription(undefined);
+    }, [registerDescription, resolvedId]);
+    return (_jsx("p", { "data-slot": "sheet-description", id: resolvedId, className: cn('text-muted-foreground', className), ...props }));
+}
+function SheetClose({ render, onClick, children, ...props }) {
+    const sheet = useSheetContext('Close');
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        stopAnchorNavigation(event);
+        sheet.requestOpenChange(false);
+    };
+    const closeProps = { ...props, 'data-slot': 'sheet-close', onClick: handleClick };
+    if (render) {
+        return renderElement(render, {
+            ...hostDefaults(render),
+            ...closeProps,
+            ...(children == null ? {} : { children }),
+        });
+    }
+    return (_jsx("button", { type: "button", ...closeProps, children: children }));
+}
+/**
+ * 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 const Sheet = Object.assign(SheetRoot, {
+    Trigger: SheetTrigger,
+    Content: SheetContent,
+    Title: SheetTitle,
+    Description: SheetDescription,
+    Close: SheetClose,
+});

package/dist/primitives/textarea.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'react';
+export interface TextareaProps extends ComponentProps<'textarea'> {
+    /**
+     * 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;
+}
+/**
+ * Multi-line text input matching `Input`. Grows with its content where the
+ * browser supports `field-sizing: content`, starting at `min-h-16`.
+ */
+export declare function Textarea({ invalid, className, 'aria-invalid': ariaInvalid, ...props }: TextareaProps): import("react").JSX.Element;

package/dist/primitives/textarea.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+/**
+ * Multi-line text input matching `Input`. Grows with its content where the
+ * browser supports `field-sizing: content`, starting at `min-h-16`.
+ */
+export function Textarea({ invalid = false, className, 'aria-invalid': ariaInvalid, ...props }) {
+    const resolvedInvalid = ariaInvalid ?? (invalid || undefined);
+    return (_jsx("textarea", { "data-slot": "textarea", "data-invalid": resolvedInvalid === true || resolvedInvalid === 'true' ? '' : undefined, "aria-invalid": resolvedInvalid, className: cn(
+        // text-base below `sm` keeps iOS Safari from zooming on focus.
+        'flex field-sizing-content min-h-16 w-full 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 sm:text-sm', className), ...props }));
+}

package/dist/styles/booking.css

@@ -0,0 +1,10 @@
+/* @medalsocial/meda/booking/styles.css
+ *
+ * Generates only the Tailwind utilities used by `@medalsocial/meda/booking`
+ * (the booking screens). The screens are built on meda primitives, so import
+ * `@medalsocial/meda/primitives/styles.css` too. Requires the theme bridge:
+ * import `@medalsocial/meda/styles/bridge.css` (your own shadcn tokens) or
+ * `@medalsocial/meda/styles/base.css` (meda tokens) once, before this file.
+ * Paths resolve relative to dist/styles/.
+ */
+@source "../booking/**/*.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -63,6 +63,10 @@
       "types": "./dist/calendar/index.d.ts",
       "import": "./dist/calendar/index.js"
     },
+    "./booking": {
+      "types": "./dist/booking/index.d.ts",
+      "default": "./dist/booking/index.js"
+    },
     "./workflow-builder": {
       "types": "./dist/workflow-builder/index.d.ts",
       "import": "./dist/workflow-builder/index.js"
@@ -116,6 +120,9 @@
     "./calendar/styles.css": {
       "default": "./dist/styles/calendar.css"
     },
+    "./booking/styles.css": {
+      "default": "./dist/styles/booking.css"
+    },
     "./primitives/styles.css": {
       "default": "./dist/styles/primitives.css"
     },