@rocapine/react-native-onboarding-ui 1.8.1 → 1.10.0

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

@@ -0,0 +1,86 @@
+import React from "react";
+import { z } from "zod";
+import { BaseBoxProps } from "./BaseBoxProps";
+import type { UIElement } from "../types";
+import type { RenderContext } from "./shared";
+export type CheckboxGroupElementProps = BaseBoxProps & {
+    variableName?: string;
+    defaultValues?: string[];
+    gap?: number;
+    direction?: "vertical" | "horizontal";
+    items: Array<{
+        label: string;
+        value: string;
+    }>;
+    itemBackgroundColor?: string;
+    itemSelectedBackgroundColor?: string;
+    itemBorderColor?: string;
+    itemSelectedBorderColor?: string;
+    itemBorderRadius?: number;
+    itemBorderWidth?: number;
+    itemColor?: string;
+    itemSelectedColor?: string;
+    itemFontSize?: number;
+    itemFontWeight?: string;
+    itemFontFamily?: string;
+    itemPadding?: number;
+    itemPaddingHorizontal?: number;
+    itemPaddingVertical?: number;
+};
+export declare const CheckboxGroupElementPropsSchema: z.ZodObject<{
+    width: z.ZodOptional<z.ZodNumber>;
+    height: z.ZodOptional<z.ZodNumber>;
+    alignSelf: z.ZodOptional<z.ZodEnum<{
+        auto: "auto";
+        center: "center";
+        "flex-start": "flex-start";
+        "flex-end": "flex-end";
+        stretch: "stretch";
+        baseline: "baseline";
+    }>>;
+    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>;
+    variableName: z.ZodOptional<z.ZodString>;
+    defaultValues: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    gap: z.ZodOptional<z.ZodNumber>;
+    direction: z.ZodOptional<z.ZodEnum<{
+        horizontal: "horizontal";
+        vertical: "vertical";
+    }>>;
+    items: z.ZodArray<z.ZodObject<{
+        label: z.ZodString;
+        value: z.ZodString;
+    }, z.core.$strip>>;
+    itemBackgroundColor: z.ZodOptional<z.ZodString>;
+    itemSelectedBackgroundColor: z.ZodOptional<z.ZodString>;
+    itemBorderColor: z.ZodOptional<z.ZodString>;
+    itemSelectedBorderColor: z.ZodOptional<z.ZodString>;
+    itemBorderRadius: z.ZodOptional<z.ZodNumber>;
+    itemBorderWidth: z.ZodOptional<z.ZodNumber>;
+    itemColor: z.ZodOptional<z.ZodString>;
+    itemSelectedColor: z.ZodOptional<z.ZodString>;
+    itemFontSize: z.ZodOptional<z.ZodNumber>;
+    itemFontWeight: z.ZodOptional<z.ZodString>;
+    itemFontFamily: z.ZodOptional<z.ZodString>;
+    itemPadding: z.ZodOptional<z.ZodNumber>;
+    itemPaddingHorizontal: z.ZodOptional<z.ZodNumber>;
+    itemPaddingVertical: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>;
+type CheckboxGroupUIElement = Extract<UIElement, {
+    type: "CheckboxGroup";
+}>;
+type Props = {
+    element: CheckboxGroupUIElement;
+    ctx: RenderContext;
+};
+export declare const CheckboxGroupComponent: ({ element, ctx }: Props) => React.ReactElement;
+export {};
+//# sourceMappingURL=CheckboxGroupElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroupElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/CheckboxGroupElement.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,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,MAAM,yBAAyB,GAAG,YAAY,GAAG;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiC1C,CAAC;AAEH,KAAK,sBAAsB,GAAG,OAAO,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,CAAC,CAAC;AAE5E,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,sBAAsB,CAAC;IAChC,GAAG,EAAE,aAAa,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,kBAAkB,KAAK,KAAG,KAAK,CAAC,YAgItE,CAAC"}

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

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroupComponent = exports.CheckboxGroupElementPropsSchema = 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.CheckboxGroupElementPropsSchema = BaseBoxProps_1.BaseBoxPropsSchema.extend({
+    variableName: zod_1.z.string().optional(),
+    defaultValues: zod_1.z.array(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.defaultValues !== undefined) {
+        data.defaultValues.forEach((dv, i) => {
+            if (!unique.has(dv)) {
+                ctx.addIssue({ code: zod_1.z.ZodIssueCode.custom, message: `defaultValues entry "${dv}" must match one of the item values`, path: ["defaultValues", i] });
+            }
+        });
+    }
+});
+const CheckboxGroupComponent = ({ element, ctx }) => {
+    var _a, _b;
+    const { theme, variables, setVariable } = ctx;
+    // The variable stores a JSON-serialised string[] to stay compatible with the string-based variable system.
+    const rawValue = element.props.variableName ? (_a = variables[element.props.variableName]) === null || _a === void 0 ? void 0 : _a.value : undefined;
+    const selectedValues = (() => {
+        if (typeof rawValue !== "string")
+            return undefined;
+        try {
+            return JSON.parse(rawValue);
+        }
+        catch (_a) {
+            return undefined;
+        }
+    })();
+    (0, react_1.useEffect)(() => {
+        if (element.props.variableName && element.props.defaultValues && selectedValues === undefined) {
+            const defaultLabels = element.props.defaultValues.map((dv) => { var _a, _b; return (_b = (_a = element.props.items.find((i) => i.value === dv)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : dv; });
+            setVariable(element.props.variableName, {
+                value: JSON.stringify(element.props.defaultValues),
+                label: defaultLabels.join(", "),
+            });
+        }
+    }, [element.props.variableName, element.props.defaultValues, element.props.items, selectedValues]);
+    const handleToggle = (value, label) => {
+        if (!element.props.variableName)
+            return;
+        const current = selectedValues !== null && selectedValues !== void 0 ? selectedValues : [];
+        const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+        const nextLabels = next.map((v) => { var _a, _b; return (_b = (_a = element.props.items.find((i) => i.value === v)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : v; });
+        setVariable(element.props.variableName, {
+            value: JSON.stringify(next),
+            label: nextLabels.join(", "),
+        });
+    };
+    const isHorizontal = element.props.direction === "horizontal";
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "list", style: {
+            flexDirection: isHorizontal ? "row" : "column",
+            flexWrap: isHorizontal ? "wrap" : undefined,
+            alignSelf: element.props.alignSelf,
+            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 = (selectedValues !== null && selectedValues !== void 0 ? selectedValues : []).includes(item.value);
+            const bgColor = isSelected
+                ? ((_a = element.props.itemSelectedBackgroundColor) !== null && _a !== void 0 ? _a : (theme.colors.primary.startsWith("#") ? theme.colors.primary + "1A" : theme.colors.primary))
+                : ((_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: () => handleToggle(item.value, item.label), accessibilityRole: "checkbox", accessibilityState: { 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: 4,
+                            borderWidth: 2,
+                            borderColor: isSelected ? theme.colors.primary : theme.colors.neutral.medium,
+                            alignItems: "center",
+                            justifyContent: "center",
+                            backgroundColor: isSelected ? theme.colors.primary : "transparent",
+                        }, children: isSelected && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                                color: "#fff",
+                                fontSize: 12,
+                                fontWeight: "700",
+                                lineHeight: 14,
+                            }, children: "\u2713" })) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                            flexShrink: 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.CheckboxGroupComponent = CheckboxGroupComponent;
+//# sourceMappingURL=CheckboxGroupElement.js.map

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

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

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

@@ -0,0 +1,68 @@
+import React from "react";
+import { BaseBoxProps } from "./BaseBoxProps";
+import { z } from "zod";
+import type { UIElement } from "../types";
+import type { RenderContext } from "./shared";
+export type DatePickerElementProps = BaseBoxProps & {
+    variableName?: string;
+    defaultValue?: string;
+    minimumDate?: string;
+    maximumDate?: string;
+    mode?: "date" | "time" | "datetime";
+    display?: "default" | "spinner" | "calendar" | "clock" | "compact" | "inline";
+    textColor?: string;
+    accentColor?: string;
+    locale?: string;
+};
+export declare const DatePickerElementPropsSchema: z.ZodObject<{
+    width: z.ZodOptional<z.ZodNumber>;
+    height: z.ZodOptional<z.ZodNumber>;
+    alignSelf: z.ZodOptional<z.ZodEnum<{
+        auto: "auto";
+        center: "center";
+        "flex-start": "flex-start";
+        "flex-end": "flex-end";
+        stretch: "stretch";
+        baseline: "baseline";
+    }>>;
+    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>;
+    variableName: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    minimumDate: z.ZodOptional<z.ZodString>;
+    maximumDate: z.ZodOptional<z.ZodString>;
+    mode: z.ZodDefault<z.ZodOptional<z.ZodEnum<{
+        date: "date";
+        time: "time";
+        datetime: "datetime";
+    }>>>;
+    display: z.ZodOptional<z.ZodEnum<{
+        default: "default";
+        spinner: "spinner";
+        calendar: "calendar";
+        clock: "clock";
+        compact: "compact";
+        inline: "inline";
+    }>>;
+    textColor: z.ZodOptional<z.ZodString>;
+    accentColor: z.ZodOptional<z.ZodString>;
+    locale: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+type DatePickerUIElement = Extract<UIElement, {
+    type: "DatePicker";
+}>;
+type Props = {
+    element: DatePickerUIElement;
+    ctx: RenderContext;
+};
+export declare const DatePickerElementComponent: ({ element, ctx }: Props) => React.ReactElement;
+export {};
+//# sourceMappingURL=DatePickerElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/DatePickerElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAUvC,CAAC;AAEH,KAAK,mBAAmB,GAAG,OAAO,CAAC,SAAS,EAAE;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,CAAC,CAAC;AAEtE,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,mBAAmB,CAAC;IAC7B,GAAG,EAAE,aAAa,CAAC;CACpB,CAAC;AAYF,eAAO,MAAM,0BAA0B,GAAI,kBAAkB,KAAK,KAAG,KAAK,CAAC,YA0H1E,CAAC"}

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

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerElementComponent = exports.DatePickerElementPropsSchema = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const datetimepicker_1 = __importDefault(require("@react-native-community/datetimepicker"));
+const BaseBoxProps_1 = require("./BaseBoxProps");
+const zod_1 = require("zod");
+exports.DatePickerElementPropsSchema = BaseBoxProps_1.BaseBoxPropsSchema.extend({
+    variableName: zod_1.z.string().min(1).optional(),
+    defaultValue: zod_1.z.string().refine((s) => !isNaN(Date.parse(s)), { message: "Invalid date string" }).optional(),
+    minimumDate: zod_1.z.string().refine((s) => !isNaN(Date.parse(s)), { message: "Invalid date string" }).optional(),
+    maximumDate: zod_1.z.string().refine((s) => !isNaN(Date.parse(s)), { message: "Invalid date string" }).optional(),
+    mode: zod_1.z.enum(["date", "time", "datetime"]).optional().default("date"),
+    display: zod_1.z.enum(["default", "spinner", "calendar", "clock", "compact", "inline"]).optional(),
+    textColor: zod_1.z.string().optional(),
+    accentColor: zod_1.z.string().optional(),
+    locale: zod_1.z.string().optional(),
+});
+function formatDate(date, mode) {
+    if (mode === "time") {
+        return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    }
+    if (mode === "datetime") {
+        return date.toLocaleString([], { dateStyle: "medium", timeStyle: "short" });
+    }
+    return date.toLocaleDateString([], { dateStyle: "medium" });
+}
+const DatePickerElementComponent = ({ element, ctx }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { theme, variables, setVariable } = ctx;
+    const { props } = element;
+    const persistedValue = props.variableName ? (_a = variables[props.variableName]) === null || _a === void 0 ? void 0 : _a.value : undefined;
+    const initialDate = persistedValue
+        ? new Date(persistedValue)
+        : props.defaultValue
+            ? new Date(props.defaultValue)
+            : new Date();
+    const [date, setDate] = (0, react_1.useState)(initialDate);
+    const [isPickerVisible, setPickerVisible] = (0, react_1.useState)(false);
+    const mode = (_b = props.mode) !== null && _b !== void 0 ? _b : "date";
+    // Tracks which variableName has been seeded so re-renders don't clobber a
+    // persisted value that arrived after the first render.
+    const seededVariableRef = (0, react_1.useRef)(undefined);
+    (0, react_1.useEffect)(() => {
+        if (props.variableName &&
+            persistedValue === undefined &&
+            seededVariableRef.current !== props.variableName) {
+            seededVariableRef.current = props.variableName;
+            setVariable(props.variableName, {
+                value: initialDate.toISOString(),
+                label: formatDate(initialDate, mode),
+            });
+        }
+    }, [props.variableName, persistedValue, initialDate, mode, setVariable]);
+    const handleChange = (_event, selected) => {
+        if (!selected)
+            return;
+        setDate(selected);
+        if (props.variableName) {
+            setVariable(props.variableName, {
+                value: selected.toISOString(),
+                label: formatDate(selected, mode),
+            });
+        }
+    };
+    const containerStyle = {
+        alignSelf: props.alignSelf,
+        width: props.width,
+        height: props.height,
+        margin: props.margin,
+        marginHorizontal: props.marginHorizontal,
+        marginVertical: props.marginVertical,
+        padding: props.padding,
+        paddingHorizontal: props.paddingHorizontal,
+        paddingVertical: props.paddingVertical,
+        opacity: props.opacity,
+        borderWidth: props.borderWidth,
+        borderRadius: props.borderRadius,
+        borderColor: props.borderColor,
+        overflow: "hidden",
+    };
+    const pickerProps = {
+        value: date,
+        mode,
+        onChange: handleChange,
+        minimumDate: props.minimumDate ? new Date(props.minimumDate) : undefined,
+        maximumDate: props.maximumDate ? new Date(props.maximumDate) : undefined,
+        // Fall back to theme tokens when CMS props are not provided.
+        textColor: (_c = props.textColor) !== null && _c !== void 0 ? _c : theme.colors.text.primary,
+        accentColor: (_d = props.accentColor) !== null && _d !== void 0 ? _d : theme.colors.primary,
+        locale: props.locale,
+    };
+    if (react_native_1.Platform.OS === "android") {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: containerStyle, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => setPickerVisible(true), style: {
+                        flexDirection: "row",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        paddingVertical: 12,
+                        paddingHorizontal: 16,
+                        borderRadius: (_e = props.borderRadius) !== null && _e !== void 0 ? _e : 8,
+                        borderWidth: (_f = props.borderWidth) !== null && _f !== void 0 ? _f : 1,
+                        borderColor: (_g = props.borderColor) !== null && _g !== void 0 ? _g : theme.colors.neutral.low,
+                        backgroundColor: theme.colors.neutral.lowest,
+                    }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                                color: (_h = props.textColor) !== null && _h !== void 0 ? _h : theme.colors.text.primary,
+                                fontSize: theme.typography.textStyles.body.fontSize,
+                            }, children: formatDate(date, mode) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: theme.colors.text.tertiary, fontSize: 16 }, children: "\u203A" })] }), isPickerVisible && ((0, jsx_runtime_1.jsx)(datetimepicker_1.default, Object.assign({}, pickerProps, { display: ((_j = props.display) !== null && _j !== void 0 ? _j : "default"), onChange: (event, selected) => {
+                        setPickerVisible(false);
+                        handleChange(event, selected);
+                    } })))] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: containerStyle, children: (0, jsx_runtime_1.jsx)(datetimepicker_1.default, Object.assign({}, pickerProps, { display: ((_k = props.display) !== null && _k !== void 0 ? _k : "spinner") })) }));
+};
+exports.DatePickerElementComponent = DatePickerElementComponent;
+//# sourceMappingURL=DatePickerElement.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"renderElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/renderElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAYzC,eAAO,MAAM,aAAa,GACxB,SAAS,SAAS,EAClB,KAAK,aAAa,EAClB,aAAa,QAAQ,GAAG,QAAQ,KAC/B,KAAK,CAAC,SA0CR,CAAC"}
+{"version":3,"file":"renderElement.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/renderElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAczC,eAAO,MAAM,aAAa,GACxB,SAAS,SAAS,EAClB,KAAK,aAAa,EAClB,aAAa,QAAQ,GAAG,QAAQ,KAC/B,KAAK,CAAC,SAkDR,CAAC"}

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

@@ -11,7 +11,9 @@ const IconElement_1 = require("./IconElement");
 const VideoElement_1 = require("./VideoElement");
 const InputElement_1 = require("./InputElement");
 const RadioGroupElement_1 = require("./RadioGroupElement");
+const CheckboxGroupElement_1 = require("./CheckboxGroupElement");
 const ButtonElement_1 = require("./ButtonElement");
+const DatePickerElement_1 = require("./DatePickerElement");
 const renderElement = (element, ctx, parentType) => {
     if (element.type === "YStack" || element.type === "XStack") {
         return (0, jsx_runtime_1.jsx)(StackElement_1.StackElementComponent, { element: element, ctx: ctx, parentType: parentType }, element.id);
@@ -40,9 +42,15 @@ const renderElement = (element, ctx, parentType) => {
     if (element.type === "RadioGroup") {
         return (0, jsx_runtime_1.jsx)(RadioGroupElement_1.RadioGroupComponent, { element: element, ctx: ctx }, element.id);
     }
+    if (element.type === "CheckboxGroup") {
+        return (0, jsx_runtime_1.jsx)(CheckboxGroupElement_1.CheckboxGroupComponent, { element: element, ctx: ctx }, element.id);
+    }
     if (element.type === "Button") {
         return (0, jsx_runtime_1.jsx)(ButtonElement_1.ButtonElementComponent, { element: element, ctx: ctx }, element.id);
     }
+    if (element.type === "DatePicker") {
+        return (0, jsx_runtime_1.jsx)(DatePickerElement_1.DatePickerElementComponent, { element: element, ctx: ctx }, element.id);
+    }
     return null;
 };
 exports.renderElement = renderElement;

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

@@ -1 +1 @@
-{"version":3,"file":"renderElement.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/renderElement.tsx"],"names":[],"mappings":";;;;AAGA,iDAAuD;AACvD,+CAAqD;AACrD,iDAAuD;AACvD,mDAAyD;AACzD,+CAAoD;AACpD,+CAAqD;AACrD,iDAAsD;AACtD,iDAAuD;AACvD,2DAA0D;AAC1D,mDAAyD;AAElD,MAAM,aAAa,GAAG,CAC3B,OAAkB,EAClB,GAAkB,EAClB,UAAgC,EACf,EAAE;IACnB,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3D,OAAO,uBAAC,oCAAqB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,IAA9D,OAAO,CAAC,EAAE,CAAwD,CAAC;IACxG,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC5B,OAAO,uBAAC,kCAAoB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,IAA9D,OAAO,CAAC,EAAE,CAAwD,CAAC;IACvG,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,uBAAC,oCAAqB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAChF,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,uBAAC,sCAAsB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IACjF,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC5B,OAAO,uBAAC,iCAAmB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAC9E,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC5B,OAAO,uBAAC,kCAAoB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAC/E,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,uBAAC,mCAAoB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAC/E,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO,uBAAC,oCAAqB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAChF,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;QAClC,OAAO,uBAAC,uCAAmB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IAC9E,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,uBAAC,sCAAsB,IAAkB,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAtC,OAAO,CAAC,EAAE,CAAgC,CAAC;IACjF,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AA9CW,QAAA,aAAa,iBA8CxB"}
+{"version":3,"file":"renderElement.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/renderElement.tsx"],"names":[],"mappings":"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"}

package/dist/UI/Pages/ComposableScreen/types.d.ts

@@ -9,6 +9,8 @@ import { type VideoElementProps } from "./elements/VideoElement";
 import { type InputElementProps } from "./elements/InputElement";
 import { type ButtonElementProps } from "./elements/ButtonElement";
 import { type RadioGroupElementProps } from "./elements/RadioGroupElement";
+import { type CheckboxGroupElementProps } from "./elements/CheckboxGroupElement";
+import { type DatePickerElementProps } from "./elements/DatePickerElement";
 export type { BaseBoxProps } from "./elements/BaseBoxProps";
 export { BaseBoxPropsSchema } from "./elements/BaseBoxProps";
 export type { StackElementProps } from "./elements/StackElement";
@@ -21,6 +23,8 @@ export type { VideoElementProps } from "./elements/VideoElement";
 export type { InputElementProps } from "./elements/InputElement";
 export type { ButtonElementProps } from "./elements/ButtonElement";
 export type { RadioGroupElementProps } from "./elements/RadioGroupElement";
+export type { CheckboxGroupElementProps } from "./elements/CheckboxGroupElement";
+export type { DatePickerElementProps } from "./elements/DatePickerElement";
 export type UIElement = {
     id: string;
     name?: string;
@@ -72,6 +76,16 @@ export type UIElement = {
     name?: string;
     type: "RadioGroup";
     props: RadioGroupElementProps;
+} | {
+    id: string;
+    name?: string;
+    type: "CheckboxGroup";
+    props: CheckboxGroupElementProps;
+} | {
+    id: string;
+    name?: string;
+    type: "DatePicker";
+    props: DatePickerElementProps;
 };
 export declare const UIElementSchema: z.ZodType<UIElement>;
 export declare const ComposableScreenStepPayloadSchema: z.ZodObject<{

package/dist/UI/Pages/ComposableScreen/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}

package/dist/UI/Pages/ComposableScreen/types.js

@@ -13,6 +13,8 @@ const VideoElement_1 = require("./elements/VideoElement");
 const InputElement_1 = require("./elements/InputElement");
 const ButtonElement_1 = require("./elements/ButtonElement");
 const RadioGroupElement_1 = require("./elements/RadioGroupElement");
+const CheckboxGroupElement_1 = require("./elements/CheckboxGroupElement");
+const DatePickerElement_1 = require("./elements/DatePickerElement");
 var BaseBoxProps_1 = require("./elements/BaseBoxProps");
 Object.defineProperty(exports, "BaseBoxPropsSchema", { enumerable: true, get: function () { return BaseBoxProps_1.BaseBoxPropsSchema; } });
 exports.UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
@@ -77,6 +79,18 @@ exports.UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
         type: zod_1.z.literal("RadioGroup"),
         props: RadioGroupElement_1.RadioGroupElementPropsSchema,
     }),
+    zod_1.z.object({
+        id: zod_1.z.string(),
+        name: zod_1.z.string().optional(),
+        type: zod_1.z.literal("CheckboxGroup"),
+        props: CheckboxGroupElement_1.CheckboxGroupElementPropsSchema,
+    }),
+    zod_1.z.object({
+        id: zod_1.z.string(),
+        name: zod_1.z.string().optional(),
+        type: zod_1.z.literal("DatePicker"),
+        props: DatePickerElement_1.DatePickerElementPropsSchema,
+    }),
 ]));
 exports.ComposableScreenStepPayloadSchema = zod_1.z.object({
     elements: zod_1.z.array(exports.UIElementSchema),

package/dist/UI/Pages/ComposableScreen/types.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocapine/react-native-onboarding-ui",
-  "version": "1.8.1",
+  "version": "1.10.0",
   "description": "UI components and renderers for Rocapine Onboarding Studio - Built on top of the headless SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -28,6 +28,7 @@
     "zod": "^4.1.11"
   },
   "devDependencies": {
+    "@react-native-community/datetimepicker": "^8.2.0",
     "@react-native-picker/picker": "^2.11.2",
     "@shopify/react-native-skia": "2.4.18",
     "@types/react": "^19.0.0",
@@ -42,8 +43,9 @@
     "typescript": "^5.0.0"
   },
   "peerDependencies": {
+    "@react-native-community/datetimepicker": "*",
     "@react-native-picker/picker": "*",
-    "@rocapine/react-native-onboarding": "^1.8.0",
+    "@rocapine/react-native-onboarding": "^1.10.0",
     "@shopify/react-native-skia": ">=1.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "@types/react": "*",
@@ -57,6 +59,9 @@
     "expo-video": "*"
   },
   "peerDependenciesMeta": {
+    "@react-native-community/datetimepicker": {
+      "optional": true
+    },
     "@react-native-picker/picker": {
       "optional": true
     },

package/src/UI/Pages/ComposableScreen/elements/CheckboxGroupElement.tsx

@@ -0,0 +1,200 @@
+import React, { useEffect } from "react";
+import { z } from "zod";
+import { View, Text, TouchableOpacity } from "react-native";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+import type { UIElement } from "../types";
+import type { RenderContext } from "./shared";
+
+export type CheckboxGroupElementProps = BaseBoxProps & {
+  variableName?: string;
+  defaultValues?: string[];
+  gap?: number;
+  direction?: "vertical" | "horizontal";
+  items: Array<{ label: string; value: string }>;
+  itemBackgroundColor?: string;
+  itemSelectedBackgroundColor?: string;
+  itemBorderColor?: string;
+  itemSelectedBorderColor?: string;
+  itemBorderRadius?: number;
+  itemBorderWidth?: number;
+  itemColor?: string;
+  itemSelectedColor?: string;
+  itemFontSize?: number;
+  itemFontWeight?: string;
+  itemFontFamily?: string;
+  itemPadding?: number;
+  itemPaddingHorizontal?: number;
+  itemPaddingVertical?: number;
+};
+
+export const CheckboxGroupElementPropsSchema = BaseBoxPropsSchema.extend({
+  variableName: z.string().optional(),
+  defaultValues: z.array(z.string()).optional(),
+  gap: z.number().optional(),
+  direction: z.enum(["vertical", "horizontal"]).optional(),
+  items: z.array(z.object({ label: z.string().trim().min(1, "item label must not be empty"), value: z.string().trim().min(1, "item value must not be empty") })).min(1, "items must not be empty"),
+  itemBackgroundColor: z.string().optional(),
+  itemSelectedBackgroundColor: z.string().optional(),
+  itemBorderColor: z.string().optional(),
+  itemSelectedBorderColor: z.string().optional(),
+  itemBorderRadius: z.number().optional(),
+  itemBorderWidth: z.number().optional(),
+  itemColor: z.string().optional(),
+  itemSelectedColor: z.string().optional(),
+  itemFontSize: z.number().optional(),
+  itemFontWeight: z.string().optional(),
+  itemFontFamily: z.string().optional(),
+  itemPadding: z.number().optional(),
+  itemPaddingHorizontal: z.number().optional(),
+  itemPaddingVertical: 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: z.ZodIssueCode.custom, message: "item values must be unique", path: ["items"] });
+  }
+  if (data.defaultValues !== undefined) {
+    data.defaultValues.forEach((dv, i) => {
+      if (!unique.has(dv)) {
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: `defaultValues entry "${dv}" must match one of the item values`, path: ["defaultValues", i] });
+      }
+    });
+  }
+});
+
+type CheckboxGroupUIElement = Extract<UIElement, { type: "CheckboxGroup" }>;
+
+type Props = {
+  element: CheckboxGroupUIElement;
+  ctx: RenderContext;
+};
+
+export const CheckboxGroupComponent = ({ element, ctx }: Props): React.ReactElement => {
+  const { theme, variables, setVariable } = ctx;
+  // The variable stores a JSON-serialised string[] to stay compatible with the string-based variable system.
+  const rawValue = element.props.variableName ? variables[element.props.variableName]?.value : undefined;
+  const selectedValues: string[] | undefined = (() => {
+    if (typeof rawValue !== "string") return undefined;
+    try { return JSON.parse(rawValue) as string[]; } catch { return undefined; }
+  })();
+
+  useEffect(() => {
+    if (element.props.variableName && element.props.defaultValues && selectedValues === undefined) {
+      const defaultLabels = element.props.defaultValues.map((dv) => element.props.items.find((i) => i.value === dv)?.label ?? dv);
+      setVariable(element.props.variableName, {
+        value: JSON.stringify(element.props.defaultValues),
+        label: defaultLabels.join(", "),
+      });
+    }
+  }, [element.props.variableName, element.props.defaultValues, element.props.items, selectedValues]);
+
+  const handleToggle = (value: string, label: string) => {
+    if (!element.props.variableName) return;
+    const current: string[] = selectedValues ?? [];
+    const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+    const nextLabels = next.map((v) => element.props.items.find((i) => i.value === v)?.label ?? v);
+    setVariable(element.props.variableName, {
+      value: JSON.stringify(next),
+      label: nextLabels.join(", "),
+    });
+  };
+
+  const isHorizontal = element.props.direction === "horizontal";
+
+  return (
+    <View
+      accessibilityRole="list"
+      style={{
+        flexDirection: isHorizontal ? "row" : "column",
+        flexWrap: isHorizontal ? "wrap" : undefined,
+        alignSelf: element.props.alignSelf,
+        gap: element.props.gap ?? 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,
+      }}
+    >
+      {element.props.items.map((item) => {
+        const isSelected = (selectedValues ?? []).includes(item.value);
+        const bgColor = isSelected
+          ? (element.props.itemSelectedBackgroundColor ?? (theme.colors.primary.startsWith("#") ? theme.colors.primary + "1A" : theme.colors.primary))
+          : (element.props.itemBackgroundColor ?? "transparent");
+        const textColor = isSelected
+          ? (element.props.itemSelectedColor ?? theme.colors.primary)
+          : (element.props.itemColor ?? theme.colors.text.primary);
+        const borderColor = isSelected
+          ? (element.props.itemSelectedBorderColor ?? theme.colors.primary)
+          : (element.props.itemBorderColor ?? theme.colors.neutral.low);
+
+        return (
+          <TouchableOpacity
+            key={item.value}
+            activeOpacity={0.7}
+            onPress={() => handleToggle(item.value, item.label)}
+            accessibilityRole="checkbox"
+            accessibilityState={{ checked: isSelected }}
+            accessibilityLabel={item.label}
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 12,
+              backgroundColor: bgColor,
+              borderRadius: element.props.itemBorderRadius ?? 8,
+              borderWidth: element.props.itemBorderWidth ?? 1,
+              borderColor: borderColor,
+              padding: element.props.itemPadding ?? (element.props.itemPaddingHorizontal === undefined && element.props.itemPaddingVertical === undefined ? 12 : undefined),
+              paddingHorizontal: element.props.itemPaddingHorizontal,
+              paddingVertical: element.props.itemPaddingVertical,
+            }}
+          >
+            <View
+              style={{
+                width: 20,
+                height: 20,
+                borderRadius: 4,
+                borderWidth: 2,
+                borderColor: isSelected ? theme.colors.primary : theme.colors.neutral.medium,
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: isSelected ? theme.colors.primary : "transparent",
+              }}
+            >
+              {isSelected && (
+                <Text
+                  style={{
+                    color: "#fff",
+                    fontSize: 12,
+                    fontWeight: "700",
+                    lineHeight: 14,
+                  }}
+                >
+                  ✓
+                </Text>
+              )}
+            </View>
+            <Text
+              style={{
+                flexShrink: 1,
+                color: textColor,
+                fontSize: element.props.itemFontSize ?? theme.typography.textStyles.body.fontSize,
+                fontWeight: (element.props.itemFontWeight as any) ?? theme.typography.textStyles.body.fontWeight,
+                fontFamily: element.props.itemFontFamily,
+              }}
+            >
+              {item.label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};

package/src/UI/Pages/ComposableScreen/elements/DatePickerElement.tsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Pressable, Text, View, Platform } from "react-native";
+import DateTimePicker, { DateTimePickerEvent } from "@react-native-community/datetimepicker";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+import { z } from "zod";
+import type { UIElement } from "../types";
+import type { RenderContext } from "./shared";
+
+export type DatePickerElementProps = BaseBoxProps & {
+  variableName?: string;
+  defaultValue?: string;
+  minimumDate?: string;
+  maximumDate?: string;
+  mode?: "date" | "time" | "datetime";
+  display?: "default" | "spinner" | "calendar" | "clock" | "compact" | "inline";
+  textColor?: string;
+  accentColor?: string;
+  locale?: string;
+};
+
+export const DatePickerElementPropsSchema = BaseBoxPropsSchema.extend({
+  variableName: z.string().min(1).optional(),
+  defaultValue: z.string().refine((s) => !isNaN(Date.parse(s)), { message: "Invalid date string" }).optional(),
+  minimumDate: z.string().refine((s) => !isNaN(Date.parse(s)), { message: "Invalid date string" }).optional(),
+  maximumDate: z.string().refine((s) => !isNaN(Date.parse(s)), { message: "Invalid date string" }).optional(),
+  mode: z.enum(["date", "time", "datetime"]).optional().default("date"),
+  display: z.enum(["default", "spinner", "calendar", "clock", "compact", "inline"]).optional(),
+  textColor: z.string().optional(),
+  accentColor: z.string().optional(),
+  locale: z.string().optional(),
+});
+
+type DatePickerUIElement = Extract<UIElement, { type: "DatePicker" }>;
+
+type Props = {
+  element: DatePickerUIElement;
+  ctx: RenderContext;
+};
+
+function formatDate(date: Date, mode: "date" | "time" | "datetime"): string {
+  if (mode === "time") {
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  }
+  if (mode === "datetime") {
+    return date.toLocaleString([], { dateStyle: "medium", timeStyle: "short" });
+  }
+  return date.toLocaleDateString([], { dateStyle: "medium" });
+}
+
+export const DatePickerElementComponent = ({ element, ctx }: Props): React.ReactElement => {
+  const { theme, variables, setVariable } = ctx;
+  const { props } = element;
+
+  const persistedValue = props.variableName ? variables[props.variableName]?.value : undefined;
+  const initialDate = persistedValue
+    ? new Date(persistedValue)
+    : props.defaultValue
+    ? new Date(props.defaultValue)
+    : new Date();
+
+  const [date, setDate] = useState<Date>(initialDate);
+  const [isPickerVisible, setPickerVisible] = useState(false);
+  const mode = props.mode ?? "date";
+
+  // Tracks which variableName has been seeded so re-renders don't clobber a
+  // persisted value that arrived after the first render.
+  const seededVariableRef = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (
+      props.variableName &&
+      persistedValue === undefined &&
+      seededVariableRef.current !== props.variableName
+    ) {
+      seededVariableRef.current = props.variableName;
+      setVariable(props.variableName, {
+        value: initialDate.toISOString(),
+        label: formatDate(initialDate, mode),
+      });
+    }
+  }, [props.variableName, persistedValue, initialDate, mode, setVariable]);
+
+  const handleChange = (_event: DateTimePickerEvent, selected?: Date) => {
+    if (!selected) return;
+    setDate(selected);
+    if (props.variableName) {
+      setVariable(props.variableName, {
+        value: selected.toISOString(),
+        label: formatDate(selected, mode),
+      });
+    }
+  };
+
+  const containerStyle = {
+    alignSelf: props.alignSelf,
+    width: props.width,
+    height: props.height,
+    margin: props.margin,
+    marginHorizontal: props.marginHorizontal,
+    marginVertical: props.marginVertical,
+    padding: props.padding,
+    paddingHorizontal: props.paddingHorizontal,
+    paddingVertical: props.paddingVertical,
+    opacity: props.opacity,
+    borderWidth: props.borderWidth,
+    borderRadius: props.borderRadius,
+    borderColor: props.borderColor,
+    overflow: "hidden" as const,
+  };
+
+  const pickerProps = {
+    value: date,
+    mode,
+    onChange: handleChange,
+    minimumDate: props.minimumDate ? new Date(props.minimumDate) : undefined,
+    maximumDate: props.maximumDate ? new Date(props.maximumDate) : undefined,
+    // Fall back to theme tokens when CMS props are not provided.
+    textColor: props.textColor ?? theme.colors.text.primary,
+    accentColor: props.accentColor ?? theme.colors.primary,
+    locale: props.locale,
+  };
+
+  if (Platform.OS === "android") {
+    return (
+      <View style={containerStyle}>
+        <Pressable
+          onPress={() => setPickerVisible(true)}
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            paddingVertical: 12,
+            paddingHorizontal: 16,
+            borderRadius: props.borderRadius ?? 8,
+            borderWidth: props.borderWidth ?? 1,
+            borderColor: props.borderColor ?? theme.colors.neutral.low,
+            backgroundColor: theme.colors.neutral.lowest,
+          }}
+        >
+          <Text
+            style={{
+              color: props.textColor ?? theme.colors.text.primary,
+              fontSize: theme.typography.textStyles.body.fontSize,
+            }}
+          >
+            {formatDate(date, mode)}
+          </Text>
+          <Text style={{ color: theme.colors.text.tertiary, fontSize: 16 }}>›</Text>
+        </Pressable>
+        {isPickerVisible && (
+          <DateTimePicker
+            {...pickerProps}
+            display={(props.display ?? "default") as any}
+            onChange={(event, selected) => {
+              setPickerVisible(false);
+              handleChange(event, selected);
+            }}
+          />
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View style={containerStyle}>
+      <DateTimePicker
+        {...pickerProps}
+        display={(props.display ?? "spinner") as any}
+      />
+    </View>
+  );
+};

package/src/UI/Pages/ComposableScreen/elements/renderElement.tsx

@@ -10,7 +10,9 @@ import { IconElementComponent } from "./IconElement";
 import { VideoElementRenderer } from "./VideoElement";
 import { InputElementComponent } from "./InputElement";
 import { RadioGroupComponent } from "./RadioGroupElement";
+import { CheckboxGroupComponent } from "./CheckboxGroupElement";
 import { ButtonElementComponent } from "./ButtonElement";
+import { DatePickerElementComponent } from "./DatePickerElement";
 
 export const renderElement = (
   element: UIElement,
@@ -53,9 +55,17 @@ export const renderElement = (
     return <RadioGroupComponent key={element.id} element={element} ctx={ctx} />;
   }
 
+  if (element.type === "CheckboxGroup") {
+    return <CheckboxGroupComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
   if (element.type === "Button") {
     return <ButtonElementComponent key={element.id} element={element} ctx={ctx} />;
   }
 
+  if (element.type === "DatePicker") {
+    return <DatePickerElementComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
   return null;
 };

package/src/UI/Pages/ComposableScreen/types.ts

@@ -10,6 +10,8 @@ import { type VideoElementProps, VideoElementPropsSchema } from "./elements/Vide
 import { type InputElementProps, InputElementPropsSchema } from "./elements/InputElement";
 import { type ButtonElementProps, ButtonElementPropsSchema } from "./elements/ButtonElement";
 import { type RadioGroupElementProps, RadioGroupElementPropsSchema } from "./elements/RadioGroupElement";
+import { type CheckboxGroupElementProps, CheckboxGroupElementPropsSchema } from "./elements/CheckboxGroupElement";
+import { type DatePickerElementProps, DatePickerElementPropsSchema } from "./elements/DatePickerElement";
 
 export type { BaseBoxProps } from "./elements/BaseBoxProps";
 export { BaseBoxPropsSchema } from "./elements/BaseBoxProps";
@@ -23,6 +25,8 @@ export type { VideoElementProps } from "./elements/VideoElement";
 export type { InputElementProps } from "./elements/InputElement";
 export type { ButtonElementProps } from "./elements/ButtonElement";
 export type { RadioGroupElementProps } from "./elements/RadioGroupElement";
+export type { CheckboxGroupElementProps } from "./elements/CheckboxGroupElement";
+export type { DatePickerElementProps } from "./elements/DatePickerElement";
 
 // UIElement union — must live here (not in elements/) to avoid circular deps
 // because the Stack variant's children: UIElement[] references itself.
@@ -87,6 +91,18 @@ export type UIElement =
       name?: string;
       type: "RadioGroup";
       props: RadioGroupElementProps;
+    }
+  | {
+      id: string;
+      name?: string;
+      type: "CheckboxGroup";
+      props: CheckboxGroupElementProps;
+    }
+  | {
+      id: string;
+      name?: string;
+      type: "DatePicker";
+      props: DatePickerElementProps;
     };
 
 export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
@@ -152,6 +168,18 @@ export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
       type: z.literal("RadioGroup"),
       props: RadioGroupElementPropsSchema,
     }),
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      type: z.literal("CheckboxGroup"),
+      props: CheckboxGroupElementPropsSchema,
+    }),
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      type: z.literal("DatePicker"),
+      props: DatePickerElementPropsSchema,
+    }),
   ])
 );