@spear-ai/spectral 0.1.1 → 1.0.0

package/README.md

@@ -1,91 +1,15 @@
 # Spectral Component Library
 
-A modern React component library built with TypeScript, Tailwind CSS, and automated versioning with Changesets.
-
 ## Installation
 
 ```bash
-npm install @spear-ai/spectral
-```
-
-## Usage
-
-```javascript
-import { Button, Card, cn } from '@spear-ai/spectral'
-import '@spear-ai/spectral/styles'
-
-function App() {
-  return (
-    <Card title="Welcome">
-      <Button label="Click me" onClick={() => console.log('Hello!')} />
-    </Card>
-  )
-}
-```
-
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Start Storybook
-npm run storybook
-
-# Build library
-npm run build:lib
-
-# Format code (Prettier + OXC plugin)
-npm run format
-
-# Lint code (super fast with Oxlint!)
-npm run lint
-
-# Create changeset for your changes
-npm run changeset
-```
-
-## Components
-
-- Button
-- Card
-- Checkbox
-- Input
-- Label
-- RadioGroup
-- Select
-- Sidebar
-- Skeleton
-- Slider
-- Switch
-- Textarea
-
-## Utilities
-
-- `cn` - Class name utility for merging Tailwind classes
-
-## Hooks
-
-- `useTheme` - Theme management hook
-
-## Contributing
-
-This project uses **Changesets** for version management and publishing.
-
-**Quick Start:**
-```bash
-# Make changes, then:
-git add .
-npm run changeset  # Create changeset describing your changes
-git commit -m "feat: add new component"
-git push origin feature-branch  # Create PR
-
-# Changesets bot will create a "Version Packages" PR when ready to release
+pnpm install @spear-ai/spectral
 ```
 
-**Change Types:**
-- `patch` → Bug fixes, small improvements (1.0.0 → 1.0.1)
-- `minor` → New features, new components (1.0.0 → 1.1.0)
-- `major` → Breaking changes (1.0.0 → 2.0.0)
 
-📋 **See [CHANGESET_GUIDE.md](./CHANGESET_GUIDE.md) for complete workflow guide**
+### Development Stack
+- **React 19** + **TypeScript 5.9**
+- **Tailwind CSS v4** + **PostCSS**
+- **Vite** for build optimization
+- **Storybook 9** for component documentation
+- **OXLint** for ultra-fast linting

package/dist/{components/Button/Button.d.ts → Button.d.ts}

@@ -1,10 +1,13 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, MouseEvent } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
-import { ButtonHTMLAttributes, MouseEvent, ReactNode } from 'react';
+
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "outline" | null | undefined;
     state?: "default" | "error" | "loading" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
     errorMessage?: string | ReactNode;
     endIcon?: ReactNode;
     label: string;
@@ -14,7 +17,8 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
     state?: 'loading' | 'error' | 'default';
     dataTestId?: string;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    fullWidth?: boolean;
+    isFullWidth?: boolean;
 }
-export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
-export {};
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps };

package/dist/Button.js

@@ -0,0 +1,98 @@
+"use client"
+import {
+  cn
+} from "./chunk-ZLENOYB4.js";
+
+// 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";
+export {
+  Button
+};

package/dist/Card.css

@@ -0,0 +1,4 @@
+/* src/components/Card/main.css */
+.card-loading-overlay {
+  backdrop-filter: blur(2px);
+}

package/dist/Card.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    title?: string;
+    icon?: ReactNode;
+    width?: 'full' | 'fit';
+    isLoading?: boolean;
+    children?: ReactNode;
+}
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Card, type CardProps };

package/dist/Card.js

@@ -0,0 +1,31 @@
+"use client"
+import {
+  cn
+} from "./chunk-ZLENOYB4.js";
+
+// src/components/Card/Card.tsx
+import { Loader2 } from "lucide-react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Card = forwardRef(
+  ({ 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__ */ jsxs("div", { ref, className: cardClasses, ...props, children: [
+      isLoading && /* @__PURE__ */ jsx("div", { className: "bg-card-bg/50 absolute inset-0 z-10 flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground animate-spin", size: 24 }) }),
+      hasHeader && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center pb-4", title ? "justify-between" : "justify-end"), children: [
+        title && /* @__PURE__ */ jsx("h3", { className: "text-card-text truncate text-base font-semibold", children: title }),
+        icon && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", "aria-hidden": "true", children: icon })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: cn("min-h-40 p-4", hasHeader && "pt-0"), children })
+    ] });
+  }
+);
+Card.displayName = "Card";
+export {
+  Card
+};

package/dist/Drawer.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type DrawerProps = {
+    title?: string;
+    trigger: ReactNode;
+    description?: string;
+    children?: ReactNode;
+    direction?: 'left' | 'right' | 'top' | 'bottom';
+    size?: string;
+};
+declare const Drawer: ({ trigger, title, description, children, direction, size }: DrawerProps) => react_jsx_runtime.JSX.Element;
+
+export { Drawer, type DrawerProps };

package/dist/Drawer.js

@@ -0,0 +1,42 @@
+"use client"
+
+// src/components/Drawer/Drawer.tsx
+import { Drawer as DrawerBase } from "vaul";
+import { jsx, jsxs } 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 }
+    }
+  };
+  const { className, style } = directionStyles[direction];
+  return /* @__PURE__ */ jsxs(DrawerBase.Root, { direction, children: [
+    /* @__PURE__ */ jsx(DrawerBase.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(DrawerBase.Portal, { children: [
+      /* @__PURE__ */ jsx(DrawerBase.Overlay, { className: "fixed inset-0 bg-transparent" }),
+      /* @__PURE__ */ jsxs(DrawerBase.Content, { className: `bg-drawer-bg z-10 flex flex-col p-4 outline-none ${className}`, style, children: [
+        /* @__PURE__ */ jsx(DrawerBase.Close, {}),
+        /* @__PURE__ */ jsx(DrawerBase.Title, { className: "text-text-primary mb-2 text-lg font-semibold", children: title }),
+        /* @__PURE__ */ jsx(DrawerBase.Description, { className: "!text-text-secondary mb-2 !text-xs uppercase", children: description }),
+        /* @__PURE__ */ jsx("div", { className: "pt-2", children })
+      ] })
+    ] })
+  ] });
+};
+export {
+  Drawer
+};

package/dist/{components/Skeleton/Skeleton.d.ts → Skeleton.d.ts}

@@ -1,3 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ComponentProps } from 'react';
-declare function Skeleton({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+
+declare function Skeleton({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+
 export { Skeleton };

package/dist/Skeleton.js

@@ -0,0 +1,14 @@
+"use client"
+import {
+  cn
+} from "./chunk-ZLENOYB4.js";
+
+// src/components/Skeleton/Skeleton.tsx
+import "react";
+import { jsx } from "react/jsx-runtime";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "skeleton", className: cn("bg-accent animate-pulse rounded-md", className), ...props });
+}
+export {
+  Skeleton
+};

package/dist/{components/Slider/Slider.d.ts → Slider.d.ts}

@@ -1,6 +1,8 @@
-import { ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as SliderPrimitive from '@radix-ui/react-slider';
-export type SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {
+import { ComponentProps } from 'react';
+
+type SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {
     className?: string;
     defaultValue?: number[];
     value?: number[];
@@ -14,5 +16,6 @@ export type SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {
     disabled?: boolean;
     name?: string;
 };
-declare function Slider({ className, defaultValue, value, min, max, step, minStepsBetweenThumbs, onValueChange, orientation, onValueCommit, disabled, name, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
-export { Slider };
+declare function Slider({ className, defaultValue, value, min, max, step, minStepsBetweenThumbs, onValueChange, orientation, onValueCommit, disabled, name, ...props }: SliderProps): react_jsx_runtime.JSX.Element;
+
+export { Slider, type SliderProps };

package/dist/Slider.js

@@ -0,0 +1,79 @@
+"use client"
+import {
+  cn
+} from "./chunk-ZLENOYB4.js";
+
+// src/components/Slider/Slider.tsx
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import "react";
+import { jsx, jsxs } 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__ */ jsxs(
+    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__ */ jsx(
+          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__ */ jsx(
+              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__ */ jsx(
+          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
+        ))
+      ]
+    }
+  );
+}
+export {
+  Slider
+};

package/dist/chunk-ZLENOYB4.js

@@ -0,0 +1,12 @@
+"use client"
+
+// src/utils/twUtils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};