@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-QPWDDJJ4.js

@@ -1,385 +0,0 @@
-import { useFormFactor } from './chunk-AWKQIE5I.js';
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.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 = 64;
-function SplitPane({
-  list,
-  detail,
-  detailVisible = false,
-  aside,
-  detailPlaceholder,
-  listTitle,
-  detailTitle,
-  capMeasure = true,
-  formFactor,
-  style,
-  testID,
-  motion = "full"
-}) {
-  const info = useFormFactor(formFactor);
-  const { styles } = useStyles(sheet);
-  const theme = useLoamTheme("adaptive");
-  const level = useResolvedMotion(motion, "adaptive");
-  const multiPane = info.panes > 1;
-  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, 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, emphasis: "display" }) : 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,
-          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, emphasis: "body" }) : 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,
-  emphasis
-}) {
-  const { styles } = useStyles(sheet, { emphasis });
-  return /* @__PURE__ */ jsx(View, { style: styles.paneHeader, children: /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", numberOfLines: 1, style: styles.paneHeaderTitle, children: title }) });
-}
-var DEFAULT_LABELS = {
-  main: "Main"
-};
-function AdaptiveNav({
-  items,
-  activeKey,
-  onSelect,
-  kind,
-  formFactor,
-  accessibilityLabel,
-  labels: labelsProp,
-  testID
-}) {
-  const labels = useLabels("adaptive", DEFAULT_LABELS, labelsProp);
-  const info = useFormFactor(formFactor);
-  const placement = kind ?? info.nav;
-  const { styles } = useStyles(sheet, { placement });
-  return /* @__PURE__ */ jsx(
-    View,
-    {
-      accessibilityRole: "tablist",
-      accessibilityLabel: accessibilityLabel ?? labels.main,
-      style: styles.nav,
-      testID,
-      children: items.map((item) => /* @__PURE__ */ jsx(
-        NavItem,
-        {
-          item,
-          placement,
-          selected: item.key === activeKey,
-          onSelect
-        },
-        item.key
-      ))
-    }
-  );
-}
-function NavItem({
-  item,
-  placement,
-  selected,
-  onSelect
-}) {
-  const theme = useLoamTheme("adaptive");
-  const { styles } = useStyles(sheet, { placement, selected });
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      accessibilityRole: "tab",
-      accessibilityLabel: item.label,
-      accessibilityState: { selected },
-      onPress: onSelect ? () => onSelect(item.key) : void 0,
-      style: ({ pressed }) => [
-        styles.navItem,
-        pressed ? { backgroundColor: theme.state.pressed } : null
-      ],
-      children: [
-        /* @__PURE__ */ jsx(
-          Icon,
-          {
-            name: item.icon,
-            size: theme.icon.md,
-            color: selected ? theme.color.accentStrong : theme.color.text3
-          }
-        ),
-        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.navLabel, children: item.label })
-      ]
-    }
-  );
-}
-function AdaptiveShell({
-  nav,
-  children,
-  padContent = false,
-  formFactor,
-  style,
-  testID
-}) {
-  const info = useFormFactor(formFactor);
-  const { styles } = useStyles(sheet, { placement: info.nav });
-  const content = /* @__PURE__ */ jsx(
-    View,
-    {
-      style: [
-        styles.shellContent,
-        padContent ? {
-          paddingHorizontal: info.paddingHorizontal,
-          paddingVertical: info.paddingVertical
-        } : null
-      ],
-      children
-    }
-  );
-  return /* @__PURE__ */ jsx(View, { style: [styles.shell, style], testID, children: info.nav === "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 },
-  paneHeader: {
-    height: theme.layout.toolbarH,
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: theme.space.s4,
-    backgroundColor: theme.color.surface,
-    borderBottomWidth: theme.borderWidth.base,
-    borderBottomColor: theme.color.border
-  },
-  paneHeaderTitle: {
-    color: theme.color.text,
-    variants: {
-      emphasis: {
-        display: {
-          fontFamily: theme.font.display,
-          fontWeight: theme.font.displayWeight,
-          fontSize: theme.type.title3.fontSize,
-          lineHeight: theme.type.title3.lineHeight,
-          letterSpacing: theme.type.title3.letterSpacing
-        },
-        body: {
-          fontFamily: theme.font.sans,
-          fontWeight: theme.fontWeight.bold,
-          fontSize: theme.type.footnote.fontSize,
-          lineHeight: theme.type.footnote.lineHeight,
-          letterSpacing: theme.type.footnote.letterSpacing
-        }
-      }
-    }
-  },
-  nav: {
-    flexGrow: 0,
-    flexShrink: 0,
-    backgroundColor: theme.color.surface,
-    variants: {
-      placement: {
-        rail: {
-          width: theme.space[NAV_RAIL_WIDTH],
-          flexDirection: "column",
-          alignItems: "center",
-          gap: theme.space.s1,
-          paddingVertical: theme.space.s3,
-          borderEndWidth: theme.borderWidth.base,
-          borderEndColor: theme.color.border
-        },
-        bottom: {
-          height: theme.layout.tabbarH,
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-around",
-          borderTopWidth: theme.borderWidth.base,
-          borderTopColor: theme.color.border
-        }
-      },
-      selected: {}
-    }
-  },
-  navItem: {
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.space.s1,
-    // A rail/tab destination is a touch target before it is a label.
-    minHeight: theme.tapMin,
-    minWidth: theme.tapMin,
-    borderRadius: theme.radius.md,
-    variants: {
-      placement: {
-        rail: { alignSelf: "stretch", paddingVertical: theme.space.s2 },
-        bottom: { flex: 1, paddingVertical: theme.space.s1 }
-      },
-      selected: {
-        // The rail marks the selection with a state layer; the bottom bar
-        // relies on the accent glyph + label, as the reference draws it.
-        // The state layer collapses under high contrast: the accent edge is
-        // what marks the destination there (transparent otherwise).
-        true: {
-          backgroundColor: theme.state.selected,
-          borderWidth: theme.borderWidth.base,
-          borderColor: theme.edge.accent
-        },
-        false: { borderWidth: theme.borderWidth.base, borderColor: "transparent" }
-      }
-    }
-  },
-  navLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    // The reference draws a 9.5px rail label; `caption2` is the smallest role
-    // the type ramp permits and is the token-correct home for it.
-    fontSize: theme.type.caption2.fontSize,
-    lineHeight: theme.type.caption2.lineHeight,
-    letterSpacing: theme.type.caption2.letterSpacing,
-    textAlign: "center",
-    variants: {
-      selected: {
-        // `accentStrong` (the retuned emphasis accent) as text on the selected
-        // soft tint clears AA 4.5:1; the raw `accent` was 3.79:1 (WCAG fail).
-        true: { color: theme.color.accentStrong },
-        false: { color: theme.color.text3 }
-      },
-      placement: {}
-    }
-  },
-  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 };