@clicktap/ui 0.41.0 → 0.42.0

package/next/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Next-specific entry point (CTAP-1125).
+ *
+ * Everything in here imports from `next/*`. It is the ONLY part of the package
+ * that does, which is what lets `next` be an optional peer: a consumer that
+ * never imports `@clicktap/ui/next` gets zero `next` in its dependency tree.
+ */
+export { Image, type ExtendedImageProps } from './Image';

package/next/index.js

@@ -0,0 +1 @@
+import{Image as a}from"./Image.js";import"react/jsx-runtime";import"next/image";import"react";import"../utils/cn.js";import"../components/Image/imageShared.js";export{a as Image};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",
@@ -16,6 +16,7 @@
   "sideEffects": false,
   "type": "module",
   "exports": {
+    "./theme.css": "./theme.css",
     "./components/*": {
       "types": [
         "./components/*.d.ts",
@@ -26,6 +27,24 @@
         "./components/*/index.js"
       ]
     },
+    "./next": {
+      "types": [
+        "./next/index.d.ts"
+      ],
+      "import": [
+        "./next/index.js"
+      ]
+    },
+    "./next/*": {
+      "types": [
+        "./next/*.d.ts",
+        "./next/*/index.d.ts"
+      ],
+      "import": [
+        "./next/*.js",
+        "./next/*/index.js"
+      ]
+    },
     "./hooks/*": {
       "types": [
         "./hooks/*.d.ts",
@@ -60,7 +79,6 @@
     "@react-stately/utils": "^3.9.1",
     "clsx": "2.1.1",
     "jwt-decode": "^4.0.0",
-    "next": "^14.2.3",
     "react-number-format": "^5.4.0",
     "tailwind-merge": "2.5.2"
   },
@@ -72,7 +90,7 @@
     "react-aria": "^3.46.0",
     "react-aria-components": "^1.15.0",
     "react-stately": "^3.46.0",
-    "tailwindcss": "^4.0.15"
+    "tailwindcss": "^4.3.3"
   },
   "peerDependencies": {
     "@floating-ui/react": "^0.27.0",
@@ -84,14 +102,52 @@
     "@heroui/tooltip": "^2.2.0",
     "@types/react": "^18.0.0",
     "framer-motion": "^11.18.0",
+    "next": ">=14",
     "react": "^18.0.0",
     "react-aria": "^3.46.0",
     "react-aria-components": "^1.15.0",
-    "react-stately": "^3.36.0",
     "react-dom": "^18.0.0",
-    "react-international-phone": "^4.3.0"
+    "react-international-phone": "^4.3.0",
+    "react-stately": "^3.36.0"
+  },
+  "peerDependenciesMeta": {
+    "@floating-ui/react": {
+      "optional": true
+    },
+    "@heroui/accordion": {
+      "optional": true
+    },
+    "@heroui/badge": {
+      "optional": true
+    },
+    "@heroui/pagination": {
+      "optional": true
+    },
+    "@heroui/system": {
+      "optional": true
+    },
+    "@heroui/theme": {
+      "optional": true
+    },
+    "@heroui/tooltip": {
+      "optional": true
+    },
+    "framer-motion": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "react-aria": {
+      "optional": true
+    },
+    "react-international-phone": {
+      "optional": true
+    },
+    "react-stately": {
+      "optional": true
+    }
   },
-  "tailwind": "./tailwind.config.js",
   "scripts": {
     "preinstall": "case \"$INIT_CWD/\" in \"$PWD\"/*) echo 'ERROR: Run pnpm install from the monorepo root, not inside this lib or a subdirectory. A nested install creates a rogue node_modules and drifts dependency versions (CTAP-717).' && exit 1 ;; esac"
   }

package/theme.css

@@ -0,0 +1,162 @@
+/**
+ * @clicktap/ui semantic design tokens (CTAP-1123).
+ *
+ * One line in your CSS entry, after `@import 'tailwindcss'`:
+ *
+ *     @import '@clicktap/ui/theme.css';
+ *
+ * That is the whole contract. There is no preset to add and no Tailwind config
+ * to edit: `@theme` both defines the variables AND registers the utilities that
+ * read them, so `text-fg` and `border-border-subtle` exist as soon as this file
+ * is imported. It composes with a JS config too — if your app still uses
+ * `@config`, the two merge, so this import works before, during, or after a
+ * CSS-first migration.
+ *
+ * ── Why custom properties ────────────────────────────────────────────────────
+ * Components used to hardcode literal palette classes (`text-slate-900`,
+ * `border-slate-300`). That worked for consumers only because slate and red are
+ * Tailwind DEFAULTS — every config has them — and it meant a dark-themed app got
+ * a white box with dark text and could only fix it by overriding every state.
+ *
+ * Re-theming is now a runtime override of the token, no rebuild and no config
+ * surgery, under a class, an attribute, or a media query:
+ *
+ *     :root[data-theme='dark'] {
+ *       --color-fg: oklch(98% 0 0);
+ *       --color-surface-subtle: oklch(25% 0.02 260);
+ *     }
+ *
+ * ── Why `@theme static` ─────────────────────────────────────────────────────
+ * Plain `@theme` PRUNES any token no utility happens to reference, which is the
+ * wrong default for a published token set: a consumer writing
+ * `color: var(--color-fg)` in hand-authored CSS, or overriding a token this app
+ * does not itself use, would silently get nothing. `static` emits all of them.
+ *
+ * ── On `border-border-subtle` ───────────────────────────────────────────────
+ * v4 has a single `--color-*` namespace feeding every colour utility, so a token
+ * named `border-subtle` necessarily yields `border-border-subtle` — Tailwind
+ * prefixes the utility itself. The doubling is real and it is the ecosystem
+ * convention (shadcn/ui ships `border-border`, `bg-background`). Taking it keeps
+ * one mechanism and a vocabulary a new developer already recognises; the same
+ * token also reads correctly as `outline-border-subtle` and `ring-border-subtle`,
+ * which is where these values are used just as often.
+ *
+ * ── Defaults are today's exact values ───────────────────────────────────────
+ * Each value below is the literal Tailwind v4 palette entry the components used
+ * before the sweep, copied from `tailwindcss/theme.css`. That is deliberate: a
+ * 550-occurrence rewrite is only reviewable if the rendering is unchanged, so any
+ * visual difference is a bug rather than a judgement call. Re-theming is the
+ * consumer's decision, not a side effect of adopting tokens.
+ */
+
+/* Scan the published package for token classes. These are the DIST paths, which
+ * do not exist in this repo — a glob that matches nothing is a no-op, verified,
+ * so this is safe in both layouts. In-repo the consuming app already scans
+ * ../../libs/ui/**. */
+@source './components/**/*.js';
+@source './next/**/*.js';
+
+/*
+ * Loader animations (CTAP-1156). These live here rather than in framer-motion so
+ * that `Button` — the most likely first import — installs from the core tier: it
+ * reached framer-motion only through `ButtonLoadingContent` → `Loader`, for two
+ * decorative infinite animations a stylesheet does perfectly well.
+ *
+ * A side benefit: framer-motion 11.x's complex-value parser could crash in
+ * `mixObject` when an ancestor `AnimatePresence` remeasured mid-flow, which is
+ * why the old components carefully used numeric primitives instead of transform
+ * strings. CSS keyframes have no such failure mode.
+ *
+ * Top-level rather than inside `@theme` so they are emitted unconditionally; the
+ * `--animate-*` entries below name the utilities that reference them.
+ */
+@keyframes ct-loader-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ct-loader-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124;
+  }
+}
+
+@keyframes ct-loader-pulse {
+  0%,
+  25%,
+  75%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(0.1);
+  }
+}
+
+@theme static {
+  /* Loader animations — see the keyframes above. Durations and easings match the
+   * framer-motion transitions they replace exactly, so nothing changes visually.
+   * `ease-in-out` is the same curve framer calls `easeInOut`
+   * (cubic-bezier(0.42, 0, 0.58, 1)), including as framer's keyframe default. */
+  --animate-ct-loader-spin: ct-loader-spin 2s linear infinite;
+  --animate-ct-loader-dash: ct-loader-dash 1.5s ease-in-out infinite;
+  --animate-ct-loader-pulse: ct-loader-pulse 0.75s ease-in-out infinite;
+
+  /* Foreground — three emphases, from the measured usage. */
+  --color-fg: oklch(20.8% 0.042 265.755); /* was slate-900 (50 uses) */
+  --color-fg-muted: oklch(55.4% 0.046 257.417); /* was slate-500 (48) */
+  --color-fg-subtle: oklch(70.4% 0.04 256.788); /* was slate-400 (27) */
+  --color-fg-inverse: #fff;
+
+  /*
+   * Border — a real three-step interaction ladder, not inconsistency. The
+   * components use these consistently: 200 for disabled and low-emphasis
+   * containers, 300 at rest on inputs and controls, 400 on hover/focus.
+   */
+  --color-border-subtle: oklch(92.9% 0.013 255.508); /* was slate-200 (40) */
+  --color-border: oklch(86.9% 0.022 252.894); /* was slate-300 (36) */
+  --color-border-emphasis: oklch(70.4% 0.04 256.788); /* was slate-400 (43) */
+
+  /* Surface. */
+  --color-surface: #fff;
+  --color-surface-subtle: oklch(96.8% 0.007 247.896); /* was slate-100 (29) */
+  --color-surface-inverse: oklch(20.8% 0.042 265.755); /* was slate-900 (13) */
+
+  /* Danger — the second-largest cluster after the neutrals (107 uses). */
+  --color-danger: oklch(57.7% 0.245 27.325); /* was red-600 */
+  --color-danger-soft: oklch(63.7% 0.237 25.331); /* was red-500 */
+  /* 'soft', not 'border': red-500 is used as text 20 times and as a border 15,
+   * so a border-specific name would read wrong at most of its call sites. The
+   * neutral ladder can afford `border-*` names because it really is border-only;
+   * this one cannot. */
+  --color-danger-surface: oklch(93.6% 0.032 17.717); /* was red-100 */
+
+  /*
+   * Three roles the first pass missed. Each is one distinct job with a value the
+   * ladders above do not already carry — the bar for a new token, deliberately.
+   * Roles that only needed an existing VALUE under a nicer name did NOT get one:
+   * an alias defined as `var(--color-border-subtle)` resolves at `:root`, so a
+   * consumer's `.dark` override of the source would not propagate to it, and
+   * duplicating the literal instead just invites the two copies to drift.
+   */
+  --color-fg-strong: oklch(12.9% 0.042 264.695); /* was slate-950 (7) */
+  --color-surface-inverse-hover: oklch(27.9% 0.041 260.031); /* was slate-800 (16) */
+  --color-danger-ring: oklch(88.5% 0.062 18.334); /* was red-200 (11), invalid focus ring */
+
+  /* Status — small but present (22 uses between them). */
+  --color-success: oklch(62.7% 0.194 149.214); /* was green-600 */
+  --color-warning: oklch(68.1% 0.162 75.834); /* was yellow-600 */
+  --color-info: oklch(54.6% 0.245 262.881); /* was blue-600 */
+}

package/utils/collection.d.ts

@@ -0,0 +1 @@
+export * from './collection/index';

package/utils/collection.js

@@ -0,0 +1 @@
+export * from './collection/index.js';

package/utils/variantOptions.d.ts

@@ -0,0 +1 @@
+export * from './variantOptions/index';

package/utils/variantOptions.js

@@ -0,0 +1 @@
+export * from './variantOptions/index.js';

package/tailwind.config.js

@@ -1,6 +0,0 @@
-const path = require('path');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: [path.resolve(__dirname, './components/**/*.{js,jsx,ts,tsx}')],
-};