@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/Feedback/index.d.ts

@@ -8,15 +8,18 @@ import Progress from "./Feedback.Progress.js";
 import ProgressCircle from "./Feedback.ProgressCircle.js";
 import Skeleton from "./Feedback.Skeleton.js";
 import SplashScreen from "./Feedback.Splash.js";
+import State from "./Feedback.State.js";
 export { ErrorBoundary } from "./ErrorBoundary.js";
 export type { ProgressProps } from "./Feedback.Progress.js";
 export type { ProgressCircleProps } from "./Feedback.ProgressCircle.js";
 export type { SkeletonProps } from "./Feedback.Skeleton.js";
 export type { SpinnerProps, SpinnerVariant, } from "./Feedback.Spinner.js";
+export type { FeedbackStateProps } from "./Feedback.State.js";
 export { Toast, type ToastAction, type ToastActionProps, type ToastCloseProps, type ToastContentProps, type ToastContextValue, type ToastCustomOptions, type ToastIconProps, type ToastOptions, type ToastPromiseMessages, ToastProvider, type ToastRenderProps, type ToastRootProps, type ToastTextProps, type ToastVariant, useToast, } from "./Toast.context.js";
 export { useReducedMotion } from "../utils/useReducedMotion.js";
 export declare const Feedback: {
     Loading: typeof Loading;
+    State: typeof State;
     Spinner: import("react").FC<import("./Feedback.Spinner.js").SpinnerProps>;
     Skeleton: typeof Skeleton;
     Progress: typeof Progress;

package/dist/Feedback/index.js

@@ -9,22 +9,24 @@ import ProgressCircle from "./Feedback.ProgressCircle.js";
 import Skeleton from "./Feedback.Skeleton.js";
 import Spinner from "./Feedback.Spinner.js";
 import SplashScreen from "./Feedback.Splash.js";
+import State from "./Feedback.State.js";
 import { Toast } from "./Toast.context.js";
 export { ErrorBoundary } from "./ErrorBoundary.js";
-export { Toast, ToastProvider, useToast, } from "./Toast.context.js";
+export { Toast, ToastProvider, useToast } from "./Toast.context.js";
 export { useReducedMotion } from "../utils/useReducedMotion.js";
 export const Feedback = {
-    Loading,
-    Spinner,
-    Skeleton,
-    Progress,
-    ProgressCircle,
-    Banner,
-    PermissionCard,
-    Empty,
-    EmptyState,
-    Error,
-    SplashScreen,
-    Toast,
+  Loading,
+  State,
+  Spinner,
+  Skeleton,
+  Progress,
+  ProgressCircle,
+  Banner,
+  PermissionCard,
+  Empty,
+  EmptyState,
+  Error,
+  SplashScreen,
+  Toast
 };
 export default Feedback;

package/dist/Form/Form.Checkbox.js

@@ -1,30 +1,220 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme/index.js";
+import { c as _c } from "react/compiler-runtime";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { Checkbox } from "expo-checkbox";
-import { Pressable, View } from "react-native";
-function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked = false, onCheck = () => { }, disabled = false, accessibilityLabel, className, testID, }) {
-    const handlePress = () => {
-        if (!disabled) {
-            onCheck(!isChecked);
-        }
+import { View } from "react-native";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function RowCheckBox(t0) {
+  const $ = _c(45);
+  const {
+    mainText,
+    subText,
+    rightText,
+    rightComponent,
+    leftComponent,
+    isChecked: t1,
+    onCheck: t2,
+    disabled: t3,
+    accessibilityLabel,
+    className,
+    testID
+  } = t0;
+  const isChecked = t1 === undefined ? false : t1;
+  const onCheck = t2 === undefined ? _temp : t2;
+  const disabled = t3 === undefined ? false : t3;
+  const theme = useTheme();
+  let t4;
+  if ($[0] !== disabled || $[1] !== isChecked || $[2] !== onCheck) {
+    t4 = () => {
+      if (!disabled) {
+        onCheck(!isChecked);
+      }
+    };
+    $[0] = disabled;
+    $[1] = isChecked;
+    $[2] = onCheck;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  const handlePress = t4;
+  let t5;
+  if ($[4] !== leftComponent || $[5] !== mainText || $[6] !== subText) {
+    t5 = () => {
+      if (leftComponent) {
+        return leftComponent;
+      }
+      return _jsxs(_Fragment, {
+        children: [mainText && _jsx(Typography.Text, {
+          semibold: true,
+          children: mainText
+        }), subText && _jsx(Typography.Text, {
+          className: "text-text-secondary",
+          variant: "bodySmall",
+          children: subText
+        })]
+      });
+    };
+    $[4] = leftComponent;
+    $[5] = mainText;
+    $[6] = subText;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  const renderLeftComponent = t5;
+  let t6;
+  if ($[8] !== rightComponent || $[9] !== rightText) {
+    t6 = () => {
+      if (rightComponent) {
+        return rightComponent;
+      }
+      if (rightText) {
+        return _jsx(Typography.Text, {
+          variant: "body",
+          children: rightText
+        });
+      }
+      return null;
     };
-    const renderLeftComponent = () => {
-        if (leftComponent) {
-            return leftComponent;
-        }
-        return (_jsxs(_Fragment, { children: [mainText && _jsx(Typography.Text, { semibold: true, children: mainText }), subText && (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: subText }))] }));
+    $[8] = rightComponent;
+    $[9] = rightText;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  const renderRightComponent = t6;
+  let t7;
+  if ($[11] !== accessibilityLabel || $[12] !== mainText || $[13] !== rightText || $[14] !== subText) {
+    t7 = accessibilityLabel ?? [mainText, subText, rightText].filter(Boolean).join(", ");
+    $[11] = accessibilityLabel;
+    $[12] = mainText;
+    $[13] = rightText;
+    $[14] = subText;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== disabled || $[17] !== isChecked) {
+    t8 = {
+      checked: isChecked,
+      disabled
     };
-    const renderRightComponent = () => {
-        if (rightComponent) {
-            return rightComponent;
-        }
-        if (rightText) {
-            return _jsx(Typography.Text, { variant: "body", children: rightText });
-        }
-        return null;
+    $[16] = disabled;
+    $[17] = isChecked;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  const t9 = disabled && "opacity-50";
+  let t10;
+  if ($[19] !== className || $[20] !== t9) {
+    t10 = cn("flex-row justify-between items-center", t9, className);
+    $[19] = className;
+    $[20] = t9;
+    $[21] = t10;
+  } else {
+    t10 = $[21];
+  }
+  let t11;
+  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = {
+      minHeight: 48,
+      minWidth: 48,
+      paddingVertical: 8
     };
-    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? [mainText, subText, rightText].filter(Boolean).join(", "), accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, className: cn("flex-row justify-between items-center", disabled && "opacity-50", className), disabled: disabled, onPress: handlePress, style: { minHeight: 48, minWidth: 48, paddingVertical: 8 }, testID: testID, children: [_jsx(View, { className: "flex-1 min-w-0", children: renderLeftComponent() }), _jsxs(View, { className: "flex-row items-center flex-shrink", children: [renderRightComponent(), _jsx(Checkbox, { accessibilityElementsHidden: true, accessible: false, className: "ml-2", color: theme.primary, disabled: disabled, importantForAccessibility: "no-hide-descendants", pointerEvents: "none", value: isChecked })] })] }));
+    $[22] = t11;
+  } else {
+    t11 = $[22];
+  }
+  let t12;
+  if ($[23] !== renderLeftComponent) {
+    t12 = renderLeftComponent();
+    $[23] = renderLeftComponent;
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  let t13;
+  if ($[25] !== t12) {
+    t13 = _jsx(View, {
+      className: "flex-1 min-w-0",
+      children: t12
+    });
+    $[25] = t12;
+    $[26] = t13;
+  } else {
+    t13 = $[26];
+  }
+  let t14;
+  if ($[27] !== renderRightComponent) {
+    t14 = renderRightComponent();
+    $[27] = renderRightComponent;
+    $[28] = t14;
+  } else {
+    t14 = $[28];
+  }
+  let t15;
+  if ($[29] !== disabled || $[30] !== isChecked || $[31] !== theme.primary) {
+    t15 = _jsx(Checkbox, {
+      accessibilityElementsHidden: true,
+      accessible: false,
+      className: "ml-2",
+      color: theme.primary,
+      disabled: disabled,
+      importantForAccessibility: "no-hide-descendants",
+      pointerEvents: "none",
+      value: isChecked
+    });
+    $[29] = disabled;
+    $[30] = isChecked;
+    $[31] = theme.primary;
+    $[32] = t15;
+  } else {
+    t15 = $[32];
+  }
+  let t16;
+  if ($[33] !== t14 || $[34] !== t15) {
+    t16 = _jsxs(View, {
+      className: "flex-row items-center flex-shrink",
+      children: [t14, t15]
+    });
+    $[33] = t14;
+    $[34] = t15;
+    $[35] = t16;
+  } else {
+    t16 = $[35];
+  }
+  let t17;
+  if ($[36] !== disabled || $[37] !== handlePress || $[38] !== t10 || $[39] !== t13 || $[40] !== t16 || $[41] !== t7 || $[42] !== t8 || $[43] !== testID) {
+    t17 = _jsxs(Pressable, {
+      accessibilityLabel: t7,
+      accessibilityRole: "checkbox",
+      accessibilityState: t8,
+      className: t10,
+      disabled: disabled,
+      hitSlop: 0,
+      onPress: handlePress,
+      style: t11,
+      testID: testID,
+      children: [t13, t16]
+    });
+    $[36] = disabled;
+    $[37] = handlePress;
+    $[38] = t10;
+    $[39] = t13;
+    $[40] = t16;
+    $[41] = t7;
+    $[42] = t8;
+    $[43] = testID;
+    $[44] = t17;
+  } else {
+    t17 = $[44];
+  }
+  return t17;
 }
+function _temp() {}
 export default RowCheckBox;

package/dist/Form/Form.ControlledCheckbox.d.ts

@@ -1,4 +1,4 @@
-import { Control, FieldValues, Path } from "react-hook-form";
+import type { Control, FieldValues, Path } from "react-hook-form";
 interface ControlledCheckboxProps<T extends FieldValues> {
     control: Control<T>;
     name: Path<T>;

package/dist/Form/Form.ControlledCheckbox.js

@@ -1,7 +1,49 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Checkbox from "./Form.Checkbox.js";
-import { Controller } from "react-hook-form";
-function ControlledCheckbox({ control, name, label, subText, }) {
-    return (_jsx(Controller, { control: control, name: name, render: ({ field: { onChange, value } }) => (_jsx(Checkbox, { isChecked: value || false, mainText: label, onCheck: onChange, subText: subText })) }));
+import Field from "./Form.Field.js";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function ControlledCheckbox(t0) {
+  const $ = _c(7);
+  const {
+    control,
+    name,
+    label,
+    subText
+  } = t0;
+  let t1;
+  if ($[0] !== label || $[1] !== subText) {
+    t1 = t2 => {
+      const {
+        value,
+        onChange
+      } = t2;
+      return _jsx(Checkbox, {
+        isChecked: Boolean(value),
+        mainText: label,
+        onCheck: onChange,
+        subText: subText
+      });
+    };
+    $[0] = label;
+    $[1] = subText;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== control || $[4] !== name || $[5] !== t1) {
+    t2 = _jsx(Field, {
+      control: control,
+      name: name,
+      render: t1
+    });
+    $[3] = control;
+    $[4] = name;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
 }
 export default ControlledCheckbox;

package/dist/Form/Form.ControlledDropdown.d.ts

@@ -1,5 +1,5 @@
 import { type SelectProps } from "./Form.Select.js";
-import { type Control, type FieldValues, type Path } from "react-hook-form";
+import type { Control, FieldValues, Path } from "react-hook-form";
 export type ControlledDropdownProps<T extends FieldValues> = Omit<SelectProps<string>, "value" | "onChange" | "onBlur" | "error"> & {
     control: Control<T>;
     name: Path<T>;

package/dist/Form/Form.ControlledDropdown.js

@@ -1,7 +1,65 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import Field from "./Form.Field.js";
 import Select from "./Form.Select.js";
-import { Controller } from "react-hook-form";
-function ControlledDropdown({ control, name, ...props }) {
-    return (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => (_jsx(Select, { ...props, disabled: props.disabled || field.disabled, error: fieldState.error?.message, onBlur: field.onBlur, onChange: field.onChange, value: typeof field.value === "string" ? field.value : null })) }));
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function ControlledDropdown(t0) {
+  const $ = _c(10);
+  let control;
+  let name;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      control,
+      name,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = control;
+    $[2] = name;
+    $[3] = props;
+  } else {
+    control = $[1];
+    name = $[2];
+    props = $[3];
+  }
+  let t1;
+  if ($[4] !== props) {
+    t1 = t2 => {
+      const {
+        value,
+        onChange,
+        onBlur,
+        error,
+        disabled
+      } = t2;
+      return _jsx(Select, {
+        ...props,
+        disabled: props.disabled || disabled,
+        error: error,
+        onBlur: onBlur,
+        onChange: onChange,
+        value: typeof value === "string" ? value : null
+      });
+    };
+    $[4] = props;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== control || $[7] !== name || $[8] !== t1) {
+    t2 = _jsx(Field, {
+      control: control,
+      name: name,
+      render: t1
+    });
+    $[6] = control;
+    $[7] = name;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  return t2;
 }
 export default ControlledDropdown;

package/dist/Form/Form.ControlledInput.d.ts

@@ -1,4 +1,5 @@
-import { Control, FieldValues, Path } from "react-hook-form";
+import { type FieldRules } from "./Form.Field.js";
+import type { Control, FieldValues, Path } from "react-hook-form";
 interface ControlledInputProps<T extends FieldValues> {
     control: Control<T>;
     name: Path<T>;
@@ -8,8 +9,8 @@ interface ControlledInputProps<T extends FieldValues> {
     autoCapitalize?: "none" | "sentences" | "words" | "characters";
     multiline?: boolean;
     numberOfLines?: number;
-    rules?: any;
+    rules?: FieldRules<T, Path<T>>;
     error?: string;
 }
-declare function ControlledInput<T extends FieldValues>({ control, name, label, placeholder, keyboardType, autoCapitalize, multiline, numberOfLines, rules, error, }: ControlledInputProps<T>): import("react").JSX.Element;
+declare function ControlledInput<T extends FieldValues>({ control, name, rules, error, ...input }: ControlledInputProps<T>): import("react").JSX.Element;
 export default ControlledInput;

package/dist/Form/Form.ControlledInput.js

@@ -1,7 +1,75 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import Field from "./Form.Field.js";
 import Input from "./Form.Input.js";
-import { Controller } from "react-hook-form";
-function ControlledInput({ control, name, label, placeholder, keyboardType, autoCapitalize, multiline, numberOfLines, rules, error, }) {
-    return (_jsx(Controller, { control: control, name: name, render: ({ field: { onChange, onBlur, value } }) => (_jsx(Input, { autoCapitalize: autoCapitalize, error: error, keyboardType: keyboardType, label: label, multiline: multiline, numberOfLines: numberOfLines, onBlur: onBlur, onChangeText: onChange, placeholder: placeholder, value: value })), rules: rules }));
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function ControlledInput(t0) {
+  const $ = _c(14);
+  let control;
+  let error;
+  let input;
+  let name;
+  let rules;
+  if ($[0] !== t0) {
+    ({
+      control,
+      name,
+      rules,
+      error,
+      ...input
+    } = t0);
+    $[0] = t0;
+    $[1] = control;
+    $[2] = error;
+    $[3] = input;
+    $[4] = name;
+    $[5] = rules;
+  } else {
+    control = $[1];
+    error = $[2];
+    input = $[3];
+    name = $[4];
+    rules = $[5];
+  }
+  let t1;
+  if ($[6] !== input) {
+    t1 = t2 => {
+      const {
+        value,
+        onChange,
+        onBlur,
+        error: message
+      } = t2;
+      return _jsx(Input, {
+        ...input,
+        error: message,
+        onBlur: onBlur,
+        onChangeText: onChange,
+        value: value
+      });
+    };
+    $[6] = input;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== control || $[9] !== error || $[10] !== name || $[11] !== rules || $[12] !== t1) {
+    t2 = _jsx(Field, {
+      control: control,
+      error: error,
+      name: name,
+      render: t1,
+      rules: rules
+    });
+    $[8] = control;
+    $[9] = error;
+    $[10] = name;
+    $[11] = rules;
+    $[12] = t1;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  return t2;
 }
 export default ControlledInput;

package/dist/Form/Form.ControlledMonetaryInput.d.ts

@@ -1,12 +1,15 @@
-import { Control, FieldValues, Path } from "react-hook-form";
+import { type FieldRules } from "./Form.Field.js";
+import type { Control, FieldValues, Path } from "react-hook-form";
 interface ControlledMonetaryInputProps<T extends FieldValues> {
     control: Control<T>;
     name: Path<T>;
+    /** Not drawn: MonetaryInput has no label. Kept for API compatibility. */
     label: string;
     placeholder?: string;
     currency?: string;
-    rules?: any;
+    rules?: FieldRules<T, Path<T>>;
+    /** Not drawn: MonetaryInput has no error slot. Kept for API compatibility. */
     error?: string;
 }
-declare function ControlledMonetaryInput<T extends FieldValues>({ control, name, label, placeholder, currency, rules, error, }: ControlledMonetaryInputProps<T>): import("react").JSX.Element;
+declare function ControlledMonetaryInput<T extends FieldValues>({ control, name, placeholder, currency, rules, }: ControlledMonetaryInputProps<T>): import("react").JSX.Element;
 export default ControlledMonetaryInput;

package/dist/Form/Form.ControlledMonetaryInput.js

@@ -1,7 +1,53 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import Field from "./Form.Field.js";
 import MonetaryInput from "./Form.MonetaryInput.js";
-import { Controller } from "react-hook-form";
-function ControlledMonetaryInput({ control, name, label, placeholder, currency = "CRC", rules, error, }) {
-    return (_jsx(Controller, { control: control, name: name, render: ({ field: { onChange, onBlur, value } }) => (_jsx(MonetaryInput, { amount: value, currencySymbol: currency, onChange: onChange, placeholder: placeholder })), rules: rules }));
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function ControlledMonetaryInput(t0) {
+  const $ = _c(8);
+  const {
+    control,
+    name,
+    placeholder,
+    currency: t1,
+    rules
+  } = t0;
+  const currency = t1 === undefined ? "CRC" : t1;
+  let t2;
+  if ($[0] !== currency || $[1] !== placeholder) {
+    t2 = t3 => {
+      const {
+        value,
+        onChange
+      } = t3;
+      return _jsx(MonetaryInput, {
+        amount: value,
+        currencySymbol: currency,
+        onChange: onChange,
+        placeholder: placeholder
+      });
+    };
+    $[0] = currency;
+    $[1] = placeholder;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== control || $[4] !== name || $[5] !== rules || $[6] !== t2) {
+    t3 = _jsx(Field, {
+      control: control,
+      name: name,
+      render: t2,
+      rules: rules
+    });
+    $[3] = control;
+    $[4] = name;
+    $[5] = rules;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
 }
 export default ControlledMonetaryInput;

package/dist/Form/Form.ControlledRadioButton.d.ts

@@ -1,9 +1,9 @@
-import { Control, FieldValues, Path } from "react-hook-form";
+import type { Control, FieldValues, Path, PathValue } from "react-hook-form";
 interface ControlledRadioButtonProps<T extends FieldValues> {
     control: Control<T>;
     name: Path<T>;
     label: string;
-    value: any;
+    value: PathValue<T, Path<T>>;
 }
 declare function ControlledRadioButton<T extends FieldValues>({ control, name, label, value, }: ControlledRadioButtonProps<T>): import("react").JSX.Element;
 export default ControlledRadioButton;

package/dist/Form/Form.ControlledRadioButton.js

@@ -1,7 +1,48 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import Field from "./Form.Field.js";
 import RadioButton from "./Form.RadioButton.js";
-import { Controller } from "react-hook-form";
-function ControlledRadioButton({ control, name, label, value, }) {
-    return (_jsx(Controller, { control: control, name: name, render: ({ field: { onChange, value: selectedValue } }) => (_jsx(RadioButton, { label: label, onPress: () => onChange(value), selected: selectedValue === value })) }));
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function ControlledRadioButton(t0) {
+  const $ = _c(7);
+  const {
+    control,
+    name,
+    label,
+    value
+  } = t0;
+  let t1;
+  if ($[0] !== label || $[1] !== value) {
+    t1 = t2 => {
+      const {
+        value: selected,
+        onChange
+      } = t2;
+      return _jsx(RadioButton, {
+        label: label,
+        onPress: () => onChange(value),
+        selected: selected === value
+      });
+    };
+    $[0] = label;
+    $[1] = value;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== control || $[4] !== name || $[5] !== t1) {
+    t2 = _jsx(Field, {
+      control: control,
+      name: name,
+      render: t1
+    });
+    $[3] = control;
+    $[4] = name;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
 }
 export default ControlledRadioButton;