@streamplace/components 0.7.9 → 0.7.13

package/dist/components/dashboard/problems.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProblemsWrapper = void 0;
+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 livestream_store_1 = require("../../livestream-store");
+const zero = tslib_1.__importStar(require("../../ui"));
+const { bg, r, borders, p, text, layout, gap } = zero;
+const Problems = ({ probs, onIgnore, }) => {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 24, fontWeight: "bold" }], children: "Optimize Your Stream" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[300]], children: "We've found a few things that could improve your stream's reliability." })] }), probs.map((p) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                        gap.all[2],
+                        layout.flex.row,
+                        layout.flex.alignCenter,
+                        { gap: 8, alignItems: "flex-start" },
+                    ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                r.sm,
+                                p[2],
+                                {
+                                    width: 82,
+                                    textAlign: "center",
+                                    backgroundColor: p.severity === "error"
+                                        ? "#7f1d1d"
+                                        : p.severity === "warning"
+                                            ? "#7c2d12"
+                                            : "#1e3a8a",
+                                    color: "white",
+                                    fontSize: 12,
+                                },
+                            ], children: p.severity }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ flex: 1 }, gap.all[1]], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontWeight: "600" }], children: p.code }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[400], { fontSize: 14 }], children: p.message }), p.link && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => p.link && react_native_1.Linking.openURL(p.link), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                            layout.flex.row,
+                                            layout.flex.alignCenter,
+                                            gap.all[2],
+                                        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [{ color: "#3b82f6", fontSize: 14 }], children: "Learn More" }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ExternalLink, { size: 12, color: "#3b82f6" })] }) }))] })] }) }, p.message))), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onIgnore, style: [
+                    bg.blue[600],
+                    r.md,
+                    p[3],
+                    layout.flex.center,
+                    { marginTop: 16 },
+                ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontWeight: "600" }], children: "Ignore" }) })] }));
+};
+const ProblemsWrapper = ({ children, }) => {
+    const problems = (0, livestream_store_1.useLivestreamStore)((x) => x.problems);
+    const [dismiss, setDismiss] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            { position: "relative", flex: 1 },
+            layout.flex.center,
+            { flexBasis: 0 },
+        ], children: [children, problems.length > 0 && !dismiss && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                    {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundColor: "rgba(0, 0, 0, 0.8)",
+                        zIndex: 100,
+                    },
+                    layout.flex.center,
+                    { justifyContent: "flex-start" },
+                    p[8],
+                ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                        bg.gray[900],
+                        borders.color.gray[700],
+                        borders.width.thin,
+                        r.lg,
+                        p[4],
+                        { maxWidth: 700, width: "100%" },
+                    ], children: (0, jsx_runtime_1.jsx)(Problems, { probs: problems, onIgnore: () => setDismiss(true) }) }) }))] }));
+};
+exports.ProblemsWrapper = ProblemsWrapper;
+exports.default = Problems;

package/dist/components/mobile-player/ui/viewer-context-menu.js

@@ -5,11 +5,12 @@ exports.ReportButton = ReportButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const dropdown_menu_1 = require("@rn-primitives/dropdown-menu");
 const lucide_react_native_1 = require("lucide-react-native");
+const react_native_1 = require("react-native");
 const theme_1 = require("../../../lib/theme");
 const livestream_store_1 = require("../../../livestream-store");
 const player_store_1 = require("../../../player-store/");
 const ui_1 = require("../../ui");
-function ContextMenu() {
+function ContextMenu({ dropdownPortalContainer, }) {
     const quality = (0, player_store_1.usePlayerStore)((x) => x.selectedRendition);
     const setQuality = (0, player_store_1.usePlayerStore)((x) => x.setSelectedRendition);
     const qualities = (0, livestream_store_1.useLivestreamStore)((x) => x.renditions);
@@ -17,16 +18,24 @@ function ContextMenu() {
     const setProtocol = (0, player_store_1.usePlayerStore)((x) => x.setProtocol);
     const debugInfo = (0, player_store_1.usePlayerStore)((x) => x.showDebugInfo);
     const setShowDebugInfo = (0, player_store_1.usePlayerStore)((x) => x.setShowDebugInfo);
+    const livestream = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
+    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
+    const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
     const lowLatency = protocol === "webrtc";
     const setLowLatency = (value) => {
         setProtocol(value ? player_store_1.PlayerProtocol.WEBRTC : player_store_1.PlayerProtocol.HLS);
     };
-    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Settings, { color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsxs)(ui_1.ResponsiveDropdownMenuContent, { side: "top", align: "end", children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: r.name }) })))] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, {}) })] })] }));
+    // are we on mobile? then do dropdowns
+    const isMobile = react_native_1.Platform.OS === "ios" || react_native_1.Platform.OS === "android";
+    // dummy portal for mobile
+    const Portal = isMobile ? react_native_1.View : ui_1.DropdownMenuPortal;
+    // render the responsive version on mobile as we can't fullscreen there
+    const DropdownMenuContent = isMobile
+        ? ui_1.ResponsiveDropdownMenuContent
+        : ui_1.DropdownMenuContentWithoutPortal;
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Settings, { color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsx)(Portal, { container: dropdownPortalContainer, children: (0, jsx_runtime_1.jsxs)(DropdownMenuContent, { side: "top", align: "end", children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: r.name }) })))] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, { livestream: livestream, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }) })] }) })] }));
 }
-function ReportButton() {
-    const livestream = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
-    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
-    const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
+function ReportButton({ livestream, setReportModalOpen, setReportSubject, }) {
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
     return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
             if (!livestream)

package/dist/components/ui/button.js

@@ -153,8 +153,8 @@ function createStyles(theme) {
             fontWeight: "600",
         },
         pillButton: {
-            paddingHorizontal: theme.spacing[3],
-            paddingVertical: theme.spacing[2],
+            paddingHorizontal: theme.spacing[2],
+            paddingVertical: theme.spacing[1],
             borderRadius: tokens.borderRadius.full,
             minHeight: tokens.touchTargets.minimum / 2,
         },

package/dist/components/ui/dropdown.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownMenuInfo = exports.DropdownMenuGroup = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.ResponsiveDropdownMenuContent = exports.DropdownMenuContent = exports.DropdownMenuSubContent = exports.DropdownMenuSubTrigger = exports.DropdownMenuBottomSheet = exports.DropdownMenuRadioGroup = exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuTrigger = exports.DropdownMenu = void 0;
+exports.DropdownMenuInfo = exports.DropdownMenuGroup = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.ResponsiveDropdownMenuContent = exports.DropdownMenuContentWithoutPortal = exports.DropdownMenuContent = exports.DropdownMenuSubContent = exports.DropdownMenuSubTrigger = exports.DropdownMenuBottomSheet = exports.DropdownMenuRadioGroup = exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuTrigger = exports.DropdownMenu = void 0;
 exports.DropdownMenuShortcut = DropdownMenuShortcut;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -77,6 +77,25 @@ exports.DropdownMenuContent = (0, react_1.forwardRef)(({ overlayStyle, portalHos
                     atoms_1.a.shadows.md,
                 ], ...props }) }) }));
 });
+exports.DropdownMenuContentWithoutPortal = (0, react_1.forwardRef)(({ overlayStyle, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Overlay, { style: [
+            react_native_1.Platform.OS !== "web" ? react_native_1.StyleSheet.absoluteFill : undefined,
+            overlayStyle,
+        ], children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, { ref: ref, style: [
+                { zIndex: 999999 },
+                atoms_1.a.sizes.minWidth[32],
+                atoms_1.a.sizes.maxWidth[64],
+                atoms_1.a.overflow.hidden,
+                atoms_1.a.radius.all.md,
+                atoms_1.a.borders.width.thin,
+                atoms_1.a.borders.color.gray[800],
+                atoms_1.bg.gray[950],
+                atoms_1.p[2],
+                atoms_1.a.shadows.md,
+            ], ...props }) }));
+});
+/// Responsive Dropdown Menu Content. On mobile this will render a *bottom sheet* that is **portaled to the root of the app**.
+/// Prefer passing scoped content in as **otherwise it may crash the app**.
 exports.ResponsiveDropdownMenuContent = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
     const { width } = (0, react_native_1.useWindowDimensions)();
     // On web, you might want to always use the normal dropdown

package/dist/components/ui/index.js

@@ -12,6 +12,8 @@ tslib_1.__exportStar(require("./button"), exports);
 tslib_1.__exportStar(require("./dialog"), exports);
 tslib_1.__exportStar(require("./dropdown"), exports);
 tslib_1.__exportStar(require("./icons"), exports);
+tslib_1.__exportStar(require("./info-box"), exports);
+tslib_1.__exportStar(require("./info-row"), exports);
 tslib_1.__exportStar(require("./input"), exports);
 tslib_1.__exportStar(require("./loader"), exports);
 tslib_1.__exportStar(require("./resizeable"), exports);

package/dist/components/ui/info-box.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoBox = InfoBox;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const zero = tslib_1.__importStar(require("../../ui"));
+const { bg, r, p, text, layout, gap, flex } = zero;
+function InfoBox({ icon: Icon, label, value, status = "neutral", }) {
+    const statusColors = {
+        good: text.green[400],
+        warning: text.yellow[400],
+        error: text.red[400],
+        neutral: text.white,
+    };
+    const statusColor = statusColors[status];
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            flex.values[1],
+            layout.flex.column,
+            layout.flex.spaceBetween,
+            layout.flex.alignCenter,
+            bg.neutral[700],
+            r.sm,
+            p[2],
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    layout.flex.row,
+                    layout.flex.spaceBetween,
+                    gap.all[3],
+                    zero.w.percent[100],
+                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[100], { fontSize: 13, fontWeight: "500" }], children: label }), (0, jsx_runtime_1.jsx)(Icon, { size: 16, color: "#9ca3af" })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.align.end, zero.w.percent[100]], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [statusColor, { fontSize: 26, fontWeight: "600" }], children: value }) })] }));
+}

package/dist/components/ui/info-row.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoRow = InfoRow;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const zero = tslib_1.__importStar(require("../../ui"));
+const { text, layout, py, gap } = zero;
+function InfoRow({ icon: Icon, label, value, status = "neutral", }) {
+    const statusColors = {
+        good: text.green[400],
+        warning: text.yellow[400],
+        error: text.red[400],
+        neutral: text.white,
+    };
+    const statusColor = statusColors[status];
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            layout.flex.row,
+            layout.flex.spaceBetween,
+            layout.flex.alignCenter,
+            py[2],
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter, gap.all[3]], children: [(0, jsx_runtime_1.jsx)(Icon, { size: 16, color: "#9ca3af" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[300], { fontSize: 13, fontWeight: "500" }], children: label })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [statusColor, { fontSize: 13, fontWeight: "600" }], children: value })] }));
+}

package/dist/components/ui/toast.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToast = useToast;
 exports.Toast = Toast;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const portal_1 = require("@rn-primitives/portal");
@@ -7,6 +8,48 @@ const react_1 = require("react");
 const react_native_1 = require("react-native");
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 const theme_1 = require("../../lib/theme/theme");
+const react_2 = require("react");
+/**
+ * useToast - a hook to manage Toast state and provide a toastController.
+ * Returns a ready-to-render ToastComponent.
+ */
+function useToast(initial = {}) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [title, setTitle] = (0, react_1.useState)(initial.title ?? "");
+    const [description, setDescription] = (0, react_1.useState)(initial.description ?? "");
+    const [duration, setDuration] = (0, react_1.useState)(initial.duration ?? 3);
+    const [actionLabel, setActionLabel] = (0, react_1.useState)(initial.actionLabel ?? "Action");
+    const [onAction, setOnAction] = (0, react_1.useState)(initial.onAction);
+    const show = (0, react_2.useCallback)((toastTitle, toastDescription, options) => {
+        setTitle(toastTitle);
+        setDescription(toastDescription ?? "");
+        setDuration(options?.duration ?? 3);
+        setActionLabel(options?.actionLabel ?? "Action");
+        setOnAction(options?.onAction);
+        setOpen(true);
+    }, []);
+    const hide = (0, react_2.useCallback)(() => {
+        setOpen(false);
+    }, []);
+    // Ready-to-render Toast component
+    const ToastComponent = ((0, jsx_runtime_1.jsx)(Toast, { open: open, onOpenChange: setOpen, title: title, description: description, actionLabel: actionLabel, onAction: onAction, duration: duration }));
+    return {
+        open,
+        title,
+        description,
+        actionLabel,
+        onAction,
+        duration,
+        setOpen,
+        setTitle,
+        setDescription,
+        setActionLabel,
+        setOnAction,
+        setDuration,
+        toastController: { show, hide },
+        ToastComponent,
+    };
+}
 function Toast({ open, onOpenChange, title, description, actionLabel = "Action", onAction, duration = 3, }) {
     const [seconds, setSeconds] = (0, react_1.useState)(duration);
     const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoRetry = exports.zero = exports.ui = exports.PlayerUI = exports.Player = exports.usePlayerContext = exports.withPlayerProvider = exports.PlayerProvider = void 0;
+exports.Dashboard = exports.VideoRetry = exports.zero = exports.ui = exports.PlayerUI = exports.Player = exports.usePlayerContext = exports.withPlayerProvider = exports.PlayerProvider = void 0;
 const tslib_1 = require("tslib");
 // barrel file :)
 tslib_1.__exportStar(require("./livestream-provider"), exports);
@@ -30,3 +30,5 @@ Object.defineProperty(exports, "VideoRetry", { enumerable: true, get: function (
 tslib_1.__exportStar(require("./lib/system-messages"), exports);
 tslib_1.__exportStar(require("./components/share/sharesheet"), exports);
 tslib_1.__exportStar(require("./components/keep-awake"), exports);
+// Dashboard components
+exports.Dashboard = tslib_1.__importStar(require("./components/dashboard"));

package/dist/lib/theme/atoms.js

@@ -89,15 +89,38 @@ exports.layout = {
         spaceEvenly: {
             justifyContent: "space-evenly",
         },
+        direction: pairify({
+            row: "row",
+            column: "column",
+            "row-reverse": "row-reverse",
+            "column-reverse": "column-reverse",
+        }, "flexDirection"),
+        justify: pairify({
+            start: "flex-start",
+            end: "flex-end",
+            center: "center",
+            between: "space-between",
+            around: "space-around",
+            evenly: "space-evenly",
+        }, "justifyContent"),
+        align: pairify({
+            start: "flex-start",
+            end: "flex-end",
+            center: "center",
+            stretch: "stretch",
+            baseline: "baseline",
+        }, "alignItems"),
+        wrap: pairify({
+            wrap: "wrap",
+            nowrap: "nowrap",
+            reverse: "wrap-reverse",
+        }, "flexWrap"),
     },
-    position: {
-        absolute: {
-            position: "absolute",
-        },
-        relative: {
-            position: "relative",
-        },
-    },
+    position: pairify({
+        absolute: "absolute",
+        relative: "relative",
+        static: "static",
+    }, "position"),
 };
 // Enhanced border utilities with pairified colors and widths
 exports.borders = {
@@ -106,11 +129,11 @@ exports.borders = {
         medium: 2,
         thick: 4,
     }, "borderWidth"),
-    style: {
-        solid: { borderStyle: "solid" },
-        dashed: { borderStyle: "dashed" },
-        dotted: { borderStyle: "dotted" },
-    },
+    style: pairify({
+        solid: "solid",
+        dashed: "dashed",
+        dotted: "dotted",
+    }, "borderStyle"),
     // Pairified color borders
     color: pairify(tokens_1.colors, "borderColor"),
     // Top border utilities
@@ -278,19 +301,19 @@ exports.zIndex = pairify({
     auto: "auto",
 }, "zIndex");
 // Overflow utilities
-exports.overflow = {
-    visible: { overflow: "visible" },
-    hidden: { overflow: "hidden" },
-    scroll: { overflow: "scroll" },
-};
+exports.overflow = pairify({
+    visible: "visible",
+    hidden: "hidden",
+    scroll: "scroll",
+}, "overflow");
 // Text alignment utilities
-exports.textAlign = {
-    left: { textAlign: "left" },
-    center: { textAlign: "center" },
-    right: { textAlign: "right" },
-    justify: { textAlign: "justify" },
-    auto: { textAlign: "auto" },
-};
+exports.textAlign = pairify({
+    left: "left",
+    center: "center",
+    right: "right",
+    justify: "justify",
+    auto: "auto",
+}, "textAlign");
 // Font weight utilities
 exports.fontWeight = pairify({
     thin: "100",
@@ -346,28 +369,26 @@ exports.letterSpacing = pairify({
     widest: 1,
 }, "letterSpacing");
 // Text transform utilities
-exports.textTransform = {
-    uppercase: { textTransform: "uppercase" },
-    lowercase: { textTransform: "lowercase" },
-    capitalize: { textTransform: "capitalize" },
-    none: { textTransform: "none" },
-};
+exports.textTransform = pairify({
+    uppercase: "uppercase",
+    lowercase: "lowercase",
+    capitalize: "capitalize",
+    none: "none",
+}, "textTransform");
 // Text decoration utilities
-exports.textDecoration = {
-    none: { textDecorationLine: "none" },
-    underline: { textDecorationLine: "underline" },
-    lineThrough: { textDecorationLine: "line-through" },
-    underlineLineThrough: {
-        textDecorationLine: "underline line-through",
-    },
-};
+exports.textDecoration = pairify({
+    none: "none",
+    underline: "underline",
+    lineThrough: "line-through",
+    underlineLineThrough: "underline line-through",
+}, "textDecorationLine");
 // Text align vertical utilities (React Native specific)
-exports.textAlignVertical = {
-    auto: { textAlignVertical: "auto" },
-    top: { textAlignVertical: "top" },
-    bottom: { textAlignVertical: "bottom" },
-    center: { textAlignVertical: "center" },
-};
+exports.textAlignVertical = pairify({
+    auto: "auto",
+    top: "top",
+    bottom: "bottom",
+    center: "center",
+}, "textAlignVertical");
 // Transform utilities
 exports.transforms = {
     rotate: pairify({