@btndprojects/loam-ui-native 0.1.1 → 0.2.1

package/dist/{chunk-3ENTMPQY.js → chunk-QP3KMOVF.js}

@@ -1,10 +1,17 @@
-import { Input } from './chunk-ITTYJZWX.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Input } from './chunk-7BUIKDD6.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
 import { Animated, View, Pressable, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  save: "Save",
+  cancel: "Cancel",
+  failure: "Couldn't save that change. Your edit is still here, so you can try again.",
+  readValue: (label, value) => `${label}, ${value}`
+};
 function valueFontSize(theme, size) {
   return size === "md" || size === "lg" ? theme.fontSize[16] : theme.fontSize[14];
 }
@@ -18,13 +25,17 @@ function InlineEdit({
   disabled = false,
   multiline = false,
   optimistic = true,
-  motion = "full"
+  failureMessage,
+  motion = "full",
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("inlineEdit", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("inline-edit");
   const { styles } = useStyles(sheet, { size, disabled, multiline });
   const [editing, setEditing] = React.useState(false);
   const [draft, setDraft] = React.useState(value);
   const [optimisticValue, setOptimisticValue] = React.useState(null);
+  const [failed, setFailed] = React.useState(false);
   React.useEffect(() => {
     setOptimisticValue(null);
   }, [value]);
@@ -39,13 +50,22 @@ function InlineEdit({
   const skipBlurRef = React.useRef(false);
   const enterEdit = () => {
     if (disabled) return;
+    setFailed(false);
     setDraft(display);
     setEditing(true);
   };
   const finalize = (next) => {
     if (next === displayRef.current) return;
     if (optimistic) setOptimisticValue(next);
-    onChange(next);
+    const result = onChange(next);
+    if (result && typeof result.then === "function") {
+      result.then(void 0, () => {
+        setOptimisticValue(null);
+        setDraft(next);
+        setFailed(true);
+        setEditing(true);
+      });
+    }
   };
   const save = () => {
     skipBlurRef.current = true;
@@ -88,53 +108,66 @@ function InlineEdit({
     }).start();
   }, [editing, motion, actionOpacity, theme.reduceMotion, theme.motion.enter.duration]);
   if (editing) {
-    return /* @__PURE__ */ jsxs(View, { style: styles.editRow, children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          autoFocus: true,
-          value: draft,
-          onChangeText: setDraft,
-          placeholder,
-          size,
-          multiline,
-          accessibilityLabel: label,
-          onSubmitEditing: onSubmit,
-          onBlur,
-          onFocus: (e) => e.currentTarget.setNativeProps?.({ selection: { start: 0, end: draft.length } }),
-          containerStyle: styles.field,
-          style: { fontWeight }
-        }
-      ),
-      /* @__PURE__ */ jsxs(Animated.View, { style: [styles.actions, { opacity: actionOpacity }], children: [
+    return /* @__PURE__ */ jsxs(View, { style: styles.editColumn, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.editRow, children: [
         /* @__PURE__ */ jsx(
-          Pressable,
+          Input,
           {
-            accessibilityRole: "button",
-            accessibilityLabel: "Save",
-            onPress: save,
-            style: ({ pressed }) => [styles.action, pressed && { backgroundColor: theme.state.pressed }],
-            children: /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize, color: theme.color.good })
+            autoFocus: true,
+            value: draft,
+            onChangeText: (t) => {
+              setDraft(t);
+              setFailed(false);
+            },
+            error: failed,
+            placeholder,
+            size,
+            multiline,
+            accessibilityLabel: label,
+            onSubmitEditing: onSubmit,
+            onBlur,
+            onFocus: (e) => e.currentTarget.setNativeProps?.({ selection: { start: 0, end: draft.length } }),
+            containerStyle: styles.field,
+            style: { fontWeight }
           }
         ),
-        /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: "Cancel",
-            onPress: cancel,
-            style: ({ pressed }) => [styles.action, pressed && { backgroundColor: theme.state.pressed }],
-            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: theme.color.text2 })
-          }
-        )
-      ] })
+        /* @__PURE__ */ jsxs(Animated.View, { style: [styles.actions, { opacity: actionOpacity }], children: [
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.save,
+              onPress: save,
+              style: ({ pressed }) => [
+                styles.action,
+                pressed && { backgroundColor: theme.state.pressed }
+              ],
+              children: /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize, color: theme.color.good })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.cancel,
+              onPress: cancel,
+              style: ({ pressed }) => [
+                styles.action,
+                pressed && { backgroundColor: theme.state.pressed }
+              ],
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: theme.color.text2 })
+            }
+          )
+        ] })
+      ] }),
+      failed ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: styles.failure, children: failureMessage ?? labels.failure }) : null
     ] });
   }
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "button",
-      accessibilityLabel: isPlaceholder ? label : `${label}, ${display}`,
+      accessibilityLabel: isPlaceholder ? label : labels.readValue(label, display),
       accessibilityState: { disabled },
       disabled,
       onPress: enterEdit,
@@ -162,6 +195,13 @@ function InlineEdit({
   );
 }
 var sheet = createStyleSheet((theme) => ({
+  editColumn: { gap: theme.space.s1 },
+  failure: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.danger
+  },
   editRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
   field: { flex: 1 },
   actions: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },

package/dist/{chunk-GNNJ4GCC.js → chunk-QPWDDJJ4.js}

@@ -1,145 +1,15 @@
-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 { 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 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({
+function SplitPane({
   list,
   detail,
   detailVisible = false,
@@ -150,14 +20,46 @@ function SplitView({
   capMeasure = true,
   formFactor,
   style,
-  testID
+  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,
@@ -172,7 +74,7 @@ function SplitView({
         ],
         children: [
           listTitle ? /* @__PURE__ */ jsx(PaneHeader, { title: listTitle, emphasis: "display" }) : null,
-          /* @__PURE__ */ jsx(View, { style: styles.paneBody, children: list })
+          /* @__PURE__ */ jsx(Animated.View, { style: [styles.paneBody, multiPane ? null : swapStyle], children: list })
         ]
       }
     ),
@@ -203,11 +105,12 @@ function SplitView({
         children: [
           detailTitle ? /* @__PURE__ */ jsx(PaneHeader, { title: detailTitle, emphasis: "body" }) : null,
           /* @__PURE__ */ jsx(
-            View,
+            Animated.View,
             {
               style: [
                 styles.paneBody,
-                capMeasure ? { maxWidth: info.readingMeasure, width: "100%" } : null
+                capMeasure ? { maxWidth: info.readingMeasure, width: "100%" } : null,
+                swapStyle
               ],
               children: detailVisible || !multiPane ? detail : detailPlaceholder
             }
@@ -233,15 +136,20 @@ function PaneHeader({
   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 = "Main",
+  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 });
@@ -249,7 +157,7 @@ function AdaptiveNav({
     View,
     {
       accessibilityRole: "tablist",
-      accessibilityLabel,
+      accessibilityLabel: accessibilityLabel ?? labels.main,
       style: styles.nav,
       testID,
       children: items.map((item) => /* @__PURE__ */ jsx(
@@ -271,7 +179,7 @@ function NavItem({
   selected,
   onSelect
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("adaptive");
   const { styles } = useStyles(sheet, { placement, selected });
   return /* @__PURE__ */ jsxs(
     Pressable,
@@ -427,8 +335,14 @@ var sheet = createStyleSheet((theme) => ({
       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: {}
+        // 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" }
       }
     }
   },
@@ -468,4 +382,4 @@ var sheet = createStyleSheet((theme) => ({
   }
 }));
 
-export { AdaptiveNav, AdaptiveShell, FORM_FACTORS, FORM_FACTOR_SPECS, HINGE_GUTTER_WIDTH, NAV_RAIL_WIDTH, SplitView, adaptivePadding, classifyFormFactor, useFormFactor };
+export { AdaptiveNav, AdaptiveShell, HINGE_GUTTER_WIDTH, NAV_RAIL_WIDTH, SplitPane };