@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Display/Display.Chip.js

@@ -1,45 +1,179 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Icon from "./Display.Icon.js";
+import { PillLabel } from "./pill.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { tv } from "../theme/tw.js";
-import { Text, View } from "react-native";
+import { View } from "react-native";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
 const chip = tv({
-    slots: {
-        root: "flex-row items-center self-start rounded-full px-3 py-1.5 gap-1",
-        label: "text-xs font-medium",
-    },
-    variants: {
-        tone: {
-            neutral: { root: "bg-bg-muted", label: "text-text-secondary" },
-            primary: { root: "bg-container-primary", label: "text-container-on-primary" },
-            success: { root: "bg-container-success", label: "text-container-on-success" },
-            warning: { root: "bg-container-warning", label: "text-container-on-warning" },
-            danger: { root: "bg-container-danger", label: "text-container-on-danger" },
-        },
-        selected: {
-            true: { root: "border border-primary" },
-        },
-    },
-    defaultVariants: {
-        tone: "neutral",
-        selected: false,
+  slots: {
+    root: "flex-row items-center self-start rounded-full px-3 py-1.5 gap-1",
+    label: ""
+  },
+  variants: {
+    tone: {
+      neutral: {
+        root: "bg-bg-muted",
+        label: "text-text-secondary"
+      },
+      primary: {
+        root: "bg-container-primary",
+        label: "text-container-on-primary"
+      },
+      success: {
+        root: "bg-container-success",
+        label: "text-container-on-success"
+      },
+      warning: {
+        root: "bg-container-warning",
+        label: "text-container-on-warning"
+      },
+      danger: {
+        root: "bg-container-danger",
+        label: "text-container-on-danger"
+      }
     },
+    // The border takes the place of one point of padding, so selecting never resizes the chip.
+    selected: {
+      true: {
+        root: "border border-primary px-[11px] py-[5px]"
+      }
+    }
+  },
+  defaultVariants: {
+    tone: "neutral",
+    selected: false
+  }
 });
-const removeIconColor = {
+function removeIconColor(theme) {
+  return {
     neutral: theme.text.secondary,
     primary: theme.container.onPrimary,
     success: theme.container.onSuccess,
     warning: theme.container.onWarning,
-    danger: theme.container.onDanger,
-};
-function Chip({ label, tone = "neutral", selected = false, onPress, onRemove, className, testID, }) {
-    const styles = chip({ tone, selected });
-    const content = (_jsxs(_Fragment, { children: [_jsx(Text, { className: styles.label(), numberOfLines: 1, children: label }), onRemove ? (_jsx(Pressable, { accessibilityLabel: `Quitar ${label}`, hitSlop: 8, onPress: onRemove, children: _jsx(Icon, { color: removeIconColor[tone ?? "neutral"], name: "close", size: 14 }) })) : null] }));
-    if (onPress) {
-        return (_jsx(Pressable, { accessibilityLabel: label, accessibilityState: { selected }, className: styles.root({ className }), onPress: onPress, testID: testID, children: content }));
+    danger: theme.container.onDanger
+  };
+}
+function Chip(t0) {
+  const $ = _c(25);
+  const {
+    label,
+    tone: t1,
+    selected: t2,
+    onPress,
+    onRemove,
+    className,
+    testID,
+    textVariant
+  } = t0;
+  const tone = t1 === undefined ? "neutral" : t1;
+  const selected = t2 === undefined ? false : t2;
+  const theme = useTheme();
+  let T0;
+  let content;
+  let t3;
+  let t4;
+  if ($[0] !== className || $[1] !== label || $[2] !== onPress || $[3] !== onRemove || $[4] !== selected || $[5] !== testID || $[6] !== textVariant || $[7] !== theme || $[8] !== tone) {
+    t4 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const styles = chip({
+        tone,
+        selected
+      });
+      let t5;
+      if ($[13] !== label || $[14] !== onRemove || $[15] !== theme || $[16] !== tone) {
+        t5 = onRemove ? _jsx(Pressable, {
+          accessibilityLabel: `Quitar ${label}`,
+          hitSlop: 8,
+          onPress: onRemove,
+          children: _jsx(Icon, {
+            color: removeIconColor(theme)[tone ?? "neutral"],
+            name: "close",
+            size: 14
+          })
+        }) : null;
+        $[13] = label;
+        $[14] = onRemove;
+        $[15] = theme;
+        $[16] = tone;
+        $[17] = t5;
+      } else {
+        t5 = $[17];
+      }
+      content = _jsxs(_Fragment, {
+        children: [_jsx(PillLabel, {
+          className: styles.label(),
+          variant: textVariant,
+          children: label
+        }), t5]
+      });
+      if (onPress) {
+        let t6;
+        if ($[18] !== selected) {
+          t6 = {
+            selected
+          };
+          $[18] = selected;
+          $[19] = t6;
+        } else {
+          t6 = $[19];
+        }
+        t4 = _jsx(Pressable, {
+          accessibilityLabel: label,
+          accessibilityState: t6,
+          className: styles.root({
+            className
+          }),
+          onPress: onPress,
+          testID: testID,
+          children: content
+        });
+        break bb0;
+      }
+      T0 = View;
+      t3 = styles.root({
+        className
+      });
     }
-    return (_jsx(View, { className: styles.root({ className }), testID: testID, children: content }));
+    $[0] = className;
+    $[1] = label;
+    $[2] = onPress;
+    $[3] = onRemove;
+    $[4] = selected;
+    $[5] = testID;
+    $[6] = textVariant;
+    $[7] = theme;
+    $[8] = tone;
+    $[9] = T0;
+    $[10] = content;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    T0 = $[9];
+    content = $[10];
+    t3 = $[11];
+    t4 = $[12];
+  }
+  if (t4 !== Symbol.for("react.early_return_sentinel")) {
+    return t4;
+  }
+  let t5;
+  if ($[20] !== T0 || $[21] !== content || $[22] !== t3 || $[23] !== testID) {
+    t5 = _jsx(T0, {
+      className: t3,
+      testID: testID,
+      children: content
+    });
+    $[20] = T0;
+    $[21] = content;
+    $[22] = t3;
+    $[23] = testID;
+    $[24] = t5;
+  } else {
+    t5 = $[24];
+  }
+  return t5;
 }
 export default Chip;
 export { Chip };

package/dist/Display/Display.CircleButton.d.ts

@@ -6,5 +6,6 @@ export interface CircleButtonProps {
     className?: string;
     icon: IconName;
 }
+/** Decorative icon in a filled circle (menu cards). Not an action: use `Actions.IconButton`. */
 export declare function CircleButton({ size, color, variant, className, icon, }: CircleButtonProps): import("react").JSX.Element;
 export default CircleButton;

package/dist/Display/Display.CircleButton.js

@@ -1,39 +1,98 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Icon from "./Display.Icon.js";
 import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { View } from "react-native";
 import { tv } from "tailwind-variants";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 const circleButtonVariants = tv({
-    base: "rounded-full items-center justify-center shadow-sm",
-    variants: {
-        size: {
-            sm: "w-12 h-12",
-            md: "w-15 h-15",
-            lg: "w-20 h-20",
-        },
-        variant: {
-            primary: "bg-primary",
-            secondary: "bg-secondary",
-            accent: "bg-accent",
-            success: "bg-success",
-            danger: "bg-danger",
-            warning: "bg-warning",
-        },
-    },
-    defaultVariants: {
-        size: "md",
-        variant: "accent",
+  base: "rounded-full items-center justify-center shadow-sm",
+  variants: {
+    size: {
+      sm: "w-12 h-12",
+      md: "w-15 h-15",
+      lg: "w-20 h-20"
     },
+    variant: {
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      accent: "bg-accent",
+      success: "bg-success",
+      danger: "bg-danger",
+      warning: "bg-warning"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "accent"
+  }
 });
 const SIZE_MAP = {
-    sm: { icon: 24 },
-    md: { icon: 30 },
-    lg: { icon: 40 },
+  sm: {
+    icon: 24
+  },
+  md: {
+    icon: 30
+  },
+  lg: {
+    icon: 40
+  }
 };
-export function CircleButton({ size = "md", color, variant = "accent", className, icon, }) {
-    const theme = useTheme();
-    const iconColor = color ?? theme.text.inverse;
-    return (_jsx(View, { className: cn(circleButtonVariants({ size, variant }), className), children: _jsx(Icon, { color: iconColor, name: icon, size: SIZE_MAP[size].icon }) }));
+
+/** Decorative icon in a filled circle (menu cards). Not an action: use `Actions.IconButton`. */
+export function CircleButton(t0) {
+  const $ = _c(11);
+  const {
+    size: t1,
+    color,
+    variant: t2,
+    className,
+    icon
+  } = t0;
+  const size = t1 === undefined ? "md" : t1;
+  const variant = t2 === undefined ? "accent" : t2;
+  const theme = useTheme();
+  const iconColor = color ?? theme.text.inverse;
+  let t3;
+  if ($[0] !== className || $[1] !== size || $[2] !== variant) {
+    t3 = cn(circleButtonVariants({
+      size,
+      variant
+    }), className);
+    $[0] = className;
+    $[1] = size;
+    $[2] = variant;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const t4 = SIZE_MAP[size];
+  let t5;
+  if ($[4] !== icon || $[5] !== iconColor || $[6] !== t4.icon) {
+    t5 = _jsx(Icon, {
+      color: iconColor,
+      name: icon,
+      size: t4.icon
+    });
+    $[4] = icon;
+    $[5] = iconColor;
+    $[6] = t4.icon;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== t3 || $[9] !== t5) {
+    t6 = _jsx(View, {
+      className: t3,
+      children: t5
+    });
+    $[8] = t3;
+    $[9] = t5;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  return t6;
 }
 export default CircleButton;