@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-NZG75DGA.js

@@ -0,0 +1,282 @@
+import { haptics } from './chunk-NY2U3PBI.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, Easing, PanResponder, View, Pressable, Text, Platform, I18nManager } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function SegmentedControl({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  size: sizeProp,
+  motion = "full",
+  disabled = false,
+  semantics = "radio",
+  fullWidth = false,
+  variant = "filled",
+  shape = "pill",
+  orientation = "horizontal",
+  density = "comfortable",
+  accessibilityLabel
+}) {
+  const animateSlide = useResolvedMotion(motion, "segmented-control") === "full";
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(
+    defaultValue ?? items[0]?.value
+  );
+  const current = isControlled ? value : internal;
+  const activeIndex = Math.max(
+    0,
+    items.findIndex((item) => item.value === current)
+  );
+  const theme = useLoamTheme("segmented-control");
+  const ios = theme.platform === "iOS";
+  const size = sizeProp ?? (ios ? "sm" : "md");
+  const { styles } = useStyles(sheet, { size, disabled });
+  const labelStyle = theme.ctl.label[ios ? "sm" : size];
+  const iconSize = theme.ctl.icon[size];
+  const vertical = orientation === "vertical";
+  const compact = density === "compact";
+  const STEP_DOWN = { xs: "xs", sm: "xs", md: "sm", lg: "md" };
+  const segH = compact ? theme.ctl[STEP_DOWN[size]] : void 0;
+  const solid = variant === "solid";
+  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  const [layouts, setLayouts] = React.useState({});
+  const onSegmentLayout = (index) => (e) => {
+    const { x, y, width, height } = e.nativeEvent.layout;
+    setLayouts((prev) => {
+      const p = prev[index];
+      if (p && p.x === x && p.y === y && p.width === width && p.height === height) return prev;
+      return { ...prev, [index]: { x, y, width, height } };
+    });
+  };
+  const active = layouts[activeIndex];
+  const thumbX = React.useRef(new Animated.Value(0)).current;
+  const thumbWidth = React.useRef(new Animated.Value(0)).current;
+  const measured = React.useRef(false);
+  React.useEffect(() => {
+    if (!active) return;
+    if (!measured.current || !animateSlide) {
+      thumbX.setValue(active.x);
+      thumbWidth.setValue(active.width);
+      measured.current = true;
+      return;
+    }
+    const easing = Easing.bezier(...theme.motion.knob.easing);
+    Animated.parallel([
+      Animated.timing(thumbX, {
+        toValue: active.x,
+        duration: theme.motion.knob.duration,
+        easing,
+        useNativeDriver: false
+      }),
+      Animated.timing(thumbWidth, {
+        toValue: active.width,
+        duration: theme.motion.knob.duration,
+        easing,
+        useNativeDriver: false
+      })
+    ]).start();
+  }, [active, animateSlide, thumbX, thumbWidth, theme.motion.knob]);
+  const select = (next) => {
+    if (!isControlled) setInternal(next);
+    if (next !== current) haptics.selection();
+    onValueChange?.(next);
+  };
+  const rowRef = React.useRef(null);
+  const rowX = React.useRef(0);
+  const segmentRefs = React.useRef([]);
+  const onKeyDown = (e) => {
+    if (disabled || items.length === 0) return;
+    const back = I18nManager.isRTL ? "ArrowRight" : "ArrowLeft";
+    const forward = I18nManager.isRTL ? "ArrowLeft" : "ArrowRight";
+    let next;
+    if (e.key === forward || e.key === "ArrowDown") next = (activeIndex + 1) % items.length;
+    else if (e.key === back || e.key === "ArrowUp")
+      next = (activeIndex - 1 + items.length) % items.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = items.length - 1;
+    else return;
+    e.preventDefault();
+    select(items[next].value);
+    segmentRefs.current[next]?.focus?.();
+  };
+  const latest = React.useRef({ layouts, select, items, disabled, current, vertical });
+  latest.current = { layouts, select, items, disabled, current, vertical };
+  const scrub = React.useMemo(
+    () => (
+      // A plain horizontal scrub inside one control; no nested gesture to arbitrate.
+      // eslint-disable-next-line loam/no-pan-responder
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_, g) => !latest.current.disabled && !latest.current.vertical && Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
+        onPanResponderGrant: () => {
+          rowRef.current?.measureInWindow((x) => {
+            rowX.current = x;
+          });
+        },
+        onPanResponderMove: (_, g) => {
+          const { layouts: boxes, select: pick, items: list, current: now } = latest.current;
+          const x = g.moveX - rowX.current;
+          const hit = list.findIndex((_2, i) => {
+            const b = boxes[i];
+            return b !== void 0 && x >= b.x && x < b.x + b.width;
+          });
+          if (hit >= 0 && list[hit].value !== now) pick(list[hit].value);
+        },
+        onPanResponderTerminationRequest: () => false
+      })
+    ),
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        styles.container,
+        fullWidth ? { alignSelf: "stretch" } : null,
+        shape === "rounded" && { borderRadius: theme.radius.md },
+        vertical && { borderRadius: theme.radius.lg },
+        variant === "ghost" && { backgroundColor: "transparent" },
+        variant === "outline" && {
+          backgroundColor: "transparent",
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.color.border
+        }
+      ],
+      children: /* @__PURE__ */ jsxs(
+        View,
+        {
+          ref: rowRef,
+          style: [styles.row, vertical && { flexDirection: "column" }],
+          accessibilityRole: semantics === "tabs" ? "tablist" : "radiogroup",
+          accessibilityLabel,
+          ...Platform.OS === "web" ? { onKeyDown } : null,
+          ...scrub.panHandlers,
+          children: [
+            /* @__PURE__ */ jsx(
+              Animated.View,
+              {
+                testID: "segmented-indicator",
+                pointerEvents: "none",
+                style: [
+                  styles.indicator,
+                  { left: thumbX, width: thumbWidth },
+                  active ? { top: active.y, height: active.height } : null,
+                  shape === "rounded" && { borderRadius: theme.radius.sm },
+                  vertical && { borderRadius: theme.radius.lg },
+                  solid && { backgroundColor: theme.color.accent },
+                  variant === "outline" && { shadowOpacity: 0, elevation: 0, borderColor: theme.focus.ringColor }
+                ]
+              }
+            ),
+            items.map((item, index) => {
+              const selected = item.value === current;
+              const fg = selected ? solid ? theme.color.accentInk : theme.color.text : theme.color.text3;
+              return /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  ref: (node) => {
+                    segmentRefs.current[index] = node;
+                  },
+                  accessibilityRole: semantics === "tabs" ? "tab" : "radio",
+                  accessibilityState: semantics === "tabs" ? { selected, disabled } : { checked: selected, disabled },
+                  ...Platform.OS === "web" ? {
+                    [semantics === "tabs" ? "aria-selected" : "aria-checked"]: selected,
+                    tabIndex: selected && !disabled ? 0 : -1
+                  } : null,
+                  disabled,
+                  onPress: disabled ? void 0 : () => select(item.value),
+                  onLayout: onSegmentLayout(index),
+                  hitSlop: { top: slopY, bottom: slopY },
+                  style: [
+                    styles.segment,
+                    fullWidth && !vertical ? { flex: 1 } : null,
+                    segH !== void 0 && { height: segH, paddingHorizontal: theme.space.s2 },
+                    shape === "rounded" && { borderRadius: theme.radius.sm },
+                    vertical && { borderRadius: theme.radius.lg, justifyContent: "flex-start" }
+                  ],
+                  children: [
+                    item.icon ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize, color: fg }) : null,
+                    /* @__PURE__ */ jsx(Text, { style: [styles.label, labelStyle, { color: fg }], children: item.label })
+                  ]
+                },
+                item.value
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  container: {
+    alignSelf: "flex-start",
+    position: "relative",
+    backgroundColor: theme.color.surface2,
+    borderRadius: theme.radius.full,
+    padding: theme.space.s1,
+    variants: {
+      size: { xs: {}, sm: {}, md: {}, lg: {} },
+      disabled: { true: { opacity: theme.state.disabledOpacity }, false: {} }
+    }
+  },
+  indicator: {
+    // `top`/`bottom` are the pre-measurement fallback; once a segment reports
+    // its box the use site overrides them with that segment's `y`/`height`.
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.full,
+    // Which segment is selected is carried by `surface`-on-`surface2` (~1.1:1)
+    // plus `shadow.sm`, and high contrast zeroes the shadow. The accent edge is
+    // what marks the selection there; it is `transparent` at normal contrast.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent,
+    ...theme.shadow.sm,
+    variants: {
+      size: { xs: {}, sm: {}, md: {}, lg: {} },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  // The measurement frame: no padding of its own, so a segment's measured
+  // `x`/`y` and the thumb's `left`/`top` are in the same coordinate space on
+  // every platform.
+  row: {
+    position: "relative",
+    flexDirection: "row",
+    alignItems: "stretch"
+  },
+  segment: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s2,
+    borderRadius: theme.radius.full,
+    variants: {
+      // Segment height + horizontal padding resolve from the control-size ramp
+      // (26 / 30 / 36 / 44); the measured box drives the sliding indicator.
+      size: {
+        xs: { height: theme.ctl.xs, paddingHorizontal: theme.ctl.px.xs },
+        sm: { height: theme.ctl.sm, paddingHorizontal: theme.ctl.px.sm },
+        md: { height: theme.ctl.md, paddingHorizontal: theme.ctl.px.md },
+        lg: { height: theme.ctl.lg, paddingHorizontal: theme.ctl.px.lg }
+      },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  // Size and weight come from the OS label role at the use site.
+  label: {
+    fontFamily: theme.font.sans,
+    variants: {
+      size: { xs: {}, sm: {}, md: {}, lg: {} },
+      disabled: { true: {}, false: {} }
+    }
+  }
+}));
+
+export { SegmentedControl };