@thangnqdev/ui 0.1.2 → 0.2.0

package/package.json

@@ -1,116 +1,160 @@
-{
-  "name": "@thangnqdev/ui",
-  "version": "0.1.2",
-  "type": "module",
-  "description": "Spatial Optics & Editorial Bento UI System",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./core": {
-      "types": "./dist/core/index.d.ts",
-      "import": "./dist/core/index.js",
-      "require": "./dist/core/index.cjs"
-    },
-    "./layout": {
-      "types": "./dist/layout/index.d.ts",
-      "import": "./dist/layout/index.js",
-      "require": "./dist/layout/index.cjs"
-    },
-    "./typography": {
-      "types": "./dist/typography/index.d.ts",
-      "import": "./dist/typography/index.js",
-      "require": "./dist/typography/index.cjs"
-    },
-    "./buttons": {
-      "types": "./dist/buttons/index.d.ts",
-      "import": "./dist/buttons/index.js",
-      "require": "./dist/buttons/index.cjs"
-    },
-    "./forms": {
-      "types": "./dist/forms/index.d.ts",
-      "import": "./dist/forms/index.js",
-      "require": "./dist/forms/index.cjs"
-    },
-    "./overlays": {
-      "types": "./dist/overlays/index.d.ts",
-      "import": "./dist/overlays/index.js",
-      "require": "./dist/overlays/index.cjs"
-    },
-    "./navigation": {
-      "types": "./dist/navigation/index.d.ts",
-      "import": "./dist/navigation/index.js",
-      "require": "./dist/navigation/index.cjs"
-    },
-    "./data-display": {
-      "types": "./dist/data-display/index.d.ts",
-      "import": "./dist/data-display/index.js",
-      "require": "./dist/data-display/index.cjs"
-    },
-    "./feedback": {
-      "types": "./dist/feedback/index.d.ts",
-      "import": "./dist/feedback/index.js",
-      "require": "./dist/feedback/index.cjs"
-    },
-    "./glass": {
-      "types": "./dist/glass/index.d.ts",
-      "import": "./dist/glass/index.js",
-      "require": "./dist/glass/index.cjs"
-    },
-    "./bento": {
-      "types": "./dist/bento/index.d.ts",
-      "import": "./dist/bento/index.js",
-      "require": "./dist/bento/index.cjs"
-    },
-    "./styles.css": "./dist/styles.css",
-    "./glass/styles.css": "./dist/glass/styles.css",
-    "./bento/styles.css": "./dist/bento/styles.css"
-  },
-  "files": [
-    "dist",
-    "src",
-    "llms.txt",
-    "ui-contract.json"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsup && node scripts/build-css.js",
-    "build:lib": "tsup && node scripts/build-css.js",
-    "watch:lib": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "preview": "vite preview"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "dependencies": {
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^1.16.0",
-    "tailwind-merge": "^3.0.2"
-  },
-  "devDependencies": {
-    "@tailwindcss/vite": "^4.3.3",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^7.0.1",
-    "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^6.0.5",
-    "jsdom": "^30.0.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwindcss": "^4.3.3",
-    "tsup": "^8.3.6",
-    "typescript": "^5.7.3",
-    "vite": "^8.2.1",
-    "vitest": "^3.0.7"
-  }
-}
+{
+  "name": "@thangnqdev/ui",
+  "version": "0.2.0",
+  "type": "module",
+  "description": "Spatial Optics & Editorial Bento UI System with Machine-Readable AI Contracts",
+  "license": "MIT",
+  "author": "thangnqdev",
+  "keywords": [
+    "react",
+    "ui",
+    "design-system",
+    "tailwind",
+    "spatial-optics",
+    "bento",
+    "accessibility",
+    "wcag",
+    "ssot",
+    "enterprise"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js",
+      "require": "./dist/core/index.cjs"
+    },
+    "./layout": {
+      "types": "./dist/layout/index.d.ts",
+      "import": "./dist/layout/index.js",
+      "require": "./dist/layout/index.cjs"
+    },
+    "./typography": {
+      "types": "./dist/typography/index.d.ts",
+      "import": "./dist/typography/index.js",
+      "require": "./dist/typography/index.cjs"
+    },
+    "./buttons": {
+      "types": "./dist/buttons/index.d.ts",
+      "import": "./dist/buttons/index.js",
+      "require": "./dist/buttons/index.cjs"
+    },
+    "./forms": {
+      "types": "./dist/forms/index.d.ts",
+      "import": "./dist/forms/index.js",
+      "require": "./dist/forms/index.cjs"
+    },
+    "./overlays": {
+      "types": "./dist/overlays/index.d.ts",
+      "import": "./dist/overlays/index.js",
+      "require": "./dist/overlays/index.cjs"
+    },
+    "./navigation": {
+      "types": "./dist/navigation/index.d.ts",
+      "import": "./dist/navigation/index.js",
+      "require": "./dist/navigation/index.cjs"
+    },
+    "./data-display": {
+      "types": "./dist/data-display/index.d.ts",
+      "import": "./dist/data-display/index.js",
+      "require": "./dist/data-display/index.cjs"
+    },
+    "./feedback": {
+      "types": "./dist/feedback/index.d.ts",
+      "import": "./dist/feedback/index.js",
+      "require": "./dist/feedback/index.cjs"
+    },
+    "./glass": {
+      "types": "./dist/glass/index.d.ts",
+      "import": "./dist/glass/index.js",
+      "require": "./dist/glass/index.cjs"
+    },
+    "./bento": {
+      "types": "./dist/bento/index.d.ts",
+      "import": "./dist/bento/index.js",
+      "require": "./dist/bento/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./components.css": "./dist/components.css",
+    "./reset.css": "./dist/reset.css",
+    "./core/styles.css": "./dist/core/styles.css",
+    "./layout/styles.css": "./dist/layout/styles.css",
+    "./typography/styles.css": "./dist/typography/styles.css",
+    "./buttons/styles.css": "./dist/buttons/styles.css",
+    "./forms/styles.css": "./dist/forms/styles.css",
+    "./overlays/styles.css": "./dist/overlays/styles.css",
+    "./navigation/styles.css": "./dist/navigation/styles.css",
+    "./data-display/styles.css": "./dist/data-display/styles.css",
+    "./feedback/styles.css": "./dist/feedback/styles.css",
+    "./glass/styles.css": "./dist/glass/styles.css",
+    "./bento/styles.css": "./dist/bento/styles.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "llms.txt",
+    "ui-contract.json",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build:manifests": "node scripts/generate-manifests.js",
+    "build:css": "node scripts/build-css.js",
+    "build:ts": "tsup",
+    "build": "node scripts/generate-manifests.js && tsup && node scripts/build-css.js",
+    "build:lib": "node scripts/generate-manifests.js && tsup && node scripts/build-css.js",
+    "watch:lib": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:ssot": "vitest run tests/ssot-invariant.test.ts",
+    "test:a11y": "vitest run tests/a11y-enhanced.test.tsx tests/axe-automated.test.tsx tests/navigation-a11y.test.tsx",
+    "test:ssr": "vitest run tests/ssr.test.tsx",
+    "prepack": "npm run typecheck && npm test && npm run build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.16.0",
+    "tailwind-merge": "^3.0.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^6.0.5",
+    "axe-core": "^4.13.0",
+    "jsdom": "^30.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.3",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3",
+    "vite": "^8.2.1",
+    "vitest": "^3.0.7"
+  }
+}

package/src/bento/BentoCard.tsx

@@ -1,140 +1,140 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-const bentoCardVariants = cva(
-  'group relative flex flex-col justify-between overflow-hidden transition-all duration-500 ease-out border text-[var(--ui-bento-text-title)]',
-  {
-    variants: {
-      colSpan: {
-        1: 'col-span-1',
-        2: 'col-span-1 md:col-span-2',
-        3: 'col-span-1 md:col-span-2 lg:col-span-3',
-      },
-      rowSpan: {
-        1: 'row-span-1',
-        2: 'row-span-1 md:row-span-2 md:min-h-[460px]',
-        3: 'row-span-1 md:row-span-3 md:min-h-[680px]',
-      },
-      variant: {
-        default:
-          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] hover:bg-[var(--ui-bento-bg-card-hover)] shadow-[var(--ui-bento-shadow)]',
-        spotlight:
-          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-white/30 dark:hover:border-white/30 hover:shadow-[0_0_35px_-8px_rgba(255,255,255,0.12)]',
-        elevated:
-          'bg-[image:var(--ui-bento-bg-elevated)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] shadow-[var(--ui-bento-shadow-elevated)]',
-      },
-      radius: {
-        md: 'rounded-[var(--ui-bento-radius-md)]',
-        lg: 'rounded-[var(--ui-bento-radius-lg)]',
-      },
-      padding: {
-        sm: 'p-4 sm:p-5',
-        md: 'p-5 sm:p-7',
-        lg: 'p-6 sm:p-9',
-      },
-    },
-    defaultVariants: {
-      colSpan: 1,
-      rowSpan: 1,
-      variant: 'default',
-      radius: 'lg',
-      padding: 'md',
-    },
-  }
-);
-
-export interface BentoCardProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
-    VariantProps<typeof bentoCardVariants> {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  icon?: React.ReactNode;
-  tag?: React.ReactNode;
-  /**
-   * Decorative background graphic. Non-interactive backdrop element.
-   */
-  backgroundGraphic?: React.ReactNode;
-  /**
-   * @deprecated Use `backgroundGraphic` instead.
-   */
-  graphic?: React.ReactNode;
-}
-
-export const BentoCard = forwardRef<HTMLDivElement, BentoCardProps>(
-  (
-    {
-      className,
-      colSpan,
-      rowSpan,
-      variant,
-      radius,
-      padding,
-      title,
-      description,
-      icon,
-      tag,
-      backgroundGraphic,
-      graphic,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const bgGraphic = backgroundGraphic ?? graphic;
-
-    return (
-      <div
-        ref={ref}
-        className={cn(bentoCardVariants({ colSpan, rowSpan, variant, radius, padding, className }))}
-        {...props}
-      >
-        {/* Subtle Specular Top Line */}
-        <div
-          className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-50"
-          aria-hidden="true"
-        />
-
-        {/* Background Visual Graphic Slot (Decorative) */}
-        {bgGraphic && (
-          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none opacity-70 transition-transform duration-700 ease-out motion-safe:group-hover:scale-105">
-            {bgGraphic}
-          </div>
-        )}
-
-        {/* Top Header Section */}
-        {(icon || tag) && (
-          <div className="relative z-10 flex items-start justify-between gap-4">
-            {icon && (
-              <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--ui-bento-icon-bg)] border border-[var(--ui-bento-icon-border)] backdrop-blur-md shadow-inner transition-transform duration-300 group-hover:scale-105">
-                {icon}
-              </div>
-            )}
-            {tag && (
-              <div className="font-mono text-[10px] font-semibold uppercase tracking-widest text-[var(--ui-bento-text-tag)] border border-[var(--ui-bento-icon-border)] bg-[var(--ui-bento-icon-bg)] px-2.5 py-1 rounded-md backdrop-blur-sm">
-                {tag}
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Main Content Area */}
-        <div className="relative z-10 mt-auto pt-6">
-          {title && (
-            <h3 className="text-xl font-bold tracking-tight text-[var(--ui-bento-text-title)] transition-colors group-hover:text-[var(--ui-primary)] dark:group-hover:text-white">
-              {title}
-            </h3>
-          )}
-          {description && (
-            <p className="mt-2 text-sm leading-relaxed text-[var(--ui-bento-text-desc)] font-normal">
-              {description}
-            </p>
-          )}
-          {children}
-        </div>
-      </div>
-    );
-  }
-);
-
-BentoCard.displayName = 'BentoCard';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const bentoCardVariants = cva(
+  'group relative flex flex-col justify-between overflow-hidden transition-all duration-500 ease-out border text-[var(--ui-bento-text-title)]',
+  {
+    variants: {
+      colSpan: {
+        1: 'col-span-1',
+        2: 'col-span-1 md:col-span-2',
+        3: 'col-span-1 md:col-span-2 lg:col-span-3',
+      },
+      rowSpan: {
+        1: 'row-span-1',
+        2: 'row-span-1 md:row-span-2 md:min-h-[460px]',
+        3: 'row-span-1 md:row-span-3 md:min-h-[680px]',
+      },
+      variant: {
+        default:
+          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] hover:bg-[var(--ui-bento-bg-card-hover)] shadow-[var(--ui-bento-shadow)]',
+        spotlight:
+          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-white/30 dark:hover:border-white/30 hover:shadow-[0_0_35px_-8px_rgba(255,255,255,0.12)]',
+        elevated:
+          'bg-[image:var(--ui-bento-bg-elevated)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] shadow-[var(--ui-bento-shadow-elevated)]',
+      },
+      radius: {
+        md: 'rounded-[var(--ui-bento-radius-md)]',
+        lg: 'rounded-[var(--ui-bento-radius-lg)]',
+      },
+      padding: {
+        sm: 'p-4 sm:p-5',
+        md: 'p-5 sm:p-7',
+        lg: 'p-6 sm:p-9',
+      },
+    },
+    defaultVariants: {
+      colSpan: 1,
+      rowSpan: 1,
+      variant: 'default',
+      radius: 'lg',
+      padding: 'md',
+    },
+  }
+);
+
+export interface BentoCardProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
+    VariantProps<typeof bentoCardVariants> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  tag?: React.ReactNode;
+  /**
+   * Decorative background graphic. Non-interactive backdrop element.
+   */
+  backgroundGraphic?: React.ReactNode;
+  /**
+   * @deprecated Use `backgroundGraphic` instead.
+   */
+  graphic?: React.ReactNode;
+}
+
+export const BentoCard = forwardRef<HTMLDivElement, BentoCardProps>(
+  (
+    {
+      className,
+      colSpan,
+      rowSpan,
+      variant,
+      radius,
+      padding,
+      title,
+      description,
+      icon,
+      tag,
+      backgroundGraphic,
+      graphic,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const bgGraphic = backgroundGraphic ?? graphic;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(bentoCardVariants({ colSpan, rowSpan, variant, radius, padding, className }))}
+        {...props}
+      >
+        {/* Subtle Specular Top Line */}
+        <div
+          className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-50"
+          aria-hidden="true"
+        />
+
+        {/* Background Visual Graphic Slot (Decorative) */}
+        {bgGraphic && (
+          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none opacity-70 transition-transform duration-700 ease-out motion-safe:group-hover:scale-105">
+            {bgGraphic}
+          </div>
+        )}
+
+        {/* Top Header Section */}
+        {(icon || tag) && (
+          <div className="relative z-10 flex items-start justify-between gap-4">
+            {icon && (
+              <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--ui-bento-icon-bg)] border border-[var(--ui-bento-icon-border)] backdrop-blur-md shadow-inner transition-transform duration-300 group-hover:scale-105">
+                {icon}
+              </div>
+            )}
+            {tag && (
+              <div className="font-mono text-[10px] font-semibold uppercase tracking-widest text-[var(--ui-bento-text-tag)] border border-[var(--ui-bento-icon-border)] bg-[var(--ui-bento-icon-bg)] px-2.5 py-1 rounded-md backdrop-blur-sm">
+                {tag}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Main Content Area */}
+        <div className="relative z-10 mt-auto pt-6">
+          {title && (
+            <h3 className="text-xl font-bold tracking-tight text-[var(--ui-bento-text-title)] transition-colors group-hover:text-[var(--ui-primary)] dark:group-hover:text-white">
+              {title}
+            </h3>
+          )}
+          {description && (
+            <p className="mt-2 text-sm leading-relaxed text-[var(--ui-bento-text-desc)] font-normal">
+              {description}
+            </p>
+          )}
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+BentoCard.displayName = 'BentoCard';