@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Form/Form.Slider.js

@@ -1,17 +1,140 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import NativeSlider from "@expo/ui/community/slider";
 import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function Slider({ value, onChange, min = 0, max = 100, step = 1, label, formatValue, disabled = false, readOnly = false, accessibilityLabel, accessibilityHint, className, testID, }) {
-    const theme = useTheme();
-    const blocked = disabled || readOnly;
-    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label || formatValue ? (_jsxs(View, { className: "flex-row items-center justify-between", children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, formatValue ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: formatValue(value) })) : null] })) : null, _jsx(NativeSlider, { accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel ?? label ?? "Valor", disabled: blocked, maximumTrackTintColor: theme.container.primary, maximumValue: max, minimumTrackTintColor: theme.primary, minimumValue: min, onValueChange: (next) => {
-                    if (blocked)
-                        return;
-                    const snapped = step > 0 ? min + Math.round((next - min) / step) * step : next;
-                    onChange(Math.min(max, Math.max(min, snapped)));
-                }, step: step, style: { minHeight: 48 }, testID: testID ? `${testID}-slider` : undefined, thumbTintColor: theme.primary, value: value })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function Slider(t0) {
+  const $ = _c(30);
+  const {
+    value,
+    onChange,
+    min: t1,
+    max: t2,
+    step: t3,
+    label,
+    formatValue,
+    disabled: t4,
+    readOnly: t5,
+    accessibilityLabel,
+    accessibilityHint,
+    className,
+    testID
+  } = t0;
+  const min = t1 === undefined ? 0 : t1;
+  const max = t2 === undefined ? 100 : t2;
+  const step = t3 === undefined ? 1 : t3;
+  const disabled = t4 === undefined ? false : t4;
+  const readOnly = t5 === undefined ? false : t5;
+  const theme = useTheme();
+  const blocked = disabled || readOnly;
+  let t6;
+  if ($[0] !== className) {
+    t6 = cn("gap-1", className);
+    $[0] = className;
+    $[1] = t6;
+  } else {
+    t6 = $[1];
+  }
+  let t7;
+  if ($[2] !== formatValue || $[3] !== label || $[4] !== value) {
+    t7 = label || formatValue ? _jsxs(View, {
+      className: "flex-row items-center justify-between",
+      children: [label ? _jsx(Typography.Text, {
+        className: "text-text-primary",
+        semibold: true,
+        variant: "bodySmall",
+        children: label
+      }) : null, formatValue ? _jsx(Typography.Text, {
+        className: "text-text-secondary",
+        variant: "bodySmall",
+        children: formatValue(value)
+      }) : null]
+    }) : null;
+    $[2] = formatValue;
+    $[3] = label;
+    $[4] = value;
+    $[5] = t7;
+  } else {
+    t7 = $[5];
+  }
+  const t8 = accessibilityLabel ?? label ?? "Valor";
+  let t9;
+  if ($[6] !== blocked || $[7] !== max || $[8] !== min || $[9] !== onChange || $[10] !== step) {
+    t9 = next => {
+      if (blocked) {
+        return;
+      }
+      const snapped = step > 0 ? min + Math.round((next - min) / step) * step : next;
+      onChange(Math.min(max, Math.max(min, snapped)));
+    };
+    $[6] = blocked;
+    $[7] = max;
+    $[8] = min;
+    $[9] = onChange;
+    $[10] = step;
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  let t10;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = {
+      minHeight: 48
+    };
+    $[12] = t10;
+  } else {
+    t10 = $[12];
+  }
+  const t11 = testID ? `${testID}-slider` : undefined;
+  let t12;
+  if ($[13] !== accessibilityHint || $[14] !== blocked || $[15] !== max || $[16] !== min || $[17] !== step || $[18] !== t11 || $[19] !== t8 || $[20] !== t9 || $[21] !== theme.container.primary || $[22] !== theme.primary || $[23] !== value) {
+    t12 = _jsx(NativeSlider, {
+      accessibilityHint: accessibilityHint,
+      accessibilityLabel: t8,
+      disabled: blocked,
+      maximumTrackTintColor: theme.container.primary,
+      maximumValue: max,
+      minimumTrackTintColor: theme.primary,
+      minimumValue: min,
+      onValueChange: t9,
+      step: step,
+      style: t10,
+      testID: t11,
+      thumbTintColor: theme.primary,
+      value: value
+    });
+    $[13] = accessibilityHint;
+    $[14] = blocked;
+    $[15] = max;
+    $[16] = min;
+    $[17] = step;
+    $[18] = t11;
+    $[19] = t8;
+    $[20] = t9;
+    $[21] = theme.container.primary;
+    $[22] = theme.primary;
+    $[23] = value;
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  let t13;
+  if ($[25] !== t12 || $[26] !== t6 || $[27] !== t7 || $[28] !== testID) {
+    t13 = _jsxs(View, {
+      className: t6,
+      testID: testID,
+      children: [t7, t12]
+    });
+    $[25] = t12;
+    $[26] = t6;
+    $[27] = t7;
+    $[28] = testID;
+    $[29] = t13;
+  } else {
+    t13 = $[29];
+  }
+  return t13;
 }
 export default Slider;

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/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. */