@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Actions/Actions.FilterButton.js

@@ -1,43 +1,273 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
 import { cn, tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { ScrollView, TouchableOpacity, View } from "react-native";
-const filterButton = tv({
-    base: "rounded-lg items-center justify-center py-2 px-3 min-h-[36px]",
-    variants: {
-        active: {
-            true: "bg-primary border-0",
-            false: "bg-transparent border border-brand-primary",
-        },
-    },
-    defaultVariants: { active: false },
-});
-const filterText = tv({
-    base: "font-bold",
-    variants: {
-        active: {
-            true: "text-white",
-            false: "text-text-accent",
-        },
-    },
-    defaultVariants: { active: false },
+import { ScrollView, View } from "react-native";
+
+// The one filter chip of the DS: list headers, search, filter bars and the
+// trigger of a filter sheet all render this shape.
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+const filterChip = tv({
+  base: "flex-row items-center self-start gap-1.5 py-1.5 px-3.5 rounded-full",
+  variants: {
+    active: {
+      true: "bg-primary",
+      false: "bg-bg-muted"
+    }
+  },
+  defaultVariants: {
+    active: false
+  }
 });
-export const FilterButton = ({ title, active, onPress, variant = "default", disabled = false, className, testID, }) => {
-    const theme = useTheme();
-    if (variant === "mobile") {
-        return (_jsxs(Pressable, { accessibilityLabel: title, accessibilityRole: "button", accessibilityState: { selected: active, disabled }, activeOpacity: 1 - theme.state.press, className: cn("flex-row items-center self-start rounded-full px-3 py-2 gap-2 max-w-full", active ? "bg-container-primary" : "bg-bg-muted", className), disabled: disabled, onPress: onPress, style: {
-                minHeight: 48,
-                minWidth: 48,
-            }, testID: testID, children: [active ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: theme.container.onPrimary, name: "check", size: 18 }) })) : null, _jsx(Typography.Text, { className: cn("flex-shrink", active ? "text-container-on-primary" : "text-text-primary"), variant: "bodyLarge", children: title })] }));
+const filterChipText = tv({
+  variants: {
+    active: {
+      true: "text-text-on-primary",
+      false: "text-text-secondary"
     }
-    return (_jsx(TouchableOpacity, { accessibilityLabel: title, accessibilityRole: "button", accessibilityState: { selected: active, disabled }, activeOpacity: 0.8, className: filterButton({ active, className }), disabled: disabled, onPress: onPress, testID: testID, children: _jsx(Typography.Text, { className: filterText({ active }), variant: "buttonSmall", children: title }) }));
+  },
+  defaultVariants: {
+    active: false
+  }
+});
+
+/** The chip stays compact; the touch target grows to 48 points vertically. */
+const TOUCH_SLOP = {
+  top: 8,
+  bottom: 8,
+  left: 4,
+  right: 4
 };
-export function FilterButtonGroup({ children, layout = "row", className, testID, }) {
-    if (layout === "scroll") {
-        return (_jsx(ScrollView, { className: cn("py-1", className), contentContainerStyle: { gap: 8 }, horizontal: true, keyboardShouldPersistTaps: "handled", showsHorizontalScrollIndicator: false, testID: testID, children: children }));
+export function FilterChip(t0) {
+  const $ = _c(27);
+  const {
+    label,
+    active: t1,
+    onPress,
+    icon,
+    count,
+    disabled: t2,
+    accessibilityLabel,
+    className,
+    testID
+  } = t0;
+  const active = t1 === undefined ? false : t1;
+  const disabled = t2 === undefined ? false : t2;
+  const theme = useTheme();
+  const tint = active ? theme.text.onPrimary : theme.text.secondary;
+  let t3;
+  if ($[0] !== active) {
+    t3 = filterChipText({
+      active
+    });
+    $[0] = active;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const textClass = t3;
+  const t4 = accessibilityLabel ?? label;
+  let t5;
+  if ($[2] !== active || $[3] !== disabled) {
+    t5 = {
+      selected: active,
+      disabled
+    };
+    $[2] = active;
+    $[3] = disabled;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  let t6;
+  if ($[5] !== active || $[6] !== className) {
+    t6 = filterChip({
+      active,
+      className
+    });
+    $[5] = active;
+    $[6] = className;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] !== icon || $[9] !== tint) {
+    t7 = icon ? _jsx(View, {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: _jsx(Icon, {
+        color: tint,
+        name: icon,
+        size: 16
+      })
+    }) : null;
+    $[8] = icon;
+    $[9] = tint;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== label || $[12] !== textClass) {
+    t8 = _jsx(Typography.Text, {
+      className: textClass,
+      variant: "bodySmall",
+      children: label
+    });
+    $[11] = label;
+    $[12] = textClass;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  let t9;
+  if ($[14] !== count || $[15] !== textClass) {
+    t9 = count ? _jsx(Typography.Text, {
+      className: textClass,
+      variant: "bodySmall",
+      children: count
+    }) : null;
+    $[14] = count;
+    $[15] = textClass;
+    $[16] = t9;
+  } else {
+    t9 = $[16];
+  }
+  let t10;
+  if ($[17] !== disabled || $[18] !== onPress || $[19] !== t4 || $[20] !== t5 || $[21] !== t6 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9 || $[25] !== testID) {
+    t10 = _jsxs(Pressable, {
+      accessibilityLabel: t4,
+      accessibilityRole: "button",
+      accessibilityState: t5,
+      className: t6,
+      disabled: disabled,
+      hitSlop: TOUCH_SLOP,
+      onPress: onPress,
+      testID: testID,
+      children: [t7, t8, t9]
+    });
+    $[17] = disabled;
+    $[18] = onPress;
+    $[19] = t4;
+    $[20] = t5;
+    $[21] = t6;
+    $[22] = t7;
+    $[23] = t8;
+    $[24] = t9;
+    $[25] = testID;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  return t10;
+}
+/** A filter toggle. Same chip as `ListViewV2.Header.Filters.Chip` and `Search.Filters`. */
+export const FilterButton = t0 => {
+  const $ = _c(7);
+  const {
+    title,
+    active,
+    onPress,
+    disabled: t1,
+    className,
+    testID
+  } = t0;
+  const disabled = t1 === undefined ? false : t1;
+  let t2;
+  if ($[0] !== active || $[1] !== className || $[2] !== disabled || $[3] !== onPress || $[4] !== testID || $[5] !== title) {
+    t2 = _jsx(FilterChip, {
+      active: active,
+      className: className,
+      disabled: disabled,
+      label: title,
+      onPress: onPress,
+      testID: testID
+    });
+    $[0] = active;
+    $[1] = className;
+    $[2] = disabled;
+    $[3] = onPress;
+    $[4] = testID;
+    $[5] = title;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+};
+export function FilterButtonGroup(t0) {
+  const $ = _c(14);
+  const {
+    children,
+    layout: t1,
+    className,
+    testID
+  } = t0;
+  const layout = t1 === undefined ? "row" : t1;
+  if (layout === "scroll") {
+    let t2;
+    if ($[0] !== className) {
+      t2 = cn("py-1", className);
+      $[0] = className;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    let t3;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = {
+        gap: 8
+      };
+      $[2] = t3;
+    } else {
+      t3 = $[2];
+    }
+    let t4;
+    if ($[3] !== children || $[4] !== t2 || $[5] !== testID) {
+      t4 = _jsx(ScrollView, {
+        className: t2,
+        contentContainerStyle: t3,
+        horizontal: true,
+        keyboardShouldPersistTaps: "handled",
+        showsHorizontalScrollIndicator: false,
+        testID: testID,
+        children: children
+      });
+      $[3] = children;
+      $[4] = t2;
+      $[5] = testID;
+      $[6] = t4;
+    } else {
+      t4 = $[6];
     }
-    return (_jsx(View, { className: cn("flex-row gap-2 p-3", layout === "wrap" && "flex-wrap", className), testID: testID, children: children }));
+    return t4;
+  }
+  const t2 = layout === "wrap" && "flex-wrap";
+  let t3;
+  if ($[7] !== className || $[8] !== t2) {
+    t3 = cn("flex-row gap-2 p-3", t2, className);
+    $[7] = className;
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== children || $[11] !== t3 || $[12] !== testID) {
+    t4 = _jsx(View, {
+      className: t3,
+      testID: testID,
+      children: children
+    });
+    $[10] = children;
+    $[11] = t3;
+    $[12] = testID;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
 }

package/dist/Actions/Actions.IconButton.d.ts

@@ -60,6 +60,7 @@ export interface IconButtonProps extends VariantProps<typeof iconButton>, Access
     icon: IconName;
     onPress: () => void;
     loading?: boolean;
+    /** Overrides the ink of the variant, e.g. an inverse icon over a brand header. */
     iconColor?: string;
     className?: string;
     testID?: string;

package/dist/Actions/Actions.IconButton.js

@@ -1,42 +1,205 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Icon from "../Display/Display.Icon.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { tv } from "../theme/tw.js";
 import { ActivityIndicator, TouchableOpacity } from "react-native";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 const iconButton = tv({
-    base: "rounded-lg items-center justify-center",
-    variants: {
-        variant: {
-            primary: "bg-primary",
-            secondary: "bg-bg-card border border-primary",
-            tertiary: "bg-accent",
-            ghost: "bg-transparent",
-        },
-        size: {
-            small: "w-8 h-8",
-            medium: "w-10 h-10",
-            large: "w-12 h-12",
-        },
-        rounded: {
-            true: "rounded-full",
-        },
-        disabled: {
-            true: "opacity-50",
-        },
+  base: "rounded-lg items-center justify-center",
+  variants: {
+    variant: {
+      primary: "bg-primary",
+      secondary: "bg-bg-card border border-primary",
+      tertiary: "bg-accent",
+      ghost: "bg-transparent"
     },
-    defaultVariants: {
-        variant: "ghost",
-        size: "medium",
-        rounded: false,
-        disabled: false,
+    size: {
+      small: "w-8 h-8",
+      medium: "w-10 h-10",
+      large: "w-12 h-12"
     },
+    rounded: {
+      true: "rounded-full"
+    },
+    disabled: {
+      true: "opacity-50"
+    }
+  },
+  defaultVariants: {
+    variant: "ghost",
+    size: "medium",
+    rounded: false,
+    disabled: false
+  }
 });
-function IconButton({ icon, onPress, variant = "ghost", size = "medium", loading = false, disabled = false, rounded = false, iconColor, className, testID, accessibilityState, ...accessibilityProps }) {
-    const resolvedColor = iconColor ?? theme.text.accent;
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: iconButton({ variant, size, rounded, disabled, className }), disabled: disabled || loading, onPress: onPress, ...accessibilityProps, accessibilityRole: "button", accessibilityState: {
-            ...accessibilityState,
-            disabled: disabled || loading,
-            busy: loading,
-        }, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: resolvedColor, size: "small" })) : (_jsx(Icon, { color: resolvedColor, name: icon, size: 24 })) }));
+/** The visible button keeps its size; the touch target always reaches 48 points. */
+const TOUCH_SLOP = {
+  small: 8,
+  medium: 4,
+  large: 0
+};
+function useIconColor(variant) {
+  const $ = _c(4);
+  const theme = useTheme();
+  let t0;
+  if ($[0] !== theme.text.accent || $[1] !== theme.text.onAccent || $[2] !== theme.text.onPrimary) {
+    t0 = {
+      primary: theme.text.onPrimary,
+      secondary: theme.text.accent,
+      tertiary: theme.text.onAccent,
+      ghost: theme.text.accent
+    };
+    $[0] = theme.text.accent;
+    $[1] = theme.text.onAccent;
+    $[2] = theme.text.onPrimary;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  const colors = t0;
+  return colors[variant];
+}
+function IconButton(t0) {
+  const $ = _c(36);
+  let accessibilityProps;
+  let accessibilityState;
+  let className;
+  let icon;
+  let iconColor;
+  let onPress;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let testID;
+  if ($[0] !== t0) {
+    ({
+      icon,
+      onPress,
+      variant: t1,
+      size: t2,
+      loading: t3,
+      disabled: t4,
+      rounded: t5,
+      iconColor,
+      className,
+      testID,
+      accessibilityState,
+      ...accessibilityProps
+    } = t0);
+    $[0] = t0;
+    $[1] = accessibilityProps;
+    $[2] = accessibilityState;
+    $[3] = className;
+    $[4] = icon;
+    $[5] = iconColor;
+    $[6] = onPress;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = testID;
+  } else {
+    accessibilityProps = $[1];
+    accessibilityState = $[2];
+    className = $[3];
+    icon = $[4];
+    iconColor = $[5];
+    onPress = $[6];
+    t1 = $[7];
+    t2 = $[8];
+    t3 = $[9];
+    t4 = $[10];
+    t5 = $[11];
+    testID = $[12];
+  }
+  const variant = t1 === undefined ? "ghost" : t1;
+  const size = t2 === undefined ? "medium" : t2;
+  const loading = t3 === undefined ? false : t3;
+  const disabled = t4 === undefined ? false : t4;
+  const rounded = t5 === undefined ? false : t5;
+  const variantColor = useIconColor(variant ?? "ghost");
+  const resolvedColor = iconColor ?? variantColor;
+  let t6;
+  if ($[13] !== className || $[14] !== disabled || $[15] !== rounded || $[16] !== size || $[17] !== variant) {
+    t6 = iconButton({
+      variant,
+      size,
+      rounded,
+      disabled,
+      className
+    });
+    $[13] = className;
+    $[14] = disabled;
+    $[15] = rounded;
+    $[16] = size;
+    $[17] = variant;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  const t7 = disabled || loading;
+  const t8 = TOUCH_SLOP[size ?? "medium"];
+  const t9 = disabled || loading;
+  let t10;
+  if ($[19] !== accessibilityState || $[20] !== loading || $[21] !== t9) {
+    t10 = {
+      ...accessibilityState,
+      disabled: t9,
+      busy: loading
+    };
+    $[19] = accessibilityState;
+    $[20] = loading;
+    $[21] = t9;
+    $[22] = t10;
+  } else {
+    t10 = $[22];
+  }
+  let t11;
+  if ($[23] !== icon || $[24] !== loading || $[25] !== resolvedColor) {
+    t11 = loading ? _jsx(ActivityIndicator, {
+      color: resolvedColor,
+      size: "small"
+    }) : _jsx(Icon, {
+      color: resolvedColor,
+      name: icon,
+      size: 24
+    });
+    $[23] = icon;
+    $[24] = loading;
+    $[25] = resolvedColor;
+    $[26] = t11;
+  } else {
+    t11 = $[26];
+  }
+  let t12;
+  if ($[27] !== accessibilityProps || $[28] !== onPress || $[29] !== t10 || $[30] !== t11 || $[31] !== t6 || $[32] !== t7 || $[33] !== t8 || $[34] !== testID) {
+    t12 = _jsx(TouchableOpacity, {
+      activeOpacity: 0.7,
+      className: t6,
+      disabled: t7,
+      hitSlop: t8,
+      onPress: onPress,
+      ...accessibilityProps,
+      accessibilityRole: "button",
+      accessibilityState: t10,
+      testID: testID,
+      children: t11
+    });
+    $[27] = accessibilityProps;
+    $[28] = onPress;
+    $[29] = t10;
+    $[30] = t11;
+    $[31] = t6;
+    $[32] = t7;
+    $[33] = t8;
+    $[34] = testID;
+    $[35] = t12;
+  } else {
+    t12 = $[35];
+  }
+  return t12;
 }
 export default IconButton;

package/dist/Actions/index.js

@@ -1,20 +1,20 @@
 import ButtonWithIcon from "./Actions.Button.js";
 import Dock from "./Actions.Dock.js";
 import FAB from "./Actions.FAB.js";
-import { FilterButton, FilterButtonGroup, } from "./Actions.FilterButton.js";
+import { FilterButton, FilterButtonGroup } from "./Actions.FilterButton.js";
 import IconButton from "./Actions.IconButton.js";
 export const Actions = {
-    /** Primary action button. The filled one is gold; navy is text. Supports confirm dialog. */
-    Button: ButtonWithIcon,
-    /** Compact primary-action dock with additional options in a dismissible sheet. */
-    Dock,
-    /** Small icon-only tap target — ghost, primary, secondary, tertiary variants. */
-    IconButton,
-    /** Floating Action Button — fixed bottom-right/left, label-optional. */
-    FAB,
-    /** Chip-style active/inactive toggle — use inside `Actions.FilterButtonGroup`. */
-    FilterButton,
-    /** Filter chip layout; opt into horizontal scrolling or wrapping with `layout`. */
-    FilterButtonGroup,
+  /** Primary action button. The filled one is gold; navy is text. Supports confirm dialog. */
+  Button: ButtonWithIcon,
+  /** Compact primary-action dock with additional options in a dismissible sheet. */
+  Dock,
+  /** Small icon-only tap target — ghost, primary, secondary, tertiary variants. */
+  IconButton,
+  /** Floating Action Button — fixed bottom-right/left, label-optional. */
+  FAB,
+  /** Chip-style active/inactive toggle — use inside `Actions.FilterButtonGroup`. */
+  FilterButton,
+  /** Filter chip layout; opt into horizontal scrolling or wrapping with `layout`. */
+  FilterButtonGroup
 };
 export default Actions;

package/dist/Dialog/Confirmation.context.js

@@ -1,22 +1,88 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Confirmation from "./Dialog.Confirmation.js";
-import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 export { requestConfirmation } from "./requestConfirmation.js";
 const ConfirmationContext = createContext(null);
-export function ConfirmationProvider({ children }) {
-    const [options, setOptions] = useState();
-    const [visible, setVisible] = useState(false);
-    const show = useCallback(({ title = "Confirmación", message = "¿Estás seguro de que quieres continuar?", confirmText = "Confirmar", cancelText = "Cancelar", destructive = false, ...next }) => {
-        setOptions({ title, message, confirmText, cancelText, destructive, ...next });
-        setVisible(true);
-    }, []);
-    const value = useMemo(() => ({ show }), [show]);
-    return (_jsxs(ConfirmationContext.Provider, { value: value, children: [children, options ? (_jsx(Confirmation, { ...options, onClose: () => setVisible(false), visible: visible })) : null] }));
+export function ConfirmationProvider(t0) {
+  const $ = _c(8);
+  const {
+    children
+  } = t0;
+  const [options, setOptions] = useState();
+  const [visible, setVisible] = useState(false);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = t2 => {
+      const {
+        title: t3,
+        message: t4,
+        confirmText: t5,
+        cancelText: t6,
+        destructive: t7,
+        ...next
+      } = t2;
+      const title = t3 === undefined ? "Confirmaci\xF3n" : t3;
+      const message = t4 === undefined ? "\xBFEst\xE1s seguro de que quieres continuar?" : t4;
+      const confirmText = t5 === undefined ? "Confirmar" : t5;
+      const cancelText = t6 === undefined ? "Cancelar" : t6;
+      const destructive = t7 === undefined ? false : t7;
+      setOptions({
+        title,
+        message,
+        confirmText,
+        cancelText,
+        destructive,
+        ...next
+      });
+      setVisible(true);
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const show = t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {
+      show
+    };
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const value = t2;
+  let t3;
+  if ($[2] !== options || $[3] !== visible) {
+    t3 = options ? _jsx(Confirmation, {
+      ...options,
+      onClose: () => setVisible(false),
+      visible: visible
+    }) : null;
+    $[2] = options;
+    $[3] = visible;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== children || $[6] !== t3) {
+    t4 = _jsxs(ConfirmationContext.Provider, {
+      value: value,
+      children: [children, t3]
+    });
+    $[5] = children;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
 }
 export function useConfirmationContext() {
-    const context = useContext(ConfirmationContext);
-    if (!context) {
-        throw new Error("useConfirmationContext requires ConfirmationProvider.");
-    }
-    return context;
+  const context = useContext(ConfirmationContext);
+  if (!context) {
+    throw new Error("useConfirmationContext requires ConfirmationProvider.");
+  }
+  return context;
 }