@wealthx/shadcn 1.1.0 → 1.2.0

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

@@ -1,5 +1,5 @@
 /**
- * Shared utilities and sub-components for IncomeBarChart and ExpenseBarChart.
+ * Shared utilities and sub-components for all shadcn chart components.
  * Not part of the public package API — internal use only.
  */
 import React from "react";
@@ -21,15 +21,18 @@ export type ChartGranularity = "monthly" | "daily";
  * 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 },
+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],
+  daily: [1, 3, 6, 12],
 };
 
 // ---------------------------------------------------------------------------
@@ -40,7 +43,10 @@ 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
+          .split("")
+          .map((c) => c + c)
+          .join("")
       : clean;
   const r = parseInt(full.slice(0, 2), 16);
   const g = parseInt(full.slice(2, 4), 16);
@@ -51,7 +57,51 @@ export function hexToRgba(hex: string, alpha: number): string {
 /** 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
@@ -61,24 +111,128 @@ export const FALLBACK_TICK = "#9EAAB5";
  * 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 {
+export function formatTooltipDate(
+  iso: string,
+  granularity: ChartGranularity,
+): string {
   const d = new Date(iso);
-  return d.toLocaleDateString("en-US",
+  return d.toLocaleDateString(
+    "en-US",
     granularity === "daily"
       ? { month: "short", day: "numeric", year: "numeric" }
-      : { month: "short", 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 }: { label: string; color: string }) {
+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">
-      <div style={{ width: 10, height: 10, backgroundColor: color, flexShrink: 0 }} />
-      <span className="text-[11px] text-muted-foreground leading-none">{label}</span>
+      {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>
   );
 }
@@ -87,14 +241,21 @@ export function ChartPeriodButton({
   period,
   active,
   onClick,
+  unit = "M",
 }: {
-  period: ChartPeriod;
+  period: number;
   active: boolean;
   onClick: () => void;
+  unit?: string;
 }) {
   return (
-    <Button variant={active ? "default" : "outline"} size="xs" onClick={onClick}>
-      {period}M
+    <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

@@ -4,24 +4,28 @@
  * 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 * 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"
+import { cn } from "@/lib/utils";
 
-export type ComboboxProps<Value = string, Multiple extends boolean | undefined = false> =
-  React.ComponentProps<typeof ComboboxPrimitive.Root<Value, Multiple>>
+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} />
+  return <ComboboxPrimitive.Root data-slot="combobox" {...props} />;
 }
 
-export type ComboboxTriggerProps = React.ComponentProps<typeof ComboboxPrimitive.Trigger> & {
-  size?: "sm" | "default"
-}
+export type ComboboxTriggerProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Trigger
+> & {
+  size?: "sm" | "default";
+};
 
 function ComboboxTrigger({
   className,
@@ -34,8 +38,8 @@ function ComboboxTrigger({
       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]: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
+        "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}
     >
@@ -44,39 +48,43 @@ function ComboboxTrigger({
         <ChevronDownIcon className="size-4 opacity-50" />
       </ComboboxPrimitive.Icon>
     </ComboboxPrimitive.Trigger>
-  )
+  );
 }
 
-export type ComboboxValueProps = React.ComponentProps<typeof ComboboxPrimitive.Value>
+export type ComboboxValueProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Value
+>;
 
-function ComboboxValue({
-  ...props
-}: ComboboxValueProps) {
-  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+function ComboboxValue({ ...props }: ComboboxValueProps) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
 }
 
-export type ComboboxInputProps = React.ComponentProps<typeof ComboboxPrimitive.Input>
+export type ComboboxInputProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Input
+>;
 
-function ComboboxInput({
-  className,
-  ...props
-}: ComboboxInputProps) {
+function ComboboxInput({ className, ...props }: ComboboxInputProps) {
   return (
-    <div data-slot="combobox-input-wrapper" className="flex items-center gap-2 border-b border-border px-3">
+    <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:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          "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>
+export type ComboboxContentProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Popup
+>;
 
 function ComboboxContent({
   className,
@@ -90,7 +98,7 @@ function ComboboxContent({
           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
+            className,
           )}
           {...props}
         >
@@ -98,40 +106,37 @@ function ComboboxContent({
         </ComboboxPrimitive.Popup>
       </ComboboxPrimitive.Positioner>
     </ComboboxPrimitive.Portal>
-  )
+  );
 }
 
-export type ComboboxListProps = React.ComponentProps<typeof ComboboxPrimitive.List>
+export type ComboboxListProps = React.ComponentProps<
+  typeof ComboboxPrimitive.List
+>;
 
-function ComboboxList({
-  className,
-  ...props
-}: ComboboxListProps) {
+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
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export type ComboboxItemProps = React.ComponentProps<typeof ComboboxPrimitive.Item>
+export type ComboboxItemProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Item
+>;
 
-function ComboboxItem({
-  className,
-  children,
-  ...props
-}: ComboboxItemProps) {
+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 rounded-sm 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
+        "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}
     >
@@ -145,53 +150,54 @@ function ComboboxItem({
       </span>
       {children}
     </ComboboxPrimitive.Item>
-  )
+  );
 }
 
-export type ComboboxEmptyProps = React.ComponentProps<typeof ComboboxPrimitive.Empty>
+export type ComboboxEmptyProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Empty
+>;
 
-function ComboboxEmpty({
-  className,
-  ...props
-}: ComboboxEmptyProps) {
+function ComboboxEmpty({ className, ...props }: ComboboxEmptyProps) {
   return (
     <ComboboxPrimitive.Empty
       data-slot="combobox-empty"
-      className={`text-body-small ${cn("py-6 text-center text-muted-foreground empty:hidden", className)}`}
+      className={cn(
+        "text-body-small py-6 text-center text-muted-foreground empty:hidden",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-export type ComboboxGroupProps = React.ComponentProps<typeof ComboboxPrimitive.Group>
+export type ComboboxGroupProps = React.ComponentProps<
+  typeof ComboboxPrimitive.Group
+>;
 
-function ComboboxGroup({
-  ...props
-}: ComboboxGroupProps) {
-  return <ComboboxPrimitive.Group data-slot="combobox-group" {...props} />
+function ComboboxGroup({ ...props }: ComboboxGroupProps) {
+  return <ComboboxPrimitive.Group data-slot="combobox-group" {...props} />;
 }
 
-export type ComboboxGroupLabelProps = React.ComponentProps<typeof ComboboxPrimitive.GroupLabel>
+export type ComboboxGroupLabelProps = React.ComponentProps<
+  typeof ComboboxPrimitive.GroupLabel
+>;
 
-function ComboboxGroupLabel({
-  className,
-  ...props
-}: ComboboxGroupLabelProps) {
+function ComboboxGroupLabel({ className, ...props }: ComboboxGroupLabelProps) {
   return (
     <ComboboxPrimitive.GroupLabel
       data-slot="combobox-group-label"
-      className={`text-label-small ${cn("px-2 py-1.5 uppercase text-muted-foreground", className)}`}
+      className={cn(
+        "text-label-small px-2 py-1.5 uppercase text-muted-foreground",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-export type ComboboxSeparatorProps = React.ComponentProps<"div">
+export type ComboboxSeparatorProps = React.ComponentProps<"div">;
 
-function ComboboxSeparator({
-  className,
-  ...props
-}: ComboboxSeparatorProps) {
+function ComboboxSeparator({ className, ...props }: ComboboxSeparatorProps) {
   return (
     <div
       role="separator"
@@ -199,7 +205,7 @@ function ComboboxSeparator({
       className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -214,4 +220,4 @@ export {
   ComboboxGroup,
   ComboboxGroupLabel,
   ComboboxSeparator,
-}
+};