@wealthx/shadcn 0.0.2 → 1.0.1

package/src/components/ui/textarea.tsx

@@ -0,0 +1,28 @@
+/**
+ * Textarea — WealthX DS overrides (shadcn base)
+ *
+ * Changes from shadcn default:
+ *   - `shadow-xs` removed — flat panels per Figma
+ *   - `font-sans` added — consistent typography token
+ */
+import { type ReactElement } from "react"
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export type TextareaProps = React.ComponentProps<"textarea">
+
+function Textarea({ className, ...props }: TextareaProps): ReactElement {
+  return (
+    <textarea
+      className={cn(
+        // WealthX: removed shadow-xs (flat panels), added font-sans
+        "flex field-sizing-content min-h-16 w-full border border-input bg-transparent px-3 py-2 text-base font-sans transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      data-slot="textarea"
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/ui/toggle-group.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { type ReactElement } from "react"
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
+import { Toggle as ToggleComponent } from "@base-ui/react/toggle"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+})
+
+export type ToggleGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    /** shadcn-compatible alias: "single" -- multiple=false, "multiple" -- multiple=true */
+    type?: "single" | "multiple"
+  }
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  type,
+  children,
+  ...props
+}: ToggleGroupProps): ReactElement {
+  return (
+    <ToggleGroupPrimitive
+      className={cn(
+        // WealthX: removed rounded-md (sharp corners) and shadow-xs (flat panels)
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))]",
+        className
+      )}
+      data-size={size}
+      data-slot="toggle-group"
+      data-spacing={spacing}
+      data-variant={variant}
+      multiple={type === "multiple"}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  )
+}
+
+export type ToggleGroupItemProps = React.ComponentProps<typeof ToggleComponent> &
+  VariantProps<typeof toggleVariants>
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: ToggleGroupItemProps): ReactElement {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleComponent
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "w-auto min-w-0 shrink-0 focus:z-10 focus-visible:z-10",
+        // WealthX: no rounded corners on grouped items
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      )}
+      data-size={context.size || size}
+      data-slot="toggle-group-item"
+      data-spacing={context.spacing}
+      data-variant={context.variant || variant}
+      {...props}
+    >
+      {children}
+    </ToggleComponent>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/ui/toggle.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import { type ReactElement } from "react"
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as ToggleComponent } from "@base-ui/react/toggle"
+import { cn } from "@/lib/utils"
+
+/**
+ * Toggle — WealthX DS overrides (shadcn base)
+ *
+ * Changes from shadcn default:
+ *   - `rounded-md` removed — sharp corners per WealthX DS
+ *   - `shadow-xs` removed from outline variant — flat panels
+ *   - Pressed/on state uses `bg-primary/10` + `inset-ring-primary` via Figma tokens
+ *     (inset-ring instead of border-primary so indicator is independent of border-width,
+ *      works correctly inside ToggleGroup where border-l is collapsed for connected items)
+ */
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-pressed:bg-primary/10 data-pressed:inset-ring data-pressed:inset-ring-primary data-pressed:text-foreground data-pressed:hover:bg-primary/10 data-pressed:hover:text-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent hover:bg-muted hover:text-muted-foreground",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export type ToggleProps = React.ComponentProps<typeof ToggleComponent> &
+  VariantProps<typeof toggleVariants>
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: ToggleProps): ReactElement {
+  return (
+    <ToggleComponent
+      className={cn(toggleVariants({ variant, size, className }))}
+      data-slot="toggle"
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,80 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+import { cn } from "@/lib/utils"
+import { useThemeVars } from "@/lib/theme-provider"
+
+/**
+ * Tooltip — WealthX Design System
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=73-2904
+ *
+ * Base: official shadcn tooltip (npx shadcn\@latest add tooltip)
+ * WealthX overrides: bg-brand-secondary, text-brand-secondary-foreground, sharp corners (no rounded-md)
+ */
+
+export type TooltipProviderProps = React.ComponentProps<typeof TooltipPrimitive.Provider>
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipProviderProps): ReactElement {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+export type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>
+
+function Tooltip({
+  ...props
+}: TooltipProps): ReactElement {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+export type TooltipTriggerProps = React.ComponentProps<typeof TooltipPrimitive.Trigger>
+
+function TooltipTrigger({
+  ...props
+}: TooltipTriggerProps): ReactElement {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+export type TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> & {
+  sideOffset?: number
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 8,
+  children,
+  style,
+  ...props
+}: TooltipContentProps): ReactElement {
+  const themeVars = useThemeVars();
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner sideOffset={sideOffset}>
+        <TooltipPrimitive.Popup
+          className={cn(
+            "z-50 w-fit animate-in bg-brand-secondary px-3 py-1.5 text-xs text-balance text-brand-secondary-foreground fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards",
+            className
+          )}
+          data-slot="tooltip-content"
+          style={{ ...themeVars, ...style } as React.CSSProperties}
+          {...props}
+        >
+          {children}
+        </TooltipPrimitive.Popup>
+        <TooltipPrimitive.Arrow
+          className="z-50 size-2.5 rotate-45 bg-brand-secondary"
+        />
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/index.ts

@@ -1,3 +1,15 @@
-export { ShadcnProvider } from "./provider";
-export type { ShadcnProviderProps } from "./provider";
-export { Button, buttonVariants } from "./components/ui/button";
+export { cn } from "./lib/utils";
+export {
+  TYPOGRAPHY,
+  TYPOGRAPHY_DISPLAY,
+  TYPOGRAPHY_HEADING,
+  TYPOGRAPHY_BODY,
+  TYPOGRAPHY_LABEL,
+  TYPOGRAPHY_UTILITY,
+  TYPOGRAPHY_RESPONSIVE,
+  FONT_FAMILY_SANS,
+  getTypographyCssVars,
+  getResponsiveTypographyCssVars,
+} from "./lib/typography";
+export type { TypographyStyle } from "./lib/typography";
+export * from "./components";

package/src/lib/colors.ts

@@ -0,0 +1,74 @@
+/**
+ * Color utilities for WealthX white-label theming.
+ * Ported from \@wealthx/ui theme/utils.ts — zero MUI dependencies.
+ */
+
+// WCAG contrast text colors
+const CONTRAST_DARK = "#040D13";
+const CONTRAST_LIGHT = "#FFFFFF";
+
+export function hexToRgb(hex: string): [number, number, number] {
+  const normalized = hex.replace(/^#/, "");
+  if (normalized.length === 3) {
+    const r = parseInt(normalized[0] + normalized[0], 16);
+    const g = parseInt(normalized[1] + normalized[1], 16);
+    const b = parseInt(normalized[2] + normalized[2], 16);
+    return [r, g, b];
+  }
+  if (normalized.length === 6 || normalized.length === 8) {
+    const r = parseInt(normalized.slice(0, 2), 16);
+    const g = parseInt(normalized.slice(2, 4), 16);
+    const b = parseInt(normalized.slice(4, 6), 16);
+    return [r, g, b];
+  }
+  throw new Error(`Invalid hex color: ${hex}`);
+}
+
+function linearizeSrgb(c: number): number {
+  const n = c / 255;
+  return n <= 0.03928 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
+}
+
+/** WCAG relative luminance (0 = black, 1 = white) */
+export function getLuminance(hex: string): number {
+  const [r, g, b] = hexToRgb(hex);
+  return (
+    0.2126 * linearizeSrgb(r) +
+    0.7152 * linearizeSrgb(g) +
+    0.0722 * linearizeSrgb(b)
+  );
+}
+
+/** Returns dark or light text color based on WCAG contrast ratio */
+export function getContrastText(backgroundColor: string): string {
+  const luminance = getLuminance(backgroundColor);
+  return luminance > 0.179 ? CONTRAST_DARK : CONTRAST_LIGHT;
+}
+
+/** Convert hex to oklch() CSS string */
+export function hexToOklch(hex: string): string {
+  const [r, g, b] = hexToRgb(hex);
+  const rl = linearizeSrgb(r);
+  const gl = linearizeSrgb(g);
+  const bl = linearizeSrgb(b);
+
+  // sRGB linear → OKLab
+  const l = 0.4122214708 * rl + 0.5363325363 * gl + 0.0514459929 * bl;
+  const m = 0.2119034982 * rl + 0.6806995451 * gl + 0.1073969566 * bl;
+  const s = 0.0883024619 * rl + 0.2817188376 * gl + 0.6299787005 * bl;
+
+  const l_ = l > 0 ? Math.cbrt(l) : 0;
+  const m_ = m > 0 ? Math.cbrt(m) : 0;
+  const s_ = s > 0 ? Math.cbrt(s) : 0;
+
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+  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;
+
+  if (C < 0.001) return `oklch(${L.toFixed(3)} 0 0)`;
+  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${h.toFixed(1)})`;
+}

package/src/lib/slot.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+
+function mergeRefs<T>(
+  ...refs: (React.Ref<T> | undefined | null)[]
+): (value: T | null) => void {
+  return (value: T | null): void => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value);
+      else if (ref !== null)
+        (ref as React.MutableRefObject<T | null>).current = value;
+    }
+  };
+}
+
+interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+}
+
+const Slot = React.forwardRef<HTMLElement, SlotProps>(
+  ({ children, ...props }, forwardedRef) => {
+    const child = React.Children.only(children);
+    if (!React.isValidElement(child)) return null;
+
+    const childProps = child.props as Record<string, unknown>;
+    const merged: Record<string, unknown> = { ...props };
+
+    for (const key of Object.keys(childProps)) {
+      if (key === "className") {
+        merged.className = [props.className, childProps.className]
+          .filter(Boolean)
+          .join(" ");
+      } else if (key === "style") {
+        merged.style = {
+          ...(props.style as object),
+          ...(childProps.style as object),
+        };
+      } else if (
+        key.startsWith("on") &&
+        typeof childProps[key] === "function"
+      ) {
+        const parentHandler = (props as Record<string, unknown>)[key];
+        if (typeof parentHandler === "function") {
+          merged[key] = (...args: unknown[]) => {
+            (childProps[key] as (...a: unknown[]) => unknown)(...args);
+            (parentHandler as (...a: unknown[]) => unknown)(...args);
+          };
+        } else {
+          merged[key] = childProps[key];
+        }
+      } else {
+        merged[key] = childProps[key];
+      }
+    }
+
+    const childRef = (child as unknown as { ref?: React.Ref<HTMLElement> }).ref;
+    merged.ref = forwardedRef
+      ? mergeRefs(forwardedRef, childRef)
+      : childRef;
+
+    return React.cloneElement(
+      child,
+      merged as React.Attributes & Record<string, unknown>,
+    );
+  },
+);
+Slot.displayName = "Slot";
+
+export { Slot };

package/src/lib/theme-provider.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import React, { createContext, useContext, useMemo } from "react";
+import { hexToOklch, getContrastText } from "./colors";
+
+export interface ThemeProviderProps {
+  children: React.ReactNode;
+  /** Tenant primary brand color (hex). Default: WealthX green */
+  primary?: string;
+  /** Tenant secondary brand color (hex). Default: WealthX dark navy */
+  secondary?: string;
+  /** Tenant font family override. Default: Figtree */
+  fontFamily?: string;
+  /** Disable CSS variable injection (e.g. for SSR with static CSS) */
+  injectCssVariables?: boolean;
+}
+
+/**
+ * React context that stores the computed theme CSS variables.
+ *
+ * Portal-rendered components (Dialog, AlertDialog, Popover, Tooltip, etc.)
+ * escape the DOM subtree of the ThemeProvider wrapper \<div\>, so they lose
+ * the scoped CSS custom properties set via inline styles. Components that
+ * render inside a portal consume this context and re-apply the variables
+ * on their outermost portal element, restoring the theme cascade.
+ */
+const ThemeVarsContext = createContext<Record<string, string>>({});
+
+/**
+ * Returns the theme CSS variables from the nearest ThemeProvider.
+ * Portal-based components use this to re-apply scoped theme vars
+ * on content rendered outside the ThemeProvider's DOM subtree.
+ */
+export function useThemeVars(): Record<string, string> {
+  return useContext(ThemeVarsContext);
+}
+
+const DEFAULT_PRIMARY = "#33FF99";
+const DEFAULT_SECONDARY = "#162029";
+const DEFAULT_FONT =
+  '"Figtree", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+
+/**
+ * WealthX ThemeProvider — injects tenant brand colors as scoped CSS variables.
+ *
+ * How it works:
+ * 1. Takes primary/secondary hex colors from tenant config
+ * 2. Converts to oklch() (matching globals.css format)
+ * 3. Auto-computes WCAG contrast text for each via WCAG luminance
+ * 4. Sets CSS custom properties as inline styles on a wrapper \<div\>,
+ *    scoped to this subtree (inherited by children via CSS cascade).
+ *    This allows multiple ThemeProviders on the same page with different colors.
+ *
+ * Usage:
+ *   \<ThemeProvider primary="#FF6600" secondary="#1A1A2E"\>
+ *     \<App /\>
+ *   \</ThemeProvider\>
+ */
+export function ThemeProvider({
+  children,
+  primary = DEFAULT_PRIMARY,
+  secondary = DEFAULT_SECONDARY,
+  fontFamily = DEFAULT_FONT,
+  injectCssVariables = true,
+}: ThemeProviderProps): React.ReactElement {
+  const vars = useMemo(() => {
+    if (!injectCssVariables) return {} as Record<string, string>;
+
+    const primaryOklch = hexToOklch(primary);
+    const primaryFgOklch = hexToOklch(getContrastText(primary));
+    const secondaryOklch = hexToOklch(secondary);
+    const secondaryFgOklch = hexToOklch(getContrastText(secondary));
+
+    return {
+      // Brand primary — used by buttons, links, focus rings, active states
+      "--primary": primaryOklch,
+      "--primary-foreground": primaryFgOklch,
+      "--ring": primaryOklch,
+
+      // Sidebar uses primary for active navigation
+      "--sidebar-primary": primaryOklch,
+      "--sidebar-primary-foreground": primaryFgOklch,
+
+      // Brand secondary — tenant navy used by Secondary button variant
+      // NOTE: --secondary is reserved for paper/surface (#F5F8FA), so we use --brand-secondary
+      "--brand-secondary": secondaryOklch,
+      "--brand-secondary-foreground": secondaryFgOklch,
+
+      // Font family — applies to all components + typography utility classes
+      "--font-sans": fontFamily,
+      "--font-family-sans": fontFamily,
+
+      // Legacy compat (used by existing WealthX apps)
+      "--theme-primary": primary,
+      "--theme-secondary": secondary,
+    };
+  }, [primary, secondary, fontFamily, injectCssVariables]);
+
+  return (
+    <ThemeVarsContext.Provider value={vars}>
+      <div data-wealthx-theme style={vars as React.CSSProperties}>
+        {children}
+      </div>
+    </ThemeVarsContext.Provider>
+  );
+}
+
+/**
+ * Build CSS variables object for SSR or static contexts.
+ * Returns a flat Record\<string, string\> that can be serialized to a \<style\> tag.
+ */
+export function buildCssVariables(options: {
+  primary?: string;
+  secondary?: string;
+  fontFamily?: string;
+}): Record<string, string> {
+  const primary = options.primary ?? DEFAULT_PRIMARY;
+  const secondary = options.secondary ?? DEFAULT_SECONDARY;
+  const fontFamily = options.fontFamily ?? DEFAULT_FONT;
+
+  return {
+    "--primary": hexToOklch(primary),
+    "--primary-foreground": hexToOklch(getContrastText(primary)),
+    "--ring": hexToOklch(primary),
+    "--sidebar-primary": hexToOklch(primary),
+    "--sidebar-primary-foreground": hexToOklch(getContrastText(primary)),
+    "--brand-secondary": hexToOklch(secondary),
+    "--brand-secondary-foreground": hexToOklch(getContrastText(secondary)),
+    "--font-sans": fontFamily,
+    "--font-family-sans": fontFamily,
+    "--theme-primary": primary,
+    "--theme-secondary": secondary,
+  };
+}