@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-Z7H7VSFZ.js

@@ -1,323 +0,0 @@
-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/header/index.js

@@ -1,5 +0,0 @@
-export { Header, HeaderAction } from '../chunk-4YQOR7JM.js';
-import '../chunk-47FWHGUN.js';
-import '../chunk-3NMD74ZU.js';
-import '../chunk-6N33LFQA.js';
-import '../chunk-TKVFVF5D.js';

package/dist/search-bar/index.js

@@ -1,5 +0,0 @@
-import '../chunk-JRLTGLN4.js';
-export { SearchBar, SearchExpand } from '../chunk-47FWHGUN.js';
-import '../chunk-3NMD74ZU.js';
-import '../chunk-6N33LFQA.js';
-import '../chunk-TKVFVF5D.js';