@streamplace/components 0.7.18 → 0.7.21

package/dist/components/ui/primitives/input.js

@@ -0,0 +1,206 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputPrimitive = exports.InputGroup = exports.InputAddon = exports.InputError = exports.InputDescription = exports.InputLabel = exports.InputContainer = exports.InputRoot = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+// Input root primitive - the main TextInput component
+exports.InputRoot = (0, react_1.forwardRef)(({ value, onChangeText, onChange, onFocus, onBlur, error = false, disabled = false, loading = false, editable, style, placeholderTextColor = "#9ca3af", ...props }, ref) => {
+    const [isFocused, setIsFocused] = react_1.default.useState(false);
+    const handleChangeText = react_1.default.useCallback((text) => {
+        if (onChangeText) {
+            onChangeText(text);
+        }
+        if (onChange) {
+            onChange(text);
+        }
+    }, [onChangeText, onChange]);
+    const handleFocus = react_1.default.useCallback((event) => {
+        setIsFocused(true);
+        if (onFocus) {
+            onFocus(event);
+        }
+    }, [onFocus]);
+    const handleBlur = react_1.default.useCallback((event) => {
+        setIsFocused(false);
+        if (onBlur) {
+            onBlur(event);
+        }
+    }, [onBlur]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref: ref, value: value, onChangeText: handleChangeText, onFocus: handleFocus, onBlur: handleBlur, editable: !disabled && !loading && editable, placeholderTextColor: placeholderTextColor, style: [
+            primitiveStyles.input,
+            style,
+            error && primitiveStyles.inputError,
+            disabled && primitiveStyles.inputDisabled,
+            loading && primitiveStyles.inputLoading,
+        ], ...props }));
+});
+exports.InputRoot.displayName = "InputRoot";
+exports.InputContainer = (0, react_1.forwardRef)(({ children, focused = false, error = false, disabled = false, style, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [
+            primitiveStyles.container,
+            style,
+            focused && primitiveStyles.containerFocused,
+            error && primitiveStyles.containerError,
+            disabled && primitiveStyles.containerDisabled,
+        ], ...props, children: children }));
+});
+exports.InputContainer.displayName = "InputContainer";
+exports.InputLabel = (0, react_1.forwardRef)(({ children, required = false, disabled = false, error = false, style, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { ref: ref, style: [
+            primitiveStyles.label,
+            style,
+            error && primitiveStyles.labelError,
+            disabled && primitiveStyles.labelDisabled,
+        ], ...props, children: [children, required && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: primitiveStyles.required, children: " *" })] }));
+});
+exports.InputLabel.displayName = "InputLabel";
+exports.InputDescription = (0, react_1.forwardRef)(({ children, error = false, disabled = false, style, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [
+            primitiveStyles.description,
+            style,
+            error && primitiveStyles.descriptionError,
+            disabled && primitiveStyles.descriptionDisabled,
+        ], ...props, children: children }));
+});
+exports.InputDescription.displayName = "InputDescription";
+exports.InputError = (0, react_1.forwardRef)(({ children, visible = true, style, ...props }, ref) => {
+    if (!visible || !children)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [primitiveStyles.error, style], ...props, children: children }));
+});
+exports.InputError.displayName = "InputError";
+exports.InputAddon = (0, react_1.forwardRef)(({ children, position = "left", touchable = false, onPress, style, ...props }, ref) => {
+    const addonStyle = [
+        primitiveStyles.addon,
+        primitiveStyles[`addon${position.charAt(0).toUpperCase() + position.slice(1)}`],
+        style,
+    ];
+    if (touchable && onPress) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { ref: ref, style: addonStyle, onPress: onPress, ...props, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: addonStyle, ...props, children: children }));
+});
+exports.InputAddon.displayName = "InputAddon";
+exports.InputGroup = (0, react_1.forwardRef)(({ children, spacing = 8, style, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [primitiveStyles.group, { gap: spacing }, style], ...props, children: children }));
+});
+exports.InputGroup.displayName = "InputGroup";
+// Primitive styles (minimal, unstyled)
+const primitiveStyles = react_native_1.StyleSheet.create({
+    input: {
+        minHeight: 44, // iOS minimum touch target
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        fontSize: 16,
+        borderWidth: 1,
+        borderColor: "#d1d5db",
+        borderRadius: 8,
+        backgroundColor: "white",
+        ...react_native_1.Platform.select({
+            ios: {
+                paddingVertical: 12,
+            },
+            android: {
+                paddingVertical: 8,
+                textAlignVertical: "center",
+            },
+        }),
+    },
+    inputFocused: {
+    // No focus styles for the actual input
+    },
+    inputError: {
+        borderColor: "#ef4444",
+        borderWidth: 1,
+    },
+    inputDisabled: {
+        backgroundColor: "#f3f4f6",
+        borderColor: "#e5e7eb",
+        opacity: 0.6,
+    },
+    inputLoading: {
+        opacity: 0.7,
+    },
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        borderWidth: 1,
+        borderColor: "#d1d5db",
+        borderRadius: 8,
+        backgroundColor: "white",
+        paddingHorizontal: 12,
+        minHeight: 44,
+    },
+    containerFocused: {
+        borderColor: "#3b82f6",
+        borderWidth: 1,
+    },
+    containerError: {
+        borderColor: "#ef4444",
+        borderWidth: 1,
+    },
+    containerDisabled: {
+        backgroundColor: "#f3f4f6",
+        borderColor: "#e5e7eb",
+        opacity: 0.6,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: "500",
+        color: "#374151",
+        marginBottom: 4,
+    },
+    labelError: {
+        color: "#ef4444",
+    },
+    labelDisabled: {
+        color: "#9ca3af",
+        opacity: 0.6,
+    },
+    required: {
+        color: "#ef4444",
+    },
+    description: {
+        fontSize: 12,
+        color: "#6b7280",
+        marginTop: 4,
+    },
+    descriptionError: {
+        color: "#ef4444",
+    },
+    descriptionDisabled: {
+        color: "#9ca3af",
+        opacity: 0.6,
+    },
+    error: {
+        fontSize: 12,
+        color: "#ef4444",
+        marginTop: 4,
+    },
+    addon: {
+        alignItems: "center",
+        justifyContent: "center",
+        paddingHorizontal: 8,
+    },
+    addonLeft: {
+        marginRight: 8,
+    },
+    addonRight: {
+        marginLeft: 8,
+    },
+    group: {
+        flexDirection: "column",
+    },
+});
+// Export primitive collection
+exports.InputPrimitive = {
+    Root: exports.InputRoot,
+    Container: exports.InputContainer,
+    Label: exports.InputLabel,
+    Description: exports.InputDescription,
+    Error: exports.InputError,
+    Addon: exports.InputAddon,
+    Group: exports.InputGroup,
+};

package/dist/components/ui/primitives/modal.js

@@ -0,0 +1,206 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalPrimitive = exports.ModalClose = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.ModalContent = exports.ModalOverlay = exports.ModalRoot = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const { width: screenWidth, height: screenHeight } = react_native_1.Dimensions.get("window");
+// Modal root primitive - handles the native Modal component
+exports.ModalRoot = (0, react_1.forwardRef)(({ open = false, onOpenChange, children, onRequestClose, animationType = "fade", presentationStyle = react_native_1.Platform.OS === "ios" ? "pageSheet" : "fullScreen", transparent = true, statusBarTranslucent = react_native_1.Platform.OS === "android", ...props }, ref) => {
+    const handleRequestClose = react_1.default.useCallback((e) => {
+        if (onOpenChange) {
+            onOpenChange(false);
+        }
+        if (onRequestClose) {
+            onRequestClose(e);
+        }
+    }, [onOpenChange, onRequestClose]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: open, onRequestClose: handleRequestClose, animationType: animationType, presentationStyle: presentationStyle, transparent: transparent, statusBarTranslucent: statusBarTranslucent, ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: primitiveStyles.container, children: children }) }));
+});
+exports.ModalRoot.displayName = "ModalRoot";
+exports.ModalOverlay = (0, react_1.forwardRef)(({ dismissible = true, onDismiss, onPress, style, children, activeOpacity = 1, ...props }, ref) => {
+    const handlePress = react_1.default.useCallback((event) => {
+        if (dismissible && onDismiss) {
+            onDismiss();
+        }
+        if (onPress) {
+            onPress(event);
+        }
+    }, [dismissible, onDismiss, onPress]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { ref: ref, style: [primitiveStyles.overlay, style], activeOpacity: activeOpacity, onPress: handlePress, ...props, children: children }));
+});
+exports.ModalOverlay.displayName = "ModalOverlay";
+exports.ModalContent = (0, react_1.forwardRef)(({ children, position = "center", size = "md", style, onStartShouldSetResponder, ...props }, ref) => {
+    // Prevent touches from propagating to overlay
+    const handleStartShouldSetResponder = react_1.default.useCallback(() => {
+        return true;
+    }, []);
+    const positionStyle = react_1.default.useMemo(() => {
+        switch (position) {
+            case "top":
+                return primitiveStyles.contentTop;
+            case "bottom":
+                return primitiveStyles.contentBottom;
+            case "left":
+                return primitiveStyles.contentLeft;
+            case "right":
+                return primitiveStyles.contentRight;
+            case "center":
+            default:
+                return primitiveStyles.contentCenter;
+        }
+    }, [position]);
+    const sizeStyle = react_1.default.useMemo(() => {
+        switch (size) {
+            case "sm":
+                return primitiveStyles.sizeSm;
+            case "lg":
+                return primitiveStyles.sizeLg;
+            case "xl":
+                return primitiveStyles.sizeXl;
+            case "full":
+                return primitiveStyles.sizeFull;
+            case "md":
+            default:
+                return primitiveStyles.sizeMd;
+        }
+    }, [size]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [primitiveStyles.content, positionStyle, sizeStyle, style], onStartShouldSetResponder: onStartShouldSetResponder || handleStartShouldSetResponder, ...props, children: children }));
+});
+exports.ModalContent.displayName = "ModalContent";
+exports.ModalHeader = (0, react_1.forwardRef)(({ children, withBorder = false, style, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [
+            primitiveStyles.header,
+            withBorder && primitiveStyles.headerBorder,
+            style,
+        ], ...props, children: children }));
+});
+exports.ModalHeader.displayName = "ModalHeader";
+exports.ModalBody = (0, react_1.forwardRef)(({ children, scrollable = true, style, ...props }, ref) => {
+    if (!scrollable) {
+        return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [primitiveStyles.body, style], children: children });
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { ref: ref, style: [primitiveStyles.body, style], showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", ...props, children: children }));
+});
+exports.ModalBody.displayName = "ModalBody";
+exports.ModalFooter = (0, react_1.forwardRef)(({ children, withBorder = false, direction = "row", justify = "flex-end", style, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [
+            primitiveStyles.footer,
+            withBorder && primitiveStyles.footerBorder,
+            {
+                flexDirection: direction,
+                justifyContent: justify,
+            },
+            style,
+        ], ...props, children: children }));
+});
+exports.ModalFooter.displayName = "ModalFooter";
+exports.ModalClose = (0, react_1.forwardRef)(({ children, onClose, onPress, ...props }, ref) => {
+    const handlePress = react_1.default.useCallback((event) => {
+        if (onClose) {
+            onClose();
+        }
+        if (onPress) {
+            onPress(event);
+        }
+    }, [onClose, onPress]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { ref: ref, onPress: handlePress, ...props, children: children }));
+});
+exports.ModalClose.displayName = "ModalClose";
+// Primitive styles (minimal, unstyled)
+const primitiveStyles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 16,
+    },
+    content: {
+        borderRadius: 8,
+        overflow: "hidden",
+    },
+    contentCenter: {
+        alignSelf: "center",
+    },
+    contentTop: {
+        alignSelf: "center",
+        marginTop: 0,
+    },
+    contentBottom: {
+        alignSelf: "center",
+        marginTop: "auto",
+    },
+    contentLeft: {
+        alignSelf: "flex-start",
+        marginRight: "auto",
+    },
+    contentRight: {
+        alignSelf: "flex-end",
+        marginLeft: "auto",
+    },
+    sizeSm: {
+        maxWidth: screenWidth * 0.4,
+        maxHeight: screenHeight * 0.6,
+    },
+    sizeMd: {
+        maxWidth: screenWidth * 0.6,
+        maxHeight: screenHeight * 0.8,
+    },
+    sizeLg: {
+        maxWidth: screenWidth * 0.8,
+        maxHeight: screenHeight * 0.9,
+    },
+    sizeXl: {
+        maxWidth: screenWidth * 0.95,
+        maxHeight: screenHeight * 0.95,
+    },
+    sizeFull: {
+        width: screenWidth,
+        height: screenHeight,
+        maxWidth: screenWidth,
+        maxHeight: screenHeight,
+        borderRadius: 0,
+    },
+    header: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    headerBorder: {
+        borderBottomWidth: 1,
+        borderBottomColor: "#e5e7eb",
+    },
+    body: {
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    footer: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+    },
+    footerBorder: {
+        borderTopWidth: 1,
+        borderTopColor: "#e5e7eb",
+    },
+});
+// Export primitive collection
+exports.ModalPrimitive = {
+    Root: exports.ModalRoot,
+    Overlay: exports.ModalOverlay,
+    Content: exports.ModalContent,
+    Header: exports.ModalHeader,
+    Body: exports.ModalBody,
+    Footer: exports.ModalFooter,
+    Close: exports.ModalClose,
+};

package/dist/components/ui/primitives/text.js

@@ -0,0 +1,292 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextPrimitive = exports.TextBlock = exports.TextSpan = exports.TextRoot = exports.TextContext = void 0;
+exports.objectFromObjects = objectFromObjects;
+exports.useTextContext = useTextContext;
+exports.createTextStyle = createTextStyle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../../lib/theme/theme");
+const tokens_1 = require("../../../lib/theme/tokens");
+exports.TextContext = (0, react_1.createContext)(null);
+function objectFromObjects(arr) {
+    return Object.assign({}, ...arr);
+}
+// Size mapping
+const sizeMap = {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36,
+};
+// Weight mapping
+const weightMap = {
+    thin: "100",
+    light: "300",
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800",
+    black: "900",
+};
+// Line height mapping
+const leadingMap = {
+    none: 1,
+    tight: 1.2,
+    snug: 1.3,
+    normal: 1.5,
+    relaxed: 1.7,
+    loose: 2,
+};
+// Letter spacing mapping
+const trackingMap = {
+    tighter: -0.8,
+    tight: -0.4,
+    normal: 0,
+    wide: 0.4,
+    wider: 0.8,
+    widest: 1.6,
+};
+// Variant definitions (platform-aware)
+const getVariantStyles = () => {
+    // get platform-specific typography
+    // iOS, Android, Web (Universal)
+    const typographicPlatform = (react_native_1.Platform.OS === "ios"
+        ? "ios"
+        : react_native_1.Platform.OS === "android"
+            ? "android"
+            : "universal");
+    const platformTypography = tokens_1.typography[typographicPlatform];
+    if (!platformTypography) {
+        throw new Error("Platform typography not defined");
+    }
+    // Define mapping based on platform
+    if (typographicPlatform === "ios") {
+        return {
+            h1: platformTypography.largeTitle,
+            h2: platformTypography.title1,
+            h3: platformTypography.title2,
+            h4: platformTypography.title3,
+            h5: platformTypography.headline,
+            h6: platformTypography.headline,
+            subtitle1: platformTypography.subhead,
+            subtitle2: platformTypography.footnote,
+            body1: platformTypography.body,
+            body2: platformTypography.callout,
+            caption: platformTypography.caption1,
+            overline: platformTypography.caption2,
+        };
+    }
+    else if (typographicPlatform === "android") {
+        return {
+            h1: platformTypography.headline1,
+            h2: platformTypography.headline2,
+            h3: platformTypography.headline3,
+            h4: platformTypography.headline4,
+            h5: platformTypography.headline5,
+            h6: platformTypography.headline6,
+            subtitle1: platformTypography.subtitle1,
+            subtitle2: platformTypography.subtitle2,
+            body1: platformTypography.body1,
+            body2: platformTypography.body2,
+            caption: platformTypography.caption,
+            overline: platformTypography.overline,
+        };
+    }
+    else {
+        // universal
+        // Map variants to universal sizes
+        return {
+            h1: platformTypography["4xl"],
+            h2: platformTypography["3xl"],
+            h3: platformTypography["2xl"],
+            h4: platformTypography["xl"],
+            h5: platformTypography["lg"],
+            h6: platformTypography["base"],
+            subtitle1: platformTypography.base,
+            subtitle2: platformTypography.sm,
+            body1: platformTypography.base,
+            body2: platformTypography.sm,
+            caption: platformTypography.xs,
+            overline: platformTypography.xs,
+        };
+    }
+};
+// Text root primitive
+exports.TextRoot = (0, react_1.forwardRef)(({ variant, size, weight, color, align, leading, tracking, transform, decoration, italic = false, opacity, style, inherit = true, reset = false, children, ...props }, ref) => {
+    const { theme } = (0, theme_1.useTheme)();
+    const parentContext = (0, react_1.useContext)(exports.TextContext);
+    // Get variant styles
+    const variantStyles = getVariantStyles();
+    // Calculate inherited values
+    const inheritedContext = inherit && !reset && parentContext ? parentContext : {};
+    // Calculate final styles
+    const finalStyles = {
+        // Start with inherited values
+        fontSize: inheritedContext.fontSize,
+        fontWeight: inheritedContext.fontWeight,
+        //color: inheritedContext.color,
+        fontFamily: inheritedContext.fontFamily,
+        lineHeight: inheritedContext.lineHeight,
+        textAlign: inheritedContext.textAlign,
+        letterSpacing: inheritedContext.letterSpacing,
+        textTransform: inheritedContext.textTransform,
+        textDecorationLine: inheritedContext.textDecorationLine,
+        fontStyle: inheritedContext.fontStyle,
+        opacity: inheritedContext.opacity,
+        // Apply variant styles (these may override inherited)
+        ...(variant && variantStyles[variant]),
+        // Apply explicit prop styles (these should override inherited and variant)
+        // Apply size
+        ...(size && {
+            fontSize: typeof size === "number" ? size : sizeMap[size],
+        }),
+        // Apply weight
+        ...(weight && {
+            fontWeight: weightMap[weight],
+        }),
+        // Apply color
+        ...(color
+            ? {
+                color: color === "default"
+                    ? theme.colors.text
+                    : color === "muted"
+                        ? theme.colors.textMuted
+                        : color === "primary"
+                            ? theme.colors.primary
+                            : color === "secondary"
+                                ? theme.colors.secondary
+                                : color === "destructive"
+                                    ? theme.colors.destructive
+                                    : color === "success"
+                                        ? theme.colors.success
+                                        : color === "warning"
+                                            ? theme.colors.warning
+                                            : color || inheritedContext.color, // Custom color string
+            }
+            : { color: inheritedContext.color || theme.colors.text }),
+        // Apply alignment
+        ...(align && {
+            textAlign: align,
+        }),
+        // Apply line height
+        ...(leading && {
+            lineHeight: typeof leading === "number" ? leading : leadingMap[leading],
+        }),
+        // Apply letter spacing
+        ...(tracking && {
+            letterSpacing: typeof tracking === "number" ? tracking : trackingMap[tracking],
+        }),
+        // Apply text transform
+        ...(transform &&
+            transform !== "none" && {
+            textTransform: transform,
+        }),
+        // Apply text decoration
+        ...(decoration &&
+            decoration !== "none" && {
+            textDecorationLine: decoration,
+        }),
+        // Apply italic
+        ...(italic && {
+            fontStyle: "italic",
+        }),
+        // Apply opacity
+        ...(opacity !== undefined && {
+            opacity,
+        }),
+    };
+    finalStyles.color = finalStyles.color;
+    // Create context value for children
+    const contextValue = {
+        fontSize: typeof finalStyles.fontSize === "number"
+            ? finalStyles.fontSize
+            : undefined,
+        fontWeight: finalStyles.fontWeight,
+        color: finalStyles.color || undefined,
+        fontFamily: typeof finalStyles.fontFamily === "string"
+            ? finalStyles.fontFamily
+            : undefined,
+        lineHeight: typeof finalStyles.lineHeight === "number"
+            ? finalStyles.lineHeight
+            : undefined,
+        textAlign: finalStyles.textAlign,
+        letterSpacing: finalStyles.letterSpacing,
+        textTransform: finalStyles.textTransform,
+        textDecorationLine: finalStyles.textDecorationLine,
+        fontStyle: finalStyles.fontStyle,
+        opacity: finalStyles.opacity,
+    };
+    return ((0, jsx_runtime_1.jsx)(exports.TextContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [finalStyles, style], ...props, children: children }) }));
+});
+exports.TextRoot.displayName = "TextRoot";
+// Text span primitive (inherits from parent but doesn't create new context)
+exports.TextSpan = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(exports.TextRoot, { ref: ref, inherit: true, ...props, children: children }));
+});
+exports.TextSpan.displayName = "TextSpan";
+// Text block primitive (always creates new context)
+exports.TextBlock = (0, react_1.forwardRef)(({ children, reset = true, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(exports.TextRoot, { ref: ref, reset: reset, ...props, children: children }));
+});
+exports.TextBlock.displayName = "TextBlock";
+// Hook to access current text context
+function useTextContext() {
+    return (0, react_1.useContext)(exports.TextContext);
+}
+// Utility function to create text styles
+function createTextStyle(props) {
+    // This is a utility function that can be used to generate styles
+    // without rendering a component
+    const style = {};
+    if (props.size) {
+        style.fontSize =
+            typeof props.size === "number" ? props.size : sizeMap[props.size];
+    }
+    if (props.weight) {
+        style.fontWeight = weightMap[props.weight];
+    }
+    if (props.align) {
+        style.textAlign = props.align;
+    }
+    if (props.leading) {
+        style.lineHeight =
+            typeof props.leading === "number"
+                ? props.leading
+                : leadingMap[props.leading];
+    }
+    if (props.tracking) {
+        style.letterSpacing =
+            typeof props.tracking === "number"
+                ? props.tracking
+                : trackingMap[props.tracking];
+    }
+    if (props.transform && props.transform !== "none") {
+        style.textTransform = props.transform;
+    }
+    if (props.decoration && props.decoration !== "none") {
+        style.textDecorationLine = props.decoration;
+    }
+    if (props.italic) {
+        style.fontStyle = "italic";
+    }
+    if (props.opacity !== undefined) {
+        style.opacity = props.opacity;
+    }
+    return style;
+}
+// Export primitive collection
+exports.TextPrimitive = {
+    Root: exports.TextRoot,
+    Span: exports.TextSpan,
+    Block: exports.TextBlock,
+    Context: exports.TextContext,
+    useContext: useTextContext,
+    createStyle: createTextStyle,
+};