@castui/cast-ui 4.1.1 → 4.2.0

package/dist/components/Icon/Icon.d.ts

@@ -1,14 +1,24 @@
 /**
  * Icon — renders a Material Symbols Outlined icon by name.
  *
- * Uses the Material Symbols font with ligature rendering.
- * The `name` prop matches Material Symbols names exactly
- * (e.g., "star", "close", "chevron_right", "add").
+ * Why Material Symbols Outlined?
+ *   - It's the icon set the Cast UI Figma uses (star, check, close,
+ *     keyboard_arrow_down, …), so names map 1:1 to the design with zero drift.
+ *   - Apache-2.0 licensed and free for commercial use.
+ *   - It's a single *variable* font, so one asset covers every icon plus the
+ *     fill / weight / grade / optical-size axes — keeping Cast UI's zero
+ *     runtime dependencies (no per-icon SVG packages, no vector-icons dep).
  *
- * Requires the MaterialSymbolsOutlined font to be loaded:
- *   - Web: Google Fonts CSS import
- *   - Expo: expo-font
- *   - Bare RN: font asset linking
+ * Rendering uses font ligatures: the `name` text (e.g. "chevron_right") is
+ * shaped into the glyph by the font. Requires the font to be loaded:
+ *   - Web: Google Fonts CSS import (see .storybook/preview-head.html), or
+ *     self-host the same `Material Symbols Outlined` family.
+ *   - Expo: load `MaterialSymbolsOutlined` via expo-font / useFonts.
+ *   - Bare RN: link the .ttf as a font asset (react-native.config.js / Xcode).
+ *
+ * The fill / weight / grade / opticalSize axes are applied via CSS
+ * `fontVariationSettings` and therefore take effect on web (where the variable
+ * font is loaded). On native they require a matching static/variable font cut.
  */
 import { type TextStyle, type StyleProp } from 'react-native';
 export type IconProps = {
@@ -18,8 +28,16 @@ export type IconProps = {
     size?: number;
     /** Icon colour. Defaults to "#374151" (neutral fg). */
     color?: string;
+    /** Filled vs outlined glyph (FILL axis, 0–1). Defaults to false (outlined). */
+    fill?: boolean;
+    /** Stroke weight (wght axis, 100–700). Defaults to 400. */
+    weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700;
+    /** Emphasis grade (GRAD axis, -25–200). Defaults to 0. */
+    grade?: number;
+    /** Optical size (opsz axis, 20–48). Defaults to the icon `size`. */
+    opticalSize?: number;
     /** Additional style overrides. */
     style?: StyleProp<TextStyle>;
 };
-export declare function Icon({ name, size, color, style }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Icon({ name, size, color, fill, weight, grade, opticalSize, style, }: IconProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Icon.d.ts.map

package/dist/components/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,EAAkB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9E,MAAM,MAAM,SAAS,GAAG;IACtB,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAOF,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,KAAiB,EAAE,KAAK,EAAE,EAAE,SAAS,2CA6B5E"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,EAAkB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9E,MAAM,MAAM,SAAS,GAAG;IACtB,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2DAA2D;IAC3D,MAAM,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACjD,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAOF,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAS,EACT,KAAiB,EACjB,IAAY,EACZ,MAAY,EACZ,KAAS,EACT,WAAW,EACX,KAAK,GACN,EAAE,SAAS,2CAuCX"}

package/dist/components/Icon/Icon.js

@@ -4,7 +4,14 @@ const FONT_FAMILY = Platform.select({
     web: '"Material Symbols Outlined", sans-serif',
     default: 'MaterialSymbolsOutlined',
 });
-export function Icon({ name, size = 20, color = '#374151', style }) {
+export function Icon({ name, size = 20, color = '#374151', fill = false, weight = 400, grade = 0, opticalSize, style, }) {
+    // Material Symbols variable-font axes — applied on web via fontVariationSettings.
+    const opsz = Math.min(48, Math.max(20, opticalSize ?? size));
+    const variationStyle = Platform.OS === 'web'
+        ? {
+            fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' ${opsz}`,
+        }
+        : null;
     return (_jsx(Text, { selectable: false, accessibilityElementsHidden: true, importantForAccessibility: "no", style: [
             {
                 fontFamily: FONT_FAMILY,
@@ -22,6 +29,7 @@ export function Icon({ name, size = 20, color = '#374151', style }) {
                 textTransform: 'none',
                 textDecorationLine: 'none',
             },
+            variationStyle,
             style,
         ], children: name }));
 }

package/dist/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAkC,MAAM,cAAc,CAAC;AAa9E,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC;IAClC,GAAG,EAAE,yCAAyC;IAC9C,OAAO,EAAE,yBAAyB;CACnC,CAAC,CAAC;AAEH,MAAM,UAAU,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,SAAS,EAAE,KAAK,EAAa;IAC3E,OAAO,CACL,KAAC,IAAI,IACH,UAAU,EAAE,KAAK,EACjB,2BAA2B,QAC3B,yBAAyB,EAAC,IAAI,EAC9B,KAAK,EAAE;YACL;gBACE,UAAU,EAAE,WAAW;gBACvB,QAAQ,EAAE,IAAI;gBACd,UAAU,EAAE,IAAI;gBAChB,KAAK;gBACL,gDAAgD;gBAChD,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,IAAI;gBACZ,SAAS,EAAE,QAAQ;gBACnB,kCAAkC;gBAClC,UAAU,EAAE,KAAK;gBACjB,SAAS,EAAE,QAAQ;gBACnB,aAAa,EAAE,CAAC;gBAChB,aAAa,EAAE,MAAM;gBACrB,kBAAkB,EAAE,MAAM;aAC3B;YACD,KAAK;SACN,YAEA,IAAI,GACA,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAwBA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAkC,MAAM,cAAc,CAAC;AAqB9E,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC;IAClC,GAAG,EAAE,yCAAyC;IAC9C,OAAO,EAAE,yBAAyB;CACnC,CAAC,CAAC;AAEH,MAAM,UAAU,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,KAAK,EACZ,MAAM,GAAG,GAAG,EACZ,KAAK,GAAG,CAAC,EACT,WAAW,EACX,KAAK,GACK;IACV,kFAAkF;IAClF,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC;IAC7D,MAAM,cAAc,GAClB,QAAQ,CAAC,EAAE,KAAK,KAAK;QACnB,CAAC,CAAE;YACC,qBAAqB,EAAE,UAAU,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,MAAM,YAAY,KAAK,YAAY,IAAI,EAAE;SAC1E;QAC5B,CAAC,CAAC,IAAI,CAAC;IAEX,OAAO,CACL,KAAC,IAAI,IACH,UAAU,EAAE,KAAK,EACjB,2BAA2B,QAC3B,yBAAyB,EAAC,IAAI,EAC9B,KAAK,EAAE;YACL;gBACE,UAAU,EAAE,WAAW;gBACvB,QAAQ,EAAE,IAAI;gBACd,UAAU,EAAE,IAAI;gBAChB,KAAK;gBACL,gDAAgD;gBAChD,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,IAAI;gBACZ,SAAS,EAAE,QAAQ;gBACnB,kCAAkC;gBAClC,UAAU,EAAE,KAAK;gBACjB,SAAS,EAAE,QAAQ;gBACnB,aAAa,EAAE,CAAC;gBAChB,aAAa,EAAE,MAAM;gBACrB,kBAAkB,EAAE,MAAM;aAC3B;YACD,cAAc;YACd,KAAK;SACN,YAEA,IAAI,GACA,CACR,CAAC;AACJ,CAAC"}

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Input — single-line text field with label and helper/error text.
+ *
+ * Maps to the Figma <Input> component (node 307:3476):
+ *   size  → small | default | large
+ *   state → default | hover | focus | error | disabled
+ *
+ * `error` and `disabled` are props; `hover` and `focus` are interaction-driven.
+ * Field spacing comes from the density theme's `input` tokens (shared with the
+ * Select trigger). Colours come from the semantic intent system (neutral):
+ *   default → neutral/default/default      hover → neutral/default/hover
+ *   focus   → focus-ring border (2px)      error → danger border + red helper
+ *   disabled→ shared disabled colours
+ * Label uses the label scale, the value/placeholder the body scale (both
+ * matched to size); helper text uses the caption scale.
+ */
+import React from 'react';
+import { type ViewStyle, type StyleProp, type KeyboardTypeOptions, type ReturnKeyTypeOptions } from 'react-native';
+export type InputSize = 'small' | 'default' | 'large';
+export type InputProps = {
+    /** Form label above the field. */
+    label?: string;
+    /** Helper text below the field — turns red when `error` is set. */
+    helperText?: string;
+    /** Placeholder shown when the field is empty. */
+    placeholder?: string;
+    /** Controlled value. */
+    value?: string;
+    /** Uncontrolled initial value. */
+    defaultValue?: string;
+    /** Change handler — receives the new text. */
+    onChangeText?: (text: string) => void;
+    /** Size variant — controls padding, gap, and typography scale. */
+    size?: InputSize;
+    /** Error state — danger border and red helper text. */
+    error?: boolean;
+    /** Disables interaction and applies muted styling. */
+    disabled?: boolean;
+    /** Leading icon — Material Symbols name string or a ReactNode. */
+    leadingIcon?: string | React.ReactNode;
+    /** Trailing icon — Material Symbols name string or a ReactNode. */
+    trailingIcon?: string | React.ReactNode;
+    /** Masks the text (passwords). */
+    secureTextEntry?: boolean;
+    /** Keyboard type for native platforms. */
+    keyboardType?: KeyboardTypeOptions;
+    /** Auto-capitalisation behaviour. */
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+    /** Return key label for native platforms. */
+    returnKeyType?: ReturnKeyTypeOptions;
+    /** Submit (return key) handler. */
+    onSubmitEditing?: () => void;
+    /** Focus handler. */
+    onFocus?: () => void;
+    /** Blur handler. */
+    onBlur?: () => void;
+    /** Style override for the outer container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to the label prop. */
+    accessibilityLabel?: string;
+};
+export declare function Input({ label: formLabel, helperText, placeholder, value, defaultValue, onChangeText, size, error, disabled, leadingIcon, trailingIcon, secureTextEntry, keyboardType, autoCapitalize, returnKeyType, onSubmitEditing, onFocus, onBlur, style, accessibilityLabel, }: InputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/Input/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EAC1B,MAAM,cAAc,CAAC;AAgBtB,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG;IACvB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kEAAkE;IAClE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACxC,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,CAAC;IAC/D,6CAA6C;IAC7C,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AA0BF,wBAAgB,KAAK,CAAC,EACpB,KAAK,EAAE,SAAS,EAChB,UAAU,EACV,WAAW,EACX,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,IAAgB,EAChB,KAAa,EACb,QAAgB,EAChB,WAAW,EACX,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,cAAc,EACd,aAAa,EACb,eAAe,EACf,OAAO,EACP,MAAM,EACN,KAAK,EACL,kBAAkB,GACnB,EAAE,UAAU,2CA8KZ"}

package/dist/components/Input/Input.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Input — single-line text field with label and helper/error text.
+ *
+ * Maps to the Figma <Input> component (node 307:3476):
+ *   size  → small | default | large
+ *   state → default | hover | focus | error | disabled
+ *
+ * `error` and `disabled` are props; `hover` and `focus` are interaction-driven.
+ * Field spacing comes from the density theme's `input` tokens (shared with the
+ * Select trigger). Colours come from the semantic intent system (neutral):
+ *   default → neutral/default/default      hover → neutral/default/hover
+ *   focus   → focus-ring border (2px)      error → danger border + red helper
+ *   disabled→ shared disabled colours
+ * Label uses the label scale, the value/placeholder the body scale (both
+ * matched to size); helper text uses the caption scale.
+ */
+import { useState } from 'react';
+import { View, Text, TextInput, Platform, } from 'react-native';
+import { useTheme } from '../../theme';
+import { Icon } from '../Icon';
+import { fontFamily, fontWeight, label, body, caption, controlTokens, } from '../../tokens';
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const ICON_SIZE = 16;
+/** Maps input size → label typography scale (form label text) */
+const LABEL_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+/** Maps input size → body typography scale (value + placeholder text) */
+const BODY_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function Input({ label: formLabel, helperText, placeholder, value, defaultValue, onChangeText, size = 'default', error = false, disabled = false, leadingIcon, trailingIcon, secureTextEntry, keyboardType, autoCapitalize, returnKeyType, onSubmitEditing, onFocus, onBlur, style, accessibilityLabel, }) {
+    const { components, scheme } = useTheme();
+    const sizeTokens = components.input[size];
+    const labelTypo = label[LABEL_SCALE[size]];
+    const bodyTypo = body[BODY_SCALE[size]];
+    const [isHovered, setIsHovered] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const disabledColors = scheme.disabled;
+    const errorTokens = scheme.error;
+    const textTokens = scheme.text;
+    const neutral = scheme.intents.neutral.default;
+    // Resolve field colours — state priority: disabled > error > focus > hover > default
+    let bg;
+    let borderColor;
+    let borderWidth;
+    if (disabled) {
+        bg = disabledColors.bg;
+        borderColor = disabledColors.border;
+        borderWidth = controlTokens.borderWidth;
+    }
+    else if (isFocused) {
+        bg = neutral.default.bg;
+        borderColor = scheme.focusRing.color;
+        borderWidth = controlTokens.focusRingWidth;
+    }
+    else if (error) {
+        bg = neutral.default.bg;
+        borderColor = errorTokens.border;
+        borderWidth = controlTokens.borderWidth;
+    }
+    else if (isHovered) {
+        bg = neutral.hover.bg;
+        borderColor = neutral.hover.border;
+        borderWidth = controlTokens.borderWidth;
+    }
+    else {
+        bg = neutral.default.bg;
+        borderColor = neutral.default.border;
+        borderWidth = controlTokens.borderWidth;
+    }
+    const textColor = disabled ? disabledColors.fg : neutral.default.fg;
+    const labelColor = disabled ? disabledColors.fg : neutral.default.fg;
+    const helperColor = disabled
+        ? disabledColors.fg
+        : error
+            ? errorTokens.fg
+            : textTokens.description;
+    const iconColor = disabled ? disabledColors.fg : neutral.default.fg;
+    const resolvedLeading = typeof leadingIcon === 'string' ? (_jsx(Icon, { name: leadingIcon, size: ICON_SIZE, color: iconColor })) : (leadingIcon);
+    const resolvedTrailing = typeof trailingIcon === 'string' ? (_jsx(Icon, { name: trailingIcon, size: ICON_SIZE, color: iconColor })) : (trailingIcon);
+    return (_jsxs(View, { style: [
+            { alignSelf: 'stretch', gap: components.input.fieldGap },
+            style,
+        ], children: [formLabel ? (_jsx(Text, { style: {
+                    fontFamily: fontFamily.sans,
+                    fontWeight: fontWeight.medium,
+                    fontSize: labelTypo.fontSize,
+                    lineHeight: labelTypo.lineHeight,
+                    letterSpacing: labelTypo.letterSpacing,
+                    color: labelColor,
+                }, selectable: false, children: formLabel })) : null, _jsxs(View, { onPointerEnter: disabled ? undefined : () => setIsHovered(true), onPointerLeave: disabled ? undefined : () => setIsHovered(false), style: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: sizeTokens.gap,
+                    paddingHorizontal: sizeTokens.paddingX,
+                    paddingVertical: sizeTokens.paddingY,
+                    borderRadius: sizeTokens.borderRadius,
+                    borderWidth,
+                    borderColor,
+                    backgroundColor: bg,
+                }, children: [resolvedLeading ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedLeading })) : null, _jsx(TextInput, { value: value, defaultValue: defaultValue, onChangeText: onChangeText, placeholder: placeholder, placeholderTextColor: textTokens.placeholder, editable: !disabled, secureTextEntry: secureTextEntry, keyboardType: keyboardType, autoCapitalize: autoCapitalize, returnKeyType: returnKeyType, onSubmitEditing: onSubmitEditing, onFocus: () => {
+                            setIsFocused(true);
+                            onFocus?.();
+                        }, onBlur: () => {
+                            setIsFocused(false);
+                            onBlur?.();
+                        }, accessibilityLabel: accessibilityLabel || formLabel, style: {
+                            flex: 1,
+                            fontFamily: fontFamily.sans,
+                            fontWeight: fontWeight.regular,
+                            fontSize: bodyTypo.fontSize,
+                            lineHeight: bodyTypo.lineHeight,
+                            letterSpacing: bodyTypo.letterSpacing,
+                            color: textColor,
+                            padding: 0,
+                            ...(Platform.OS === 'web'
+                                ? { outlineWidth: 0 }
+                                : {}),
+                        } }), resolvedTrailing ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedTrailing })) : null] }), helperText ? (_jsx(Text, { style: {
+                    fontFamily: fontFamily.sans,
+                    fontWeight: fontWeight.regular,
+                    fontSize: caption.fontSize,
+                    lineHeight: caption.lineHeight,
+                    letterSpacing: caption.letterSpacing,
+                    color: helperColor,
+                }, selectable: false, children: helperText })) : null] }));
+}
+//# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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"}

package/dist/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input, type InputProps, type InputSize } from './Input';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/Input/index.js

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+//# sourceMappingURL=index.js.map

package/dist/components/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmC,MAAM,SAAS,CAAC"}

package/dist/components/List/List.d.ts

@@ -0,0 +1,59 @@
+/**
+ * List — vertical collection of items with optional section subheaders.
+ *
+ * Maps to the Figma <List> component (node 452:3401):
+ *   List          — the container surface (white bg, 1px section gap)
+ *   ListSubheader — muted caption label for a section ("Inbox", "Labels")
+ *   ListItem      — icon + label + optional description, with
+ *                   default / selected / disabled states
+ *   ListDivider   — horizontal rule between sections
+ *
+ * Density (compact/default/comfortable) drives item padding, gap, and
+ * icon size via the theme's `list` tokens. Colours come from the theme's
+ * colour scheme (`scheme.list`, constant across densities).
+ */
+import React from 'react';
+import { type ViewStyle, type StyleProp, type GestureResponderEvent } from 'react-native';
+export type ListProps = {
+    /** ListItem / ListSubheader / ListDivider children. */
+    children: React.ReactNode;
+    /** Style override for the outer container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the list region. */
+    accessibilityLabel?: string;
+};
+export declare function List({ children, style, accessibilityLabel }: ListProps): import("react/jsx-runtime").JSX.Element;
+export type ListSubheaderProps = {
+    /** Subheader label text. */
+    children: string;
+    /** Style override. */
+    style?: StyleProp<ViewStyle>;
+};
+export declare function ListSubheader({ children, style }: ListSubheaderProps): import("react/jsx-runtime").JSX.Element;
+export type ListDividerProps = {
+    /** Style override for the divider line. */
+    style?: StyleProp<ViewStyle>;
+};
+export declare function ListDivider({ style }: ListDividerProps): import("react/jsx-runtime").JSX.Element;
+export type ListItemProps = {
+    /** Primary label text. */
+    children: string;
+    /** Supporting description text below the label. */
+    description?: string;
+    /** Leading icon — Material Symbols name string or a ReactNode. */
+    icon?: string | React.ReactNode;
+    /** Trailing icon — Material Symbols name string or a ReactNode. */
+    trailingIcon?: string | React.ReactNode;
+    /** Marks the item as selected (highlighted). */
+    selected?: boolean;
+    /** Disables interaction and applies muted styling. */
+    disabled?: boolean;
+    /** Press handler. */
+    onPress?: (e: GestureResponderEvent) => void;
+    /** Style override for the item row. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to the label text. */
+    accessibilityLabel?: string;
+};
+export declare function ListItem({ children, description, icon, trailingIcon, selected, disabled, onPress, style, accessibilityLabel, }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=List.d.ts.map

package/dist/components/List/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,qBAAqB,EAC3B,MAAM,cAAc,CAAC;AAetB,MAAM,MAAM,SAAS,GAAG;IACtB,uDAAuD;IACvD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,SAAS,2CAqBtE;AAMD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4BAA4B;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,kBAAkB,2CA8BpE;AAMD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CAgBtD;AAMD,MAAM,MAAM,aAAa,GAAG;IAC1B,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACxC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC7C,uCAAuC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,QAAgB,EAChB,QAAgB,EAChB,OAAO,EACP,KAAK,EACL,kBAAkB,GACnB,EAAE,aAAa,2CA2Gf"}

package/dist/components/List/List.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * List — vertical collection of items with optional section subheaders.
+ *
+ * Maps to the Figma <List> component (node 452:3401):
+ *   List          — the container surface (white bg, 1px section gap)
+ *   ListSubheader — muted caption label for a section ("Inbox", "Labels")
+ *   ListItem      — icon + label + optional description, with
+ *                   default / selected / disabled states
+ *   ListDivider   — horizontal rule between sections
+ *
+ * Density (compact/default/comfortable) drives item padding, gap, and
+ * icon size via the theme's `list` tokens. Colours come from the theme's
+ * colour scheme (`scheme.list`, constant across densities).
+ */
+import { useState } from 'react';
+import { Pressable, View, Text, } from 'react-native';
+import { useTheme } from '../../theme';
+import { Icon } from '../Icon';
+import { fontFamily, fontWeight, label, body, caption, } from '../../tokens';
+export function List({ children, style, accessibilityLabel }) {
+    const { components, scheme } = useTheme();
+    const listColors = scheme.list;
+    const tokens = components.list;
+    return (_jsx(View, { accessibilityRole: "list", accessibilityLabel: accessibilityLabel, style: [
+            {
+                backgroundColor: listColors.containerBg,
+                gap: tokens.sectionGap,
+                alignSelf: 'stretch',
+            },
+            style,
+        ], children: children }));
+}
+export function ListSubheader({ children, style }) {
+    const { components, scheme } = useTheme();
+    const listColors = scheme.list;
+    const tokens = components.list.subheader;
+    return (_jsx(View, { style: [
+            {
+                paddingHorizontal: tokens.paddingX,
+                paddingVertical: tokens.paddingY,
+            },
+            style,
+        ], children: _jsx(Text, { style: {
+                fontFamily: fontFamily.sans,
+                fontWeight: fontWeight.regular,
+                fontSize: caption.fontSize,
+                lineHeight: caption.lineHeight,
+                letterSpacing: caption.letterSpacing,
+                color: listColors.subheaderFg,
+            }, selectable: false, children: children }) }));
+}
+export function ListDivider({ style }) {
+    const { scheme } = useTheme();
+    const listColors = scheme.list;
+    return (_jsx(View, { accessibilityRole: "none", style: [
+            {
+                height: 1,
+                backgroundColor: listColors.separator,
+            },
+            style,
+        ] }));
+}
+export function ListItem({ children, description, icon, trailingIcon, selected = false, disabled = false, onPress, style, accessibilityLabel, }) {
+    const { components, scheme } = useTheme();
+    const listColors = scheme.list;
+    const tokens = components.list.item;
+    const [isHovered, setIsHovered] = useState(false);
+    // State priority: disabled > selected+hover > selected > hover > default
+    const colors = disabled
+        ? listColors.item.disabled
+        : selected && isHovered
+            ? listColors.item.selectedHover
+            : selected
+                ? listColors.item.selected
+                : isHovered
+                    ? listColors.item.hover
+                    : listColors.item.default;
+    const resolvedIcon = typeof icon === 'string' ? (_jsx(Icon, { name: icon, size: tokens.iconSize, color: colors.fg })) : (icon);
+    const resolvedTrailing = typeof trailingIcon === 'string' ? (_jsx(Icon, { name: trailingIcon, size: tokens.iconSize, color: colors.fg })) : (trailingIcon);
+    return (_jsxs(Pressable, { onPress: (e) => {
+            if (!disabled)
+                onPress?.(e);
+        }, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), disabled: disabled || !onPress, accessibilityRole: "menuitem", accessibilityLabel: accessibilityLabel || children, accessibilityState: { selected, disabled }, style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                gap: tokens.gap,
+                paddingHorizontal: tokens.paddingX,
+                paddingVertical: tokens.paddingY,
+                borderRadius: tokens.borderRadius,
+                backgroundColor: colors.bg,
+            },
+            style,
+        ], children: [resolvedIcon ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens.iconSize, height: tokens.iconSize }, children: resolvedIcon })) : null, _jsxs(View, { style: { flex: 1, justifyContent: 'center' }, children: [_jsx(Text, { style: {
+                            fontFamily: fontFamily.sans,
+                            fontWeight: fontWeight.medium,
+                            fontSize: label.md.fontSize,
+                            lineHeight: label.md.lineHeight,
+                            letterSpacing: label.md.letterSpacing,
+                            color: colors.fg,
+                        }, selectable: false, children: children }), description ? (_jsx(Text, { style: {
+                            fontFamily: fontFamily.sans,
+                            fontWeight: fontWeight.regular,
+                            fontSize: body.md.fontSize,
+                            lineHeight: body.md.lineHeight,
+                            letterSpacing: body.md.letterSpacing,
+                            color: disabled ? colors.fg : listColors.descriptionFg,
+                        }, selectable: false, children: description })) : null] }), resolvedTrailing ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens.iconSize, height: tokens.iconSize }, children: resolvedTrailing })) : null] }));
+}
+//# sourceMappingURL=List.js.map

package/dist/components/List/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"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"}

package/dist/components/List/index.d.ts

@@ -0,0 +1,2 @@
+export { List, ListItem, ListSubheader, ListDivider, type ListProps, type ListItemProps, type ListSubheaderProps, type ListDividerProps, } from './List';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,WAAW,EACX,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,GACtB,MAAM,QAAQ,CAAC"}

package/dist/components/List/index.js

@@ -0,0 +1,2 @@
+export { List, ListItem, ListSubheader, ListDivider, } from './List';
+//# sourceMappingURL=index.js.map

package/dist/components/List/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,WAAW,GAKZ,MAAM,QAAQ,CAAC"}

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Popover — a floating surface that points at an anchor with an arrow.
+ *
+ * Maps to the Figma <Popover> component (node 307:4149):
+ *   direction → top | bottom | left | right   (the edge the arrow sits on)
+ *   size      → small | default | large        (drives content padding)
+ *
+ * This is the presentational bubble only: it renders the overlay surface
+ * (white background, 8px radius, shadow/md) with a directional arrow and your
+ * `children` inside. Positioning relative to a trigger is the caller's job —
+ * wrap it in a positioned container or pass a `style` with absolute coords.
+ *
+ * Padding comes from the `popover` density theme (size × density); the radius
+ * and arrow size are constant across densities.
+ */
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type PopoverSize = 'small' | 'default' | 'large';
+export type PopoverDirection = 'top' | 'bottom' | 'left' | 'right';
+export type PopoverProps = {
+    /** Content rendered inside the bubble. */
+    children: React.ReactNode;
+    /** The edge the arrow sits on (points away from the bubble). */
+    direction?: PopoverDirection;
+    /** Size variant — controls content padding. */
+    size?: PopoverSize;
+    /** Hide the directional arrow. */
+    hideArrow?: boolean;
+    /** Outer style — use for positioning (absolute coords, margin, width). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the popover surface. */
+    accessibilityLabel?: string;
+};
+export declare function Popover({ children, direction, size, hideArrow, style, accessibilityLabel, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Popover.d.ts.map

package/dist/components/Popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG;IACzB,0CAA0C;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gEAAgE;IAChE,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,mDAAmD;IACnD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAmDF,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAoB,EACpB,IAAgB,EAChB,SAAiB,EACjB,KAAK,EACL,kBAAkB,GACnB,EAAE,YAAY,2CA8Bd"}

package/dist/components/Popover/Popover.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Platform, } from 'react-native';
+import { useTheme } from '../../theme';
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** shadow/md — overlay drop shadow (two stacked layers). */
+const SHADOW_WEB = {
+    boxShadow: '0px 4px 6px -1px rgba(0,0,0,0.07), 0px 2px 4px -2px rgba(0,0,0,0.05)',
+};
+const SHADOW_NATIVE = {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.07,
+    shadowRadius: 6,
+    elevation: 4,
+};
+const SHADOW = Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE;
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/** Positions the rotated-square arrow on the requested edge, centred. */
+function arrowStyle(direction, arrowSize, backgroundColor) {
+    const half = arrowSize / 2;
+    const base = {
+        position: 'absolute',
+        width: arrowSize,
+        height: arrowSize,
+        backgroundColor,
+        transform: [{ rotate: '45deg' }],
+    };
+    switch (direction) {
+        case 'top':
+            return { ...base, top: -half, left: '50%', marginLeft: -half };
+        case 'left':
+            return { ...base, left: -half, top: '50%', marginTop: -half };
+        case 'right':
+            return { ...base, right: -half, top: '50%', marginTop: -half };
+        case 'bottom':
+        default:
+            return { ...base, bottom: -half, left: '50%', marginLeft: -half };
+    }
+}
+export function Popover({ children, direction = 'bottom', size = 'default', hideArrow = false, style, accessibilityLabel, }) {
+    const { components, scheme } = useTheme();
+    const surfaceTokens = scheme.surface;
+    const tokens = components.popover;
+    const sizeTokens = tokens[size];
+    return (_jsxs(View, { accessibilityLabel: accessibilityLabel, style: [
+            {
+                alignSelf: 'flex-start',
+                backgroundColor: surfaceTokens.overlay.bg,
+                borderRadius: tokens.borderRadius,
+                padding: sizeTokens.padding,
+                ...SHADOW,
+            },
+            style,
+        ], children: [!hideArrow ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: arrowStyle(direction, tokens.arrowSize, surfaceTokens.overlay.bg) })) : null, children] }));
+}
+//# sourceMappingURL=Popover.js.map