sonance-brand-mcp 1.3.108 → 1.3.110

package/dist/assets/components/alert.tsx

@@ -3,8 +3,10 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { AlertCircle, CheckCircle, Info, AlertTriangle, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+export type AlertState = "default" | "hover" | "focus";
+
 const alertVariants = cva(
-  "relative flex w-full items-start gap-4 border p-4 transition-colors",
+  "relative flex w-full items-start border transition-all duration-200",
   {
     variants: {
       variant: {
@@ -14,13 +16,34 @@ const alertVariants = cva(
         warning: "border-warning/30 bg-warning-light text-warning",
         info: "border-info/30 bg-info-light text-info",
       },
+      size: {
+        xs: "gap-2 p-2 rounded-lg text-xs",
+        sm: "gap-2.5 p-3 rounded-xl text-xs",
+        md: "gap-3 p-4 rounded-xl text-sm",
+        lg: "gap-4 p-5 rounded-2xl text-sm",
+      },
     },
     defaultVariants: {
       variant: "default",
+      size: "sm",
     },
   }
 );
 
+const iconSizes = {
+  xs: "h-3.5 w-3.5",
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-5 w-5",
+};
+
+const closeSizes = {
+  xs: "h-3 w-3",
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-4 w-4",
+};
+
 const iconMap = {
   default: Info,
   success: CheckCircle,
@@ -35,10 +58,12 @@ interface AlertProps
   title?: string;
   dismissible?: boolean;
   onClose?: () => void;
+  /** Visual state for Storybook/Figma documentation */
+  state?: AlertState;
 }
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ className, variant = "default", title, children, dismissible, onClose, ...props }, ref) => {
+  ({ className, variant = "default", size = "sm", title, children, dismissible, onClose, state, ...props }, ref) => {
     const Icon = iconMap[variant || "default"];
     const showCloseButton = dismissible || onClose;
 
@@ -47,18 +72,18 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         data-sonance-name="alert"
         ref={ref}
         role="alert"
-        className={cn(alertVariants({ variant }), className)}
+        className={cn(alertVariants({ variant, size }), className)}
         {...props}
       >
-        <Icon className="h-5 w-5 shrink-0" />
-        <div className="flex-1">
+        <Icon className={cn("shrink-0", iconSizes[size || "sm"])} />
+        <div className="flex-1 min-w-0">
           {title && (
-            <h5 id="icon-h5-title" className="mb-1 font-medium leading-none tracking-tight">
+            <h5 id="icon-h5-title" className="mb-0.5 font-medium leading-tight tracking-tight">
               {title}
             </h5>
           )}
           {children && (
-            <div data-sonance-name="alert" className={cn("text-sm", variant === "default" && "text-foreground-secondary")}>
+            <div data-sonance-name="alert" className={cn(variant === "default" && "text-foreground-secondary")}>
               {children}
             </div>
           )}
@@ -66,9 +91,9 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         {showCloseButton && (
           <button
             onClick={onClose}
-            className="shrink-0 rounded-sm p-1 opacity-70 transition-opacity hover:opacity-100"
+            className="shrink-0 rounded-lg p-1 opacity-70 transition-all duration-150 hover:opacity-100 hover:bg-secondary-hover"
           >
-            <X className="h-4 w-4" />
+            <X className={closeSizes[size || "sm"]} />
             <span id="icon-span-close" className="sr-only">Close</span>
           </button>
         )}
@@ -79,3 +104,4 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
 
 Alert.displayName = "Alert";
 
+export { alertVariants };

package/dist/assets/components/badge.tsx

@@ -1,58 +1,86 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
+export type BadgeState = "default" | "hover";
+
 const badgeVariants = cva(
-  "inline-flex items-center font-medium transition-colors",
+  "inline-flex items-center font-medium transition-all duration-150",
   {
     variants: {
       variant: {
-        default: "bg-background-secondary text-foreground border border-border",
-        primary: "bg-primary text-primary-foreground",
-        secondary: "bg-secondary-hover text-secondary-foreground border border-border",
-        success: "bg-success text-white",
-        error: "bg-error text-white",
-        warning: "bg-warning text-white",
-        info: "bg-info text-white",
-        outline: "border border-border text-foreground bg-transparent",
+        default: "bg-background-secondary text-foreground border border-border hover:bg-secondary-hover",
+        primary: "bg-primary text-primary-foreground hover:bg-primary-hover",
+        secondary: "bg-secondary-hover text-secondary-foreground border border-border hover:bg-secondary",
+        success: "bg-success text-white hover:bg-success/90",
+        error: "bg-error text-white hover:bg-error/90",
+        warning: "bg-warning text-white hover:bg-warning/90",
+        info: "bg-info text-white hover:bg-info/90",
+        outline: "border border-border text-foreground bg-transparent hover:bg-secondary-hover",
+        glass: "bg-primary/20 text-primary border border-primary/30 backdrop-blur-sm hover:bg-primary/30",
       },
       size: {
-        sm: "px-2 py-0.5 text-xs",
-        md: "px-2.5 py-0.5 text-xs",
-        lg: "px-3 py-1 text-sm",
+        xs: "px-1.5 py-0.5 text-[10px] rounded-md",
+        sm: "px-2 py-0.5 text-xs rounded-lg",
+        md: "px-2.5 py-0.5 text-xs rounded-full",
+        lg: "px-3 py-1 text-sm rounded-full",
       },
     },
     defaultVariants: {
       variant: "default",
-      size: "md",
+      size: "sm",
     },
   }
 );
 
 interface BadgeProps
   extends React.HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof badgeVariants> {}
+    VariantProps<typeof badgeVariants> {
+  /** Visual state for Storybook/Figma documentation */
+  state?: BadgeState;
+}
 
-export function Badge({ className, variant, size, ...props }: BadgeProps) {
+export function Badge({ className, variant, size, state, ...props }: BadgeProps) {
   return (
-    <span id="badge-span" data-sonance-name="badge" className={cn(badgeVariants({ variant, size }), className)} {...props} />
+    <span
+      id="badge-span"
+      data-sonance-name="badge"
+      className={cn(
+        badgeVariants({ variant, size }),
+        state === "hover" && "bg-secondary-hover",
+        className
+      )}
+      {...props}
+    />
   );
 }
 
+const closeIconSizes = {
+  xs: "h-2.5 w-2.5",
+  sm: "h-3 w-3",
+  md: "h-3 w-3",
+  lg: "h-3.5 w-3.5",
+};
+
 // Chip variant with optional close button
 interface ChipProps extends BadgeProps {
   onClose?: () => void;
 }
 
-export function Chip({ className, variant, size, onClose, children, ...props }: ChipProps) {
+export function Chip({ className, variant, size = "sm", onClose, children, ...props }: ChipProps) {
   return (
-    <span id="chip-span" className={cn(badgeVariants({ variant, size }), "gap-1", className)} data-sonance-name="badge" {...props}>
+    <span
+      id="chip-span"
+      className={cn(badgeVariants({ variant, size }), "gap-1", className)}
+      data-sonance-name="badge"
+      {...props}
+    >
       {children}
       {onClose && (
         <button
           onClick={onClose}
-          className="ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10"
+          className="ml-0.5 rounded-full p-0.5 transition-colors hover:bg-black/10 dark:hover:bg-white/10"
         >
-          <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <svg className={closeIconSizes[size || "sm"]} fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
           </svg>
           <span id="chip-span-remove" className="sr-only">Remove</span>
@@ -62,3 +90,4 @@ export function Chip({ className, variant, size, onClose, children, ...props }:
   );
 }
 
+export { badgeVariants };

package/dist/assets/components/button.tsx

@@ -5,28 +5,31 @@ import { forwardRef } from "react";
 export type ButtonState = "default" | "hover" | "active" | "focus" | "disabled";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center font-medium uppercase tracking-wide transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center font-medium uppercase tracking-wide transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]",
   {
     variants: {
       variant: {
         primary:
-          "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+          "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active shadow-sm hover:shadow-md",
         secondary:
-          "bg-secondary text-secondary-foreground border border-border hover:bg-secondary-hover hover:border-border-hover",
+          "bg-secondary text-secondary-foreground border border-border hover:bg-secondary-hover hover:border-border-hover shadow-sm hover:shadow-md",
         ghost: "text-foreground hover:bg-secondary-hover",
         inverted:
-          "bg-sonance-white text-sonance-charcoal hover:opacity-90",
+          "bg-sonance-white text-sonance-charcoal hover:opacity-90 shadow-sm hover:shadow-md",
+        glass:
+          "bg-primary/90 text-primary-foreground backdrop-blur-sm border border-white/10 hover:bg-primary/80 shadow-lg",
       },
       size: {
-        sm: "h-9 px-4 text-xs",
-        md: "h-11 px-6 text-sm",
-        lg: "h-14 px-8 text-sm",
-        icon: "h-10 w-10",
+        xs: "h-6 px-2.5 text-[10px] rounded-md",
+        sm: "h-8 px-3.5 text-xs rounded-lg",
+        md: "h-9 px-4 text-sm rounded-lg",
+        lg: "h-10 px-5 text-sm rounded-xl",
+        icon: "h-9 w-9 rounded-full",
       },
     },
     defaultVariants: {
       variant: "primary",
-      size: "md",
+      size: "sm",
     },
   }
 );
@@ -37,27 +40,33 @@ const getStateStyles = (variant: string | null | undefined, state?: ButtonState)
 
   const stateMap: Record<string, Record<string, string>> = {
     primary: {
-      hover: "bg-primary-hover",
-      active: "bg-primary-active",
-      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+      hover: "bg-primary-hover shadow-md",
+      active: "bg-primary-active scale-[0.98]",
+      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
       disabled: "opacity-50 pointer-events-none",
     },
     secondary: {
-      hover: "bg-secondary-hover border-border-hover",
-      active: "bg-secondary-hover",
-      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+      hover: "bg-secondary-hover border-border-hover shadow-md",
+      active: "bg-secondary-hover scale-[0.98]",
+      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
       disabled: "opacity-50 pointer-events-none",
     },
     ghost: {
       hover: "bg-secondary-hover",
-      active: "bg-secondary-hover",
-      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+      active: "bg-secondary-hover scale-[0.98]",
+      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
       disabled: "opacity-50 pointer-events-none",
     },
     inverted: {
-      hover: "opacity-90",
-      active: "opacity-80",
-      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+      hover: "opacity-90 shadow-md",
+      active: "opacity-80 scale-[0.98]",
+      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
+      disabled: "opacity-50 pointer-events-none",
+    },
+    glass: {
+      hover: "bg-primary/80 shadow-lg",
+      active: "bg-primary/70 scale-[0.98]",
+      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
       disabled: "opacity-50 pointer-events-none",
     },
   };

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