sonance-brand-mcp 1.3.108 → 1.3.110

package/dist/assets/components/tabs.tsx

@@ -1,18 +1,36 @@
 "use client";
 
 import { createContext, useContext, useState } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 export type TabsTriggerState = "default" | "hover" | "focus" | "active" | "disabled";
 
+const tabsTriggerVariants = cva(
+  "relative font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/20",
+  {
+    variants: {
+      size: {
+        xs: "px-2.5 py-1 text-[10px] rounded-md",
+        sm: "px-3 py-1.5 text-xs rounded-lg",
+        md: "px-3.5 py-2 text-sm rounded-lg",
+        lg: "px-4 py-2.5 text-sm rounded-xl",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+);
+
 // State styles for Storybook/Figma visualization
 const getStateStyles = (state?: TabsTriggerState, isActive?: boolean) => {
   if (!state || state === "default") return "";
 
   const stateMap: Record<string, string> = {
     hover: "text-foreground",
-    focus: "ring-2 ring-border-focus",
-    active: "text-foreground",
+    focus: "ring-2 ring-primary/20",
+    active: "text-foreground bg-background shadow-sm",
     disabled: "opacity-50 cursor-not-allowed",
   };
 
@@ -22,6 +40,7 @@ const getStateStyles = (state?: TabsTriggerState, isActive?: boolean) => {
 interface TabsContextValue {
   value: string;
   onChange: (value: string) => void;
+  size: "xs" | "sm" | "md" | "lg";
 }
 
 const TabsContext = createContext<TabsContextValue | null>(null);
@@ -32,6 +51,8 @@ interface TabsProps {
   onValueChange?: (value: string) => void;
   className?: string;
   children: React.ReactNode;
+  /** Size variant for tabs */
+  size?: "xs" | "sm" | "md" | "lg";
 }
 
 export function Tabs({
@@ -40,6 +61,7 @@ export function Tabs({
   onValueChange,
   className,
   children,
+  size = "sm",
 }: TabsProps) {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const value = controlledValue ?? internalValue;
@@ -50,7 +72,7 @@ export function Tabs({
   };
 
   return (
-    <TabsContext.Provider value={{ value, onChange }}>
+    <TabsContext.Provider value={{ value, onChange, size }}>
       <div className={cn("w-full", className)}>{children}</div>
     </TabsContext.Provider>
   );
@@ -66,7 +88,7 @@ export function TabsList({ className, children }: TabsListProps) {
     <div data-sonance-name="tabs"
       role="tablist"
       className={cn(
-        "inline-flex items-center gap-1 border-b border-border",
+        "inline-flex items-center gap-1 rounded-lg bg-muted/50 p-1",
         className
       )}
     >
@@ -105,20 +127,16 @@ export function TabsTrigger({
       disabled={isDisabled}
       onClick={() => !isDisabled && context.onChange(value)}
       className={cn(
-        "relative px-4 py-2.5 text-sm font-medium transition-colors",
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+        tabsTriggerVariants({ size: context.size }),
         isActive
-          ? "text-foreground"
-          : "text-foreground-muted hover:text-foreground",
+          ? "text-foreground bg-background shadow-sm"
+          : "text-foreground-muted hover:text-foreground hover:bg-background/50",
         isDisabled && "cursor-not-allowed opacity-50",
         getStateStyles(state, isActive),
         className
       )}
     >
       {children}
-      {isActive && (
-        <span id="tabs-trigger-span" className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
-      )}
     </button>
   );
 }
@@ -138,7 +156,7 @@ export function TabsContent({ value, className, children }: TabsContentProps) {
   return (
     <div
       role="tabpanel"
-      className={cn("mt-4 focus:outline-none", className)}
+      className={cn("mt-3 focus:outline-none animate-in fade-in-0 duration-200", className)}
       tabIndex={0}
     >
       {children}
@@ -146,3 +164,5 @@ export function TabsContent({ value, className, children }: TabsContentProps) {
   );
 }
 
+export { tabsTriggerVariants };
+

package/dist/assets/components/tooltip.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
@@ -11,15 +12,43 @@ const Tooltip = TooltipPrimitive.Root
 
 const TooltipTrigger = TooltipPrimitive.Trigger
 
+const tooltipContentVariants = cva(
+  "z-50 overflow-hidden border shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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: "px-2 py-1 text-[10px] rounded-md",
+        sm: "px-2.5 py-1 text-xs rounded-lg",
+        md: "px-3 py-1.5 text-sm rounded-lg",
+        lg: "px-3.5 py-2 text-sm rounded-xl",
+      },
+      tooltipVariant: {
+        default: "bg-popover text-popover-foreground border-border",
+        glass: "bg-popover/95 text-popover-foreground border-border/50 backdrop-blur-md",
+        dark: "bg-foreground text-background border-foreground",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+      tooltipVariant: "glass",
+    },
+  }
+)
+
+interface TooltipContentProps
+  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
+    VariantProps<typeof tooltipContentVariants> {}
+
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content data-sonance-name="tooltip"
+  TooltipContentProps
+>(({ className, sideOffset = 4, size, tooltipVariant, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    data-sonance-name="tooltip"
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+      tooltipContentVariants({ size, tooltipVariant }),
       className
     )}
     {...props}
@@ -27,4 +56,4 @@ const TooltipContent = React.forwardRef<
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, tooltipContentVariants }