@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-YBQIN75A.js

@@ -0,0 +1,403 @@
+import { useOptionalToast } from './chunk-TUL5RUIA.js';
+import { useReorder } from './chunk-D2LN4I7I.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { announce } from './chunk-W23G6JLF.js';
+import { FieldMessage } from './chunk-BTRMA7GC.js';
+import { useInputPlatform } from './chunk-KXLDK6HB.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { View, Animated, Pressable, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  remove: (item) => `Remove ${item}`,
+  delete: "Delete",
+  reorder: (item) => `Reorder ${item}`,
+  moveUp: "Move up",
+  moveDown: "Move down",
+  moved: (item, position, count) => `${item} moved to position ${position} of ${count}.`,
+  maxReason: (max) => `Up to ${max} rows`,
+  removed: "Row removed",
+  undo: "Undo",
+  row: (position) => `Row ${position}`
+};
+function move(list, from, to) {
+  const next = list.slice();
+  const [item] = next.splice(from, 1);
+  next.splice(to, 0, item);
+  return next;
+}
+function RepeatableRows({
+  value,
+  onChange,
+  getKey,
+  create,
+  renderRow,
+  itemLabel,
+  min = 0,
+  max,
+  reorderable = true,
+  addLabel,
+  onRemove,
+  platform: platformProp,
+  labels: labelsProp,
+  surface = "filled",
+  rowError,
+  disabled = false,
+  loading = false,
+  size = "lg",
+  density = "standard",
+  fields = "boxed"
+}) {
+  const os = useInputPlatform(platformProp);
+  const { styles } = useStyles(sheet, { os });
+  const theme = useLoamTheme("repeatableRows");
+  const rowSurface = fields === "plain" && os === "ios" ? "ghost" : surface;
+  const rowSize = density === "compact" ? { sm: "sm", md: "sm", lg: "md" }[size] : size;
+  const rowH = theme.ctl[rowSize];
+  const sized = size !== "lg" || density === "compact";
+  const iosRowH = sized ? { minHeight: rowH } : null;
+  const listGap = density === "compact" ? { gap: theme.space.s1 } : null;
+  const labels = useLabels("repeatableRowsNative", DEFAULT_LABELS, labelsProp);
+  const toast = useOptionalToast();
+  const [revealed, setRevealed] = React.useState(null);
+  const latest = React.useRef(value);
+  latest.current = value;
+  const onChangeRef = React.useRef(onChange);
+  onChangeRef.current = onChange;
+  const count = value.length;
+  const atMin = count <= min || disabled;
+  const atMax = max !== void 0 && count >= max || disabled;
+  const canReorder = reorderable && count > 1 && !disabled;
+  const nameOf = (item, i) => itemLabel?.(item, i) || labels.row(i + 1);
+  const add = () => {
+    if (atMax) return;
+    onChange([...value, create()]);
+  };
+  const remove = (index) => {
+    if (atMin) return;
+    const item = value[index];
+    setRevealed(null);
+    onChange(value.filter((_, i) => i !== index));
+    onRemove?.(item, index);
+    toast?.show({
+      message: labels.removed,
+      duration: theme.timing.undoWindow,
+      countdown: true,
+      action: {
+        label: labels.undo,
+        onPress: () => {
+          const next = latest.current.slice();
+          next.splice(Math.min(index, next.length), 0, item);
+          onChangeRef.current(next);
+        }
+      }
+    });
+  };
+  const reorder = (from, to) => {
+    const list = latest.current;
+    if (to < 0 || to >= list.length || from === to) return;
+    const item = list[from];
+    onChangeRef.current(move(list, from, to));
+    announce(labels.moved(nameOf(item, from), to + 1, list.length));
+  };
+  const ghostRef = React.useRef(null);
+  const engine = useReorder({
+    disabled: !canReorder,
+    liftHaptic: "light",
+    radius: theme.radius.md,
+    // The ghost reuses the row's own body, which needs `engine` for its grip:
+    // read it through a ref filled in below.
+    renderGhost: (key) => ghostRef.current?.(key) ?? null,
+    onMove: ({ from, to }) => reorder(from, to)
+  });
+  const glide = (from, to) => engine.animate(() => reorder(from, to));
+  const handle = (item, i, key, ghost = false) => /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ...ghost ? {} : { ...engine.press(key), delayLongPress: 0 },
+      accessible: true,
+      accessibilityRole: "adjustable",
+      accessibilityValue: { min: 1, max: count, now: i + 1 },
+      "aria-valuemin": 1,
+      "aria-valuemax": count,
+      "aria-valuenow": i + 1,
+      accessibilityLabel: labels.reorder(nameOf(item, i)),
+      accessibilityActions: [
+        { name: "moveUp", label: labels.moveUp },
+        { name: "moveDown", label: labels.moveDown }
+      ],
+      onAccessibilityAction: (e) => glide(i, i + (e.nativeEvent.actionName === "moveUp" ? -1 : 1)),
+      style: [styles.handle, canReorder ? null : styles.hidden],
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: os === "ios" ? "menu" : "grip",
+          size: theme.space[18],
+          color: ghost ? theme.color.accent : theme.color.text3
+        }
+      )
+    }
+  );
+  const errorFor = (item, i) => {
+    const message = rowError?.(item, i);
+    return message ? /* @__PURE__ */ jsx(View, { style: styles.rowError, children: /* @__PURE__ */ jsx(FieldMessage, { invalid: true, children: message }) }) : null;
+  };
+  const ghostRow = (item, i, key) => /* @__PURE__ */ jsxs(View, { style: styles.lifted, children: [
+    os === "ios" ? /* @__PURE__ */ jsxs(View, { style: [styles.iosRow, iosRowH], children: [
+      atMin ? null : /* @__PURE__ */ jsx(View, { style: styles.badge }),
+      /* @__PURE__ */ jsxs(View, { style: [styles.iosContent, iosRowH], children: [
+        /* @__PURE__ */ jsx(View, { style: styles.fields, children: renderRow(item, { index: i, platform: os, surface: rowSurface, disabled }) }),
+        handle(item, i, key, true)
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(View, { style: styles.andRow, children: [
+      handle(item, i, key, true),
+      /* @__PURE__ */ jsx(View, { style: styles.fields, children: renderRow(item, { index: i, platform: os, surface: rowSurface, disabled }) })
+    ] }),
+    /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.draggedLayer })
+  ] });
+  ghostRef.current = (key) => {
+    const i = latest.current.findIndex((it, n) => getKey(it, n) === key);
+    return i < 0 ? null : ghostRow(latest.current[i], i, key);
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        role: "group",
+        accessibilityState: { busy: true },
+        "aria-busy": true,
+        testID: "repeatable-rows-loading",
+        style: styles.list,
+        children: Array.from({ length: Math.max(count, 2) }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.ctl.lg, radius: "md", decorative: true }, i))
+      }
+    );
+  }
+  if (os === "ios") {
+    return /* @__PURE__ */ jsxs(View, { style: disabled ? styles.disabled : null, "aria-disabled": disabled || void 0, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.card, ...engine.group("list"), children: [
+        value.map((item, i) => {
+          const key = getKey(item, i);
+          const name = nameOf(item, i);
+          return /* @__PURE__ */ jsxs(Animated.View, { ...engine.item(key, "list", i), children: [
+            /* @__PURE__ */ jsxs(View, { style: [styles.iosRow, iosRowH], children: [
+              atMin ? null : /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: labels.remove(name),
+                  hitSlop: theme.space[11],
+                  disabled,
+                  onPress: () => setRevealed(revealed === key ? null : key),
+                  style: [styles.badge, styles.badgeDanger],
+                  children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: "minus",
+                      size: theme.space[14],
+                      color: theme.color.dangerInk,
+                      strokeWidth: 3
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(View, { style: [styles.iosContent, iosRowH, i > 0 ? styles.iosDivider : null], children: [
+                /* @__PURE__ */ jsx(View, { style: styles.fields, children: renderRow(item, { index: i, platform: os, surface: rowSurface, disabled }) }),
+                revealed === key ? /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: labels.delete,
+                    onPress: () => remove(i),
+                    style: styles.iosDelete,
+                    children: /* @__PURE__ */ jsx(Text, { style: styles.iosDeleteLabel, children: labels.delete })
+                  }
+                ) : reorderable ? handle(item, i, key) : null
+              ] })
+            ] }),
+            errorFor(item, i)
+          ] }, key);
+        }),
+        /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: addLabel,
+            accessibilityHint: atMax && !disabled && max !== void 0 ? labels.maxReason(max) : void 0,
+            accessibilityState: { disabled: atMax },
+            disabled: atMax,
+            onPress: add,
+            style: ({ pressed }) => [
+              styles.iosRow,
+              iosRowH,
+              count > 0 ? styles.iosAddDivider : null,
+              pressed && !atMax ? styles.pressed : null,
+              atMax ? styles.disabled : null
+            ],
+            children: [
+              /* @__PURE__ */ jsx(View, { style: [styles.badge, styles.badgeAccent], children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "plus",
+                  size: theme.space[14],
+                  color: theme.color.accentInk,
+                  strokeWidth: 3
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Text, { style: styles.iosAddLabel, children: addLabel })
+            ]
+          }
+        )
+      ] }),
+      engine.overlay
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: disabled ? styles.disabled : null, "aria-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles.list, listGap], ...engine.group("list"), children: [
+      value.map((item, i) => {
+        const key = getKey(item, i);
+        return /* @__PURE__ */ jsxs(Animated.View, { ...engine.item(key, "list", i), children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.andRow, children: [
+            reorderable ? handle(item, i, key) : null,
+            /* @__PURE__ */ jsx(View, { style: styles.fields, children: renderRow(item, { index: i, platform: os, surface: rowSurface, disabled }) }),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: labels.remove(nameOf(item, i)),
+                accessibilityState: { disabled: atMin },
+                "aria-disabled": atMin,
+                onPress: () => remove(i),
+                style: ({ pressed }) => [
+                  styles.andRemove,
+                  sized && { width: rowH, height: rowH },
+                  pressed && !atMin ? styles.pressed : null,
+                  atMin ? styles.disabled : null
+                ],
+                children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.md, color: theme.color.text2 })
+              }
+            )
+          ] }),
+          errorFor(item, i)
+        ] }, key);
+      }),
+      /* @__PURE__ */ jsx(View, { style: styles.andAdd, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: rowSize,
+          leadingIcon: "plus",
+          softDisabled: atMax,
+          disabledReason: atMax && !disabled && max !== void 0 ? labels.maxReason(max) : void 0,
+          onPress: add,
+          children: addLabel
+        }
+      ) })
+    ] }),
+    engine.overlay
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  /* ---- iOS · edit mode ---- */
+  card: {
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.md,
+    overflow: "hidden"
+  },
+  iosRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.ctl.lg,
+    paddingStart: theme.space.s4,
+    backgroundColor: theme.color.surface
+  },
+  iosContent: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: theme.ctl.lg,
+    paddingEnd: theme.space.s4,
+    gap: theme.space.s2
+  },
+  iosDivider: { borderTopWidth: theme.borderWidth.thin, borderTopColor: theme.color.border },
+  iosAddDivider: { borderTopWidth: theme.borderWidth.thin, borderTopColor: theme.color.border },
+  badge: {
+    width: theme.space[22],
+    height: theme.space[22],
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  badgeDanger: { backgroundColor: theme.color.danger },
+  badgeAccent: { backgroundColor: theme.color.accent },
+  iosAddLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    letterSpacing: theme.type.body.letterSpacing,
+    color: theme.color.accentStrong
+  },
+  iosDelete: {
+    alignSelf: "stretch",
+    justifyContent: "center",
+    paddingHorizontal: theme.space.s4,
+    marginEnd: -theme.space.s4,
+    backgroundColor: theme.color.danger
+  },
+  iosDeleteLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.dangerInk
+  },
+  /* ---- Android · fields with remove ---- */
+  list: { gap: theme.space.s2 },
+  andRow: { flexDirection: "row", alignItems: "center", gap: theme.space[4] },
+  andRemove: {
+    width: theme.space[48],
+    height: theme.space[48],
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full
+  },
+  andAdd: { flexDirection: "row", paddingStart: theme.space[28] },
+  /* ---- shared ---- */
+  fields: { flex: 1, minWidth: 0 },
+  handle: {
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      os: {
+        ios: { width: theme.space[24], height: theme.ctl.lg },
+        android: { width: theme.space[24], height: theme.space[48] }
+      }
+    }
+  },
+  hidden: { opacity: 0 },
+  // The row in the air (Sortable's lift): a 12-radius surface, an accent edge and
+  // the dragged state layer; the engine's ghost carries the shadow.
+  lifted: {
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.focus.ringColor,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden"
+  },
+  draggedLayer: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: theme.state.dragged
+  },
+  pressed: { backgroundColor: theme.state.pressed },
+  disabled: { opacity: theme.state.disabledOpacity },
+  rowError: { paddingHorizontal: theme.space.s4, paddingBottom: theme.space.s2 }
+}));
+
+export { RepeatableRows };

package/dist/{chunk-PNF3NKB5.js → chunk-YJ5PXOX3.js}

@@ -1,4 +1,6 @@
+import { softToneSkin } from './chunk-PJLTKDVY.js';
 import { useLabels } from './chunk-APCWFOZW.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Animated, Easing, AccessibilityInfo, View } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
@@ -7,9 +9,9 @@ import { jsx } from 'react/jsx-runtime';
 var DEFAULT_LABELS = {
   loading: "Loading"
 };
-var CIRCLE_DEFAULT = 40;
-var TEXT_HEIGHT = 14;
-var RECT_HEIGHT = 120;
+var CIRCLE_BY_SIZE = { sm: 32, md: 40, lg: 56 };
+var TEXT_BY_SIZE = { sm: 10, md: 14, lg: 18 };
+var RECT_BY_SIZE = { sm: 80, md: 120, lg: 160 };
 function Skeleton({
   variant = "text",
   width,
@@ -18,6 +20,9 @@ function Skeleton({
   style,
   accessibilityLabel: accessibilityLabelProp,
   decorative = false,
+  motion,
+  size = "md",
+  tone,
   labels: labelsProp,
   testID
 }) {
@@ -25,20 +30,25 @@ function Skeleton({
   const labels = useLabels("skeleton", DEFAULT_LABELS, labelsProp);
   const accessibilityLabel = accessibilityLabelProp ?? labels.loading;
   const { styles } = useStyles(sheet, { variant });
+  const pulse = useResolvedMotion(motion, "skeleton") === "full";
   let resolvedWidth;
   let resolvedHeight;
   if (variant === "circle") {
-    const size = width ?? height ?? CIRCLE_DEFAULT;
-    resolvedWidth = size;
-    resolvedHeight = size;
+    const dim = width ?? height ?? theme.space[CIRCLE_BY_SIZE[size]];
+    resolvedWidth = dim;
+    resolvedHeight = dim;
   } else {
     resolvedWidth = width ?? "100%";
-    resolvedHeight = height ?? (variant === "text" ? TEXT_HEIGHT : RECT_HEIGHT);
+    resolvedHeight = height ?? (variant === "text" ? theme.space[TEXT_BY_SIZE[size]] : theme.space[RECT_BY_SIZE[size]]);
   }
   const opacity = React.useRef(new Animated.Value(1)).current;
   React.useEffect(() => {
     let cancelled = false;
     let loop;
+    if (!pulse) {
+      opacity.setValue(1);
+      return void 0;
+    }
     const bezier = Easing.bezier(...theme.easing.base);
     AccessibilityInfo.isReduceMotionEnabled().then((reduced) => {
       if (cancelled || reduced) return;
@@ -64,7 +74,7 @@ function Skeleton({
       cancelled = true;
       loop?.stop();
     };
-  }, [opacity, theme.duration.slow, theme.easing.base]);
+  }, [opacity, pulse, theme.duration.slow, theme.easing.base]);
   return /* @__PURE__ */ jsx(
     Animated.View,
     {
@@ -82,6 +92,7 @@ function Skeleton({
       style: [
         styles.base,
         { width: resolvedWidth, height: resolvedHeight, opacity },
+        tone ? { backgroundColor: softToneSkin(theme, tone).fill } : null,
         radius ? { borderRadius: theme.radius[radius] } : null,
         style
       ]
@@ -91,15 +102,19 @@ function Skeleton({
 function SkeletonText({
   lines = 3,
   lastLineWidth = "60%",
-  lineHeight = TEXT_HEIGHT,
+  lineHeight: lineHeightProp,
+  size = "md",
+  tone,
   style,
   accessibilityLabel: accessibilityLabelProp,
+  motion,
   labels: labelsProp,
   testID
 }) {
   const theme = useLoamTheme("skeleton");
   const labels = useLabels("skeleton", DEFAULT_LABELS, labelsProp);
   const accessibilityLabel = accessibilityLabelProp ?? labels.loading;
+  const lineHeight = lineHeightProp ?? theme.space[TEXT_BY_SIZE[size]];
   return (
     // One labelled "Loading" image for the group; the bones are hidden.
     /* @__PURE__ */ jsx(
@@ -116,6 +131,8 @@ function SkeletonText({
           {
             variant: "text",
             decorative: true,
+            motion,
+            tone,
             height: lineHeight,
             style: i === lines - 1 ? { width: lastLineWidth } : void 0
           },
@@ -130,9 +147,9 @@ var sheet = createStyleSheet((theme) => ({
     backgroundColor: theme.color.surface2,
     variants: {
       variant: {
-        text: { borderRadius: theme.radius.sm },
+        text: { borderRadius: theme.radius.xs },
         circle: { borderRadius: theme.radius.full },
-        rect: { borderRadius: theme.radius.lg }
+        rect: { borderRadius: theme.radius.md }
       }
     }
   }