@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-XQXMLMH3.js

@@ -1,211 +0,0 @@
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
-import * as React from 'react';
-import { Pressable, View, Text, Animated } 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 { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-
-var DEFAULT_LABELS = {
-  rating: "Rating",
-  readOnlyLabel: (name, value, max) => `${name}: ${value} out of ${max} stars`,
-  rate: (value, max) => `Rate ${value} of ${max}`,
-  readout: (value, max) => `${value} of ${max}`,
-  readoutWithCount: (value, max, count) => `${value} of ${max} \xB7 ${count} reviews`
-};
-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,
-  delay = 0,
-  kick = 0,
-  animate = false
-}) {
-  const theme = useLoamTheme("rating");
-  const { styles } = useStyles(starSheet);
-  const filled = Math.max(0, Math.min(1, fraction));
-  const grow = React.useRef(new Animated.Value(1)).current;
-  const pulse = React.useRef(new Animated.Value(1)).current;
-  const wasFilled = React.useRef(filled > 0);
-  React.useEffect(() => {
-    const was = wasFilled.current;
-    wasFilled.current = filled > 0;
-    if (!animate || was || filled === 0) return;
-    grow.setValue(0.5);
-    const a = Animated.sequence([
-      Animated.delay(delay),
-      Animated.spring(grow, { ...springConfig(theme, "fs"), toValue: 1, useNativeDriver: true })
-    ]);
-    a.start();
-    return () => a.stop();
-  }, [filled > 0]);
-  React.useEffect(() => {
-    if (!animate || !kick) return;
-    pulse.setValue(1.2);
-    Animated.spring(pulse, {
-      ...springConfig(theme, "fs"),
-      toValue: 1,
-      useNativeDriver: true
-    }).start();
-  }, [kick]);
-  return /* @__PURE__ */ jsxs(View, { style: { width: size, height: size }, children: [
-    /* @__PURE__ */ jsx(Icon, { name: "star", size, color: theme.color.text3 }),
-    filled > 0 ? /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        testID: "rating-star-fill",
-        style: [
-          styles.clip,
-          {
-            width: size * filled,
-            opacity: grow,
-            transform: [{ scale: Animated.multiply(grow, pulse) }]
-          }
-        ],
-        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: accessibilityLabelProp,
-  showValue = false,
-  count,
-  motion = "full",
-  labels: labelsProp
-}) {
-  const { styles } = useStyles(sheet, { size });
-  const labels = useLabels("rating", DEFAULT_LABELS, labelsProp);
-  const accessibilityLabel = accessibilityLabelProp ?? labels.rating;
-  const theme = useLoamTheme("rating");
-  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 animate = useResolvedMotion(motion, "rating") === "full" && !readOnly;
-  const [chosen, setChosen] = React.useState({ index: -1, n: 0 });
-  const before = React.useRef(0);
-  const setValue = (next) => {
-    before.current = Math.ceil(current);
-    setChosen((c) => ({ index: next - 1, n: c.n + 1 }));
-    if (!isControlled) setInternal(next);
-    onValueChange?.(next);
-  };
-  const clamped = Math.max(0, Math.min(max, current));
-  const snapped = readOnly ? Math.round(clamped * 10) / 10 : toHalfStep(clamped);
-  const shown = Number.isInteger(snapped) ? String(snapped) : snapped.toFixed(1);
-  const label = readOnly ? labels.readOnlyLabel(accessibilityLabel, shown, max) : accessibilityLabel;
-  const readoutLabel = count !== void 0 ? labels.readoutWithCount(shown, max, count) : labels.readout(shown, max);
-  const stars = /* @__PURE__ */ jsx(Fragment, { 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: labels.rate(starValue, 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,
-            animate,
-            delay: Math.min(Math.max(0, i - before.current), 8) * 30,
-            kick: chosen.index === i ? chosen.n : 0
-          }
-        )
-      },
-      i
-    );
-  }) });
-  return /* @__PURE__ */ jsxs(View, { style: styles.wrapper, children: [
-    readOnly ? (
-      // A display, not a control: one image-like stop that reads the score,
-      // instead of five disabled "Rate N of 5" buttons to swipe through
-      // (WCAG 4.1.2; VoiceOver/TalkBack would announce each as dimmed).
-      /* @__PURE__ */ jsx(View, { accessible: true, accessibilityRole: "image", accessibilityLabel: label, children: /* @__PURE__ */ jsx(
-        View,
-        {
-          style: styles.row,
-          accessibilityElementsHidden: true,
-          importantForAccessibility: "no-hide-descendants",
-          ...{ "aria-hidden": true },
-          children: stars
-        }
-      ) })
-    ) : /* @__PURE__ */ jsx(View, { style: styles.row, role: "group", accessibilityLabel: label, children: stars }),
-    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-ZECZOOSB.js

@@ -1,245 +0,0 @@
-import { Dialog, DialogTitle, DialogFooter } from './chunk-GDKVKNR2.js';
-import { Button } from './chunk-E2E3I5W2.js';
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import { springConfig, motionTiming } from './chunk-J64KGCGX.js';
-import * as React from 'react';
-import { Animated, Text, Pressable, View, LayoutAnimation } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DEFAULT_LABELS = {
-  dismiss: "Dismiss",
-  primary: "See what changed",
-  secondary: "Later"
-};
-function AnnouncementBar({
-  tone = "info",
-  children,
-  icon,
-  actionLabel,
-  onAction,
-  onDismiss,
-  dismissLabel,
-  wrap = false,
-  motion = "full",
-  labels: labelsProp
-}) {
-  const labels = useLabels("announcement", DEFAULT_LABELS, labelsProp);
-  const theme = useLoamTheme("announcement");
-  const { styles } = useStyles(sheet, { tone });
-  const slide = React.useRef(new Animated.Value(0)).current;
-  const animate = motion === "full" && !theme.reduceMotion;
-  React.useEffect(() => {
-    if (animate) {
-      Animated.spring(slide, { ...springConfig(theme, "ds"), toValue: 1, useNativeDriver: true }).start();
-    } else {
-      Animated.timing(slide, { ...motionTiming(motion === "none" ? "none" : "reduced"), toValue: 1, useNativeDriver: true }).start();
-    }
-  }, [slide, animate]);
-  const dismiss = () => {
-    if (animate) {
-      LayoutAnimation.configureNext({
-        duration: theme.spring.ds.duration,
-        update: { type: LayoutAnimation.Types.spring, springDamping: theme.spring.ds.dampingRatio },
-        delete: { type: LayoutAnimation.Types.easeOut, property: LayoutAnimation.Properties.opacity }
-      });
-    }
-    onDismiss?.();
-  };
-  const actionSlopY = Math.max(
-    theme.space[10],
-    Math.round((theme.tapMin - theme.type.footnote.lineHeight) / 2)
-  );
-  const dismissSlop = Math.max(theme.space[10], Math.round((theme.tapMin - theme.ctl.xs) / 2));
-  const ink = tone === "info" ? theme.color.infoOnSoft : tone === "warn" ? theme.color.warnOnSoft : tone === "danger" ? theme.color.dangerOnSoft : tone === "good" ? theme.color.goodOnSoft : theme.color.accentOnSoft;
-  const defaultIcon = tone === "warn" ? "alert-triangle" : tone === "danger" ? "alert-circle" : tone === "good" ? "check-circle" : tone === "accent" ? "star" : "info";
-  return /* @__PURE__ */ jsxs(
-    Animated.View,
-    {
-      accessibilityRole: tone === "warn" || tone === "danger" ? "alert" : "text",
-      accessibilityLiveRegion: "polite",
-      style: [
-        styles.bar,
-        animate ? {
-          transform: [
-            { translateY: slide.interpolate({ inputRange: [0, 1], outputRange: [-theme.space[40], 0] }) }
-          ]
-        } : { opacity: slide }
-      ],
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: icon ?? defaultIcon, size: theme.icon.sm, color: ink }),
-        /* @__PURE__ */ jsx(Text, { numberOfLines: wrap ? 2 : 1, style: [styles.text, { color: ink }], children }),
-        actionLabel && onAction ? /* @__PURE__ */ jsxs(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: actionLabel,
-            onPress: onAction,
-            hitSlop: {
-              top: actionSlopY,
-              bottom: actionSlopY,
-              left: theme.space[10],
-              right: theme.space[10]
-            },
-            style: ({ pressed }) => [styles.action, pressed ? styles.pressed : null],
-            children: [
-              /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, { color: ink }], children: actionLabel }),
-              /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.xs, color: ink })
-            ]
-          }
-        ) : null,
-        onDismiss ? /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: dismissLabel ?? labels.dismiss,
-            onPress: dismiss,
-            hitSlop: dismissSlop,
-            style: ({ pressed }) => [styles.iconButton, pressed ? styles.pressed : null],
-            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.xs, color: ink })
-          }
-        ) : null
-      ]
-    }
-  );
-}
-function AnnouncementHighlights({
-  items
-}) {
-  const theme = useLoamTheme("announcement");
-  const { styles } = useStyles(sheet, { tone: "info" });
-  if (!items.length) return null;
-  return /* @__PURE__ */ jsx(View, { style: styles.highlights, children: items.map((h) => /* @__PURE__ */ jsxs(View, { style: styles.highlightRow, children: [
-    /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.good }),
-    /* @__PURE__ */ jsx(Text, { style: styles.highlightText, children: h })
-  ] }, h)) });
-}
-function AnnouncementModal({
-  open,
-  onOpenChange,
-  kicker,
-  title,
-  body,
-  media,
-  highlights,
-  primaryLabel,
-  onPrimary,
-  secondaryLabel,
-  onSecondary,
-  motion = "full",
-  labels: labelsProp
-}) {
-  const labels = useLabels("announcement", DEFAULT_LABELS, labelsProp);
-  const { styles } = useStyles(sheet, { tone: "info" });
-  return /* @__PURE__ */ jsxs(Dialog, { open, onClose: () => onOpenChange(false), accessibilityLabel: title, motion, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.modalBody, children: [
-      kicker ? /* @__PURE__ */ jsx(Text, { style: styles.kicker, children: kicker }) : null,
-      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
-      media,
-      body ? /* @__PURE__ */ jsx(Text, { style: styles.modalText, children: body }) : null,
-      highlights ? /* @__PURE__ */ jsx(AnnouncementHighlights, { items: highlights }) : null
-    ] }),
-    /* @__PURE__ */ jsxs(DialogFooter, { children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "lg",
-          variant: "outline",
-          onPress: () => {
-            onSecondary?.();
-            onOpenChange(false);
-          },
-          children: secondaryLabel ?? labels.secondary
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "lg",
-          variant: "primary",
-          onPress: () => {
-            onPrimary?.();
-            onOpenChange(false);
-          },
-          children: primaryLabel ?? labels.primary
-        }
-      )
-    ] })
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  bar: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space[11],
-    paddingHorizontal: theme.space[12],
-    paddingVertical: theme.space[9],
-    borderBottomWidth: theme.borderWidth.thin,
-    borderBottomColor: theme.color.border,
-    variants: {
-      // Each tint pairs with its own on-soft ink and a tone edge, so the strip
-      // survives high contrast, where the tint collapses to the plain surface.
-      tone: {
-        info: { backgroundColor: theme.color.infoSoft, borderBottomColor: theme.edge.info },
-        warn: { backgroundColor: theme.color.warnSoft, borderBottomColor: theme.edge.warn },
-        danger: { backgroundColor: theme.color.dangerSoft, borderBottomColor: theme.edge.danger },
-        good: { backgroundColor: theme.color.goodSoft, borderBottomColor: theme.edge.good },
-        accent: { backgroundColor: theme.color.accentSoft, borderBottomColor: theme.edge.accent }
-      }
-    }
-  },
-  text: {
-    flex: 1,
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight
-  },
-  pressed: { opacity: theme.state.pressedOpacity },
-  action: { flexDirection: "row", alignItems: "center", gap: theme.space[2] },
-  actionLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.extrabold,
-    fontSize: theme.type.footnote.fontSize,
-    textDecorationLine: "underline"
-  },
-  iconButton: {
-    width: theme.ctl.xs,
-    height: theme.ctl.xs,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.radius.full
-  },
-  highlights: {
-    gap: theme.space[8],
-    padding: theme.space[12],
-    borderRadius: theme.radius.md,
-    borderWidth: theme.borderWidth.thin,
-    borderColor: theme.color.border,
-    backgroundColor: theme.color.surface2
-  },
-  highlightRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space[9] },
-  highlightText: {
-    flex: 1,
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.subheadline.fontSize,
-    lineHeight: theme.type.subheadline.lineHeight,
-    color: theme.color.text2
-  },
-  modalBody: { gap: theme.space[12] },
-  modalText: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.body.fontSize,
-    lineHeight: theme.type.body.lineHeight,
-    color: theme.color.text2
-  },
-  kicker: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    letterSpacing: theme.tracking.caps,
-    textTransform: "uppercase",
-    color: theme.color.accentStrong
-  }
-}));
-
-export { AnnouncementBar, AnnouncementHighlights, AnnouncementModal };