@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-PCEFCOLN.js

@@ -0,0 +1,120 @@
+import 'react';
+import { Platform } from 'react-native';
+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,
+  accessibilityLabel
+}) {
+  const theme = useLoamTheme();
+  const stroke = color ?? theme.color.text;
+  return /* @__PURE__ */ jsx(
+    Svg,
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      ...accessibilityLabel ? { accessible: true, accessibilityRole: "image", accessibilityLabel } : Platform.OS === "web" ? (
+        // react-native-svg's web build spreads unknown props onto the <svg>.
+        { "aria-hidden": true }
+      ) : {
+        accessible: false,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        "aria-hidden": true
+      },
+      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-PFLNFIVB.js

@@ -0,0 +1,186 @@
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  pair: (term, description) => `${term}, ${description}`
+};
+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,
+  labels,
+  platform,
+  align
+}) {
+  const { styles } = useStyles(sheet);
+  const ctx = React.useMemo(
+    () => ({ layout, density, labels, platform, align }),
+    [layout, density, labels, platform, align]
+  );
+  const rows = [
+    ...items?.map((entry, i) => /* @__PURE__ */ jsx(
+      DescriptionItem,
+      {
+        term: entry.term,
+        description: entry.description,
+        onPress: entry.onPress
+      },
+      `item-${i}`
+    )) ?? [],
+    ...React.Children.toArray(children)
+  ];
+  const content = dividers || layout === "inline" ? 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,
+  onPress,
+  labels: labelsProp
+}) {
+  const {
+    layout,
+    density,
+    labels: ctxLabels,
+    platform,
+    align
+  } = React.useContext(DescriptionListContext);
+  const labels = useLabels("descriptionList", DEFAULT_LABELS, labelsProp ?? ctxLabels);
+  const { styles } = useStyles(sheet, { layout, density });
+  const theme = useLoamTheme("description-list");
+  const isInline = layout === "inline";
+  const android = isAndroidIdiom(theme, platform);
+  const body = resolveTextRole(theme, "body", android);
+  const textAlign = align ? align === "center" ? "center" : align === "start" === !theme.rtl ? "left" : "right" : void 0;
+  const row = isInline ? { minHeight: theme.space[android ? 56 : 44], alignItems: "center" } : null;
+  const pairLabel = typeof term === "string" && typeof description === "string" ? labels.pair(term, description) : void 0;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [
+          styles.term,
+          isInline && termInlineStyle,
+          isInline && { ...body, color: theme.color.text },
+          textAlign ? { textAlign } : null
+        ],
+        children: term
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [
+          styles.value,
+          isInline && {
+            ...body,
+            color: theme.color.text2,
+            flexShrink: 1,
+            textAlign: theme.rtl ? "left" : "right"
+          },
+          textAlign ? { textAlign } : null,
+          onPress && isInline ? { marginStart: "auto" } : null
+        ],
+        children: description
+      }
+    ),
+    onPress ? /* @__PURE__ */ jsx(
+      Icon,
+      {
+        name: theme.rtl ? "chevron-left" : "chevron-right",
+        size: theme.icon.sm,
+        color: theme.color.text3
+      }
+    ) : null
+  ] });
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: pairLabel,
+        onPress,
+        style: ({ pressed }) => [
+          styles.container,
+          row,
+          { alignItems: "center" },
+          pressed ? { backgroundColor: theme.state.hover } : null
+        ],
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [styles.container, row],
+      accessible: pairLabel !== void 0,
+      accessibilityLabel: pairLabel,
+      children: content
+    }
+  );
+}
+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-PHSZY37H.js

@@ -0,0 +1,300 @@
+import { Badge } from './chunk-LGNTP5XA.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, Animated, Pressable, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  tabWithBadge: (label, badge) => `${label}, ${badge}`
+};
+var CAPSULE_W = 56;
+var CAPSULE_H = 32;
+var GLYPH_SIZE = 22;
+var BAR_H = { ios: 49, android: 80 };
+var BADGE_MAX = 99;
+function translucent(color) {
+  return /^#[0-9a-f]{6}$/i.test(color) ? `${color}eb` : color;
+}
+function Tab({
+  item,
+  selected,
+  onPress,
+  motion,
+  bounce,
+  labels,
+  android,
+  showIndicator,
+  compact,
+  badgeSolid
+}) {
+  const theme = useLoamTheme("tab-bar");
+  const { styles } = useStyles(sheet);
+  const glyph = selected ? theme.color.accentStrong : theme.color.text2;
+  const ink = selected ? theme.color.text : theme.color.text2;
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const spring = (to) => {
+    if (motion === "none" || android) return;
+    Animated.spring(scale, {
+      ...springConfig(theme, "fs"),
+      toValue: to,
+      useNativeDriver: true
+    }).start();
+  };
+  const badgeScale = React.useRef(new Animated.Value(1)).current;
+  const lastBadge = React.useRef(item.badge ?? 0);
+  React.useEffect(() => {
+    const now = item.badge ?? 0;
+    const rose = now > lastBadge.current;
+    lastBadge.current = now;
+    if (!rose || !bounce) return;
+    badgeScale.setValue(1.3);
+    Animated.spring(badgeScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 20,
+      bounciness: 12
+    }).start();
+  }, [item.badge, bounce, badgeScale]);
+  const showBadge = item.badge !== void 0 && item.badge > 0;
+  const badgeText = item.badge !== void 0 && item.badge > BADGE_MAX ? `${BADGE_MAX}+` : `${item.badge}`;
+  const disabled = item.disabled === true;
+  const focusRing = useFocusRing(theme.radius.md);
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "tab",
+      accessibilityLabel: showBadge ? labels.tabWithBadge(item.label, badgeText) : item.label,
+      accessibilityState: { selected, disabled },
+      disabled,
+      onPress,
+      onPressIn: () => spring(0.9),
+      onPressOut: () => spring(1),
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      style: [styles.tab, disabled && { opacity: theme.state.disabledOpacity }, focusRing.style],
+      children: ({ pressed }) => /* @__PURE__ */ jsxs(
+        Animated.View,
+        {
+          style: [styles.tabInner, compact ? { gap: 0 } : null, { transform: [{ scale }] }],
+          children: [
+            /* @__PURE__ */ jsxs(
+              View,
+              {
+                testID: "tab-capsule",
+                style: [
+                  styles.capsule,
+                  selected && showIndicator && { backgroundColor: theme.state.selected },
+                  // iOS highlights the capsule; Android ripples inside it.
+                  pressed && !android && { backgroundColor: theme.state.pressed }
+                ],
+                children: [
+                  android ? /* @__PURE__ */ jsx(
+                    Pressable,
+                    {
+                      accessible: false,
+                      importantForAccessibility: "no",
+                      disabled,
+                      onPress,
+                      android_ripple: { color: theme.state.pressed, borderless: false },
+                      style: [
+                        StyleSheetAbsolute,
+                        { borderRadius: theme.radius.full, overflow: "hidden" }
+                      ]
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx(Icon, { name: item.icon, size: GLYPH_SIZE, color: glyph }),
+                  showBadge ? /* @__PURE__ */ jsx(Animated.View, { style: [styles.badge, { transform: [{ scale: badgeScale }] }], children: /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "danger", solid: badgeSolid, count: item.badge, max: BADGE_MAX }) }) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: [styles.label, android ? styles.labelAndroid : styles.labelIos, { color: ink }],
+                numberOfLines: 1,
+                children: item.label
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var StyleSheetAbsolute = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
+function CenterAction({
+  action,
+  android
+}) {
+  const theme = useLoamTheme("tab-bar");
+  const { styles } = useStyles(sheet);
+  const disabled = action.disabled === true;
+  const focusRing = useFocusRing(theme.radius.md);
+  return /* @__PURE__ */ jsx(View, { style: styles.tab, children: /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: action.accessibilityLabel,
+      accessibilityHint: disabled ? action.disabledReason : void 0,
+      accessibilityState: { disabled },
+      onPress: disabled ? action.onDisabledPress : action.onPress,
+      android_ripple: android ? { color: theme.state.pressed, borderless: false } : void 0,
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      style: ({ pressed }) => [
+        styles.center,
+        focusRing.style,
+        android ? { width: CAPSULE_W, height: theme.space[40] } : { width: theme.ctl.lg, height: theme.ctl.lg },
+        {
+          backgroundColor: pressed && !android && !disabled ? theme.color.accentFillPress : theme.color.accent
+        },
+        disabled && { opacity: theme.state.disabledOpacity }
+      ],
+      children: /* @__PURE__ */ jsx(Icon, { name: action.icon, size: GLYPH_SIZE, color: theme.color.accentInk })
+    }
+  ) });
+}
+function TabBar({
+  items,
+  value,
+  onValueChange,
+  onReselect,
+  centerAction,
+  bottomInset = 0,
+  showIndicator = true,
+  motion = "full",
+  size = "md",
+  density = "comfortable",
+  variant = "default",
+  orientation = "horizontal",
+  disabled = false,
+  accessibilityLabel,
+  labels: labelsProp,
+  platform,
+  badgeSolid = false
+}) {
+  const theme = useLoamTheme("tab-bar");
+  const labels = useLabels("tabBar", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const android = isAndroidIdiom(theme, platform);
+  const select = (next) => {
+    if (next === value && onReselect) onReselect(next);
+    else onValueChange?.(next);
+  };
+  const cells = items.map((item) => /* @__PURE__ */ jsx(
+    Tab,
+    {
+      item,
+      selected: item.value === value,
+      onPress: () => select(item.value),
+      motion,
+      bounce: motion !== "none" && !theme.reduceMotion,
+      labels,
+      android,
+      showIndicator,
+      compact: density === "compact",
+      badgeSolid
+    },
+    item.value
+  ));
+  if (centerAction) {
+    cells.splice(
+      Math.ceil(items.length / 2),
+      0,
+      /* @__PURE__ */ jsx(CenterAction, { action: centerAction, android }, "__center")
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "tablist",
+      accessibilityLabel,
+      "aria-disabled": disabled || void 0,
+      pointerEvents: disabled ? "none" : void 0,
+      style: [
+        styles.bar,
+        orientation === "vertical" ? { flexDirection: "column" } : null,
+        variant === "floating" ? {
+          margin: theme.space.s3,
+          borderRadius: theme.radius.full,
+          overflow: "hidden",
+          ...theme.shadow.md
+        } : null,
+        disabled ? { opacity: theme.state.disabledOpacity } : null,
+        android ? { backgroundColor: theme.color.surface2 } : {
+          backgroundColor: translucent(theme.color.surface),
+          borderTopWidth: theme.borderWidth.hair,
+          borderTopColor: theme.color.border
+        },
+        {
+          // The theme's `layout.tabbarH` when its platform matches; otherwise the OS height.
+          minHeight: orientation === "vertical" ? void 0 : size === "sm" ? theme.hit.lg : (android === (theme.platform === "Android") ? theme.layout.tabbarH : BAR_H[android ? "android" : "ios"]) + (size === "lg" ? theme.space.s2 : 0),
+          paddingBottom: bottomInset
+        },
+        variant === "flat" ? { backgroundColor: theme.color.surface, borderTopWidth: 0 } : null,
+        orientation === "vertical" ? { borderTopWidth: 0, borderEndWidth: theme.borderWidth.hair, borderEndColor: theme.color.border } : null
+      ],
+      children: cells
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  bar: {
+    flexDirection: "row",
+    alignItems: "stretch"
+  },
+  tab: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tabInner: {
+    alignItems: "center",
+    gap: theme.space[2]
+  },
+  capsule: {
+    width: CAPSULE_W,
+    height: CAPSULE_H,
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "visible",
+    position: "relative"
+  },
+  center: {
+    borderRadius: theme.space[12],
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  badge: {
+    position: "absolute",
+    top: 0,
+    left: CAPSULE_W / 2 + theme.space[4]
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.medium
+  },
+  labelIos: {
+    fontSize: theme.fontSize[10],
+    lineHeight: theme.space[12]
+  },
+  labelAndroid: {
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.space[16]
+  }
+}));
+
+export { TabBar };

package/dist/chunk-PJLTKDVY.js

@@ -0,0 +1,18 @@
+// src/lib/tone-skin.ts
+function softToneSkin(theme, tone) {
+  const c = theme.color;
+  switch (tone) {
+    case "accent":
+      return { fill: c.accentSoft, edge: c.accent, ink: c.accentOnSoft };
+    case "good":
+      return { fill: c.goodSoft, edge: c.good, ink: c.goodOnSoft };
+    case "warn":
+      return { fill: c.warnSoft, edge: c.warn, ink: c.warnOnSoft };
+    case "danger":
+      return { fill: c.dangerSoft, edge: c.danger, ink: c.dangerOnSoft };
+    case "info":
+      return { fill: c.infoSoft, edge: c.info, ink: c.infoOnSoft };
+  }
+}
+
+export { softToneSkin };