@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-HJFFOOJ4.js

@@ -0,0 +1 @@
+

package/dist/chunk-HNAKS4Z3.js

@@ -0,0 +1,207 @@
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  badge: "AI",
+  drafted: "Drafted with AI",
+  generating: "Generating\u2026",
+  onDevice: "On this device",
+  cloud: (region) => `Cloud \xB7 ${region}`,
+  editedBy: (name) => `Edited by ${name}`,
+  glyph: (origin) => `AI-generated \xB7 ${origin}`,
+  detailTitle: "How this was made",
+  madeBy: "Made by",
+  ranOn: "Ran on",
+  thisDevice: "This device",
+  sources: "Sources",
+  created: "Created",
+  edited: "Edited",
+  editedYes: (name) => `Yes, by ${name}`,
+  editedNo: "No",
+  sourceCount: (n) => `${n} source${n === 1 ? "" : "s"}`
+};
+function GlyphSpinner({
+  px,
+  color,
+  motion
+}) {
+  return /* @__PURE__ */ jsx(View, { style: { width: px, height: px, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(View, { style: { transform: [{ scale: px / 16 }] }, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", color, accessibilityLabel: "", motion }) }) });
+}
+function ProvenanceMark({
+  variant = "byline",
+  origin,
+  editedBy,
+  model,
+  sources,
+  created,
+  status,
+  detail,
+  detailPresentation = "sheet",
+  defaultOpen = false,
+  platform,
+  size = "md",
+  count,
+  motion = "full",
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const labels = useLabels("provenanceMark", DEFAULT_LABELS, labelsProp);
+  const { styles, theme } = useStyles(sheet);
+  const android = isAndroidIdiom(theme, platform);
+  const inlineDetail = detailPresentation === "inline";
+  const [open, setOpen] = React.useState(inlineDetail || defaultOpen);
+  const generating = status === "generating";
+  const originText = origin === void 0 ? void 0 : origin === "device" ? labels.onDevice : labels.cloud(origin.cloud);
+  const ink = theme.color.text2;
+  const icon = { sm: theme.space[12], md: theme.space[14], lg: theme.space[16] }[size];
+  const glyphPx = { sm: theme.space[14], md: theme.space[16], lg: theme.space[20] }[size];
+  const sizeText = size === "sm" ? { fontSize: theme.fontSize[12], lineHeight: theme.space[16] } : size === "lg" ? { fontSize: theme.fontSize[15], lineHeight: theme.space[20] } : null;
+  const countText = count !== void 0 ? labels.sourceCount(count) : void 0;
+  let detailNode = null;
+  if (detail !== false && !generating) {
+    if (detail !== void 0) detailNode = detail;
+    else {
+      const rows = [];
+      if (model) rows.push([labels.madeBy, model]);
+      if (origin)
+        rows.push([
+          labels.ranOn,
+          origin === "device" ? labels.thisDevice : labels.cloud(origin.cloud)
+        ]);
+      if (sources) rows.push([labels.sources, sources]);
+      if (created) rows.push([labels.created, created]);
+      rows.push([labels.edited, editedBy ? labels.editedYes(editedBy) : labels.editedNo]);
+      detailNode = /* @__PURE__ */ jsx(View, { style: styles.facts, children: rows.map(([k, v]) => /* @__PURE__ */ jsxs(View, { style: styles.factRow, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.factKey, children: k }),
+        /* @__PURE__ */ jsx(Text, { style: styles.factValue, children: v })
+      ] }, k)) });
+    }
+  }
+  const detailSheet = detailNode ? /* @__PURE__ */ jsx(
+    Sheet,
+    {
+      open,
+      onOpenChange: setOpen,
+      title: labels.detailTitle,
+      detents: android || inlineDetail ? void 0 : ["half"],
+      presentation: inlineDetail ? "inline" : "modal",
+      children: detailNode
+    }
+  ) : null;
+  const pressable = (child, a11yLabel) => detailNode ? /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      onPress: () => setOpen(true),
+      hitSlop: theme.space[8],
+      style: ({ pressed }) => [styles.press, pressed && { opacity: theme.state.pressedOpacity }],
+      children: child
+    }
+  ) : child;
+  if (variant === "badge") {
+    const badge = generating ? /* @__PURE__ */ jsxs(Badge, { size: size === "lg" ? "md" : "sm", variant: "neutral", accessibilityLabel: labels.badge, children: [
+      /* @__PURE__ */ jsx(GlyphSpinner, { px: 12, color: theme.color.accentStrong, motion }),
+      /* @__PURE__ */ jsx(Text, { style: styles.badgeText, children: labels.badge })
+    ] }) : /* @__PURE__ */ jsx(Badge, { size: size === "lg" ? "md" : "sm", variant: "neutral", leadingIcon: "sparkle", children: countText ? `${labels.badge} \xB7 ${countText}` : labels.badge });
+    return /* @__PURE__ */ jsxs(View, { style, testID, children: [
+      pressable(badge, labels.detailTitle),
+      detailSheet
+    ] });
+  }
+  if (variant === "glyph") {
+    const name = labels.glyph(originText ?? labels.badge) + (countText ? ` \xB7 ${countText}` : "");
+    const glyph = /* @__PURE__ */ jsx(
+      View,
+      {
+        accessible: !detailNode,
+        accessibilityRole: "image",
+        accessibilityLabel: name,
+        style: [styles.glyph, { width: glyphPx, height: glyphPx }],
+        children: generating ? /* @__PURE__ */ jsx(GlyphSpinner, { px: icon, color: theme.color.accentStrong, motion }) : /* @__PURE__ */ jsx(Icon, { name: "sparkle", size: glyphPx, color: ink })
+      }
+    );
+    return /* @__PURE__ */ jsxs(View, { style, testID, children: [
+      pressable(glyph, name),
+      detailSheet
+    ] });
+  }
+  const text = [styles.byline, android ? styles.bylineAndroid : styles.bylineIos, sizeText];
+  const lead = generating ? labels.generating : labels.drafted;
+  const bylineRow = /* @__PURE__ */ jsxs(View, { style: [styles.row, inlineDetail ? null : style], testID: inlineDetail ? void 0 : testID, children: [
+    generating ? /* @__PURE__ */ jsx(GlyphSpinner, { px: icon, color: theme.color.accentStrong, motion }) : /* @__PURE__ */ jsx(Icon, { name: "sparkle", size: icon, color: ink }),
+    pressable(/* @__PURE__ */ jsx(Text, { style: [text, detailNode ? styles.link : null], children: lead }), lead),
+    !generating && originText ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: text, accessible: false, children: "\xB7" }),
+      /* @__PURE__ */ jsx(Icon, { name: origin === "device" ? "devices" : "globe", size: icon, color: ink }),
+      /* @__PURE__ */ jsx(Text, { style: text, children: originText })
+    ] }) : null,
+    !generating && countText ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: text, accessible: false, children: "\xB7" }),
+      /* @__PURE__ */ jsx(Text, { style: text, children: countText })
+    ] }) : null,
+    !generating && editedBy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: text, accessible: false, children: "\xB7" }),
+      /* @__PURE__ */ jsx(Text, { style: text, children: labels.editedBy(editedBy) })
+    ] }) : null,
+    inlineDetail ? null : detailSheet
+  ] });
+  if (!inlineDetail) return bylineRow;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.inlineStack, style], testID, children: [
+    bylineRow,
+    detailSheet
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  row: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: theme.space[6] },
+  inlineStack: { gap: theme.space.s2 },
+  press: { borderRadius: theme.radius.xs },
+  byline: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2
+  },
+  // iOS footnote 13 / 18; Android body-small 12 / 16.
+  bylineIos: { fontSize: theme.fontSize[13], lineHeight: theme.space[18] },
+  bylineAndroid: { fontSize: theme.fontSize[12], lineHeight: theme.space[16] },
+  link: { color: theme.color.accentStrong },
+  badgeText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text2
+  },
+  glyph: {
+    width: theme.space[16],
+    height: theme.space[16],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  facts: { gap: theme.space[6] },
+  factRow: { flexDirection: "row", gap: theme.space[16] },
+  factKey: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    lineHeight: theme.space[18],
+    color: theme.color.text2,
+    minWidth: theme.space[80]
+  },
+  factValue: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    lineHeight: theme.space[18],
+    color: theme.color.text
+  }
+}));
+
+export { ProvenanceMark };

package/dist/chunk-HP6ST2OW.js

@@ -0,0 +1,352 @@
+import { NumberRoll } from './chunk-IMMALLRU.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { Animated, View, Pressable, ActivityIndicator, TextInput, Easing } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var BUTTON_PRESS_SCALE = 0.88;
+var ROLL_H = { xs: 18, sm: 20, md: 24, lg: 28 };
+var IOS_VALUE_FS = { xs: 13, sm: 15, md: 17, lg: 17 };
+var ANDROID_VALUE_FS = { xs: 12, sm: 14, md: 14, lg: 16 };
+var DEFAULT_LABELS = {
+  decrease: "Decrement",
+  increase: "Increment",
+  updating: "Updating",
+  clear: "Clear"
+};
+function clamp(n, lo, hi) {
+  const low = Math.max(lo, n);
+  return hi === void 0 ? low : Math.min(hi, low);
+}
+function tidy(n) {
+  return Number(n.toFixed(6));
+}
+function Stepper({
+  value,
+  defaultValue,
+  onValueChange,
+  min = 0,
+  max,
+  step = 1,
+  size: sizeProp,
+  platform,
+  disabled = false,
+  invalid = false,
+  success = false,
+  loading = false,
+  surface = "filled",
+  editable = false,
+  accessibilityLabel,
+  pill = false,
+  motion = "full",
+  leading,
+  trailing,
+  clearable = false,
+  onClear,
+  labels: labelsProp
+}) {
+  const labels = useLabels("stepper", DEFAULT_LABELS, labelsProp);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue ?? min);
+  const current = clamp(isControlled ? value : internal, min, max);
+  const theme = useLoamTheme("stepper");
+  const android = isAndroidIdiom(theme, platform);
+  const size = sizeProp ?? (android ? "md" : "sm");
+  const { styles } = useStyles(sheet, { size, pill });
+  const [focused, setFocused] = React.useState(false);
+  const isLoading = loading && !disabled;
+  const isInvalid = !isLoading && invalid;
+  const isValid = !isLoading && !invalid && success;
+  const atMin = current <= min;
+  const atMax = max !== void 0 && current >= max;
+  const setValue = React.useCallback(
+    (next) => {
+      const clamped = clamp(tidy(next), min, max);
+      if (clamped === current) return;
+      if (!isControlled) setInternal(clamped);
+      onValueChange?.(clamped);
+    },
+    [current, isControlled, max, min, onValueChange]
+  );
+  const rollH = ROLL_H[size];
+  const decrement = () => {
+    haptics.impact("light");
+    setValue(current - step);
+  };
+  const increment = () => {
+    haptics.impact("light");
+    setValue(current + step);
+  };
+  const minusScale = React.useRef(new Animated.Value(1)).current;
+  const plusScale = React.useRef(new Animated.Value(1)).current;
+  const press = (target, to) => Animated.timing(target, {
+    toValue: to,
+    duration: theme.duration.fast,
+    easing: Easing.bezier(...theme.easing.base),
+    useNativeDriver: true
+  }).start();
+  const [text, setText] = React.useState(String(current));
+  React.useEffect(() => {
+    setText(String(current));
+  }, [current]);
+  const commit = () => {
+    const parsed = Number(text);
+    if (text.trim() === "" || Number.isNaN(parsed)) {
+      setText(String(current));
+      return;
+    }
+    setValue(parsed);
+  };
+  const iconSize = theme.ctl.icon[size];
+  const iconColor = (dim) => disabled || dim ? theme.color.text3 : theme.color.text;
+  const hit = android ? Math.max(theme.hit[size], theme.space[48]) : theme.hit[size];
+  const slop = Math.max(0, (hit - (theme.ctl[size] - theme.space[8])) / 2);
+  const ripple = android ? { color: theme.state.pressed, borderless: true, radius: hit / 2 } : void 0;
+  const valueFont = {
+    fontSize: (android ? ANDROID_VALUE_FS : IOS_VALUE_FS)[size],
+    fontWeight: android ? theme.fontWeight.medium : theme.fontWeight.semibold
+  };
+  return (
+    // The adjustable/slider semantics live on the value readout (a sibling of
+    // the +/- buttons), never on this wrapper — a slider must not contain nested
+    // interactive controls (WCAG nested-interactive). The wrapper stays a plain
+    // container with no role/label so its `<div>` carries no prohibited aria-label.
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        "aria-busy": isLoading || void 0,
+        style: [
+          styles.container,
+          surface !== "filled" ? { backgroundColor: fieldSurfaceFill(theme, surface) } : null,
+          surface === "ghost" ? { borderColor: theme.color.borderStrong } : null,
+          focused && { borderColor: theme.focus.ringColor },
+          isLoading && { borderColor: theme.focus.ringColor },
+          isInvalid && { borderColor: theme.color.danger },
+          isValid && { borderColor: theme.color.good },
+          disabled && styles.containerDisabled
+        ],
+        children: [
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.decrease,
+              accessibilityState: { disabled: disabled || atMin },
+              disabled: disabled || atMin,
+              onPress: disabled || atMin ? void 0 : decrement,
+              onPressIn: disabled || atMin ? void 0 : () => press(minusScale, BUTTON_PRESS_SCALE),
+              onPressOut: disabled || atMin ? void 0 : () => press(minusScale, 1),
+              hitSlop: slop,
+              android_ripple: ripple,
+              children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.button, { transform: [{ scale: minusScale }] }], children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: iconSize, color: iconColor(atMin) }) })
+            }
+          ),
+          leading,
+          isLoading ? /* @__PURE__ */ jsx(View, { style: [styles.valueWrap, { height: rollH }], children: /* @__PURE__ */ jsx(
+            ActivityIndicator,
+            {
+              testID: "stepper-spinner",
+              size: "small",
+              color: theme.color.accent,
+              accessibilityLabel: labels.updating
+            }
+          ) }) : editable ? /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              accessibilityLabel,
+              editable: !disabled,
+              keyboardType: "numeric",
+              value: text,
+              onChangeText: setText,
+              onEndEditing: commit,
+              onFocus: () => setFocused(true),
+              onBlur: () => {
+                setFocused(false);
+                commit();
+              },
+              "aria-invalid": invalid || void 0,
+              style: [styles.value, valueFont]
+            }
+          ) : (
+            // Clipping wrapper: overflow:hidden masks the rolling digits. This
+            // readout carries the adjustable/slider semantics (role + value) as a
+            // sibling of the buttons, so no interactive control is nested inside it,
+            // and the roll itself is decorative (the value lives on this wrapper).
+            /* @__PURE__ */ jsx(
+              View,
+              {
+                style: [styles.valueWrap, { height: rollH }],
+                accessibilityRole: "adjustable",
+                accessibilityLabel,
+                accessibilityValue: { min, max, now: current },
+                accessibilityState: { disabled },
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                "aria-valuenow": current,
+                children: /* @__PURE__ */ jsx(
+                  NumberRoll,
+                  {
+                    value: current,
+                    textStyle: [styles.valueText, valueFont],
+                    motion,
+                    decorative: true
+                  }
+                )
+              }
+            )
+          ),
+          clearable && !disabled && !isLoading && !editable && current > min ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.clear,
+              onPress: () => {
+                haptics.impact("light");
+                setValue(min);
+                onClear?.();
+              },
+              hitSlop: slop,
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: theme.color.text3 })
+            }
+          ) : null,
+          trailing,
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.increase,
+              accessibilityState: { disabled: disabled || atMax },
+              disabled: disabled || atMax,
+              onPress: disabled || atMax ? void 0 : increment,
+              onPressIn: disabled || atMax ? void 0 : () => press(plusScale, BUTTON_PRESS_SCALE),
+              onPressOut: disabled || atMax ? void 0 : () => press(plusScale, 1),
+              hitSlop: slop,
+              android_ripple: ripple,
+              children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.button, { transform: [{ scale: plusScale }] }], children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: iconSize, color: iconColor(atMax) }) })
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // A tinted tray, not an outlined box: the reference gives the wrapper a
+  // `surface2` fill, `radius.md` corners (or `radius.full` for pill), 4px
+  // padding and no border.
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: theme.space.s1,
+    // Tray = tier height; the 1.5 edge (transparent at rest, accent on focus,
+    // danger when invalid) plus this padding leave buttons at tier − 8.
+    paddingHorizontal: theme.space[4] - theme.borderWidth.strong,
+    borderWidth: theme.borderWidth.strong,
+    borderColor: "transparent",
+    backgroundColor: theme.color.surface2,
+    variants: {
+      pill: {
+        true: { borderRadius: theme.radius.full },
+        false: {}
+      },
+      size: Object.fromEntries(
+        ["xs", "sm", "md", "lg"].map((s) => [
+          s,
+          { height: theme.ctl[s], borderRadius: theme.ctl.r[s] }
+        ])
+      )
+    }
+  },
+  containerDisabled: { opacity: theme.state.disabledOpacity },
+  // Each button is a raised `surface` card with `radius.sm` corners
+  // (or `radius.full` when pill — the reference uses `50%` for a square).
+  button: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color.surface,
+    // `shadow.sm` is zeroed under high contrast and `surface` on the track it
+    // sits in is not a boundary, so the button needs a real edge there —
+    // `edge.neutral`, which is `transparent` until the preference flips.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.neutral,
+    ...theme.shadow.sm,
+    variants: {
+      // Square buttons at tier − 8 with corners tier r − 4 (Final 05).
+      size: Object.fromEntries(
+        ["xs", "sm", "md", "lg"].map((s) => [
+          s,
+          {
+            width: theme.ctl[s] - theme.space[8],
+            height: theme.ctl[s] - theme.space[8],
+            borderRadius: Math.max(0, theme.ctl.r[s] - theme.space[4])
+          }
+        ])
+      ),
+      pill: {
+        true: { borderRadius: theme.radius.full },
+        false: {}
+      }
+    }
+  },
+  // Editable case: TextInput shares font/size/minWidth.
+  value: {
+    textAlign: "center",
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text,
+    variants: {
+      size: {
+        xs: { minWidth: theme.space[32], fontSize: theme.fontSize[12] },
+        sm: { minWidth: theme.space[36], fontSize: theme.fontSize[14] },
+        md: { minWidth: theme.space[44], fontSize: theme.fontSize[16] },
+        lg: { minWidth: theme.space[52], fontSize: theme.fontSize[20] }
+      },
+      pill: { true: {}, false: {} }
+    }
+  },
+  // Roll container: clips the entering/exiting digits.
+  valueWrap: {
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      size: {
+        xs: { height: theme.space[18], minWidth: theme.space[32] },
+        sm: { height: theme.space[20], minWidth: theme.space[36] },
+        md: { height: theme.space[24], minWidth: theme.space[44] },
+        lg: { height: theme.space[28], minWidth: theme.space[52] }
+      },
+      pill: { true: {}, false: {} }
+    }
+  },
+  // Text inside valueWrap (font only, no minWidth — that lives on valueWrap).
+  valueText: {
+    textAlign: "center",
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text,
+    variants: {
+      size: {
+        xs: { fontSize: theme.fontSize[12] },
+        sm: { fontSize: theme.fontSize[14] },
+        md: { fontSize: theme.fontSize[16] },
+        lg: { fontSize: theme.fontSize[20] }
+      },
+      pill: { true: {}, false: {} }
+    }
+  },
+  // Absolutely-positioned overlay for the exiting digit.
+  valueAbsolute: {
+    position: "absolute",
+    left: 0,
+    right: 0
+  }
+}));
+
+export { Stepper };

package/dist/chunk-HW3OWDTU.js

@@ -0,0 +1 @@
+