@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-XXXEFXY5.js

@@ -1,99 +0,0 @@
-import * as React from 'react';
-import { Animated, Easing, View, Text } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-// src/thinking/thinking.tsx
-var DOT_BOX = { sm: 6, md: 8, lg: 10 };
-function useThinkingPulse(active) {
-  const theme = useLoamTheme();
-  const p = React.useRef(new Animated.Value(0)).current;
-  const { duration, easing } = theme.motion.loop;
-  React.useEffect(() => {
-    if (!active) {
-      p.setValue(0);
-      return;
-    }
-    const bezier = Easing.bezier(...easing);
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(p, { toValue: 1, duration, easing: bezier, useNativeDriver: true }),
-        Animated.timing(p, { toValue: 0, duration, easing: bezier, useNativeDriver: true })
-      ])
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [active, p, duration, easing]);
-  return active ? {
-    opacity: p.interpolate({ inputRange: [0, 1], outputRange: [1, 0.55] }),
-    transform: [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, 0.9] }) }]
-  } : null;
-}
-function Thinking({
-  label = "Thinking\u2026",
-  size = "md",
-  tone = "working",
-  motion = "full",
-  announce = true,
-  accessibleLabel = "Thinking",
-  style,
-  testID
-}) {
-  const { styles } = useStyles(sheet, { tone, size });
-  const theme = useLoamTheme();
-  const pulseStyle = useThinkingPulse(motion === "full" && !theme.reduceMotion);
-  const hasLabel = label !== "";
-  const box = DOT_BOX[size];
-  const dotColor = tone === "accent" ? theme.color.accent : tone === "neutral" ? theme.color.text2 : theme.status.working;
-  const name = hasLabel ? label : accessibleLabel;
-  const liveProps = announce ? { accessibilityLiveRegion: "polite", role: "status", accessibilityLabel: name } : {};
-  return /* @__PURE__ */ jsxs(View, { ...liveProps, testID, style: [styles.root, style], children: [
-    /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        style: [
-          { width: box, height: box, borderRadius: theme.radius.full, backgroundColor: dotColor },
-          pulseStyle
-        ]
-      }
-    ),
-    hasLabel ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  root: {
-    flexDirection: "row",
-    alignItems: "center",
-    alignSelf: "flex-start",
-    gap: theme.space.s2
-  },
-  label: {
-    fontFamily: theme.font.sans,
-    variants: {
-      tone: {
-        working: { color: theme.color.text },
-        accent: { color: theme.color.text },
-        neutral: { color: theme.color.text2 }
-      },
-      size: {
-        sm: {
-          fontSize: theme.type.caption1.fontSize,
-          lineHeight: theme.type.caption1.lineHeight,
-          letterSpacing: theme.type.caption1.letterSpacing
-        },
-        md: {
-          fontSize: theme.type.footnote.fontSize,
-          lineHeight: theme.type.footnote.lineHeight,
-          letterSpacing: theme.type.footnote.letterSpacing
-        },
-        lg: {
-          fontSize: theme.type.subheadline.fontSize,
-          lineHeight: theme.type.subheadline.lineHeight,
-          letterSpacing: theme.type.subheadline.letterSpacing
-        }
-      }
-    }
-  }
-}));
-
-export { Thinking, useThinkingPulse };

package/dist/chunk-YDGVJETP.js

@@ -1,60 +0,0 @@
-import { ErrorSummary } from './chunk-C2NTXVWM.js';
-import * as React from 'react';
-import { View } from 'react-native';
-import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var FormContext = React.createContext(null);
-function useFormContext() {
-  const ctx = React.useContext(FormContext);
-  if (!ctx) throw new Error("useFormContext must be used inside a <Form>");
-  return ctx;
-}
-function Form({
-  onSubmit,
-  onValidate,
-  onFocusField,
-  submitting = false,
-  motion = "full",
-  children
-}) {
-  const { styles } = useStyles(sheet);
-  const [errors, setErrors] = React.useState([]);
-  const submit = React.useCallback(async () => {
-    if (submitting) return;
-    if (onValidate) {
-      const found = await onValidate();
-      if (found.length > 0) {
-        setErrors(found);
-        const first = found[0];
-        if (first) onFocusField?.(first.fieldId);
-        return;
-      }
-    }
-    setErrors([]);
-    await onSubmit();
-  }, [submitting, onValidate, onFocusField, onSubmit]);
-  const ctx = React.useMemo(() => ({ submit, submitting }), [submit, submitting]);
-  return /* @__PURE__ */ jsx(FormContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(View, { style: styles.form, children: [
-    /* @__PURE__ */ jsx(ErrorSummary, { errors, motion, onFocusField }),
-    children
-  ] }) });
-}
-function FormActions({ children }) {
-  const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsx(View, { style: styles.actions, children });
-}
-var sheet = createStyleSheet((theme) => ({
-  form: {
-    gap: theme.space.s5
-  },
-  actions: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "center",
-    gap: theme.space.s3,
-    paddingTop: theme.space.s1
-  }
-}));
-
-export { Form, FormActions, useFormContext };

package/dist/chunk-YG3ZJHGU.js

@@ -1,223 +0,0 @@
-import { Spinner } from './chunk-O7AE6DAF.js';
-import { haptics } from './chunk-NY2U3PBI.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import * as React from 'react';
-import { Animated, Easing, View, Pressable, Platform } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsx } from 'react/jsx-runtime';
-
-var TRACK = {
-  ios: { sm: { width: 40, height: 24 }, md: { width: 52, height: 32 } },
-  // loam-allow-raw: ramp keys
-  android: { sm: { width: 40, height: 18 }, md: { width: 52, height: 22 } }
-  // loam-allow-raw: ramp keys
-};
-var IOS_PAD = 2;
-var ANDROID_OVERHANG = 4;
-var HEAVY_SHADOW_RATIO = 1.2;
-function knobShadow(theme, os) {
-  if (os === "ios") return theme.shadow.knob;
-  return {
-    ...theme.shadow.knob,
-    shadowOffset: { width: 0, height: theme.space[2] },
-    shadowOpacity: theme.shadow.knob.shadowOpacity * HEAVY_SHADOW_RATIO,
-    shadowRadius: theme.space[6],
-    elevation: 3
-    // loam-allow-raw: Android depth between shadow.knob (2) and shadow.md (4).
-  };
-}
-function geometry(theme, os, size) {
-  const spec = TRACK[os][size];
-  const width = theme.space[spec.width];
-  const height = theme.space[spec.height];
-  const pad = theme.space[IOS_PAD];
-  if (os === "ios") {
-    const knob2 = height - 2 * pad;
-    return { width, height, pad, knob: knob2, travel: width - 2 * pad - knob2 };
-  }
-  const knob = height + theme.space[ANDROID_OVERHANG];
-  return { width, height, pad: 0, knob, travel: width - knob };
-}
-function useResolvedPlatform(explicit) {
-  const theme = useLoamTheme();
-  if (explicit) return explicit;
-  if (Platform.OS === "ios") return "ios";
-  if (Platform.OS === "android") return "android";
-  return theme.platform === "iOS" ? "ios" : "android";
-}
-function Switch({
-  value,
-  defaultValue = false,
-  onValueChange,
-  size = "md",
-  platform,
-  disabled = false,
-  pending = false,
-  motion = "full",
-  accessibilityLabel,
-  decorative = false
-}) {
-  const isControlled = value !== void 0;
-  const [internal, setInternal] = React.useState(defaultValue);
-  const checked = isControlled ? value : internal;
-  const theme = useLoamTheme();
-  const os = useResolvedPlatform(platform);
-  const shape = `${os}-${size}`;
-  const { styles } = useStyles(sheet, { shape, disabled });
-  const { travel, width: trackW, height: trackH } = geometry(theme, os, size);
-  const slopX = Math.max(0, (theme.tapMin - trackW) / 2);
-  const slopY = Math.max(0, (theme.tapMin - trackH) / 2);
-  const resolved = useResolvedMotion(motion);
-  const tint = React.useRef(new Animated.Value(checked ? 1 : 0)).current;
-  const slide = React.useRef(new Animated.Value(checked ? 1 : 0)).current;
-  React.useEffect(() => {
-    const to = checked ? 1 : 0;
-    if (resolved === "none") {
-      tint.setValue(to);
-    } else {
-      Animated.timing(tint, {
-        toValue: to,
-        duration: theme.duration.base,
-        easing: Easing.bezier(...theme.easing.base),
-        // Colour interpolation cannot run on the native driver.
-        useNativeDriver: false
-      }).start();
-    }
-    if (resolved === "full") {
-      Animated.timing(slide, {
-        toValue: to,
-        duration: theme.duration.base,
-        easing: Easing.bezier(...theme.easing.spring),
-        useNativeDriver: true
-      }).start();
-    } else {
-      slide.setValue(to);
-    }
-  }, [checked, resolved, tint, slide, theme.duration.base, theme.easing.base, theme.easing.spring]);
-  const trackColor = tint.interpolate({
-    inputRange: [0, 1],
-    outputRange: [theme.color.surface3, os === "ios" ? theme.color.good : theme.color.accentSoft]
-  });
-  const knobColor = pending ? theme.color.knob : os === "ios" ? theme.color.knob : tint.interpolate({
-    inputRange: [0, 1],
-    outputRange: [theme.color.text3, theme.color.accent]
-  });
-  const translateX = slide.interpolate({
-    inputRange: [0, 1],
-    // The knob travels toward the end edge; only the sign of an X translation
-    // needs mirroring by hand.
-    outputRange: [0, theme.rtl ? -travel : travel]
-  });
-  const toggle = () => {
-    const next = !checked;
-    if (!isControlled) setInternal(next);
-    haptics.impact("medium");
-    onValueChange?.(next);
-  };
-  const visual = /* @__PURE__ */ jsx(Animated.View, { style: [styles.track, { backgroundColor: trackColor }], children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.knobSlot, { transform: [{ translateX }] }], children: /* @__PURE__ */ jsx(
-    Animated.View,
-    {
-      testID: "switch-knob",
-      style: [styles.knob, pending && styles.knobBusy, { backgroundColor: knobColor }],
-      children: pending ? (
-        // Hidden from assistive tech — the switch's own `busy` state carries
-        // the meaning, so the nested progressbar is suppressed.
-        /* @__PURE__ */ jsx(
-          View,
-          {
-            testID: "switch-spinner",
-            style: styles.spinner,
-            "aria-hidden": true,
-            accessibilityElementsHidden: true,
-            importantForAccessibility: "no-hide-descendants",
-            children: /* @__PURE__ */ jsx(
-              Spinner,
-              {
-                size: "sm",
-                color: theme.color.accent,
-                motion,
-                accessibilityLabel: "Loading"
-              }
-            )
-          }
-        )
-      ) : null
-    }
-  ) }) });
-  if (decorative) {
-    return /* @__PURE__ */ jsx(View, { accessible: false, style: styles.decorative, children: visual });
-  }
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      accessibilityRole: "switch",
-      accessibilityLabel,
-      accessibilityState: { checked, disabled, busy: pending },
-      "aria-checked": checked,
-      "aria-busy": pending || void 0,
-      disabled,
-      onPress: disabled || pending ? void 0 : toggle,
-      hitSlop: { top: slopY, bottom: slopY, left: slopX, right: slopX },
-      children: visual
-    }
-  );
-}
-function trackStyle(theme, os, size) {
-  const g = geometry(theme, os, size);
-  return { width: g.width, height: g.height, padding: g.pad };
-}
-function knobStyle(theme, os, size) {
-  const g = geometry(theme, os, size);
-  return { width: g.knob, height: g.knob, ...knobShadow(theme, os) };
-}
-var sheet = createStyleSheet((theme) => ({
-  // Decorative glyph wrapper: inert to touch so an owning ancestor keeps the press.
-  decorative: { pointerEvents: "none" },
-  track: {
-    justifyContent: "center",
-    borderRadius: theme.radius.full,
-    variants: {
-      shape: {
-        "ios-sm": trackStyle(theme, "ios", "sm"),
-        "ios-md": trackStyle(theme, "ios", "md"),
-        "android-sm": trackStyle(theme, "android", "sm"),
-        "android-md": trackStyle(theme, "android", "md")
-      },
-      disabled: {
-        true: { opacity: theme.state.disabledOpacity },
-        false: {}
-      }
-    }
-  },
-  // The Android knob overhangs its track, so it is centred out of flow.
-  knobSlot: {
-    justifyContent: "center",
-    variants: {
-      shape: {
-        "ios-sm": {},
-        "ios-md": {},
-        "android-sm": { position: "absolute", start: 0 },
-        "android-md": { position: "absolute", start: 0 }
-      },
-      disabled: { true: {}, false: {} }
-    }
-  },
-  // Centre the pending spinner inside the knob disc.
-  knobBusy: { alignItems: "center", justifyContent: "center" },
-  // The spinner is decorative — inert to touch so the knob keeps the press.
-  spinner: { pointerEvents: "none" },
-  knob: {
-    borderRadius: theme.radius.full,
-    variants: {
-      shape: {
-        "ios-sm": knobStyle(theme, "ios", "sm"),
-        "ios-md": knobStyle(theme, "ios", "md"),
-        "android-sm": knobStyle(theme, "android", "sm"),
-        "android-md": knobStyle(theme, "android", "md")
-      },
-      disabled: { true: {}, false: {} }
-    }
-  }
-}));
-
-export { Switch };