@spear-ai/spectral 1.3.62 → 1.3.63

package/dist/Input.js

@@ -1,26 +1,26 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { usePasswordVisibility as _, usePrefixWidth as q, useClearOnFocus as tt } from "./Input/InputUtils.js";
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { usePasswordVisibility as q, usePrefixWidth as tt, useClearOnFocus as et } from "./Input/InputUtils.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/CalendarIcon.js";
-import { CheckCircleIcon as et } from "./Icons/CheckCircleIcon.js";
+import { CheckCircleIcon as rt } from "./Icons/CheckCircleIcon.js";
 import "./Icons/CheckSquareIcon.js";
 import "./Icons/CheckmarkIcon.js";
 import "./Icons/ChevronDownIcon.js";
 import "./Icons/ChevronUpIcon.js";
 import "./Icons/ClockIcon.js";
-import { CloseCircleIcon as rt } from "./Icons/CloseCircleIcon.js";
+import { CloseCircleIcon as ot } from "./Icons/CloseCircleIcon.js";
 import "./Icons/CloseIcon.js";
 import "./Icons/DashboardIcon.js";
 import "./Icons/DeleteIcon.js";
 import "./Icons/DurationIcon.js";
 import "./Icons/EmailIcon.js";
 import "./Icons/EraserIcon.js";
-import { ErrorIcon as ot } from "./Icons/ErrorIcon.js";
-import { EyeClosedIcon as it } from "./Icons/EyeClosedIcon.js";
+import { ErrorIcon as it } from "./Icons/ErrorIcon.js";
+import { EyeClosedIcon as st } from "./Icons/EyeClosedIcon.js";
 import "./Icons/EyeClosedIcon2.js";
-import { EyeOpenIcon as st } from "./Icons/EyeOpenIcon.js";
+import { EyeOpenIcon as at } from "./Icons/EyeOpenIcon.js";
 import "./Icons/GoToFirstIcon.js";
 import "./Icons/GoToLastIcon.js";
 import "./Icons/HarmonicCursorsIcon.js";
@@ -29,9 +29,10 @@ import "./Icons/LabelIcon.js";
 import "./Icons/LassoIcon.js";
 import "./Icons/LineToolIcon.js";
 import "./Icons/LiveViewIcon.js";
-import { LoaderIcon as at } from "./Icons/LoaderIcon.js";
+import { LoaderIcon as nt } from "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
 import "./Icons/LogoutIcon.js";
+import "./Icons/MessagesIcon.js";
 import "./Icons/MetadataIcon.js";
 import "./Icons/MinusIcon.js";
 import "./Icons/OntologyIcon.js";
@@ -49,11 +50,11 @@ import "./Icons/WarningIcon.js";
 import "./Icons/ZoomAllIcon.js";
 import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
-import { Label as nt } from "./Label.js";
-import { useFormFieldId as pt, getAriaProps as lt, getInputClasses as ct, useFormFieldState as mt, getFormFieldCSSProperties as dt, ErrorMessage as ut } from "./utils/formFieldUtils.js";
-import { c as d } from "./twUtils-CRiPKpXj.js";
-import { forwardRef as ft, useRef as ht, useCallback as u } from "react";
-const bt = (l) => ({
+import { Label as pt } from "./Label.js";
+import { useFormFieldId as lt, getAriaProps as ct, getInputClasses as mt, useFormFieldState as dt, getFormFieldCSSProperties as ut, ErrorMessage as ft } from "./utils/formFieldUtils.js";
+import { cn as f } from "./utils/twUtils.js";
+import { forwardRef as ht, useRef as bt, useCallback as c } from "react";
+const xt = (m) => ({
   email: "email",
   password: "current-password",
   tel: "tel",
@@ -62,133 +63,141 @@ const bt = (l) => ({
   number: "off",
   date: "off",
   "datetime-local": "off"
-})[l] || "off", xt = ft(
+})[m] || "off", gt = ht(
   ({
-    className: l,
-    clearOnFocus: f = !1,
+    className: m,
+    clearOnFocus: h = !1,
     disabled: k,
-    errorMessage: h,
+    errorMessage: b,
     id: P,
-    label: e,
-    name: b,
-    onBlur: x,
-    onChange: g,
+    label: r,
+    name: x,
+    onBlur: g,
+    onValueChange: a,
     onFocus: C,
     placeholder: R,
-    prefix: a,
+    prefix: n,
     showClearButton: S = !1,
     suppressHydrationWarning: $ = !0,
-    state: r = "default",
-    type: n = "text",
-    value: w = "",
-    required: y,
-    startIcon: v,
+    state: o = "default",
+    type: p = "text",
+    value: v = "",
+    required: w,
+    startIcon: y,
     endIcon: I,
-    "aria-label": V,
-    "aria-describedby": L,
-    ...M
-  }, O) => {
-    const p = pt(P, b), N = `${p}-error`, { isDisabled: F, isLoading: j, isInvalid: A } = mt(k, r), B = lt(r, y, N, L), H = ht(null), o = O || H, { isVisible: c, toggleVisibility: W, inputType: D } = _(), { prefixWidth: T, prefixRef: G } = q(a), { handleFocus: E } = tt(f, g), J = u(
-      (i) => {
-        x?.(i);
+    "aria-label": L,
+    "aria-describedby": M,
+    ...O
+  }, j) => {
+    const l = lt(P, x), N = `${l}-error`, { isDisabled: F, isLoading: A, isInvalid: B } = dt(k, o), H = ct(o, w, N, M), W = bt(null), i = j || W, { isVisible: d, toggleVisibility: D, inputType: T } = q(), { prefixWidth: V, prefixRef: G } = tt(n), { handleFocus: E } = et(
+      h,
+      a ? (e) => a(e.target.value) : void 0
+    ), J = c(
+      (e) => {
+        g?.(e);
       },
-      [x]
-    ), K = u(
-      (i) => {
-        E(i, C);
+      [g]
+    ), K = c(
+      (e) => {
+        E(e, C);
       },
       [E, C]
-    ), Q = u(() => {
-      o.current && (o.current.value = "", o.current.dispatchEvent(new Event("input", { bubbles: !0 })), o.current.focus());
-    }, [o]), z = S && w.length > 0, U = () => {
-      const i = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", s = {
+    ), Q = c(
+      (e) => {
+        a?.(e.target.value);
+      },
+      [a]
+    ), U = c(() => {
+      i.current && (i.current.value = "", i.current.dispatchEvent(new Event("input", { bubbles: !0 })), i.current.focus());
+    }, [i]), z = S && v.length > 0, X = () => {
+      const e = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", s = {
         password: () => /* @__PURE__ */ t(
           "button",
           {
-            className: i,
+            className: e,
             type: "button",
-            onClick: W,
-            "aria-label": c ? `Hide ${e}` : `Show ${e}`,
-            "aria-pressed": c,
-            "aria-controls": p,
+            onClick: D,
+            "aria-label": d ? `Hide ${r}` : `Show ${r}`,
+            "aria-pressed": d,
+            "aria-controls": l,
             "data-testid": "input-password-toggle",
-            children: c ? /* @__PURE__ */ t(it, { size: 22 }) : /* @__PURE__ */ t(st, { size: 22 })
+            children: d ? /* @__PURE__ */ t(st, { size: 22 }) : /* @__PURE__ */ t(at, { size: 22 })
           }
         ),
         clear: () => /* @__PURE__ */ t(
           "button",
           {
-            className: i,
+            className: e,
             type: "button",
-            onClick: Q,
-            "aria-label": `Clear ${e}`,
+            onClick: U,
+            "aria-label": `Clear ${r}`,
             "data-testid": "input-clear-button",
-            children: /* @__PURE__ */ t(rt, { size: 24 })
+            children: /* @__PURE__ */ t(ot, { size: 24 })
           }
         ),
-        loading: () => /* @__PURE__ */ t("div", { className: "absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "input-loading-icon", children: /* @__PURE__ */ t(at, { size: 24 }) }),
-        error: () => /* @__PURE__ */ t("div", { className: "text-danger-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "input-error-icon", children: /* @__PURE__ */ t(ot, { size: 24 }) }),
-        success: () => /* @__PURE__ */ t("div", { className: "text-success-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "input-success-icon", children: /* @__PURE__ */ t(et, { size: 24 }) })
+        loading: () => /* @__PURE__ */ t("div", { className: "absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "input-loading-icon", children: /* @__PURE__ */ t(nt, { size: 24 }) }),
+        error: () => /* @__PURE__ */ t("div", { className: "text-danger-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "input-error-icon", children: /* @__PURE__ */ t(it, { size: 24 }) }),
+        success: () => /* @__PURE__ */ t("div", { className: "text-success-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "input-success-icon", children: /* @__PURE__ */ t(rt, { size: 24 }) })
       };
-      return I || (n === "password" ? s.password() : z ? s.clear() : j ? s.loading() : r === "success" ? s.success() : r === "error" ? s.error() : null);
-    }, X = () => v || null, Y = d(
-      ct(r, l),
+      return I || (p === "password" ? s.password() : z ? s.clear() : A ? s.loading() : o === "success" ? s.success() : o === "error" ? s.error() : null);
+    }, Y = () => y || null, Z = f(
+      mt(o, m),
       "[text-indent:var(--prefix-width)]",
       z && "pr-10"
-    ), Z = d(
+    ), _ = f(
       "pointer-events-none absolute inset-y-0 left-4 flex items-center text-base text-input-text-prefix opacity-100 peer-disabled:opacity-50"
     );
-    return /* @__PURE__ */ m("div", { className: "w-full space-y-1.5", "data-testid": "input-root", children: [
-      e && /* @__PURE__ */ t(
-        nt,
+    return /* @__PURE__ */ u("div", { className: "w-full space-y-1.5", "data-testid": "input-root", children: [
+      r && /* @__PURE__ */ t(
+        pt,
         {
-          htmlFor: p,
-          className: d(
+          htmlFor: l,
+          className: f(
             "mb-2 block",
             F && "text-input-text--disabled placeholder:text-input-text-placeholder cursor-not-allowed"
           ),
-          children: e
+          children: r
         }
       ),
-      /* @__PURE__ */ m("div", { className: "relative", "data-testid": "input-wrapper", children: [
-        /* @__PURE__ */ m("div", { className: "relative", children: [
-          X(),
-          a && /* @__PURE__ */ t("span", { ref: G, className: Z, children: a }),
+      /* @__PURE__ */ u("div", { className: "relative", "data-testid": "input-wrapper", children: [
+        /* @__PURE__ */ u("div", { className: "relative", children: [
+          Y(),
+          n && /* @__PURE__ */ t("span", { ref: G, className: _, children: n }),
           /* @__PURE__ */ t(
             "input",
             {
-              id: p,
-              name: b,
-              ref: o,
-              type: n === "password" ? D : n,
-              value: w,
+              id: l,
+              name: x,
+              ref: i,
+              type: p === "password" ? T : p,
+              value: v,
               disabled: F,
-              required: y,
-              autoComplete: bt(n),
-              className: Y,
-              onChange: g,
+              required: w,
+              autoComplete: xt(p),
+              className: Z,
+              onChange: Q,
               onFocus: K,
               onBlur: J,
-              placeholder: R || e,
+              placeholder: R || r,
               suppressHydrationWarning: $,
-              ...B,
-              ...M,
+              ...H,
+              ...O,
               "data-testid": "input-input",
-              "data-state": r,
-              style: dt({
-                "--prefix-width": a ? `${T}px` : "0px"
+              "data-state": o,
+              style: ut({
+                "--prefix-width": n ? `${V}px` : "0px"
               }),
-              "aria-label": V || e
+              "aria-label": L || r
             }
           ),
-          U()
+          X()
         ] }),
-        A && h && /* @__PURE__ */ t(ut, { id: N, message: h })
+        B && b && /* @__PURE__ */ t(ft, { id: N, message: b })
       ] })
     ] });
   }
 );
-xt.displayName = "Input";
+gt.displayName = "Input";
 export {
-  xt as Input
+  gt as Input
 };

package/dist/InputGroup.d.ts

@@ -0,0 +1,16 @@
+import { Button } from '../../primitives/button';
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
+export declare const InputGroup: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+export declare const inputGroupAddonVariants: (props?: ({
+    align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const InputGroupAddon: ({ className, align, ...props }: ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => import("react/jsx-runtime").JSX.Element;
+export declare const inputGroupButtonVariants: (props?: ({
+    size?: "sm" | "icon-sm" | "xs" | "icon-xs" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const InputGroupButton: ({ className, type, variant, size, ...props }: Omit<ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>) => import("react/jsx-runtime").JSX.Element;
+export declare const InputGroupText: ({ className, ...props }: ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+export declare const InputGroupInput: ({ className, ...props }: ComponentProps<"input">) => import("react/jsx-runtime").JSX.Element;
+export declare const InputGroupTextarea: ({ className, ...props }: ComponentProps<"textarea">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputGroup.d.ts.map

package/dist/InputGroup.js

@@ -0,0 +1,129 @@
+import "./styles/main.css";
+import { jsx as n } from "react/jsx-runtime";
+import { Button as u } from "./primitives/button.js";
+import { Input as p } from "./primitives/input.js";
+import { Textarea as l } from "./primitives/textarea.js";
+import { cn as e } from "./utils/twUtils.js";
+import { c as s } from "./index-D29mdTf5.js";
+import "react";
+const k = ({ className: r, ...t }) => /* @__PURE__ */ n(
+  "div",
+  {
+    "data-slot": "input-group",
+    role: "group",
+    className: e(
+      "group/input-group border-input-border relative flex w-full items-center rounded-[var(--radius,0.375rem)] border shadow-xs transition-[color,box-shadow] outline-none",
+      "h-9 min-w-0 has-[>textarea]:h-auto",
+      "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+      "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+      "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+      "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+      "has-[[data-slot=input-group-control]:focus-visible]:border-input-border has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+      "has-[[data-slot][aria-invalid=true]]:ring-danger/20 has-[[data-slot][aria-invalid=true]]:border-danger",
+      r
+    ),
+    ...t
+  }
+), d = s(
+  `text-text-secondary flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4
+  [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50`,
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+), y = ({
+  className: r,
+  align: t = "inline-start",
+  ...o
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    role: "group",
+    "data-slot": "input-group-addon",
+    "data-align": t,
+    className: e(d({ align: t }), r),
+    onClick: (a) => {
+      a.target.closest("button") || a.currentTarget.parentElement?.querySelector("input")?.focus();
+    },
+    onKeyDown: (a) => {
+      if (a.key === "Enter" || a.key === " ") {
+        if (a.target.closest("button"))
+          return;
+        a.preventDefault(), a.currentTarget.parentElement?.querySelector("input")?.focus();
+      }
+    },
+    ...o
+  }
+), c = s("text-sm shadow-none flex gap-2 items-center", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+      sm: "h-8 px-2.5 gap-1.5 rounded-[var(--radius,0.375rem)] has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0 rounded-[var(--radius,0.375rem)]"
+    }
+  },
+  defaultVariants: {
+    size: "xs"
+  }
+}), z = ({
+  className: r,
+  type: t = "button",
+  variant: o = "ghost",
+  size: a = "xs",
+  ...i
+}) => /* @__PURE__ */ n(
+  u,
+  {
+    type: t,
+    "data-size": a,
+    variant: o,
+    className: e(c({ size: a }), r),
+    ...i
+  }
+), w = ({ className: r, ...t }) => /* @__PURE__ */ n(
+  "span",
+  {
+    className: e(
+      "text-input-text flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+      r
+    ),
+    ...t
+  }
+), G = ({ className: r, ...t }) => /* @__PURE__ */ n(
+  p,
+  {
+    "data-slot": "input-group-control",
+    className: e("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0", r),
+    ...t
+  }
+), I = ({ className: r, ...t }) => /* @__PURE__ */ n(
+  l,
+  {
+    "data-slot": "input-group-control",
+    className: e(
+      "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0",
+      r
+    ),
+    ...t
+  }
+);
+export {
+  k as InputGroup,
+  y as InputGroupAddon,
+  z as InputGroupButton,
+  G as InputGroupInput,
+  w as InputGroupText,
+  I as InputGroupTextarea,
+  d as inputGroupAddonVariants,
+  c as inputGroupButtonVariants
+};

package/dist/InputOTP.d.ts

@@ -5,8 +5,6 @@ type InputOTPRootProps = Omit<OTPInputProps, 'textAlign' | 'pushPasswordManagerS
     className?: string;
     separator?: boolean;
     variant?: 'outlined' | 'filled';
-    groupSize?: number;
-    separatorPositions?: number[];
 };
 export type InputOTPProps = InputOTPRootProps & ({
     value: number | string;