@streamplace/components 0.7.0 → 0.7.2

package/dist/components/mobile-player/video.native.js

@@ -1,58 +1,67 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useVideoPlayer, VideoView } from "expo-video";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { RTCView, RTCView as RTCViewIngest, } from "react-native-webrtc";
-import { IngestMediaSource, PlayerStatus as IngestPlayerStatus, PlayerProtocol, PlayerStatus, Text, usePlayerStore as useIngestPlayerStore, usePlayerStore, useStreamplaceStore, View, } from "../..";
-import { borderRadius, colors, p } from "../../lib/theme/atoms";
-import { srcToUrl } from "./shared";
-import useWebRTC, { useWebRTCIngest } from "./use-webrtc";
-import { mediaDevices } from "./webrtc-primitives.native";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = VideoNative;
+exports.NativeVideo = NativeVideo;
+exports.NativeWHEP = NativeWHEP;
+exports.NativeIngestPlayer = NativeIngestPlayer;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const expo_video_1 = require("expo-video");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_webrtc_1 = require("react-native-webrtc");
+const __1 = require("../..");
+const atoms_1 = require("../../lib/theme/atoms");
+const shared_1 = require("./shared");
+const use_webrtc_1 = tslib_1.__importStar(require("./use-webrtc"));
+const webrtc_primitives_native_1 = require("./webrtc-primitives.native");
 // Add NativeIngestPlayer to the switch below!
-export default function VideoNative() {
-    const protocol = usePlayerStore((x) => x.protocol);
-    const ingest = usePlayerStore((x) => x.ingestConnectionState) != null;
-    return (_jsx(View, { children: ingest ? (_jsx(NativeIngestPlayer, {})) : protocol === PlayerProtocol.WEBRTC ? (_jsx(NativeWHEP, {})) : (_jsx(NativeVideo, {})) }));
+function VideoNative() {
+    const protocol = (0, __1.usePlayerStore)((x) => x.protocol);
+    const ingest = (0, __1.usePlayerStore)((x) => x.ingestConnectionState) != null;
+    return ((0, jsx_runtime_1.jsx)(__1.View, { children: ingest ? ((0, jsx_runtime_1.jsx)(NativeIngestPlayer, {})) : protocol === __1.PlayerProtocol.WEBRTC ? ((0, jsx_runtime_1.jsx)(NativeWHEP, {})) : ((0, jsx_runtime_1.jsx)(NativeVideo, {})) }));
 }
-export function NativeVideo() {
-    const videoRef = useRef(null);
-    const protocol = usePlayerStore((x) => x.protocol);
-    const selectedRendition = usePlayerStore((x) => x.selectedRendition);
-    const src = usePlayerStore((x) => x.src);
-    const { url } = srcToUrl({ src: src, selectedRendition }, protocol);
-    const setStatus = usePlayerStore((x) => x.setStatus);
-    const muted = usePlayerStore((x) => x.muted);
-    const volume = usePlayerStore((x) => x.volume);
-    const setFullscreen = usePlayerStore((x) => x.setFullscreen);
-    const fullscreen = usePlayerStore((x) => x.fullscreen);
-    const playerEvent = usePlayerStore((x) => x.playerEvent);
-    const spurl = useStreamplaceStore((x) => x.url);
-    const setPlayerWidth = usePlayerStore((x) => x.setPlayerWidth);
-    const setPlayerHeight = usePlayerStore((x) => x.setPlayerHeight);
+function NativeVideo() {
+    const videoRef = (0, react_1.useRef)(null);
+    const protocol = (0, __1.usePlayerStore)((x) => x.protocol);
+    const selectedRendition = (0, __1.usePlayerStore)((x) => x.selectedRendition);
+    const src = (0, __1.usePlayerStore)((x) => x.src);
+    const { url } = (0, shared_1.srcToUrl)({ src: src, selectedRendition }, protocol);
+    const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
+    const muted = (0, __1.usePlayerStore)((x) => x.muted);
+    const volume = (0, __1.usePlayerStore)((x) => x.volume);
+    const setFullscreen = (0, __1.usePlayerStore)((x) => x.setFullscreen);
+    const fullscreen = (0, __1.usePlayerStore)((x) => x.fullscreen);
+    const playerEvent = (0, __1.usePlayerStore)((x) => x.playerEvent);
+    const spurl = (0, __1.useStreamplaceStore)((x) => x.url);
+    const setPlayerWidth = (0, __1.usePlayerStore)((x) => x.setPlayerWidth);
+    const setPlayerHeight = (0, __1.usePlayerStore)((x) => x.setPlayerHeight);
     // State for live dimensions
-    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-    const handleLayout = useCallback((event) => {
+    const [dimensions, setDimensions] = (0, react_1.useState)({ width: 0, height: 0 });
+    const handleLayout = (0, react_1.useCallback)((event) => {
         const { width, height } = event.nativeEvent.layout;
         setDimensions({ width, height });
         setPlayerWidth(width);
         setPlayerHeight(height);
     }, []);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         return () => {
-            setStatus(PlayerStatus.START);
+            setStatus(__1.PlayerStatus.START);
         };
     }, [setStatus]);
-    const player = useVideoPlayer(url, (player) => {
+    const player = (0, expo_video_1.useVideoPlayer)(url, (player) => {
         player.loop = true;
         player.muted = muted;
         player.play();
     });
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         player.muted = muted;
     }, [muted, player]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         player.volume = volume;
     }, [volume, player]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const subs = [
             "playToEnd",
             "playbackRateChange",
@@ -68,10 +77,10 @@ export function NativeVideo() {
         });
         subs.push(player.addListener("playingChange", (newIsPlaying) => {
             if (newIsPlaying) {
-                setStatus(PlayerStatus.PLAYING);
+                setStatus(__1.PlayerStatus.PLAYING);
             }
             else {
-                setStatus(PlayerStatus.WAITING);
+                setStatus(__1.PlayerStatus.WAITING);
             }
         }));
         return () => {
@@ -80,49 +89,49 @@ export function NativeVideo() {
             }
         };
     }, [player, playerEvent, setStatus, spurl]);
-    return (_jsx(_Fragment, { children: _jsx(VideoView, { ref: videoRef, player: player, allowsFullscreen: true, nativeControls: fullscreen, onFullscreenEnter: () => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(expo_video_1.VideoView, { ref: videoRef, player: player, allowsFullscreen: true, nativeControls: fullscreen, onFullscreenEnter: () => {
                 setFullscreen(true);
             }, onFullscreenExit: () => {
                 setFullscreen(false);
             }, allowsPictureInPicture: true, onLayout: handleLayout }) }));
 }
-export function NativeWHEP() {
-    const selectedRendition = usePlayerStore((x) => x.selectedRendition);
-    const src = usePlayerStore((x) => x.src);
-    const { url } = srcToUrl({ src: src, selectedRendition }, PlayerProtocol.WEBRTC);
-    const [stream, stuck] = useWebRTC(url);
-    const setPlayerWidth = usePlayerStore((x) => x.setPlayerWidth);
-    const setPlayerHeight = usePlayerStore((x) => x.setPlayerHeight);
+function NativeWHEP() {
+    const selectedRendition = (0, __1.usePlayerStore)((x) => x.selectedRendition);
+    const src = (0, __1.usePlayerStore)((x) => x.src);
+    const { url } = (0, shared_1.srcToUrl)({ src: src, selectedRendition }, __1.PlayerProtocol.WEBRTC);
+    const [stream, stuck] = (0, use_webrtc_1.default)(url);
+    const setPlayerWidth = (0, __1.usePlayerStore)((x) => x.setPlayerWidth);
+    const setPlayerHeight = (0, __1.usePlayerStore)((x) => x.setPlayerHeight);
     // PiP support: wire up videoRef (no direct ref for RTCView)
-    const setVideoRef = usePlayerStore((x) => x.setVideoRef);
+    const setVideoRef = (0, __1.usePlayerStore)((x) => x.setVideoRef);
     // State for live dimensions
-    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-    const handleLayout = useCallback((event) => {
+    const [dimensions, setDimensions] = (0, react_1.useState)({ width: 0, height: 0 });
+    const handleLayout = (0, react_1.useCallback)((event) => {
         const { width, height } = event.nativeEvent.layout;
         setDimensions({ width, height });
         setPlayerWidth(width);
         setPlayerHeight(height);
     }, []);
-    const setStatus = usePlayerStore((x) => x.setStatus);
-    const muted = usePlayerStore((x) => x.muted);
-    const volume = usePlayerStore((x) => x.volume);
-    useEffect(() => {
+    const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
+    const muted = (0, __1.usePlayerStore)((x) => x.muted);
+    const volume = (0, __1.usePlayerStore)((x) => x.volume);
+    (0, react_1.useEffect)(() => {
         if (stuck) {
-            setStatus(PlayerStatus.STALLED);
+            setStatus(__1.PlayerStatus.STALLED);
         }
         else {
-            setStatus(PlayerStatus.PLAYING);
+            setStatus(__1.PlayerStatus.PLAYING);
         }
     }, [stuck, setStatus]);
     const mediaStream = stream;
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!mediaStream) {
-            setStatus(PlayerStatus.WAITING);
+            setStatus(__1.PlayerStatus.WAITING);
             return;
         }
-        setStatus(PlayerStatus.PLAYING);
+        setStatus(__1.PlayerStatus.PLAYING);
     }, [mediaStream, setStatus]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!mediaStream) {
             return;
         }
@@ -133,15 +142,15 @@ export function NativeWHEP() {
         });
     }, [mediaStream, muted, volume]);
     // Keep the playerStore videoRef in sync for PiP (if possible)
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (typeof setVideoRef === "function") {
             setVideoRef(null); // No direct ref for RTCView, but keep API consistent
         }
     }, [setVideoRef]);
     if (!mediaStream) {
-        return _jsx(View, {});
+        return (0, jsx_runtime_1.jsx)(__1.View, {});
     }
-    return (_jsx(_Fragment, { children: _jsx(RTCView, { mirror: false, objectFit: "contain", streamURL: mediaStream.toURL(), onLayout: handleLayout, pictureInPictureEnabled: true, autoStartPictureInPicture: true, pictureInPicturePreferredSize: {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_native_webrtc_1.RTCView, { mirror: false, objectFit: "contain", streamURL: mediaStream.toURL(), onLayout: handleLayout, pictureInPictureEnabled: true, autoStartPictureInPicture: true, pictureInPicturePreferredSize: {
                 width: 160,
                 height: 90,
             }, style: {
@@ -150,32 +159,32 @@ export function NativeWHEP() {
                 flex: 1,
             } }) }));
 }
-export function NativeIngestPlayer() {
-    const ingestStarting = useIngestPlayerStore((x) => x.ingestStarting);
-    const ingestMediaSource = useIngestPlayerStore((x) => x.ingestMediaSource);
-    const ingestAutoStart = useIngestPlayerStore((x) => x.ingestAutoStart);
-    const setStatus = useIngestPlayerStore((x) => x.setStatus);
-    const setVideoRef = usePlayerStore((x) => x.setVideoRef);
-    const [error, setError] = useState(null);
-    const ingestCamera = useIngestPlayerStore((x) => x.ingestCamera);
-    useEffect(() => {
-        setStatus(IngestPlayerStatus.PLAYING);
+function NativeIngestPlayer() {
+    const ingestStarting = (0, __1.usePlayerStore)((x) => x.ingestStarting);
+    const ingestMediaSource = (0, __1.usePlayerStore)((x) => x.ingestMediaSource);
+    const ingestAutoStart = (0, __1.usePlayerStore)((x) => x.ingestAutoStart);
+    const setStatus = (0, __1.usePlayerStore)((x) => x.setStatus);
+    const setVideoRef = (0, __1.usePlayerStore)((x) => x.setVideoRef);
+    const [error, setError] = (0, react_1.useState)(null);
+    const ingestCamera = (0, __1.usePlayerStore)((x) => x.ingestCamera);
+    (0, react_1.useEffect)(() => {
+        setStatus(__1.PlayerStatus.PLAYING);
     }, [setStatus]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (typeof setVideoRef === "function") {
             setVideoRef(null);
         }
     }, [setVideoRef]);
-    const url = useStreamplaceStore((x) => x.url);
-    const [lms, setLocalMediaStream] = useState(null);
-    const [, setRemoteMediaStream] = useWebRTCIngest({
+    const url = (0, __1.useStreamplaceStore)((x) => x.url);
+    const [lms, setLocalMediaStream] = (0, react_1.useState)(null);
+    const [, setRemoteMediaStream] = (0, use_webrtc_1.useWebRTCIngest)({
         endpoint: `${url}/api/ingest/webrtc`,
     });
     // Use lms directly as localMediaStream
     const localMediaStream = lms;
-    useEffect(() => {
-        if (ingestMediaSource === IngestMediaSource.DISPLAY) {
-            mediaDevices
+    (0, react_1.useEffect)(() => {
+        if (ingestMediaSource === __1.IngestMediaSource.DISPLAY) {
+            webrtc_primitives_native_1.mediaDevices
                 .getDisplayMedia()
                 .then((stream) => {
                 console.log("display media", stream);
@@ -187,7 +196,7 @@ export function NativeIngestPlayer() {
             });
         }
         else {
-            mediaDevices
+            webrtc_primitives_native_1.mediaDevices
                 .getUserMedia({
                 audio: {
                 // deviceId: "audio-1",
@@ -205,14 +214,29 @@ export function NativeIngestPlayer() {
             })
                 .then((stream) => {
                 setLocalMediaStream(stream);
+                let errs = [];
+                if (stream.getAudioTracks().length === 0) {
+                    console.warn("No audio tracks found in user media stream");
+                    errs.push("microphone");
+                }
+                if (stream.getVideoTracks().length === 0) {
+                    console.warn("No video tracks found in user media stream");
+                    errs.push("camera");
+                }
+                if (errs.length > 0) {
+                    setError(new Error(`We could not access your ${errs.join(" and ")}. To stream, you need to give us permission to access these.`));
+                }
+                else {
+                    setError(null);
+                }
             })
                 .catch((e) => {
                 console.error("error getting user media", e);
-                setError(new Error("We could not access your camera or microphone. Please check your permissions."));
+                setError(new Error("We could not access your camera or microphone. To stream, you need to give us permission to access these."));
             });
         }
     }, [ingestMediaSource, ingestCamera]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!ingestStarting && !ingestAutoStart) {
             setRemoteMediaStream(null);
             return;
@@ -228,9 +252,9 @@ export function NativeIngestPlayer() {
         return null;
     }
     if (error) {
-        return (_jsxs(View, { backgroundColor: colors.destructive[900], style: [p[4], { borderRadius: borderRadius.md }], children: [_jsx(View, { children: _jsx(Text, { children: "Error encountered!" }) }), _jsx(Text, { children: error.message })] }));
+        return ((0, jsx_runtime_1.jsxs)(__1.View, { backgroundColor: atoms_1.colors.destructive[900], style: [atoms_1.p[4], atoms_1.m[4], atoms_1.gap.all[2], { borderRadius: atoms_1.borderRadius.md }], children: [(0, jsx_runtime_1.jsx)(__1.View, { children: (0, jsx_runtime_1.jsx)(__1.Text, { style: [atoms_1.fontWeight.semibold], size: "2xl", children: "Error encountered!" }) }), (0, jsx_runtime_1.jsx)(__1.Text, { children: error.message }), error.message.includes("To stream, you need to give us permission to access these.") && ((0, jsx_runtime_1.jsx)(__1.Button, { onPress: react_native_1.Linking.openSettings, style: [atoms_1.h[10]], variant: "secondary", children: (0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.layout.flex.row, atoms_1.gap.all[1]], children: [(0, jsx_runtime_1.jsx)(__1.Text, { children: "Open Settings" }), " ", (0, jsx_runtime_1.jsx)(lucide_react_native_1.ArrowRight, { color: "white", size: "18" })] }) }))] }));
     }
-    return (_jsx(RTCViewIngest, { mirror: ingestCamera !== "environment", objectFit: "contain", streamURL: localMediaStream.toURL(), zOrder: 0, style: {
+    return ((0, jsx_runtime_1.jsx)(react_native_webrtc_1.RTCView, { mirror: ingestCamera !== "environment", objectFit: "contain", streamURL: localMediaStream.toURL(), zOrder: 0, style: {
             minWidth: "100%",
             minHeight: "100%",
             flex: 1,

package/dist/components/mobile-player/webrtc-diagnostics.js

@@ -1,6 +1,10 @@
-import { useEffect, useState } from "react";
-export function useWebRTCDiagnostics() {
-    const [diagnostics, setDiagnostics] = useState({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWebRTCDiagnostics = useWebRTCDiagnostics;
+exports.logWebRTCDiagnostics = logWebRTCDiagnostics;
+const react_1 = require("react");
+function useWebRTCDiagnostics() {
+    const [diagnostics, setDiagnostics] = (0, react_1.useState)({
         done: false,
         browserSupport: false,
         rtcPeerConnection: false,
@@ -10,7 +14,7 @@ export function useWebRTCDiagnostics() {
         errors: [],
         warnings: [],
     });
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const errors = [];
         const warnings = [];
         // Check if we're in a browser environment
@@ -80,7 +84,7 @@ export function useWebRTCDiagnostics() {
     }, []);
     return diagnostics;
 }
-export function logWebRTCDiagnostics() {
+function logWebRTCDiagnostics() {
     console.group("WebRTC Diagnostics");
     // Log browser support
     console.log("RTCPeerConnection:", !!window.RTCPeerConnection);

package/dist/components/mobile-player/webrtc-primitives.js

@@ -1,3 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkWebRTCSupport = exports.mediaDevices = exports.WebRTCMediaStream = exports.RTCSessionDescription = exports.RTCPeerConnection = void 0;
 // Browser compatibility checks for WebRTC
 const checkWebRTCSupport = () => {
     if (typeof window === "undefined") {
@@ -10,6 +13,7 @@ const checkWebRTCSupport = () => {
         throw new Error("RTCSessionDescription is not supported in this browser. Please use a modern browser that supports WebRTC.");
     }
 };
+exports.checkWebRTCSupport = checkWebRTCSupport;
 // Check support immediately
 try {
     checkWebRTCSupport();
@@ -17,9 +21,7 @@ try {
 catch (error) {
     console.error("WebRTC Compatibility Error:", error.message);
 }
-export const RTCPeerConnection = window.RTCPeerConnection;
-export const RTCSessionDescription = window.RTCSessionDescription;
-export const WebRTCMediaStream = window.MediaStream;
-export const mediaDevices = navigator.mediaDevices;
-// Export the compatibility checker for use in other components
-export { checkWebRTCSupport };
+exports.RTCPeerConnection = window.RTCPeerConnection;
+exports.RTCSessionDescription = window.RTCSessionDescription;
+exports.WebRTCMediaStream = window.MediaStream;
+exports.mediaDevices = navigator.mediaDevices;

package/dist/components/mobile-player/webrtc-primitives.native.js

@@ -1 +1,8 @@
-export { RTCPeerConnection, RTCSessionDescription, MediaStream as WebRTCMediaStream, mediaDevices, } from "react-native-webrtc";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mediaDevices = exports.WebRTCMediaStream = exports.RTCSessionDescription = exports.RTCPeerConnection = void 0;
+var react_native_webrtc_1 = require("react-native-webrtc");
+Object.defineProperty(exports, "RTCPeerConnection", { enumerable: true, get: function () { return react_native_webrtc_1.RTCPeerConnection; } });
+Object.defineProperty(exports, "RTCSessionDescription", { enumerable: true, get: function () { return react_native_webrtc_1.RTCSessionDescription; } });
+Object.defineProperty(exports, "WebRTCMediaStream", { enumerable: true, get: function () { return react_native_webrtc_1.MediaStream; } });
+Object.defineProperty(exports, "mediaDevices", { enumerable: true, get: function () { return react_native_webrtc_1.mediaDevices; } });

package/dist/components/ui/button.js

@@ -1,13 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import React, { forwardRef, useMemo } from "react";
-import { ActivityIndicator, StyleSheet } from "react-native";
-import { useTheme } from "../../lib/theme/theme";
-import * as tokens from "../../lib/theme/tokens";
-import { ButtonPrimitive } from "./primitives/button";
-import { TextPrimitive } from "./primitives/text";
+"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 = cva("", {
+const buttonVariants = (0, class_variance_authority_1.cva)("", {
     variants: {
         variant: {
             primary: "primary",
@@ -30,27 +34,28 @@ const buttonVariants = cva("", {
         size: "md",
     },
 });
-export const Button = forwardRef(({ variant = "primary", size = "md", children, leftIcon, rightIcon, loading = false, loadingText, disabled, style, ...props }, ref) => {
-    const { theme } = useTheme();
+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 = useMemo(() => createStyles(theme), [theme]);
+    const styles = (0, react_1.useMemo)(() => createStyles(theme), [theme]);
     // Get variant styles
-    const buttonStyle = useMemo(() => {
+    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 = useMemo(() => {
+    const buttonInnerStyle = (0, react_1.useMemo)(() => {
         const sizeInnerStyle = styles[`${size}ButtonInner`];
         return sizeInnerStyle;
     }, [size, styles]);
-    const textStyle = React.useMemo(() => {
+    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.useMemo(() => {
+    const iconSize = react_1.default.useMemo(() => {
         switch (size) {
             case "sm":
                 return 16;
@@ -63,7 +68,7 @@ export const Button = forwardRef(({ variant = "primary", size = "md", children,
                 return 18;
         }
     }, [size]);
-    const spinnerSize = useMemo(() => {
+    const spinnerSize = (0, react_1.useMemo)(() => {
         switch (size) {
             case "sm":
                 return "small";
@@ -75,7 +80,7 @@ export const Button = forwardRef(({ variant = "primary", size = "md", children,
                 return "small";
         }
     }, [size]);
-    const spinnerColor = useMemo(() => {
+    const spinnerColor = (0, react_1.useMemo)(() => {
         switch (variant) {
             case "outline":
             case "ghost":
@@ -88,12 +93,12 @@ export const Button = forwardRef(({ variant = "primary", size = "md", children,
                 return theme.colors.primaryForeground;
         }
     }, [variant, theme.colors]);
-    return (_jsx(ButtonPrimitive.Root, { ref: ref, disabled: disabled || loading, style: [buttonStyle, style], ...props, children: _jsxs(ButtonPrimitive.Content, { style: buttonInnerStyle, children: [loading && !leftIcon ? (_jsx(ButtonPrimitive.Icon, { position: "left", children: _jsx(ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : leftIcon ? (_jsx(ButtonPrimitive.Icon, { position: "left", style: { width: iconSize, height: iconSize }, children: leftIcon })) : null, _jsx(TextPrimitive.Root, { style: textStyle, children: loading && loadingText ? loadingText : children }), loading && rightIcon ? (_jsx(ButtonPrimitive.Icon, { position: "right", children: _jsx(ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : rightIcon ? (_jsx(ButtonPrimitive.Icon, { position: "right", style: { width: iconSize, height: iconSize }, children: rightIcon })) : null] }) }));
+    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] }) }));
 });
-Button.displayName = "Button";
+exports.Button.displayName = "Button";
 // Create theme-based styles
 function createStyles(theme) {
-    return StyleSheet.create({
+    return react_native_1.StyleSheet.create({
         // Variant styles
         primaryButton: {
             backgroundColor: theme.colors.primary,
@@ -216,5 +221,3 @@ function createStyles(theme) {
         },
     });
 }
-// Export button variants for external use
-export { buttonVariants };

package/dist/components/ui/dialog.js

@@ -1,14 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import { X } from "lucide-react-native";
-import React, { forwardRef } from "react";
-import { Platform, StyleSheet, Text } from "react-native";
-import { useTheme } from "../../lib/theme/theme";
-import { createThemedIcon } from "./icons";
-import { ModalPrimitive } from "./primitives/modal";
-const ThemedX = createThemedIcon(X);
+"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 = cva("", {
+const dialogVariants = (0, class_variance_authority_1.cva)("", {
     variants: {
         variant: {
             default: "default",
@@ -36,11 +40,12 @@ const dialogVariants = cva("", {
         position: "center",
     },
 });
-export const Dialog = forwardRef(({ variant = "left", size = "md", position = "center", children, title, description, dismissible = true, showCloseButton = true, onClose, open = false, onOpenChange, ...props }, ref) => {
-    const { theme } = useTheme();
+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.useMemo(() => createStyles(theme), [theme]);
-    const handleClose = React.useCallback(() => {
+    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
+    const handleClose = react_1.default.useCallback(() => {
         if (onClose) {
             onClose();
         }
@@ -48,61 +53,61 @@ export const Dialog = forwardRef(({ variant = "left", size = "md", position = "c
             onOpenChange(false);
         }
     }, [onClose, onOpenChange]);
-    const presentationStyle = React.useMemo(() => {
-        if (variant === "sheet" && Platform.OS === "ios") {
+    const presentationStyle = react_1.default.useMemo(() => {
+        if (variant === "sheet" && react_native_1.Platform.OS === "ios") {
             return "pageSheet";
         }
         if (variant === "fullscreen") {
             return "fullScreen";
         }
-        return Platform.OS === "ios"
+        return react_native_1.Platform.OS === "ios"
             ? "pageSheet"
             : "fullScreen";
     }, [variant]);
-    const animationType = React.useMemo(() => {
+    const animationType = react_1.default.useMemo(() => {
         if (variant === "sheet") {
             return "slide";
         }
         return "fade";
     }, [variant]);
-    return (_jsx(ModalPrimitive.Root, { ref: ref, open: open, onOpenChange: onOpenChange, presentationStyle: presentationStyle, animationType: animationType, ...props, children: _jsx(ModalPrimitive.Overlay, { dismissible: dismissible, onDismiss: handleClose, style: styles.overlay, children: _jsxs(ModalPrimitive.Content, { position: position || "left", size: size || "md", style: [
+    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) && (_jsxs(ModalPrimitive.Header, { withBorder: variant !== "sheet", style: styles.header, children: [_jsx(DialogTitle, { children: title }), showCloseButton && (_jsx(ModalPrimitive.Close, { onClose: handleClose, style: styles.closeButton, children: _jsx(DialogCloseIcon, {}) }))] })), _jsxs(ModalPrimitive.Body, { scrollable: variant !== "fullscreen", style: styles.body, children: [description && (_jsx(DialogDescription, { children: description })), children] })] }) }) }));
+                ], 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] })] }) }) }));
 });
-Dialog.displayName = "Dialog";
-export const DialogTitle = forwardRef(({ children, style, ...props }, ref) => {
-    const { theme } = useTheme();
-    const styles = React.useMemo(() => createStyles(theme), [theme]);
+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 (_jsx(Text, { ref: ref, style: [styles.title, style], ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [styles.title, style], ...props, children: children }));
 });
-DialogTitle.displayName = "DialogTitle";
-export const DialogDescription = forwardRef(({ children, style, ...props }, ref) => {
-    const { theme } = useTheme();
-    const styles = React.useMemo(() => createStyles(theme), [theme]);
+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 (_jsx(Text, { ref: ref, style: [styles.description, style], ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [styles.description, style], ...props, children: children }));
 });
-DialogDescription.displayName = "DialogDescription";
-export const DialogFooter = forwardRef(({ children, direction = "row", justify = "flex-end", withBorder = true, style, ...props }, ref) => {
-    const { theme } = useTheme();
-    const styles = React.useMemo(() => createStyles(theme), [theme]);
+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 (_jsx(ModalPrimitive.Footer, { ref: ref, withBorder: withBorder, direction: direction, justify: justify, style: [styles.footer, style], ...props, children: children }));
+    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 }));
 });
-DialogFooter.displayName = "DialogFooter";
+exports.DialogFooter.displayName = "DialogFooter";
 // Dialog Close Icon component (Lucide X)
 const DialogCloseIcon = () => {
-    return _jsx(ThemedX, { size: "md", variant: "muted" });
+    return (0, jsx_runtime_1.jsx)(ThemedX, { size: "md", variant: "muted" });
 };
 // Create theme-aware styles
 function createStyles(theme) {
-    return StyleSheet.create({
+    return react_native_1.StyleSheet.create({
         overlay: {
             backgroundColor: "rgba(0, 0, 0, 0.5)",
         },
@@ -199,5 +204,3 @@ function createStyles(theme) {
         },
     });
 }
-// Export dialog variants for external use
-export { dialogVariants };