@streamplace/components 0.7.18 → 0.7.21

package/dist/components/ui/resizeable.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Resizable = Resizable;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const hooks_1 = require("../../hooks");
+const atoms_1 = require("../../lib/theme/atoms");
+const view_1 = require("./view");
+const AnimatedView = react_native_reanimated_1.default.createAnimatedComponent(view_1.View);
+const { height: SCREEN_HEIGHT } = react_native_1.Dimensions.get("window");
+const SPRING_CONFIG = { damping: 20, stiffness: 100 };
+function Resizable({ startingPercentage, isPlayerRatioGreater, style = {}, children, }) {
+    const { slideKeyboard } = (0, hooks_1.useKeyboardSlide)();
+    const { bottom: safeBottom } = (0, react_native_safe_area_context_1.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 = (0, react_native_reanimated_1.useSharedValue)(MIN_HEIGHT);
+    const startHeight = (0, react_native_reanimated_1.useSharedValue)(MIN_HEIGHT);
+    (0, react_1.useEffect)(() => {
+        setTimeout(() => {
+            sheetHeight.value = (0, react_native_reanimated_1.withSpring)(startingPercentage ? startingPercentage * SCREEN_HEIGHT : MIN_HEIGHT, SPRING_CONFIG);
+        }, 1000);
+    }, []);
+    const panGesture = react_native_gesture_handler_1.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 = (0, react_native_reanimated_1.withSpring)(MIN_HEIGHT, SPRING_CONFIG);
+        }
+    });
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        height: sheetHeight.value < COLLAPSE_HEIGHT ? 0 : sheetHeight.value,
+        opacity: (0, react_native_reanimated_1.interpolate)(sheetHeight.value, [MIN_HEIGHT, COLLAPSE_HEIGHT], [0, 1], react_native_reanimated_1.Extrapolation.CLAMP),
+        transform: [
+            {
+                translateY: slideKeyboard +
+                    Math.max(0, -sheetHeight.value) +
+                    (slideKeyboard < 0 ? 0 : -safeBottom),
+            },
+        ],
+    }));
+    const handleAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: sheetHeight.value < COLLAPSE_HEIGHT ? 1 : 0,
+        transform: [
+            {
+                translateY: sheetHeight.value < COLLAPSE_HEIGHT ? 0 : (0, react_native_reanimated_1.withSpring)(20),
+            },
+        ],
+    }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+                    handleAnimatedStyle,
+                    atoms_1.layout.position.absolute,
+                    atoms_1.bottom[4],
+                    atoms_1.w.percent[100],
+                    atoms_1.layout.flex.center,
+                    atoms_1.zIndex[1],
+                ], children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.Pressable, { onPress: () => {
+                        sheetHeight.value =
+                            sheetHeight.value === MIN_HEIGHT
+                                ? (0, react_native_reanimated_1.withSpring)(MAX_HEIGHT, SPRING_CONFIG)
+                                : (0, react_native_reanimated_1.withSpring)(MIN_HEIGHT, SPRING_CONFIG);
+                    }, children: (0, jsx_runtime_1.jsx)(view_1.View, { style: [
+                            atoms_1.p[1],
+                            {
+                                borderRadius: 999,
+                                backgroundColor: "rgba(0, 0, 0, 0.5)",
+                                overflow: "hidden",
+                            },
+                        ], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronUp, { size: 32, color: "white", style: { marginBottom: 1, marginTop: -1 } }) }) }) }), (0, jsx_runtime_1.jsxs)(AnimatedView, { style: [
+                    animatedStyle,
+                    isPlayerRatioGreater
+                        ? atoms_1.layout.position.relative
+                        : atoms_1.layout.position.absolute,
+                    atoms_1.bottom[0],
+                    atoms_1.zIndex[1],
+                    atoms_1.w.percent[100],
+                    {
+                        backgroundColor: "rgba(0, 0, 0, 0.5)",
+                        overflow: "visible",
+                        borderTopLeftRadius: 16,
+                        borderTopRightRadius: 16,
+                        minWidth: "100%",
+                    },
+                    style,
+                ], children: [(0, jsx_runtime_1.jsx)(view_1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.justifyCenter, atoms_1.h[2]], children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture, children: (0, jsx_runtime_1.jsx)(view_1.View
+                            // Make the touch area much larger, but keep the visible handle small
+                            , { 
+                                // Make the touch area much larger, but keep the visible handle small
+                                style: {
+                                    height: 30, // Large touch area
+                                    width: 120, // Wide enough for thumbs
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    //backgroundColor: "rgba(0,255,255,0.1)",
+                                    transform: [{ translateY: -30 }],
+                                }, children: (0, jsx_runtime_1.jsx)(view_1.View, { style: [
+                                        atoms_1.w[32],
+                                        {
+                                            height: 6,
+                                            backgroundColor: "#eeeeee66",
+                                            borderRadius: 999,
+                                            transform: [{ translateY: 5 }],
+                                        },
+                                    ] }) }) }) }), children] })] }));
+}
+Resizable.displayName = "ResizableChatSheet";

package/dist/components/ui/slider.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const tslib_1 = require("tslib");
+exports.Slider = tslib_1.__importStar(require("@rn-primitives/slider"));

package/dist/components/ui/text.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextPrimitive = exports.textVariants = exports.Span = exports.Code = exports.Label = exports.Caption = exports.Body = exports.Subtitle = exports.Heading = exports.Text = 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 atoms_1 = require("../../lib/theme/atoms");
+const text_1 = require("./primitives/text");
+Object.defineProperty(exports, "TextPrimitive", { enumerable: true, get: function () { return text_1.TextPrimitive; } });
+// Text variants using class-variance-authority pattern
+const textVariants = (0, class_variance_authority_1.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",
+    },
+});
+exports.textVariants = textVariants;
+exports.Text = (0, react_1.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_1.default.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 ((0, jsx_runtime_1.jsx)(text_1.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 }));
+});
+exports.Text.displayName = "Text";
+// Convenience components for common text elements
+exports.Heading = (0, react_1.forwardRef)(({ level = 1, ...props }, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, variant: `h${level}`, ...props })));
+exports.Heading.displayName = "Heading";
+exports.Subtitle = (0, react_1.forwardRef)(({ level = 1, ...props }, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, variant: level === 1 ? "subtitle1" : "subtitle2", ...props })));
+exports.Subtitle.displayName = "Subtitle";
+exports.Body = (0, react_1.forwardRef)(({ level = 1, ...props }, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, variant: level === 1 ? "body1" : "body2", ...props })));
+exports.Body.displayName = "Body";
+exports.Caption = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, variant: "caption", ...props }));
+exports.Caption.displayName = "Caption";
+exports.Label = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, variant: "subtitle1", weight: "medium", ...props })));
+exports.Label.displayName = "Label";
+exports.Code = (0, react_1.forwardRef)(({ style, ...props }, ref) => {
+    const styles = react_1.default.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 (0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, style: [styles.codeStyle, ...styleArr], ...props });
+});
+exports.Code.displayName = "Code";
+// Span component for inline text styling (inherits from parent)
+exports.Span = (0, react_1.forwardRef)(({ children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Span, { ref: ref, ...props, children: children })));
+exports.Span.displayName = "Span";
+// Create atom-based styles
+function createStyles() {
+    return react_native_1.StyleSheet.create({
+        // Variant-specific styles
+        h1Style: {
+            marginBottom: atoms_1.spacing[4],
+        },
+        h2Style: {
+            marginBottom: atoms_1.spacing[3],
+        },
+        h3Style: {
+            marginBottom: atoms_1.spacing[3],
+        },
+        h4Style: {
+            marginBottom: atoms_1.spacing[2],
+        },
+        h5Style: {
+            marginBottom: atoms_1.spacing[2],
+        },
+        h6Style: {
+            marginBottom: atoms_1.spacing[2],
+        },
+        subtitle1Style: {
+            marginBottom: atoms_1.spacing[2],
+        },
+        subtitle2Style: {
+            marginBottom: atoms_1.spacing[1],
+        },
+        body1Style: {
+            marginBottom: atoms_1.spacing[3],
+        },
+        body2Style: {
+            marginBottom: atoms_1.spacing[2],
+        },
+        captionStyle: {
+            marginBottom: atoms_1.spacing[1],
+        },
+        overlineStyle: {
+            marginBottom: atoms_1.spacing[1],
+            textTransform: "uppercase",
+            letterSpacing: 1,
+        },
+        labelStyle: {
+            marginBottom: atoms_1.spacing[1],
+        },
+        buttonStyle: {
+            textAlign: "center",
+        },
+        codeStyle: {
+            fontFamily: "monospace",
+            backgroundColor: atoms_1.colors["muted"],
+            paddingHorizontal: atoms_1.spacing[1],
+            paddingVertical: 2,
+            borderRadius: atoms_1.borderRadius.sm,
+            fontSize: 14,
+        },
+    });
+}

package/dist/components/ui/textarea.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = Textarea;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const atoms_1 = require("../../lib/theme/atoms");
+function Textarea({ style, multiline = true, numberOfLines = 4, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [
+            atoms_1.flex.values[1],
+            atoms_1.borders.width.thin,
+            atoms_1.borders.color.gray[400],
+            atoms_1.bg.gray[900],
+            atoms_1.p[3],
+            atoms_1.text.gray[200],
+            props.editable === false && { opacity: 0.5 },
+            { borderRadius: 10 },
+            style,
+        ], multiline: multiline, numberOfLines: numberOfLines, textAlignVertical: "top", ...props }));
+}

package/dist/components/ui/toast.js

@@ -0,0 +1,175 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToast = useToast;
+exports.Toast = Toast;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const portal_1 = require("@rn-primitives/portal");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const theme_1 = require("../../lib/theme/theme");
+const react_2 = require("react");
+/**
+ * useToast - a hook to manage Toast state and provide a toastController.
+ * Returns a ready-to-render ToastComponent.
+ */
+function useToast(initial = {}) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [title, setTitle] = (0, react_1.useState)(initial.title ?? "");
+    const [description, setDescription] = (0, react_1.useState)(initial.description ?? "");
+    const [duration, setDuration] = (0, react_1.useState)(initial.duration ?? 3);
+    const [actionLabel, setActionLabel] = (0, react_1.useState)(initial.actionLabel ?? "Action");
+    const [onAction, setOnAction] = (0, react_1.useState)(initial.onAction);
+    const show = (0, react_2.useCallback)((toastTitle, toastDescription, options) => {
+        setTitle(toastTitle);
+        setDescription(toastDescription ?? "");
+        setDuration(options?.duration ?? 3);
+        setActionLabel(options?.actionLabel ?? "Action");
+        setOnAction(options?.onAction);
+        setOpen(true);
+    }, []);
+    const hide = (0, react_2.useCallback)(() => {
+        setOpen(false);
+    }, []);
+    // Ready-to-render Toast component
+    const ToastComponent = ((0, jsx_runtime_1.jsx)(Toast, { open: open, onOpenChange: setOpen, title: title, description: description, actionLabel: actionLabel, onAction: onAction, duration: duration }));
+    return {
+        open,
+        title,
+        description,
+        actionLabel,
+        onAction,
+        duration,
+        setOpen,
+        setTitle,
+        setDescription,
+        setActionLabel,
+        setOnAction,
+        setDuration,
+        toastController: { show, hide },
+        ToastComponent,
+    };
+}
+function Toast({ open, onOpenChange, title, description, actionLabel = "Action", onAction, duration = 3, }) {
+    const [seconds, setSeconds] = (0, react_1.useState)(duration);
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const { theme } = (0, theme_1.useTheme)();
+    const [fadeAnim] = (0, react_1.useState)(new react_native_1.Animated.Value(0));
+    const { width } = (0, react_native_1.useWindowDimensions)();
+    const isWeb = react_native_1.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,
+        };
+    (0, react_1.useEffect)(() => {
+        let interval = null;
+        if (open) {
+            setSeconds(duration);
+            react_native_1.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);
+            react_native_1.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 ((0, jsx_runtime_1.jsx)(portal_1.Portal, { name: "toast", children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [styles.container, containerPosition, { opacity: fadeAnim }], pointerEvents: "box-none", children: (0, jsx_runtime_1.jsxs)(react_native_1.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: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { gap: theme.spacing[1], width: "100%" }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                    {
+                                        color: theme.colors.foreground,
+                                        fontSize: 16,
+                                        fontWeight: "500",
+                                    },
+                                ], children: title }), description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [{ color: theme.colors.foreground, fontSize: 14 }], children: description })) : null] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                            gap: theme.spacing[1],
+                            flexDirection: "row",
+                            justifyContent: "flex-end",
+                            width: "100%",
+                        }, children: [onAction && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [
+                                    styles.button,
+                                    {
+                                        borderColor: theme.colors.primary,
+                                        paddingHorizontal: theme.spacing[4],
+                                        paddingVertical: theme.spacing[2],
+                                    },
+                                ], onPress: onAction, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: theme.colors.foreground }, children: actionLabel }) })), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [
+                                    styles.button,
+                                    {
+                                        borderColor: theme.colors.primary,
+                                        paddingHorizontal: theme.spacing[4],
+                                        paddingVertical: theme.spacing[2],
+                                    },
+                                ], onPress: () => onOpenChange(false), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: theme.colors.foreground }, children: "Close" }) })] })] }) }) }));
+}
+const styles = react_native_1.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",
+    },
+});