@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-Z7H7VSFZ.js

@@ -0,0 +1,323 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, Easing, View, ScrollView, Pressable, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CLOSE_ACTIONS = [{ name: "close", label: "Close" }];
+function tabsRevealOffset(triggerX, triggerWidth, stripWidth, viewportWidth) {
+  const max = stripWidth - viewportWidth;
+  if (max <= 0) return 0;
+  return Math.min(Math.max(triggerX + triggerWidth / 2 - viewportWidth / 2, 0), max);
+}
+function Tabs({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  variant = "underline",
+  size = "md",
+  onClose,
+  onAdd,
+  addLabel = "Add tab",
+  motion = "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 activeItem = items[activeIndex];
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { variant, size });
+  const iconSize = size === "sm" ? 16 : 18;
+  const closeIconSize = size === "sm" ? 14 : 16;
+  const [layouts, setLayouts] = React.useState({});
+  const onTriggerLayout = (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 indicatorX = React.useRef(new Animated.Value(0)).current;
+  const indicatorWidth = React.useRef(new Animated.Value(0)).current;
+  const measured = React.useRef(false);
+  React.useEffect(() => {
+    if (!active) return;
+    if (!measured.current) {
+      indicatorX.setValue(active.x);
+      indicatorWidth.setValue(active.width);
+      measured.current = true;
+      return;
+    }
+    if (motion !== "full") {
+      indicatorX.setValue(active.x);
+      indicatorWidth.setValue(active.width);
+      return;
+    }
+    const { duration, easing } = theme.motion.indicator;
+    Animated.parallel([
+      Animated.timing(indicatorX, {
+        toValue: active.x,
+        duration,
+        easing: Easing.bezier(easing[0], easing[1], easing[2], easing[3]),
+        useNativeDriver: false
+      }),
+      Animated.timing(indicatorWidth, {
+        toValue: active.width,
+        duration,
+        easing: Easing.bezier(easing[0], easing[1], easing[2], easing[3]),
+        useNativeDriver: false
+      })
+    ]).start();
+  }, [active, motion, indicatorX, indicatorWidth, theme.motion.indicator]);
+  const select = (next) => {
+    if (!isControlled) setInternal(next);
+    onValueChange?.(next);
+  };
+  const scrollRef = React.useRef(null);
+  const [viewportWidth, setViewportWidth] = React.useState(0);
+  const [stripWidth, setStripWidth] = React.useState(0);
+  const revealed = React.useRef(false);
+  React.useEffect(() => {
+    if (!active || stripWidth <= viewportWidth) return;
+    scrollRef.current?.scrollTo({
+      x: tabsRevealOffset(active.x, active.width, stripWidth, viewportWidth),
+      animated: revealed.current
+    });
+    revealed.current = true;
+  }, [active, stripWidth, viewportWidth]);
+  const indicatorStyle = variant === "underline" ? [
+    styles.underline,
+    // The bar's weight is a ramp step per size — it was 2 and 3, which
+    // read as the same decision but came from nowhere.
+    { left: indicatorX, width: indicatorWidth, height: theme.space[size === "sm" ? 2 : 3] }
+  ] : [
+    styles.pill,
+    active ? { left: indicatorX, width: indicatorWidth, top: active.y, height: active.height } : { left: indicatorX, width: indicatorWidth }
+  ];
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.bar, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.list, children: /* @__PURE__ */ jsx(
+        ScrollView,
+        {
+          ref: scrollRef,
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          onLayout: (e) => setViewportWidth(e.nativeEvent.layout.width),
+          style: styles.scroll,
+          children: /* @__PURE__ */ jsxs(
+            View,
+            {
+              accessibilityRole: "tablist",
+              style: styles.row,
+              onLayout: (e) => setStripWidth(e.nativeEvent.layout.width),
+              children: [
+                active ? /* @__PURE__ */ jsx(Animated.View, { pointerEvents: "none", style: indicatorStyle }) : null,
+                items.map((item, index) => {
+                  const selected = item.value === current;
+                  const fg = selected ? theme.color.onSurface : theme.color.text2;
+                  const triggerNode = /* @__PURE__ */ jsxs(
+                    Pressable,
+                    {
+                      accessibilityRole: "tab",
+                      accessibilityState: { selected },
+                      "aria-selected": selected,
+                      accessibilityActions: item.closable ? CLOSE_ACTIONS : void 0,
+                      onAccessibilityAction: item.closable && onClose ? (e) => {
+                        if (e.nativeEvent.actionName === "close") onClose(item.value);
+                      } : void 0,
+                      onPress: () => select(item.value),
+                      onLayout: onTriggerLayout(index),
+                      style: styles.trigger,
+                      children: [
+                        item.icon ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize, color: fg }) : null,
+                        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: item.label })
+                      ]
+                    }
+                  );
+                  if (!item.closable) {
+                    return /* @__PURE__ */ jsx(React.Fragment, { children: triggerNode }, item.value);
+                  }
+                  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                    triggerNode,
+                    /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        "aria-hidden": true,
+                        accessibilityElementsHidden: true,
+                        importantForAccessibility: "no-hide-descendants",
+                        focusable: false,
+                        tabIndex: -1,
+                        testID: `tabs-close-${item.value}`,
+                        onPress: onClose ? () => onClose(item.value) : void 0,
+                        style: styles.close,
+                        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: closeIconSize, color: fg })
+                      }
+                    )
+                  ] }, item.value);
+                })
+              ]
+            }
+          )
+        }
+      ) }),
+      onAdd ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: addLabel,
+          onPress: onAdd,
+          style: styles.add,
+          children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: iconSize, color: theme.color.text2 })
+        }
+      ) : null
+    ] }),
+    activeItem?.content !== void 0 ? /* @__PURE__ */ jsx(View, { style: styles.panel, children: activeItem.content }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // The bar row: the scrolling chrome plus the pinned add button. It sizes to
+  // its content (`alignSelf: 'flex-start'`) and caps at the parent's edge
+  // (`maxWidth`), taking over the sizing role the chrome held before an add
+  // button could sit beside it.
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    maxWidth: "100%"
+  },
+  // The chrome: the underline's rule, or the pill variant's tray. `flexShrink`
+  // lets it yield width to the add button so the triggers scroll underneath the
+  // chrome rather than pushing the add button off the edge; with no add button
+  // it is the only child of the bar and still sizes to its triggers.
+  list: {
+    flexShrink: 1,
+    variants: {
+      variant: {
+        underline: {
+          borderBottomWidth: theme.borderWidth.thin,
+          borderBottomColor: theme.color.border
+        },
+        pill: {
+          backgroundColor: theme.color.surface2,
+          borderRadius: theme.radius.full,
+          padding: theme.space.s1
+        }
+      },
+      size: { sm: {}, md: {} }
+    }
+  },
+  // A scroller clips at its padding box, and the underline indicator hangs 1px
+  // past the triggers so it lands *on* the rule (`bottom: -1` below). A hairline
+  // of padding keeps that overhang inside the clip box; the negative margin hands
+  // the same hairline back, so the bar's height and the rule's position are the
+  // ones it had before the strip could scroll.
+  scroll: {
+    variants: {
+      variant: {
+        underline: { paddingBottom: theme.space[1], marginBottom: -theme.space[1] },
+        pill: {}
+      },
+      size: { sm: {}, md: {} }
+    }
+  },
+  // The triggers and the indicator, in one padding-free coordinate space.
+  row: {
+    position: "relative",
+    flexDirection: "row",
+    variants: {
+      variant: {
+        underline: { gap: theme.space.s4 },
+        pill: { gap: theme.space.s1 }
+      },
+      size: { sm: {}, md: {} }
+    }
+  },
+  underline: {
+    position: "absolute",
+    bottom: -theme.space[1],
+    backgroundColor: theme.color.accent,
+    borderRadius: theme.radius.full,
+    variants: {
+      variant: { underline: {}, pill: {} },
+      size: { sm: {}, md: {} }
+    }
+  },
+  pill: {
+    position: "absolute",
+    backgroundColor: theme.color.accentSoft,
+    // The tint collapses to the plain surface under `contrast: 'more'`, where
+    // `edge.accent` stops being transparent and carries the selection instead.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent,
+    borderRadius: theme.radius.full,
+    variants: {
+      variant: { underline: {}, pill: {} },
+      size: { sm: {}, md: {} }
+    }
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s2,
+    variants: {
+      variant: {
+        underline: {},
+        pill: { borderRadius: theme.radius.full }
+      },
+      size: {
+        sm: { paddingVertical: theme.space.s2, paddingHorizontal: theme.space.s3 },
+        md: { paddingVertical: theme.space.s3, paddingHorizontal: theme.space.s4 }
+      }
+    }
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    variants: {
+      variant: { underline: {}, pill: {} },
+      size: {
+        sm: { fontSize: theme.fontSize[14] },
+        md: { fontSize: theme.fontSize[16] }
+      }
+    }
+  },
+  // The close affordance beside a `closable` tab. `alignSelf: 'stretch'` gives it
+  // the trigger's full height as vertical hit area; the horizontal padding widens
+  // the target past the glyph. The `x` glyph inherits the label's ink (`text2`
+  // when inactive, `onSurface` when active) — both clear the 3:1 non-text floor.
+  close: {
+    alignSelf: "stretch",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: theme.space.s2,
+    borderRadius: theme.radius.full
+  },
+  // The add button, pinned outside the tablist at the trailing edge. A full
+  // 44pt touch target; the `plus` glyph inks `text2` on the surface (3:1+).
+  add: {
+    minWidth: theme.tapMin,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    marginStart: theme.space.s1
+  },
+  panel: {
+    paddingTop: theme.space.s4,
+    variants: {
+      variant: { underline: {}, pill: {} },
+      size: { sm: {}, md: {} }
+    }
+  }
+}));
+
+export { Tabs };

package/dist/chunk-ZK2H4O5P.js

@@ -0,0 +1 @@
+