@skiddph/prui 0.13.0 → 0.13.1

package/dist/core/tag-input.d.ts

@@ -3,10 +3,12 @@ import { PropsMeta } from './props-meta';
 import * as React from "react";
 /**
  * TagInput: comma-separated entry as removable chips (tags, email
- * recipients, keywords). Text commits on a separator, Enter, paste of
- * multi-value text, or blur; Backspace on an empty field removes the last
- * tag. The chip and the value are separate concerns: labelFor decides what
- * the chip displays while onChange keeps emitting the original strings, and
+ * recipients, keywords). Text commits the moment a separator arrives — by
+ * keydown, or through the input value itself (IME, virtual keyboards,
+ * autofill, multi-char separators like " and ") — plus Enter, multi-value
+ * paste, or blur; Backspace on an empty field removes the last tag. The
+ * chip and the value are separate concerns: labelFor decides what the chip
+ * displays while onChange keeps emitting the original strings, and
  * renderTag takes over the chip entirely.
  */
 export type TagInputSize = "sm" | "md" | "lg";

package/dist/core/tag-input.js

@@ -1,81 +1,88 @@
-import { jsxs as I, jsx as u } from "react/jsx-runtime";
-import * as c from "react";
-import { X as L } from "lucide-react";
-import { resolveSurface as Q, withSurface as W } from "./surface.js";
-import { cn as Y } from "./cn.js";
-import { usePruiI18n as Z } from "../i18n.js";
-const ee = (v) => v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), te = {
+import { jsxs as D, jsx as u } from "react/jsx-runtime";
+import * as d from "react";
+import { X as Q } from "lucide-react";
+import { resolveSurface as W, withSurface as Y } from "./surface.js";
+import { cn as Z } from "./cn.js";
+import { usePruiI18n as ee } from "../i18n.js";
+const te = (h) => h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), ne = {
   sm: "min-h-8 text-sm",
   md: "min-h-9 text-sm",
   lg: "min-h-11 text-base"
-}, ne = c.forwardRef(function({
+}, re = d.forwardRef(function({
   className: j,
   style: k,
   size: R = "md",
   variant: T = "default",
-  value: b,
+  value: v,
   defaultValue: B,
-  onChange: d,
-  separators: l = [","],
-  commitOnBlur: P = !0,
-  parseInput: S,
-  validate: h,
+  onChange: m,
+  separators: a = [","],
+  commitOnBlur: C = !0,
+  parseInput: P,
+  validate: b,
   maxTags: y,
-  allowDuplicates: C = !1,
+  allowDuplicates: S = !1,
   labelFor: x,
   renderTag: w,
-  disabled: m,
+  disabled: f,
   bg: z,
   fg: E,
   radius: F,
   texture: K,
   textureColor: A,
   elevation: M,
-  ...n
+  ...r
 }, O) {
-  const { t: U } = Z(), N = b !== void 0, [V, X] = c.useState(B ?? []), r = N ? b : V, [o, f] = c.useState(""), _ = S ?? ((e) => e.split(new RegExp(l.map(ee).join("|"))).map((t) => t.trim()).filter(Boolean)), $ = (e) => {
-    N || X(e), d == null || d(e);
-  }, p = (e) => {
+  const { t: U } = ee(), N = v !== void 0, [V, X] = d.useState(B ?? []), o = N ? v : V, [l, p] = d.useState(""), _ = P ?? ((e) => e.split(new RegExp(a.map(te).join("|"))).map((t) => t.trim()).filter(Boolean)), I = (e) => {
+    N || X(e), m == null || m(e);
+  }, c = (e) => {
     const t = _(e);
     if (!t.length) {
-      f("");
+      p("");
       return;
     }
-    const a = [...r], i = [];
+    const n = [...o], i = [];
     for (const s of t)
-      y !== void 0 && a.length >= y ? i.push(s) : !C && a.includes(s) || (h && !h(s) ? i.push(s) : a.push(s));
-    f(i.join(l[0] ?? ", ")), a.length !== r.length && $(a);
-  }, g = (e) => $(r.filter((t, a) => a !== e)), q = (e) => {
+      y !== void 0 && n.length >= y ? i.push(s) : !S && n.includes(s) || (b && !b(s) ? i.push(s) : n.push(s));
+    p(i.join(a[0] ?? ", ")), n.length !== o.length && I(n);
+  }, g = (e) => I(o.filter((t, n) => n !== e)), q = (e) => {
     var t;
-    e.key === "Enter" || l.includes(e.key) ? (e.preventDefault(), p(o)) : e.key === "Backspace" && !o && r.length && (e.preventDefault(), g(r.length - 1)), (t = n.onKeyDown) == null || t.call(n, e);
+    e.key === "Enter" || a.includes(e.key) ? (e.preventDefault(), c(l)) : e.key === "Backspace" && !l && o.length && (e.preventDefault(), g(o.length - 1)), (t = r.onKeyDown) == null || t.call(r, e);
   }, G = (e) => {
-    var a;
+    var n;
     const t = e.clipboardData.getData("text");
-    if (t && l.some((i) => t.includes(i))) {
-      e.preventDefault(), p(o ? `${o}${l[0] ?? ","}${t}` : t);
+    if (t && a.some((i) => t.includes(i))) {
+      e.preventDefault(), c(l ? `${l}${a[0] ?? ","}${t}` : t);
       return;
     }
-    (a = n.onPaste) == null || a.call(n, e);
+    (n = r.onPaste) == null || n.call(r, e);
   }, H = (e) => {
     var t;
-    P && p(o), (t = n.onBlur) == null || t.call(n, e);
-  }, J = Q({ bg: z, fg: E, radius: F, texture: K, textureColor: A, elevation: M }), D = W(
-    Y(
+    C && c(l), (t = r.onBlur) == null || t.call(r, e);
+  }, J = (e) => {
+    const t = e.target.value;
+    if (a.some((n) => t.includes(n))) {
+      c(t);
+      return;
+    }
+    p(t);
+  }, L = W({ bg: z, fg: E, radius: F, texture: K, textureColor: A, elevation: M }), $ = Y(
+    Z(
       "prui-f-control prui-taginput flex w-full flex-wrap items-center gap-1 px-1.5 py-1",
       "border border-[var(--prui-line)] rounded-[var(--prui-s-radius,var(--prui-radius))]",
       "bg-[var(--prui-s-bg,var(--prui-background))] text-[var(--prui-s-fg,var(--prui-fg))] placeholder:text-[var(--prui-dim)]",
       "outline-none transition-colors focus-within:border-[var(--prui-brand)] focus-within:ring-2 focus-within:ring-[var(--prui-brand)]/30",
-      te[R],
+      ne[R],
       T === "filled" && "bg-[var(--prui-s-bg,var(--prui-raise))] border-transparent",
-      m && "opacity-50 cursor-not-allowed",
+      f && "opacity-50 cursor-not-allowed",
       j
     ),
     k,
-    J
+    L
   );
-  return /* @__PURE__ */ I("div", { className: D.className, style: D.style, children: [
-    r.map(
-      (e, t) => w ? /* @__PURE__ */ u(c.Fragment, { children: w(e, { remove: () => g(t) }) }, `${e}-${t}`) : /* @__PURE__ */ I(
+  return /* @__PURE__ */ D("div", { className: $.className, style: $.style, children: [
+    o.map(
+      (e, t) => w ? /* @__PURE__ */ u(d.Fragment, { children: w(e, { remove: () => g(t) }) }, `${e}-${t}`) : /* @__PURE__ */ D(
         "span",
         {
           className: "inline-flex max-w-full items-center gap-1 rounded-[var(--prui-radius-full)] border border-[var(--prui-line)] bg-[var(--prui-raise)] py-0.5 pl-2 pr-1 text-xs text-[var(--prui-fg)]",
@@ -86,10 +93,10 @@ const ee = (v) => v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), te = {
               {
                 type: "button",
                 "aria-label": U.removeTag.replace("{label}", e),
-                disabled: m,
+                disabled: f,
                 onClick: () => g(t),
                 className: "flex h-4 w-4 cursor-pointer items-center justify-center rounded-full text-[var(--prui-dim)] hover:bg-[var(--prui-line)] hover:text-[var(--prui-fg)] disabled:cursor-not-allowed",
-                children: /* @__PURE__ */ u(L, { className: "h-3 w-3", "aria-hidden": !0 })
+                children: /* @__PURE__ */ u(Q, { className: "h-3 w-3", "aria-hidden": !0 })
               }
             )
           ]
@@ -101,20 +108,20 @@ const ee = (v) => v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), te = {
       "input",
       {
         ref: O,
-        value: o,
-        onChange: (e) => f(e.target.value),
+        value: l,
+        onChange: J,
         onKeyDown: q,
         onPaste: G,
         onBlur: H,
-        disabled: m,
-        ...n,
+        disabled: f,
+        ...r,
         className: "h-7 min-w-16 flex-1 bg-transparent text-sm outline-none placeholder:text-[var(--prui-dim)] disabled:cursor-not-allowed"
       }
     )
   ] });
 });
-ne.displayName = "TagInput";
-const se = {
+re.displayName = "TagInput";
+const ue = {
   name: "TagInput",
   props: [
     { name: "value", type: "string[]", default: "uncontrolled", control: "none" },
@@ -135,6 +142,6 @@ const se = {
   ]
 };
 export {
-  ne as TagInput,
-  se as tagInputPropsMeta
+  re as TagInput,
+  ue as tagInputPropsMeta
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skiddph/prui",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "PRUI component system: primitives, app-layer super-components, pages, and themes",
   "type": "module",
   "license": "Apache-2.0",