@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Form/Form.Switch.js

@@ -1,10 +1,105 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { Switch as RNSwitch, View } from "react-native";
-function Switch({ value, onValueChange, label, disabled = false, className, testID, }) {
-    const theme = useTheme();
-    return (_jsxs(View, { className: cn("flex-row items-center justify-between gap-3", className), children: [label ? (_jsx(Typography.Text, { className: cn("flex-1 text-text-primary", disabled && "text-text-disabled"), children: label })) : null, _jsx(RNSwitch, { accessibilityLabel: label, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, disabled: disabled, ios_backgroundColor: theme.bg.muted, onValueChange: onValueChange, testID: testID, thumbColor: theme.bg.card, trackColor: { false: theme.bg.muted, true: theme.primary }, value: value })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function Switch(t0) {
+  const $ = _c(25);
+  const {
+    value,
+    onValueChange,
+    label,
+    disabled: t1,
+    className,
+    testID
+  } = t0;
+  const disabled = t1 === undefined ? false : t1;
+  const theme = useTheme();
+  let t2;
+  if ($[0] !== className) {
+    t2 = cn("flex-row items-center justify-between gap-3", className);
+    $[0] = className;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== disabled || $[3] !== label) {
+    t3 = label ? _jsx(Typography.Text, {
+      className: cn("flex-1 text-text-primary", disabled && "text-text-disabled"),
+      children: label
+    }) : null;
+    $[2] = disabled;
+    $[3] = label;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== disabled || $[6] !== value) {
+    t4 = {
+      checked: value,
+      disabled
+    };
+    $[5] = disabled;
+    $[6] = value;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== theme.bg.muted || $[9] !== theme.primary) {
+    t5 = {
+      false: theme.bg.muted,
+      true: theme.primary
+    };
+    $[8] = theme.bg.muted;
+    $[9] = theme.primary;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== disabled || $[12] !== label || $[13] !== onValueChange || $[14] !== t4 || $[15] !== t5 || $[16] !== testID || $[17] !== theme.bg.card || $[18] !== theme.bg.muted || $[19] !== value) {
+    t6 = _jsx(RNSwitch, {
+      accessibilityLabel: label,
+      accessibilityRole: "switch",
+      accessibilityState: t4,
+      disabled: disabled,
+      ios_backgroundColor: theme.bg.muted,
+      onValueChange: onValueChange,
+      testID: testID,
+      thumbColor: theme.bg.card,
+      trackColor: t5,
+      value: value
+    });
+    $[11] = disabled;
+    $[12] = label;
+    $[13] = onValueChange;
+    $[14] = t4;
+    $[15] = t5;
+    $[16] = testID;
+    $[17] = theme.bg.card;
+    $[18] = theme.bg.muted;
+    $[19] = value;
+    $[20] = t6;
+  } else {
+    t6 = $[20];
+  }
+  let t7;
+  if ($[21] !== t2 || $[22] !== t3 || $[23] !== t6) {
+    t7 = _jsxs(View, {
+      className: t2,
+      children: [t3, t6]
+    });
+    $[21] = t2;
+    $[22] = t3;
+    $[23] = t6;
+    $[24] = t7;
+  } else {
+    t7 = $[24];
+  }
+  return t7;
 }
 export default Switch;

package/dist/Form/choice-row.d.ts

@@ -0,0 +1,15 @@
+export interface ChoiceRowProps {
+    label: string;
+    /** Secondary line, e.g. a client's document number. */
+    description?: string;
+    selected: boolean;
+    onPress: () => void;
+    disabled?: boolean;
+    look?: "card" | "list";
+    testID?: string;
+}
+/**
+ * The single-choice row of the DS: the same radio mark, 48-point target, wrapping label and
+ * `radio` semantics on Android and iOS, whether it lists two options or two thousand.
+ */
+export declare function ChoiceRow({ label, description, selected, onPress, disabled, look, testID, }: ChoiceRowProps): import("react").JSX.Element;

package/dist/Form/choice-row.js

@@ -0,0 +1,236 @@
+import { c as _c } from "react/compiler-runtime";
+import Pressable from "../primitives/Pressable.js";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+const choice = tv({
+  slots: {
+    row: "flex-row items-center gap-3",
+    mark: "w-[18px] h-[18px] rounded-full border-2 items-center justify-center",
+    dot: "w-[9px] h-[9px] rounded-full bg-primary"
+  },
+  variants: {
+    look: {
+      // Few options, each a bordered card (RadioButton, Select).
+      card: {
+        row: "rounded-lg border px-3 bg-bg-card"
+      },
+      // Long or virtualized lists (PickerField, EditValue).
+      list: {
+        row: "border-b border-border-light py-3"
+      }
+    },
+    selected: {
+      true: {
+        mark: "border-primary"
+      },
+      false: {
+        mark: "border-border-default"
+      }
+    }
+  },
+  compoundVariants: [{
+    look: "card",
+    selected: true,
+    className: {
+      row: "border-primary bg-primary/10"
+    }
+  }, {
+    look: "card",
+    selected: false,
+    className: {
+      row: "border-border-default"
+    }
+  }],
+  defaultVariants: {
+    look: "card",
+    selected: false
+  }
+});
+/**
+ * The single-choice row of the DS: the same radio mark, 48-point target, wrapping label and
+ * `radio` semantics on Android and iOS, whether it lists two options or two thousand.
+ */
+export function ChoiceRow(t0) {
+  const $ = _c(49);
+  const {
+    label,
+    description,
+    selected,
+    onPress,
+    disabled: t1,
+    look: t2,
+    testID
+  } = t0;
+  const disabled = t1 === undefined ? false : t1;
+  const look = t2 === undefined ? "card" : t2;
+  let T0;
+  let T1;
+  let t10;
+  let t11;
+  let t12;
+  let t13;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== disabled || $[1] !== label || $[2] !== look || $[3] !== onPress || $[4] !== selected || $[5] !== testID) {
+    const styles = choice({
+      look,
+      selected
+    });
+    T1 = Pressable;
+    t5 = label;
+    t6 = "radio";
+    if ($[19] !== disabled || $[20] !== selected) {
+      t7 = {
+        checked: selected,
+        selected,
+        disabled
+      };
+      $[19] = disabled;
+      $[20] = selected;
+      $[21] = t7;
+    } else {
+      t7 = $[21];
+    }
+    t8 = styles.row();
+    t9 = disabled;
+    t10 = 0;
+    t11 = onPress;
+    if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+      t12 = {
+        minHeight: 48
+      };
+      $[22] = t12;
+    } else {
+      t12 = $[22];
+    }
+    t13 = testID;
+    T0 = View;
+    t3 = styles.mark();
+    t4 = selected ? _jsx(View, {
+      className: styles.dot()
+    }) : null;
+    $[0] = disabled;
+    $[1] = label;
+    $[2] = look;
+    $[3] = onPress;
+    $[4] = selected;
+    $[5] = testID;
+    $[6] = T0;
+    $[7] = T1;
+    $[8] = t10;
+    $[9] = t11;
+    $[10] = t12;
+    $[11] = t13;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+    $[15] = t6;
+    $[16] = t7;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    T0 = $[6];
+    T1 = $[7];
+    t10 = $[8];
+    t11 = $[9];
+    t12 = $[10];
+    t13 = $[11];
+    t3 = $[12];
+    t4 = $[13];
+    t5 = $[14];
+    t6 = $[15];
+    t7 = $[16];
+    t8 = $[17];
+    t9 = $[18];
+  }
+  let t14;
+  if ($[23] !== T0 || $[24] !== t3 || $[25] !== t4) {
+    t14 = _jsx(T0, {
+      className: t3,
+      children: t4
+    });
+    $[23] = T0;
+    $[24] = t3;
+    $[25] = t4;
+    $[26] = t14;
+  } else {
+    t14 = $[26];
+  }
+  const t15 = disabled ? "text-text-disabled" : "text-text-primary";
+  let t16;
+  if ($[27] !== label || $[28] !== selected || $[29] !== t15) {
+    t16 = _jsx(Typography.Text, {
+      className: t15,
+      semibold: selected,
+      children: label
+    });
+    $[27] = label;
+    $[28] = selected;
+    $[29] = t15;
+    $[30] = t16;
+  } else {
+    t16 = $[30];
+  }
+  let t17;
+  if ($[31] !== description) {
+    t17 = description ? _jsx(Typography.Text, {
+      className: "text-text-tertiary",
+      variant: "bodySmall",
+      children: description
+    }) : null;
+    $[31] = description;
+    $[32] = t17;
+  } else {
+    t17 = $[32];
+  }
+  let t18;
+  if ($[33] !== t16 || $[34] !== t17) {
+    t18 = _jsxs(View, {
+      className: "flex-1 py-2",
+      children: [t16, t17]
+    });
+    $[33] = t16;
+    $[34] = t17;
+    $[35] = t18;
+  } else {
+    t18 = $[35];
+  }
+  let t19;
+  if ($[36] !== T1 || $[37] !== t10 || $[38] !== t11 || $[39] !== t12 || $[40] !== t13 || $[41] !== t14 || $[42] !== t18 || $[43] !== t5 || $[44] !== t6 || $[45] !== t7 || $[46] !== t8 || $[47] !== t9) {
+    t19 = _jsxs(T1, {
+      accessibilityLabel: t5,
+      accessibilityRole: t6,
+      accessibilityState: t7,
+      className: t8,
+      disabled: t9,
+      hitSlop: t10,
+      onPress: t11,
+      style: t12,
+      testID: t13,
+      children: [t14, t18]
+    });
+    $[36] = T1;
+    $[37] = t10;
+    $[38] = t11;
+    $[39] = t12;
+    $[40] = t13;
+    $[41] = t14;
+    $[42] = t18;
+    $[43] = t5;
+    $[44] = t6;
+    $[45] = t7;
+    $[46] = t8;
+    $[47] = t9;
+    $[48] = t19;
+  } else {
+    t19 = $[48];
+  }
+  return t19;
+}

package/dist/Form/index.d.ts

@@ -7,11 +7,13 @@ import ControlledRadioButton from "./Form.ControlledRadioButton.js";
 import DatePicker from "./Form.DatePicker.js";
 import Dropdown from "./Form.Dropdown.js";
 import ErrorSummary from "./Form.ErrorSummary.js";
+import Field from "./Form.Field.js";
 import FractionalQuantityInput from "./Form.FractionalQuantityInput.js";
 import Input from "./Form.Input.js";
 import KeyboardForm from "./Form.KeyboardForm.js";
-import KeyboardToolbar from "./Form.KeyboardToolbar.js";
+import KeyboardToolbarHost from "./Form.KeyboardToolbarHost.js";
 import MonetaryInput from "./Form.MonetaryInput.js";
+import PickerField from "./Form.PickerField.js";
 import PinInput from "./Form.PinInput.js";
 import QuantitySelector from "./Form.QuantitySelector.js";
 import RadioButton from "./Form.RadioButton.js";
@@ -19,13 +21,11 @@ import Select from "./Form.Select.js";
 import Slider from "./Form.Slider.js";
 import Switch from "./Form.Switch.js";
 export declare const Form: {
-    TextInput: import("react").FC<import("./Form.TextInput.js").TextInputFProps>;
+    Field: typeof Field;
     Input: typeof Input;
-    InputField: import("react").FC<import("./Form.InputField.js").InputFieldProps>;
     KeyboardForm: typeof KeyboardForm;
-    KeyboardToolbar: typeof KeyboardToolbar;
+    KeyboardToolbarHost: typeof KeyboardToolbarHost;
     ErrorSummary: typeof ErrorSummary;
-    PasswordInput: import("react").FC<import("./Form.PasswordInput.js").PasswordFieldProps>;
     QuantitySelector: typeof QuantitySelector;
     FractionalQuantityInput: typeof FractionalQuantityInput;
     RadioButton: typeof RadioButton;
@@ -33,6 +33,7 @@ export declare const Form: {
     Switch: typeof Switch;
     Select: typeof Select;
     PinInput: typeof PinInput;
+    PickerField: typeof PickerField;
     Slider: typeof Slider;
     DatePicker: typeof DatePicker;
     Dropdown: typeof Dropdown;
@@ -47,8 +48,12 @@ export type { ControlledDropdownProps } from "./Form.ControlledDropdown.js";
 export type { DatePickerProps } from "./Form.DatePicker.js";
 export type { DropdownButtonProps, DropdownOption, } from "./Form.Dropdown.js";
 export type { ErrorSummaryItem, ErrorSummaryProps, } from "./Form.ErrorSummary.js";
+export type { FieldProps, FieldRenderProps, FieldRules, } from "./Form.Field.js";
+export type { FormInputProps } from "./Form.Input.js";
 export type { KeyboardFormProps } from "./Form.KeyboardForm.js";
-export type { KeyboardToolbarAction, KeyboardToolbarProps, } from "./Form.KeyboardToolbar.js";
+export type { KeyboardToolbarHostProps } from "./Form.KeyboardToolbarHost.js";
+export { useKeyboardToolbarInset } from "./Form.KeyboardToolbarHost.js";
+export type { PickerFieldProps, PickerOption, } from "./Form.PickerField.js";
 export type { SelectOption, SelectProps } from "./Form.Select.js";
 export type { SliderProps } from "./Form.Slider.js";
 export default Form;

package/dist/Form/index.js

@@ -7,43 +7,42 @@ import ControlledRadioButton from "./Form.ControlledRadioButton.js";
 import DatePicker from "./Form.DatePicker.js";
 import Dropdown from "./Form.Dropdown.js";
 import ErrorSummary from "./Form.ErrorSummary.js";
+import Field from "./Form.Field.js";
 import FractionalQuantityInput from "./Form.FractionalQuantityInput.js";
 import Input from "./Form.Input.js";
-import InputField from "./Form.InputField.js";
 import KeyboardForm from "./Form.KeyboardForm.js";
-import KeyboardToolbar from "./Form.KeyboardToolbar.js";
+import KeyboardToolbarHost from "./Form.KeyboardToolbarHost.js";
 import MonetaryInput from "./Form.MonetaryInput.js";
-import PasswordInput from "./Form.PasswordInput.js";
+import PickerField from "./Form.PickerField.js";
 import PinInput from "./Form.PinInput.js";
 import QuantitySelector from "./Form.QuantitySelector.js";
 import RadioButton from "./Form.RadioButton.js";
 import Select from "./Form.Select.js";
 import Slider from "./Form.Slider.js";
 import Switch from "./Form.Switch.js";
-import TextInput from "./Form.TextInput.js";
 export const Form = {
-    TextInput,
-    Input,
-    InputField,
-    KeyboardForm,
-    KeyboardToolbar,
-    ErrorSummary,
-    PasswordInput,
-    QuantitySelector,
-    FractionalQuantityInput,
-    RadioButton,
-    Checkbox,
-    Switch,
-    Select,
-    PinInput,
-    Slider,
-    DatePicker,
-    Dropdown,
-    MonetaryInput,
-    ControlledInput,
-    ControlledRadioButton,
-    ControlledCheckbox,
-    ControlledDropdown,
-    ControlledMonetaryInput,
+  Field,
+  Input,
+  KeyboardForm,
+  KeyboardToolbarHost,
+  ErrorSummary,
+  QuantitySelector,
+  FractionalQuantityInput,
+  RadioButton,
+  Checkbox,
+  Switch,
+  Select,
+  PinInput,
+  PickerField,
+  Slider,
+  DatePicker,
+  Dropdown,
+  MonetaryInput,
+  ControlledInput,
+  ControlledRadioButton,
+  ControlledCheckbox,
+  ControlledDropdown,
+  ControlledMonetaryInput
 };
+export { useKeyboardToolbarInset } from "./Form.KeyboardToolbarHost.js";
 export default Form;

package/dist/Form/input-text.d.ts

@@ -0,0 +1,7 @@
+import type { TextStyle } from "react-native";
+/**
+ * What the user types in any DS field: the `body` face and size of the configured fonts.
+ * Without it a TextInput falls back to the system font. No line height: on iOS it pushes
+ * single-line text off center.
+ */
+export declare function inputTextStyle(): TextStyle;

package/dist/Form/input-text.js

@@ -0,0 +1,18 @@
+import { appliedTextStyle } from "../theme/typography.js";
+/**
+ * What the user types in any DS field: the `body` face and size of the configured fonts.
+ * Without it a TextInput falls back to the system font. No line height: on iOS it pushes
+ * single-line text off center.
+ */
+export function inputTextStyle() {
+  const {
+    fontFamily,
+    fontSize,
+    fontWeight
+  } = appliedTextStyle("body");
+  return {
+    fontFamily,
+    fontSize,
+    fontWeight
+  };
+}

package/dist/Navigation/Navigation.AppBar.d.ts

@@ -1,7 +1,6 @@
 import type { IconName } from "../Display/index.js";
-import { type GradientPreset } from "../Display/Display.GradientSurface.js";
+import { type GradientPoint, type GradientPreset } from "../Display/Display.GradientSurface.js";
 import { type PatternKind } from "../Display/Display.Pattern.js";
-import type { LinearGradientPoint } from "expo-linear-gradient";
 import type { ReactNode } from "react";
 export interface AppBarActionProps {
     /** Ionicon name. Optional when `label` is set (text-only CTA). */
@@ -85,9 +84,9 @@ export interface AppBarBackground {
     /** Custom color stops — overrides `surface`. Minimum 2 colors. */
     colors?: readonly [string, string, ...string[]];
     /** Gradient start point. Default: top-left `{ x: 0, y: 0 }`. */
-    start?: LinearGradientPoint;
+    start?: GradientPoint;
     /** Gradient end point. Default: bottom-right `{ x: 1, y: 1 }`. */
-    end?: LinearGradientPoint;
+    end?: GradientPoint;
     /** SVG texture overlay kind. */
     pattern?: PatternKind;
     /** Texture opacity (0–1). Default 0.18. */