@teja-app/ui 0.0.11 → 0.0.13

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

@@ -0,0 +1,89 @@
+import { type CSSProperties, type InputHTMLAttributes } from 'react';
+export type RadioSize = 'sm' | 'md' | 'lg';
+export interface RadioOption {
+    /** Option value */
+    value: string;
+    /** Option label */
+    label: string;
+    /** Disable this option */
+    disabled?: boolean;
+}
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Radio label */
+    label?: string;
+    /** Radio size */
+    size?: RadioSize;
+    /** Error state (typically set by RadioGroup) */
+    error?: boolean;
+    /**
+     * Test ID — applied to the wrapping `<label>` as root.
+     * The native input gets `${testId}-radio`; the label span gets `${testId}-label`.
+     */
+    testId?: string;
+}
+export interface RadioGroupProps {
+    /** Group name (required for proper radio behavior) */
+    name: string;
+    /** Available options */
+    options: RadioOption[];
+    /** Currently selected value */
+    value?: string;
+    /** Callback when selection changes */
+    onChange?: (value: string) => void;
+    /** Group label */
+    label?: string;
+    /** Radio size */
+    size?: RadioSize;
+    /** Error message */
+    error?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Disable all options */
+    disabled?: boolean;
+    /** Layout direction */
+    orientation?: 'vertical' | 'horizontal';
+    /** Additional inline style on the root fieldset */
+    style?: CSSProperties;
+    /** Shows loading spinner and disables group */
+    isLoading?: boolean;
+    /**
+     * Test ID — applied to the wrapping `<fieldset>`.
+     * Each option gets `${testId}-option-{index}`; error/helper get suffixed too.
+     */
+    testId?: string;
+}
+/**
+ * Radio — a single radio input with an optional label. Typically used inside
+ * a `RadioGroup`, but can be used standalone.
+ *
+ * Styled entirely with CSS-var tokens — no Tailwind, no hex literals.
+ *
+ * @example
+ * ```tsx
+ * <Radio name="plan" value="pro" label="Pro" checked={plan === 'pro'} onChange={…} />
+ * ```
+ */
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+/**
+ * RadioGroup — manages a group of radio options with optional label, error,
+ * helper text, orientation, and loading state.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   name="status"
+ *   label="Status"
+ *   options={[
+ *     { value: 'active', label: 'Active' },
+ *     { value: 'inactive', label: 'Inactive' },
+ *   ]}
+ *   value={status}
+ *   onChange={setStatus}
+ * />
+ * ```
+ */
+export declare function RadioGroup({ name, options, value, onChange, label, size, error, helperText, disabled, orientation, style, isLoading, testId, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RadioGroup {
+    var displayName: string;
+}
+//# sourceMappingURL=Radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/theme/components/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMjF,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,WAAW;IAC1B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,mDAAmD;IACnD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyCD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,yGAgHhB,CAAC;AAMH;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAW,EACX,KAAK,EACL,UAAU,EACV,QAAgB,EAChB,WAAwB,EACxB,KAAK,EACL,SAAiB,EACjB,MAAM,GACP,EAAE,eAAe,2CA+FjB;yBA7Ge,UAAU"}

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/theme/components/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC7D,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC9D,KAAK,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9C,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC1D,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAW,EACX,KAAK,EACL,MAAM,GACP,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAiD1B"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/theme/components/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC7D,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC9D,KAAK,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9C,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC1D,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAW,EACX,KAAK,EACL,MAAM,GACP,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAkD1B"}

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

@@ -0,0 +1,34 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+/**
+ * SelectableCard — generic selectable card primitive.
+ *
+ * Generalises `RoleTile` to arbitrary children (no hard-coded icon + title +
+ * description layout). Accepts `selected` + `onSelect` and renders as a full-
+ * width `<button>` with the same primary-border / primary-soft-bg / shadow-xs
+ * treatment as RoleTile.
+ *
+ * Design source: teja-ui/src/theme/components/RoleTile.tsx — lines 31–111
+ * (button shell, border/bg/shadow token assignments, disabled dimming).
+ *
+ * Usage:
+ *   <SelectableCard selected={picked === 'a'} onSelect={() => setPicked('a')}>
+ *     <MyCardContent />
+ *   </SelectableCard>
+ */
+export type SelectableCardRole = 'radio' | 'checkbox';
+export interface SelectableCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'role' | 'aria-checked'> {
+    /** Whether this card is currently selected. */
+    selected: boolean;
+    /** ARIA role. Defaults to "radio" for single-select groups; use "checkbox" for multi-select. */
+    role?: SelectableCardRole;
+    /** Called when the card is clicked (or activated via keyboard). */
+    onSelect?: () => void;
+    /** When true the card is visually dimmed and non-interactive. */
+    disabled?: boolean;
+    /** Forwarded to `data-testid`. */
+    testId?: string;
+    /** Card body — any React content. */
+    children?: ReactNode;
+}
+export declare const SelectableCard: import("react").ForwardRefExoticComponent<SelectableCardProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=SelectableCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableCard.d.ts","sourceRoot":"","sources":["../../../src/theme/components/SelectableCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAsB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElG;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,UAAU,CAAC;AAEtD,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAC9E,+CAA+C;IAC/C,QAAQ,EAAE,OAAO,CAAC;IAClB,gGAAgG;IAChG,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,mHA+D1B,CAAC"}

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

@@ -0,0 +1,20 @@
+import type { SidebarNavProps } from './types';
+export declare function ensureSidebarNavStyles(): void;
+/**
+ * SidebarNav — theme port of the legacy @teja-app/ui Sidebar component.
+ *
+ * Provides a responsive navigation container with:
+ * - Mobile overlay + open/close state (fixed, translated off-screen when closed)
+ * - Collapsible desktop mode (icon-only, via `collapsed` + `onCollapsedChange`)
+ * - Four navigation zones: featured / primary / secondary / bottom
+ * - Custom LinkComponent for router integration
+ *
+ * Named SidebarNav to avoid colliding with the existing opinionated Sidebar
+ * component already exported by @teja-app/ui/theme.
+ *
+ * On desktop (lg+) the sidebar becomes `position: static` via injected CSS
+ * (see `ensureSidebarNavStyles`). The component calls this automatically on
+ * first render.
+ */
+export declare const SidebarNav: import("react").ForwardRefExoticComponent<SidebarNavProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=SidebarNav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNav.d.ts","sourceRoot":"","sources":["../../../../src/theme/components/SidebarNav/SidebarNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAWlE,wBAAgB,sBAAsB,IAAI,IAAI,CAkB7C;AAuFD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,yGAgPtB,CAAC"}

package/dist/theme/components/SidebarNav/SidebarNavDivider.d.ts

@@ -0,0 +1,8 @@
+import type { SidebarNavDividerProps } from './types';
+/**
+ * SidebarNavDivider — visual separator between navigation sections.
+ * Theme port of the legacy SidebarDivider component.
+ * Uses CSS-var inline styles instead of Tailwind className.
+ */
+export declare const SidebarNavDivider: import("react").ForwardRefExoticComponent<SidebarNavDividerProps & import("react").RefAttributes<HTMLHRElement>>;
+//# sourceMappingURL=SidebarNavDivider.d.ts.map

package/dist/theme/components/SidebarNav/SidebarNavDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavDivider.d.ts","sourceRoot":"","sources":["../../../../src/theme/components/SidebarNav/SidebarNavDivider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,kHA6C7B,CAAC"}

package/dist/theme/components/SidebarNav/SidebarNavGroupRow.d.ts

@@ -0,0 +1,8 @@
+import type { SidebarNavGroupRowProps, SidebarNavGroup } from './types';
+export declare function shouldShowNavGroup(group: SidebarNavGroup): boolean;
+/**
+ * Renders a navigation group (optional label + list of items).
+ * Theme port of legacy SidebarGroup — uses inline styles instead of Tailwind.
+ */
+export declare const SidebarNavGroupRow: import("react").ForwardRefExoticComponent<SidebarNavGroupRowProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SidebarNavGroupRow.d.ts.map

package/dist/theme/components/SidebarNav/SidebarNavGroupRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavGroupRow.d.ts","sourceRoot":"","sources":["../../../../src/theme/components/SidebarNav/SidebarNavGroupRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAKxE,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,GAAG,OAAO,CAKlE;AAID;;;GAGG;AACH,eAAO,MAAM,kBAAkB,oHAwD9B,CAAC"}

package/dist/theme/components/SidebarNav/SidebarNavItemRow.d.ts

@@ -0,0 +1,8 @@
+import type { SidebarNavItemRowProps, SidebarNavItemConfig } from './types';
+export declare function shouldShowNavItem(item: SidebarNavItemConfig): boolean;
+/**
+ * Renders a single navigation item inside SidebarNav.
+ * Theme port of legacy SidebarItem — uses inline style objects instead of Tailwind.
+ */
+export declare function SidebarNavItemRow({ item, currentPath, size, collapsed, onNavigate, LinkComponent, testId, }: SidebarNavItemRowProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SidebarNavItemRow.d.ts.map

package/dist/theme/components/SidebarNav/SidebarNavItemRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavItemRow.d.ts","sourceRoot":"","sources":["../../../../src/theme/components/SidebarNav/SidebarNavItemRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,sBAAsB,EACtB,oBAAoB,EAIrB,MAAM,SAAS,CAAC;AAIjB,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,oBAAoB,GAAG,OAAO,CAKrE;AA4HD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,WAAW,EACX,IAAW,EACX,SAAiB,EACjB,UAAU,EACV,aAAa,EACb,MAAM,GACP,EAAE,sBAAsB,kDA2ExB"}

package/dist/theme/components/SidebarNav/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * SidebarNav — theme port of the legacy @teja-app/ui Sidebar component family.
+ *
+ * Named with the SidebarNav prefix to avoid colliding with the existing
+ * opinionated Sidebar (and SidebarNavItem) components in the theme.
+ */
+export { SidebarNav, ensureSidebarNavStyles } from './SidebarNav';
+export { SidebarNavDivider } from './SidebarNavDivider';
+export { SidebarNavGroupRow } from './SidebarNavGroupRow';
+export { SidebarNavItemRow, shouldShowNavItem } from './SidebarNavItemRow';
+export type { SidebarNavProps, SidebarNavGroup, SidebarNavItemConfig, SidebarNavGroupRowProps, SidebarNavItemRowProps, SidebarNavDividerProps, SidebarNavLinkProps, SidebarNavSize, SidebarNavVariant, SidebarNavActiveMatcher, SidebarNavPermissionCheck, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/components/SidebarNav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/components/SidebarNav/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE3E,YAAY,EACV,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,uBAAuB,EACvB,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,uBAAuB,EACvB,yBAAyB,GAC1B,MAAM,SAAS,CAAC"}

package/dist/theme/components/SidebarNav/types.d.ts

@@ -0,0 +1,157 @@
+import type { HTMLAttributes, ReactNode, ComponentType } from 'react';
+/**
+ * Active state matcher type
+ * - 'exact': path === href
+ * - 'startsWith': path.startsWith(href)
+ * - function: custom matching logic
+ */
+export type SidebarNavActiveMatcher = 'exact' | 'startsWith' | ((currentPath: string, href: string) => boolean);
+/**
+ * Permission check function type
+ */
+export type SidebarNavPermissionCheck = () => boolean;
+/**
+ * Individual navigation item configuration (ported from legacy Sidebar)
+ */
+export interface SidebarNavItemConfig {
+    /** Unique identifier for the item */
+    key: string;
+    /** Display label */
+    label: string;
+    /** Navigation href/path */
+    href: string;
+    /** Icon element to display */
+    icon?: ReactNode;
+    /** Badge count or text */
+    badge?: number | string;
+    /** Whether item is disabled */
+    disabled?: boolean;
+    /** Visibility control */
+    visible?: boolean | SidebarNavPermissionCheck;
+    /** How to determine active state (default: 'exact') */
+    activeMatch?: SidebarNavActiveMatcher;
+    /** Nested items (future use) */
+    children?: SidebarNavItemConfig[];
+    /** Click handler for non-navigation actions */
+    onClick?: () => void;
+    /** Accessibility label override */
+    'aria-label'?: string;
+}
+/**
+ * Navigation group configuration — named SidebarNavGroup to match the legacy
+ * export that the consumer (frontend Sidebar.tsx) imports.
+ */
+export interface SidebarNavGroup {
+    /** Unique identifier for the group */
+    key: string;
+    /** Optional group label/heading */
+    label?: string;
+    /** Navigation items in this group */
+    items: SidebarNavItemConfig[];
+    /** Visibility control for entire group */
+    visible?: boolean | SidebarNavPermissionCheck;
+}
+/**
+ * Size variant (sm/md/lg — maps to padding/font-size)
+ */
+export type SidebarNavSize = 'sm' | 'md' | 'lg';
+/**
+ * Visual variant
+ */
+export type SidebarNavVariant = 'default' | 'minimal';
+/**
+ * Link component props for router integration.
+ * Consumers may destructure only what they need — extras are safely ignored.
+ */
+export interface SidebarNavLinkProps {
+    to: string;
+    className?: string;
+    children: ReactNode;
+    onClick?: () => void;
+    title?: string;
+    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
+    'aria-label'?: string;
+    /** Forwarded style so the theme can drive appearance without className */
+    style?: React.CSSProperties;
+    onMouseEnter?: React.MouseEventHandler;
+    onMouseLeave?: React.MouseEventHandler;
+    /** data-testid forwarded to the DOM anchor/link */
+    'data-testid'?: string;
+}
+/**
+ * Props for the SidebarNavItemRow sub-component
+ */
+export interface SidebarNavItemRowProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
+    item: SidebarNavItemConfig;
+    currentPath?: string;
+    size?: SidebarNavSize;
+    collapsed?: boolean;
+    onNavigate?: (href: string) => void;
+    LinkComponent?: ComponentType<SidebarNavLinkProps>;
+    testId?: string;
+}
+/**
+ * Props for SidebarNavGroupRow sub-component
+ */
+export interface SidebarNavGroupRowProps extends HTMLAttributes<HTMLElement> {
+    group: SidebarNavGroup;
+    currentPath?: string;
+    size?: SidebarNavSize;
+    collapsed?: boolean;
+    LinkComponent?: ComponentType<SidebarNavLinkProps>;
+    onNavigate?: (href: string) => void;
+}
+/**
+ * Props for SidebarNavDivider
+ */
+export interface SidebarNavDividerProps extends HTMLAttributes<HTMLHRElement> {
+    /** Optional label for the divider */
+    label?: string;
+}
+/**
+ * Props for SidebarNav (the main ported component, equivalent to legacy Sidebar)
+ */
+export interface SidebarNavProps extends HTMLAttributes<HTMLElement> {
+    /** Navigation groups organized by position */
+    navigation: {
+        /** Featured items at the very top */
+        featured?: SidebarNavGroup[];
+        /** Primary navigation items */
+        primary?: SidebarNavGroup[];
+        /** Secondary navigation items (below divider) */
+        secondary?: SidebarNavGroup[];
+        /** Bottom navigation items */
+        bottom?: SidebarNavGroup[];
+    };
+    /** Current router path for active detection */
+    currentPath?: string;
+    /** Whether sidebar is open (for mobile) */
+    isOpen?: boolean;
+    /** Callback when sidebar should close (mobile) */
+    onClose?: () => void;
+    /** Whether sidebar is collapsed (desktop) */
+    collapsed?: boolean;
+    /** Callback when collapse state changes */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Visual variant */
+    variant?: SidebarNavVariant;
+    /** Size of nav items */
+    size?: SidebarNavSize;
+    /** Header content */
+    header?: ReactNode;
+    /** Footer content */
+    footer?: ReactNode;
+    /** Custom link component for router integration */
+    LinkComponent?: ComponentType<SidebarNavLinkProps>;
+    /** Navigation callback */
+    onNavigate?: (href: string) => void;
+    /** Whether to show mobile overlay */
+    showMobileOverlay?: boolean;
+    /** Width when expanded (default: 16rem) */
+    width?: string;
+    /** Width when collapsed (default: 4rem) */
+    collapsedWidth?: string;
+    /** Optional test ID for e2e testing */
+    testId?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/theme/components/SidebarNav/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/theme/components/SidebarNav/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+import { type HTMLAttributes, type ThHTMLAttributes, type TdHTMLAttributes } from 'react';
+export type SortDirection = 'asc' | 'desc' | null;
+export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    /** Full width table. Defaults to true. */
+    fullWidth?: boolean;
+    /** Alternate row background for readability. */
+    striped?: boolean;
+    /** Row background highlight on hover. */
+    hoverable?: boolean;
+    /** Compact padding (reduces cell padding). */
+    compact?: boolean;
+    /** Forwarded as `data-testid` on the wrapper div. */
+    testId?: string;
+}
+export type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** Selected state for row. */
+    selected?: boolean;
+}
+export interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /** Make column sortable. */
+    sortable?: boolean;
+    /** Current sort direction. */
+    sortDirection?: SortDirection;
+    /** Sort callback. */
+    onSort?: () => void;
+    /** Text alignment. Defaults to 'left'. */
+    align?: 'left' | 'center' | 'right';
+}
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    /** Text alignment. Defaults to 'left'. */
+    align?: 'left' | 'center' | 'right';
+}
+/**
+ * Table container — full-width scrollable data table using CSS-var tokens.
+ *
+ * Supports `striped`, `hoverable`, and `compact` variants via data attributes
+ * that are consumed by child row/cell components.
+ *
+ * @example
+ * ```tsx
+ * <Table striped hoverable>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>Name</TableHead>
+ *       <TableHead align="right" sortable sortDirection="asc" onSort={handleSort}>Amount</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>Jane Doe</TableCell>
+ *       <TableCell align="right">$200</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
+export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
+/** Table header section (`<thead>`). */
+export declare const TableHeader: import("react").ForwardRefExoticComponent<TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+/** Table body section (`<tbody>`). */
+export declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+/** Table row (`<tr>`). Reads `data-striped` / `data-hoverable` from the ancestor `<table>`. */
+export declare const TableRow: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+/** Table header cell (`<th>`). Supports optional sort controls. */
+export declare const TableHead: import("react").ForwardRefExoticComponent<TableHeadProps & import("react").RefAttributes<HTMLTableCellElement>>;
+/** Table data cell (`<td>`). */
+export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+//# sourceMappingURL=Table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/theme/components/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,cAAc,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAI1H,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;AAElD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IAClE,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAErE,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACxE,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IAC5E,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,qBAAqB;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,cAAe,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IAC5E,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAsCD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,KAAK,yGA2BhB,CAAC;AAMH,wCAAwC;AACxC,eAAO,MAAM,WAAW,sHAgBtB,CAAC;AAMH,sCAAsC;AACtC,eAAO,MAAM,SAAS,oHAapB,CAAC;AAMH,+FAA+F;AAC/F,eAAO,MAAM,QAAQ,+GAmBnB,CAAC;AAYH,mEAAmE;AACnE,eAAO,MAAM,SAAS,iHAqCpB,CAAC;AAMH,gCAAgC;AAChC,eAAO,MAAM,SAAS,iHAmBpB,CAAC"}

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

@@ -0,0 +1,79 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type IconName } from './Icon';
+/**
+ * Toast — floating notification card.
+ *
+ * Harvested from:
+ *   - design/components/mobile-shell.jsx:373 (MobileToast + useMobileToast + MobileToastHost)
+ *   - design/components/shell.jsx:561–608 (NotifToastHost desktop slot)
+ *
+ * Visual treatment:
+ *   background: var(--surface-0)     border: 1px solid var(--border)
+ *   accent left border: 3px solid <tone color>
+ *   borderRadius: var(--r-md)        boxShadow: var(--shadow-pop)
+ *   padding: 11px 14px               icon dot: var(--<tone>-soft) / var(--<tone>)
+ *   maxWidth: 320                    zIndex: 200
+ *   position: fixed; top: 80px; right: 20px (host stacks multiple)
+ *
+ * API:
+ *   useToast() → { showToast }
+ *   showToast(message, opts?)  opts: { icon?, tone?, ms?, action?, then? }
+ *   <ToastHost />  — mount once at app root; renders via portal
+ */
+export type ToastTone = 'success' | 'danger' | 'info' | 'neutral';
+export interface ToastOptions {
+    /** Override the default tone icon. */
+    icon?: IconName;
+    /** Visual tone. Defaults to 'success'. */
+    tone?: ToastTone;
+    /** Auto-dismiss delay in milliseconds. Default 2500. */
+    ms?: number;
+    /** Optional CTA label. When provided, `action.onClick` is called on click. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Callback executed after the toast auto-dismisses. */
+    then?: () => void;
+}
+interface ToastContextValue {
+    showToast: (message: ReactNode, opts?: ToastOptions) => void;
+}
+/**
+ * useToast — returns `{ showToast }`.
+ * Must be used inside a component tree wrapped by `<ToastHost />` (which
+ * provides the context). The call signature mirrors the design's `useMobileToast`:
+ *
+ *   showToast('Saved', { tone: 'success', ms: 2000, then: () => navigate('/') })
+ */
+export declare function useToast(): ToastContextValue;
+export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    message: ReactNode;
+    tone?: ToastTone;
+    icon?: IconName;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    onDismiss?: () => void;
+    /** Forwarded as data-testid on the root div. */
+    testId?: string;
+}
+export declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * ToastHost — mount once at app root.
+ *
+ * Provides the ToastContext so all children can call `useToast()`.
+ * Renders active toasts in a fixed portal (top:80px right:20px zIndex:200)
+ * that stacks vertically, matching the shell.jsx desktop slot coordinates.
+ *
+ * The portal target is `document.body` by default; pass `container` to
+ * override (useful for storybook or scoped testing).
+ */
+export interface ToastHostProps {
+    children: ReactNode;
+    container?: Element | null;
+}
+export declare function ToastHost({ children, container }: ToastHostProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/theme/components/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAsClE,MAAM,WAAW,YAAY;IAC3B,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8EAA8E;IAC9E,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;AAcD,UAAU,iBAAiB;IACzB,SAAS,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9D;AAUD;;;;;;GAMG;AACH,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAID,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAClF,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,KAAK,uGA4GhB,CAAC;AAmEH;;;;;;;;;GASG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5B;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CAsDhE"}

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

@@ -0,0 +1,38 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export type ToggleChipTone = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type ToggleChipSize = 'sm' | 'md';
+export interface ToggleChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Whether the chip is in the pressed/active state. */
+    pressed: boolean;
+    /** Called when the pressed state should change. */
+    onPressedChange?: (pressed: boolean) => void;
+    /** Optional leading icon node. */
+    icon?: ReactNode;
+    /** Color tone — defaults to 'primary'. Controls active colours via tokens. */
+    tone?: ToggleChipTone;
+    /** Size variant: 'sm' (24px) or 'md' (28px, default). */
+    size?: ToggleChipSize;
+    /** Forwarded as `data-testid` on the root button. */
+    testId?: string;
+    children?: ReactNode;
+}
+/**
+ * ToggleChip — a single independently-toggleable pill.
+ *
+ * Fills the gap between Chip (display-only) and PillSelector (a group of pills).
+ * Harvest source: `PillSelector.tsx` item treatment (lines 148–183) — pill radius,
+ * `aria-pressed`, `data-state`, token-only colours.
+ *
+ * Inactive: `var(--surface-0)` bg / `var(--ink-2)` fg / `1px var(--border)` (spec §3: Chip-neutral).
+ * Active:   `var(--{tone}-soft)` bg / `var(--{tone})` fg / `1px var(--{tone})` border (spec §3 text, tone-aware).
+ *
+ * @example
+ * ```tsx
+ * const [on, setOn] = useState(false);
+ * <ToggleChip pressed={on} onPressedChange={setOn} icon={<Icon name="tag" size={12} />}>
+ *   Urgent
+ * </ToggleChip>
+ * ```
+ */
+export declare const ToggleChip: import("react").ForwardRefExoticComponent<ToggleChipProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ToggleChip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleChip.d.ts","sourceRoot":"","sources":["../../../src/theme/components/ToggleChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EAEzB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AACnF,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,uDAAuD;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kCAAkC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,yDAAyD;IACzD,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkBD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,UAAU,+GAuEtB,CAAC"}

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

@@ -0,0 +1,40 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/**
+ * Tooltip — small dark-chip bubble that appears on hover/focus.
+ *
+ * Treatment: dark-chip style — `var(--ink-1)` background with `var(--surface-0)` text,
+ * matching the design spec's recommendation ("dark-chip on light"). Consistent with
+ * the Menu surface tokens: `var(--r-sm)` radius, `var(--shadow-pop)` shadow.
+ *
+ * Accessibility:
+ *   - Renders with `role="tooltip"` and a generated `id`.
+ *   - Trigger receives `aria-describedby` pointing at that `id`.
+ *   - Never traps focus — purely presentational overlay.
+ *
+ * Positioning:
+ *   - Uses an `absolute`-positioned bubble relative to a `relative` wrapper.
+ *   - `placement` controls which edge the bubble appears on.
+ *   - The arrow is a rotated square (pseudo-element pattern via inline div).
+ *
+ * Usage:
+ *   <Tooltip label="Save changes">
+ *     <button>Save</button>
+ *   </Tooltip>
+ */
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The tooltip text / content. */
+    label: ReactNode;
+    /** Which side of the trigger to attach the bubble. Default: `top`. */
+    placement?: TooltipPlacement;
+    /** Hover/focus delay before the tooltip appears (ms). Default: 400. */
+    delay?: number;
+    /** The focusable/hoverable trigger element. */
+    children: ReactNode;
+    /** Forwarded as `data-testid` on the wrapper div. */
+    testId?: string;
+    /** Max width of the tooltip bubble in px. Default: 220. */
+    maxWidth?: number;
+}
+export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/theme/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACpF,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,sEAAsE;IACtE,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAwFD,eAAO,MAAM,OAAO,yGAyGlB,CAAC"}