@streamplace/components 0.7.18 → 0.7.21

package/dist/components/share/sharesheet.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareSheet = ShareSheet;
+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 theme_1 = require("../../lib/theme");
+const livestream_store_1 = require("../../livestream-store");
+const streamplace_store_1 = require("../../streamplace-store");
+const bluesky_icon_1 = require("../icons/bluesky-icon");
+const ui_1 = require("../ui");
+function ShareSheet({ onShare } = {}) {
+    const profile = (0, livestream_store_1.useLivestreamStore)((x) => x.profile);
+    const [isCopying, setIsCopying] = (0, react_1.useState)(false);
+    const url = (0, streamplace_store_1.useUrl)();
+    // Get the current stream URL
+    const getStreamUrl = (0, react_1.useCallback)(() => {
+        return url + (profile ? `/@${profile.handle}` : "");
+    }, [profile]);
+    // Get the embed URL
+    const getEmbedUrl = (0, react_1.useCallback)(() => {
+        return url + (profile ? `/embed/${profile.handle}` : "");
+    }, [profile]);
+    // Get embed code
+    const getEmbedCode = (0, react_1.useCallback)(() => {
+        const embedUrl = getEmbedUrl();
+        return `<iframe src="${embedUrl}" width="640" height="360" frameborder="0" allowfullscreen></iframe>`;
+    }, [getEmbedUrl]);
+    // Copy to clipboard handler
+    const copyToClipboard = (0, react_1.useCallback)(async (text, label) => {
+        setIsCopying(true);
+        try {
+            if (react_native_1.Platform.OS === "web") {
+                await navigator.clipboard.writeText(text);
+            }
+            else {
+                react_native_1.Clipboard.setString(text);
+            }
+            onShare?.(`copy_${label.toLowerCase().replace(/\s+/g, "_")}`, true);
+        }
+        catch (error) {
+            onShare?.(`copy_${label.toLowerCase().replace(/\s+/g, "_")}`, false);
+        }
+        finally {
+            setIsCopying(false);
+        }
+    }, [onShare]);
+    // Share to Bluesky
+    const shareToBluesky = (0, react_1.useCallback)(() => {
+        const streamUrl = getStreamUrl();
+        const text = profile
+            ? `Check out @${profile.handle} live on Streamplace! ${streamUrl}`
+            : `Check out this stream on Streamplace! ${streamUrl}`;
+        const blueskyUrl = `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`;
+        react_native_1.Linking.openURL(blueskyUrl);
+        onShare?.("share_bluesky", true);
+    }, [profile, getStreamUrl, onShare]);
+    // Share to Twitter/X
+    const shareToTwitter = (0, react_1.useCallback)(() => {
+        const streamUrl = getStreamUrl();
+        const text = profile
+            ? `Check out @${profile.handle} live on Streamplace!`
+            : `Check out this stream on Streamplace!`;
+        const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(streamUrl)}`;
+        react_native_1.Linking.openURL(twitterUrl);
+        onShare?.("share_twitter", true);
+    }, [profile, getStreamUrl, onShare]);
+    // Native share (mobile)
+    const nativeShare = (0, react_1.useCallback)(async () => {
+        const streamUrl = getStreamUrl();
+        const text = profile
+            ? `Check out @${profile.handle} live on Streamplace!`
+            : `Check out this stream on Streamplace!`;
+        if (react_native_1.Platform.OS === "web" && navigator.share) {
+            try {
+                await navigator.share({
+                    title: "Streamplace",
+                    text: text,
+                    url: streamUrl,
+                });
+                onShare?.("share_native", true);
+            }
+            catch (error) {
+                // User cancelled or error occurred
+                onShare?.("share_native", false);
+            }
+        }
+    }, [profile, getStreamUrl, onShare]);
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Share2, { color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsxs)(ui_1.ResponsiveDropdownMenuContent, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: "Share", children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: shareToBluesky, closeOnPress: true, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [(0, jsx_runtime_1.jsx)(bluesky_icon_1.BlueskyIcon, { size: 20, color: theme_1.colors.gray[400] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Share to Bluesky" })] }) }), react_native_1.Platform.OS !== "web" || (navigator && navigator.share) ? ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: nativeShare, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Share2, { size: 20, color: theme_1.colors.gray[400] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "More Options..." })] }) })) : null] }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: "Copy", children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => copyToClipboard(getStreamUrl(), "Stream link"), disabled: isCopying, closeOnPress: true, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Link2, { size: 20, color: theme_1.colors.gray[400] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Copy Link" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => copyToClipboard(getEmbedCode(), "Embed code"), disabled: isCopying, closeOnPress: true, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Code, { size: 20, color: theme_1.colors.gray[400] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Copy Embed Code" })] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { closeOnPress: true, onPress: () => copyToClipboard(getEmbedUrl(), "Embed URL"), disabled: isCopying, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Copy, { size: 20, color: theme_1.colors.gray[400] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Copy Embed URL" })] }) })] })] })] }));
+}

package/dist/components/ui/button.js

@@ -0,0 +1,223 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariants = exports.Button = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../../lib/theme/theme");
+const tokens = tslib_1.__importStar(require("../../lib/theme/tokens"));
+const button_1 = require("./primitives/button");
+const text_1 = require("./primitives/text");
+// Button variants using class-variance-authority pattern
+const buttonVariants = (0, class_variance_authority_1.cva)("", {
+    variants: {
+        variant: {
+            primary: "primary",
+            secondary: "secondary",
+            outline: "outline",
+            ghost: "ghost",
+            destructive: "destructive",
+            success: "success",
+        },
+        size: {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            xl: "xl",
+            pill: "pill",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "md",
+    },
+});
+exports.buttonVariants = buttonVariants;
+exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", children, leftIcon, rightIcon, loading = false, loadingText, disabled, style, ...props }, ref) => {
+    const { theme } = (0, theme_1.useTheme)();
+    // Create dynamic styles based on theme
+    const styles = (0, react_1.useMemo)(() => createStyles(theme), [theme]);
+    // Get variant styles
+    const buttonStyle = (0, react_1.useMemo)(() => {
+        const variantStyle = styles[`${variant}Button`];
+        const sizeStyle = styles[`${size}Button`];
+        return [variantStyle, sizeStyle];
+    }, [variant, size, styles]);
+    // Get inner styles for button content
+    const buttonInnerStyle = (0, react_1.useMemo)(() => {
+        const sizeInnerStyle = styles[`${size}ButtonInner`];
+        return sizeInnerStyle;
+    }, [size, styles]);
+    const textStyle = react_1.default.useMemo(() => {
+        const variantTextStyle = styles[`${variant}Text`];
+        const sizeTextStyle = styles[`${size}Text`];
+        return [variantTextStyle, sizeTextStyle];
+    }, [variant, size, styles]);
+    const iconSize = react_1.default.useMemo(() => {
+        switch (size) {
+            case "sm":
+                return 16;
+            case "lg":
+                return 20;
+            case "xl":
+                return 24;
+            case "md":
+            default:
+                return 18;
+        }
+    }, [size]);
+    const spinnerSize = (0, react_1.useMemo)(() => {
+        switch (size) {
+            case "sm":
+                return "small";
+            case "lg":
+            case "xl":
+                return "large";
+            case "md":
+            default:
+                return "small";
+        }
+    }, [size]);
+    const spinnerColor = (0, react_1.useMemo)(() => {
+        switch (variant) {
+            case "outline":
+            case "ghost":
+                return theme.colors.primary;
+            case "secondary":
+                return theme.colors.secondaryForeground;
+            case "destructive":
+                return theme.colors.destructiveForeground;
+            default:
+                return theme.colors.primaryForeground;
+        }
+    }, [variant, theme.colors]);
+    return ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Root, { ref: ref, disabled: disabled || loading, style: [buttonStyle, style], ...props, children: (0, jsx_runtime_1.jsxs)(button_1.ButtonPrimitive.Content, { style: buttonInnerStyle, children: [loading && !leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", style: { width: iconSize, height: iconSize }, children: leftIcon })) : null, (0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Root, { style: textStyle, children: loading && loadingText ? loadingText : children }), loading && rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", style: { width: iconSize, height: iconSize }, children: rightIcon })) : null] }) }));
+});
+exports.Button.displayName = "Button";
+// Create theme-based styles
+function createStyles(theme) {
+    return react_native_1.StyleSheet.create({
+        // Variant styles
+        primaryButton: {
+            backgroundColor: theme.colors.primary,
+            borderWidth: 0,
+            ...theme.shadows.sm,
+        },
+        primaryText: {
+            color: theme.colors.primaryForeground,
+            fontWeight: "600",
+        },
+        secondaryButton: {
+            backgroundColor: theme.colors.secondary,
+            borderWidth: 0,
+        },
+        secondaryText: {
+            color: theme.colors.secondaryForeground,
+            fontWeight: "500",
+        },
+        outlineButton: {
+            backgroundColor: "transparent",
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+        },
+        outlineText: {
+            color: theme.colors.foreground,
+            fontWeight: "500",
+        },
+        ghostButton: {
+            backgroundColor: "transparent",
+            borderWidth: 0,
+        },
+        ghostText: {
+            color: theme.colors.foreground,
+            fontWeight: "500",
+        },
+        destructiveButton: {
+            backgroundColor: theme.colors.destructive,
+            borderWidth: 0,
+            ...theme.shadows.sm,
+        },
+        destructiveText: {
+            color: theme.colors.destructiveForeground,
+            fontWeight: "600",
+        },
+        successButton: {
+            backgroundColor: theme.colors.success,
+            borderWidth: 0,
+            ...theme.shadows.sm,
+        },
+        successText: {
+            color: theme.colors.successForeground,
+            fontWeight: "600",
+        },
+        pillButton: {
+            paddingHorizontal: theme.spacing[2],
+            paddingVertical: theme.spacing[1],
+            borderRadius: tokens.borderRadius.full,
+            minHeight: tokens.touchTargets.minimum / 2,
+        },
+        pillText: {
+            color: theme.colors.primaryForeground,
+            fontWeight: "400",
+        },
+        // Size styles
+        smButton: {
+            paddingHorizontal: theme.spacing[3],
+            paddingVertical: theme.spacing[2],
+            borderRadius: tokens.borderRadius.md,
+            minHeight: tokens.touchTargets.minimum,
+            gap: theme.spacing[1],
+        },
+        smButtonInner: {
+            gap: theme.spacing[1],
+        },
+        smText: {
+            fontSize: 14,
+            lineHeight: 16,
+        },
+        mdButton: {
+            paddingHorizontal: theme.spacing[4],
+            paddingVertical: theme.spacing[3],
+            borderRadius: tokens.borderRadius.md,
+            minHeight: tokens.touchTargets.minimum,
+            gap: theme.spacing[2],
+        },
+        mdButtonInner: {
+            gap: theme.spacing[2],
+        },
+        mdText: {
+            fontSize: 16,
+            lineHeight: 18,
+        },
+        lgButton: {
+            paddingHorizontal: theme.spacing[6],
+            paddingVertical: theme.spacing[4],
+            borderRadius: tokens.borderRadius.md,
+            minHeight: tokens.touchTargets.comfortable,
+            gap: theme.spacing[3],
+        },
+        lgButtonInner: {
+            gap: theme.spacing[3],
+        },
+        lgText: {
+            fontSize: 18,
+            lineHeight: 20,
+        },
+        xlButton: {
+            paddingHorizontal: theme.spacing[8],
+            paddingVertical: theme.spacing[5],
+            borderRadius: tokens.borderRadius.lg,
+            minHeight: tokens.touchTargets.large,
+            gap: theme.spacing[4],
+        },
+        xlButtonInner: {
+            gap: theme.spacing[4],
+        },
+        xlText: {
+            fontSize: 20,
+            lineHeight: 24,
+        },
+    });
+}

package/dist/components/ui/dialog.js

@@ -0,0 +1,206 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dialogVariants = exports.DialogFooter = exports.DialogDescription = exports.DialogTitle = exports.Dialog = 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 lucide_react_native_1 = require("lucide-react-native");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../../lib/theme/theme");
+const icons_1 = require("./icons");
+const modal_1 = require("./primitives/modal");
+const ThemedX = (0, icons_1.createThemedIcon)(lucide_react_native_1.X);
+// Dialog variants using class-variance-authority pattern
+const dialogVariants = (0, class_variance_authority_1.cva)("", {
+    variants: {
+        variant: {
+            default: "default",
+            sheet: "sheet",
+            fullscreen: "fullscreen",
+        },
+        size: {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            xl: "xl",
+            full: "full",
+        },
+        position: {
+            center: "center",
+            top: "top",
+            bottom: "bottom",
+            left: "left",
+            right: "right",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md",
+        position: "center",
+    },
+});
+exports.dialogVariants = dialogVariants;
+exports.Dialog = (0, react_1.forwardRef)(({ variant = "left", size = "md", position = "center", children, title, description, dismissible = true, showCloseButton = true, onClose, open = false, onOpenChange, ...props }, ref) => {
+    const { theme } = (0, theme_1.useTheme)();
+    // Create dynamic styles based on theme
+    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
+    const handleClose = react_1.default.useCallback(() => {
+        if (onClose) {
+            onClose();
+        }
+        if (onOpenChange) {
+            onOpenChange(false);
+        }
+    }, [onClose, onOpenChange]);
+    const presentationStyle = react_1.default.useMemo(() => {
+        if (variant === "sheet" && react_native_1.Platform.OS === "ios") {
+            return "pageSheet";
+        }
+        if (variant === "fullscreen") {
+            return "fullScreen";
+        }
+        return react_native_1.Platform.OS === "ios"
+            ? "pageSheet"
+            : "fullScreen";
+    }, [variant]);
+    const animationType = react_1.default.useMemo(() => {
+        if (variant === "sheet") {
+            return "slide";
+        }
+        return "fade";
+    }, [variant]);
+    return ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Root, { ref: ref, open: open, onOpenChange: onOpenChange, presentationStyle: presentationStyle, animationType: animationType, ...props, children: (0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Overlay, { dismissible: dismissible, onDismiss: handleClose, style: styles.overlay, children: (0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Content, { position: position || "left", size: size || "md", style: [
+                    styles.content,
+                    styles[`${variant}Content`],
+                    styles[`${size}Content`],
+                ], children: [(title || showCloseButton) && ((0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Header, { withBorder: variant !== "sheet", style: styles.header, children: [(0, jsx_runtime_1.jsx)(exports.DialogTitle, { children: title }), showCloseButton && ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Close, { onClose: handleClose, style: styles.closeButton, children: (0, jsx_runtime_1.jsx)(DialogCloseIcon, {}) }))] })), (0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Body, { scrollable: variant !== "fullscreen", style: styles.body, children: [description && ((0, jsx_runtime_1.jsx)(exports.DialogDescription, { children: description })), children] })] }) }) }));
+});
+exports.Dialog.displayName = "Dialog";
+exports.DialogTitle = (0, react_1.forwardRef)(({ children, style, ...props }, ref) => {
+    const { theme } = (0, theme_1.useTheme)();
+    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
+    if (!children)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [styles.title, style], ...props, children: children }));
+});
+exports.DialogTitle.displayName = "DialogTitle";
+exports.DialogDescription = (0, react_1.forwardRef)(({ children, style, ...props }, ref) => {
+    const { theme } = (0, theme_1.useTheme)();
+    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
+    if (!children)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [styles.description, style], ...props, children: children }));
+});
+exports.DialogDescription.displayName = "DialogDescription";
+exports.DialogFooter = (0, react_1.forwardRef)(({ children, direction = "row", justify = "flex-end", withBorder = true, style, ...props }, ref) => {
+    const { theme } = (0, theme_1.useTheme)();
+    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
+    if (!children)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Footer, { ref: ref, withBorder: withBorder, direction: direction, justify: justify, style: [styles.footer, style], ...props, children: children }));
+});
+exports.DialogFooter.displayName = "DialogFooter";
+// Dialog Close Icon component (Lucide X)
+const DialogCloseIcon = () => {
+    return (0, jsx_runtime_1.jsx)(ThemedX, { size: "md", variant: "default" });
+};
+// Create theme-aware styles
+function createStyles(theme) {
+    return react_native_1.StyleSheet.create({
+        overlay: {
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+        },
+        content: {
+            backgroundColor: theme.colors.card,
+            borderRadius: theme.borderRadius.lg,
+            ...theme.shadows.lg,
+            maxHeight: "90%",
+            maxWidth: "90%",
+        },
+        // Variant styles
+        defaultContent: {
+        // Default styles already applied in content
+        },
+        sheetContent: {
+            borderTopLeftRadius: theme.borderRadius.xl,
+            borderTopRightRadius: theme.borderRadius.xl,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            marginTop: "auto",
+            marginBottom: 0,
+            maxHeight: "80%",
+            width: "100%",
+            maxWidth: "100%",
+        },
+        fullscreenContent: {
+            width: "100%",
+            height: "100%",
+            maxWidth: "100%",
+            maxHeight: "100%",
+            borderRadius: 0,
+            margin: 0,
+        },
+        // Size styles
+        smContent: {
+            minWidth: 300,
+            minHeight: 200,
+        },
+        mdContent: {
+            minWidth: 400,
+            minHeight: 300,
+        },
+        lgContent: {
+            minWidth: 500,
+            minHeight: 400,
+        },
+        xlContent: {
+            minWidth: 600,
+            minHeight: 500,
+        },
+        fullContent: {
+            width: "95%",
+            height: "95%",
+            maxWidth: "95%",
+            maxHeight: "95%",
+        },
+        header: {
+            paddingHorizontal: theme.spacing[6],
+            paddingVertical: theme.spacing[4],
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+        },
+        body: {
+            paddingHorizontal: theme.spacing[6],
+            paddingBottom: theme.spacing[6],
+            flex: 1,
+        },
+        footer: {
+            paddingHorizontal: theme.spacing[6],
+            paddingVertical: theme.spacing[4],
+            gap: theme.spacing[2],
+        },
+        title: {
+            fontSize: 20,
+            fontWeight: "600",
+            color: theme.colors.text,
+            flex: 1,
+            lineHeight: 24,
+        },
+        description: {
+            fontSize: 16,
+            color: theme.colors.textMuted,
+            lineHeight: 22,
+            marginBottom: theme.spacing[4],
+        },
+        closeButton: {
+            width: theme.touchTargets.minimum,
+            height: theme.touchTargets.minimum,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: theme.borderRadius.sm,
+            marginLeft: theme.spacing[2],
+        },
+    });
+}