@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-2SY63FCH.js → chunk-7NGMUVNU.js}

@@ -1,12 +1,15 @@
-import { useColorTransition } from './chunk-7BUIKDD6.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
 import { NAMED_ROLE } from './chunk-W23G6JLF.js';
+import { useColorTransition } from './chunk-KXLDK6HB.js';
 import { haptics } from './chunk-NY2U3PBI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { Easing, Animated, Text, Pressable, View, LayoutAnimation } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { StyleSheet, Easing, Animated, Text, View, Pressable, LayoutAnimation } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function SlideIn({ children }) {
@@ -31,16 +34,15 @@ var DEFAULT_LABELS = {
   remove: "Remove",
   removeNamed: (name) => `Remove ${name}`
 };
-function useForeground(variant, isSelected) {
+function useForeground(variant) {
   const theme = useLoamTheme("chip");
-  if (isSelected) return theme.color.accentOnSoft;
   if (variant === "input") return theme.color.onSurface;
   return theme.color.onSurface2;
 }
 function Chip({
   children,
   variant: variantProp,
-  size = "md",
+  size = "sm",
   selected = false,
   onSelectedChange,
   // Deprecated — when set (and no explicit variant is given) it selects the
@@ -52,6 +54,7 @@ function Chip({
   removeLabel,
   leadingIcon,
   disabled = false,
+  tone = "neutral",
   motion = "full",
   accessibilityLabel,
   labels: labelsProp
@@ -59,26 +62,36 @@ function Chip({
   const labels = useLabels("chip", DEFAULT_LABELS, labelsProp);
   const resolvedMotion = useResolvedMotion(motion, "chip");
   const animateColour = resolvedMotion !== "none";
-  const animatePress = resolvedMotion === "full";
+  const theme = useLoamTheme("chip");
+  const android = isAndroidIdiom(theme);
+  const animatePress = resolvedMotion === "full" && !android;
+  const [down, setDown] = React.useState(false);
+  const focusRing = useFocusRing(theme.radius.full);
   const variant = variantProp === "filled" ? "input" : variantProp === "outline" ? "filter" : variantProp ?? (legacySelectable ? "filter" : "input");
   const isFilter = variant === "filter";
   const isSelected = isFilter && selected;
   const { styles } = useStyles(sheet, { size, disabled });
-  const theme = useLoamTheme("chip");
-  const fg = useForeground(variant, isSelected);
+  const skin = tone !== "neutral" && !disabled && (isSelected || variant === "input") ? softToneSkin(theme, tone) : null;
+  const baseFg = useForeground(variant);
+  const fg = skin ? skin.ink : baseFg;
   const iconSize = theme.ctl.icon[size];
   const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
   const bodyPressable = isFilter || variant === "suggestion" || onPress != null;
   const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
   const restingFill = variant === "input" ? theme.color.surface2 : theme.color.surface;
   const backgroundColor = useColorTransition(
-    isSelected ? theme.color.accentSoft : restingFill,
+    skin ? skin.fill : isSelected ? theme.state.selected : restingFill,
+    theme.spring.fe.duration,
+    easing,
+    animateColour
+  );
+  const edgeTarget = variant === "input" ? theme.color.border : theme.color.borderStrong;
+  const borderColor = useColorTransition(
+    skin ? skin.edge : edgeTarget,
     theme.spring.fe.duration,
     easing,
     animateColour
   );
-  const edgeTarget = isSelected ? theme.color.accent : variant === "input" ? theme.color.border : theme.color.borderStrong;
-  const borderColor = useColorTransition(edgeTarget, theme.spring.fe.duration, easing, animateColour);
   const borderWidth = variant === "input" ? theme.borderWidth.base : theme.borderWidth.thick;
   const scale = React.useRef(new Animated.Value(1)).current;
   const spring = (to) => Animated.spring(scale, {
@@ -107,17 +120,31 @@ function Chip({
     onRemove?.();
   };
   const leading = isSelected ? "check" : leadingIcon;
+  const labelRole = theme.ctl.label[size === "xs" ? "xs" : "sm"];
+  const leadingColor = isSelected && !skin ? theme.color.accentStrong : fg;
   const resolvedRemoveLabel = removeLabel ?? (children ? labels.removeNamed(children) : labels.remove);
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    leading ? isSelected && animatePress ? /* @__PURE__ */ jsx(SlideIn, { children: /* @__PURE__ */ jsx(Icon, { name: leading, size: iconSize, color: fg }) }) : /* @__PURE__ */ jsx(Icon, { name: leading, size: iconSize, color: fg }) : null,
-    children !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children }) : null
+    leading ? isSelected && animatePress ? /* @__PURE__ */ jsx(SlideIn, { children: /* @__PURE__ */ jsx(Icon, { name: leading, size: iconSize, color: leadingColor }) }) : /* @__PURE__ */ jsx(Icon, { name: leading, size: iconSize, color: leadingColor }) : null,
+    children !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.label, labelRole, { color: fg }], children }) : null
   ] });
   return /* @__PURE__ */ jsxs(
     Animated.View,
     {
       testID: "chip-base",
-      style: [styles.base, { backgroundColor, borderColor, borderWidth, transform: [{ scale }] }],
+      style: [
+        styles.base,
+        { backgroundColor, borderColor, borderWidth, transform: [{ scale }] },
+        focusRing.style
+      ],
       children: [
+        down && !android ? /* @__PURE__ */ jsx(
+          View,
+          {
+            testID: "chip-pressed",
+            pointerEvents: "none",
+            style: [styles.pressedFill, { backgroundColor: theme.state.pressed }]
+          }
+        ) : null,
         bodyPressable ? /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -126,10 +153,19 @@ function Chip({
             accessibilityState: isFilter ? { selected: isSelected, disabled } : { disabled },
             disabled,
             onPress: disabled ? void 0 : handlePress,
-            onPressIn: disabled || !animatePress ? void 0 : () => spring(0.97),
-            onPressOut: disabled || !animatePress ? void 0 : () => spring(1),
+            onPressIn: disabled ? void 0 : () => {
+              setDown(true);
+              if (animatePress) spring(0.97);
+            },
+            onPressOut: disabled ? void 0 : () => {
+              setDown(false);
+              if (animatePress) spring(1);
+            },
+            onFocus: focusRing.handlers.onFocus,
+            onBlur: focusRing.handlers.onBlur,
+            android_ripple: android && !disabled ? { color: theme.state.pressed, borderless: false, foreground: true } : void 0,
             hitSlop: { top: slopY, bottom: slopY },
-            style: styles.body,
+            style: android ? [styles.body, styles.ripple] : styles.body,
             children: body
           }
         ) : /* @__PURE__ */ jsx(
@@ -153,6 +189,8 @@ function Chip({
               right: theme.space[2]
             },
             disabled,
+            onFocus: focusRing.handlers.onFocus,
+            onBlur: focusRing.handlers.onBlur,
             onPress: disabled ? void 0 : handleRemove,
             children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: fg })
           }
@@ -178,7 +216,9 @@ var sheet = createStyleSheet((theme) => ({
       size: {
         xs: { height: theme.ctl.xs, paddingHorizontal: theme.ctl.px.xs },
         sm: { height: theme.ctl.sm, paddingHorizontal: theme.ctl.px.sm },
-        md: { height: theme.ctl.md, paddingHorizontal: theme.ctl.px.md }
+        md: { height: theme.ctl.md, paddingHorizontal: theme.ctl.px.md },
+        // A filter row beside 44 fields only (F1, F3).
+        lg: { height: theme.ctl.lg, paddingHorizontal: theme.ctl.px.lg }
       },
       disabled: {
         true: { opacity: theme.state.disabledOpacity },
@@ -194,16 +234,12 @@ var sheet = createStyleSheet((theme) => ({
     gap: theme.space.s2
   },
   label: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    variants: {
-      size: {
-        xs: { fontSize: theme.fontSize[12] },
-        sm: { fontSize: theme.fontSize[14] },
-        md: { fontSize: theme.fontSize[14] }
-      }
-    }
-  }
+    fontFamily: theme.font.sans
+  },
+  // Android ripple clips to the pill.
+  ripple: { borderRadius: theme.radius.full, overflow: "hidden" },
+  // iOS press fill: the neutral state layer over the whole pill.
+  pressedFill: { ...StyleSheet.absoluteFillObject, borderRadius: theme.radius.full }
 }));
 
 export { Chip };

package/dist/chunk-7PBSIXT7.js

@@ -0,0 +1,355 @@
+import { Progress } from './chunk-L2WMOA2V.js';
+import { IconTile } from './chunk-XBXUBBJZ.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, BackHandler, Platform, findNodeHandle, AccessibilityInfo, View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  skip: "Skip",
+  next: "Continue",
+  nextAndroid: "Next",
+  notNow: "Not now",
+  finish: "Get started",
+  openSettings: "Open Settings",
+  stepOf: (n, m) => `Step ${n} of ${m}`,
+  count: (n, m) => `${n} of ${m}`
+};
+var ONBOARDING_MAX_DOTS = 5;
+function OnboardingPager({
+  steps,
+  step: stepProp,
+  defaultStep = 0,
+  onStepChange,
+  onFinish,
+  onSkip,
+  skippable = true,
+  insets,
+  motion = "full",
+  size = "lg",
+  variant = "auto",
+  orientation,
+  density = "comfortable",
+  labels: labelsProp,
+  testID
+}) {
+  const theme = useLoamTheme("onboarding-pager");
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("onboardingPager", DEFAULT_LABELS, labelsProp);
+  const resolved = useResolvedMotion(motion);
+  const android = isAndroidIdiom(theme);
+  const [own, setOwn] = React.useState(defaultStep);
+  const total = steps.length;
+  const index = Math.min(Math.max(0, stepProp ?? own), Math.max(0, total - 1));
+  const current = steps[index];
+  const last = index >= total - 1;
+  const [pending, setPending] = React.useState(false);
+  const [denied, setDenied] = React.useState(false);
+  const titleRef = React.useRef(null);
+  const finished = React.useRef(false);
+  const mounted = React.useRef(false);
+  const swipeX = React.useRef(null);
+  const fade = React.useRef(new Animated.Value(1)).current;
+  const go = React.useCallback(
+    (next) => {
+      if (stepProp === void 0) setOwn(next);
+      onStepChange?.(next);
+    },
+    [stepProp, onStepChange]
+  );
+  const finish = React.useCallback(
+    (result) => {
+      if (finished.current) return;
+      finished.current = true;
+      onFinish?.(result);
+    },
+    [onFinish]
+  );
+  const advance = React.useCallback(() => {
+    if (last) finish({ skipped: false });
+    else go(index + 1);
+  }, [last, finish, go, index]);
+  const skip = React.useCallback(() => {
+    onSkip?.(index);
+    finish({ skipped: true });
+  }, [onSkip, index, finish]);
+  React.useEffect(() => {
+    if (!android) return;
+    const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+      if (pending) return true;
+      if (index > 0 && !denied) go(index - 1);
+      else skip();
+      return true;
+    });
+    return () => sub.remove();
+  }, [android, pending, index, denied, go, skip]);
+  React.useEffect(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
+    if (resolved !== "none") {
+      fade.setValue(0);
+      Animated.timing(fade, {
+        toValue: 1,
+        duration: theme.duration[200],
+        useNativeDriver: Platform.OS !== "web"
+      }).start();
+    }
+    const node = titleRef.current;
+    if (Platform.OS === "web") node?.focus?.();
+    else {
+      const handle = node ? findNodeHandle(node) : null;
+      if (handle) AccessibilityInfo.setAccessibilityFocus(handle);
+    }
+  }, [index, denied, fade, resolved, theme]);
+  if (!current) return null;
+  const run = async (work) => {
+    setPending(true);
+    try {
+      return await work();
+    } finally {
+      setPending(false);
+    }
+  };
+  const runAction = async () => {
+    if (!current.action || pending) return;
+    await run(current.action.run);
+    advance();
+  };
+  const permission = current.permission;
+  const runPermission = async () => {
+    if (!permission || pending) return;
+    if (await run(permission.request)) {
+      if (last) finish({ skipped: false, permission: "granted" });
+      else go(index + 1);
+    } else setDenied(true);
+  };
+  const showSkip = skippable && !last && !denied && !permission;
+  const dots = variant === "dots" ? true : variant === "count" ? false : total <= ONBOARDING_MAX_DOTS;
+  const compact = density === "compact";
+  const title = denied && permission ? permission.deniedTitle ?? current.title : current.title;
+  const body = denied && permission ? permission.deniedBody : current.body;
+  const plain = !current.action && !permission && !denied;
+  const rail = dots ? /* @__PURE__ */ jsx(
+    View,
+    {
+      style: styles.dots,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx(
+        View,
+        {
+          testID: i === index ? "onboarding-dot-current" : void 0,
+          style: [styles.dot, i === index ? styles.dotCurrent : null]
+        },
+        i
+      ))
+    }
+  ) : /* @__PURE__ */ jsx(Text, { style: styles.count, accessibilityElementsHidden: true, importantForAccessibility: "no", children: labels.count(index + 1, total) });
+  const primary = denied ? /* @__PURE__ */ jsx(Button, { size, fullWidth: true, onPress: () => finish({ skipped: false, permission: "denied" }), children: labels.finish }) : permission ? /* @__PURE__ */ jsx(Button, { size, fullWidth: true, loading: pending, onPress: () => void runPermission(), children: permission.allowLabel }) : current.action ? /* @__PURE__ */ jsx(Button, { size, fullWidth: true, loading: pending, onPress: () => void runAction(), children: current.action.label }) : /* @__PURE__ */ jsx(Button, { size, fullWidth: !android, onPress: advance, children: last ? labels.finish : android ? labels.nextAndroid : labels.next });
+  const secondary = denied ? permission?.onOpenSettings ? /* @__PURE__ */ jsx(Button, { size, variant: "outline", fullWidth: true, onPress: permission.onOpenSettings, children: labels.openSettings }) : null : current.action || permission ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      size,
+      variant: "ghost",
+      fullWidth: true,
+      disabled: pending,
+      onPress: () => permission ? finish({ skipped: false, permission: "denied" }) : advance(),
+      children: labels.notNow
+    }
+  ) : null;
+  const iosSkip = showSkip ? /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      onPress: skip,
+      disabled: pending,
+      hitSlop: (theme.hit.lg - theme.fontSize[17]) / 2,
+      style: pending ? styles.disabled : null,
+      children: ({ pressed }) => /* @__PURE__ */ jsx(Text, { style: [styles.skipIos, pressed ? styles.pressedText : null], children: labels.skip })
+    }
+  ) : null;
+  const onTouchStart = (e) => {
+    swipeX.current = e.nativeEvent.pageX;
+  };
+  const onTouchEnd = (e) => {
+    const from = swipeX.current;
+    swipeX.current = null;
+    if (from === null || pending || denied) return;
+    const dx = e.nativeEvent.pageX - from;
+    if (Math.abs(dx) < theme.space[48]) return;
+    const forward = theme.rtl ? dx > 0 : dx < 0;
+    if (forward && plain && !last) go(index + 1);
+    else if (!forward && index > 0) go(index - 1);
+  };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      style: [styles.root, { paddingBottom: insets?.bottom ?? 0 }],
+      onTouchStart,
+      onTouchEnd,
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.srOnly, accessibilityLiveRegion: "polite", children: labels.stepOf(index + 1, total) }),
+        android ? null : /* @__PURE__ */ jsxs(View, { style: [styles.top, { paddingTop: (insets?.top ?? 0) + theme.space[12] }], children: [
+          dots ? null : /* @__PURE__ */ jsx(View, { style: styles.topProgress, children: /* @__PURE__ */ jsx(
+            Progress,
+            {
+              size: "sm",
+              value: index + 1,
+              max: total,
+              label: labels.stepOf(index + 1, total)
+            }
+          ) }),
+          iosSkip ?? /* @__PURE__ */ jsx(View, { style: styles.skipSpacer })
+        ] }),
+        /* @__PURE__ */ jsxs(Animated.View, { style: [styles.body, compact ? styles.bodyCompact : null, { opacity: fade }], children: [
+          permission ? /* @__PURE__ */ jsx(View, { style: styles.tileRow, children: /* @__PURE__ */ jsx(IconTile, { icon: permission.icon, size: "xl", tone: denied ? "neutral" : "accent" }) }) : current.media ? /* @__PURE__ */ jsx(View, { style: styles.media, children: current.media }) : null,
+          /* @__PURE__ */ jsxs(View, { style: [styles.text, permission ? styles.textCentred : null], children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                ref: titleRef,
+                accessibilityRole: "header",
+                style: [styles.title, permission ? styles.centred : null],
+                children: title
+              }
+            ),
+            body ? /* @__PURE__ */ jsx(Text, { style: [styles.copy, permission ? styles.centred : null], children: body }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(View, { style: styles.spacer }),
+        android && plain && orientation !== "vertical" ? /* @__PURE__ */ jsxs(View, { style: [styles.bar, compact ? styles.barCompact : null], children: [
+          showSkip ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onPress: skip, children: labels.skip }) : /* @__PURE__ */ jsx(View, {}),
+          /* @__PURE__ */ jsx(View, { style: styles.barRail, children: rail }),
+          primary
+        ] }) : (
+          // iOS: the primary sits 16 above the home indicator.
+          /* @__PURE__ */ jsxs(
+            View,
+            {
+              style: [
+                styles.footer,
+                android ? null : styles.footerIos,
+                compact ? styles.footerCompact : null
+              ],
+              children: [
+                /* @__PURE__ */ jsx(View, { style: styles.railRow, children: rail }),
+                /* @__PURE__ */ jsxs(
+                  View,
+                  {
+                    style: [
+                      styles.actions,
+                      orientation === "horizontal" ? styles.actionsRow : null,
+                      compact ? styles.actionsCompact : null
+                    ],
+                    children: [
+                      primary,
+                      secondary
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        )
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { flex: 1, backgroundColor: theme.color.surface },
+  srOnly: { position: "absolute", width: 1, height: 1, opacity: 0 },
+  top: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: theme.space[12],
+    paddingHorizontal: theme.space[16]
+  },
+  topProgress: { flex: 1 },
+  skipSpacer: { height: theme.space[20] },
+  skipIos: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[17],
+    color: theme.color.accentStrong
+  },
+  pressedText: { opacity: theme.state.pressedOpacity ?? 0.5 },
+  disabled: { opacity: theme.state.disabledOpacity },
+  body: { gap: theme.space[20], paddingHorizontal: theme.space[20], paddingTop: theme.space[24] },
+  media: {
+    aspectRatio: 4 / 3,
+    borderRadius: theme.radius.lg,
+    overflow: "hidden",
+    backgroundColor: theme.color.surface2
+  },
+  tileRow: { alignItems: "center", paddingTop: theme.space[40] },
+  text: { gap: theme.space[8] },
+  textCentred: { alignItems: "center" },
+  centred: { textAlign: "center" },
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[24],
+    lineHeight: theme.fontSize[24] * 1.3,
+    color: theme.color.text
+  },
+  copy: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[15],
+    lineHeight: theme.fontSize[15] * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  spacer: { flex: 1 },
+  footer: {
+    gap: theme.space[20],
+    paddingHorizontal: theme.space[20],
+    paddingBottom: theme.space[20]
+  },
+  footerIos: { paddingBottom: theme.space[16] },
+  railRow: { alignItems: "center" },
+  actions: { gap: theme.space[8] },
+  actionsRow: { flexDirection: "row-reverse", flexWrap: "wrap", justifyContent: "flex-end" },
+  actionsCompact: { gap: theme.space[4] },
+  bodyCompact: {
+    gap: theme.space[12],
+    paddingHorizontal: theme.space[16],
+    paddingTop: theme.space[16]
+  },
+  footerCompact: {
+    gap: theme.space[12],
+    paddingHorizontal: theme.space[16],
+    paddingBottom: theme.space[12]
+  },
+  barCompact: { paddingHorizontal: theme.space[16], paddingBottom: theme.space[12] },
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8],
+    paddingHorizontal: theme.space[20],
+    paddingBottom: theme.space[20]
+  },
+  barRail: { flex: 1, alignItems: "center" },
+  dots: { flexDirection: "row", alignItems: "center", gap: theme.space[8] },
+  dot: {
+    width: theme.space[8],
+    height: theme.space[8],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.text3,
+    opacity: theme.opacity[56]
+  },
+  dotCurrent: { backgroundColor: theme.color.accent, opacity: 1 },
+  count: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2
+  }
+}));
+
+export { ONBOARDING_MAX_DOTS, OnboardingPager };