@castui/cast-ui 4.2.0 → 4.2.2

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, } 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,10 +71,10 @@ const SHADOW_NATIVE = {
 // ---------------------------------------------------------------------------
 // SelectTag — pill badge for multi-select
 // ---------------------------------------------------------------------------
-export function SelectTag({ children, onRemove, disabled = false }) {
-    const { scheme } = useTheme();
+function SelectTag({ children, onRemove, disabled = false }) {
+    const { scheme } = (0, theme_1.useTheme)();
     const tagTokens = scheme.tag;
-    return (_jsxs(View, { style: {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
             flexDirection: 'row',
             alignItems: 'center',
             gap: tagTokens.gap,
@@ -74,23 +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, scheme } = useTheme();
+function SelectSeparator() {
+    const { components, scheme } = (0, theme_1.useTheme)();
     const tokens = components.select.separator;
     const selectColors = scheme.select;
-    return (_jsx(View, { style: { paddingVertical: tokens.marginY }, children: _jsx(View, { style: {
+    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,
             } }) }));
@@ -98,19 +106,19 @@ export function SelectSeparator() {
 // ---------------------------------------------------------------------------
 // SelectGroup — labelled group of options
 // ---------------------------------------------------------------------------
-export function SelectGroup({ label: groupLabel, children }) {
-    const { components, scheme } = useTheme();
+function SelectGroup({ label: groupLabel, children }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
     const tokens = components.select.group;
     const textTokens = scheme.text;
-    return (_jsxs(View, { children: [_jsx(View, { style: {
+    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] }));
@@ -118,18 +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, scheme } = useTheme();
+    const { components, scheme } = (0, theme_1.useTheme)();
     const tokens = components.select.option;
     const selectColors = scheme.select;
     const textTokens = scheme.text;
-    const [isHovered, setIsHovered] = useState(false);
+    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
@@ -145,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: {
@@ -157,59 +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, scheme } = useTheme();
+function SelectContent({ children, style }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
     const tokens = components.select.content;
     const surfaceTokens = scheme.surface;
-    return (_jsx(View, { style: [
+    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, scheme } = 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 intentColors = scheme.intents;
     const disabledColors = scheme.disabled;
     const errorTokens = scheme.error;
     const textTokens = scheme.text;
-    const [isOpen, setIsOpen] = useState(false);
-    const [isHovered, setIsHovered] = useState(false);
-    const optionRegistry = useRef(new Map());
-    const [, forceUpdate] = useState(0);
-    const selectedValues = useMemo(() => {
+    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)
@@ -222,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,
@@ -238,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
@@ -257,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') {
@@ -270,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') {
@@ -282,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: {
@@ -302,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',
@@ -314,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, textTokens.description) })) : 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);
@@ -330,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,
@@ -367,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%',
@@ -377,12 +385,12 @@ 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] }) }));
 }
@@ -390,13 +398,12 @@ export function Select({ type = 'single', size = 'default', label: formLabel, he
 // Helpers
 // ---------------------------------------------------------------------------
 function renderPlaceholder(text, typo, color) {
-    return (_jsx(Text, { style: {
-            fontFamily: fontFamily.sans,
-            fontWeight: fontWeight.regular,
+    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,
         }, 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; } });

package/dist/components/Skeleton/Skeleton.d.ts

@@ -31,4 +31,3 @@ export type SkeletonProps = {
     accessibilityLabel?: string;
 };
 export declare function Skeleton({ shape, width, height, radius, animated, style, accessibilityLabel, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/Skeleton/Skeleton.js

@@ -1,4 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = Skeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Skeleton — a placeholder block shown while content loads.
  *
@@ -13,9 +16,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Sizing is intentionally constant across densities — skeletons mirror the
  * layout of the real content they stand in for.
  */
-import { useEffect, useRef } from 'react';
-import { Animated } from 'react-native';
-import { useTheme } from '../../theme';
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+// react-native-web has no native driver and warns if asked for one.
+const USE_NATIVE_DRIVER = react_native_1.Platform.OS !== 'web';
 /** Default size + corner radius per shape (radius/2, surface/overlay/radius, radius/full). */
 const SHAPE_DEFAULTS = {
     text: { width: 120, height: 12, radius: 4 },
@@ -25,32 +33,32 @@ const SHAPE_DEFAULTS = {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function Skeleton({ shape = 'text', width, height, radius, animated = true, style, accessibilityLabel = 'Loading', }) {
-    const { scheme } = useTheme();
+function Skeleton({ shape = 'text', width, height, radius, animated = true, style, accessibilityLabel = 'Loading', }) {
+    const { scheme } = (0, theme_1.useTheme)();
     const skeletonColors = scheme.skeleton;
     const defaults = SHAPE_DEFAULTS[shape];
-    const opacity = useRef(new Animated.Value(1)).current;
-    useEffect(() => {
+    const opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(() => {
         if (!animated) {
             opacity.setValue(1);
             return;
         }
-        const loop = Animated.loop(Animated.sequence([
-            Animated.timing(opacity, {
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(opacity, {
                 toValue: 0.5,
                 duration: 700,
-                useNativeDriver: true,
+                useNativeDriver: USE_NATIVE_DRIVER,
             }),
-            Animated.timing(opacity, {
+            react_native_1.Animated.timing(opacity, {
                 toValue: 1,
                 duration: 700,
-                useNativeDriver: true,
+                useNativeDriver: USE_NATIVE_DRIVER,
             }),
         ]));
         loop.start();
         return () => loop.stop();
     }, [animated, opacity]);
-    return (_jsx(Animated.View, { accessibilityRole: "image", accessibilityLabel: accessibilityLabel, style: [
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { accessibilityRole: "image", accessibilityLabel: accessibilityLabel, style: [
             {
                 width: width ?? defaults.width,
                 height: height ?? defaults.height,
@@ -61,4 +69,3 @@ export function Skeleton({ shape = 'text', width, height, radius, animated = tru
             style,
         ] }));
 }
-//# sourceMappingURL=Skeleton.js.map

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

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

package/dist/components/Skeleton/index.js

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

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

@@ -33,4 +33,3 @@ export type ToastProps = {
     accessibilityLabel?: string;
 };
 export declare function Toast({ title, children, intent, size, icon, onClose, style, accessibilityLabel, }: ToastProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Toast.d.ts.map

package/dist/components/Toast/Toast.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View, Text, Pressable, Platform, } from 'react-native';
-import { useTheme } from '../../theme';
-import { Icon } from '../Icon';
-import { fontFamily, fontWeight, title as titleScale, body, controlTokens, } from '../../tokens';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toast = Toast;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const Icon_1 = require("../Icon");
+const tokens_1 = require("../../tokens");
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
@@ -33,17 +36,17 @@ const SHADOW_NATIVE = {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function Toast({ title, children, intent = 'neutral', size = 'default', icon, onClose, style, accessibilityLabel, }) {
-    const { components, scheme } = useTheme();
+function Toast({ title, children, intent = 'neutral', size = 'default', icon, onClose, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
     const intentColors = scheme.intents;
     const surfaceTokens = scheme.surface;
     const tokens = components.toast;
     const sizeTokens = tokens[size];
-    const titleTokens = titleScale[TITLE_SCALE[size]];
-    const bodyTokens = body[BODY_SCALE[size]];
+    const titleTokens = tokens_1.title[TITLE_SCALE[size]];
+    const bodyTokens = tokens_1.body[BODY_SCALE[size]];
     const fg = intentColors[intent].default.default.fg;
-    const resolvedIcon = typeof icon === 'string' ? (_jsx(Icon, { name: icon, size: sizeTokens.iconSize, color: fg })) : (icon);
-    return (_jsxs(View, { accessibilityRole: "alert", accessibilityLabel: accessibilityLabel || title, style: [
+    const resolvedIcon = typeof icon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: sizeTokens.iconSize, color: fg })) : (icon);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityRole: "alert", accessibilityLabel: accessibilityLabel || title, style: [
             {
                 flexDirection: 'row',
                 alignItems: 'flex-start',
@@ -52,26 +55,25 @@ export function Toast({ title, children, intent = 'neutral', size = 'default', i
                 minWidth: tokens.minWidth,
                 maxWidth: tokens.maxWidth,
                 borderRadius: tokens.borderRadius,
-                borderWidth: controlTokens.borderWidth,
+                borderWidth: tokens_1.controlTokens.borderWidth,
                 borderColor: surfaceTokens.overlay.border,
                 backgroundColor: surfaceTokens.overlay.bg,
-                ...(Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE),
+                ...(react_native_1.Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE),
             },
             style,
-        ], children: [resolvedIcon ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: sizeTokens.iconSize, height: sizeTokens.iconSize }, children: resolvedIcon })) : null, _jsxs(View, { style: { flex: 1 }, 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: sizeTokens.iconSize, height: sizeTokens.iconSize }, children: resolvedIcon })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                            fontFamily: tokens_1.fontFamily.sans,
+                            fontWeight: tokens_1.fontWeight.medium,
                             fontSize: titleTokens.fontSize,
                             lineHeight: titleTokens.lineHeight,
                             letterSpacing: titleTokens.letterSpacing,
                             color: fg,
-                        }, selectable: false, children: title }), children ? (_jsx(Text, { style: {
-                            fontFamily: fontFamily.sans,
-                            fontWeight: fontWeight.regular,
+                        }, selectable: false, children: title }), children ? ((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: fg,
-                        }, selectable: false, children: children })) : null] }), onClose ? (_jsx(Pressable, { onPress: onClose, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Dismiss", style: { width: sizeTokens.closeSize, height: sizeTokens.closeSize }, children: _jsx(Icon, { name: "close", size: sizeTokens.closeSize, color: fg }) })) : null] }));
+                        }, selectable: false, children: children })) : null] }), onClose ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onClose, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Dismiss", style: { width: sizeTokens.closeSize, height: sizeTokens.closeSize }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", size: sizeTokens.closeSize, color: fg }) })) : null] }));
 }
-//# sourceMappingURL=Toast.js.map

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

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

package/dist/components/Toast/index.js

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