@vllnt/ui 0.1.11 → 0.2.0-canary.4abf494

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.11",
+  "version": "0.2.0-canary.4abf494",
   "description": "React component library — 93 components built on Radix UI, Tailwind CSS, and CVA",
   "license": "MIT",
   "author": "vllnt",
@@ -45,16 +45,18 @@
   "files": [
     "dist",
     "styles.css",
-    "themes"
+    "themes",
+    "CHANGELOG.md",
+    "README.md"
   ],
   "sideEffects": [
     "*.css"
   ],
   "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": {
@@ -108,7 +110,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",
@@ -123,6 +134,8 @@
     "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",
@@ -132,7 +145,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "clean": "rm -rf dist node_modules coverage .snapshots playwright-report test-results",
+    "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",
@@ -142,6 +155,14 @@
     "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"
+    "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);
   }