@streamplace/components 0.7.18 → 0.7.21

package/dist/components/ui/dropdown.js

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenuInfo = exports.DropdownMenuGroup = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.ResponsiveDropdownMenuContent = exports.DropdownMenuContentWithoutPortal = exports.DropdownMenuContent = exports.DropdownMenuSubContent = exports.DropdownMenuSubTrigger = exports.DropdownMenuBottomSheet = exports.DropdownMenuRadioGroup = exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuTrigger = exports.DropdownMenu = void 0;
+exports.DropdownMenuShortcut = DropdownMenuShortcut;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bottom_sheet_1 = tslib_1.__importStar(require("@gorhom/bottom-sheet"));
+const DropdownMenuPrimitive = tslib_1.__importStar(require("@rn-primitives/dropdown-menu"));
+const lucide_react_native_1 = require("lucide-react-native");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const atoms_1 = require("../../lib/theme/atoms");
+const text_1 = require("./primitives/text");
+exports.DropdownMenu = DropdownMenuPrimitive.Root;
+exports.DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+exports.DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+exports.DropdownMenuSub = DropdownMenuPrimitive.Sub;
+exports.DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+exports.DropdownMenuBottomSheet = (0, react_1.forwardRef)(function DropdownMenuBottomSheet({ overlayStyle, portalHost, children }, _ref) {
+    // Use the primitives' context to know if open
+    const { open, onOpenChange } = DropdownMenuPrimitive.useRootContext();
+    const snapPoints = (0, react_1.useMemo)(() => ["25%", "50%", "80%"], []);
+    const sheetRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.default, { ref: sheetRef, 
+            // why the heck is this 1-indexed
+            index: open ? 3 : -1, snapPoints: snapPoints, enablePanDownToClose: true, enableDynamicSizing: true, enableContentPanningGesture: false, backdropComponent: ({ style }) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [style, react_native_1.StyleSheet.absoluteFill], onPress: () => onOpenChange?.(false) })), onClose: () => onOpenChange?.(false), style: [overlayStyle], backgroundStyle: [atoms_1.bg.black, atoms_1.a.radius.all.md, atoms_1.a.shadows.md, atoms_1.p[1]], handleIndicatorStyle: [
+                atoms_1.a.sizes.width[12],
+                atoms_1.a.sizes.height[1],
+                atoms_1.bg.gray[500],
+            ], children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetView, { style: [atoms_1.px[2]], children: typeof children === "function"
+                    ? children({ pressed: true })
+                    : children }) }) }));
+});
+exports.DropdownMenuSubTrigger = (0, react_1.forwardRef)(({ inset, children, ...props }, ref) => {
+    const { open } = DropdownMenuPrimitive.useSubContext();
+    const Icon = react_native_1.Platform.OS === "web" ? lucide_react_native_1.ChevronRight : open ? lucide_react_native_1.ChevronUp : lucide_react_native_1.ChevronDown;
+    return ((0, jsx_runtime_1.jsx)(text_1.TextContext.Provider, { value: (0, text_1.objectFromObjects)([
+            atoms_1.a.textColors.primary[500],
+            atoms_1.a.fontSize.base,
+            open && atoms_1.a.textColors.primary[700],
+        ]), children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.SubTrigger, { ref: ref, ...props, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    inset && atoms_1.gap[2],
+                    atoms_1.layout.flex.row,
+                    atoms_1.layout.flex.alignCenter,
+                    atoms_1.p[2],
+                    atoms_1.pr[8],
+                ], children: [children, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [atoms_1.a.layout.position.absolute, atoms_1.a.position.right[1]], children: (0, jsx_runtime_1.jsx)(Icon, { size: 18, color: atoms_1.colors.gray[200] }) })] }) }) }));
+});
+exports.DropdownMenuSubContent = (0, react_1.forwardRef)((props, ref) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.SubContent, { ref: ref, style: [
+            atoms_1.a.zIndex[50],
+            atoms_1.a.sizes.minWidth[32],
+            atoms_1.a.overflow.hidden,
+            atoms_1.a.radius.all.md,
+            atoms_1.a.borders.width.thin,
+            atoms_1.a.borders.color.gray[600],
+            atoms_1.mt[1],
+            atoms_1.bg.black,
+            atoms_1.p[1],
+            atoms_1.a.shadows.md,
+        ], ...props }));
+});
+exports.DropdownMenuContent = (0, react_1.forwardRef)(({ overlayStyle, portalHost, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Overlay, { style: [
+                react_native_1.Platform.OS !== "web" ? react_native_1.StyleSheet.absoluteFill : undefined,
+                overlayStyle,
+            ], children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, { ref: ref, style: [
+                    atoms_1.a.zIndex[50],
+                    atoms_1.a.sizes.minWidth[32],
+                    atoms_1.a.sizes.maxWidth[64],
+                    atoms_1.a.overflow.hidden,
+                    atoms_1.a.radius.all.md,
+                    atoms_1.a.borders.width.thin,
+                    atoms_1.a.borders.color.gray[800],
+                    atoms_1.bg.gray[950],
+                    atoms_1.p[2],
+                    atoms_1.a.shadows.md,
+                ], ...props }) }) }));
+});
+exports.DropdownMenuContentWithoutPortal = (0, react_1.forwardRef)(({ overlayStyle, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Overlay, { style: [
+            react_native_1.Platform.OS !== "web" ? react_native_1.StyleSheet.absoluteFill : undefined,
+            overlayStyle,
+        ], children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, { ref: ref, style: [
+                { zIndex: 999999 },
+                atoms_1.a.sizes.minWidth[32],
+                atoms_1.a.sizes.maxWidth[64],
+                atoms_1.a.overflow.hidden,
+                atoms_1.a.radius.all.md,
+                atoms_1.a.borders.width.thin,
+                atoms_1.a.borders.color.gray[800],
+                atoms_1.bg.gray[950],
+                atoms_1.p[2],
+                atoms_1.a.shadows.md,
+            ], ...props }) }));
+});
+/// Responsive Dropdown Menu Content. On mobile this will render a *bottom sheet* that is **portaled to the root of the app**.
+/// Prefer passing scoped content in as **otherwise it may crash the app**.
+exports.ResponsiveDropdownMenuContent = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
+    const { width } = (0, react_native_1.useWindowDimensions)();
+    // On web, you might want to always use the normal dropdown
+    const isBottomSheet = react_native_1.Platform.OS !== "web" && width < 800;
+    if (isBottomSheet) {
+        return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuBottomSheet, { ref: ref, ...props, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuContent, { ref: ref, ...props, children: children }));
+});
+exports.DropdownMenuItem = (0, react_1.forwardRef)(({ inset, disabled, style, children, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...props, children: (0, jsx_runtime_1.jsx)(text_1.TextContext.Provider, { value: (0, text_1.objectFromObjects)([atoms_1.a.textColors.gray[900], atoms_1.a.fontSize.base]), children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                    atoms_1.a.layout.flex.row,
+                    atoms_1.a.layout.flex.alignCenter,
+                    atoms_1.a.radius.all.sm,
+                    atoms_1.py[1],
+                    atoms_1.pl[2],
+                    atoms_1.pr[2],
+                ], children: typeof children === "function"
+                    ? children({ pressed: true })
+                    : children }) }) }));
+});
+exports.DropdownMenuCheckboxItem = (0, react_1.forwardRef)(({ children, checked, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.CheckboxItem, { ref: ref, checked: checked, closeOnPress: props.closeOnPress || false, ...props, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                atoms_1.a.layout.flex.row,
+                atoms_1.a.layout.flex.alignCenter,
+                atoms_1.a.radius.all.sm,
+                atoms_1.py[1],
+                atoms_1.pl[2],
+                atoms_1.pr[2],
+                atoms_1.pr[8],
+            ], children: [children, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [atoms_1.pl[1], atoms_1.layout.position.absolute, atoms_1.right[1]], children: checked ? ((0, jsx_runtime_1.jsx)(lucide_react_native_1.CheckCircle, { size: 14, strokeWidth: 3, color: "white" })) : ((0, jsx_runtime_1.jsx)(lucide_react_native_1.Circle, { size: 14, strokeWidth: 3, color: atoms_1.a.colors.gray[400] })) })] }) }));
+});
+exports.DropdownMenuRadioItem = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.RadioItem, { ref: ref, closeOnPress: props.closeOnPress || false, ...props, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                atoms_1.a.layout.flex.row,
+                atoms_1.a.layout.flex.alignCenter,
+                atoms_1.a.radius.all.sm,
+                atoms_1.py[1],
+                atoms_1.pl[2],
+                atoms_1.pr[1],
+            ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [atoms_1.pl[1], atoms_1.layout.position.absolute, atoms_1.right[1]], children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Check, { size: 14, strokeWidth: 3, color: "white" }) }) }), children] }) }));
+});
+exports.DropdownMenuLabel = (0, react_1.forwardRef)(({ inset, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [
+            atoms_1.px[2],
+            atoms_1.py[2],
+            atoms_1.a.textColors.gray[200],
+            atoms_1.a.fontSize.base,
+            inset && atoms_1.gap[2],
+        ], ...props }));
+});
+exports.DropdownMenuSeparator = (0, react_1.forwardRef)((props, ref) => {
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [{ height: 0.5 }, atoms_1.bg.gray[800]], ...props });
+});
+function DropdownMenuShortcut(props) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+            atoms_1.ml.auto,
+            atoms_1.a.textColors.gray[500],
+            atoms_1.a.fontSize.sm,
+            atoms_1.a.letterSpacing.widest,
+        ], ...props }));
+}
+exports.DropdownMenuGroup = (0, react_1.forwardRef)((props, ref) => {
+    const { inset, title, children, ...rest } = props;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [atoms_1.pt[2], inset && atoms_1.gap[2]], ref: ref, ...rest, children: [title && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [atoms_1.textColors.gray[400], atoms_1.pb[1], atoms_1.pl[2]], children: title })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                    atoms_1.bg.gray[900],
+                    react_native_1.Platform.OS === "web" ? [atoms_1.px[2], atoms_1.py[1]] : atoms_1.p[2],
+                    atoms_1.gap.all[1],
+                    { borderRadius: atoms_1.borderRadius.lg },
+                ], children: children })] }));
+});
+exports.DropdownMenuInfo = (0, react_1.forwardRef)(({ description, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [atoms_1.textColors.gray[400], atoms_1.pt[1], atoms_1.pl[2], atoms_1.pb[2], atoms_1.fontSize.sm], children: description }));
+});

package/dist/components/ui/icons.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createThemedIcon = createThemedIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const theme_1 = require("../../lib/theme");
+// Size mapping
+const sizeMap = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+};
+// HOC to create themed icons
+function createThemedIcon(IconComponent) {
+    return ({ variant = "default", size = "md", color, ...restProps }) => {
+        let theme = (0, theme_1.useTheme)(); // Ensure theme is available
+        // Calculate size
+        const iconSize = typeof size === "number" ? size : sizeMap[size];
+        // Calculate color if not provided using atoms
+        const iconColor = color ||
+            theme.theme.colors[variant] ||
+            theme.theme.colors.secondaryForeground;
+        return ((0, jsx_runtime_1.jsx)(IconComponent, { size: iconSize, color: iconColor, ...restProps }));
+    };
+}

package/dist/components/ui/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextPrimitive = exports.ModalPrimitive = exports.InputPrimitive = exports.ButtonPrimitive = void 0;
+const tslib_1 = require("tslib");
+// Export primitive components
+tslib_1.__exportStar(require("./primitives/button"), exports);
+tslib_1.__exportStar(require("./primitives/input"), exports);
+tslib_1.__exportStar(require("./primitives/modal"), exports);
+tslib_1.__exportStar(require("./primitives/text"), exports);
+// Export styled components
+tslib_1.__exportStar(require("./button"), exports);
+tslib_1.__exportStar(require("./dialog"), exports);
+tslib_1.__exportStar(require("./dropdown"), exports);
+tslib_1.__exportStar(require("./icons"), exports);
+tslib_1.__exportStar(require("./info-box"), exports);
+tslib_1.__exportStar(require("./info-row"), exports);
+tslib_1.__exportStar(require("./input"), exports);
+tslib_1.__exportStar(require("./loader"), exports);
+tslib_1.__exportStar(require("./resizeable"), exports);
+tslib_1.__exportStar(require("./slider"), exports);
+tslib_1.__exportStar(require("./text"), exports);
+tslib_1.__exportStar(require("./textarea"), exports);
+tslib_1.__exportStar(require("./toast"), exports);
+tslib_1.__exportStar(require("./view"), exports);
+// Component collections for easy importing
+var button_1 = require("./primitives/button");
+Object.defineProperty(exports, "ButtonPrimitive", { enumerable: true, get: function () { return button_1.ButtonPrimitive; } });
+var input_1 = require("./primitives/input");
+Object.defineProperty(exports, "InputPrimitive", { enumerable: true, get: function () { return input_1.InputPrimitive; } });
+var modal_1 = require("./primitives/modal");
+Object.defineProperty(exports, "ModalPrimitive", { enumerable: true, get: function () { return modal_1.ModalPrimitive; } });
+var text_1 = require("./primitives/text");
+Object.defineProperty(exports, "TextPrimitive", { enumerable: true, get: function () { return text_1.TextPrimitive; } });
+tslib_1.__exportStar(require("../../lib/theme"), exports);

package/dist/components/ui/info-box.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoBox = InfoBox;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const zero = tslib_1.__importStar(require("../../ui"));
+const { bg, r, p, text, layout, gap, flex } = zero;
+function InfoBox({ icon: Icon, label, value, status = "neutral", }) {
+    const statusColors = {
+        good: text.green[400],
+        warning: text.yellow[400],
+        error: text.red[400],
+        neutral: text.white,
+    };
+    const statusColor = statusColors[status];
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            flex.values[1],
+            layout.flex.column,
+            layout.flex.spaceBetween,
+            layout.flex.alignCenter,
+            bg.neutral[700],
+            r.sm,
+            p[2],
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    layout.flex.row,
+                    layout.flex.spaceBetween,
+                    gap.all[3],
+                    zero.w.percent[100],
+                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[100], { fontSize: 13, fontWeight: "500" }], children: label }), (0, jsx_runtime_1.jsx)(Icon, { size: 16, color: "#9ca3af" })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.align.end, zero.w.percent[100]], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [statusColor, { fontSize: 26, fontWeight: "600" }], children: value }) })] }));
+}

package/dist/components/ui/info-row.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoRow = InfoRow;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const zero = tslib_1.__importStar(require("../../ui"));
+const { text, layout, py, gap } = zero;
+function InfoRow({ icon: Icon, label, value, status = "neutral", }) {
+    const statusColors = {
+        good: text.green[400],
+        warning: text.yellow[400],
+        error: text.red[400],
+        neutral: text.white,
+    };
+    const statusColor = statusColors[status];
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            layout.flex.row,
+            layout.flex.spaceBetween,
+            layout.flex.alignCenter,
+            py[2],
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[3]], children: [(0, jsx_runtime_1.jsx)(Icon, { size: 16, color: "#9ca3af" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[300], { fontSize: 13, fontWeight: "500" }], children: label })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [statusColor, { fontSize: 13, fontWeight: "600" }], children: value })] }));
+}

package/dist/components/ui/input.js

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputVariants = exports.Input = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../../lib/theme/theme");
+const input_1 = require("./primitives/input");
+const inputVariants = (0, class_variance_authority_1.cva)("", {
+    variants: {
+        variant: {
+            default: "default",
+            filled: "filled",
+            underlined: "underlined",
+        },
+        size: {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md",
+    },
+});
+exports.inputVariants = inputVariants;
+exports.Input = (0, react_1.forwardRef)(({ variant = "default", size = "md", label, description, error, required = false, leftAddon, rightAddon, disabled = false, containerStyle, inputStyle, ...props }, ref) => {
+    const { theme } = (0, theme_1.useTheme)();
+    const [isFocused, setIsFocused] = react_1.default.useState(false);
+    const inputRef = react_1.default.useRef(null);
+    // Create dynamic styles based on theme
+    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
+    // Get variant and size styles
+    const containerStyles = react_1.default.useMemo(() => {
+        const variantStyle = styles[`${variant}Container`];
+        const sizeStyle = styles[`${size}Container`];
+        const focusStyle = isFocused ? styles.focusedContainer : null;
+        return [variantStyle, sizeStyle, focusStyle];
+    }, [variant, size, styles, isFocused]);
+    const textStyles = react_1.default.useMemo(() => {
+        const variantTextStyle = styles[`${variant}Input`];
+        const sizeTextStyle = styles[`${size}Input`];
+        return [variantTextStyle, sizeTextStyle];
+    }, [variant, size, styles]);
+    const handleFocus = react_1.default.useCallback((event) => {
+        setIsFocused(true);
+        if (props.onFocus) {
+            props.onFocus(event);
+        }
+    }, [props.onFocus]);
+    const handleBlur = react_1.default.useCallback((event) => {
+        setIsFocused(false);
+        if (props.onBlur) {
+            props.onBlur(event);
+        }
+    }, [props.onBlur]);
+    const handleContainerPress = react_1.default.useCallback(() => {
+        if (inputRef.current && !disabled) {
+            inputRef.current.focus();
+        }
+    }, [disabled]);
+    const hasAddons = leftAddon || rightAddon;
+    if (hasAddons) {
+        return ((0, jsx_runtime_1.jsxs)(input_1.InputPrimitive.Group, { children: [label && ((0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Label, { required: required, disabled: disabled, error: !!error, children: label })), (0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: handleContainerPress, children: (0, jsx_runtime_1.jsxs)(input_1.InputPrimitive.Container, { focused: isFocused, error: !!error, disabled: disabled, style: [containerStyles, containerStyle, { padding: 0 }], children: [leftAddon && ((0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Addon, { position: "left", children: leftAddon })), (0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Root, { ref: (node) => {
+                                    inputRef.current = node;
+                                    if (ref) {
+                                        if (typeof ref === "function") {
+                                            ref(node);
+                                        }
+                                        else {
+                                            ref.current = node;
+                                        }
+                                    }
+                                }, disabled: disabled, error: !!error, onFocus: handleFocus, onBlur: handleBlur, style: [
+                                    textStyles,
+                                    styles.inputInContainer,
+                                    inputStyle,
+                                    { outline: "none" },
+                                ], placeholderTextColor: disabled ? theme.colors.textDisabled : theme.colors.textMuted, ...props }), rightAddon && ((0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Addon, { position: "right", children: rightAddon }))] }) }), description && !error && ((0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Description, { disabled: disabled, children: description })), (0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Error, { visible: !!error, children: error })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(input_1.InputPrimitive.Group, { children: [label && ((0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Label, { required: required, disabled: disabled, error: !!error, children: label })), (0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Root, { ref: (node) => {
+                    inputRef.current = node;
+                    if (ref) {
+                        if (typeof ref === "function") {
+                            ref(node);
+                        }
+                        else {
+                            ref.current = node;
+                        }
+                    }
+                }, disabled: disabled, error: !!error, onFocus: handleFocus, onBlur: handleBlur, style: [containerStyles, textStyles, containerStyle, inputStyle], placeholderTextColor: disabled ? theme.colors.textDisabled : theme.colors.textMuted, ...props }), description && !error && ((0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Description, { disabled: disabled, children: description })), (0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Error, { visible: !!error, children: error })] }));
+});
+exports.Input.displayName = "Input";
+// Create theme-aware styles
+function createStyles(theme) {
+    return react_native_1.StyleSheet.create({
+        // Variant styles for containers
+        defaultContainer: {
+            backgroundColor: theme.colors.background,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            borderRadius: theme.borderRadius.md,
+        },
+        filledContainer: {
+            backgroundColor: theme.colors.muted,
+            borderWidth: 0,
+            borderRadius: theme.borderRadius.md,
+        },
+        underlinedContainer: {
+            backgroundColor: "transparent",
+            borderWidth: 0,
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.border,
+            borderRadius: 0,
+            paddingHorizontal: 0,
+        },
+        // Variant styles for inputs
+        defaultInput: {
+            color: theme.colors.text,
+            backgroundColor: "transparent",
+        },
+        filledInput: {
+            color: theme.colors.text,
+            backgroundColor: "transparent",
+        },
+        underlinedInput: {
+            color: theme.colors.text,
+            backgroundColor: "transparent",
+        },
+        // Size styles for containers
+        smContainer: {
+            paddingHorizontal: theme.spacing[3],
+            paddingVertical: theme.spacing[2],
+            minHeight: theme.touchTargets.minimum - 8,
+        },
+        mdContainer: {
+            paddingHorizontal: theme.spacing[3],
+            paddingVertical: theme.spacing[3],
+            minHeight: theme.touchTargets.minimum,
+        },
+        lgContainer: {
+            paddingHorizontal: theme.spacing[4],
+            paddingVertical: theme.spacing[4],
+            minHeight: theme.touchTargets.comfortable,
+        },
+        // Size styles for inputs
+        smInput: {
+            fontSize: 14,
+            lineHeight: 18,
+            ...react_native_1.Platform.select({
+                ios: {
+                    paddingVertical: 0,
+                },
+                android: {
+                    paddingVertical: 0,
+                    textAlignVertical: "center",
+                },
+            }),
+        },
+        mdInput: {
+            fontSize: 16,
+            lineHeight: 20,
+            ...react_native_1.Platform.select({
+                ios: {
+                    paddingVertical: 0,
+                },
+                android: {
+                    paddingVertical: 0,
+                    textAlignVertical: "center",
+                },
+            }),
+        },
+        lgInput: {
+            fontSize: 18,
+            lineHeight: 22,
+            ...react_native_1.Platform.select({
+                ios: {
+                    paddingVertical: 0,
+                },
+                android: {
+                    paddingVertical: 0,
+                    textAlignVertical: "center",
+                },
+            }),
+        },
+        // Special style for inputs inside containers
+        inputInContainer: {
+            flex: 1,
+            paddingHorizontal: 0,
+            paddingVertical: 0,
+            borderWidth: 0,
+            backgroundColor: "transparent",
+            minHeight: "auto",
+            borderRadius: 0,
+        },
+        // Focus styles
+        focusedContainer: {
+            borderColor: theme.colors.primary,
+            borderWidth: 1,
+        },
+    });
+}

package/dist/components/ui/loader.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = Loader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../lib/theme");
+function Loader(props) {
+    const { theme } = (0, theme_1.useTheme)();
+    return (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: theme.colors.primary, ...props });
+}

package/dist/components/ui/primitives/button.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonPrimitive = exports.ButtonContent = exports.ButtonLoading = exports.ButtonIcon = exports.ButtonText = exports.ButtonRoot = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+// Button root primitive - handles all touch interactions
+exports.ButtonRoot = (0, react_1.forwardRef)(({ children, disabled = false, loading = false, onPress, onPressIn, onPressOut, onLongPress, accessibilityRole = "button", accessibilityLabel, accessibilityHint, accessibilityState, testID, style, activeOpacity = 0.7, ...props }, ref) => {
+    const handlePress = react_1.default.useCallback((event) => {
+        if (!disabled && !loading && onPress) {
+            onPress(event);
+        }
+    }, [disabled, loading, onPress]);
+    const handlePressIn = react_1.default.useCallback((event) => {
+        if (!disabled && !loading && onPressIn) {
+            onPressIn(event);
+        }
+    }, [disabled, loading, onPressIn]);
+    const handlePressOut = react_1.default.useCallback((event) => {
+        if (!disabled && !loading && onPressOut) {
+            onPressOut(event);
+        }
+    }, [disabled, loading, onPressOut]);
+    const handleLongPress = react_1.default.useCallback((event) => {
+        if (!disabled && !loading && onLongPress) {
+            onLongPress(event);
+        }
+    }, [disabled, loading, onLongPress]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { ref: ref, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, onLongPress: handleLongPress, disabled: disabled || loading, activeOpacity: disabled || loading ? 1 : activeOpacity, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, accessibilityState: {
+            disabled: disabled || loading,
+            busy: loading,
+            ...accessibilityState,
+        }, testID: testID, style: [
+            primitiveStyles.button,
+            (disabled || loading) && primitiveStyles.disabled,
+            style,
+        ], ...props, children: children }));
+});
+exports.ButtonRoot.displayName = "ButtonRoot";
+exports.ButtonText = (0, react_1.forwardRef)(({ children, disabled, loading, style, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [
+            primitiveStyles.text,
+            (disabled || loading) && primitiveStyles.textDisabled,
+            style,
+        ], ...props, children: children }));
+});
+exports.ButtonText.displayName = "ButtonText";
+exports.ButtonIcon = (0, react_1.forwardRef)(({ children, position = "left", disabled, loading, style, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [
+            primitiveStyles.icon,
+            (disabled || loading) && primitiveStyles.iconDisabled,
+            style,
+        ], ...props, children: children }));
+});
+exports.ButtonIcon.displayName = "ButtonIcon";
+exports.ButtonLoading = (0, react_1.forwardRef)(({ children, visible = false, style, ...props }, ref) => {
+    if (!visible)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [primitiveStyles.loading, style], ...props, children: children }));
+});
+exports.ButtonLoading.displayName = "ButtonLoading";
+exports.ButtonContent = (0, react_1.forwardRef)(({ children, direction = "row", align = "center", justify = "center", style, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [
+            primitiveStyles.content,
+            {
+                flexDirection: direction,
+                alignItems: align,
+                justifyContent: justify,
+            },
+            style,
+        ], ...props, children: children }));
+});
+exports.ButtonContent.displayName = "ButtonContent";
+// Primitive styles (minimal, unstyled)
+const primitiveStyles = react_native_1.StyleSheet.create({
+    button: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: 44, // iOS minimum touch target
+        minWidth: 44,
+    },
+    disabled: {
+        opacity: 0.5,
+    },
+    content: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        flex: 1,
+    },
+    text: {
+        textAlign: "center",
+    },
+    textDisabled: {
+        opacity: 0.5,
+    },
+    icon: {
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    iconLeft: {
+        marginRight: 8,
+    },
+    iconRight: {
+        marginLeft: 8,
+    },
+    iconDisabled: {
+        opacity: 0.5,
+    },
+    loading: {
+        position: "absolute",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
+// Export primitive collection
+exports.ButtonPrimitive = {
+    Root: exports.ButtonRoot,
+    Text: exports.ButtonText,
+    Icon: exports.ButtonIcon,
+    Loading: exports.ButtonLoading,
+    Content: exports.ButtonContent,
+};