@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-RW6ZL2FQ.js

@@ -1,284 +0,0 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { View, Text, Pressable } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { profile, gateHintDisplay } from '@btndprojects/loam-analyzer';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function camGlass(theme) {
-  return {
-    backgroundColor: theme.black.a12,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.white.a5
-  };
-}
-function camInk(theme) {
-  return theme.media.ink;
-}
-function camMeta(theme) {
-  return {
-    fontFamily: theme.font.mono,
-    color: theme.white.a10,
-    letterSpacing: theme.tracking.wider
-  };
-}
-var GATE_ANNOUNCE_MS = 1200;
-function pressedProps(on) {
-  return { "aria-pressed": on };
-}
-function decorativeProps() {
-  return { "aria-hidden": true };
-}
-function untabbableProps() {
-  return { tabIndex: -1 };
-}
-var AnnounceContext = React.createContext(null);
-function SurfaceLiveRegion({ children }) {
-  const [message, setMessage] = React.useState("");
-  const announce = React.useCallback((m) => setMessage(m), []);
-  const { styles } = useStyles(chromeSheet);
-  return /* @__PURE__ */ jsxs(AnnounceContext.Provider, { value: announce, children: [
-    children,
-    /* @__PURE__ */ jsx(
-      View,
-      {
-        role: "status",
-        accessibilityLiveRegion: "polite",
-        style: styles.srOnly,
-        ...{ "aria-live": "polite" },
-        children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: message })
-      }
-    )
-  ] });
-}
-function useSurfaceAnnounce() {
-  return React.useContext(AnnounceContext);
-}
-function GlassIconButton({
-  icon,
-  label,
-  on,
-  size = "md",
-  radius = "full",
-  onPress
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(chromeSheet, { size, radius, on: on === true });
-  const glyph = on ? theme.media.onInk : camInk(theme);
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityLabel: label,
-      accessibilityState: on === void 0 ? void 0 : { selected: on },
-      onPress,
-      hitSlop: Math.max(0, (theme.hit.lg - (size === "lg" ? theme.ctl.lg : theme.ctl.md)) / 2),
-      style: styles.glassButton,
-      ...on === void 0 ? {} : pressedProps(on),
-      children: /* @__PURE__ */ jsx(Icon, { name: icon, size: size === "lg" ? theme.icon.lg : theme.icon.md, color: glyph })
-    }
-  );
-}
-function chipColours(theme, tone) {
-  switch (tone) {
-    case "good":
-      return { fill: theme.color.good, ink: theme.color.goodInk };
-    case "warn":
-      return { fill: theme.color.warn, ink: theme.color.warnInk };
-    case "danger":
-      return { fill: theme.color.danger, ink: theme.color.dangerInk };
-    case "info":
-      return { fill: theme.color.info, ink: theme.color.infoInk };
-    default:
-      return { ink: camInk(theme) };
-  }
-}
-function GuidanceChip({
-  text,
-  tone = "neutral",
-  icon
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(chromeSheet, { tone });
-  const { ink } = chipColours(theme, tone);
-  return (
-    // The tone is on the testID as well as in the fill, so a test can read the
-    // *pill* rather than the live region that repeats its words.
-    /* @__PURE__ */ jsxs(View, { testID: `loam-chip-${tone}`, style: styles.chip, children: [
-      icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: ink }) : null,
-      /* @__PURE__ */ jsx(Text, { style: [styles.chipText, { color: ink }], children: text })
-    ] })
-  );
-}
-function GateHint({
-  profile: profileProp,
-  gate = { pass: true, failing: [] },
-  countdown = null,
-  live = true,
-  throttleMs = GATE_ANNOUNCE_MS
-}) {
-  const resolved = profile(profileProp);
-  const display = gateHintDisplay(resolved, gate, countdown);
-  const surface = useSurfaceAnnounce();
-  const [own, setOwn] = React.useState("");
-  const { styles } = useStyles(chromeSheet);
-  const sink = React.useRef(setOwn);
-  sink.current = surface ?? setOwn;
-  const last = React.useRef({ text: "", at: 0 });
-  React.useEffect(() => {
-    if (!live) return;
-    const text = display.text;
-    if (text === last.current.text) return;
-    const wait = last.current.at === 0 ? 0 : last.current.at + throttleMs - Date.now();
-    if (wait <= 0) {
-      last.current = { text, at: Date.now() };
-      sink.current(text);
-      return;
-    }
-    const timer = setTimeout(() => {
-      last.current = { text, at: Date.now() };
-      sink.current(text);
-    }, wait);
-    return () => clearTimeout(timer);
-  }, [display.text, live, throttleMs]);
-  return /* @__PURE__ */ jsxs(View, { style: styles.centreRow, children: [
-    /* @__PURE__ */ jsx(GuidanceChip, { text: display.text, tone: display.tone, icon: display.icon }),
-    surface ? null : /* @__PURE__ */ jsx(
-      View,
-      {
-        role: "status",
-        accessibilityLiveRegion: "polite",
-        style: styles.srOnly,
-        ...{ "aria-live": "polite" },
-        children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: own })
-      }
-    )
-  ] });
-}
-function ViewfinderTopBar({
-  title,
-  subtitle,
-  align = "start",
-  closeLabel = "Close camera",
-  onClose,
-  children
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(chromeSheet, { align });
-  const ink = camInk(theme);
-  return /* @__PURE__ */ jsxs(View, { style: styles.topBar, children: [
-    onClose ? /* @__PURE__ */ jsx(GlassIconButton, { icon: "x", label: closeLabel, onPress: onClose }) : null,
-    /* @__PURE__ */ jsxs(View, { style: styles.titlePlate, children: [
-      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.title, { color: ink }], children: title }),
-      subtitle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.subtitle, { color: ink }], children: subtitle }) : null
-    ] }),
-    /* @__PURE__ */ jsx(View, { style: styles.topBarEnd, children })
-  ] });
-}
-var chromeSheet = createStyleSheet((theme) => ({
-  // A 1×1 clipped box rather than `display:'none'`: a hidden region is not
-  // announced, and RN has no `sr-only` utility.
-  srOnly: {
-    position: "absolute",
-    width: theme.space[1],
-    height: theme.space[1],
-    overflow: "hidden"
-  },
-  centreRow: {
-    flexDirection: "row",
-    justifyContent: "center"
-  },
-  glassButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    flexGrow: 0,
-    flexShrink: 0,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.white.a5,
-    variants: {
-      size: {
-        // 36 and 44 drawn, 44 hit at both (see `hitSlop` on the Pressable).
-        md: { width: theme.ctl.md, height: theme.ctl.md },
-        lg: { width: theme.ctl.lg, height: theme.ctl.lg }
-      },
-      radius: {
-        full: { borderRadius: theme.radius.full },
-        sm: { borderRadius: theme.radius.sm }
-      },
-      // "On" inverts the plate to an opaque fill, so the state is not a colour.
-      on: {
-        true: { backgroundColor: theme.media.ink, borderColor: theme.media.ink },
-        false: { backgroundColor: theme.black.a12 }
-      }
-    }
-  },
-  chip: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space[6],
-    paddingHorizontal: theme.space[12],
-    paddingVertical: theme.space[6],
-    borderRadius: theme.radius.full,
-    maxWidth: theme.panel.lg,
-    variants: {
-      tone: {
-        neutral: {
-          backgroundColor: theme.black.a12,
-          borderWidth: theme.borderWidth.base,
-          borderColor: theme.white.a5
-        },
-        good: { backgroundColor: theme.color.good },
-        warn: { backgroundColor: theme.color.warn },
-        danger: { backgroundColor: theme.color.danger },
-        info: { backgroundColor: theme.color.info }
-      }
-    }
-  },
-  chipText: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[13],
-    flexShrink: 1
-  },
-  topBar: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space[8],
-    padding: theme.space[8]
-  },
-  titlePlate: {
-    flexShrink: 1,
-    minWidth: theme.space[0],
-    flexDirection: "column",
-    paddingHorizontal: theme.space[10],
-    paddingVertical: theme.space[4],
-    borderRadius: theme.radius.sm,
-    backgroundColor: theme.black.a12,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.white.a5,
-    variants: {
-      align: {
-        start: { alignItems: "flex-start" },
-        center: { alignItems: "center", marginHorizontal: "auto" }
-      }
-    }
-  },
-  title: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[13],
-    fontWeight: theme.fontWeight.semibold
-  },
-  subtitle: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[11]
-  },
-  topBarEnd: {
-    marginStart: "auto",
-    flexShrink: 0,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space[8]
-  }
-}));
-
-export { GATE_ANNOUNCE_MS, GateHint, GlassIconButton, GuidanceChip, SurfaceLiveRegion, ViewfinderTopBar, camGlass, camInk, camMeta, decorativeProps, pressedProps, untabbableProps, useSurfaceAnnounce };

package/dist/chunk-TKVFVF5D.js

@@ -1,95 +0,0 @@
-import 'react';
-import { Svg, Circle, Line, Rect, Polyline, Polygon, Ellipse, Path } from 'react-native-svg';
-import { icons } from '@btndprojects/loam-icons';
-import { useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsx } from 'react/jsx-runtime';
-
-// src/lib/icon.tsx
-function Icon({ name, size = 20, color, strokeWidth = 1.5 }) {
-  const theme = useLoamTheme();
-  const stroke = color ?? theme.color.text;
-  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: icons[name].map((p, i) => {
-    if (p.t === "circle")
-      return p.fill ? /* @__PURE__ */ jsx(Circle, { cx: p.cx, cy: p.cy, r: p.r, fill: stroke }, i) : /* @__PURE__ */ jsx(Circle, { cx: p.cx, cy: p.cy, r: p.r, stroke, strokeWidth }, i);
-    if (p.t === "line")
-      return /* @__PURE__ */ jsx(
-        Line,
-        {
-          x1: p.x1,
-          y1: p.y1,
-          x2: p.x2,
-          y2: p.y2,
-          stroke,
-          strokeWidth,
-          strokeLinecap: "round"
-        },
-        i
-      );
-    if (p.t === "rect")
-      return /* @__PURE__ */ jsx(
-        Rect,
-        {
-          x: p.x,
-          y: p.y,
-          width: p.width,
-          height: p.height,
-          rx: p.rx,
-          ry: p.ry,
-          stroke,
-          strokeWidth,
-          strokeLinejoin: "round"
-        },
-        i
-      );
-    if (p.t === "polyline")
-      return /* @__PURE__ */ jsx(
-        Polyline,
-        {
-          points: p.points,
-          stroke,
-          strokeWidth,
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        },
-        i
-      );
-    if (p.t === "polygon")
-      return /* @__PURE__ */ jsx(
-        Polygon,
-        {
-          points: p.points,
-          stroke,
-          strokeWidth,
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        },
-        i
-      );
-    if (p.t === "ellipse")
-      return /* @__PURE__ */ jsx(
-        Ellipse,
-        {
-          cx: p.cx,
-          cy: p.cy,
-          rx: p.rx,
-          ry: p.ry,
-          stroke,
-          strokeWidth
-        },
-        i
-      );
-    return /* @__PURE__ */ jsx(
-      Path,
-      {
-        d: p.d,
-        stroke,
-        strokeWidth,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      },
-      i
-    );
-  }) });
-}
-
-export { Icon };

package/dist/chunk-TOXAGRDQ.js

@@ -1,144 +0,0 @@
-import { CopyButton } from './chunk-4ZAHCY44.js';
-import * as React from 'react';
-import { View, Text, ScrollView } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function CodeBlock({
-  code,
-  language,
-  showLineNumbers = true,
-  wrap = false,
-  copyable = true,
-  onCopy,
-  caption,
-  filename,
-  maxHeight,
-  highlightLines,
-  // `motion` is accepted for API parity only — a code block never animates.
-  motion: _motion
-}) {
-  const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
-  const lines = code.split("\n");
-  const label = filename ?? caption;
-  const hasHeader = Boolean(label || language);
-  const highlighted = React.useMemo(() => new Set(highlightLines ?? []), [highlightLines]);
-  const rows = lines.map((line, i) => {
-    const n = i + 1;
-    const isHot = highlighted.has(n);
-    const contentStyle = wrap ? styles.codeWrap : styles.codeNoWrap;
-    return /* @__PURE__ */ jsxs(
-      View,
-      {
-        style: [
-          styles.line,
-          !showLineNumbers && styles.lineInset,
-          isHot && { backgroundColor: theme.state.selected }
-        ],
-        children: [
-          showLineNumbers ? /* @__PURE__ */ jsx(
-            Text,
-            {
-              testID: "code-block-gutter",
-              style: [styles.gutter, isHot && { color: theme.code.fg }],
-              importantForAccessibility: "no",
-              accessibilityElementsHidden: true,
-              children: n
-            }
-          ) : null,
-          /* @__PURE__ */ jsx(Text, { style: [styles.code, contentStyle], selectable: true, children: line.length ? line : " " })
-        ]
-      },
-      i
-    );
-  });
-  return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
-    hasHeader ? /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.headerLabels, children: [
-        label ? /* @__PURE__ */ jsx(Text, { style: styles.filename, numberOfLines: 1, children: label }) : null,
-        language ? /* @__PURE__ */ jsx(Text, { style: styles.language, children: language.toUpperCase() }) : null
-      ] }),
-      copyable ? /* @__PURE__ */ jsx(CopyButton, { value: code, onCopy, accessibilityLabel: "Copy code" }) : null
-    ] }) : copyable ? /* @__PURE__ */ jsx(View, { style: styles.corner, children: /* @__PURE__ */ jsx(CopyButton, { value: code, onCopy, accessibilityLabel: "Copy code" }) }) : null,
-    /* @__PURE__ */ jsx(ScrollView, { focusable: true, style: maxHeight ? { maxHeight } : void 0, contentContainerStyle: styles.body, children: wrap ? /* @__PURE__ */ jsx(View, { style: styles.lines, children: rows }) : /* @__PURE__ */ jsx(ScrollView, { horizontal: true, focusable: true, contentContainerStyle: styles.lines, children: rows }) })
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  root: {
-    position: "relative",
-    borderRadius: theme.radius.lg,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.border,
-    backgroundColor: theme.code.bg,
-    overflow: "hidden"
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: theme.space.s3,
-    paddingStart: theme.space.s4,
-    paddingEnd: theme.space.s2,
-    paddingVertical: theme.space.s2,
-    borderBottomWidth: theme.borderWidth.base,
-    borderBottomColor: theme.color.border
-  },
-  headerLabels: {
-    flexShrink: 1,
-    flexDirection: "row",
-    alignItems: "baseline",
-    gap: theme.space.s2
-  },
-  filename: {
-    flexShrink: 1,
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.footnote.fontSize,
-    color: theme.code.fg
-  },
-  language: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption1.fontSize,
-    letterSpacing: 1,
-    color: theme.code.fg,
-    opacity: theme.opacity[80]
-  },
-  corner: {
-    position: "absolute",
-    top: theme.space.s1,
-    end: theme.space.s1,
-    zIndex: theme.z.raised
-  },
-  body: { paddingVertical: theme.space.s3 },
-  lines: { flexDirection: "column" },
-  line: { flexDirection: "row", alignItems: "flex-start" },
-  // No gutter → the code needs the leading inset the gutter would have carried.
-  lineInset: { paddingStart: theme.space.s4 },
-  gutter: {
-    minWidth: theme.space.s6,
-    paddingStart: theme.space.s4,
-    paddingEnd: theme.space.s3,
-    textAlign: "right",
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.code.lineH,
-    // A muted gutter ink that still clears AA (4.5:1) on code.bg: code.fg at 70%
-    // alpha (~5.6:1 light / ~7.2:1 dark). `theme.code.com` is short in dark
-    // (~4.1:1), and `aria-hidden` does not exempt the gutter from axe here.
-    color: `${theme.code.fg}b3`
-  },
-  code: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.code.lineH,
-    color: theme.code.fg,
-    paddingEnd: theme.space.s4
-  },
-  // Wrapped lines take the remaining width so the Text engine can break them.
-  codeWrap: { flex: 1 },
-  // Non-wrapped lines size to their intrinsic width inside the horizontal
-  // ScrollView, so a long line scrolls rather than wrapping.
-  codeNoWrap: {}
-}));
-
-export { CodeBlock };

package/dist/chunk-TUTI5HOZ.js

@@ -1,112 +0,0 @@
-import * as React from 'react';
-import { View, Text } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-// src/description-list/description-list.tsx
-var DescriptionListContext = React.createContext({
-  layout: "stacked",
-  density: "comfortable"
-});
-function DescriptionList({
-  layout = "stacked",
-  density = "comfortable",
-  dividers = false,
-  items,
-  // Accepted for API consistency; static data drives no motion.
-  motion: _motion,
-  children
-}) {
-  const { styles } = useStyles(sheet);
-  const ctx = React.useMemo(
-    () => ({ layout, density }),
-    [layout, density]
-  );
-  const rows = [
-    ...items?.map((entry, i) => /* @__PURE__ */ jsx(DescriptionItem, { term: entry.term, description: entry.description }, `item-${i}`)) ?? [],
-    ...React.Children.toArray(children)
-  ];
-  const content = dividers ? rows.flatMap(
-    (row, i) => i === 0 ? [row] : [/* @__PURE__ */ jsx(View, { style: styles.divider }, `divider-${i}`), row]
-  ) : rows;
-  return /* @__PURE__ */ jsx(DescriptionListContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(View, { style: styles.root, children: content }) });
-}
-function DescriptionItem({
-  term,
-  description
-}) {
-  const { layout, density } = React.useContext(DescriptionListContext);
-  const { styles } = useStyles(sheet, { layout, density });
-  const theme = useLoamTheme();
-  const isInline = layout === "inline";
-  const pairLabel = typeof term === "string" && typeof description === "string" ? `${term}, ${description}` : void 0;
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      style: styles.container,
-      accessible: pairLabel !== void 0,
-      accessibilityLabel: pairLabel,
-      children: [
-        /* @__PURE__ */ jsx(Text, { style: [styles.term, isInline && termInlineStyle], children: term }),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            style: [
-              styles.value,
-              isInline && { flexShrink: 1, textAlign: theme.rtl ? "left" : "right" }
-            ],
-            children: description
-          }
-        )
-      ]
-    }
-  );
-}
-var termInlineStyle = { flexShrink: 0 };
-var sheet = createStyleSheet((theme) => ({
-  root: { alignSelf: "stretch" },
-  container: {
-    alignSelf: "stretch",
-    variants: {
-      layout: {
-        stacked: { flexDirection: "column", alignItems: "stretch", gap: theme.space.s1 },
-        inline: {
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "baseline",
-          gap: theme.space.s4
-        }
-      },
-      density: {
-        comfortable: { paddingVertical: theme.space.s2 },
-        compact: { paddingVertical: theme.space.s1 }
-      }
-    }
-  },
-  // Muted secondary ink — measured to clear AA on a surface.
-  term: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.medium,
-    color: theme.color.text2,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    letterSpacing: theme.type.footnote.letterSpacing
-  },
-  // Primary ink, with a measure cap so long values stay legible.
-  value: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.regular,
-    color: theme.color.text,
-    fontSize: theme.type.subheadline.fontSize,
-    lineHeight: theme.type.subheadline.lineHeight,
-    letterSpacing: theme.type.subheadline.letterSpacing,
-    maxWidth: Math.round(theme.type.subheadline.fontSize * 0.5 * theme.measure.base)
-  },
-  divider: {
-    alignSelf: "stretch",
-    height: theme.borderWidth.base,
-    backgroundColor: theme.color.border
-  }
-}));
-
-export { DescriptionItem, DescriptionList };