@react-typed-forms/schemas-rn 1.0.0

package/lib/index.js

@@ -0,0 +1,979 @@
+import { createSelectConversion, defaultTailwindTheme } from '@react-typed-forms/schemas-html';
+import { TextInput, Pressable, View, Dimensions, Platform, StyleSheet, Text, useWindowDimensions } from 'react-native';
+import * as CheckboxPrimitive from '@rn-primitives/checkbox';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cssInterop } from 'nativewind';
+import { FontAwesome, FontAwesome5, FontAwesome6 } from '@expo/vector-icons';
+import { IconLibrary, createDataRenderer, FieldType, DataRenderType, rendererClass, deepMerge } from '@react-typed-forms/schemas';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import { jsx, jsxs } from 'nativewind/jsx-runtime';
+import { useComponentTracking, useControl, useComputed } from '@react-typed-forms/core';
+import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
+import { fromDate, getLocalTimeZone, toTime, toCalendarDate, toCalendarDateTime, now, parseTime, parseAbsolute, parseDate, DateFormatter } from '@internationalized/date';
+import RenderHtml from 'react-native-render-html';
+import * as SelectPrimitive from '@rn-primitives/select';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ScrollView } from 'react-native-gesture-handler';
+import { cva } from 'class-variance-authority';
+import * as Slot from '@rn-primitives/slot';
+import * as DialogPrimitive from '@rn-primitives/dialog';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+cssInterop(FontAwesome, {
+  className: {
+    target: "style",
+    nativeStyleToProp: {}
+  }
+});
+cssInterop(MaterialIcons, {
+  className: {
+    target: "style",
+    nativeStyleToProp: {}
+  }
+});
+function Icon({
+  name,
+  className = "!text-[16px] text-black-500",
+  iconLibrary
+}) {
+  var _effect = useComponentTracking();
+  try {
+    switch (iconLibrary) {
+      case IconLibrary.Material:
+        return jsx(MaterialIcons, {
+          name: name,
+          className: className
+        });
+      default:
+        return jsx(FontAwesome, {
+          name: name,
+          className: className
+        });
+    }
+  } finally {
+    _effect();
+  }
+}
+
+const _excluded$8 = ["className"];
+const RNCheckbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      className
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+  return jsx(CheckboxPrimitive.Root, _extends({
+    ref: ref,
+    className: cn("web:peer h-4 w-4 native:h-[20] native:w-[20] shrink-0 rounded-sm native:rounded border border-primary web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className)
+  }, props, {
+    children: jsx(CheckboxPrimitive.Indicator, {
+      className: cn("items-center justify-center h-full w-full"),
+      children: jsx(Icon, {
+        name: "check",
+        className: "text-primary-500"
+      })
+    })
+  }));
+});
+RNCheckbox.displayName = CheckboxPrimitive.Root.displayName;
+
+const _excluded$7 = ["className", "placeholderClassName"];
+const RNTextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      className,
+      placeholderClassName
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  const editable = !props.disabled;
+  const readonly = props.readOnly ? true : undefined;
+  return jsx(TextInput, _extends({
+    ref: ref
+  }, props, {
+    className: cn("web:flex h-10 native:h-[54px] web:w-full rounded-md border bg-background px-3 web:py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2", !editable && "opacity-50 web:cursor-not-allowed", className),
+    placeholderClassName: cn("text-muted-foreground", placeholderClassName),
+    editable: editable,
+    readOnly: readonly
+  }));
+});
+RNTextInput.displayName = "RNInput";
+
+const _excluded$6 = ["className", "checked", "onChange"];
+const RNRadioItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      className,
+      checked,
+      onChange
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  return jsx(Pressable, _extends({
+    ref: ref,
+    onPress: onChange,
+    className: cn("aspect-square h-4 w-4 native:h-5 native:w-5 rounded-full justify-center items-center border border-primary text-primary web:ring-offset-background web:focus:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2", props.disabled && "web:cursor-not-allowed opacity-50", className)
+  }, props, {
+    children: jsx(View, {
+      className: "flex items-center justify-center",
+      children: checked && jsx(View, {
+        className: "aspect-square h-[9px] w-[9px] native:h-[10] native:w-[10] bg-primary rounded-full"
+      })
+    })
+  }));
+});
+RNRadioItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+const _excluded$5 = ["control", "mode", "locale", "is24Hour", "className"];
+function createRNDateTimePickerRenderer(options = {}) {
+  return createDataRenderer(p => {
+    const mode = p.field.type == FieldType.DateTime ? "datetime" : p.field.type == FieldType.Time ? "time" : "date";
+    return jsx(RNDateTimePicker, _extends({}, p, {
+      control: p.control.as(),
+      mode: mode,
+      className: options.inputClass
+    }));
+  }, {
+    schemaType: [FieldType.Date, FieldType.DateTime, FieldType.Time],
+    renderType: DataRenderType.DateTime
+  });
+}
+function RNDateTimePicker(_ref) {
+  var _effect = useComponentTracking();
+  try {
+    let {
+        control,
+        mode,
+        locale = "en-AU",
+        is24Hour = true,
+        className
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    const disabled = control.disabled;
+    const {
+      maximumDate,
+      minimumDate
+    } = props;
+    const isVisible = useControl(false);
+    const innerPickerValue = getInnerPickerValue();
+    const formattedDate = getFormattedDate();
+    const handleConfirm = date => {
+      control.touched = true;
+      const zonedDateTime = fromDate(date, getLocalTimeZone());
+      try {
+        switch (mode) {
+          case "date":
+            control.value = toCalendarDate(zonedDateTime).toString();
+            break;
+          case "datetime":
+            control.value = zonedDateTime.toAbsoluteString();
+            break;
+          case "time":
+            control.value = toTime(zonedDateTime).toString();
+            break;
+        }
+      } catch (_) {}
+      hidePicker();
+    };
+    // Fix IOS propagating
+    function onPress() {
+      !disabled && (isVisible.value = true);
+    }
+    return jsxs(View, {
+      children: [jsxs(Pressable, {
+        className: "pointer-events-auto flex flex-row",
+        onPress: onPress,
+        children: [jsx(RNTextInput, {
+          className: cn(className, "flex-1"),
+          disabled: disabled,
+          readOnly: true,
+          value: formattedDate != null ? formattedDate : "",
+          placeholder: "dd/mm/yyyy",
+          onPress: onPress
+        }), jsx(View, {
+          className: "flex flex-row bg-[#F5F5F5] size-[54px] items-center justify-center border border-[#E7E7E8]",
+          children: jsx(FontAwesome5, {
+            name: "calendar-alt",
+            size: 20,
+            color: "#343534"
+          })
+        })]
+      }), jsx(DateTimePickerModal, {
+        date: innerPickerValue != null ? innerPickerValue : new Date(),
+        is24Hour: is24Hour,
+        disabled: disabled,
+        maximumDate: maximumDate,
+        minimumDate: minimumDate,
+        isVisible: isVisible.value,
+        mode: mode,
+        locale: locale,
+        onConfirm: handleConfirm,
+        onCancel: hidePicker,
+        onHide: hidePicker
+      })]
+    });
+    function getInnerPickerValue() {
+      const dateString = control.value;
+      if (!dateString) return null;
+      try {
+        switch (mode) {
+          case "date":
+            return parseDate(dateString).toDate(getLocalTimeZone());
+          case "datetime":
+            return parseAbsolute(dateString, getLocalTimeZone()).toDate();
+          case "time":
+            return toCalendarDateTime(now(getLocalTimeZone()), parseTime(dateString)).toDate(getLocalTimeZone());
+        }
+      } catch (_) {
+        return null;
+      }
+    }
+    function getFormattedDate() {
+      if (!innerPickerValue) return null;
+      let options = {};
+      try {
+        switch (mode) {
+          case "date":
+            options = {
+              day: "2-digit",
+              month: "2-digit",
+              year: "numeric",
+              timeZone: getLocalTimeZone()
+            };
+            break;
+          case "datetime":
+            options = {
+              day: "2-digit",
+              month: "2-digit",
+              year: "numeric",
+              hour: "2-digit",
+              minute: "2-digit",
+              hour12: false,
+              timeZone: getLocalTimeZone()
+            };
+            break;
+          case "time":
+            options = {
+              timeStyle: "short",
+              hour12: false,
+              timeZone: getLocalTimeZone()
+            };
+        }
+      } catch (_) {
+        options = {};
+      }
+      return new DateFormatter(locale, options).format(innerPickerValue);
+    }
+    function hidePicker() {
+      isVisible.value = false;
+    }
+  } finally {
+    _effect();
+  }
+}
+
+function RNHtmlRenderer({
+  className,
+  html
+}) {
+  var _effect = useComponentTracking();
+  try {
+    if (!html) return;
+    const source = {
+      html: html
+    };
+    return jsx(View, {
+      className: className,
+      children: jsx(RenderHtml, {
+        contentWidth: Dimensions.get("window").width,
+        source: source
+      })
+    });
+  } finally {
+    _effect();
+  }
+}
+
+const _excluded$4 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "portalHost"],
+  _excluded2$2 = ["className", "children"],
+  _excluded3$2 = ["className", "children", "position", "portalHost"],
+  _excluded4$2 = ["className"],
+  _excluded5 = ["className", "children"],
+  _excluded6 = ["className"];
+function createRNSelectRenderer(options = {}) {
+  return createDataRenderer((props, asArray) => {
+    var _props$options;
+    const renderOptions = props.definition.renderOptions;
+    return jsx(RNSelectRenderer, {
+      className: rendererClass(props.className, options.className),
+      state: props.control,
+      id: props.id,
+      readonly: props.readonly,
+      options: (_props$options = props.options) != null ? _props$options : [],
+      required: props.required,
+      emptyText: options.emptyText,
+      requiredText: options.requiredText,
+      convert: createSelectConversion(props.field.type),
+      portalHost: renderOptions.portalHost
+    });
+  }, {
+    options: true,
+    schemaType: [FieldType.String, FieldType.Int],
+    renderType: DataRenderType.Dropdown
+  });
+}
+function RNSelectRenderer(_ref) {
+  var _effect = useComponentTracking();
+  try {
+    let {
+        state,
+        options,
+        convert,
+        required,
+        emptyText = "N/A",
+        requiredText = "Please select",
+        portalHost
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    const insets = useSafeAreaInsets();
+    const contentInsets = {
+      top: insets.top,
+      bottom: Platform.select({
+        ios: insets.bottom,
+        android: insets.bottom + 24
+      }),
+      left: 12,
+      right: 12
+    };
+    const {
+      value,
+      disabled
+    } = state;
+    const optionStringMap = useMemo(() => Object.fromEntries(options.map(x => [convert(x.value), x.value])), [options]);
+    const optionGroups = useMemo(() => Array.from(new Set(options.filter(x => x.group).map(x => x.group))), [options]);
+    const selectedOption = useComputed(() => {
+      return options.filter(x => x.value === value).map(x => ({
+        value: convert(x.value).toString(),
+        label: x.name
+      })).at(0);
+    });
+    return jsxs(Select, _extends({}, props, {
+      disabled: disabled,
+      "aria-disabled": disabled,
+      defaultValue: {
+        value: value,
+        label: required ? requiredText : emptyText
+      },
+      onValueChange: o => {
+        if (!o) return;
+        state.value = optionStringMap[o.value];
+      },
+      value: selectedOption.value,
+      children: [jsx(SelectTrigger, {
+        className: "bg-white",
+        children: jsx(SelectValue, {
+          placeholder: required ? requiredText : emptyText
+        })
+      }), jsx(SelectContent, {
+        insets: contentInsets,
+        className: "bg-white w-[250px]",
+        portalHost: Platform.select({
+          ios: portalHost
+        }),
+        children: jsxs(ScrollView, {
+          className: "max-h-64",
+          children: [optionGroups.map(x => jsxs(SelectGroup, {
+            children: [jsx(SelectLabel, {
+              children: x
+            }), options.filter(o => o.group === x).map(renderOption)]
+          }, x)), options.filter(x => !x.group).map(renderOption)]
+        })
+      })]
+    }));
+    function renderOption(x, i) {
+      return jsx(SelectItem, {
+        value: convert(x.value).toString(),
+        label: x.name,
+        disabled: !!x.disabled,
+        children: x.name
+      }, i);
+    }
+  } finally {
+    _effect();
+  }
+}
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+      className,
+      children
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+  return jsxs(SelectPrimitive.Trigger, _extends({
+    ref: ref,
+    className: cn("flex flex-row h-10 native:h-12 items-center text-sm justify-between border border-[#E7E7E8] bg-background px-3 py-2 web:ring-offset-background text-muted-foreground web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 [&>span]:line-clamp-1", props.disabled && "web:cursor-not-allowed opacity-50", className)
+  }, props, {
+    children: [jsx(Pressable, {
+      children: children
+    }), jsx(Icon, {
+      name: "chevron-down",
+      className: "!text-[12px] text-foreground text-accent"
+    })]
+  }));
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectContent = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+      className,
+      children,
+      position = "popper",
+      portalHost
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$2);
+  const {
+    open
+  } = SelectPrimitive.useRootContext();
+  return jsx(SelectPrimitive.Portal, {
+    hostName: portalHost,
+    children: jsx(SelectPrimitive.Overlay, {
+      style: Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined,
+      children: jsx(Animated.View, {
+        className: "z-50",
+        entering: FadeIn,
+        exiting: FadeOut,
+        children: jsx(SelectPrimitive.Content, _extends({
+          ref: ref,
+          className: cn("relative z-50 max-h-96 min-w-[8rem] rounded-md border border-border bg-popover shadow-md shadow-foreground/10 py-2 px-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", open ? "web:zoom-in-95 web:animate-in web:fade-in-0" : "web:zoom-out-95 web:animate-out web:fade-out-0", className),
+          position: position
+        }, props, {
+          children: jsx(SelectPrimitive.Viewport, {
+            className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
+            children: children
+          })
+        }))
+      })
+    })
+  });
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+      className
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$2);
+  return jsx(SelectPrimitive.Label, _extends({
+    ref: ref,
+    className: cn("py-1.5 native:pb-2 pl-2 native:pl-2 pr-2 text-popover-foreground text-sm native:text-base font-semibold", className)
+  }, props));
+});
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+  let {
+      className
+    } = _ref5,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+  return jsxs(SelectPrimitive.Item, _extends({
+    ref: ref,
+    className: cn("relative web:group flex flex-row w-full web:cursor-default web:select-none items-center rounded-sm py-1.5 native:py-2 pl-8 native:pl-10 pr-2 web:hover:bg-accent/50 active:bg-accent web:outline-none web:focus:bg-accent", props.disabled && "web:pointer-events-none opacity-50", className)
+  }, props, {
+    children: [jsx(View, {
+      className: "absolute left-2 native:left-3.5 flex h-3.5 native:pt-px w-3.5 items-center justify-center",
+      children: jsx(SelectPrimitive.ItemIndicator, {
+        children: jsx(Icon, {
+          name: "check",
+          className: "text-[12px] text-popover-foreground"
+        })
+      })
+    }), jsx(SelectPrimitive.ItemText, {
+      className: "text-sm native:text-lg text-popover-foreground native:text-base web:group-focus:text-accent-foreground"
+    })]
+  }));
+});
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+      className
+    } = _ref6,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+  return jsx(SelectPrimitive.Separator, _extends({
+    ref: ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className)
+  }, props));
+});
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+const _excluded$3 = ["inline", "textClass", "children", "notWrapInText", "androidRippleColor", "nonTextContent", "onClick"],
+  _excluded2$1 = ["className", "html", "children", "textClass", "text", "style", "inline"],
+  _excluded3$1 = ["className", "html", "children", "textClass", "text", "style", "inline"],
+  _excluded4$1 = ["id", "type", "onChangeValue", "onChangeChecked", "checked", "value"];
+const reactNativeHtml = {
+  I: RNIcon,
+  B: RNSpan,
+  Button: RNButton$1,
+  Label: RNLabel,
+  Span: RNSpan,
+  H1: RNSpan,
+  Div: RNDiv,
+  Input: RNInput
+};
+const defaultRnTailwindTheme = deepMerge({
+  data: {
+    checkOptions: {
+      entryClass: "flex flex-row items-center gap-[8px]"
+    }
+  },
+  label: {
+    labelContainer: c => jsx(View, {
+      className: "flex flex-row gap-4 items-center",
+      children: c
+    })
+  },
+  array: {
+    removableClass: "flex flex-col gap-y-2"
+  },
+  action: {
+    buttonClass: "flex flex-row gap-2 bg-primary-500 rounded-lg p-3 web:hover:opacity-90 active:opacity-90",
+    textClass: "text-white"
+  },
+  adornment: {
+    accordion: {
+      className: "flex flex-row items-center gap-2 my-2 p-0"
+    },
+    helpText: {
+      iconName: "info-circle",
+      iconClass: "text-[12px]",
+      triggerContainerClass: "flex flex-row gap-2 items-baseline",
+      triggerLabelClass: "text-sm font-bold",
+      contentTextClass: "text-white font-semibold text-sm"
+    }
+  },
+  html: reactNativeHtml,
+  extraRenderers: options => {
+    var _options$data;
+    const renderers = [createRNSelectRenderer((_options$data = options.data) == null ? void 0 : _options$data.selectOptions)];
+    if (Platform.OS !== "web") {
+      renderers.push(createRNDateTimePickerRenderer(options.data));
+    }
+    return renderers;
+  }
+}, defaultTailwindTheme);
+function RNIcon({
+  iconName,
+  className,
+  iconLibrary
+}) {
+  var _effect = useComponentTracking();
+  try {
+    return iconName ? jsx(Icon, {
+      name: iconName,
+      className: className,
+      iconLibrary: iconLibrary
+    }) : undefined;
+  } finally {
+    _effect();
+  }
+}
+function RNSpan(props) {
+  var _effect2 = useComponentTracking();
+  try {
+    return jsx(Text, _extends({}, props));
+  } finally {
+    _effect2();
+  }
+}
+function RNButton$1(_ref) {
+  var _effect3 = useComponentTracking();
+  try {
+    let {
+        inline,
+        textClass,
+        children,
+        notWrapInText,
+        androidRippleColor,
+        nonTextContent,
+        onClick
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    if (inline) {
+      return jsx(Text, _extends({}, props, {
+        className: textClass,
+        onPress: onClick,
+        children: children
+      }));
+    }
+    return jsx(Pressable, _extends({}, props, {
+      onPress: () => {
+        onClick == null || onClick();
+      },
+      android_ripple: {
+        color: androidRippleColor
+      },
+      children: notWrapInText || nonTextContent ? children : jsx(Text, {
+        className: textClass,
+        children: children
+      })
+    }));
+  } finally {
+    _effect3();
+  }
+}
+function RNLabel(_ref2) {
+  var _effect4 = useComponentTracking();
+  try {
+    let {
+        className,
+        children,
+        textClass,
+        style
+      } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+    return jsx(View, _extends({
+      className: className,
+      style: style
+    }, props, {
+      children: jsx(Text, {
+        className: textClass,
+        children: children
+      })
+    }));
+  } finally {
+    _effect4();
+  }
+}
+function RNDiv(_ref3) {
+  var _effect5 = useComponentTracking();
+  try {
+    let {
+        className,
+        html,
+        children,
+        textClass,
+        text,
+        style,
+        inline
+      } = _ref3,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
+    if (html != null) {
+      return jsx(RNHtmlRenderer, _extends({}, props, {
+        html: html
+      }));
+    }
+    if (inline) {
+      return jsx(Text, {
+        style: style,
+        className: textClass,
+        children: text != null ? text : children
+      });
+    }
+    if (text != null) {
+      return jsx(View, _extends({
+        className: className,
+        style: style
+      }, props, {
+        children: jsx(Text, {
+          className: textClass,
+          children: text
+        })
+      }));
+    }
+    return jsx(View, _extends({
+      className: className,
+      style: style,
+      children: children
+    }, props));
+  } finally {
+    _effect5();
+  }
+}
+function RNInput(props) {
+  var _effect6 = useComponentTracking();
+  try {
+    const {
+        id,
+        type,
+        onChangeValue,
+        onChangeChecked,
+        checked,
+        value
+      } = props,
+      rest = _objectWithoutPropertiesLoose(props, _excluded4$1);
+    switch (type) {
+      case "radio":
+        return jsx(RNRadioItem, _extends({}, rest, {
+          checked: !!checked,
+          onChange: () => onChangeChecked == null ? void 0 : onChangeChecked(!checked)
+        }));
+      case "checkbox":
+        return jsx(RNCheckbox, _extends({}, rest, {
+          checked: !!checked,
+          onCheckedChange: e => onChangeChecked == null ? void 0 : onChangeChecked(!checked)
+        }), id);
+      default:
+        return jsx(RNTextInput, _extends({}, rest, {
+          value: typeof value == "number" ? value.toString() : value,
+          onChangeText: t => onChangeValue == null ? void 0 : onChangeValue(t)
+        }));
+    }
+  } finally {
+    _effect6();
+  }
+}
+
+const _excluded$2 = ["className", "asChild"];
+const TextClassContext = /*#__PURE__*/React.createContext(undefined);
+const RNText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      className,
+      asChild = false
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  const textClass = React.useContext(TextClassContext);
+  const Component = asChild ? Slot.Text : Text;
+  return jsx(Component, _extends({
+    className: cn("text-base text-foreground web:select-text", textClass, className),
+    ref: ref
+  }, props));
+});
+RNText.displayName = "RNText";
+
+const _excluded$1 = ["className", "variant", "size"];
+const buttonVariants = cva("group flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2", {
+  variants: {
+    variant: {
+      default: "bg-primary web:hover:opacity-90 active:opacity-90",
+      destructive: "bg-destructive web:hover:opacity-90 active:opacity-90",
+      outline: "border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+      secondary: "bg-secondary web:hover:opacity-80 active:opacity-80",
+      ghost: "web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+      link: "web:underline-offset-4 web:hover:underline web:focus:underline"
+    },
+    size: {
+      default: "h-10 px-4 py-2 native:h-12 native:px-5 native:py-3",
+      sm: "h-9 rounded-md px-3",
+      lg: "h-11 rounded-md px-8 native:h-14",
+      icon: "h-10 w-10"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+const buttonTextVariants = cva("web:whitespace-nowrap text-sm native:text-base font-medium text-foreground web:transition-colors", {
+  variants: {
+    variant: {
+      default: "text-primary-foreground",
+      destructive: "text-destructive-foreground",
+      outline: "group-active:text-accent-foreground",
+      secondary: "text-secondary-foreground group-active:text-secondary-foreground",
+      ghost: "group-active:text-accent-foreground",
+      link: "text-primary group-active:underline"
+    },
+    size: {
+      default: "",
+      sm: "",
+      lg: "native:text-lg",
+      icon: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+const RNButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      className,
+      variant,
+      size
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return jsx(TextClassContext.Provider, {
+    value: buttonTextVariants({
+      variant,
+      size,
+      className: "web:pointer-events-none"
+    }),
+    children: jsx(Pressable, _extends({
+      className: cn(props.disabled && "opacity-50 web:pointer-events-none", buttonVariants({
+        variant,
+        size,
+        className
+      })),
+      ref: ref,
+      role: "button"
+    }, props))
+  });
+});
+RNButton.displayName = "Button";
+
+const _excluded = ["className"],
+  _excluded2 = ["className", "children"],
+  _excluded3 = ["className", "children", "portalHost", "closeOnOutsidePress"],
+  _excluded4 = ["className"];
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlayWeb = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      className
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    open
+  } = DialogPrimitive.useRootContext();
+  return jsx(DialogPrimitive.Overlay, _extends({
+    className: cn("bg-black/80 flex justify-center items-center p-2 absolute top-0 right-0 bottom-0 left-0", open ? "web:animate-in web:fade-in-0" : "web:animate-out web:fade-out-0", className)
+  }, props, {
+    ref: ref
+  }));
+});
+DialogOverlayWeb.displayName = "DialogOverlayWeb";
+const DialogOverlayNative = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+      className,
+      children
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return jsx(DialogPrimitive.Overlay, _extends({
+    style: StyleSheet.absoluteFill,
+    className: cn("flex bg-black/80 justify-center items-center p-2", className)
+  }, props, {
+    ref: ref,
+    children: jsx(Animated.View, {
+      entering: FadeIn.duration(150),
+      exiting: FadeOut.duration(150),
+      children: jsx(Pressable, {
+        children: children
+      })
+    })
+  }));
+});
+DialogOverlayNative.displayName = "DialogOverlayNative";
+const DialogOverlay = Platform.select({
+  web: DialogOverlayWeb,
+  default: DialogOverlayNative
+});
+const DialogContent = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+      className,
+      children,
+      portalHost,
+      closeOnOutsidePress
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  const {
+    open
+  } = DialogPrimitive.useRootContext();
+  return jsx(DialogPortal, {
+    hostName: portalHost,
+    children: jsx(DialogOverlay, {
+      closeOnPress: closeOnOutsidePress,
+      children: jsx(DialogPrimitive.Content, _extends({
+        ref: ref,
+        className: cn("max-w-lg gap-4 border border-[#E7E7E8] web:cursor-default bg-white p-6 shadow-lg web:duration-200 rounded-lg", open ? "web:animate-in web:fade-in-0 web:zoom-in-95" : "web:animate-out web:fade-out-0 web:zoom-out-95", className)
+      }, props, {
+        children: children
+      }))
+    })
+  });
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogTitle = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+      className
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  return jsx(DialogPrimitive.Title, _extends({
+    ref: ref,
+    className: cn(className)
+  }, props));
+});
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+function RNDialog({
+  title,
+  trigger,
+  content,
+  footer,
+  open,
+  onOpenChange,
+  closeOnOutsidePress = false,
+  containerClass,
+  portalHost
+}) {
+  var _effect = useComponentTracking();
+  try {
+    const dialogOpen = open != null ? open : useControl(false);
+    const {
+      width
+    } = useWindowDimensions();
+    return jsxs(Dialog, {
+      open: dialogOpen.value,
+      onOpenChange: o => {
+        if (onOpenChange) {
+          onOpenChange(o);
+        } else {
+          dialogOpen.value = o;
+        }
+      },
+      children: [trigger && jsx(DialogTrigger, {
+        asChild: true,
+        children: trigger
+      }), jsxs(DialogContent, {
+        closeOnOutsidePress: closeOnOutsidePress,
+        className: cn("min-w-[200px] min-h-[200px]", containerClass),
+        style: {
+          maxWidth: width - 16
+        },
+        portalHost: Platform.select({
+          ios: portalHost
+        }),
+        children: [jsxs(View, {
+          className: "flex flex-row gap-[10px] justify-between items-start",
+          children: [jsx(DialogTitle, {
+            asChild: true,
+            className: "flex-1 flex-shrink title2",
+            children: title
+          }), jsx(DialogClose, {
+            className: "web:group rounded-sm web:ring-offset-background web:transition-opacity web:hover:opacity-100 web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 web:disabled:pointer-events-none",
+            children: jsx(FontAwesome6, {
+              name: "xmark-circle",
+              size: 24,
+              color: "#267151"
+            })
+          })]
+        }), content, footer]
+      })]
+    });
+  } finally {
+    _effect();
+  }
+}
+
+export { Icon, RNButton, RNCheckbox, RNDialog, RNHtmlRenderer, RNRadioItem, RNText, RNTextInput, TextClassContext, buttonTextVariants, buttonVariants, createRNDateTimePickerRenderer, createRNSelectRenderer, defaultRnTailwindTheme, reactNativeHtml };
+//# sourceMappingURL=index.js.map