@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-GNNJ4GCC.js

@@ -1,471 +0,0 @@
-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-HET4LLMX.js

@@ -1,129 +0,0 @@
-import { CardBrandMark, OrDivider } from './chunk-PUPM2YGF.js';
-import { Badge } from './chunk-SBMNWWBV.js';
-import { Skeleton } from './chunk-RIBDXGUG.js';
-import { Button } from './chunk-3ARE4TES.js';
-import 'react';
-import { View, Text } from 'react-native';
-import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
-import { mask, methodsFor } from '@btndprojects/loam-pay';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-function SavedCardChip({
-  brand,
-  last4,
-  expiry,
-  isDefault = false,
-  onUseAnother,
-  onManage,
-  useAnotherLabel = "Use a different card",
-  manageLabel = "Manage cards",
-  style,
-  testID
-}) {
-  const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.chip, style], children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.chipFacts, children: [
-      /* @__PURE__ */ jsx(CardBrandMark, { brand, size: "md" }),
-      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.chipMask, children: mask(brand, last4) }),
-      expiry ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.chipExpiry, children: `Expires ${expiry}` }) : null,
-      isDefault ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "neutral", size: "sm", children: "default" }) : null
-    ] }),
-    /* @__PURE__ */ jsxs(View, { style: styles.chipActions, children: [
-      onManage ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onManage, children: manageLabel }) : null,
-      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: onUseAnother, children: useAnotherLabel })
-    ] })
-  ] });
-}
-function ExpressPayRow({
-  state,
-  platform,
-  label,
-  secondary,
-  dividerLabel = "or pay with card",
-  resolvingLabel = "Checking for a wallet on this device",
-  onExpressPay,
-  onInstalments,
-  style,
-  testID
-}) {
-  const { styles, theme } = useStyles(sheet);
-  const express = methodsFor({ platform }).find((m) => m.kind === "express");
-  const buttonLabel = label ?? (express ? `Pay with ${express.label.toLowerCase()}` : "Express pay");
-  if (state === "unavailable") return null;
-  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.express, style], children: [
-    state === "resolving" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Skeleton,
-        {
-          testID: "express-skeleton",
-          variant: "rect",
-          height: theme.ctl.lg,
-          radius: "md",
-          accessibilityLabel: resolvingLabel
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        View,
-        {
-          role: "status",
-          accessibilityLiveRegion: "polite",
-          style: styles.srOnly,
-          ...{ "aria-live": "polite" },
-          children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: resolvingLabel })
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxs(View, { style: styles.expressButtons, children: [
-      /* @__PURE__ */ jsx(Button, { size: "lg", fullWidth: true, leadingIcon: "lock", onPress: onExpressPay, children: buttonLabel }),
-      onInstalments && secondary ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", fullWidth: true, onPress: onInstalments, children: secondary }) : null
-    ] }),
-    /* @__PURE__ */ jsx(OrDivider, { label: dividerLabel })
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  chip: {
-    gap: theme.space.s3,
-    padding: theme.space.s3,
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.color.surface,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.border
-  },
-  chipFacts: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "center",
-    gap: theme.space.s2
-  },
-  chipMask: {
-    fontFamily: theme.font.mono,
-    fontVariant: ["tabular-nums"],
-    fontSize: theme.fontSize[13],
-    color: theme.color.text
-  },
-  chipExpiry: {
-    fontFamily: theme.font.sans,
-    fontVariant: ["tabular-nums"],
-    fontSize: theme.fontSize[12],
-    color: theme.color.text3
-  },
-  chipActions: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "center",
-    gap: theme.space.s2
-  },
-  express: { gap: theme.space.s4 },
-  expressButtons: { gap: theme.space.s2 },
-  // A 1px clipped box, the same shape `board/` uses: present for assistive tech,
-  // invisible on screen, and never a `display: none` (which is not announced).
-  srOnly: {
-    position: "absolute",
-    width: theme.space[1],
-    height: theme.space[1],
-    overflow: "hidden"
-  },
-  // Badge hugs with `flex-start`, which pins it to the top of this centred row.
-  rowBadge: { alignSelf: "center" }
-}));
-
-export { ExpressPayRow, SavedCardChip };