sonance-brand-mcp 1.2.5 → 1.3.2

package/dist/assets/components/divider.tsx

@@ -1,50 +1,49 @@
+import { forwardRef } from "react";
 import { cn } from "@/lib/utils";
 
-interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
   orientation?: "horizontal" | "vertical";
   label?: string;
 }
 
-export function Divider({
-  orientation = "horizontal",
-  label,
-  className,
-  ...props
-}: DividerProps) {
-  if (orientation === "vertical") {
-    return (
-      <div
-        role="separator"
-        aria-orientation="vertical"
-        className={cn("h-full w-px bg-border", className)}
-        {...props}
-      />
-    );
-  }
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+  ({ orientation = "horizontal", label, className, ...props }, ref) => {
+    if (orientation === "vertical") {
+      return (
+        <div data-sonance-name="divider"
+          {...props}
+        />
+      );
+    }
+
+    if (label) {
+      return (
+        <div
+          ref={ref}
+          role="separator"
+          className={cn("flex items-center gap-4", className)} data-sonance-name="divider"
+          {...props}
+        >
+          <div className="h-px flex-1 bg-border" />
+          <span id="divider-span-label" className="text-xs font-medium uppercase tracking-widest text-foreground-muted">
+            {label}
+          </span>
+          <div className="h-px flex-1 bg-border" />
+        </div>
+      );
+    }
 
-  if (label) {
     return (
       <div
+        ref={ref}
         role="separator"
-        className={cn("flex items-center gap-4", className)}
+        aria-orientation="horizontal"
+        className={cn("h-px w-full bg-border", className)} data-sonance-name="divider"
         {...props}
-      >
-        <div className="h-px flex-1 bg-border" />
-        <span className="text-xs font-medium uppercase tracking-widest text-foreground-muted">
-          {label}
-        </span>
-        <div className="h-px flex-1 bg-border" />
-      </div>
+      />
     );
   }
+);
 
-  return (
-    <div
-      role="separator"
-      aria-orientation="horizontal"
-      className={cn("h-px w-full bg-border", className)}
-      {...props}
-    />
-  );
-}
+Divider.displayName = "Divider";
 

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

@@ -26,19 +26,19 @@ export const Default: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Open Drawer</Button>
+        <Button id="default-button" onClick={() => setOpen(true)}>Open Drawer</Button>
         <Drawer open={open} onClose={() => setOpen(false)}>
           <DrawerHeader onClose={() => setOpen(false)}>
             <DrawerTitle>Drawer Title</DrawerTitle>
           </DrawerHeader>
           <DrawerBody>
-            <p className="text-foreground-secondary">
+            <p id="default-p-this-is-the-drawer-c" className="text-foreground-secondary">
               This is the drawer content area. You can add any content here.
             </p>
           </DrawerBody>
           <DrawerFooter>
-            <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
-            <Button onClick={() => setOpen(false)}>Save</Button>
+            <Button id="default-button-secondary" variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
+            <Button id="default-button" onClick={() => setOpen(false)}>Save</Button>
           </DrawerFooter>
         </Drawer>
       </>
@@ -51,7 +51,7 @@ export const LeftPosition: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Open Left Drawer</Button>
+        <Button id="left-position-button" onClick={() => setOpen(true)}>Open Left Drawer</Button>
         <Drawer open={open} onClose={() => setOpen(false)} position="left">
           <DrawerHeader onClose={() => setOpen(false)}>
             <DrawerTitle>Navigation</DrawerTitle>
@@ -60,6 +60,7 @@ export const LeftPosition: Story = {
             <nav className="space-y-2">
               {['Dashboard', 'Products', 'Orders', 'Customers', 'Settings'].map((item) => (
                 <a
+                  id="nav-a"
                   key={item}
                   href="#"
                   className="block px-4 py-2 text-foreground hover:bg-secondary-hover rounded transition-colors"
@@ -80,13 +81,13 @@ export const TopPosition: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Open Top Drawer</Button>
+        <Button id="top-position-button" onClick={() => setOpen(true)}>Open Top Drawer</Button>
         <Drawer open={open} onClose={() => setOpen(false)} position="top">
           <DrawerHeader onClose={() => setOpen(false)}>
             <DrawerTitle>Notifications</DrawerTitle>
           </DrawerHeader>
           <DrawerBody>
-            <p className="text-foreground-secondary">
+            <p id="top-position-p-top-drawer-content-a" className="text-foreground-secondary">
               Top drawer content appears from the top of the screen.
             </p>
           </DrawerBody>
@@ -101,7 +102,7 @@ export const BottomPosition: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Open Bottom Drawer</Button>
+        <Button id="bottom-position-button" onClick={() => setOpen(true)}>Open Bottom Drawer</Button>
         <Drawer open={open} onClose={() => setOpen(false)} position="bottom">
           <DrawerHeader onClose={() => setOpen(false)}>
             <DrawerTitle>Quick Actions</DrawerTitle>
@@ -114,7 +115,7 @@ export const BottomPosition: Story = {
                   className="flex flex-col items-center gap-2 p-4 hover:bg-secondary-hover rounded transition-colors"
                 >
                   <div className="w-10 h-10 rounded-full bg-primary" />
-                  <span className="text-sm text-foreground">{action}</span>
+                  <span id="bottom-position-span-action" className="text-sm text-foreground">{action}</span>
                 </button>
               ))}
             </div>
@@ -130,21 +131,21 @@ export const FormDrawer: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Edit Profile</Button>
+        <Button id="form-drawer-button" onClick={() => setOpen(true)}>Edit Profile</Button>
         <Drawer open={open} onClose={() => setOpen(false)}>
           <DrawerHeader onClose={() => setOpen(false)}>
             <DrawerTitle>Edit Profile</DrawerTitle>
           </DrawerHeader>
           <DrawerBody>
             <form className="space-y-4">
-              <Input label="Full Name" placeholder="John Doe" />
-              <Input label="Email" type="email" placeholder="john@example.com" />
-              <Input label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
+              <Input id="form-drawer-input-john-doe" label="Full Name" placeholder="John Doe" />
+              <Input id="form-drawer-input-johnexamplecom" label="Email" type="email" placeholder="john@example.com" />
+              <Input id="form-drawer-input-1-555-0000000" label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
             </form>
           </DrawerBody>
           <DrawerFooter>
-            <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
-            <Button onClick={() => setOpen(false)}>Save Changes</Button>
+            <Button id="form-drawer-button-secondary" variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
+            <Button id="form-drawer-button" onClick={() => setOpen(false)}>Save Changes</Button>
           </DrawerFooter>
         </Drawer>
       </>
@@ -158,16 +159,16 @@ 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] h-[400px] border border-dashed border-border relative overflow-hidden">
           <div className="absolute right-0 top-0 bottom-0 w-[280px] bg-background border-l border-border shadow-lg">
             <div className="p-4 border-b border-border">
-              <h3 className="font-semibold">Drawer Title</h3>
+              <h3 id="responsive-matrix-h3-drawer-title" className="font-semibold">Drawer Title</h3>
             </div>
             <div className="p-4">
-              <p className="text-sm text-foreground-secondary">Full-height drawer on mobile.</p>
+              <p id="responsive-matrix-p-fullheight-drawer-on" className="text-sm text-foreground-secondary">Full-height drawer on mobile.</p>
               <div className="mt-4 space-y-4">
-                <Input label="Name" placeholder="Enter name" />
+                <Input id="responsive-matrix-input-enter-name" label="Name" placeholder="Enter name" />
               </div>
             </div>
           </div>
@@ -175,38 +176,38 @@ export const ResponsiveMatrix: Story = {
       </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] h-[300px] border border-dashed border-border relative overflow-hidden">
           <div className="absolute right-0 top-0 bottom-0 w-[400px] bg-background border-l border-border shadow-lg">
             <div className="p-4 border-b border-border">
-              <h3 className="font-semibold">Edit Profile</h3>
+              <h3 id="responsive-matrix-h3-edit-profile" className="font-semibold">Edit Profile</h3>
             </div>
             <div className="p-4 space-y-4">
-              <Input label="Name" placeholder="John Doe" />
-              <Input label="Email" placeholder="john@example.com" />
+              <Input id="responsive-matrix-input-john-doe" label="Name" placeholder="John Doe" />
+              <Input id="responsive-matrix-input-johnexamplecom" label="Email" placeholder="john@example.com" />
             </div>
             <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-border flex justify-end gap-2">
-              <Button variant="secondary" size="sm">Cancel</Button>
-              <Button size="sm">Save</Button>
+              <Button id="responsive-matrix-button-secondary" variant="secondary" size="sm">Cancel</Button>
+              <Button id="responsive-matrix-button" size="sm">Save</Button>
             </div>
           </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] h-[300px] border border-dashed border-border relative overflow-hidden bg-black/20">
           <div className="absolute right-0 top-0 bottom-0 w-[480px] bg-background border-l border-border shadow-lg">
             <div className="p-6 border-b border-border">
-              <h3 className="text-lg font-semibold">Settings Panel</h3>
+              <h3 id="responsive-matrix-h3-settings-panel" className="text-lg font-semibold">Settings Panel</h3>
             </div>
             <div className="p-6 space-y-4">
-              <Input label="Display Name" placeholder="Enter display name" />
-              <Input label="Email" type="email" placeholder="email@example.com" />
+              <Input id="responsive-matrix-input-enter-display-n" label="Display Name" placeholder="Enter display name" />
+              <Input id="responsive-matrix-input-emailexamplecom" label="Email" type="email" placeholder="email@example.com" />
             </div>
             <div className="absolute bottom-0 left-0 right-0 p-6 border-t border-border flex justify-end gap-2">
-              <Button variant="secondary">Cancel</Button>
-              <Button>Save Changes</Button>
+              <Button id="responsive-matrix-button-secondary" variant="secondary">Cancel</Button>
+              <Button id="responsive-matrix-button">Save Changes</Button>
             </div>
           </div>
         </div>

package/dist/assets/components/drawer.tsx

@@ -54,14 +54,14 @@ export function Drawer({
   };
 
   return (
-    <div className="fixed inset-0 z-50">
+    <div data-sonance-name="drawer" className="fixed inset-0 z-50">
       {/* Backdrop */}
       <div
         className="absolute inset-0 bg-overlay animate-in fade-in duration-200"
         onClick={onClose}
       />
       {/* Drawer panel */}
-      <div
+      <div data-sonance-name="drawer"
         className={cn(
           "absolute bg-background border-border shadow-xl",
           position === "left" && "border-r",
@@ -87,7 +87,7 @@ export const DrawerHeader = forwardRef<
     className={cn(
       "flex items-center justify-between px-6 py-4 border-b border-border",
       className
-    )}
+    )} data-sonance-name="drawer"
     {...props}
   >
     <div>{children}</div>
@@ -97,7 +97,7 @@ export const DrawerHeader = forwardRef<
         className="p-1 text-foreground-muted hover:text-foreground transition-colors"
       >
         <X className="h-5 w-5" />
-        <span className="sr-only">Close</span>
+        <span id="drawer-header-span-close" className="sr-only">Close</span>
       </button>
     )}
   </div>
@@ -110,6 +110,7 @@ export const DrawerTitle = forwardRef<
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
   <h2
+    id="drawer-title-h2"
     ref={ref}
     className={cn("text-lg font-medium text-foreground", className)}
     {...props}
@@ -124,7 +125,7 @@ export const DrawerBody = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex-1 overflow-auto p-6", className)}
+    className={cn("flex-1 overflow-auto p-6", className)} data-sonance-name="drawer"
     {...props}
   />
 ));
@@ -140,7 +141,7 @@ export const DrawerFooter = forwardRef<
     className={cn(
       "flex items-center justify-end gap-3 px-6 py-4 border-t border-border",
       className
-    )}
+    )} data-sonance-name="drawer"
     {...props}
   />
 ));

package/dist/assets/components/dropdown-menu.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "focus:bg-secondary-hover focus:text-foreground",
+      "data-[state=open]:bg-secondary-hover data-[state=open]:text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-sm border border-border bg-card p-1 text-foreground shadow-lg",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-sm border border-border bg-card p-1 text-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
+      "focus:bg-secondary-hover focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
+      "focus:bg-secondary-hover focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span id="dropdown-menu-checkbox-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
+      "focus:bg-secondary-hover focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span id="dropdown-menu-radio-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-xs font-medium uppercase tracking-widest text-foreground-muted",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span id="dropdown-menu-shortcut-span" data-sonance-name="dropdown-menu"
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
+

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

@@ -178,7 +178,7 @@ export const CustomTrigger: Story = {
   render: () => (
     <Dropdown>
       <DropdownTrigger asChild>
-        <Button variant="secondary">Custom Button Trigger</Button>
+        <Button id="custom-trigger-button-secondary" variant="secondary">Custom Button Trigger</Button>
       </DropdownTrigger>
       <DropdownMenu>
         <DropdownItem>Action 1</DropdownItem>
@@ -197,13 +197,13 @@ export const UserMenu: Story = {
           <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-medium">
             JD
           </div>
-          <span className="text-sm font-medium text-foreground">John Doe</span>
+          <span id="user-menu-span-john-doe" className="text-sm font-medium text-foreground">John Doe</span>
         </button>
       </DropdownTrigger>
       <DropdownMenu align="end">
         <div className="px-3 py-2 border-b border-border">
-          <p className="text-sm font-medium text-foreground">John Doe</p>
-          <p className="text-xs text-foreground-muted">john@sonance.com</p>
+          <p id="user-menu-p-john-doe" className="text-sm font-medium text-foreground">John Doe</p>
+          <p id="user-menu-p-johnsonancecom" className="text-xs text-foreground-muted">john@sonance.com</p>
         </div>
         <DropdownItem icon={<User className="h-4 w-4" />}>Profile</DropdownItem>
         <DropdownItem icon={<Settings className="h-4 w-4" />}>Settings</DropdownItem>
@@ -222,13 +222,13 @@ export const StateMatrix: Story = {
     const triggerStates: DropdownTriggerState[] = ['default', 'hover', 'focus', 'open', 'disabled'];
     const itemStates: DropdownItemState[] = ['default', 'hover', 'focus', 'selected', 'disabled'];
     return (
-      <div className="space-y-8">
+      <div data-sonance-name="dropdown.stories" className="space-y-8">
         <div>
-          <h3 className="text-sm font-medium text-foreground-muted mb-4">DropdownTrigger States</h3>
+          <h3 id="state-matrix-h3-dropdowntrigger-stat" className="text-sm font-medium text-foreground-muted mb-4">DropdownTrigger States</h3>
           <div className="flex flex-wrap gap-4">
             {triggerStates.map((state) => (
               <div key={state} className="flex flex-col items-center gap-2">
-                <span className="text-xs font-medium text-foreground-muted uppercase">{state}</span>
+                <span id="state-matrix-span-state" className="text-xs font-medium text-foreground-muted uppercase">{state}</span>
                 <Dropdown>
                   <DropdownTrigger state={state}>{state}</DropdownTrigger>
                   <DropdownMenu>
@@ -240,7 +240,7 @@ export const StateMatrix: Story = {
           </div>
         </div>
         <div>
-          <h3 className="text-sm font-medium text-foreground-muted mb-4">DropdownItem States (Open menu to see)</h3>
+          <h3 id="state-matrix-h3-dropdownitem-states-" className="text-sm font-medium text-foreground-muted mb-4">DropdownItem States (Open menu to see)</h3>
           <Dropdown>
             <DropdownTrigger state="open">View Item States</DropdownTrigger>
             <DropdownMenu>
@@ -263,7 +263,7 @@ 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">
           <Dropdown>
             <DropdownTrigger>Actions</DropdownTrigger>
@@ -278,7 +278,7 @@ export const ResponsiveMatrix: Story = {
       </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-between">
           <Dropdown>
             <DropdownTrigger>File</DropdownTrigger>
@@ -301,7 +301,7 @@ export const ResponsiveMatrix: Story = {
       </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">
           <div className="flex gap-4">
             <Dropdown>
@@ -325,7 +325,7 @@ export const ResponsiveMatrix: Story = {
             <DropdownTrigger asChild>
               <button className="flex items-center gap-2 p-2 hover:bg-secondary-hover rounded">
                 <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-medium">JD</div>
-                <span className="text-sm font-medium">John Doe</span>
+                <span id="responsive-matrix-span-john-doe" className="text-sm font-medium">John Doe</span>
               </button>
             </DropdownTrigger>
             <DropdownMenu align="end">

package/dist/assets/components/dropdown.tsx

@@ -106,14 +106,14 @@ export function DropdownTrigger({ children, className, asChild, disabled, state
 
   if (asChild) {
     return (
-      <span onClick={() => !isDisabled && setIsOpen(!isOpen)} className={className}>
+      <span id="dropdown-trigger-span-children" data-sonance-name="dropdown" onClick={() => !isDisabled && setIsOpen(!isOpen)} className={className}>
         {children}
       </span>
     );
   }
 
   return (
-    <button
+    <button data-sonance-name="dropdown"
       type="button"
       onClick={() => !isDisabled && setIsOpen(!isOpen)}
       disabled={isDisabled}
@@ -234,11 +234,11 @@ export function DropdownItem({
         className
       )}
     >
-      {icon && <span className="w-4 h-4 shrink-0">{icon}</span>}
-      <span className="flex-1">{children}</span>
+      {icon && <span id="dropdown-item-span-icon" className="w-4 h-4 shrink-0">{icon}</span>}
+      <span id="dropdown-item-span-children" className="flex-1">{children}</span>
       {isSelected && !icon && <Check className="h-4 w-4 ml-auto" />}
       {shortcut && (
-        <span className="ml-auto text-xs text-foreground-muted">{shortcut}</span>
+        <span id="dropdown-item-span-shortcut" className="ml-auto text-xs text-foreground-muted">{shortcut}</span>
       )}
     </button>
   );