@streamplace/components 0.0.1 → 0.7.0

package/dist/components/ui/resizeable.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronUp } from "lucide-react-native";
+import { Dimensions } from "react-native";
+import { Gesture, GestureDetector, Pressable, } from "react-native-gesture-handler";
+import Animated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue, withSpring, } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useKeyboardSlide } from "../../hooks";
+import { bottom, layout, p, w, zIndex } from "../../lib/theme/atoms";
+import { View } from "./view";
+const AnimatedView = Animated.createAnimatedComponent(View);
+const { height: SCREEN_HEIGHT } = Dimensions.get("window");
+const SPRING_CONFIG = { damping: 20, stiffness: 100 };
+export function Resizable({ isPlayerRatioGreater, style = {}, children, }) {
+    const { slideKeyboard } = useKeyboardSlide();
+    const { bottom: safeBottom } = useSafeAreaInsets();
+    const MAX_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.5;
+    const MIN_HEIGHT = -(SCREEN_HEIGHT - safeBottom) * 0.2;
+    const COLLAPSE_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.1;
+    const sheetHeight = useSharedValue(MIN_HEIGHT);
+    const startHeight = useSharedValue(MIN_HEIGHT);
+    const panGesture = Gesture.Pan()
+        .onStart(() => {
+        startHeight.value = sheetHeight.value;
+    })
+        .onUpdate((event) => {
+        let newHeight = startHeight.value - event.translationY;
+        if (newHeight > MAX_HEIGHT)
+            newHeight = MAX_HEIGHT;
+        if (newHeight < MIN_HEIGHT)
+            newHeight = MIN_HEIGHT;
+        sheetHeight.value = newHeight;
+        if (newHeight < COLLAPSE_HEIGHT) {
+            sheetHeight.value = withSpring(MIN_HEIGHT, SPRING_CONFIG);
+        }
+    });
+    const animatedStyle = useAnimatedStyle(() => ({
+        height: sheetHeight.value < COLLAPSE_HEIGHT ? 0 : sheetHeight.value,
+        opacity: interpolate(sheetHeight.value, [MIN_HEIGHT, COLLAPSE_HEIGHT], [0, 1], Extrapolation.CLAMP),
+        transform: [
+            {
+                translateY: slideKeyboard - safeBottom + Math.max(0, -sheetHeight.value),
+            },
+        ],
+    }));
+    const handleAnimatedStyle = useAnimatedStyle(() => ({
+        opacity: sheetHeight.value < COLLAPSE_HEIGHT ? 1 : 0,
+        transform: [
+            {
+                translateY: sheetHeight.value < COLLAPSE_HEIGHT ? 0 : withSpring(20),
+            },
+        ],
+    }));
+    return (_jsxs(_Fragment, { children: [_jsx(Animated.View, { style: [
+                    handleAnimatedStyle,
+                    layout.position.absolute,
+                    bottom[4],
+                    w.percent[100],
+                    layout.flex.center,
+                    zIndex[1],
+                    { marginBottom: safeBottom },
+                ], children: _jsx(Pressable, { onPress: () => {
+                        sheetHeight.value =
+                            sheetHeight.value === MIN_HEIGHT
+                                ? withSpring(MAX_HEIGHT, SPRING_CONFIG)
+                                : withSpring(MIN_HEIGHT, SPRING_CONFIG);
+                    }, children: _jsx(View, { style: [
+                            p[1],
+                            {
+                                borderRadius: 999,
+                                backgroundColor: "rgba(0, 0, 0, 0.5)",
+                                overflow: "hidden",
+                            },
+                        ], children: _jsx(ChevronUp, { size: 32, color: "white", style: { marginBottom: 1, marginTop: -1 } }) }) }) }), _jsxs(AnimatedView, { style: [
+                    animatedStyle,
+                    isPlayerRatioGreater
+                        ? layout.position.relative
+                        : layout.position.absolute,
+                    bottom[0],
+                    zIndex[1],
+                    w.percent[100],
+                    {
+                        backgroundColor: "rgba(0, 0, 0, 0.5)",
+                        overflow: "visible",
+                        borderTopLeftRadius: 16,
+                        borderTopRightRadius: 16,
+                        minWidth: "100%",
+                    },
+                    style,
+                ], children: [_jsx(View, { style: [layout.flex.row, layout.flex.justifyCenter], children: _jsx(GestureDetector, { gesture: panGesture, children: _jsx(View, { hitSlop: { top: 20, bottom: 20, left: 20, right: 20 }, style: [
+                                    w[32],
+                                    {
+                                        height: 6,
+                                        transform: [{ translateY: -10 }],
+                                        backgroundColor: "#eeeeee66",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        borderRadius: 999,
+                                    },
+                                ] }) }) }), children] })] }));
+}
+Resizable.displayName = "ResizableChatSheet";

package/dist/components/ui/text.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import React, { forwardRef } from "react";
+import { StyleSheet } from "react-native";
+import { colors, borderRadius as radius, spacing } from "../../lib/theme/atoms";
+import { TextPrimitive } from "./primitives/text";
+// Text variants using class-variance-authority pattern
+const textVariants = cva("", {
+    variants: {
+        variant: {
+            h1: "h1",
+            h2: "h2",
+            h3: "h3",
+            h4: "h4",
+            h5: "h5",
+            h6: "h6",
+            subtitle1: "subtitle1",
+            subtitle2: "subtitle2",
+            body1: "body1",
+            body2: "body2",
+            caption: "caption",
+            overline: "overline",
+        },
+        size: {
+            xs: "xs",
+            sm: "sm",
+            base: "base",
+            lg: "lg",
+            xl: "xl",
+            "2xl": "2xl",
+            "3xl": "3xl",
+            "4xl": "4xl",
+        },
+        weight: {
+            thin: "thin",
+            light: "light",
+            normal: "normal",
+            medium: "medium",
+            semibold: "semibold",
+            bold: "bold",
+            extrabold: "extrabold",
+            black: "black",
+        },
+        color: {
+            default: "default",
+            muted: "muted",
+            primary: "primary",
+            secondary: "secondary",
+            destructive: "destructive",
+            success: "success",
+            warning: "warning",
+        },
+    },
+    defaultVariants: {
+        variant: "body1",
+        size: "base",
+        weight: "normal",
+        color: "default",
+    },
+});
+export const Text = forwardRef(({ variant = undefined, size = undefined, weight = undefined, color = undefined, muted = false, bold = false, italic = false, underline = false, strikethrough = false, uppercase = false, lowercase = false, capitalize = false, center = false, right = false, justify = false, customColor, style, children, ...props }, ref) => {
+    // Create dynamic styles based on atoms
+    const styles = React.useMemo(() => createStyles(), []);
+    // Override props based on convenience props
+    const finalColor = customColor ? customColor : muted ? "muted" : color;
+    const finalTransform = uppercase
+        ? "uppercase"
+        : lowercase
+            ? "lowercase"
+            : capitalize
+                ? "capitalize"
+                : "none";
+    const finalDecoration = underline && strikethrough
+        ? "underline line-through"
+        : underline
+            ? "underline"
+            : strikethrough
+                ? "line-through"
+                : "none";
+    const finalAlign = center
+        ? "center"
+        : right
+            ? "right"
+            : justify
+                ? "justify"
+                : "left";
+    // Get variant-specific styles
+    const variantStyle = styles[`${variant}Style`] || {};
+    const styleArr = (Array.isArray(style) ? style : [style || undefined]).filter((s) => s !== undefined);
+    return (_jsx(TextPrimitive.Root, { ref: ref, variant: variant || "body1", size: size || "base", color: finalColor || "default", align: finalAlign, transform: finalTransform, decoration: finalDecoration, italic: italic, style: [variantStyle, ...styleArr], ...props, children: children }));
+});
+Text.displayName = "Text";
+// Convenience components for common text elements
+export const Heading = forwardRef(({ level = 1, ...props }, ref) => (_jsx(Text, { ref: ref, variant: `h${level}`, ...props })));
+Heading.displayName = "Heading";
+export const Subtitle = forwardRef(({ level = 1, ...props }, ref) => (_jsx(Text, { ref: ref, variant: level === 1 ? "subtitle1" : "subtitle2", ...props })));
+Subtitle.displayName = "Subtitle";
+export const Body = forwardRef(({ level = 1, ...props }, ref) => (_jsx(Text, { ref: ref, variant: level === 1 ? "body1" : "body2", ...props })));
+Body.displayName = "Body";
+export const Caption = forwardRef((props, ref) => _jsx(Text, { ref: ref, variant: "caption", ...props }));
+Caption.displayName = "Caption";
+export const Label = forwardRef((props, ref) => (_jsx(Text, { ref: ref, variant: "subtitle1", weight: "medium", ...props })));
+Label.displayName = "Label";
+export const Code = forwardRef(({ style, ...props }, ref) => {
+    const styles = React.useMemo(() => createStyles(), []);
+    // if style is not an array, convert it to an array
+    const styleArr = (Array.isArray(style) ? style : [style || undefined]).filter((s) => s !== undefined);
+    return _jsx(Text, { ref: ref, style: [styles.codeStyle, ...styleArr], ...props });
+});
+Code.displayName = "Code";
+// Span component for inline text styling (inherits from parent)
+export const Span = forwardRef(({ children, ...props }, ref) => (_jsx(TextPrimitive.Span, { ref: ref, ...props, children: children })));
+Span.displayName = "Span";
+// Create atom-based styles
+function createStyles() {
+    return StyleSheet.create({
+        // Variant-specific styles
+        h1Style: {
+            marginBottom: spacing[4],
+        },
+        h2Style: {
+            marginBottom: spacing[3],
+        },
+        h3Style: {
+            marginBottom: spacing[3],
+        },
+        h4Style: {
+            marginBottom: spacing[2],
+        },
+        h5Style: {
+            marginBottom: spacing[2],
+        },
+        h6Style: {
+            marginBottom: spacing[2],
+        },
+        subtitle1Style: {
+            marginBottom: spacing[2],
+        },
+        subtitle2Style: {
+            marginBottom: spacing[1],
+        },
+        body1Style: {
+            marginBottom: spacing[3],
+        },
+        body2Style: {
+            marginBottom: spacing[2],
+        },
+        captionStyle: {
+            marginBottom: spacing[1],
+        },
+        overlineStyle: {
+            marginBottom: spacing[1],
+            textTransform: "uppercase",
+            letterSpacing: 1,
+        },
+        labelStyle: {
+            marginBottom: spacing[1],
+        },
+        buttonStyle: {
+            textAlign: "center",
+        },
+        codeStyle: {
+            fontFamily: "monospace",
+            backgroundColor: colors["muted"],
+            paddingHorizontal: spacing[1],
+            paddingVertical: 2,
+            borderRadius: radius.sm,
+            fontSize: 14,
+        },
+    });
+}
+// Export text variants for external use
+export { textVariants };
+// Re-export primitive components for advanced usage
+export { TextPrimitive };

package/dist/components/ui/textarea.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextInput } from "react-native";
+import { bg, borders, flex, p, text } from "../../lib/theme/atoms";
+function Textarea({ style, multiline = true, numberOfLines = 4, ...props }) {
+    return (_jsx(TextInput, { style: [
+            flex.values[1],
+            borders.width.thin,
+            borders.color.gray[400],
+            bg.gray[900],
+            p[3],
+            text.gray[200],
+            props.editable === false && { opacity: 0.5 },
+            { borderRadius: 10 },
+            style,
+        ], multiline: multiline, numberOfLines: numberOfLines, textAlignVertical: "top", ...props }));
+}
+export { Textarea };

package/dist/components/ui/toast.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from "@rn-primitives/portal";
+import { useEffect, useState } from "react";
+import { Animated, Platform, Pressable, StyleSheet, Text, useWindowDimensions, View, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTheme } from "../../lib/theme/theme";
+export function Toast({ open, onOpenChange, title, description, actionLabel = "Action", onAction, duration = 3, }) {
+    const [seconds, setSeconds] = useState(duration);
+    const insets = useSafeAreaInsets();
+    const { theme } = useTheme();
+    const [fadeAnim] = useState(new Animated.Value(0));
+    const { width } = useWindowDimensions();
+    const isWeb = Platform.OS === "web";
+    const isDesktop = isWeb && width >= 768;
+    const containerPosition = isDesktop
+        ? {
+            top: undefined,
+            bottom: theme.spacing[4],
+            right: theme.spacing[4], // <-- use spacing, not 1
+            alignItems: "flex-end",
+            minWidth: 400,
+            width: 400,
+            // Do NOT set left at all
+        }
+        : {
+            bottom: insets.bottom + theme.spacing[1],
+            left: 0,
+            right: 0,
+            alignItems: "center",
+            width: "100%",
+            maxWidth: undefined,
+        };
+    useEffect(() => {
+        let interval = null;
+        if (open) {
+            setSeconds(duration);
+            Animated.timing(fadeAnim, {
+                toValue: 1,
+                duration: 200,
+                useNativeDriver: true,
+            }).start();
+            interval = setInterval(() => {
+                setSeconds((prev) => {
+                    if (prev <= 1) {
+                        onOpenChange(false);
+                        if (interval)
+                            clearInterval(interval);
+                        return duration;
+                    }
+                    return prev - 1;
+                });
+            }, 1000);
+        }
+        else {
+            if (interval)
+                clearInterval(interval);
+            Animated.timing(fadeAnim, {
+                toValue: 0,
+                duration: 150,
+                useNativeDriver: true,
+            }).start();
+            setSeconds(duration);
+        }
+        return () => {
+            if (interval)
+                clearInterval(interval);
+        };
+        // eslint-disable-next-line
+    }, [open, duration]);
+    if (!open)
+        return null;
+    return (_jsx(Portal, { name: "toast", children: _jsx(Animated.View, { style: [styles.container, containerPosition, { opacity: fadeAnim }], pointerEvents: "box-none", children: _jsxs(View, { style: [
+                    styles.toast,
+                    {
+                        backgroundColor: theme.colors.secondary,
+                        borderColor: theme.colors.border,
+                        borderRadius: theme.borderRadius.xl,
+                        flexDirection: "column",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        padding: theme.spacing[4],
+                        width: isDesktop ? "100%" : "95%",
+                    },
+                ], children: [_jsxs(View, { style: { gap: theme.spacing[1], width: "100%" }, children: [_jsx(Text, { style: [
+                                    {
+                                        color: theme.colors.foreground,
+                                        fontSize: 16,
+                                        fontWeight: "500",
+                                    },
+                                ], children: title }), description ? (_jsx(Text, { style: [{ color: theme.colors.foreground, fontSize: 14 }], children: description })) : null] }), _jsxs(View, { style: {
+                            gap: theme.spacing[1],
+                            flexDirection: "row",
+                            justifyContent: "flex-end",
+                            width: "100%",
+                        }, children: [onAction && (_jsx(Pressable, { style: [
+                                    styles.button,
+                                    {
+                                        borderColor: theme.colors.primary,
+                                        paddingHorizontal: theme.spacing[4],
+                                        paddingVertical: theme.spacing[2],
+                                    },
+                                ], onPress: onAction, children: _jsx(Text, { style: { color: theme.colors.foreground }, children: actionLabel }) })), _jsx(Pressable, { style: [
+                                    styles.button,
+                                    {
+                                        borderColor: theme.colors.primary,
+                                        paddingHorizontal: theme.spacing[4],
+                                        paddingVertical: theme.spacing[2],
+                                    },
+                                ], onPress: () => onOpenChange(false), children: _jsx(Text, { style: { color: theme.colors.foreground }, children: "Close" }) })] })] }) }) }));
+}
+const styles = StyleSheet.create({
+    container: {
+        position: "absolute",
+        zIndex: 1000,
+        paddingHorizontal: 16,
+    },
+    toast: {
+        opacity: 0.95,
+        borderWidth: 1,
+        gap: 8,
+    },
+    button: {
+        borderWidth: 1,
+        borderRadius: 8,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "transparent",
+    },
+});

package/dist/components/ui/view.js

@@ -0,0 +1,250 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { View as RNView, } from "react-native";
+import { borderRadius as radius, spacing } from "../../lib/theme/atoms";
+import { useTheme } from "../../lib/theme/theme";
+// View variants using class-variance-authority pattern
+const viewVariants = cva("", {
+    variants: {
+        variant: {
+            default: "default",
+            card: "card",
+            overlay: "overlay",
+            surface: "surface",
+            container: "container",
+        },
+        padding: {
+            none: "none",
+            xs: "xs",
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            xl: "xl",
+        },
+        margin: {
+            none: "none",
+            xs: "xs",
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            xl: "xl",
+        },
+        direction: {
+            row: "row",
+            column: "column",
+            "row-reverse": "row-reverse",
+            "column-reverse": "column-reverse",
+        },
+        align: {
+            start: "start",
+            center: "center",
+            end: "end",
+            stretch: "stretch",
+            baseline: "baseline",
+        },
+        justify: {
+            start: "start",
+            center: "center",
+            end: "end",
+            between: "between",
+            around: "around",
+            evenly: "evenly",
+        },
+        flex: {
+            none: "none",
+            auto: "auto",
+            initial: "initial",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        padding: "none",
+        margin: "none",
+        direction: "column",
+        align: "stretch",
+        justify: "start",
+        flex: "none",
+    },
+});
+export const View = forwardRef(({ variant = "default", padding = "none", margin = "none", direction = "column", align = "stretch", justify = "start", flex = "none", fullWidth = false, fullHeight = false, centered = false, backgroundColor, borderColor, borderWidth, borderRadius, shadow = false, style, ...props }, ref) => {
+    const { theme } = useTheme();
+    // Map variant to styles
+    const variantStyles = (() => {
+        switch (variant) {
+            case "card":
+                return {
+                    backgroundColor: theme.colors.card,
+                    borderRadius: radius.lg,
+                    shadowColor: "#000",
+                    shadowOffset: { width: 0, height: 2 },
+                    shadowOpacity: 0.1,
+                    shadowRadius: 4,
+                    elevation: 3,
+                };
+            case "overlay":
+                return {
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                };
+            case "surface":
+                return {
+                    backgroundColor: theme.colors.background,
+                };
+            case "container":
+                return {
+                    backgroundColor: theme.colors.background,
+                    padding: spacing[4],
+                };
+            default:
+                return {};
+        }
+    })();
+    // Map padding to numeric values
+    const paddingValue = (() => {
+        switch (padding) {
+            case "xs":
+                return spacing[1];
+            case "sm":
+                return spacing[2];
+            case "md":
+                return spacing[3];
+            case "lg":
+                return spacing[4];
+            case "xl":
+                return spacing[5];
+            default:
+                return undefined;
+        }
+    })();
+    // Map margin to numeric values
+    const marginValue = (() => {
+        switch (margin) {
+            case "xs":
+                return spacing[1];
+            case "sm":
+                return spacing[2];
+            case "md":
+                return spacing[3];
+            case "lg":
+                return spacing[4];
+            case "xl":
+                return spacing[5];
+            default:
+                return undefined;
+        }
+    })();
+    // Map flex direction
+    const flexDirection = (() => {
+        switch (direction) {
+            case "row":
+                return "row";
+            case "column":
+                return "column";
+            case "row-reverse":
+                return "row-reverse";
+            case "column-reverse":
+                return "column-reverse";
+            default:
+                return "column";
+        }
+    })();
+    // Map align items
+    const alignItems = (() => {
+        switch (align) {
+            case "start":
+                return "flex-start";
+            case "center":
+                return "center";
+            case "end":
+                return "flex-end";
+            case "stretch":
+                return "stretch";
+            case "baseline":
+                return "baseline";
+            default:
+                return "stretch";
+        }
+    })();
+    // Map justify content
+    const justifyContent = (() => {
+        switch (justify) {
+            case "start":
+                return "flex-start";
+            case "center":
+                return "center";
+            case "end":
+                return "flex-end";
+            case "between":
+                return "space-between";
+            case "around":
+                return "space-around";
+            case "evenly":
+                return "space-evenly";
+            default:
+                return "flex-start";
+        }
+    })();
+    // Map flex value
+    const flexValue = (() => {
+        if (typeof flex === "number") {
+            return flex;
+        }
+        switch (flex) {
+            case "auto":
+                return undefined; // auto is default
+            case "initial":
+                return 0;
+            case "none":
+            default:
+                return undefined;
+        }
+    })();
+    const computedStyle = {
+        ...variantStyles,
+        ...(paddingValue !== undefined && { padding: paddingValue }),
+        ...(marginValue !== undefined && { margin: marginValue }),
+        flexDirection,
+        alignItems,
+        justifyContent,
+        ...(flexValue !== undefined && { flex: flexValue }),
+        ...(fullWidth && { width: "100%" }),
+        ...(fullHeight && { height: "100%" }),
+        ...(centered && {
+            alignItems: "center",
+            justifyContent: "center",
+        }),
+        ...(backgroundColor && { backgroundColor }),
+        ...(borderColor && { borderColor }),
+        ...(borderWidth !== undefined && { borderWidth }),
+        ...(borderRadius !== undefined && { borderRadius }),
+        ...(shadow && {
+            shadowColor: "#000",
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.1,
+            shadowRadius: 4,
+            elevation: 3,
+        }),
+    };
+    const finalStyle = Array.isArray(style)
+        ? [computedStyle, ...style]
+        : [computedStyle, style];
+    return _jsx(RNView, { ref: ref, style: finalStyle, ...props });
+});
+View.displayName = "View";
+// Convenience components
+export const Card = forwardRef((props, ref) => _jsx(View, { ref: ref, variant: "card", ...props }));
+Card.displayName = "Card";
+export const Container = forwardRef((props, ref) => _jsx(View, { ref: ref, variant: "container", ...props }));
+Container.displayName = "Container";
+export const Surface = forwardRef((props, ref) => _jsx(View, { ref: ref, variant: "surface", ...props }));
+Surface.displayName = "Surface";
+export const Overlay = forwardRef((props, ref) => _jsx(View, { ref: ref, variant: "overlay", ...props }));
+Overlay.displayName = "Overlay";
+export const Row = forwardRef((props, ref) => _jsx(View, { ref: ref, direction: "row", ...props }));
+Row.displayName = "Row";
+export const Column = forwardRef((props, ref) => _jsx(View, { ref: ref, direction: "column", ...props }));
+Column.displayName = "Column";
+export const Center = forwardRef((props, ref) => (_jsx(View, { ref: ref, centered: true, ...props })));
+Center.displayName = "Center";
+// Export view variants for external use
+export { viewVariants };

package/dist/hooks/index.js

@@ -0,0 +1,9 @@
+// barrel file :)
+export * from "./useAvatars";
+export * from "./useCameraToggle";
+export * from "./useKeyboard";
+export * from "./useKeyboardSlide";
+export * from "./useLivestreamInfo";
+export * from "./useOuterAndInnerDimensions";
+export * from "./usePlayerDimensions";
+export * from "./useSegmentTiming";