@skiddph/prui 0.11.0 → 0.13.0

package/dist/core/index.d.ts

@@ -6,6 +6,7 @@ export { Portal, useReducedMotion, useFocusTrap, useEscapeKey, useScrollLock, us
 export { moveIndex, homeIndex, endIndex, typeaheadIndex } from './list-nav';
 export { Button, buttonPropsMeta, type ButtonProps, type ButtonVariant, type ButtonSize, } from './button';
 export { Input, inputPropsMeta, Textarea, textareaPropsMeta, type InputProps, type TextareaProps, } from './input';
+export { TagInput, tagInputPropsMeta, type TagInputProps, type TagInputSize, } from './tag-input';
 export { Label, labelPropsMeta, Separator, separatorPropsMeta, type LabelProps, type SeparatorProps } from './label';
 export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, selectPropsMeta, type SelectProps, type SelectOption, type SelectTriggerProps, type SelectValueProps, type SelectContentProps, type SelectItemProps, } from './select';
 export { Switch, switchPropsMeta, type SwitchProps } from './switch';

package/dist/core/input.d.ts

@@ -14,8 +14,12 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     variant?: "default" | "filled";
     /** Icon rendered inside the field's leading edge. */
     icon?: React.ReactNode;
-    /** Icon rendered inside the field's trailing edge. */
+    /** Icon rendered inside the field's trailing edge. A custom trailingIcon
+     * takes over the slot and suppresses the password eye toggle. */
     trailingIcon?: React.ReactNode;
+    /** With type="password", render an eye show/hide toggle in the trailing
+     * slot (the default). Set false to keep a plain masked field. */
+    passwordToggle?: boolean;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export declare const inputPropsMeta: PropsMeta;

package/dist/core/input.js

@@ -1,59 +1,83 @@
-import { jsx as a, jsxs as N } from "react/jsx-runtime";
-import * as d from "react";
-import { resolveSurface as R, withSurface as j } from "./surface.js";
-import { cn as u } from "./cn.js";
-const p = "prui-f-control prui-input w-full bg-[var(--prui-s-bg,var(--prui-background))] text-[var(--prui-s-fg,var(--prui-fg))] placeholder:text-[var(--prui-dim)] border border-[var(--prui-line)] rounded-[var(--prui-s-radius,var(--prui-radius))] text-sm outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30 disabled:opacity-50 disabled:cursor-not-allowed", z = {
+import { jsx as e, jsxs as S } from "react/jsx-runtime";
+import * as u from "react";
+import { EyeOff as T, Eye as k } from "lucide-react";
+import { resolveSurface as z, withSurface as E } from "./surface.js";
+import { cn as h } from "./cn.js";
+import { usePruiI18n as M } from "../i18n.js";
+const v = "prui-f-control prui-input w-full bg-[var(--prui-s-bg,var(--prui-background))] text-[var(--prui-s-fg,var(--prui-fg))] placeholder:text-[var(--prui-dim)] border border-[var(--prui-line)] rounded-[var(--prui-s-radius,var(--prui-radius))] text-sm outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30 disabled:opacity-50 disabled:cursor-not-allowed", D = {
   sm: "h-8 px-2.5",
   md: "h-9 px-3",
   lg: "h-11 px-4 text-base"
-}, C = d.forwardRef(
-  ({ className: r, style: n, type: l = "text", size: o = "md", variant: c = "default", icon: e, trailingIcon: t, bg: m, fg: f, radius: g, texture: x, textureColor: v, elevation: y, ...b }, h) => {
-    const w = R({ bg: m, fg: f, radius: g, texture: x, textureColor: v, elevation: y }), s = j(
-      u(
-        p,
-        z[o],
-        c === "filled" && "bg-[var(--prui-s-bg,var(--prui-raise))] border-transparent",
-        e && "pl-9",
-        t && "pr-9",
-        r
+}, B = u.forwardRef(
+  ({ className: s, style: l, type: a = "text", size: i = "md", variant: g = "default", icon: r, trailingIcon: t, passwordToggle: y = !0, bg: b, fg: x, radius: w, texture: N, textureColor: R, elevation: P, ...p }, j) => {
+    const { t: c } = M(), [n, C] = u.useState(!1), o = a === "password" && y !== !1 && !t, I = z({ bg: b, fg: x, radius: w, texture: N, textureColor: R, elevation: P }), f = E(
+      h(
+        v,
+        D[i],
+        g === "filled" && "bg-[var(--prui-s-bg,var(--prui-raise))] border-transparent",
+        r && "pl-9",
+        (t || o) && "pr-9",
+        s
       ),
-      n,
-      w
-    ), i = /* @__PURE__ */ a("input", { ref: h, type: l, className: s.className, style: s.style, ...b });
-    return !e && !t ? i : /* @__PURE__ */ N("span", { className: "relative inline-flex w-full", children: [
-      e ? /* @__PURE__ */ a("span", { "aria-hidden": !0, className: "pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-[var(--prui-dim)] [&>svg]:h-4 [&>svg]:w-4", children: e }) : null,
-      i,
-      t ? /* @__PURE__ */ a("span", { "aria-hidden": !0, className: "pointer-events-none absolute right-3 top-1/2 flex -translate-y-1/2 items-center text-[var(--prui-dim)] [&>svg]:h-4 [&>svg]:w-4", children: t }) : null
+      l,
+      I
+    ), m = /* @__PURE__ */ e(
+      "input",
+      {
+        ref: j,
+        type: o && n ? "text" : a,
+        className: f.className,
+        style: f.style,
+        ...p
+      }
+    );
+    return !r && !t && !o ? m : /* @__PURE__ */ S("span", { className: "relative inline-flex w-full", children: [
+      r ? /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-[var(--prui-dim)] [&>svg]:h-4 [&>svg]:w-4", children: r }) : null,
+      m,
+      t ? /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "pointer-events-none absolute right-3 top-1/2 flex -translate-y-1/2 items-center text-[var(--prui-dim)] [&>svg]:h-4 [&>svg]:w-4", children: t }) : o ? /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          "aria-label": n ? c.hidePassword : c.showPassword,
+          "aria-pressed": n,
+          disabled: p.disabled,
+          onMouseDown: (d) => d.preventDefault(),
+          onClick: () => C((d) => !d),
+          className: "absolute right-1.5 top-1/2 flex h-6 w-6 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[var(--prui-radius-1)] text-[var(--prui-dim)] hover:bg-[var(--prui-raise)] hover:text-[var(--prui-fg)] disabled:cursor-not-allowed disabled:opacity-50",
+          children: n ? /* @__PURE__ */ e(T, { className: "h-4 w-4", "aria-hidden": !0 }) : /* @__PURE__ */ e(k, { className: "h-4 w-4", "aria-hidden": !0 })
+        }
+      ) : null
     ] });
   }
 );
-C.displayName = "Input";
-const P = {
+B.displayName = "Input";
+const J = {
   name: "Input",
   props: [
     { name: "type", type: "string", default: "'text'", control: "select", options: ["text", "password", "email", "number", "search"] },
     { name: "size", type: "'sm' | 'md' | 'lg'", default: "'md'", control: "select", options: ["sm", "md", "lg"] },
     { name: "variant", type: "'default' | 'filled'", default: "'default'", control: "select", options: ["default", "filled"] },
     { name: "icon", type: "ReactNode", default: "undefined", control: "none", description: "Icon inside the leading edge (padding adjusts)." },
-    { name: "trailingIcon", type: "ReactNode", default: "undefined", control: "none", description: "Icon inside the trailing edge." },
+    { name: "trailingIcon", type: "ReactNode", default: "undefined", control: "none", description: "Icon inside the trailing edge; takes over the slot from the password eye." },
+    { name: "passwordToggle", type: "boolean", default: "true", control: "boolean", description: "type=password renders an eye show/hide toggle unless a trailingIcon owns the slot." },
     { name: "value", type: "string", default: null, control: "text" },
     { name: "placeholder", type: "string", default: "undefined", control: "text" },
     { name: "disabled", type: "boolean", default: "false", control: "boolean" },
     { name: "onChange", type: "(e) => void", default: null, control: "none" }
   ]
-}, I = d.forwardRef(
-  ({ className: r, style: n, ...l }, o) => /* @__PURE__ */ a(
+}, O = u.forwardRef(
+  ({ className: s, style: l, ...a }, i) => /* @__PURE__ */ e(
     "textarea",
     {
-      ref: o,
-      style: n,
-      className: u(p, "h-auto min-h-20 resize-y px-3 py-2", r),
-      ...l
+      ref: i,
+      style: l,
+      className: h(v, "h-auto min-h-20 resize-y px-3 py-2", s),
+      ...a
     }
   )
 );
-I.displayName = "Textarea";
-const k = {
+O.displayName = "Textarea";
+const K = {
   name: "Textarea",
   props: [
     { name: "value", type: "string", default: null, control: "textarea" },
@@ -63,8 +87,8 @@ const k = {
   ]
 };
 export {
-  C as Input,
-  I as Textarea,
-  P as inputPropsMeta,
-  k as textareaPropsMeta
+  B as Input,
+  O as Textarea,
+  J as inputPropsMeta,
+  K as textareaPropsMeta
 };

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

@@ -0,0 +1,47 @@
+import { SurfaceProps } from './surface';
+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
+ * renderTag takes over the chip entirely.
+ */
+export type TagInputSize = "sm" | "md" | "lg";
+export interface TagInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "children">, SurfaceProps {
+    /** Control height step (the field grows vertically with wrapped chips). */
+    size?: TagInputSize;
+    /** Visual variant: outlined (default) or filled. */
+    variant?: "default" | "filled";
+    /** Controlled tag values. */
+    value?: string[];
+    /** Initial tags for the uncontrolled field. */
+    defaultValue?: string[];
+    /** Emits the full tag array on every add/remove. */
+    onChange?: (tags: string[]) => void;
+    /** Characters that commit the typed text as a tag (default: comma). */
+    separators?: string[];
+    /** Commit the pending text when the field blurs (default true). */
+    commitOnBlur?: boolean;
+    /** Programmable commit: split raw text into tag values. Defaults to
+     * splitting on `separators`, trimming, and dropping empties. Use it to
+     * accept pair syntaxes (e.g. "Name, email" -> "Name <email>"). */
+    parseInput?: (raw: string) => string[];
+    /** Reject a candidate; rejected text stays editable in the field. */
+    validate?: (tag: string) => boolean;
+    /** Stop accepting new tags at this count. */
+    maxTags?: number;
+    /** Allow the same value more than once (default false). */
+    allowDuplicates?: boolean;
+    /** What the chip displays — the emitted value keeps the original string
+     * (e.g. show only the name for "Name <email>"). */
+    labelFor?: (tag: string) => React.ReactNode;
+    /** Fully custom chip: (tag, { remove }) => node. */
+    renderTag?: (tag: string, api: {
+        remove: () => void;
+    }) => React.ReactNode;
+}
+export declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const tagInputPropsMeta: PropsMeta;

package/dist/core/tag-input.js

@@ -0,0 +1,140 @@
+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 = {
+  sm: "min-h-8 text-sm",
+  md: "min-h-9 text-sm",
+  lg: "min-h-11 text-base"
+}, ne = c.forwardRef(function({
+  className: j,
+  style: k,
+  size: R = "md",
+  variant: T = "default",
+  value: b,
+  defaultValue: B,
+  onChange: d,
+  separators: l = [","],
+  commitOnBlur: P = !0,
+  parseInput: S,
+  validate: h,
+  maxTags: y,
+  allowDuplicates: C = !1,
+  labelFor: x,
+  renderTag: w,
+  disabled: m,
+  bg: z,
+  fg: E,
+  radius: F,
+  texture: K,
+  textureColor: A,
+  elevation: M,
+  ...n
+}, 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 = _(e);
+    if (!t.length) {
+      f("");
+      return;
+    }
+    const a = [...r], 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) => {
+    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);
+  }, G = (e) => {
+    var a;
+    const t = e.clipboardData.getData("text");
+    if (t && l.some((i) => t.includes(i))) {
+      e.preventDefault(), p(o ? `${o}${l[0] ?? ","}${t}` : t);
+      return;
+    }
+    (a = n.onPaste) == null || a.call(n, 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(
+      "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],
+      T === "filled" && "bg-[var(--prui-s-bg,var(--prui-raise))] border-transparent",
+      m && "opacity-50 cursor-not-allowed",
+      j
+    ),
+    k,
+    J
+  );
+  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(
+        "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)]",
+          children: [
+            /* @__PURE__ */ u("span", { className: "max-w-64 truncate", children: x ? x(e) : e }),
+            /* @__PURE__ */ u(
+              "button",
+              {
+                type: "button",
+                "aria-label": U.removeTag.replace("{label}", e),
+                disabled: m,
+                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 })
+              }
+            )
+          ]
+        },
+        `${e}-${t}`
+      )
+    ),
+    /* @__PURE__ */ u(
+      "input",
+      {
+        ref: O,
+        value: o,
+        onChange: (e) => f(e.target.value),
+        onKeyDown: q,
+        onPaste: G,
+        onBlur: H,
+        disabled: m,
+        ...n,
+        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 = {
+  name: "TagInput",
+  props: [
+    { name: "value", type: "string[]", default: "uncontrolled", control: "none" },
+    { name: "defaultValue", type: "string[]", default: "[]", control: "none" },
+    { name: "onChange", type: "(tags: string[]) => void", default: null, control: "none" },
+    { name: "separators", type: "string[]", default: "[',']", control: "none", description: "Characters that commit the typed text (plus Enter, paste, blur)." },
+    { name: "commitOnBlur", type: "boolean", default: "true", control: "boolean" },
+    { name: "parseInput", type: "(raw: string) => string[]", default: "split on separators", control: "none", description: "Programmable commit: build tag values from raw text (pair syntaxes, normalization)." },
+    { name: "validate", type: "(tag: string) => boolean", default: "undefined", control: "none", description: "Reject a candidate; it stays editable in the field." },
+    { name: "labelFor", type: "(tag: string) => ReactNode", default: "undefined", control: "none", description: "Chip display; onChange keeps emitting the original strings." },
+    { name: "renderTag", type: "(tag, { remove }) => ReactNode", default: "default chip", control: "none", description: "Fully custom chip rendering." },
+    { name: "maxTags", type: "number", default: "undefined", control: "number" },
+    { name: "allowDuplicates", type: "boolean", default: "false", control: "boolean" },
+    { name: "size", type: "'sm' | 'md' | 'lg'", default: "'md'", control: "select", options: ["sm", "md", "lg"] },
+    { name: "variant", type: "'default' | 'filled'", default: "'default'", control: "select", options: ["default", "filled"] },
+    { name: "placeholder", type: "string", default: "undefined", control: "text" },
+    { name: "disabled", type: "boolean", default: "false", control: "boolean" }
+  ]
+};
+export {
+  ne as TagInput,
+  se as tagInputPropsMeta
+};