@spear-ai/spectral 1.3.9 → 1.3.11

package/dist/Switch/SwitchBase.js

@@ -0,0 +1,131 @@
+import './assets/main.css'
+import { jsx as f, jsxs as K } from "react/jsx-runtime";
+import { Slot as g } from "../primitives/slot.js";
+import { useControllableState as M, cn as x } from "../utils/shared.js";
+import { createContext as O, forwardRef as y, useRef as V, useId as $, useEffect as k, useCallback as d, useContext as z } from "react";
+const C = O(null), A = y(
+  ({
+    asChild: u,
+    className: l,
+    checked: h,
+    defaultChecked: r = !1,
+    onCheckedChange: o,
+    name: m,
+    value: p = "on",
+    required: E,
+    form: S,
+    disabled: n,
+    id: R,
+    onClick: b,
+    onKeyDown: w,
+    children: I,
+    ...N
+  }, P) => {
+    const c = V(null), T = $(), j = R ?? `swt-${T}`, [t, s] = M({
+      value: h,
+      defaultValue: r,
+      onChange: o
+    });
+    k(() => {
+      c.current && (c.current.checked = t);
+    }, [t]), k(() => {
+      const e = c.current?.form ?? null;
+      if (!e) return;
+      const a = () => s(r);
+      return e.addEventListener("reset", a), () => e.removeEventListener("reset", a);
+    }, [r, s]);
+    const v = d(() => {
+      const e = c.current;
+      if (!e) return;
+      e.checked = t;
+      const a = new Event("change", { bubbles: !0 });
+      e.dispatchEvent(a);
+    }, [t]), i = d(() => {
+      n || (s(!t), queueMicrotask(() => v()));
+    }, [n, v, t, s]), D = d(
+      (e) => {
+        b?.(e), !e.defaultPrevented && i();
+      },
+      [b, i]
+    ), L = d(
+      (e) => {
+        w?.(e), !e.defaultPrevented && (e.key === " " || e.key === "Enter") && (e.preventDefault(), i());
+      },
+      [w, i]
+    ), q = u ? g : "button", F = P;
+    return /* @__PURE__ */ f(C.Provider, { value: { checked: t, disabled: n }, children: /* @__PURE__ */ K(
+      q,
+      {
+        id: j,
+        ref: F,
+        type: "button",
+        role: "switch",
+        "aria-checked": t,
+        "aria-disabled": n || void 0,
+        "data-state": t ? "checked" : "unchecked",
+        "data-disabled": n || void 0,
+        onClick: D,
+        onKeyDown: L,
+        disabled: n,
+        className: x(
+          "peer border-input inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border",
+          "bg-input focus-visible:ring-ring transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "data-[state=checked]:bg-primary",
+          l
+        ),
+        ...N,
+        children: [
+          /* @__PURE__ */ f(
+            "input",
+            {
+              ref: c,
+              type: "checkbox",
+              name: m,
+              value: p,
+              required: E,
+              disabled: n,
+              form: S,
+              checked: t,
+              readOnly: !0,
+              tabIndex: -1,
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                opacity: 0,
+                width: 0,
+                height: 0,
+                pointerEvents: "none"
+              }
+            }
+          ),
+          I
+        ]
+      }
+    ) });
+  }
+);
+A.displayName = "Switch";
+const B = y(({ asChild: u, className: l, ...h }, r) => {
+  const o = z(C);
+  if (!o) throw new Error("SwitchThumb must be used within Switch");
+  return /* @__PURE__ */ f(
+    u ? g : "span",
+    {
+      ref: r,
+      "data-state": o.checked ? "checked" : "unchecked",
+      "data-disabled": o.disabled || void 0,
+      className: x(
+        "bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform",
+        "translate-x-0 data-[state=checked]:translate-x-5",
+        l
+      ),
+      ...h
+    }
+  );
+});
+B.displayName = "SwitchThumb";
+export {
+  A as Switch,
+  B as SwitchThumb
+};

package/dist/Switch.js

@@ -0,0 +1,59 @@
+import './assets/main.css'
+import { jsxs as w, jsx as t } from "react/jsx-runtime";
+import { Switch as p, SwitchThumb as k } from "./Switch/SwitchBase.js";
+import { Label as r } from "./Label.js";
+import { c } from "./twUtils-CRiPKpXj.js";
+import { forwardRef as x } from "react";
+const v = x(
+  ({
+    className: o,
+    disabled: d,
+    id: e,
+    labelPosition: i = "right",
+    labelText: s,
+    name: l,
+    onChange: h,
+    required: b,
+    value: m,
+    hideLabel: a = !1,
+    variant: u,
+    ...f
+  }, g) => {
+    const n = u === "squared";
+    return /* @__PURE__ */ w("div", { className: "flex items-center", "data-testid": "switch-container", children: [
+      i === "left" && !a && /* @__PURE__ */ t(r, { htmlFor: e, className: "mr-2", "data-testid": "switch-label-left", children: s }),
+      /* @__PURE__ */ t(
+        p,
+        {
+          "data-testid": "switch-root",
+          className: c(
+            n ? "peer data-[state=checked]:bg-switch-bg--checked data-[state=unchecked]:bg-switch-bg inline-flex h-6 w-10 shrink-0 items-center rounded-sm border-2 border-transparent transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-black disabled:cursor-not-allowed disabled:opacity-50 [&_span]:rounded-[4px]" : "focus-visible:ring-ring focus-visible:ring-offset-background peer data-[state=checked]:bg-switch-bg--checked data-[state=unchecked]:bg-switch-bg inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-2xs transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            o
+          ),
+          disabled: d,
+          id: e,
+          name: l,
+          onCheckedChange: h,
+          value: m,
+          required: b,
+          ...f,
+          ref: g,
+          children: /* @__PURE__ */ t(
+            k,
+            {
+              className: c(
+                n ? "bg-switch-thumb pointer-events-none block size-5 rounded-full shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 data-[state=checked]:rtl:-translate-x-4" : "bg-switch-thumb pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+              )
+            }
+          )
+        }
+      ),
+      i === "right" && !a && /* @__PURE__ */ t(r, { htmlFor: e, id: `${e}-label`, className: "ml-2", "data-testid": "switch-label-right", children: s }),
+      a && /* @__PURE__ */ t(r, { htmlFor: e, className: "sr-only", children: s })
+    ] });
+  }
+);
+v.displayName = "Switch";
+export {
+  v as Switch
+};

package/dist/Toggle/ToggleBase.js

@@ -0,0 +1,51 @@
+import './assets/main.css'
+import { jsx as h } from "react/jsx-runtime";
+import { useControllableState as k } from "../utils/shared.js";
+import { forwardRef as C, useCallback as f } from "react";
+const y = C(function({
+  pressed: l,
+  defaultPressed: u = !1,
+  onPressedChange: d,
+  disabled: t,
+  className: i,
+  onKeyDown: a,
+  onClick: n,
+  type: p = "button",
+  ...c
+}, g) {
+  const [r, s] = k({
+    value: l,
+    defaultValue: u,
+    onChange: d
+  }), o = f(() => {
+    t || s(!r);
+  }, [t, r, s]), m = f(
+    (e) => {
+      a && a(e), !e.defaultPrevented && (e.key === " " || e.key === "Enter") && (e.preventDefault(), o());
+    },
+    [o, a]
+  ), v = f(
+    (e) => {
+      n && n(e), !e.defaultPrevented && o();
+    },
+    [o, n]
+  );
+  return /* @__PURE__ */ h(
+    "button",
+    {
+      ...c,
+      ref: g,
+      type: p,
+      "aria-pressed": r,
+      "data-state": r ? "on" : "off",
+      "data-disabled": t ? "" : void 0,
+      disabled: t,
+      onKeyDown: m,
+      onClick: v,
+      className: i
+    }
+  );
+});
+export {
+  y as ToggleBase
+};

package/dist/Toggle.js

@@ -0,0 +1,51 @@
+import './assets/main.css'
+import { jsx as n } from "react/jsx-runtime";
+import { ToggleBase as g } from "./Toggle/ToggleBase.js";
+import { c as s } from "./twUtils-CRiPKpXj.js";
+import { c as d } from "./index-CRBC94ik.js";
+import { forwardRef as l } from "react";
+const v = d(
+  `
+    bg-toggle-bg inline-flex items-center justify-center gap-2 border rounded-md text-sm shadow-sm font-medium w-fit disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed
+    hover:cursor-pointer data-[state=on]:text-toggle-text--active text-toggle-text hover:bg-toggle-bg--hover hover:border-toggle-border--hover data-[state=on]:bg-toggle-bg--active
+    data-[state=on]:border-toggle-border--active hover:text-toggle-text--hover data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active data-[state=on]:border-toggle-border--active
+    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
+    aria-invalid:ring-danger-200/20 dark:aria-invalid:ring-danger-200/40 aria-invalid:border-danger-200 whitespace-nowrap
+  `,
+  {
+    variants: {
+      variant: {
+        default: "border-toggle-border hover:border-toggle-border--hover",
+        outline: "border-toggle-outline-border hover:bg-toggle-bg--hover"
+      },
+      size: {
+        default: 'h-9 px-3 min-w-9 [&_svg:not([class*="size-"]):not([width]):not([height])]:size-4',
+        sm: 'h-8 px-1.5 min-w-8 [&_svg:not([class*="size-"]):not([width]):not([height])]:size-3',
+        lg: 'h-10 px-2.5 min-w-10 [&_svg:not([class*="size-"]):not([width]):not([height])]:size-5'
+      },
+      layout: {
+        default: "w-fit",
+        expanded: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      layout: "default"
+    }
+  }
+), m = l(
+  ({ className: e, variant: t, size: o, layout: r, ...a }, i) => /* @__PURE__ */ n(
+    g,
+    {
+      ref: i,
+      "data-slot": "toggle",
+      className: s(v({ variant: t, size: o, layout: r }), e),
+      ...a
+    }
+  )
+);
+export {
+  m as Toggle,
+  v as toggleVariants
+};

package/dist/ToggleGroup/ToggleGroupBase.js

@@ -0,0 +1,125 @@
+import './assets/main.css'
+import { jsx as B, jsxs as E } from "react/jsx-runtime";
+import { useControllableState as R, clamp as M } from "../utils/shared.js";
+import { createContext as j, forwardRef as H, useContext as K, useRef as S, useImperativeHandle as L, useEffect as N, useCallback as i, useMemo as U } from "react";
+const T = j(null), Q = (C) => {
+  const {
+    type: n = "single",
+    orientation: l = "horizontal",
+    loop: d = !0,
+    disabled: I = !1,
+    name: u,
+    className: x,
+    value: z,
+    defaultValue: A,
+    onValueChange: a,
+    "data-variant": D,
+    "data-size": v,
+    "data-slot": c,
+    "data-layout": b,
+    ...G
+  } = C, f = n === "multiple", [r, p] = R({
+    value: z,
+    defaultValue: typeof A < "u" ? A : f ? [] : "",
+    onChange: a
+  }), o = S([]), m = i((t, s) => {
+    const P = { val: t, el: s, disabled: !!s?.disabled };
+    return o.current = [...o.current.filter((w) => w.val !== t), P], () => {
+      o.current = o.current.filter((w) => w.val !== t);
+    };
+  }, []), V = i(() => o.current.slice(), []), k = i(
+    (t) => f ? Array.isArray(r) && r.includes(t) : r === t,
+    [f, r]
+  ), e = i((t) => p(t), [p]), g = i(
+    (t) => {
+      const s = o.current;
+      if (s.length === 0) return;
+      const P = s.length - 1, w = d ? (t % s.length + s.length) % s.length : M(t, 0, P);
+      s[w]?.el?.focus();
+    },
+    [d]
+  ), y = U(
+    () => ({
+      type: n,
+      value: r,
+      setValue: e,
+      orientation: l,
+      loop: d,
+      groupDisabled: I,
+      name: u,
+      register: m,
+      isItemPressed: k,
+      focusItemByIndex: g,
+      itemsSnapshot: V
+    }),
+    [I, k, V, d, u, l, e, n, r]
+  ), h = u;
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      ...G,
+      role: "group",
+      "data-orientation": l,
+      "data-disabled": I ? "" : void 0,
+      "data-variant": D,
+      "data-size": v,
+      "data-slot": c,
+      "data-layout": b,
+      className: x,
+      children: [
+        /* @__PURE__ */ B(T.Provider, { value: y, children: C.children }),
+        h && n === "single" && typeof r == "string" ? /* @__PURE__ */ B("input", { type: "hidden", name: h, value: r }) : null,
+        h && n === "multiple" && Array.isArray(r) ? r.map((t) => /* @__PURE__ */ B("input", { type: "hidden", name: h + "[]", value: t }, t)) : null
+      ]
+    }
+  );
+}, W = H(function({ value: n, disabled: l, className: d, children: I, onKeyDown: u, onClick: x, ...z }, A) {
+  const a = K(T);
+  if (!a) throw new Error("ToggleGroupItem must be used within ToggleGroup");
+  const { type: D, orientation: v, groupDisabled: c, setValue: b, isItemPressed: G, itemsSnapshot: f, register: r } = a, p = S(null);
+  L(A, () => p.current), N(() => r(n, p.current), [r, n]);
+  const o = G(n), m = i(() => {
+    if (!(c || l))
+      if (D === "single") b(o ? "" : n);
+      else {
+        const e = a.value, g = o ? e.filter((y) => y !== n) : [...e, n];
+        b(g);
+      }
+  }, [a.value, l, c, o, b, D, n]), V = i(
+    (e) => {
+      if (u && u(e), e.defaultPrevented) return;
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault(), m();
+        return;
+      }
+      const g = f(), y = g.findIndex((s) => s.val === n), h = v === "horizontal" ? "ArrowLeft" : "ArrowUp", t = v === "horizontal" ? "ArrowRight" : "ArrowDown";
+      e.key === h ? (e.preventDefault(), a.focusItemByIndex(y - 1)) : e.key === t ? (e.preventDefault(), a.focusItemByIndex(y + 1)) : e.key === "Home" ? (e.preventDefault(), a.focusItemByIndex(0)) : e.key === "End" && (e.preventDefault(), a.focusItemByIndex(g.length - 1));
+    },
+    [a, f, u, v, m, n]
+  ), k = i(
+    (e) => {
+      x && x(e), !e.defaultPrevented && m();
+    },
+    [x, m]
+  );
+  return /* @__PURE__ */ B(
+    "button",
+    {
+      ...z,
+      ref: p,
+      type: "button",
+      "aria-pressed": o,
+      "data-state": o ? "on" : "off",
+      "data-disabled": c || l ? "" : void 0,
+      disabled: c || l,
+      onKeyDown: V,
+      onClick: k,
+      className: d,
+      children: I
+    }
+  );
+});
+export {
+  Q as ToggleGroupBase,
+  W as ToggleGroupItemBase
+};

package/dist/ToggleGroup.js

@@ -0,0 +1,53 @@
+import './assets/main.css'
+import { jsx as d } from "react/jsx-runtime";
+import { ToggleGroupItemBase as p, ToggleGroupBase as m } from "./ToggleGroup/ToggleGroupBase.js";
+import { toggleVariants as f } from "./Toggle.js";
+import { c as l } from "./twUtils-CRiPKpXj.js";
+import { createContext as c, forwardRef as v, useContext as b } from "react";
+const g = c({
+  size: "default",
+  variant: "default",
+  layout: "default"
+}), h = ({ className: n, variant: e, size: o, layout: a, children: u, ...r }) => /* @__PURE__ */ d(
+  m,
+  {
+    "data-slot": "toggle-group",
+    "data-variant": e,
+    "data-size": o,
+    "data-layout": a,
+    className: l(
+      "group/toggle-group [&[data-variant='outline']]:bg-toggle-group-bg flex h-fit w-fit items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md [&[data-variant='outline']]:gap-0.25",
+      n
+    ),
+    ...r,
+    children: /* @__PURE__ */ d(g.Provider, { value: { variant: e, size: o, layout: a }, children: u })
+  }
+), w = v(({ className: n, children: e, variant: o, size: a, value: u, layout: r, ...i }, s) => {
+  const t = b(g);
+  return /* @__PURE__ */ d(
+    p,
+    {
+      ref: s,
+      "data-slot": "toggle-group-item",
+      "data-variant": t.variant || o,
+      "data-size": t.size || a,
+      "data-layout": t.layout || r,
+      value: u,
+      className: l(
+        f({
+          variant: t.variant || o,
+          size: t.size || a,
+          layout: t.layout || r
+        }),
+        "group data-[variant=outline]:border-togglegroup-border rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0",
+        n
+      ),
+      ...i,
+      children: e
+    }
+  );
+});
+export {
+  h as ToggleGroup,
+  w as ToggleGroupItem
+};

package/dist/Toolbar.js

@@ -0,0 +1,13 @@
+import './assets/main.css'
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import "react";
+const c = ({ title: r, description: t, children: l }) => /* @__PURE__ */ s("div", { className: "bg-background text-text-primary border-border-primary flex h-[72px] w-full justify-between border-b", children: [
+  /* @__PURE__ */ s("div", { className: "flex w-auto flex-col justify-center", children: [
+    r && /* @__PURE__ */ e("h3", { className: "w-fit font-semibold", children: r }),
+    t && /* @__PURE__ */ e("p", { className: "text-text-secondary m-0 w-fit text-sm", children: t })
+  ] }),
+  /* @__PURE__ */ e("div", { className: "flex items-center", children: l })
+] });
+export {
+  c as Toolbar
+};