@streamplace/components 0.7.0 → 0.7.2

package/dist/components/ui/resizeable.js

@@ -1,24 +1,34 @@
-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");
+"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 };
-export function Resizable({ isPlayerRatioGreater, style = {}, children, }) {
-    const { slideKeyboard } = useKeyboardSlide();
-    const { bottom: safeBottom } = useSafeAreaInsets();
+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 = useSharedValue(MIN_HEIGHT);
-    const startHeight = useSharedValue(MIN_HEIGHT);
-    const panGesture = Gesture.Pan()
+    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;
     })
@@ -30,54 +40,55 @@ export function Resizable({ isPlayerRatioGreater, style = {}, children, }) {
             newHeight = MIN_HEIGHT;
         sheetHeight.value = newHeight;
         if (newHeight < COLLAPSE_HEIGHT) {
-            sheetHeight.value = withSpring(MIN_HEIGHT, SPRING_CONFIG);
+            sheetHeight.value = (0, react_native_reanimated_1.withSpring)(MIN_HEIGHT, SPRING_CONFIG);
         }
     });
-    const animatedStyle = useAnimatedStyle(() => ({
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
         height: sheetHeight.value < COLLAPSE_HEIGHT ? 0 : sheetHeight.value,
-        opacity: interpolate(sheetHeight.value, [MIN_HEIGHT, COLLAPSE_HEIGHT], [0, 1], Extrapolation.CLAMP),
+        opacity: (0, react_native_reanimated_1.interpolate)(sheetHeight.value, [MIN_HEIGHT, COLLAPSE_HEIGHT], [0, 1], react_native_reanimated_1.Extrapolation.CLAMP),
         transform: [
             {
-                translateY: slideKeyboard - safeBottom + Math.max(0, -sheetHeight.value),
+                translateY: slideKeyboard +
+                    Math.max(0, -sheetHeight.value) +
+                    (slideKeyboard < 0 ? 0 : -safeBottom),
             },
         ],
     }));
-    const handleAnimatedStyle = useAnimatedStyle(() => ({
+    const handleAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
         opacity: sheetHeight.value < COLLAPSE_HEIGHT ? 1 : 0,
         transform: [
             {
-                translateY: sheetHeight.value < COLLAPSE_HEIGHT ? 0 : withSpring(20),
+                translateY: sheetHeight.value < COLLAPSE_HEIGHT ? 0 : (0, react_native_reanimated_1.withSpring)(20),
             },
         ],
     }));
-    return (_jsxs(_Fragment, { children: [_jsx(Animated.View, { style: [
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
                     handleAnimatedStyle,
-                    layout.position.absolute,
-                    bottom[4],
-                    w.percent[100],
-                    layout.flex.center,
-                    zIndex[1],
-                    { marginBottom: safeBottom },
-                ], children: _jsx(Pressable, { onPress: () => {
+                    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
-                                ? withSpring(MAX_HEIGHT, SPRING_CONFIG)
-                                : withSpring(MIN_HEIGHT, SPRING_CONFIG);
-                    }, children: _jsx(View, { style: [
-                            p[1],
+                                ? (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: _jsx(ChevronUp, { size: 32, color: "white", style: { marginBottom: 1, marginTop: -1 } }) }) }) }), _jsxs(AnimatedView, { style: [
+                        ], 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
-                        ? layout.position.relative
-                        : layout.position.absolute,
-                    bottom[0],
-                    zIndex[1],
-                    w.percent[100],
+                        ? 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",
@@ -86,8 +97,8 @@ export function Resizable({ isPlayerRatioGreater, style = {}, children, }) {
                         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],
+                ], children: [(0, jsx_runtime_1.jsx)(view_1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.justifyCenter], children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture, children: (0, jsx_runtime_1.jsx)(view_1.View, { hitSlop: { top: 20, bottom: 20, left: 20, right: 20 }, style: [
+                                    atoms_1.w[32],
                                     {
                                         height: 6,
                                         transform: [{ translateY: -10 }],

package/dist/components/ui/text.js

@@ -1,11 +1,16 @@
-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";
+"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 = cva("", {
+const textVariants = (0, class_variance_authority_1.cva)("", {
     variants: {
         variant: {
             h1: "h1",
@@ -58,9 +63,10 @@ const textVariants = cva("", {
         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) => {
+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.useMemo(() => createStyles(), []);
+    const styles = react_1.default.useMemo(() => createStyles(), []);
     // Override props based on convenience props
     const finalColor = customColor ? customColor : muted ? "muted" : color;
     const finalTransform = uppercase
@@ -87,89 +93,85 @@ export const Text = forwardRef(({ variant = undefined, size = undefined, weight
     // 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 }));
+    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 }));
 });
-Text.displayName = "Text";
+exports.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(), []);
+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 _jsx(Text, { ref: ref, style: [styles.codeStyle, ...styleArr], ...props });
+    return (0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, style: [styles.codeStyle, ...styleArr], ...props });
 });
-Code.displayName = "Code";
+exports.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";
+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 StyleSheet.create({
+    return react_native_1.StyleSheet.create({
         // Variant-specific styles
         h1Style: {
-            marginBottom: spacing[4],
+            marginBottom: atoms_1.spacing[4],
         },
         h2Style: {
-            marginBottom: spacing[3],
+            marginBottom: atoms_1.spacing[3],
         },
         h3Style: {
-            marginBottom: spacing[3],
+            marginBottom: atoms_1.spacing[3],
         },
         h4Style: {
-            marginBottom: spacing[2],
+            marginBottom: atoms_1.spacing[2],
         },
         h5Style: {
-            marginBottom: spacing[2],
+            marginBottom: atoms_1.spacing[2],
         },
         h6Style: {
-            marginBottom: spacing[2],
+            marginBottom: atoms_1.spacing[2],
         },
         subtitle1Style: {
-            marginBottom: spacing[2],
+            marginBottom: atoms_1.spacing[2],
         },
         subtitle2Style: {
-            marginBottom: spacing[1],
+            marginBottom: atoms_1.spacing[1],
         },
         body1Style: {
-            marginBottom: spacing[3],
+            marginBottom: atoms_1.spacing[3],
         },
         body2Style: {
-            marginBottom: spacing[2],
+            marginBottom: atoms_1.spacing[2],
         },
         captionStyle: {
-            marginBottom: spacing[1],
+            marginBottom: atoms_1.spacing[1],
         },
         overlineStyle: {
-            marginBottom: spacing[1],
+            marginBottom: atoms_1.spacing[1],
             textTransform: "uppercase",
             letterSpacing: 1,
         },
         labelStyle: {
-            marginBottom: spacing[1],
+            marginBottom: atoms_1.spacing[1],
         },
         buttonStyle: {
             textAlign: "center",
         },
         codeStyle: {
             fontFamily: "monospace",
-            backgroundColor: colors["muted"],
-            paddingHorizontal: spacing[1],
+            backgroundColor: atoms_1.colors["muted"],
+            paddingHorizontal: atoms_1.spacing[1],
             paddingVertical: 2,
-            borderRadius: radius.sm,
+            borderRadius: atoms_1.borderRadius.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

@@ -1,17 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { TextInput } from "react-native";
-import { bg, borders, flex, p, text } from "../../lib/theme/atoms";
+"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 (_jsx(TextInput, { style: [
-            flex.values[1],
-            borders.width.thin,
-            borders.color.gray[400],
-            bg.gray[900],
-            p[3],
-            text.gray[200],
+    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 }));
 }
-export { Textarea };

package/dist/components/ui/toast.js

@@ -1,16 +1,19 @@
-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";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+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
         ? {
@@ -30,11 +33,11 @@ export function Toast({ open, onOpenChange, title, description, actionLabel = "A
             width: "100%",
             maxWidth: undefined,
         };
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         let interval = null;
         if (open) {
             setSeconds(duration);
-            Animated.timing(fadeAnim, {
+            react_native_1.Animated.timing(fadeAnim, {
                 toValue: 1,
                 duration: 200,
                 useNativeDriver: true,
@@ -54,7 +57,7 @@ export function Toast({ open, onOpenChange, title, description, actionLabel = "A
         else {
             if (interval)
                 clearInterval(interval);
-            Animated.timing(fadeAnim, {
+            react_native_1.Animated.timing(fadeAnim, {
                 toValue: 0,
                 duration: 150,
                 useNativeDriver: true,
@@ -69,7 +72,7 @@ export function Toast({ open, onOpenChange, title, description, actionLabel = "A
     }, [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: [
+    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,
@@ -81,34 +84,34 @@ export function Toast({ open, onOpenChange, title, description, actionLabel = "A
                         padding: theme.spacing[4],
                         width: isDesktop ? "100%" : "95%",
                     },
-                ], children: [_jsxs(View, { style: { gap: theme.spacing[1], width: "100%" }, children: [_jsx(Text, { style: [
+                ], 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 ? (_jsx(Text, { style: [{ color: theme.colors.foreground, fontSize: 14 }], children: description })) : null] }), _jsxs(View, { style: {
+                                ], 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 && (_jsx(Pressable, { style: [
+                        }, 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: _jsx(Text, { style: { color: theme.colors.foreground }, children: actionLabel }) })), _jsx(Pressable, { style: [
+                                ], 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: _jsx(Text, { style: { color: theme.colors.foreground }, children: "Close" }) })] })] }) }) }));
+                                ], onPress: () => onOpenChange(false), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: theme.colors.foreground }, children: "Close" }) })] })] }) }) }));
 }
-const styles = StyleSheet.create({
+const styles = react_native_1.StyleSheet.create({
     container: {
         position: "absolute",
         zIndex: 1000,

package/dist/components/ui/view.js

@@ -1,11 +1,14 @@
-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";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.viewVariants = exports.Center = exports.Column = exports.Row = exports.Overlay = exports.Surface = exports.Container = exports.Card = exports.View = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const atoms_1 = require("../../lib/theme/atoms");
+const theme_1 = require("../../lib/theme/theme");
 // View variants using class-variance-authority pattern
-const viewVariants = cva("", {
+const viewVariants = (0, class_variance_authority_1.cva)("", {
     variants: {
         variant: {
             default: "default",
@@ -67,15 +70,16 @@ const viewVariants = cva("", {
         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();
+exports.viewVariants = viewVariants;
+exports.View = (0, react_1.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 } = (0, theme_1.useTheme)();
     // Map variant to styles
     const variantStyles = (() => {
         switch (variant) {
             case "card":
                 return {
                     backgroundColor: theme.colors.card,
-                    borderRadius: radius.lg,
+                    borderRadius: atoms_1.borderRadius.lg,
                     shadowColor: "#000",
                     shadowOffset: { width: 0, height: 2 },
                     shadowOpacity: 0.1,
@@ -93,7 +97,7 @@ export const View = forwardRef(({ variant = "default", padding = "none", margin
             case "container":
                 return {
                     backgroundColor: theme.colors.background,
-                    padding: spacing[4],
+                    padding: atoms_1.spacing[4],
                 };
             default:
                 return {};
@@ -103,15 +107,15 @@ export const View = forwardRef(({ variant = "default", padding = "none", margin
     const paddingValue = (() => {
         switch (padding) {
             case "xs":
-                return spacing[1];
+                return atoms_1.spacing[1];
             case "sm":
-                return spacing[2];
+                return atoms_1.spacing[2];
             case "md":
-                return spacing[3];
+                return atoms_1.spacing[3];
             case "lg":
-                return spacing[4];
+                return atoms_1.spacing[4];
             case "xl":
-                return spacing[5];
+                return atoms_1.spacing[5];
             default:
                 return undefined;
         }
@@ -120,15 +124,15 @@ export const View = forwardRef(({ variant = "default", padding = "none", margin
     const marginValue = (() => {
         switch (margin) {
             case "xs":
-                return spacing[1];
+                return atoms_1.spacing[1];
             case "sm":
-                return spacing[2];
+                return atoms_1.spacing[2];
             case "md":
-                return spacing[3];
+                return atoms_1.spacing[3];
             case "lg":
-                return spacing[4];
+                return atoms_1.spacing[4];
             case "xl":
-                return spacing[5];
+                return atoms_1.spacing[5];
             default:
                 return undefined;
         }
@@ -228,23 +232,21 @@ export const View = forwardRef(({ variant = "default", padding = "none", margin
     const finalStyle = Array.isArray(style)
         ? [computedStyle, ...style]
         : [computedStyle, style];
-    return _jsx(RNView, { ref: ref, style: finalStyle, ...props });
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: finalStyle, ...props });
 });
-View.displayName = "View";
+exports.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 };
+exports.Card = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, variant: "card", ...props }));
+exports.Card.displayName = "Card";
+exports.Container = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, variant: "container", ...props }));
+exports.Container.displayName = "Container";
+exports.Surface = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, variant: "surface", ...props }));
+exports.Surface.displayName = "Surface";
+exports.Overlay = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, variant: "overlay", ...props }));
+exports.Overlay.displayName = "Overlay";
+exports.Row = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, direction: "row", ...props }));
+exports.Row.displayName = "Row";
+exports.Column = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, direction: "column", ...props }));
+exports.Column.displayName = "Column";
+exports.Center = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.View, { ref: ref, centered: true, ...props })));
+exports.Center.displayName = "Center";

package/dist/hooks/index.js

@@ -1,9 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 // 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";
+tslib_1.__exportStar(require("./useAvatars"), exports);
+tslib_1.__exportStar(require("./useCameraToggle"), exports);
+tslib_1.__exportStar(require("./useKeyboard"), exports);
+tslib_1.__exportStar(require("./useKeyboardSlide"), exports);
+tslib_1.__exportStar(require("./useLivestreamInfo"), exports);
+tslib_1.__exportStar(require("./useOuterAndInnerDimensions"), exports);
+tslib_1.__exportStar(require("./usePlayerDimensions"), exports);
+tslib_1.__exportStar(require("./useSegmentDimensions"), exports);
+tslib_1.__exportStar(require("./useSegmentTiming"), exports);

package/dist/hooks/useAvatars.js

@@ -1,11 +1,14 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { usePDSAgent } from "../streamplace-store/xrpc";
-export function useAvatars(dids) {
-    let agent = usePDSAgent();
-    const [profiles, setProfiles] = useState({});
-    const inFlight = useRef(new Set());
-    const missingDids = useMemo(() => dids.filter((did) => !(did in profiles) && !inFlight.current.has(did)), [dids, profiles]);
-    useEffect(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAvatars = useAvatars;
+const react_1 = require("react");
+const xrpc_1 = require("../streamplace-store/xrpc");
+function useAvatars(dids) {
+    let agent = (0, xrpc_1.usePDSAgent)();
+    const [profiles, setProfiles] = (0, react_1.useState)({});
+    const inFlight = (0, react_1.useRef)(new Set());
+    const missingDids = (0, react_1.useMemo)(() => dids.filter((did) => !(did in profiles) && !inFlight.current.has(did)), [dids, profiles]);
+    (0, react_1.useEffect)(() => {
         if (missingDids.length === 0 || !agent)
             return;
         const toFetch = missingDids.slice(0, 25);