sonance-brand-mcp 1.3.1 → 1.3.2

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

@@ -1,7 +1,29 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { Tooltip } from './tooltip';
+import { Tooltip as TooltipRoot, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
 import { Button } from './button';
 
+const Tooltip = ({
+  children,
+  content,
+  side,
+  delay,
+  ...props
+}: {
+  children: React.ReactNode;
+  content: string;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  delay?: number;
+} & React.ComponentProps<typeof TooltipRoot>) => {
+  return (
+    <TooltipProvider delayDuration={delay}>
+      <TooltipRoot data-sonance-name="tooltip.stories" {...props}>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side={side}>{content}</TooltipContent>
+      </TooltipRoot>
+    </TooltipProvider>
+  );
+};
+
 const meta: Meta<typeof Tooltip> = {
   title: 'Components/Overlays/Tooltip',
   component: Tooltip,
@@ -44,7 +66,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => (
     <Tooltip content="This is a tooltip">
-      <Button variant="secondary">Hover me</Button>
+      <Button id="default-button-secondary" variant="secondary">Hover me</Button>
     </Tooltip>
   ),
 };
@@ -53,7 +75,7 @@ export const Default: Story = {
 export const Top: Story = {
   render: () => (
     <Tooltip content="Tooltip on top" side="top">
-      <Button variant="secondary">Top</Button>
+      <Button id="top-button-secondary" variant="secondary">Top</Button>
     </Tooltip>
   ),
 };
@@ -62,7 +84,7 @@ export const Top: Story = {
 export const Bottom: Story = {
   render: () => (
     <Tooltip content="Tooltip on bottom" side="bottom">
-      <Button variant="secondary">Bottom</Button>
+      <Button id="bottom-button-secondary" variant="secondary">Bottom</Button>
     </Tooltip>
   ),
 };
@@ -71,7 +93,7 @@ export const Bottom: Story = {
 export const Left: Story = {
   render: () => (
     <Tooltip content="Tooltip on left" side="left">
-      <Button variant="secondary">Left</Button>
+      <Button id="left-button-secondary" variant="secondary">Left</Button>
     </Tooltip>
   ),
 };
@@ -80,7 +102,7 @@ export const Left: Story = {
 export const Right: Story = {
   render: () => (
     <Tooltip content="Tooltip on right" side="right">
-      <Button variant="secondary">Right</Button>
+      <Button id="right-button-secondary" variant="secondary">Right</Button>
     </Tooltip>
   ),
 };
@@ -90,16 +112,16 @@ export const AllPositions: Story = {
   render: () => (
     <div className="flex items-center gap-8 p-8">
       <Tooltip content="Top tooltip" side="top">
-        <Button variant="secondary">Top</Button>
+        <Button id="all-positions-button-secondary" variant="secondary">Top</Button>
       </Tooltip>
       <Tooltip content="Bottom tooltip" side="bottom">
-        <Button variant="secondary">Bottom</Button>
+        <Button id="all-positions-button-secondary" variant="secondary">Bottom</Button>
       </Tooltip>
       <Tooltip content="Left tooltip" side="left">
-        <Button variant="secondary">Left</Button>
+        <Button id="all-positions-button-secondary" variant="secondary">Left</Button>
       </Tooltip>
       <Tooltip content="Right tooltip" side="right">
-        <Button variant="secondary">Right</Button>
+        <Button id="all-positions-button-secondary" variant="secondary">Right</Button>
       </Tooltip>
     </div>
   ),
@@ -110,13 +132,13 @@ export const WithDelay: Story = {
   render: () => (
     <div className="flex gap-4">
       <Tooltip content="No delay (0ms)" delay={0}>
-        <Button variant="secondary">Instant</Button>
+        <Button id="with-delay-button-secondary" variant="secondary">Instant</Button>
       </Tooltip>
       <Tooltip content="Default delay (200ms)" delay={200}>
-        <Button variant="secondary">Default</Button>
+        <Button id="with-delay-button-secondary" variant="secondary">Default</Button>
       </Tooltip>
       <Tooltip content="Slow delay (500ms)" delay={500}>
-        <Button variant="secondary">Slow</Button>
+        <Button id="with-delay-button-secondary" variant="secondary">Slow</Button>
       </Tooltip>
     </div>
   ),
@@ -155,7 +177,7 @@ export const OnIconButton: Story = {
 export const LongContent: Story = {
   render: () => (
     <Tooltip content="This is a tooltip with longer content that explains something in more detail">
-      <Button variant="secondary">Hover for details</Button>
+      <Button id="long-content-button-secondary" variant="secondary">Hover for details</Button>
     </Tooltip>
   ),
 };
@@ -163,10 +185,10 @@ export const LongContent: Story = {
 // On Text
 export const OnText: Story = {
   render: () => (
-    <p className="text-foreground-secondary">
+    <p id="on-text-p" className="text-foreground-secondary">
       Hover over the{' '}
       <Tooltip content="This is additional information">
-        <span className="text-foreground border-b border-dashed border-foreground-muted cursor-help">
+        <span id="on-text-span-underlined-text" className="text-foreground border-b border-dashed border-foreground-muted cursor-help">
           underlined text
         </span>
       </Tooltip>{' '}
@@ -181,43 +203,43 @@ 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 flex justify-center">
           <Tooltip content="Mobile tooltip">
-            <Button variant="secondary" size="sm">Hover me</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary" size="sm">Hover me</Button>
           </Tooltip>
         </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 flex justify-center gap-4">
           <Tooltip content="Top" side="top">
-            <Button variant="secondary">Top</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary">Top</Button>
           </Tooltip>
           <Tooltip content="Bottom" side="bottom">
-            <Button variant="secondary">Bottom</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary">Bottom</Button>
           </Tooltip>
           <Tooltip content="Left" side="left">
-            <Button variant="secondary">Left</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary">Left</Button>
           </Tooltip>
           <Tooltip content="Right" side="right">
-            <Button variant="secondary">Right</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary">Right</Button>
           </Tooltip>
         </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 flex justify-between items-center">
           <Tooltip content="Edit item">
-            <Button variant="ghost" size="sm">Edit</Button>
+            <Button id="responsive-matrix-button-ghost" variant="ghost" size="sm">Edit</Button>
           </Tooltip>
           <Tooltip content="This is a longer tooltip with more detailed explanation">
-            <Button variant="secondary">Hover for details</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary">Hover for details</Button>
           </Tooltip>
           <Tooltip content="Delete permanently" side="left">
-            <Button variant="ghost" size="sm">Delete</Button>
+            <Button id="responsive-matrix-button-ghost" variant="ghost" size="sm">Delete</Button>
           </Tooltip>
         </div>
       </div>

package/dist/assets/components/tooltip.tsx

@@ -15,7 +15,7 @@ const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
+  <TooltipPrimitive.Content data-sonance-name="tooltip"
     ref={ref}
     sideOffset={sideOffset}
     className={cn(

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"