@medalsocial/meda 2.8.1 → 3.0.0

package/README.md

@@ -12,6 +12,56 @@ pnpm add @medalsocial/meda lucide-react
 
 Peer deps: `react >= 19`, `react-dom >= 19`, and `lucide-react`.
 
+Feature peers are **optional** — install them only for the entry points that use
+them (package managers no longer auto-install them):
+
+| Peer | Needed by |
+| --- | --- |
+| `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities` | `@medalsocial/meda` (root barrel), `/shell`, `/kanban`, `/email-builder` |
+| `@xyflow/react` | `@medalsocial/meda` (root barrel), `/workflow-builder`. (Its stylesheet is vendored into `styles.css` / `workflow-builder/styles.css`, so the CSS compiles without the package.) |
+| `three`, `@react-three/fiber` | `/voice` (`VoiceOrb`) |
+| `react-markdown`, `remark-gfm`, `rehype-highlight` | `/markdown-view` |
+| `next-themes` | `NextThemesAdapter` / `themeAdapter="next-themes"` in `/shell` |
+
+```bash
+# Full Medal app (root barrel / shell):
+pnpm add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities @xyflow/react
+```
+
+Lean surfaces such as `@medalsocial/meda/calendar` and
+`@medalsocial/meda/primitives` need none of them. Fonts are not bundled either:
+the tokens name `Geist` / `Geist Mono`, so load them yourself (for example
+`@fontsource-variable/geist` + `@fontsource-variable/geist-mono`, or
+`next/font`).
+
+## Upgrading to 3.0
+
+3.0 makes the feature peers **optional**, so npm and pnpm no longer install them
+for you. Nothing else in the API changed.
+
+**If you import any of** the root `@medalsocial/meda`, `@medalsocial/meda/shell`,
+`/email-builder`, `/kanban`, `/workflow-builder`, or `@medalsocial/meda/styles.css`,
+add the peers to your own `package.json`:
+
+```bash
+pnpm add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities @xyflow/react
+```
+
+**If you render the 3D `VoiceOrb`** (`@medalsocial/meda/voice`), also add:
+
+```bash
+pnpm add three @react-three/fiber
+```
+
+`three` used to be a regular dependency of meda; it is now an optional peer.
+The `@fontsource-variable/geist*` packages are no longer installed by meda
+either — if you `@import` them, list them yourself.
+
+**Lean consumers need nothing:** `@medalsocial/meda/calendar`,
+`@medalsocial/meda/primitives`, `styles/bridge.css`, `styles/base.css` and the
+per-feature stylesheets never reach an optional peer (see
+[Lean consumer setup](#lean-consumer-setup)).
+
 ## Tailwind CSS v4 setup
 
 Meda ships a `styles.css` with its design tokens. Import it once in your entry stylesheet or entry script:
@@ -42,6 +92,49 @@ Avoid placing token overrides before the Meda import; `tokens.css` defines the p
 @import '@medalsocial/meda/styles.css';
 ```
 
+### Lean consumer setup
+
+`styles.css` is batteries-included: it scans **every** meda component so
+Tailwind generates all of their utilities (~22 KB gzip of CSS), and it pulls in
+the `@xyflow/react` stylesheet. That is right for full Medal apps; it is
+overkill for a marketing or customer site that renders a calendar and a few
+primitives. Use the lean entries instead — each feature stylesheet generates
+only the utilities its own compiled output uses:
+
+```css
+@import 'tailwindcss';
+
+/* 1. Foundation — pick ONE */
+@import '@medalsocial/meda/styles/base.css';   /* meda tokens + theme bridge + base layer */
+/* @import '@medalsocial/meda/styles/bridge.css'; */ /* theme bridge only: bring your own tokens */
+
+/* 2. Only the surfaces you render */
+@import '@medalsocial/meda/primitives/styles.css';
+@import '@medalsocial/meda/calendar/styles.css';
+```
+
+| Entry | Contains |
+| --- | --- |
+| `styles.css` | `styles/base.css` + every feature (full component scan + xyflow CSS). Unchanged for existing consumers. |
+| `styles/base.css` | `tokens.css` + `bridge.css` + the `color-scheme` base layer + Geist font mapping. No component scan, no xyflow. |
+| `styles/bridge.css` | `@custom-variant dark` + the `@theme inline` mappings (`bg-primary`, `text-muted-foreground`, `bg-brand-500`, ...). No token values, no fonts. |
+| `styles/tokens.css` | Raw CSS custom properties only. |
+| `primitives/styles.css` | Utilities for `@medalsocial/meda/primitives` (Button, Input, ToggleGroup, Avatar, Card, Skeleton, StatusPill, EmptyState, FilterRail; not MarkdownView). |
+| `calendar/styles.css` | Utilities for `@medalsocial/meda/calendar`. |
+| `workflow-builder/styles.css` | `@xyflow/react`'s stylesheet + utilities for `@medalsocial/meda/workflow-builder`. The only lean entry that ships xyflow CSS. |
+
+Feature stylesheets never include the foundation, so importing several of them
+does not duplicate tokens — import exactly one foundation first. Never combine
+the lean entries with `styles.css` (it already contains all of them).
+
+**Bring your own tokens.** meda components use shadcn-style semantic tokens
+(`--background`, `--foreground`, `--primary`, `--primary-foreground`, `--card`,
+`--muted`, `--muted-foreground`, `--accent`, `--border`, `--input`, `--ring`,
+`--destructive`, ...). A site that already defines those names can import
+`styles/bridge.css` instead of `styles/base.css`, and meda parts re-theme to the
+site's palette automatically. `bridge.css` does not map `--font-sans`, so the
+site's own font stack is kept.
+
 ## Usage
 
 Use `AppShell` for the styled shell surface:
@@ -219,7 +312,9 @@ See the [demo app](./demo) for a live playground.
 - `@medalsocial/meda/recipes/next` — copyable Next.js adoption recipe metadata
 - `@medalsocial/meda/theme` — app-scoped token bridge helpers
 - `@medalsocial/meda/marketing` — marketing sections and campaign blocks
-- `@medalsocial/meda/styles.css` — design tokens + base styles
+- `@medalsocial/meda/primitives` — foundation primitives (`Button`, `Input`, `ToggleGroup`, `Avatar` + `getInitials`, `Card`, `Skeleton`, `StatusPill`, `EmptyState`, `FilterRail`); also re-exported from the root
+- `@medalsocial/meda/styles.css` — design tokens + base styles + every component's utilities
+- `@medalsocial/meda/styles/base.css`, `@medalsocial/meda/styles/bridge.css`, `@medalsocial/meda/<feature>/styles.css` — lean stylesheet entries (see [Lean consumer setup](#lean-consumer-setup))
 
 ## Alternative: shadcn registry
 

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/index.d.ts

@@ -1,10 +1,18 @@
+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 { EmptyStateProps, EmptyStateVariant } from './empty-state.js';
 export { EmptyState } from './empty-state.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 { 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 { ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupSize, } from './toggle-group.js';
+export { ToggleGroup } from './toggle-group.js';

package/dist/primitives/index.js

@@ -1,5 +1,9 @@
+export { Avatar, getInitials } from './avatar.js';
+export { Button } from './button.js';
 export { Card } from './card.js';
 export { EmptyState } from './empty-state.js';
 export { FilterRail } from './filter-rail.js';
+export { Input } from './input.js';
 export { Skeleton } from './skeleton.js';
 export { StatusPill } from './status-pill.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/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;
+  }
+}