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

package/dist/chunk-TOXAGRDQ.js

@@ -0,0 +1,144 @@
+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

@@ -0,0 +1,112 @@
+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 };

package/dist/chunk-U7TFM2JA.js

@@ -0,0 +1,140 @@
+import { Card } from './chunk-KMI5ML5I.js';
+import * as React from 'react';
+import { Animated, View, Text, Pressable, StyleSheet } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var FAMILY = {
+  small: { width: 168, aspectRatio: 1 },
+  medium: { width: 344, aspectRatio: 2 },
+  large: { width: 344, aspectRatio: 0.86 }
+};
+function useToneStyles(tone, accent) {
+  const theme = useLoamTheme();
+  if (tone === "neutral") {
+    return { surface: void 0, titleColor: theme.color.text };
+  }
+  const ink = {
+    accent: theme.color.accentOnSoft,
+    good: theme.color.goodOnSoft,
+    warn: theme.color.warnOnSoft,
+    danger: theme.color.dangerOnSoft,
+    info: theme.color.infoOnSoft
+  }[tone];
+  const line = {
+    accent: theme.color.accent,
+    good: theme.color.good,
+    warn: theme.color.warn,
+    danger: theme.color.danger,
+    info: theme.color.info
+  }[tone];
+  return {
+    surface: accent ? { borderColor: line, borderWidth: theme.borderWidth.thick } : void 0,
+    titleColor: ink
+  };
+}
+function Widget({
+  size = "medium",
+  title,
+  children,
+  tone = "neutral",
+  accent = false,
+  footer,
+  onPress,
+  motion = "full",
+  accessibilityLabel
+}) {
+  const { styles } = useStyles(sheet, { size });
+  const theme = useLoamTheme();
+  const { surface, titleColor } = useToneStyles(tone, accent);
+  const announced = accessibilityLabel ?? title;
+  const pressScale = theme.reduceMotion ? 1 : motion === "full" ? 0.97 : motion === "reduced" ? 0.99 : 1;
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const spring = (to) => Animated.spring(scale, { toValue: to, useNativeDriver: true, speed: 40, bounciness: 6 }).start();
+  const body = /* @__PURE__ */ jsxs(View, { "aria-hidden": true, style: styles.content, children: [
+    title !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.title, { color: titleColor }], numberOfLines: size === "small" ? 2 : 3, children: title }) : null,
+    /* @__PURE__ */ jsx(View, { style: styles.glance, children }),
+    footer !== void 0 ? /* @__PURE__ */ jsx(View, { style: styles.footer, children: footer }) : null
+  ] });
+  if (onPress) {
+    return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.box, { transform: [{ scale }] }], children: [
+      /* @__PURE__ */ jsx(Card, { style: [styles.surface, surface], children: body }),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: announced,
+          onPress,
+          onPressIn: pressScale === 1 ? void 0 : () => spring(pressScale),
+          onPressOut: pressScale === 1 ? void 0 : () => spring(1),
+          style: StyleSheet.absoluteFill
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(View, { style: styles.box, children: /* @__PURE__ */ jsx(Card, { style: [styles.surface, surface], accessibilityLabel: announced, children: body }) });
+}
+var sheet = createStyleSheet((theme) => ({
+  // The family box. `width` + `aspectRatio` give the fixed-ratio tile; `maxWidth`
+  // keeps it inside a narrow phone frame.
+  box: {
+    maxWidth: "100%",
+    variants: {
+      size: {
+        small: { width: FAMILY.small.width, aspectRatio: FAMILY.small.aspectRatio },
+        medium: { width: FAMILY.medium.width, aspectRatio: FAMILY.medium.aspectRatio },
+        large: { width: FAMILY.large.width, aspectRatio: FAMILY.large.aspectRatio }
+      }
+    }
+  },
+  // Fill the box; the Card recipe (surface, hairline border, radius.xl, subtle
+  // shadow) comes from the Card component's own base style.
+  surface: { flex: 1 },
+  // Column: title pins to the top, the glance takes the slack, the footer sits at
+  // the bottom. Padding tightens on the small tile, where margin is precious.
+  content: {
+    flex: 1,
+    variants: {
+      size: {
+        small: { padding: theme.space.s3, gap: theme.space.s2 },
+        medium: { padding: theme.space.s4, gap: theme.space.s2 },
+        large: { padding: theme.space.s4, gap: theme.space.s3 }
+      }
+    }
+  },
+  // Brand display face, stepping up with the family.
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: `${theme.font.displayWeight}`,
+    variants: {
+      size: {
+        small: {
+          fontSize: theme.type.subheadline.fontSize,
+          lineHeight: theme.type.subheadline.lineHeight,
+          letterSpacing: theme.type.subheadline.letterSpacing
+        },
+        medium: {
+          fontSize: theme.type.title3.fontSize,
+          lineHeight: theme.type.title3.lineHeight,
+          letterSpacing: theme.type.title3.letterSpacing
+        },
+        large: {
+          fontSize: theme.type.title2.fontSize,
+          lineHeight: theme.type.title2.lineHeight,
+          letterSpacing: theme.type.title2.letterSpacing
+        }
+      }
+    }
+  },
+  // Takes the slack between title and footer so the glance sits where the family
+  // has room for it.
+  glance: { flex: 1, justifyContent: "center" },
+  // A hairline rule sets the footer off from the glance.
+  footer: {
+    paddingTop: theme.space.s2,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  }
+}));
+
+export { Widget };