@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-PID3NJB7.js

@@ -1,405 +0,0 @@
-import { Sheet } from './chunk-QYPE5JX3.js';
-import { expandedProps } from './chunk-W23G6JLF.js';
-import { Button } from './chunk-E2E3I5W2.js';
-import { haptics } from './chunk-NY2U3PBI.js';
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import { useResolvedMotion } from './chunk-J64KGCGX.js';
-import * as React from 'react';
-import { Animated, Platform, View, Text, Pressable } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-var MIN_SCALE = 0.85;
-var TILT = 50;
-function WheelPicker({
-  items,
-  value,
-  onValueChange,
-  visibleRows = 5,
-  accessibilityLabel,
-  motion = "full",
-  style,
-  testID
-}) {
-  const theme = useLoamTheme("picker");
-  const { styles } = useStyles(sheet);
-  const level = useResolvedMotion(motion, "picker");
-  const row = theme.tapMin;
-  const pad = row * (visibleRows - 1) / 2;
-  const selectedIndex = Math.max(
-    0,
-    items.findIndex((item) => item.value === value)
-  );
-  const scrollY = React.useRef(new Animated.Value(selectedIndex * row)).current;
-  const scroller = React.useRef(null);
-  const live = React.useRef(selectedIndex);
-  const settled = React.useRef(selectedIndex);
-  const indexAt = (y) => Math.min(items.length - 1, Math.max(0, Math.round(y / row)));
-  React.useLayoutEffect(() => {
-    if (Platform.OS === "web")
-      scroller.current?.scrollTo({ y: selectedIndex * row, animated: false });
-  }, []);
-  React.useEffect(() => {
-    if (selectedIndex === settled.current) return;
-    settled.current = selectedIndex;
-    live.current = selectedIndex;
-    scroller.current?.scrollTo({ y: selectedIndex * row, animated: level === "full" });
-  }, [selectedIndex, row, level]);
-  const commit = (index) => {
-    settled.current = index;
-    const item = items[index];
-    if (item && item.value !== value) onValueChange?.(item.value);
-  };
-  const onScroll = Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
-    useNativeDriver: true,
-    listener: (e) => {
-      const i = indexAt(e.nativeEvent.contentOffset.y);
-      if (i !== live.current) {
-        live.current = i;
-        haptics.selection();
-      }
-      if (idle.current) clearTimeout(idle.current);
-      idle.current = setTimeout(() => commit(i), 150);
-    }
-  });
-  const idle = React.useRef(null);
-  React.useEffect(
-    () => () => {
-      if (idle.current) clearTimeout(idle.current);
-    },
-    []
-  );
-  const onEnd = (e) => {
-    if (idle.current) clearTimeout(idle.current);
-    commit(indexAt(e.nativeEvent.contentOffset.y));
-  };
-  const step = (delta) => {
-    const next = Math.min(items.length - 1, Math.max(0, settled.current + delta));
-    if (next === settled.current) return;
-    haptics.selection();
-    live.current = next;
-    scroller.current?.scrollTo({ y: next * row, animated: level === "full" });
-    commit(next);
-  };
-  const current = items[selectedIndex];
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      testID,
-      accessible: true,
-      accessibilityRole: "adjustable",
-      accessibilityLabel,
-      accessibilityValue: { text: current?.label },
-      ...{ role: "slider", "aria-valuetext": current?.label },
-      accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
-      onAccessibilityAction: (e) => step(e.nativeEvent.actionName === "increment" ? 1 : -1),
-      style: [styles.wheel, { height: row * visibleRows }, style],
-      children: [
-        /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.band, { top: pad, height: row }] }),
-        /* @__PURE__ */ jsx(
-          Animated.ScrollView,
-          {
-            ref: scroller,
-            showsVerticalScrollIndicator: false,
-            snapToInterval: row,
-            decelerationRate: "fast",
-            contentOffset: { x: 0, y: selectedIndex * row },
-            contentContainerStyle: { paddingVertical: pad },
-            scrollEventThrottle: 16,
-            onScroll,
-            onMomentumScrollEnd: onEnd,
-            style: Platform.OS === "web" ? { scrollSnapType: "y mandatory" } : void 0,
-            ...{ "aria-hidden": true },
-            children: items.map((item, i) => {
-              const at = i * row;
-              const range = [at - 2 * row, at - row, at, at + row, at + 2 * row];
-              const opacity = scrollY.interpolate({
-                inputRange: range,
-                outputRange: [0.3, 0.6, 1, 0.6, 0.3],
-                extrapolate: "clamp"
-              });
-              const turn = level === "full" ? [
-                { perspective: row * 8 },
-                {
-                  rotateX: scrollY.interpolate({
-                    inputRange: range,
-                    outputRange: [
-                      `${-TILT}deg`,
-                      `${-TILT / 2}deg`,
-                      "0deg",
-                      `${TILT / 2}deg`,
-                      `${TILT}deg`
-                    ],
-                    extrapolate: "clamp"
-                  })
-                },
-                {
-                  scale: scrollY.interpolate({
-                    inputRange: range,
-                    outputRange: [
-                      MIN_SCALE,
-                      (1 + MIN_SCALE) / 2,
-                      1,
-                      (1 + MIN_SCALE) / 2,
-                      MIN_SCALE
-                    ],
-                    extrapolate: "clamp"
-                  })
-                }
-              ] : [];
-              return /* @__PURE__ */ jsx(
-                Animated.View,
-                {
-                  style: [
-                    styles.row,
-                    { height: row, opacity, transform: turn },
-                    Platform.OS === "web" ? { scrollSnapAlign: "center" } : null
-                  ],
-                  children: /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      style: [styles.label, i === selectedIndex && styles.labelSelected],
-                      numberOfLines: 1,
-                      children: item.label
-                    }
-                  )
-                },
-                item.value
-              );
-            })
-          }
-        )
-      ]
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  wheel: { alignSelf: "stretch", overflow: "hidden" },
-  band: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.color.accentSoft,
-    // The tint collapses to the surface under `contrast: 'more'`, where
-    // `edge.accent` turns opaque and keeps the selection band drawn.
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.accent
-  },
-  row: { alignItems: "center", justifyContent: "center" },
-  label: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[20],
-    color: theme.color.text
-  },
-  labelSelected: { fontWeight: theme.fontWeight.semibold, color: theme.color.accentOnSoft }
-}));
-var DEFAULT_LABELS = {
-  select: "Select\u2026",
-  done: "Done"
-};
-function Picker({
-  items,
-  value,
-  onValueChange,
-  placeholder: placeholderProp,
-  title,
-  disabled = false,
-  size = "md",
-  accessibilityLabel,
-  variant = "list",
-  motion = "full",
-  labels: labelsProp
-}) {
-  const labels = useLabels("picker", DEFAULT_LABELS, labelsProp);
-  const placeholder = placeholderProp ?? labels.select;
-  const [open, setOpen] = React.useState(false);
-  const [draft, setDraft] = React.useState(value);
-  React.useEffect(() => {
-    if (open) setDraft(value ?? items[0]?.value);
-  }, [open]);
-  const theme = useLoamTheme("picker");
-  const selected = items.find((item) => item.value === value);
-  const isPlaceholder = selected == null;
-  const displayText = selected?.label ?? placeholder;
-  const { styles } = useStyles(sheet2, { size, disabled, placeholder: isPlaceholder });
-  const iconSize = theme.ctl.icon[size];
-  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
-  const handleSelect = (next) => {
-    haptics.selection();
-    onValueChange?.(next);
-    setOpen(false);
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, ${displayText}` : displayText,
-        accessibilityState: { disabled, expanded: open },
-        ...expandedProps(open),
-        disabled,
-        onPress: disabled ? void 0 : () => setOpen(true),
-        hitSlop: { top: slopY, bottom: slopY },
-        style: styles.trigger,
-        children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.value, numberOfLines: 1, children: displayText }),
-          /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: iconSize, color: theme.color.text3 })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      Sheet,
-      {
-        open,
-        onClose: () => setOpen(false),
-        title,
-        footer: variant === "wheel" ? /* @__PURE__ */ jsx(
-          Button,
-          {
-            fullWidth: true,
-            onPress: () => {
-              if (draft != null && draft !== value) onValueChange?.(draft);
-              setOpen(false);
-            },
-            children: labels.done
-          }
-        ) : void 0,
-        children: [
-          variant === "wheel" ? /* @__PURE__ */ jsx(
-            WheelPicker,
-            {
-              items,
-              value: draft,
-              onValueChange: setDraft,
-              accessibilityLabel: title ?? accessibilityLabel ?? placeholder,
-              motion
-            }
-          ) : null,
-          variant === "wheel" ? null : items.map((item) => {
-            const isSelected = item.value === value;
-            return /* @__PURE__ */ jsxs(
-              Pressable,
-              {
-                accessibilityRole: "button",
-                accessibilityLabel: item.label,
-                accessibilityState: { selected: isSelected },
-                onPress: () => handleSelect(item.value),
-                style: ({ pressed }) => [
-                  styles.option,
-                  isSelected ? styles.optionSelected : null,
-                  pressed ? styles.optionPressed : null
-                ],
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      style: [styles.optionLabel, isSelected ? styles.optionLabelSelected : null],
-                      children: item.label
-                    }
-                  ),
-                  isSelected ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: theme.color.accentOnSoft }) : null
-                ]
-              },
-              item.value
-            );
-          })
-        ]
-      }
-    )
-  ] });
-}
-var sheet2 = createStyleSheet((theme) => ({
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: theme.color.surface2,
-    // The reference draws a `1.5px` field edge — the static `w2` weight.
-    borderWidth: theme.borderWidth.thick,
-    borderColor: theme.color.borderStrong,
-    variants: {
-      // Height, padding, gap and corner radius all resolve from one control-size
-      // tier (26 / 30 / 36 / 44), matching {@link Input}.
-      size: {
-        xs: {
-          height: theme.ctl.xs,
-          paddingHorizontal: theme.ctl.px.xs,
-          gap: theme.ctl.gap.xs,
-          borderRadius: theme.ctl.r.xs
-        },
-        sm: {
-          height: theme.ctl.sm,
-          paddingHorizontal: theme.ctl.px.sm,
-          gap: theme.ctl.gap.sm,
-          borderRadius: theme.ctl.r.sm
-        },
-        md: {
-          height: theme.ctl.md,
-          paddingHorizontal: theme.ctl.px.md,
-          gap: theme.ctl.gap.md,
-          borderRadius: theme.ctl.r.md
-        },
-        lg: {
-          height: theme.ctl.lg,
-          paddingHorizontal: theme.ctl.px.lg,
-          gap: theme.ctl.gap.lg,
-          borderRadius: theme.ctl.r.lg
-        }
-      },
-      disabled: {
-        true: { opacity: theme.state.disabledOpacity },
-        false: {}
-      }
-    }
-  },
-  value: {
-    flex: 1,
-    fontFamily: theme.font.sans,
-    variants: {
-      size: {
-        xs: { fontSize: theme.fontSize[14] },
-        sm: { fontSize: theme.fontSize[14] },
-        md: { fontSize: theme.fontSize[16] },
-        lg: { fontSize: theme.fontSize[16] }
-      },
-      placeholder: {
-        true: { color: theme.color.text3 },
-        false: { color: theme.color.text }
-      }
-    }
-  },
-  option: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s3,
-    minHeight: theme.space[48],
-    paddingHorizontal: theme.space.s3,
-    paddingVertical: theme.space.s2,
-    borderRadius: theme.radius.md,
-    // Every row carries the edge weight so selecting one does not shift the text.
-    borderWidth: theme.borderWidth.base,
-    borderColor: "transparent"
-  },
-  // The reference's selection band: an `accentSoft` `radius.md` plate behind the
-  // centred option. `-soft` tints collapse at high contrast, so it carries the
-  // matching tone edge.
-  optionSelected: {
-    backgroundColor: theme.color.accentSoft,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.accent
-  },
-  optionPressed: { backgroundColor: theme.color.surface2 },
-  optionLabel: {
-    flex: 1,
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[16],
-    color: theme.color.text2
-  },
-  optionLabelSelected: {
-    fontWeight: theme.fontWeight.semibold,
-    color: theme.color.accentOnSoft
-  }
-}));
-
-export { Picker, WheelPicker };

package/dist/chunk-QDZGFXQD.js

@@ -1,176 +0,0 @@
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import { useResolvedMotion, motionTiming, springConfig } from './chunk-J64KGCGX.js';
-import * as React from 'react';
-import { Animated, View, Text, Pressable, LayoutAnimation } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DEFAULT_LABELS = {
-  dismiss: "Dismiss"
-};
-var TONE_ICON = {
-  info: "info",
-  good: "check-circle",
-  warn: "alert-triangle",
-  danger: "alert-circle",
-  neutral: "info"
-};
-function alertToneColors(theme, tone) {
-  switch (tone) {
-    case "good":
-      return {
-        glyph: theme.color.goodOnSoft,
-        border: theme.color.good,
-        tint: theme.color.goodSoft
-      };
-    case "warn":
-      return {
-        glyph: theme.color.warnOnSoft,
-        border: theme.color.warn,
-        tint: theme.color.warnSoft
-      };
-    case "danger":
-      return {
-        glyph: theme.color.dangerOnSoft,
-        border: theme.color.danger,
-        tint: theme.color.dangerSoft
-      };
-    case "neutral":
-      return {
-        glyph: theme.color.text2,
-        border: theme.color.borderStrong,
-        tint: theme.color.surface2
-      };
-    default:
-      return {
-        glyph: theme.color.infoOnSoft,
-        border: theme.color.info,
-        tint: theme.color.infoSoft
-      };
-  }
-}
-function Alert({
-  title,
-  description,
-  tone = "info",
-  icon,
-  dismissible = false,
-  onDismiss,
-  action,
-  children,
-  labels: labelsProp
-}) {
-  const labels = useLabels("alert", DEFAULT_LABELS, labelsProp);
-  const { styles } = useStyles(sheet, { tone });
-  const theme = useLoamTheme("alert");
-  const toneColors = alertToneColors(theme, tone);
-  const showDismiss = dismissible || onDismiss != null;
-  const iconName = icon === false ? void 0 : icon ?? TONE_ICON[tone];
-  const dismissHitSlop = Math.max(0, Math.round((theme.tapMin - theme.icon.sm) / 2));
-  const level = useResolvedMotion(void 0, "alert");
-  const enter = React.useRef(new Animated.Value(level === "none" ? 1 : 0)).current;
-  React.useEffect(() => {
-    if (level === "none") return;
-    if (level === "reduced") {
-      Animated.timing(enter, { ...motionTiming(level), toValue: 1, useNativeDriver: true }).start();
-      return;
-    }
-    Animated.spring(enter, { ...springConfig(theme, "ds"), toValue: 1, useNativeDriver: true }).start();
-  }, []);
-  const dismiss = () => {
-    if (level !== "none") {
-      LayoutAnimation.configureNext({
-        duration: theme.spring.ds.duration,
-        delete: { type: LayoutAnimation.Types.easeOut, property: LayoutAnimation.Properties.opacity },
-        update: level === "full" ? { type: LayoutAnimation.Types.spring, springDamping: theme.spring.ds.dampingRatio } : { type: LayoutAnimation.Types.easeOut }
-      });
-    }
-    onDismiss?.();
-  };
-  return /* @__PURE__ */ jsxs(
-    Animated.View,
-    {
-      accessibilityRole: "alert",
-      style: [
-        styles.base,
-        { borderColor: toneColors.border },
-        {
-          opacity: enter,
-          transform: level === "full" ? [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [4, 0] }) }] : []
-        }
-      ],
-      children: [
-        iconName ? /* @__PURE__ */ jsx(View, { style: styles.iconSlot, children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: theme.icon.md, color: toneColors.glyph }) }) : null,
-        /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
-          description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
-          children,
-          action ? /* @__PURE__ */ jsx(View, { style: styles.action, children: action }) : null
-        ] }),
-        showDismiss ? /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: labels.dismiss,
-            onPress: dismiss,
-            hitSlop: dismissHitSlop,
-            style: ({ pressed }) => [styles.dismiss, pressed ? styles.pressed : null],
-            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: toneColors.glyph })
-          }
-        ) : null
-      ]
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  base: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: theme.space.s3,
-    padding: theme.space.s4,
-    borderRadius: theme.radius.lg,
-    borderWidth: theme.borderWidth.thin,
-    variants: {
-      tone: {
-        info: { backgroundColor: theme.color.infoSoft },
-        good: { backgroundColor: theme.color.goodSoft },
-        warn: { backgroundColor: theme.color.warnSoft },
-        danger: { backgroundColor: theme.color.dangerSoft },
-        neutral: { backgroundColor: theme.color.surface2 }
-      }
-    }
-  },
-  iconSlot: {
-    // Nudge the icon onto the title's optical baseline.
-    paddingTop: theme.space[1]
-  },
-  content: {
-    flex: 1,
-    gap: theme.space.s1
-  },
-  title: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.fontSize[14],
-    color: theme.color.text
-  },
-  description: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[14],
-    color: theme.color.text
-  },
-  action: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s2,
-    marginTop: theme.space.s2
-  },
-  pressed: { opacity: theme.state.pressedOpacity },
-  // `marginStart`, not `marginLeft`: RN's layout engine mirrors it under RTL.
-  dismiss: {
-    marginStart: theme.space.s2
-  }
-}));
-
-export { Alert };