@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-OMHVEVX4.js

@@ -0,0 +1,436 @@
+import { Badge } from './chunk-LGNTP5XA.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.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';
+
+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);
+}
+var DEFAULT_LABELS = {
+  close: "Close",
+  addTab: "Add tab",
+  unseen: "new"
+};
+function Tabs({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  variant = "underline",
+  size = "lg",
+  fullWidth = false,
+  platform,
+  onClose,
+  onAdd,
+  addLabel: addLabelProp,
+  motion = "full",
+  labels: labelsProp,
+  orientation = "horizontal",
+  density = "comfortable",
+  disabled: barDisabled = false
+}) {
+  const labels = useLabels("tabs", DEFAULT_LABELS, labelsProp);
+  const addLabel = addLabelProp ?? labels.addTab;
+  const closeActions = React.useMemo(
+    () => [{ name: "close", label: labels.close }],
+    [labels.close]
+  );
+  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("tabs");
+  const { styles } = useStyles(sheet, { variant, size });
+  const vertical = orientation === "vertical";
+  const android = isAndroidIdiom(theme, platform);
+  const iconSize = size === "sm" ? 16 : 18;
+  const tier = size === "sm" ? theme.space[36] : size === "md" ? theme.space[40] : android ? theme.space[48] : theme.ctl.lg;
+  const triggerHeight = variant === "pill" ? tier - theme.space[8] : tier;
+  const labelWeight = android ? theme.fontWeight.medium : theme.fontWeight.semibold;
+  const unseenWeight = android ? theme.fontWeight.semibold : theme.fontWeight.bold;
+  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;
+    const pos = vertical ? active.y : active.x;
+    const span = vertical ? active.height : active.width;
+    if (!measured.current) {
+      indicatorX.setValue(pos);
+      indicatorWidth.setValue(span);
+      measured.current = true;
+      return;
+    }
+    if (motion !== "full") {
+      indicatorX.setValue(pos);
+      indicatorWidth.setValue(span);
+      return;
+    }
+    const { duration, easing } = theme.motion.indicator;
+    Animated.parallel([
+      Animated.timing(indicatorX, {
+        toValue: pos,
+        duration,
+        easing: Easing.bezier(easing[0], easing[1], easing[2], easing[3]),
+        useNativeDriver: false
+      }),
+      Animated.timing(indicatorWidth, {
+        toValue: span,
+        duration,
+        easing: Easing.bezier(easing[0], easing[1], easing[2], easing[3]),
+        useNativeDriver: false
+      })
+    ]).start();
+  }, [active, vertical, motion, indicatorX, indicatorWidth, theme.motion.indicator]);
+  const select = (next) => {
+    if (barDisabled) return;
+    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 (vertical || !active || stripWidth <= viewportWidth) return;
+    scrollRef.current?.scrollTo({
+      x: tabsRevealOffset(active.x, active.width, stripWidth, viewportWidth),
+      animated: revealed.current
+    });
+    revealed.current = true;
+  }, [active, vertical, stripWidth, viewportWidth]);
+  const indicatorStyle = vertical ? variant === "underline" ? [
+    styles.underline,
+    {
+      top: indicatorX,
+      height: indicatorWidth,
+      width: theme.space[android ? 3 : 2],
+      bottom: void 0,
+      end: -theme.space[1]
+    }
+  ] : [
+    styles.pill,
+    active ? { top: indicatorX, height: indicatorWidth, left: active.x, width: active.width } : { top: indicatorX, height: indicatorWidth }
+  ] : variant === "underline" ? [
+    styles.underline,
+    // 2 px on iOS; Android's indicator is 3, matching the trigger width.
+    { left: indicatorX, width: indicatorWidth, height: theme.space[android ? 3 : 2] }
+  ] : [
+    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,
+          fullWidth ? { alignSelf: "stretch" } : null,
+          vertical ? { flexDirection: "column", alignItems: "flex-start" } : null
+        ],
+        children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles.list,
+                fullWidth ? { flexGrow: 1 } : null,
+                vertical && variant === "underline" ? {
+                  borderBottomWidth: 0,
+                  borderEndWidth: theme.borderWidth.thin,
+                  borderEndColor: theme.color.border
+                } : null
+              ],
+              children: /* @__PURE__ */ jsx(
+                ScrollView,
+                {
+                  ref: scrollRef,
+                  horizontal: !vertical,
+                  showsHorizontalScrollIndicator: false,
+                  onLayout: (e) => setViewportWidth(e.nativeEvent.layout.width),
+                  style: [
+                    styles.scroll,
+                    fullWidth ? { flexGrow: 1 } : null,
+                    vertical ? { paddingBottom: 0, marginBottom: 0, paddingEnd: theme.space[1], marginEnd: -theme.space[1] } : null
+                  ],
+                  contentContainerStyle: fullWidth ? { flexGrow: 1 } : void 0,
+                  children: /* @__PURE__ */ jsxs(
+                    View,
+                    {
+                      accessibilityRole: "tablist",
+                      style: [
+                        styles.row,
+                        fullWidth ? { flexGrow: 1 } : null,
+                        vertical ? { flexDirection: "column" } : null
+                      ],
+                      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 off = barDisabled || item.disabled === true;
+                          const fg = selected ? theme.color.onSurface : theme.color.text2;
+                          const triggerNode = /* @__PURE__ */ jsxs(
+                            Pressable,
+                            {
+                              accessibilityRole: "tab",
+                              accessibilityState: { selected, disabled: off },
+                              "aria-disabled": off || void 0,
+                              disabled: off,
+                              "aria-selected": selected,
+                              accessibilityActions: item.closable ? closeActions : void 0,
+                              onAccessibilityAction: item.closable && onClose ? (e) => {
+                                if (e.nativeEvent.actionName === "close") onClose(item.value);
+                              } : void 0,
+                              onPress: () => select(item.value),
+                              accessibilityLabel: item.unseen ? `${item.label}, ${labels.unseen}` : void 0,
+                              onLayout: onTriggerLayout(index),
+                              style: [
+                                styles.trigger,
+                                { height: triggerHeight },
+                                density === "compact" ? { paddingHorizontal: theme.space.s3 } : null,
+                                off ? { opacity: theme.state.disabledOpacity } : null,
+                                fullWidth && !vertical ? { flex: 1 } : null
+                              ],
+                              children: [
+                                item.icon ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize, color: fg }) : null,
+                                /* @__PURE__ */ jsx(
+                                  Text,
+                                  {
+                                    style: [
+                                      styles.label,
+                                      { color: fg, fontWeight: item.unseen ? unseenWeight : labelWeight }
+                                    ],
+                                    children: item.label
+                                  }
+                                ),
+                                item.count !== void 0 ? /* @__PURE__ */ jsx(
+                                  Badge,
+                                  {
+                                    size: "sm",
+                                    variant: item.countTone ?? "neutral",
+                                    count: item.count,
+                                    style: variant === "pill" && (item.countTone ?? "neutral") === "neutral" ? { backgroundColor: theme.color.surface } : void 0
+                                  }
+                                ) : null,
+                                item.unseen ? /* @__PURE__ */ jsx(View, { style: styles.unseen }) : null
+                              ]
+                            }
+                          );
+                          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: {}, lg: {} }
+    }
+  },
+  // 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: {}, lg: {} }
+    }
+  },
+  // The triggers and the indicator, in one padding-free coordinate space.
+  row: {
+    position: "relative",
+    flexDirection: "row",
+    variants: {
+      variant: {
+        // No gap: the 16 padding is the trigger's, so the indicator matches its width.
+        underline: {},
+        pill: { gap: theme.space.s1 }
+      },
+      size: { sm: {}, md: {}, lg: {} }
+    }
+  },
+  underline: {
+    position: "absolute",
+    bottom: -theme.space[1],
+    backgroundColor: theme.color.accent,
+    borderRadius: theme.radius.full,
+    variants: {
+      variant: { underline: {}, pill: {} },
+      size: { sm: {}, md: {}, lg: {} }
+    }
+  },
+  pill: {
+    position: "absolute",
+    // Identical to the segmented control's thumb: `surface` on the `surface2`
+    // track, lifted by `shadow.sm`. High contrast zeroes the shadow, and
+    // `edge.accent` stops being transparent and carries the selection instead.
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent,
+    borderRadius: theme.radius.full,
+    ...theme.shadow.sm,
+    variants: {
+      variant: { underline: {}, pill: {} },
+      size: { sm: {}, md: {}, lg: {} }
+    }
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s2,
+    variants: {
+      variant: {
+        underline: {},
+        pill: { borderRadius: theme.radius.full }
+      },
+      size: {
+        sm: { paddingHorizontal: theme.space.s4 },
+        md: { paddingHorizontal: theme.space.s4 },
+        lg: { paddingHorizontal: theme.space.s4 }
+      }
+    }
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    variants: {
+      variant: { underline: {}, pill: {} },
+      size: {
+        sm: { fontSize: theme.fontSize[13] },
+        md: { fontSize: theme.fontSize[14] },
+        lg: { 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
+  },
+  // The unseen dot: accent 6, the unread rule.
+  unseen: {
+    width: theme.space[6],
+    height: theme.space[6],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  },
+  panel: {
+    paddingTop: theme.space.s4,
+    variants: {
+      variant: { underline: {}, pill: {} },
+      size: { sm: {}, md: {}, lg: {} }
+    }
+  }
+}));
+
+export { Tabs };