@wealthx/shadcn 1.0.2 → 1.2.0

package/src/components/ui/income-bar-chart.tsx

@@ -0,0 +1,297 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+  Legend,
+  type ChartOptions,
+  type ChartData,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { useThemeVars } from "@/lib/theme-provider";
+import { Card, CardContent, CardHeader, CardTitle, CardAction } from "./card";
+import { Empty, EmptyDescription } from "./empty";
+import { Skeleton } from "./skeleton";
+import { cn } from "@/lib/utils";
+import {
+  hexToRgba,
+  DATASET_ALPHAS,
+  FALLBACK_TICK,
+  FALLBACK_PRIMARY,
+  CHART_SLICE_COUNT,
+  CHART_PERIODS,
+  formatTooltipDate,
+  ChartLegendItem,
+  ChartPeriodButton,
+  type ChartPeriod,
+  type ChartGranularity,
+} from "./chart-shared";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface IncomeDataset {
+  /** Income source label, e.g. "Employment", "Rental", "Other" */
+  label: string;
+  /** One value per data point, aligned to the months array */
+  data: number[];
+}
+
+export interface IncomeBarChartData {
+  /** Display labels, e.g. ["Jul", "Aug"] for monthly or ["Mar 8", "Mar 9"] for daily */
+  months: string[];
+  /** Optional ISO date strings per point — used for the tooltip title */
+  dates?: string[];
+  datasets: IncomeDataset[];
+}
+
+export type IncomePeriod = ChartPeriod;
+export type IncomeGranularity = ChartGranularity;
+
+export interface IncomeBarChartProps {
+  /** Full dataset — sliced to the selected period */
+  incomeData: IncomeBarChartData | null;
+  title?: string;
+  /** Show or hide the chart legend */
+  showLegend?: boolean;
+  /** Show or hide X axis labels */
+  showXAxis?: boolean;
+  /** Show or hide Y axis labels */
+  showYAxis?: boolean;
+  /** Legend placement relative to chart */
+  legendPosition?: "top" | "bottom";
+  /** Default period selector value */
+  defaultPeriod?: IncomePeriod;
+  /**
+   * Data granularity — controls available period buttons and slice counts.
+   * "monthly" (default): shows 3M / 6M / 12M, slices by month count.
+   * "daily": shows 1M / 3M / 6M / 12M, slices by day count (1M=30, 3M=90, etc.).
+   */
+  granularity?: IncomeGranularity;
+  /** Chart canvas height in pixels */
+  height?: number;
+  /** Width of the card in pixels */
+  width?: number | string;
+  className?: string;
+  /** Show skeleton loading state instead of the chart */
+  isLoading?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function IncomeBarChart({
+  incomeData,
+  title = "Income",
+  showLegend = true,
+  showXAxis = true,
+  showYAxis = true,
+  legendPosition = "top",
+  defaultPeriod = 6,
+  granularity = "monthly",
+  height = 280,
+  width = "100%",
+  className,
+  isLoading = false,
+}: IncomeBarChartProps) {
+  const periods = CHART_PERIODS[granularity];
+  const [period, setPeriod] = useState<IncomePeriod>(defaultPeriod);
+
+  // Reset period when granularity changes, but not on initial mount
+  // (defaultPeriod handles the initial value).
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    setPeriod(CHART_PERIODS[granularity][0]);
+  }, [granularity]);
+
+  const themeVars = useThemeVars();
+  const brandPrimary: string =
+    (themeVars["--theme-primary"] as string | undefined) || FALLBACK_PRIMARY;
+  const fontFamily: string =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
+
+  const sliced = useMemo<IncomeBarChartData | null>(() => {
+    if (!incomeData?.months?.length || !incomeData.datasets.length) return null;
+    const count = Math.min(
+      CHART_SLICE_COUNT[granularity][period],
+      incomeData.months.length,
+    );
+    const start = incomeData.months.length - count;
+    return {
+      months: incomeData.months.slice(start),
+      dates: incomeData.dates?.slice(start),
+      datasets: incomeData.datasets.map((ds) => ({
+        ...ds,
+        data: ds.data.slice(start),
+      })),
+    };
+  }, [incomeData, period, granularity]);
+
+  const datasetColors = useMemo(
+    () =>
+      sliced?.datasets.map((_, i) =>
+        hexToRgba(brandPrimary, DATASET_ALPHAS[i % DATASET_ALPHAS.length]),
+      ) ?? [],
+    [sliced, brandPrimary],
+  );
+
+  const chartData = useMemo<ChartData<"bar">>(() => {
+    if (!sliced) return { labels: [], datasets: [] };
+    return {
+      labels: sliced.months,
+      datasets: sliced.datasets.map((ds, i) => ({
+        label: ds.label,
+        data: ds.data,
+        backgroundColor: datasetColors[i],
+        hoverBackgroundColor: hexToRgba(
+          brandPrimary,
+          Math.min(DATASET_ALPHAS[i % DATASET_ALPHAS.length] + 0.15, 1),
+        ),
+        borderWidth: 0,
+        borderRadius: 0,
+        borderSkipped: false,
+        barPercentage: 0.75,
+        categoryPercentage: 0.7,
+        stack: "income",
+      })),
+    };
+  }, [sliced, datasetColors, brandPrimary]);
+
+  const options = useMemo<ChartOptions<"bar">>(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 800, easing: "easeOutQuart" },
+      layout: { padding: 0 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+          padding: 12,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            title: (tooltipItems) => {
+              const idx = tooltipItems[0]?.dataIndex;
+              if (idx != null && sliced?.dates?.[idx]) {
+                return formatTooltipDate(sliced.dates[idx], granularity);
+              }
+              return tooltipItems[0]?.label ?? "";
+            },
+            label: (ctx) => {
+              const val = ctx.raw as number;
+              if (val === 0) return;
+              return ` ${ctx.dataset.label}: $${val.toLocaleString()}`;
+            },
+          },
+        },
+      },
+      scales: {
+        x: {
+          display: showXAxis,
+          stacked: true,
+          grid: { display: false },
+          border: { display: false },
+          ticks: { font: { size: 10 }, color: FALLBACK_TICK },
+        },
+        y: {
+          display: showYAxis,
+          stacked: true,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            font: { size: 10 },
+            color: FALLBACK_TICK,
+            maxTicksLimit: 5,
+            padding: 8,
+            callback: (v) => `$${Number(v).toLocaleString()}`,
+          },
+        },
+      },
+    }),
+    [showXAxis, showYAxis, sliced, granularity],
+  );
+
+  return (
+    <Card
+      className={cn("w-full py-4 sm:py-6 gap-2", className)}
+      style={{ maxWidth: width, fontFamily }}
+    >
+      <CardHeader className="px-3 sm:px-6">
+        <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
+        <CardAction>
+          <div className="flex gap-0.5 sm:gap-1">
+            {periods.map((p) => (
+              <ChartPeriodButton
+                key={p}
+                period={p}
+                active={period === p}
+                onClick={() => setPeriod(p)}
+              />
+            ))}
+          </div>
+        </CardAction>
+      </CardHeader>
+
+      <CardContent className="px-3 sm:px-6">
+        {isLoading ? (
+          <Skeleton style={{ height, width: "100%" }} />
+        ) : !sliced ? (
+          <Empty className="flex-none p-4" style={{ height }}>
+            <EmptyDescription>No data available</EmptyDescription>
+          </Empty>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {showLegend && legendPosition === "top" && (
+              <div className="flex flex-wrap gap-x-3 gap-y-1.5 pb-2">
+                {sliced.datasets.map((ds, i) => (
+                  <ChartLegendItem
+                    key={ds.label}
+                    label={ds.label}
+                    color={datasetColors[i]}
+                  />
+                ))}
+              </div>
+            )}
+            <div style={{ height, width: "100%", position: "relative" }}>
+              <Chart
+                key={brandPrimary}
+                type="bar"
+                data={chartData}
+                options={options}
+                aria-label={title}
+              />
+            </div>
+            {showLegend && legendPosition === "bottom" && (
+              <div className="flex flex-wrap gap-x-3 gap-y-1.5 pt-2">
+                {sliced.datasets.map((ds, i) => (
+                  <ChartLegendItem
+                    key={ds.label}
+                    label={ds.label}
+                    color={datasetColors[i]}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -1,17 +1,17 @@
-import { type ReactElement } from "react"
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 
 /**
  * InputGroup — shadcn/WealthX
  * Base: npx shadcn\@latest add input-group
  * WealthX: removed rounded-md (square corners per brand)
  */
-export type InputGroupProps = React.ComponentProps<"div">
+export type InputGroupProps = React.ComponentProps<"div">;
 
 function InputGroup({ className, ...props }: InputGroupProps): ReactElement {
   return (
@@ -32,13 +32,13 @@ function InputGroup({ className, ...props }: InputGroupProps): ReactElement {
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
 
-        className
+        className,
       )}
       data-slot="input-group"
       role="group"
       {...props}
     />
-  )
+  );
 }
 
 const inputGroupAddonVariants = cva(
@@ -59,10 +59,11 @@ const inputGroupAddonVariants = cva(
     defaultVariants: {
       align: "inline-start",
     },
-  }
-)
+  },
+);
 
-export type InputGroupAddonProps = React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>
+export type InputGroupAddonProps = React.ComponentProps<"div"> &
+  VariantProps<typeof inputGroupAddonVariants>;
 
 function InputGroupAddon({
   className,
@@ -77,19 +78,19 @@ function InputGroupAddon({
       data-slot="input-group-addon"
       onClick={(e) => {
         if ((e.target as HTMLElement).closest("button")) {
-          return
+          return;
         }
-        e.currentTarget.parentElement?.querySelector("input")?.focus()
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
       }}
       onKeyDown={(e) => {
         if (e.key === "Enter" || e.key === " ") {
-          e.currentTarget.parentElement?.querySelector("input")?.focus()
+          e.currentTarget.parentElement?.querySelector("input")?.focus();
         }
       }}
       role="group"
       {...props}
     />
-  )
+  );
 }
 
 const inputGroupButtonVariants = cva(
@@ -106,11 +107,14 @@ const inputGroupButtonVariants = cva(
     defaultVariants: {
       size: "xs",
     },
-  }
-)
+  },
+);
 
-export type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, "size"> &
-  VariantProps<typeof inputGroupButtonVariants>
+export type InputGroupButtonProps = Omit<
+  React.ComponentProps<typeof Button>,
+  "size"
+> &
+  VariantProps<typeof inputGroupButtonVariants>;
 
 function InputGroupButton({
   className,
@@ -127,24 +131,27 @@ function InputGroupButton({
       variant={variant}
       {...props}
     />
-  )
+  );
 }
 
-export type InputGroupTextProps = React.ComponentProps<"span">
+export type InputGroupTextProps = React.ComponentProps<"span">;
 
-function InputGroupText({ className, ...props }: InputGroupTextProps): ReactElement {
+function InputGroupText({
+  className,
+  ...props
+}: InputGroupTextProps): ReactElement {
   return (
     <span
       className={cn(
-        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
+        "flex items-center gap-2 text-body-small text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export type InputGroupInputProps = React.ComponentProps<"input">
+export type InputGroupInputProps = React.ComponentProps<"input">;
 
 function InputGroupInput({
   className,
@@ -154,15 +161,15 @@ function InputGroupInput({
     <Input
       className={cn(
         "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
+        className,
       )}
       data-slot="input-group-control"
       {...props}
     />
-  )
+  );
 }
 
-export type InputGroupTextareaProps = React.ComponentProps<"textarea">
+export type InputGroupTextareaProps = React.ComponentProps<"textarea">;
 
 function InputGroupTextarea({
   className,
@@ -172,12 +179,12 @@ function InputGroupTextarea({
     <Textarea
       className={cn(
         "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
+        className,
       )}
       data-slot="input-group-control"
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -187,4 +194,4 @@ export {
   InputGroupText,
   InputGroupInput,
   InputGroupTextarea,
-}
+};

package/src/components/ui/input-otp.tsx

@@ -7,15 +7,15 @@
  *   - InputOTPSlot: removed first:rounded-l-md last:rounded-r-md — sharp corners (radius-none)
  */
 
-import { type ReactElement } from "react"
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
-import { cn } from "@/lib/utils"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 export type InputOTPProps = React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
-}
+  containerClassName?: string;
+};
 
 function InputOTP({
   className,
@@ -27,64 +27,69 @@ function InputOTP({
       className={cn("disabled:cursor-not-allowed", className)}
       containerClassName={cn(
         "flex items-center gap-2 has-disabled:opacity-50",
-        containerClassName
+        containerClassName,
       )}
       data-slot="input-otp"
       {...props}
     />
-  )
+  );
 }
 
-export type InputOTPGroupProps = React.ComponentProps<"div">
+export type InputOTPGroupProps = React.ComponentProps<"div">;
 
-function InputOTPGroup({ className, ...props }: InputOTPGroupProps): ReactElement {
+function InputOTPGroup({
+  className,
+  ...props
+}: InputOTPGroupProps): ReactElement {
   return (
     <div
       className={cn("flex items-center", className)}
       data-slot="input-otp-group"
       {...props}
     />
-  )
+  );
 }
 
 export type InputOTPSlotProps = React.ComponentProps<"div"> & {
-  index: number
-}
+  index: number;
+};
 
 function InputOTPSlot({
   index,
   className,
   ...props
 }: InputOTPSlotProps): ReactElement {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {}
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {};
 
   return (
     <div
       className={cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:border-l aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
-        className
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-body-small shadow-xs transition-all outline-none first:border-l aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        className,
       )}
       data-active={isActive}
       data-slot="input-otp-slot"
       {...props}
     >
       {char}
-      {hasFakeCaret ? <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+      {hasFakeCaret ? (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
           <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
-        </div> : null}
+        </div>
+      ) : null}
     </div>
-  )
+  );
 }
 
-export type InputOTPSeparatorProps = React.ComponentProps<"div">
+export type InputOTPSeparatorProps = React.ComponentProps<"div">;
 
 function InputOTPSeparator({ ...props }: InputOTPSeparatorProps): ReactElement {
   return (
     <div data-slot="input-otp-separator" role="separator" {...props}>
       <MinusIcon />
     </div>
-  )
+  );
 }
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/src/components/ui/input.tsx

@@ -1,28 +1,28 @@
-import { type ReactElement } from "react"
-import * as React from "react"
-import { cn } from "@/lib/utils"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 /**
  * Input — shadcn/WealthX
  * Base: npx shadcn\@latest add input
  * WealthX: removed rounded-md (square corners), added font-sans.
  */
-export type InputProps = React.ComponentProps<"input">
+export type InputProps = React.ComponentProps<"input">;
 
 function Input({ className, type, ...props }: InputProps): ReactElement {
   return (
     <input
       className={cn(
-        "h-9 w-full min-w-0 border border-input bg-transparent px-3 py-1 text-base font-sans shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "h-9 w-full min-w-0 border border-input bg-transparent px-3 py-1 text-body-medium font-sans shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-label-medium file:text-foreground placeholder:font-normal placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30",
         "focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/20",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
-        className
+        className,
       )}
       data-slot="input"
       type={type}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export { Input };