@castui/cast-ui 4.1.1 → 4.2.1

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,15 @@ 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;
-//# sourceMappingURL=Icon.d.ts.map
+export declare function Icon({ name, size, color, fill, weight, grade, opticalSize, style, }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/Icon.js

@@ -1,11 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Text, Platform } from 'react-native';
-const FONT_FAMILY = Platform.select({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = Icon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const FONT_FAMILY = react_native_1.Platform.select({
     web: '"Material Symbols Outlined", sans-serif',
     default: 'MaterialSymbolsOutlined',
 });
-export function Icon({ name, size = 20, color = '#374151', style }) {
-    return (_jsx(Text, { selectable: false, accessibilityElementsHidden: true, importantForAccessibility: "no", style: [
+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 = react_native_1.Platform.OS === 'web'
+        ? {
+            fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' ${opsz}`,
+        }
+        : null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: false, accessibilityElementsHidden: true, importantForAccessibility: "no", style: [
             {
                 fontFamily: FONT_FAMILY,
                 fontSize: size,
@@ -22,7 +32,7 @@ export function Icon({ name, size = 20, color = '#374151', style }) {
                 textTransform: 'none',
                 textDecorationLine: 'none',
             },
+            variationStyle,
             style,
         ], children: name }));
 }
-//# sourceMappingURL=Icon.js.map

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

@@ -1,2 +1 @@
 export { Icon, type IconProps } from './Icon';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Icon/index.js

@@ -1,2 +1,5 @@
-export { Icon } from './Icon';
-//# sourceMappingURL=index.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });

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

@@ -0,0 +1,62 @@
+/**
+ * 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;

package/dist/components/Input/Input.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = Input;
+const jsx_runtime_1 = require("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.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const Icon_1 = require("../Icon");
+const tokens_1 = require("../../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
+// ---------------------------------------------------------------------------
+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 } = (0, theme_1.useTheme)();
+    const sizeTokens = components.input[size];
+    const labelTypo = tokens_1.label[LABEL_SCALE[size]];
+    const bodyTypo = tokens_1.body[BODY_SCALE[size]];
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [isFocused, setIsFocused] = (0, react_1.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 = tokens_1.controlTokens.borderWidth;
+    }
+    else if (isFocused) {
+        bg = neutral.default.bg;
+        borderColor = scheme.focusRing.color;
+        borderWidth = tokens_1.controlTokens.focusRingWidth;
+    }
+    else if (error) {
+        bg = neutral.default.bg;
+        borderColor = errorTokens.border;
+        borderWidth = tokens_1.controlTokens.borderWidth;
+    }
+    else if (isHovered) {
+        bg = neutral.hover.bg;
+        borderColor = neutral.hover.border;
+        borderWidth = tokens_1.controlTokens.borderWidth;
+    }
+    else {
+        bg = neutral.default.bg;
+        borderColor = neutral.default.border;
+        borderWidth = tokens_1.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' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: ICON_SIZE, color: iconColor })) : (leadingIcon);
+    const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: ICON_SIZE, color: iconColor })) : (trailingIcon);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            { alignSelf: 'stretch', gap: components.input.fieldGap },
+            style,
+        ], children: [formLabel ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                    fontFamily: tokens_1.fontFamily.sans,
+                    fontWeight: tokens_1.fontWeight.medium,
+                    fontSize: labelTypo.fontSize,
+                    lineHeight: labelTypo.lineHeight,
+                    letterSpacing: labelTypo.letterSpacing,
+                    color: labelColor,
+                }, selectable: false, children: formLabel })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.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 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedLeading })) : null, (0, jsx_runtime_1.jsx)(react_native_1.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: tokens_1.fontFamily.sans,
+                            fontWeight: tokens_1.fontWeight.regular,
+                            fontSize: bodyTypo.fontSize,
+                            lineHeight: bodyTypo.lineHeight,
+                            letterSpacing: bodyTypo.letterSpacing,
+                            color: textColor,
+                            padding: 0,
+                            ...(react_native_1.Platform.OS === 'web'
+                                ? { outlineWidth: 0 }
+                                : {}),
+                        } }), resolvedTrailing ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedTrailing })) : null] }), helperText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                    fontFamily: tokens_1.fontFamily.sans,
+                    fontWeight: tokens_1.fontWeight.regular,
+                    fontSize: tokens_1.caption.fontSize,
+                    lineHeight: tokens_1.caption.lineHeight,
+                    letterSpacing: tokens_1.caption.letterSpacing,
+                    color: helperColor,
+                }, selectable: false, children: helperText })) : null] }));
+}

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

@@ -0,0 +1 @@
+export { Input, type InputProps, type InputSize } from './Input';

package/dist/components/Input/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+var Input_1 = require("./Input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });

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

@@ -0,0 +1,58 @@
+/**
+ * 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;

package/dist/components/List/List.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = List;
+exports.ListSubheader = ListSubheader;
+exports.ListDivider = ListDivider;
+exports.ListItem = ListItem;
+const jsx_runtime_1 = require("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).
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const Icon_1 = require("../Icon");
+const tokens_1 = require("../../tokens");
+function List({ children, style, accessibilityLabel }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const listColors = scheme.list;
+    const tokens = components.list;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "list", accessibilityLabel: accessibilityLabel, style: [
+            {
+                backgroundColor: listColors.containerBg,
+                gap: tokens.sectionGap,
+                alignSelf: 'stretch',
+            },
+            style,
+        ], children: children }));
+}
+function ListSubheader({ children, style }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const listColors = scheme.list;
+    const tokens = components.list.subheader;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            {
+                paddingHorizontal: tokens.paddingX,
+                paddingVertical: tokens.paddingY,
+            },
+            style,
+        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                fontFamily: tokens_1.fontFamily.sans,
+                fontWeight: tokens_1.fontWeight.regular,
+                fontSize: tokens_1.caption.fontSize,
+                lineHeight: tokens_1.caption.lineHeight,
+                letterSpacing: tokens_1.caption.letterSpacing,
+                color: listColors.subheaderFg,
+            }, selectable: false, children: children }) }));
+}
+function ListDivider({ style }) {
+    const { scheme } = (0, theme_1.useTheme)();
+    const listColors = scheme.list;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "none", style: [
+            {
+                height: 1,
+                backgroundColor: listColors.separator,
+            },
+            style,
+        ] }));
+}
+function ListItem({ children, description, icon, trailingIcon, selected = false, disabled = false, onPress, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const listColors = scheme.list;
+    const tokens = components.list.item;
+    const [isHovered, setIsHovered] = (0, react_1.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' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: tokens.iconSize, color: colors.fg })) : (icon);
+    const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: tokens.iconSize, color: colors.fg })) : (trailingIcon);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.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 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens.iconSize, height: tokens.iconSize }, children: resolvedIcon })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, justifyContent: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                            fontFamily: tokens_1.fontFamily.sans,
+                            fontWeight: tokens_1.fontWeight.medium,
+                            fontSize: tokens_1.label.md.fontSize,
+                            lineHeight: tokens_1.label.md.lineHeight,
+                            letterSpacing: tokens_1.label.md.letterSpacing,
+                            color: colors.fg,
+                        }, selectable: false, children: children }), description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                            fontFamily: tokens_1.fontFamily.sans,
+                            fontWeight: tokens_1.fontWeight.regular,
+                            fontSize: tokens_1.body.md.fontSize,
+                            lineHeight: tokens_1.body.md.lineHeight,
+                            letterSpacing: tokens_1.body.md.letterSpacing,
+                            color: disabled ? colors.fg : listColors.descriptionFg,
+                        }, selectable: false, children: description })) : null] }), resolvedTrailing ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens.iconSize, height: tokens.iconSize }, children: resolvedTrailing })) : null] }));
+}

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

@@ -0,0 +1 @@
+export { List, ListItem, ListSubheader, ListDivider, type ListProps, type ListItemProps, type ListSubheaderProps, type ListDividerProps, } from './List';

package/dist/components/List/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListDivider = exports.ListSubheader = exports.ListItem = exports.List = void 0;
+var List_1 = require("./List");
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_1.List; } });
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return List_1.ListItem; } });
+Object.defineProperty(exports, "ListSubheader", { enumerable: true, get: function () { return List_1.ListSubheader; } });
+Object.defineProperty(exports, "ListDivider", { enumerable: true, get: function () { return List_1.ListDivider; } });

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

@@ -0,0 +1,34 @@
+/**
+ * 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;

package/dist/components/Popover/Popover.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = Popover;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../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 = react_native_1.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 };
+    }
+}
+function Popover({ children, direction = 'bottom', size = 'default', hideArrow = false, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const surfaceTokens = scheme.surface;
+    const tokens = components.popover;
+    const sizeTokens = tokens[size];
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityLabel: accessibilityLabel, style: [
+            {
+                alignSelf: 'flex-start',
+                backgroundColor: surfaceTokens.overlay.bg,
+                borderRadius: tokens.borderRadius,
+                padding: sizeTokens.padding,
+                ...SHADOW,
+            },
+            style,
+        ], children: [!hideArrow ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: arrowStyle(direction, tokens.arrowSize, surfaceTokens.overlay.bg) })) : null, children] }));
+}

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

@@ -0,0 +1 @@
+export { Popover, type PopoverProps, type PopoverSize, type PopoverDirection, } from './Popover';

package/dist/components/Popover/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = void 0;
+var Popover_1 = require("./Popover");
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });