@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-O5V4TG3V.js

@@ -1,329 +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 { Animated, Text, Pressable, View } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DEFAULT_LABELS = {
-  allow: "Continue",
-  deny: "Not now",
-  deniedTitle: "Turned off in Settings",
-  openSettings: "Open Settings",
-  unavailableCapabilities: "Unavailable until the permission is re-enabled",
-  capabilityOff: (capability) => `${capability}, off`
-};
-function PermissionPrimer({
-  icon = "bell",
-  title,
-  description,
-  allowLabel,
-  onAllow,
-  denyLabel,
-  onDeny,
-  motion = "full",
-  labels: labelsProp
-}) {
-  const { styles } = useStyles(sheet);
-  const labels = useLabels("permission", DEFAULT_LABELS, labelsProp);
-  const allow = allowLabel ?? labels.allow;
-  const deny = denyLabel ?? labels.deny;
-  const theme = useLoamTheme("permission");
-  const level = useResolvedMotion(motion, "permission");
-  const rise = React.useRef(new Animated.Value(level === "full" ? 0 : 1)).current;
-  React.useEffect(() => {
-    if (level !== "full") return;
-    const run = Animated.spring(rise, {
-      ...springConfig(theme, "ds"),
-      toValue: 1,
-      useNativeDriver: true
-    });
-    run.start();
-    return () => run.stop();
-  }, []);
-  return /* @__PURE__ */ jsxs(
-    Animated.View,
-    {
-      style: [
-        styles.primer,
-        {
-          opacity: rise,
-          transform: [
-            {
-              translateY: rise.interpolate({
-                inputRange: [0, 1],
-                outputRange: [theme.space.s6, 0]
-              })
-            }
-          ]
-        }
-      ],
-      accessibilityRole: "alert",
-      children: [
-        /* @__PURE__ */ jsx(
-          Animated.View,
-          {
-            style: [
-              styles.primerTile,
-              {
-                transform: [{ scale: rise.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1] }) }]
-              }
-            ],
-            children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 26, color: theme.color.accentOnSoft })
-          }
-        ),
-        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.primerTitle, children: title }),
-        /* @__PURE__ */ jsx(Text, { style: styles.primerBody, children: description }),
-        /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: allow,
-            onPress: onAllow,
-            style: ({ pressed }) => [styles.allow, pressed && styles.pressed],
-            children: /* @__PURE__ */ jsx(Text, { style: styles.allowLabel, children: allow })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: deny,
-            onPress: onDeny,
-            style: ({ pressed }) => [styles.deny, pressed && styles.pressed],
-            children: /* @__PURE__ */ jsx(Text, { style: styles.denyLabel, children: deny })
-          }
-        )
-      ]
-    }
-  );
-}
-function PermissionDenied({
-  icon = "lock",
-  title,
-  description,
-  settingsLabel,
-  onOpenSettings,
-  capabilities = [],
-  labels: labelsProp
-}) {
-  const { styles } = useStyles(sheet);
-  const labels = useLabels("permission", DEFAULT_LABELS, labelsProp);
-  const titleText = title ?? labels.deniedTitle;
-  const settings = settingsLabel ?? labels.openSettings;
-  const theme = useLoamTheme("permission");
-  const ctaSlop = Math.max(0, (theme.hit.sm - theme.ctl.sm) / 2);
-  return /* @__PURE__ */ jsxs(View, { style: styles.deniedRoot, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.deniedCard, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.deniedHead, children: [
-        /* @__PURE__ */ jsx(Icon, { name: icon, size: 17, color: theme.color.warnOnSoft }),
-        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.deniedTitle, children: titleText })
-      ] }),
-      /* @__PURE__ */ jsx(Text, { style: styles.deniedBody, children: description }),
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: settings,
-          onPress: onOpenSettings,
-          hitSlop: { top: ctaSlop, bottom: ctaSlop },
-          style: ({ pressed }) => [styles.settings, pressed && styles.pressed],
-          children: /* @__PURE__ */ jsx(Text, { style: styles.settingsLabel, children: settings })
-        }
-      )
-    ] }),
-    capabilities.length > 0 ? (
-      // Dimmed and inert: these rows show the cost of the denial, and must not
-      // look like something the user can flip on from here.
-      /* @__PURE__ */ jsx(
-        View,
-        {
-          role: "group",
-          style: styles.capList,
-          accessibilityLabel: labels.unavailableCapabilities,
-          children: capabilities.map((c) => /* @__PURE__ */ jsxs(
-            View,
-            {
-              accessible: true,
-              accessibilityRole: "text",
-              accessibilityLabel: labels.capabilityOff(c.label),
-              style: styles.capRow,
-              children: [
-                /* @__PURE__ */ jsx(Text, { style: styles.capLabel, children: c.label }),
-                /* @__PURE__ */ jsx(
-                  View,
-                  {
-                    style: styles.capSwitch,
-                    accessible: false,
-                    accessibilityElementsHidden: true,
-                    importantForAccessibility: "no-hide-descendants",
-                    "aria-hidden": true,
-                    children: /* @__PURE__ */ jsx(View, { style: styles.capThumb })
-                  }
-                )
-              ]
-            },
-            c.id
-          ))
-        }
-      )
-    ) : null
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  // ---- primer ----
-  primer: {
-    padding: theme.space[20],
-    borderRadius: theme.radius.xl,
-    backgroundColor: theme.color.surface,
-    alignItems: "center",
-    gap: theme.space[13],
-    // `shadow.lg` is the only thing lifting this card off the page, and high
-    // contrast zeroes it — `edge.neutral` takes over there, and is `transparent`
-    // before that so the primer keeps its borderless look.
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.neutral,
-    ...theme.shadow.lg
-  },
-  primerTile: {
-    width: theme.space[56],
-    height: theme.space[56],
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.accentSoft,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.accent,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  primerTitle: {
-    fontFamily: theme.font.display,
-    fontWeight: theme.font.displayWeight,
-    fontSize: theme.type.title3.fontSize,
-    color: theme.color.text,
-    textAlign: "center"
-  },
-  primerBody: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.fontSize * 1.5,
-    color: theme.color.text2,
-    textAlign: "center"
-  },
-  allow: {
-    alignSelf: "stretch",
-    minHeight: theme.tapMin,
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.color.accent,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  allowLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.subheadline.fontSize,
-    color: theme.color.accentInk
-  },
-  deny: {
-    alignSelf: "stretch",
-    minHeight: theme.tapMin,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  denyLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.fontSize[14],
-    color: theme.color.text3
-  },
-  // ---- denied ----
-  deniedRoot: { gap: theme.space.s4 },
-  deniedCard: {
-    padding: theme.space.s4,
-    borderRadius: theme.radius.lg,
-    backgroundColor: theme.color.warnSoft,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.warn,
-    gap: theme.space[11],
-    alignItems: "flex-start"
-  },
-  deniedHead: { flexDirection: "row", alignItems: "center", gap: theme.space[9] },
-  deniedTitle: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.fontSize[14],
-    color: theme.color.warnOnSoft
-  },
-  deniedBody: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    // The denied card sits on a `warnSoft` tint; neutral `text2` fails AA there,
-    // so raise the body copy to primary `text` to clear 4.5:1.
-    color: theme.color.text
-  },
-  // Sized like `Button` `size="sm"`, not like a full-bleed primary CTA: this is a
-  // secondary action sitting beside footnote copy. `hitSlop` supplies the rest of
-  // the 44pt target on the component.
-  settings: {
-    height: theme.ctl.sm,
-    paddingHorizontal: theme.space.s3,
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.color.warn,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  // `warnInk` is the token system's readable ink *for the warn fill* — a flat
-  // white here was only legible by luck, and broke outright on a light warn tone.
-  // The label tracks the body copy's footnote step instead of running a size above it.
-  settingsLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    letterSpacing: theme.type.footnote.letterSpacing,
-    color: theme.color.warnInk
-  },
-  capList: {
-    borderRadius: theme.radius.lg,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.border,
-    backgroundColor: theme.color.surface,
-    overflow: "hidden",
-    opacity: theme.state.disabledOpacity,
-    pointerEvents: "none"
-  },
-  capRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: theme.space[14],
-    borderBottomWidth: theme.borderWidth.base,
-    borderBottomColor: theme.color.border
-  },
-  capLabel: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[14],
-    color: theme.color.text
-  },
-  capSwitch: {
-    width: theme.space[44],
-    height: theme.space[26],
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.surface3,
-    justifyContent: "center",
-    paddingHorizontal: theme.space[3]
-  },
-  capThumb: {
-    width: theme.space[20],
-    height: theme.space[20],
-    borderRadius: theme.radius.full,
-    // A knob travelling a track — `color.knob` is the mode-invariant token that
-    // exists for exactly this, and was already what Switch and Slider use.
-    backgroundColor: theme.color.knob,
-    ...theme.shadow.sm
-  },
-  pressed: { opacity: theme.state.pressedOpacity }
-}));
-
-export { PermissionDenied, PermissionPrimer };

package/dist/chunk-OWAMM2DK.js

@@ -1,280 +0,0 @@
-import { NumberRoll } from './chunk-T5LTPKX6.js';
-import { haptics } from './chunk-NY2U3PBI.js';
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import * as React from 'react';
-import { Animated, View, Pressable, TextInput, Easing } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var BUTTON_PRESS_SCALE = 0.88;
-var ROLL_H = { xs: 18, sm: 20, md: 24, lg: 28 };
-var DEFAULT_LABELS = {
-  decrease: "Decrement",
-  increase: "Increment"
-};
-function clamp(n, lo, hi) {
-  const low = Math.max(lo, n);
-  return hi === void 0 ? low : Math.min(hi, low);
-}
-function tidy(n) {
-  return Number(n.toFixed(6));
-}
-function Stepper({
-  value,
-  defaultValue,
-  onValueChange,
-  min = 0,
-  max,
-  step = 1,
-  size = "md",
-  disabled = false,
-  editable = false,
-  accessibilityLabel,
-  pill = false,
-  motion = "full",
-  labels: labelsProp
-}) {
-  const labels = useLabels("stepper", DEFAULT_LABELS, labelsProp);
-  const isControlled = value !== void 0;
-  const [internal, setInternal] = React.useState(defaultValue ?? min);
-  const current = clamp(isControlled ? value : internal, min, max);
-  const { styles } = useStyles(sheet, { size, pill });
-  const theme = useLoamTheme("stepper");
-  const atMin = current <= min;
-  const atMax = max !== void 0 && current >= max;
-  const setValue = React.useCallback(
-    (next) => {
-      const clamped = clamp(tidy(next), min, max);
-      if (clamped === current) return;
-      if (!isControlled) setInternal(clamped);
-      onValueChange?.(clamped);
-    },
-    [current, isControlled, max, min, onValueChange]
-  );
-  const rollH = ROLL_H[size];
-  const decrement = () => {
-    haptics.impact("light");
-    setValue(current - step);
-  };
-  const increment = () => {
-    haptics.impact("light");
-    setValue(current + step);
-  };
-  const minusScale = React.useRef(new Animated.Value(1)).current;
-  const plusScale = React.useRef(new Animated.Value(1)).current;
-  const press = (target, to) => Animated.timing(target, {
-    toValue: to,
-    duration: theme.duration.fast,
-    easing: Easing.bezier(...theme.easing.base),
-    useNativeDriver: true
-  }).start();
-  const [text, setText] = React.useState(String(current));
-  React.useEffect(() => {
-    setText(String(current));
-  }, [current]);
-  const commit = () => {
-    const parsed = Number(text);
-    if (text.trim() === "" || Number.isNaN(parsed)) {
-      setText(String(current));
-      return;
-    }
-    setValue(parsed);
-  };
-  const iconSize = theme.ctl.icon[size];
-  const iconColor = (dim) => disabled || dim ? theme.color.text3 : theme.color.text;
-  const slop = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
-  return (
-    // The adjustable/slider semantics live on the value readout (a sibling of
-    // the +/- buttons), never on this wrapper — a slider must not contain nested
-    // interactive controls (WCAG nested-interactive). The wrapper stays a plain
-    // container with no role/label so its `<div>` carries no prohibited aria-label.
-    /* @__PURE__ */ jsxs(View, { style: [styles.container, disabled && styles.containerDisabled], children: [
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: labels.decrease,
-          accessibilityState: { disabled: disabled || atMin },
-          disabled: disabled || atMin,
-          onPress: disabled || atMin ? void 0 : decrement,
-          onPressIn: disabled || atMin ? void 0 : () => press(minusScale, BUTTON_PRESS_SCALE),
-          onPressOut: disabled || atMin ? void 0 : () => press(minusScale, 1),
-          hitSlop: slop,
-          children: /* @__PURE__ */ jsx(
-            Animated.View,
-            {
-              style: [
-                styles.button,
-                (disabled || atMin) && styles.buttonDim,
-                { transform: [{ scale: minusScale }] }
-              ],
-              children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: iconSize, color: iconColor(atMin) })
-            }
-          )
-        }
-      ),
-      editable ? /* @__PURE__ */ jsx(
-        TextInput,
-        {
-          accessibilityLabel,
-          editable: !disabled,
-          keyboardType: "numeric",
-          value: text,
-          onChangeText: setText,
-          onEndEditing: commit,
-          onBlur: commit,
-          style: styles.value
-        }
-      ) : (
-        // Clipping wrapper: overflow:hidden masks the rolling digits. This
-        // readout carries the adjustable/slider semantics (role + value) as a
-        // sibling of the buttons, so no interactive control is nested inside it,
-        // and the roll itself is decorative (the value lives on this wrapper).
-        /* @__PURE__ */ jsx(
-          View,
-          {
-            style: [styles.valueWrap, { height: rollH }],
-            accessibilityRole: "adjustable",
-            accessibilityLabel,
-            accessibilityValue: { min, max, now: current },
-            accessibilityState: { disabled },
-            "aria-valuemin": min,
-            "aria-valuemax": max,
-            "aria-valuenow": current,
-            children: /* @__PURE__ */ jsx(NumberRoll, { value: current, textStyle: styles.valueText, motion, decorative: true })
-          }
-        )
-      ),
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: labels.increase,
-          accessibilityState: { disabled: disabled || atMax },
-          disabled: disabled || atMax,
-          onPress: disabled || atMax ? void 0 : increment,
-          onPressIn: disabled || atMax ? void 0 : () => press(plusScale, BUTTON_PRESS_SCALE),
-          onPressOut: disabled || atMax ? void 0 : () => press(plusScale, 1),
-          hitSlop: slop,
-          children: /* @__PURE__ */ jsx(
-            Animated.View,
-            {
-              style: [
-                styles.button,
-                (disabled || atMax) && styles.buttonDim,
-                { transform: [{ scale: plusScale }] }
-              ],
-              children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: iconSize, color: iconColor(atMax) })
-            }
-          )
-        }
-      )
-    ] })
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  // A tinted tray, not an outlined box: the reference gives the wrapper a
-  // `surface2` fill, `radius.md` corners (or `radius.full` for pill), 4px
-  // padding and no border.
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    alignSelf: "flex-start",
-    gap: theme.space.s1,
-    padding: theme.space.s1,
-    backgroundColor: theme.color.surface2,
-    borderRadius: theme.radius.md,
-    variants: {
-      pill: {
-        true: { borderRadius: theme.radius.full },
-        false: {}
-      },
-      size: { xs: {}, sm: {}, md: {}, lg: {} }
-    }
-  },
-  containerDisabled: { opacity: theme.state.disabledOpacity },
-  // Each button is a raised `surface` card with `radius.sm` corners
-  // (or `radius.full` when pill — the reference uses `50%` for a square).
-  button: {
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: theme.color.surface,
-    borderRadius: theme.radius.sm,
-    // `shadow.sm` is zeroed under high contrast and `surface` on the track it
-    // sits in is not a boundary, so the button needs a real edge there —
-    // `edge.neutral`, which is `transparent` until the preference flips.
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.neutral,
-    ...theme.shadow.sm,
-    variants: {
-      // Square icon buttons sized off the control-size ramp (26 / 30 / 36 / 44).
-      size: {
-        xs: { width: theme.ctl.xs, height: theme.ctl.xs },
-        sm: { width: theme.ctl.sm, height: theme.ctl.sm },
-        md: { width: theme.ctl.md, height: theme.ctl.md },
-        lg: { width: theme.ctl.lg, height: theme.ctl.lg }
-      },
-      pill: {
-        true: { borderRadius: theme.radius.full },
-        false: {}
-      }
-    }
-  },
-  buttonDim: { opacity: theme.state.disabledOpacity },
-  // Editable case: TextInput shares font/size/minWidth.
-  value: {
-    textAlign: "center",
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    color: theme.color.text,
-    variants: {
-      size: {
-        xs: { minWidth: theme.space[32], fontSize: theme.fontSize[12] },
-        sm: { minWidth: theme.space[36], fontSize: theme.fontSize[14] },
-        md: { minWidth: theme.space[44], fontSize: theme.fontSize[16] },
-        lg: { minWidth: theme.space[52], fontSize: theme.fontSize[20] }
-      },
-      pill: { true: {}, false: {} }
-    }
-  },
-  // Roll container: clips the entering/exiting digits.
-  valueWrap: {
-    overflow: "hidden",
-    alignItems: "center",
-    justifyContent: "center",
-    variants: {
-      size: {
-        xs: { height: theme.space[18], minWidth: theme.space[32] },
-        sm: { height: theme.space[20], minWidth: theme.space[36] },
-        md: { height: theme.space[24], minWidth: theme.space[44] },
-        lg: { height: theme.space[28], minWidth: theme.space[52] }
-      },
-      pill: { true: {}, false: {} }
-    }
-  },
-  // Text inside valueWrap (font only, no minWidth — that lives on valueWrap).
-  valueText: {
-    textAlign: "center",
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    color: theme.color.text,
-    variants: {
-      size: {
-        xs: { fontSize: theme.fontSize[12] },
-        sm: { fontSize: theme.fontSize[14] },
-        md: { fontSize: theme.fontSize[16] },
-        lg: { fontSize: theme.fontSize[20] }
-      },
-      pill: { true: {}, false: {} }
-    }
-  },
-  // Absolutely-positioned overlay for the exiting digit.
-  valueAbsolute: {
-    position: "absolute",
-    left: 0,
-    right: 0
-  }
-}));
-
-export { Stepper };