@wealthx/shadcn 1.1.0 → 1.2.1

package/src/components/ui/expense-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_SECONDARY,
   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
@@ -82,11 +84,6 @@ export interface ExpenseBarChartProps {
 }
 
 // ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-const FALLBACK_SECONDARY = "#162029";
-
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -112,17 +109,27 @@ export function ExpenseBarChart({
   // (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 brandSecondary: string =
-    (themeVars["--theme-secondary"] as string | undefined) || FALLBACK_SECONDARY;
+    (themeVars["--theme-secondary"] as string | undefined) ||
+    FALLBACK_SECONDARY;
+  const fontFamily: string =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
 
   const sliced = useMemo<ExpenseBarChartData | null>(() => {
-    if (!expenseData?.months?.length || !expenseData.datasets.length) return null;
-    const count = Math.min(CHART_SLICE_COUNT[granularity][period], expenseData.months.length);
+    if (!expenseData?.months?.length || !expenseData.datasets.length)
+      return null;
+    const count = Math.min(
+      CHART_SLICE_COUNT[granularity][period],
+      expenseData.months.length,
+    );
     const start = expenseData.months.length - count;
     return {
       months: expenseData.months.slice(start),
@@ -135,10 +142,11 @@ export function ExpenseBarChart({
   }, [expenseData, period, granularity]);
 
   const datasetColors = useMemo(
-    () => sliced?.datasets.map((_, i) =>
-      hexToRgba(brandSecondary, DATASET_ALPHAS[i % DATASET_ALPHAS.length])
-    ) ?? [],
-    [sliced, brandSecondary]
+    () =>
+      sliced?.datasets.map((_, i) =>
+        hexToRgba(brandSecondary, DATASET_ALPHAS[i % DATASET_ALPHAS.length]),
+      ) ?? [],
+    [sliced, brandSecondary],
   );
 
   const chartData = useMemo<ChartData<"bar">>(() => {
@@ -151,7 +159,7 @@ export function ExpenseBarChart({
         backgroundColor: datasetColors[i],
         hoverBackgroundColor: hexToRgba(
           brandSecondary,
-          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 +171,67 @@ export function ExpenseBarChart({
     };
   }, [sliced, datasetColors, brandSecondary]);
 
-  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 +261,11 @@ export function ExpenseBarChart({
             {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 +281,11 @@ export function ExpenseBarChart({
             {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/field.tsx

@@ -1,8 +1,8 @@
-import { type ReactElement, useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
+import { type ReactElement, useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 
 /**
  * Field — shadcn/WealthX
@@ -14,7 +14,7 @@ import { Separator } from "@/components/ui/separator"
  *   - FieldError.uniqueErrors: Array.from() instead of spread on Map iterator (es5 compat)
  */
 
-export type FieldSetProps = React.ComponentProps<"fieldset">
+export type FieldSetProps = React.ComponentProps<"fieldset">;
 
 function FieldSet({ className, ...props }: FieldSetProps): ReactElement {
   return (
@@ -22,15 +22,17 @@ function FieldSet({ className, ...props }: FieldSetProps): ReactElement {
       className={cn(
         "flex flex-col gap-6",
         "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
+        className,
       )}
       data-slot="field-set"
       {...props}
     />
-  )
+  );
 }
 
-export type FieldLegendProps = React.ComponentProps<"legend"> & { variant?: "legend" | "label" }
+export type FieldLegendProps = React.ComponentProps<"legend"> & {
+  variant?: "legend" | "label";
+};
 
 function FieldLegend({
   className,
@@ -40,31 +42,31 @@ function FieldLegend({
   return (
     <legend
       className={cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
-        className
+        "mb-3",
+        "data-[variant=legend]:text-label-large",
+        "data-[variant=label]:text-label-medium",
+        className,
       )}
       data-slot="field-legend"
       data-variant={variant}
       {...props}
     />
-  )
+  );
 }
 
-export type FieldGroupProps = React.ComponentProps<"div">
+export type FieldGroupProps = React.ComponentProps<"div">;
 
 function FieldGroup({ className, ...props }: FieldGroupProps): ReactElement {
   return (
     <div
       className={cn(
         "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-        className
+        className,
       )}
       data-slot="field-group"
       {...props}
     />
-  )
+  );
 }
 
 const fieldVariants = cva(
@@ -88,10 +90,11 @@ const fieldVariants = cva(
     defaultVariants: {
       orientation: "vertical",
     },
-  }
-)
+  },
+);
 
-export type FieldProps = React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>
+export type FieldProps = React.ComponentProps<"div"> &
+  VariantProps<typeof fieldVariants>;
 
 function Field({
   className,
@@ -106,79 +109,82 @@ function Field({
       role="group"
       {...props}
     />
-  )
+  );
 }
 
-export type FieldContentProps = React.ComponentProps<"div">
+export type FieldContentProps = React.ComponentProps<"div">;
 
-function FieldContent({ className, ...props }: FieldContentProps): ReactElement {
+function FieldContent({
+  className,
+  ...props
+}: FieldContentProps): ReactElement {
   return (
     <div
       className={cn(
         "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        className
+        className,
       )}
       data-slot="field-content"
       {...props}
     />
-  )
+  );
 }
 
-export type FieldLabelProps = React.ComponentProps<typeof Label>
+export type FieldLabelProps = React.ComponentProps<typeof Label>;
 
-function FieldLabel({
-  className,
-  ...props
-}: FieldLabelProps): ReactElement {
+function FieldLabel({ className, ...props }: FieldLabelProps): ReactElement {
   return (
     <Label
       className={cn(
         "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
         "has-data-checked:border-primary has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10",
-        className
+        className,
       )}
       data-slot="field-label"
       {...props}
     />
-  )
+  );
 }
 
-export type FieldTitleProps = React.ComponentProps<"div">
+export type FieldTitleProps = React.ComponentProps<"div">;
 
 function FieldTitle({ className, ...props }: FieldTitleProps): ReactElement {
   return (
     <div
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
-        className
+        "flex w-fit items-center gap-2 text-label-medium leading-snug group-data-[disabled=true]/field:opacity-50",
+        className,
       )}
       data-slot="field-label"
       {...props}
     />
-  )
+  );
 }
 
-export type FieldDescriptionProps = React.ComponentProps<"p">
+export type FieldDescriptionProps = React.ComponentProps<"p">;
 
-function FieldDescription({ className, ...props }: FieldDescriptionProps): ReactElement {
+function FieldDescription({
+  className,
+  ...props
+}: FieldDescriptionProps): ReactElement {
   return (
     <p
       className={cn(
-        "text-xs leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "text-caption leading-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
         "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className
+        className,
       )}
       data-slot="field-description"
       {...props}
     />
-  )
+  );
 }
 
 export type FieldSeparatorProps = React.ComponentProps<"div"> & {
-  children?: React.ReactNode
-}
+  children?: React.ReactNode;
+};
 
 function FieldSeparator({
   children,
@@ -188,27 +194,29 @@ function FieldSeparator({
   return (
     <div
       className={cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
+        "relative -my-2 h-5 text-body-small group-data-[variant=outline]/field-group:-mb-2",
+        className,
       )}
       data-content={Boolean(children)}
       data-slot="field-separator"
       {...props}
     >
       <Separator className="absolute inset-0 top-1/2" />
-      {children ? <span
+      {children ? (
+        <span
           className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
           data-slot="field-separator-content"
         >
           {children}
-        </span> : null}
+        </span>
+      ) : null}
     </div>
-  )
+  );
 }
 
 export type FieldErrorProps = React.ComponentProps<"div"> & {
-  errors?: ({ message?: string } | undefined)[]
-}
+  errors?: ({ message?: string } | undefined)[];
+};
 
 function FieldError({
   className,
@@ -218,45 +226,45 @@ function FieldError({
 }: FieldErrorProps): ReactElement | null {
   const content = useMemo(() => {
     if (children) {
-      return children
+      return children;
     }
 
     if (!errors?.length) {
-      return null
+      return null;
     }
 
     const uniqueErrors = Array.from(
-      new Map(errors.map((error) => [error?.message, error])).values()
-    )
+      new Map(errors.map((error) => [error?.message, error])).values(),
+    );
 
     if (uniqueErrors.length === 1) {
-      return uniqueErrors[0]?.message
+      return uniqueErrors[0]?.message;
     }
 
     return (
       <ul className="ml-4 flex list-disc flex-col gap-1">
         {uniqueErrors.map(
           (error) =>
-            error?.message && <li key={error.message}>{error.message}</li>
+            error?.message && <li key={error.message}>{error.message}</li>,
         )}
       </ul>
-    )
-  }, [children, errors])
+    );
+  }, [children, errors]);
 
   if (!content) {
-    return null
+    return null;
   }
 
   return (
     <div
-      className={cn("text-xs font-normal text-destructive", className)}
+      className={cn("text-caption text-destructive", className)}
       data-slot="field-error"
       role="alert"
       {...props}
     >
       {content}
     </div>
-  )
+  );
 }
 
 export {
@@ -270,4 +278,4 @@ export {
   FieldSet,
   FieldContent,
   FieldTitle,
-}
+};