@castui/cast-ui 4.1.1 → 4.2.1

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

@@ -0,0 +1,52 @@
+/**
+ * Radio — single-choice control, used individually or within a RadioGroup.
+ *
+ * Maps to the Figma <Radio> component (node 307:3477):
+ *   checked → boolean
+ *   size    → small | default | large
+ *   state   → default | hover | focus | disabled (interaction-driven)
+ *
+ * Indicator + dot sizes come from the density theme's `radio` tokens (sizes
+ * track the `size` prop; gap tracks density). Colours come from the active
+ * theme scheme's `radio` set + the focus-ring colour.
+ *
+ * RadioGroup provides single-selection semantics: each child Radio with a
+ * `value` reflects `group.value === value` and reports selection upward.
+ */
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type RadioSize = 'small' | 'default' | 'large';
+export type RadioProps = {
+    /** Identifier — required when used inside a RadioGroup. */
+    value?: string;
+    /** Selected state (standalone use / controlled). */
+    checked?: boolean;
+    /** Change handler — receives the next checked value (standalone use). */
+    onChange?: (checked: boolean) => void;
+    /** Optional label rendered beside the indicator. */
+    children?: string;
+    /** Size variant — controls indicator + dot size. Inherited from RadioGroup. */
+    size?: RadioSize;
+    /** Disables interaction and applies muted styling. */
+    disabled?: boolean;
+    /** Style override for the outer row. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to the label text. */
+    accessibilityLabel?: string;
+};
+export type RadioGroupProps = {
+    /** Selected value. */
+    value?: string;
+    /** Selection change handler. */
+    onValueChange?: (value: string) => void;
+    /** Default size applied to all child radios. */
+    size?: RadioSize;
+    /** Disables every radio in the group. */
+    disabled?: boolean;
+    /** Radio children. */
+    children: React.ReactNode;
+    /** Style override for the group container. */
+    style?: StyleProp<ViewStyle>;
+};
+export declare function RadioGroup({ value, onValueChange, size, disabled, children, style, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function Radio({ value, checked, onChange, children, size, disabled, style, accessibilityLabel, }: RadioProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Radio/Radio.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = RadioGroup;
+exports.Radio = Radio;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Radio — single-choice control, used individually or within a RadioGroup.
+ *
+ * Maps to the Figma <Radio> component (node 307:3477):
+ *   checked → boolean
+ *   size    → small | default | large
+ *   state   → default | hover | focus | disabled (interaction-driven)
+ *
+ * Indicator + dot sizes come from the density theme's `radio` tokens (sizes
+ * track the `size` prop; gap tracks density). Colours come from the active
+ * theme scheme's `radio` set + the focus-ring colour.
+ *
+ * RadioGroup provides single-selection semantics: each child Radio with a
+ * `value` reflects `group.value === value` and reports selection upward.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const tokens_1 = require("../../tokens");
+const RadioGroupCtx = (0, react_1.createContext)(null);
+/** Maps radio size → label typography scale */
+const LABEL_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+// ---------------------------------------------------------------------------
+// RadioGroup
+// ---------------------------------------------------------------------------
+function RadioGroup({ value, onValueChange, size = 'default', disabled = false, children, style, }) {
+    const { components } = (0, theme_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(RadioGroupCtx.Provider, { value: { value, onValueChange, size, disabled }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "radiogroup", style: [{ gap: components.radio.gap }, style], children: children }) }));
+}
+// ---------------------------------------------------------------------------
+// Radio
+// ---------------------------------------------------------------------------
+function Radio({ value, checked, onChange, children, size, disabled, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const radioColors = scheme.radio;
+    const group = (0, react_1.useContext)(RadioGroupCtx);
+    const resolvedSize = size ?? group?.size ?? 'default';
+    const resolvedDisabled = disabled ?? group?.disabled ?? false;
+    const isChecked = group != null && value != null ? group.value === value : checked === true;
+    const tokens = components.radio;
+    const sizeTokens = tokens[resolvedSize];
+    const labelTokens = tokens_1.label[LABEL_SCALE[resolvedSize]];
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const handlePress = (0, react_1.useCallback)(() => {
+        if (resolvedDisabled)
+            return;
+        if (group != null && value != null) {
+            group.onValueChange?.(value);
+        }
+        else {
+            onChange?.(!isChecked);
+        }
+    }, [resolvedDisabled, group, value, onChange, isChecked]);
+    // Resolve indicator fill + border. Priority: disabled > focus > checked > hover > default
+    let ringBg;
+    let ringBorderColor;
+    let ringBorderWidth;
+    if (resolvedDisabled) {
+        ringBg = radioColors.indicator.disabled.bg;
+        ringBorderColor = radioColors.indicator.disabled.border;
+        ringBorderWidth = tokens_1.controlTokens.borderWidth;
+    }
+    else if (isChecked) {
+        ringBg = isHovered
+            ? radioColors.indicator.checkedHover.bg
+            : radioColors.indicator.checked.bg;
+        ringBorderColor = isFocused
+            ? scheme.focusRing.color
+            : radioColors.indicator.checked.border;
+        ringBorderWidth = isFocused ? tokens.focusRingWidth : 0;
+    }
+    else {
+        ringBg = radioColors.indicator.uncheckedDefault.bg;
+        if (isFocused) {
+            ringBorderColor = scheme.focusRing.color;
+            ringBorderWidth = tokens.focusRingWidth;
+        }
+        else if (isHovered) {
+            ringBorderColor = radioColors.indicator.uncheckedHover.border;
+            ringBorderWidth = tokens_1.controlTokens.borderWidth;
+        }
+        else {
+            ringBorderColor = radioColors.indicator.uncheckedDefault.border;
+            ringBorderWidth = tokens_1.controlTokens.borderWidth;
+        }
+    }
+    const dotColor = resolvedDisabled
+        ? radioColors.dot.disabled
+        : radioColors.dot.default;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: handlePress, disabled: resolvedDisabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), accessibilityRole: "radio", accessibilityLabel: accessibilityLabel || children, accessibilityState: { checked: isChecked, disabled: resolvedDisabled }, style: [
+            { flexDirection: 'row', alignItems: 'flex-start', gap: tokens.gap },
+            style,
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                    width: sizeTokens.indicatorSize,
+                    height: sizeTokens.indicatorSize,
+                    borderRadius: tokens.borderRadius,
+                    backgroundColor: ringBg,
+                    borderWidth: ringBorderWidth,
+                    borderColor: ringBorderColor,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: isChecked ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                        width: sizeTokens.dotSize,
+                        height: sizeTokens.dotSize,
+                        borderRadius: sizeTokens.dotSize / 2,
+                        backgroundColor: dotColor,
+                    } })) : null }), children ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                    fontFamily: tokens_1.fontFamily.sans,
+                    fontWeight: tokens_1.fontWeight.medium,
+                    fontSize: labelTokens.fontSize,
+                    lineHeight: labelTokens.lineHeight,
+                    letterSpacing: labelTokens.letterSpacing,
+                    color: resolvedDisabled
+                        ? radioColors.label.disabled
+                        : radioColors.label.default,
+                }, selectable: false, children: children })) : null] }));
+}

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

@@ -0,0 +1 @@
+export { Radio, RadioGroup, type RadioProps, type RadioGroupProps, type RadioSize, } from './Radio';

package/dist/components/Radio/index.js

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

package/dist/components/Select/Select.d.ts

@@ -93,4 +93,3 @@ export type SelectContentProps = {
 };
 export declare function SelectContent({ children, style }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
 export declare function Select({ type, size, label: formLabel, helperText, placeholder, leadingIcon, disabled, error, value, onValueChange, values, onValuesChange, searchValue, onSearchChange, children, style, accessibilityLabel, }: SelectProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Select.d.ts.map

package/dist/components/Select/Select.js

@@ -1,4 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectTag = SelectTag;
+exports.SelectSeparator = SelectSeparator;
+exports.SelectGroup = SelectGroup;
+exports.SelectOption = SelectOption;
+exports.SelectContent = SelectContent;
+exports.Select = Select;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Select — form control for choosing from a list of options.
  *
@@ -18,14 +26,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   SelectTag        — pill badge for multi-select (exported for standalone use)
  *   SelectContent    — the dropdown card (exported for custom overlay use)
  */
-import { createContext, useContext, useState, useCallback, useRef, useMemo, useEffect, } from 'react';
-import { Pressable, View, Text, ScrollView, TextInput, Platform, } from 'react-native';
-import { useTheme } from '../../theme';
-import { Icon } from '../Icon';
-import { fontFamily, fontWeight, label, body, caption, controlTokens, surfaceTokens, selectColors, tagTokens, errorTokens, disabledColors, intentColors, textTokens, } from '../../tokens';
-const SelectCtx = createContext(null);
+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");
+const SelectCtx = (0, react_1.createContext)(null);
 function useSelectContext() {
-    const ctx = useContext(SelectCtx);
+    const ctx = (0, react_1.useContext)(SelectCtx);
     if (!ctx)
         throw new Error('Select sub-components must be used within <Select>');
     return ctx;
@@ -63,8 +71,10 @@ const SHADOW_NATIVE = {
 // ---------------------------------------------------------------------------
 // SelectTag — pill badge for multi-select
 // ---------------------------------------------------------------------------
-export function SelectTag({ children, onRemove, disabled = false }) {
-    return (_jsxs(View, { style: {
+function SelectTag({ children, onRemove, disabled = false }) {
+    const { scheme } = (0, theme_1.useTheme)();
+    const tagTokens = scheme.tag;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
             flexDirection: 'row',
             alignItems: 'center',
             gap: tagTokens.gap,
@@ -72,22 +82,23 @@ export function SelectTag({ children, onRemove, disabled = false }) {
             borderRadius: tagTokens.borderRadius,
             paddingHorizontal: tagTokens.paddingX,
             paddingVertical: tagTokens.paddingY,
-        }, children: [_jsx(Text, { style: {
-                    fontFamily: fontFamily.sans,
-                    fontWeight: fontWeight.regular,
-                    fontSize: caption.fontSize,
-                    lineHeight: caption.lineHeight,
-                    letterSpacing: caption.letterSpacing,
+        }, 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: tagTokens.fg,
-                }, selectable: false, children: children }), onRemove && !disabled ? (_jsx(Pressable, { onPress: onRemove, hitSlop: 4, accessibilityRole: "button", accessibilityLabel: `Remove ${children}`, children: _jsx(Icon, { name: "close", size: tagTokens.closeSize, color: tagTokens.fg }) })) : null] }));
+                }, selectable: false, children: children }), onRemove && !disabled ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onRemove, hitSlop: 4, accessibilityRole: "button", accessibilityLabel: `Remove ${children}`, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", size: tagTokens.closeSize, color: tagTokens.fg }) })) : null] }));
 }
 // ---------------------------------------------------------------------------
 // SelectSeparator — visual divider
 // ---------------------------------------------------------------------------
-export function SelectSeparator() {
-    const { components } = useTheme();
+function SelectSeparator() {
+    const { components, scheme } = (0, theme_1.useTheme)();
     const tokens = components.select.separator;
-    return (_jsx(View, { style: { paddingVertical: tokens.marginY }, children: _jsx(View, { style: {
+    const selectColors = scheme.select;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { paddingVertical: tokens.marginY }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                 height: 1,
                 backgroundColor: selectColors.separator,
             } }) }));
@@ -95,18 +106,19 @@ export function SelectSeparator() {
 // ---------------------------------------------------------------------------
 // SelectGroup — labelled group of options
 // ---------------------------------------------------------------------------
-export function SelectGroup({ label: groupLabel, children }) {
-    const { components } = useTheme();
+function SelectGroup({ label: groupLabel, children }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
     const tokens = components.select.group;
-    return (_jsxs(View, { children: [_jsx(View, { style: {
+    const textTokens = scheme.text;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                     paddingHorizontal: tokens.paddingX,
                     paddingVertical: tokens.labelPaddingY,
-                }, children: _jsx(Text, { style: {
-                        fontFamily: fontFamily.sans,
-                        fontWeight: fontWeight.regular,
-                        fontSize: caption.fontSize,
-                        lineHeight: caption.lineHeight,
-                        letterSpacing: caption.letterSpacing,
+                }, 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: textTokens.description,
                         textTransform: 'uppercase',
                     }, selectable: false, children: groupLabel }) }), children] }));
@@ -114,16 +126,18 @@ export function SelectGroup({ label: groupLabel, children }) {
 // ---------------------------------------------------------------------------
 // SelectOption — individual option row
 // ---------------------------------------------------------------------------
-export function SelectOption({ value, children: optionLabel, description, icon, disabled = false, }) {
+function SelectOption({ value, children: optionLabel, description, icon, disabled = false, }) {
     const ctx = useSelectContext();
-    const { components } = useTheme();
+    const { components, scheme } = (0, theme_1.useTheme)();
     const tokens = components.select.option;
-    const [isHovered, setIsHovered] = useState(false);
+    const selectColors = scheme.select;
+    const textTokens = scheme.text;
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const isSelected = ctx.selectedValues.includes(value);
-    const labelTokens = label[BODY_SCALE[ctx.size]];
-    const bodyTokens = body[BODY_SCALE[ctx.size]];
+    const labelTokens = tokens_1.label[BODY_SCALE[ctx.size]];
+    const bodyTokens = tokens_1.body[BODY_SCALE[ctx.size]];
     // Register this option with the parent Select
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         ctx.registerOption(value, { label: optionLabel, icon });
         return () => ctx.unregisterOption(value);
         // Only re-register when value or label change
@@ -139,8 +153,8 @@ export function SelectOption({ value, children: optionLabel, description, icon,
                 : isHovered
                     ? selectColors.option.hover
                     : selectColors.option.default;
-    const resolvedIcon = typeof icon === 'string' ? (_jsx(Icon, { name: icon, size: ICON_SIZE, color: colors.fg })) : (icon);
-    return (_jsxs(Pressable, { onPress: () => {
+    const resolvedIcon = typeof icon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: ICON_SIZE, color: colors.fg })) : (icon);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => {
             if (!disabled)
                 ctx.onSelect(value);
         }, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), disabled: disabled, accessibilityRole: "menuitem", accessibilityLabel: optionLabel, accessibilityState: { selected: isSelected, disabled }, style: {
@@ -151,54 +165,59 @@ export function SelectOption({ value, children: optionLabel, description, icon,
             paddingVertical: tokens.paddingY,
             borderRadius: tokens.borderRadius,
             backgroundColor: colors.bg,
-        }, children: [resolvedIcon ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedIcon })) : null, _jsxs(View, { style: { flex: 1, justifyContent: 'center' }, children: [_jsx(Text, { style: {
-                            fontFamily: fontFamily.sans,
-                            fontWeight: fontWeight.medium,
+        }, children: [resolvedIcon ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, 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: labelTokens.fontSize,
                             lineHeight: labelTokens.lineHeight,
                             letterSpacing: labelTokens.letterSpacing,
                             color: colors.fg,
-                        }, selectable: false, children: optionLabel }), description ? (_jsx(Text, { style: {
-                            fontFamily: fontFamily.sans,
-                            fontWeight: fontWeight.regular,
+                        }, selectable: false, children: optionLabel }), description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                            fontFamily: tokens_1.fontFamily.sans,
+                            fontWeight: tokens_1.fontWeight.regular,
                             fontSize: bodyTokens.fontSize,
                             lineHeight: bodyTokens.lineHeight,
                             letterSpacing: bodyTokens.letterSpacing,
                             color: disabled ? colors.fg : textTokens.description,
-                        }, numberOfLines: 1, selectable: false, children: description })) : null] }), isSelected && !disabled ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: _jsx(Icon, { name: "check", size: ICON_SIZE, color: colors.fg }) })) : null] }));
+                        }, numberOfLines: 1, selectable: false, children: description })) : null] }), isSelected && !disabled ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: ICON_SIZE, color: colors.fg }) })) : null] }));
 }
-export function SelectContent({ children, style }) {
-    const { components } = useTheme();
+function SelectContent({ children, style }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
     const tokens = components.select.content;
-    return (_jsx(View, { style: [
+    const surfaceTokens = scheme.surface;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
             {
                 backgroundColor: surfaceTokens.overlay.bg,
-                borderWidth: controlTokens.borderWidth,
+                borderWidth: tokens_1.controlTokens.borderWidth,
                 borderColor: surfaceTokens.overlay.border,
                 borderRadius: surfaceTokens.overlay.borderRadius,
                 paddingVertical: tokens.paddingY,
                 maxHeight: CONTENT_MAX_HEIGHT,
-                ...(Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE),
+                ...(react_native_1.Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE),
             },
             style,
-        ], children: _jsx(ScrollView, { nestedScrollEnabled: true, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: true, children: children }) }));
+        ], children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { nestedScrollEnabled: true, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: true, children: children }) }));
 }
 // ---------------------------------------------------------------------------
 // Select — main component (trigger + dropdown overlay)
 // ---------------------------------------------------------------------------
-export function Select({ type = 'single', size = 'default', label: formLabel, helperText, placeholder = 'Select...', leadingIcon, disabled = false, error = false, value, onValueChange, values, onValuesChange, searchValue, onSearchChange, children, style, accessibilityLabel, }) {
-    const { components } = useTheme();
+function Select({ type = 'single', size = 'default', label: formLabel, helperText, placeholder = 'Select...', leadingIcon, disabled = false, error = false, value, onValueChange, values, onValuesChange, searchValue, onSearchChange, children, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
     const inputTokens = components.input[size];
-    const [isOpen, setIsOpen] = useState(false);
-    const [isHovered, setIsHovered] = useState(false);
-    const optionRegistry = useRef(new Map());
-    const [, forceUpdate] = useState(0);
-    const selectedValues = useMemo(() => {
+    const intentColors = scheme.intents;
+    const disabledColors = scheme.disabled;
+    const errorTokens = scheme.error;
+    const textTokens = scheme.text;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const optionRegistry = (0, react_1.useRef)(new Map());
+    const [, forceUpdate] = (0, react_1.useState)(0);
+    const selectedValues = (0, react_1.useMemo)(() => {
         if (type === 'multi')
             return values ?? [];
         return value != null ? [value] : [];
     }, [type, value, values]);
-    const handleSelect = useCallback((optionValue) => {
+    const handleSelect = (0, react_1.useCallback)((optionValue) => {
         if (type === 'multi') {
             const current = values ?? [];
             const next = current.includes(optionValue)
@@ -211,14 +230,14 @@ export function Select({ type = 'single', size = 'default', label: formLabel, he
             setIsOpen(false);
         }
     }, [type, values, onValueChange, onValuesChange]);
-    const registerOption = useCallback((val, info) => {
+    const registerOption = (0, react_1.useCallback)((val, info) => {
         optionRegistry.current.set(val, info);
         forceUpdate((n) => n + 1);
     }, []);
-    const unregisterOption = useCallback((val) => {
+    const unregisterOption = (0, react_1.useCallback)((val) => {
         optionRegistry.current.delete(val);
     }, []);
-    const ctxValue = useMemo(() => ({
+    const ctxValue = (0, react_1.useMemo)(() => ({
         type,
         size,
         selectedValues,
@@ -227,8 +246,8 @@ export function Select({ type = 'single', size = 'default', label: formLabel, he
         unregisterOption,
     }), [type, size, selectedValues, handleSelect, registerOption, unregisterOption]);
     // Resolve typography scales
-    const labelTypo = label[LABEL_SCALE[size]];
-    const bodyTypo = body[BODY_SCALE[size]];
+    const labelTypo = tokens_1.label[LABEL_SCALE[size]];
+    const bodyTypo = tokens_1.body[BODY_SCALE[size]];
     // Resolve trigger border colour
     const triggerBorderColor = disabled
         ? disabledColors.border
@@ -246,7 +265,7 @@ export function Select({ type = 'single', size = 'default', label: formLabel, he
         ? disabledColors.fg
         : intentColors.neutral.default.default.fg;
     // Resolve leading icon
-    const resolvedLeadingIcon = typeof leadingIcon === 'string' ? (_jsx(Icon, { name: leadingIcon, size: ICON_SIZE, color: triggerFgColor })) : (leadingIcon);
+    const resolvedLeadingIcon = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: ICON_SIZE, color: triggerFgColor })) : (leadingIcon);
     // Get display text for single select
     const getSelectedLabel = () => {
         if (type === 'single' || type === 'combobox') {
@@ -259,8 +278,8 @@ export function Select({ type = 'single', size = 'default', label: formLabel, he
     };
     const displayText = getSelectedLabel();
     // Escape key dismisses the dropdown (web)
-    useEffect(() => {
-        if (!isOpen || Platform.OS !== 'web')
+    (0, react_1.useEffect)(() => {
+        if (!isOpen || react_native_1.Platform.OS !== 'web')
             return;
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
@@ -271,17 +290,17 @@ export function Select({ type = 'single', size = 'default', label: formLabel, he
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
     }, [isOpen]);
-    return (_jsx(SelectCtx.Provider, { value: ctxValue, children: _jsxs(View, { style: [
+    return ((0, jsx_runtime_1.jsx)(SelectCtx.Provider, { value: ctxValue, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                 { alignSelf: 'stretch', gap: components.input.fieldGap, zIndex: isOpen ? 1000 : 0 },
                 style,
-            ], children: [formLabel ? (_jsx(Text, { style: {
-                        fontFamily: fontFamily.sans,
-                        fontWeight: fontWeight.medium,
+            ], 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: triggerFgColor,
-                    }, selectable: false, children: formLabel })) : null, _jsxs(View, { style: { position: 'relative' }, children: [_jsxs(Pressable, { onPress: () => {
+                    }, selectable: false, children: formLabel })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => {
                                 if (!disabled)
                                     setIsOpen(!isOpen);
                             }, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), disabled: disabled, accessibilityRole: "button", accessibilityLabel: accessibilityLabel || formLabel || 'Select option', accessibilityState: { disabled, expanded: isOpen }, style: {
@@ -291,10 +310,10 @@ export function Select({ type = 'single', size = 'default', label: formLabel, he
                                 paddingHorizontal: inputTokens.paddingX,
                                 paddingVertical: inputTokens.paddingY,
                                 borderRadius: inputTokens.borderRadius,
-                                borderWidth: controlTokens.borderWidth,
+                                borderWidth: tokens_1.controlTokens.borderWidth,
                                 borderColor: triggerBorderColor,
                                 backgroundColor: triggerBgColor,
-                            }, children: [resolvedLeadingIcon ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedLeadingIcon })) : null, type === 'multi' ? (_jsx(View, { style: {
+                            }, children: [resolvedLeadingIcon ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedLeadingIcon })) : null, type === 'multi' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                                         flex: 1,
                                         flexDirection: 'row',
                                         flexWrap: 'wrap',
@@ -303,14 +322,14 @@ export function Select({ type = 'single', size = 'default', label: formLabel, he
                                     }, children: selectedValues.length > 0
                                         ? selectedValues.map((val) => {
                                             const info = optionRegistry.current.get(val);
-                                            return (_jsx(SelectTag, { disabled: disabled, onRemove: disabled
+                                            return ((0, jsx_runtime_1.jsx)(SelectTag, { disabled: disabled, onRemove: disabled
                                                     ? undefined
                                                     : () => {
                                                         const next = selectedValues.filter((v) => v !== val);
                                                         onValuesChange?.(next);
                                                     }, children: info?.label ?? val }, val));
                                         })
-                                        : renderPlaceholder(placeholder, bodyTypo) })) : type === 'combobox' ? (_jsx(TextInput, { value: searchValue ?? displayText ?? '', onChangeText: (text) => {
+                                        : renderPlaceholder(placeholder, bodyTypo, textTokens.description) })) : type === 'combobox' ? ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { value: searchValue ?? displayText ?? '', onChangeText: (text) => {
                                         onSearchChange?.(text);
                                         if (!isOpen)
                                             setIsOpen(true);
@@ -319,28 +338,28 @@ export function Select({ type = 'single', size = 'default', label: formLabel, he
                                             setIsOpen(true);
                                     }, placeholder: placeholder, placeholderTextColor: textTokens.description, editable: !disabled, style: {
                                         flex: 1,
-                                        fontFamily: fontFamily.sans,
-                                        fontWeight: fontWeight.regular,
+                                        fontFamily: tokens_1.fontFamily.sans,
+                                        fontWeight: tokens_1.fontWeight.regular,
                                         fontSize: bodyTypo.fontSize,
                                         lineHeight: bodyTypo.lineHeight,
                                         letterSpacing: bodyTypo.letterSpacing,
                                         color: triggerFgColor,
                                         padding: 0,
-                                        ...(Platform.OS === 'web'
+                                        ...(react_native_1.Platform.OS === 'web'
                                             ? { outlineWidth: 0 }
                                             : {}),
-                                    }, accessibilityLabel: accessibilityLabel || formLabel || 'Search' })) : (_jsx(View, { style: { flex: 1 }, children: _jsx(Text, { numberOfLines: 1, style: {
-                                            fontFamily: fontFamily.sans,
-                                            fontWeight: fontWeight.regular,
+                                    }, accessibilityLabel: accessibilityLabel || formLabel || 'Search' })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: {
+                                            fontFamily: tokens_1.fontFamily.sans,
+                                            fontWeight: tokens_1.fontWeight.regular,
                                             fontSize: bodyTypo.fontSize,
                                             lineHeight: bodyTypo.lineHeight,
                                             letterSpacing: bodyTypo.letterSpacing,
                                             color: displayText
                                                 ? triggerFgColor
                                                 : textTokens.description,
-                                        }, selectable: false, children: displayText ?? placeholder }) })), _jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: isOpen
+                                        }, selectable: false, children: displayText ?? placeholder }) })), (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: isOpen
                                         ? { transform: [{ rotate: '180deg' }] }
-                                        : undefined, children: _jsx(Icon, { name: "keyboard_arrow_down", size: CHEVRON_SIZE, color: triggerFgColor }) })] }), isOpen ? (_jsx(Pressable, { onPress: () => setIsOpen(false), accessibilityRole: "button", accessibilityLabel: "Close select", style: Platform.select({
+                                        : undefined, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "keyboard_arrow_down", size: CHEVRON_SIZE, color: triggerFgColor }) })] }), isOpen ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setIsOpen(false), accessibilityRole: "button", accessibilityLabel: "Close select", style: react_native_1.Platform.select({
                                 web: {
                                     position: 'fixed',
                                     top: 0,
@@ -356,7 +375,7 @@ export function Select({ type = 'single', size = 'default', label: formLabel, he
                                     width: 99999,
                                     height: 99999,
                                 },
-                            }) })) : null, _jsx(View, { style: [
+                            }) })) : null, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                 {
                                     position: 'absolute',
                                     top: '100%',
@@ -366,26 +385,25 @@ export function Select({ type = 'single', size = 'default', label: formLabel, he
                                     zIndex: 1,
                                 },
                                 !isOpen && { display: 'none' },
-                            ], children: _jsx(SelectContent, { children: children }) })] }), helperText ? (_jsx(Text, { style: {
-                        fontFamily: fontFamily.sans,
-                        fontWeight: fontWeight.regular,
-                        fontSize: caption.fontSize,
-                        lineHeight: caption.lineHeight,
-                        letterSpacing: caption.letterSpacing,
+                            ], children: (0, jsx_runtime_1.jsx)(SelectContent, { children: children }) })] }), 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: error ? errorTokens.fg : textTokens.description,
                     }, selectable: false, children: helperText })) : null] }) }));
 }
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
-function renderPlaceholder(text, typo) {
-    return (_jsx(Text, { style: {
-            fontFamily: fontFamily.sans,
-            fontWeight: fontWeight.regular,
+function renderPlaceholder(text, typo, color) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+            fontFamily: tokens_1.fontFamily.sans,
+            fontWeight: tokens_1.fontWeight.regular,
             fontSize: typo.fontSize,
             lineHeight: typo.lineHeight,
             letterSpacing: typo.letterSpacing,
-            color: textTokens.description,
+            color,
         }, selectable: false, children: text }));
 }
-//# sourceMappingURL=Select.js.map

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

@@ -1,2 +1 @@
 export { Select, SelectOption, SelectGroup, SelectSeparator, SelectTag, SelectContent, type SelectProps, type SelectSize, type SelectType, type SelectOptionProps, type SelectGroupProps, type SelectTagProps, type SelectContentProps, } from './Select';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Select/index.js

@@ -1,2 +1,10 @@
-export { Select, SelectOption, SelectGroup, SelectSeparator, SelectTag, SelectContent, } from './Select';
-//# sourceMappingURL=index.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectContent = exports.SelectTag = exports.SelectSeparator = exports.SelectGroup = exports.SelectOption = exports.Select = void 0;
+var Select_1 = require("./Select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
+Object.defineProperty(exports, "SelectOption", { enumerable: true, get: function () { return Select_1.SelectOption; } });
+Object.defineProperty(exports, "SelectGroup", { enumerable: true, get: function () { return Select_1.SelectGroup; } });
+Object.defineProperty(exports, "SelectSeparator", { enumerable: true, get: function () { return Select_1.SelectSeparator; } });
+Object.defineProperty(exports, "SelectTag", { enumerable: true, get: function () { return Select_1.SelectTag; } });
+Object.defineProperty(exports, "SelectContent", { enumerable: true, get: function () { return Select_1.SelectContent; } });