@btndprojects/loam-ui-native 0.1.1 → 0.2.1

package/dist/{chunk-CDRZHT42.js → chunk-W63AJTM7.js}

@@ -1,9 +1,11 @@
 import { DRAG_CURSOR } from './chunk-KTAC4MGE.js';
-import { Input } from './chunk-ITTYJZWX.js';
+import { Input } from './chunk-7BUIKDD6.js';
 import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
-import { PanResponder, View, StyleSheet } from 'react-native';
-import { Svg, Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
+import { PanResponder, View, StyleSheet, Pressable, Animated, Easing } from 'react-native';
+import { Svg, Defs, LinearGradient, Stop, Rect, Pattern } from 'react-native-svg';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -84,6 +86,30 @@ function hexToHsv(hex, prevHue) {
   if (hsv.s === 0) hsv.h = prevHue;
   return hsv;
 }
+var DEFAULT_LABELS = {
+  saturationBrightness: "Saturation and brightness",
+  hue: "Hue",
+  opacity: "Opacity",
+  planeNamed: (name) => `${name}, saturation and brightness`,
+  hueNamed: (name) => `${name}, hue`,
+  opacityNamed: (name) => `${name}, opacity`,
+  planeValue: (s, v) => `Saturation ${s} percent, brightness ${v} percent`,
+  opacityValue: (pct) => `${pct}% opacity`,
+  hexColour: "Hex colour",
+  hexError: "Enter a 6-digit hex, like #4A7C59",
+  savedColours: "Saved colours",
+  useSaved: (hex) => `Use saved colour ${hex}`,
+  saveColour: "Save this colour"
+};
+var CHECK = 4;
+function Checker({ id, dark }) {
+  const [a, b] = dark ? ["#000000", "#333333"] : ["#ffffff", "#e0e0e0"];
+  return /* @__PURE__ */ jsxs(Pattern, { id, width: CHECK * 2, height: CHECK * 2, patternUnits: "userSpaceOnUse", children: [
+    /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: CHECK * 2, height: CHECK * 2, fill: a }),
+    /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: CHECK, height: CHECK, fill: b }),
+    /* @__PURE__ */ jsx(Rect, { x: CHECK, y: CHECK, width: CHECK, height: CHECK, fill: b })
+  ] });
+}
 function ColorField({
   value,
   defaultValue = "#4A7C59",
@@ -92,8 +118,16 @@ function ColorField({
   disabled = false,
   size = "md",
   accessibilityLabel,
-  style
+  style,
+  savedColors,
+  onSavedColorsChange,
+  showAlpha = false,
+  alpha: alphaProp,
+  defaultAlpha = 1,
+  onAlphaChange,
+  labels: labelsProp
 }) {
+  const labels = useLabels("colorField", DEFAULT_LABELS, labelsProp);
   const isControlled = value !== void 0;
   const initialHsv = React.useMemo(
     () => hexToHsv(value ?? defaultValue, 0) ?? { h: 0, s: 0, v: 0 },
@@ -104,7 +138,7 @@ function ColorField({
   const [hsv, setHsv] = React.useState(initialHsv);
   const [hexText, setHexText] = React.useState(() => hsvToHex(initialHsv));
   const { styles } = useStyles(sheet, { size, disabled });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("color-field");
   const hex = hsvToHex(hsv);
   const hueColor = hsvToHex({ h: hsv.h, s: 100, v: 100 });
   const planeRef = React.useRef(null);
@@ -116,6 +150,7 @@ function ColorField({
   const disabledRef = React.useRef(disabled);
   disabledRef.current = disabled;
   const editingHex = React.useRef(false);
+  const [hexTouched, setHexTouched] = React.useState(false);
   const [planeW, setPlaneW] = React.useState(0);
   const [hueW, setHueW] = React.useState(0);
   const commit = React.useCallback(
@@ -173,6 +208,32 @@ function ColorField({
       onPanResponderMove: (e) => hueFromX.current(e.nativeEvent.pageX)
     })
   ).current;
+  const nudge = (axis, key, big) => {
+    if (disabledRef.current) return false;
+    const step = big ? 10 : 1;
+    const cur = hsvRef.current;
+    if (axis === "plane") {
+      if (key === "ArrowRight") commit({ ...cur, s: clamp(cur.s + step, 0, 100) });
+      else if (key === "ArrowLeft") commit({ ...cur, s: clamp(cur.s - step, 0, 100) });
+      else if (key === "ArrowUp") commit({ ...cur, v: clamp(cur.v + step, 0, 100) });
+      else if (key === "ArrowDown") commit({ ...cur, v: clamp(cur.v - step, 0, 100) });
+      else return false;
+      return true;
+    }
+    if (key === "ArrowRight" || key === "ArrowUp") commit({ ...cur, h: clamp(cur.h + step, 0, 360) });
+    else if (key === "ArrowLeft" || key === "ArrowDown") commit({ ...cur, h: clamp(cur.h - step, 0, 360) });
+    else if (key === "Home") commit({ ...cur, h: 0 });
+    else if (key === "End") commit({ ...cur, h: 360 });
+    else return false;
+    return true;
+  };
+  const keyHandler = (axis) => (e) => {
+    if (nudge(axis, e.key, Boolean(e.shiftKey))) e.preventDefault?.();
+  };
+  const hueActions = [{ name: "increment" }, { name: "decrement" }];
+  const onHueAction = (e) => {
+    nudge("hue", e.nativeEvent.actionName === "increment" ? "ArrowRight" : "ArrowLeft", true);
+  };
   const onPlaneLayout = (e) => {
     const { width, height } = e.nativeEvent.layout;
     planeBox.current.w = width;
@@ -191,6 +252,74 @@ function ColorField({
       hueBox.current.x = x;
     });
   };
+  const alphaControlled = alphaProp !== void 0;
+  const [alphaInternal, setAlphaInternal] = React.useState(defaultAlpha);
+  const alpha = clamp(alphaControlled ? alphaProp : alphaInternal, 0, 1);
+  const alphaRefVal = React.useRef(alpha);
+  alphaRefVal.current = alpha;
+  const commitAlpha = React.useRef(() => {
+  });
+  commitAlpha.current = (next) => {
+    const a = clamp(Math.round(next * 100) / 100, 0, 1);
+    alphaRefVal.current = a;
+    if (!alphaControlled) setAlphaInternal(a);
+    onAlphaChange?.(a);
+  };
+  const alphaRef = React.useRef(null);
+  const alphaBox = React.useRef({ w: 0, x: 0 });
+  const [alphaW, setAlphaW] = React.useState(0);
+  const alphaFromX = (pageX) => {
+    const { w, x } = alphaBox.current;
+    if (w) commitAlpha.current((pageX - x) / w);
+  };
+  const alphaFromXRef = React.useRef(alphaFromX);
+  alphaFromXRef.current = alphaFromX;
+  const alphaPan = React.useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: () => !disabledRef.current,
+      onPanResponderGrant: (e) => {
+        haptics.impact("light");
+        alphaFromXRef.current(e.nativeEvent.pageX);
+      },
+      onPanResponderMove: (e) => alphaFromXRef.current(e.nativeEvent.pageX)
+    })
+  ).current;
+  const onAlphaLayout = (e) => {
+    const { width } = e.nativeEvent.layout;
+    alphaBox.current.w = width;
+    setAlphaW(width);
+    alphaRef.current?.measureInWindow?.((x) => {
+      alphaBox.current.x = x;
+    });
+  };
+  const onAlphaKey = (e) => {
+    if (disabledRef.current) return;
+    const step = e.shiftKey ? 0.1 : 0.01;
+    const cur = alphaRefVal.current;
+    let next;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") next = cur + step;
+    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = cur - step;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = 1;
+    else return;
+    e.preventDefault?.();
+    commitAlpha.current(next);
+  };
+  const onAlphaAction = (e) => {
+    if (disabledRef.current) return;
+    commitAlpha.current(alphaRefVal.current + (e.nativeEvent.actionName === "increment" ? 0.1 : -0.1));
+  };
+  const saveCurrent = () => {
+    const key = hex.toUpperCase();
+    const rest = (savedColors ?? []).filter((c) => c.toUpperCase() !== key);
+    onSavedColorsChange?.([key, ...rest]);
+  };
+  const pickSaved = (c) => {
+    if (disabled) return;
+    const next = hexToHsv(c, hsvRef.current.h);
+    if (next) commit(next);
+  };
   const onHexChange = (text) => {
     setHexText(text);
     const next = hexToHsv(text, hsvRef.current.h);
@@ -201,6 +330,7 @@ function ColorField({
   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;
+  const hexError = !hexValid && (hexTouched || !/^\s*#?[0-9a-fA-F]{0,6}\s*$/.test(hexText));
   return /* @__PURE__ */ jsxs(View, { style: [styles.wrap, style], children: [
     /* @__PURE__ */ jsxs(
       View,
@@ -208,17 +338,18 @@ function ColorField({
         ref: planeRef,
         onLayout: onPlaneLayout,
         accessibilityRole: "adjustable",
-        accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, saturation and brightness` : "Saturation and brightness",
+        accessibilityLabel: accessibilityLabel ? labels.planeNamed(accessibilityLabel) : labels.saturationBrightness,
         accessibilityValue: {
-          text: `Saturation ${Math.round(hsv.s)} percent, brightness ${Math.round(hsv.v)} percent`
+          text: labels.planeValue(Math.round(hsv.s), Math.round(hsv.v))
         },
         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`,
+        "aria-valuetext": labels.planeValue(Math.round(hsv.s), Math.round(hsv.v)),
         style: [styles.plane, !disabled && DRAG_CURSOR],
         ...disabled ? {} : planePan.panHandlers,
+        ...{ tabIndex: disabled ? -1 : 0, onKeyDown: keyHandler("plane") },
         children: [
           planeW > 0 ? /* @__PURE__ */ jsxs(Svg, { width: planeW, height: geo.plane, style: StyleSheet.absoluteFill, children: [
             /* @__PURE__ */ jsxs(Defs, { children: [
@@ -253,14 +384,17 @@ function ColorField({
         ref: hueRef,
         onLayout: onHueLayout,
         accessibilityRole: "adjustable",
-        accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, hue` : "Hue",
+        accessibilityLabel: accessibilityLabel ? labels.hueNamed(accessibilityLabel) : labels.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),
+        accessibilityActions: hueActions,
+        onAccessibilityAction: onHueAction,
         style: [styles.hue, !disabled && DRAG_CURSOR],
         ...disabled ? {} : huePan.panHandlers,
+        ...{ tabIndex: disabled ? -1 : 0, onKeyDown: keyHandler("hue") },
         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: [
@@ -288,8 +422,55 @@ function ColorField({
         ]
       }
     ),
+    showAlpha ? /* @__PURE__ */ jsxs(
+      View,
+      {
+        ref: alphaRef,
+        onLayout: onAlphaLayout,
+        accessibilityRole: "adjustable",
+        accessibilityLabel: accessibilityLabel ? labels.opacityNamed(accessibilityLabel) : labels.opacity,
+        accessibilityValue: { min: 0, max: 100, now: Math.round(alpha * 100), text: labels.opacityValue(Math.round(alpha * 100)) },
+        accessibilityState: { disabled },
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": Math.round(alpha * 100),
+        "aria-valuetext": labels.opacityValue(Math.round(alpha * 100)),
+        accessibilityActions: hueActions,
+        onAccessibilityAction: onAlphaAction,
+        style: [styles.hue, !disabled && DRAG_CURSOR],
+        ...disabled ? {} : alphaPan.panHandlers,
+        ...{ tabIndex: disabled ? -1 : 0, onKeyDown: onAlphaKey },
+        children: [
+          alphaW > 0 ? /* @__PURE__ */ jsxs(Svg, { width: alphaW, height: geo.hue, style: StyleSheet.absoluteFill, children: [
+            /* @__PURE__ */ jsxs(Defs, { children: [
+              /* @__PURE__ */ jsx(Checker, { id: "loam-cf-check" }),
+              /* @__PURE__ */ jsxs(LinearGradient, { id: "loam-cf-alpha", x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: hex, stopOpacity: 0 }),
+                /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: hex, stopOpacity: 1 })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: alphaW, height: geo.hue, rx: geo.hue / 2, fill: "url(#loam-cf-check)" }),
+            /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: alphaW, height: geo.hue, rx: geo.hue / 2, fill: "url(#loam-cf-alpha)" })
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles.thumb,
+                styles.hueThumb,
+                { transform: [{ translateX: alpha * alphaW - geo.thumb / 2 }] }
+              ]
+            }
+          )
+        ]
+      }
+    ) : null,
     showInput ? /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
-      /* @__PURE__ */ jsx(View, { style: [styles.preview, { backgroundColor: hex }] }),
+      showAlpha ? /* @__PURE__ */ jsx(View, { style: [styles.preview, styles.alphaPreview], testID: "color-field-alpha-preview", children: [false, true].map((dark) => /* @__PURE__ */ jsxs(Svg, { width: "50%", height: "100%", children: [
+        /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsx(Checker, { id: dark ? "loam-cf-pd" : "loam-cf-pl", dark }) }),
+        /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${dark ? "loam-cf-pd" : "loam-cf-pl"})` }),
+        /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: hex, fillOpacity: alpha })
+      ] }, String(dark))) }) : /* @__PURE__ */ jsx(PreviewSwatch, { color: hex, style: styles.preview }),
       /* @__PURE__ */ jsx(View, { style: styles.inputWrap, children: /* @__PURE__ */ jsx(
         Input,
         {
@@ -300,6 +481,7 @@ function ColorField({
           },
           onBlur: () => {
             editingHex.current = false;
+            setHexTouched(true);
             setHexText(hex);
           },
           editable: !disabled,
@@ -307,16 +489,74 @@ function ColorField({
           autoCorrect: false,
           maxLength: 7,
           size: size === "sm" ? "sm" : "md",
-          validationState: hexValid ? "default" : "invalid",
+          validationState: hexError ? "invalid" : "default",
+          message: hexError ? labels.hexError : void 0,
           showStatusIcon: false,
-          accessibilityLabel: "Hex colour",
+          accessibilityLabel: labels.hexColour,
           style: { fontFamily: theme.font.mono }
         }
       ) })
+    ] }) : null,
+    savedColors || onSavedColorsChange ? /* @__PURE__ */ jsxs(View, { accessibilityRole: "group", accessibilityLabel: labels.savedColours, style: styles.saved, children: [
+      (savedColors ?? []).map((c) => /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.useSaved(c.toUpperCase()),
+          accessibilityState: { disabled },
+          disabled,
+          onPress: () => pickSaved(c),
+          hitSlop: theme.space[4],
+          style: [styles.swatch, { backgroundColor: c }]
+        },
+        c
+      )),
+      onSavedColorsChange ? (
+        // A swatch-sized slot rather than a 30px button, so the row reads
+        // as one strip of equal squares with the next free slot at its end.
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: labels.saveColour,
+            accessibilityState: { disabled },
+            disabled,
+            onPress: saveCurrent,
+            hitSlop: theme.space[4],
+            style: ({ pressed }) => [
+              styles.swatch,
+              styles.saveSlot,
+              pressed ? { backgroundColor: theme.state.pressed } : null,
+              disabled ? { opacity: theme.state.disabledOpacity } : null
+            ],
+            children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14, color: theme.color.text2 })
+          }
+        )
+      ) : null
     ] }) : null
   ] });
 }
 var HEAVY_SHADOW_RATIO = 1.2;
+function PreviewSwatch({ color, style }) {
+  const theme = useLoamTheme("color-field");
+  const progress = React.useRef(new Animated.Value(1)).current;
+  const [range, setRange] = React.useState([color, color]);
+  React.useEffect(() => {
+    setRange((prev) => prev[1] === color ? prev : [prev[1], color]);
+  }, [color]);
+  React.useEffect(() => {
+    if (range[0] === range[1]) return;
+    progress.setValue(0);
+    Animated.timing(progress, {
+      toValue: 1,
+      duration: theme.spring.fe.duration,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: false
+    }).start();
+  }, [range, progress, theme.spring.fe.duration]);
+  const backgroundColor = progress.interpolate({ inputRange: [0, 1], outputRange: range });
+  return /* @__PURE__ */ jsx(Animated.View, { style: [style, { backgroundColor }] });
+}
 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
@@ -418,6 +658,30 @@ var sheet = createStyleSheet((theme) => ({
   },
   inputWrap: {
     flex: 1
+  },
+  // Light and dark checker halves side by side, clipped to the swatch shape.
+  alphaPreview: {
+    flexDirection: "row",
+    overflow: "hidden"
+  },
+  saved: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space.s1
+  },
+  swatch: {
+    width: theme.space[24],
+    height: theme.space[24],
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  saveSlot: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderStyle: "dashed",
+    borderColor: theme.color.borderStrong
   }
 }));
 

package/dist/{chunk-XXXEFXY5.js → chunk-W74TXYFB.js}

@@ -1,12 +1,16 @@
+import { useLabels } from './chunk-APCWFOZW.js';
 import * as React from 'react';
 import { Animated, Easing, View, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/thinking/thinking.tsx
+var DEFAULT_LABELS = {
+  label: "Thinking\u2026",
+  accessibleLabel: "Thinking"
+};
 var DOT_BOX = { sm: 6, md: 8, lg: 10 };
 function useThinkingPulse(active) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("thinking");
   const p = React.useRef(new Animated.Value(0)).current;
   const { duration, easing } = theme.motion.loop;
   React.useEffect(() => {
@@ -30,17 +34,21 @@ function useThinkingPulse(active) {
   } : null;
 }
 function Thinking({
-  label = "Thinking\u2026",
+  label: labelProp,
   size = "md",
   tone = "working",
   motion = "full",
   announce = true,
-  accessibleLabel = "Thinking",
+  accessibleLabel: accessibleLabelProp,
+  labels: labelsProp,
   style,
   testID
 }) {
+  const labels = useLabels("thinking", DEFAULT_LABELS, labelsProp);
+  const label = labelProp ?? labels.label;
+  const accessibleLabel = accessibleLabelProp ?? labels.accessibleLabel;
   const { styles } = useStyles(sheet, { tone, size });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("thinking");
   const pulseStyle = useThinkingPulse(motion === "full" && !theme.reduceMotion);
   const hasLabel = label !== "";
   const box = DOT_BOX[size];