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

package/dist/chunk-GNNJ4GCC.js

@@ -0,0 +1,471 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import { useWindowDimensions, View, Text, Pressable } from 'react-native';
+import { createStyleSheet, breakpoints, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var FORM_FACTORS = [
+  "phone",
+  "phoneLandscape",
+  "foldable",
+  "tablet",
+  "tabletLarge"
+];
+var FOLD_LIST_FLEX = 1;
+var FOLD_DETAIL_FLEX = 1.25;
+var TABLET_LIST_FLEX = 0.85;
+var TABLET_DETAIL_FLEX = 1.3;
+var FORM_FACTOR_SPECS = {
+  phone: {
+    formFactor: "phone",
+    token: "--bp-phone 430px",
+    label: "390 \xD7 844 \xB7 compact width",
+    panes: 1,
+    nav: "bottom",
+    drawerAllowed: false,
+    hinge: false,
+    listFlex: 1,
+    detailFlex: 0,
+    asideFlex: 0,
+    collapseLargeTitle: false,
+    halveVerticalPadding: false,
+    modal: "fullWidthSheet",
+    fab: "floating",
+    rule: "Single column. Detail is a push. Sheets go full-width and respect the bottom safe area."
+  },
+  phoneLandscape: {
+    formFactor: "phoneLandscape",
+    token: "--bp-phone-land 740px",
+    label: "844 \xD7 390 \xB7 compact height",
+    panes: 1,
+    nav: "rail",
+    drawerAllowed: false,
+    hinge: false,
+    listFlex: 1,
+    detailFlex: 0,
+    asideFlex: 0,
+    collapseLargeTitle: true,
+    halveVerticalPadding: true,
+    modal: "fullWidthSheet",
+    fab: "floating",
+    rule: "Landscape phone: collapse large titles to inline, move nav to a rail, halve vertical padding, never a bottom bar over the keyboard."
+  },
+  foldable: {
+    formFactor: "foldable",
+    token: "--bp-fold 585px",
+    label: "585 \xD7 800 \xB7 medium width \xB7 hinge gutter",
+    panes: 2,
+    nav: "rail",
+    drawerAllowed: false,
+    hinge: true,
+    listFlex: FOLD_LIST_FLEX,
+    detailFlex: FOLD_DETAIL_FLEX,
+    asideFlex: 0,
+    collapseLargeTitle: false,
+    halveVerticalPadding: false,
+    modal: "fullWidthSheet",
+    fab: "floating",
+    rule: "Treat the hinge as a hard gutter \u2014 no interactive element straddles it. Support half-opened (tabletop) by keeping controls in the bottom half."
+  },
+  tablet: {
+    formFactor: "tablet",
+    token: "--bp-tablet 768px",
+    label: "768 \xD7 1024 \xB7 expanded width",
+    panes: 2,
+    nav: "rail",
+    drawerAllowed: true,
+    hinge: false,
+    listFlex: TABLET_LIST_FLEX,
+    detailFlex: TABLET_DETAIL_FLEX,
+    asideFlex: 0,
+    collapseLargeTitle: false,
+    halveVerticalPadding: false,
+    modal: "centeredDialog",
+    fab: "toolbarButton",
+    rule: "List\u2013detail side by side, one selection always visible. Modals become centred dialogs; FAB becomes a toolbar button."
+  },
+  tabletLarge: {
+    formFactor: "tabletLarge",
+    token: "--bp-tablet-lg 1024px",
+    label: "1024 \xD7 768 \xB7 expanded width",
+    panes: 3,
+    nav: "rail",
+    drawerAllowed: true,
+    hinge: false,
+    listFlex: TABLET_LIST_FLEX,
+    detailFlex: TABLET_DETAIL_FLEX,
+    // The spec's Expanded row reads "Two–three" panes; the third pane mirrors
+    // the list's weight so the detail stays the widest column.
+    asideFlex: TABLET_LIST_FLEX,
+    collapseLargeTitle: false,
+    halveVerticalPadding: false,
+    modal: "centeredDialog",
+    fab: "toolbarButton",
+    rule: "List\u2013detail(\u2013aside) side by side, one selection always visible. Modals become centred dialogs; FAB becomes a toolbar button."
+  }
+};
+function classifyFormFactor({ width, height }) {
+  if (height < breakpoints.phone && (width >= breakpoints.phoneLand || width > height)) {
+    return "phoneLandscape";
+  }
+  if (width >= breakpoints.tabletLg) return "tabletLarge";
+  if (width >= breakpoints.tablet) return "tablet";
+  if (width >= breakpoints.fold) return "foldable";
+  return "phone";
+}
+function adaptivePadding(formFactor, screenPad) {
+  const { halveVerticalPadding } = FORM_FACTOR_SPECS[formFactor];
+  return {
+    paddingHorizontal: screenPad,
+    paddingVertical: halveVerticalPadding ? screenPad / 2 : screenPad
+  };
+}
+function useFormFactor(override) {
+  const theme = useLoamTheme();
+  const { width, height } = useWindowDimensions();
+  const formFactor = override ?? classifyFormFactor({ width, height });
+  const spec = FORM_FACTOR_SPECS[formFactor];
+  const padding = adaptivePadding(formFactor, theme.layout.screenPad);
+  return {
+    ...spec,
+    ...padding,
+    width,
+    height,
+    isLandscape: width > height,
+    isCompactHeight: height < breakpoints.phone,
+    reachZoneY: height * theme.layout.reachZone,
+    readingMeasure: theme.type.body.fontSize * 0.5 * theme.measure.base
+  };
+}
+var HINGE_GUTTER_WIDTH = 8;
+var NAV_RAIL_WIDTH = 64;
+function SplitView({
+  list,
+  detail,
+  detailVisible = false,
+  aside,
+  detailPlaceholder,
+  listTitle,
+  detailTitle,
+  capMeasure = true,
+  formFactor,
+  style,
+  testID
+}) {
+  const info = useFormFactor(formFactor);
+  const { styles } = useStyles(sheet);
+  const multiPane = info.panes > 1;
+  const showAside = info.panes > 2 && aside != null;
+  const listHidden = !multiPane && detailVisible && detail != null;
+  const detailHidden = !multiPane && !listHidden;
+  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(View, { style: styles.paneBody, 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(
+            View,
+            {
+              style: [
+                styles.paneBody,
+                capMeasure ? { maxWidth: info.readingMeasure, width: "100%" } : null
+              ],
+              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 }) });
+}
+function AdaptiveNav({
+  items,
+  activeKey,
+  onSelect,
+  kind,
+  formFactor,
+  accessibilityLabel = "Main",
+  testID
+}) {
+  const info = useFormFactor(formFactor);
+  const placement = kind ?? info.nav;
+  const { styles } = useStyles(sheet, { placement });
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "tablist",
+      accessibilityLabel,
+      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();
+  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.
+        true: { backgroundColor: theme.state.selected },
+        false: {}
+      }
+    }
+  },
+  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, FORM_FACTORS, FORM_FACTOR_SPECS, HINGE_GUTTER_WIDTH, NAV_RAIL_WIDTH, SplitView, adaptivePadding, classifyFormFactor, useFormFactor };

package/dist/chunk-GNZ56EUI.js

@@ -0,0 +1 @@
+