@spear-ai/spectral 1.0.0 → 1.0.2

package/dist/index.js

@@ -1,276 +1,33 @@
-"use client"
-
-// src/utils/twUtils.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-function pxToRem(px) {
-  return `${px / 16}rem`;
-}
-
-// src/components/Button/Button.tsx
-import { cva } from "class-variance-authority";
-import { Loader2 } from "lucide-react";
-import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var buttonVariants = cva(
-  `
-    flex relative items-center justify-center gap-2 whitespace-nowrap transition-colors cursor-pointer py-2 px-6 rounded-lg border font-semibold
-    focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus:ring-2 focus:ring-ring focus:ring-offset-2
-    focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
-  `,
-  {
-    variants: {
-      variant: {
-        primary: "bg-button-primary-bg text-button-primary-text border-button-primary-border disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled disabled:border-button-primary-border--disabled",
-        secondary: "bg-button-secondary-bg border-button-secondary-border text-button-secondary-text disabled:bg-button-secondary-bg--disabled disabled:text-button-secondary-text--disabled disabled:border-button-secondary-border--disabled",
-        outline: "bg-button-outline-bg border-button-outline-border text-button-outline-text disabled:text-button-outline-text--disabled disabled:border-button-outline-border--disabled"
-      },
-      state: {
-        default: "",
-        error: "bg-button-danger text-button-primary-text transition pointer-events-none",
-        loading: "cursor-wait pointer-events-none"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      state: "default"
-    }
-  }
-);
-var Button = forwardRef(
-  ({
-    className,
-    variant,
-    label,
-    endIcon,
-    state,
-    errorMessage,
-    startIcon,
-    disabled,
-    type = "button",
-    dataTestId = `button-${variant}`,
-    isFullWidth,
-    ...props
-  }, ref) => {
-    const stateStyles = {
-      error: {
-        primary: "bg-button-danger border-button-danger text-button-primary-text pointer-events-none",
-        secondary: "bg-button-danger border-button-danger text-button-secondary-text pointer-events-none",
-        outline: "bg-transparent border-button-danger text-button-danger pointer-events-none"
-      },
-      loading: {
-        primary: "bg-button-primary-bg--disabled border-button-primary-border--disabled text-button-primary-text--disabled pointer-events-none",
-        secondary: "bg-button-secondary-bg--disabled border-button-secondary-border--disabled text-button-secondary-text--disabled pointer-events-none",
-        outline: "bg-button-outline-bg--disabled border-button-outline-border--disabled text-button-outline-text--disabled pointer-events-none"
-      }
-    };
-    const widthClass = isFullWidth ? "w-full" : "w-auto";
-    const classes = cn(
-      buttonVariants({ variant, state }),
-      state === "error" && stateStyles.error[variant || "primary"],
-      state === "loading" && stateStyles.loading[variant || "primary"],
-      widthClass,
-      className
-    );
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex justify-items-center", widthClass), children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          className: classes,
-          ref,
-          type,
-          "aria-disabled": disabled,
-          disabled,
-          "data-testid": dataTestId,
-          ...props,
-          "data-state": state,
-          children: [
-            startIcon && /* @__PURE__ */ jsx("span", { className: "flex pr-2", "aria-hidden": true, children: startIcon }),
-            label,
-            state === "loading" && /* @__PURE__ */ jsx(Loader2, { className: "ml-2 animate-spin", size: 16 }),
-            endIcon && state !== "loading" && /* @__PURE__ */ jsx("span", { className: "flex pl-2", "aria-hidden": true, children: endIcon })
-          ]
-        }
-      ),
-      state === "error" && errorMessage && /* @__PURE__ */ jsx("p", { className: "text-danger text-xs", role: "alert", "aria-live": "polite", children: errorMessage })
-    ] });
-  }
-);
-Button.displayName = "Button";
-
-// src/components/Card/Card.tsx
-import { Loader2 as Loader22 } from "lucide-react";
-import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Card = forwardRef2(
-  ({ className, title, icon, width = "full", isLoading = false, children, ...props }, ref) => {
-    const hasHeader = title || icon;
-    const cardClasses = cn(
-      "relative bg-card-bg rounded-2xl p-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      width === "full" ? "w-full" : "w-fit",
-      className
-    );
-    return /* @__PURE__ */ jsxs2("div", { ref, className: cardClasses, ...props, children: [
-      isLoading && /* @__PURE__ */ jsx2("div", { className: "bg-card-bg/50 absolute inset-0 z-10 flex items-center justify-center", children: /* @__PURE__ */ jsx2(Loader22, { className: "text-muted-foreground animate-spin", size: 24 }) }),
-      hasHeader && /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center pb-4", title ? "justify-between" : "justify-end"), children: [
-        title && /* @__PURE__ */ jsx2("h3", { className: "text-card-text truncate text-base font-semibold", children: title }),
-        icon && /* @__PURE__ */ jsx2("div", { className: "flex-shrink-0", "aria-hidden": "true", children: icon })
-      ] }),
-      /* @__PURE__ */ jsx2("div", { className: cn("min-h-40 p-4", hasHeader && "pt-0"), children })
-    ] });
-  }
-);
-Card.displayName = "Card";
-
-// src/components/Drawer/Drawer.tsx
-import { Drawer as DrawerBase } from "vaul";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var Drawer = ({ trigger, title, description, children, direction = "right", size = "320px" }) => {
-  const baseStyles = "fixed";
-  const directionStyles = {
-    left: {
-      className: `${baseStyles} top-0 bottom-0 left-0 shadow-[20px_0_20px_rgba(0,0,0,0.4)]`,
-      style: { width: size }
-    },
-    right: {
-      className: `${baseStyles} top-0 bottom-0 right-0 shadow-[-20px_0_20px_rgba(0,0,0,0.4)]`,
-      style: { width: size }
-    },
-    top: {
-      className: `${baseStyles} top-0 left-0 right-0 shadow-[0_20px_20px_rgba(0,0,0,0.4)]`,
-      style: { height: size }
-    },
-    bottom: {
-      className: `${baseStyles} bottom-0 left-0 right-0 shadow-[0_-20px_20px_rgba(0,0,0,0.4)]`,
-      style: { height: size }
-    }
+"use client";
+import "./assets/spectral.css";
+import { Button as i } from "./Button.js";
+import { Card as p } from "./Card.js";
+import { Drawer as g } from "./Drawer.js";
+import { Skeleton as k } from "./Skeleton.js";
+import { Slider as w } from "./Slider.js";
+import { useState as n, useEffect as s } from "react";
+import { c as E, p as I } from "./twUtils-B9ArqCOv.js";
+const d = (o = "dark") => {
+  const [t, m] = n(() => {
+    if (typeof window > "u") return o;
+    const e = localStorage.getItem("theme");
+    return e === "light" || e === "dark" ? e : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }), r = (e) => {
+    m(e);
+  }, a = () => {
+    r(t === "dark" ? "light" : "dark");
   };
-  const { className, style } = directionStyles[direction];
-  return /* @__PURE__ */ jsxs3(DrawerBase.Root, { direction, children: [
-    /* @__PURE__ */ jsx3(DrawerBase.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxs3(DrawerBase.Portal, { children: [
-      /* @__PURE__ */ jsx3(DrawerBase.Overlay, { className: "fixed inset-0 bg-transparent" }),
-      /* @__PURE__ */ jsxs3(DrawerBase.Content, { className: `bg-drawer-bg z-10 flex flex-col p-4 outline-none ${className}`, style, children: [
-        /* @__PURE__ */ jsx3(DrawerBase.Close, {}),
-        /* @__PURE__ */ jsx3(DrawerBase.Title, { className: "text-text-primary mb-2 text-lg font-semibold", children: title }),
-        /* @__PURE__ */ jsx3(DrawerBase.Description, { className: "!text-text-secondary mb-2 !text-xs uppercase", children: description }),
-        /* @__PURE__ */ jsx3("div", { className: "pt-2", children })
-      ] })
-    ] })
-  ] });
-};
-
-// src/components/Skeleton/Skeleton.tsx
-import "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx4("div", { "data-slot": "skeleton", className: cn("bg-accent animate-pulse rounded-md", className), ...props });
-}
-
-// src/components/Slider/Slider.tsx
-import * as SliderPrimitive from "@radix-ui/react-slider";
-import "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-function Slider({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  step = 1,
-  minStepsBetweenThumbs = 1,
-  onValueChange,
-  orientation = "horizontal",
-  onValueCommit,
-  disabled,
-  name,
-  ...props
-}) {
-  const _values = value || defaultValue || [min];
-  return /* @__PURE__ */ jsxs4(
-    SliderPrimitive.Root,
-    {
-      "data-slot": "slider",
-      defaultValue,
-      value,
-      min,
-      max,
-      step,
-      minStepsBetweenThumbs,
-      onValueChange,
-      orientation,
-      onValueCommit,
-      disabled,
-      name,
-      className: cn(
-        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx5(
-          SliderPrimitive.Track,
-          {
-            "data-slot": "slider-track",
-            className: cn(
-              "bg-slider-track relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
-            ),
-            children: /* @__PURE__ */ jsx5(
-              SliderPrimitive.Range,
-              {
-                "data-slot": "slider-range",
-                className: cn(
-                  "bg-slider-range absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
-                )
-              }
-            )
-          }
-        ),
-        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx5(
-          SliderPrimitive.Thumb,
-          {
-            "data-slot": "slider-thumb",
-            className: "border-slider-thumb-border bg-slider-thumb-bg ring-slider-thumb-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-          },
-          index
-        ))
-      ]
-    }
-  );
-}
-
-// src/hooks/useTheme.ts
-import { useEffect, useState } from "react";
-var useTheme = (defaultTheme = "dark") => {
-  const [theme, setThemeState] = useState(() => {
-    if (typeof window === "undefined") return defaultTheme;
-    const stored = localStorage.getItem("theme");
-    if (stored === "light" || stored === "dark") return stored;
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  });
-  const setTheme = (newTheme) => {
-    setThemeState(newTheme);
-  };
-  const toggleTheme = () => {
-    setTheme(theme === "dark" ? "light" : "dark");
-  };
-  useEffect(() => {
-    const root = document.documentElement;
-    root.setAttribute("data-theme", theme);
-    localStorage.setItem("theme", theme);
-  }, [theme]);
-  return { theme, setTheme, toggleTheme };
+  return s(() => {
+    document.documentElement.setAttribute("data-theme", t), localStorage.setItem("theme", t);
+  }, [t]), { theme: t, setTheme: r, toggleTheme: a };
 };
 export {
-  Button,
-  Card,
-  Drawer,
-  Skeleton,
-  Slider,
-  cn,
-  pxToRem,
-  useTheme
+  i as Button,
+  p as Card,
+  g as Drawer,
+  k as Skeleton,
+  w as Slider,
+  E as cn,
+  I as pxToRem,
+  d as useTheme
 };

package/dist/loader-circle-Btf6jOd5.js

@@ -0,0 +1,101 @@
+import { forwardRef as l, createElement as n } from "react";
+/**
+ * @license lucide-react v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const h = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), w = (t) => t.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (e, r, o) => o ? o.toUpperCase() : r.toLowerCase()
+), i = (t) => {
+  const e = w(t);
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}, u = (...t) => t.filter((e, r, o) => !!e && e.trim() !== "" && o.indexOf(e) === r).join(" ").trim(), f = (t) => {
+  for (const e in t)
+    if (e.startsWith("aria-") || e === "role" || e === "title")
+      return !0;
+};
+/**
+ * @license lucide-react v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var g = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @license lucide-react v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const A = l(
+  ({
+    color: t = "currentColor",
+    size: e = 24,
+    strokeWidth: r = 2,
+    absoluteStrokeWidth: o,
+    className: s = "",
+    children: a,
+    iconNode: d,
+    ...c
+  }, p) => n(
+    "svg",
+    {
+      ref: p,
+      ...g,
+      width: e,
+      height: e,
+      stroke: t,
+      strokeWidth: o ? Number(r) * 24 / Number(e) : r,
+      className: u("lucide", s),
+      ...!a && !f(c) && { "aria-hidden": "true" },
+      ...c
+    },
+    [
+      ...d.map(([C, m]) => n(C, m)),
+      ...Array.isArray(a) ? a : [a]
+    ]
+  )
+);
+/**
+ * @license lucide-react v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const L = (t, e) => {
+  const r = l(
+    ({ className: o, ...s }, a) => n(A, {
+      ref: a,
+      iconNode: e,
+      className: u(
+        `lucide-${h(i(t))}`,
+        `lucide-${t}`,
+        o
+      ),
+      ...s
+    })
+  );
+  return r.displayName = i(t), r;
+};
+/**
+ * @license lucide-react v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const k = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], y = L("loader-circle", k);
+export {
+  y as L
+};

package/dist/primitives/button.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "secondary" | "outline" | "default" | "link" | "destructive" | "ghost" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function ButtonPrimitive({ className, variant, size, asChild, ...props }: ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { ButtonPrimitive, buttonVariants };

package/dist/primitives/input.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from 'react';
+declare function InputPrimitive({ className, type, ...props }: ComponentProps<'input'>): import("react/jsx-runtime").JSX.Element;
+export { InputPrimitive };

package/dist/primitives/tooltip.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from 'react';
+import * as TooltipRadix from '@radix-ui/react-tooltip';
+declare function TooltipPrimitiveProvider({ delayDuration, ...props }: ComponentProps<typeof TooltipRadix.Provider>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipPrimitive({ ...props }: ComponentProps<typeof TooltipRadix.Root>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipPrimitiveTrigger({ ...props }: ComponentProps<typeof TooltipRadix.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipPrimitiveContent({ className, sideOffset, children, ...props }: ComponentProps<typeof TooltipRadix.Content>): import("react/jsx-runtime").JSX.Element;
+export { TooltipPrimitive, TooltipPrimitiveTrigger, TooltipPrimitiveContent, TooltipPrimitiveProvider };