sonance-brand-mcp 1.3.109 → 1.3.111

package/dist/assets/components/card.tsx

@@ -1,49 +1,90 @@
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 import { forwardRef } from "react";
 
 export type CardState = "default" | "hover" | "focus";
 
-interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: "default" | "elevated";
+const cardVariants = cva(
+  "bg-card border border-card-border transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default: "hover:border-border-hover hover:bg-card-hover",
+        elevated: "shadow-md hover:shadow-lg",
+        glass: "bg-card/80 backdrop-blur-sm border-white/10 hover:bg-card/90",
+      },
+      size: {
+        compact: "rounded-lg",
+        default: "rounded-xl",
+        spacious: "rounded-2xl",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const cardPaddingSizes = {
+  compact: "p-3",
+  default: "p-4",
+  spacious: "p-6",
+};
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement>,
+  VariantProps<typeof cardVariants> {
   /** Visual state for Storybook/Figma documentation */
   state?: CardState;
 }
 
 // State styles for Storybook/Figma visualization
-const getStateStyles = (variant: string, state?: CardState) => {
+const getStateStyles = (variant: string | null | undefined, state?: CardState) => {
   if (!state || state === "default") return "";
 
   if (variant === "elevated") {
     const stateMap: Record<string, string> = {
       hover: "shadow-lg",
-      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
+    };
+    return stateMap[state] || "";
+  }
+
+  if (variant === "glass") {
+    const stateMap: Record<string, string> = {
+      hover: "bg-card/90",
+      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
     };
     return stateMap[state] || "";
   }
 
   const stateMap: Record<string, string> = {
     hover: "border-border-hover bg-card-hover",
-    focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+    focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
   };
 
   return stateMap[state] || "";
 };
 
+// Create a context for passing size to children
+import { createContext, useContext } from "react";
+const CardSizeContext = createContext<"compact" | "default" | "spacious">("default");
+
 export const Card = forwardRef<HTMLDivElement, CardProps>(
-  ({ className, variant = "default", state, ...props }, ref) => {
+  ({ className, variant, size = "default", state, ...props }, ref) => {
     return (
-      <div
-        data-sonance-name="card"
-        ref={ref}
-        className={cn(
-          "bg-card border border-card-border transition-all duration-200",
-          variant === "elevated" && "shadow-md hover:shadow-lg",
-          variant === "default" && "hover:border-border-hover hover:bg-card-hover",
-          getStateStyles(variant, state),
-          className
-        )}
-        {...props}
-      />
+      <CardSizeContext.Provider value={size || "default"}>
+        <div
+          data-sonance-name="card"
+          ref={ref}
+          className={cn(
+            cardVariants({ variant, size }),
+            getStateStyles(variant, state),
+            className
+          )}
+          {...props}
+        />
+      </CardSizeContext.Provider>
     );
   }
 );
@@ -53,9 +94,12 @@ Card.displayName = "Card";
 export const CardHeader = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6", className)} data-sonance-name="card" {...props} />
-));
+>(({ className, ...props }, ref) => {
+  const size = useContext(CardSizeContext);
+  return (
+    <div ref={ref} className={cn(cardPaddingSizes[size], className)} data-sonance-name="card" {...props} />
+  );
+});
 
 CardHeader.displayName = "CardHeader";
 
@@ -66,7 +110,7 @@ export const CardTitle = forwardRef<
   <h3
     id="card-title-h3"
     ref={ref}
-    className={cn("text-lg font-medium text-foreground", className)}
+    className={cn("text-base font-medium text-foreground", className)}
     {...props}
   />
 ));
@@ -91,22 +135,32 @@ CardDescription.displayName = "CardDescription";
 export const CardContent = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} data-sonance-name="card" {...props} />
-));
+>(({ className, ...props }, ref) => {
+  const size = useContext(CardSizeContext);
+  const paddingClass = size === "compact" ? "px-3 pb-3" : size === "spacious" ? "px-6 pb-6" : "px-4 pb-4";
+  return (
+    <div ref={ref} className={cn(paddingClass, "pt-0", className)} data-sonance-name="card" {...props} />
+  );
+});
 
 CardContent.displayName = "CardContent";
 
 export const CardFooter = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    data-sonance-name="card"
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const size = useContext(CardSizeContext);
+  const paddingClass = size === "compact" ? "px-3 pb-3" : size === "spacious" ? "px-6 pb-6" : "px-4 pb-4";
+  return (
+    <div
+      ref={ref}
+      className={cn("flex items-center pt-0", paddingClass, className)}
+      data-sonance-name="card"
+      {...props}
+    />
+  );
+});
 
 CardFooter.displayName = "CardFooter";
+
+export { cardVariants };

package/dist/assets/components/checkbox.tsx

@@ -2,11 +2,37 @@
 
 import { forwardRef, useId } from "react";
 import { Check } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 export type CheckboxState = "default" | "hover" | "focus" | "checked" | "disabled";
 
-interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+const checkboxVariants = cva(
+  "peer shrink-0 appearance-none border border-border bg-input transition-all duration-150 hover:border-border-hover checked:border-primary checked:bg-primary focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        xs: "h-3.5 w-3.5 rounded",
+        sm: "h-4 w-4 rounded-md",
+        md: "h-5 w-5 rounded-md",
+        lg: "h-6 w-6 rounded-lg",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+);
+
+const checkIconSizes = {
+  xs: "h-2.5 w-2.5",
+  sm: "h-3 w-3",
+  md: "h-3.5 w-3.5",
+  lg: "h-4 w-4",
+};
+
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size">,
+  VariantProps<typeof checkboxVariants> {
   label?: string;
   description?: string;
   /** Visual state for Storybook/Figma documentation */
@@ -21,7 +47,7 @@ const getStateStyles = (state?: CheckboxState) => {
 
   const stateMap: Record<string, string> = {
     hover: "border-border-hover",
-    focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+    focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
     checked: "border-primary bg-primary",
     disabled: "opacity-50 cursor-not-allowed",
   };
@@ -30,7 +56,7 @@ const getStateStyles = (state?: CheckboxState) => {
 };
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, label, description, id, state, disabled, checked, defaultChecked, onChange, onCheckedChange, style, ...props }, ref) => {
+  ({ className, label, description, id, state, disabled, checked, defaultChecked, onChange, onCheckedChange, style, size = "sm", ...props }, ref) => {
     const uniqueId = useId();
     const inputId = id || `checkbox-${uniqueId}`;
     const isDisabled = disabled || state === "disabled";
@@ -46,7 +72,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     };
 
     return (
-      <label data-sonance-name="checkbox" className="flex items-start gap-3 cursor-pointer">
+      <label data-sonance-name="checkbox" className="flex items-start gap-2.5 cursor-pointer">
         <div className="relative flex items-center justify-center">
           <input
             type="checkbox"
@@ -61,12 +87,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             )}
             readOnly={isControlled && !onChange && !onCheckedChange}
             className={cn(
-              "peer h-5 w-5 shrink-0 appearance-none border border-border bg-input",
-              "hover:border-border-hover",
-              "checked:border-primary checked:bg-primary",
-              "focus:outline-none focus:ring-2 focus:ring-border-focus focus:ring-offset-2 focus:ring-offset-background",
-              "disabled:cursor-not-allowed disabled:opacity-50",
-              "transition-colors duration-150",
+              checkboxVariants({ size }),
               getStateStyles(state),
               className
             )}
@@ -74,8 +95,9 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           />
           <Check
             className={cn(
-              "pointer-events-none absolute h-3.5 w-3.5 text-primary-foreground opacity-0 peer-checked:opacity-100 transition-opacity",
-              state === "checked" && "opacity-100"
+              "pointer-events-none absolute text-primary-foreground opacity-0 peer-checked:opacity-100 transition-all duration-150 peer-checked:scale-100 scale-75",
+              checkIconSizes[size || "sm"],
+              state === "checked" && "opacity-100 scale-100"
             )}
           />
         </div>
@@ -100,3 +122,5 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
 Checkbox.displayName = "Checkbox";
 
+export { checkboxVariants };
+

package/dist/assets/components/dialog.tsx

@@ -7,6 +7,7 @@ import { cn } from "@/lib/utils";
 interface DialogContextValue {
   open: boolean;
   onClose: () => void;
+  size: "compact" | "default" | "spacious";
 }
 
 const DialogContext = createContext<DialogContextValue | null>(null);
@@ -15,9 +16,11 @@ interface DialogProps {
   open: boolean;
   onClose: () => void;
   children: React.ReactNode;
+  /** Size variant for padding */
+  size?: "compact" | "default" | "spacious";
 }
 
-export function Dialog({ open, onClose, children }: DialogProps) {
+export function Dialog({ open, onClose, children, size = "default" }: DialogProps) {
   // Close on escape
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
@@ -44,15 +47,15 @@ export function Dialog({ open, onClose, children }: DialogProps) {
   if (!open) return null;
 
   return (
-    <DialogContext.Provider value={{ open, onClose }}>
+    <DialogContext.Provider value={{ open, onClose, size }}>
       <div className="fixed inset-0 z-50 flex items-center justify-center">
-        {/* Backdrop */}
+        {/* Backdrop with blur */}
         <div
-          className="absolute inset-0 bg-overlay animate-in fade-in duration-200"
+          className="absolute inset-0 bg-overlay/80 backdrop-blur-sm animate-in fade-in duration-200"
           onClick={onClose}
         />
         {/* Content */}
-        <div className="relative z-10 animate-in zoom-in-95 fade-in duration-200">
+        <div className="relative z-10 animate-in zoom-in-95 fade-in-0 duration-200">
           {children}
         </div>
       </div>
@@ -60,6 +63,12 @@ export function Dialog({ open, onClose, children }: DialogProps) {
   );
 }
 
+const dialogPaddingSizes = {
+  compact: { x: "px-4", y: "py-3" },
+  default: { x: "px-5", y: "py-4" },
+  spacious: { x: "px-6", y: "py-5" },
+};
+
 export const DialogContent = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & { showClose?: boolean }
@@ -67,15 +76,22 @@ export const DialogContent = forwardRef<
   const context = useContext(DialogContext);
 
   return (
-    <div data-sonance-name="dialog"
+    <div
+      data-sonance-name="dialog"
+      ref={ref}
+      className={cn(
+        "relative bg-card/95 backdrop-blur-xl border border-border rounded-2xl shadow-2xl",
+        "min-w-[320px] max-w-lg",
+        className
+      )}
       {...props}
     >
       {showClose && context && (
         <button
           onClick={context.onClose}
-          className="absolute right-4 top-4 p-1 text-foreground-muted hover:text-foreground transition-colors"
+          className="absolute right-3 top-3 p-1.5 rounded-lg text-foreground-muted hover:text-foreground hover:bg-secondary-hover transition-all duration-150"
         >
-          <X className="h-5 w-5" />
+          <X className="h-4 w-4" />
           <span id="dialog-content-span-close" className="sr-only">Close</span>
         </button>
       )}
@@ -89,13 +105,20 @@ DialogContent.displayName = "DialogContent";
 export const DialogHeader = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("px-6 py-4 border-b border-border", className)} data-sonance-name="dialog"
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const context = useContext(DialogContext);
+  const size = context?.size || "default";
+  const padding = dialogPaddingSizes[size];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(padding.x, padding.y, "border-b border-border", className)}
+      data-sonance-name="dialog"
+      {...props}
+    />
+  );
+});
 
 DialogHeader.displayName = "DialogHeader";
 
@@ -106,7 +129,7 @@ export const DialogTitle = forwardRef<
   <h2
     id="dialog-title-h2"
     ref={ref}
-    className={cn("text-lg font-medium text-foreground", className)}
+    className={cn("text-base font-medium text-foreground", className)}
     {...props}
   />
 ));
@@ -120,7 +143,8 @@ export const DialogDescription = forwardRef<
   <p
     id="dialog-description-p"
     ref={ref}
-    className={cn("mt-1 text-sm text-foreground-secondary", className)} data-sonance-name="dialog"
+    className={cn("mt-1 text-sm text-foreground-muted", className)}
+    data-sonance-name="dialog"
     {...props}
   />
 ));
@@ -130,25 +154,44 @@ DialogDescription.displayName = "DialogDescription";
 export const DialogBody = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("px-6 py-4", className)} data-sonance-name="dialog" {...props} />
-));
+>(({ className, ...props }, ref) => {
+  const context = useContext(DialogContext);
+  const size = context?.size || "default";
+  const padding = dialogPaddingSizes[size];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(padding.x, padding.y, className)}
+      data-sonance-name="dialog"
+      {...props}
+    />
+  );
+});
 
 DialogBody.displayName = "DialogBody";
 
 export const DialogFooter = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "flex items-center justify-end gap-3 px-6 py-4 border-t border-border",
-      className
-    )} data-sonance-name="dialog"
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const context = useContext(DialogContext);
+  const size = context?.size || "default";
+  const padding = dialogPaddingSizes[size];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex items-center justify-end gap-2.5 border-t border-border",
+        padding.x, padding.y,
+        className
+      )}
+      data-sonance-name="dialog"
+      {...props}
+    />
+  );
+});
 
 DialogFooter.displayName = "DialogFooter";
 

package/dist/assets/components/dropdown-menu.tsx

@@ -3,8 +3,48 @@
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
+const dropdownMenuContentVariants = cva(
+  "z-50 min-w-[8rem] overflow-hidden border p-1 text-foreground shadow-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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",
+  {
+    variants: {
+      size: {
+        xs: "rounded-lg text-xs",
+        sm: "rounded-xl text-xs",
+        md: "rounded-xl text-sm",
+        lg: "rounded-2xl text-sm",
+      },
+      menuVariant: {
+        default: "bg-card border-border",
+        glass: "bg-card/95 border-border/50 backdrop-blur-xl",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+      menuVariant: "glass",
+    },
+  }
+);
+
+const dropdownMenuItemVariants = cva(
+  "relative flex cursor-default select-none items-center outline-none transition-all duration-150 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  {
+    variants: {
+      size: {
+        xs: "rounded-md px-2 py-1 text-xs",
+        sm: "rounded-lg px-2.5 py-1.5 text-xs",
+        md: "rounded-lg px-3 py-2 text-sm",
+        lg: "rounded-xl px-3.5 py-2.5 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+);
+
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 const DropdownMenuGroup = DropdownMenuPrimitive.Group;
@@ -21,7 +61,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "flex cursor-default select-none items-center rounded-lg px-2.5 py-1.5 text-xs outline-none transition-colors duration-150",
       "focus:bg-secondary-hover focus:text-foreground",
       "data-[state=open]:bg-secondary-hover data-[state=open]:text-foreground",
       inset && "pl-8",
@@ -30,7 +70,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRight className="ml-auto h-3.5 w-3.5" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
@@ -42,7 +82,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-sm border border-border bg-card p-1 text-foreground shadow-lg",
+      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border/50 bg-card/95 backdrop-blur-xl p-1 text-foreground shadow-xl",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -57,23 +97,20 @@ const DropdownMenuSubContent = React.forwardRef<
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
+interface DropdownMenuContentProps
+  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>,
+    VariantProps<typeof dropdownMenuContentVariants> {}
+
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+  DropdownMenuContentProps
+>(({ className, sideOffset = 4, size, menuVariant, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-sm border border-border bg-card p-1 text-foreground shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        "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",
+        dropdownMenuContentVariants({ size, menuVariant }),
         className
       )}
       {...props}
@@ -91,9 +128,8 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
+      dropdownMenuItemVariants({ size: "sm" }),
       "focus:bg-secondary-hover focus:text-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -109,7 +145,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
+      "relative flex cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2.5 text-xs outline-none transition-all duration-150",
       "focus:bg-secondary-hover focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
@@ -119,7 +155,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span id="dropdown-menu-checkbox-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="h-3.5 w-3.5" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -134,7 +170,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
+      "relative flex cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2.5 text-xs outline-none transition-all duration-150",
       "focus:bg-secondary-hover focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
@@ -160,7 +196,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-xs font-medium uppercase tracking-widest text-foreground-muted",
+      "px-2.5 py-1.5 text-[10px] font-medium uppercase tracking-wide text-foreground-muted",
       inset && "pl-8",
       className
     )}
@@ -209,5 +245,6 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
+  dropdownMenuContentVariants,
+  dropdownMenuItemVariants,
 };
-