@vllnt/ui 0.1.8 → 0.1.11-canary.54f8a77

package/dist/test-setup.js

@@ -0,0 +1,19 @@
+import "@testing-library/jest-dom";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { expect } from "vitest";
+expect.extend(matchers);
+class MockResizeObserver {
+  observe() {
+    return;
+  }
+  unobserve() {
+    return;
+  }
+  disconnect() {
+    return;
+  }
+}
+globalThis.ResizeObserver = MockResizeObserver;
+HTMLElement.prototype.scrollIntoView = function scrollIntoView() {
+  return;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vllnt/ui",
-  "version": "0.1.8",
+  "version": "0.1.11-canary.54f8a77",
   "description": "React component library — 93 components built on Radix UI, Tailwind CSS, and CVA",
   "license": "MIT",
   "author": "vllnt",
@@ -23,39 +23,24 @@
     "shadcn"
   ],
   "type": "module",
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./tailwind-preset": {
-      "types": "./src/tailwind-preset.ts",
-      "import": "./src/tailwind-preset.ts"
+      "types": "./dist/tailwind-preset.d.ts",
+      "import": "./dist/tailwind-preset.js"
     },
     "./styles.css": "./styles.css",
     "./themes/default.css": "./themes/default.css"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
-    "access": "public",
-    "main": "./dist/index.js",
-    "module": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.js"
-      },
-      "./tailwind-preset": {
-        "types": "./dist/tailwind-preset.d.ts",
-        "import": "./dist/tailwind-preset.js"
-      },
-      "./styles.css": "./styles.css",
-      "./themes/default.css": "./themes/default.css"
-    }
+    "access": "public"
   },
   "files": [
     "dist",
@@ -65,25 +50,11 @@
   "sideEffects": [
     "*.css"
   ],
-  "scripts": {
-    "build": "tsup",
-    "clean": "rm -rf dist node_modules coverage .snapshots playwright-report test-results",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "check:circular": "madge --circular --extensions ts,tsx src",
-    "test": "vitest",
-    "test:once": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "test:visual": "playwright test -c playwright-ct.config.ts",
-    "test:visual:update": "playwright test -c playwright-ct.config.ts --update-snapshots",
-    "test:all": "pnpm test:coverage && pnpm test:visual",
-    "test:generate": "tsx scripts/generate-tests.ts"
-  },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
     "next": ">=14.0.0",
     "next-themes": ">=0.4.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
     "tailwindcss": ">=3.0.0"
   },
   "peerDependenciesMeta": {
@@ -137,7 +108,16 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@github-ui/storybook-addon-performance-panel": "^1.1.4",
     "@playwright/experimental-ct-react": "^1.57.0",
+    "@storybook/addon-a11y": "^10.2.17",
+    "@storybook/addon-designs": "^11.1.2",
+    "@storybook/addon-docs": "^10.2.17",
+    "@storybook/addon-mcp": "^0.3.4",
+    "@storybook/addon-themes": "^10.2.17",
+    "@storybook/react-vite": "^10.2.17",
+    "@storybook/test-runner": "^0.24.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^22",
@@ -152,11 +132,35 @@
     "jsdom": "^26.1.0",
     "playwright": "^1.57.0",
     "postcss": "^8.5.6",
+    "remark-gfm": "^4.0.1",
+    "storybook": "^10.2.17",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.5.0",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist node_modules coverage .snapshots playwright-report test-results storybook-static",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "check:circular": "madge --circular --extensions ts,tsx src",
+    "test": "vitest",
+    "test:once": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:visual": "playwright test -c playwright-ct.config.ts",
+    "test:visual:update": "playwright test -c playwright-ct.config.ts --update-snapshots",
+    "test:all": "pnpm test:coverage && pnpm test:visual",
+    "test:generate": "tsx scripts/generate-tests.ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test-storybook": "test-storybook",
+    "storybook:generate": "tsx scripts/generate-stories.ts",
+    "storybook:generate-docs": "tsx scripts/generate-docs.ts",
+    "storybook:verify": "tsx scripts/verify-stories.ts",
+    "storybook:fix-stories": "tsx scripts/fix-stories.ts",
+    "check:stories": "tsx scripts/check-story-coverage.ts"
   }
-}
+}

package/styles.css

@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+@property --vllnt-border-beam-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 90deg;
+}
+
 /* Default theme variables */
 @layer base {
   :root {
@@ -60,6 +66,55 @@
 
 /* Safe area utilities for notched/rounded devices (iPhone, etc.) */
 @layer utilities {
+  @keyframes vllnt-marquee-x {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(-50%, 0, 0);
+    }
+  }
+
+  @keyframes vllnt-marquee-y {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, -50%, 0);
+    }
+  }
+
+  @keyframes vllnt-animated-text-reveal {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 0.5rem, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes vllnt-terminal-cursor-blink {
+    0%,
+    49% {
+      opacity: 1;
+    }
+    50%,
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes vllnt-border-beam-angle {
+    from {
+      --vllnt-border-beam-angle: 90deg;
+    }
+    to {
+      --vllnt-border-beam-angle: 450deg;
+    }
+  }
+
   .ml-safe {
     margin-left: env(safe-area-inset-left, 0);
   }