@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-C2NTXVWM.js

@@ -0,0 +1,98 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, Easing, View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ErrorSummary({
+  errors,
+  title = "There's a problem",
+  onFocusField,
+  motion = "full"
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const animated = motion === "full" && !theme.reduceMotion;
+  const progress = React.useRef(new Animated.Value(animated ? 0 : 1)).current;
+  const enterEasing = React.useMemo(
+    () => Easing.bezier(...theme.motion.enter.easing),
+    [theme.motion.enter.easing]
+  );
+  React.useEffect(() => {
+    if (!animated) {
+      progress.setValue(1);
+      return;
+    }
+    Animated.timing(progress, {
+      toValue: 1,
+      duration: theme.motion.enter.duration,
+      easing: enterEasing,
+      useNativeDriver: true
+    }).start();
+  }, [animated, progress, enterEasing, theme.motion.enter.duration]);
+  if (errors.length === 0) return null;
+  const translateY = progress.interpolate({ inputRange: [0, 1], outputRange: [-4, 0] });
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      accessibilityRole: "alert",
+      accessibilityLabel: title,
+      style: [styles.region, { opacity: progress, transform: [{ translateY }] }],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.sm, color: theme.color.dangerOnSoft }),
+          /* @__PURE__ */ jsx(Text, { style: styles.title, children: title })
+        ] }),
+        /* @__PURE__ */ jsx(View, { style: styles.list, children: errors.map((err) => /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "link",
+            accessibilityLabel: err.message,
+            onPress: () => onFocusField?.(err.fieldId),
+            hitSlop: { top: theme.space[6], bottom: theme.space[6] },
+            children: /* @__PURE__ */ jsx(Text, { style: styles.link, children: err.message })
+          },
+          err.fieldId
+        )) })
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // Danger tone via the soft tint + on-soft ink (clears AA), with the tone edge
+  // that carries the meaning under high contrast (where the tint collapses).
+  region: {
+    gap: theme.space.s2,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.dangerSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.danger
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.dangerOnSoft
+  },
+  list: {
+    gap: theme.space.s1,
+    paddingStart: theme.space.s1
+  },
+  link: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.dangerOnSoft,
+    textDecorationLine: "underline"
+  }
+}));
+
+export { ErrorSummary };

package/dist/chunk-CDRZHT42.js

@@ -0,0 +1,424 @@
+import { DRAG_CURSOR } from './chunk-KTAC4MGE.js';
+import { Input } from './chunk-ITTYJZWX.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import * as React from 'react';
+import { PanResponder, View, StyleSheet } from 'react-native';
+import { Svg, Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var GEOMETRY = {
+  sm: { plane: 120, hue: 12, thumb: 16 },
+  md: { plane: 160, hue: 14, thumb: 18 }
+};
+function clamp(n, lo, hi) {
+  return Math.max(lo, Math.min(hi, n));
+}
+function hsvToRgb({ h, s, v }) {
+  const sat = s / 100;
+  const val = v / 100;
+  const c = val * sat;
+  const hp = h % 360 / 60;
+  const x = c * (1 - Math.abs(hp % 2 - 1));
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (hp >= 0 && hp < 1) [r, g, b] = [c, x, 0];
+  else if (hp < 2) [r, g, b] = [x, c, 0];
+  else if (hp < 3) [r, g, b] = [0, c, x];
+  else if (hp < 4) [r, g, b] = [0, x, c];
+  else if (hp < 5) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  const m = val - c;
+  return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
+}
+function rgbToHsv(r, g, b) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === rn) h = (gn - bn) / d % 6;
+    else if (max === gn) h = (bn - rn) / d + 2;
+    else h = (rn - gn) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  const s = max === 0 ? 0 : d / max * 100;
+  return { h, s, v: max * 100 };
+}
+function byteHex(n) {
+  return clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0").toUpperCase();
+}
+function rgbToHex(r, g, b) {
+  return `#${byteHex(r)}${byteHex(g)}${byteHex(b)}`;
+}
+function normalizeHex(input) {
+  const raw = input.trim().replace(/^#/, "");
+  if (/^[0-9a-fA-F]{3}$/.test(raw)) {
+    const [a, b, c] = raw;
+    return `#${a}${a}${b}${b}${c}${c}`.toUpperCase();
+  }
+  if (/^[0-9a-fA-F]{6}$/.test(raw)) return `#${raw.toUpperCase()}`;
+  return null;
+}
+function hexToRgb(input) {
+  const hex = normalizeHex(input);
+  if (!hex) return null;
+  return [
+    parseInt(hex.slice(1, 3), 16),
+    parseInt(hex.slice(3, 5), 16),
+    parseInt(hex.slice(5, 7), 16)
+  ];
+}
+function hsvToHex(hsv) {
+  return rgbToHex(...hsvToRgb(hsv));
+}
+function hexToHsv(hex, prevHue) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  const hsv = rgbToHsv(...rgb);
+  if (hsv.s === 0) hsv.h = prevHue;
+  return hsv;
+}
+function ColorField({
+  value,
+  defaultValue = "#4A7C59",
+  onValueChange,
+  showInput = true,
+  disabled = false,
+  size = "md",
+  accessibilityLabel,
+  style
+}) {
+  const isControlled = value !== void 0;
+  const initialHsv = React.useMemo(
+    () => hexToHsv(value ?? defaultValue, 0) ?? { h: 0, s: 0, v: 0 },
+    // Initial only — later syncing is handled by the effect below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const [hsv, setHsv] = React.useState(initialHsv);
+  const [hexText, setHexText] = React.useState(() => hsvToHex(initialHsv));
+  const { styles } = useStyles(sheet, { size, disabled });
+  const theme = useLoamTheme();
+  const hex = hsvToHex(hsv);
+  const hueColor = hsvToHex({ h: hsv.h, s: 100, v: 100 });
+  const planeRef = React.useRef(null);
+  const hueRef = React.useRef(null);
+  const planeBox = React.useRef({ w: 0, h: 0, x: 0, y: 0 });
+  const hueBox = React.useRef({ w: 0, x: 0 });
+  const hsvRef = React.useRef(hsv);
+  hsvRef.current = hsv;
+  const disabledRef = React.useRef(disabled);
+  disabledRef.current = disabled;
+  const editingHex = React.useRef(false);
+  const [planeW, setPlaneW] = React.useState(0);
+  const [hueW, setHueW] = React.useState(0);
+  const commit = React.useCallback(
+    (next, syncText = true) => {
+      hsvRef.current = next;
+      if (!isControlled) setHsv(next);
+      if (syncText) setHexText(hsvToHex(next));
+      onValueChange?.(hsvToHex(next));
+    },
+    [isControlled, onValueChange]
+  );
+  React.useEffect(() => {
+    if (!isControlled || value === void 0) return;
+    const next = hexToHsv(value, hsvRef.current.h);
+    if (!next || hsvToHex(next) === hsvToHex(hsvRef.current)) return;
+    setHsv(next);
+    if (!editingHex.current) setHexText(hsvToHex(next));
+  }, [value]);
+  const planeFromXY = React.useRef(() => {
+  });
+  planeFromXY.current = (pageX, pageY) => {
+    const { w, h, x, y } = planeBox.current;
+    if (!w || !h) return;
+    const s = clamp((pageX - x) / w * 100, 0, 100);
+    const v = clamp((1 - (pageY - y) / h) * 100, 0, 100);
+    commit({ ...hsvRef.current, s, v });
+  };
+  const hueFromX = React.useRef(() => {
+  });
+  hueFromX.current = (pageX) => {
+    const { w, x } = hueBox.current;
+    if (!w) return;
+    const h = clamp((pageX - x) / w * 360, 0, 360);
+    commit({ ...hsvRef.current, h });
+  };
+  const planePan = React.useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: () => !disabledRef.current,
+      onPanResponderGrant: (e) => {
+        haptics.impact("light");
+        planeFromXY.current(e.nativeEvent.pageX, e.nativeEvent.pageY);
+      },
+      onPanResponderMove: (e) => planeFromXY.current(e.nativeEvent.pageX, e.nativeEvent.pageY)
+    })
+  ).current;
+  const huePan = React.useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: () => !disabledRef.current,
+      onPanResponderGrant: (e) => {
+        haptics.impact("light");
+        hueFromX.current(e.nativeEvent.pageX);
+      },
+      onPanResponderMove: (e) => hueFromX.current(e.nativeEvent.pageX)
+    })
+  ).current;
+  const onPlaneLayout = (e) => {
+    const { width, height } = e.nativeEvent.layout;
+    planeBox.current.w = width;
+    planeBox.current.h = height;
+    setPlaneW(width);
+    planeRef.current?.measureInWindow?.((x, y) => {
+      planeBox.current.x = x;
+      planeBox.current.y = y;
+    });
+  };
+  const onHueLayout = (e) => {
+    const { width } = e.nativeEvent.layout;
+    hueBox.current.w = width;
+    setHueW(width);
+    hueRef.current?.measureInWindow?.((x) => {
+      hueBox.current.x = x;
+    });
+  };
+  const onHexChange = (text) => {
+    setHexText(text);
+    const next = hexToHsv(text, hsvRef.current.h);
+    if (next) commit(next, false);
+  };
+  const geo = GEOMETRY[size];
+  const planeThumbX = hsv.s / 100 * planeW - geo.thumb / 2;
+  const planeThumbY = (1 - hsv.v / 100) * geo.plane - geo.thumb / 2;
+  const hueThumbX = hsv.h / 360 * hueW - geo.thumb / 2;
+  const hexValid = normalizeHex(hexText) !== null;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.wrap, style], children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        ref: planeRef,
+        onLayout: onPlaneLayout,
+        accessibilityRole: "adjustable",
+        accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, saturation and brightness` : "Saturation and brightness",
+        accessibilityValue: {
+          text: `Saturation ${Math.round(hsv.s)} percent, brightness ${Math.round(hsv.v)} percent`
+        },
+        accessibilityState: { disabled },
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": Math.round(hsv.v),
+        "aria-valuetext": `Saturation ${Math.round(hsv.s)} percent, brightness ${Math.round(hsv.v)} percent`,
+        style: [styles.plane, !disabled && DRAG_CURSOR],
+        ...disabled ? {} : planePan.panHandlers,
+        children: [
+          planeW > 0 ? /* @__PURE__ */ jsxs(Svg, { width: planeW, height: geo.plane, style: StyleSheet.absoluteFill, children: [
+            /* @__PURE__ */ jsxs(Defs, { children: [
+              /* @__PURE__ */ jsxs(LinearGradient, { id: "loam-cf-sat", x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: "#ffffff", stopOpacity: 1 }),
+                /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: "#ffffff", stopOpacity: 0 })
+              ] }),
+              /* @__PURE__ */ jsxs(LinearGradient, { id: "loam-cf-val", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: "#000000", stopOpacity: 0 }),
+                /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: "#000000", stopOpacity: 1 })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: planeW, height: geo.plane, fill: hueColor }),
+            /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: planeW, height: geo.plane, fill: "url(#loam-cf-sat)" }),
+            /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: planeW, height: geo.plane, fill: "url(#loam-cf-val)" })
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles.thumb,
+                { transform: [{ translateX: planeThumbX }, { translateY: planeThumbY }] }
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        ref: hueRef,
+        onLayout: onHueLayout,
+        accessibilityRole: "adjustable",
+        accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, hue` : "Hue",
+        accessibilityValue: { min: 0, max: 360, now: Math.round(hsv.h) },
+        accessibilityState: { disabled },
+        "aria-valuemin": 0,
+        "aria-valuemax": 360,
+        "aria-valuenow": Math.round(hsv.h),
+        style: [styles.hue, !disabled && DRAG_CURSOR],
+        ...disabled ? {} : huePan.panHandlers,
+        children: [
+          hueW > 0 ? /* @__PURE__ */ jsxs(Svg, { width: hueW, height: geo.hue, style: StyleSheet.absoluteFill, children: [
+            /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(LinearGradient, { id: "loam-cf-hue", x1: "0", y1: "0", x2: "1", y2: "0", children: [
+              /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: "#ff0000" }),
+              /* @__PURE__ */ jsx(Stop, { offset: "0.17", stopColor: "#ffff00" }),
+              /* @__PURE__ */ jsx(Stop, { offset: "0.33", stopColor: "#00ff00" }),
+              /* @__PURE__ */ jsx(Stop, { offset: "0.5", stopColor: "#00ffff" }),
+              /* @__PURE__ */ jsx(Stop, { offset: "0.67", stopColor: "#0000ff" }),
+              /* @__PURE__ */ jsx(Stop, { offset: "0.83", stopColor: "#ff00ff" }),
+              /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: "#ff0000" })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              Rect,
+              {
+                x: "0",
+                y: "0",
+                width: hueW,
+                height: geo.hue,
+                rx: geo.hue / 2,
+                fill: "url(#loam-cf-hue)"
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsx(View, { style: [styles.thumb, styles.hueThumb, { transform: [{ translateX: hueThumbX }] }] })
+        ]
+      }
+    ),
+    showInput ? /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.preview, { backgroundColor: hex }] }),
+      /* @__PURE__ */ jsx(View, { style: styles.inputWrap, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: hexText,
+          onChangeText: onHexChange,
+          onFocus: () => {
+            editingHex.current = true;
+          },
+          onBlur: () => {
+            editingHex.current = false;
+            setHexText(hex);
+          },
+          editable: !disabled,
+          autoCapitalize: "characters",
+          autoCorrect: false,
+          maxLength: 7,
+          size: size === "sm" ? "sm" : "md",
+          validationState: hexValid ? "default" : "invalid",
+          showStatusIcon: false,
+          accessibilityLabel: "Hex colour",
+          style: { fontFamily: theme.font.mono }
+        }
+      ) })
+    ] }) : null
+  ] });
+}
+var HEAVY_SHADOW_RATIO = 1.2;
+var sheet = createStyleSheet((theme) => ({
+  // The per-size `width` is the picker's preferred measure: a plane a little wider
+  // than it is tall, which also leaves the swatch and the hex field a line they
+  // both fit on. The caller's `style` merges after it, so it is a default rather
+  // than a floor, and `maxWidth` keeps it from overflowing a narrower container.
+  wrap: {
+    flexDirection: "column",
+    gap: theme.space.s3,
+    maxWidth: "100%",
+    variants: {
+      size: {
+        sm: { width: GEOMETRY.sm.plane + theme.space[20] },
+        md: { width: GEOMETRY.md.plane + theme.space[40] }
+      },
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  plane: {
+    width: "100%",
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    overflow: "hidden",
+    variants: {
+      size: {
+        sm: { height: GEOMETRY.sm.plane },
+        md: { height: GEOMETRY.md.plane }
+      },
+      disabled: {}
+    }
+  },
+  hue: {
+    width: "100%",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    variants: {
+      size: {
+        sm: { height: GEOMETRY.sm.hue },
+        md: { height: GEOMETRY.md.hue }
+      },
+      disabled: {}
+    }
+  },
+  // A hollow ring so the colour underneath shows through; positioned at 0,0 and
+  // moved with translate transforms.
+  thumb: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    // Let drags fall through to the plane/rail underneath.
+    pointerEvents: "none",
+    borderRadius: theme.radius.full,
+    backgroundColor: "transparent",
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.knob,
+    // The reference's thumb elevation is tighter and more opaque than the
+    // switch knob's (`0 1px 3px` at .3 vs `0 2px 5px` at .25), so the geometry
+    // is overridden — but the *colour* comes from the theme's knob shadow,
+    // which carries the accent tint that `--sh-*` does on the web. A hardcoded
+    // `#000000` here made this one of the only shadows in the system that
+    // ignored the tint.
+    ...theme.shadow.knob,
+    shadowOffset: { width: 0, height: theme.space[1] },
+    shadowOpacity: theme.shadow.knob.shadowOpacity * HEAVY_SHADOW_RATIO,
+    shadowRadius: theme.space[3],
+    variants: {
+      size: {
+        sm: { width: GEOMETRY.sm.thumb, height: GEOMETRY.sm.thumb },
+        md: { width: GEOMETRY.md.thumb, height: GEOMETRY.md.thumb }
+      },
+      disabled: {}
+    }
+  },
+  // The hue thumb rides the vertical centre of the (short) rail.
+  hueThumb: {
+    top: "50%",
+    variants: {
+      size: {
+        sm: { marginTop: -16 / 2 },
+        md: { marginTop: -18 / 2 }
+      },
+      disabled: {}
+    }
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  preview: {
+    width: theme.space[32],
+    height: theme.space[32],
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  inputWrap: {
+    flex: 1
+  }
+}));
+
+export { ColorField };

package/dist/chunk-CJ5EOYZE.js

@@ -0,0 +1,62 @@
+import { Spinner } from './chunk-O7AE6DAF.js';
+import * as React from 'react';
+import { FlatList, View } from 'react-native';
+import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function loadMoreIfNeeded(opts) {
+  if (opts.hasMore && !opts.loading) opts.onLoadMore();
+}
+var FOOTER_SPINNER_SIZE = "lg";
+function Footer() {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(View, { style: styles.footer, children: /* @__PURE__ */ jsx(Spinner, { size: FOOTER_SPINNER_SIZE, accessibilityLabel: "Loading more" }) });
+}
+function InfiniteList({
+  data,
+  renderItem,
+  keyExtractor,
+  onLoadMore,
+  hasMore = true,
+  loading = false,
+  onEndReachedThreshold = 0.2,
+  // Accepted for API parity but intentionally inert — a virtualized list must
+  // not animate (recycled rows would flicker). Destructured so it is never
+  // forwarded onto the underlying FlatList.
+  motion: _motion = "full"
+}) {
+  const { styles } = useStyles(sheet);
+  const handleEndReached = React.useCallback(() => {
+    loadMoreIfNeeded({ hasMore, loading, onLoadMore });
+  }, [hasMore, loading, onLoadMore]);
+  const renderFlatItem = React.useCallback(
+    ({ item, index }) => /* @__PURE__ */ jsx(Fragment, { children: renderItem(item, index) }),
+    [renderItem]
+  );
+  return /* @__PURE__ */ jsx(
+    FlatList,
+    {
+      focusable: true,
+      data,
+      renderItem: renderFlatItem,
+      keyExtractor,
+      onEndReached: handleEndReached,
+      onEndReachedThreshold,
+      contentContainerStyle: styles.content,
+      ListFooterComponent: loading ? /* @__PURE__ */ jsx(Footer, {}) : null
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  content: {
+    gap: theme.space.s3,
+    padding: theme.space.s4
+  },
+  footer: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.space.s4
+  }
+}));
+
+export { InfiniteList };