@wealthx/shadcn 1.1.0 → 1.2.1

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

@@ -3,6 +3,7 @@ import {
   Chart as ChartJS,
   CategoryScale,
   LinearScale,
+  BarController,
   BarElement,
   Tooltip,
   Legend,
@@ -19,6 +20,7 @@ import {
   hexToRgba,
   DATASET_ALPHAS,
   FALLBACK_TICK,
+  FALLBACK_PRIMARY,
   CHART_SLICE_COUNT,
   CHART_PERIODS,
   formatTooltipDate,
@@ -28,7 +30,7 @@ import {
   type ChartGranularity,
 } from "./chart-shared";
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip, Legend);
 
 // ---------------------------------------------------------------------------
 // Types
@@ -85,8 +87,6 @@ export interface IncomeBarChartProps {
 // Constants
 // ---------------------------------------------------------------------------
 
-const FALLBACK_PRIMARY = "#33FF99";
-
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -112,17 +112,25 @@ export function IncomeBarChart({
   // (defaultPeriod handles the initial value).
   const isFirstRender = useRef(true);
   useEffect(() => {
-    if (isFirstRender.current) { isFirstRender.current = false; return; }
+    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 count = Math.min(
+      CHART_SLICE_COUNT[granularity][period],
+      incomeData.months.length,
+    );
     const start = incomeData.months.length - count;
     return {
       months: incomeData.months.slice(start),
@@ -135,10 +143,11 @@ export function IncomeBarChart({
   }, [incomeData, period, granularity]);
 
   const datasetColors = useMemo(
-    () => sliced?.datasets.map((_, i) =>
-      hexToRgba(brandPrimary, DATASET_ALPHAS[i % DATASET_ALPHAS.length])
-    ) ?? [],
-    [sliced, brandPrimary]
+    () =>
+      sliced?.datasets.map((_, i) =>
+        hexToRgba(brandPrimary, DATASET_ALPHAS[i % DATASET_ALPHAS.length]),
+      ) ?? [],
+    [sliced, brandPrimary],
   );
 
   const chartData = useMemo<ChartData<"bar">>(() => {
@@ -151,7 +160,7 @@ export function IncomeBarChart({
         backgroundColor: datasetColors[i],
         hoverBackgroundColor: hexToRgba(
           brandPrimary,
-          Math.min(DATASET_ALPHAS[i % DATASET_ALPHAS.length] + 0.15, 1)
+          Math.min(DATASET_ALPHAS[i % DATASET_ALPHAS.length] + 0.15, 1),
         ),
         borderWidth: 0,
         borderRadius: 0,
@@ -163,64 +172,67 @@ export function IncomeBarChart({
     };
   }, [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 null;
-            return ` ${ctx.dataset.label}: $${val.toLocaleString()}`;
+  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()}`,
+      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]);
+    }),
+    [showXAxis, showYAxis, sliced, granularity],
+  );
 
   return (
     <Card
       className={cn("w-full py-4 sm:py-6 gap-2", className)}
-      style={{ maxWidth: width }}
+      style={{ maxWidth: width, fontFamily }}
     >
       <CardHeader className="px-3 sm:px-6">
         <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
@@ -250,7 +262,11 @@ export function IncomeBarChart({
             {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]} />
+                  <ChartLegendItem
+                    key={ds.label}
+                    label={ds.label}
+                    color={datasetColors[i]}
+                  />
                 ))}
               </div>
             )}
@@ -266,7 +282,11 @@ export function IncomeBarChart({
             {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]} />
+                  <ChartLegendItem
+                    key={ds.label}
+                    label={ds.label}
+                    color={datasetColors[i]}
+                  />
                 ))}
               </div>
             )}

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 };