sonance-brand-mcp 1.3.1 → 1.3.2

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" />}

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

@@ -135,11 +135,11 @@ export const Disabled: Story = {
 export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-wrap gap-4">
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="ghost">Ghost</Button>
+      <Button id="all-variants-button-primary" variant="primary">Primary</Button>
+      <Button id="all-variants-button-secondary" variant="secondary">Secondary</Button>
+      <Button id="all-variants-button-ghost" variant="ghost">Ghost</Button>
       <div className="bg-sonance-charcoal p-2 rounded">
-        <Button variant="inverted">Inverted</Button>
+        <Button id="all-variants-button-inverted" variant="inverted">Inverted</Button>
       </div>
     </div>
   ),
@@ -149,9 +149,9 @@ export const AllVariants: Story = {
 export const AllSizes: Story = {
   render: () => (
     <div className="flex items-center gap-4">
-      <Button size="sm">Small</Button>
-      <Button size="md">Medium</Button>
-      <Button size="lg">Large</Button>
+      <Button id="all-sizes-button" size="sm">Small</Button>
+      <Button id="all-sizes-button" size="md">Medium</Button>
+      <Button id="all-sizes-button" size="lg">Large</Button>
     </div>
   ),
 };
@@ -161,30 +161,30 @@ export const VariantMatrix: Story = {
   render: () => (
     <div className="space-y-6">
       <div>
-        <h3 className="text-sm font-medium text-foreground-muted mb-3">Primary</h3>
+        <h3 id="variant-matrix-h3-primary" className="text-sm font-medium text-foreground-muted mb-3">Primary</h3>
         <div className="flex items-center gap-4">
-          <Button variant="primary" size="sm">Small</Button>
-          <Button variant="primary" size="md">Medium</Button>
-          <Button variant="primary" size="lg">Large</Button>
-          <Button variant="primary" size="md" disabled>Disabled</Button>
+          <Button id="variant-matrix-button-primary" variant="primary" size="sm">Small</Button>
+          <Button id="variant-matrix-button-primary" variant="primary" size="md">Medium</Button>
+          <Button id="variant-matrix-button-primary" variant="primary" size="lg">Large</Button>
+          <Button id="variant-matrix-button-primary" variant="primary" size="md" disabled>Disabled</Button>
         </div>
       </div>
       <div>
-        <h3 className="text-sm font-medium text-foreground-muted mb-3">Secondary</h3>
+        <h3 id="variant-matrix-h3-secondary" className="text-sm font-medium text-foreground-muted mb-3">Secondary</h3>
         <div className="flex items-center gap-4">
-          <Button variant="secondary" size="sm">Small</Button>
-          <Button variant="secondary" size="md">Medium</Button>
-          <Button variant="secondary" size="lg">Large</Button>
-          <Button variant="secondary" size="md" disabled>Disabled</Button>
+          <Button id="variant-matrix-button-secondary" variant="secondary" size="sm">Small</Button>
+          <Button id="variant-matrix-button-secondary" variant="secondary" size="md">Medium</Button>
+          <Button id="variant-matrix-button-secondary" variant="secondary" size="lg">Large</Button>
+          <Button id="variant-matrix-button-secondary" variant="secondary" size="md" disabled>Disabled</Button>
         </div>
       </div>
       <div>
-        <h3 className="text-sm font-medium text-foreground-muted mb-3">Ghost</h3>
+        <h3 id="variant-matrix-h3-ghost" className="text-sm font-medium text-foreground-muted mb-3">Ghost</h3>
         <div className="flex items-center gap-4">
-          <Button variant="ghost" size="sm">Small</Button>
-          <Button variant="ghost" size="md">Medium</Button>
-          <Button variant="ghost" size="lg">Large</Button>
-          <Button variant="ghost" size="md" disabled>Disabled</Button>
+          <Button id="variant-matrix-button-ghost" variant="ghost" size="sm">Small</Button>
+          <Button id="variant-matrix-button-ghost" variant="ghost" size="md">Medium</Button>
+          <Button id="variant-matrix-button-ghost" variant="ghost" size="lg">Large</Button>
+          <Button id="variant-matrix-button-ghost" variant="ghost" size="md" disabled>Disabled</Button>
         </div>
       </div>
     </div>
@@ -195,27 +195,27 @@ export const VariantMatrix: Story = {
 export const PrimaryStates: Story = {
   render: () => (
     <div className="space-y-4">
-      <h3 className="text-sm font-medium text-foreground-muted">Primary Button States</h3>
+      <h3 id="primary-states-h3-primary-button-state" className="text-sm font-medium text-foreground-muted">Primary Button States</h3>
       <div className="flex items-center gap-4">
         <div className="text-center">
-          <Button variant="primary" state="default">Default</Button>
-          <p className="text-xs text-foreground-muted mt-2">Default</p>
+          <Button id="primary-states-button-primary" variant="primary" state="default">Default</Button>
+          <p id="primary-states-p-default" className="text-xs text-foreground-muted mt-2">Default</p>
         </div>
         <div className="text-center">
-          <Button variant="primary" state="hover">Hover</Button>
-          <p className="text-xs text-foreground-muted mt-2">Hover</p>
+          <Button id="primary-states-button-primary" variant="primary" state="hover">Hover</Button>
+          <p id="primary-states-p-hover" className="text-xs text-foreground-muted mt-2">Hover</p>
         </div>
         <div className="text-center">
-          <Button variant="primary" state="active">Active</Button>
-          <p className="text-xs text-foreground-muted mt-2">Active</p>
+          <Button id="primary-states-button-primary" variant="primary" state="active">Active</Button>
+          <p id="primary-states-p-active" className="text-xs text-foreground-muted mt-2">Active</p>
         </div>
         <div className="text-center">
-          <Button variant="primary" state="focus">Focus</Button>
-          <p className="text-xs text-foreground-muted mt-2">Focus</p>
+          <Button id="primary-states-button-primary" variant="primary" state="focus">Focus</Button>
+          <p id="primary-states-p-focus" className="text-xs text-foreground-muted mt-2">Focus</p>
         </div>
         <div className="text-center">
-          <Button variant="primary" state="disabled">Disabled</Button>
-          <p className="text-xs text-foreground-muted mt-2">Disabled</p>
+          <Button id="primary-states-button-primary" variant="primary" state="disabled">Disabled</Button>
+          <p id="primary-states-p-disabled" className="text-xs text-foreground-muted mt-2">Disabled</p>
         </div>
       </div>
     </div>
@@ -225,27 +225,27 @@ export const PrimaryStates: Story = {
 export const SecondaryStates: Story = {
   render: () => (
     <div className="space-y-4">
-      <h3 className="text-sm font-medium text-foreground-muted">Secondary Button States</h3>
+      <h3 id="secondary-states-h3-secondary-button-sta" className="text-sm font-medium text-foreground-muted">Secondary Button States</h3>
       <div className="flex items-center gap-4">
         <div className="text-center">
-          <Button variant="secondary" state="default">Default</Button>
-          <p className="text-xs text-foreground-muted mt-2">Default</p>
+          <Button id="secondary-states-button-secondary" variant="secondary" state="default">Default</Button>
+          <p id="secondary-states-p-default" className="text-xs text-foreground-muted mt-2">Default</p>
         </div>
         <div className="text-center">
-          <Button variant="secondary" state="hover">Hover</Button>
-          <p className="text-xs text-foreground-muted mt-2">Hover</p>
+          <Button id="secondary-states-button-secondary" variant="secondary" state="hover">Hover</Button>
+          <p id="secondary-states-p-hover" className="text-xs text-foreground-muted mt-2">Hover</p>
         </div>
         <div className="text-center">
-          <Button variant="secondary" state="active">Active</Button>
-          <p className="text-xs text-foreground-muted mt-2">Active</p>
+          <Button id="secondary-states-button-secondary" variant="secondary" state="active">Active</Button>
+          <p id="secondary-states-p-active" className="text-xs text-foreground-muted mt-2">Active</p>
         </div>
         <div className="text-center">
-          <Button variant="secondary" state="focus">Focus</Button>
-          <p className="text-xs text-foreground-muted mt-2">Focus</p>
+          <Button id="secondary-states-button-secondary" variant="secondary" state="focus">Focus</Button>
+          <p id="secondary-states-p-focus" className="text-xs text-foreground-muted mt-2">Focus</p>
         </div>
         <div className="text-center">
-          <Button variant="secondary" state="disabled">Disabled</Button>
-          <p className="text-xs text-foreground-muted mt-2">Disabled</p>
+          <Button id="secondary-states-button-secondary" variant="secondary" state="disabled">Disabled</Button>
+          <p id="secondary-states-p-disabled" className="text-xs text-foreground-muted mt-2">Disabled</p>
         </div>
       </div>
     </div>
@@ -255,27 +255,27 @@ export const SecondaryStates: Story = {
 export const GhostStates: Story = {
   render: () => (
     <div className="space-y-4">
-      <h3 className="text-sm font-medium text-foreground-muted">Ghost Button States</h3>
+      <h3 id="ghost-states-h3-ghost-button-states" className="text-sm font-medium text-foreground-muted">Ghost Button States</h3>
       <div className="flex items-center gap-4">
         <div className="text-center">
-          <Button variant="ghost" state="default">Default</Button>
-          <p className="text-xs text-foreground-muted mt-2">Default</p>
+          <Button id="ghost-states-button-ghost" variant="ghost" state="default">Default</Button>
+          <p id="ghost-states-p-default" className="text-xs text-foreground-muted mt-2">Default</p>
         </div>
         <div className="text-center">
-          <Button variant="ghost" state="hover">Hover</Button>
-          <p className="text-xs text-foreground-muted mt-2">Hover</p>
+          <Button id="ghost-states-button-ghost" variant="ghost" state="hover">Hover</Button>
+          <p id="ghost-states-p-hover" className="text-xs text-foreground-muted mt-2">Hover</p>
         </div>
         <div className="text-center">
-          <Button variant="ghost" state="active">Active</Button>
-          <p className="text-xs text-foreground-muted mt-2">Active</p>
+          <Button id="ghost-states-button-ghost" variant="ghost" state="active">Active</Button>
+          <p id="ghost-states-p-active" className="text-xs text-foreground-muted mt-2">Active</p>
         </div>
         <div className="text-center">
-          <Button variant="ghost" state="focus">Focus</Button>
-          <p className="text-xs text-foreground-muted mt-2">Focus</p>
+          <Button id="ghost-states-button-ghost" variant="ghost" state="focus">Focus</Button>
+          <p id="ghost-states-p-focus" className="text-xs text-foreground-muted mt-2">Focus</p>
         </div>
         <div className="text-center">
-          <Button variant="ghost" state="disabled">Disabled</Button>
-          <p className="text-xs text-foreground-muted mt-2">Disabled</p>
+          <Button id="ghost-states-button-ghost" variant="ghost" state="disabled">Disabled</Button>
+          <p id="ghost-states-p-disabled" className="text-xs text-foreground-muted mt-2">Disabled</p>
         </div>
       </div>
     </div>
@@ -289,7 +289,7 @@ export const StateMatrix: Story = {
     const states: ButtonState[] = ['default', 'hover', 'active', 'focus', 'disabled'];
 
     return (
-      <div className="space-y-8">
+      <div data-sonance-name="button.stories" className="space-y-8">
         <div className="grid grid-cols-6 gap-4 text-center">
           <div></div>
           {states.map((state) => (
@@ -302,7 +302,7 @@ export const StateMatrix: Story = {
           <div key={variant} className="grid grid-cols-6 gap-4 items-center">
             <div className="text-xs font-medium text-foreground-muted uppercase">{variant}</div>
             {states.map((state) => (
-              <Button key={`${variant}-${state}`} variant={variant} state={state}>
+              <Button id="state-matrix-button" key={`${variant}-${state}`} variant={variant} state={state}>
                 Button
               </Button>
             ))}
@@ -319,41 +319,41 @@ 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-col gap-2">
-            <Button variant="primary" className="w-full">Primary Button</Button>
-            <Button variant="secondary" className="w-full">Secondary Button</Button>
+            <Button id="responsive-matrix-button-primary" variant="primary" className="w-full">Primary Button</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary" className="w-full">Secondary Button</Button>
             <div className="flex gap-2">
-              <Button variant="primary" size="sm">Small</Button>
-              <Button variant="secondary" size="sm">Small</Button>
+              <Button id="responsive-matrix-button-primary" variant="primary" size="sm">Small</Button>
+              <Button id="responsive-matrix-button-secondary" variant="secondary" size="sm">Small</Button>
             </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">
           <div className="flex gap-4">
-            <Button variant="primary">Primary Button</Button>
-            <Button variant="secondary">Secondary Button</Button>
-            <Button variant="ghost">Ghost Button</Button>
+            <Button id="responsive-matrix-button-primary" variant="primary">Primary Button</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary">Secondary Button</Button>
+            <Button id="responsive-matrix-button-ghost" variant="ghost">Ghost Button</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="flex gap-4 items-center">
-            <Button variant="primary" size="lg">Large Primary</Button>
-            <Button variant="secondary" size="lg">Large Secondary</Button>
-            <Button variant="ghost" size="lg">Large Ghost</Button>
-            <Button variant="primary" size="md">Medium</Button>
-            <Button variant="secondary" size="md">Medium</Button>
-            <Button variant="primary" size="sm">Small</Button>
-            <Button variant="secondary" size="sm">Small</Button>
+            <Button id="responsive-matrix-button-primary" variant="primary" size="lg">Large Primary</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary" size="lg">Large Secondary</Button>
+            <Button id="responsive-matrix-button-ghost" variant="ghost" size="lg">Large Ghost</Button>
+            <Button id="responsive-matrix-button-primary" variant="primary" size="md">Medium</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary" size="md">Medium</Button>
+            <Button id="responsive-matrix-button-primary" variant="primary" size="sm">Small</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary" size="sm">Small</Button>
           </div>
         </div>
       </div>

package/dist/assets/components/button.tsx

@@ -21,6 +21,7 @@ const buttonVariants = cva(
         sm: "h-9 px-4 text-xs",
         md: "h-11 px-6 text-sm",
         lg: "h-14 px-8 text-sm",
+        icon: "h-10 w-10",
       },
     },
     defaultVariants: {
@@ -77,6 +78,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <button
+        data-sonance-name="button"
         className={cn(
           buttonVariants({ variant, size, className }),
           getStateStyles(variant, state)

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

@@ -38,7 +38,7 @@ export const Default: Story = {
   render: () => {
     const [selected, setSelected] = useState<Date | undefined>(undefined);
     return (
-      <Calendar
+      <Calendar data-sonance-name="calendar.stories"
         selected={selected}
         onSelect={setSelected}
         className="w-fit"
@@ -68,7 +68,7 @@ export const WithMinMaxDates: Story = {
     const today = new Date();
     return (
       <div className="space-y-4">
-        <p className="text-sm text-foreground-muted">
+        <p id="with-min-max-dates-p-only-dates-within-th" className="text-sm text-foreground-muted">
           Only dates within the next 30 days are selectable
         </p>
         <Calendar
@@ -93,7 +93,7 @@ export const DisabledWeekends: Story = {
     };
     return (
       <div className="space-y-4">
-        <p className="text-sm text-foreground-muted">
+        <p id="disabled-weekends-p-weekends-are-disable" className="text-sm text-foreground-muted">
           Weekends are disabled
         </p>
         <Calendar
@@ -114,7 +114,7 @@ export const PastDatesOnly: Story = {
     const today = new Date();
     return (
       <div className="space-y-4">
-        <p className="text-sm text-foreground-muted">
+        <p id="past-dates-only-p-only-past-dates-are-" className="text-sm text-foreground-muted">
           Only past dates are selectable (useful for birthdays)
         </p>
         <Calendar
@@ -134,7 +134,7 @@ export const Mini: Story = {
     const [selected, setSelected] = useState<Date | undefined>(new Date());
     return (
       <div className="space-y-4">
-        <p className="text-sm text-foreground-muted">
+        <p id="mini-p-compact-calendar-for" className="text-sm text-foreground-muted">
           Compact calendar for smaller spaces
         </p>
         <MiniCalendar
@@ -173,7 +173,7 @@ export const BookingExample: Story = {
 
     return (
       <div className="space-y-4">
-        <p className="text-sm text-foreground-muted">
+        <p id="booking-example-p-select-an-available-" className="text-sm text-foreground-muted">
           Select an available appointment date
         </p>
         <Calendar
@@ -185,7 +185,7 @@ export const BookingExample: Story = {
           className="w-fit"
         />
         {selected && (
-          <p className="text-sm text-foreground">
+          <p id="booking-example-p-selected-selectedtol" className="text-sm text-foreground">
             Selected: {selected.toLocaleDateString()}
           </p>
         )}
@@ -205,7 +205,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">
             <MiniCalendar
               selected={mobile}
@@ -216,7 +216,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">
             <Calendar
               selected={tablet}
@@ -227,7 +227,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 gap-8">
               <Calendar
@@ -236,7 +236,7 @@ export const ResponsiveMatrix: Story = {
                 className="w-fit"
               />
               <div className="text-sm text-foreground-muted">
-                {desktop && <p>Selected: {desktop.toLocaleDateString()}</p>}
+                {desktop && <p id="responsive-matrix-p-selected-desktoptolo">Selected: {desktop.toLocaleDateString()}</p>}
               </div>
             </div>
           </div>

package/dist/assets/components/calendar.tsx

@@ -62,7 +62,7 @@ export function Calendar({
   };
 
   return (
-    <div className={cn("p-4 bg-card border border-border rounded-sm", className)}>
+    <div data-sonance-name="calendar" className={cn("p-4 bg-card border border-border rounded-sm", className)}>
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
         <button
@@ -73,7 +73,7 @@ export function Calendar({
         >
           <ChevronLeft className="h-4 w-4 text-foreground" />
         </button>
-        <h2 className="text-sm font-medium text-foreground">
+        <h2 id="calendar-h2-formatcurrentmonth-m" className="text-sm font-medium text-foreground">
           {format(currentMonth, "MMMM yyyy")}
         </h2>
         <button
@@ -107,7 +107,7 @@ export function Calendar({
           const isDisabled = isDateDisabled(day);
 
           return (
-            <button
+            <button data-sonance-name="calendar"
               key={day.toISOString()}
               type="button"
               onClick={() => handleSelectDate(day)}
@@ -140,6 +140,6 @@ interface MiniCalendarProps extends CalendarProps {
 }
 
 export function MiniCalendar({ className, ...props }: MiniCalendarProps) {
-  return <Calendar {...props} className={cn("p-3", className)} />;
+  return <Calendar data-sonance-name="calendar" {...props} className={cn("p-3", className)} />;
 }