@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-F3H33DQX.js

@@ -1,300 +0,0 @@
-import { isConnectorTraversed, resolveStepState, NODE_STATE_ICON } from './chunk-YLLCXTMC.js';
-import { Button } from './chunk-E2E3I5W2.js';
-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, AccessibilityInfo, View, Text } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DEFAULT_LABELS = {
-  back: "Back",
-  next: "Next",
-  finish: "Finish",
-  stepOf: (current, total, title) => `Step ${current} of ${total}${title ? `: ${title}` : ""}`
-};
-function clamp(n, lo, hi) {
-  return Math.min(hi, Math.max(lo, n));
-}
-function useDotForeground(done, active) {
-  const theme = useLoamTheme("wizard");
-  if (done) return theme.color.goodInk;
-  if (active) return theme.color.accentOnSoft;
-  return theme.color.text3;
-}
-function StepDot({
-  index,
-  current,
-  title
-}) {
-  const stepState = resolveStepState(index, current);
-  const done = stepState === "done";
-  const active = stepState === "working";
-  const { styles } = useStyles(sheet, { state: done ? "done" : active ? "active" : "upcoming" });
-  const theme = useLoamTheme("wizard");
-  const fg = useDotForeground(done, active);
-  const currentAttr = active ? { "aria-current": "step" } : {};
-  return /* @__PURE__ */ jsxs(View, { style: styles.dotCol, children: [
-    /* @__PURE__ */ jsx(View, { style: styles.dot, ...currentAttr, children: done ? /* @__PURE__ */ jsx(Icon, { name: NODE_STATE_ICON.done, size: theme.icon.sm, color: fg }) : /* @__PURE__ */ jsx(Text, { style: [styles.dotNum, { color: fg }], children: index + 1 }) }),
-    title ? /* @__PURE__ */ jsx(
-      Text,
-      {
-        numberOfLines: 2,
-        style: [styles.dotLabel, { color: index <= current ? void 0 : fg }],
-        children: title
-      }
-    ) : null
-  ] });
-}
-function Wizard({
-  steps,
-  step,
-  defaultStep = 0,
-  onStepChange,
-  onFinish,
-  backLabel: backLabelProp,
-  nextLabel: nextLabelProp,
-  finishLabel: finishLabelProp,
-  motion = "full",
-  keepMounted = true,
-  onStepInvalid,
-  showHeader = true,
-  renderFooter,
-  labels: labelsProp
-}) {
-  const labels = useLabels("wizard", DEFAULT_LABELS, labelsProp);
-  const backLabel = backLabelProp ?? labels.back;
-  const nextLabel = nextLabelProp ?? labels.next;
-  const finishLabel = finishLabelProp ?? labels.finish;
-  const isControlled = step !== void 0;
-  const last = Math.max(0, steps.length - 1);
-  const [internal, setInternal] = React.useState(() => clamp(defaultStep, 0, last));
-  const current = clamp(isControlled ? step : internal, 0, last);
-  const { styles } = useStyles(sheet);
-  const theme = useLoamTheme("wizard");
-  const activeStep = steps[current];
-  const isFirst = current <= 0;
-  const isLast = current >= last;
-  const prev = React.useRef(current);
-  const opacity = React.useRef(new Animated.Value(1)).current;
-  const translateX = React.useRef(new Animated.Value(0)).current;
-  const level = useResolvedMotion(motion, "wizard");
-  React.useEffect(() => {
-    if (prev.current === current) return;
-    const direction = current > prev.current ? 1 : -1;
-    prev.current = current;
-    AccessibilityInfo.announceForAccessibility?.(
-      labels.stepOf(current + 1, steps.length, steps[current]?.title)
-    );
-    if (level === "none") {
-      opacity.setValue(1);
-      translateX.setValue(0);
-      return;
-    }
-    opacity.setValue(0);
-    translateX.setValue(level === "full" ? direction * theme.space.s6 : 0);
-    Animated.parallel([
-      Animated.spring(opacity, {
-        ...springConfig(theme, "de"),
-        toValue: 1,
-        useNativeDriver: true
-      }),
-      ...level === "full" ? [
-        Animated.spring(translateX, {
-          ...springConfig(theme, "ds"),
-          toValue: 0,
-          useNativeDriver: true
-        })
-      ] : []
-    ]).start();
-  }, [current, level, opacity, translateX, theme, steps]);
-  const goTo = (next) => {
-    const clamped = clamp(next, 0, last);
-    if (clamped === current) return;
-    if (!isControlled) setInternal(clamped);
-    onStepChange?.(clamped);
-  };
-  const visited = React.useRef(/* @__PURE__ */ new Set());
-  if (activeStep) visited.current.add(activeStep.key);
-  const onNext = () => {
-    if (activeStep?.validate && !activeStep.validate()) {
-      onStepInvalid?.(current);
-      return;
-    }
-    if (isLast) onFinish?.();
-    else goTo(current + 1);
-  };
-  return /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
-    showHeader ? /* @__PURE__ */ jsx(WizardSteps, { steps, current }) : null,
-    /* @__PURE__ */ jsx(Animated.View, { style: [styles.content, { opacity, transform: [{ translateX }] }], children: steps.map((s, i) => {
-      const isActive = i === current;
-      if (!isActive && !(keepMounted && visited.current.has(s.key))) return null;
-      return /* @__PURE__ */ jsx(
-        View,
-        {
-          style: isActive ? void 0 : styles.hiddenStep,
-          "aria-hidden": isActive ? void 0 : true,
-          importantForAccessibility: isActive ? "auto" : "no-hide-descendants",
-          children: s.content
-        },
-        s.key
-      );
-    }) }),
-    renderFooter ? renderFooter({
-      index: current,
-      count: steps.length,
-      isFirst,
-      isLast,
-      next: onNext,
-      back: () => goTo(current - 1)
-    }) : /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "outline",
-          leadingIcon: "arrow-left",
-          disabled: isFirst,
-          onPress: () => goTo(current - 1),
-          children: backLabel
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "primary",
-          trailingIcon: isLast ? "check" : "arrow-right",
-          onPress: onNext,
-          children: isLast ? finishLabel : nextLabel
-        }
-      )
-    ] })
-  ] });
-}
-function WizardSteps({
-  steps,
-  current,
-  labels: labelsProp
-}) {
-  const { styles } = useStyles(sheet);
-  const labels = useLabels("wizard", DEFAULT_LABELS, labelsProp);
-  const theme = useLoamTheme("wizard");
-  const activeStep = steps[current];
-  return /* @__PURE__ */ jsx(
-    View,
-    {
-      style: styles.rail,
-      accessibilityRole: "progressbar",
-      accessibilityLabel: labels.stepOf(current + 1, steps.length, activeStep?.title),
-      accessibilityValue: { min: 1, max: steps.length, now: current + 1 },
-      "aria-valuemin": 1,
-      "aria-valuemax": steps.length,
-      "aria-valuenow": current + 1,
-      children: steps.map((s, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-        i > 0 ? (
-          // The connector carries the state: solid in the done tone once the
-          // step it leaves has been traversed, muted otherwise — the shared
-          // rule, and the same green the completed dots now use.
-          /* @__PURE__ */ jsx(
-            View,
-            {
-              style: [
-                styles.line,
-                {
-                  backgroundColor: isConnectorTraversed(resolveStepState(i - 1, current)) ? theme.color.good : theme.color.surface3
-                }
-              ]
-            }
-          )
-        ) : null,
-        /* @__PURE__ */ jsx(StepDot, { index: i, current, title: s.title })
-      ] }, s.key))
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  hiddenStep: { display: "none" },
-  // The wizard owns its own gutter: it is a whole flow, not a control dropped
-  // into someone else's padded box, and without one the footer buttons sat flush
-  // against whatever container it was placed in.
-  container: {
-    padding: theme.space.s4,
-    gap: theme.space.s4
-  },
-  // Step titles sit *in flow* under their dot rather than absolutely positioned:
-  // an absolute label is measured against the 32pt dot, so it either overflowed
-  // into its neighbours or (once clamped) truncated to "Acc…". The connecting
-  // lines stay level with the dot centres by being offset to that centre
-  // themselves, which is why the rail aligns to `flex-start`.
-  rail: {
-    flexDirection: "row",
-    alignItems: "flex-start"
-  },
-  line: {
-    flex: 1,
-    height: theme.borderWidth.thick,
-    borderRadius: theme.radius.full,
-    marginHorizontal: theme.space.s1,
-    marginTop: theme.space.s6 / 2 - theme.borderWidth.thick / 2
-  },
-  dotCol: { alignItems: "center", flexShrink: 0, gap: theme.space.s1 },
-  dot: {
-    width: theme.space.s6,
-    height: theme.space.s6,
-    borderRadius: theme.radius.full,
-    alignItems: "center",
-    justifyContent: "center",
-    variants: {
-      state: {
-        // `done` uses the family's done tone (`status.done` === `good`), so a
-        // completed wizard step is the same green as a `done` Timeline/Stage node
-        // and matches the web wizard — the native wizard previously diverged to
-        // `accent` (blue) here, the one inconsistency this unification resolves.
-        done: {
-          backgroundColor: theme.status.done,
-          borderWidth: theme.borderWidth.thick,
-          borderColor: theme.status.done
-        },
-        // The active step's edge is `focus.ringColor` — the only mark of "you
-        // are here" once high contrast drops the `accentSoft` fill, so it owes
-        // SC 1.4.11's 3:1, which the raw accent misses in four palettes.
-        active: {
-          backgroundColor: theme.color.accentSoft,
-          borderWidth: theme.borderWidth.thick,
-          borderColor: theme.focus.ringColor
-        },
-        upcoming: {
-          backgroundColor: theme.color.surface3,
-          borderWidth: theme.borderWidth.thick,
-          borderColor: theme.color.surface3
-        }
-      }
-    }
-  },
-  dotNum: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight
-  },
-  dotLabel: {
-    // Wide enough for a real step name, capped so a long one wraps instead of
-    // shouldering the next step out of the rail.
-    maxWidth: theme.space.s8 + theme.space.s4,
-    textAlign: "center",
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight,
-    color: theme.color.text
-  },
-  content: { gap: theme.space.s3 },
-  footer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: theme.space.s3
-  }
-}));
-
-export { Wizard, WizardSteps };