@streamplace/components 0.0.1 → 0.7.0

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

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import { Platform, StyleSheet, Text, TextInput, TouchableOpacity, View, } from "react-native";
+// Input root primitive - the main TextInput component
+export const InputRoot = forwardRef(({ value, onChangeText, onChange, onFocus, onBlur, error = false, disabled = false, loading = false, editable, style, placeholderTextColor = "#9ca3af", ...props }, ref) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    const handleChangeText = React.useCallback((text) => {
+        if (onChangeText) {
+            onChangeText(text);
+        }
+        if (onChange) {
+            onChange(text);
+        }
+    }, [onChangeText, onChange]);
+    const handleFocus = React.useCallback((event) => {
+        setIsFocused(true);
+        if (onFocus) {
+            onFocus(event);
+        }
+    }, [onFocus]);
+    const handleBlur = React.useCallback((event) => {
+        setIsFocused(false);
+        if (onBlur) {
+            onBlur(event);
+        }
+    }, [onBlur]);
+    return (_jsx(TextInput, { ref: ref, value: value, onChangeText: handleChangeText, onFocus: handleFocus, onBlur: handleBlur, editable: !disabled && !loading && editable, placeholderTextColor: placeholderTextColor, style: [
+            primitiveStyles.input,
+            style,
+            error && primitiveStyles.inputError,
+            disabled && primitiveStyles.inputDisabled,
+            loading && primitiveStyles.inputLoading,
+        ], ...props }));
+});
+InputRoot.displayName = "InputRoot";
+export const InputContainer = forwardRef(({ children, focused = false, error = false, disabled = false, style, ...props }, ref) => {
+    return (_jsx(View, { ref: ref, style: [
+            primitiveStyles.container,
+            style,
+            focused && primitiveStyles.containerFocused,
+            error && primitiveStyles.containerError,
+            disabled && primitiveStyles.containerDisabled,
+        ], ...props, children: children }));
+});
+InputContainer.displayName = "InputContainer";
+export const InputLabel = forwardRef(({ children, required = false, disabled = false, error = false, style, ...props }, ref) => {
+    return (_jsxs(Text, { ref: ref, style: [
+            primitiveStyles.label,
+            style,
+            error && primitiveStyles.labelError,
+            disabled && primitiveStyles.labelDisabled,
+        ], ...props, children: [children, required && _jsx(Text, { style: primitiveStyles.required, children: " *" })] }));
+});
+InputLabel.displayName = "InputLabel";
+export const InputDescription = forwardRef(({ children, error = false, disabled = false, style, ...props }, ref) => {
+    return (_jsx(Text, { ref: ref, style: [
+            primitiveStyles.description,
+            style,
+            error && primitiveStyles.descriptionError,
+            disabled && primitiveStyles.descriptionDisabled,
+        ], ...props, children: children }));
+});
+InputDescription.displayName = "InputDescription";
+export const InputError = forwardRef(({ children, visible = true, style, ...props }, ref) => {
+    if (!visible || !children)
+        return null;
+    return (_jsx(Text, { ref: ref, style: [primitiveStyles.error, style], ...props, children: children }));
+});
+InputError.displayName = "InputError";
+export const InputAddon = forwardRef(({ children, position = "left", touchable = false, onPress, style, ...props }, ref) => {
+    const addonStyle = [
+        primitiveStyles.addon,
+        primitiveStyles[`addon${position.charAt(0).toUpperCase() + position.slice(1)}`],
+        style,
+    ];
+    if (touchable && onPress) {
+        return (_jsx(TouchableOpacity, { ref: ref, style: addonStyle, onPress: onPress, ...props, children: children }));
+    }
+    return (_jsx(View, { ref: ref, style: addonStyle, ...props, children: children }));
+});
+InputAddon.displayName = "InputAddon";
+export const InputGroup = forwardRef(({ children, spacing = 8, style, ...props }, ref) => {
+    return (_jsx(View, { ref: ref, style: [primitiveStyles.group, { gap: spacing }, style], ...props, children: children }));
+});
+InputGroup.displayName = "InputGroup";
+// Primitive styles (minimal, unstyled)
+const primitiveStyles = StyleSheet.create({
+    input: {
+        minHeight: 44, // iOS minimum touch target
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        fontSize: 16,
+        borderWidth: 1,
+        borderColor: "#d1d5db",
+        borderRadius: 8,
+        backgroundColor: "white",
+        ...Platform.select({
+            ios: {
+                paddingVertical: 12,
+            },
+            android: {
+                paddingVertical: 8,
+                textAlignVertical: "center",
+            },
+        }),
+    },
+    inputFocused: {
+    // No focus styles for the actual input
+    },
+    inputError: {
+        borderColor: "#ef4444",
+        borderWidth: 1,
+    },
+    inputDisabled: {
+        backgroundColor: "#f3f4f6",
+        borderColor: "#e5e7eb",
+        opacity: 0.6,
+    },
+    inputLoading: {
+        opacity: 0.7,
+    },
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        borderWidth: 1,
+        borderColor: "#d1d5db",
+        borderRadius: 8,
+        backgroundColor: "white",
+        paddingHorizontal: 12,
+        minHeight: 44,
+    },
+    containerFocused: {
+        borderColor: "#3b82f6",
+        borderWidth: 1,
+    },
+    containerError: {
+        borderColor: "#ef4444",
+        borderWidth: 1,
+    },
+    containerDisabled: {
+        backgroundColor: "#f3f4f6",
+        borderColor: "#e5e7eb",
+        opacity: 0.6,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: "500",
+        color: "#374151",
+        marginBottom: 4,
+    },
+    labelError: {
+        color: "#ef4444",
+    },
+    labelDisabled: {
+        color: "#9ca3af",
+        opacity: 0.6,
+    },
+    required: {
+        color: "#ef4444",
+    },
+    description: {
+        fontSize: 12,
+        color: "#6b7280",
+        marginTop: 4,
+    },
+    descriptionError: {
+        color: "#ef4444",
+    },
+    descriptionDisabled: {
+        color: "#9ca3af",
+        opacity: 0.6,
+    },
+    error: {
+        fontSize: 12,
+        color: "#ef4444",
+        marginTop: 4,
+    },
+    addon: {
+        alignItems: "center",
+        justifyContent: "center",
+        paddingHorizontal: 8,
+    },
+    addonLeft: {
+        marginRight: 8,
+    },
+    addonRight: {
+        marginLeft: 8,
+    },
+    group: {
+        flexDirection: "column",
+    },
+});
+// Export primitive collection
+export const InputPrimitive = {
+    Root: InputRoot,
+    Container: InputContainer,
+    Label: InputLabel,
+    Description: InputDescription,
+    Error: InputError,
+    Addon: InputAddon,
+    Group: InputGroup,
+};

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

@@ -0,0 +1,203 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import { Dimensions, Modal, Platform, ScrollView, StyleSheet, TouchableOpacity, View, } from "react-native";
+const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
+// Modal root primitive - handles the native Modal component
+export const ModalRoot = forwardRef(({ open = false, onOpenChange, children, onRequestClose, animationType = "fade", presentationStyle = Platform.OS === "ios" ? "pageSheet" : "fullScreen", transparent = true, statusBarTranslucent = Platform.OS === "android", ...props }, ref) => {
+    const handleRequestClose = React.useCallback((e) => {
+        if (onOpenChange) {
+            onOpenChange(false);
+        }
+        if (onRequestClose) {
+            onRequestClose(e);
+        }
+    }, [onOpenChange, onRequestClose]);
+    return (_jsx(Modal, { visible: open, onRequestClose: handleRequestClose, animationType: animationType, presentationStyle: presentationStyle, transparent: transparent, statusBarTranslucent: statusBarTranslucent, ...props, children: _jsx(View, { ref: ref, style: primitiveStyles.container, children: children }) }));
+});
+ModalRoot.displayName = "ModalRoot";
+export const ModalOverlay = forwardRef(({ dismissible = true, onDismiss, onPress, style, children, activeOpacity = 1, ...props }, ref) => {
+    const handlePress = React.useCallback((event) => {
+        if (dismissible && onDismiss) {
+            onDismiss();
+        }
+        if (onPress) {
+            onPress(event);
+        }
+    }, [dismissible, onDismiss, onPress]);
+    return (_jsx(TouchableOpacity, { ref: ref, style: [primitiveStyles.overlay, style], activeOpacity: activeOpacity, onPress: handlePress, ...props, children: children }));
+});
+ModalOverlay.displayName = "ModalOverlay";
+export const ModalContent = forwardRef(({ children, position = "center", size = "md", style, onStartShouldSetResponder, ...props }, ref) => {
+    // Prevent touches from propagating to overlay
+    const handleStartShouldSetResponder = React.useCallback(() => {
+        return true;
+    }, []);
+    const positionStyle = React.useMemo(() => {
+        switch (position) {
+            case "top":
+                return primitiveStyles.contentTop;
+            case "bottom":
+                return primitiveStyles.contentBottom;
+            case "left":
+                return primitiveStyles.contentLeft;
+            case "right":
+                return primitiveStyles.contentRight;
+            case "center":
+            default:
+                return primitiveStyles.contentCenter;
+        }
+    }, [position]);
+    const sizeStyle = React.useMemo(() => {
+        switch (size) {
+            case "sm":
+                return primitiveStyles.sizeSm;
+            case "lg":
+                return primitiveStyles.sizeLg;
+            case "xl":
+                return primitiveStyles.sizeXl;
+            case "full":
+                return primitiveStyles.sizeFull;
+            case "md":
+            default:
+                return primitiveStyles.sizeMd;
+        }
+    }, [size]);
+    return (_jsx(View, { ref: ref, style: [primitiveStyles.content, positionStyle, sizeStyle, style], onStartShouldSetResponder: onStartShouldSetResponder || handleStartShouldSetResponder, ...props, children: children }));
+});
+ModalContent.displayName = "ModalContent";
+export const ModalHeader = forwardRef(({ children, withBorder = false, style, ...props }, ref) => {
+    return (_jsx(View, { ref: ref, style: [
+            primitiveStyles.header,
+            withBorder && primitiveStyles.headerBorder,
+            style,
+        ], ...props, children: children }));
+});
+ModalHeader.displayName = "ModalHeader";
+export const ModalBody = forwardRef(({ children, scrollable = true, style, ...props }, ref) => {
+    if (!scrollable) {
+        return _jsx(View, { style: [primitiveStyles.body, style], children: children });
+    }
+    return (_jsx(ScrollView, { ref: ref, style: [primitiveStyles.body, style], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", ...props, children: children }));
+});
+ModalBody.displayName = "ModalBody";
+export const ModalFooter = forwardRef(({ children, withBorder = false, direction = "row", justify = "flex-end", style, ...props }, ref) => {
+    return (_jsx(View, { ref: ref, style: [
+            primitiveStyles.footer,
+            withBorder && primitiveStyles.footerBorder,
+            {
+                flexDirection: direction,
+                justifyContent: justify,
+            },
+            style,
+        ], ...props, children: children }));
+});
+ModalFooter.displayName = "ModalFooter";
+export const ModalClose = forwardRef(({ children, onClose, onPress, ...props }, ref) => {
+    const handlePress = React.useCallback((event) => {
+        if (onClose) {
+            onClose();
+        }
+        if (onPress) {
+            onPress(event);
+        }
+    }, [onClose, onPress]);
+    return (_jsx(TouchableOpacity, { ref: ref, onPress: handlePress, ...props, children: children }));
+});
+ModalClose.displayName = "ModalClose";
+// Primitive styles (minimal, unstyled)
+const primitiveStyles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 16,
+    },
+    content: {
+        backgroundColor: "white",
+        borderRadius: 8,
+        overflow: "hidden",
+    },
+    contentCenter: {
+        alignSelf: "center",
+    },
+    contentTop: {
+        alignSelf: "center",
+        marginTop: 0,
+    },
+    contentBottom: {
+        alignSelf: "center",
+        marginTop: "auto",
+    },
+    contentLeft: {
+        alignSelf: "flex-start",
+        marginRight: "auto",
+    },
+    contentRight: {
+        alignSelf: "flex-end",
+        marginLeft: "auto",
+    },
+    sizeSm: {
+        maxWidth: screenWidth * 0.4,
+        maxHeight: screenHeight * 0.6,
+    },
+    sizeMd: {
+        maxWidth: screenWidth * 0.6,
+        maxHeight: screenHeight * 0.8,
+    },
+    sizeLg: {
+        maxWidth: screenWidth * 0.8,
+        maxHeight: screenHeight * 0.9,
+    },
+    sizeXl: {
+        maxWidth: screenWidth * 0.95,
+        maxHeight: screenHeight * 0.95,
+    },
+    sizeFull: {
+        width: screenWidth,
+        height: screenHeight,
+        maxWidth: screenWidth,
+        maxHeight: screenHeight,
+        borderRadius: 0,
+    },
+    header: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    headerBorder: {
+        borderBottomWidth: 1,
+        borderBottomColor: "#e5e7eb",
+    },
+    body: {
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    footer: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+    },
+    footerBorder: {
+        borderTopWidth: 1,
+        borderTopColor: "#e5e7eb",
+    },
+});
+// Export primitive collection
+export const ModalPrimitive = {
+    Root: ModalRoot,
+    Overlay: ModalOverlay,
+    Content: ModalContent,
+    Header: ModalHeader,
+    Body: ModalBody,
+    Footer: ModalFooter,
+    Close: ModalClose,
+};

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

@@ -0,0 +1,286 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } from "react";
+import { Platform, Text as RNText, } from "react-native";
+import { useTheme } from "../../../lib/theme/theme";
+import { typography } from "../../../lib/theme/tokens";
+export const TextContext = createContext(null);
+export function objectFromObjects(arr) {
+    return Object.assign({}, ...arr);
+}
+// Size mapping
+const sizeMap = {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36,
+};
+// Weight mapping
+const weightMap = {
+    thin: "100",
+    light: "300",
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800",
+    black: "900",
+};
+// Line height mapping
+const leadingMap = {
+    none: 1,
+    tight: 1.2,
+    snug: 1.3,
+    normal: 1.5,
+    relaxed: 1.7,
+    loose: 2,
+};
+// Letter spacing mapping
+const trackingMap = {
+    tighter: -0.8,
+    tight: -0.4,
+    normal: 0,
+    wide: 0.4,
+    wider: 0.8,
+    widest: 1.6,
+};
+// Variant definitions (platform-aware)
+const getVariantStyles = () => {
+    // get platform-specific typography
+    // iOS, Android, Web (Universal)
+    const typographicPlatform = (Platform.OS === "ios"
+        ? "ios"
+        : Platform.OS === "android"
+            ? "android"
+            : "universal");
+    const platformTypography = typography[typographicPlatform];
+    if (!platformTypography) {
+        throw new Error("Platform typography not defined");
+    }
+    // Define mapping based on platform
+    if (typographicPlatform === "ios") {
+        return {
+            h1: platformTypography.largeTitle,
+            h2: platformTypography.title1,
+            h3: platformTypography.title2,
+            h4: platformTypography.title3,
+            h5: platformTypography.headline,
+            h6: platformTypography.headline,
+            subtitle1: platformTypography.subhead,
+            subtitle2: platformTypography.footnote,
+            body1: platformTypography.body,
+            body2: platformTypography.callout,
+            caption: platformTypography.caption1,
+            overline: platformTypography.caption2,
+        };
+    }
+    else if (typographicPlatform === "android") {
+        return {
+            h1: platformTypography.headline1,
+            h2: platformTypography.headline2,
+            h3: platformTypography.headline3,
+            h4: platformTypography.headline4,
+            h5: platformTypography.headline5,
+            h6: platformTypography.headline6,
+            subtitle1: platformTypography.subtitle1,
+            subtitle2: platformTypography.subtitle2,
+            body1: platformTypography.body1,
+            body2: platformTypography.body2,
+            caption: platformTypography.caption,
+            overline: platformTypography.overline,
+        };
+    }
+    else {
+        // universal
+        // Map variants to universal sizes
+        return {
+            h1: platformTypography["4xl"],
+            h2: platformTypography["3xl"],
+            h3: platformTypography["2xl"],
+            h4: platformTypography["xl"],
+            h5: platformTypography["lg"],
+            h6: platformTypography["base"],
+            subtitle1: platformTypography.base,
+            subtitle2: platformTypography.sm,
+            body1: platformTypography.base,
+            body2: platformTypography.sm,
+            caption: platformTypography.xs,
+            overline: platformTypography.xs,
+        };
+    }
+};
+// Text root primitive
+export const TextRoot = forwardRef(({ variant, size, weight, color, align, leading, tracking, transform, decoration, italic = false, opacity, style, inherit = true, reset = false, children, ...props }, ref) => {
+    const { theme } = useTheme();
+    const parentContext = useContext(TextContext);
+    // Get variant styles
+    const variantStyles = getVariantStyles();
+    // Calculate inherited values
+    const inheritedContext = inherit && !reset && parentContext ? parentContext : {};
+    // Calculate final styles
+    const finalStyles = {
+        // Start with inherited values
+        fontSize: inheritedContext.fontSize,
+        fontWeight: inheritedContext.fontWeight,
+        //color: inheritedContext.color,
+        fontFamily: inheritedContext.fontFamily,
+        lineHeight: inheritedContext.lineHeight,
+        textAlign: inheritedContext.textAlign,
+        letterSpacing: inheritedContext.letterSpacing,
+        textTransform: inheritedContext.textTransform,
+        textDecorationLine: inheritedContext.textDecorationLine,
+        fontStyle: inheritedContext.fontStyle,
+        opacity: inheritedContext.opacity,
+        // Apply variant styles (these may override inherited)
+        ...(variant && variantStyles[variant]),
+        // Apply explicit prop styles (these should override inherited and variant)
+        // Apply size
+        ...(size && {
+            fontSize: typeof size === "number" ? size : sizeMap[size],
+        }),
+        // Apply weight
+        ...(weight && {
+            fontWeight: weightMap[weight],
+        }),
+        // Apply color
+        ...(color
+            ? {
+                color: color === "default"
+                    ? theme.colors.text
+                    : color === "muted"
+                        ? theme.colors.textMuted
+                        : color === "primary"
+                            ? theme.colors.primary
+                            : color === "secondary"
+                                ? theme.colors.secondary
+                                : color === "destructive"
+                                    ? theme.colors.destructive
+                                    : color === "success"
+                                        ? theme.colors.success
+                                        : color === "warning"
+                                            ? theme.colors.warning
+                                            : color || inheritedContext.color, // Custom color string
+            }
+            : { color: inheritedContext.color || theme.colors.text }),
+        // Apply alignment
+        ...(align && {
+            textAlign: align,
+        }),
+        // Apply line height
+        ...(leading && {
+            lineHeight: typeof leading === "number" ? leading : leadingMap[leading],
+        }),
+        // Apply letter spacing
+        ...(tracking && {
+            letterSpacing: typeof tracking === "number" ? tracking : trackingMap[tracking],
+        }),
+        // Apply text transform
+        ...(transform &&
+            transform !== "none" && {
+            textTransform: transform,
+        }),
+        // Apply text decoration
+        ...(decoration &&
+            decoration !== "none" && {
+            textDecorationLine: decoration,
+        }),
+        // Apply italic
+        ...(italic && {
+            fontStyle: "italic",
+        }),
+        // Apply opacity
+        ...(opacity !== undefined && {
+            opacity,
+        }),
+    };
+    finalStyles.color = finalStyles.color;
+    // Create context value for children
+    const contextValue = {
+        fontSize: typeof finalStyles.fontSize === "number"
+            ? finalStyles.fontSize
+            : undefined,
+        fontWeight: finalStyles.fontWeight,
+        color: finalStyles.color || undefined,
+        fontFamily: typeof finalStyles.fontFamily === "string"
+            ? finalStyles.fontFamily
+            : undefined,
+        lineHeight: typeof finalStyles.lineHeight === "number"
+            ? finalStyles.lineHeight
+            : undefined,
+        textAlign: finalStyles.textAlign,
+        letterSpacing: finalStyles.letterSpacing,
+        textTransform: finalStyles.textTransform,
+        textDecorationLine: finalStyles.textDecorationLine,
+        fontStyle: finalStyles.fontStyle,
+        opacity: finalStyles.opacity,
+    };
+    return (_jsx(TextContext.Provider, { value: contextValue, children: _jsx(RNText, { ref: ref, style: [finalStyles, style], ...props, children: children }) }));
+});
+TextRoot.displayName = "TextRoot";
+// Text span primitive (inherits from parent but doesn't create new context)
+export const TextSpan = forwardRef(({ children, ...props }, ref) => {
+    return (_jsx(TextRoot, { ref: ref, inherit: true, ...props, children: children }));
+});
+TextSpan.displayName = "TextSpan";
+// Text block primitive (always creates new context)
+export const TextBlock = forwardRef(({ children, reset = true, ...props }, ref) => {
+    return (_jsx(TextRoot, { ref: ref, reset: reset, ...props, children: children }));
+});
+TextBlock.displayName = "TextBlock";
+// Hook to access current text context
+export function useTextContext() {
+    return useContext(TextContext);
+}
+// Utility function to create text styles
+export function createTextStyle(props) {
+    // This is a utility function that can be used to generate styles
+    // without rendering a component
+    const style = {};
+    if (props.size) {
+        style.fontSize =
+            typeof props.size === "number" ? props.size : sizeMap[props.size];
+    }
+    if (props.weight) {
+        style.fontWeight = weightMap[props.weight];
+    }
+    if (props.align) {
+        style.textAlign = props.align;
+    }
+    if (props.leading) {
+        style.lineHeight =
+            typeof props.leading === "number"
+                ? props.leading
+                : leadingMap[props.leading];
+    }
+    if (props.tracking) {
+        style.letterSpacing =
+            typeof props.tracking === "number"
+                ? props.tracking
+                : trackingMap[props.tracking];
+    }
+    if (props.transform && props.transform !== "none") {
+        style.textTransform = props.transform;
+    }
+    if (props.decoration && props.decoration !== "none") {
+        style.textDecorationLine = props.decoration;
+    }
+    if (props.italic) {
+        style.fontStyle = "italic";
+    }
+    if (props.opacity !== undefined) {
+        style.opacity = props.opacity;
+    }
+    return style;
+}
+// Export primitive collection
+export const TextPrimitive = {
+    Root: TextRoot,
+    Span: TextSpan,
+    Block: TextBlock,
+    Context: TextContext,
+    useContext: useTextContext,
+    createStyle: createTextStyle,
+};