sonance-brand-mcp 1.2.5 → 1.3.2

package/dist/assets/components/autocomplete.tsx

@@ -173,7 +173,7 @@ export function Autocomplete({
   }, [selectedOption]);
 
   return (
-    <div ref={containerRef} className={cn("w-full", className)}>
+    <div data-sonance-name="autocomplete" ref={containerRef} className={cn("w-full", className)}>
       {label && (
         <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
           {label}
@@ -248,7 +248,7 @@ export function Autocomplete({
                   <div>
                     <div className="text-sm">{option.label}</div>
                     {option.description && (
-                      <div className={cn(
+                      <div data-sonance-name="autocomplete" className={cn(
                         "text-xs mt-0.5",
                         option.value === value ? "text-primary-foreground/70" : "text-foreground-muted"
                       )}>
@@ -263,7 +263,7 @@ export function Autocomplete({
           </div>
         )}
       </div>
-      {error && <p className="mt-1 text-sm text-error">{error}</p>}
+      {error && <p id="p-error" className="mt-1 text-sm text-error">{error}</p>}
     </div>
   );
 }

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

@@ -115,20 +115,20 @@ 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">
           <div className="flex items-center gap-4">
             <Avatar size="md" src="https://i.pravatar.cc/150?img=1" />
             <div>
-              <p className="text-sm font-medium">John Doe</p>
-              <p className="text-xs text-foreground-muted">john@example.com</p>
+              <p id="responsive-matrix-p-john-doe" className="text-sm font-medium">John Doe</p>
+              <p id="responsive-matrix-p-johnexamplecom" className="text-xs text-foreground-muted">john@example.com</p>
             </div>
           </div>
         </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-between items-center">
           <div className="flex items-end gap-4">
             <Avatar size="sm" fallback="SM" />
@@ -146,7 +146,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 items-end gap-4">
             <Avatar size="xs" fallback="XS" />

package/dist/assets/components/avatar.tsx

@@ -1,4 +1,7 @@
-import { forwardRef } from "react";
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cva, type VariantProps } from "class-variance-authority";
 import { User } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -27,15 +30,21 @@ const avatarVariants = cva(
 );
 
 interface AvatarProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
     VariantProps<typeof avatarVariants> {
   src?: string;
   alt?: string;
   fallback?: string;
 }
 
-export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
-  ({ className, size, shape, src, alt, fallback, ...props }, ref) => {
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  AvatarProps
+>(({ className, size, shape, src, alt, fallback, children, ...props }, ref) => {
+  // Logic for legacy props (src/fallback)
+  const showLegacy = (src || fallback) && React.Children.count(children) === 0;
+
+  if (showLegacy) {
     const initials = fallback
       ? fallback
           .split(" ")
@@ -46,28 +55,62 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
       : null;
 
     return (
-      <div
+      <AvatarPrimitive.Root
         ref={ref}
         className={cn(avatarVariants({ size, shape }), className)}
         {...props}
       >
-        {src ? (
-          <img
-            src={src}
-            alt={alt || "Avatar"}
-            className="h-full w-full object-cover"
-          />
-        ) : initials ? (
-          <span className="font-medium text-foreground-muted">{initials}</span>
-        ) : (
-          <User className="h-1/2 w-1/2 text-foreground-muted" />
-        )}
-      </div>
+        <AvatarImage src={src} alt={alt} />
+        <AvatarFallback>
+          {initials ? (
+            <span id="avatar-span-initials" className="font-medium text-foreground-muted">{initials}</span>
+          ) : (
+            <User className="h-1/2 w-1/2 text-foreground-muted" />
+          )}
+        </AvatarFallback>
+      </AvatarPrimitive.Root>
     );
   }
-);
 
-Avatar.displayName = "Avatar";
+  // Modern composable usage
+  return (
+    <AvatarPrimitive.Root
+      ref={ref}
+      className={cn(avatarVariants({ size, shape }), className)}
+      {...props}
+    >
+      {children}
+    </AvatarPrimitive.Root>
+  );
+});
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full object-cover", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // Avatar Group
 interface AvatarGroupProps {
@@ -77,29 +120,30 @@ interface AvatarGroupProps {
   className?: string;
 }
 
-export function AvatarGroup({ children, max, size = "md", className }: AvatarGroupProps) {
+function AvatarGroup({ children, max, size = "md", className }: AvatarGroupProps) {
   const avatars = Array.isArray(children) ? children : [children];
   const displayAvatars = max ? avatars.slice(0, max) : avatars;
   const excess = max ? Math.max(0, avatars.length - max) : 0;
 
   return (
-    <div className={cn("flex -space-x-2", className)}>
+    <div data-sonance-name="avatar" className={cn("flex -space-x-2", className)}>
       {displayAvatars.map((avatar, index) => (
         <div key={index} className="ring-2 ring-background rounded-full">
           {avatar}
         </div>
       ))}
       {excess > 0 && (
-        <div
+        <div data-sonance-name="avatar"
           className={cn(
             avatarVariants({ size, shape: "circle" }),
             "ring-2 ring-background bg-background-tertiary"
           )}
         >
-          <span className="text-xs font-medium text-foreground-muted">+{excess}</span>
+          <span id="avatar-group-span-excess" className="text-xs font-medium text-foreground-muted">+{excess}</span>
         </div>
       )}
     </div>
   );
 }
 
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup };

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

@@ -129,19 +129,19 @@ export const StatusExamples: Story = {
     <div className="space-y-4">
       <div className="flex items-center gap-2">
         <Badge variant="success">Active</Badge>
-        <span className="text-foreground-secondary">User account is active</span>
+        <span id="status-examples-span-user-account-is-acti" className="text-foreground-secondary">User account is active</span>
       </div>
       <div className="flex items-center gap-2">
         <Badge variant="warning">Pending</Badge>
-        <span className="text-foreground-secondary">Awaiting approval</span>
+        <span id="status-examples-span-awaiting-approval" className="text-foreground-secondary">Awaiting approval</span>
       </div>
       <div className="flex items-center gap-2">
         <Badge variant="error">Suspended</Badge>
-        <span className="text-foreground-secondary">Account suspended</span>
+        <span id="status-examples-span-account-suspended" className="text-foreground-secondary">Account suspended</span>
       </div>
       <div className="flex items-center gap-2">
         <Badge variant="info">New</Badge>
-        <span className="text-foreground-secondary">Recently added</span>
+        <span id="status-examples-span-recently-added" className="text-foreground-secondary">Recently added</span>
       </div>
     </div>
   ),
@@ -180,15 +180,15 @@ export const CountBadges: Story = {
   render: () => (
     <div className="flex items-center gap-6">
       <div className="relative">
-        <span className="text-foreground">Notifications</span>
+        <span id="count-badges-span-notifications" className="text-foreground">Notifications</span>
         <Badge variant="error" size="sm" className="absolute -top-2 -right-6">3</Badge>
       </div>
       <div className="relative">
-        <span className="text-foreground">Messages</span>
+        <span id="count-badges-span-messages" className="text-foreground">Messages</span>
         <Badge variant="primary" size="sm" className="absolute -top-2 -right-6">12</Badge>
       </div>
       <div className="relative">
-        <span className="text-foreground">Cart</span>
+        <span id="count-badges-span-cart" className="text-foreground">Cart</span>
         <Badge variant="info" size="sm" className="absolute -top-2 -right-4">5</Badge>
       </div>
     </div>
@@ -201,7 +201,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">
           <div className="flex flex-wrap gap-2">
             <Badge variant="primary">Primary</Badge>
@@ -214,7 +214,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">
           <div className="flex items-center gap-4">
             <div className="flex gap-2">
@@ -232,7 +232,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">
           <div className="flex items-center justify-between">
             <div className="flex gap-2">

package/dist/assets/components/badge.tsx

@@ -34,7 +34,7 @@ interface BadgeProps
 
 export function Badge({ className, variant, size, ...props }: BadgeProps) {
   return (
-    <span className={cn(badgeVariants({ variant, size }), className)} {...props} />
+    <span id="badge-span" data-sonance-name="badge" className={cn(badgeVariants({ variant, size }), className)} {...props} />
   );
 }
 
@@ -45,7 +45,7 @@ interface ChipProps extends BadgeProps {
 
 export function Chip({ className, variant, size, onClose, children, ...props }: ChipProps) {
   return (
-    <span className={cn(badgeVariants({ variant, size }), "gap-1", className)} {...props}>
+    <span id="chip-span" className={cn(badgeVariants({ variant, size }), "gap-1", className)} data-sonance-name="badge" {...props}>
       {children}
       {onClose && (
         <button
@@ -55,7 +55,7 @@ export function Chip({ className, variant, size, onClose, children, ...props }:
           <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
           </svg>
-          <span className="sr-only">Remove</span>
+          <span id="chip-span-remove" className="sr-only">Remove</span>
         </button>
       )}
     </span>

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

@@ -61,7 +61,7 @@ export const WithIcons: Story = {
 
 export const CustomSeparator: Story = {
   args: {
-    separator: <span className="text-foreground-muted">/</span>,
+    separator: <span id="custom-separator-span" className="text-foreground-muted">/</span>,
     items: [
       { label: 'Home', href: '#' },
       { label: 'Category', href: '#' },
@@ -89,7 +89,7 @@ export const AllExamples: Story = {
   render: () => (
     <div className="space-y-6">
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Simple</p>
+        <p id="all-examples-p-simple" className="text-xs text-foreground-muted mb-2">Simple</p>
         <Breadcrumbs
           items={[
             { label: 'Home', href: '#' },
@@ -98,7 +98,7 @@ export const AllExamples: Story = {
         />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">With Home Icon</p>
+        <p id="all-examples-p-with-home-icon" className="text-xs text-foreground-muted mb-2">With Home Icon</p>
         <Breadcrumbs
           showHome
           items={[
@@ -108,7 +108,7 @@ export const AllExamples: Story = {
         />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Deep Navigation</p>
+        <p id="all-examples-p-deep-navigation" className="text-xs text-foreground-muted mb-2">Deep Navigation</p>
         <Breadcrumbs
           items={[
             { label: 'Level 1', href: '#' },
@@ -128,7 +128,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">
           <Breadcrumbs
             items={[
@@ -140,7 +140,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">
           <Breadcrumbs
             showHome
@@ -155,7 +155,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">
           <Breadcrumbs
             showHome

package/dist/assets/components/breadcrumbs.tsx

@@ -34,20 +34,21 @@ export function Breadcrumbs({
     : items;
 
   return (
-    <nav aria-label="Breadcrumb" className={cn("flex items-center", className)}>
+    <nav data-sonance-name="breadcrumbs" aria-label="Breadcrumb" className={cn("flex items-center", className)}>
       <ol className="flex items-center gap-2">
         {allItems.map((item, index) => {
           const isLast = index === allItems.length - 1;
 
           return (
-            <li key={index} className="flex items-center gap-2">
+            <li data-sonance-name="breadcrumbs" key={index} className="flex items-center gap-2">
               {index > 0 && (
-                <span className="text-foreground-muted" aria-hidden="true">
+                <span id="nav-span-separatorelement" className="text-foreground-muted" aria-hidden="true">
                   {separatorElement}
                 </span>
               )}
               {isLast ? (
                 <span
+                  id="breadcrumbs-span-itemicon-itemlabel"
                   className="flex items-center gap-1.5 text-sm font-medium text-foreground"
                   aria-current="page"
                 >
@@ -56,6 +57,7 @@ export function Breadcrumbs({
                 </span>
               ) : (
                 <a
+                  id="breadcrumbs-a"
                   href={item.href}
                   className={cn(
                     "flex items-center gap-1.5 text-sm text-foreground-muted",
@@ -81,7 +83,7 @@ export const BreadcrumbList = forwardRef<
 >(({ className, ...props }, ref) => (
   <ol
     ref={ref}
-    className={cn("flex items-center gap-2 flex-wrap", className)}
+    className={cn("flex items-center gap-2 flex-wrap", className)} data-sonance-name="breadcrumbs"
     {...props}
   />
 ));
@@ -94,7 +96,7 @@ export const BreadcrumbItem = forwardRef<
 >(({ className, ...props }, ref) => (
   <li
     ref={ref}
-    className={cn("flex items-center gap-2", className)}
+    className={cn("flex items-center gap-2", className)} data-sonance-name="breadcrumbs"
     {...props}
   />
 ));
@@ -106,11 +108,12 @@ export const BreadcrumbLink = forwardRef<
   React.AnchorHTMLAttributes<HTMLAnchorElement>
 >(({ className, ...props }, ref) => (
   <a
+    id="breadcrumb-link-a"
     ref={ref}
     className={cn(
       "text-sm text-foreground-muted hover:text-foreground transition-colors",
       className
-    )}
+    )} data-sonance-name="breadcrumbs"
     {...props}
   />
 ));
@@ -122,9 +125,10 @@ export const BreadcrumbPage = forwardRef<
   React.HTMLAttributes<HTMLSpanElement>
 >(({ className, ...props }, ref) => (
   <span
+    id="breadcrumb-page-span"
     ref={ref}
     aria-current="page"
-    className={cn("text-sm font-medium text-foreground", className)}
+    className={cn("text-sm font-medium text-foreground", className)} data-sonance-name="breadcrumbs"
     {...props}
   />
 ));
@@ -136,9 +140,10 @@ export const BreadcrumbSeparator = forwardRef<
   React.HTMLAttributes<HTMLSpanElement>
 >(({ className, children, ...props }, ref) => (
   <span
+    id="breadcrumb-separator-span"
     ref={ref}
     aria-hidden="true"
-    className={cn("text-foreground-muted", className)}
+    className={cn("text-foreground-muted", className)} data-sonance-name="breadcrumbs"
     {...props}
   >
     {children || <ChevronRight className="h-4 w-4" />}