@wealthx/shadcn 1.5.7 → 1.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/ui/appointment-availability-settings.tsx

@@ -131,6 +131,35 @@ export const MEETING_PLATFORM_OPTIONS: {
   { value: "any", label: "Let client choose" },
 ];
 
+const MEETING_DURATION_OPTIONS: { value: string; label: string }[] = [
+  { value: "15", label: "15 minutes" },
+  { value: "30", label: "30 minutes" },
+  { value: "45", label: "45 minutes" },
+  { value: "60", label: "60 minutes" },
+  { value: "90", label: "90 minutes" },
+];
+
+const SCHEDULING_BUFFER_OPTIONS: { value: string; label: string }[] = [
+  { value: "0", label: "No buffer" },
+  { value: "5", label: "5 minutes" },
+  { value: "10", label: "10 minutes" },
+  { value: "15", label: "15 minutes" },
+  { value: "30", label: "30 minutes" },
+];
+
+const MAX_SLOTS_OPTIONS: { value: string; label: string }[] = [
+  { value: "2", label: "2 per day" },
+  { value: "4", label: "4 per day" },
+  { value: "6", label: "6 per day" },
+  { value: "8", label: "8 per day" },
+  { value: "10", label: "10 per day" },
+  { value: "unlimited", label: "Unlimited" },
+];
+
+/** Map a Base UI SelectValue `v` to its display label from an options array. */
+const selectLabel = (opts: { value: string; label: string }[], v: unknown) =>
+  opts.find((o) => o.value === String(v))?.label ?? String(v ?? "");
+
 // 30-min increments from 06:00 to 21:30
 const TIME_OPTIONS: { value: string; label: string }[] = (() => {
   const opts: { value: string; label: string }[] = [];
@@ -182,7 +211,7 @@ function TimeSelect({
       disabled={disabled}
     >
       <SelectTrigger className="w-36">
-        <SelectValue />
+        <SelectValue>{(v) => selectLabel(TIME_OPTIONS, v)}</SelectValue>
       </SelectTrigger>
       <SelectContent>
         {TIME_OPTIONS.map((opt) => (
@@ -633,7 +662,9 @@ export function AppointmentAvailabilitySettings({
                 onValueChange={(v) => setTimezone(v as string)}
               >
                 <SelectTrigger className="w-56">
-                  <SelectValue />
+                  <SelectValue>
+                    {(v) => selectLabel(TIMEZONE_OPTIONS, v)}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   {TIMEZONE_OPTIONS.map((opt) => (
@@ -658,7 +689,9 @@ export function AppointmentAvailabilitySettings({
                 }
               >
                 <SelectTrigger className="w-48">
-                  <SelectValue />
+                  <SelectValue>
+                    {(v) => selectLabel(MEETING_PLATFORM_OPTIONS, v)}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   {MEETING_PLATFORM_OPTIONS.map((opt) => (

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/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) */