@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/chunk-RSOJT5YW.js

@@ -1,124 +0,0 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { View, Pressable, Text } from 'react-native';
-import { Svg, Path } from 'react-native-svg';
-import { icons, ICON_VIEWBOX } from '@btndprojects/loam-icons';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var ICON_SIZE = { sm: 20, md: 26, lg: 34 };
-var STAR_PATH = icons.star.flatMap((part) => part.t === "path" ? [part.d] : []).join(" ");
-function toHalfStep(value) {
-  return Math.round(value * 2) / 2;
-}
-function Star({ fraction, size }) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(starSheet);
-  const filled = Math.max(0, Math.min(1, fraction));
-  return /* @__PURE__ */ jsxs(View, { style: { width: size, height: size }, children: [
-    /* @__PURE__ */ jsx(Icon, { name: "star", size, color: theme.color.text3 }),
-    filled > 0 ? /* @__PURE__ */ jsx(View, { testID: "rating-star-fill", style: [styles.clip, { width: size * filled }], children: /* @__PURE__ */ jsx(View, { style: styles.paint, children: /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: ICON_VIEWBOX, children: /* @__PURE__ */ jsx(
-      Path,
-      {
-        d: STAR_PATH,
-        fill: theme.color.warn,
-        stroke: theme.color.warn,
-        strokeWidth: theme.borderWidth.thick,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ) }) }) }) : null
-  ] });
-}
-function Rating({
-  value,
-  defaultValue = 0,
-  onValueChange,
-  max = 5,
-  size = "md",
-  readOnly = false,
-  accessibilityLabel = "Rating",
-  showValue = false,
-  count
-}) {
-  const { styles } = useStyles(sheet, { size });
-  const theme = useLoamTheme();
-  const iconSize = ICON_SIZE[size];
-  const starSlopY = Math.max(0, (theme.tapMin - (iconSize + theme.space.s1 * 2)) / 2);
-  const isControlled = value !== void 0;
-  const [internal, setInternal] = React.useState(defaultValue);
-  const current = isControlled ? value : internal;
-  const setValue = (next) => {
-    if (!isControlled) setInternal(next);
-    onValueChange?.(next);
-  };
-  const snapped = toHalfStep(Math.max(0, Math.min(max, current)));
-  const shown = Number.isInteger(snapped) ? String(snapped) : snapped.toFixed(1);
-  const label = readOnly ? `${accessibilityLabel}: ${shown} out of ${max} stars` : accessibilityLabel;
-  const readoutLabel = count !== void 0 ? `${shown} of ${max} \xB7 ${count} reviews` : `${shown} of ${max}`;
-  return /* @__PURE__ */ jsxs(View, { style: styles.wrapper, children: [
-    /* @__PURE__ */ jsx(View, { style: styles.row, role: "group", accessibilityLabel: label, children: Array.from({ length: max }, (_, i) => {
-      const starValue = i + 1;
-      const fraction = Math.max(0, Math.min(1, snapped - i));
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          style: styles.star,
-          accessibilityRole: "button",
-          accessibilityLabel: `Rate ${starValue} of ${max}`,
-          accessibilityState: { disabled: readOnly, selected: fraction >= 0.5 },
-          disabled: readOnly,
-          hitSlop: { top: starSlopY, bottom: starSlopY },
-          onPress: readOnly ? void 0 : () => setValue(starValue),
-          children: /* @__PURE__ */ jsx(Star, { fraction, size: iconSize })
-        },
-        i
-      );
-    }) }),
-    showValue ? /* @__PURE__ */ jsx(Text, { testID: "rating-readout", style: styles.readout, children: readoutLabel }) : null
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  // Outer wrapper groups the star row with the optional readout.
-  wrapper: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s2
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    variants: {
-      size: {
-        sm: { gap: theme.space.s1 },
-        md: { gap: theme.space.s1 },
-        lg: { gap: theme.space.s2 }
-      }
-    }
-  },
-  star: {
-    padding: theme.space.s1
-  },
-  // Companion readout — uses body/sm weight and text2 tone so it reads as
-  // secondary information alongside the star icons.
-  readout: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[14],
-    color: theme.color.text2
-  }
-}));
-var starSheet = createStyleSheet(() => ({
-  // `start` + `overflow: 'hidden'` is the clip: the painted star inside keeps its
-  // full width and is cropped to the fraction, from the leading edge either way
-  // round, so RTL needs no sign flip.
-  clip: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    start: 0,
-    overflow: "hidden"
-  },
-  paint: { position: "absolute", top: 0, start: 0 }
-}));
-
-export { Rating };

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-XOSCY2CW.js

@@ -1,242 +0,0 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { View, ScrollView, Pressable, Text, Modal, Animated, Easing } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DOT = {
-  /** Width of the active dot. */
-  activeWidth: 16,
-  /** Width of an inactive dot. */
-  idleWidth: 5
-};
-function Dot({ active }) {
-  const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
-  const progress = React.useRef(new Animated.Value(active ? 1 : 0)).current;
-  React.useEffect(() => {
-    Animated.timing(progress, {
-      toValue: active ? 1 : 0,
-      duration: theme.duration.base,
-      easing: Easing.bezier(...theme.easing.base),
-      useNativeDriver: false
-    }).start();
-  }, [active, progress, theme.duration.base, theme.easing.base]);
-  return /* @__PURE__ */ jsx(
-    Animated.View,
-    {
-      style: [
-        styles.dot,
-        {
-          width: progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [DOT.idleWidth, DOT.activeWidth]
-          }),
-          // The carousel sits on imagery, so the dots use the mode-invariant
-          // media ink rather than a surface token: an indicator that inverted
-          // with the mode would vanish over a bright photo. The idle dot is the
-          // 0.38 alpha stop — the same value the system dims a disabled control
-          // to. Both were `#ffffff` / `rgba(255,255,255,0.4)` literals in the
-          // module constant above, which is why they could not follow a theme.
-          backgroundColor: progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [theme.white.a10, theme.media.ink]
-          })
-        }
-      ]
-    }
-  );
-}
-function Gallery({
-  items,
-  columns = 3,
-  lightbox = true,
-  onSelect
-}) {
-  const { styles } = useStyles(sheet);
-  const [openIndex, setOpenIndex] = React.useState(null);
-  const open = (i) => {
-    onSelect?.(i);
-    if (lightbox) setOpenIndex(i);
-  };
-  return /* @__PURE__ */ jsxs(View, { style: styles.galleryRoot, children: [
-    /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.grid, children: items.map((item, i) => /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "imagebutton",
-        accessibilityLabel: item.alt || `Item ${i + 1}`,
-        onPress: () => open(i),
-        style: [styles.tile, { width: `${100 / columns}%` }],
-        children: /* @__PURE__ */ jsxs(View, { style: styles.tileInner, children: [
-          item.render ? item.render() : /* @__PURE__ */ jsx(Text, { style: styles.tileIndex, children: i + 1 }),
-          item.duration ? /* @__PURE__ */ jsx(View, { style: styles.durationBadge, children: /* @__PURE__ */ jsx(Text, { style: styles.durationText, children: item.duration }) }) : null
-        ] })
-      },
-      item.id
-    )) }),
-    openIndex != null ? /* @__PURE__ */ jsx(
-      GalleryLightbox,
-      {
-        items,
-        index: openIndex,
-        onIndexChange: setOpenIndex,
-        onClose: () => setOpenIndex(null)
-      }
-    ) : null
-  ] });
-}
-function GalleryLightbox({
-  items,
-  index,
-  onIndexChange,
-  onClose
-}) {
-  const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
-  const item = items[index];
-  const count = items.length;
-  if (!item) return null;
-  const go = (delta) => onIndexChange((index + delta + count) % count);
-  return /* @__PURE__ */ jsx(Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsxs(View, { style: styles.lightbox, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.lightboxBar, children: [
-      /* @__PURE__ */ jsxs(Text, { style: styles.counter, children: [
-        index + 1,
-        " / ",
-        count
-      ] }),
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: "Close",
-          onPress: onClose,
-          style: styles.lightboxAction,
-          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.md, color: theme.media.ink })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(View, { style: styles.lightboxStage, children: [
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: "Previous image",
-          onPress: () => go(-1),
-          style: styles.lightboxNav,
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: theme.icon.lg, color: theme.media.ink })
-        }
-      ),
-      /* @__PURE__ */ jsx(View, { style: [styles.lightboxImage, { aspectRatio: item.aspectRatio ?? 0.8 }], children: item.render ? item.render() : /* @__PURE__ */ jsxs(Text, { style: styles.lightboxImageLabel, children: [
-        "Image ",
-        index + 1,
-        " \xB7 ",
-        item.aspectRatio ?? 0.8
-      ] }) }),
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: "Next image",
-          onPress: () => go(1),
-          style: styles.lightboxNav,
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.lg, color: theme.media.ink })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(View, { style: styles.dots, accessibilityElementsHidden: true, importantForAccessibility: "no", children: items.map((it, i) => /* @__PURE__ */ jsx(Dot, { active: i === index }, it.id)) })
-  ] }) });
-}
-var sheet = createStyleSheet((theme) => ({
-  galleryRoot: { flex: 1 },
-  grid: { flexDirection: "row", flexWrap: "wrap", padding: theme.space[2] },
-  tile: { padding: theme.space[2] },
-  tileInner: {
-    aspectRatio: 1,
-    backgroundColor: theme.color.surface3,
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden"
-  },
-  tileIndex: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    color: theme.color.text3
-  },
-  durationBadge: {
-    position: "absolute",
-    right: theme.space[4],
-    bottom: theme.space[4],
-    borderRadius: theme.radius.sm,
-    paddingHorizontal: theme.space[4],
-    paddingVertical: theme.space[1],
-    backgroundColor: theme.black.a12
-  },
-  durationText: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.fontSize[10],
-    color: theme.media.ink
-  },
-  // Not `color.scrim`: a lightbox backdrop sits on imagery rather than on a
-  // token surface, and it is deliberately far heavier than a modal's scrim. The
-  // alpha ramp's top stop is cut at 0.92 for exactly this surface, so the value
-  // is a token now rather than the raw literal the doc leaves it as.
-  lightbox: { flex: 1, backgroundColor: theme.black.a14 },
-  lightboxBar: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: theme.space.s4,
-    paddingVertical: theme.space[14]
-  },
-  counter: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    color: theme.media.ink,
-    opacity: theme.opacity[88]
-  },
-  lightboxAction: {
-    width: theme.tapMin,
-    height: theme.tapMin,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  lightboxStage: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: theme.space[12]
-  },
-  lightboxNav: {
-    width: theme.tapMin,
-    height: theme.tapMin,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  lightboxImage: {
-    flex: 1,
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.color.surface3,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  lightboxImageLabel: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    // Uppercase wants the caps tracking step, which is a ratio — multiply it by
-    // the size rather than restating the product as a bare 1.2.
-    letterSpacing: theme.type.caption2.fontSize * theme.tracking.caps,
-    textTransform: "uppercase",
-    color: theme.color.text3
-  },
-  dots: {
-    flexDirection: "row",
-    justifyContent: "center",
-    gap: DOT.idleWidth,
-    paddingVertical: theme.space.s4
-  },
-  // Width and background are animated per-dot; see {@link Dot}.
-  dot: { height: DOT.idleWidth, borderRadius: theme.radius.full }
-}));
-
-export { Gallery, GalleryLightbox };

package/dist/header/index.js

@@ -1,5 +0,0 @@
-export { Header, HeaderAction } from '../chunk-4YQOR7JM.js';
-import '../chunk-47FWHGUN.js';
-import '../chunk-3NMD74ZU.js';
-import '../chunk-6N33LFQA.js';
-import '../chunk-TKVFVF5D.js';

package/dist/search-bar/index.js

@@ -1,5 +0,0 @@
-import '../chunk-JRLTGLN4.js';
-export { SearchBar, SearchExpand } from '../chunk-47FWHGUN.js';
-import '../chunk-3NMD74ZU.js';
-import '../chunk-6N33LFQA.js';
-import '../chunk-TKVFVF5D.js';