@teja-app/ui 0.0.11 → 0.0.13

package/dist/theme/components/Accordion.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Accordion / AccordionItem
+ *
+ * Design source:
+ *   - design/screens/app/documents/note-editor/intake.jsx:29-37
+ *     (NEIntakeBlock collapsible header pattern: surface-1 bg, border-bottom,
+ *     fontSize:13/fontWeight:600 title, Icon chevronDown size:11 ink-3)
+ *   - design/screens/app/settings/audit-logs.jsx (chevronDown expander rows)
+ *
+ * Header: full-width button, ink-1 title (fontSize 13, weight 600),
+ *         trailing chevronDown Icon (size 11, ink-3), rotate(180deg) when open,
+ *         transition: transform .15s; hover background: surface-1;
+ *         borderRadius: r-md.
+ * Panel:  content region below header; mount/unmount; paddingTop: 8.
+ * a11y:   header <button aria-expanded>; panel role="region" + aria-labelledby.
+ * testId: forwarded as {testId}-header and {testId}-panel.
+ */
+import { type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from 'react';
+export interface AccordionProps {
+    /** Allow multiple panels to be open simultaneously. Default: false (single-open). */
+    multiple?: boolean;
+    /** Uncontrolled default open value(s). */
+    defaultValue?: string | string[];
+    /** Controlled open value(s). */
+    value?: string | string[];
+    /** Called with the new open value(s) whenever a panel is toggled. */
+    onChange?: (value: string | string[]) => void;
+    children?: ReactNode;
+    /** Extra inline styles on the container. */
+    style?: CSSProperties;
+    /** Forwarded as data-testid on the root element. */
+    testId?: string;
+}
+export interface AccordionItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+    /** Unique value used for controlled/uncontrolled open state. */
+    value: string;
+    /** Header content — string or ReactNode. */
+    title: ReactNode;
+    /** Panel content. */
+    children?: ReactNode;
+    /** Forwarded as {testId}-header + {testId}-panel. */
+    testId?: string;
+    /** Extra inline styles on the outer item wrapper. */
+    style?: CSSProperties;
+}
+/**
+ * Accordion — collapsible section container.
+ *
+ * ```tsx
+ * <Accordion defaultValue="section-1">
+ *   <AccordionItem value="section-1" title="Presenting problem" testId="pp">
+ *     Content here…
+ *   </AccordionItem>
+ *   <AccordionItem value="section-2" title="Clinical history">
+ *     More content…
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export declare function Accordion({ multiple, defaultValue, value: controlledValue, onChange, children, style, testId, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AccordionItem — a single collapsible panel within an Accordion.
+ *
+ * Visual harvest from NEIntakeBlock (intake.jsx:29-37):
+ *   header row: display:flex, alignItems:center, justifyContent:space-between
+ *               background:var(--surface-1), borderBottom:1px solid var(--border)
+ *   title: fontSize:13, fontWeight:600 (ink-1 inherited)
+ *   icon:  chevronDown size:11, color:var(--ink-3), rotates 180° when open
+ *          transition: transform .15s
+ *   hover: background:var(--surface-1)
+ *
+ * a11y: button aria-expanded; panel role="region" aria-labelledby headerId.
+ */
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/theme/components/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/theme/components/Accordion.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAQL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,cAAc;IAC7B,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC9D,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAqBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAgB,EAChB,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE,cAAc,2CA8DhB;AAID;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,kHAmGzB,CAAC"}

package/dist/theme/components/Badge.d.ts

@@ -1,16 +1,36 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 export type BadgeTone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'ai';
 export type BadgeSize = 'sm' | 'md';
+/**
+ * Explicit color override for dynamically-computed badge tones.
+ * Callers should pass CSS-var strings (e.g. `var(--success-soft)`) but
+ * arbitrary CSS color strings are accepted.
+ */
+export interface BadgeColors {
+    /** Background color. */
+    bg: string;
+    /** Foreground (text) color. */
+    fg: string;
+    /** Leading dot color. Falls back to `fg` when omitted. */
+    dot?: string;
+}
 export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     tone?: BadgeTone;
     size?: BadgeSize;
     /** Show a leading colored dot. */
     dot?: boolean;
+    /**
+     * Explicit color override for dynamically-computed tones.
+     * When provided, overrides the `tone` token lookup.
+     * Callers should pass CSS-var strings but arbitrary CSS color strings are accepted.
+     * Named `tone` prop is still used as a semantic hint for tooling; `colors` wins visually.
+     */
+    colors?: BadgeColors;
     children?: ReactNode;
     /** Forwarded as `data-testid` for e2e selectors. */
     'data-testid'?: string;
     /** Alias of `data-testid` to keep the API uniform across primitives. */
     testId?: string;
 }
-export declare function Badge({ tone, size, dot, children, style, testId, 'data-testid': dataTestId, ...rest }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ tone, size, dot, colors, children, style, testId, 'data-testid': dataTestId, ...rest }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Badge.d.ts.map

package/dist/theme/components/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/theme/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,IAAI,CAAC;AACT,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AA4BpC,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACnF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oDAAoD;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,KAAK,CAAC,EACpB,IAAgB,EAChB,IAAW,EACX,GAAG,EACH,QAAQ,EACR,KAAK,EACL,MAAM,EACN,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,UAAU,2CAsCZ"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/theme/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,IAAI,CAAC;AACT,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,+BAA+B;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AA4BD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACnF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;;;OAKG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oDAAoD;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,KAAK,CAAC,EACpB,IAAgB,EAChB,IAAW,EACX,GAAG,EACH,MAAM,EACN,QAAQ,EACR,KAAK,EACL,MAAM,EACN,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,UAAU,2CA0CZ"}

package/dist/theme/components/Breadcrumbs.d.ts

@@ -0,0 +1,53 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface BreadcrumbItem {
+    /** Display label */
+    label: string;
+    /** URL/path for navigation (omit for current page) */
+    href?: string;
+    /** Optional icon before label */
+    icon?: ReactNode;
+}
+export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+    /** Breadcrumb items */
+    items: BreadcrumbItem[];
+    /** Separator between items (default: chevron icon) */
+    separator?: ReactNode;
+    /** Maximum items to show before collapsing (0 = no collapse) */
+    maxItems?: number;
+    /** Render function for links (for custom routing, e.g. React Router Link) */
+    renderLink?: (item: BreadcrumbItem, children: ReactNode) => ReactNode;
+    /** Forwarded as `data-testid` (and `data-test-id`) on the root element.
+     *  Child items receive `{testId}-item-{index}`. */
+    testId?: string;
+}
+/**
+ * Breadcrumbs — navigation hierarchy trail.
+ *
+ * Drop-in replacement for the legacy `@teja-app/ui` Breadcrumbs: identical
+ * public prop API (`items`, `separator`, `maxItems`, `renderLink`, `testId`),
+ * styled with CSS-var tokens from the `@teja-app/ui/theme` design system.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Clients', href: '/clients' },
+ *     { label: 'John Smith', href: '/clients/123' },
+ *     { label: 'Notes' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Custom router integration
+ * ```tsx
+ * <Breadcrumbs
+ *   items={items}
+ *   renderLink={(item, children) => (
+ *     <Link to={item.href!}>{children}</Link>
+ *   )}
+ * />
+ * ```
+ */
+export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<BreadcrumbsProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/theme/components/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/theme/components/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtE,MAAM,WAAW,cAAc;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACnE,uBAAuB;IACvB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,sDAAsD;IACtD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;IACtE;uDACmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAgED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,WAAW,0GAkKvB,CAAC"}

package/dist/theme/components/Card.d.ts

@@ -1,10 +1,45 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Inner padding in pixels. Defaults to 20. */
     padding?: number;
     children?: ReactNode;
     /** Forwarded as `data-testid` on the root div. */
     testId?: string;
+    /**
+     * Renders the card in a selected/active state:
+     * - border becomes 1px var(--primary) (border-width unchanged, only color changes)
+     * - outer ring: 0 0 0 3px var(--primary-ring)
+     * - background tint: var(--primary-soft)
+     *
+     * Harvested from design/screens/app/clients/modals/create-client.jsx:191-213
+     * (TypeCard: r-md, 1px border, shadow-xs unselected) and
+     * create-inquiry.jsx SourceCard (same pattern).
+     */
+    selected?: boolean;
+    /**
+     * Makes the card interactive (pointer cursor, hover surface lift, focus-visible
+     * primary ring). Automatically inferred when an `onClick` handler is provided.
+     * Renders as a `<button>` when interactive so keyboard activation works natively.
+     *
+     * Harvested from create-client.jsx TypeCard (cursor:pointer + button element)
+     * and create-inquiry.jsx SourceCard (same treatment).
+     */
+    interactive?: boolean;
 }
-export declare function Card({ padding, children, style, testId, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Card — base surface primitive.
+ *
+ * Default (no extra props): white surface, r-lg radius, 1px border — identical
+ * to the original Card and 100% backward-compatible.
+ *
+ * Interactive/selected variant: r-md radius to match TypeCard / SourceCard design
+ * sources (create-client.jsx:198, create-inquiry.jsx:292). Non-selected interactive
+ * cards carry shadow-xs; selected state swaps it for the primary-ring glow.
+ *
+ * Enhanced:
+ *   selected    — primary ring + tint background (design TypeCard / CoupleCard pattern)
+ *   interactive — pointer cursor, keyboard activation via <button> root
+ *                 (automatically inferred when onClick is supplied)
+ */
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLElement>>;
 //# sourceMappingURL=Card.d.ts.map

package/dist/theme/components/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/theme/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACjF,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,IAAI,CAAC,EAAE,OAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,2CAajF"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/theme/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAKnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACjF,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,mGAqFf,CAAC"}

package/dist/theme/components/Checkbox.d.ts

@@ -13,11 +13,16 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
     tone?: 'block' | 'inline';
     /** Custom outer style for the wrapping label. */
     containerStyle?: CSSProperties;
+    /**
+     * Tri-state: renders the dash glyph and sets the native input's
+     * `indeterminate` DOM property (used by "select all" rows).
+     */
+    indeterminate?: boolean;
     /**
      * Test ID — applied to the wrapping `<label>` as the root. The native
      * input gets `${testId}-input`, the styled square gets `${testId}-square`.
      */
     testId?: string;
 }
-export declare function Checkbox({ label, tone, containerStyle, checked, testId, ...inputProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ label, tone, containerStyle, checked, indeterminate, testId, ...inputProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/theme/components/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/theme/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3E;;;;;;;GAOG;AACH,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,wFAAwF;IACxF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,iDAAiD;IACjD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAe,EACf,cAAc,EACd,OAAO,EACP,MAAM,EACN,GAAG,UAAU,EACd,EAAE,aAAa,2CA2Ef"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/theme/components/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3E;;;;;;;GAOG;AACH,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,wFAAwF;IACxF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,iDAAiD;IACjD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAe,EACf,cAAc,EACd,OAAO,EACP,aAAqB,EACrB,MAAM,EACN,GAAG,UAAU,EACd,EAAE,aAAa,2CAoGf"}

package/dist/theme/components/DarkScope.d.ts

@@ -0,0 +1,54 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/**
+ * DarkScope — scoped dark-room wrapper.
+ *
+ * Applies the existing `[data-theme="dark"]` token block (tokens.css:120+)
+ * to **a subtree** by setting `data-theme="dark"` on a container div plus
+ * `color-scheme: dark` via inline style. Every theme component inside renders
+ * dark automatically — no per-component `tone="dark"` prop needed.
+ *
+ * Primary use-case: Telehealth video room (`/telehealth/$roomId`) where the
+ * full viewport must be dark regardless of the user's global theme setting.
+ *
+ * Design source:
+ *   - `design/screens/app/sessions/telehealth-room.jsx` — immersive dark video
+ *     room layout; the root `background: '#0f1117'` is the design's intent; we
+ *     use `var(--bg)` from the dark token block instead of the hardcoded hex so
+ *     the full dark palette applies to all children.
+ *   - `teja-ui/src/theme/tokens.css:120` — `[data-theme="dark"]` block with
+ *     full dark surface/ink/border/shadow/semantic token overrides.
+ *
+ * Tokens consumed (all from the `[data-theme="dark"]` block in tokens.css):
+ *   --bg, --surface-0..3, --sidebar, --border, --border-strong, --divider,
+ *   --ink-1..5, --primary-soft, --success/warning/danger/info/ai (-soft),
+ *   --shadow-xs/sm/md/lg/pop  (resolved via color-scheme:dark cascade).
+ *
+ * Decision note: the token-scope approach (data-theme="dark" on a subtree)
+ * covers EVERY theme component for free — do NOT add per-component tone="dark"
+ * props. See GAP-PRIMITIVES-BUILD-SPEC.md §6.
+ */
+export interface DarkScopeProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    /**
+     * Forwarded as `data-testid` on the root div for e2e selectors.
+     * Also accepts the raw `data-testid` attribute for consistency with
+     * components that expose both forms (e.g. Badge).
+     */
+    testId?: string;
+    /** Raw `data-testid` — takes precedence over `testId`. */
+    'data-testid'?: string;
+}
+/**
+ * Scoped dark wrapper. Renders a `div` with `data-theme="dark"` so all
+ * `@teja-app/ui/theme` components in the subtree pick up dark tokens.
+ *
+ * @example
+ * ```tsx
+ * <DarkScope style={{ position: 'fixed', inset: 0 }}>
+ *   <Card>Dark-themed card</Card>
+ *   <Button variant="primary">Join</Button>
+ * </DarkScope>
+ * ```
+ */
+export declare const DarkScope: import("react").ForwardRefExoticComponent<DarkScopeProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=DarkScope.d.ts.map

package/dist/theme/components/DarkScope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DarkScope.d.ts","sourceRoot":"","sources":["../../../src/theme/components/DarkScope.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,2GAsBrB,CAAC"}

package/dist/theme/components/Menu.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Menu / MenuItem / MenuDivider
+ *
+ * Design source:
+ *   - design/screens/app/appointments/modals/flyout.jsx:514 (FlyoutOverflowMenu)
+ *   - design/components/shell.jsx:524 (NotificationBell dropdown pattern)
+ *
+ * Panel: position:absolute, top:100%, right:0, marginTop:4, zIndex high,
+ *        minWidth:220, --surface-0 bg, 1px --border border, --r-md radius,
+ *        shadow-pop, padding:4.
+ * Item:  flex, gap:8, 100% width, padding 8px 10px, --r-sm radius,
+ *        transparent bg, cursor:pointer, fontSize:12.5, --ink-1 / --danger
+ *        color, hover --surface-1.
+ * Divider: hr, border:0, borderTop 1px --divider, margin 4px 2px.
+ * Backdrop: fixed inset:0 click-catcher (shell.jsx pattern).
+ */
+import { type ButtonHTMLAttributes, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from './Icon';
+export type MenuPlacement = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+export interface MenuProps {
+    /** Controlled open state. */
+    open: boolean;
+    /** Called when the menu should close (outside click, Escape, item click). */
+    onClose: () => void;
+    /**
+     * Trigger element — rendered as the anchor. The menu positions itself
+     * relative to this via the parent `position:relative` wrapper.
+     */
+    trigger?: ReactNode;
+    children?: ReactNode;
+    /** Placement relative to the trigger. Default: bottom-end. */
+    placement?: MenuPlacement;
+    /** Minimum width of the panel. Default: 220. */
+    minWidth?: number;
+    /** z-index of the backdrop + panel. Default: 200. */
+    zIndex?: number;
+    /** Forwarded as `data-testid` on the panel element. */
+    testId?: string;
+    /** Extra inline styles for the panel. */
+    style?: CSSProperties;
+}
+export interface MenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Leading icon name from the Teja icon set. */
+    icon?: IconName;
+    /** Render in danger (red) color. */
+    danger?: boolean;
+    children?: ReactNode;
+    /** Forwarded as `data-testid`. */
+    testId?: string;
+}
+export type MenuDividerProps = Omit<HTMLAttributes<HTMLHRElement>, 'children'>;
+/**
+ * Menu — floating action panel.
+ *
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ * <Menu open={open} onClose={() => setOpen(false)} trigger={<IconButton>…</IconButton>}>
+ *   <MenuItem icon="edit" onClick={…}>Edit</MenuItem>
+ *   <MenuDivider />
+ *   <MenuItem icon="trash" danger onClick={…}>Delete</MenuItem>
+ * </Menu>
+ * ```
+ */
+export declare function Menu({ open, onClose, trigger, children, placement, minWidth, zIndex, testId, style, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * MenuItem — action row inside a Menu.
+ *
+ * Harvested from FlyoutOverflowMenu button styling (flyout.jsx:527-539):
+ *   display:flex, alignItems:center, gap:8, width:100%,
+ *   padding:8px 10px, border:0, borderRadius:var(--r-sm),
+ *   background:transparent, cursor:pointer, fontFamily:inherit,
+ *   fontSize:12.5, color:--ink-1 / --danger, textAlign:left.
+ *   Icon size:12, color:--ink-3 / --danger.
+ *   hover: background:--surface-1 (added via data-hover state).
+ */
+export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * MenuDivider — horizontal rule between item groups.
+ *
+ * Harvested from FlyoutOverflowMenu hr (flyout.jsx:525):
+ *   border:0; borderTop:1px solid var(--divider); margin:4px 2px.
+ */
+export declare function MenuDivider({ style, ...rest }: MenuDividerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/theme/components/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/theme/components/Menu.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAML,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAI7C,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,cAAc,GAAG,SAAS,GAAG,WAAW,CAAC;AAEpF,MAAM,WAAW,SAAS;IACxB,6BAA6B;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,6EAA6E;IAC7E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,gDAAgD;IAChD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,CAAC;AA4B/E;;;;;;;;;;;GAWG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAwB,EACxB,QAAc,EACd,MAAY,EACZ,MAAM,EACN,KAAK,GACN,EAAE,SAAS,2CAsEX;AAID;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,6GA2DnB,CAAC;AAIH;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAa/D"}

package/dist/theme/components/OTPInput.d.ts

@@ -0,0 +1,58 @@
+import { type HTMLAttributes } from 'react';
+/**
+ * OTPInput — theme-layer, variable-length one-time-code input.
+ *
+ * Drop-in replacement for the legacy `@teja-app/ui` OTPInput. Preserves the
+ * full public prop API (length, value, onChange, error, disabled, autoFocus,
+ * label, className) and adds theme-house-style extras: CSS-var tokens, inline
+ * style objects, forwardRef, and `testId`.
+ *
+ * Visual states per cell:
+ *   - empty     neutral border + surface-1 fill
+ *   - active    primary border + ring + blinking caret overlay
+ *   - filled    border-strong + surface-0 fill + ink-1 digit
+ *   - error     danger border + danger-tinted fill + danger digit
+ *   - disabled  reduced opacity, not-allowed cursor
+ *
+ * Interaction behaviours (preserved from legacy):
+ *   - Auto-focus first empty cell on mount when autoFocus is true.
+ *   - Typing a digit auto-advances focus to the next cell.
+ *   - Backspace on an empty cell jumps back and clears the previous cell.
+ *   - ArrowLeft / ArrowRight navigate between cells.
+ *   - Delete clears the current cell without moving focus.
+ *   - Paste strips non-digits and fills cells left-to-right from paste point.
+ *   - onFocus selects the cell content for easy overwrite.
+ *
+ * @example
+ * ```tsx
+ * const [code, setCode] = useState('');
+ * <OTPInput value={code} onChange={setCode} />
+ * <OTPInput value={code} onChange={setCode} length={4} error="Invalid code" />
+ * ```
+ */
+export interface OTPInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Number of digit cells. Defaults to 6. */
+    length?: number;
+    /** Current value — a numeric string up to `length` chars. */
+    value: string;
+    /** Fired on every mutation; receives the joined digit string. */
+    onChange: (value: string) => void;
+    /** Error message displayed below the cell row. */
+    error?: string;
+    /** Disables all cells. */
+    disabled?: boolean;
+    /** Auto-focus the first empty cell on mount. Defaults to false. */
+    autoFocus?: boolean;
+    /** Screen-reader label for the cell group. Defaults to 'One-time password'. */
+    label?: string;
+    /** Additional CSS class for the root container. */
+    className?: string;
+    /**
+     * Root `data-testid` / `data-test-id` value. Each cell gets `${testId}-digit-${i}`.
+     * Defaults to `otp-input`.
+     */
+    testId?: string;
+}
+export declare const OTPInput: import("react").ForwardRefExoticComponent<OTPInputProps & import("react").RefAttributes<HTMLDivElement>>;
+export default OTPInput;
+//# sourceMappingURL=OTPInput.d.ts.map

package/dist/theme/components/OTPInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.d.ts","sourceRoot":"","sources":["../../../src/theme/components/OTPInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAMH,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxD,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAqGD,eAAO,MAAM,QAAQ,0GA6RpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/theme/components/PasswordInput.d.ts

@@ -0,0 +1,48 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+import { type FieldChromeProps } from './fieldShell';
+export interface PasswordStrength {
+    /** Strength percentage (0–100) */
+    strength: number;
+    /** Display label */
+    label: 'Weak' | 'Medium' | 'Strong' | '';
+    /** CSS-var background colour token for the progress bar segment */
+    colorVar: string;
+    /** CSS-var text colour token for the label */
+    textColorVar: string;
+}
+export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>, Omit<FieldChromeProps, 'disabled'> {
+    /** Show the strength indicator bar + label below the input. */
+    showStrengthIndicator?: boolean;
+    /**
+     * Root test ID. Applied to the outer wrapper as both `data-testid` and
+     * `data-test-id`; children are suffixed (`-input`, `-toggle-button`,
+     * `-strength`, `-error`, `-hint`).
+     */
+    testId?: string;
+    /**
+     * Legacy compat: `fullWidth` is accepted as an alias for `full`.
+     * Consumers migrating from legacy Input/PasswordInput can keep using it.
+     */
+    fullWidth?: boolean;
+    /**
+     * Legacy compat: `helperText` is accepted as an alias for `hint`.
+     */
+    helperText?: ReactNode;
+    /**
+     * Shows a loading spinner in the trailing position (right slot).
+     * Preserved from legacy `isLoading` so callers don't regress.
+     */
+    isLoading?: boolean;
+}
+/**
+ * PasswordInput — themed text input with show/hide reveal toggle and an
+ * optional password-strength indicator bar. Drop-in replacement for the legacy
+ * `@teja-app/ui` `PasswordInput`; swap the import path and remove Tailwind
+ * class overrides.
+ *
+ * @example
+ * <PasswordInput label="Password" placeholder="Enter password" />
+ * <PasswordInput label="Password" showStrengthIndicator value={pw} onChange={…} />
+ */
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=PasswordInput.d.ts.map

package/dist/theme/components/PasswordInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../src/theme/components/PasswordInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,cAAc,CAAC;AA2CtB,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAC;IACzC,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,YAAY,EAAE,MAAM,CAAC;CACtB;AAyCD,MAAM,WAAW,kBACf,SAAQ,IAAI,CACV,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB,EACC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IACpC,+DAA+D;IAC/D,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA+CD;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,iHAgKzB,CAAC"}

package/dist/{components/PillSelector/PillSelector.types.d.ts → theme/components/PillSelector.d.ts}

@@ -1,4 +1,4 @@
-import type { ReactNode, HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 export type PillSelectorSize = 'sm' | 'md' | 'lg';
 export interface PillOption {
     /** Unique value for the option */
@@ -25,5 +25,24 @@ export interface PillSelectorProps extends Omit<HTMLAttributes<HTMLDivElement>,
     fullWidth?: boolean;
     /** Disable the selector */
     disabled?: boolean;
+    /** Forwarded as `data-testid` on the root div. */
+    testId?: string;
 }
-//# sourceMappingURL=PillSelector.types.d.ts.map
+/**
+ * PillSelector — segmented pill chooser for multi- or single-select chip UI.
+ *
+ * Preserves the exact legacy public API from `teja-ui/src/components/PillSelector/`.
+ * Styled with CSS-var tokens from the `@teja-app/ui/theme` design system.
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState<string[]>([]);
+ * <PillSelector
+ *   options={[{ value: 'a', label: 'Option A' }, { value: 'b', label: 'Option B' }]}
+ *   selected={selected}
+ *   onChange={setSelected}
+ * />
+ * ```
+ */
+export declare const PillSelector: import("react").ForwardRefExoticComponent<PillSelectorProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PillSelector.d.ts.map

package/dist/theme/components/PillSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillSelector.d.ts","sourceRoot":"","sources":["../../../src/theme/components/PillSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5F,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,MAAM,WAAW,UAAU;IACzB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxD,wBAAwB;IACxB,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3B,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxB,oCAAoC;IACpC,QAAQ,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5C,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAoBD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,8GAiIxB,CAAC"}