@code0-tech/pictor 0.17.0 → 0.17.2

package/dist/components/form/EmailInput.js

@@ -1,22 +1,24 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import a from "react";
-import { Input as l } from "./Input.js";
-import { IconX as m } from "@tabler/icons-react";
-import { Button as p } from "../button/Button.js";
-import { clearInputElement as f } from "./Input.utils.js";
-import { ButtonGroup as s } from "../button-group/ButtonGroup.js";
-const u = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/, g = (o) => u.test(o), R = a.forwardRef((o, x) => {
-  x = x || a.useRef(null);
+import { Input as m } from "./Input.js";
+import { IconX as s } from "@tabler/icons-react";
+import { Button as f } from "../button/Button.js";
+import { clearInputElement as p } from "./Input.utils.js";
+import { ButtonGroup as u } from "../button-group/ButtonGroup.js";
+const z = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/, R = (x) => z.test(x), y = a.forwardRef((x, t) => {
+  t = t || a.useRef(null);
   const {
-    clearable: e = !1,
-    right: i,
-    ...n
-  } = o, c = () => {
-    f(x.current);
-  }, r = [i];
-  return e && r.push(/* @__PURE__ */ t(p, { color: "secondary", paddingSize: "xxs", onClick: c, children: /* @__PURE__ */ t(m, { size: 13 }) })), /* @__PURE__ */ t(l, { right: /* @__PURE__ */ t(s, { color: "primary", children: r }), type: "email", ref: x, ...n });
+    clearable: i = !1,
+    right: n,
+    ...c
+  } = x, l = () => {
+    p(t.current);
+  }, r = [n];
+  i && r.push(/* @__PURE__ */ o(f, { color: "secondary", paddingSize: "xxs", onClick: l, children: /* @__PURE__ */ o(s, { size: 13 }) }));
+  const e = r.filter(Boolean);
+  return /* @__PURE__ */ o(m, { right: e.length > 0 ? /* @__PURE__ */ o(u, { color: "primary", children: e }) : void 0, type: "email", ref: t, ...c });
 });
 export {
-  R as EmailInput,
-  g as emailValidation
+  y as EmailInput,
+  R as emailValidation
 };

package/dist/components/form/PasswordInput.js

@@ -1,46 +1,46 @@
-import { jsxs as l, Fragment as w, jsx as s } from "react/jsx-runtime";
-import c from "react";
-import { Input as b } from "./Input.js";
-import { IconEye as I, IconX as R } from "@tabler/icons-react";
-import { Button as u } from "../button/Button.js";
-import { clearInputElement as z } from "./Input.utils.js";
-import { Flex as P } from "../flex/Flex.js";
-import { Progress as D } from "../progress/Progress.js";
-import { InputMessage as A } from "./InputMessage.js";
-import { ButtonGroup as B } from "../button-group/ButtonGroup.js";
-const X = c.forwardRef((r, t) => {
-  t = t || c.useRef(null);
+import { jsxs as c, Fragment as b, jsx as o } from "react/jsx-runtime";
+import u from "react";
+import { Input as I } from "./Input.js";
+import { IconEye as R, IconX as z } from "@tabler/icons-react";
+import { Button as p } from "../button/Button.js";
+import { clearInputElement as P } from "./Input.utils.js";
+import { Flex as A } from "../flex/Flex.js";
+import { Progress as B } from "../progress/Progress.js";
+import { InputMessage as D } from "./InputMessage.js";
+import { ButtonGroup as C } from "../button-group/ButtonGroup.js";
+const X = u.forwardRef((r, t) => {
+  t = t || u.useRef(null);
   const {
-    clearable: p = !0,
-    visible: d = !0,
-    right: m,
-    formValidation: o,
-    ...f
-  } = r, g = (e) => (z(t.current), e.stopPropagation(), e.preventDefault(), !1), h = (e) => (t.current instanceof HTMLInputElement && (t.current.type === "password" ? t.current.type = "text" : t.current.type === "text" && (t.current.type = "password")), e.stopPropagation(), e.preventDefault(), !1), n = [m];
-  d && n.push(/* @__PURE__ */ s(u, { color: "secondary", paddingSize: "xxs", onClick: (e) => h(e), children: /* @__PURE__ */ s(I, { size: 13 }) })), p && n.push(/* @__PURE__ */ s(u, { color: "secondary", paddingSize: "xxs", onClick: (e) => g(e), children: /* @__PURE__ */ s(R, { size: 13 }) }));
-  const i = o?.notValidMessage ?? "", a = /^[1-5]+$/.test(i), x = i.length, y = Math.max(0, 5 - x) / 5 * 100;
-  return /* @__PURE__ */ l(w, { children: [
-    /* @__PURE__ */ s(b, { right: /* @__PURE__ */ s(B, { color: "primary", children: n }), rightType: "action", type: "password", ref: t, ...o ? {
-      formValidation: a ? {
-        setValue: o.setValue,
-        valid: o.valid
-      } : o
-    } : {}, ...f }),
-    a && !o?.valid && /* @__PURE__ */ l(P, { mt: 0.7, style: {
+    clearable: d = !0,
+    visible: m = !0,
+    right: f,
+    formValidation: s,
+    ...g
+  } = r, h = (e) => (P(t.current), e.stopPropagation(), e.preventDefault(), !1), x = (e) => (t.current instanceof HTMLInputElement && (t.current.type === "password" ? t.current.type = "text" : t.current.type === "text" && (t.current.type = "password")), e.stopPropagation(), e.preventDefault(), !1), n = [f];
+  m && n.push(/* @__PURE__ */ o(p, { color: "secondary", paddingSize: "xxs", onClick: (e) => x(e), children: /* @__PURE__ */ o(R, { size: 13 }) })), d && n.push(/* @__PURE__ */ o(p, { color: "secondary", paddingSize: "xxs", onClick: (e) => h(e), children: /* @__PURE__ */ o(z, { size: 13 }) }));
+  const a = n.filter(Boolean), i = s?.notValidMessage ?? "", l = /^[1-5]+$/.test(i), y = i.length, M = Math.max(0, 5 - y) / 5 * 100;
+  return /* @__PURE__ */ c(b, { children: [
+    /* @__PURE__ */ o(I, { right: a.length > 0 ? /* @__PURE__ */ o(C, { color: "primary", children: a }) : void 0, rightType: "action", type: "password", ref: t, ...s ? {
+      formValidation: l ? {
+        setValue: s.setValue,
+        valid: s.valid
+      } : s
+    } : {}, ...g }),
+    l && !s?.valid && /* @__PURE__ */ c(A, { mt: 0.7, style: {
       flexDirection: "column"
     }, children: [
-      /* @__PURE__ */ s(D, { value: y, max: 100, color: "linear-gradient(to right, #D90429 0%, #29BF12 100%)" }),
+      /* @__PURE__ */ o(B, { value: M, max: 100, color: "linear-gradient(to right, #D90429 0%, #29BF12 100%)" }),
       (() => {
-        const e = ["2", "3", "4", "5", "1"].find((V) => i.includes(V));
+        const e = ["2", "3", "4", "5", "1"].find((w) => i.includes(w));
         if (!e) return null;
-        const M = {
+        const V = {
           1: "Must be at least 8 characters",
           2: "Must include a lowercase letter",
           3: "Must include an uppercase letter",
           4: "Must include a number",
           5: "Must include a special character"
         }[e];
-        return /* @__PURE__ */ s(A, { children: M });
+        return /* @__PURE__ */ o(D, { children: V });
       })()
     ] })
   ] });

package/dist/components/form/TagInput.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { EditorInputMenuProps, EditorInputSubMenuProps, EditorInputTriggerProps, EditorInputValueProps, EditorInputMenuItemProps } from './EditorInput';
+import { EditorInputMenuProps, EditorInputSubMenuProps, EditorInputTriggerProps, EditorInputValueProps, EditorTokenRule, EditorInputMenuItemProps } from './EditorInput';
 import { InputWrapperProps } from './InputWrapper';
 import { ValidationProps } from './useForm';
 export interface TagValue {
@@ -14,7 +14,14 @@ export interface TagSuggestion {
 export interface TagInputProps extends Omit<InputWrapperProps, "onChange">, ValidationProps<any> {
     allowCustomValues?: boolean;
     onChange?: (tags: TagValue[]) => void;
-    tagColor?: string;
+    /**
+     * Defines how a tag is rendered as a chip inside the input. Each rule's
+     * `pattern` is matched against the tag's value; the first match decides the
+     * chip via its `wrap`/`style`/`className`. Tags with no matching rule fall
+     * back to a plain badge. The chip rendering is token-defined only — a menu
+     * item's `children` is never reused here.
+     */
+    tokenRules?: EditorTokenRule[];
     children?: React.ReactNode;
 }
 export type TagInputTriggerProps = EditorInputTriggerProps;

package/dist/components/form/TagInput.js

@@ -1,117 +1,124 @@
-import { jsx as l, Fragment as b } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import { c as I } from "../../_virtual/compiler-runtime.js";
-import K, { useState as N, useRef as V, useReducer as j, useCallback as A, useEffect as _, useMemo as B, useContext as F } from "react";
-import { EditorInput as L, EditorInputMenu as U, EditorInputMenuItem as q, EditorInputSubMenu as z, EditorInputTrigger as G, EditorInputValue as H } from "./EditorInput.js";
+import b, { useState as K, useRef as k, useReducer as j, useCallback as A, useEffect as v, useMemo as B, useContext as L } from "react";
+import { EditorInput as U, EditorInputMenu as q, EditorInputMenuItem as z, EditorInputSubMenu as F, EditorInputTrigger as G, EditorInputValue as H } from "./EditorInput.js";
 import { Badge as J } from "../badge/Badge.js";
-import { Text as Q } from "../text/Text.js";
-const h = "⟦", d = "⟧", k = new RegExp(`${h}([^${d}]+)${d}`, "g"), W = new RegExp(`(${h}[^${d}]+${d})|([^${h}${d}]+)`, "g"), w = (e) => `${h}${String(e)}${d}`, X = (e) => e.slice(h.length, -d.length), R = (e) => e.map((t) => w(t.value)).join(""), Y = (e) => e.replace(k, "").trim(), Z = (e, t) => {
+import { Text as $ } from "../text/Text.js";
+const E = "⟦", d = "⟧", R = new RegExp(`${E}([^${d}]+)${d}`, "g"), Q = new RegExp(`(${E}[^${d}]+${d})|([^${E}${d}]+)`, "g"), V = (t) => `${E}${String(t)}${d}`, W = (t) => t.slice(E.length, -d.length), y = (t) => t.map((e) => V(e.value)).join(""), X = (t) => t.replace(R, "").trim(), Y = (t, e) => {
   let n = !1;
-  const r = e.replace(W, (s, o, c) => o || (!n && c.trim() ? (n = !0, t) : ""));
-  return n ? r : r + t;
-}, v = K.createContext(null), y = () => {
-  const e = F(v);
-  if (!e)
+  const r = t.replace(Q, (a, o, c) => o || (!n && c.trim() ? (n = !0, e) : ""));
+  return n ? r : r + e;
+}, _ = b.createContext(null), D = () => {
+  const t = L(_);
+  if (!t)
     throw new Error("TagInput.* components must be used inside <TagInput>");
-  return e;
-}, ct = (e) => {
+  return t;
+}, se = (t) => {
   const {
-    allowCustomValues: t = !1,
+    allowCustomValues: e = !1,
     onChange: n,
     formValidation: r,
-    tagColor: s = "primary",
+    tokenRules: a,
     value: o,
     initialValue: c,
-    defaultValue: f,
-    children: p,
-    ...g
-  } = e, u = o ?? c ?? f, [i, M] = N(() => R(u ?? [])), E = V(/* @__PURE__ */ new Map()), [, D] = j((a) => a + 1, 0), O = A((a, m) => {
-    E.current.set(a, m), D();
-  }, []), $ = V(u), S = (a) => {
-    const m = [...a.matchAll(k)].map(([, T]) => {
-      const C = E.current.get(T);
+    defaultValue: T,
+    children: h,
+    ...p
+  } = t, i = o ?? c ?? T, [g, C] = K(() => y(i ?? [])), M = k(/* @__PURE__ */ new Map()), [, N] = j((u) => u + 1, 0), O = A((u, s) => {
+    M.current.set(u, s), N();
+  }, []), x = k(i), S = (u) => {
+    const s = [...u.matchAll(R)].map(([, m]) => {
+      const f = M.current.get(m);
       return {
-        value: C ? C.value : T,
-        valueData: C?.data
+        value: f ? f.value : m,
+        valueData: f?.data
       };
     });
-    $.current = m, M(a), r?.setValue?.(m), n?.(m);
+    x.current = s, C(u), r?.setValue?.(s), n?.(s);
   };
-  _(() => {
-    u !== $.current && ($.current = u, M(R(u ?? [])));
-  }, [u]);
+  v(() => {
+    i !== x.current && (x.current = i, C(y(i ?? [])));
+  }, [i]);
   const P = B(() => [{
-    pattern: k,
+    pattern: R,
     void: !0,
-    wrap: (a) => {
-      const m = X(a), T = E.current.get(m);
-      return T ? /* @__PURE__ */ l(b, { children: T.children }) : /* @__PURE__ */ l(J, { m: 0.01, color: s, children: /* @__PURE__ */ l(Q, { children: m }) });
+    // The chip (input rendering) is defined by the token alone — the menu
+    // item's `children` is menu-only and must NOT be reused here. The tag's
+    // value is matched against the consumer's `tokenRules` to pick the chip.
+    wrap: (u) => {
+      const s = W(u), m = a?.find((f) => new RegExp(f.pattern.source, f.pattern.flags.replace("g", "")).test(s));
+      if (m?.wrap) {
+        const f = new RegExp(m.pattern.source, m.pattern.flags.replace("g", "")).exec(s);
+        return m.wrap(s, /* @__PURE__ */ l($, { children: s }), f ?? [s]);
+      }
+      return m ? /* @__PURE__ */ l("span", { style: m.style, className: m.className, children: /* @__PURE__ */ l($, { children: s }) }) : /* @__PURE__ */ l(J, { m: 0.01, children: /* @__PURE__ */ l($, { children: s }) });
     }
-  }], [s]), x = {
-    search: Y(i),
-    allowCustomValues: t,
-    insertToken: (a) => S(Z(i, a)),
+  }], [a]), w = {
+    search: X(g),
+    allowCustomValues: e,
+    insertToken: (u) => S(Y(g, u)),
     registerTag: O
   };
-  return /* @__PURE__ */ l(v.Provider, { value: x, children: /* @__PURE__ */ l(L, { ...g, value: i, search: x.search, tokenRules: P, formValidation: r && {
+  return /* @__PURE__ */ l(_.Provider, { value: w, children: /* @__PURE__ */ l(U, { ...p, value: g, search: w.search, tokenRules: P, formValidation: r && {
     valid: r.valid,
     notValidMessage: r.notValidMessage
-  }, onChange: S, onSelect: (a) => x.insertToken(String(a)), children: p }) });
-}, at = (e) => {
-  const t = I.c(2);
+  }, onChange: S, onSelect: (u) => w.insertToken(String(u)), children: h }) });
+}, ae = (t) => {
+  const e = I.c(2);
   let n;
-  return t[0] !== e ? (n = /* @__PURE__ */ l(U, { ...e }), t[0] = e, t[1] = n) : n = t[1], n;
-}, ut = (e) => {
-  const t = I.c(2);
+  return e[0] !== t ? (n = /* @__PURE__ */ l(q, { ...t }), e[0] = t, e[1] = n) : n = e[1], n;
+}, ce = (t) => {
+  const e = I.c(2);
   let n;
-  return t[0] !== e ? (n = /* @__PURE__ */ l(z, { ...e }), t[0] = e, t[1] = n) : n = t[1], n;
-}, it = ({
-  value: e,
-  data: t,
+  return e[0] !== t ? (n = /* @__PURE__ */ l(F, { ...t }), e[0] = t, e[1] = n) : n = e[1], n;
+}, ue = ({
+  value: t,
+  data: e,
   onlyOnce: n,
   aliases: r,
-  children: s
+  children: a
 }) => {
   const {
     registerTag: o
-  } = y(), c = V({
-    value: e,
-    data: t,
-    children: s
+  } = D(), c = k({
+    value: t,
+    data: e,
+    children: a
   });
-  return c.current.value = e, c.current.data = t, c.current.children = s, _(() => o(String(e), c.current), [e, o]), /* @__PURE__ */ l(q, { value: w(e), data: t, onlyOnce: n, aliases: [String(e), ...r ?? []], children: s });
-}, lt = (e) => {
-  const t = I.c(14);
+  return c.current.value = t, c.current.data = e, c.current.children = a, v(() => o(String(t), c.current), [t, o]), /* @__PURE__ */ l(z, { value: V(t), data: e, onlyOnce: n, aliases: [String(t), ...r ?? []], children: a });
+}, le = (t) => {
+  const e = I.c(14);
   let n, r;
-  t[0] !== e ? ({
+  e[0] !== t ? ({
     onKeyDown: n,
     ...r
-  } = e, t[0] = e, t[1] = n, t[2] = r) : (n = t[1], r = t[2]);
+  } = t, e[0] = t, e[1] = n, e[2] = r) : (n = e[1], r = e[2]);
   const {
-    search: s,
+    search: a,
     allowCustomValues: o,
     insertToken: c
-  } = y();
-  let f;
-  t[3] !== o || t[4] !== c || t[5] !== s ? (f = () => {
-    o && s && c(w(s));
-  }, t[3] = o, t[4] = c, t[5] = s, t[6] = f) : f = t[6];
-  const p = f;
-  let g;
-  t[7] !== o || t[8] !== p || t[9] !== n ? (g = (i) => {
-    (i.key === "Enter" && !i.defaultPrevented || i.key === "," && o) && (i.preventDefault(), p()), n?.(i);
-  }, t[7] = o, t[8] = p, t[9] = n, t[10] = g) : g = t[10];
-  let u;
-  return t[11] !== r || t[12] !== g ? (u = /* @__PURE__ */ l(H, { ...r, onKeyDown: g }), t[11] = r, t[12] = g, t[13] = u) : u = t[13], u;
-}, gt = (e) => {
-  const t = I.c(2);
+  } = D();
+  let T;
+  e[3] !== o || e[4] !== c || e[5] !== a ? (T = () => {
+    o && a && c(V(a));
+  }, e[3] = o, e[4] = c, e[5] = a, e[6] = T) : T = e[6];
+  const h = T;
+  let p;
+  e[7] !== o || e[8] !== h || e[9] !== n ? (p = (g) => {
+    (g.key === "Enter" && !g.defaultPrevented || g.key === "," && o) && (g.preventDefault(), h()), n?.(g);
+  }, e[7] = o, e[8] = h, e[9] = n, e[10] = p) : p = e[10];
+  let i;
+  return e[11] !== r || e[12] !== p ? (i = /* @__PURE__ */ l(H, { ...r, onKeyDown: p }), e[11] = r, e[12] = p, e[13] = i) : i = e[13], i;
+}, ie = (t) => {
+  const e = I.c(2);
   let n;
-  return t[0] !== e ? (n = /* @__PURE__ */ l(G, { ...e }), t[0] = e, t[1] = n) : n = t[1], n;
+  return e[0] !== t ? (n = /* @__PURE__ */ l(G, { ...t }), e[0] = t, e[1] = n) : n = e[1], n;
 };
 export {
-  ct as TagInput,
-  at as TagInputMenu,
-  it as TagInputMenuItem,
-  ut as TagInputSubMenu,
-  gt as TagInputTrigger,
-  lt as TagInputValue
+  se as TagInput,
+  ae as TagInputMenu,
+  ue as TagInputMenuItem,
+  ce as TagInputSubMenu,
+  ie as TagInputTrigger,
+  le as TagInputValue
 };

package/dist/components/form/TextAreaInput.js

@@ -1,19 +1,21 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import a from "react";
-import { Input as u } from "./Input.js";
-import { IconX as f } from "@tabler/icons-react";
+import { Input as s } from "./Input.js";
+import { IconX as u } from "@tabler/icons-react";
 import { Button as p } from "../button/Button.js";
-import { clearInputElement as s } from "./Input.utils.js";
-const R = a.forwardRef((r, t) => {
+import { clearInputElement as h } from "./Input.utils.js";
+const R = a.forwardRef((o, t) => {
   t = t || a.useRef(null);
   const {
-    clearable: i = !1,
-    right: l,
+    clearable: l = !1,
+    right: c,
     ...m
-  } = r, c = (e) => {
-    s(t.current), r.onClear && r.onClear(e);
-  }, n = [l];
-  return i && n.push(/* @__PURE__ */ o(p, { variant: "none", onClick: (e) => c(e), children: /* @__PURE__ */ o(f, { size: 13 }) })), /* @__PURE__ */ o(u, { right: n, type: "textarea", ref: t, ...m });
+  } = o, f = (r) => {
+    h(t.current), o.onClear && o.onClear(r);
+  }, n = [c];
+  l && n.push(/* @__PURE__ */ e(p, { variant: "none", onClick: (r) => f(r), children: /* @__PURE__ */ e(u, { size: 13 }) }));
+  const i = n.filter(Boolean);
+  return /* @__PURE__ */ e(s, { right: i.length > 0 ? i : void 0, type: "textarea", ref: t, ...m });
 });
 export {
   R as TextAreaInput

package/dist/components/form/TextInput.js

@@ -1,20 +1,22 @@
-import { jsx as r } from "react/jsx-runtime";
-import i from "react";
-import { Input as p } from "./Input.js";
+import { jsx as o } from "react/jsx-runtime";
+import l from "react";
+import { Input as s } from "./Input.js";
 import { IconX as u } from "@tabler/icons-react";
 import { Button as f } from "../button/Button.js";
-import { clearInputElement as s } from "./Input.utils.js";
-import { ButtonGroup as d } from "../button-group/ButtonGroup.js";
-const b = i.forwardRef((o, t) => {
-  t = t || i.useRef(null);
+import { clearInputElement as d } from "./Input.utils.js";
+import { ButtonGroup as h } from "../button-group/ButtonGroup.js";
+const b = l.forwardRef((r, t) => {
+  t = t || l.useRef(null);
   const {
-    clearable: l = !1,
-    right: c,
-    ...m
-  } = o, a = (e) => {
-    s(t.current), o.onClear && o.onClear(e);
-  }, n = [c];
-  return l && n.push(/* @__PURE__ */ r(f, { color: "secondary", paddingSize: "xxs", onClick: (e) => a(e), children: /* @__PURE__ */ r(u, { size: 13 }) })), /* @__PURE__ */ r(p, { right: /* @__PURE__ */ r(d, { color: "primary", children: n }), type: "text", ref: t, ...m });
+    clearable: c = !1,
+    right: m,
+    ...a
+  } = r, p = (e) => {
+    d(t.current), r.onClear && r.onClear(e);
+  }, n = [m];
+  c && n.push(/* @__PURE__ */ o(f, { color: "secondary", paddingSize: "xxs", onClick: (e) => p(e), children: /* @__PURE__ */ o(u, { size: 13 }) }));
+  const i = n.filter(Boolean);
+  return /* @__PURE__ */ o(s, { right: i.length > 0 ? /* @__PURE__ */ o(h, { color: "primary", children: i }) : void 0, type: "text", ref: t, ...a });
 });
 export {
   b as TextInput

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {