@wealthx/shadcn 1.5.6 → 1.5.8

package/src/components/ui/selectable-card.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { RadioGroupItem } from "./radio-group";
+import { cn } from "../../lib/utils";
+
+export interface SelectableCardProps {
+  /** The value passed to the parent RadioGroup */
+  value: string;
+  /** Whether this card is currently selected */
+  selected?: boolean;
+  /** Content rendered inside the card */
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * A card-shaped radio option. Place inside a RadioGroup.
+ * Hides the RadioGroupItem visually so the entire card acts as the selector.
+ */
+export function SelectableCard({
+  value,
+  selected = false,
+  children,
+  className,
+}: SelectableCardProps) {
+  return (
+    <label
+      className={cn(
+        "flex cursor-pointer flex-col items-center justify-center gap-3 border border-border p-6 text-center transition-colors hover:border-primary/50",
+        selected && "border-primary bg-primary/5",
+        className,
+      )}
+    >
+      <RadioGroupItem value={value} className="sr-only" />
+      {children}
+    </label>
+  );
+}

package/src/components/ui/stepper.tsx

@@ -279,7 +279,8 @@ function StepLabel({
     >
       <span
         className={cn(
-          "text-sm font-medium leading-tight transition-colors",
+          orientation === "vertical" && "flex h-8 items-center",
+          "text-label-small transition-colors",
           (isActive || isCompleted) && !error && "text-foreground",
           !isActive && !isCompleted && !error && "text-muted-foreground",
           error && "text-destructive",
@@ -290,7 +291,7 @@ function StepLabel({
       {subtext && (
         <span
           className={cn(
-            "mt-0.5 text-xs",
+            "mt-0.5 text-caption",
             error ? "text-destructive" : "text-muted-foreground",
           )}
         >

package/src/lib/colors.ts

@@ -57,8 +57,18 @@ export function colorMixSwatch(color: string, fillOpacity = 0.15): string {
   return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
 }
 
-/** Convert hex to oklch() CSS string */
-export function hexToOklch(hex: string): string {
+/** Parsed OKLCH components as numbers (not a CSS string). */
+export interface OklchComponents {
+  /** Lightness: 0 (black) – 1 (white) */
+  L: number;
+  /** Chroma: 0 (grey) – ~0.4 (max saturation) */
+  C: number;
+  /** Hue angle in degrees: 0–360 */
+  H: number;
+}
+
+/** Convert hex to individual OKLCH components. */
+export function hexToOklchComponents(hex: string): OklchComponents {
   const [r, g, b] = hexToRgb(hex);
   const rl = linearizeSrgb(r);
   const gl = linearizeSrgb(g);
@@ -77,10 +87,68 @@ export function hexToOklch(hex: string): string {
   const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
   const bv = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
 
-  // OKLab → OKLch
   const C = Math.sqrt(a * a + bv * bv);
-  const h = ((Math.atan2(bv, a) * 180) / Math.PI + 360) % 360;
+  const H = ((Math.atan2(bv, a) * 180) / Math.PI + 360) % 360;
+
+  return { L, C, H };
+}
 
+/** Convert hex to oklch() CSS string */
+export function hexToOklch(hex: string): string {
+  const { L, C, H } = hexToOklchComponents(hex);
   if (C < 0.001) return `oklch(${L.toFixed(3)} 0 0)`;
-  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${h.toFixed(1)})`;
+  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
+}
+
+/**
+ * Tailwind-style lightness stops for an 11-step shade scale (50–950).
+ * The hue and a scaled chroma from the base color fill in the rest.
+ *
+ * Lightness values mirror Tailwind v4's perceptual curve so shades look
+ * consistent with standard Tailwind palettes across all tenant hues.
+ */
+const SHADE_LIGHTNESS: ReadonlyArray<[number, number]> = [
+  [50, 0.971],
+  [100, 0.944],
+  [200, 0.887],
+  [300, 0.808],
+  [400, 0.72],
+  [500, 0.646],
+  [600, 0.57],
+  [700, 0.48],
+  [800, 0.39],
+  [900, 0.31],
+  [950, 0.24],
+];
+
+/**
+ * Generate an 11-step Tailwind-style primary shade palette from a hex color.
+ *
+ * Returns CSS-variable key/value pairs ready to be spread into an inline
+ * style object or injected via ThemeProvider:
+ *
+ * ```ts
+ * { "--primary-50": "oklch(0.971 0.104 163.0)", "--primary-100": "...", … }
+ * ```
+ *
+ * Each shade keeps the hue of the base color and linearly scales chroma down
+ * for very light (≥ 0.87) and very dark (≤ 0.35) stops to stay in-gamut.
+ */
+export function generatePrimaryShades(hex: string): Record<string, string> {
+  const { L: baseL, C: baseC, H } = hexToOklchComponents(hex);
+
+  return Object.fromEntries(
+    SHADE_LIGHTNESS.map(([shade, targetL]) => {
+      // Reduce chroma for stops far from the base lightness to stay in-gamut.
+      // Stops very close to white (>0.9) or black (<0.3) get ~10% of base chroma.
+      const distance = Math.abs(targetL - baseL);
+      const chromaScale = Math.max(0.1, 1 - distance * 1.5);
+      const C = +(baseC * chromaScale).toFixed(3);
+      const value =
+        C < 0.001
+          ? `oklch(${targetL.toFixed(3)} 0 0)`
+          : `oklch(${targetL.toFixed(3)} ${C} ${H.toFixed(1)})`;
+      return [`--primary-${shade}`, value];
+    }),
+  );
 }

package/src/lib/format-date.ts

@@ -50,21 +50,21 @@ export function formatDateWithWeekday(iso: string): string {
 }
 
 /**
- * Format a Date or ISO string as "Monday, 15 January" (long weekday + day + long month).
- * Returns raw string on parse failure.
+ * Format a Date or ISO string as a long human-readable string: "Wednesday, 15 January 2026".
+ * Used for booking confirmations and summary displays.
  */
 export function formatDateLong(date: Date | string): string {
-  const d = typeof date === "string" ? safeParse(date) : date;
   try {
-    return format(d, "EEEE, d MMMM");
+    const d = typeof date === "string" ? safeParse(date) : date;
+    return format(d, "EEEE, d MMMM yyyy");
   } catch {
-    return d.toLocaleDateString();
+    return String(date);
   }
 }
 
 /**
  * Format a Date or ISO string as an uppercase short weekday: "MON", "TUE", etc.
- * Returns raw string on parse failure.
+ * Used for calendar day headers.
  */
 export function formatWeekdayShort(date: Date | string): string {
   try {

package/src/lib/theme-provider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { createContext, useContext, useMemo } from "react";
-import { hexToOklch, getContrastText } from "./colors";
+import { hexToOklch, getContrastText, generatePrimaryShades } from "./colors";
 
 export interface ThemeProviderProps {
   children: React.ReactNode;
@@ -94,13 +94,18 @@ export function ThemeProvider({
       "--theme-primary": primary,
       "--theme-secondary": secondary,
 
-      // Pipeline stage palette — 5 opacity levels of primary, tenant-adaptive.
-      // Defined here (not :root) so they react to tenant theme switches.
-      "--color-stage-1": primaryOklch,
-      "--color-stage-2": `color-mix(in oklch, ${primaryOklch} 80%, transparent)`,
-      "--color-stage-3": `color-mix(in oklch, ${primaryOklch} 60%, transparent)`,
-      "--color-stage-4": `color-mix(in oklch, ${primaryOklch} 40%, transparent)`,
-      "--color-stage-5": `color-mix(in oklch, ${primaryOklch} 20%, transparent)`,
+      // Primary shade palette (50–950) — Tailwind-style, tenant-adaptive.
+      // Defined here so they react to tenant theme switches.
+      // Referenced as var(--primary-50) … var(--primary-950) in components.
+      ...generatePrimaryShades(primary),
+
+      // Pipeline stage palette — maps stage slots to primary shades.
+      // stage-1 = darkest visible, stage-5 = lightest visible on white bg.
+      "--color-stage-1": `var(--primary-600)`,
+      "--color-stage-2": `var(--primary-400)`,
+      "--color-stage-3": `var(--primary-300)`,
+      "--color-stage-4": `var(--primary-200)`,
+      "--color-stage-5": `var(--primary-100)`,
       // WCAG-computed contrast text for any primary-shaded background
       "--color-stage-fg": primaryFgOklch,
     };

package/src/styles/globals.css

@@ -57,6 +57,19 @@
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+
+  /* Primary shade palette — generated by ThemeProvider, fallbacks here for static CSS */
+  --color-primary-50: var(--primary-50);
+  --color-primary-100: var(--primary-100);
+  --color-primary-200: var(--primary-200);
+  --color-primary-300: var(--primary-300);
+  --color-primary-400: var(--primary-400);
+  --color-primary-500: var(--primary-500);
+  --color-primary-600: var(--primary-600);
+  --color-primary-700: var(--primary-700);
+  --color-primary-800: var(--primary-800);
+  --color-primary-900: var(--primary-900);
+  --color-primary-950: var(--primary-950);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
@@ -97,14 +110,14 @@
   --color-info-text: var(--info-text);
   --color-destructive-text: var(--destructive-text);
 
-  /* === Pipeline stage palette — defined in ThemeProvider, fallback to defaults here === */
-  /* Real values are injected by ThemeProvider via useThemeVars() / inline style.        */
-  /* Do NOT use these :root fallbacks for production — they won't react to tenant theme. */
-  --color-stage-1: oklch(0.894 0.208 163);
-  --color-stage-2: oklch(0.894 0.208 163 / 80%);
-  --color-stage-3: oklch(0.894 0.208 163 / 60%);
-  --color-stage-4: oklch(0.894 0.208 163 / 40%);
-  --color-stage-5: oklch(0.894 0.208 163 / 20%);
+  /* === Pipeline stage palette — maps to primary shades, defined in ThemeProvider === */
+  /* Real values are injected by ThemeProvider via useThemeVars() / inline style.    */
+  /* Do NOT use these :root fallbacks for production — they won't react to tenant.   */
+  --color-stage-1: var(--primary-600);
+  --color-stage-2: var(--primary-400);
+  --color-stage-3: var(--primary-300);
+  --color-stage-4: var(--primary-200);
+  --color-stage-5: var(--primary-100);
   /* Auto foreground for stage-colored backgrounds (WCAG contrast of primary) */
   --color-stage-fg: var(--primary-foreground);
 
@@ -439,8 +452,23 @@
 
   /* Primary — TENANT-DRIVEN (white-label)
    * Default: WealthX green #33FF99
-   * Override at runtime via ThemeProvider for each tenant */
+   * Override at runtime via ThemeProvider for each tenant.
+   * Shade palette (50–950) generated by generatePrimaryShades() in ThemeProvider. */
   --primary: oklch(0.894 0.208 163); /* #33FF99 — palette/primary/main */
+
+  /* Primary shade palette — static fallbacks for WealthX default green.
+   * ThemeProvider overrides these at runtime for each tenant. */
+  --primary-50: oklch(0.971 0.021 163);
+  --primary-100: oklch(0.944 0.042 163);
+  --primary-200: oklch(0.887 0.083 163);
+  --primary-300: oklch(0.808 0.125 163);
+  --primary-400: oklch(0.72 0.156 163);
+  --primary-500: oklch(0.646 0.156 163);
+  --primary-600: oklch(0.57 0.146 163);
+  --primary-700: oklch(0.48 0.125 163);
+  --primary-800: oklch(0.39 0.104 163);
+  --primary-900: oklch(0.31 0.073 163);
+  --primary-950: oklch(0.24 0.052 163);
   --primary-foreground: oklch(
     0.152 0.02 235
   ); /* #040D13 — contrastText for bright primary (button text readability) */