sonance-brand-mcp 1.2.5 → 1.3.2

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

@@ -35,6 +35,7 @@ export const Default: Story = {
   render: () => (
     <div className="w-64">
       <Image
+        id="default-speaker-system"
         src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop"
         alt="Speaker system"
       />
@@ -46,8 +47,9 @@ export const AspectRatios: Story = {
   render: () => (
     <div className="grid grid-cols-2 gap-4 max-w-2xl">
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Auto</p>
+        <p id="aspect-ratios-p-auto" className="text-xs text-foreground-muted mb-2">Auto</p>
         <Image
+          id="aspect-ratios-auto-aspect"
           src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop"
           alt="Auto aspect"
           aspectRatio="auto"
@@ -55,8 +57,9 @@ export const AspectRatios: Story = {
         />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Square</p>
+        <p id="aspect-ratios-p-square" className="text-xs text-foreground-muted mb-2">Square</p>
         <Image
+          id="aspect-ratios-square-aspect"
           src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop"
           alt="Square aspect"
           aspectRatio="square"
@@ -64,8 +67,9 @@ export const AspectRatios: Story = {
         />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Video (16:9)</p>
+        <p id="aspect-ratios-p-video-169" className="text-xs text-foreground-muted mb-2">Video (16:9)</p>
         <Image
+          id="aspect-ratios-video-aspect"
           src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=450&fit=crop"
           alt="Video aspect"
           aspectRatio="video"
@@ -73,8 +77,9 @@ export const AspectRatios: Story = {
         />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Wide (21:9)</p>
+        <p id="aspect-ratios-p-wide-219" className="text-xs text-foreground-muted mb-2">Wide (21:9)</p>
         <Image
+          id="aspect-ratios-wide-aspect"
           src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=343&fit=crop"
           alt="Wide aspect"
           aspectRatio="wide"
@@ -89,8 +94,9 @@ export const ObjectFit: Story = {
   render: () => (
     <div className="grid grid-cols-3 gap-4 max-w-3xl">
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Cover</p>
+        <p id="object-fit-p-cover" className="text-xs text-foreground-muted mb-2">Cover</p>
         <Image
+          id="object-fit-cover-fit"
           src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=200&fit=crop"
           alt="Cover fit"
           aspectRatio="square"
@@ -99,8 +105,9 @@ export const ObjectFit: Story = {
         />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Contain</p>
+        <p id="object-fit-p-contain" className="text-xs text-foreground-muted mb-2">Contain</p>
         <Image
+          id="object-fit-contain-fit"
           src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=200&fit=crop"
           alt="Contain fit"
           aspectRatio="square"
@@ -109,8 +116,9 @@ export const ObjectFit: Story = {
         />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Fill</p>
+        <p id="object-fit-p-fill" className="text-xs text-foreground-muted mb-2">Fill</p>
         <Image
+          id="object-fit-fill-fit"
           src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=200&fit=crop"
           alt="Fill fit"
           aspectRatio="square"
@@ -126,8 +134,9 @@ export const BorderRadius: Story = {
   render: () => (
     <div className="flex gap-4 flex-wrap">
       <div>
-        <p className="text-xs text-foreground-muted mb-2">None</p>
+        <p id="border-radius-p-none" className="text-xs text-foreground-muted mb-2">None</p>
         <Image
+          id="border-radius-no-radius"
           src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=150&h=150&fit=crop"
           alt="No radius"
           aspectRatio="square"
@@ -136,8 +145,9 @@ export const BorderRadius: Story = {
         />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Small</p>
+        <p id="border-radius-p-small" className="text-xs text-foreground-muted mb-2">Small</p>
         <Image
+          id="border-radius-small-radius"
           src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=150&h=150&fit=crop"
           alt="Small radius"
           aspectRatio="square"
@@ -146,8 +156,9 @@ export const BorderRadius: Story = {
         />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Medium</p>
+        <p id="border-radius-p-medium" className="text-xs text-foreground-muted mb-2">Medium</p>
         <Image
+          id="border-radius-medium-radius"
           src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=150&h=150&fit=crop"
           alt="Medium radius"
           aspectRatio="square"
@@ -156,8 +167,9 @@ export const BorderRadius: Story = {
         />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Large</p>
+        <p id="border-radius-p-large" className="text-xs text-foreground-muted mb-2">Large</p>
         <Image
+          id="border-radius-large-radius"
           src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=150&h=150&fit=crop"
           alt="Large radius"
           aspectRatio="square"
@@ -166,8 +178,9 @@ export const BorderRadius: Story = {
         />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Full</p>
+        <p id="border-radius-p-full" className="text-xs text-foreground-muted mb-2">Full</p>
         <Image
+          id="border-radius-full-radius"
           src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=150&h=150&fit=crop"
           alt="Full radius"
           aspectRatio="square"
@@ -183,6 +196,7 @@ export const ErrorState: Story = {
   render: () => (
     <div className="w-64">
       <Image
+        id="error-state-failed-image"
         src="https://invalid-url-that-will-fail.com/image.jpg"
         alt="Failed image"
         aspectRatio="video"
@@ -195,13 +209,14 @@ export const CustomFallback: Story = {
   render: () => (
     <div className="w-64">
       <Image
+        id="custom-fallback-failed-image"
         src="https://invalid-url-that-will-fail.com/image.jpg"
         alt="Failed image"
         aspectRatio="video"
         fallback={
           <div className="flex flex-col items-center gap-2 text-foreground-muted">
-            <span className="text-3xl">📷</span>
-            <span className="text-sm">Image not available</span>
+            <span id="custom-fallback-span" className="text-3xl">📷</span>
+            <span id="custom-fallback-span-image-not-available" className="text-sm">Image not available</span>
           </div>
         }
       />
@@ -213,6 +228,7 @@ export const WithoutSkeleton: Story = {
   render: () => (
     <div className="w-64">
       <Image
+        id="without-skeleton-no-skeleton"
         src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop"
         alt="No skeleton"
         showSkeleton={false}
@@ -225,6 +241,7 @@ export const ZoomOnHover: Story = {
   render: () => (
     <div className="w-64">
       <ZoomImage
+        id="zoom-on-hover"
         src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop"
         alt="Zoom on hover"
         aspectRatio="square"
@@ -238,6 +255,7 @@ export const Gallery: Story = {
   render: () => (
     <div className="max-w-2xl">
       <ImageGallery
+        id="gallery"
         images={[
           { src: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop', alt: 'Product 1' },
           { src: 'https://images.unsplash.com/photo-1545454675-3531b543be5d?w=400&h=400&fit=crop', alt: 'Product 2' },
@@ -263,14 +281,14 @@ export const GalleryColumns: Story = {
     ];
 
     return (
-      <div className="space-y-8">
+      <div data-sonance-name="image.stories" className="space-y-8">
         <div>
-          <p className="text-xs text-foreground-muted mb-2">2 Columns</p>
-          <ImageGallery images={images} columns={2} />
+          <p id="gallery-columns-p-2-columns" className="text-xs text-foreground-muted mb-2">2 Columns</p>
+          <ImageGallery id="gallery-columns" images={images} columns={2} />
         </div>
         <div>
-          <p className="text-xs text-foreground-muted mb-2">4 Columns</p>
-          <ImageGallery images={images} columns={4} />
+          <p id="gallery-columns-p-4-columns" className="text-xs text-foreground-muted mb-2">4 Columns</p>
+          <ImageGallery id="gallery-columns" images={images} columns={4} />
         </div>
       </div>
     );
@@ -281,14 +299,15 @@ export const ProductImage: Story = {
   render: () => (
     <div className="w-80 border border-border">
       <Image
+        id="product-image-vp66-tl-inwall-speak"
         src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=400&fit=crop"
         alt="VP66 TL In-Wall Speaker"
         aspectRatio="video"
       />
       <div className="p-4">
-        <h3 className="font-medium text-foreground">VP66 TL</h3>
-        <p className="text-sm text-foreground-muted">In-Wall Speaker</p>
-        <p className="text-lg font-medium text-foreground mt-2">$1,299.00</p>
+        <h3 id="product-image-h3-vp66-tl" className="font-medium text-foreground">VP66 TL</h3>
+        <p id="product-image-p-inwall-speaker" className="text-sm text-foreground-muted">In-Wall Speaker</p>
+        <p id="product-image-p-129900" className="text-lg font-medium text-foreground mt-2">$1,299.00</p>
       </div>
     </div>
   ),
@@ -300,9 +319,10 @@ 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">
           <Image
+            id="responsive-matrix-speaker"
             src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop"
             alt="Speaker"
             aspectRatio="video"
@@ -311,15 +331,17 @@ 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">
             <Image
+              id="responsive-matrix-square"
               src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop"
               alt="Square"
               aspectRatio="square"
             />
             <Image
+              id="responsive-matrix-video"
               src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=400&fit=crop"
               alt="Video"
               aspectRatio="video"
@@ -329,9 +351,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">
           <ImageGallery
+            id="responsive-matrix"
             images={[
               { src: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop', alt: 'Product 1' },
               { src: 'https://images.unsplash.com/photo-1545454675-3531b543be5d?w=400&h=400&fit=crop', alt: 'Product 2' },

package/dist/assets/components/image.tsx

@@ -74,11 +74,11 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(
 
     if (status === "error") {
       return (
-        <div className={cn(containerClasses, "flex items-center justify-center")}>
+        <div data-sonance-name="image" className={cn(containerClasses, "flex items-center justify-center")}>
           {fallback || (
             <div className="flex flex-col items-center gap-2 text-foreground-muted">
               <ImageOff className="h-8 w-8" />
-              <span className="text-xs">Failed to load</span>
+              <span id="span-failed-to-load" className="text-xs">Failed to load</span>
             </div>
           )}
         </div>
@@ -86,11 +86,12 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(
     }
 
     return (
-      <div className={containerClasses}>
+      <div data-sonance-name="image" className={containerClasses}>
         {status === "loading" && showSkeleton && (
           <Skeleton className="absolute inset-0 w-full h-full" />
         )}
         <img
+          id="image"
           ref={ref}
           src={src}
           alt={alt}
@@ -100,7 +101,7 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(
             "w-full h-full transition-opacity duration-300",
             objectFitClasses[objectFit],
             status === "loading" ? "opacity-0" : "opacity-100"
-          )}
+          )} data-sonance-name="image"
           {...props}
         />
       </div>
@@ -119,7 +120,8 @@ export function ZoomImage({ zoomScale = 1.1, className, ...props }: ZoomImagePro
   return (
     <div className={cn("overflow-hidden", className)}>
       <Image
-        {...props}
+        id="zoom-image"
+        data-sonance-name="image" {...props}
         className={cn(
           "transition-transform duration-300 hover:scale-[var(--zoom-scale)]"
         )}
@@ -159,6 +161,7 @@ export function ImageGallery({
     <div className={cn("grid", columnClasses[columns], gapClasses[gap], className)}>
       {images.map((image, index) => (
         <Image
+          id="image-gallery"
           key={index}
           src={image.src}
           alt={image.alt}

package/dist/assets/components/input-otp.stories.tsx

@@ -56,13 +56,13 @@ export const Default: Story = {
   render: () => {
     const [value, setValue] = useState('');
     return (
-      <div className="space-y-4">
+      <div data-sonance-name="input-otp.stories" className="space-y-4">
         <InputOTP
           value={value}
           onValueChange={setValue}
           onComplete={(code) => console.log('Complete:', code)}
         />
-        <p className="text-sm text-foreground-muted">
+        <p id="default-p-value-value-empty" className="text-sm text-foreground-muted">
           Value: {value || 'empty'}
         </p>
       </div>
@@ -154,7 +154,7 @@ export const AutoFocus: Story = {
           value={value}
           onValueChange={setValue}
         />
-        <p className="text-sm text-foreground-muted">
+        <p id="auto-focus-p-the-first-input-is-a" className="text-sm text-foreground-muted">
           The first input is automatically focused
         </p>
       </div>
@@ -192,10 +192,10 @@ export const WithCompletionHandler: Story = {
           error={status === 'error' ? 'Invalid code. Try 123456' : undefined}
         />
         {status === 'verifying' && (
-          <p className="text-sm text-foreground-muted">Verifying...</p>
+          <p id="with-completion-handler-p-verifying" className="text-sm text-foreground-muted">Verifying...</p>
         )}
         {status === 'success' && (
-          <p className="text-sm text-success">Code verified successfully!</p>
+          <p id="with-completion-handler-p-code-verified-succes" className="text-sm text-success">Code verified successfully!</p>
         )}
       </div>
     );
@@ -220,8 +220,8 @@ export const VerificationFlowExample: Story = {
       return (
         <div className="w-80 p-6 border border-success rounded-sm text-center space-y-2">
           <div className="text-success text-2xl">&#10003;</div>
-          <h3 className="font-medium">Verified!</h3>
-          <p className="text-sm text-foreground-muted">
+          <h3 id="verification-flow-example-h3-verified" className="font-medium">Verified!</h3>
+          <p id="verification-flow-example-p-your-phone-number-ha" className="text-sm text-foreground-muted">
             Your phone number has been verified.
           </p>
           <button
@@ -240,8 +240,8 @@ export const VerificationFlowExample: Story = {
     return (
       <div className="w-80 space-y-4">
         <div className="text-center space-y-1">
-          <h3 className="font-medium">Verify your phone</h3>
-          <p className="text-sm text-foreground-muted">
+          <h3 id="verification-flow-example-h3-verify-your-phone" className="font-medium">Verify your phone</h3>
+          <p id="verification-flow-example-p-we-sent-a-code-to-1-" className="text-sm text-foreground-muted">
             We sent a code to +1 (555) ***-1234
           </p>
         </div>
@@ -251,7 +251,7 @@ export const VerificationFlowExample: Story = {
           onComplete={handleComplete}
           autoFocus
         />
-        <p className="text-center text-sm text-foreground-muted">
+        <p id="verification-flow-example-p" className="text-center text-sm text-foreground-muted">
           Didn&apos;t receive a code?{' '}
           <button className="text-primary hover:underline">Resend</button>
         </p>
@@ -279,11 +279,11 @@ export const StateMatrix: Story = {
     const states: InputOTPState[] = ['default', 'hover', 'focus', 'error', 'disabled'];
     return (
       <div className="space-y-6">
-        <h3 className="text-sm font-medium text-foreground-muted">InputOTP States</h3>
+        <h3 id="state-matrix-h3-inputotp-states" className="text-sm font-medium text-foreground-muted">InputOTP States</h3>
         <div className="space-y-4">
           {states.map((state) => (
             <div key={state}>
-              <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>
               <InputOTP
                 state={state}
                 length={6}
@@ -304,14 +304,14 @@ 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">
           <InputOTP label="Verification Code" length={6} />
         </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-8">
             <InputOTP label="4-Digit PIN" length={4} />
@@ -321,7 +321,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">
             <InputOTP label="Default" />

package/dist/assets/components/input-otp.tsx

@@ -126,7 +126,7 @@ export function InputOTP({
   };
 
   return (
-    <div className={cn("w-full", className)}>
+    <div data-sonance-name="input-otp" className={cn("w-full", className)}>
       {label && (
         <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
           {label}
@@ -162,7 +162,7 @@ export function InputOTP({
           />
         ))}
       </div>
-      {error && <p className="mt-2 text-sm text-error">{error}</p>}
+      {error && <p id="p-error" className="mt-2 text-sm text-error">{error}</p>}
     </div>
   );
 }
@@ -181,12 +181,12 @@ export function InputOTPGrouped({
   const groups = Math.ceil(length / groupSize);
 
   return (
-    <div className={cn("flex items-center gap-3", className)}>
+    <div data-sonance-name="input-otp" className={cn("flex items-center gap-3", className)}>
       {Array.from({ length: groups }).map((_, groupIndex) => (
         <div key={groupIndex} className="flex items-center gap-3">
-          {groupIndex > 0 && <span className="text-foreground-muted">–</span>}
+          {groupIndex > 0 && <span id="input-o-t-p-grouped-span" className="text-foreground-muted">–</span>}
           <InputOTP
-            {...props}
+            data-sonance-name="input-otp" {...props}
             length={Math.min(groupSize, length - groupIndex * groupSize)}
             className="flex-shrink-0"
           />

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

@@ -96,20 +96,23 @@ export const Password: Story = {
 export const AllStates: Story = {
   render: () => (
     <div className="space-y-6 w-80">
-      <Input placeholder="Default input" />
-      <Input label="With Label" placeholder="Enter text..." />
+      <Input id="all-states-input-default-input" placeholder="Default input" />
+      <Input id="all-states-input-enter-text" label="With Label" placeholder="Enter text..." />
       <Input
+        id="all-states-input-enter-email"
         label="With Error"
         placeholder="Enter email..."
         error="This field is required"
         defaultValue="invalid"
       />
       <Input
+        id="all-states-input-cannot-edit"
         label="Disabled"
         placeholder="Cannot edit..."
         disabled
       />
       <Input
+        id="all-states-input"
         label="With Value"
         defaultValue="Pre-filled value"
       />
@@ -121,10 +124,10 @@ export const AllStates: Story = {
 export const FormExample: Story = {
   render: () => (
     <form className="space-y-4 w-80">
-      <Input label="First Name" placeholder="John" />
-      <Input label="Last Name" placeholder="Doe" />
-      <Input label="Email" type="email" placeholder="john@example.com" />
-      <Input label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
+      <Input id="form-example-input-john" label="First Name" placeholder="John" />
+      <Input id="form-example-input-doe" label="Last Name" placeholder="Doe" />
+      <Input id="form-example-input-johnexamplecom" label="Email" type="email" placeholder="john@example.com" />
+      <Input id="form-example-input-1-555-0000000" label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
     </form>
   ),
 };
@@ -135,13 +138,14 @@ export const StateMatrix: Story = {
     const states: InputState[] = ['default', 'hover', 'focus', 'error', 'disabled'];
 
     return (
-      <div className="space-y-6 w-96">
-        <h3 className="text-sm font-medium text-foreground-muted">Input States</h3>
+      <div data-sonance-name="input.stories" className="space-y-6 w-96">
+        <h3 id="state-matrix-h3-input-states" className="text-sm font-medium text-foreground-muted">Input States</h3>
         <div className="grid grid-cols-1 gap-4">
           {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>
               <Input
+                id="state-matrix-input"
                 state={state}
                 placeholder={`${state} state`}
                 defaultValue={state !== 'default' ? 'Input value' : ''}
@@ -161,18 +165,19 @@ export const LabeledStateMatrix: Story = {
 
     return (
       <div className="space-y-6">
-        <h3 className="text-sm font-medium text-foreground-muted">Input with Label - All States</h3>
+        <h3 id="labeled-state-matrix-h3-input-with-label-all" className="text-sm font-medium text-foreground-muted">Input with Label - All States</h3>
         <div className="grid grid-cols-5 gap-4">
           {states.map((state) => (
             <div key={state} className="text-center">
               <Input
+                id="labeled-state-matrix-input-nameexamplecom"
                 label="Email"
                 state={state}
                 placeholder="name@example.com"
                 defaultValue={state !== 'default' ? 'user@email.com' : ''}
                 error={state === 'error' ? 'Invalid email' : undefined}
               />
-              <p className="text-xs text-foreground-muted mt-2 uppercase">{state}</p>
+              <p id="labeled-state-matrix-p-state" className="text-xs text-foreground-muted mt-2 uppercase">{state}</p>
             </div>
           ))}
         </div>
@@ -187,34 +192,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">
-          <Input label="Email" placeholder="name@example.com" />
-          <Input label="Password" type="password" placeholder="Enter password" />
-          <Input label="Error State" error="This field is required" defaultValue="Invalid" />
+          <Input id="responsive-matrix-input-nameexamplecom" label="Email" placeholder="name@example.com" />
+          <Input id="responsive-matrix-input-enter-password" label="Password" type="password" placeholder="Enter password" />
+          <Input id="responsive-matrix-input" label="Error State" error="This field is required" defaultValue="Invalid" />
         </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">
-            <Input label="First Name" placeholder="John" />
-            <Input label="Last Name" placeholder="Doe" />
-            <Input label="Email" type="email" placeholder="john@example.com" />
-            <Input label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
+            <Input id="responsive-matrix-input-john" label="First Name" placeholder="John" />
+            <Input id="responsive-matrix-input-doe" label="Last Name" placeholder="Doe" />
+            <Input id="responsive-matrix-input-johnexamplecom" label="Email" type="email" placeholder="john@example.com" />
+            <Input id="responsive-matrix-input-1-555-0000000" label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
           </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">
-            <Input label="First Name" placeholder="John" />
-            <Input label="Last Name" placeholder="Doe" />
-            <Input label="Email" type="email" placeholder="john@example.com" />
-            <Input label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
+            <Input id="responsive-matrix-input-john" label="First Name" placeholder="John" />
+            <Input id="responsive-matrix-input-doe" label="Last Name" placeholder="Doe" />
+            <Input id="responsive-matrix-input-johnexamplecom" label="Email" type="email" placeholder="john@example.com" />
+            <Input id="responsive-matrix-input-1-555-0000000" label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
           </div>
         </div>
       </div>

package/dist/assets/components/input.tsx

@@ -8,6 +8,8 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   error?: string;
   /** Visual state for Storybook/Figma documentation */
   state?: InputState;
+  /** Container style for the wrapper div */
+  wrapperStyle?: React.CSSProperties;
 }
 
 // State styles for Storybook/Figma visualization
@@ -25,12 +27,12 @@ const getStateStyles = (state?: InputState) => {
 };
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, label, error, state, disabled, ...props }, ref) => {
+  ({ className, label, error, state, disabled, style, wrapperStyle, ...props }, ref) => {
     const isDisabled = disabled || state === "disabled";
     const hasError = error || state === "error";
 
     return (
-      <div className="w-full">
+      <div data-sonance-name="input" className="w-full" style={wrapperStyle}>
         {label && (
           <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
             {label}
@@ -39,6 +41,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         <input
           ref={ref}
           disabled={isDisabled}
+          style={style}
           className={cn(
             "w-full border border-input-border bg-input px-4 py-3",
             "text-foreground placeholder:text-input-placeholder",
@@ -49,10 +52,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             hasError && "border-error",
             getStateStyles(state),
             className
-          )}
+          )} data-sonance-name="input"
           {...props}
         />
-        {error && <p className="mt-1 text-sm text-error">{error}</p>}
+        {error && <p id="input-p-error" className="mt-1 text-sm text-error">{error}</p>}
       </div>
     );
   }