@streamplace/components 0.0.1 → 0.7.0

package/dist/components/ui/dropdown.js

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

package/dist/components/ui/icons.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../lib/theme";
+// Size mapping
+const sizeMap = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+};
+// HOC to create themed icons
+export function createThemedIcon(IconComponent) {
+    return ({ variant = "default", size = "md", color, ...restProps }) => {
+        let theme = 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 (_jsx(IconComponent, { size: iconSize, color: iconColor, ...restProps }));
+    };
+}

package/dist/components/ui/index.js

@@ -0,0 +1,22 @@
+// Export primitive components
+export * from "./primitives/button";
+export * from "./primitives/input";
+export * from "./primitives/modal";
+export * from "./primitives/text";
+// Export styled components
+export * from "./button";
+export * from "./dialog";
+export * from "./dropdown";
+export * from "./icons";
+export * from "./input";
+export * from "./loader";
+export * from "./resizeable";
+export * from "./text";
+export * from "./toast";
+export * from "./view";
+// Component collections for easy importing
+export { ButtonPrimitive } from "./primitives/button";
+export { InputPrimitive } from "./primitives/input";
+export { ModalPrimitive } from "./primitives/modal";
+export { TextPrimitive } from "./primitives/text";
+export * from "../../lib/theme";

package/dist/components/ui/input.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import React, { forwardRef } from "react";
+import { Platform, StyleSheet, TouchableWithoutFeedback } from "react-native";
+import { useTheme } from "../../lib/theme/theme";
+import { InputPrimitive } from "./primitives/input";
+const inputVariants = cva("", {
+    variants: {
+        variant: {
+            default: "default",
+            filled: "filled",
+            underlined: "underlined",
+        },
+        size: {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md",
+    },
+});
+export const Input = forwardRef(({ variant = "default", size = "md", label, description, error, required = false, leftAddon, rightAddon, disabled = false, containerStyle, inputStyle, ...props }, ref) => {
+    const { theme } = useTheme();
+    const [isFocused, setIsFocused] = React.useState(false);
+    const inputRef = React.useRef(null);
+    // Create dynamic styles based on theme
+    const styles = React.useMemo(() => createStyles(theme), [theme]);
+    // Get variant and size styles
+    const containerStyles = React.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.useMemo(() => {
+        const variantTextStyle = styles[`${variant}Input`];
+        const sizeTextStyle = styles[`${size}Input`];
+        return [variantTextStyle, sizeTextStyle];
+    }, [variant, size, styles]);
+    const handleFocus = React.useCallback((event) => {
+        setIsFocused(true);
+        if (props.onFocus) {
+            props.onFocus(event);
+        }
+    }, [props.onFocus]);
+    const handleBlur = React.useCallback((event) => {
+        setIsFocused(false);
+        if (props.onBlur) {
+            props.onBlur(event);
+        }
+    }, [props.onBlur]);
+    const handleContainerPress = React.useCallback(() => {
+        if (inputRef.current && !disabled) {
+            inputRef.current.focus();
+        }
+    }, [disabled]);
+    const hasAddons = leftAddon || rightAddon;
+    if (hasAddons) {
+        return (_jsxs(InputPrimitive.Group, { children: [label && (_jsx(InputPrimitive.Label, { required: required, disabled: disabled, error: !!error, children: label })), _jsx(TouchableWithoutFeedback, { onPress: handleContainerPress, children: _jsxs(InputPrimitive.Container, { focused: isFocused, error: !!error, disabled: disabled, style: [containerStyles, containerStyle, { padding: 0 }], children: [leftAddon && (_jsx(InputPrimitive.Addon, { position: "left", children: leftAddon })), _jsx(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 && (_jsx(InputPrimitive.Addon, { position: "right", children: rightAddon }))] }) }), description && !error && (_jsx(InputPrimitive.Description, { disabled: disabled, children: description })), _jsx(InputPrimitive.Error, { visible: !!error, children: error })] }));
+    }
+    return (_jsxs(InputPrimitive.Group, { children: [label && (_jsx(InputPrimitive.Label, { required: required, disabled: disabled, error: !!error, children: label })), _jsx(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 && (_jsx(InputPrimitive.Description, { disabled: disabled, children: description })), _jsx(InputPrimitive.Error, { visible: !!error, children: error })] }));
+});
+Input.displayName = "Input";
+// Create theme-aware styles
+function createStyles(theme) {
+    return 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,
+            ...Platform.select({
+                ios: {
+                    paddingVertical: 0,
+                },
+                android: {
+                    paddingVertical: 0,
+                    textAlignVertical: "center",
+                },
+            }),
+        },
+        mdInput: {
+            fontSize: 16,
+            lineHeight: 20,
+            ...Platform.select({
+                ios: {
+                    paddingVertical: 0,
+                },
+                android: {
+                    paddingVertical: 0,
+                    textAlignVertical: "center",
+                },
+            }),
+        },
+        lgInput: {
+            fontSize: 18,
+            lineHeight: 22,
+            ...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,
+        },
+    });
+}
+// Export input variants for external use
+export { inputVariants };

package/dist/components/ui/loader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActivityIndicator as RNActivityIndicator } from "react-native";
+import { useTheme } from "../../lib/theme";
+export function Loader(props) {
+    const { theme } = useTheme();
+    return _jsx(RNActivityIndicator, { color: theme.colors.primary, ...props });
+}

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

@@ -0,0 +1,121 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import { StyleSheet, Text, TouchableOpacity, View, } from "react-native";
+// Button root primitive - handles all touch interactions
+export const ButtonRoot = 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.useCallback((event) => {
+        if (!disabled && !loading && onPress) {
+            onPress(event);
+        }
+    }, [disabled, loading, onPress]);
+    const handlePressIn = React.useCallback((event) => {
+        if (!disabled && !loading && onPressIn) {
+            onPressIn(event);
+        }
+    }, [disabled, loading, onPressIn]);
+    const handlePressOut = React.useCallback((event) => {
+        if (!disabled && !loading && onPressOut) {
+            onPressOut(event);
+        }
+    }, [disabled, loading, onPressOut]);
+    const handleLongPress = React.useCallback((event) => {
+        if (!disabled && !loading && onLongPress) {
+            onLongPress(event);
+        }
+    }, [disabled, loading, onLongPress]);
+    return (_jsx(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 }));
+});
+ButtonRoot.displayName = "ButtonRoot";
+export const ButtonText = forwardRef(({ children, disabled, loading, style, ...props }, ref) => {
+    return (_jsx(Text, { ref: ref, style: [
+            primitiveStyles.text,
+            (disabled || loading) && primitiveStyles.textDisabled,
+            style,
+        ], ...props, children: children }));
+});
+ButtonText.displayName = "ButtonText";
+export const ButtonIcon = forwardRef(({ children, position = "left", disabled, loading, style, ...props }, ref) => {
+    return (_jsx(View, { ref: ref, style: [
+            primitiveStyles.icon,
+            (disabled || loading) && primitiveStyles.iconDisabled,
+            style,
+        ], ...props, children: children }));
+});
+ButtonIcon.displayName = "ButtonIcon";
+export const ButtonLoading = forwardRef(({ children, visible = false, style, ...props }, ref) => {
+    if (!visible)
+        return null;
+    return (_jsx(View, { ref: ref, style: [primitiveStyles.loading, style], ...props, children: children }));
+});
+ButtonLoading.displayName = "ButtonLoading";
+export const ButtonContent = forwardRef(({ children, direction = "row", align = "center", justify = "center", style, ...props }, ref) => {
+    return (_jsx(View, { ref: ref, style: [
+            primitiveStyles.content,
+            {
+                flexDirection: direction,
+                alignItems: align,
+                justifyContent: justify,
+            },
+            style,
+        ], ...props, children: children }));
+});
+ButtonContent.displayName = "ButtonContent";
+// Primitive styles (minimal, unstyled)
+const primitiveStyles = 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
+export const ButtonPrimitive = {
+    Root: ButtonRoot,
+    Text: ButtonText,
+    Icon: ButtonIcon,
+    Loading: ButtonLoading,
+    Content: ButtonContent,
+};