@inzumer/ui-library 0.1.0

package/README.md

@@ -0,0 +1,133 @@
+# @inzumer/ui
+
+Production-grade React component library for web applications and mobile WebViews.
+
+---
+
+## Purpose
+
+`@inzumer/ui` provides a unified, accessible, and performant design system for TypeScript React projects. It enforces consistent visual language, interaction patterns, and WCAG 2.1 AA accessibility standards across web and WebView platforms.
+
+---
+
+## Stack
+
+| Tool | Purpose |
+|---|---|
+| React 18 | Component model |
+| TypeScript (strict) | Type safety |
+| Vite | Build tooling (library mode) |
+| Tailwind CSS | Token-driven styling |
+| class-variance-authority | Variant management |
+| Vitest + RTL | Unit and accessibility testing |
+| Storybook 8 | Component documentation |
+| ESLint + Prettier | Code quality |
+
+---
+
+## Setup
+
+### Prerequisites
+
+- Node.js >=20
+- npm >=10
+
+### Install dependencies
+
+```bash
+npm install
+```
+
+### Development
+
+```bash
+npm run dev
+```
+
+Opens Storybook at `http://localhost:6006`.
+
+---
+
+## Scripts
+
+| Command | Description |
+|---|---|
+| `npm run dev` | Start Storybook development server |
+| `npm run build` | Build library for distribution |
+| `npm run build:storybook` | Build static Storybook |
+| `npm test` | Run test suite |
+| `npm run test:watch` | Run tests in watch mode |
+| `npm run test:coverage` | Run tests with coverage report |
+| `npm run typecheck` | TypeScript type check (no emit) |
+| `npm run lint` | Lint source files |
+| `npm run lint:fix` | Lint and auto-fix |
+| `npm run format` | Format source files with Prettier |
+| `npm run format:check` | Check formatting without writing |
+
+---
+
+## Using the library
+
+```tsx
+import { Button } from '@inzumer/ui'
+import '@inzumer/ui/dist/style.css'
+
+export function App() {
+  return (
+    <Button variant="primary" onClick={() => console.log('clicked')}>
+      Click me
+    </Button>
+  )
+}
+```
+
+---
+
+## Contributing
+
+### Architecture rules
+
+All agents and architecture rules are defined in `.claude/agents/`. Read them before contributing.
+
+### Planning requirement
+
+All non-trivial changes require a planning document in `/docs/plans/` before implementation begins.  
+See `YYYY-MM-DD-task-name.md` format.
+
+### Architectural decisions
+
+Significant architecture changes require an ADR in `/docs/adr/`.
+
+### Code standards
+
+- Zero `any` — strict TypeScript throughout
+- Semantic HTML first — no clickable `div`s
+- Token-only Tailwind — no arbitrary values
+- Every component must: be tested, be accessible, be Storybook-documented, be exported
+
+### Commit convention
+
+Conventional Commits format:
+
+```
+feat(button): add loading state
+fix(button): correct focus ring on Firefox
+docs: update README setup instructions
+```
+
+### Pull request checklist
+
+- [ ] Planning document exists in `/docs/plans/`
+- [ ] All tests pass (`npm test`)
+- [ ] TypeScript passes (`npm run typecheck`)
+- [ ] Lint passes (`npm run lint`)
+- [ ] Storybook stories cover new states
+- [ ] axe-core violations: zero
+
+---
+
+## Accessibility commitment
+
+This library targets **WCAG 2.1 AA** compliance for every component. Accessibility is not optional and is tested automatically via axe-core on every build.
+
+If you find an accessibility issue, please open an issue with the label `a11y`.

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),b=require("clsx"),f=require("tailwind-merge"),g=require("class-variance-authority");function p(...t){return f.twMerge(b.clsx(t))}const x=g.cva(["inline-flex items-center justify-center gap-2","font-medium rounded-md","transition-colors duration-base ease-ui","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2","disabled:pointer-events-none disabled:opacity-50","motion-reduce:transition-none","min-h-touch min-w-touch"],{variants:{variant:{primary:["bg-primary-600 text-white","hover:bg-primary-700 active:bg-primary-800","focus-visible:ring-primary-500"],secondary:["bg-neutral-100 text-neutral-900 border border-neutral-300","hover:bg-neutral-200 active:bg-neutral-300","focus-visible:ring-neutral-500","dark:bg-neutral-800 dark:text-neutral-100 dark:border-neutral-600","dark:hover:bg-neutral-700"],ghost:["bg-transparent text-neutral-700","hover:bg-neutral-100 active:bg-neutral-200","focus-visible:ring-neutral-500","dark:text-neutral-300 dark:hover:bg-neutral-800"],danger:["bg-danger-500 text-white","hover:bg-danger-600 active:bg-danger-600","focus-visible:ring-danger-500"]},size:{sm:"h-8 px-3 text-sm",md:"h-10 px-4 text-sm",lg:"h-12 px-6 text-base"}},defaultVariants:{variant:"primary",size:"md"}}),h=()=>e.jsxs("svg",{className:"animate-spin h-4 w-4",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","aria-hidden":"true",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"})]}),s=d.forwardRef(({variant:t,size:n,isLoading:r=!1,loadingText:a,disabled:i,children:o,className:c,...l},u)=>{const m=i||r;return e.jsxs("button",{ref:u,disabled:m,"aria-busy":r,className:p(x({variant:t,size:n}),c),...l,children:[r&&e.jsx(h,{}),r&&a?a:o]})});s.displayName="Button";const v={primary:{50:"#eff6ff",100:"#dbeafe",200:"#bfdbfe",300:"#93c5fd",400:"#60a5fa",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8",800:"#1e40af",900:"#1e3a8a",950:"#172554"},neutral:{50:"#f9fafb",100:"#f3f4f6",200:"#e5e7eb",300:"#d1d5db",400:"#9ca3af",500:"#6b7280",600:"#4b5563",700:"#374151",800:"#1f2937",900:"#111827",950:"#030712"},danger:{500:"#ef4444",600:"#dc2626"},success:{500:"#22c55e",600:"#16a34a"}},y={xs:"0.25rem",sm:"0.5rem",md:"1rem",lg:"1.5rem",xl:"2rem","2xl":"3rem"},w={sm:"0.25rem",md:"0.375rem",lg:"0.5rem",full:"9999px"},k={fontFamily:{sans:"Inter, system-ui, sans-serif",mono:"JetBrains Mono, monospace"},fontSize:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem"},lineHeight:{xs:"1rem",sm:"1.25rem",base:"1.5rem",lg:"1.75rem",xl:"1.75rem"}},j={dropdown:1e3,sticky:1100,overlay:1200,modal:1300,toast:1400,tooltip:1500},z={duration:{fast:"100ms",base:"200ms",slow:"350ms"},easing:{ui:"cubic-bezier(0.4, 0, 0.2, 1)",spring:"cubic-bezier(0.34, 1.56, 0.64, 1)"}};exports.Button=s;exports.colors=v;exports.motion=z;exports.radius=w;exports.spacing=y;exports.typography=k;exports.zIndex=j;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/utils/cn.ts","../../src/components/atoms/Button/Button.styles.ts","../../src/components/atoms/Button/Button.tsx","../../src/tokens/colors.ts","../../src/tokens/spacing.ts","../../src/tokens/radius.ts","../../src/tokens/typography.ts","../../src/tokens/z-index.ts","../../src/tokens/motion.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { cva } from 'class-variance-authority'\n\nexport const buttonVariants = cva(\n  [\n    'inline-flex items-center justify-center gap-2',\n    'font-medium rounded-md',\n    'transition-colors duration-base ease-ui',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'motion-reduce:transition-none',\n    'min-h-touch min-w-touch',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-primary-600 text-white',\n          'hover:bg-primary-700 active:bg-primary-800',\n          'focus-visible:ring-primary-500',\n        ],\n        secondary: [\n          'bg-neutral-100 text-neutral-900 border border-neutral-300',\n          'hover:bg-neutral-200 active:bg-neutral-300',\n          'focus-visible:ring-neutral-500',\n          'dark:bg-neutral-800 dark:text-neutral-100 dark:border-neutral-600',\n          'dark:hover:bg-neutral-700',\n        ],\n        ghost: [\n          'bg-transparent text-neutral-700',\n          'hover:bg-neutral-100 active:bg-neutral-200',\n          'focus-visible:ring-neutral-500',\n          'dark:text-neutral-300 dark:hover:bg-neutral-800',\n        ],\n        danger: [\n          'bg-danger-500 text-white',\n          'hover:bg-danger-600 active:bg-danger-600',\n          'focus-visible:ring-danger-500',\n        ],\n      },\n      size: {\n        sm: 'h-8 px-3 text-sm',\n        md: 'h-10 px-4 text-sm',\n        lg: 'h-12 px-6 text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n)\n","import { forwardRef } from 'react'\nimport { cn } from '@/utils/cn'\nimport { buttonVariants } from './Button.styles'\nimport type { ButtonProps } from './Button.types'\n\nconst Spinner = () => (\n  <svg\n    className=\"animate-spin h-4 w-4\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    aria-hidden=\"true\"\n  >\n    <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n    <path\n      className=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n    />\n  </svg>\n)\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant,\n      size,\n      isLoading = false,\n      loadingText,\n      disabled,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const isDisabled = disabled || isLoading\n\n    return (\n      <button\n        ref={ref}\n        disabled={isDisabled}\n        aria-busy={isLoading}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      >\n        {isLoading && <Spinner />}\n        {isLoading && loadingText ? loadingText : children}\n      </button>\n    )\n  },\n)\n\nButton.displayName = 'Button'\n","export const colors = {\n  primary: {\n    50: '#eff6ff',\n    100: '#dbeafe',\n    200: '#bfdbfe',\n    300: '#93c5fd',\n    400: '#60a5fa',\n    500: '#3b82f6',\n    600: '#2563eb',\n    700: '#1d4ed8',\n    800: '#1e40af',\n    900: '#1e3a8a',\n    950: '#172554',\n  },\n  neutral: {\n    50: '#f9fafb',\n    100: '#f3f4f6',\n    200: '#e5e7eb',\n    300: '#d1d5db',\n    400: '#9ca3af',\n    500: '#6b7280',\n    600: '#4b5563',\n    700: '#374151',\n    800: '#1f2937',\n    900: '#111827',\n    950: '#030712',\n  },\n  danger: {\n    500: '#ef4444',\n    600: '#dc2626',\n  },\n  success: {\n    500: '#22c55e',\n    600: '#16a34a',\n  },\n} as const\n","export const spacing = {\n  xs: '0.25rem',\n  sm: '0.5rem',\n  md: '1rem',\n  lg: '1.5rem',\n  xl: '2rem',\n  '2xl': '3rem',\n} as const\n","export const radius = {\n  sm: '0.25rem',\n  md: '0.375rem',\n  lg: '0.5rem',\n  full: '9999px',\n} as const\n","export const typography = {\n  fontFamily: {\n    sans: 'Inter, system-ui, sans-serif',\n    mono: 'JetBrains Mono, monospace',\n  },\n  fontSize: {\n    xs: '0.75rem',\n    sm: '0.875rem',\n    base: '1rem',\n    lg: '1.125rem',\n    xl: '1.25rem',\n  },\n  lineHeight: {\n    xs: '1rem',\n    sm: '1.25rem',\n    base: '1.5rem',\n    lg: '1.75rem',\n    xl: '1.75rem',\n  },\n} as const\n","export const zIndex = {\n  dropdown: 1000,\n  sticky: 1100,\n  overlay: 1200,\n  modal: 1300,\n  toast: 1400,\n  tooltip: 1500,\n} as const\n","export const motion = {\n  duration: {\n    fast: '100ms',\n    base: '200ms',\n    slow: '350ms',\n  },\n  easing: {\n    ui: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n  },\n} as const\n"],"names":["cn","inputs","twMerge","clsx","buttonVariants","cva","Spinner","jsxs","jsx","Button","forwardRef","variant","size","isLoading","loadingText","disabled","children","className","props","ref","isDisabled","colors","spacing","radius","typography","zIndex","motion"],"mappings":"4NAGO,SAASA,KAAMC,EAAsB,CAC1C,OAAOC,EAAAA,QAAQC,OAAKF,CAAM,CAAC,CAC7B,CCHO,MAAMG,EAAiBC,EAAAA,IAC5B,CACE,gDACA,yBACA,0CACA,8EACA,mDACA,gCACA,yBAAA,EAEF,CACE,SAAU,CACR,QAAS,CACP,QAAS,CACP,4BACA,6CACA,gCAAA,EAEF,UAAW,CACT,4DACA,6CACA,iCACA,oEACA,2BAAA,EAEF,MAAO,CACL,kCACA,6CACA,iCACA,iDAAA,EAEF,OAAQ,CACN,2BACA,2CACA,+BAAA,CACF,EAEF,KAAM,CACJ,GAAI,mBACJ,GAAI,oBACJ,GAAI,qBAAA,CACN,EAEF,gBAAiB,CACf,QAAS,UACT,KAAM,IAAA,CACR,CAEJ,EC7CMC,EAAU,IACdC,EAAAA,KAAC,MAAA,CACC,UAAU,uBACV,MAAM,6BACN,KAAK,OACL,QAAQ,YACR,cAAY,OAEZ,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAO,UAAU,aAAa,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,OAAO,eAAe,YAAY,IAAI,EAC5FA,EAAAA,IAAC,OAAA,CACC,UAAU,aACV,KAAK,eACL,EAAE,6CAAA,CAAA,CACJ,CAAA,CACF,EAGWC,EAASC,EAAAA,WACpB,CACE,CACE,QAAAC,EACA,KAAAC,EACA,UAAAC,EAAY,GACZ,YAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAAaL,GAAYF,EAE/B,OACEN,EAAAA,KAAC,SAAA,CACC,IAAAY,EACA,SAAUC,EACV,YAAWP,EACX,UAAWb,EAAGI,EAAe,CAAE,QAAAO,EAAS,KAAAC,CAAA,CAAM,EAAGK,CAAS,EACzD,GAAGC,EAEH,SAAA,CAAAL,SAAcP,EAAA,EAAQ,EACtBO,GAAaC,EAAcA,EAAcE,CAAA,CAAA,CAAA,CAGhD,CACF,EAEAP,EAAO,YAAc,SCrDd,MAAMY,EAAS,CACpB,QAAS,CACP,GAAI,UACJ,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,SAAA,EAEP,QAAS,CACP,GAAI,UACJ,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,UACL,IAAK,SAAA,EAEP,OAAQ,CACN,IAAK,UACL,IAAK,SAAA,EAEP,QAAS,CACP,IAAK,UACL,IAAK,SAAA,CAET,ECnCaC,EAAU,CACrB,GAAI,UACJ,GAAI,SACJ,GAAI,OACJ,GAAI,SACJ,GAAI,OACJ,MAAO,MACT,ECPaC,EAAS,CACpB,GAAI,UACJ,GAAI,WACJ,GAAI,SACJ,KAAM,QACR,ECLaC,EAAa,CACxB,WAAY,CACV,KAAM,+BACN,KAAM,2BAAA,EAER,SAAU,CACR,GAAI,UACJ,GAAI,WACJ,KAAM,OACN,GAAI,WACJ,GAAI,SAAA,EAEN,WAAY,CACV,GAAI,OACJ,GAAI,UACJ,KAAM,SACN,GAAI,UACJ,GAAI,SAAA,CAER,ECnBaC,EAAS,CACpB,SAAU,IACV,OAAQ,KACR,QAAS,KACT,MAAO,KACP,MAAO,KACP,QAAS,IACX,ECPaC,EAAS,CACpB,SAAU,CACR,KAAM,QACN,KAAM,QACN,KAAM,OAAA,EAER,OAAQ,CACN,GAAI,+BACJ,OAAQ,mCAAA,CAEZ"}

package/dist/es/components/atoms/Button/Button.js

@@ -0,0 +1,54 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { cn as f } from "../../../utils/cn.js";
+import { buttonVariants as u } from "./Button.styles.js";
+const d = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: "animate-spin h-4 w-4",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ t("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          className: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+        }
+      )
+    ]
+  }
+), h = p(
+  ({
+    variant: o,
+    size: a,
+    isLoading: r = !1,
+    loadingText: s,
+    disabled: i,
+    children: c,
+    className: l,
+    ...n
+  }, m) => /* @__PURE__ */ e(
+    "button",
+    {
+      ref: m,
+      disabled: i || r,
+      "aria-busy": r,
+      className: f(u({ variant: o, size: a }), l),
+      ...n,
+      children: [
+        r && /* @__PURE__ */ t(d, {}),
+        r && s ? s : c
+      ]
+    }
+  )
+);
+h.displayName = "Button";
+export {
+  h as Button
+};
+//# sourceMappingURL=Button.js.map

package/dist/es/components/atoms/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../../src/components/atoms/Button/Button.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { cn } from '@/utils/cn'\nimport { buttonVariants } from './Button.styles'\nimport type { ButtonProps } from './Button.types'\n\nconst Spinner = () => (\n  <svg\n    className=\"animate-spin h-4 w-4\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    aria-hidden=\"true\"\n  >\n    <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n    <path\n      className=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n    />\n  </svg>\n)\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant,\n      size,\n      isLoading = false,\n      loadingText,\n      disabled,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const isDisabled = disabled || isLoading\n\n    return (\n      <button\n        ref={ref}\n        disabled={isDisabled}\n        aria-busy={isLoading}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      >\n        {isLoading && <Spinner />}\n        {isLoading && loadingText ? loadingText : children}\n      </button>\n    )\n  },\n)\n\nButton.displayName = 'Button'\n"],"names":["Spinner","jsxs","jsx","Button","forwardRef","variant","size","isLoading","loadingText","disabled","children","className","props","ref","cn","buttonVariants"],"mappings":";;;;AAKA,MAAMA,IAAU,MACd,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,OAAM;AAAA,IACN,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,eAAY;AAAA,IAEZ,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAA,EAAO,WAAU,cAAa,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,gBAAe,aAAY,KAAI;AAAA,MAC5F,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,GAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AACF,GAGWC,IAASC;AAAA,EACpB,CACE;AAAA,IACE,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAKE,gBAAAZ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAY;AAAA,MACA,UALeJ,KAAYF;AAAA,MAM3B,aAAWA;AAAA,MACX,WAAWO,EAAGC,EAAe,EAAE,SAAAV,GAAS,MAAAC,EAAA,CAAM,GAAGK,CAAS;AAAA,MACzD,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAL,uBAAcP,GAAA,EAAQ;AAAA,QACtBO,KAAaC,IAAcA,IAAcE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIlD;AAEAP,EAAO,cAAc;"}

package/dist/es/components/atoms/Button/Button.styles.js

@@ -0,0 +1,54 @@
+import { cva as e } from "class-variance-authority";
+const t = e(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "font-medium rounded-md",
+    "transition-colors duration-base ease-ui",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "motion-reduce:transition-none",
+    "min-h-touch min-w-touch"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-primary-600 text-white",
+          "hover:bg-primary-700 active:bg-primary-800",
+          "focus-visible:ring-primary-500"
+        ],
+        secondary: [
+          "bg-neutral-100 text-neutral-900 border border-neutral-300",
+          "hover:bg-neutral-200 active:bg-neutral-300",
+          "focus-visible:ring-neutral-500",
+          "dark:bg-neutral-800 dark:text-neutral-100 dark:border-neutral-600",
+          "dark:hover:bg-neutral-700"
+        ],
+        ghost: [
+          "bg-transparent text-neutral-700",
+          "hover:bg-neutral-100 active:bg-neutral-200",
+          "focus-visible:ring-neutral-500",
+          "dark:text-neutral-300 dark:hover:bg-neutral-800"
+        ],
+        danger: [
+          "bg-danger-500 text-white",
+          "hover:bg-danger-600 active:bg-danger-600",
+          "focus-visible:ring-danger-500"
+        ]
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-sm",
+        lg: "h-12 px-6 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+export {
+  t as buttonVariants
+};
+//# sourceMappingURL=Button.styles.js.map

package/dist/es/components/atoms/Button/Button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.js","sources":["../../../../../src/components/atoms/Button/Button.styles.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const buttonVariants = cva(\n  [\n    'inline-flex items-center justify-center gap-2',\n    'font-medium rounded-md',\n    'transition-colors duration-base ease-ui',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'motion-reduce:transition-none',\n    'min-h-touch min-w-touch',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-primary-600 text-white',\n          'hover:bg-primary-700 active:bg-primary-800',\n          'focus-visible:ring-primary-500',\n        ],\n        secondary: [\n          'bg-neutral-100 text-neutral-900 border border-neutral-300',\n          'hover:bg-neutral-200 active:bg-neutral-300',\n          'focus-visible:ring-neutral-500',\n          'dark:bg-neutral-800 dark:text-neutral-100 dark:border-neutral-600',\n          'dark:hover:bg-neutral-700',\n        ],\n        ghost: [\n          'bg-transparent text-neutral-700',\n          'hover:bg-neutral-100 active:bg-neutral-200',\n          'focus-visible:ring-neutral-500',\n          'dark:text-neutral-300 dark:hover:bg-neutral-800',\n        ],\n        danger: [\n          'bg-danger-500 text-white',\n          'hover:bg-danger-600 active:bg-danger-600',\n          'focus-visible:ring-danger-500',\n        ],\n      },\n      size: {\n        sm: 'h-8 px-3 text-sm',\n        md: 'h-10 px-4 text-sm',\n        lg: 'h-12 px-6 text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n)\n"],"names":["buttonVariants","cva"],"mappings":";AAEO,MAAMA,IAAiBC;AAAA,EAC5B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;"}

package/dist/es/index.js

@@ -0,0 +1,17 @@
+import { Button as t } from "./components/atoms/Button/Button.js";
+import { colors as e } from "./tokens/colors.js";
+import { motion as x } from "./tokens/motion.js";
+import { radius as n } from "./tokens/radius.js";
+import { spacing as i } from "./tokens/spacing.js";
+import { typography as c } from "./tokens/typography.js";
+import { zIndex as g } from "./tokens/z-index.js";
+export {
+  t as Button,
+  e as colors,
+  x as motion,
+  n as radius,
+  i as spacing,
+  c as typography,
+  g as zIndex
+};
+//# sourceMappingURL=index.js.map

package/dist/es/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/es/tokens/colors.js

@@ -0,0 +1,40 @@
+const f = {
+  primary: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+  },
+  neutral: {
+    50: "#f9fafb",
+    100: "#f3f4f6",
+    200: "#e5e7eb",
+    300: "#d1d5db",
+    400: "#9ca3af",
+    500: "#6b7280",
+    600: "#4b5563",
+    700: "#374151",
+    800: "#1f2937",
+    900: "#111827",
+    950: "#030712"
+  },
+  danger: {
+    500: "#ef4444",
+    600: "#dc2626"
+  },
+  success: {
+    500: "#22c55e",
+    600: "#16a34a"
+  }
+};
+export {
+  f as colors
+};
+//# sourceMappingURL=colors.js.map

package/dist/es/tokens/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["../../../src/tokens/colors.ts"],"sourcesContent":["export const colors = {\n  primary: {\n    50: '#eff6ff',\n    100: '#dbeafe',\n    200: '#bfdbfe',\n    300: '#93c5fd',\n    400: '#60a5fa',\n    500: '#3b82f6',\n    600: '#2563eb',\n    700: '#1d4ed8',\n    800: '#1e40af',\n    900: '#1e3a8a',\n    950: '#172554',\n  },\n  neutral: {\n    50: '#f9fafb',\n    100: '#f3f4f6',\n    200: '#e5e7eb',\n    300: '#d1d5db',\n    400: '#9ca3af',\n    500: '#6b7280',\n    600: '#4b5563',\n    700: '#374151',\n    800: '#1f2937',\n    900: '#111827',\n    950: '#030712',\n  },\n  danger: {\n    500: '#ef4444',\n    600: '#dc2626',\n  },\n  success: {\n    500: '#22c55e',\n    600: '#16a34a',\n  },\n} as const\n"],"names":["colors"],"mappings":"AAAO,MAAMA,IAAS;AAAA,EACpB,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAAA,EAEP,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAAA,EAEP,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAAA,EAEP,SAAS;AAAA,IACP,KAAK;AAAA,IACL,KAAK;AAAA,EAAA;AAET;"}

package/dist/es/tokens/motion.js

@@ -0,0 +1,15 @@
+const i = {
+  duration: {
+    fast: "100ms",
+    base: "200ms",
+    slow: "350ms"
+  },
+  easing: {
+    ui: "cubic-bezier(0.4, 0, 0.2, 1)",
+    spring: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+  }
+};
+export {
+  i as motion
+};
+//# sourceMappingURL=motion.js.map

package/dist/es/tokens/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","sources":["../../../src/tokens/motion.ts"],"sourcesContent":["export const motion = {\n  duration: {\n    fast: '100ms',\n    base: '200ms',\n    slow: '350ms',\n  },\n  easing: {\n    ui: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n  },\n} as const\n"],"names":["motion"],"mappings":"AAAO,MAAMA,IAAS;AAAA,EACpB,UAAU;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAER,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,QAAQ;AAAA,EAAA;AAEZ;"}

package/dist/es/tokens/radius.js

@@ -0,0 +1,10 @@
+const m = {
+  sm: "0.25rem",
+  md: "0.375rem",
+  lg: "0.5rem",
+  full: "9999px"
+};
+export {
+  m as radius
+};
+//# sourceMappingURL=radius.js.map

package/dist/es/tokens/radius.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.js","sources":["../../../src/tokens/radius.ts"],"sourcesContent":["export const radius = {\n  sm: '0.25rem',\n  md: '0.375rem',\n  lg: '0.5rem',\n  full: '9999px',\n} as const\n"],"names":["radius"],"mappings":"AAAO,MAAMA,IAAS;AAAA,EACpB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;"}

package/dist/es/tokens/spacing.js

@@ -0,0 +1,12 @@
+const m = {
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "1.5rem",
+  xl: "2rem",
+  "2xl": "3rem"
+};
+export {
+  m as spacing
+};
+//# sourceMappingURL=spacing.js.map

package/dist/es/tokens/spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.js","sources":["../../../src/tokens/spacing.ts"],"sourcesContent":["export const spacing = {\n  xs: '0.25rem',\n  sm: '0.5rem',\n  md: '1rem',\n  lg: '1.5rem',\n  xl: '2rem',\n  '2xl': '3rem',\n} as const\n"],"names":["spacing"],"mappings":"AAAO,MAAMA,IAAU;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT;"}

package/dist/es/tokens/typography.js

@@ -0,0 +1,24 @@
+const e = {
+  fontFamily: {
+    sans: "Inter, system-ui, sans-serif",
+    mono: "JetBrains Mono, monospace"
+  },
+  fontSize: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem"
+  },
+  lineHeight: {
+    xs: "1rem",
+    sm: "1.25rem",
+    base: "1.5rem",
+    lg: "1.75rem",
+    xl: "1.75rem"
+  }
+};
+export {
+  e as typography
+};
+//# sourceMappingURL=typography.js.map

package/dist/es/tokens/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sources":["../../../src/tokens/typography.ts"],"sourcesContent":["export const typography = {\n  fontFamily: {\n    sans: 'Inter, system-ui, sans-serif',\n    mono: 'JetBrains Mono, monospace',\n  },\n  fontSize: {\n    xs: '0.75rem',\n    sm: '0.875rem',\n    base: '1rem',\n    lg: '1.125rem',\n    xl: '1.25rem',\n  },\n  lineHeight: {\n    xs: '1rem',\n    sm: '1.25rem',\n    base: '1.5rem',\n    lg: '1.75rem',\n    xl: '1.75rem',\n  },\n} as const\n"],"names":["typography"],"mappings":"AAAO,MAAMA,IAAa;AAAA,EACxB,YAAY;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAER,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAAA,EAEN,YAAY;AAAA,IACV,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAER;"}

package/dist/es/tokens/z-index.js

@@ -0,0 +1,12 @@
+const o = {
+  dropdown: 1e3,
+  sticky: 1100,
+  overlay: 1200,
+  modal: 1300,
+  toast: 1400,
+  tooltip: 1500
+};
+export {
+  o as zIndex
+};
+//# sourceMappingURL=z-index.js.map

package/dist/es/tokens/z-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-index.js","sources":["../../../src/tokens/z-index.ts"],"sourcesContent":["export const zIndex = {\n  dropdown: 1000,\n  sticky: 1100,\n  overlay: 1200,\n  modal: 1300,\n  toast: 1400,\n  tooltip: 1500,\n} as const\n"],"names":["zIndex"],"mappings":"AAAO,MAAMA,IAAS;AAAA,EACpB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;"}

package/dist/es/utils/cn.js

@@ -0,0 +1,9 @@
+import { clsx as o } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+function n(...r) {
+  return t(o(r));
+}
+export {
+  n as cn
+};
+//# sourceMappingURL=cn.js.map

package/dist/es/utils/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","sources":["../../../src/utils/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"names":["cn","inputs","twMerge","clsx"],"mappings":";;AAGO,SAASA,KAAMC,GAAsB;AAC1C,SAAOC,EAAQC,EAAKF,CAAM,CAAC;AAC7B;"}

package/dist/globals.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-sans),system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-mono),monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}*,:after,:before{box-sizing:border-box}[role=button],a,button{touch-action:manipulation}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sticky{position:sticky}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.h-10{height:2.5rem}.h-12{height:3rem}.h-4{height:1rem}.h-8{height:2rem}.min-h-screen{min-height:100vh}.min-h-touch{min-height:44px}.w-4{width:1rem}.min-w-touch{min-width:44px}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.rounded-md{border-radius:var(--radius-md)}.border{border-width:1px}.border-neutral-300{border-color:var(--color-neutral-300)}.bg-danger-500{background-color:var(--color-danger-500)}.bg-neutral-100{background-color:var(--color-neutral-100)}.bg-neutral-900{background-color:var(--color-neutral-900)}.bg-primary-600{background-color:var(--color-primary-600)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.text-base{font-size:var(--text-base);line-height:var(--leading-base)}.text-sm{font-size:var(--text-sm);line-height:var(--leading-sm)}.font-medium{font-weight:500}.text-neutral-700{color:var(--color-neutral-700)}.text-neutral-900{color:var(--color-neutral-900)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-base{transition-duration:var(--duration-base)}:root{--color-primary-50:#eff6ff;--color-primary-100:#dbeafe;--color-primary-200:#bfdbfe;--color-primary-300:#93c5fd;--color-primary-400:#60a5fa;--color-primary-500:#3b82f6;--color-primary-600:#2563eb;--color-primary-700:#1d4ed8;--color-primary-800:#1e40af;--color-primary-900:#1e3a8a;--color-primary-950:#172554;--color-neutral-50:#f9fafb;--color-neutral-100:#f3f4f6;--color-neutral-200:#e5e7eb;--color-neutral-300:#d1d5db;--color-neutral-400:#9ca3af;--color-neutral-500:#6b7280;--color-neutral-600:#4b5563;--color-neutral-700:#374151;--color-neutral-800:#1f2937;--color-neutral-900:#111827;--color-neutral-950:#030712;--color-danger-500:#ef4444;--color-danger-600:#dc2626;--color-success-500:#22c55e;--color-success-600:#16a34a;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--font-sans:Inter,system-ui,sans-serif;--font-mono:"JetBrains Mono",monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--leading-xs:1rem;--leading-sm:1.25rem;--leading-base:1.5rem;--leading-lg:1.75rem;--leading-xl:1.75rem;--z-dropdown:1000;--z-sticky:1100;--z-overlay:1200;--z-modal:1300;--z-toast:1400;--z-tooltip:1500;--duration-fast:100ms;--duration-base:200ms;--duration-slow:350ms;--ease-ui:cubic-bezier(0.4,0,0.2,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1)}html.dark{--color-primary-600:#3b82f6;--color-primary-700:#2563eb;--color-primary-800:#1d4ed8;--color-neutral-50:#111827;--color-neutral-100:#1f2937;--color-neutral-200:#374151;--color-neutral-300:#4b5563;--color-neutral-400:#6b7280;--color-neutral-500:#9ca3af;--color-neutral-600:#d1d5db;--color-neutral-700:#e5e7eb;--color-neutral-800:#f3f4f6;--color-neutral-900:#f9fafb;--color-neutral-950:#fff;--color-danger-500:#f87171;--color-danger-600:#ef4444}.hover\:bg-danger-600:hover{background-color:var(--color-danger-600)}.hover\:bg-neutral-100:hover{background-color:var(--color-neutral-100)}.hover\:bg-neutral-200:hover{background-color:var(--color-neutral-200)}.hover\:bg-primary-700:hover{background-color:var(--color-primary-700)}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-danger-500:focus-visible{--tw-ring-color:var(--color-danger-500)}.focus-visible\:ring-neutral-500:focus-visible{--tw-ring-color:var(--color-neutral-500)}.focus-visible\:ring-primary-500:focus-visible{--tw-ring-color:var(--color-primary-500)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.active\:bg-danger-600:active{background-color:var(--color-danger-600)}.active\:bg-neutral-200:active{background-color:var(--color-neutral-200)}.active\:bg-neutral-300:active{background-color:var(--color-neutral-300)}.active\:bg-primary-800:active{background-color:var(--color-primary-800)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}@media (prefers-reduced-motion:reduce){.motion-reduce\:transition-none{transition-property:none}}.dark\:border-neutral-600:is(.dark *){border-color:var(--color-neutral-600)}.dark\:bg-neutral-800:is(.dark *){background-color:var(--color-neutral-800)}.dark\:text-neutral-100:is(.dark *){color:var(--color-neutral-100)}.dark\:text-neutral-300:is(.dark *){color:var(--color-neutral-300)}.dark\:hover\:bg-neutral-700:hover:is(.dark *){background-color:var(--color-neutral-700)}.dark\:hover\:bg-neutral-800:hover:is(.dark *){background-color:var(--color-neutral-800)}

package/dist/types/index.d.ts

@@ -0,0 +1,122 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
+
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    loadingText?: string;
+}
+
+export declare type ButtonSize = 'sm' | 'md' | 'lg';
+
+export declare type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+
+export declare const colors: {
+    readonly primary: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+        readonly 950: "#172554";
+    };
+    readonly neutral: {
+        readonly 50: "#f9fafb";
+        readonly 100: "#f3f4f6";
+        readonly 200: "#e5e7eb";
+        readonly 300: "#d1d5db";
+        readonly 400: "#9ca3af";
+        readonly 500: "#6b7280";
+        readonly 600: "#4b5563";
+        readonly 700: "#374151";
+        readonly 800: "#1f2937";
+        readonly 900: "#111827";
+        readonly 950: "#030712";
+    };
+    readonly danger: {
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+    };
+    readonly success: {
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+    };
+};
+
+export declare const motion: {
+    readonly duration: {
+        readonly fast: "100ms";
+        readonly base: "200ms";
+        readonly slow: "350ms";
+    };
+    readonly easing: {
+        readonly ui: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    };
+};
+
+export declare const radius: {
+    readonly sm: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly full: "9999px";
+};
+
+export declare const spacing: {
+    readonly xs: "0.25rem";
+    readonly sm: "0.5rem";
+    readonly md: "1rem";
+    readonly lg: "1.5rem";
+    readonly xl: "2rem";
+    readonly '2xl': "3rem";
+};
+
+export declare const typography: {
+    readonly fontFamily: {
+        readonly sans: "Inter, system-ui, sans-serif";
+        readonly mono: "JetBrains Mono, monospace";
+    };
+    readonly fontSize: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+    };
+    readonly lineHeight: {
+        readonly xs: "1rem";
+        readonly sm: "1.25rem";
+        readonly base: "1.5rem";
+        readonly lg: "1.75rem";
+        readonly xl: "1.75rem";
+    };
+};
+
+export declare interface UIThemeTokens {
+    colors: typeof colors;
+    spacing: typeof spacing;
+    radius: typeof radius;
+    typography: typeof typography;
+    zIndex: typeof zIndex;
+    motion: typeof motion;
+}
+
+export declare const zIndex: {
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly overlay: 1200;
+    readonly modal: 1300;
+    readonly toast: 1400;
+    readonly tooltip: 1500;
+};
+
+export { }

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@inzumer/ui-library",
+  "version": "0.1.0",
+  "description": "Production-grade React component library for web and mobile webview.",
+  "keywords": [
+    "react",
+    "ui",
+    "component-library",
+    "accessibility",
+    "design-system",
+    "tailwind"
+  ],
+  "license": "MIT",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/es/index.js",
+  "types": "./dist/types/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./styles": "./dist/globals.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "prebuild": "rm -rf dist",
+    "build": "BUILD_FORMAT=es vite build && BUILD_FORMAT=cjs vite build && npx tailwindcss -i ./src/styles/globals.css -o ./dist/globals.css --minify",
+    "build:storybook": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
+    "pre-publish": "npm run typecheck && npm run test && npm run build",
+    "publish:dry": "npm pack --dry-run",
+    "publish:local": "npm pack",
+    "release": "npm run pre-publish && npm publish --access public"
+  },
+  "peerDependencies": {
+    "class-variance-authority": ">=0.7.0",
+    "clsx": ">=2.0.0",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwind-merge": ">=2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "class-variance-authority": {
+      "optional": false
+    },
+    "clsx": {
+      "optional": false
+    },
+    "tailwind-merge": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-actions": "8.6.18",
+    "@storybook/addon-docs": "8.6.18",
+    "@storybook/addon-interactions": "8.6.18",
+    "@storybook/addon-themes": "8.6.18",
+    "@storybook/addon-viewport": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest-axe": "3.5.9",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.6",
+    "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "eslint": "^9.16.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-storybook": "^0.11.1",
+    "jest-axe": "^9.0.0",
+    "jsdom": "^25.0.1",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "storybook": "^8.4.7",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.6"
+  }
+}