sonance-brand-mcp 1.2.5 → 1.3.2

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

@@ -132,7 +132,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 space-y-4">
           <div className="flex items-center gap-4">
             <SkeletonAvatar size="md" />
@@ -146,7 +146,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="grid grid-cols-2 gap-4">
             <SkeletonCard />
@@ -156,7 +156,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">
           <SkeletonTable rows={4} columns={5} />
         </div>

package/dist/assets/components/skeleton.tsx

@@ -22,6 +22,7 @@ export function Skeleton({
 
   return (
     <div
+      data-sonance-name="skeleton"
       className={cn(
         "animate-pulse bg-background-secondary",
         variantClasses[variant],
@@ -40,7 +41,7 @@ export function Skeleton({
 // Preset skeleton components
 export function SkeletonText({ lines = 3, className }: { lines?: number; className?: string }) {
   return (
-    <div className={cn("space-y-2", className)}>
+    <div data-sonance-name="skeleton" className={cn("space-y-2", className)}>
       {Array.from({ length: lines }).map((_, i) => (
         <Skeleton
           key={i}
@@ -111,4 +112,3 @@ export function SkeletonTable({
     </div>
   );
 }
-

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

@@ -91,12 +91,12 @@ export const StateMatrix: Story = {
   render: () => {
     const states: SliderState[] = ['default', 'hover', 'focus', 'active', 'disabled'];
     return (
-      <div className="space-y-6 w-80">
-        <h3 className="text-sm font-medium text-foreground-muted">Slider States</h3>
+      <div data-sonance-name="slider.stories" className="space-y-6 w-80">
+        <h3 id="state-matrix-h3-slider-states" className="text-sm font-medium text-foreground-muted">Slider States</h3>
         <div className="space-y-6">
           {states.map((state) => (
             <div key={state} className="flex items-center gap-4">
-              <span className="text-xs font-medium text-foreground-muted uppercase w-20">{state}</span>
+              <span id="state-matrix-span-state" className="text-xs font-medium text-foreground-muted uppercase w-20">{state}</span>
               <Slider state={state} defaultValue={50} label={state} />
             </div>
           ))}
@@ -112,7 +112,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 space-y-6">
           <Slider label="Volume" showValue defaultValue={75} />
           <Slider label="Brightness" showValue defaultValue={50} />
@@ -120,7 +120,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="grid grid-cols-2 gap-8">
             <Slider label="Bass" showValue defaultValue={60} />
@@ -130,7 +130,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="grid grid-cols-4 gap-8">
             <Slider label="Volume" showValue defaultValue={80} />

package/dist/assets/components/slider.tsx

@@ -134,7 +134,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
     };
 
     return (
-      <div ref={ref} className={cn("w-full", className)}>
+      <div data-sonance-name="slider" ref={ref} className={cn("w-full", className)}>
         {(label || showValue) && (
           <div className="mb-3 flex items-center justify-between">
             {label && (
@@ -143,7 +143,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
               </label>
             )}
             {showValue && (
-              <span className="text-sm font-medium text-foreground">{value}</span>
+              <span id="span-value" className="text-sm font-medium text-foreground">{value}</span>
             )}
           </div>
         )}
@@ -170,7 +170,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
             style={{ width: `${percentage}%` }}
           />
           {/* Thumb */}
-          <div
+          <div data-sonance-name="slider"
             className={cn(
               "absolute top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full",
               "border-2 border-primary bg-background shadow-sm transition-all",

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

@@ -66,7 +66,7 @@ export const PresetSizes: Story = {
 export const FlexSpacerExample: Story = {
   render: () => (
     <div className="flex items-center border border-border p-4 w-96">
-      <span className="text-foreground font-medium">Logo</span>
+      <span id="flex-spacer-example-span-logo" className="text-foreground font-medium">Logo</span>
       <FlexSpacer />
       <button className="px-3 py-1 text-sm text-foreground-muted hover:text-foreground">About</button>
       <Spacer x={2} />
@@ -80,11 +80,11 @@ export const FlexSpacerExample: Story = {
 export const CardLayout: Story = {
   render: () => (
     <div className="border border-border p-6 w-80">
-      <h3 className="text-lg font-medium text-foreground">Card Title</h3>
+      <h3 id="card-layout-h3-card-title" className="text-lg font-medium text-foreground">Card Title</h3>
       <SpacerXS />
-      <p className="text-sm text-foreground-muted">A subtitle or meta information</p>
+      <p id="card-layout-p-a-subtitle-or-meta-i" className="text-sm text-foreground-muted">A subtitle or meta information</p>
       <SpacerMD />
-      <p className="text-foreground-secondary">
+      <p id="card-layout-p-this-is-the-main-con" className="text-foreground-secondary">
         This is the main content of the card. Notice how spacers provide consistent rhythm between elements.
       </p>
       <SpacerLG />
@@ -100,7 +100,7 @@ export const CardLayout: Story = {
 export const ResponsiveSpacing: Story = {
   render: () => (
     <div className="space-y-4">
-      <p className="text-xs text-foreground-muted">
+      <p id="responsive-spacing-p-spacer-uses-a-4px-ba" className="text-xs text-foreground-muted">
         Spacer uses a 4px base unit. y=1 is 4px, y=4 is 16px, etc.
       </p>
       <div className="border border-dashed border-border p-4 w-64">
@@ -121,7 +121,7 @@ export const ResponsiveSpacing: Story = {
 export const FormLayout: Story = {
   render: () => (
     <form className="w-80 border border-border p-6">
-      <h2 className="text-lg font-medium text-foreground">Contact Form</h2>
+      <h2 id="form-layout-h2-contact-form" className="text-lg font-medium text-foreground">Contact Form</h2>
       <SpacerMD />
 
       <label className="block text-sm font-medium text-foreground">Name</label>
@@ -170,7 +170,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="p-2 bg-primary text-primary-foreground text-center text-sm">Header</div>
           <SpacerMD />
@@ -181,10 +181,10 @@ 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">
-            <span className="text-foreground font-medium">Logo</span>
+            <span id="responsive-matrix-span-logo" className="text-foreground font-medium">Logo</span>
             <FlexSpacer />
             <button className="px-3 py-1 text-sm text-foreground-muted">About</button>
             <Spacer x={2} />
@@ -196,10 +196,10 @@ 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">
-            <span className="text-foreground font-medium">Sonance</span>
+            <span id="responsive-matrix-span-sonance" className="text-foreground font-medium">Sonance</span>
             <Spacer x={8} />
             <button className="px-3 py-1 text-sm text-foreground-muted">Products</button>
             <Spacer x={4} />

package/dist/assets/components/spacer.tsx

@@ -36,7 +36,7 @@ export function Spacer({ x, y, className }: SpacerProps) {
   }
 
   return (
-    <div
+    <div data-sonance-name="spacer"
       className={cn("shrink-0", className)}
       style={style}
       aria-hidden="true"
@@ -46,7 +46,7 @@ export function Spacer({ x, y, className }: SpacerProps) {
 
 // Common preset spacers
 export function SpacerXS() {
-  return <Spacer y={2} />;
+  return <Spacer data-sonance-name="spacer" y={2} />;
 }
 
 export function SpacerSM() {

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

@@ -76,11 +76,11 @@ export const LoadingStates: Story = {
     <div className="space-y-8">
       <div className="flex items-center gap-4">
         <Spinner size="sm" />
-        <span className="text-foreground-secondary">Loading content...</span>
+        <span id="loading-states-span-loading-content" className="text-foreground-secondary">Loading content...</span>
       </div>
       <div className="flex items-center gap-4">
         <DotsSpinner />
-        <span className="text-foreground-secondary">Processing...</span>
+        <span id="loading-states-span-processing" className="text-foreground-secondary">Processing...</span>
       </div>
       <div className="text-center p-8 border border-border rounded">
         <Spinner size="lg" label="Loading data" />
@@ -93,7 +93,7 @@ export const ButtonLoading: Story = {
   render: () => (
     <button className="inline-flex items-center gap-2 bg-primary text-primary-foreground px-6 py-3">
       <Spinner size="sm" />
-      <span>Processing...</span>
+      <span id="button-loading-span-processing">Processing...</span>
     </button>
   ),
 };
@@ -104,7 +104,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="text-center p-8 border border-border rounded">
             <Spinner size="md" label="Loading..." />
@@ -113,7 +113,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 justify-center items-center gap-8">
             <Spinner size="sm" label="Small" />
@@ -124,12 +124,12 @@ 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 justify-between items-center">
             <div className="flex items-center gap-4">
               <Spinner size="sm" />
-              <span className="text-foreground-secondary">Loading content...</span>
+              <span id="responsive-matrix-span-loading-content" className="text-foreground-secondary">Loading content...</span>
             </div>
             <div className="flex items-center gap-8">
               <Spinner size="sm" />
@@ -139,7 +139,7 @@ export const ResponsiveMatrix: Story = {
             </div>
             <div className="flex items-center gap-4">
               <DotsSpinner />
-              <span className="text-foreground-secondary">Processing...</span>
+              <span id="responsive-matrix-span-processing" className="text-foreground-secondary">Processing...</span>
             </div>
           </div>
         </div>

package/dist/assets/components/spinner.tsx

@@ -15,7 +15,7 @@ export function Spinner({ size = "md", className, label }: SpinnerProps) {
   };
 
   return (
-    <div className={cn("inline-flex flex-col items-center gap-2", className)}>
+    <div data-sonance-name="spinner" className={cn("inline-flex flex-col items-center gap-2", className)}>
       <div
         role="status"
         aria-label={label || "Loading"}
@@ -25,9 +25,9 @@ export function Spinner({ size = "md", className, label }: SpinnerProps) {
         )}
       />
       {label && (
-        <span className="text-xs font-medium text-foreground-muted">{label}</span>
+        <span id="spinner-span-label" className="text-xs font-medium text-foreground-muted">{label}</span>
       )}
-      <span className="sr-only">{label || "Loading..."}</span>
+      <span id="spinner-span-label-loading" className="sr-only">{label || "Loading..."}</span>
     </div>
   );
 }
@@ -52,7 +52,7 @@ export function DotsSpinner({ size = "md", className }: DotsSpinnerProps) {
   };
 
   return (
-    <div
+    <div data-sonance-name="spinner"
       role="status"
       aria-label="Loading"
       className={cn("inline-flex items-center", gapSizes[size], className)}
@@ -70,7 +70,7 @@ export function DotsSpinner({ size = "md", className }: DotsSpinnerProps) {
           }}
         />
       ))}
-      <span className="sr-only">Loading...</span>
+      <span id="dots-spinner-span-loading" className="sr-only">Loading...</span>
     </div>
   );
 }

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

@@ -84,11 +84,11 @@ export const DisabledChecked: Story = {
 export const AllStates: Story = {
   render: () => (
     <div className="space-y-4">
-      <Switch label="Off" />
-      <Switch label="On" defaultChecked />
-      <Switch label="With description" description="Additional context for this setting" />
-      <Switch label="Disabled" disabled />
-      <Switch label="Disabled on" disabled defaultChecked />
+      <Switch id="all-states-switch" label="Off" />
+      <Switch id="all-states-switch" label="On" defaultChecked />
+      <Switch id="all-states-switch" label="With description" description="Additional context for this setting" />
+      <Switch id="all-states-switch" label="Disabled" disabled />
+      <Switch id="all-states-switch" label="Disabled on" disabled defaultChecked />
     </div>
   ),
 };
@@ -97,21 +97,24 @@ export const AllStates: Story = {
 export const SettingsExample: Story = {
   render: () => (
     <div className="space-y-6 w-96">
-      <h3 className="text-lg font-medium text-foreground">Settings</h3>
+      <h3 id="settings-example-h3-settings" className="text-lg font-medium text-foreground">Settings</h3>
       <div className="space-y-4 divide-y divide-divider">
         <Switch
+          id="settings-example-switch"
           label="Push notifications"
           description="Receive push notifications on your device"
           defaultChecked
         />
         <div className="pt-4">
           <Switch
+            id="settings-example-switch"
             label="Email digest"
             description="Weekly summary of your activity"
           />
         </div>
         <div className="pt-4">
           <Switch
+            id="settings-example-switch"
             label="Auto-update"
             description="Automatically install updates"
             defaultChecked
@@ -119,6 +122,7 @@ export const SettingsExample: Story = {
         </div>
         <div className="pt-4">
           <Switch
+            id="settings-example-switch"
             label="Analytics"
             description="Help improve the product with usage data"
           />
@@ -134,34 +138,34 @@ 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 space-y-4">
-          <Switch label="Dark mode" description="Enable dark theme" />
-          <Switch label="Notifications" defaultChecked />
-          <Switch label="Auto-save" defaultChecked />
+          <Switch id="responsive-matrix-switch" label="Dark mode" description="Enable dark theme" />
+          <Switch id="responsive-matrix-switch" label="Notifications" defaultChecked />
+          <Switch id="responsive-matrix-switch" label="Auto-save" defaultChecked />
         </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">
-            <Switch label="Email notifications" description="Receive email updates" defaultChecked />
-            <Switch label="Push notifications" description="Mobile app alerts" />
-            <Switch label="Weekly digest" description="Summary of activity" defaultChecked />
-            <Switch label="Marketing emails" description="Product announcements" />
+            <Switch id="responsive-matrix-switch" label="Email notifications" description="Receive email updates" defaultChecked />
+            <Switch id="responsive-matrix-switch" label="Push notifications" description="Mobile app alerts" />
+            <Switch id="responsive-matrix-switch" label="Weekly digest" description="Summary of activity" defaultChecked />
+            <Switch id="responsive-matrix-switch" label="Marketing emails" description="Product announcements" />
           </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-4 gap-4">
-            <Switch label="Off" />
-            <Switch label="On" defaultChecked />
-            <Switch label="Disabled" disabled />
-            <Switch label="Disabled on" disabled defaultChecked />
+            <Switch id="responsive-matrix-switch" label="Off" />
+            <Switch id="responsive-matrix-switch" label="On" defaultChecked />
+            <Switch id="responsive-matrix-switch" label="Disabled" disabled />
+            <Switch id="responsive-matrix-switch" label="Disabled on" disabled defaultChecked />
           </div>
         </div>
       </div>

package/dist/assets/components/switch.tsx

@@ -27,16 +27,20 @@ const getTrackStateStyles = (state?: SwitchState) => {
 };
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  ({ className, label, description, id, state, disabled, checked, ...props }, ref) => {
+  ({ className, label, description, id, state, disabled, checked, defaultChecked, onChange, style, ...props }, ref) => {
     const uniqueId = useId();
     const inputId = id || `switch-${uniqueId}`;
     const isDisabled = disabled || state === "disabled";
-    const isChecked = checked || state === "checked";
+
+    // Determine if we're in controlled mode
+    const isControlled = checked !== undefined || onChange !== undefined;
+    const isCheckedForState = state === "checked";
 
     return (
-      <div className="flex items-start gap-3">
+      <div data-sonance-name="switch" className="flex items-start gap-3">
         <label
           htmlFor={inputId}
+          style={style}
           className={cn(
             "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full",
             "border border-border bg-input transition-colors duration-200",
@@ -52,11 +56,15 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             id={inputId}
             ref={ref}
             disabled={isDisabled}
-            checked={isChecked}
-            className="peer sr-only"
+            {...(isControlled
+              ? { checked: checked || isCheckedForState, onChange }
+              : { defaultChecked: defaultChecked || isCheckedForState }
+            )}
+            className="peer sr-only" data-sonance-name="switch"
             {...props}
           />
           <span
+            id="switch-span"
             className={cn(
               "pointer-events-none absolute left-0.5 h-5 w-5 rounded-full bg-foreground-muted shadow-sm",
               "transition-transform duration-200",
@@ -76,7 +84,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
               </label>
             )}
             {description && (
-              <p className="text-xs text-foreground-muted">{description}</p>
+              <p id="switch-p-description" className="text-xs text-foreground-muted">{description}</p>
             )}
           </div>
         )}

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

@@ -163,7 +163,7 @@ export const WithCheckboxes: Story = {
       <TableHeader>
         <TableRow>
           <TableHead className="w-12">
-            <Checkbox />
+            <Checkbox id="with-checkboxes-checkbox" />
           </TableHead>
           <TableHead>Product</TableHead>
           <TableHead>Category</TableHead>
@@ -174,7 +174,7 @@ export const WithCheckboxes: Story = {
         {products.map((product) => (
           <TableRow key={product.id}>
             <TableCell>
-              <Checkbox />
+              <Checkbox id="with-checkboxes-checkbox" />
             </TableCell>
             <TableCell className="font-medium">{product.name}</TableCell>
             <TableCell>{product.category}</TableCell>
@@ -241,7 +241,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-2 overflow-x-auto">
           <Table>
             <TableHeader>
@@ -263,7 +263,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">
           <Table>
             <TableHeader>
@@ -287,12 +287,12 @@ 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">
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead className="w-12"><Checkbox /></TableHead>
+                <TableHead className="w-12"><Checkbox id="responsive-matrix-checkbox" /></TableHead>
                 <TableHead>Product</TableHead>
                 <TableHead>Category</TableHead>
                 <TableHead>Status</TableHead>
@@ -302,7 +302,7 @@ export const ResponsiveMatrix: Story = {
             <TableBody>
               {products.map((product) => (
                 <TableRow key={product.id}>
-                  <TableCell><Checkbox /></TableCell>
+                  <TableCell><Checkbox id="responsive-matrix-checkbox" /></TableCell>
                   <TableCell className="font-medium">{product.name}</TableCell>
                   <TableCell>{product.category}</TableCell>
                   <TableCell>

package/dist/assets/components/table.tsx

@@ -8,7 +8,7 @@ export const Table = forwardRef<
   <div className="w-full overflow-auto">
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn("w-full caption-bottom text-sm", className)} data-sonance-name="table"
       {...props}
     />
   </div>
@@ -20,7 +20,7 @@ export const TableHeader = forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} data-sonance-name="table" {...props} />
 ));
 
 TableHeader.displayName = "TableHeader";
@@ -31,7 +31,7 @@ export const TableBody = forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={cn("[&_tr:last-child]:border-0", className)} data-sonance-name="table"
     {...props}
   />
 ));
@@ -47,7 +47,7 @@ export const TableFooter = forwardRef<
     className={cn(
       "border-t border-border bg-background-secondary font-medium",
       className
-    )}
+    )} data-sonance-name="table"
     {...props}
   />
 ));
@@ -65,7 +65,7 @@ export const TableRow = forwardRef<
       "hover:bg-card-hover",
       "data-[state=selected]:bg-secondary-hover",
       className
-    )}
+    )} data-sonance-name="table"
     {...props}
   />
 ));
@@ -83,7 +83,7 @@ export const TableHead = forwardRef<
       "text-xs uppercase tracking-widest",
       "[&:has([role=checkbox])]:pr-0",
       className
-    )}
+    )} data-sonance-name="table"
     {...props}
   />
 ));
@@ -100,7 +100,7 @@ export const TableCell = forwardRef<
       "p-4 align-middle text-foreground",
       "[&:has([role=checkbox])]:pr-0",
       className
-    )}
+    )} data-sonance-name="table"
     {...props}
   />
 ));
@@ -113,7 +113,7 @@ export const TableCaption = forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-foreground-muted", className)}
+    className={cn("mt-4 text-sm text-foreground-muted", className)} data-sonance-name="table"
     {...props}
   />
 ));