@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/text-area-C_M8wliK.js

@@ -0,0 +1,239 @@
+import { jsxs as N, jsx as K } from "react/jsx-runtime";
+import { forwardRef as de, useRef as O, useCallback as k, useState as P, useLayoutEffect as ce, useMemo as le, useEffect as ue } from "react";
+import { c as fe } from "./index-D2ZczOXr.js";
+import { useTranslation as pe } from "react-i18next";
+import { u as me } from "./form-field-context-94LwgYTQ.js";
+import { u as ve } from "./registry-C9nwlNyL.js";
+const ge = {
+  id: "text-area",
+  capabilities: ["edit_inline"],
+  state: {
+    value: {
+      type: "string",
+      descriptionKey: "ui.agent.textArea.state.value",
+      description: "Current value of the textarea.",
+      read: (t) => t.getValue()
+    },
+    isEmpty: {
+      type: "boolean",
+      descriptionKey: "ui.agent.textArea.state.isEmpty",
+      description: "Whether the textarea has no value.",
+      read: (t) => t.getValue() === ""
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ value: string }",
+      descriptionKey: "ui.agent.textArea.actions.setValue",
+      description: "Replace the textarea value.",
+      invoke: (t, v) => {
+        t.setValue(v.value);
+      }
+    },
+    clear: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.textArea.actions.clear",
+      description: "Empty the textarea. Loses any typed value.",
+      invoke: (t) => {
+        t.clear();
+      }
+    },
+    focus: {
+      safety: "read",
+      descriptionKey: "ui.agent.textArea.actions.focus",
+      description: "Move keyboard focus to the textarea.",
+      invoke: (t) => {
+        t.focus();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "text-area",
+      description: "Marks the TextArea wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, be = fe(
+  [
+    "ds:block ds:w-full ds:border ds:rounded-[var(--radius-sm)] ds:bg-background ds:text-foreground",
+    "ds:leading-[var(--line-height-base)]",
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)]",
+    "ds:focus:outline-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
+    "ds:read-only:bg-muted ds:read-only:cursor-default",
+    "ds:transition-[height,color,background-color,border-color] ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:placeholder:text-muted-foreground"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:min-h-8 ds:text-[length:var(--font-size-sm)]",
+        md: "ds:min-h-[var(--min-target-size)] ds:text-[length:var(--font-size-base)]",
+        lg: "ds:min-h-[calc(var(--min-target-size)*1.5)] ds:text-[length:var(--font-size-lg)]"
+      },
+      tone: {
+        default: "ds:border-border",
+        error: "ds:border-destructive"
+      },
+      resize: {
+        auto: "ds:resize-none",
+        manual: "ds:resize-y"
+      }
+    },
+    defaultVariants: { size: "md", tone: "default", resize: "manual" }
+  }
+), he = (t) => t >= 1 ? "ds:text-destructive" : t >= 0.9 ? "ds:text-warning" : "ds:text-muted-foreground", ye = (t) => [...t].length, xe = de(
+  ({
+    size: t = "md",
+    tone: v = "default",
+    autoResize: s = !1,
+    minRows: g = 2,
+    maxRows: b,
+    showCounter: S,
+    className: W,
+    id: h,
+    disabled: _,
+    value: F,
+    defaultValue: E,
+    maxLength: a,
+    rows: q,
+    onChange: n,
+    onCompositionStart: y,
+    onCompositionEnd: x,
+    onInput: D,
+    ...$
+  }, c) => {
+    const { t: I } = pe(), i = me(), z = h ?? i.id, Y = i.disabled || _, G = i.invalid ? "error" : v, l = O(null), J = k(
+      (e) => {
+        l.current = e, typeof c == "function" ? c(e) : c && (c.current = e);
+      },
+      [c]
+    ), u = F !== void 0, [Q, j] = P(
+      String(E ?? "")
+    ), T = u ? String(F) : Q, p = O(!1), A = k(() => {
+      const e = l.current;
+      if (!e || !s) return;
+      const r = window.getComputedStyle(e), d = parseFloat(r.lineHeight), f = parseFloat(r.paddingTop), m = parseFloat(r.paddingBottom), se = parseFloat(r.borderTopWidth), ae = parseFloat(r.borderBottomWidth), M = f + m + se + ae, ne = (Number.isFinite(d) ? d : 24) * g + M, ie = typeof b == "number" ? (Number.isFinite(d) ? d : 24) * b + M : Number.POSITIVE_INFINITY;
+      e.style.height = "auto";
+      const oe = Math.max(ne, Math.min(e.scrollHeight, ie));
+      e.style.height = `${oe}px`;
+    }, [s, g, b]);
+    ce(() => {
+      s && A();
+    }, [s, A, T]);
+    const U = (e) => {
+      u || j(e.target.value), !p.current && (n == null || n(e));
+    }, X = (e) => {
+      p.current = !0, y == null || y(e);
+    }, Z = (e) => {
+      p.current = !1, x == null || x(e);
+      const r = e.currentTarget;
+      u || j(r.value), n == null || n({
+        ...e,
+        target: r,
+        currentTarget: r
+      }), s && A();
+    }, w = k((e) => {
+      var m;
+      const r = l.current;
+      if (!r) return;
+      const d = Object.getPrototypeOf(r), f = (m = Object.getOwnPropertyDescriptor(d, "value")) == null ? void 0 : m.set;
+      f == null || f.call(r, e), r.dispatchEvent(new Event("input", { bubbles: !0 })), r.dispatchEvent(new Event("change", { bubbles: !0 }));
+    }, []), L = le(
+      () => ({
+        getValue: () => {
+          var e;
+          return ((e = l.current) == null ? void 0 : e.value) ?? "";
+        },
+        setValue: (e) => w(e),
+        clear: () => w(""),
+        focus: () => {
+          var e;
+          return (e = l.current) == null ? void 0 : e.focus();
+        }
+      }),
+      [w]
+    );
+    ve(ge, L, h);
+    const o = typeof a == "number" && (S ?? !0) && a > 0, V = ye(T), B = o ? Math.max(0, a - V) : 0, R = o ? V / a : 0, [C, ee] = P("");
+    ue(() => {
+      if (!o) return;
+      const e = window.setTimeout(() => {
+        p.current || ee(
+          I("ui.inputs.textarea.charactersRemaining", {
+            count: B,
+            defaultValue: "{{count}} characters remaining"
+          })
+        );
+      }, 500);
+      return () => window.clearTimeout(e);
+    }, [o, B, I]);
+    const H = o ? `${z}-counter` : void 0, te = [i.describedBy || void 0, H].filter(Boolean).join(" ") || void 0, re = s ? "auto" : "manual";
+    return /* @__PURE__ */ N(
+      "div",
+      {
+        "data-component": "text-area",
+        "data-component-id": h,
+        className: "ds:flex ds:w-full ds:flex-col ds:gap-[var(--spacing-xs)]",
+        children: [
+          /* @__PURE__ */ K(
+            "textarea",
+            {
+              ref: J,
+              id: z,
+              value: u ? T : void 0,
+              defaultValue: u ? void 0 : E,
+              disabled: Y,
+              "aria-describedby": te,
+              "aria-invalid": i.invalid || void 0,
+              "aria-required": i.required || void 0,
+              maxLength: a,
+              rows: s ? g : q,
+              onChange: U,
+              onCompositionStart: X,
+              onCompositionEnd: Z,
+              onInput: D,
+              className: be({
+                size: t,
+                tone: G,
+                resize: re,
+                className: W
+              }),
+              ...$
+            }
+          ),
+          o ? /* @__PURE__ */ N(
+            "div",
+            {
+              id: H,
+              className: "ds:flex ds:justify-end type-meta ds:tabular-nums",
+              children: [
+                /* @__PURE__ */ N("span", { "aria-hidden": "true", className: he(R), children: [
+                  V,
+                  " / ",
+                  a
+                ] }),
+                /* @__PURE__ */ K("span", { className: "ds:sr-only", "aria-live": "polite", children: C })
+              ]
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+xe.displayName = "TextArea";
+export {
+  xe as T
+};
+//# sourceMappingURL=text-area-C_M8wliK.js.map

package/dist/_chunks/text-input-BX39e6T6.js

@@ -0,0 +1,272 @@
+import { jsxs as ee, jsx as d } from "react/jsx-runtime";
+import { forwardRef as te, useState as P, useRef as O, useCallback as R, useMemo as se } from "react";
+import { c as j } from "./index-D2ZczOXr.js";
+import { useTranslation as ae } from "react-i18next";
+import { u as ne } from "./form-field-context-94LwgYTQ.js";
+import { I as re, a as w, b as E } from "./input-surface-u4QB0lxe.js";
+import { u as ie } from "./registry-C9nwlNyL.js";
+import { X as oe } from "./x-CCcI3eJp.js";
+const de = {
+  id: "text-input",
+  capabilities: ["edit_inline"],
+  state: {
+    value: {
+      type: "string",
+      descriptionKey: "ui.agent.textInput.state.value",
+      description: "Current value of the text input.",
+      read: (s) => s.getValue()
+    },
+    isEmpty: {
+      type: "boolean",
+      descriptionKey: "ui.agent.textInput.state.isEmpty",
+      description: "Whether the input has no value.",
+      read: (s) => s.getValue() === ""
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ value: string }",
+      descriptionKey: "ui.agent.textInput.actions.setValue",
+      description: "Replace the input value.",
+      invoke: (s, c) => {
+        s.setValue(c.value);
+      }
+    },
+    clear: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.textInput.actions.clear",
+      description: "Empty the input. Loses any typed value.",
+      invoke: (s) => {
+        s.clear();
+      }
+    },
+    focus: {
+      safety: "read",
+      descriptionKey: "ui.agent.textInput.actions.focus",
+      description: "Move keyboard focus to the input.",
+      invoke: (s) => {
+        s.focus();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "text-input",
+      description: "Marks the TextInput wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, ue = j(
+  [
+    "ds:relative ds:flex ds:items-center ds:w-full",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:focus-within:outline-[length:var(--focus-ring-width)] ds:focus-within:outline-solid",
+    "ds:focus-within:outline-ring ds:focus-within:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-within:outline-[CanvasText]",
+    "ds:has-[:disabled]:cursor-not-allowed"
+  ].join(" ")
+), ce = j(
+  [
+    "ds:w-full ds:rounded-[var(--radius-sm)] ds:border ds:bg-background ds:text-foreground",
+    "ds:placeholder:text-muted-foreground",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:focus:outline-none ds:focus-visible:outline-none",
+    "ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
+    "ds:read-only:bg-muted ds:read-only:cursor-default"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: `${w.sm} ${E.sm}`,
+        md: `${w.md} ${E.md}`,
+        lg: `${w.lg} ${E.lg}`
+      },
+      tone: re,
+      hasStart: {
+        true: "ds:ps-10",
+        false: ""
+      },
+      hasEnd: {
+        true: "ds:pe-10",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { size: "sm", hasStart: !1, class: "ds:ps-3" },
+      { size: "md", hasStart: !1, class: "ds:ps-3" },
+      { size: "lg", hasStart: !1, class: "ds:ps-4" },
+      { size: "sm", hasEnd: !1, class: "ds:pe-3" },
+      { size: "md", hasEnd: !1, class: "ds:pe-3" },
+      { size: "lg", hasEnd: !1, class: "ds:pe-4" }
+    ],
+    defaultVariants: {
+      size: "md",
+      tone: "default",
+      hasStart: !1,
+      hasEnd: !1
+    }
+  }
+), _ = "ds:absolute ds:inset-y-0 ds:flex ds:items-center ds:pointer-events-none ds:text-muted-foreground", le = te(
+  ({
+    size: s = "md",
+    tone: c = "default",
+    startAdornment: l,
+    endAdornment: p,
+    clearable: $ = !1,
+    onClear: f,
+    className: U,
+    id: m,
+    disabled: D,
+    value: T,
+    defaultValue: F,
+    onChange: a,
+    onCompositionStart: v,
+    onCompositionEnd: g,
+    ...I
+  }, o) => {
+    const { t: K } = ae(), i = ne(), B = m ?? i.id, V = i.disabled || D, H = i.invalid ? "error" : c, u = T !== void 0, [M, h] = P(
+      String(F ?? "")
+    ), S = u ? String(T) : M, q = S.length > 0, b = O(!1), [W, k] = P(!1), n = O(null), X = R(
+      (e) => {
+        n.current = e, typeof o == "function" ? o(e) : o && (o.current = e);
+      },
+      [o]
+    ), A = !!l, z = $ && q && !V && !I.readOnly, G = !!p || z, L = (e) => {
+      u || h(e.target.value), !b.current && (a == null || a(e));
+    }, J = (e) => {
+      b.current = !0, k(!0), v == null || v(e);
+    }, Q = (e) => {
+      b.current = !1, k(!1), g == null || g(e);
+      const t = e.currentTarget;
+      u || h(t.value), a == null || a({
+        ...e,
+        target: t,
+        currentTarget: t
+      });
+    }, Y = () => {
+      var t;
+      u || h("");
+      const e = n.current;
+      if (e && a) {
+        const x = Object.getPrototypeOf(e), r = (t = Object.getOwnPropertyDescriptor(x, "value")) == null ? void 0 : t.set;
+        r == null || r.call(e, ""), a({
+          target: e,
+          currentTarget: e,
+          bubbles: !0,
+          type: "change",
+          nativeEvent: new Event("change", { bubbles: !0 }),
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isDefaultPrevented: () => !1,
+          isPropagationStopped: () => !1,
+          persist: () => {
+          }
+        });
+      }
+      f == null || f(), e == null || e.focus();
+    }, y = R((e) => {
+      var N;
+      const t = n.current;
+      if (!t) return;
+      const x = Object.getPrototypeOf(t), r = (N = Object.getOwnPropertyDescriptor(x, "value")) == null ? void 0 : N.set;
+      r == null || r.call(t, e), t.dispatchEvent(new Event("input", { bubbles: !0 })), t.dispatchEvent(new Event("change", { bubbles: !0 }));
+    }, []), Z = se(
+      () => ({
+        getValue: () => {
+          var e;
+          return ((e = n.current) == null ? void 0 : e.value) ?? "";
+        },
+        setValue: (e) => {
+          y(e);
+        },
+        clear: () => {
+          y("");
+        },
+        focus: () => {
+          var e;
+          (e = n.current) == null || e.focus();
+        }
+      }),
+      [y]
+    );
+    ie(de, Z, m);
+    const C = (e) => {
+      var t;
+      e.target !== n.current && (e.target.closest("button") || (t = n.current) == null || t.focus());
+    };
+    return /* @__PURE__ */ ee(
+      "div",
+      {
+        className: ue(),
+        onClick: C,
+        "data-component": "text-input",
+        "data-component-id": m,
+        "data-composing": W ? "true" : void 0,
+        children: [
+          l ? /* @__PURE__ */ d(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `${_} ds:start-0 ds:ps-3 ds:[&_svg]:size-4`,
+              children: l
+            }
+          ) : null,
+          /* @__PURE__ */ d(
+            "input",
+            {
+              ref: X,
+              id: B,
+              type: "text",
+              value: S,
+              disabled: V,
+              "aria-describedby": i.describedBy || void 0,
+              "aria-invalid": i.invalid || void 0,
+              "aria-required": i.required || void 0,
+              onChange: L,
+              onCompositionStart: J,
+              onCompositionEnd: Q,
+              className: ce({
+                size: s,
+                tone: H,
+                hasStart: A,
+                hasEnd: G,
+                className: U
+              }),
+              ...I
+            }
+          ),
+          z ? /* @__PURE__ */ d(
+            "button",
+            {
+              type: "button",
+              "aria-label": K("ui.inputs.text.clear", "Clear input"),
+              onClick: Y,
+              className: "ds:absolute ds:inset-y-0 ds:end-0 ds:pe-3 ds:flex ds:items-center ds:pointer-events-auto ds:text-muted-foreground ds:hover:text-foreground ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+              children: /* @__PURE__ */ d(oe, { "aria-hidden": "true", className: "ds:size-4" })
+            }
+          ) : p ? /* @__PURE__ */ d(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `${_} ds:end-0 ds:pe-3 ds:[&_svg]:size-4`,
+              children: p
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+le.displayName = "TextInput";
+export {
+  le as T
+};
+//# sourceMappingURL=text-input-BX39e6T6.js.map