steadymeet-ui 0.0.0-stage → 0.1.0

package/Button.d.ts

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'icon';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/Button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from './cn.js';
+const Button = forwardRef(function Button({ variant = 'primary', size = 'md', className, type = 'button', ...props }, ref) {
+    return _jsx("button", { ref: ref, type: type, className: cn('ui-btn', `ui-btn-${variant}`, `ui-btn-${size}`, className), ...props });
+});
+export default Button;

package/Checkbox.d.ts

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    label?: ReactNode;
+    indeterminate?: boolean;
+}
+declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/Checkbox.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from 'react';
+import { Check, Minus } from 'lucide-react';
+import { cn } from './cn.js';
+const Checkbox = forwardRef(function Checkbox({ label, indeterminate, className, id, ...props }, forwardedRef) {
+    const innerRef = useRef(null);
+    useEffect(() => {
+        if (innerRef.current)
+            innerRef.current.indeterminate = Boolean(indeterminate);
+    }, [indeterminate]);
+    return _jsxs("label", { className: cn('ui-checkbox', className), htmlFor: id, children: [_jsx("input", { ref: (node) => {
+                    innerRef.current = node;
+                    if (typeof forwardedRef === 'function')
+                        forwardedRef(node);
+                    else if (forwardedRef)
+                        forwardedRef.current = node;
+                }, type: "checkbox", id: id, ...props }), _jsx("span", { className: "ui-checkbox-box", "aria-hidden": "true", children: indeterminate ? _jsx(Minus, { size: 12, strokeWidth: 3 }) : _jsx(Check, { size: 12, strokeWidth: 3 }) }), label !== undefined && _jsx("span", { className: "ui-checkbox-label", children: label })] });
+});
+export default Checkbox;

package/Dropdown.d.ts

@@ -0,0 +1,17 @@
+import * as RadixDropdown from '@radix-ui/react-dropdown-menu';
+import { ReactNode } from 'react';
+export interface DropdownProps {
+    trigger: ReactNode;
+    children: ReactNode;
+    align?: 'start' | 'center' | 'end';
+    className?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function Dropdown({ trigger, children, align, className, open, onOpenChange }: DropdownProps): import("react").JSX.Element;
+export declare function DropdownItem({ className, ...props }: RadixDropdown.DropdownMenuItemProps): import("react").JSX.Element;
+export declare function DropdownSeparator({ className, ...props }: RadixDropdown.DropdownMenuSeparatorProps): import("react").JSX.Element;
+export declare function DropdownLabel({ className, ...props }: RadixDropdown.DropdownMenuLabelProps): import("react").JSX.Element;
+export declare function DropdownSub(props: RadixDropdown.DropdownMenuSubProps): import("react").JSX.Element;
+export declare function DropdownSubTrigger({ className, ...props }: RadixDropdown.DropdownMenuSubTriggerProps): import("react").JSX.Element;
+export declare function DropdownSubContent({ className, ...props }: RadixDropdown.DropdownMenuSubContentProps): import("react").JSX.Element;

package/Dropdown.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixDropdown from '@radix-ui/react-dropdown-menu';
+import { cn } from './cn.js';
+export function Dropdown({ trigger, children, align = 'end', className, open, onOpenChange }) {
+    return _jsxs(RadixDropdown.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(RadixDropdown.Trigger, { asChild: true, children: trigger }), _jsx(RadixDropdown.Portal, { children: _jsx(RadixDropdown.Content, { align: align, sideOffset: 8, className: cn('ui-dropdown-content', className), children: children }) })] });
+}
+export function DropdownItem({ className, ...props }) {
+    return _jsx(RadixDropdown.Item, { className: cn('ui-dropdown-item', className), ...props });
+}
+export function DropdownSeparator({ className, ...props }) {
+    return _jsx(RadixDropdown.Separator, { className: cn('ui-dropdown-separator', className), ...props });
+}
+export function DropdownLabel({ className, ...props }) {
+    return _jsx(RadixDropdown.Label, { className: cn('ui-dropdown-label', className), ...props });
+}
+export function DropdownSub(props) {
+    return _jsx(RadixDropdown.Sub, { ...props });
+}
+export function DropdownSubTrigger({ className, ...props }) {
+    return _jsx(RadixDropdown.SubTrigger, { className: cn('ui-dropdown-item', 'ui-dropdown-sub-trigger', className), ...props });
+}
+export function DropdownSubContent({ className, ...props }) {
+    return _jsx(RadixDropdown.Portal, { children: _jsx(RadixDropdown.SubContent, { sideOffset: 6, alignOffset: -6, className: cn('ui-dropdown-content', className), ...props }) });
+}

package/ErrorState.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type ErrorCode = '400' | '401' | '403' | '404' | '500' | '503';
+export interface ErrorStateProps {
+    code?: ErrorCode;
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+export default function ErrorState({ code, title, description, icon, actions, className }: ErrorStateProps): import("react").JSX.Element;

package/ErrorState.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Ghost, Lock, ServerCrash, ShieldAlert, TriangleAlert, WifiOff } from 'lucide-react';
+import { cn } from './cn.js';
+const defaultIcons = {
+    '400': _jsx(TriangleAlert, { size: 26 }),
+    '401': _jsx(Lock, { size: 26 }),
+    '403': _jsx(ShieldAlert, { size: 26 }),
+    '404': _jsx(Ghost, { size: 26 }),
+    '500': _jsx(ServerCrash, { size: 26 }),
+    '503': _jsx(WifiOff, { size: 26 }),
+};
+export default function ErrorState({ code = '500', title, description, icon, actions, className }) {
+    return _jsxs("div", { className: cn('error-page-card', className), children: [_jsx("span", { className: "error-page-icon", "aria-hidden": "true", children: icon ?? defaultIcons[code] }), _jsx("p", { className: "error-page-code", children: `Error ${code}` }), _jsx("h1", { children: title }), description !== undefined && _jsx("p", { children: description }), actions !== undefined && _jsx("div", { className: "error-page-actions", children: actions })] });
+}

package/Input.d.ts

@@ -0,0 +1,4 @@
+import { InputHTMLAttributes } from 'react';
+export type InputProps = InputHTMLAttributes<HTMLInputElement>;
+declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Input;

package/Input.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from './cn.js';
+const Input = forwardRef(function Input({ className, ...props }, ref) {
+    return _jsx("input", { ref: ref, className: cn('ui-input', className), ...props });
+});
+export default Input;

package/Link.d.ts

@@ -0,0 +1,10 @@
+import { AnchorHTMLAttributes } from 'react';
+export type LinkVariant = 'text' | 'muted' | 'button-primary' | 'button-secondary';
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    variant?: LinkVariant;
+}
+/** The classes a link of this variant wears, for a router's own link component (Next's, React Router's) to take. */
+export declare function linkClassName(variant?: LinkVariant, className?: string): string;
+/** A plain <a>. Apps with a client-side router wrap their router's link with `linkClassName` instead. */
+declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export default Link;

package/Link.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from './cn.js';
+const variantClassName = {
+    text: 'ui-link',
+    muted: 'ui-link ui-link-muted',
+    'button-primary': 'ui-btn ui-btn-primary ui-btn-md',
+    'button-secondary': 'ui-btn ui-btn-secondary ui-btn-md',
+};
+/** The classes a link of this variant wears, for a router's own link component (Next's, React Router's) to take. */
+export function linkClassName(variant = 'text', className) {
+    return cn(variantClassName[variant], className);
+}
+/** A plain <a>. Apps with a client-side router wrap their router's link with `linkClassName` instead. */
+const Link = forwardRef(function Link({ variant = 'text', className, ...props }, ref) {
+    return _jsx("a", { ref: ref, className: linkClassName(variant, className), ...props });
+});
+export default Link;

package/OtpInput.d.ts

@@ -0,0 +1,11 @@
+export interface OtpInputProps {
+    length?: number;
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    /** Marks the boxes as wrong (red border, a short shake). Clear it when the person edits. */
+    invalid?: boolean;
+    'aria-label'?: string;
+}
+export default function OtpInput({ length, value, onChange, disabled, autoFocus, invalid, 'aria-label': ariaLabel }: OtpInputProps): import("react").JSX.Element;

package/OtpInput.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { otpBackspace, otpDigits, otpEdit } from './otp.js';
+// One box per digit, with a row of dots under them that fill as the code is typed. `value` is always
+// the digits typed so far with no gaps, so a click on a later box lands on the next empty one.
+export default function OtpInput({ length = 6, value, onChange, disabled, autoFocus, invalid, 'aria-label': ariaLabel }) {
+    const inputsRef = useRef([]);
+    // The digits typed so far, kept current between a change and the re-render it causes: focus moves in
+    // the same event, before `value` has caught up, and a stale length would bounce it back.
+    const filledRef = useRef(value.length);
+    useEffect(() => { filledRef.current = value.length; }, [value]);
+    const focusBox = (index) => inputsRef.current[Math.max(0, Math.min(index, length - 1))]?.focus();
+    function handleChange(index, event) {
+        const edit = otpEdit(value, index, event.target.value, length);
+        onChange(edit.value);
+        filledRef.current = edit.value.length;
+        focusBox(edit.focus);
+    }
+    function handleKeyDown(index, event) {
+        if (event.key === 'Backspace' && !value[index] && index > 0) {
+            event.preventDefault();
+            const edit = otpBackspace(value, index);
+            onChange(edit.value);
+            filledRef.current = edit.value.length;
+            focusBox(edit.focus);
+        }
+        else if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            focusBox(index - 1);
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            focusBox(Math.min(index + 1, filledRef.current));
+        }
+    }
+    function handlePaste(event) {
+        const pasted = otpDigits(event.clipboardData.getData('text'), length);
+        if (!pasted)
+            return;
+        event.preventDefault();
+        onChange(pasted);
+        filledRef.current = pasted.length;
+        focusBox(pasted.length);
+    }
+    return _jsxs("div", { className: "otp-field", children: [_jsx("div", { className: "otp-input", role: "group", "aria-label": ariaLabel, "data-invalid": invalid ? 'true' : undefined, children: Array.from({ length }, (_, index) => (_jsx("input", { ref: (el) => { inputsRef.current[index] = el; }, className: "otp-input-box", type: "text", inputMode: "numeric", autoComplete: index === 0 ? 'one-time-code' : 'off', value: value[index] ?? '', disabled: disabled, autoFocus: autoFocus && index === 0, "aria-label": ariaLabel ? `${ariaLabel} ${index + 1}/${length}` : undefined, "aria-invalid": invalid || undefined, onChange: (event) => handleChange(index, event), onKeyDown: (event) => handleKeyDown(index, event), onPaste: handlePaste, onFocus: (event) => {
+                        if (index > filledRef.current)
+                            focusBox(filledRef.current);
+                        else
+                            event.target.select();
+                    } }, index))) }), _jsx("div", { className: "otp-dots", "aria-hidden": "true", children: Array.from({ length }, (_, index) => _jsx("span", { className: "otp-dot", "data-filled": index < value.length ? 'true' : undefined }, index)) })] });
+}

package/Pagination.d.ts

@@ -0,0 +1,9 @@
+export interface PaginationProps {
+    page: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    previousLabel?: string;
+    nextLabel?: string;
+    className?: string;
+}
+export default function Pagination({ page, totalPages, onPageChange, previousLabel, nextLabel, className }: PaginationProps): import("react").JSX.Element | null;

package/Pagination.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from './cn.js';
+function pageList(page, totalPages) {
+    if (totalPages <= 7)
+        return Array.from({ length: totalPages }, (_, index) => index + 1);
+    const pages = new Set([1, totalPages, page, page - 1, page + 1]);
+    const sorted = [...pages].filter((value) => value >= 1 && value <= totalPages).sort((a, b) => a - b);
+    const result = [];
+    sorted.forEach((value, index) => {
+        if (index > 0 && value - sorted[index - 1] > 1)
+            result.push('ellipsis');
+        result.push(value);
+    });
+    return result;
+}
+export default function Pagination({ page, totalPages, onPageChange, previousLabel = 'Previous', nextLabel = 'Next', className }) {
+    if (totalPages <= 1)
+        return null;
+    return _jsxs("nav", { className: cn('ui-pagination', className), "aria-label": "Pagination", children: [_jsx("button", { type: "button", className: "ui-pagination-nav", onClick: () => onPageChange(page - 1), disabled: page <= 1, "aria-label": previousLabel, children: _jsx(ChevronLeft, { size: 16 }) }), pageList(page, totalPages).map((entry, index) => entry === 'ellipsis'
+                ? _jsx("span", { className: "ui-pagination-ellipsis", children: "\u2026" }, `ellipsis-${index}`)
+                : _jsx("button", { type: "button", className: cn('ui-pagination-page', { active: entry === page }), "aria-current": entry === page ? 'page' : undefined, onClick: () => onPageChange(entry), children: entry }, entry)), _jsx("button", { type: "button", className: "ui-pagination-nav", onClick: () => onPageChange(page + 1), disabled: page >= totalPages, "aria-label": nextLabel, children: _jsx(ChevronRight, { size: 16 }) })] });
+}

package/README.md

@@ -1,3 +1,85 @@
-# Temporary Holding Version
+# steadymeet-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+SteadyMeet's React UI kit: accessible components and the design tokens behind them, styled with Tailwind CSS v4. SteadyMeet's web app uses it, and it is meant to be reused in other apps.
+
+## Setup
+
+Requirements: React 19 and Tailwind CSS v4.
+
+```bash
+npm install steadymeet-ui
+```
+
+In the app's main stylesheet:
+
+```css
+@import "tailwindcss";
+@import "steadymeet-ui/tokens.css";      /* colours, light/dark, accent presets */
+@import "steadymeet-ui/components.css";  /* the components' styles */
+```
+
+`components.css` uses `@apply` with the kit's theme, so it must be imported in a Tailwind stylesheet after `tokens.css`. It also tells Tailwind to scan the kit's source for utility classes.
+
+Wrap the app once in the toast provider:
+
+```tsx
+import { ToastProvider } from 'steadymeet-ui';
+
+<ToastProvider>{children}</ToastProvider>
+```
+
+## Theming
+
+Colours are CSS variables prefixed `--steadymeet-`, so they can't clash with an app's own variables. You use them through Tailwind classes such as `bg-panel`, `text-ink`, `border-line`, `bg-brand` and `text-brand-text`:
+
+- **Dark mode:** put `class="dark"` on `<html>` or any ancestor.
+- **Accent:** set `data-accent="blue" | "green" | "purple" | "red"` on `<html>`. Orange is the default.
+- **Your own palette:** after importing `tokens.css`, redefine the variables (`--steadymeet-ink`, `--steadymeet-panel`, `--steadymeet-brand`, `--steadymeet-brand-dark`, `--steadymeet-brand-text`…). `brand-text` is the accent used as text and focus rings, so keep it readable (WCAG AA) on `--steadymeet-panel`.
+
+## Components
+
+| Component | Notes |
+| --- | --- |
+| `Button` | `variant`: primary, secondary, ghost, danger. `size`: sm, md, icon. |
+| `Input`, `Textarea` | Plain fields that forward refs. |
+| `OtpInput` | One box per digit. Handles paste and one-time-code autofill. `invalid` shakes it. |
+| `Checkbox` | `label`, `indeterminate`. |
+| `RadioGroup` | Options with an optional `description` each. |
+| `Switch` | `role="switch"`. With `icon` or `description` it becomes a settings row. |
+| `Slider` | Range input with a label and a value badge. |
+| `Select` | Radix select. |
+| `Dropdown`, `DropdownItem`, `DropdownSeparator`, `DropdownLabel`, `DropdownSub*` | Radix menu. |
+| `Tabs` | Segmented tabs (`role="tablist"`). |
+| `Table`, `TableSkeleton` | Column definitions with `render`. Takes an `emptyState`. |
+| `Pagination` | Collapses long ranges with ellipses. |
+| `Skeleton`, `SkeletonGroup`, `ListSkeleton`, `LinesSkeleton` | Loading placeholders. The shimmer stops under reduced motion. |
+| `ErrorState` | Error card for 400–503 pages and failed loads. |
+| `ToastProvider`, `useToast` | `useToast()(message)`. |
+| `Link`, `linkClassName` | A plain `<a>`. With a router, pass `linkClassName(variant)` to the router's own link. |
+| `cn` | Joins class names; skips falsy values and takes `{ class: boolean }` objects. |
+
+## Rules for screens built on the kit
+
+- Build from the kit, never raw `<button>`, `<input>` or hex colours. If a piece is missing, add it to the kit.
+- While data loads, show skeletons shaped like the content, inside a `SkeletonGroup` with a translated label. Never a bare "Loading…".
+- Every list or table has an empty state and an error state (`ErrorState`).
+- Text is passed in as props (`label`, `previousLabel`…), so the app translates it. The kit has no locale of its own.
+
+## Developing
+
+```bash
+npm test -w steadymeet-ui        # unit tests (node:test)
+npm run typecheck -w steadymeet-ui
+npm run lint -w steadymeet-ui
+npm run build -w steadymeet-ui   # the publishable package, in dist/
+```
+
+Inside the monorepo the apps use `src/` directly, so there is nothing to build while developing. `npm run build` writes `dist/`: compiled JavaScript (with each file's `'use client'` kept), type declarations, the styles and a `package.json` pointing at them.
+
+### Publishing
+
+1. Raise `version` in `package.json` (semver: a breaking change to a component's props or a renamed token is a major).
+2. `npm run build -w steadymeet-ui`
+3. `npm publish ./packages/ui/dist` (signed in with `npm login`). Publish `dist`, never `packages/ui`: that folder is marked private so it can't be published by mistake.
+
+The kit must not import app code (APIs, locales, routers, workspace state). Anything that needs app code stays in the app: SteadyMeet keeps its avatars, presence, emoji and stickers in `apps/web/components/ui`.

package/Radio.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface RadioOption {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    name: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: RadioOption[];
+    legend?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+export default function RadioGroup({ name, value, onChange, options, legend, className, disabled }: RadioGroupProps): import("react").JSX.Element;

package/Radio.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './cn.js';
+export default function RadioGroup({ name, value, onChange, options, legend, className, disabled }) {
+    return _jsxs("fieldset", { className: cn('ui-radio-group', className), disabled: disabled, children: [legend !== undefined && _jsx("legend", { className: "ui-radio-legend", children: legend }), options.map((option) => _jsxs("label", { className: "ui-radio", htmlFor: `${name}-${option.value}`, children: [_jsx("input", { type: "radio", id: `${name}-${option.value}`, name: name, value: option.value, checked: value === option.value, onChange: () => onChange(option.value), disabled: option.disabled }), _jsx("span", { className: "ui-radio-dot", "aria-hidden": "true" }), _jsxs("span", { className: "ui-radio-text", children: [_jsx("span", { className: "ui-radio-label", children: option.label }), option.description !== undefined && _jsx("span", { className: "ui-radio-description", children: option.description })] })] }, option.value))] });
+}

package/Select.d.ts

@@ -0,0 +1,17 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: SelectOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    triggerClassName?: string;
+    'aria-label'?: string;
+    id?: string;
+}
+export default function Select({ value, onChange, options, placeholder, disabled, className, triggerClassName, id, ...rest }: SelectProps): import("react").JSX.Element;

package/Select.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixSelect from '@radix-ui/react-select';
+import { Check, ChevronDown } from 'lucide-react';
+import { cn } from './cn.js';
+export default function Select({ value, onChange, options, placeholder, disabled, className, triggerClassName, id, ...rest }) {
+    return _jsxs(RadixSelect.Root, { value: value, onValueChange: onChange, disabled: disabled, children: [_jsxs(RadixSelect.Trigger, { id: id, className: cn('ui-select-trigger', triggerClassName), "aria-label": rest['aria-label'], children: [_jsx(RadixSelect.Value, { placeholder: placeholder }), _jsx(RadixSelect.Icon, { className: "ui-select-icon", children: _jsx(ChevronDown, { size: 15 }) })] }), _jsx(RadixSelect.Portal, { children: _jsx(RadixSelect.Content, { className: cn('ui-select-content', className), position: "popper", sideOffset: 6, children: _jsx(RadixSelect.Viewport, { children: options.map((option) => _jsxs(RadixSelect.Item, { value: option.value, disabled: option.disabled, className: "ui-select-item", children: [_jsx(RadixSelect.ItemText, { children: option.label }), _jsx(RadixSelect.ItemIndicator, { className: "ui-select-item-indicator", children: _jsx(Check, { size: 14 }) })] }, option.value)) }) }) })] });
+}

package/Skeleton.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties } from 'react';
+export interface SkeletonProps {
+    className?: string;
+    style?: CSSProperties;
+}
+/** A shimmering placeholder block shown where data is still loading. Decorative: wrap a group in `SkeletonGroup` so it announces "loading" once. */
+export default function Skeleton({ className, style }: SkeletonProps): import("react").JSX.Element;
+/** Marks an area as busy for assistive tech while its placeholders show. */
+export declare function SkeletonGroup({ label, className, children }: {
+    label: string;
+    className?: string;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+/** A row of avatar + two lines, repeated: the shape of a people or conversation list while it loads. */
+export declare function ListSkeleton({ rows, className }: {
+    rows?: number;
+    className?: string;
+}): import("react").JSX.Element;
+/** Plain lines of text, repeated: the shape of a settings panel or a report while it loads. */
+export declare function LinesSkeleton({ rows, className }: {
+    rows?: number;
+    className?: string;
+}): import("react").JSX.Element;

package/Skeleton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './cn.js';
+/** A shimmering placeholder block shown where data is still loading. Decorative: wrap a group in `SkeletonGroup` so it announces "loading" once. */
+export default function Skeleton({ className, style }) {
+    return _jsx("span", { className: cn('skeleton', className), style: style, "aria-hidden": "true" });
+}
+/** Marks an area as busy for assistive tech while its placeholders show. */
+export function SkeletonGroup({ label, className, children }) {
+    return _jsx("div", { className: className, role: "status", "aria-busy": "true", "aria-label": label, children: children });
+}
+/** A row of avatar + two lines, repeated: the shape of a people or conversation list while it loads. */
+export function ListSkeleton({ rows = 6, className }) {
+    return _jsx("div", { className: cn('grid gap-3', className), "aria-hidden": "true", children: Array.from({ length: rows }, (_, row) => _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-10 shrink-0 rounded-full" }), _jsxs("div", { className: "grid flex-1 gap-2", children: [_jsx(Skeleton, { className: "h-3.5", style: { width: `${40 + ((row * 17) % 30)}%` } }), _jsx(Skeleton, { className: "h-3 w-1/4" })] })] }, row)) });
+}
+/** Plain lines of text, repeated: the shape of a settings panel or a report while it loads. */
+export function LinesSkeleton({ rows = 4, className }) {
+    return _jsx("div", { className: cn('grid max-w-xl gap-3', className), "aria-hidden": "true", children: Array.from({ length: rows }, (_, row) => _jsx(Skeleton, { className: "h-4", style: { width: `${row === 0 ? 45 : 70 + ((row * 11) % 30)}%` } }, row)) });
+}

package/Slider.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface SliderProps {
+    value: number;
+    min: number;
+    max: number;
+    step?: number;
+    onChange: (value: number) => void;
+    label?: ReactNode;
+    valueLabel?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export default function Slider({ value, min, max, step, onChange, label, valueLabel, disabled, className }: SliderProps): import("react").JSX.Element;

package/Slider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './cn.js';
+export default function Slider({ value, min, max, step = 1, onChange, label, valueLabel, disabled, className }) {
+    return _jsxs("div", { className: cn('ui-slider', className), children: [(label !== undefined || valueLabel !== undefined) && _jsxs("div", { className: "ui-slider-header", children: [label !== undefined && _jsx("span", { className: "ui-slider-label", children: label }), valueLabel !== undefined && _jsx("span", { className: "ui-slider-value", "aria-hidden": "true", children: valueLabel })] }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: (event) => onChange(Number(event.target.value)), "aria-label": typeof label === 'string' ? label : undefined, "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max })] });
+}

package/Switch.d.ts

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'type' | 'role'> {
+    checked: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: ReactNode;
+    icon?: ReactNode;
+    description?: ReactNode;
+}
+export default function Switch({ checked, onChange, label, icon, description, className, disabled, ...props }: SwitchProps): import("react").JSX.Element;

package/Switch.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './cn.js';
+export default function Switch({ checked, onChange, label, icon, description, className, disabled, ...props }) {
+    const detailed = icon !== undefined || description !== undefined;
+    return _jsxs("button", { type: "button", role: "switch", "aria-checked": checked, disabled: disabled, className: cn('ui-switch', { 'ui-switch-detailed': detailed, 'ui-switch-plain': detailed && icon === undefined }, className), onClick: () => onChange?.(!checked), ...props, children: [icon !== undefined && _jsx("span", { className: "ui-switch-icon", "aria-hidden": "true", children: icon }), label !== undefined && (detailed
+                ? _jsxs("span", { className: "ui-switch-text", children: [_jsx("span", { className: "ui-switch-label", children: label }), description !== undefined && _jsx("span", { className: "ui-switch-description", children: description })] })
+                : _jsx("span", { className: "ui-switch-label", children: label })), _jsx("span", { className: cn('toggle-switch', { enabled: checked }), "aria-hidden": "true", children: _jsx("i", {}) })] });
+}

package/Table.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface TableColumn<T> {
+    key: string;
+    header: ReactNode;
+    render: (row: T) => ReactNode;
+    className?: string;
+}
+export default function Table<T>({ columns, rows, rowKey, emptyState }: {
+    columns: TableColumn<T>[];
+    rows: T[];
+    rowKey: (row: T) => string;
+    emptyState?: ReactNode;
+}): import("react").JSX.Element;

package/Table.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Table({ columns, rows, rowKey, emptyState }) {
+    if (rows.length === 0 && emptyState)
+        return _jsx("div", { className: "data-table-wrap", children: _jsx("div", { className: "data-table-empty", children: emptyState }) });
+    return _jsx("div", { className: "data-table-wrap", children: _jsxs("table", { className: "data-table", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((column) => _jsx("th", { className: column.className, children: column.header }, column.key)) }) }), _jsx("tbody", { children: rows.map((row) => _jsx("tr", { children: columns.map((column) => _jsx("td", { className: column.className, children: column.render(row) }, column.key)) }, rowKey(row))) })] }) });
+}

package/TableSkeleton.d.ts

@@ -0,0 +1,5 @@
+/** Placeholder rows shaped like a `Table` while its data loads. */
+export default function TableSkeleton({ columns, rows }: {
+    columns?: number;
+    rows?: number;
+}): import("react").JSX.Element;

package/TableSkeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Skeleton from './Skeleton.js';
+/** Placeholder rows shaped like a `Table` while its data loads. */
+export default function TableSkeleton({ columns = 4, rows = 6 }) {
+    return _jsx("div", { className: "data-table-wrap", "aria-hidden": "true", children: _jsxs("table", { className: "data-table", children: [_jsx("thead", { children: _jsx("tr", { children: Array.from({ length: columns }, (_, column) => _jsx("th", { children: _jsx(Skeleton, { className: "h-3.5 w-20" }) }, column)) }) }), _jsx("tbody", { children: Array.from({ length: rows }, (_, row) => _jsx("tr", { children: Array.from({ length: columns }, (_, column) => _jsx("td", { children: _jsx(Skeleton, { className: "h-4", style: { width: `${55 + ((row * 7 + column * 13) % 40)}%` } }) }, column)) }, row)) })] }) });
+}

package/Tabs.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface TabItem {
+    key: string;
+    label: ReactNode;
+}
+export interface TabsProps {
+    items: TabItem[];
+    active: string;
+    onChange: (key: string) => void;
+    className?: string;
+    tabClassName?: string;
+}
+export default function Tabs({ items, active, onChange, className, tabClassName }: TabsProps): import("react").JSX.Element;

package/Tabs.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from './cn.js';
+export default function Tabs({ items, active, onChange, className, tabClassName = 'ui-tab' }) {
+    return _jsx("div", { className: cn('ui-tabs', className), role: "tablist", children: items.map((item) => _jsx("button", { type: "button", role: "tab", "aria-selected": active === item.key, className: cn(tabClassName, { active: active === item.key }), onClick: () => onChange(item.key), children: item.label }, item.key)) });
+}

package/Textarea.d.ts

@@ -0,0 +1,4 @@
+import { TextareaHTMLAttributes } from 'react';
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;

package/Textarea.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from './cn.js';
+const Textarea = forwardRef(function Textarea({ className, ...props }, ref) {
+    return _jsx("textarea", { ref: ref, className: cn('ui-textarea', className), ...props });
+});
+export default Textarea;

package/Toast.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type ShowToast = (message: string) => void;
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useToast(): ShowToast;
+export {};

package/Toast.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useRef, useState } from 'react';
+const ToastContext = createContext(null);
+export function ToastProvider({ children }) {
+    const [message, setMessage] = useState('');
+    const timeoutRef = useRef(undefined);
+    const showToast = useCallback((next) => {
+        setMessage(next);
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setMessage(''), 2600);
+    }, []);
+    return _jsxs(ToastContext.Provider, { value: showToast, children: [children, message && _jsx("div", { className: "toast", role: "status", children: message })] });
+}
+export function useToast() {
+    const context = useContext(ToastContext);
+    if (!context)
+        throw new Error('useToast must be used within ToastProvider');
+    return context;
+}

package/cn.d.ts

@@ -0,0 +1,2 @@
+export type ClassValue = string | number | null | undefined | false | Record<string, boolean | undefined>;
+export declare function cn(...values: ClassValue[]): string;

package/cn.js

@@ -0,0 +1,15 @@
+export function cn(...values) {
+    const classes = [];
+    for (const value of values) {
+        if (!value)
+            continue;
+        if (typeof value === 'string' || typeof value === 'number') {
+            classes.push(String(value));
+            continue;
+        }
+        for (const key in value)
+            if (value[key])
+                classes.push(key);
+    }
+    return classes.join(' ');
+}

package/index.d.ts

@@ -0,0 +1,37 @@
+export { default as Button } from './Button.js';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.js';
+export { default as Input } from './Input.js';
+export type { InputProps } from './Input.js';
+export { default as OtpInput } from './OtpInput.js';
+export type { OtpInputProps } from './OtpInput.js';
+export { otpDigits, otpEdit, otpBackspace } from './otp.js';
+export { default as Textarea } from './Textarea.js';
+export type { TextareaProps } from './Textarea.js';
+export { default as Checkbox } from './Checkbox.js';
+export type { CheckboxProps } from './Checkbox.js';
+export { default as RadioGroup } from './Radio.js';
+export type { RadioGroupProps, RadioOption } from './Radio.js';
+export { default as Switch } from './Switch.js';
+export type { SwitchProps } from './Switch.js';
+export { default as Slider } from './Slider.js';
+export type { SliderProps } from './Slider.js';
+export { default as Select } from './Select.js';
+export type { SelectProps, SelectOption } from './Select.js';
+export { Dropdown, DropdownItem, DropdownSeparator, DropdownLabel, DropdownSub, DropdownSubTrigger, DropdownSubContent } from './Dropdown.js';
+export type { DropdownProps } from './Dropdown.js';
+export { default as Pagination } from './Pagination.js';
+export type { PaginationProps } from './Pagination.js';
+export { default as Link, linkClassName } from './Link.js';
+export type { LinkProps, LinkVariant } from './Link.js';
+export { default as Table } from './Table.js';
+export type { TableColumn } from './Table.js';
+export { default as Tabs } from './Tabs.js';
+export type { TabsProps, TabItem } from './Tabs.js';
+export { ToastProvider, useToast } from './Toast.js';
+export { default as Skeleton, SkeletonGroup, ListSkeleton, LinesSkeleton } from './Skeleton.js';
+export { default as TableSkeleton } from './TableSkeleton.js';
+export type { SkeletonProps } from './Skeleton.js';
+export { default as ErrorState } from './ErrorState.js';
+export type { ErrorStateProps, ErrorCode } from './ErrorState.js';
+export { cn } from './cn.js';
+export type { ClassValue } from './cn.js';

package/index.js

@@ -0,0 +1,20 @@
+export { default as Button } from './Button.js';
+export { default as Input } from './Input.js';
+export { default as OtpInput } from './OtpInput.js';
+export { otpDigits, otpEdit, otpBackspace } from './otp.js';
+export { default as Textarea } from './Textarea.js';
+export { default as Checkbox } from './Checkbox.js';
+export { default as RadioGroup } from './Radio.js';
+export { default as Switch } from './Switch.js';
+export { default as Slider } from './Slider.js';
+export { default as Select } from './Select.js';
+export { Dropdown, DropdownItem, DropdownSeparator, DropdownLabel, DropdownSub, DropdownSubTrigger, DropdownSubContent } from './Dropdown.js';
+export { default as Pagination } from './Pagination.js';
+export { default as Link, linkClassName } from './Link.js';
+export { default as Table } from './Table.js';
+export { default as Tabs } from './Tabs.js';
+export { ToastProvider, useToast } from './Toast.js';
+export { default as Skeleton, SkeletonGroup, ListSkeleton, LinesSkeleton } from './Skeleton.js';
+export { default as TableSkeleton } from './TableSkeleton.js';
+export { default as ErrorState } from './ErrorState.js';
+export { cn } from './cn.js';

package/otp.d.ts

@@ -0,0 +1,16 @@
+/** Keeps only the digits of `text`, at most `length` of them. */
+export declare const otpDigits: (text: string, length: number) => string;
+/**
+ * What a change in box `index` does to the code typed so far (always digits with no gaps). One digit
+ * replaces that box, several at once (a one-time-code autofill) fill from there, and an emptied box
+ * drops its digit and closes the gap. `focus` is the box to move to.
+ */
+export declare function otpEdit(value: string, index: number, text: string, length: number): {
+    value: string;
+    focus: number;
+};
+/** Backspace in an empty box deletes the digit before it. */
+export declare function otpBackspace(value: string, index: number): {
+    value: string;
+    focus: number;
+};

package/otp.js

@@ -0,0 +1,18 @@
+/** Keeps only the digits of `text`, at most `length` of them. */
+export const otpDigits = (text, length) => text.replace(/\D/g, '').slice(0, length);
+/**
+ * What a change in box `index` does to the code typed so far (always digits with no gaps). One digit
+ * replaces that box, several at once (a one-time-code autofill) fill from there, and an emptied box
+ * drops its digit and closes the gap. `focus` is the box to move to.
+ */
+export function otpEdit(value, index, text, length) {
+    const typed = otpDigits(text, length);
+    if (!typed)
+        return { value: value.slice(0, index) + value.slice(index + 1), focus: index };
+    const next = otpDigits(value.slice(0, index) + typed + value.slice(index + (typed.length === 1 ? 1 : 0)), length);
+    return { value: next, focus: Math.min(index + typed.length, length - 1) };
+}
+/** Backspace in an empty box deletes the digit before it. */
+export function otpBackspace(value, index) {
+    return { value: value.slice(0, index - 1) + value.slice(index), focus: index - 1 };
+}

package/package.json

@@ -1,6 +1,36 @@
 {
   "name": "steadymeet-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "SteadyMeet's React UI kit: accessible components and design tokens, styled with Tailwind CSS v4.",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-select": "^2.3.7",
+    "lucide-react": "^1.33.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "tailwindcss": "^4"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "tailwindcss",
+    "design-system"
+  ],
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./tokens.css": "./styles/tokens.css",
+    "./components.css": "./styles/components.css"
+  }
+}

package/styles/components.css

@@ -0,0 +1,117 @@
+/* The kit's component styles. Import after tokens.css, inside a Tailwind v4 stylesheet: the rules use @apply with its theme. */
+@source "..";
+
+@layer components {
+  .otp-field { @apply flex flex-col items-center gap-4; }
+  .otp-input { @apply mt-1 grid w-full grid-cols-6 gap-2 sm:gap-3; }
+  .otp-input-box { @apply aspect-square w-full min-w-0 rounded-2xl border border-line bg-panel text-center font-serif text-2xl text-ink outline-none transition-colors focus:border-brand-text focus:ring-3 focus:ring-brand/15 disabled:cursor-not-allowed disabled:opacity-60 sm:text-3xl; }
+  .otp-input-box[aria-invalid='true'] { @apply border-danger-text focus:border-danger-text focus:ring-danger-text/15; }
+  .otp-input[data-invalid='true'] { animation: otp-shake 0.4s ease-in-out; }
+  .otp-dots { @apply flex items-center justify-center gap-2; }
+  .otp-dot { @apply size-2 rounded-full bg-line transition-colors; }
+  .otp-dot[data-filled='true'] { @apply bg-ink; }
+  @keyframes otp-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
+  @media (prefers-reduced-motion: reduce) { .otp-input[data-invalid='true'] { animation: none; } }
+
+  .data-table-wrap { @apply overflow-x-auto rounded-2xl border border-line bg-canvas; }
+  .data-table thead { @apply bg-workspace-secondary; }
+  .data-table { @apply w-full min-w-[720px] border-collapse text-left text-sm; }
+  .data-table thead th { @apply border-b border-line px-4 py-3 text-xs font-bold tracking-wide text-muted uppercase; }
+  .data-table tbody td { @apply border-b border-line px-4 py-3.5 align-middle; }
+  .data-table tbody tr:last-child td { @apply border-b-0; }
+  .data-table tbody tr:hover { @apply bg-hover; }
+  .data-table-empty { @apply grid justify-items-center gap-2 p-10 text-center text-sm text-muted; }
+
+  .toggle-switch { @apply relative h-6 w-11 shrink-0 rounded-full bg-[#c9cfcc] transition-colors; }
+  .toggle-switch i { @apply absolute top-0.5 left-0.5 size-5 rounded-full bg-white transition-transform; }
+  .toggle-switch.enabled { @apply bg-brand ring-1 ring-brand-text; }
+  .toggle-switch.enabled i { @apply translate-x-5; }
+
+  .toast { @apply fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-xl bg-[#18201d] px-4 py-3 text-sm font-bold text-white; }
+
+  .ui-btn { @apply inline-flex items-center justify-center gap-2 rounded-xl border-0 px-[18px] py-3 text-sm font-bold transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-brand-text focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-wait disabled:opacity-70; }
+  .ui-btn-primary { @apply bg-brand text-ink hover:bg-brand-dark; }
+  .ui-btn-secondary { @apply border border-line bg-panel text-ink hover:border-brand-text hover:bg-brand/8; }
+  .ui-btn-ghost { @apply border-0 bg-transparent text-muted hover:bg-hover hover:text-ink; }
+  .ui-btn-danger { @apply bg-danger text-white hover:bg-[#9c3a32]; }
+  .ui-btn-sm { @apply px-3 py-2 text-xs; }
+  .ui-btn-md { @apply px-[18px] py-3 text-sm; }
+  .ui-btn-icon { @apply size-10 p-0; }
+  .ui-input { @apply w-full rounded-xl border border-line bg-panel px-3.5 py-3 text-sm font-normal text-ink outline-none placeholder:text-muted focus:border-brand-text focus:ring-3 focus:ring-brand/15 disabled:cursor-not-allowed disabled:opacity-60; }
+  .ui-textarea { @apply w-full rounded-xl border border-line bg-panel px-3.5 py-3 text-sm font-normal text-ink outline-none focus:border-brand-text focus:ring-3 focus:ring-brand/15 disabled:cursor-not-allowed disabled:opacity-60; }
+  .ui-checkbox { @apply inline-flex cursor-pointer items-center gap-2.5 text-sm text-ink has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50; }
+  .ui-checkbox input { @apply sr-only; }
+  .ui-checkbox-box { @apply grid size-[18px] shrink-0 place-items-center rounded-md border border-line bg-panel text-transparent transition-colors; }
+  .ui-checkbox input:checked + .ui-checkbox-box, .ui-checkbox input:indeterminate + .ui-checkbox-box { @apply border-brand bg-brand text-ink; }
+  .ui-checkbox input:focus-visible + .ui-checkbox-box { @apply ring-2 ring-brand-text ring-offset-2; }
+  .ui-checkbox-label { @apply select-none; }
+  .ui-radio-group { @apply m-0 grid gap-2 border-0 p-0; }
+  .ui-radio-legend { @apply mb-1 p-0 text-xs font-bold text-ink; }
+  .ui-radio { @apply flex cursor-pointer items-start gap-2.5 rounded-xl border border-line bg-panel p-3 text-sm text-ink hover:border-brand-text has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50; }
+  .ui-radio input { @apply sr-only; }
+  .ui-radio-dot { @apply mt-0.5 grid size-[18px] shrink-0 place-items-center rounded-full border border-line bg-panel; }
+  .ui-radio-dot::after { content: ''; @apply size-2 scale-0 rounded-full bg-brand transition-transform; }
+  .ui-radio input:checked ~ .ui-radio-dot { @apply border-brand; }
+  .ui-radio input:checked ~ .ui-radio-dot::after { @apply scale-100; }
+  .ui-radio input:focus-visible ~ .ui-radio-dot { @apply ring-2 ring-brand-text ring-offset-2; }
+  .ui-radio-text { @apply grid gap-0.5; }
+  .ui-radio-label { @apply font-bold; }
+  .ui-radio-description { @apply text-xs font-normal text-muted; }
+  .ui-switch { @apply flex w-full items-center justify-between gap-3 rounded-xl border-0 bg-transparent p-0 text-left text-ink focus-visible:ring-2 focus-visible:ring-brand-text focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50; }
+  .ui-switch .toggle-switch { @apply ml-auto; }
+  .ui-switch-label { @apply text-sm font-bold; }
+  .ui-switch-detailed { @apply grid grid-cols-[30px_minmax(0,1fr)_auto] items-center gap-2 rounded-xl bg-hover px-3 py-2.5 hover:bg-hover-strong; }
+  /* A detailed switch without an icon has no icon column: the text takes the first one. */
+  .ui-switch-plain { grid-template-columns: minmax(0, 1fr) auto; }
+  .ui-switch-icon { @apply text-brand-text; }
+  .ui-switch-text { @apply grid; }
+  .ui-switch-detailed .ui-switch-label { @apply text-xs; }
+  .ui-switch-description { @apply mt-1 block text-[10px] leading-4 font-normal text-muted; }
+  .ui-switch-detailed .toggle-switch { @apply h-5 w-9; }
+  .ui-switch-detailed .toggle-switch i { @apply size-4; }
+  .ui-switch-detailed .toggle-switch.enabled i { @apply translate-x-4; }
+  .ui-slider { @apply grid gap-2; }
+  .ui-slider-header { @apply flex items-center justify-between text-sm; }
+  .ui-slider-label { @apply font-bold text-ink; }
+  .ui-slider-value { @apply grid min-w-6 place-items-center rounded-full bg-hover px-1.5 py-0.5 text-[11px] font-bold text-muted; }
+  .ui-slider input[type='range'] { @apply h-1.5 w-full cursor-pointer appearance-none rounded-full bg-line accent-brand disabled:cursor-not-allowed disabled:opacity-50; }
+  .ui-slider input[type='range']::-webkit-slider-thumb { @apply size-4 appearance-none rounded-full bg-brand shadow ring-2 ring-white; }
+  .ui-slider input[type='range']::-moz-range-thumb { @apply size-4 rounded-full border-0 bg-brand shadow ring-2 ring-white; }
+  .ui-select-trigger { @apply flex w-full items-center justify-between gap-2 rounded-xl border border-line bg-panel px-3.5 py-2.5 text-sm font-normal text-ink outline-none focus:border-brand-text focus:ring-3 focus:ring-brand/15 disabled:cursor-not-allowed disabled:opacity-60 data-[placeholder]:text-muted; }
+  .ui-select-icon { @apply text-muted; }
+  .ui-select-content { @apply z-[100] overflow-hidden rounded-xl border border-line bg-panel p-1 text-sm text-ink shadow-lg; }
+  .ui-select-content [data-radix-select-viewport] { @apply grid gap-0.5; }
+  .ui-select-item { @apply flex cursor-pointer items-center justify-between gap-2 rounded-lg px-2.5 py-2 outline-none data-[highlighted]:bg-hover data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50; }
+  .ui-select-item-indicator { @apply text-brand-text; }
+  .ui-dropdown-content { @apply z-[100] grid min-w-[180px] gap-0.5 rounded-xl border border-line bg-panel p-1.5 text-sm text-ink shadow-lg; }
+  .ui-dropdown-item { @apply flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2 text-left outline-none data-[highlighted]:bg-hover data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50; }
+  .ui-dropdown-separator { @apply my-1 h-px bg-line; }
+  .ui-dropdown-sub-trigger { @apply justify-between; }
+  .ui-dropdown-sub-trigger::after { content: '\203a'; margin-left: 0.75rem; color: var(--color-muted); }
+  .ui-dropdown-label { @apply px-2.5 py-1.5 text-xs font-bold tracking-wide text-muted uppercase; }
+
+  .ui-pagination { @apply flex items-center justify-center gap-1; }
+  .ui-pagination-nav, .ui-pagination-page { @apply grid size-9 place-items-center rounded-lg border-0 bg-transparent text-sm font-bold text-muted hover:bg-hover hover:text-ink focus-visible:ring-2 focus-visible:ring-brand-text focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent; }
+  .ui-pagination-page.active { @apply bg-brand/12 text-brand-text; }
+  .ui-pagination-ellipsis { @apply grid size-9 place-items-center text-sm text-muted; }
+
+  .ui-link { @apply font-bold text-brand-text hover:underline; }
+  .ui-link-muted { @apply font-normal text-muted hover:text-ink; }
+
+  .ui-tabs { @apply flex gap-1 rounded-xl bg-hover p-1; }
+  .ui-tab { @apply flex-1 rounded-lg border-0 bg-transparent px-3 py-2 text-xs font-bold text-muted hover:text-ink; }
+  .ui-tab.active { @apply bg-panel text-ink; }
+
+  .error-page-shell { @apply grid min-h-screen place-items-center bg-canvas p-6; }
+  .error-page-card { @apply w-full max-w-[480px] rounded-3xl border border-line bg-panel p-10 text-center max-sm:p-6; }
+  .error-page-icon { @apply mx-auto mb-5 grid size-16 place-items-center rounded-2xl bg-brand/12 text-brand-text; }
+  .error-page-code { @apply mb-2 text-xs font-extrabold tracking-[0.18em] text-brand-text uppercase; }
+  .error-page-card h1 { @apply mt-0 mb-3 font-serif text-[clamp(28px,4vw,38px)] leading-[1.05] tracking-[-0.03em]; }
+  .error-page-card > p:not(.error-page-code) { @apply mb-0 text-[15px] leading-6 text-muted; }
+  .error-page-actions { @apply mt-7 flex flex-wrap items-center justify-center gap-2; }
+
+  /* Loading placeholders: a soft shimmer sweeping over a muted block. Still (no sweep) when motion is reduced. */
+  .skeleton { @apply block rounded-lg bg-hover; background-image: linear-gradient(90deg, transparent, var(--steadymeet-hover-strong), transparent); background-size: 200% 100%; background-repeat: no-repeat; animation: skeleton-shimmer 1.4s ease-in-out infinite; }
+  @keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+  @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; background-image: none; } }
+}

package/styles/tokens.css

@@ -0,0 +1,86 @@
+/* The kit's design tokens: Tailwind theme colours pointing at CSS variables, so dark mode (`.dark` on any ancestor)
+   and the accent presets (`data-accent` on <html>) repaint everything by remapping variables. */
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-ink: var(--steadymeet-ink);
+  --color-muted: var(--steadymeet-muted);
+  --color-paper: var(--steadymeet-paper);
+  --color-panel: var(--steadymeet-panel);
+  --color-canvas: var(--steadymeet-canvas);
+  --color-workspace-secondary: var(--steadymeet-workspace-secondary);
+  --color-inset: var(--steadymeet-inset);
+  --color-hover: var(--steadymeet-hover);
+  --color-hover-strong: var(--steadymeet-hover-strong);
+  --color-line: var(--steadymeet-line);
+  --color-brand: var(--steadymeet-brand);
+  --color-brand-dark: var(--steadymeet-brand-dark);
+  --color-brand-text: var(--steadymeet-brand-text);
+  --color-danger: #b6453c;
+  --color-success-bg: var(--steadymeet-success-bg);
+  --color-success-text: var(--steadymeet-success-text);
+  --color-danger-bg: var(--steadymeet-danger-bg);
+  --color-danger-text: var(--steadymeet-danger-text);
+  --color-warning-bg: var(--steadymeet-warning-bg);
+  --color-warning-text: var(--steadymeet-warning-text);
+  --font-serif: Georgia, "Times New Roman", serif;
+}
+
+/* Base palette (light). Dark mode and accent presets below only remap these
+   custom properties, so every `bg-panel`/`text-ink`/`bg-brand`-style utility
+   repaints automatically without per-component dark: variants. */
+:root {
+  --steadymeet-ink: #17201d;
+  --steadymeet-muted: #646b77;
+  --steadymeet-paper: #ffffff;
+  --steadymeet-panel: #ffffff;
+  --steadymeet-canvas: #ffffff;
+  --steadymeet-workspace-secondary: #f0f0f1;
+  /* Boxes set into a card (search fields, empty states, lists) — a step off the white card. */
+  --steadymeet-inset: #f4f4f5;
+  --steadymeet-hover: #f4f4f5;
+  --steadymeet-hover-strong: #e9e9ec;
+  --steadymeet-line: #e4e4e7;
+  --steadymeet-success-bg: #e7f3ea;
+  --steadymeet-success-text: #1f7a3d;
+  --steadymeet-danger-bg: #fbe9e7;
+  --steadymeet-danger-text: #a73129;
+  --steadymeet-warning-bg: #fff4e9;
+  --steadymeet-warning-text: #a3620e;
+
+  --steadymeet-brand: #FF7900;
+  --steadymeet-brand-dark: #E56800;
+  --steadymeet-brand-text: #9A4600;
+}
+
+:root[data-accent='blue'] { --steadymeet-brand: #2490FF; --steadymeet-brand-dark: #0d6fd6; --steadymeet-brand-text: #0b4a91; }
+:root[data-accent='green'] { --steadymeet-brand: #22A559; --steadymeet-brand-dark: #17803f; --steadymeet-brand-text: #146c34; }
+:root[data-accent='purple'] { --steadymeet-brand: #7C5CFC; --steadymeet-brand-dark: #5f3fe0; --steadymeet-brand-text: #4a2fc4; }
+:root[data-accent='red'] { --steadymeet-brand: #E5484D; --steadymeet-brand-dark: #c53137; --steadymeet-brand-text: #a3262b; }
+
+.dark {
+  --steadymeet-ink: #eef1ef;
+  --steadymeet-muted: #9aa79f;
+  --steadymeet-paper: #0d1110;
+  --steadymeet-panel: #1c2220;
+  --steadymeet-canvas: #0d1114;
+  --steadymeet-workspace-secondary: #252a2e;
+  --steadymeet-inset: #14181a;
+  --steadymeet-hover: #242a27;
+  --steadymeet-hover-strong: #2c332f;
+  --steadymeet-line: #2b322e;
+  --steadymeet-success-bg: #123321;
+  --steadymeet-success-text: #6fcf97;
+  --steadymeet-danger-bg: #3a1a17;
+  --steadymeet-danger-text: #ff8a80;
+  --steadymeet-warning-bg: #332512;
+  --steadymeet-warning-text: #f5b942;
+
+  --steadymeet-brand-text: #ffb37a;
+}
+
+.dark[data-accent='blue'] { --steadymeet-brand-text: #8fc4ff; }
+.dark[data-accent='green'] { --steadymeet-brand-text: #7be0a3; }
+.dark[data-accent='purple'] { --steadymeet-brand-text: #c0afff; }
+.dark[data-accent='red'] { --steadymeet-brand-text: #ff9b9e; }