@btndprojects/loam-ui-native 0.1.1 → 0.3.1

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

@@ -1,12 +1,20 @@
-import { Input } from './chunk-ITTYJZWX.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useInputPlatform, Input } from './chunk-KXLDK6HB.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { Animated, View, Pressable, Text } from 'react-native';
+import { Animated, View, Pressable, Text, ActivityIndicator } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-function valueFontSize(theme, size) {
-  return size === "md" || size === "lg" ? theme.fontSize[16] : theme.fontSize[14];
+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, os) {
+  if (size === "lg") return theme.fontSize[os === "ios" ? 17 : 16];
+  return size === "md" ? theme.fontSize[16] : theme.fontSize[14];
 }
 function InlineEdit({
   value,
@@ -14,17 +22,27 @@ function InlineEdit({
   placeholder,
   label,
   as = "text",
-  size = "md",
+  size = "lg",
   disabled = false,
   multiline = false,
   optimistic = true,
-  motion = "full"
+  failureMessage,
+  motion = "full",
+  readOnly = false,
+  loading = false,
+  defaultEditing = false,
+  surface,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("inlineEdit", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("inline-edit");
+  const os = useInputPlatform();
   const { styles } = useStyles(sheet, { size, disabled, multiline });
-  const [editing, setEditing] = React.useState(false);
+  const [editing, setEditing] = React.useState(defaultEditing);
+  const focusOnEdit = React.useRef(!defaultEditing);
   const [draft, setDraft] = React.useState(value);
   const [optimisticValue, setOptimisticValue] = React.useState(null);
+  const [failed, setFailed] = React.useState(false);
   React.useEffect(() => {
     setOptimisticValue(null);
   }, [value]);
@@ -38,14 +56,24 @@ function InlineEdit({
   displayRef.current = display;
   const skipBlurRef = React.useRef(false);
   const enterEdit = () => {
-    if (disabled) return;
+    if (disabled || readOnly || loading) return;
+    setFailed(false);
     setDraft(display);
+    focusOnEdit.current = true;
     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,59 +116,74 @@ 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: focusOnEdit.current,
+            surface,
+            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}`,
-      accessibilityState: { disabled },
+      accessibilityLabel: isPlaceholder ? label : labels.readValue(label, display),
+      accessibilityState: { disabled, busy: loading },
+      "aria-busy": loading || void 0,
       disabled,
       onPress: enterEdit,
       style: ({ pressed }) => [
         styles.read,
-        !disabled && pressed && { backgroundColor: theme.state.pressed }
+        !disabled && !readOnly && !loading && pressed && { backgroundColor: theme.state.pressed }
       ],
       children: [
         /* @__PURE__ */ jsx(
@@ -149,19 +192,26 @@ function InlineEdit({
             numberOfLines: multiline ? void 0 : 1,
             style: [
               styles.value,
-              { fontSize: valueFontSize(theme, size), fontWeight },
+              { fontSize: valueFontSize(theme, size, os), fontWeight },
               isPlaceholder && { color: theme.color.text3 },
               disabled && { color: theme.color.text3 }
             ],
             children: isPlaceholder ? placeholder ?? "" : display
           }
         ),
-        !disabled ? /* @__PURE__ */ jsx(Icon, { name: "edit", size: iconSize, color: theme.color.text3 }) : null
+        loading ? /* @__PURE__ */ jsx(ActivityIndicator, { "aria-hidden": true, size: "small", color: theme.color.text3 }) : !disabled && !readOnly ? /* @__PURE__ */ jsx(Icon, { name: "edit", size: iconSize, color: theme.color.text3 }) : null
       ]
     }
   );
 }
 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.dangerOnSoft
+  },
   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-I2KLQ2HA.js

@@ -0,0 +1,19 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+
+export { __export, __reExport };