@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-LAUJPLDB.js

@@ -0,0 +1,853 @@
+import { DRAG_CURSOR } from './chunk-KTAC4MGE.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Input } from './chunk-KXLDK6HB.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, Pressable, Text, PanResponder, StyleSheet, Platform, 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 { jsx, jsxs } 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;
+}
+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}`,
+  presetColours: "Preset colours",
+  usePreset: (hex) => `Use preset 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 ColorFieldBody({
+  value,
+  defaultValue = "#4A7C59",
+  onValueChange,
+  showInput = true,
+  surface = "filled",
+  disabled = false,
+  readOnly = false,
+  hint,
+  error,
+  success = false,
+  loading = false,
+  placeholder,
+  size = "md",
+  accessibilityLabel,
+  style,
+  savedColors,
+  presets,
+  onSavedColorsChange,
+  showAlpha = false,
+  alpha: alphaProp,
+  defaultAlpha = 1,
+  onAlphaChange,
+  labels: labelsProp,
+  motion = "full"
+}) {
+  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 },
+    // 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("color-field");
+  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 locked = disabled || readOnly;
+  const disabledRef = React.useRef(locked);
+  disabledRef.current = locked;
+  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(
+    (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 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;
+    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 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 (locked) return;
+    const next = hexToHsv(c, hsvRef.current.h);
+    if (next) commit(next);
+  };
+  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;
+  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,
+      {
+        ref: planeRef,
+        onLayout: onPlaneLayout,
+        accessibilityRole: "adjustable",
+        accessibilityLabel: accessibilityLabel ? labels.planeNamed(accessibilityLabel) : labels.saturationBrightness,
+        accessibilityValue: {
+          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": labels.planeValue(Math.round(hsv.s), Math.round(hsv.v)),
+        style: [styles.plane, !locked && DRAG_CURSOR],
+        ...locked ? {} : planePan.panHandlers,
+        ...{ tabIndex: locked ? -1 : 0, onKeyDown: keyHandler("plane") },
+        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 ? 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, !locked && DRAG_CURSOR],
+        ...locked ? {} : huePan.panHandlers,
+        ...{ tabIndex: locked ? -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: [
+              /* @__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 }] }] })
+        ]
+      }
+    ),
+    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, !locked && DRAG_CURSOR],
+        ...locked ? {} : alphaPan.panHandlers,
+        ...{ tabIndex: locked ? -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: [
+      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, motion }),
+      /* @__PURE__ */ jsx(View, { style: styles.inputWrap, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          surface,
+          value: hexText,
+          onChangeText: onHexChange,
+          onFocus: () => {
+            editingHex.current = true;
+          },
+          onBlur: () => {
+            editingHex.current = false;
+            setHexTouched(true);
+            setHexText(hex);
+          },
+          editable: !locked,
+          autoCapitalize: "characters",
+          autoCorrect: false,
+          maxLength: 7,
+          size: size === "sm" ? "md" : "lg",
+          placeholder,
+          loading,
+          success,
+          validationState: hexError || error ? "invalid" : "default",
+          message: error ?? (hexError ? labels.hexError : void 0),
+          showStatusIcon: false,
+          accessibilityLabel: labels.hexColour,
+          style: { fontFamily: theme.font.mono }
+        }
+      ) })
+    ] }) : null,
+    presets && presets.length > 0 ? /* @__PURE__ */ jsx(
+      View,
+      {
+        accessibilityRole: "radiogroup",
+        accessibilityLabel: labels.presetColours,
+        testID: "color-field-presets",
+        style: styles.saved,
+        children: presets.map((c) => {
+          const checked = c.toUpperCase() === hex.toUpperCase();
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "radio",
+              accessibilityLabel: labels.usePreset(c.toUpperCase()),
+              accessibilityState: { checked, disabled },
+              ...Platform.OS === "web" ? { "aria-checked": checked } : null,
+              disabled: locked,
+              onPress: () => pickSaved(c),
+              hitSlop: theme.space[4],
+              style: [
+                styles.swatch,
+                { backgroundColor: c },
+                checked ? styles.swatchChecked : null
+              ]
+            },
+            c
+          );
+        })
+      }
+    ) : 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: locked,
+              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: locked,
+                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,
+    hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) : null
+  ] });
+}
+var HEAVY_SHADOW_RATIO = 1.2;
+function PreviewSwatch({
+  color,
+  style,
+  motion = "full"
+}) {
+  const theme = useLoamTheme("color-field");
+  const animate = useResolvedMotion(motion, "color-field") !== "none";
+  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;
+    if (!animate) {
+      progress.setValue(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, animate, 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) => ({
+  hint: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.text3 },
+  sheetTrigger: { flexDirection: "row", alignItems: "center", gap: theme.space[8] },
+  sheetHex: { fontFamily: theme.font.mono, fontSize: theme.fontSize[14], color: theme.color.text },
+  // 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.xs,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  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.xs,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  swatchChecked: {
+    borderWidth: theme.borderWidth.heavy,
+    borderColor: theme.color.text
+  },
+  saveSlot: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderStyle: "dashed",
+    borderColor: theme.color.borderStrong
+  }
+}));
+function ColorField({
+  presentation = "inline",
+  ...props
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [local, setLocal] = React.useState(props.value ?? props.defaultValue ?? "#4A7C59");
+  const { styles } = useStyles(sheet, {
+    size: props.size ?? "md",
+    disabled: props.disabled ?? false
+  });
+  const labels = useLabels("colorField", DEFAULT_LABELS, props.labels);
+  const current = props.value ?? local;
+  if (presentation === "inline") return /* @__PURE__ */ jsx(ColorFieldBody, { ...props });
+  const locked = Boolean(props.disabled || props.readOnly);
+  return /* @__PURE__ */ jsxs(View, { style: props.style, children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: `${props.accessibilityLabel ?? labels.hexColour} ${current.toUpperCase()}`,
+        accessibilityState: { disabled: locked, expanded: open },
+        disabled: locked,
+        onPress: () => setOpen(true),
+        style: styles.sheetTrigger,
+        children: [
+          /* @__PURE__ */ jsx(PreviewSwatch, { color: current, style: styles.preview, motion: props.motion }),
+          /* @__PURE__ */ jsx(Text, { style: styles.sheetHex, children: current.toUpperCase() })
+        ]
+      }
+    ),
+    props.hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: props.hint }) : null,
+    /* @__PURE__ */ jsx(
+      Sheet,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title: props.accessibilityLabel,
+        motion: props.motion,
+        children: /* @__PURE__ */ jsx(
+          ColorFieldBody,
+          {
+            ...props,
+            style: void 0,
+            value: current,
+            onValueChange: (next) => {
+              setLocal(next);
+              props.onValueChange?.(next);
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { ColorField };