@medalsocial/meda 2.8.1 → 3.2.0

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/primitives/toggle-group.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentProps } from 'react';
+export type ToggleGroupSize = 'sm' | 'md';
+export type ToggleGroupOrientation = 'horizontal' | 'vertical';
+interface ToggleGroupBaseProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange' | 'role'> {
+    size?: ToggleGroupSize;
+    orientation?: ToggleGroupOrientation;
+    /** Disables every item. */
+    disabled?: boolean;
+}
+export interface ToggleGroupSingleProps extends ToggleGroupBaseProps {
+    /**
+     * `single` (default) behaves like a radio group: exactly one chip can be
+     * chosen, arrow keys move focus AND selection (WAI-ARIA radio pattern), and
+     * the chosen chip cannot be un-chosen by clicking it again.
+     */
+    type?: 'single';
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string) => void;
+}
+export interface ToggleGroupMultipleProps extends ToggleGroupBaseProps {
+    /**
+     * `multiple` is a group of independent toggle buttons (`aria-pressed`);
+     * arrow keys only move focus, Space / Enter toggles.
+     */
+    type: 'multiple';
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+}
+export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
+export interface ToggleGroupItemProps extends Omit<ComponentProps<'button'>, 'value'> {
+    value: string;
+}
+declare function ToggleGroupRoot(props: ToggleGroupProps): import("react").JSX.Element;
+declare function ToggleGroupItem({ value, disabled: itemDisabled, className, children, onClick, onKeyDown, onFocus, ...props }: ToggleGroupItemProps): import("react").JSX.Element;
+/**
+ * Chip-style single- or multi-select. `type="single"` (default) is a
+ * `radiogroup`; `type="multiple"` is a `group` of `aria-pressed` toggles.
+ * Both use a roving tabindex (one Tab stop) with Arrow / Home / End keys.
+ * Give the group an accessible name via `aria-label` or `aria-labelledby`.
+ */
+export declare const ToggleGroup: typeof ToggleGroupRoot & {
+    Item: typeof ToggleGroupItem;
+};
+export {};

package/dist/primitives/toggle-group.js

@@ -0,0 +1,148 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useLayoutEffect, useRef, useState, } from 'react';
+import { cn } from '../lib/utils.js';
+const ToggleGroupContext = createContext(null);
+function useToggleGroupContext() {
+    const context = useContext(ToggleGroupContext);
+    if (!context)
+        throw new Error('ToggleGroup.Item must be rendered inside <ToggleGroup>.');
+    return context;
+}
+const ITEM_SELECTOR = '[data-slot="toggle-group-item"]';
+const NEXT_KEYS = {
+    horizontal: ['ArrowRight', 'ArrowDown'],
+    vertical: ['ArrowDown', 'ArrowRight'],
+};
+const PREV_KEYS = {
+    horizontal: ['ArrowLeft', 'ArrowUp'],
+    vertical: ['ArrowUp', 'ArrowLeft'],
+};
+const SIZE_CLASSES = {
+    sm: 'h-8 px-3 text-xs [&_svg]:size-3.5',
+    md: 'h-10 px-4 text-sm [&_svg]:size-4',
+};
+function toArray(value) {
+    if (Array.isArray(value))
+        return value;
+    return value == null ? [] : [value];
+}
+function ToggleGroupRoot(props) {
+    const { type = 'single', value, defaultValue, onValueChange, size = 'md', orientation = 'horizontal', disabled = false, className, children, ...rest } = props;
+    const rootRef = useRef(null);
+    const [uncontrolled, setUncontrolled] = useState(() => toArray(defaultValue));
+    const isControlled = value !== undefined;
+    const selected = isControlled ? toArray(value) : uncontrolled;
+    const [focused, setFocused] = useState(null);
+    const [tabbable, setTabbable] = useState(undefined);
+    const enabledItems = useCallback(() => Array.from(rootRef.current?.querySelectorAll(ITEM_SELECTOR) ?? []).filter((item) => !item.disabled), []);
+    // Roving tabindex: exactly one enabled item is in the tab order — the last
+    // focused one, else the (first) selected one, else the first enabled one.
+    // Measured from the DOM after each render so nested / conditional items
+    // just work; the state update bails out when nothing changed.
+    useLayoutEffect(() => {
+        const values = enabledItems().map((item) => item.dataset.value ?? '');
+        const next = [focused, ...selected].find((v) => v != null && values.includes(v)) ?? values[0];
+        setTabbable(next ?? null);
+    });
+    const commit = (next) => {
+        if (!isControlled)
+            setUncontrolled(next);
+        if (type === 'multiple') {
+            onValueChange?.(next);
+        }
+        else if (next[0] !== undefined) {
+            onValueChange?.(next[0]);
+        }
+    };
+    const toggle = (itemValue) => {
+        if (type === 'multiple') {
+            commit(selected.includes(itemValue)
+                ? selected.filter((v) => v !== itemValue)
+                : [...selected, itemValue]);
+            return;
+        }
+        // Radio semantics: re-choosing the current value is a no-op.
+        if (selected[0] !== itemValue)
+            commit([itemValue]);
+    };
+    const onItemKeyDown = (event) => {
+        const items = enabledItems();
+        const index = items.indexOf(event.currentTarget);
+        if (index === -1 || items.length === 0)
+            return;
+        let target;
+        if (NEXT_KEYS[orientation].includes(event.key))
+            target = items[(index + 1) % items.length];
+        else if (PREV_KEYS[orientation].includes(event.key))
+            target = items[(index - 1 + items.length) % items.length];
+        else if (event.key === 'Home')
+            target = items[0];
+        else if (event.key === 'End')
+            target = items[items.length - 1];
+        if (!target)
+            return;
+        event.preventDefault();
+        target.focus();
+        const targetValue = target.dataset.value ?? '';
+        setFocused(targetValue);
+        if (type === 'single')
+            toggle(targetValue);
+    };
+    // `aria-orientation` is only defined for radiogroup, not for group.
+    const groupSemantics = type === 'single'
+        ? {
+            role: 'radiogroup',
+            'aria-orientation': orientation,
+            'aria-disabled': disabled || undefined,
+        }
+        : { role: 'group', 'aria-disabled': disabled || undefined };
+    const context = {
+        type,
+        size,
+        orientation,
+        disabled,
+        selected,
+        tabbable,
+        toggle,
+        focusItem: setFocused,
+        onItemKeyDown,
+    };
+    return (_jsx(ToggleGroupContext.Provider, { value: context, children: _jsx("div", { ref: rootRef, ...groupSemantics, "data-slot": "toggle-group", "data-type": type, "data-orientation": orientation, className: cn('flex flex-wrap gap-2', orientation === 'vertical' && 'flex-col items-stretch', className), ...rest, children: children }) }));
+}
+function ToggleGroupItem({ value, disabled: itemDisabled, className, children, onClick, onKeyDown, onFocus, ...props }) {
+    const group = useToggleGroupContext();
+    const isOn = group.selected.includes(value);
+    const disabled = group.disabled || Boolean(itemDisabled);
+    // Before the group has measured (SSR / first paint) keep the selected item
+    // — or every item when nothing is selected — reachable by Tab.
+    const inTabOrder = group.tabbable === undefined ? group.selected.length === 0 || isOn : group.tabbable === value;
+    const semantics = group.type === 'single'
+        ? { role: 'radio', 'aria-checked': isOn }
+        : { 'aria-pressed': isOn };
+    return (_jsx("button", { type: "button", "data-slot": "toggle-group-item", "data-value": value, "data-state": isOn ? 'on' : 'off', disabled: disabled, tabIndex: inTabOrder ? 0 : -1, ...semantics, className: cn('inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-full border 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 [&_svg]:pointer-events-none [&_svg]:shrink-0', isOn
+            ? 'border-primary bg-primary text-primary-foreground'
+            : 'border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground', SIZE_CLASSES[group.size], className), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            group.focusItem(value);
+            group.toggle(value);
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented)
+                group.onItemKeyDown(event);
+        }, onFocus: (event) => {
+            onFocus?.(event);
+            group.focusItem(value);
+        }, ...props, children: children }));
+}
+/**
+ * Chip-style single- or multi-select. `type="single"` (default) is a
+ * `radiogroup`; `type="multiple"` is a `group` of `aria-pressed` toggles.
+ * Both use a roving tabindex (one Tab stop) with Arrow / Home / End keys.
+ * Give the group an accessible name via `aria-label` or `aria-labelledby`.
+ */
+export const ToggleGroup = Object.assign(ToggleGroupRoot, {
+    Item: ToggleGroupItem,
+});

package/dist/styles/base.css

@@ -0,0 +1,40 @@
+/* @medalsocial/meda/styles/base.css
+ *
+ * Lean foundation for consumers that render only a few meda surfaces:
+ * canonical design tokens + the Tailwind theme bridge + the base layer.
+ *
+ * Deliberately does NOT `@source` meda's component output and does NOT pull
+ * in `@xyflow/react`'s stylesheet. Pair it with the per-feature stylesheets
+ * for the surfaces you render, e.g.
+ *
+ *   @import "tailwindcss";
+ *   @import "@medalsocial/meda/styles/base.css";
+ *   @import "@medalsocial/meda/primitives/styles.css";
+ *   @import "@medalsocial/meda/calendar/styles.css";
+ *
+ * `@medalsocial/meda/styles.css` (theme.css) remains the batteries-included
+ * entry: base + every feature, including workflow-builder.
+ */
+
+@import "./tokens.css";
+@import "./bridge.css";
+
+@theme inline {
+  /* Font families — Geist + Geist Mono only (no Inter) */
+  --font-sans: var(--font-family-sans);
+  --font-mono: var(--font-family-mono);
+}
+
+@layer base {
+  :root {
+    color-scheme: light;
+    --auth-gradient-primary: var(--color-brand-500);
+    --auth-gradient-secondary: var(--color-brand-700);
+    --auth-gradient-base: var(--color-brand-800);
+  }
+
+  .dark,
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+}

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";