sonance-brand-mcp 1.3.109 → 1.3.110

package/dist/assets/components/popover.tsx

@@ -1,12 +1,44 @@
 "use client";
 
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useRef, useEffect, useCallback, createContext, useContext } from "react";
 import { createPortal } from "react-dom";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 type PopoverPosition = "top" | "bottom" | "left" | "right";
-
-interface PopoverProps {
+type PopoverSize = "compact" | "default" | "spacious";
+type PopoverVariant = "default" | "glass";
+
+const PopoverContext = createContext<{ size: PopoverSize }>({ size: "default" });
+
+const popoverVariants = cva(
+  "fixed z-50 min-w-[200px] border shadow-xl animate-in fade-in zoom-in-95 duration-150",
+  {
+    variants: {
+      size: {
+        compact: "rounded-lg",
+        default: "rounded-xl",
+        spacious: "rounded-2xl",
+      },
+      popoverVariant: {
+        default: "bg-card border-border",
+        glass: "bg-card/95 border-border/50 backdrop-blur-xl",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      popoverVariant: "glass",
+    },
+  }
+);
+
+const popoverContentPadding = {
+  compact: "p-3",
+  default: "p-4",
+  spacious: "p-5",
+};
+
+interface PopoverProps extends VariantProps<typeof popoverVariants> {
   trigger: React.ReactNode;
   children: React.ReactNode;
   position?: PopoverPosition;
@@ -25,6 +57,8 @@ export function Popover({
   position = "bottom",
   triggerOn = "click",
   className,
+  size = "default",
+  popoverVariant = "glass",
 }: PopoverProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [portalPosition, setPortalPosition] = useState<PortalPosition>({ top: 0, left: 0 });
@@ -144,41 +178,42 @@ export function Popover({
   };
 
   return (
-    <div data-sonance-name="popover"
-      ref={containerRef}
-      className="relative inline-block"
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <div
-        ref={triggerRef}
-        onClick={triggerOn === "click" ? () => setIsOpen(!isOpen) : undefined}
-        className="cursor-pointer"
+    <PopoverContext.Provider value={{ size }}>
+      <div data-sonance-name="popover"
+        ref={containerRef}
+        className="relative inline-block"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
       >
-        {trigger}
-      </div>
-      {mounted && isOpen && createPortal(
         <div
-          ref={popoverRef}
-          className={cn(
-            "fixed z-50 min-w-[200px] bg-card border border-border shadow-lg",
-            "animate-in fade-in zoom-in-95 duration-150",
-            position === "left" || position === "right" ? "-translate-y-1/2" : "",
-            className
-          )}
-          style={{
-            top: portalPosition.top,
-            left: portalPosition.left,
-            transformOrigin: transformOrigin[position],
-          }}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
+          ref={triggerRef}
+          onClick={triggerOn === "click" ? () => setIsOpen(!isOpen) : undefined}
+          className="cursor-pointer"
         >
-          {children}
-        </div>,
-        document.body
-      )}
-    </div>
+          {trigger}
+        </div>
+        {mounted && isOpen && createPortal(
+          <div
+            ref={popoverRef}
+            className={cn(
+              popoverVariants({ size, popoverVariant }),
+              position === "left" || position === "right" ? "-translate-y-1/2" : "",
+              className
+            )}
+            style={{
+              top: portalPosition.top,
+              left: portalPosition.left,
+              transformOrigin: transformOrigin[position],
+            }}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            {children}
+          </div>,
+          document.body
+        )}
+      </div>
+    </PopoverContext.Provider>
   );
 }
 
@@ -189,6 +224,15 @@ export function PopoverContent({
   className?: string;
   children: React.ReactNode;
 }) {
-  return <div data-sonance-name="popover" className={cn("p-4", className)}>{children}</div>;
+  const { size } = useContext(PopoverContext);
+  return (
+    <div
+      data-sonance-name="popover"
+      className={cn(popoverContentPadding[size], className)}
+    >
+      {children}
+    </div>
+  );
 }
 
+export { popoverVariants };

package/dist/assets/components/radio-group.tsx

@@ -1,17 +1,42 @@
 "use client";
 
 import { forwardRef, createContext, useContext, useState, useId } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 export type RadioGroupItemState = "default" | "hover" | "focus" | "checked" | "disabled";
 
+const radioItemVariants = cva(
+  "peer shrink-0 appearance-none rounded-full border border-border bg-input transition-all duration-150 hover:border-border-hover checked:border-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",
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+);
+
+const radioIndicatorSizes = {
+  xs: "h-1.5 w-1.5",
+  sm: "h-2 w-2",
+  md: "h-2.5 w-2.5",
+  lg: "h-3 w-3",
+};
+
 // State styles for Storybook/Figma visualization
 const getStateStyles = (state?: RadioGroupItemState) => {
   if (!state || state === "default") return "";
 
   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",
     disabled: "opacity-50 cursor-not-allowed",
   };
@@ -23,6 +48,7 @@ interface RadioGroupContextValue {
   value: string;
   onChange: (value: string) => void;
   name: string;
+  size: "xs" | "sm" | "md" | "lg";
 }
 
 const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
@@ -35,6 +61,8 @@ interface RadioGroupProps {
   className?: string;
   children: React.ReactNode;
   orientation?: "horizontal" | "vertical";
+  /** Size variant for radio items */
+  size?: "xs" | "sm" | "md" | "lg";
 }
 
 export function RadioGroup({
@@ -45,6 +73,7 @@ export function RadioGroup({
   className,
   children,
   orientation = "vertical",
+  size = "sm",
 }: RadioGroupProps) {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const value = controlledValue ?? internalValue;
@@ -57,12 +86,12 @@ export function RadioGroup({
   };
 
   return (
-    <RadioGroupContext.Provider value={{ value, onChange, name: groupName }}>
+    <RadioGroupContext.Provider value={{ value, onChange, name: groupName, size }}>
       <div
         role="radiogroup"
         className={cn(
           "flex",
-          orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6",
+          orientation === "vertical" ? "flex-col gap-2.5" : "flex-row gap-5",
           className
         )}
       >
@@ -87,13 +116,13 @@ export const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
       throw new Error("RadioGroupItem must be used within a RadioGroup");
     }
 
-    const { value: groupValue, onChange, name } = context;
+    const { value: groupValue, onChange, name, size } = context;
     const inputId = id || `radio-${value}`;
     const isChecked = groupValue === value || state === "checked";
     const isDisabled = disabled || state === "disabled";
 
     return (
-      <div data-sonance-name="radio-group" className="flex items-start gap-3">
+      <div data-sonance-name="radio-group" className="flex items-start gap-2.5">
         <div className="relative flex items-center justify-center">
           <input
             type="radio"
@@ -105,11 +134,7 @@ export const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
             onChange={() => onChange(value)}
             disabled={isDisabled}
             className={cn(
-              "peer h-5 w-5 shrink-0 appearance-none rounded-full border border-border bg-input",
-              "checked:border-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",
+              radioItemVariants({ size }),
               getStateStyles(state),
               className
             )}
@@ -117,8 +142,9 @@ export const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
           />
           <div data-sonance-name="radio-group"
             className={cn(
-              "pointer-events-none absolute h-2.5 w-2.5 rounded-full bg-primary",
-              "scale-0 transition-transform duration-150",
+              "pointer-events-none absolute rounded-full bg-primary",
+              "scale-0 transition-all duration-150",
+              radioIndicatorSizes[size],
               isChecked && "scale-100"
             )}
           />
@@ -145,3 +171,5 @@ export const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
 
 RadioGroupItem.displayName = "RadioGroupItem";
 
+export { radioItemVariants };
+

package/dist/assets/components/select.tsx

@@ -2,19 +2,42 @@
 
 import { forwardRef, useState, useRef, useEffect } from "react";
 import { ChevronDown, Check } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 export type SelectState = "default" | "hover" | "focus" | "open" | "error" | "disabled";
 
+const selectTriggerVariants = cva(
+  "flex w-full items-center justify-between border border-input-border bg-input text-left text-foreground transition-all duration-200 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        xs: "h-7 px-2.5 text-xs rounded-md",
+        sm: "h-8 px-3 text-sm rounded-lg",
+        md: "h-9 px-3.5 text-sm rounded-lg",
+        lg: "h-10 px-4 text-sm rounded-xl",
+      },
+      selectVariant: {
+        default: "hover:border-border-hover focus:border-input-focus focus:ring-2 focus:ring-primary/10",
+        glass: "bg-input/80 backdrop-blur-sm hover:border-border-hover focus:border-input-focus focus:ring-2 focus:ring-primary/20",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+      selectVariant: "default",
+    },
+  }
+);
+
 // State styles for Storybook/Figma visualization
 const getStateStyles = (state?: SelectState) => {
   if (!state || state === "default") return "";
 
   const stateMap: Record<string, string> = {
     hover: "border-border-hover",
-    focus: "border-input-focus",
-    open: "border-input-focus",
-    error: "border-error",
+    focus: "border-input-focus ring-2 ring-primary/10",
+    open: "border-input-focus ring-2 ring-primary/10",
+    error: "border-error ring-2 ring-error/10",
     disabled: "opacity-50 cursor-not-allowed",
   };
 
@@ -27,7 +50,7 @@ interface SelectOption {
   disabled?: boolean;
 }
 
-interface SelectProps {
+interface SelectProps extends VariantProps<typeof selectTriggerVariants> {
   id?: string;
   value?: string;
   defaultValue?: string;
@@ -57,6 +80,8 @@ export function Select({
   className,
   state,
   style,
+  size,
+  selectVariant,
 }: SelectProps) {
   const isDisabled = disabled || state === "disabled";
   const hasError = error || state === "error";
@@ -101,7 +126,7 @@ export function Select({
   return (
     <div data-sonance-name="select" className={cn("w-full", className)} ref={containerRef}>
       {label && (
-        <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
+        <label className="mb-1.5 block text-[11px] font-medium uppercase tracking-wide text-foreground-muted">
           {label}
         </label>
       )}
@@ -113,12 +138,9 @@ export function Select({
           disabled={isDisabled}
           style={style}
           className={cn(
-            "flex w-full items-center justify-between border border-input-border bg-input px-4 py-3",
-            "text-left text-foreground transition-colors duration-200",
-            "focus:border-input-focus focus:outline-none",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            hasError && "border-error",
-            (isOpen || isOpenState) && "border-input-focus",
+            selectTriggerVariants({ size, selectVariant }),
+            hasError && "border-error ring-2 ring-error/10",
+            (isOpen || isOpenState) && "border-input-focus ring-2 ring-primary/10",
             getStateStyles(state)
           )}
         >
@@ -127,7 +149,7 @@ export function Select({
           </span>
           <ChevronDown
             className={cn(
-              "h-4 w-4 text-foreground-muted transition-transform duration-200",
+              "h-3.5 w-3.5 text-foreground-muted transition-transform duration-200",
               (isOpen || isOpenState) && "rotate-180"
             )}
           />
@@ -136,8 +158,9 @@ export function Select({
         {isOpen && (
           <div
             className={cn(
-              "absolute z-50 mt-1 w-full border border-border bg-card shadow-lg",
-              "max-h-60 overflow-auto"
+              "absolute z-50 mt-1.5 w-full rounded-xl border border-border bg-card/95 backdrop-blur-md shadow-xl",
+              "max-h-60 overflow-auto p-1",
+              "animate-in fade-in-0 zoom-in-95 duration-150"
             )}
           >
             {options.map((option) => (
@@ -147,7 +170,7 @@ export function Select({
                 onClick={() => !option.disabled && handleSelect(option.value)}
                 disabled={option.disabled}
                 className={cn(
-                  "flex w-full items-center justify-between px-4 py-2.5 text-left text-sm",
+                  "flex w-full items-center justify-between px-3 py-2 text-left text-sm rounded-lg",
                   "transition-colors duration-150",
                   option.value === value
                     ? "bg-primary text-primary-foreground"
@@ -156,13 +179,13 @@ export function Select({
                 )}
               >
                 {option.label}
-                {option.value === value && <Check className="h-4 w-4" />}
+                {option.value === value && <Check className="h-3.5 w-3.5" />}
               </button>
             ))}
           </div>
         )}
       </div>
-      {error && <p id="p-error" className="mt-1 text-sm text-error">{error}</p>}
+      {error && <p id="p-error" className="mt-1 text-xs text-error">{error}</p>}
     </div>
   );
 }
@@ -184,23 +207,32 @@ const getNativeSelectStateStyles = (state?: NativeSelectState) => {
 };
 
 // Native Select for forms
-interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> {
   label?: string;
   error?: string;
   options: SelectOption[];
   /** Visual state for Storybook/Figma documentation */
   state?: NativeSelectState;
+  /** Size variant */
+  size?: "xs" | "sm" | "md" | "lg";
 }
 
 export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
-  ({ className, label, error, options, state, disabled, ...props }, ref) => {
+  ({ className, label, error, options, state, disabled, size = "sm", ...props }, ref) => {
     const isDisabled = disabled || state === "disabled";
     const hasError = error || state === "error";
 
+    const sizeClasses = {
+      xs: "h-7 px-2.5 pr-8 text-xs rounded-md",
+      sm: "h-8 px-3 pr-9 text-sm rounded-lg",
+      md: "h-9 px-3.5 pr-9 text-sm rounded-lg",
+      lg: "h-10 px-4 pr-10 text-sm rounded-xl",
+    };
+
     return (
       <div data-sonance-name="select" className="w-full">
         {label && (
-          <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
+          <label className="mb-1.5 block text-[11px] font-medium uppercase tracking-wide text-foreground-muted">
             {label}
           </label>
         )}
@@ -209,11 +241,13 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
             ref={ref}
             disabled={isDisabled}
             className={cn(
-              "w-full appearance-none border border-input-border bg-input px-4 py-3 pr-10",
-              "text-foreground transition-colors duration-200",
-              "focus:border-input-focus focus:outline-none",
+              "w-full appearance-none border border-input-border bg-input",
+              sizeClasses[size],
+              "text-foreground transition-all duration-200",
+              "hover:border-border-hover",
+              "focus:border-input-focus focus:outline-none focus:ring-2 focus:ring-primary/10",
               "disabled:cursor-not-allowed disabled:opacity-50",
-              hasError && "border-error",
+              hasError && "border-error ring-2 ring-error/10",
               getNativeSelectStateStyles(state),
               className
             )} data-sonance-name="select"
@@ -225,9 +259,9 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
               </option>
             ))}
           </select>
-          <ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground-muted" />
+          <ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-foreground-muted" />
         </div>
-        {error && <p id="native-select-p-error" className="mt-1 text-sm text-error">{error}</p>}
+        {error && <p id="native-select-p-error" className="mt-1 text-xs text-error">{error}</p>}
       </div>
     );
   }
@@ -235,3 +269,5 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
 
 NativeSelect.displayName = "NativeSelect";
 
+export { selectTriggerVariants };
+

package/dist/assets/components/switch.tsx

@@ -1,11 +1,37 @@
 "use client";
 
 import { forwardRef, useId } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 export type SwitchState = "default" | "hover" | "focus" | "checked" | "disabled";
 
-interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+const switchTrackVariants = cva(
+  "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-border bg-input transition-all duration-200 has-[:checked]:border-primary has-[:checked]:bg-primary has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 has-[:focus]:ring-2 has-[:focus]:ring-primary/20 has-[:focus]:ring-offset-2 has-[:focus]:ring-offset-background",
+  {
+    variants: {
+      size: {
+        xs: "h-4 w-7",
+        sm: "h-5 w-9",
+        md: "h-6 w-11",
+        lg: "h-7 w-12",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+);
+
+const switchThumbSizes = {
+  xs: { size: "h-3 w-3", translate: "peer-checked:translate-x-3" },
+  sm: { size: "h-4 w-4", translate: "peer-checked:translate-x-4" },
+  md: { size: "h-5 w-5", translate: "peer-checked:translate-x-5" },
+  lg: { size: "h-6 w-6", translate: "peer-checked:translate-x-5" },
+};
+
+interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size">,
+  VariantProps<typeof switchTrackVariants> {
   label?: string;
   description?: string;
   /** Visual state for Storybook/Figma documentation */
@@ -18,7 +44,7 @@ const getTrackStateStyles = (state?: SwitchState) => {
 
   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",
   };
@@ -27,7 +53,7 @@ const getTrackStateStyles = (state?: SwitchState) => {
 };
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  ({ className, label, description, id, state, disabled, checked, defaultChecked, onChange, style, ...props }, ref) => {
+  ({ className, label, description, id, state, disabled, checked, defaultChecked, onChange, style, size = "sm", ...props }, ref) => {
     const uniqueId = useId();
     const inputId = id || `switch-${uniqueId}`;
     const isDisabled = disabled || state === "disabled";
@@ -36,17 +62,15 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
     const isControlled = checked !== undefined || onChange !== undefined;
     const isCheckedForState = state === "checked";
 
+    const thumbConfig = switchThumbSizes[size || "sm"];
+
     return (
-      <div data-sonance-name="switch" className="flex items-start gap-3">
+      <div data-sonance-name="switch" className="flex items-start gap-2.5">
         <label
           htmlFor={inputId}
           style={style}
           className={cn(
-            "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full",
-            "border border-border bg-input transition-colors duration-200",
-            "has-[:checked]:border-primary has-[:checked]:bg-primary",
-            "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
-            "has-[:focus]:ring-2 has-[:focus]:ring-border-focus has-[:focus]:ring-offset-2 has-[:focus]:ring-offset-background",
+            switchTrackVariants({ size }),
             getTrackStateStyles(state),
             className
           )}
@@ -66,10 +90,12 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           <span
             id="switch-span"
             className={cn(
-              "pointer-events-none absolute left-0.5 h-5 w-5 rounded-full bg-foreground-muted shadow-sm",
-              "transition-transform duration-200",
-              "peer-checked:translate-x-5 peer-checked:bg-primary-foreground",
-              state === "checked" && "translate-x-5 bg-primary-foreground"
+              "pointer-events-none absolute left-0.5 rounded-full bg-foreground-muted shadow-sm",
+              "transition-all duration-200 ease-out",
+              "peer-checked:bg-primary-foreground",
+              thumbConfig.size,
+              thumbConfig.translate,
+              state === "checked" && "translate-x-4 bg-primary-foreground"
             )}
           />
         </label>
@@ -95,3 +121,5 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
 
 Switch.displayName = "Switch";
 
+export { switchTrackVariants };
+