sonance-brand-mcp 1.2.5 → 1.3.2

package/dist/assets/components/tooltip.tsx

@@ -1,97 +1,30 @@
-"use client";
+"use client"
 
-import { useState, useRef, useEffect } from "react";
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
-type TooltipPosition = "top" | "bottom" | "left" | "right";
+import { cn } from "@/lib/utils"
 
-interface TooltipProps {
-  content: React.ReactNode;
-  children: React.ReactNode;
-  /** @deprecated Use `side` instead */
-  position?: TooltipPosition;
-  side?: TooltipPosition;
-  delay?: number;
-  className?: string;
-}
+const TooltipProvider = TooltipPrimitive.Provider
 
-export function Tooltip({
-  content,
-  children,
-  position,
-  side = "top",
-  delay = 200,
-  className,
-}: TooltipProps) {
-  // Support both `position` (legacy) and `side` (preferred)
-  const resolvedPosition = position ?? side;
-  const [isVisible, setIsVisible] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+const Tooltip = TooltipPrimitive.Root
 
-  const showTooltip = () => {
-    timeoutRef.current = setTimeout(() => {
-      setIsVisible(true);
-    }, delay);
-  };
+const TooltipTrigger = TooltipPrimitive.Trigger
 
-  const hideTooltip = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    setIsVisible(false);
-  };
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  const positionClasses: Record<TooltipPosition, string> = {
-    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-    left: "right-full top-1/2 -translate-y-1/2 mr-2",
-    right: "left-full top-1/2 -translate-y-1/2 ml-2",
-  };
-
-  const arrowClasses: Record<TooltipPosition, string> = {
-    top: "top-full left-1/2 -translate-x-1/2 border-t-sonance-charcoal border-x-transparent border-b-transparent",
-    bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-sonance-charcoal border-x-transparent border-t-transparent",
-    left: "left-full top-1/2 -translate-y-1/2 border-l-sonance-charcoal border-y-transparent border-r-transparent",
-    right: "right-full top-1/2 -translate-y-1/2 border-r-sonance-charcoal border-y-transparent border-l-transparent",
-  };
-
-  return (
-    <div
-      className="relative inline-block"
-      onMouseEnter={showTooltip}
-      onMouseLeave={hideTooltip}
-      onFocus={showTooltip}
-      onBlur={hideTooltip}
-    >
-      {children}
-      {isVisible && (
-        <div
-          role="tooltip"
-          className={cn(
-            "absolute z-50 px-3 py-1.5 text-xs font-medium text-white bg-sonance-charcoal whitespace-nowrap",
-            "animate-in fade-in zoom-in-95 duration-150",
-            positionClasses[resolvedPosition],
-            className
-          )}
-        >
-          {content}
-          <span
-            className={cn(
-              "absolute border-4",
-              arrowClasses[resolvedPosition]
-            )}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
+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"
+    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",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/dist/assets/components/user.stories.tsx

@@ -43,15 +43,15 @@ export const Sizes: Story = {
   render: () => (
     <div className="space-y-4">
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Small</p>
+        <p id="sizes-p-small" className="text-xs text-foreground-muted mb-2">Small</p>
         <User name="John Doe" description="Designer" size="sm" />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Medium (default)</p>
+        <p id="sizes-p-medium-default" className="text-xs text-foreground-muted mb-2">Medium (default)</p>
         <User name="John Doe" description="Designer" size="md" />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Large</p>
+        <p id="sizes-p-large" className="text-xs text-foreground-muted mb-2">Large</p>
         <User name="John Doe" description="Designer" size="lg" />
       </div>
     </div>
@@ -79,7 +79,7 @@ export const Card: Story = {
         name="Sarah Wilson"
         description="sarah@sonance.com"
         avatarSrc="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop"
-        actions={<Button size="sm" variant="secondary">Follow</Button>}
+        actions={<Button id="card-button-secondary" size="sm" variant="secondary">Follow</Button>}
       />
     </div>
   ),
@@ -91,7 +91,7 @@ export const CardVariations: Story = {
       <UserCard
         name="David Lee"
         description="Architect"
-        actions={<Button size="sm" variant="secondary">Message</Button>}
+        actions={<Button id="card-variations-button-secondary" size="sm" variant="secondary">Message</Button>}
       />
       <UserCard
         name="Emily Chen"
@@ -99,8 +99,8 @@ export const CardVariations: Story = {
         avatarSrc="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop"
         actions={
           <div className="flex gap-2">
-            <Button size="sm" variant="ghost">Ignore</Button>
-            <Button size="sm">Accept</Button>
+            <Button id="card-variations-button-ghost" size="sm" variant="ghost">Ignore</Button>
+            <Button id="card-variations-button" size="sm">Accept</Button>
           </div>
         }
       />
@@ -138,17 +138,17 @@ export const ListWithActions: Story = {
         name="Alice Brown"
         description="Project Manager"
         avatarSrc="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop"
-        actions={<Button size="sm" variant="ghost">Remove</Button>}
+        actions={<Button id="list-with-actions-button-ghost" size="sm" variant="ghost">Remove</Button>}
       />
       <UserListItem
         name="Bob Johnson"
         description="Developer"
-        actions={<Button size="sm" variant="ghost">Remove</Button>}
+        actions={<Button id="list-with-actions-button-ghost" size="sm" variant="ghost">Remove</Button>}
       />
       <UserListItem
         name="Carol White"
         description="Designer"
-        actions={<Button size="sm" variant="ghost">Remove</Button>}
+        actions={<Button id="list-with-actions-button-ghost" size="sm" variant="ghost">Remove</Button>}
       />
     </div>
   ),
@@ -164,8 +164,8 @@ export const TeamList: Story = {
     ];
 
     return (
-      <div className="w-80">
-        <h3 className="text-sm font-medium text-foreground mb-4">Leadership Team</h3>
+      <div data-sonance-name="user.stories" className="w-80">
+        <h3 id="team-list-h3-leadership-team" className="text-sm font-medium text-foreground mb-4">Leadership Team</h3>
         <div className="space-y-3">
           {team.map((member) => (
             <User
@@ -185,22 +185,22 @@ export const AllVariants: Story = {
   render: () => (
     <div className="space-y-8">
       <div>
-        <h3 className="text-sm font-medium text-foreground mb-4">User Component</h3>
+        <h3 id="all-variants-h3-user-component" className="text-sm font-medium text-foreground mb-4">User Component</h3>
         <User name="Alex Johnson" description="Product Designer" />
       </div>
 
       <div>
-        <h3 className="text-sm font-medium text-foreground mb-4">User Card</h3>
+        <h3 id="all-variants-h3-user-card" className="text-sm font-medium text-foreground mb-4">User Card</h3>
         <UserCard
           name="Sarah Wilson"
           description="sarah@sonance.com"
-          actions={<Button size="sm" variant="secondary">Follow</Button>}
+          actions={<Button id="all-variants-button-secondary" size="sm" variant="secondary">Follow</Button>}
           className="w-80"
         />
       </div>
 
       <div>
-        <h3 className="text-sm font-medium text-foreground mb-4">User List Items</h3>
+        <h3 id="all-variants-h3-user-list-items" className="text-sm font-medium text-foreground mb-4">User List Items</h3>
         <div className="w-80 border border-border">
           <UserListItem name="Chris Taylor" description="chris@example.com" />
           <UserListItem name="Sam Anderson" description="sam@example.com" selected />
@@ -217,32 +217,32 @@ export const ResponsiveMatrix: Story = {
     <div className="space-y-8">
       {/* Mobile */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <h4 id="responsive-matrix-h4-mobile-375px" className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
         <div className="w-[375px] border border-dashed border-border p-4">
           <User name="John Doe" description="Product Designer" size="md" />
         </div>
       </div>
       {/* Tablet */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <h4 id="responsive-matrix-h4-tablet-768px" className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
         <div className="w-[768px] border border-dashed border-border p-4">
           <div className="grid grid-cols-2 gap-4">
             <UserCard
               name="Sarah Wilson"
               description="sarah@sonance.com"
-              actions={<Button size="sm" variant="secondary">Follow</Button>}
+              actions={<Button id="responsive-matrix-button-secondary" size="sm" variant="secondary">Follow</Button>}
             />
             <UserCard
               name="James Miller"
               description="james@sonance.com"
-              actions={<Button size="sm" variant="secondary">Follow</Button>}
+              actions={<Button id="responsive-matrix-button-secondary" size="sm" variant="secondary">Follow</Button>}
             />
           </div>
         </div>
       </div>
       {/* Desktop */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <h4 id="responsive-matrix-h4-desktop-1280px" className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
         <div className="w-[1280px] border border-dashed border-border p-4">
           <div className="grid grid-cols-3 gap-4">
             <div className="border border-border">
@@ -256,8 +256,8 @@ export const ResponsiveMatrix: Story = {
               avatarSrc="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop"
               actions={
                 <div className="flex gap-2">
-                  <Button size="sm" variant="ghost">Ignore</Button>
-                  <Button size="sm">Accept</Button>
+                  <Button id="responsive-matrix-button-ghost" size="sm" variant="ghost">Ignore</Button>
+                  <Button id="responsive-matrix-button" size="sm">Accept</Button>
                 </div>
               }
             />

package/dist/assets/components/user.tsx

@@ -40,9 +40,9 @@ export const User = forwardRef<HTMLDivElement, UserProps>(
     };
 
     return (
-      <div
+      <div data-sonance-name="user"
         ref={ref}
-        className={cn(userVariants({ size }), className)}
+        className={cn(userVariants({ size }), className)} 
         {...props}
       >
         <Avatar
@@ -52,6 +52,7 @@ export const User = forwardRef<HTMLDivElement, UserProps>(
         />
         <div className="flex flex-col min-w-0">
           <span
+            id="user-span-name"
             className={cn(
               "font-medium text-foreground truncate",
               nameSizeClasses[size || "md"]
@@ -61,6 +62,7 @@ export const User = forwardRef<HTMLDivElement, UserProps>(
           </span>
           {description && (
             <span
+              id="user-span-description"
               className={cn(
                 "text-foreground-muted truncate",
                 descSizeClasses[size || "md"]
@@ -96,7 +98,7 @@ export function UserCard({
   className,
 }: UserCardProps) {
   return (
-    <div
+    <div data-sonance-name="user"
       className={cn(
         "flex items-center justify-between gap-4 p-4",
         "border border-border bg-card",
@@ -151,9 +153,10 @@ export function UserListItem({
           size="sm"
         />
         <div className="flex flex-col min-w-0">
-          <span className="text-sm font-medium truncate">{name}</span>
+          <span id="user-list-item-span-name" className="text-sm font-medium truncate">{name}</span>
           {description && (
             <span
+              id="user-list-item-span-description"
               className={cn(
                 "text-xs truncate",
                 selected ? "text-primary-foreground/70" : "text-foreground-muted"