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

package/dist/chunk-KMI5ML5I.js

@@ -0,0 +1,262 @@
+import { Spinner } from './chunk-O7AE6DAF.js';
+import { Skeleton, SkeletonText } from './chunk-RIBDXGUG.js';
+import * as React from 'react';
+import { StyleSheet, Animated, View, Pressable, Text, Image } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function Card({
+  children,
+  variant = "default",
+  onPress,
+  style,
+  accessibilityLabel,
+  selected = false,
+  busy = false,
+  busyLabel = "Loading",
+  skeleton = false,
+  emphasized = false,
+  dragging = false,
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, {
+    variant: variant === "default" ? void 0 : variant,
+    selected,
+    emphasized,
+    dragging
+  });
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const spring = (to) => Animated.spring(scale, {
+    toValue: to,
+    useNativeDriver: true,
+    speed: 40,
+    bounciness: 6
+  }).start();
+  if (skeleton) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [styles.base, style],
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: /* @__PURE__ */ jsxs(View, { style: styles.skeletonBody, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.skeletonHead, children: [
+            /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 160, height: 18 }),
+            /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 100 })
+          ] }),
+          /* @__PURE__ */ jsx(SkeletonText, { lines: 3 }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 96, height: 32, radius: "md" })
+        ] })
+      }
+    );
+  }
+  const tint = dragging ? theme.state.dragged : selected ? theme.state.selected : null;
+  const tintOverlay = tint ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, { backgroundColor: tint, pointerEvents: "none" }] }) : null;
+  const lift = dragging && motion === "full" && !theme.reduceMotion;
+  const dragTransform = lift ? [{ scale: 1.022 }, { rotate: theme.rtl ? "-1.2deg" : "1.2deg" }] : [];
+  const withBusy = (node) => busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    node,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: styles.busyScrim,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants"
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { style: styles.busySpinner, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", accessibilityLabel: busyLabel }) })
+  ] }) : node;
+  if (onPress) {
+    return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, style, { transform: [{ scale }, ...dragTransform] }], children: [
+      tintOverlay,
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel,
+          accessibilityState: { selected: selected || void 0, busy: busy || void 0 },
+          onPress,
+          onPressIn: () => spring(0.98),
+          onPressOut: () => spring(1),
+          style: StyleSheet.absoluteFill
+        }
+      ),
+      /* @__PURE__ */ jsx(View, { style: styles.pressContent, children: withBusy(children) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel,
+      accessibilityState: { selected: selected || void 0, busy: busy || void 0 },
+      style: [styles.base, style, dragTransform.length ? { transform: dragTransform } : null],
+      children: [
+        tintOverlay,
+        withBusy(children)
+      ]
+    }
+  );
+}
+function CardHeader({ children, style }) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(View, { style: [styles.header, style], children });
+}
+function CardTitle({ children, style }) {
+  const { styles } = useStyles(sheet);
+  return typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: [styles.title, style], children }) : /* @__PURE__ */ jsx(Fragment, { children });
+}
+function CardDescription({ children, style }) {
+  const { styles } = useStyles(sheet);
+  return typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: [styles.description, style], children }) : /* @__PURE__ */ jsx(Fragment, { children });
+}
+function CardContent({ children, style }) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(View, { style: [styles.content, style], children });
+}
+function CardFooter({ children, style }) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(View, { style: [styles.footer, style], children });
+}
+function CardMedia({
+  source,
+  height = 160,
+  style,
+  accessibilityLabel
+}) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(
+    Image,
+    {
+      source,
+      resizeMode: "cover",
+      accessibilityRole: accessibilityLabel !== void 0 ? "image" : void 0,
+      accessibilityLabel,
+      accessible: accessibilityLabel !== void 0,
+      style: [styles.media, { height }, style]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // The content layer over the full-bleed press overlay. `box-none` lets taps on
+  // empty regions fall through to the overlay while child controls keep theirs.
+  pressContent: { pointerEvents: "box-none" },
+  // Busy: dim the live content to ~60% (content stays — never a refresh
+  // skeleton) and pin the spinner to the top-inline-end corner.
+  busyScrim: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: theme.color.surface,
+    opacity: theme.opacity[64]
+  },
+  busySpinner: {
+    position: "absolute",
+    top: theme.space.s3,
+    // Logical inset — RN's engine mirrors `end` under RTL.
+    end: theme.space.s3,
+    pointerEvents: "none"
+  },
+  // First-load skeleton placeholder, sized to a typical composed card so the
+  // layout does not jump when real content arrives.
+  skeletonBody: {
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s4,
+    gap: theme.space.s4
+  },
+  skeletonHead: { gap: theme.space.s2 },
+  base: {
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    borderRadius: theme.radius.xl,
+    overflow: "hidden",
+    variants: {
+      variant: {
+        // Reference (buildWidgets): `box-shadow:0 12px 30px rgba(30,25,15,.14)` → md token is
+        // the nearest match; elevated steps up to lg for the stronger treatment.
+        default: { ...theme.shadow.md },
+        elevated: { ...theme.shadow.lg },
+        outline: {}
+      },
+      // Selection: an accent border. The `state-selected` tint is a translucent
+      // overlay View (composited in the component); the border carries the mark
+      // under high contrast, where the tint flattens to the plain surface.
+      //
+      // Which is exactly why it is `focus.ringColor` and not the raw accent: a
+      // border that is the only cue for a state is a graphical object under SC
+      // 1.4.11 and owes 3:1, and the raw accent misses that in four of the
+      // shipped palettes. See `focusRingColor()` — named for the focus ring, but
+      // it derives the accent at the hard-edge strength every such edge needs,
+      // and it is a no-op on an accent that already clears.
+      selected: {
+        true: { borderColor: theme.focus.ringColor },
+        false: {}
+      },
+      // Von Restorff emphasis — a 2px accent border + the stronger `lg`
+      // elevation, so a single card pops from a field of peers. Under high
+      // contrast the shadow is zero and the accent border does the work.
+      emphasized: {
+        true: {
+          borderColor: theme.focus.ringColor,
+          borderWidth: theme.borderWidth.heavy,
+          ...theme.shadow.lg
+        },
+        false: {}
+      },
+      // Dragging: a raised shadow + accent border over the card's own surface;
+      // the `state-dragged` tint and the scale/tilt are applied in the component.
+      dragging: {
+        true: { borderColor: theme.focus.ringColor, ...theme.shadow.lg },
+        false: {}
+      }
+    }
+  },
+  header: {
+    // Reference (buildWidgets small widget): `padding:16px` — s4 = 16px.
+    paddingHorizontal: theme.space.s4,
+    paddingTop: theme.space.s4,
+    paddingBottom: theme.space.s3,
+    gap: theme.space.s1
+  },
+  // Card title = the semantic "Title 3" role (HIG: grouped-list / card title),
+  // rendered in the brand display face.
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: `${theme.font.displayWeight}`,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    letterSpacing: theme.type.title3.letterSpacing,
+    color: theme.color.text
+  },
+  // Supporting copy = the "Subheadline" role (supporting text under a title).
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    letterSpacing: theme.type.subheadline.letterSpacing,
+    color: theme.color.text2
+  },
+  content: {
+    // Reference (buildWidgets small widget): `padding:16px` — s4 = 16px.
+    paddingHorizontal: theme.space.s4,
+    paddingBottom: theme.space.s4,
+    gap: theme.space.s3
+  },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    // Reference (buildWidgets small widget): `padding:16px` — s4 = 16px.
+    paddingHorizontal: theme.space.s4,
+    paddingBottom: theme.space.s4,
+    paddingTop: theme.space.s3
+  },
+  media: {
+    width: "100%",
+    borderTopLeftRadius: theme.radius.xl,
+    borderTopRightRadius: theme.radius.xl,
+    backgroundColor: theme.color.surface2
+  }
+}));
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle };

package/dist/chunk-KTAC4MGE.js

@@ -0,0 +1,4 @@
+// src/lib/cursor.ts
+var DRAG_CURSOR = { cursor: "pointer" };
+
+export { DRAG_CURSOR };

package/dist/chunk-LAECSR4H.js

@@ -0,0 +1,178 @@
+import { camMeta, decorativeProps } from './chunk-RW6ZL2FQ.js';
+import { useReducedMotion } from './chunk-6N33LFQA.js';
+import * as React from 'react';
+import { Animated, View, Text, Easing } from 'react-native';
+import Svg, { Defs, Pattern, Line, RadialGradient, Stop, Rect } from 'react-native-svg';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { profile } from '@btndprojects/loam-analyzer';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PLACEHOLDER_LABEL = "live feed \xB7 placeholder";
+function PlaceholderFeed({
+  label = PLACEHOLDER_LABEL,
+  drift = true,
+  topInset = 0,
+  children
+}) {
+  const theme = useLoamTheme();
+  const reduced = useReducedMotion();
+  const { styles } = useStyles(feedSheet);
+  const still = reduced || theme.reduceMotion || !drift;
+  const phase = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    if (still) {
+      phase.setValue(0);
+      return;
+    }
+    const leg = (to) => Animated.timing(phase, {
+      toValue: to,
+      duration: theme.loop.beacon * 8,
+      easing: Easing.bezier(...theme.easing.inOut),
+      useNativeDriver: true
+    });
+    const loop = Animated.loop(Animated.sequence([leg(1), leg(0)]));
+    loop.start();
+    return () => loop.stop();
+  }, [still, phase, theme.loop.beacon, theme.easing.inOut]);
+  const scale = still ? 1.015 : phase.interpolate({ inputRange: [0, 1], outputRange: [1.015, 1.046] });
+  const translateX = still ? 0 : phase.interpolate({ inputRange: [0, 1], outputRange: [0, 8] });
+  const translateY = still ? 0 : phase.interpolate({ inputRange: [0, 1], outputRange: [0, -8] });
+  return /* @__PURE__ */ jsxs(View, { accessible: false, testID: "loam-placeholder-feed", style: styles.root, ...decorativeProps(), children: [
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        testID: still ? "loam-cam-plate-static" : "loam-cam-plate",
+        style: [styles.plate, { transform: [{ translateX }, { translateY }, { scale }] }],
+        children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
+          /* @__PURE__ */ jsxs(Defs, { children: [
+            /* @__PURE__ */ jsx(
+              Pattern,
+              {
+                id: "loam-cam-stripe",
+                patternUnits: "userSpaceOnUse",
+                width: 11,
+                height: 11,
+                patternTransform: "rotate(52)",
+                children: /* @__PURE__ */ jsx(
+                  Line,
+                  {
+                    x1: 0,
+                    y1: 0,
+                    x2: 0,
+                    y2: 11,
+                    stroke: theme.white.a2,
+                    strokeWidth: theme.borderWidth.heavy
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-warm", cx: "22%", cy: "18%", rx: "62%", ry: "62%", children: [
+              /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: theme.white.a3 }),
+              /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.white.a3, stopOpacity: theme.opacity[0] })
+            ] }),
+            /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-cool", cx: "78%", cy: "82%", rx: "64%", ry: "64%", children: [
+              /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: theme.black.a5 }),
+              /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.black.a5, stopOpacity: theme.opacity[0] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-stripe)" }),
+          /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-warm)" }),
+          /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-cool)" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { testID: "loam-cam-vignette", style: styles.vignette, children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
+      /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(RadialGradient, { id: "loam-cam-vignette-fill", cx: "50%", cy: "50%", rx: "50%", ry: "50%", children: [
+        /* @__PURE__ */ jsx(Stop, { offset: "0.42", stopColor: theme.black.a9, stopOpacity: theme.opacity[0] }),
+        /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: theme.black.a9 })
+      ] }) }),
+      /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#loam-cam-vignette-fill)" })
+    ] }) }),
+    children,
+    /* @__PURE__ */ jsx(Text, { style: [styles.label, camMeta(theme), topInset ? { marginTop: topInset } : null], children: label })
+  ] });
+}
+var PLATE = {
+  plant: { width: "38%", height: "42%", caption: "plant subject" },
+  document: { width: "58%", height: "66%", caption: "document page" },
+  barcode: { width: "46%", height: "14%", caption: "barcode" },
+  car: { width: "74%", height: "34%", caption: "vehicle" },
+  id: { width: "66%", height: "40%", caption: "identity document" },
+  generic: { width: "52%", height: "42%", caption: "scene" }
+};
+function SubjectPlate({
+  profile: profileProp,
+  caption
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(feedSheet);
+  const p = profile(profileProp);
+  const plate = PLATE[p.id] ?? PLATE.generic;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessible: false,
+      testID: `loam-subject-plate-${p.id}`,
+      style: [styles.subjectPlate, { width: plate.width, height: plate.height }],
+      ...decorativeProps(),
+      children: /* @__PURE__ */ jsx(Text, { style: [styles.subjectCaption, camMeta(theme)], children: (caption ?? plate.caption).toUpperCase() })
+    }
+  );
+}
+var feedSheet = createStyleSheet((theme) => ({
+  root: {
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0],
+    overflow: "hidden",
+    backgroundColor: theme.media.onInk
+  },
+  plate: {
+    position: "absolute",
+    top: "-20%",
+    bottom: "-20%",
+    left: "-20%",
+    right: "-20%"
+  },
+  vignette: {
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0]
+  },
+  label: {
+    position: "absolute",
+    left: theme.space[16],
+    // Clear of the top bar, which is where the close button and the title plate
+    // sit.
+    top: theme.layout.appbarH + theme.space[8],
+    fontSize: theme.fontSize[10]
+  },
+  subjectPlate: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: theme.space[0],
+    bottom: theme.space[0],
+    left: theme.space[0],
+    right: theme.space[0],
+    // `inset 0` plus an explicit size plus `auto` margins centres in both axes
+    // without a half-translate, which is the version that survives an RTL flip.
+    marginHorizontal: "auto",
+    marginVertical: "auto",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.base,
+    borderStyle: "dashed",
+    borderColor: theme.white.a6,
+    backgroundColor: theme.white.a2
+  },
+  subjectCaption: {
+    fontSize: theme.fontSize[10]
+  }
+}));
+
+export { PLACEHOLDER_LABEL, PlaceholderFeed, SubjectPlate };

package/dist/chunk-LK4BCSGX.js

@@ -0,0 +1 @@
+