@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/chunk-AEB7KCHQ.js

@@ -0,0 +1,287 @@
+import { NAMED_ROLE } from './chunk-W23G6JLF.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var COMMON_GLYPHS = {
+  enter: "\u21B5",
+  return: "\u21B5",
+  esc: "Esc",
+  escape: "Esc",
+  tab: "\u21E5",
+  backspace: "\u232B",
+  delete: "Del",
+  del: "Del",
+  space: "\u2423",
+  up: "\u2191",
+  down: "\u2193",
+  left: "\u2190",
+  right: "\u2192",
+  arrowup: "\u2191",
+  arrowdown: "\u2193",
+  arrowleft: "\u2190",
+  arrowright: "\u2192",
+  pageup: "PgUp",
+  pagedown: "PgDn",
+  home: "Home",
+  end: "End",
+  capslock: "\u21EA",
+  win: "Win"
+};
+var DEFAULT_LABELS = {
+  keys: {
+    command: "Command",
+    control: "Control",
+    option: "Option",
+    alt: "Alt",
+    shift: "Shift",
+    enter: "Enter",
+    return: "Return",
+    escape: "Escape",
+    tab: "Tab",
+    backspace: "Backspace",
+    delete: "Delete",
+    space: "Space",
+    up: "Up",
+    down: "Down",
+    left: "Left",
+    right: "Right",
+    pageUp: "Page Up",
+    pageDown: "Page Down",
+    home: "Home",
+    end: "End",
+    capsLock: "Caps Lock",
+    windows: "Windows"
+  },
+  caps: {
+    command: "Cmd",
+    meta: "Meta",
+    super: "Super",
+    shift: "Shift",
+    control: "Ctrl",
+    alt: "Alt",
+    escape: "Esc",
+    delete: "Del",
+    pageUp: "PgUp",
+    pageDown: "PgDn",
+    home: "Home",
+    end: "End",
+    windows: "Win"
+  }
+};
+var KEY_ID = {
+  cmd: "command",
+  command: "command",
+  meta: "command",
+  super: "command",
+  shift: "shift",
+  ctrl: "control",
+  control: "control",
+  alt: "alt",
+  opt: "option",
+  option: "option",
+  enter: "enter",
+  return: "return",
+  esc: "escape",
+  escape: "escape",
+  tab: "tab",
+  backspace: "backspace",
+  delete: "delete",
+  del: "delete",
+  space: "space",
+  up: "up",
+  down: "down",
+  left: "left",
+  right: "right",
+  arrowup: "up",
+  arrowdown: "down",
+  arrowleft: "left",
+  arrowright: "right",
+  pageup: "pageUp",
+  pagedown: "pageDown",
+  home: "home",
+  end: "end",
+  capslock: "capsLock",
+  win: "windows"
+};
+var WORD_CAP_ID = {
+  esc: "escape",
+  escape: "escape",
+  delete: "delete",
+  del: "delete",
+  pageup: "pageUp",
+  pagedown: "pageDown",
+  home: "home",
+  end: "end",
+  win: "windows"
+};
+var TEXT_MODIFIER_ID = {
+  cmd: "command",
+  command: "command",
+  meta: "meta",
+  super: "super",
+  shift: "shift",
+  ctrl: "control",
+  control: "control",
+  alt: "alt",
+  opt: "alt",
+  option: "alt"
+};
+var APPLE_MODIFIERS = {
+  cmd: "\u2318",
+  command: "\u2318",
+  meta: "\u2318",
+  super: "\u2318",
+  shift: "\u21E7",
+  ctrl: "\u2303",
+  control: "\u2303",
+  alt: "\u2325",
+  opt: "\u2325",
+  option: "\u2325"
+};
+var TEXT_MODIFIERS = {
+  cmd: "Cmd",
+  command: "Cmd",
+  meta: "Meta",
+  super: "Super",
+  shift: "Shift",
+  ctrl: "Ctrl",
+  control: "Ctrl",
+  alt: "Alt",
+  opt: "Alt",
+  option: "Alt"
+};
+var GLYPH_ICON = {
+  "\u2318": "key-command",
+  "\u21E7": "key-shift",
+  "\u2325": "key-option",
+  "\u2303": "key-control",
+  "\u21A9": "key-enter",
+  "\u21B5": "key-enter",
+  "\u21E5": "key-tab",
+  "\u232B": "key-backspace",
+  "\u2423": "key-space",
+  "\u21EA": "key-capslock",
+  "\u2191": "arrow-up",
+  "\u2193": "arrow-down",
+  "\u2190": "arrow-left",
+  "\u2192": "arrow-right"
+};
+var ICON_SIZE = { sm: 12, md: 13 };
+function resolveKey(key, symbols, apple, labels) {
+  if (!symbols) return key;
+  const k = key.trim().toLowerCase();
+  if (apple) {
+    const glyph = APPLE_MODIFIERS[k];
+    if (glyph) return glyph;
+  } else {
+    const modifierId = TEXT_MODIFIER_ID[k];
+    if (modifierId) return labels.caps[modifierId] ?? TEXT_MODIFIERS[k] ?? key;
+  }
+  const wordId = WORD_CAP_ID[k];
+  if (wordId) return labels.caps[wordId] ?? COMMON_GLYPHS[k] ?? key;
+  return COMMON_GLYPHS[k] ?? key;
+}
+function spokenKey(key, apple, labels) {
+  const k = key.trim().toLowerCase();
+  let id = KEY_ID[k];
+  if (id === "option" || id === "alt") id = apple ? "option" : "alt";
+  const word = id ? labels.keys[id] : void 0;
+  if (word) return word;
+  return key.length === 1 ? key.toUpperCase() : key;
+}
+function spokenLabel(parts, apple, labels) {
+  return parts.map((k) => spokenKey(k, apple, labels)).join(" ");
+}
+function Kbd({
+  keys,
+  symbols = true,
+  size = "md",
+  // `motion` is accepted for API parity but intentionally unused — Kbd has no
+  // animation. Destructured so it never lands on the underlying View.
+  motion: _motion = "full",
+  children,
+  accessibilityLabel,
+  labels: labelsProp
+}) {
+  const labels = useLabels("kbd", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet, { size });
+  const theme = useLoamTheme("kbd");
+  const apple = theme.platform === "iOS";
+  const face = (label2) => {
+    const icon = GLYPH_ICON[label2];
+    return icon ? /* @__PURE__ */ jsx(View, { testID: `kbd-glyph-${label2}`, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: ICON_SIZE[size ?? "md"], color: theme.color.text2, strokeWidth: 2 }) }) : /* @__PURE__ */ jsx(Text, { style: styles.label, children: label2 });
+  };
+  if (keys === void 0) {
+    const label2 = accessibilityLabel ?? (typeof children === "string" ? spokenLabel([children], apple, labels) : void 0);
+    return /* @__PURE__ */ jsx(View, { accessible: true, accessibilityRole: NAMED_ROLE, accessibilityLabel: label2, style: styles.cap, children: typeof children === "string" ? face(children) : children });
+  }
+  const list = Array.isArray(keys) ? keys : String(keys).split("+");
+  const parts = list.map((k) => k.trim()).filter((k) => k.length > 0);
+  const label = accessibilityLabel ?? spokenLabel(parts, apple, labels);
+  return /* @__PURE__ */ jsx(View, { accessible: true, accessibilityRole: NAMED_ROLE, accessibilityLabel: label, style: styles.group, children: parts.map((key, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    i > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.plus, children: "+" }) : null,
+    /* @__PURE__ */ jsx(View, { style: styles.cap, children: face(resolveKey(key, symbols, apple, labels)) })
+  ] }, `${key}-${i}`)) });
+}
+var sheet = createStyleSheet((theme) => ({
+  // The row of keycaps. `space.s1` gap matches the web `gap-1` between caps.
+  group: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  // A single keycap. No native `--kbd-bg` token exists, so — as the native
+  // contract prescribes — the subtle surface falls back to `surface2` + a
+  // hairline border. The tiny `minWidth`/`minHeight` (20 / 24) mirror the web
+  // `kbd`'s raw-px `h-[20px]`/`min-w-[20px]` keycap box one-to-one.
+  cap: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    borderRadius: theme.radius.sm,
+    variants: {
+      size: {
+        sm: {
+          minWidth: theme.space[20],
+          minHeight: theme.space[20],
+          paddingHorizontal: theme.space.s1
+        },
+        md: {
+          minWidth: theme.space[24],
+          minHeight: theme.space[24],
+          paddingHorizontal: theme.space.s2
+        }
+      }
+    }
+  },
+  // Monospace, tabular figures so combos line up. `text2` matches web `text-ink-2`.
+  label: {
+    fontFamily: theme.font.mono,
+    color: theme.color.text2,
+    textAlign: "center",
+    fontVariant: ["tabular-nums"],
+    variants: {
+      size: {
+        sm: {
+          fontSize: theme.type.caption2.fontSize,
+          lineHeight: theme.type.caption2.lineHeight
+        },
+        md: {
+          fontSize: theme.type.caption1.fontSize,
+          lineHeight: theme.type.caption1.lineHeight
+        }
+      }
+    }
+  },
+  // The `+` between keys — muted (`text3`, web `text-ink-3`), decorative only.
+  plus: {
+    fontFamily: theme.font.mono,
+    color: theme.color.text3,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight
+  }
+}));
+
+export { Kbd };

package/dist/chunk-APCWFOZW.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/labels.tsx
+var LabelsContext = React.createContext({ labels: {}, locale: void 0 });
+function LoamLabelsProvider({ labels, locale, children }) {
+  const outer = React.useContext(LabelsContext);
+  const value = React.useMemo(() => {
+    const merged = { ...outer.labels };
+    for (const [key, own] of Object.entries(labels ?? {})) {
+      merged[key] = { ...merged[key], ...own };
+    }
+    return { labels: merged, locale: locale ?? outer.locale };
+  }, [outer, labels, locale]);
+  return /* @__PURE__ */ jsx(LabelsContext.Provider, { value, children });
+}
+function useLabels(key, defaults, own) {
+  const fromContext = React.useContext(LabelsContext).labels[key];
+  return React.useMemo(
+    () => ({ ...defaults, ...fromContext, ...own }),
+    [defaults, fromContext, own]
+  );
+}
+function useLoamLocale() {
+  return React.useContext(LabelsContext).locale;
+}
+
+export { LoamLabelsProvider, useLabels, useLoamLocale };

package/dist/chunk-AWKQIE5I.js

@@ -0,0 +1,139 @@
+import { useWindowDimensions } from 'react-native';
+import { breakpoints, useLoamTheme } from '@btndprojects/loam-theme-native';
+
+// src/adaptive/form-factor.ts
+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("adaptive");
+  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
+  };
+}
+
+export { FORM_FACTORS, FORM_FACTOR_SPECS, adaptivePadding, classifyFormFactor, useFormFactor };

package/dist/{chunk-VCDBXW5H.js → chunk-B7N4ASYE.js}

@@ -1,13 +1,20 @@
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useResolvedMotion, useReducedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, ScrollView, Animated, Easing } from 'react-native';
+import { Platform, View, ScrollView, Animated, Easing } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  carousel: "Carousel",
+  nextSlide: "Next slide",
+  previousSlide: "Previous slide",
+  slide: (n, count) => `Slide ${n} of ${count}`
+};
 var DOT_SIZE = 7;
 var DOT_ACTIVE_WIDTH = 22;
 function Dot({ active, motion }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("carousel");
   const { styles } = useStyles(sheet);
   const width = React.useRef(
     new Animated.Value(theme.space[active ? DOT_ACTIVE_WIDTH : DOT_SIZE])
@@ -59,6 +66,7 @@ function Dot({ active, motion }) {
     }
   );
 }
+var webSnapStop = Platform.OS === "web" ? { scrollSnapStop: "always" } : null;
 function Carousel({
   items,
   renderItem,
@@ -69,11 +77,15 @@ function Carousel({
   autoPlay = false,
   interval = 4e3,
   loop = false,
-  accessibilityLabel = "Carousel",
-  motion = "full"
+  accessibilityLabel,
+  motion = "full",
+  labels: labelsProp
 }) {
+  const labels = useLabels("carousel", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
-  const resolvedMotion = useResolvedMotion(motion);
+  const resolvedMotion = useResolvedMotion(motion, "carousel");
+  const osReduced = useReducedMotion();
+  const [userTookOver, setUserTookOver] = React.useState(false);
   const slides = items && renderItem ? items.map((item, index) => renderItem(item, index)) : React.Children.toArray(children);
   const count = slides.length;
   const isControlled = activeIndex !== void 0;
@@ -101,12 +113,26 @@ function Carousel({
     if (width <= 0) return;
     goTo(Math.round(e.nativeEvent.contentOffset.x / width));
   };
+  const settle = React.useRef(null);
+  React.useEffect(
+    () => () => {
+      if (settle.current) clearTimeout(settle.current);
+    },
+    []
+  );
+  const onScroll = Platform.OS === "web" ? (e) => {
+    const x = e.nativeEvent.contentOffset.x;
+    if (settle.current) clearTimeout(settle.current);
+    settle.current = setTimeout(() => {
+      if (width > 0) goTo(Math.round(x / width));
+    }, 120);
+  } : void 0;
   React.useEffect(() => {
     if (width <= 0) return;
     scrollRef.current?.scrollTo({ x: active * width, animated: resolvedMotion === "full" });
   }, [active, width, resolvedMotion]);
   React.useEffect(() => {
-    if (!autoPlay || count <= 1) return;
+    if (!autoPlay || count <= 1 || userTookOver || osReduced) return;
     const id = setInterval(() => {
       const next = active + 1;
       if (next >= count) {
@@ -116,43 +142,61 @@ function Carousel({
       }
     }, interval);
     return () => clearInterval(id);
-  }, [autoPlay, interval, loop, active, count, goTo]);
-  return /* @__PURE__ */ jsxs(View, { style: styles.container, role: "group", accessibilityLabel, children: [
-    /* @__PURE__ */ jsx(
-      ScrollView,
-      {
-        ref: scrollRef,
-        horizontal: true,
-        pagingEnabled: true,
-        focusable: true,
-        showsHorizontalScrollIndicator: false,
-        onLayout,
-        onMomentumScrollEnd,
-        scrollEventThrottle: 16,
-        style: styles.scroll,
-        children: slides.map((slide, index) => /* @__PURE__ */ jsx(
+  }, [autoPlay, interval, loop, active, count, goTo, userTookOver, osReduced]);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: styles.container,
+      role: "group",
+      accessibilityLabel: accessibilityLabel ?? labels.carousel,
+      accessibilityActions: count > 1 ? [
+        { name: "increment", label: labels.nextSlide },
+        { name: "decrement", label: labels.previousSlide }
+      ] : void 0,
+      onAccessibilityAction: (e) => {
+        if (e.nativeEvent.actionName === "increment") goTo(Math.min(count - 1, active + 1));
+        else if (e.nativeEvent.actionName === "decrement") goTo(Math.max(0, active - 1));
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            ref: scrollRef,
+            horizontal: true,
+            pagingEnabled: true,
+            focusable: true,
+            showsHorizontalScrollIndicator: false,
+            onLayout,
+            onMomentumScrollEnd,
+            onScrollBeginDrag: () => setUserTookOver(true),
+            onScroll,
+            scrollEventThrottle: 16,
+            style: styles.scroll,
+            children: slides.map((slide, index) => /* @__PURE__ */ jsx(
+              View,
+              {
+                style: [styles.page, width > 0 ? { width } : styles.pageFallback, webSnapStop],
+                accessible: true,
+                role: "group",
+                accessibilityLabel: labels.slide(index + 1, count),
+                children: slide
+              },
+              index
+            ))
+          }
+        ),
+        showDots && count > 1 ? /* @__PURE__ */ jsx(
           View,
           {
-            style: [styles.page, width > 0 ? { width } : styles.pageFallback],
-            accessible: true,
-            role: "group",
-            accessibilityLabel: `Slide ${index + 1} of ${count}`,
-            children: slide
-          },
-          index
-        ))
-      }
-    ),
-    showDots && count > 1 ? /* @__PURE__ */ jsx(
-      View,
-      {
-        style: styles.dots,
-        accessible: false,
-        importantForAccessibility: "no-hide-descendants",
-        children: slides.map((_, index) => /* @__PURE__ */ jsx(Dot, { active: index === active, motion: resolvedMotion }, index))
-      }
-    ) : null
-  ] });
+            style: styles.dots,
+            accessible: false,
+            importantForAccessibility: "no-hide-descendants",
+            children: slides.map((_, index) => /* @__PURE__ */ jsx(Dot, { active: index === active, motion: resolvedMotion }, index))
+          }
+        ) : null
+      ]
+    }
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   container: {