sonance-brand-mcp 1.2.5 → 1.3.2

package/dist/assets/components/date-picker.stories.tsx

@@ -60,7 +60,7 @@ export const Default: Story = {
   render: () => {
     const [date, setDate] = useState<Date | undefined>(undefined);
     return (
-      <div className="w-72">
+      <div data-sonance-name="date-picker.stories" className="w-72">
         <DatePicker
           value={date}
           onValueChange={setDate}
@@ -134,7 +134,7 @@ export const WithMinMaxDates: Story = {
           minDate={addDays(today, 1)}
           maxDate={addDays(today, 30)}
         />
-        <p className="text-xs text-foreground-muted">
+        <p id="with-min-max-dates-p-delivery-available-w" className="text-xs text-foreground-muted">
           Delivery available within 1-30 days from today
         </p>
       </div>
@@ -237,7 +237,7 @@ export const FormExample: Story = {
 
     return (
       <div className="space-y-4 w-72">
-        <h3 className="text-sm font-medium">Book Your Stay</h3>
+        <h3 id="form-example-h3-book-your-stay" className="text-sm font-medium">Book Your Stay</h3>
         <DatePicker
           label="Check-in"
           placeholder="Select check-in date"
@@ -254,7 +254,7 @@ export const FormExample: Story = {
           error={checkOutError}
         />
         {checkIn && checkOut && !checkOutError && (
-          <p className="text-sm text-foreground-muted">
+          <p id="form-example-p-mathceilcheckoutgett" className="text-sm text-foreground-muted">
             {Math.ceil((checkOut.getTime() - checkIn.getTime()) / (1000 * 60 * 60 * 24))} nights
           </p>
         )}
@@ -281,11 +281,11 @@ export const StateMatrix: Story = {
     const states: DatePickerState[] = ['default', 'hover', 'focus', 'open', 'error', 'disabled'];
     return (
       <div className="space-y-6 w-72">
-        <h3 className="text-sm font-medium text-foreground-muted">DatePicker States</h3>
+        <h3 id="state-matrix-h3-datepicker-states" className="text-sm font-medium text-foreground-muted">DatePicker 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>
               <DatePicker
                 state={state}
                 placeholder="Select date"
@@ -305,14 +305,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">
           <DatePicker label="Appointment Date" placeholder="Select date" />
         </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">
             <DatePicker label="Check-in" placeholder="Select date" />
@@ -322,7 +322,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-4">
             <DatePicker label="Default" placeholder="Select date" />

package/dist/assets/components/date-picker.tsx

@@ -93,7 +93,7 @@ export function DatePicker({
   };
 
   return (
-    <div ref={containerRef} className={cn("relative w-full", className)}>
+    <div data-sonance-name="date-picker" ref={containerRef} className={cn("relative w-full", className)}>
       {label && (
         <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
           {label}
@@ -113,7 +113,7 @@ export function DatePicker({
           getStateStyles(state)
         )}
       >
-        <span className={value ? "text-foreground" : "text-input-placeholder"}>
+        <span id="span-value-formatvalue-da" className={value ? "text-foreground" : "text-input-placeholder"}>
           {value ? format(value, dateFormat) : placeholder}
         </span>
         <CalendarIcon className="h-4 w-4 text-foreground-muted" />
@@ -131,7 +131,7 @@ export function DatePicker({
         </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/date-range-picker.stories.tsx

@@ -57,7 +57,7 @@ export const Default: Story = {
   render: () => {
     const [range, setRange] = useState<DateRange>({ start: undefined, end: undefined });
     return (
-      <div className="w-80">
+      <div data-sonance-name="date-range-picker.stories" className="w-80">
         <DateRangePicker
           value={range}
           onValueChange={setRange}
@@ -135,7 +135,7 @@ export const WithMinMaxDates: Story = {
           minDate={today}
           maxDate={addMonths(today, 3)}
         />
-        <p className="text-xs text-foreground-muted">
+        <p id="with-min-max-dates-p-available-dates-toda" className="text-xs text-foreground-muted">
           Available dates: Today through {addMonths(today, 3).toLocaleDateString()}
         </p>
       </div>
@@ -204,7 +204,7 @@ export const HotelBookingExample: Story = {
 
     return (
       <div className="w-80 space-y-4 p-6 border border-border rounded-sm">
-        <h3 className="font-medium">Reserve Your Room</h3>
+        <h3 id="hotel-booking-example-h3-reserve-your-room" className="font-medium">Reserve Your Room</h3>
         <DateRangePicker
           label="Stay Duration"
           placeholder="Select check-in and check-out"
@@ -216,16 +216,16 @@ export const HotelBookingExample: Story = {
         {nights > 0 && (
           <div className="space-y-2 pt-2 border-t border-border">
             <div className="flex justify-between text-sm">
-              <span className="text-foreground-muted">Duration</span>
-              <span>{nights} night{nights > 1 ? 's' : ''}</span>
+              <span id="hotel-booking-example-span-duration" className="text-foreground-muted">Duration</span>
+              <span id="hotel-booking-example-span-nights-nightnights-1">{nights} night{nights > 1 ? 's' : ''}</span>
             </div>
             <div className="flex justify-between text-sm">
-              <span className="text-foreground-muted">Rate per night</span>
-              <span>$299</span>
+              <span id="hotel-booking-example-span-rate-per-night" className="text-foreground-muted">Rate per night</span>
+              <span id="hotel-booking-example-span-299">$299</span>
             </div>
             <div className="flex justify-between font-medium pt-2 border-t border-border">
-              <span>Total</span>
-              <span>${(nights * 299).toLocaleString()}</span>
+              <span id="hotel-booking-example-span-total">Total</span>
+              <span id="hotel-booking-example-span-nights-299tolocalest">${(nights * 299).toLocaleString()}</span>
             </div>
           </div>
         )}
@@ -301,14 +301,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">
             <DateRangePicker label="Travel Dates" placeholder="Select dates" />
           </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">
               <DateRangePicker label="Booking Period" placeholder="Select range" />
@@ -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="grid grid-cols-3 gap-4">
               <DateRangePicker label="Default" placeholder="Select range" />

package/dist/assets/components/date-range-picker.tsx

@@ -90,7 +90,7 @@ export function DateRangePicker({
   };
 
   return (
-    <div ref={containerRef} className={cn("relative w-full", className)}>
+    <div data-sonance-name="date-range-picker" ref={containerRef} className={cn("relative w-full", className)}>
       {label && (
         <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
           {label}
@@ -109,7 +109,7 @@ export function DateRangePicker({
           isOpen && "border-input-focus"
         )}
       >
-        <span className={value.start ? "text-foreground" : "text-input-placeholder"}>
+        <span id="span-getdisplayvalue" className={value.start ? "text-foreground" : "text-input-placeholder"}>
           {getDisplayValue()}
         </span>
         <CalendarIcon className="h-4 w-4 text-foreground-muted" />
@@ -126,7 +126,7 @@ export function DateRangePicker({
         </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/dialog.stories.tsx

@@ -35,7 +35,7 @@ export const Default: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+        <Button id="default-button" onClick={() => setOpen(true)}>Open Dialog</Button>
         <Dialog open={open} onClose={() => setOpen(false)}>
           <DialogContent>
             <DialogHeader>
@@ -45,15 +45,15 @@ export const Default: Story = {
               </DialogDescription>
             </DialogHeader>
             <DialogBody>
-              <p className="text-foreground-secondary">
+              <p id="default-p-dialog-body-content-" className="text-foreground-secondary">
                 Dialog body content goes here. You can add any content you need.
               </p>
             </DialogBody>
             <DialogFooter>
-              <Button variant="secondary" onClick={() => setOpen(false)}>
+              <Button id="default-button-secondary" variant="secondary" onClick={() => setOpen(false)}>
                 Cancel
               </Button>
-              <Button onClick={() => setOpen(false)}>Confirm</Button>
+              <Button id="default-button" onClick={() => setOpen(false)}>Confirm</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>
@@ -68,7 +68,7 @@ export const Confirmation: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button variant="secondary" onClick={() => setOpen(true)}>
+        <Button id="confirmation-button-secondary" variant="secondary" onClick={() => setOpen(true)}>
           Delete Item
         </Button>
         <Dialog open={open} onClose={() => setOpen(false)}>
@@ -81,10 +81,10 @@ export const Confirmation: Story = {
               </DialogDescription>
             </DialogHeader>
             <DialogFooter>
-              <Button variant="secondary" onClick={() => setOpen(false)}>
+              <Button id="confirmation-button-secondary" variant="secondary" onClick={() => setOpen(false)}>
                 Cancel
               </Button>
-              <Button onClick={() => setOpen(false)}>Delete</Button>
+              <Button id="confirmation-button" onClick={() => setOpen(false)}>Delete</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>
@@ -99,7 +99,7 @@ export const FormDialog: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Add New Item</Button>
+        <Button id="form-dialog-button" onClick={() => setOpen(true)}>Add New Item</Button>
         <Dialog open={open} onClose={() => setOpen(false)}>
           <DialogContent>
             <DialogHeader>
@@ -110,16 +110,16 @@ export const FormDialog: Story = {
             </DialogHeader>
             <DialogBody>
               <form className="space-y-4">
-                <Input label="Item Name" placeholder="Enter item name" />
-                <Input label="SKU" placeholder="Enter SKU" />
-                <Input label="Price" type="number" placeholder="0.00" />
+                <Input id="form-dialog-input-enter-item-name" label="Item Name" placeholder="Enter item name" />
+                <Input id="form-dialog-input-enter-sku" label="SKU" placeholder="Enter SKU" />
+                <Input id="form-dialog-input-000" label="Price" type="number" placeholder="0.00" />
               </form>
             </DialogBody>
             <DialogFooter>
-              <Button variant="secondary" onClick={() => setOpen(false)}>
+              <Button id="form-dialog-button-secondary" variant="secondary" onClick={() => setOpen(false)}>
                 Cancel
               </Button>
-              <Button onClick={() => setOpen(false)}>Add Item</Button>
+              <Button id="form-dialog-button" onClick={() => setOpen(false)}>Add Item</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>
@@ -134,7 +134,7 @@ export const WithoutCloseButton: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+        <Button id="without-close-button-button" onClick={() => setOpen(true)}>Open Dialog</Button>
         <Dialog open={open} onClose={() => setOpen(false)}>
           <DialogContent showClose={false}>
             <DialogHeader>
@@ -144,12 +144,12 @@ export const WithoutCloseButton: Story = {
               </DialogDescription>
             </DialogHeader>
             <DialogBody>
-              <p className="text-foreground-secondary">
+              <p id="without-close-button-p-this-dialog-has-no-c" className="text-foreground-secondary">
                 This dialog has no close button, requiring user to use the action buttons.
               </p>
             </DialogBody>
             <DialogFooter>
-              <Button onClick={() => setOpen(false)}>Complete</Button>
+              <Button id="without-close-button-button" onClick={() => setOpen(false)}>Complete</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>
@@ -164,7 +164,7 @@ export const LongContent: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Terms & Conditions</Button>
+        <Button id="long-content-button" onClick={() => setOpen(true)}>Terms & Conditions</Button>
         <Dialog open={open} onClose={() => setOpen(false)}>
           <DialogContent className="max-w-2xl">
             <DialogHeader>
@@ -173,7 +173,7 @@ export const LongContent: Story = {
             <DialogBody className="max-h-[60vh] overflow-y-auto">
               <div className="space-y-4 text-foreground-secondary text-sm">
                 {Array.from({ length: 10 }, (_, i) => (
-                  <p key={i}>
+                  <p id="long-content-p-lorem-ipsum-dolor-si" key={i}>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                     enim ad minim veniam, quis nostrud exercitation ullamco laboris
@@ -185,10 +185,10 @@ export const LongContent: Story = {
               </div>
             </DialogBody>
             <DialogFooter>
-              <Button variant="secondary" onClick={() => setOpen(false)}>
+              <Button id="long-content-button-secondary" variant="secondary" onClick={() => setOpen(false)}>
                 Decline
               </Button>
-              <Button onClick={() => setOpen(false)}>Accept</Button>
+              <Button id="long-content-button" onClick={() => setOpen(false)}>Accept</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>
@@ -203,19 +203,19 @@ export const AlertDialog: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Button onClick={() => setOpen(true)}>Show Alert</Button>
+        <Button id="alert-dialog-button" onClick={() => setOpen(true)}>Show Alert</Button>
         <Dialog open={open} onClose={() => setOpen(false)}>
           <DialogContent className="max-w-sm">
             <DialogHeader>
               <DialogTitle>Alert</DialogTitle>
             </DialogHeader>
             <DialogBody>
-              <p className="text-foreground-secondary">
+              <p id="alert-dialog-p-your-session-will-ex" className="text-foreground-secondary">
                 Your session will expire in 5 minutes.
               </p>
             </DialogBody>
             <DialogFooter>
-              <Button onClick={() => setOpen(false)}>Okay</Button>
+              <Button id="alert-dialog-button" onClick={() => setOpen(false)}>Okay</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>
@@ -230,52 +230,52 @@ 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 bg-black/50">
           <div className="bg-background rounded-lg p-4 shadow-lg">
             <div className="space-y-2">
-              <h3 className="text-lg font-semibold">Confirm Action</h3>
-              <p className="text-sm text-foreground-secondary">Are you sure you want to proceed?</p>
+              <h3 id="responsive-matrix-h3-confirm-action" className="text-lg font-semibold">Confirm Action</h3>
+              <p id="responsive-matrix-p-are-you-sure-you-wan" className="text-sm text-foreground-secondary">Are you sure you want to proceed?</p>
             </div>
             <div className="flex flex-col gap-2 mt-4">
-              <Button className="w-full">Confirm</Button>
-              <Button variant="secondary" className="w-full">Cancel</Button>
+              <Button id="responsive-matrix-button" className="w-full">Confirm</Button>
+              <Button id="responsive-matrix-button-secondary" variant="secondary" className="w-full">Cancel</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 bg-black/50 flex items-center justify-center">
           <div className="bg-background rounded-lg p-6 shadow-lg w-[400px]">
             <div className="space-y-2">
-              <h3 className="text-lg font-semibold">Add New Item</h3>
-              <p className="text-sm text-foreground-secondary">Fill out the form below.</p>
+              <h3 id="responsive-matrix-h3-add-new-item" className="text-lg font-semibold">Add New Item</h3>
+              <p id="responsive-matrix-p-fill-out-the-form-be" className="text-sm text-foreground-secondary">Fill out the form below.</p>
             </div>
             <div className="space-y-4 mt-4">
-              <Input label="Item Name" placeholder="Enter name" />
-              <Input label="Price" type="number" placeholder="0.00" />
+              <Input id="responsive-matrix-input-enter-name" label="Item Name" placeholder="Enter name" />
+              <Input id="responsive-matrix-input-000" label="Price" type="number" placeholder="0.00" />
             </div>
             <div className="flex justify-end gap-2 mt-6">
-              <Button variant="secondary">Cancel</Button>
-              <Button>Add Item</Button>
+              <Button id="responsive-matrix-button-secondary" variant="secondary">Cancel</Button>
+              <Button id="responsive-matrix-button">Add Item</Button>
             </div>
           </div>
         </div>
       </div>
       {/* Desktop */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <h4 id="responsive-matrix-h4-desktop-1280px" className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
         <div className="w-[1280px] border border-dashed border-border p-4 bg-black/50 flex items-center justify-center">
           <div className="bg-background rounded-lg p-6 shadow-lg w-[500px]">
             <div className="space-y-2">
-              <h3 className="text-lg font-semibold">Delete Item?</h3>
-              <p className="text-sm text-foreground-secondary">This action cannot be undone. This will permanently delete the item from your account.</p>
+              <h3 id="responsive-matrix-h3-delete-item" className="text-lg font-semibold">Delete Item?</h3>
+              <p id="responsive-matrix-p-this-action-cannot-b" className="text-sm text-foreground-secondary">This action cannot be undone. This will permanently delete the item from your account.</p>
             </div>
             <div className="flex justify-end gap-2 mt-6">
-              <Button variant="secondary">Cancel</Button>
-              <Button>Delete</Button>
+              <Button id="responsive-matrix-button-secondary" variant="secondary">Cancel</Button>
+              <Button id="responsive-matrix-button">Delete</Button>
             </div>
           </div>
         </div>

package/dist/assets/components/dialog.tsx

@@ -67,13 +67,7 @@ export const DialogContent = forwardRef<
   const context = useContext(DialogContext);
 
   return (
-    <div
-      ref={ref}
-      className={cn(
-        "relative w-full max-w-lg mx-4 bg-background-elevated border border-border shadow-xl",
-        "max-h-[90vh] overflow-auto",
-        className
-      )}
+    <div data-sonance-name="dialog"
       {...props}
     >
       {showClose && context && (
@@ -82,7 +76,7 @@ export const DialogContent = forwardRef<
           className="absolute right-4 top-4 p-1 text-foreground-muted hover:text-foreground transition-colors"
         >
           <X className="h-5 w-5" />
-          <span className="sr-only">Close</span>
+          <span id="dialog-content-span-close" className="sr-only">Close</span>
         </button>
       )}
       {children}
@@ -98,7 +92,7 @@ export const DialogHeader = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("px-6 py-4 border-b border-border", className)}
+    className={cn("px-6 py-4 border-b border-border", className)} data-sonance-name="dialog"
     {...props}
   />
 ));
@@ -110,6 +104,7 @@ export const DialogTitle = forwardRef<
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
   <h2
+    id="dialog-title-h2"
     ref={ref}
     className={cn("text-lg font-medium text-foreground", className)}
     {...props}
@@ -123,8 +118,9 @@ export const DialogDescription = forwardRef<
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
   <p
+    id="dialog-description-p"
     ref={ref}
-    className={cn("mt-1 text-sm text-foreground-secondary", className)}
+    className={cn("mt-1 text-sm text-foreground-secondary", className)} data-sonance-name="dialog"
     {...props}
   />
 ));
@@ -135,7 +131,7 @@ export const DialogBody = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("px-6 py-4", className)} {...props} />
+  <div ref={ref} className={cn("px-6 py-4", className)} data-sonance-name="dialog" {...props} />
 ));
 
 DialogBody.displayName = "DialogBody";
@@ -149,7 +145,7 @@ export const DialogFooter = forwardRef<
     className={cn(
       "flex items-center justify-end gap-3 px-6 py-4 border-t border-border",
       className
-    )}
+    )} data-sonance-name="dialog"
     {...props}
   />
 ));

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

@@ -27,9 +27,9 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => (
     <div className="w-full max-w-md">
-      <p className="text-foreground-secondary">Content above the divider</p>
+      <p id="default-p-content-above-the-di" className="text-foreground-secondary">Content above the divider</p>
       <Divider className="my-4" />
-      <p className="text-foreground-secondary">Content below the divider</p>
+      <p id="default-p-content-below-the-di" className="text-foreground-secondary">Content below the divider</p>
     </div>
   ),
 };
@@ -37,9 +37,9 @@ export const Default: Story = {
 export const WithLabel: Story = {
   render: () => (
     <div className="w-full max-w-md">
-      <p className="text-foreground-secondary">Content above</p>
+      <p id="with-label-p-content-above" className="text-foreground-secondary">Content above</p>
       <Divider label="OR" className="my-4" />
-      <p className="text-foreground-secondary">Content below</p>
+      <p id="with-label-p-content-below" className="text-foreground-secondary">Content below</p>
     </div>
   ),
 };
@@ -47,11 +47,11 @@ export const WithLabel: Story = {
 export const Vertical: Story = {
   render: () => (
     <div className="flex items-center gap-4 h-12">
-      <span className="text-foreground-secondary">Item 1</span>
+      <span id="vertical-span-item-1" className="text-foreground-secondary">Item 1</span>
       <Divider orientation="vertical" />
-      <span className="text-foreground-secondary">Item 2</span>
+      <span id="vertical-span-item-2" className="text-foreground-secondary">Item 2</span>
       <Divider orientation="vertical" />
-      <span className="text-foreground-secondary">Item 3</span>
+      <span id="vertical-span-item-3" className="text-foreground-secondary">Item 3</span>
     </div>
   ),
 };
@@ -59,10 +59,10 @@ export const Vertical: Story = {
 export const InCard: Story = {
   render: () => (
     <div className="w-80 border border-border p-4">
-      <h3 className="font-medium text-foreground">Card Title</h3>
-      <p className="text-sm text-foreground-muted mt-1">Card subtitle or description</p>
+      <h3 id="in-card-h3-card-title" className="font-medium text-foreground">Card Title</h3>
+      <p id="in-card-p-card-subtitle-or-des" className="text-sm text-foreground-muted mt-1">Card subtitle or description</p>
       <Divider className="my-4" />
-      <p className="text-sm text-foreground-secondary">
+      <p id="in-card-p-this-is-the-main-con" className="text-sm text-foreground-secondary">
         This is the main content area of the card. The divider separates the header from the content.
       </p>
       <Divider className="my-4" />
@@ -99,12 +99,12 @@ export const LoginForm: Story = {
 export const NavigationBar: Story = {
   render: () => (
     <nav className="flex items-center gap-4 p-4 border border-border">
-      <a href="#" className="text-sm text-foreground hover:text-foreground-secondary">Home</a>
-      <a href="#" className="text-sm text-foreground hover:text-foreground-secondary">Products</a>
-      <a href="#" className="text-sm text-foreground hover:text-foreground-secondary">About</a>
+      <a id="nav-a" href="#" className="text-sm text-foreground hover:text-foreground-secondary">Home</a>
+      <a id="nav-a" href="#" className="text-sm text-foreground hover:text-foreground-secondary">Products</a>
+      <a id="nav-a" href="#" className="text-sm text-foreground hover:text-foreground-secondary">About</a>
       <Divider orientation="vertical" className="h-4" />
-      <a href="#" className="text-sm text-foreground hover:text-foreground-secondary">Support</a>
-      <a href="#" className="text-sm text-foreground hover:text-foreground-secondary">Contact</a>
+      <a id="nav-a" href="#" className="text-sm text-foreground hover:text-foreground-secondary">Support</a>
+      <a id="navigation-bar-a" href="#" className="text-sm text-foreground hover:text-foreground-secondary">Contact</a>
     </nav>
   ),
 };
@@ -113,23 +113,23 @@ export const AllExamples: Story = {
   render: () => (
     <div className="space-y-8 w-full max-w-md">
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Horizontal</p>
+        <p id="all-examples-p-horizontal" className="text-xs text-foreground-muted mb-2">Horizontal</p>
         <Divider />
       </div>
 
       <div>
-        <p className="text-xs text-foreground-muted mb-2">With Label</p>
+        <p id="all-examples-p-with-label" className="text-xs text-foreground-muted mb-2">With Label</p>
         <Divider label="Section" />
       </div>
 
       <div>
-        <p className="text-xs text-foreground-muted mb-2">Vertical (in flex container)</p>
+        <p id="all-examples-p-vertical-in-flex-con" className="text-xs text-foreground-muted mb-2">Vertical (in flex container)</p>
         <div className="flex items-center gap-4 h-8">
-          <span>Left</span>
+          <span id="all-examples-span-left">Left</span>
           <Divider orientation="vertical" />
-          <span>Center</span>
+          <span id="all-examples-span-center">Center</span>
           <Divider orientation="vertical" />
-          <span>Right</span>
+          <span id="all-examples-span-right">Right</span>
         </div>
       </div>
     </div>
@@ -142,32 +142,32 @@ 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">
-          <p className="text-foreground-secondary text-sm">Content above</p>
+          <p id="responsive-matrix-p-content-above" className="text-foreground-secondary text-sm">Content above</p>
           <Divider className="my-4" />
-          <p className="text-foreground-secondary text-sm">Content below</p>
+          <p id="responsive-matrix-p-content-below" className="text-foreground-secondary text-sm">Content below</p>
         </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">
           <Divider label="OR" />
         </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 items-center gap-4 h-8">
-            <span className="text-foreground-secondary">Section 1</span>
+            <span id="responsive-matrix-span-section-1" className="text-foreground-secondary">Section 1</span>
             <Divider orientation="vertical" />
-            <span className="text-foreground-secondary">Section 2</span>
+            <span id="responsive-matrix-span-section-2" className="text-foreground-secondary">Section 2</span>
             <Divider orientation="vertical" />
-            <span className="text-foreground-secondary">Section 3</span>
+            <span id="responsive-matrix-span-section-3" className="text-foreground-secondary">Section 3</span>
             <Divider orientation="vertical" />
-            <span className="text-foreground-secondary">Section 4</span>
+            <span id="responsive-matrix-span-section-4" className="text-foreground-secondary">Section 4</span>
           </div>
         </div>
       </div>