@tetherto/dev-websites-core 0.2.0 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tetherto/dev-websites-core",
-  "version": "0.2.0",
-  "description": "Shared non-UI libraries (Payload CMS, SEO, i18n, utils) for the WDK / QVAC websites.",
+  "version": "0.3.0",
+  "description": "Shared CMS, SEO, i18n, utils, and UI primitives for the WDK / QVAC websites.",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
@@ -12,7 +12,9 @@
     "url": "git+https://github.com/tetherto/dev-websites-core.git"
   },
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "exports": {
@@ -40,19 +42,41 @@
       "types": "./dist/utils/index.d.mts",
       "import": "./dist/utils/index.mjs",
       "default": "./dist/utils/index.mjs"
-    }
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.mts",
+      "import": "./dist/ui/index.mjs",
+      "default": "./dist/ui/index.mjs"
+    },
+    "./ui/a11y": {
+      "types": "./dist/ui/a11y/index.d.mts",
+      "import": "./dist/ui/a11y/index.mjs",
+      "default": "./dist/ui/a11y/index.mjs"
+    },
+    "./ui/carousel": {
+      "types": "./dist/ui/carousel/index.d.mts",
+      "import": "./dist/ui/carousel/index.mjs",
+      "default": "./dist/ui/carousel/index.mjs"
+    },
+    "./ui/theme.css": "./src/ui/theme/theme.css",
+    "./ui/theme/tokens.css": "./src/ui/theme/tokens.css",
+    "./ui/theme/preset.css": "./src/ui/theme/preset.css",
+    "./ui/theme/preset": "./src/ui/theme/preset.ts",
+    "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/ui/theme"
   ],
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
     "prepare": "tsdown",
+    "prepublishOnly": "npm run typecheck && npm run build",
     "typecheck": "tsc --noEmit",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
-    "format": "prettier --write \"src/**/*.ts\" \"*.{json,mjs,md}\""
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\" \"*.{json,mjs,md}\""
   },
   "engines": {
     "node": ">=20"
@@ -61,22 +85,57 @@
     "@aws-sdk/client-s3": "^3.0.0",
     "@payloadcms/richtext-lexical": "^3.85.1",
     "@payloadcms/storage-s3": "^3.85.1",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-primitive": "^2.0.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "embla-carousel-react": "^8.0.0",
     "next": ">=15",
-    "payload": "^3.85.1"
+    "payload": "^3.85.1",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "react-icons": "^5.0.0",
+    "tailwind-merge": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "embla-carousel-react": {
+      "optional": true
+    },
+    "react-icons": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@aws-sdk/client-s3": "^3.787.0",
     "@eslint/js": "^9.39.0",
     "@payloadcms/richtext-lexical": "3.88.0",
     "@payloadcms/storage-s3": "3.88.0",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-primitive": "^2.1.4",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.16",
     "@types/node": "^22.20.1",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
     "eslint": "9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "next": "^16.2.6",
     "payload": "3.88.0",
     "prettier": "^3.8.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0",
+    "tailwind-merge": "^3.3.1",
     "tsdown": "^0.22.14",
     "typescript": "^5.8.0",
     "typescript-eslint": "^8.67.0",

package/src/ui/theme/preset.css

@@ -0,0 +1,53 @@
+/**
+ * Tailwind v4 theme preset for `@tetherto/dev-websites-core/ui`.
+ *
+ * Maps CSS variables from `tokens.css` → utilities (`bg-accent`, `rounded-btn`, …).
+ *
+ * One-shot (CSS):
+ *   @import '@tetherto/dev-websites-core/ui/theme.css';
+ *
+ * Or stepwise:
+ *   @import '@tetherto/dev-websites-core/ui/theme/tokens.css';
+ *   @import './my-brand.css';   // override --accent, etc.
+ *   @import '@tetherto/dev-websites-core/ui/theme/preset.css';
+ *
+ * If the app already defines the same utilities in `tailwind.config.ts`
+ * (WDK / QVAC today), you do NOT need this file — just keep your config.
+ */
+
+@theme inline {
+  /* Colors */
+  --color-background: hsl(var(--background) / <alpha-value>);
+  --color-surface: hsl(var(--surface) / <alpha-value>);
+  --color-surface-elevated: hsl(var(--surface-elevated) / <alpha-value>);
+  --color-card: hsl(var(--card) / <alpha-value>);
+  --color-card-elevated: hsl(var(--card-elevated) / <alpha-value>);
+
+  --color-foreground: hsl(var(--foreground) / <alpha-value>);
+  --color-secondary: hsl(var(--secondary) / <alpha-value>);
+  --color-muted: hsl(var(--muted) / <alpha-value>);
+
+  --color-accent: hsl(var(--accent) / <alpha-value>);
+  --color-accent-foreground: hsl(var(--accent-foreground) / <alpha-value>);
+  --color-accent-hover: hsl(var(--accent-hover) / <alpha-value>);
+  --color-accent-dim: hsl(var(--accent-dim) / <alpha-value>);
+
+  --color-border: hsl(var(--border) / <alpha-value>);
+  --color-border-subtle: hsl(var(--border-subtle) / <alpha-value>);
+  --color-destructive: hsl(var(--destructive) / <alpha-value>);
+  --color-success: hsl(var(--success) / <alpha-value>);
+  --color-warning: hsl(var(--warning) / <alpha-value>);
+  --color-ring: hsl(var(--ring) / <alpha-value>);
+
+  /* Radius → rounded-btn | rounded-control | rounded-card */
+  --radius-btn: var(--btn-radius);
+  --radius-control: var(--control-radius);
+  --radius-card: var(--card-radius);
+
+  /* Sizing → h-btn | h-btn-sm | px-btn | px-btn-sm | size-btn-sm */
+  --height-btn: var(--btn-h);
+  --height-btn-sm: var(--btn-h-sm);
+  --spacing-btn: var(--btn-px);
+  --spacing-btn-sm: var(--btn-px-sm);
+  --size-btn-sm: var(--btn-h-sm);
+}

package/src/ui/theme/preset.ts

@@ -0,0 +1,131 @@
+/**
+ * Shared websites UI Tailwind preset — full theme contract, WDK defaults.
+ *
+ * Same utility names everywhere (`bg-accent`, `text-foreground`, `text-display-1`,
+ * `rounded-btn`, `h-btn`, …). Apps point CSS variables at their brand palette.
+ *
+ *   // WDK — defaults already match site tokens
+ *   presets: [uiPreset]
+ *
+ *   // QVAC — same keys, override color (and any other) values
+ *   presets: [uiPreset]
+ *   theme: { extend: { colors: { accent: { DEFAULT: '…' }, … } } }
+ *
+ * CSS: define the `--color-*` / `--primitive-*` / `--btn-*` vars the preset
+ * references (see WDK `globals.css`), or remap them in the app `:root`.
+ */
+
+const hsl = (name: string) => `hsl(var(${name}) / <alpha-value>)`
+const cssVar = (name: string) => `var(${name})`
+
+const preset = {
+  theme: {
+    extend: {
+      colors: {
+        'background': hsl('--color-bg-base'),
+        'recessed': hsl('--color-bg-recessed'),
+        'surface': hsl('--color-bg-surface'),
+        'surface-elevated': hsl('--color-bg-card-elevated'),
+        'card': hsl('--color-bg-card'),
+        'card-elevated': hsl('--color-bg-card-elevated'),
+        'foreground': hsl('--color-text-primary'),
+        'secondary': hsl('--color-text-secondary'),
+        'muted': hsl('--color-text-muted'),
+        'landing-text': hsl('--color-landing-text'),
+        'landing-text-light': hsl('--color-landing-text-light'),
+        'landing-text-light-30': cssVar('--landing-text-light-30'),
+
+        'accent': {
+          DEFAULT: hsl('--color-accent'),
+          foreground: hsl('--color-text-primary'),
+          hover: hsl('--color-accent-hover'),
+          dim: hsl('--color-accent-dim'),
+        },
+        'border': {
+          DEFAULT: hsl('--color-border-default'),
+          subtle: hsl('--color-border-subtle'),
+        },
+        'success': hsl('--color-success'),
+        'warning': hsl('--color-warning'),
+        'error': hsl('--color-error'),
+        'destructive': hsl('--color-error'),
+        'info': hsl('--color-info'),
+        'ring': hsl('--color-accent'),
+
+        'teal': hsl('--color-teal'),
+        'amber': hsl('--color-amber'),
+        'purple': hsl('--color-purple'),
+        'green': hsl('--color-green'),
+
+        'blog-primary': hsl('--color-blog-primary'),
+        'blog-body': hsl('--color-blog-body'),
+        'blog-meta': hsl('--color-blog-meta'),
+
+        'primitive': {
+          'black': hsl('--primitive-black'),
+          'dark-grey': hsl('--primitive-dark-grey'),
+          'grey': hsl('--primitive-grey'),
+          'light-grey': hsl('--primitive-light-grey'),
+          'white': hsl('--primitive-white'),
+          'orange': hsl('--primitive-orange'),
+          'orange-dark': hsl('--primitive-orange-dark'),
+          'purple': hsl('--primitive-purple'),
+        },
+      },
+
+      fontFamily: {
+        sans: ['var(--font-sans)', 'sans-serif'],
+        display: ['var(--font-sharp)', 'sans-serif'],
+        mono: ['var(--font-mono)', 'monospace'],
+      },
+
+      fontSize: {
+        'display-1': ['60px', { lineHeight: '1.05', letterSpacing: '0' }],
+        'display-2': ['50px', { lineHeight: '1.05', letterSpacing: '0' }],
+        'heading-3': ['38px', { lineHeight: '40px', letterSpacing: '0' }],
+        'subhead-1': ['28px', { lineHeight: '32px', letterSpacing: '0' }],
+        'subhead-2': ['22px', { lineHeight: '26px', letterSpacing: '0' }],
+        'subhead-3': ['13px', { lineHeight: '1', letterSpacing: '2px' }],
+        'body-1': ['22px', { lineHeight: '32px' }],
+        'body-2': ['18px', { lineHeight: '28px' }],
+        'body-sm': ['15px', { lineHeight: '20px' }],
+        'body-md': ['14px', { lineHeight: '20px' }],
+        'body-xs': ['13px', { lineHeight: '18px' }],
+        'btn': ['14px', { lineHeight: '19px', letterSpacing: '0.5px' }],
+        'btn-cta': ['15px', { lineHeight: '1' }],
+        'code': ['17px', { lineHeight: '20px' }],
+        'label': ['11px', { lineHeight: '16px', letterSpacing: '0.3px' }],
+        'badge': ['10px', { lineHeight: '1', letterSpacing: '0.4px' }],
+        'caption': ['12px', { lineHeight: '16px' }],
+        'inter-h1': ['50px', { lineHeight: '60px' }],
+        'inter-h2': ['30px', { lineHeight: '38px' }],
+        'inter-h3': ['26px', { lineHeight: '36px' }],
+        'blog-mob': ['16px', { lineHeight: '24px' }],
+      },
+
+      borderRadius: {
+        btn: '5px',
+        card: '10px',
+        badge: '5px',
+        control: 'var(--control-radius)',
+        pill: '9999px',
+      },
+
+      height: {
+        'btn': 'var(--btn-primary-height)',
+        'btn-sm': 'var(--btn-sm-height)',
+      },
+
+      size: {
+        'btn-sm': 'var(--btn-sm-height)',
+      },
+
+      padding: {
+        'btn': 'var(--btn-primary-px)',
+        'btn-sm': 'var(--btn-sm-px)',
+      },
+    },
+  },
+}
+
+export default preset

package/src/ui/theme/theme.css

@@ -0,0 +1,12 @@
+/**
+ * One-shot theme bootstrap for Tailwind v4 CSS pipelines.
+ *
+ *   @import 'tailwindcss';
+ *   @import '@tetherto/dev-websites-core/ui/theme.css';
+ *
+ * Then override brand in your own CSS:
+ *   :root { --accent: 180 100% 40%; }
+ */
+
+@import './tokens.css';
+@import './preset.css';

package/src/ui/theme/tokens.css

@@ -0,0 +1,57 @@
+/**
+ * Shared UI semantic tokens — CSS custom properties (HSL channels, no `hsl()` wrapper).
+ *
+ * Used by `@tetherto/dev-websites-core/ui/theme/preset.css` (Tailwind v4 `@theme`)
+ * and `@tetherto/dev-websites-core/ui/theme/preset` (JS Tailwind preset).
+ *
+ * Apps own brand: override any of these in your `:root` (or import this file
+ * first, then set brand values). Values below are neutral dark defaults so the
+ * package can be previewed without a host app.
+ *
+ * Utilities that components expect (via the preset):
+ *   bg-background | bg-surface | bg-surface-elevated | bg-card | bg-card-elevated
+ *   text-foreground | text-secondary | text-muted
+ *   bg-accent | text-accent-foreground | accent-hover | accent-dim
+ *   border-border | border-border-subtle | destructive | success | ring
+ *   rounded-btn | rounded-control | rounded-card
+ *   h-btn | h-btn-sm | px-btn | px-btn-sm | size-btn-sm
+ */
+
+:root {
+  /* ── Surfaces ─────────────────────────────────────────────── */
+  --background: 40 12% 5%; /* page */
+  --surface: 30 8% 9%;
+  --surface-elevated: 33 11% 16%;
+  --card: 24 7% 14%;
+  --card-elevated: 33 11% 16%;
+
+  /* ── Text ────────────────────────────────────────────────── */
+  --foreground: 0 0% 100%;
+  --secondary: 37 10% 65%;
+  --muted: 38 8% 41%;
+
+  /* ── Brand ────────────────────────────────────────────────── */
+  --accent: 18 100% 50%;
+  --accent-foreground: 0 0% 100%;
+  --accent-hover: 18 100% 45%;
+  --accent-dim: 18 100% 50%;
+
+  /* ── Borders & feedback ───────────────────────────────────── */
+  --border: 30 10% 15%;
+  --border-subtle: 24 7% 18%;
+  --destructive: 0 100% 64%;
+  --success: 160 60% 45%;
+  --warning: 38 92% 50%;
+  --ring: var(--accent);
+
+  /* ── Radius (raw) → mapped to rounded-* in the preset ─────── */
+  --btn-radius: 0.3125rem; /* 5px */
+  --control-radius: 0.375rem; /* 6px */
+  --card-radius: 0.625rem; /* 10px */
+
+  /* ── Control sizing ───────────────────────────────────────── */
+  --btn-h: 2.25rem; /* 36px */
+  --btn-h-sm: 1.875rem; /* 30px */
+  --btn-px: 1.5rem; /* 24px */
+  --btn-px-sm: 0.75rem; /* 12px */
+}