@spear-ai/spectral 1.3.43 → 1.3.44

package/dist/RadioButtonGroup/RadioButtonGroupBase.js

@@ -1,17 +1,17 @@
 "use client";
 import "../styles/main.css";
 import { jsx as s } from "react/jsx-runtime";
-import { Slot as v } from "../primitives/slot.js";
+import { Slot as m } from "../primitives/slot.js";
 import { c as l } from "../twUtils-CRiPKpXj.js";
-import { createContext as h, useContext as x } from "react";
-const u = h(null), G = ({
+import { createContext as x, useContext as h } from "react";
+const c = x(null), G = ({
   value: t,
-  onValueChange: r,
+  onValueChange: n,
   children: i,
   className: o,
-  isKeptActive: n = !1,
+  isKeptActive: r = !1,
   expanded: e = !1
-}) => /* @__PURE__ */ s(u.Provider, { value: { value: t, onValueChange: r, isKeptActive: n, expanded: e }, children: /* @__PURE__ */ s(
+}) => /* @__PURE__ */ s(c.Provider, { value: { value: t, onValueChange: n, isKeptActive: r, expanded: e }, children: /* @__PURE__ */ s(
   "div",
   {
     role: "radiogroup",
@@ -25,34 +25,35 @@ const u = h(null), G = ({
   }
 ) }), R = ({
   value: t,
-  children: r,
+  children: n,
   className: i,
   disabled: o = !1,
-  asChild: n = !1
+  asChild: r = !1
 }) => {
-  const e = x(u);
+  const e = h(c);
   if (!e)
     throw new Error("RadioButtonGroupItem must be used within a RadioButtonGroup");
-  const { value: c, onValueChange: a, isKeptActive: g, expanded: f } = e, d = c === t, b = () => {
+  const { value: g, onValueChange: a, isKeptActive: u, expanded: b } = e, d = g === t, f = () => {
     !o && a && a(t);
-  }, p = n ? v : "button", m = {
+  }, v = r ? m : "button", p = {
     role: "radio",
     "aria-checked": d,
     "data-state": d ? "on" : "off",
     disabled: o,
-    onClick: b,
+    onClick: f,
     className: l(
       "bg-toggle-bg inline-flex items-center justify-center gap-2 border text-sm font-medium disabled:pointer-events-none disabled:opacity-50",
       "disabled:cursor-not-allowed hover:cursor-pointer text-toggle-text hover:bg-toggle-bg--hover hover:text-toggle-text--hover transition-[colors]",
       "[&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus:outline-none",
-      ' outline-none border-toggle-border hover:border-toggle-border--hover h-9 px-3 min-w-9 [&_svg:not([class*="size-"]):not([width]):not([height])]:size-4',
-      "rounded-none shadow-none focus:z-10 focus-visible:z-10 [&:not(:first-child)]:border-l-0",
-      f && "w-full",
-      g && "data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active data-[state=on]:border-toggle-border--active",
+      'outline-none border-toggle-border hover:border-toggle-border--hover h-9 px-3 min-w-9 [&_svg:not([class*="size-"]):not([width]):not([height])]:size-4',
+      "rounded-none shadow-none focus:z-10 focus-visible:z-10 [&:not(:first-child)]:border-l-0 active:bg-toggle-bg--active active:text-toggle-text--active",
+      "active:border-toggle-border--active",
+      b && "w-full",
+      u && "data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active data-[state=on]:border-toggle-border--active",
       i
     )
   };
-  return /* @__PURE__ */ s(p, { ...!n && { type: "button" }, ...m, children: r });
+  return /* @__PURE__ */ s(v, { ...!r && { type: "button" }, ...p, children: n });
 };
 export {
   G as RadioButtonGroupBase,

package/dist/Select/SelectBase.d.ts

@@ -0,0 +1,26 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type SelectState = 'default' | 'error' | 'disabled' | 'loading';
+export interface SelectOption {
+    label: string;
+    value: string;
+    group?: string;
+    disabled?: boolean;
+}
+export interface SelectBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    options: SelectOption[];
+    placeholder?: string;
+    state?: SelectState;
+    errorMessage?: string;
+    emptyMessage?: ReactNode;
+    loadingMessage?: string;
+    name?: string;
+    id?: string;
+    label?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+}
+export declare const SelectBase: import('react').ForwardRefExoticComponent<SelectBaseProps & import('react').RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=SelectBase.d.ts.map

package/dist/Select/SelectBase.js

@@ -0,0 +1,233 @@
+"use client";
+import "../styles/main.css";
+import { jsxs as p, jsx as n, Fragment as ee } from "react/jsx-runtime";
+import { c as b } from "../twUtils-CRiPKpXj.js";
+import { forwardRef as te, useId as re, useState as C, useRef as T, useMemo as _, useCallback as E, useEffect as S } from "react";
+import { L as $ } from "../loader-circle-CvdzOiQ_.js";
+import { C as se, a as ne } from "../chevron-down-UbkgS76q.js";
+const B = "h-4 w-4", G = "h-5 w-5", ae = (t) => ({
+  error: "border-danger hover:border-danger focus-visible:border-danger focus-visible:ring-danger",
+  loading: "cursor-wait pointer-events-none border-input-border--disabled",
+  disabled: "cursor-not-allowed opacity-50 border-input-border--disabled bg-input-bg--disabled",
+  default: ""
+})[t], de = (t, l, i) => b(
+  "flex h-12 w-full items-center justify-between rounded-lg border border-input-border bg-input-bg px-4 py-3 text-sm",
+  "hover:border-input-border--hover focus:border-input-border--focus focus:outline-none",
+  "focus:ring-2 focus:ring-black focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2",
+  "disabled:cursor-not-allowed disabled:opacity-50 disabled:border-input-border--disabled disabled:bg-input-bg--disabled",
+  "transition duration-200 text-input-text [&>span]:line-clamp-1",
+  l && "border-input-border--focus ring-2 ring-black ring-offset-2",
+  ae(t),
+  i
+), le = (t) => b(
+  "absolute top-full left-0 right-0 z-50 mt-1 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-input-border bg-input-bg shadow-md",
+  "transition-all duration-200 origin-top",
+  t ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-1 pointer-events-none"
+), ie = (t) => {
+  const l = T(null);
+  return S(() => {
+    const i = (a) => {
+      l.current && !l.current.contains(a.target) && t();
+    };
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, [t]), l;
+}, oe = (t, l, i, a, m) => {
+  const [r, c] = C(-1);
+  S(() => {
+    if (m) {
+      const s = t.findIndex((g) => g.value === l);
+      c(s >= 0 ? s : 0);
+    } else
+      c(-1);
+  }, [m, l, t]);
+  const k = E(
+    (s) => {
+      if (!m)
+        return s.key === "ArrowDown" || s.key === "ArrowUp" || s.key === " " || s.key === "Enter" ? (s.preventDefault(), "open") : void 0;
+      const y = {
+        ArrowDown: () => {
+          s.preventDefault(), c((h) => {
+            const o = Math.min(h + 1, t.length - 1);
+            return t[o]?.disabled && o < t.length - 1 ? Math.min(o + 1, t.length - 1) : o;
+          });
+        },
+        ArrowUp: () => {
+          s.preventDefault(), c((h) => {
+            const o = Math.max(h - 1, 0);
+            return t[o]?.disabled && o > 0 ? Math.max(o - 1, 0) : o;
+          });
+        },
+        Enter: () => {
+          s.preventDefault(), r >= 0 && t[r] && !t[r].disabled && (i(t[r].value), a());
+        },
+        " ": () => {
+          s.preventDefault(), r >= 0 && t[r] && !t[r].disabled && (i(t[r].value), a());
+        },
+        Escape: () => {
+          s.preventDefault(), a();
+        },
+        Home: () => {
+          s.preventDefault(), c(0);
+        },
+        End: () => {
+          s.preventDefault(), c(t.length - 1);
+        }
+      }[s.key];
+      y && y();
+    },
+    [t, r, i, a, m]
+  );
+  return { focusedIndex: r, setFocusedIndex: c, handleKeyDown: k };
+}, ce = te(
+  ({
+    value: t,
+    defaultValue: l,
+    onChange: i,
+    options: a = [],
+    placeholder: m = "Select an option",
+    state: r = "default",
+    errorMessage: c,
+    emptyMessage: k = "No options found",
+    loadingMessage: s = "Loading...",
+    name: g,
+    id: y,
+    label: h,
+    className: o,
+    "aria-label": I,
+    "aria-describedby": U,
+    ...j
+  }, Z) => {
+    const z = re(), L = y || `${g}-${z}`, M = `${L}-error`, [f, x] = C(!1), [P, W] = C(l || ""), A = t !== void 0, w = A ? t : P, q = ie(() => x(!1)), D = T(null), O = j.disabled || r === "disabled", J = r === "loading", Q = r === "error", v = _(() => {
+      const e = {}, u = [];
+      return a.forEach((d) => {
+        d.group ? (e[d.group] || (e[d.group] = []), e[d.group].push(d)) : u.push(d);
+      }), { groups: e, ungrouped: u, hasGroups: Object.keys(e).length > 0 };
+    }, [a]), K = _(() => a.find((e) => e.value === w), [a, w]), { focusedIndex: N, handleKeyDown: R } = oe(
+      a,
+      w,
+      F,
+      () => x(!1),
+      f
+    ), V = E(() => {
+      O || x((e) => !e);
+    }, [O]);
+    function F(e) {
+      a.find((d) => d.value === e)?.disabled || (A || W(e), i?.(e), x(!1));
+    }
+    const X = E(
+      (e) => {
+        R(e) === "open" && x(!0);
+      },
+      [R]
+    );
+    S(() => {
+      if (f && N >= 0 && D.current) {
+        const e = D.current.children[N];
+        e && e.scrollIntoView({ block: "nearest" });
+      }
+    }, [N, f]);
+    const H = (e, u) => {
+      const d = w === e.value;
+      return /* @__PURE__ */ p(
+        "button",
+        {
+          type: "button",
+          className: b(
+            "relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none",
+            "hover:bg-input-bg--hover focus:bg-input-bg--hover hover:cursor-pointer",
+            "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            u === N && "bg-input-bg--hover",
+            d && "bg-input-bg--selected text-input-text"
+          ),
+          onClick: () => F(e.value),
+          disabled: e.disabled,
+          "data-disabled": e.disabled,
+          "aria-selected": d,
+          role: "option",
+          children: [
+            /* @__PURE__ */ n("span", { className: "block truncate", children: e.label }),
+            d && /* @__PURE__ */ n("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ n(ne, { className: b(B, "text-input-text") }) })
+          ]
+        },
+        e.value
+      );
+    }, Y = () => ({
+      "--select-min-width": "8rem",
+      "--select-border-radius": "0.5rem",
+      "--select-trigger-height": "3rem"
+    });
+    return /* @__PURE__ */ p("div", { className: "w-full", "data-testid": "select-root", children: [
+      /* @__PURE__ */ p("div", { ref: q, className: "relative", "data-testid": "select-wrapper", children: [
+        /* @__PURE__ */ p(
+          "button",
+          {
+            ref: Z,
+            type: "button",
+            id: L,
+            name: g,
+            className: de(r, f, o),
+            onClick: V,
+            onKeyDown: X,
+            disabled: O,
+            "aria-label": I || h,
+            "aria-describedby": b(Q && M, U),
+            "aria-expanded": f,
+            "aria-haspopup": "listbox",
+            "data-state": r,
+            style: Y(),
+            ...j,
+            children: [
+              /* @__PURE__ */ n("span", { className: "block truncate", children: K ? K.label : /* @__PURE__ */ n("span", { className: "text-input-text-placeholder", children: m }) }),
+              /* @__PURE__ */ n("div", { className: "flex items-center", children: r === "loading" ? /* @__PURE__ */ n($, { className: b(G, "text-input-icon animate-spin") }) : /* @__PURE__ */ n(
+                se,
+                {
+                  className: b(
+                    G,
+                    "text-input-icon transition-transform duration-200",
+                    f && "rotate-180"
+                  )
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: le(f), "data-testid": "select-dropdown", children: /* @__PURE__ */ n("div", { className: "p-1", children: /* @__PURE__ */ n(
+          "div",
+          {
+            ref: D,
+            className: "max-h-80 overflow-x-hidden overflow-y-auto",
+            role: "listbox",
+            "aria-multiselectable": "false",
+            tabIndex: -1,
+            children: J ? /* @__PURE__ */ p("div", { className: "text-input-text-secondary flex items-center justify-center gap-2 py-6 text-sm", children: [
+              /* @__PURE__ */ n($, { className: b(B, "animate-spin") }),
+              s
+            ] }) : a.length === 0 ? /* @__PURE__ */ n("div", { className: "text-input-text-secondary py-6 text-center text-sm", children: k }) : /* @__PURE__ */ p(ee, { children: [
+              v.ungrouped.length > 0 && /* @__PURE__ */ n("div", { className: "mb-1", children: v.ungrouped.map((e) => H(e, a.indexOf(e))) }),
+              Object.entries(v.groups).map(([e, u]) => /* @__PURE__ */ p("div", { className: "mb-1", children: [
+                (v.ungrouped.length > 0 || Object.keys(v.groups).indexOf(e) > 0) && /* @__PURE__ */ n("div", { className: "bg-input-border -mx-1 my-1 h-px" }),
+                /* @__PURE__ */ n("div", { className: "text-input-text-secondary px-2 py-1.5 text-sm font-semibold", children: e }),
+                u.map((d) => H(d, a.indexOf(d)))
+              ] }, e))
+            ] })
+          }
+        ) }) })
+      ] }),
+      r === "error" && c && /* @__PURE__ */ n(
+        "p",
+        {
+          id: M,
+          className: "text-danger mt-1.5 text-sm",
+          "data-testid": "select-error-message",
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          children: c
+        }
+      )
+    ] });
+  }
+);
+ce.displayName = "SelectBase";
+export {
+  ce as SelectBase
+};

package/dist/Select.d.ts

@@ -0,0 +1,50 @@
+import { SelectBase, SelectBaseProps, SelectOption } from './SelectBase';
+import { ReactNode } from 'react';
+export type SelectState = 'default' | 'error' | 'disabled' | 'loading';
+export type SelectItem = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export interface SelectProps extends Omit<SelectBaseProps, 'options' | 'onChange'> {
+    contentClassName?: string;
+    defaultValue?: string;
+    itemClassName?: string;
+    items: SelectItem[];
+    onValueChange?: (value: string) => void;
+    placeholder: string;
+    triggerClassName?: string;
+    value?: string;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    state?: SelectState;
+    emptyMessage?: ReactNode;
+    errorMessage?: string;
+    label?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+}
+declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLButtonElement>> & {
+    Root: ({ children, ...props }: {
+        children: ReactNode;
+    } & any) => import("react/jsx-runtime").JSX.Element;
+    Group: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Value: ({ placeholder, children }: {
+        placeholder?: string;
+        children?: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Trigger: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Label: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Item: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        disabled?: boolean;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Separator: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    EmptyMessage: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    LoadingMessage: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        message?: string;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+};
+export { Select, SelectBase, type SelectBaseProps, type SelectOption };
+//# sourceMappingURL=Select.d.ts.map

package/dist/Select.js

@@ -0,0 +1,136 @@
+"use client";
+import "./styles/main.css";
+import { jsx as s, jsxs as m } from "react/jsx-runtime";
+import { SelectBase as E } from "./Select/SelectBase.js";
+import { c as i } from "./twUtils-CRiPKpXj.js";
+import { forwardRef as o, useId as $ } from "react";
+import { a as k } from "./chevron-down-UbkgS76q.js";
+import { L as O } from "./loader-circle-CvdzOiQ_.js";
+const q = ({ children: e, ...t }) => /* @__PURE__ */ s("div", { ...t, children: e }), p = o(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: i("text-text-secondary px-2 py-1.5 text-sm font-semibold", e), ...t }));
+p.displayName = "SelectGroup";
+const z = ({ placeholder: e, children: t }) => /* @__PURE__ */ s("span", { children: t || e }), b = o(
+  ({ className: e, children: t, ...a }, l) => /* @__PURE__ */ s("button", { ref: l, className: e, ...a, children: t })
+);
+b.displayName = "SelectTrigger";
+const u = o(
+  ({ className: e, children: t, ...a }, l) => /* @__PURE__ */ s("div", { ref: l, className: e, ...a, children: t })
+);
+u.displayName = "SelectContent";
+const g = o(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: i("text-input-text-secondary px-2 py-1.5 text-sm font-semibold", e), ...t }));
+g.displayName = "SelectLabel";
+const y = o(
+  ({ className: e, children: t, disabled: a, ...l }, r) => /* @__PURE__ */ m(
+    "div",
+    {
+      ref: r,
+      className: i(
+        "relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none",
+        "hover:bg-input-bg--hover focus:bg-input-bg--hover hover:cursor-pointer",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        e
+      ),
+      "data-disabled": a,
+      ...l,
+      children: [
+        /* @__PURE__ */ s("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ s(k, { className: "text-input-text h-4 w-4" }) }),
+        /* @__PURE__ */ s("span", { children: t })
+      ]
+    }
+  )
+);
+y.displayName = "SelectItem";
+const x = o(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { ref: a, className: i("bg-input-border -mx-1 my-1 h-px", e), ...t }));
+x.displayName = "SelectSeparator";
+const S = o(
+  ({ className: e, children: t, ...a }, l) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: l,
+      className: i("text-input-text-secondary py-6 text-center text-sm", e),
+      role: "status",
+      ...a,
+      children: t
+    }
+  )
+);
+S.displayName = "SelectEmptyMessage";
+const f = o(
+  ({ className: e, message: t = "Loading...", children: a, ...l }, r) => /* @__PURE__ */ m(
+    "div",
+    {
+      ref: r,
+      className: i("text-input-text-secondary flex items-center justify-center gap-2 py-6 text-sm", e),
+      role: "status",
+      "aria-live": "polite",
+      ...l,
+      children: [
+        /* @__PURE__ */ s(O, { className: "h-4 w-4 animate-spin" }),
+        a || t
+      ]
+    }
+  )
+);
+f.displayName = "SelectLoadingMessage";
+const N = o((e, t) => {
+  const {
+    defaultValue: a,
+    items: l = [],
+    onValueChange: r,
+    placeholder: v,
+    triggerClassName: h,
+    value: C,
+    disabled: L,
+    name: c,
+    id: I,
+    state: d = "default",
+    emptyMessage: M = "No items found",
+    errorMessage: j,
+    label: w,
+    "aria-label": V,
+    "aria-describedby": D,
+    ...G
+  } = e, R = $(), T = I || `${c}-${R}`, B = l.map((n) => ({
+    label: n.label,
+    value: n.value,
+    disabled: n.disabled
+  }));
+  return /* @__PURE__ */ s(
+    E,
+    {
+      ref: t,
+      id: T,
+      name: c,
+      value: C,
+      defaultValue: a,
+      onChange: r,
+      options: B,
+      placeholder: v,
+      state: d,
+      errorMessage: j,
+      emptyMessage: M,
+      label: w,
+      disabled: L || d === "disabled",
+      "aria-label": V,
+      "aria-describedby": D,
+      className: h,
+      ...G
+    }
+  );
+});
+N.displayName = "Select";
+const U = Object.assign(N, {
+  Root: q,
+  Group: p,
+  Value: z,
+  Trigger: b,
+  Content: u,
+  Label: g,
+  Item: y,
+  Separator: x,
+  EmptyMessage: S,
+  LoadingMessage: f
+});
+export {
+  U as Select,
+  E as SelectBase
+};

package/dist/Textarea/TextareaUtils.d.ts

@@ -0,0 +1,19 @@
+import { ChangeEvent, ClipboardEvent, FocusEvent } from 'react';
+export type UseTextareaOptions = {
+    maxLength: number;
+    value: string;
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+};
+export type UseTextareaReturn = {
+    handleFocus: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    handleBlur: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    handlePaste: (e: ClipboardEvent<HTMLTextAreaElement>) => void;
+};
+/**
+ * Custom hook for textarea functionality with character limits and event handling
+ */
+export declare const useTextarea: ({ maxLength, value, onChange, onFocus, onBlur }: UseTextareaOptions) => UseTextareaReturn;
+//# sourceMappingURL=TextareaUtils.d.ts.map

package/dist/Textarea/TextareaUtils.js

@@ -0,0 +1,54 @@
+"use client";
+import { useCallback as i } from "react";
+const v = (t, s, a) => {
+  t.target.value.length <= s && a?.(t);
+}, V = (t, s, a, r) => {
+  const c = t.clipboardData.getData("text"), o = s || "", n = t.currentTarget, l = n.selectionStart || 0, u = n.selectionEnd || 0, e = o.substring(0, l), d = o.substring(u);
+  if ((e + c + d).length > a) {
+    t.preventDefault();
+    const b = u - l, f = a - o.length + b, p = c.substring(0, Math.max(0, f)), g = e + p + d, T = {
+      target: { value: g, name: n.name },
+      currentTarget: { value: g, name: n.name },
+      type: "change",
+      preventDefault: () => {
+      },
+      stopPropagation: () => {
+      }
+    };
+    r?.(T), setTimeout(() => {
+      const h = l + p.length;
+      n.setSelectionRange(h, h);
+    }, 0);
+  }
+}, m = ({ maxLength: t, value: s, onChange: a, onFocus: r, onBlur: c }) => {
+  const o = i(
+    (e) => {
+      r?.(e);
+    },
+    [r]
+  ), n = i(
+    (e) => {
+      c?.(e);
+    },
+    [c]
+  ), l = i(
+    (e) => {
+      v(e, t, a);
+    },
+    [t, a]
+  ), u = i(
+    (e) => {
+      V(e, s, t, a);
+    },
+    [s, t, a]
+  );
+  return {
+    handleFocus: o,
+    handleBlur: n,
+    handleChange: l,
+    handlePaste: u
+  };
+};
+export {
+  m as useTextarea
+};

package/dist/Textarea.d.ts

@@ -0,0 +1,17 @@
+import { ChangeEvent, ComponentProps, FocusEvent } from 'react';
+export type TextareaState = 'default' | 'error' | 'disabled' | 'loading';
+export type TextareaProps = ComponentProps<'textarea'> & {
+    className?: string;
+    state?: TextareaState;
+    errorMessage?: string;
+    name: string;
+    id?: string;
+    label: string;
+    value?: string;
+    maxLength?: number;
+    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+};
+export declare const Textarea: import('react').ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=Textarea.d.ts.map