@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-OVTK7A6T.js

@@ -0,0 +1,615 @@
+import { ColorField } from './chunk-LAUJPLDB.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Badge } from './chunk-LGNTP5XA.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 * as React from 'react';
+import { View, Text, Pressable, Platform } from 'react-native';
+import { useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  chartColour: (index) => `Colour ${index}`,
+  customColour: "Custom colour",
+  noColour: "No colour",
+  recent: "Recent",
+  recentColour: (hex) => `Recent colour ${hex}`,
+  ratio: (ratio) => `${ratio} : 1`,
+  passesAA: "AA",
+  largeOnly: "Large text only",
+  failsAA: "Fails AA",
+  hexColour: "Hex colour",
+  hexError: "Use 3 or 6 hex digits.",
+  eyedropper: "Pick a colour from the screen",
+  picking: "Tap anywhere to pick a colour",
+  save: "Save",
+  labelName: "Label name"
+};
+var CHART_SWATCHES = [1, 2, 3, 4, 5, 6].map((n) => ({
+  value: `--chart-${n}`,
+  label: `Colour ${n}`
+}));
+var SLOT = { ios: 44, android: 48 };
+function resolve(value, theme) {
+  const chart = /^--chart-([1-6])$/.exec(value);
+  if (chart) return theme.chart[`c${chart[1]}`];
+  if (value.startsWith("--")) {
+    const key = value.slice(2).replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+    const hit = theme.color[key];
+    if (typeof hit === "string") return hit;
+  }
+  return value;
+}
+function toRgb(text) {
+  let t = text.trim();
+  const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(t);
+  if (short) t = `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`;
+  const long = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(t);
+  if (!long) return null;
+  return [parseInt(long[1], 16), parseInt(long[2], 16), parseInt(long[3], 16)];
+}
+function contrastRatio(a, b) {
+  const ra = toRgb(a);
+  const rb = toRgb(b);
+  if (!ra || !rb) return null;
+  const lum = ([r, g, bl]) => {
+    const lin = (c) => {
+      const v = c / 255;
+      return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(bl);
+  };
+  const [hi, lo] = [lum(ra), lum(rb)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+function useResolvedPlatform(explicit) {
+  const theme = useLoamTheme("color-picker");
+  if (explicit) return explicit;
+  if (Platform.OS === "ios") return "ios";
+  if (Platform.OS === "android") return "android";
+  return theme.platform === "iOS" ? "ios" : "android";
+}
+function normalizeHex(text) {
+  const rgb = toRgb(text.trim().startsWith("#") ? text : `#${text}`);
+  if (!rgb) return null;
+  return `#${rgb.map((n) => n.toString(16).padStart(2, "0")).join("")}`.toUpperCase();
+}
+function asList(c) {
+  if (!c) return [];
+  return "color" in c ? [c] : c;
+}
+function ColorPickerContrastRow({
+  color,
+  against,
+  showSwatch = false,
+  labels: labelsProp
+}) {
+  const theme = useLoamTheme("color-picker");
+  const labels = useLabels("colorPicker", DEFAULT_LABELS, labelsProp);
+  const ratio = contrastRatio(resolve(color, theme), resolve(against.color, theme));
+  if (ratio === null) return null;
+  const need = against.size === "lg" ? 3 : 4.5;
+  const verdict = ratio >= need ? "pass" : ratio >= 3 ? "large" : "fail";
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID: "color-picker-contrast",
+      style: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+      children: [
+        showSwatch ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: theme.space[24],
+              height: theme.space[24],
+              borderRadius: theme.radius.sm,
+              backgroundColor: resolve(color, theme)
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(Text, { style: { flex: 1, fontSize: theme.fontSize[13], color: theme.color.text2 }, children: against.label }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              fontFamily: theme.font.mono,
+              fontSize: theme.fontSize[13],
+              fontWeight: theme.fontWeight.semibold,
+              fontVariant: ["tabular-nums"],
+              color: theme.color.text
+            },
+            children: labels.ratio(ratio.toFixed(1))
+          }
+        ),
+        verdict === "pass" ? /* @__PURE__ */ jsx(Badge, { variant: "good", leadingIcon: "check", children: labels.passesAA }) : verdict === "large" ? /* @__PURE__ */ jsx(Badge, { variant: "warn", leadingIcon: "alert-triangle", children: labels.largeOnly }) : /* @__PURE__ */ jsx(Badge, { variant: "danger", leadingIcon: "x", children: labels.failsAA })
+      ]
+    }
+  );
+}
+function ColorPickerCustomPanel({
+  value,
+  onValueChange,
+  title,
+  contrastAgainst,
+  eyedropper = false,
+  onEyedropper,
+  picking: pickingProp,
+  defaultPicking = false,
+  defaultDraft,
+  surface,
+  labels: labelsProp,
+  testID
+}) {
+  const theme = useLoamTheme("color-picker");
+  const labels = useLabels("colorPicker", DEFAULT_LABELS, labelsProp);
+  const [draft, setDraft] = React.useState(defaultDraft ?? null);
+  const [touched, setTouched] = React.useState(defaultDraft !== void 0);
+  const [pickingState, setPicking] = React.useState(defaultPicking);
+  const picking = pickingProp ?? pickingState;
+  const text = draft ?? value ?? "";
+  const parsed = normalizeHex(text);
+  const invalid = text !== "" && parsed === null && touched;
+  const shown = parsed ?? value;
+  const rows = asList(contrastAgainst);
+  const runEyedropper = async () => {
+    if (picking) {
+      setPicking(false);
+      return;
+    }
+    setPicking(true);
+    try {
+      const hit = await onEyedropper?.();
+      const hex = hit ? normalizeHex(hit) : null;
+      if (hex) {
+        setDraft(null);
+        onValueChange?.(hex);
+      }
+    } finally {
+      setPicking(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID: testID ?? "color-picker-panel",
+      style: {
+        gap: theme.space.s3,
+        padding: theme.space.s3,
+        borderRadius: theme.radius.lg,
+        borderWidth: theme.borderWidth.hair,
+        borderColor: theme.color.border,
+        backgroundColor: theme.color.surface
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              fontSize: theme.fontSize[14],
+              fontWeight: theme.fontWeight.semibold,
+              color: theme.color.text
+            },
+            children: title ?? labels.customColour
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 }, children: [
+          /* @__PURE__ */ jsx(View, { style: { paddingTop: theme.space.s2 }, children: invalid || !shown ? /* @__PURE__ */ jsx(NoneMark, { size: theme.space[24], radius: theme.radius.xs, theme }) : /* @__PURE__ */ jsx(
+            View,
+            {
+              testID: "color-picker-panel-preview",
+              style: {
+                width: theme.space[24],
+                height: theme.space[24],
+                borderRadius: theme.radius.xs,
+                backgroundColor: resolve(shown, theme)
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              surface,
+              value: text,
+              onChangeText: (t) => {
+                setDraft(t);
+                const hex = normalizeHex(t);
+                if (hex) onValueChange?.(hex);
+              },
+              onBlur: () => setTouched(true),
+              autoCapitalize: "characters",
+              autoCorrect: false,
+              maxLength: 7,
+              validationState: invalid ? "invalid" : "default",
+              message: invalid ? labels.hexError : void 0,
+              showStatusIcon: false,
+              accessibilityLabel: labels.hexColour,
+              style: { fontFamily: theme.font.mono }
+            }
+          ) }),
+          eyedropper ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.eyedropper,
+              accessibilityState: { selected: picking },
+              ...Platform.OS === "web" ? { "aria-pressed": picking } : null,
+              onPress: () => void runEyedropper(),
+              style: ({ pressed }) => ({
+                width: theme.ctl.md,
+                height: theme.ctl.md,
+                marginTop: theme.space.s1,
+                borderRadius: theme.radius.md,
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: picking ? theme.color.accentSoft : pressed ? theme.state.pressed : "transparent"
+              }),
+              children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "pipette",
+                  size: 16,
+                  color: picking ? theme.color.accent : theme.color.text2
+                }
+              )
+            }
+          ) : null
+        ] }),
+        picking ? /* @__PURE__ */ jsx(
+          View,
+          {
+            testID: "color-picker-picking",
+            style: {
+              alignSelf: "flex-start",
+              paddingHorizontal: theme.space.s3,
+              paddingVertical: theme.space.s2,
+              borderRadius: theme.radius.md,
+              backgroundColor: theme.color.text
+            },
+            children: /* @__PURE__ */ jsx(Text, { style: { fontSize: theme.fontSize[13], color: theme.color.bg }, children: labels.picking })
+          }
+        ) : null,
+        rows.length > 0 && shown && !invalid ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              gap: theme.space.s2,
+              borderTopWidth: theme.borderWidth.hair,
+              borderTopColor: theme.color.border,
+              paddingTop: theme.space.s3
+            },
+            children: rows.map((r, i) => /* @__PURE__ */ jsx(ColorPickerContrastRow, { color: shown, against: r, labels: labelsProp }, i))
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function NoneMark({
+  size,
+  radius,
+  theme
+}) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      testID: "color-picker-none-mark",
+      style: {
+        width: size,
+        height: size,
+        borderRadius: radius,
+        backgroundColor: theme.color.surface,
+        borderWidth: theme.borderWidth.hair,
+        borderColor: theme.color.borderStrong,
+        overflow: "hidden",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            width: size * 1.41,
+            height: theme.borderWidth.thick,
+            backgroundColor: theme.color.text2,
+            transform: [{ rotate: "-45deg" }]
+          }
+        }
+      )
+    }
+  );
+}
+function ColorPicker({
+  swatches: swatchesProp,
+  value,
+  defaultValue,
+  onValueChange,
+  showPreview = true,
+  description,
+  disabled = false,
+  size = "md",
+  accessibilityLabel,
+  allowNone = false,
+  allowCustom = false,
+  recent: recentProp,
+  onRecentChange,
+  maxRecent = 6,
+  contrastAgainst,
+  customPresentation = "sheet",
+  customOpen: customOpenProp,
+  defaultCustomOpen = false,
+  onCustomOpenChange,
+  eyedropper = false,
+  onEyedropper,
+  nameValue,
+  onNameChange,
+  namePlaceholder,
+  onSave,
+  platform: platformProp,
+  labels: labelsProp,
+  style,
+  testID,
+  surface,
+  tone = "neutral",
+  error,
+  placeholder
+}) {
+  const theme = useLoamTheme("color-picker");
+  const platform = useResolvedPlatform(platformProp);
+  const labels = useLabels("colorPicker", DEFAULT_LABELS, labelsProp);
+  const swatches = React.useMemo(
+    () => swatchesProp ?? CHART_SWATCHES.map((s, i) => ({ ...s, label: labels.chartColour(i + 1) })),
+    [swatchesProp, labels]
+  );
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(
+    defaultValue === void 0 ? allowNone ? null : swatches[0]?.value ?? null : defaultValue
+  );
+  const current = isControlled ? value : internal;
+  const [openInternal, setOpenInternal] = React.useState(defaultCustomOpen);
+  const customOpen = customOpenProp ?? openInternal;
+  const setCustomOpen = (next) => {
+    if (customOpenProp === void 0) setOpenInternal(next);
+    onCustomOpenChange?.(next);
+  };
+  const [nameInternal, setNameInternal] = React.useState("");
+  const showName = nameValue !== void 0 || onNameChange !== void 0 || namePlaceholder !== void 0;
+  const inlinePanel = customPresentation === "inline";
+  const slot = size === "sm" ? theme.ctl.md : SLOT[platform];
+  const sw = size === "sm" ? slot - theme.space[8] : theme.space[slot - 8];
+  const swR = theme.radius.sm;
+  const ring = theme.borderWidth.heavy;
+  const ringColor = {
+    neutral: theme.color.text,
+    accent: theme.color.accent,
+    good: theme.color.good,
+    warn: theme.color.warn,
+    danger: theme.color.danger,
+    info: theme.color.info
+  }[error ? "danger" : tone];
+  const recent = allowCustom ? (recentProp ?? []).slice(0, maxRecent) : [];
+  const slots = [
+    ...allowNone ? [{ kind: "none", label: labels.noColour }] : [],
+    ...swatches.map((s) => ({ kind: "swatch", ...s })),
+    ...allowCustom ? [{ kind: "custom", label: labels.customColour }] : [],
+    ...recent.map(
+      (hex) => ({ kind: "recent", value: hex, label: labels.recentColour(hex) })
+    )
+  ];
+  const matched = slots.findIndex(
+    (s) => current === null ? s.kind === "none" : s.kind === "swatch" && s.value === current
+  );
+  const customIndex = slots.findIndex((s) => s.kind === "custom");
+  const selectedIndex = matched === -1 && allowCustom && current ? customIndex : matched;
+  const customValue = selectedIndex === customIndex && current ? current : void 0;
+  const setValue = (next) => {
+    if (!isControlled) setInternal(next);
+    onValueChange?.(next);
+  };
+  const commitCustom = (hex) => {
+    setValue(hex);
+    if (onRecentChange) {
+      const upper = hex.toUpperCase();
+      onRecentChange(
+        [upper, ...recent.filter((c) => c.toUpperCase() !== upper)].slice(0, maxRecent)
+      );
+    }
+  };
+  const renderSlot = (s, index) => {
+    const selected = index === selectedIndex;
+    const key = s.kind === "swatch" || s.kind === "recent" ? `${s.kind}:${s.value}` : s.kind;
+    const drawing = s.kind === "none" ? /* @__PURE__ */ jsx(NoneMark, { size: sw, radius: swR, theme }) : s.kind === "custom" && !customValue ? /* @__PURE__ */ jsx(
+      View,
+      {
+        style: {
+          width: sw,
+          height: sw,
+          borderRadius: swR,
+          borderWidth: theme.borderWidth.thick,
+          borderStyle: "dashed",
+          borderColor: theme.color.borderStrong,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 16, color: theme.color.text2 })
+      }
+    ) : /* @__PURE__ */ jsx(
+      View,
+      {
+        testID: "color-picker-swatch",
+        style: {
+          width: sw,
+          height: sw,
+          borderRadius: swR,
+          backgroundColor: resolve(s.kind === "custom" ? customValue : s.value, theme)
+        }
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "radio",
+        accessibilityLabel: s.label,
+        accessibilityState: { checked: selected, disabled },
+        ...Platform.OS === "web" ? { "aria-checked": selected } : null,
+        disabled,
+        onPress: () => {
+          haptics.selection();
+          if (s.kind === "custom") setCustomOpen(inlinePanel ? !customOpen : true);
+          else if (s.kind === "recent") commitCustom(s.value);
+          else setValue(s.kind === "none" ? null : s.value);
+        },
+        style: ({ pressed }) => ({
+          width: slot,
+          height: slot,
+          borderRadius: theme.radius.md,
+          borderWidth: ring,
+          borderColor: selected ? ringColor : pressed ? theme.color.borderStrong : "transparent",
+          alignItems: "center",
+          justifyContent: "center"
+        }),
+        children: drawing
+      },
+      key
+    );
+  };
+  const recentStart = slots.findIndex((s) => s.kind === "recent");
+  const main = recentStart === -1 ? slots : slots.slice(0, recentStart);
+  const row = {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space.s1
+  };
+  const contrasts = asList(contrastAgainst);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      accessibilityRole: "radiogroup",
+      accessibilityLabel,
+      accessibilityState: { disabled },
+      "aria-invalid": error ? true : void 0,
+      style: [{ gap: theme.space.s1, opacity: disabled ? theme.state.disabledOpacity : 1 }, style],
+      children: [
+        showName ? /* @__PURE__ */ jsx(
+          Input,
+          {
+            surface,
+            size: size === "sm" ? "md" : "lg",
+            value: nameValue ?? nameInternal,
+            onChangeText: (t) => {
+              if (nameValue === void 0) setNameInternal(t);
+              onNameChange?.(t);
+            },
+            placeholder: namePlaceholder,
+            editable: !disabled,
+            accessibilityLabel: labels.labelName
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(View, { style: row, children: [
+          main.map((s, i) => renderSlot(s, i)),
+          showPreview ? /* @__PURE__ */ jsx(View, { testID: "color-picker-preview", style: { marginStart: theme.space.s1 }, children: current === null ? /* @__PURE__ */ jsx(NoneMark, { size: slot, radius: swR, theme }) : /* @__PURE__ */ jsx(
+            View,
+            {
+              style: {
+                width: slot,
+                height: slot,
+                borderRadius: swR,
+                borderWidth: theme.borderWidth.hair,
+                borderColor: theme.color.border,
+                backgroundColor: resolve(current, theme)
+              }
+            }
+          ) }) : null,
+          onSave ? /* @__PURE__ */ jsx(View, { style: { marginStart: theme.space.s1 }, children: /* @__PURE__ */ jsx(Button, { size: size === "sm" ? "sm" : "md", disabled, onPress: onSave, children: labels.save }) }) : null
+        ] }),
+        recentStart !== -1 ? /* @__PURE__ */ jsxs(View, { style: row, testID: "color-picker-recent", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                width: theme.space[48],
+                fontSize: theme.fontSize[12],
+                fontWeight: theme.fontWeight.medium,
+                color: theme.color.text2
+              },
+              children: labels.recent
+            }
+          ),
+          slots.slice(recentStart).map((s, i) => renderSlot(s, recentStart + i))
+        ] }) : null,
+        placeholder && current === null ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            testID: "color-picker-placeholder",
+            style: {
+              paddingHorizontal: theme.space.s1,
+              ...theme.type.footnote,
+              color: theme.color.text3
+            },
+            children: placeholder
+          }
+        ) : null,
+        error ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            role: "alert",
+            style: {
+              paddingHorizontal: theme.space.s1,
+              ...theme.type.footnote,
+              color: theme.color.dangerOnSoft
+            },
+            children: error
+          }
+        ) : null,
+        description ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              paddingHorizontal: theme.space.s1,
+              ...theme.type.footnote,
+              color: theme.color.text3
+            },
+            children: description
+          }
+        ) : null,
+        allowCustom && inlinePanel && customOpen ? /* @__PURE__ */ jsx(
+          ColorPickerCustomPanel,
+          {
+            value: customValue?.startsWith("#") ? customValue : void 0,
+            onValueChange: commitCustom,
+            contrastAgainst,
+            eyedropper,
+            onEyedropper,
+            surface,
+            labels: labelsProp
+          }
+        ) : null,
+        allowCustom && !inlinePanel ? /* @__PURE__ */ jsx(Sheet, { open: customOpen, onOpenChange: setCustomOpen, title: labels.customColour, children: /* @__PURE__ */ jsxs(View, { style: { gap: theme.space.s3 }, children: [
+          /* @__PURE__ */ jsx(
+            ColorField,
+            {
+              surface,
+              defaultValue: customValue?.startsWith("#") ? customValue : void 0,
+              onValueChange: commitCustom
+            }
+          ),
+          customValue ? contrasts.map((c, i) => /* @__PURE__ */ jsx(
+            ColorPickerContrastRow,
+            {
+              color: customValue,
+              against: c,
+              labels: labelsProp
+            },
+            i
+          )) : null
+        ] }) }) : null
+      ]
+    }
+  );
+}
+
+export { CHART_SWATCHES, ColorPicker, contrastRatio };