@rocapine/react-native-onboarding-ui 1.6.0 → 1.8.0

package/dist/UI/Pages/ComposableScreen/elements/RadioGroupElement.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroupComponent = exports.RadioGroupElementPropsSchema = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const zod_1 = require("zod");
+const react_native_1 = require("react-native");
+const BaseBoxProps_1 = require("./BaseBoxProps");
+exports.RadioGroupElementPropsSchema = BaseBoxProps_1.BaseBoxPropsSchema.extend({
+    variableName: zod_1.z.string().optional(),
+    defaultValue: zod_1.z.string().optional(),
+    gap: zod_1.z.number().optional(),
+    direction: zod_1.z.enum(["vertical", "horizontal"]).optional(),
+    items: zod_1.z.array(zod_1.z.object({ label: zod_1.z.string().trim().min(1, "item label must not be empty"), value: zod_1.z.string().trim().min(1, "item value must not be empty") })).min(1, "items must not be empty"),
+    itemBackgroundColor: zod_1.z.string().optional(),
+    itemSelectedBackgroundColor: zod_1.z.string().optional(),
+    itemBorderColor: zod_1.z.string().optional(),
+    itemSelectedBorderColor: zod_1.z.string().optional(),
+    itemBorderRadius: zod_1.z.number().optional(),
+    itemBorderWidth: zod_1.z.number().optional(),
+    itemColor: zod_1.z.string().optional(),
+    itemSelectedColor: zod_1.z.string().optional(),
+    itemFontSize: zod_1.z.number().optional(),
+    itemFontWeight: zod_1.z.string().optional(),
+    itemFontFamily: zod_1.z.string().optional(),
+    itemPadding: zod_1.z.number().optional(),
+    itemPaddingHorizontal: zod_1.z.number().optional(),
+    itemPaddingVertical: zod_1.z.number().optional(),
+}).superRefine((data, ctx) => {
+    const values = data.items.map((i) => i.value);
+    const unique = new Set(values);
+    if (unique.size !== values.length) {
+        ctx.addIssue({ code: zod_1.z.ZodIssueCode.custom, message: "item values must be unique", path: ["items"] });
+    }
+    if (data.defaultValue !== undefined && !unique.has(data.defaultValue)) {
+        ctx.addIssue({ code: zod_1.z.ZodIssueCode.custom, message: "defaultValue must match one of the item values", path: ["defaultValue"] });
+    }
+});
+const RadioGroupComponent = ({ element, ctx }) => {
+    var _a, _b;
+    const { theme, variables, setVariable } = ctx;
+    const selectedValue = element.props.variableName ? (_a = variables[element.props.variableName]) === null || _a === void 0 ? void 0 : _a.value : undefined;
+    (0, react_1.useEffect)(() => {
+        if (element.props.variableName && element.props.defaultValue && selectedValue === undefined) {
+            const defaultItem = element.props.items.find((i) => i.value === element.props.defaultValue);
+            setVariable(element.props.variableName, { value: element.props.defaultValue, label: defaultItem === null || defaultItem === void 0 ? void 0 : defaultItem.label });
+        }
+    }, [element.props.variableName, element.props.defaultValue, element.props.items, selectedValue]);
+    const handleSelect = (value, label) => {
+        if (element.props.variableName) {
+            setVariable(element.props.variableName, { value, label });
+        }
+    };
+    const isHorizontal = element.props.direction === "horizontal";
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "radiogroup", style: {
+            flexDirection: isHorizontal ? "row" : "column",
+            flexWrap: isHorizontal ? "wrap" : undefined,
+            gap: (_b = element.props.gap) !== null && _b !== void 0 ? _b : 8,
+            width: element.props.width,
+            height: element.props.height,
+            margin: element.props.margin,
+            marginHorizontal: element.props.marginHorizontal,
+            marginVertical: element.props.marginVertical,
+            padding: element.props.padding,
+            paddingHorizontal: element.props.paddingHorizontal,
+            paddingVertical: element.props.paddingVertical,
+            borderWidth: element.props.borderWidth,
+            borderRadius: element.props.borderRadius,
+            borderColor: element.props.borderColor,
+            opacity: element.props.opacity,
+        }, children: element.props.items.map((item) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            const isSelected = selectedValue === item.value;
+            // Note: "+ "15"" appends hex alpha (≈8% opacity) assuming a 6-digit hex primary color.
+            // This works for standard hex colors but may produce unexpected results for other color formats.
+            const bgColor = isSelected
+                ? ((_a = element.props.itemSelectedBackgroundColor) !== null && _a !== void 0 ? _a : theme.colors.primary + "15")
+                : ((_b = element.props.itemBackgroundColor) !== null && _b !== void 0 ? _b : "transparent");
+            const textColor = isSelected
+                ? ((_c = element.props.itemSelectedColor) !== null && _c !== void 0 ? _c : theme.colors.primary)
+                : ((_d = element.props.itemColor) !== null && _d !== void 0 ? _d : theme.colors.text.primary);
+            const borderColor = isSelected
+                ? ((_e = element.props.itemSelectedBorderColor) !== null && _e !== void 0 ? _e : theme.colors.primary)
+                : ((_f = element.props.itemBorderColor) !== null && _f !== void 0 ? _f : theme.colors.neutral.low);
+            return ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { activeOpacity: 0.7, onPress: () => handleSelect(item.value, item.label), accessibilityRole: "radio", accessibilityState: { selected: isSelected, checked: isSelected }, accessibilityLabel: item.label, style: {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 12,
+                    backgroundColor: bgColor,
+                    borderRadius: (_g = element.props.itemBorderRadius) !== null && _g !== void 0 ? _g : 8,
+                    borderWidth: (_h = element.props.itemBorderWidth) !== null && _h !== void 0 ? _h : 1,
+                    borderColor: borderColor,
+                    padding: (_j = element.props.itemPadding) !== null && _j !== void 0 ? _j : (element.props.itemPaddingHorizontal === undefined && element.props.itemPaddingVertical === undefined ? 12 : undefined),
+                    paddingHorizontal: element.props.itemPaddingHorizontal,
+                    paddingVertical: element.props.itemPaddingVertical,
+                }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                            width: 20,
+                            height: 20,
+                            borderRadius: 10,
+                            borderWidth: 2,
+                            borderColor: isSelected ? theme.colors.primary : theme.colors.neutral.medium,
+                            alignItems: "center",
+                            justifyContent: "center",
+                        }, children: isSelected && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                                width: 10,
+                                height: 10,
+                                borderRadius: 5,
+                                backgroundColor: theme.colors.primary,
+                            } })) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                            flex: 1,
+                            color: textColor,
+                            fontSize: (_k = element.props.itemFontSize) !== null && _k !== void 0 ? _k : theme.typography.textStyles.body.fontSize,
+                            fontWeight: (_l = element.props.itemFontWeight) !== null && _l !== void 0 ? _l : theme.typography.textStyles.body.fontWeight,
+                            fontFamily: element.props.itemFontFamily,
+                        }, children: item.label })] }, item.value));
+        }) }));
+};
+exports.RadioGroupComponent = RadioGroupComponent;
+//# sourceMappingURL=RadioGroupElement.js.map

package/dist/UI/Pages/ComposableScreen/elements/RadioGroupElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupElement.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/RadioGroupElement.tsx"],"names":[],"mappings":"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"}

package/dist/UI/Pages/ComposableScreen/elements/RiveElement.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+import { z } from "zod";
+import { BaseBoxProps } from "./BaseBoxProps";
+import { UIElement } from "../types";
+import { RenderContext } from "./shared";
+export type RiveElementProps = BaseBoxProps & {
+    url: string;
+    autoplay?: boolean;
+    fit?: "Contain" | "Cover" | "Fill" | "FitWidth" | "FitHeight" | "None" | "ScaleDown" | "Layout";
+    alignment?: "TopLeft" | "TopCenter" | "TopRight" | "CenterLeft" | "Center" | "CenterRight" | "BottomLeft" | "BottomCenter" | "BottomRight";
+    artboardName?: string;
+    stateMachineName?: string;
+};
+export declare const RiveElementPropsSchema: z.ZodObject<{
+    width: z.ZodOptional<z.ZodNumber>;
+    height: z.ZodOptional<z.ZodNumber>;
+    opacity: z.ZodOptional<z.ZodNumber>;
+    margin: z.ZodOptional<z.ZodNumber>;
+    marginHorizontal: z.ZodOptional<z.ZodNumber>;
+    marginVertical: z.ZodOptional<z.ZodNumber>;
+    padding: z.ZodOptional<z.ZodNumber>;
+    paddingHorizontal: z.ZodOptional<z.ZodNumber>;
+    paddingVertical: z.ZodOptional<z.ZodNumber>;
+    borderWidth: z.ZodOptional<z.ZodNumber>;
+    borderRadius: z.ZodOptional<z.ZodNumber>;
+    borderColor: z.ZodOptional<z.ZodString>;
+    url: z.ZodString;
+    autoplay: z.ZodOptional<z.ZodBoolean>;
+    fit: z.ZodOptional<z.ZodEnum<{
+        Contain: "Contain";
+        Cover: "Cover";
+        Fill: "Fill";
+        FitWidth: "FitWidth";
+        FitHeight: "FitHeight";
+        None: "None";
+        ScaleDown: "ScaleDown";
+        Layout: "Layout";
+    }>>;
+    alignment: z.ZodOptional<z.ZodEnum<{
+        TopLeft: "TopLeft";
+        TopCenter: "TopCenter";
+        TopRight: "TopRight";
+        CenterLeft: "CenterLeft";
+        Center: "Center";
+        CenterRight: "CenterRight";
+        BottomLeft: "BottomLeft";
+        BottomCenter: "BottomCenter";
+        BottomRight: "BottomRight";
+    }>>;
+    artboardName: z.ZodOptional<z.ZodString>;
+    stateMachineName: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+type RiveUIElement = Extract<UIElement, {
+    type: "Rive";
+}>;
+type Props = {
+    element: RiveUIElement;
+    ctx: RenderContext;
+};
+export declare const RiveElementRenderer: ({ element, ctx }: Props) => React.ReactElement;
+export {};
+//# sourceMappingURL=RiveElement.d.ts.map

package/dist/UI/Pages/ComposableScreen/elements/RiveElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RiveElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/RiveElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;IAChG,SAAS,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,GAAG,aAAa,GAAG,YAAY,GAAG,cAAc,GAAG,aAAa,CAAC;IAC3I,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAOjC,CAAC;AAEH,KAAK,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAyB1D,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,aAAa,CAAC;IACvB,GAAG,EAAE,aAAa,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,kBAAkB,KAAK,KAAG,KAAK,CAAC,YAiCnE,CAAC"}

package/dist/UI/Pages/ComposableScreen/elements/RiveElement.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RiveElementRenderer = exports.RiveElementPropsSchema = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const zod_1 = require("zod");
+const react_native_1 = require("react-native");
+const BaseBoxProps_1 = require("./BaseBoxProps");
+const helpers_1 = require("../../../Theme/helpers");
+exports.RiveElementPropsSchema = BaseBoxProps_1.BaseBoxPropsSchema.extend({
+    url: zod_1.z.string().min(1, "url must not be empty"),
+    autoplay: zod_1.z.boolean().optional(),
+    fit: zod_1.z.enum(["Contain", "Cover", "Fill", "FitWidth", "FitHeight", "None", "ScaleDown", "Layout"]).optional(),
+    alignment: zod_1.z.enum(["TopLeft", "TopCenter", "TopRight", "CenterLeft", "Center", "CenterRight", "BottomLeft", "BottomCenter", "BottomRight"]).optional(),
+    artboardName: zod_1.z.string().optional(),
+    stateMachineName: zod_1.z.string().optional(),
+});
+let RiveElementComponent = null;
+try {
+    const riveModule = require("rive-react-native");
+    const Rive = riveModule.default;
+    const { Fit, Alignment } = riveModule;
+    RiveElementComponent = ({ element, riveStyle }) => {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)(Rive, { url: element.props.url, autoplay: (_a = element.props.autoplay) !== null && _a !== void 0 ? _a : true, fit: element.props.fit ? Fit[element.props.fit] : Fit.Contain, alignment: element.props.alignment ? Alignment[element.props.alignment] : Alignment.Center, artboardName: element.props.artboardName, stateMachineName: element.props.stateMachineName, style: riveStyle, onError: console.error }));
+    };
+}
+catch (_a) {
+    // rive-react-native not installed - will show fallback if Rive is used
+}
+const RiveElementRenderer = ({ element, ctx }) => {
+    var _a, _b;
+    const { theme } = ctx;
+    const wrapperStyle = {
+        width: (_a = element.props.width) !== null && _a !== void 0 ? _a : "100%",
+        height: (_b = element.props.height) !== null && _b !== void 0 ? _b : 200,
+        opacity: element.props.opacity,
+        margin: element.props.margin,
+        marginHorizontal: element.props.marginHorizontal,
+        marginVertical: element.props.marginVertical,
+        padding: element.props.padding,
+        paddingHorizontal: element.props.paddingHorizontal,
+        paddingVertical: element.props.paddingVertical,
+        borderWidth: element.props.borderWidth,
+        borderRadius: element.props.borderRadius,
+        borderColor: element.props.borderColor,
+        overflow: "hidden",
+    };
+    if (!RiveElementComponent) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [wrapperStyle, styles.mediaFallback, { backgroundColor: theme.colors.neutral.lowest }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.mediaFallbackText, (0, helpers_1.getTextStyle)(theme, "caption"), { color: theme.colors.text.tertiary }], children: "Install rive-react-native to render Rive animations." }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: wrapperStyle, children: (0, jsx_runtime_1.jsx)(RiveElementComponent, { element: element, riveStyle: styles.fill }) }));
+};
+exports.RiveElementRenderer = RiveElementRenderer;
+const styles = react_native_1.StyleSheet.create({
+    fill: {
+        width: "100%",
+        height: "100%",
+    },
+    mediaFallback: {
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    mediaFallbackText: {
+        textAlign: "center",
+        paddingHorizontal: 16,
+    },
+});
+//# sourceMappingURL=RiveElement.js.map

package/dist/UI/Pages/ComposableScreen/elements/RiveElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RiveElement.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/RiveElement.tsx"],"names":[],"mappings":";;;;AACA,6BAAwB;AACxB,+CAAsD;AACtD,iDAAkE;AAGlE,oDAAsD;AAWzC,QAAA,sBAAsB,GAAG,iCAAkB,CAAC,MAAM,CAAC;IAC9D,GAAG,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,uBAAuB,CAAC;IAC/C,QAAQ,EAAE,OAAC,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE;IAChC,GAAG,EAAE,OAAC,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE;IAC5G,SAAS,EAAE,OAAC,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,EAAE;IACtJ,YAAY,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACnC,gBAAgB,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;CACxC,CAAC,CAAC;AAIH,IAAI,oBAAoB,GAA8E,IAAI,CAAC;AAC3G,IAAI,CAAC;IACH,MAAM,UAAU,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC;IAChC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC;IACtC,oBAAoB,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAiD,EAAE,EAAE;;QAC/F,OAAO,CACL,uBAAC,IAAI,IACH,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,EACtB,QAAQ,EAAE,MAAA,OAAO,CAAC,KAAK,CAAC,QAAQ,mCAAI,IAAI,EACxC,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,EAC7D,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,EAC1F,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,YAAY,EACxC,gBAAgB,EAAE,OAAO,CAAC,KAAK,CAAC,gBAAgB,EAChD,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,OAAO,CAAC,KAAK,GACtB,CACH,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAAC,WAAM,CAAC;IACP,uEAAuE;AACzE,CAAC;AAOM,MAAM,mBAAmB,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,EAAS,EAAsB,EAAE;;IACjF,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC;IACtB,MAAM,YAAY,GAAG;QACnB,KAAK,EAAE,MAAA,OAAO,CAAC,KAAK,CAAC,KAAK,mCAAK,MAAuB;QACtD,MAAM,EAAE,MAAA,OAAO,CAAC,KAAK,CAAC,MAAM,mCAAI,GAAG;QACnC,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,OAAO;QAC9B,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM;QAC5B,gBAAgB,EAAE,OAAO,CAAC,KAAK,CAAC,gBAAgB;QAChD,cAAc,EAAE,OAAO,CAAC,KAAK,CAAC,cAAc;QAC5C,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,OAAO;QAC9B,iBAAiB,EAAE,OAAO,CAAC,KAAK,CAAC,iBAAiB;QAClD,eAAe,EAAE,OAAO,CAAC,KAAK,CAAC,eAAe;QAC9C,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW;QACtC,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,YAAY;QACxC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW;QACtC,QAAQ,EAAE,QAAiB;KAC5B,CAAC;IAEF,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC1B,OAAO,CACL,uBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,aAAa,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,YACjG,uBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,iBAAiB,EAAE,IAAA,sBAAY,EAAC,KAAK,EAAE,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,qEAEvG,GACF,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,uBAAC,mBAAI,IAAC,KAAK,EAAE,YAAY,YACvB,uBAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI,GAC7D,CACR,CAAC;AACJ,CAAC,CAAC;AAjCW,QAAA,mBAAmB,uBAiC9B;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,aAAa,EAAE;QACb,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,iBAAiB,EAAE;QACjB,SAAS,EAAE,QAAQ;QACnB,iBAAiB,EAAE,EAAE;KACtB;CACF,CAAC,CAAC"}

package/dist/UI/Pages/ComposableScreen/elements/StackElement.d.ts

@@ -0,0 +1,85 @@
+import React from "react";
+import { z } from "zod";
+import { UIElement } from "../types";
+import { RenderContext } from "./shared";
+export type StackElementProps = {
+    gap?: number;
+    padding?: number;
+    paddingHorizontal?: number;
+    paddingVertical?: number;
+    margin?: number;
+    marginHorizontal?: number;
+    marginVertical?: number;
+    flex?: number;
+    width?: number;
+    height?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
+    justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
+    backgroundColor?: string;
+    flexWrap?: "wrap" | "nowrap";
+    flexShrink?: number;
+    borderWidth?: number;
+    borderRadius?: number;
+    borderColor?: string;
+    overflow?: "hidden" | "visible" | "scroll";
+    opacity?: number;
+};
+export declare const StackElementPropsSchema: z.ZodObject<{
+    gap: z.ZodOptional<z.ZodNumber>;
+    padding: z.ZodOptional<z.ZodNumber>;
+    paddingHorizontal: z.ZodOptional<z.ZodNumber>;
+    paddingVertical: z.ZodOptional<z.ZodNumber>;
+    margin: z.ZodOptional<z.ZodNumber>;
+    marginHorizontal: z.ZodOptional<z.ZodNumber>;
+    marginVertical: z.ZodOptional<z.ZodNumber>;
+    flex: z.ZodOptional<z.ZodNumber>;
+    width: z.ZodOptional<z.ZodNumber>;
+    height: z.ZodOptional<z.ZodNumber>;
+    minWidth: z.ZodOptional<z.ZodNumber>;
+    maxWidth: z.ZodOptional<z.ZodNumber>;
+    minHeight: z.ZodOptional<z.ZodNumber>;
+    maxHeight: z.ZodOptional<z.ZodNumber>;
+    alignItems: z.ZodOptional<z.ZodEnum<{
+        center: "center";
+        "flex-start": "flex-start";
+        "flex-end": "flex-end";
+        stretch: "stretch";
+    }>>;
+    justifyContent: z.ZodOptional<z.ZodEnum<{
+        center: "center";
+        "flex-start": "flex-start";
+        "flex-end": "flex-end";
+        "space-between": "space-between";
+        "space-around": "space-around";
+    }>>;
+    backgroundColor: z.ZodOptional<z.ZodString>;
+    flexWrap: z.ZodOptional<z.ZodEnum<{
+        wrap: "wrap";
+        nowrap: "nowrap";
+    }>>;
+    flexShrink: z.ZodOptional<z.ZodNumber>;
+    borderWidth: z.ZodOptional<z.ZodNumber>;
+    borderRadius: z.ZodOptional<z.ZodNumber>;
+    borderColor: z.ZodOptional<z.ZodString>;
+    overflow: z.ZodOptional<z.ZodEnum<{
+        visible: "visible";
+        hidden: "hidden";
+        scroll: "scroll";
+    }>>;
+    opacity: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>;
+type StackUIElement = Extract<UIElement, {
+    type: "YStack" | "XStack";
+}>;
+type Props = {
+    element: StackUIElement;
+    ctx: RenderContext;
+    parentType?: "XStack" | "YStack";
+};
+export declare const StackElementComponent: ({ element, ctx, parentType }: Props) => React.ReactElement;
+export {};
+//# sourceMappingURL=StackElement.d.ts.map

package/dist/UI/Pages/ComposableScreen/elements/StackElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/StackElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IAC9D,cAAc,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,eAAe,GAAG,cAAc,CAAC;IACzF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyBlC,CAAC;AAEH,KAAK,cAAc,GAAG,OAAO,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAAE,CAAC,CAAC;AAExE,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,cAAc,CAAC;IACxB,GAAG,EAAE,aAAa,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,8BAA8B,KAAK,KAAG,KAAK,CAAC,YAkCjF,CAAC"}

package/dist/UI/Pages/ComposableScreen/elements/StackElement.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackElementComponent = exports.StackElementPropsSchema = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const zod_1 = require("zod");
+const react_native_1 = require("react-native");
+exports.StackElementPropsSchema = zod_1.z.object({
+    gap: zod_1.z.number().optional(),
+    padding: zod_1.z.number().optional(),
+    paddingHorizontal: zod_1.z.number().optional(),
+    paddingVertical: zod_1.z.number().optional(),
+    margin: zod_1.z.number().optional(),
+    marginHorizontal: zod_1.z.number().optional(),
+    marginVertical: zod_1.z.number().optional(),
+    flex: zod_1.z.number().optional(),
+    width: zod_1.z.number().optional(),
+    height: zod_1.z.number().optional(),
+    minWidth: zod_1.z.number().optional(),
+    maxWidth: zod_1.z.number().optional(),
+    minHeight: zod_1.z.number().optional(),
+    maxHeight: zod_1.z.number().optional(),
+    alignItems: zod_1.z.enum(["flex-start", "center", "flex-end", "stretch"]).optional(),
+    justifyContent: zod_1.z.enum(["flex-start", "center", "flex-end", "space-between", "space-around"]).optional(),
+    backgroundColor: zod_1.z.string().optional(),
+    flexWrap: zod_1.z.enum(["wrap", "nowrap"]).optional(),
+    flexShrink: zod_1.z.number().optional(),
+    borderWidth: zod_1.z.number().optional(),
+    borderRadius: zod_1.z.number().optional(),
+    borderColor: zod_1.z.string().optional(),
+    overflow: zod_1.z.enum(["hidden", "visible", "scroll"]).optional(),
+    opacity: zod_1.z.number().min(0).max(1).optional(),
+});
+const StackElementComponent = ({ element, ctx, parentType }) => {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+            flexDirection: element.type === "XStack" ? "row" : "column",
+            gap: element.props.gap,
+            padding: element.props.padding,
+            paddingHorizontal: element.props.paddingHorizontal,
+            paddingVertical: element.props.paddingVertical,
+            margin: element.props.margin,
+            marginHorizontal: element.props.marginHorizontal,
+            marginVertical: element.props.marginVertical,
+            flex: element.props.flex,
+            width: element.props.width,
+            height: element.props.height,
+            minWidth: element.props.minWidth,
+            maxWidth: element.props.maxWidth,
+            minHeight: element.props.minHeight,
+            maxHeight: element.props.maxHeight,
+            flexShrink: (_a = element.props.flexShrink) !== null && _a !== void 0 ? _a : (parentType === "XStack" ? 1 : undefined),
+            flexWrap: element.props.flexWrap,
+            alignItems: element.props.alignItems,
+            justifyContent: element.props.justifyContent,
+            backgroundColor: element.props.backgroundColor,
+            borderWidth: element.props.borderWidth,
+            borderRadius: element.props.borderRadius,
+            borderColor: element.props.borderColor,
+            overflow: element.props.overflow,
+            opacity: element.props.opacity,
+        }, children: ctx.renderChildren(element.children, element.type) }));
+};
+exports.StackElementComponent = StackElementComponent;
+//# sourceMappingURL=StackElement.js.map

package/dist/UI/Pages/ComposableScreen/elements/StackElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackElement.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/StackElement.tsx"],"names":[],"mappings":"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"}

package/dist/UI/Pages/ComposableScreen/elements/TextElement.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+import { z } from "zod";
+import { UIElement } from "../types";
+import { RenderContext } from "./shared";
+export type TextElementProps = {
+    content: string;
+    mode?: "plain" | "expression";
+    fontSize?: number;
+    fontWeight?: string;
+    fontFamily?: string;
+    color?: string;
+    textAlign?: "left" | "center" | "right";
+    letterSpacing?: number;
+    lineHeight?: number;
+    backgroundColor?: string;
+    padding?: number;
+    paddingHorizontal?: number;
+    paddingVertical?: number;
+    margin?: number;
+    marginHorizontal?: number;
+    marginVertical?: number;
+    borderWidth?: number;
+    borderRadius?: number;
+    borderColor?: string;
+    opacity?: number;
+};
+export declare const TextElementPropsSchema: z.ZodObject<{
+    content: z.ZodString;
+    mode: z.ZodOptional<z.ZodEnum<{
+        plain: "plain";
+        expression: "expression";
+    }>>;
+    fontSize: z.ZodOptional<z.ZodNumber>;
+    fontWeight: z.ZodOptional<z.ZodString>;
+    fontFamily: z.ZodOptional<z.ZodString>;
+    color: z.ZodOptional<z.ZodString>;
+    textAlign: z.ZodOptional<z.ZodEnum<{
+        left: "left";
+        right: "right";
+        center: "center";
+    }>>;
+    letterSpacing: z.ZodOptional<z.ZodNumber>;
+    lineHeight: z.ZodOptional<z.ZodNumber>;
+    backgroundColor: z.ZodOptional<z.ZodString>;
+    padding: z.ZodOptional<z.ZodNumber>;
+    paddingHorizontal: z.ZodOptional<z.ZodNumber>;
+    paddingVertical: z.ZodOptional<z.ZodNumber>;
+    margin: z.ZodOptional<z.ZodNumber>;
+    marginHorizontal: z.ZodOptional<z.ZodNumber>;
+    marginVertical: z.ZodOptional<z.ZodNumber>;
+    borderWidth: z.ZodOptional<z.ZodNumber>;
+    borderRadius: z.ZodOptional<z.ZodNumber>;
+    borderColor: z.ZodOptional<z.ZodString>;
+    opacity: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>;
+type TextUIElement = Extract<UIElement, {
+    type: "Text";
+}>;
+type Props = {
+    element: TextUIElement;
+    ctx: RenderContext;
+    parentType?: "XStack" | "YStack";
+};
+export declare const TextElementComponent: ({ element, ctx, parentType }: Props) => React.ReactElement;
+export {};
+//# sourceMappingURL=TextElement.d.ts.map

package/dist/UI/Pages/ComposableScreen/elements/TextElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/TextElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,aAAa,EAAe,MAAM,UAAU,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqBjC,CAAC;AAEH,KAAK,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE1D,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,aAAa,CAAC;IACvB,GAAG,EAAE,aAAa,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,8BAA8B,KAAK,KAAG,KAAK,CAAC,YAkChF,CAAC"}

package/dist/UI/Pages/ComposableScreen/elements/TextElement.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextElementComponent = exports.TextElementPropsSchema = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const zod_1 = require("zod");
+const react_native_1 = require("react-native");
+const shared_1 = require("./shared");
+exports.TextElementPropsSchema = zod_1.z.object({
+    content: zod_1.z.string(),
+    mode: zod_1.z.enum(["plain", "expression"]).optional(),
+    fontSize: zod_1.z.number().optional(),
+    fontWeight: zod_1.z.string().optional(),
+    fontFamily: zod_1.z.string().optional(),
+    color: zod_1.z.string().optional(),
+    textAlign: zod_1.z.enum(["left", "center", "right"]).optional(),
+    letterSpacing: zod_1.z.number().optional(),
+    lineHeight: zod_1.z.number().optional(),
+    backgroundColor: zod_1.z.string().optional(),
+    padding: zod_1.z.number().optional(),
+    paddingHorizontal: zod_1.z.number().optional(),
+    paddingVertical: zod_1.z.number().optional(),
+    margin: zod_1.z.number().optional(),
+    marginHorizontal: zod_1.z.number().optional(),
+    marginVertical: zod_1.z.number().optional(),
+    borderWidth: zod_1.z.number().optional(),
+    borderRadius: zod_1.z.number().optional(),
+    borderColor: zod_1.z.string().optional(),
+    opacity: zod_1.z.number().min(0).max(1).optional(),
+});
+const TextElementComponent = ({ element, ctx, parentType }) => {
+    var _a;
+    const { theme, variables } = ctx;
+    const content = element.props.mode === "expression"
+        ? (0, shared_1.interpolate)(element.props.content, variables)
+        : element.props.content;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+            fontSize: element.props.fontSize,
+            fontWeight: element.props.fontWeight,
+            fontFamily: element.props.fontFamily,
+            color: (_a = element.props.color) !== null && _a !== void 0 ? _a : theme.colors.text.primary,
+            textAlign: element.props.textAlign,
+            letterSpacing: element.props.letterSpacing,
+            lineHeight: element.props.lineHeight,
+            backgroundColor: element.props.backgroundColor,
+            padding: element.props.padding,
+            paddingHorizontal: element.props.paddingHorizontal,
+            paddingVertical: element.props.paddingVertical,
+            margin: element.props.margin,
+            marginHorizontal: element.props.marginHorizontal,
+            marginVertical: element.props.marginVertical,
+            borderWidth: element.props.borderWidth,
+            borderRadius: element.props.borderRadius,
+            borderColor: element.props.borderColor,
+            opacity: element.props.opacity,
+            flexShrink: parentType === "XStack" ? 1 : undefined,
+        }, children: content }));
+};
+exports.TextElementComponent = TextElementComponent;
+//# sourceMappingURL=TextElement.js.map

package/dist/UI/Pages/ComposableScreen/elements/TextElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextElement.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/TextElement.tsx"],"names":[],"mappings":";;;;AACA,6BAAwB;AACxB,+CAAoC;AAEpC,qCAAsD;AAyBzC,QAAA,sBAAsB,GAAG,OAAC,CAAC,MAAM,CAAC;IAC7C,OAAO,EAAE,OAAC,CAAC,MAAM,EAAE;IACnB,IAAI,EAAE,OAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,QAAQ,EAAE;IAChD,QAAQ,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC/B,UAAU,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACjC,UAAU,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACjC,KAAK,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC5B,SAAS,EAAE,OAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE;IACzD,aAAa,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACpC,UAAU,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACjC,eAAe,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACtC,OAAO,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC9B,iBAAiB,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACxC,eAAe,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACtC,MAAM,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC7B,gBAAgB,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACvC,cAAc,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACrC,WAAW,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAClC,YAAY,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACnC,WAAW,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAClC,OAAO,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;CAC7C,CAAC,CAAC;AAUI,MAAM,oBAAoB,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAS,EAAsB,EAAE;;IAC9F,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,GAAG,CAAC;IACjC,MAAM,OAAO,GACX,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,YAAY;QACjC,CAAC,CAAC,IAAA,oBAAW,EAAC,OAAO,CAAC,KAAK,CAAC,OAAO,EAAE,SAAS,CAAC;QAC/C,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC;IAE5B,OAAO,CACL,uBAAC,mBAAI,IACH,KAAK,EAAE;YACL,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ;YAChC,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,UAAiB;YAC3C,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU;YACpC,KAAK,EAAE,MAAA,OAAO,CAAC,KAAK,CAAC,KAAK,mCAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;YACvD,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,SAAS;YAClC,aAAa,EAAE,OAAO,CAAC,KAAK,CAAC,aAAa;YAC1C,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU;YACpC,eAAe,EAAE,OAAO,CAAC,KAAK,CAAC,eAAe;YAC9C,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,OAAO;YAC9B,iBAAiB,EAAE,OAAO,CAAC,KAAK,CAAC,iBAAiB;YAClD,eAAe,EAAE,OAAO,CAAC,KAAK,CAAC,eAAe;YAC9C,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM;YAC5B,gBAAgB,EAAE,OAAO,CAAC,KAAK,CAAC,gBAAgB;YAChD,cAAc,EAAE,OAAO,CAAC,KAAK,CAAC,cAAc;YAC5C,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW;YACtC,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,YAAY;YACxC,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW;YACtC,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,OAAO;YAC9B,UAAU,EAAE,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;SACpD,YAEA,OAAO,GACH,CACR,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,oBAAoB,wBAkC/B"}

package/dist/UI/Pages/ComposableScreen/elements/VideoElement.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { z } from "zod";
+import { BaseBoxProps } from "./BaseBoxProps";
+import { UIElement } from "../types";
+import { RenderContext } from "./shared";
+export type VideoElementProps = BaseBoxProps & {
+    url: string;
+    autoPlay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+};
+export declare const VideoElementPropsSchema: z.ZodObject<{
+    width: z.ZodOptional<z.ZodNumber>;
+    height: z.ZodOptional<z.ZodNumber>;
+    opacity: z.ZodOptional<z.ZodNumber>;
+    margin: z.ZodOptional<z.ZodNumber>;
+    marginHorizontal: z.ZodOptional<z.ZodNumber>;
+    marginVertical: z.ZodOptional<z.ZodNumber>;
+    padding: z.ZodOptional<z.ZodNumber>;
+    paddingHorizontal: z.ZodOptional<z.ZodNumber>;
+    paddingVertical: z.ZodOptional<z.ZodNumber>;
+    borderWidth: z.ZodOptional<z.ZodNumber>;
+    borderRadius: z.ZodOptional<z.ZodNumber>;
+    borderColor: z.ZodOptional<z.ZodString>;
+    url: z.ZodString;
+    autoPlay: z.ZodOptional<z.ZodBoolean>;
+    loop: z.ZodOptional<z.ZodBoolean>;
+    muted: z.ZodOptional<z.ZodBoolean>;
+    controls: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>;
+type VideoUIElement = Extract<UIElement, {
+    type: "Video";
+}>;
+type Props = {
+    element: VideoUIElement;
+    ctx: RenderContext;
+};
+export declare const VideoElementRenderer: ({ element, ctx }: Props) => React.ReactElement;
+export {};
+//# sourceMappingURL=VideoElement.d.ts.map

package/dist/UI/Pages/ComposableScreen/elements/VideoElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/VideoElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG;IAC7C,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;iBAMlC,CAAC;AAEH,KAAK,cAAc,GAAG,OAAO,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAmC5D,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,cAAc,CAAC;IACxB,GAAG,EAAE,aAAa,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,kBAAkB,KAAK,KAAG,KAAK,CAAC,YAiCpE,CAAC"}