achery-ui 0.12.0 → 0.13.0

package/dist/native/index.cjs

@@ -5993,6 +5993,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 +6134,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 +6145,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;