@spear-ai/spectral 0.1.1 → 1.0.1

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/Button.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Button/Button'
+export {}

package/dist/Button.js

@@ -0,0 +1,118 @@
+import { jsxs as f, jsx as v } from "react/jsx-runtime";
+import { a as V, c as p } from "./twUtils-B9ArqCOv.js";
+import { forwardRef as j } from "react";
+import { L as w } from "./loader-circle-Btf6jOd5.js";
+const N = (o) => typeof o == "boolean" ? `${o}` : o === 0 ? "0" : o, h = V, C = (o, e) => (t) => {
+  var l;
+  if (e?.variants == null) return h(o, t?.class, t?.className);
+  const { variants: r, defaultVariants: i } = e, u = Object.keys(r).map((n) => {
+    const a = t?.[n], s = i?.[n];
+    if (a === null) return null;
+    const d = N(a) || N(s);
+    return r[n][d];
+  }), b = t && Object.entries(t).reduce((n, a) => {
+    let [s, d] = a;
+    return d === void 0 || (n[s] = d), n;
+  }, {}), y = e == null || (l = e.compoundVariants) === null || l === void 0 ? void 0 : l.reduce((n, a) => {
+    let { class: s, className: d, ...c } = a;
+    return Object.entries(c).every((m) => {
+      let [g, x] = m;
+      return Array.isArray(x) ? x.includes({
+        ...i,
+        ...b
+      }[g]) : {
+        ...i,
+        ...b
+      }[g] === x;
+    }) ? [
+      ...n,
+      s,
+      d
+    ] : n;
+  }, []);
+  return h(o, u, y, t?.class, t?.className);
+}, _ = C(
+  `
+    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"
+    }
+  }
+), k = j(
+  ({
+    className: o,
+    variant: e,
+    label: t,
+    endIcon: l,
+    state: r,
+    errorMessage: i,
+    startIcon: u,
+    disabled: b,
+    type: y = "button",
+    dataTestId: n = `button-${e}`,
+    isFullWidth: a,
+    ...s
+  }, d) => {
+    const c = {
+      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"
+      }
+    }, m = a ? "w-full" : "w-auto", g = p(
+      _({ variant: e, state: r }),
+      r === "error" && c.error[e || "primary"],
+      r === "loading" && c.loading[e || "primary"],
+      m,
+      o
+    );
+    return /* @__PURE__ */ f("div", { className: p("flex justify-items-center", m), children: [
+      /* @__PURE__ */ f(
+        "button",
+        {
+          className: g,
+          ref: d,
+          type: y,
+          "aria-disabled": b,
+          disabled: b,
+          "data-testid": n,
+          ...s,
+          "data-state": r,
+          children: [
+            u && /* @__PURE__ */ v("span", { className: "flex pr-2", "aria-hidden": !0, children: u }),
+            t,
+            r === "loading" && /* @__PURE__ */ v(w, { className: "ml-2 animate-spin", size: 16 }),
+            l && r !== "loading" && /* @__PURE__ */ v("span", { className: "flex pl-2", "aria-hidden": !0, children: l })
+          ]
+        }
+      ),
+      r === "error" && i && /* @__PURE__ */ v("p", { className: "text-danger text-xs", role: "alert", "aria-live": "polite", children: i })
+    ] });
+  }
+);
+k.displayName = "Button";
+export {
+  k as Button
+};

package/dist/Card.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Card/Card'
+export {}

package/dist/Card.js

@@ -0,0 +1,25 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { c as a } from "./twUtils-B9ArqCOv.js";
+import { forwardRef as u } from "react";
+import { L as b } from "./loader-circle-Btf6jOd5.js";
+const p = u(
+  ({ className: l, title: s, icon: r, width: n = "full", isLoading: c = !1, children: d, ...f }, o) => {
+    const i = s || r, m = a(
+      "relative bg-card-bg rounded-2xl p-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      n === "full" ? "w-full" : "w-fit",
+      l
+    );
+    return /* @__PURE__ */ t("div", { ref: o, className: m, ...f, children: [
+      c && /* @__PURE__ */ e("div", { className: "bg-card-bg/50 absolute inset-0 z-10 flex items-center justify-center", children: /* @__PURE__ */ e(b, { className: "text-muted-foreground animate-spin", size: 24 }) }),
+      i && /* @__PURE__ */ t("div", { className: a("flex items-center pb-4", s ? "justify-between" : "justify-end"), children: [
+        s && /* @__PURE__ */ e("h3", { className: "text-card-text truncate text-base font-semibold", children: s }),
+        r && /* @__PURE__ */ e("div", { className: "flex-shrink-0", "aria-hidden": "true", children: r })
+      ] }),
+      /* @__PURE__ */ e("div", { className: a("min-h-40 p-4", i && "pt-0"), children: d })
+    ] });
+  }
+);
+p.displayName = "Card";
+export {
+  p as Card
+};

package/dist/Drawer.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Drawer/Drawer'
+export {}