@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-Y4QNMBLO.js

@@ -0,0 +1,533 @@
+import { TabBar } from './chunk-PHSZY37H.js';
+import { alignItemsStyle } from './chunk-TUACVJNG.js';
+import { useFormFactor } from './chunk-AWKQIE5I.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var HINGE_GUTTER_WIDTH = 8;
+var NAV_RAIL_WIDTH = 80;
+var NAV_GLYPH = 22;
+function SplitPane({
+  list,
+  detail,
+  detailVisible = false,
+  aside,
+  detailPlaceholder,
+  listTitle,
+  detailTitle,
+  listSubtitle,
+  detailSubtitle,
+  capMeasure = true,
+  formFactor,
+  style,
+  testID,
+  motion = "full",
+  orientation = "horizontal",
+  align
+}) {
+  const info = useFormFactor(formFactor);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("adaptive");
+  const level = useResolvedMotion(motion, "adaptive");
+  const multiPane = info.panes > 1;
+  const stacked = orientation === "vertical";
+  const showAside = info.panes > 2 && aside != null;
+  const listHidden = !multiPane && detailVisible && detail != null;
+  const detailHidden = !multiPane && !listHidden;
+  const swap = React.useRef(new Animated.Value(1)).current;
+  const dir = React.useRef(0);
+  const shown = multiPane ? detailVisible ? "detail" : "placeholder" : listHidden ? "detail" : "list";
+  const prevShown = React.useRef(shown);
+  if (prevShown.current !== shown) {
+    dir.current = multiPane || level !== "full" ? 0 : shown === "detail" ? 1 : -1;
+  }
+  React.useEffect(() => {
+    if (prevShown.current === shown) return;
+    prevShown.current = shown;
+    if (level === "none") return;
+    swap.setValue(0);
+    const run = Animated.spring(swap, {
+      ...springConfig(theme, dir.current ? "ds" : "de"),
+      toValue: 1,
+      useNativeDriver: true
+    });
+    run.start();
+    return () => run.stop();
+  }, [shown, multiPane, level, swap, theme]);
+  const step = theme.space.s6;
+  const swapStyle = {
+    opacity: swap,
+    transform: [
+      {
+        translateX: swap.interpolate({ inputRange: [0, 1], outputRange: [dir.current * step, 0] })
+      }
+    ]
+  };
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.container,
+        stacked ? { flexDirection: "column" } : null,
+        alignItemsStyle(align),
+        style
+      ],
+      testID,
+      children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            role: "group",
+            accessibilityLabel: listTitle,
+            testID: testID ? `${testID}-list` : void 0,
+            style: [
+              styles.pane,
+              multiPane ? { flex: info.listFlex } : styles.paneFill,
+              listHidden && hidden
+            ],
+            children: [
+              listTitle ? /* @__PURE__ */ jsx(PaneHeader, { title: listTitle, subtitle: listSubtitle }) : null,
+              /* @__PURE__ */ jsx(Animated.View, { style: [styles.paneBody, multiPane ? null : swapStyle], children: list })
+            ]
+          }
+        ),
+        multiPane && info.hinge ? (
+          // The hinge is a hard gutter: a plain, non-interactive band. §31 —
+          // "no interactive element straddles it".
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants",
+              style: [styles.hinge, stacked ? styles.hingeStacked : null],
+              testID: testID ? `${testID}-hinge` : void 0
+            }
+          )
+        ) : null,
+        detail != null || multiPane ? /* @__PURE__ */ jsxs(
+          View,
+          {
+            role: "group",
+            accessibilityLabel: detailTitle,
+            testID: testID ? `${testID}-detail` : void 0,
+            style: [
+              styles.detailPane,
+              multiPane ? { flex: info.detailFlex } : styles.paneFill,
+              detailHidden && hidden
+            ],
+            children: [
+              detailTitle ? /* @__PURE__ */ jsx(PaneHeader, { title: detailTitle, subtitle: detailSubtitle }) : null,
+              /* @__PURE__ */ jsx(
+                Animated.View,
+                {
+                  style: [
+                    styles.paneBody,
+                    capMeasure ? { maxWidth: info.readingMeasure, width: "100%" } : null,
+                    swapStyle
+                  ],
+                  children: detailVisible || !multiPane ? detail : detailPlaceholder
+                }
+              )
+            ]
+          }
+        ) : null,
+        showAside ? /* @__PURE__ */ jsx(
+          View,
+          {
+            testID: testID ? `${testID}-aside` : void 0,
+            style: [styles.detailPane, { flex: info.asideFlex }],
+            children: /* @__PURE__ */ jsx(View, { style: styles.paneBody, children: aside })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var hidden = { display: "none" };
+function PaneHeader({
+  title,
+  subtitle
+}) {
+  const theme = useLoamTheme("adaptive");
+  const { styles } = useStyles(sheet);
+  const android = isAndroidIdiom(theme);
+  return /* @__PURE__ */ jsxs(View, { style: styles.paneHeader, children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        accessibilityRole: "header",
+        numberOfLines: 1,
+        style: [styles.paneHeaderTitle, resolveTextRole(theme, "surfaceTitle", android)],
+        children: title
+      }
+    ),
+    subtitle ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        numberOfLines: 1,
+        style: [styles.paneHeaderSubtitle, resolveTextRole(theme, "footnote", android)],
+        children: subtitle
+      }
+    ) : null
+  ] });
+}
+var DEFAULT_LABELS = {
+  main: "Main"
+};
+function adaptivePlacement(nav, formFactor, android) {
+  if (!android && formFactor === "phoneLandscape") return "bottom";
+  return nav;
+}
+function AdaptiveNav({
+  items,
+  activeKey,
+  onSelect,
+  kind,
+  formFactor,
+  accessibilityLabel,
+  labels: labelsProp,
+  platform,
+  testID,
+  density = "standard",
+  variant = "default",
+  size,
+  orientation
+}) {
+  const labels = useLabels("adaptive", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("adaptive");
+  const android = isAndroidIdiom(theme, platform);
+  const info = useFormFactor(formFactor);
+  const placement = orientation === "horizontal" ? "bottom" : orientation === "vertical" ? "rail" : kind ?? adaptivePlacement(info.nav, info.formFactor, android);
+  const idiom = placement === "bottom" ? "bottom" : android ? "rail" : "sidebar";
+  const { styles } = useStyles(sheet, { idiom });
+  if (idiom === "bottom") {
+    return /* @__PURE__ */ jsx(View, { testID, children: /* @__PURE__ */ jsx(
+      TabBar,
+      {
+        items: items.map((i) => ({
+          value: i.key,
+          label: i.label,
+          icon: i.icon,
+          disabled: i.disabled
+        })),
+        value: activeKey,
+        onValueChange: onSelect,
+        accessibilityLabel: accessibilityLabel ?? labels.main,
+        platform: android ? "android" : "ios",
+        size
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "tablist",
+      accessibilityLabel: accessibilityLabel ?? labels.main,
+      style: [
+        styles.nav,
+        variant === "plain" ? { backgroundColor: theme.color.bg, borderEndWidth: 0 } : null,
+        density === "compact" ? { gap: theme.space.s1, padding: theme.space.s1 } : null
+      ],
+      testID,
+      children: items.map((item) => /* @__PURE__ */ jsx(
+        NavItem,
+        {
+          item,
+          idiom,
+          selected: item.key === activeKey,
+          onSelect,
+          size
+        },
+        item.key
+      ))
+    }
+  );
+}
+function NavItem({
+  item,
+  idiom,
+  selected,
+  onSelect,
+  size
+}) {
+  const theme = useLoamTheme("adaptive");
+  const { styles } = useStyles(sheet, { idiom, selected });
+  const focusRing = useFocusRing(theme.radius.md);
+  const glyph = /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: item.icon,
+      size: size ? theme.ctl.icon[size] : NAV_GLYPH,
+      color: selected ? theme.color.accentStrong : theme.color.text2
+    }
+  );
+  const label = /* @__PURE__ */ jsx(
+    Text,
+    {
+      numberOfLines: 1,
+      style: [
+        styles.navLabel,
+        resolveTextRole(theme, idiom === "rail" ? "labelMedium" : "body", idiom === "rail"),
+        idiom === "rail" ? { fontWeight: theme.fontWeight.medium } : null
+      ],
+      children: item.label
+    }
+  );
+  if (idiom === "rail") {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "tab",
+        accessibilityLabel: item.label,
+        accessibilityState: { selected, disabled: item.disabled === true },
+        disabled: item.disabled,
+        onPress: onSelect ? () => onSelect(item.key) : void 0,
+        onFocus: focusRing.handlers.onFocus,
+        onBlur: focusRing.handlers.onBlur,
+        style: [
+          styles.navItem,
+          focusRing.style,
+          item.disabled ? { opacity: theme.state.disabledOpacity } : null
+        ],
+        children: ({ pressed }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              testID: "rail-capsule",
+              style: [
+                styles.capsule,
+                size ? { height: theme.ctl[size], width: theme.space[size === "sm" ? 48 : size === "md" ? 56 : 64] } : null,
+                pressed && !selected ? styles.capsulePressed : null
+              ],
+              children: glyph
+            }
+          ),
+          label
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "tab",
+      accessibilityLabel: item.label,
+      accessibilityState: { selected, disabled: item.disabled === true },
+      disabled: item.disabled,
+      onPress: onSelect ? () => onSelect(item.key) : void 0,
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      style: ({ pressed }) => [
+        styles.navItem,
+        size ? { minHeight: theme.ctl[size] } : null,
+        focusRing.style,
+        item.disabled ? { opacity: theme.state.disabledOpacity } : null,
+        selected ? { backgroundColor: theme.state.selected } : null,
+        pressed && !selected ? { backgroundColor: theme.state.pressed } : null
+      ],
+      children: [
+        glyph,
+        label
+      ]
+    }
+  );
+}
+function AdaptiveShell({
+  nav,
+  children,
+  padContent = false,
+  formFactor,
+  platform,
+  style,
+  testID,
+  density = "standard",
+  variant = "default",
+  size
+}) {
+  const info = useFormFactor(formFactor);
+  const theme = useLoamTheme("adaptive");
+  const placement = adaptivePlacement(info.nav, info.formFactor, isAndroidIdiom(theme, platform));
+  const { styles } = useStyles(sheet, { placement });
+  const content = /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        styles.shellContent,
+        padContent && size ? {
+          padding: size === "sm" ? theme.space.s2 : size === "md" ? theme.space.s4 : theme.space.s6
+        } : padContent ? {
+          paddingHorizontal: density === "compact" ? info.paddingHorizontal / 2 : info.paddingHorizontal,
+          paddingVertical: density === "compact" ? info.paddingVertical / 2 : info.paddingVertical
+        } : null
+      ],
+      children
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [styles.shell, variant === "plain" ? { backgroundColor: "transparent" } : null, style],
+      testID,
+      children: placement === "rail" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        nav,
+        content
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        content,
+        nav
+      ] })
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  container: {
+    flex: 1,
+    flexDirection: "row",
+    backgroundColor: theme.color.bg,
+    overflow: "hidden"
+  },
+  pane: {
+    minWidth: 0,
+    flexDirection: "column",
+    backgroundColor: theme.color.bg,
+    overflow: "hidden"
+  },
+  detailPane: {
+    minWidth: 0,
+    flexDirection: "column",
+    backgroundColor: theme.color.surface,
+    borderStartWidth: theme.borderWidth.base,
+    borderStartColor: theme.color.border,
+    overflow: "hidden"
+  },
+  paneFill: { flex: 1 },
+  paneBody: { flex: 1, minWidth: 0 },
+  // The hinge band. `border-strong` per the reference, and never interactive.
+  hinge: { width: theme.space[HINGE_GUTTER_WIDTH], backgroundColor: theme.color.borderStrong },
+  hingeStacked: { width: void 0, height: theme.space[HINGE_GUTTER_WIDTH] },
+  paneHeader: {
+    minHeight: theme.layout.toolbarH,
+    justifyContent: "center",
+    gap: theme.space[2],
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s2,
+    backgroundColor: theme.color.surface,
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border
+  },
+  // Surface title (iOS title 3 20 / 600, Android title large 22 / 400).
+  paneHeaderTitle: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text
+  },
+  paneHeaderSubtitle: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2
+  },
+  nav: {
+    flexGrow: 0,
+    flexShrink: 0,
+    backgroundColor: theme.color.surface,
+    borderEndWidth: theme.borderWidth.base,
+    borderEndColor: theme.color.border,
+    variants: {
+      idiom: {
+        sidebar: {
+          width: theme.space[256],
+          flexDirection: "column",
+          gap: theme.space[2],
+          padding: theme.space.s2
+        },
+        rail: {
+          width: theme.space[NAV_RAIL_WIDTH],
+          flexDirection: "column",
+          alignItems: "center",
+          gap: theme.space.s3,
+          paddingVertical: theme.space.s3
+        },
+        bottom: {}
+      },
+      selected: {}
+    }
+  },
+  navItem: {
+    variants: {
+      idiom: {
+        sidebar: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: theme.space[12],
+          minHeight: theme.space[44],
+          paddingHorizontal: theme.space[12],
+          borderRadius: theme.radius.md
+        },
+        rail: {
+          alignItems: "center",
+          gap: theme.space[4],
+          minWidth: theme.tapMin
+        },
+        bottom: {}
+      },
+      selected: {
+        true: {},
+        false: {}
+      }
+    }
+  },
+  // The rail capsule: 56 × 32, state-selected when current.
+  capsule: {
+    width: theme.space[56],
+    height: theme.space[32],
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      selected: {
+        true: { backgroundColor: theme.state.selected },
+        false: {}
+      },
+      idiom: {}
+    }
+  },
+  capsulePressed: {
+    backgroundColor: theme.state.pressed
+  },
+  navLabel: {
+    fontFamily: theme.font.sans,
+    variants: {
+      selected: {
+        true: { color: theme.color.text },
+        false: { color: theme.color.text2 }
+      },
+      idiom: {
+        sidebar: { flex: 1, color: theme.color.text },
+        rail: { textAlign: "center" },
+        bottom: {}
+      }
+    }
+  },
+  shell: {
+    flex: 1,
+    backgroundColor: theme.color.bg,
+    variants: {
+      placement: {
+        rail: { flexDirection: "row" },
+        bottom: { flexDirection: "column" }
+      }
+    }
+  },
+  shellContent: {
+    flex: 1,
+    minWidth: 0,
+    variants: { placement: {} }
+  }
+}));
+
+export { AdaptiveNav, AdaptiveShell, HINGE_GUTTER_WIDTH, NAV_RAIL_WIDTH, SplitPane };

package/dist/chunk-Y5H4CTKO.js

@@ -0,0 +1 @@
+