@wealthx/shadcn 1.0.2 → 1.2.0

package/src/components/ui/chart-shared.tsx

@@ -0,0 +1,261 @@
+/**
+ * Shared utilities and sub-components for all shadcn chart components.
+ * Not part of the public package API — internal use only.
+ */
+import React from "react";
+import { Button } from "./button";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type ChartPeriod = 1 | 3 | 6 | 12;
+export type ChartGranularity = "monthly" | "daily";
+
+// ---------------------------------------------------------------------------
+// Period / slice config
+// ---------------------------------------------------------------------------
+
+/**
+ * How many data points to slice per period × granularity combination.
+ * monthly: slice by calendar month count.
+ * daily:   slice by approximate day count (1M=30d, 3M=90d, 6M=180d, 12M=365d).
+ */
+export const CHART_SLICE_COUNT: Record<
+  ChartGranularity,
+  Record<ChartPeriod, number>
+> = {
+  monthly: { 1: 1, 3: 3, 6: 6, 12: 12 },
+  daily: { 1: 30, 3: 90, 6: 180, 12: 365 },
+};
+
+/** Period buttons shown per granularity. monthly hides 1M; daily shows all four. */
+export const CHART_PERIODS: Record<ChartGranularity, ChartPeriod[]> = {
+  monthly: [3, 6, 12],
+  daily: [1, 3, 6, 12],
+};
+
+// ---------------------------------------------------------------------------
+// Chart.js helpers
+// ---------------------------------------------------------------------------
+
+export function hexToRgba(hex: string, alpha: number): string {
+  const clean = hex.replace("#", "");
+  const full =
+    clean.length === 3
+      ? clean
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : clean;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
+/** Opacity steps to derive distinct shades from a single brand color (up to 6 datasets). */
+export const DATASET_ALPHAS = [1, 0.72, 0.52, 0.36, 0.24, 0.15];
+
+// ---------------------------------------------------------------------------
+// Fallback resolved colors for Chart.js canvas API.
+// Chart.js requires actual hex/rgb strings — CSS variables cannot be used directly.
+// All values match the :root defaults defined in globals.css.
+// ---------------------------------------------------------------------------
+
+/** Fallback for --primary (WealthX green) */
+export const FALLBACK_PRIMARY = "#33FF99";
+/** Fallback for --brand-secondary (WealthX dark navy) */
+export const FALLBACK_SECONDARY = "#162029";
+/** Fallback for --background (white) */
+export const FALLBACK_BG = "#ffffff";
+/** Fallback for --foreground (near-black) */
+export const FALLBACK_FOREGROUND = "#040D13";
+/** Fallback for --muted-foreground used as axis tick color */
+export const FALLBACK_TICK = "#9EAAB5";
+/** Fallback neutral grey for comparison / suburb lines */
+export const FALLBACK_NEUTRAL = "#B9BCBF";
+/** Fallback semi-transparent grid line color */
+export const FALLBACK_GRID_COLOR = "rgba(0,0,0,0.06)";
+
+/**
+ * Semantic severity colors for alert / status charts.
+ * Match WealthX design tokens: --destructive, --warning, --success.
+ * Intentionally fixed — severity meaning must be recognisable regardless of tenant theme.
+ */
+export const SEVERITY_COLORS = {
+  high: "#F44336", // default --destructive  oklch(0.643 0.215 28.8)
+  medium: "#FF9800", // default --warning     oklch(0.77  0.174  64.1)
+  low: "#4CAF50", // default --success        oklch(0.673 0.162 144.2)
+} as const;
+
+/**
+ * Format a dollar amount as an abbreviated string for chart axis ticks.
+ * e.g. 1_200_000 → "$1.2M", 580_000 → "$580K", -250_000 → "-$250K"
+ */
+export function formatAbbrev(value: number): string {
+  const abs = Math.abs(value);
+  const sign = value < 0 ? "-" : "";
+  if (abs >= 1_000_000_000)
+    return `${sign}$${(abs / 1_000_000_000).toFixed(1)}B`;
+  if (abs >= 1_000_000) return `${sign}$${(abs / 1_000_000).toFixed(1)}M`;
+  if (abs >= 1_000) return `${sign}$${(abs / 1_000).toFixed(0)}K`;
+  return `${sign}$${abs.toFixed(0)}`;
+}
+
+// ---------------------------------------------------------------------------
+// Tooltip date format
+// ---------------------------------------------------------------------------
+
+/**
+ * Format an ISO date string for the chart tooltip title.
+ * Daily granularity includes the day; monthly shows only month + year.
+ */
+export function formatTooltipDate(
+  iso: string,
+  granularity: ChartGranularity,
+): string {
+  const d = new Date(iso);
+  return d.toLocaleDateString(
+    "en-US",
+    granularity === "daily"
+      ? { month: "short", day: "numeric", year: "numeric" }
+      : { month: "short", year: "numeric" },
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Date / count formatters (shared across bar and doughnut charts)
+// ---------------------------------------------------------------------------
+
+/** Format an ISO date string as "Mon 'YY" for X-axis month labels. */
+export function formatMonthLabel(iso: string): string {
+  return new Date(iso).toLocaleDateString("en-US", {
+    month: "short",
+    year: "2-digit",
+  });
+}
+
+/** Format a raw integer count for axis ticks and tooltips. */
+export function formatCount(n: number): string {
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+  return String(Math.round(n));
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+export function ChartLegendItem({
+  label,
+  color,
+  lineStyle,
+}: {
+  label: string;
+  color: string;
+  /** When provided, renders a line indicator instead of a square swatch */
+  lineStyle?: "solid" | "dashed";
+}) {
+  return (
+    <div className="flex items-center gap-1.5">
+      {lineStyle ? (
+        <svg
+          width="20"
+          height="10"
+          viewBox="0 0 20 10"
+          aria-hidden="true"
+          style={{ flexShrink: 0 }}
+        >
+          <line
+            x1="0"
+            y1="5"
+            x2="20"
+            y2="5"
+            stroke={color}
+            strokeWidth="2"
+            strokeLinecap="square"
+            strokeDasharray={lineStyle === "dashed" ? "5 3" : undefined}
+          />
+        </svg>
+      ) : (
+        <div
+          style={{
+            width: 10,
+            height: 10,
+            backgroundColor: color,
+            flexShrink: 0,
+          }}
+        />
+      )}
+      <span className="text-[11px] text-muted-foreground leading-none">
+        {label}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * One row in a doughnut chart legend — circle swatch, label, dollar value, percent.
+ * The label truncates when the container is constrained.
+ */
+export function DoughnutLegendRow({
+  label,
+  color,
+  value,
+  percent,
+}: {
+  label: string;
+  color: string;
+  value: number;
+  percent: string;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <div className="flex items-center gap-1.5 min-w-0">
+        <div
+          style={{
+            width: 10,
+            height: 10,
+            borderRadius: "50%",
+            backgroundColor: color,
+            flexShrink: 0,
+          }}
+        />
+        <span className="text-[11px] text-muted-foreground leading-none truncate">
+          {label}
+        </span>
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        <span className="text-[11px] font-medium leading-none">
+          {formatAbbrev(value)}
+        </span>
+        <span className="text-[11px] text-muted-foreground leading-none w-10 text-right">
+          {percent}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export function ChartPeriodButton({
+  period,
+  active,
+  onClick,
+  unit = "M",
+}: {
+  period: number;
+  active: boolean;
+  onClick: () => void;
+  unit?: string;
+}) {
+  return (
+    <Button
+      variant={active ? "default" : "outline"}
+      size="xs"
+      onClick={onClick}
+    >
+      {period}
+      {unit}
+    </Button>
+  );
+}

package/src/components/ui/checkbox.tsx

@@ -1,9 +1,7 @@
-"use client"
-
-import { type ReactElement, useState, type ComponentProps } from "react"
-import { CheckIcon, MinusIcon } from "lucide-react"
-import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
-import { cn } from "@/lib/utils"
+import { type ReactElement, useState, type ComponentProps } from "react";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { cn } from "@/lib/utils";
 
 /**
  * Checkbox — shadcn/WealthX Design System
@@ -13,13 +11,13 @@ import { cn } from "@/lib/utils"
  * White-label: checked/indeterminate use `primary` token → adapts to tenant color.
  * Error+checked/indeterminate: stacked variant overrides primary with destructive (higher specificity).
  */
-export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>
+export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>;
 
 function Checkbox({ className, ...props }: CheckboxProps): ReactElement {
   return (
     <CheckboxPrimitive.Root
       className={cn(
-        "peer group inline-flex size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-all outline-none",
+        "peer group inline-flex size-4 shrink-0 border border-input shadow-xs transition-all outline-none",
         "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
@@ -30,7 +28,7 @@ function Checkbox({ className, ...props }: CheckboxProps): ReactElement {
         // Stacked (2 attr selectors) → wins over single-attr rules above
         "aria-invalid:data-checked:border-destructive aria-invalid:data-checked:bg-destructive aria-invalid:data-checked:text-destructive-foreground",
         "aria-invalid:data-indeterminate:border-destructive aria-invalid:data-indeterminate:bg-destructive aria-invalid:data-indeterminate:text-destructive-foreground",
-        className
+        className,
       )}
       data-slot="checkbox"
       {...props}
@@ -43,7 +41,7 @@ function Checkbox({ className, ...props }: CheckboxProps): ReactElement {
         <MinusIcon className="size-3.5 hidden group-data-indeterminate:block" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  )
+  );
 }
 
 /**
@@ -53,11 +51,13 @@ function Checkbox({ className, ...props }: CheckboxProps): ReactElement {
  * Card background: primary/5 when checked/indeterminate; destructive/5 when error+checked.
  * White-label: opacity modifier on primary token → adapts to tenant color.
  */
-export type CheckboxCardProps = ComponentProps<typeof CheckboxPrimitive.Root> & {
-  label: string
-  description?: string
-  error?: boolean
-}
+export type CheckboxCardProps = ComponentProps<
+  typeof CheckboxPrimitive.Root
+> & {
+  label: string;
+  description?: string;
+  error?: boolean;
+};
 
 function CheckboxCard({
   className,
@@ -71,11 +71,11 @@ function CheckboxCard({
   ...props
 }: CheckboxCardProps): ReactElement {
   const [internalChecked, setInternalChecked] = useState<boolean>(
-    Boolean(defaultChecked)
-  )
+    Boolean(defaultChecked),
+  );
 
-  const resolvedChecked = checked ?? internalChecked
-  const isTinted = resolvedChecked
+  const resolvedChecked = checked ?? internalChecked;
+  const isTinted = resolvedChecked;
 
   return (
     <label
@@ -85,7 +85,7 @@ function CheckboxCard({
           ? ["border-destructive", isTinted && "bg-destructive/5"]
           : isTinted && "border-primary bg-primary/5",
         disabled && "cursor-not-allowed opacity-50",
-        className
+        className,
       )}
       data-slot="checkbox-card"
     >
@@ -95,17 +95,21 @@ function CheckboxCard({
         className="mt-0.5"
         disabled={disabled}
         onCheckedChange={(value, event) => {
-          setInternalChecked(value as boolean)
-          onCheckedChange?.(value, event)
+          setInternalChecked(value as boolean);
+          onCheckedChange?.(value, event);
         }}
         {...props}
       />
       <div className="flex flex-col gap-1">
-        <span className="text-sm font-medium leading-none">{label}</span>
-        {description ? <span className="text-sm text-muted-foreground">{description}</span> : null}
+        <span className="text-label-medium leading-none">{label}</span>
+        {description ? (
+          <span className="text-body-small text-muted-foreground">
+            {description}
+          </span>
+        ) : null}
       </div>
     </label>
-  )
+  );
 }
 
-export { Checkbox, CheckboxCard }
+export { Checkbox, CheckboxCard };

package/src/components/ui/combobox.tsx

@@ -0,0 +1,223 @@
+/**
+ * Combobox — WealthX Design System
+ * Base: @base-ui/react/combobox
+ * WealthX overrides: square corners (rounded-none), design token colors,
+ * consistent styling with Select component, built-in search filtering.
+ */
+import * as React from "react";
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+
+import { cn } from "@/lib/utils";
+
+export type ComboboxProps<
+  Value = string,
+  Multiple extends boolean | undefined = false,
+> = React.ComponentProps<typeof ComboboxPrimitive.Root<Value, Multiple>>;
+
+function Combobox<Value, Multiple extends boolean | undefined = false>({
+  ...props
+}: React.ComponentProps<typeof ComboboxPrimitive.Root<Value, Multiple>>) {
+  return <ComboboxPrimitive.Root data-slot="combobox" {...props} />;
+}
+
+export type ComboboxTriggerProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Trigger
+> & {
+  size?: "sm" | "default";
+};
+
+function ComboboxTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: ComboboxTriggerProps) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 border border-input bg-transparent px-3 py-2 text-body-small whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20 data-[popup-open]:border-primary data-[popup-open]:ring-[3px] data-[popup-open]:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:font-normal data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:items-center *:data-[slot=combobox-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.Icon className="transition-transform duration-200 data-[popup-open]:rotate-180">
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </ComboboxPrimitive.Icon>
+    </ComboboxPrimitive.Trigger>
+  );
+}
+
+export type ComboboxValueProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Value
+>;
+
+function ComboboxValue({ ...props }: ComboboxValueProps) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+}
+
+export type ComboboxInputProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Input
+>;
+
+function ComboboxInput({ className, ...props }: ComboboxInputProps) {
+  return (
+    <div
+      data-slot="combobox-input-wrapper"
+      className="flex items-center gap-2 border-b border-border px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 text-muted-foreground" />
+      <ComboboxPrimitive.Input
+        data-slot="combobox-input"
+        className={cn(
+          "h-9 w-full min-w-0 bg-transparent py-1 text-body-small outline-none placeholder:font-normal placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+export type ComboboxContentProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Popup
+>;
+
+function ComboboxContent({
+  className,
+  children,
+  ...props
+}: ComboboxContentProps) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner sideOffset={4} align="start">
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          className={cn(
+            "relative z-50 max-h-[var(--available-height)] min-w-[8rem] overflow-hidden border bg-popover text-popover-foreground shadow-md 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-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </ComboboxPrimitive.Popup>
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}
+
+export type ComboboxListProps = React.ComponentProps<
+  typeof ComboboxPrimitive.List
+>;
+
+function ComboboxList({ className, ...props }: ComboboxListProps) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "max-h-[min(var(--available-height),18rem)] overflow-y-auto p-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type ComboboxItemProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Item
+>;
+
+function ComboboxItem({ className, children, ...props }: ComboboxItemProps) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-body-small outline-hidden select-none data-highlighted:bg-primary/5 data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        data-slot="combobox-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <ComboboxPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ComboboxPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ComboboxPrimitive.Item>
+  );
+}
+
+export type ComboboxEmptyProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Empty
+>;
+
+function ComboboxEmpty({ className, ...props }: ComboboxEmptyProps) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "text-body-small py-6 text-center text-muted-foreground empty:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type ComboboxGroupProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Group
+>;
+
+function ComboboxGroup({ ...props }: ComboboxGroupProps) {
+  return <ComboboxPrimitive.Group data-slot="combobox-group" {...props} />;
+}
+
+export type ComboboxGroupLabelProps = React.ComponentProps<
+  typeof ComboboxPrimitive.GroupLabel
+>;
+
+function ComboboxGroupLabel({ className, ...props }: ComboboxGroupLabelProps) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-group-label"
+      className={cn(
+        "text-label-small px-2 py-1.5 uppercase text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type ComboboxSeparatorProps = React.ComponentProps<"div">;
+
+function ComboboxSeparator({ className, ...props }: ComboboxSeparatorProps) {
+  return (
+    <div
+      role="separator"
+      data-slot="combobox-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Combobox,
+  ComboboxTrigger,
+  ComboboxValue,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxSeparator,
+};