@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-QKXCPTFS.js

@@ -1,349 +0,0 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { Dimensions, Animated, Easing, View, StyleSheet, Pressable, Text, Modal } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-var PANEL_FRACTION = 0.78;
-var SPEC = {
-  /** Panel top padding, before the safe-area inset is added. */
-  panelPadTop: 34,
-  /** Panel bottom padding. */
-  panelPadBottom: 22,
-  /** Gap between the panel's children (header → items, item → item). */
-  itemGap: 3,
-  /** Gap between the avatar and the name/email block. */
-  headerGap: 11,
-  /** Identity header padding: top / horizontal / bottom. */
-  headerPadTop: 6,
-  headerPadX: 10,
-  /** Gap between the name and the email. */
-  identityGap: 1,
-  /** Avatar diameter. */
-  avatar: 40,
-  /** Display-name size. */
-  nameSize: 14.5,
-  /** Email size. */
-  emailSize: 11.5
-};
-function NavDrawer({
-  open,
-  onClose,
-  items,
-  userName,
-  userEmail,
-  avatarInitials,
-  closeLabel = "Close navigation",
-  safeAreaTop = 0,
-  motion = "full",
-  inline = false
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(navDrawer);
-  const panelWidth = React.useMemo(() => Dimensions.get("window").width * PANEL_FRACTION, []);
-  const reducedMotion = theme.reduceMotion || motion === "reduced";
-  const instantMotion = motion === "none";
-  const [visible, setVisible] = React.useState(open);
-  const translateX = React.useRef(new Animated.Value(-panelWidth)).current;
-  const scrimOpacity = React.useRef(new Animated.Value(0)).current;
-  const panelOpacity = React.useRef(new Animated.Value(1)).current;
-  const slideDuration = theme.motion.enter.duration;
-  const slideEasing = React.useMemo(
-    () => Easing.bezier(...theme.motion.enter.easing),
-    [theme.motion.enter.easing]
-  );
-  const fadeDuration = theme.duration.base;
-  const fadeEasing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
-  const animateIn = React.useCallback(() => {
-    if (instantMotion) {
-      translateX.setValue(0);
-      scrimOpacity.setValue(1);
-      panelOpacity.setValue(1);
-      return;
-    }
-    if (reducedMotion) {
-      translateX.setValue(0);
-      panelOpacity.setValue(0);
-      scrimOpacity.setValue(0);
-      Animated.parallel([
-        Animated.timing(panelOpacity, {
-          toValue: 1,
-          duration: fadeDuration,
-          easing: fadeEasing,
-          useNativeDriver: true
-        }),
-        Animated.timing(scrimOpacity, {
-          toValue: 1,
-          duration: fadeDuration,
-          easing: fadeEasing,
-          useNativeDriver: true
-        })
-      ]).start();
-      return;
-    }
-    translateX.setValue(-panelWidth);
-    scrimOpacity.setValue(0);
-    panelOpacity.setValue(1);
-    Animated.parallel([
-      Animated.timing(translateX, {
-        toValue: 0,
-        duration: slideDuration,
-        easing: slideEasing,
-        useNativeDriver: true
-      }),
-      Animated.timing(scrimOpacity, {
-        toValue: 1,
-        duration: fadeDuration,
-        easing: fadeEasing,
-        useNativeDriver: true
-      })
-    ]).start();
-  }, [
-    translateX,
-    scrimOpacity,
-    panelOpacity,
-    panelWidth,
-    slideDuration,
-    slideEasing,
-    fadeDuration,
-    fadeEasing,
-    reducedMotion,
-    instantMotion
-  ]);
-  const animateOut = React.useCallback(() => {
-    if (instantMotion) {
-      scrimOpacity.setValue(0);
-      panelOpacity.setValue(0);
-      setVisible(false);
-      return;
-    }
-    if (reducedMotion) {
-      Animated.parallel([
-        Animated.timing(panelOpacity, {
-          toValue: 0,
-          duration: fadeDuration,
-          easing: fadeEasing,
-          useNativeDriver: true
-        }),
-        Animated.timing(scrimOpacity, {
-          toValue: 0,
-          duration: fadeDuration,
-          easing: fadeEasing,
-          useNativeDriver: true
-        })
-      ]).start(({ finished }) => {
-        if (finished) setVisible(false);
-      });
-      return;
-    }
-    Animated.parallel([
-      Animated.timing(translateX, {
-        toValue: -panelWidth,
-        duration: slideDuration,
-        easing: slideEasing,
-        useNativeDriver: true
-      }),
-      Animated.timing(scrimOpacity, {
-        toValue: 0,
-        duration: fadeDuration,
-        easing: fadeEasing,
-        useNativeDriver: true
-      })
-    ]).start(({ finished }) => {
-      if (finished) setVisible(false);
-    });
-  }, [
-    translateX,
-    scrimOpacity,
-    panelOpacity,
-    panelWidth,
-    slideDuration,
-    slideEasing,
-    fadeDuration,
-    fadeEasing,
-    reducedMotion,
-    instantMotion
-  ]);
-  React.useEffect(() => {
-    if (open) {
-      setVisible(true);
-    } else if (visible) {
-      animateOut();
-    }
-  }, [open]);
-  React.useEffect(() => {
-    if (visible && open) animateIn();
-  }, [visible]);
-  const handleItemPress = (item) => {
-    item.onPress?.();
-    onClose();
-  };
-  const body = /* @__PURE__ */ jsxs(View, { style: [styles.root, inline && StyleSheet.absoluteFill], children: [
-    /* @__PURE__ */ jsx(Animated.View, { style: [StyleSheet.absoluteFill, styles.scrim, { opacity: scrimOpacity }], children: /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        style: StyleSheet.absoluteFill,
-        accessibilityRole: "button",
-        accessibilityLabel: closeLabel,
-        onPress: onClose
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(
-      Animated.View,
-      {
-        accessibilityViewIsModal: true,
-        accessibilityRole: "menu",
-        accessibilityLabel: userName ?? "Navigation",
-        style: [
-          styles.panel,
-          {
-            width: inline ? `${PANEL_FRACTION * 100}%` : panelWidth,
-            paddingTop: SPEC.panelPadTop + safeAreaTop,
-            opacity: panelOpacity,
-            transform: [{ translateX }]
-          }
-        ],
-        children: [
-          (avatarInitials || userName || userEmail) && /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-            avatarInitials ? /* @__PURE__ */ jsx(View, { style: styles.avatar, children: /* @__PURE__ */ jsx(Text, { style: styles.avatarText, children: avatarInitials }) }) : null,
-            /* @__PURE__ */ jsxs(View, { style: styles.identity, children: [
-              userName ? /* @__PURE__ */ jsx(Text, { style: styles.userName, numberOfLines: 1, children: userName }) : null,
-              userEmail ? /* @__PURE__ */ jsx(Text, { style: styles.userEmail, numberOfLines: 1, children: userEmail }) : null
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(View, { style: styles.list, children: items.map((item, i) => {
-            const active = item.active ?? false;
-            const fg = active ? theme.color.accentOnSoft : theme.color.text;
-            return /* @__PURE__ */ jsxs(
-              Pressable,
-              {
-                accessibilityRole: "menuitem",
-                accessibilityLabel: item.label,
-                accessibilityState: { selected: active },
-                onPress: () => handleItemPress(item),
-                style: [styles.item, active ? styles.itemActive : null],
-                children: [
-                  /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 20, color: fg }),
-                  /* @__PURE__ */ jsx(Text, { style: [styles.itemLabel, { color: fg }], numberOfLines: 1, children: item.label })
-                ]
-              },
-              `${item.label}-${i}`
-            );
-          }) })
-        ]
-      }
-    )
-  ] });
-  if (inline) return visible ? body : /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsx(
-    Modal,
-    {
-      visible,
-      transparent: true,
-      animationType: "none",
-      onRequestClose: onClose,
-      statusBarTranslucent: true,
-      children: body
-    }
-  );
-}
-var navDrawer = createStyleSheet((theme) => ({
-  root: {
-    flex: 1,
-    flexDirection: "row"
-  },
-  scrim: {
-    backgroundColor: theme.color.scrim,
-    zIndex: theme.z.overlay
-  },
-  // `paddingTop` is applied at the use site — it folds in the safe-area inset.
-  // loam-contrast-ignore — the boundary here is the scrim, not the shadow.
-  // `color.scrim` is a 44% wash and is *not* re-resolved by high contrast, so
-  // this surface is still separated from the page when the elevation zeroes
-  // out. A border would put a hairline around every modal for no gain.
-  panel: {
-    height: "100%",
-    backgroundColor: theme.color.surface,
-    paddingHorizontal: theme.space.s3,
-    paddingBottom: SPEC.panelPadBottom,
-    gap: SPEC.itemGap,
-    zIndex: theme.z.modal,
-    ...theme.shadow.lg
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    minWidth: 0,
-    gap: SPEC.headerGap,
-    paddingTop: SPEC.headerPadTop,
-    paddingHorizontal: SPEC.headerPadX,
-    paddingBottom: theme.space.s4
-  },
-  avatar: {
-    width: SPEC.avatar,
-    height: SPEC.avatar,
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.accent,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  avatarText: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.fontSize[14],
-    color: theme.color.accentInk
-  },
-  // `minWidth: 0` lets a long name/email truncate instead of widening the row.
-  identity: {
-    flex: 1,
-    minWidth: 0,
-    flexDirection: "column",
-    gap: SPEC.identityGap
-  },
-  userName: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: SPEC.nameSize,
-    lineHeight: SPEC.nameSize * theme.lineHeight.snug,
-    color: theme.color.text
-  },
-  userEmail: {
-    fontFamily: theme.font.sans,
-    fontSize: SPEC.emailSize,
-    lineHeight: SPEC.emailSize * theme.lineHeight.snug,
-    color: theme.color.text2
-  },
-  // Horizontal padding now lives on the panel, so the rows sit inside its 12px.
-  list: {
-    gap: SPEC.itemGap
-  },
-  item: {
-    flexDirection: "row",
-    alignItems: "center",
-    // Reference (buildDrawer): `gap:14px` — 14px is a step of the spacing ramp.
-    gap: theme.space[14],
-    // Reference: `padding:13px 12px` — use paddingVertical instead of fixed height.
-    paddingVertical: theme.space[13],
-    paddingHorizontal: theme.space.s3,
-    borderRadius: theme.radius.md,
-    backgroundColor: "transparent",
-    // Reserved on every row, not just the active one: a border that appears with
-    // the state would move every label 1px when the selection changes.
-    borderWidth: theme.borderWidth.base,
-    borderColor: "transparent"
-  },
-  itemActive: {
-    backgroundColor: theme.color.accentSoft,
-    // Which item you are on is carried by a fill alone, and a fill is what high
-    // contrast re-resolves away — the accent edge is what still says "here".
-    borderColor: theme.edge.accent
-  },
-  itemLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    // Reference (buildDrawer): `font-size:15px` — 15px, read from the ramp rather than hardcoded.
-    fontSize: theme.fontSize[15]
-  }
-}));
-
-export { NavDrawer };

package/dist/chunk-RIBDXGUG.js

@@ -1,108 +0,0 @@
-import * as React from 'react';
-import { Animated, Easing, AccessibilityInfo, View } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsx } from 'react/jsx-runtime';
-
-// src/skeleton/skeleton.tsx
-var CIRCLE_DEFAULT = 40;
-var TEXT_HEIGHT = 14;
-var RECT_HEIGHT = 120;
-function Skeleton({
-  variant = "text",
-  width,
-  height,
-  radius,
-  style,
-  accessibilityLabel = "Loading",
-  testID
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet, { variant });
-  let resolvedWidth;
-  let resolvedHeight;
-  if (variant === "circle") {
-    const size = width ?? height ?? CIRCLE_DEFAULT;
-    resolvedWidth = size;
-    resolvedHeight = size;
-  } else {
-    resolvedWidth = width ?? "100%";
-    resolvedHeight = height ?? (variant === "text" ? TEXT_HEIGHT : RECT_HEIGHT);
-  }
-  const opacity = React.useRef(new Animated.Value(1)).current;
-  React.useEffect(() => {
-    let cancelled = false;
-    let loop;
-    const bezier = Easing.bezier(...theme.easing.base);
-    AccessibilityInfo.isReduceMotionEnabled().then((reduced) => {
-      if (cancelled || reduced) return;
-      loop = Animated.loop(
-        Animated.sequence([
-          Animated.timing(opacity, {
-            toValue: 0.5,
-            duration: theme.duration.slow,
-            easing: bezier,
-            useNativeDriver: true
-          }),
-          Animated.timing(opacity, {
-            toValue: 1,
-            duration: theme.duration.slow,
-            easing: bezier,
-            useNativeDriver: true
-          })
-        ])
-      );
-      loop.start();
-    });
-    return () => {
-      cancelled = true;
-      loop?.stop();
-    };
-  }, [opacity, theme.duration.slow, theme.easing.base]);
-  return /* @__PURE__ */ jsx(
-    Animated.View,
-    {
-      accessibilityRole: "image",
-      accessibilityLabel,
-      accessibilityState: { busy: true },
-      testID,
-      style: [
-        styles.base,
-        { width: resolvedWidth, height: resolvedHeight, opacity },
-        radius ? { borderRadius: theme.radius[radius] } : null,
-        style
-      ]
-    }
-  );
-}
-function SkeletonText({
-  lines = 3,
-  lastLineWidth = "60%",
-  lineHeight = TEXT_HEIGHT,
-  style,
-  testID
-}) {
-  const theme = useLoamTheme();
-  return /* @__PURE__ */ jsx(View, { style: [{ gap: theme.space.s2 }, style], testID, children: Array.from({ length: Math.max(0, lines) }).map((_, i) => /* @__PURE__ */ jsx(
-    Skeleton,
-    {
-      variant: "text",
-      height: lineHeight,
-      style: i === lines - 1 ? { width: lastLineWidth } : void 0
-    },
-    i
-  )) });
-}
-var sheet = createStyleSheet((theme) => ({
-  base: {
-    backgroundColor: theme.color.surface2,
-    variants: {
-      variant: {
-        text: { borderRadius: theme.radius.sm },
-        circle: { borderRadius: theme.radius.full },
-        rect: { borderRadius: theme.radius.lg }
-      }
-    }
-  }
-}));
-
-export { Skeleton, SkeletonText };

package/dist/chunk-RJQOOHT2.js

@@ -1,214 +0,0 @@
-import { Dialog, DialogTitle, DialogFooter } from './chunk-OPXFZ4Y5.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { Animated, Easing, Text, Pressable, View } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function AnnouncementBar({
-  tone = "info",
-  children,
-  icon,
-  actionLabel,
-  onAction,
-  onDismiss,
-  dismissLabel = "Dismiss",
-  wrap = false,
-  motion = "full"
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet, { tone });
-  const slide = React.useRef(new Animated.Value(0)).current;
-  const animate = motion === "full" && !theme.reduceMotion;
-  React.useEffect(() => {
-    Animated.timing(slide, {
-      toValue: 1,
-      duration: animate ? theme.motion.enter.duration : 0,
-      easing: Easing.bezier(...theme.motion.enter.easing),
-      useNativeDriver: true
-    }).start();
-  }, [slide, animate, theme.motion.enter]);
-  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,
-        {
-          transform: [
-            { translateY: slide.interpolate({ inputRange: [0, 1], outputRange: [-theme.space[40], 0] }) }
-          ]
-        }
-      ],
-      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: theme.space[10],
-            style: styles.action,
-            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,
-            onPress: onDismiss,
-            hitSlop: theme.space[10],
-            style: styles.iconButton,
-            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.xs, color: ink })
-          }
-        ) : null
-      ]
-    }
-  );
-}
-function AnnouncementHighlights({
-  items
-}) {
-  const theme = useLoamTheme();
-  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 = "See what changed",
-  onPrimary,
-  secondaryLabel = "Later",
-  onSecondary,
-  motion = "full"
-}) {
-  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
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "lg",
-          variant: "primary",
-          onPress: () => {
-            onPrimary?.();
-            onOpenChange(false);
-          },
-          children: primaryLabel
-        }
-      )
-    ] })
-  ] });
-}
-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
-  },
-  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 };