achery-ui 0.12.0 → 0.13.1

package/dist/native/index.cjs

@@ -5639,6 +5639,7 @@ var BottomSheet = ({
   style
 }) => {
   const { tokens: tokens$1 } = useTheme();
+  const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   const slideAnim = react.useRef(new reactNative.Animated.Value(0)).current;
   const scrimAnim = react.useRef(new reactNative.Animated.Value(0)).current;
   react.useEffect(() => {
@@ -5715,6 +5716,9 @@ var BottomSheet = ({
                 borderTopColor: tokens$1.border,
                 // Square corners — spec is explicit about this
                 borderRadius: 0,
+                // Clear the home indicator so the last row is never cut off / hard
+                // to tap on devices with a bottom safe area.
+                paddingBottom: Math.max(insets.bottom, tokens.spacing.sp4),
                 transform: [{ translateY }]
               },
               style
@@ -5993,6 +5997,133 @@ var MoreButton = ({ active, onPress, tokens: tokens$1 }) => /* @__PURE__ */ jsxR
     ]
   }
 );
+var cornerStyle = (corner, inset) => {
+  if (corner === "none") return {};
+  const [v, h] = corner.split("-");
+  return { position: "absolute", [v]: inset, [h]: inset };
+};
+var Marginalia = ({
+  glyph = "fern",
+  size = 120,
+  opacity = 0.4,
+  accent = false,
+  corner = "bottom-right",
+  inset = 16,
+  style
+}) => {
+  const { tokens } = useTheme();
+  const color = accent ? tokens.accent : tokens.fgMute;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      pointerEvents: "none",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: [cornerStyle(corner, inset), { opacity }, style],
+      children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: glyph, size, color })
+    }
+  );
+};
+var defaultNormalize = (t) => t.trim().toLowerCase().replace(/\s+/g, " ");
+var TagInput = ({
+  value,
+  onChange,
+  suggestions = [],
+  placeholder,
+  onLeather = false,
+  normalize = defaultNormalize,
+  disabled = false,
+  style
+}) => {
+  const { tokens } = useTheme();
+  const [text, setText] = react.useState("");
+  const chipBorder = onLeather ? tokens.goldDeep : tokens.border;
+  const chipText = onLeather ? tokens.materialLeatherFg : tokens.fg;
+  const placeholderColor = onLeather ? `${tokens.materialLeatherFg}80` : tokens.fgMute;
+  const add = (raw) => {
+    const t = normalize(raw);
+    if (t && !value.includes(t)) onChange([...value, t]);
+    setText("");
+  };
+  const remove = (t) => onChange(value.filter((x) => x !== t));
+  const handleChange = (t) => {
+    if (t.endsWith(",") || t.endsWith(" ")) {
+      const token = t.slice(0, -1);
+      if (token.trim()) add(token);
+      else setText("");
+      return;
+    }
+    setText(t);
+  };
+  const matches = text.trim() ? suggestions.filter((s) => s.includes(normalize(text)) && !value.includes(s)).slice(0, 6) : [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.field, { borderColor: chipBorder }], children: [
+      value.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
+        reactNative.Pressable,
+        {
+          onPress: () => !disabled && remove(tag),
+          style: [styles.chip, { borderColor: chipBorder }],
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "caption", style: { color: chipText }, children: tag }),
+            /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: "cross", size: 10, color: chipText })
+          ]
+        },
+        tag
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.TextInput,
+        {
+          value: text,
+          editable: !disabled,
+          onChangeText: handleChange,
+          onSubmitEditing: () => text.trim() && add(text),
+          onKeyPress: (e) => {
+            if (e.nativeEvent.key === "Backspace" && !text && value.length) {
+              const last = value[value.length - 1];
+              if (last) remove(last);
+            }
+          },
+          placeholder: value.length === 0 ? placeholder : void 0,
+          placeholderTextColor: placeholderColor,
+          autoCapitalize: "none",
+          autoCorrect: false,
+          style: [styles.input, { color: chipText }]
+        }
+      )
+    ] }),
+    matches.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.suggestions, children: matches.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        onPress: () => add(s),
+        style: [styles.suggestion, { borderColor: tokens.borderMute }],
+        children: /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "caption", style: { color: tokens.fg2 }, children: s })
+      },
+      s
+    )) })
+  ] });
+};
+var styles = reactNative.StyleSheet.create({
+  field: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 6,
+    borderWidth: 1.5,
+    padding: 8,
+    minHeight: 44
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    borderWidth: 1,
+    paddingHorizontal: 8,
+    paddingVertical: 4
+  },
+  input: { flex: 1, minWidth: 80, paddingVertical: 4, fontSize: 14 },
+  suggestions: { flexDirection: "row", flexWrap: "wrap", gap: 6, marginTop: 6 },
+  suggestion: { borderWidth: 1, paddingHorizontal: 8, paddingVertical: 4 }
+});
 
 exports.Badge = Badge;
 exports.BottomSheet = BottomSheet;
@@ -6007,6 +6138,7 @@ exports.GlyphAliases = GlyphAliases;
 exports.GlyphCategories = GlyphCategories;
 exports.GlyphPicker = GlyphPicker;
 exports.Input = Input;
+exports.Marginalia = Marginalia;
 exports.MaterialCard = MaterialCard;
 exports.MaterialEyebrow = MaterialEyebrow;
 exports.NativeThemeProvider = NativeThemeProvider;
@@ -6017,6 +6149,7 @@ exports.SheetRow = SheetRow;
 exports.Skeleton = Skeleton;
 exports.StatusDot = StatusDot;
 exports.Tabs = Tabs;
+exports.TagInput = TagInput;
 exports.Text = Text;
 exports.Textarea = Textarea;
 exports.ToastProvider = ToastProvider;