sonance-brand-mcp 1.3.1 → 1.3.3

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

@@ -31,9 +31,9 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <Popover trigger={<Button variant="secondary">Click me</Button>}>
+    <Popover trigger={<Button id="default-button-secondary" variant="secondary">Click me</Button>}>
       <PopoverContent>
-        <p className="text-foreground-secondary">
+        <p id="default-p-this-is-the-popover-" className="text-foreground-secondary">
           This is the popover content. Click outside to close.
         </p>
       </PopoverContent>
@@ -43,9 +43,9 @@ export const Default: Story = {
 
 export const OnHover: Story = {
   render: () => (
-    <Popover trigger={<Button variant="secondary">Hover me</Button>} triggerOn="hover">
+    <Popover trigger={<Button id="on-hover-button-secondary" variant="secondary">Hover me</Button>} triggerOn="hover">
       <PopoverContent>
-        <p className="text-foreground-secondary">
+        <p id="on-hover-p-this-popover-appears" className="text-foreground-secondary">
           This popover appears on hover.
         </p>
       </PopoverContent>
@@ -55,9 +55,9 @@ export const OnHover: Story = {
 
 export const TopPosition: Story = {
   render: () => (
-    <Popover trigger={<Button variant="secondary">Open Top</Button>} position="top">
+    <Popover trigger={<Button id="top-position-button-secondary" variant="secondary">Open Top</Button>} position="top">
       <PopoverContent>
-        <p className="text-foreground-secondary">Popover on top</p>
+        <p id="top-position-p-popover-on-top" className="text-foreground-secondary">Popover on top</p>
       </PopoverContent>
     </Popover>
   ),
@@ -65,9 +65,9 @@ export const TopPosition: Story = {
 
 export const LeftPosition: Story = {
   render: () => (
-    <Popover trigger={<Button variant="secondary">Open Left</Button>} position="left">
+    <Popover trigger={<Button id="left-position-button-secondary" variant="secondary">Open Left</Button>} position="left">
       <PopoverContent>
-        <p className="text-foreground-secondary">Popover on left</p>
+        <p id="left-position-p-popover-on-left" className="text-foreground-secondary">Popover on left</p>
       </PopoverContent>
     </Popover>
   ),
@@ -75,9 +75,9 @@ export const LeftPosition: Story = {
 
 export const RightPosition: Story = {
   render: () => (
-    <Popover trigger={<Button variant="secondary">Open Right</Button>} position="right">
+    <Popover trigger={<Button id="right-position-button-secondary" variant="secondary">Open Right</Button>} position="right">
       <PopoverContent>
-        <p className="text-foreground-secondary">Popover on right</p>
+        <p id="right-position-p-popover-on-right" className="text-foreground-secondary">Popover on right</p>
       </PopoverContent>
     </Popover>
   ),
@@ -86,24 +86,24 @@ export const RightPosition: Story = {
 export const AllPositions: Story = {
   render: () => (
     <div className="flex items-center gap-8 p-16">
-      <Popover trigger={<Button variant="secondary" size="sm">Top</Button>} position="top">
+      <Popover trigger={<Button id="all-positions-button-secondary" variant="secondary" size="sm">Top</Button>} position="top">
         <PopoverContent>
-          <p className="text-sm">Top position</p>
+          <p id="all-positions-p-top-position" className="text-sm">Top position</p>
         </PopoverContent>
       </Popover>
-      <Popover trigger={<Button variant="secondary" size="sm">Bottom</Button>} position="bottom">
+      <Popover trigger={<Button id="all-positions-button-secondary" variant="secondary" size="sm">Bottom</Button>} position="bottom">
         <PopoverContent>
-          <p className="text-sm">Bottom position</p>
+          <p id="all-positions-p-bottom-position" className="text-sm">Bottom position</p>
         </PopoverContent>
       </Popover>
-      <Popover trigger={<Button variant="secondary" size="sm">Left</Button>} position="left">
+      <Popover trigger={<Button id="all-positions-button-secondary" variant="secondary" size="sm">Left</Button>} position="left">
         <PopoverContent>
-          <p className="text-sm">Left position</p>
+          <p id="all-positions-p-left-position" className="text-sm">Left position</p>
         </PopoverContent>
       </Popover>
-      <Popover trigger={<Button variant="secondary" size="sm">Right</Button>} position="right">
+      <Popover trigger={<Button id="all-positions-button-secondary" variant="secondary" size="sm">Right</Button>} position="right">
         <PopoverContent>
-          <p className="text-sm">Right position</p>
+          <p id="all-positions-p-right-position" className="text-sm">Right position</p>
         </PopoverContent>
       </Popover>
     </div>
@@ -112,7 +112,7 @@ export const AllPositions: Story = {
 
 export const MenuExample: Story = {
   render: () => (
-    <Popover trigger={<Button variant="secondary">Actions</Button>}>
+    <Popover trigger={<Button id="menu-example-button-secondary" variant="secondary">Actions</Button>}>
       <div className="py-2">
         {['Edit', 'Duplicate', 'Archive', 'Delete'].map((action) => (
           <button
@@ -133,14 +133,14 @@ export const UserMenuExample: Story = {
       trigger={
         <button className="flex items-center gap-2 p-2 hover:bg-secondary-hover rounded transition-colors">
           <div className="w-8 h-8 rounded-full bg-primary" />
-          <span className="text-sm text-foreground">John Doe</span>
+          <span id="user-menu-example-span-john-doe" className="text-sm text-foreground">John Doe</span>
         </button>
       }
     >
       <div className="w-48">
         <div className="px-4 py-3 border-b border-border">
-          <p className="text-sm font-medium text-foreground">John Doe</p>
-          <p className="text-xs text-foreground-muted">john@example.com</p>
+          <p id="user-menu-example-p-john-doe" className="text-sm font-medium text-foreground">John Doe</p>
+          <p id="user-menu-example-p-johnexamplecom" className="text-xs text-foreground-muted">john@example.com</p>
         </div>
         <div className="py-2">
           {['Profile', 'Settings', 'Billing'].map((item) => (
@@ -168,36 +168,36 @@ 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 flex justify-center">
-          <Popover trigger={<Button variant="secondary" size="sm">Actions</Button>}>
+          <Popover trigger={<Button id="responsive-matrix-button-secondary" variant="secondary" size="sm">Actions</Button>}>
             <PopoverContent>
-              <p className="text-sm">Popover content</p>
+              <p id="responsive-matrix-p-popover-content" className="text-sm">Popover content</p>
             </PopoverContent>
           </Popover>
         </div>
       </div>
       {/* Tablet */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <h4 id="responsive-matrix-h4-tablet-768px" className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
         <div className="w-[768px] border border-dashed border-border p-4 flex justify-center gap-4">
-          <Popover trigger={<Button variant="secondary">Top</Button>} position="top">
-            <PopoverContent><p className="text-sm">Top popover</p></PopoverContent>
+          <Popover trigger={<Button id="responsive-matrix-button-secondary" variant="secondary">Top</Button>} position="top">
+            <PopoverContent><p id="responsive-matrix-p-top-popover" className="text-sm">Top popover</p></PopoverContent>
           </Popover>
-          <Popover trigger={<Button variant="secondary">Bottom</Button>} position="bottom">
-            <PopoverContent><p className="text-sm">Bottom popover</p></PopoverContent>
+          <Popover trigger={<Button id="responsive-matrix-button-secondary" variant="secondary">Bottom</Button>} position="bottom">
+            <PopoverContent><p id="responsive-matrix-p-bottom-popover" className="text-sm">Bottom popover</p></PopoverContent>
           </Popover>
         </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 flex justify-between items-center">
-          <Popover trigger={<Button variant="secondary">User Menu</Button>}>
+          <Popover trigger={<Button id="responsive-matrix-button-secondary" variant="secondary">User Menu</Button>}>
             <div className="w-48">
               <div className="px-4 py-3 border-b border-border">
-                <p className="text-sm font-medium">John Doe</p>
-                <p className="text-xs text-foreground-muted">john@example.com</p>
+                <p id="responsive-matrix-p-john-doe" className="text-sm font-medium">John Doe</p>
+                <p id="responsive-matrix-p-johnexamplecom" className="text-xs text-foreground-muted">john@example.com</p>
               </div>
               <div className="py-2">
                 <button className="w-full px-4 py-2 text-left text-sm hover:bg-secondary-hover">Profile</button>
@@ -205,7 +205,7 @@ export const ResponsiveMatrix: Story = {
               </div>
             </div>
           </Popover>
-          <Popover trigger={<Button variant="secondary">Actions</Button>}>
+          <Popover trigger={<Button id="responsive-matrix-button-secondary" variant="secondary">Actions</Button>}>
             <div className="py-2">
               {['Edit', 'Duplicate', 'Archive', 'Delete'].map((action) => (
                 <button key={action} className="w-full px-4 py-2 text-left text-sm hover:bg-secondary-hover">{action}</button>

package/dist/assets/components/popover.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { cn } from "@/lib/utils";
 
 type PopoverPosition = "top" | "bottom" | "left" | "right";
@@ -13,6 +14,11 @@ interface PopoverProps {
   className?: string;
 }
 
+interface PortalPosition {
+  top: number;
+  left: number;
+}
+
 export function Popover({
   trigger,
   children,
@@ -21,22 +27,76 @@ export function Popover({
   className,
 }: PopoverProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [portalPosition, setPortalPosition] = useState<PortalPosition>({ top: 0, left: 0 });
+  const [mounted, setMounted] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
   const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
+  // Track if component is mounted (for portal)
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  // Calculate position based on trigger element
+  const calculatePosition = useCallback(() => {
+    if (!triggerRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popoverWidth = 224; // w-56 = 14rem = 224px
+    const gap = 8;
+
+    let top = 0;
+    let left = 0;
+
+    switch (position) {
+      case "top":
+        top = triggerRect.top - gap;
+        left = triggerRect.left + triggerRect.width / 2 - popoverWidth / 2;
+        break;
+      case "bottom":
+        top = triggerRect.bottom + gap;
+        left = triggerRect.left + triggerRect.width / 2 - popoverWidth / 2;
+        break;
+      case "left":
+        top = triggerRect.top + triggerRect.height / 2;
+        left = triggerRect.left - popoverWidth - gap;
+        break;
+      case "right":
+        top = triggerRect.top + triggerRect.height / 2;
+        left = triggerRect.right + gap;
+        break;
+    }
+
+    setPortalPosition({ top, left });
+  }, [position]);
+
+  // Update position when opened
+  useEffect(() => {
+    if (isOpen) {
+      calculatePosition();
+    }
+  }, [isOpen, calculatePosition]);
+
   // Close on click outside
   useEffect(() => {
-    if (triggerOn !== "click") return;
+    if (!isOpen || triggerOn !== "click") return;
 
     const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+      const target = event.target as Node;
+      const clickedInTrigger = containerRef.current?.contains(target);
+      const clickedInPopover = popoverRef.current?.contains(target);
+
+      if (!clickedInTrigger && !clickedInPopover) {
         setIsOpen(false);
       }
     };
 
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [triggerOn]);
+  }, [isOpen, triggerOn]);
 
   // Close on escape
   useEffect(() => {
@@ -50,6 +110,18 @@ export function Popover({
     return () => document.removeEventListener("keydown", handleEscape);
   }, []);
 
+  // Close on scroll
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleScroll = () => {
+      setIsOpen(false);
+    };
+
+    window.addEventListener("scroll", handleScroll, true);
+    return () => window.removeEventListener("scroll", handleScroll, true);
+  }, [isOpen]);
+
   const handleMouseEnter = () => {
     if (triggerOn !== "hover") return;
     if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
@@ -63,37 +135,48 @@ export function Popover({
     }, 150);
   };
 
-  const positionClasses: Record<PopoverPosition, string> = {
-    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-    left: "right-full top-1/2 -translate-y-1/2 mr-2",
-    right: "left-full top-1/2 -translate-y-1/2 ml-2",
+  // Transform origin based on position
+  const transformOrigin: Record<PopoverPosition, string> = {
+    top: "bottom center",
+    bottom: "top center",
+    left: "right center",
+    right: "left center",
   };
 
   return (
-    <div
+    <div data-sonance-name="popover"
       ref={containerRef}
       className="relative inline-block"
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       <div
+        ref={triggerRef}
         onClick={triggerOn === "click" ? () => setIsOpen(!isOpen) : undefined}
         className="cursor-pointer"
       >
         {trigger}
       </div>
-      {isOpen && (
+      {mounted && isOpen && createPortal(
         <div
+          ref={popoverRef}
           className={cn(
-            "absolute z-50 min-w-[200px] bg-card border border-border shadow-lg",
+            "fixed z-50 min-w-[200px] bg-card border border-border shadow-lg",
             "animate-in fade-in zoom-in-95 duration-150",
-            positionClasses[position],
+            position === "left" || position === "right" ? "-translate-y-1/2" : "",
             className
           )}
+          style={{
+            top: portalPosition.top,
+            left: portalPosition.left,
+            transformOrigin: transformOrigin[position],
+          }}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
         >
           {children}
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   );
@@ -106,6 +189,6 @@ export function PopoverContent({
   className?: string;
   children: React.ReactNode;
 }) {
-  return <div className={cn("p-4", className)}>{children}</div>;
+  return <div data-sonance-name="popover" className={cn("p-4", className)}>{children}</div>;
 }
 

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

@@ -96,11 +96,11 @@ export const LoadingExample: Story = {
   render: () => (
     <div className="space-y-6 w-96">
       <div>
-        <h4 className="text-sm font-medium text-foreground mb-2">File Upload</h4>
+        <h4 id="loading-example-h4-file-upload" className="text-sm font-medium text-foreground mb-2">File Upload</h4>
         <Progress value={67} label="document.pdf" showValue />
       </div>
       <div>
-        <h4 className="text-sm font-medium text-foreground mb-2">Installation Progress</h4>
+        <h4 id="loading-example-h4-installation-progres" className="text-sm font-medium text-foreground mb-2">Installation Progress</h4>
         <Progress value={45} label="Installing dependencies..." showValue />
       </div>
     </div>
@@ -113,7 +113,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">
           <Progress value={65} label="Upload Progress" showValue />
           <div className="flex justify-center">
@@ -123,7 +123,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 items-center">
             <Progress value={45} label="Installation" showValue />
@@ -136,7 +136,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 items-center">
             <Progress value={25} size="sm" showValue />

package/dist/assets/components/progress.tsx

@@ -23,16 +23,16 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
     };
 
     return (
-      <div ref={ref} className={cn("w-full", className)} {...props}>
+      <div data-sonance-name="progress" ref={ref} className={cn("w-full", className)} {...props}>
         {(label || showValue) && (
           <div className="mb-2 flex items-center justify-between">
             {label && (
-              <span className="text-xs font-medium uppercase tracking-widest text-foreground-muted">
+              <span id="progress-span-label" className="text-xs font-medium uppercase tracking-widest text-foreground-muted">
                 {label}
               </span>
             )}
             {showValue && (
-              <span className="text-sm font-medium text-foreground">{Math.round(percentage)}%</span>
+              <span id="progress-span-mathroundpercentage" className="text-sm font-medium text-foreground">{Math.round(percentage)}%</span>
             )}
           </div>
         )}
@@ -89,7 +89,7 @@ export function CircularProgress({
   const strokeDashoffset = circumference - (percentage / 100) * circumference;
 
   return (
-    <div className={cn("relative inline-flex items-center justify-center", className)}>
+    <div data-sonance-name="progress" className={cn("relative inline-flex items-center justify-center", className)}>
       <svg width={resolvedSize} height={resolvedSize} className="-rotate-90">
         {/* Background circle */}
         <circle
@@ -116,7 +116,7 @@ export function CircularProgress({
         />
       </svg>
       {showValue && (
-        <span className="absolute text-xs font-medium text-foreground">
+        <span id="circular-progress-span-mathroundpercentage" className="absolute text-xs font-medium text-foreground">
           {Math.round(percentage)}%
         </span>
       )}

package/dist/assets/components/radio-group.stories.tsx

@@ -91,7 +91,7 @@ export const WithDisabledOption: Story = {
 export const PlanSelection: Story = {
   render: () => (
     <div className="w-80">
-      <h3 className="text-sm font-medium text-foreground mb-4">Select a Plan</h3>
+      <h3 id="plan-selection-h3-select-a-plan" className="text-sm font-medium text-foreground mb-4">Select a Plan</h3>
       <RadioGroup defaultValue="pro">
         <RadioGroupItem
           value="free"
@@ -118,12 +118,12 @@ export const StateMatrix: Story = {
   render: () => {
     const states: RadioGroupItemState[] = ['default', 'hover', 'focus', 'checked', 'disabled'];
     return (
-      <div className="space-y-6">
-        <h3 className="text-sm font-medium text-foreground-muted">RadioGroupItem States</h3>
+      <div data-sonance-name="radio-group.stories" className="space-y-6">
+        <h3 id="state-matrix-h3-radiogroupitem-state" className="text-sm font-medium text-foreground-muted">RadioGroupItem States</h3>
         <div className="space-y-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>
               <RadioGroup>
                 <RadioGroupItem
                   value="demo"
@@ -145,7 +145,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">
           <RadioGroup defaultValue="standard">
             <RadioGroupItem value="standard" label="Standard" description="5-7 business days" />
@@ -156,7 +156,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">
             <RadioGroup defaultValue="small">
@@ -173,7 +173,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">
           <RadioGroup defaultValue="pro" orientation="horizontal" className="flex gap-8">
             <RadioGroupItem value="free" label="Free" description="Basic features" />

package/dist/assets/components/radio-group.tsx

@@ -93,7 +93,7 @@ export const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
     const isDisabled = disabled || state === "disabled";
 
     return (
-      <div className="flex items-start gap-3">
+      <div data-sonance-name="radio-group" className="flex items-start gap-3">
         <div className="relative flex items-center justify-center">
           <input
             type="radio"
@@ -115,7 +115,7 @@ export const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
             )}
             {...props}
           />
-          <div
+          <div data-sonance-name="radio-group"
             className={cn(
               "pointer-events-none absolute h-2.5 w-2.5 rounded-full bg-primary",
               "scale-0 transition-transform duration-150",
@@ -134,7 +134,7 @@ export const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
               </label>
             )}
             {description && (
-              <p className="text-xs text-foreground-muted">{description}</p>
+              <p id="p-description" className="text-xs text-foreground-muted">{description}</p>
             )}
           </div>
         )}

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

@@ -38,15 +38,15 @@ export const Default: Story = {
   render: () => {
     const [range, setRange] = useState<DateRange>({ start: undefined, end: undefined });
     return (
-      <div className="space-y-4">
+      <div data-sonance-name="range-calendar.stories" className="space-y-4">
         <RangeCalendar
           value={range}
           onValueChange={setRange}
         />
         <div className="text-sm text-foreground-muted">
-          {range.start && <span>Start: {range.start.toLocaleDateString()}</span>}
-          {range.start && range.end && <span> | </span>}
-          {range.end && <span>End: {range.end.toLocaleDateString()}</span>}
+          {range.start && <span id="default-span-start-rangestarttolo">Start: {range.start.toLocaleDateString()}</span>}
+          {range.start && range.end && <span id="default-span"> | </span>}
+          {range.end && <span id="default-span-end-rangeendtolocale">End: {range.end.toLocaleDateString()}</span>}
         </div>
       </div>
     );
@@ -105,7 +105,7 @@ export const WithMinMaxDates: Story = {
     const today = new Date();
     return (
       <div className="space-y-4">
-        <p className="text-sm text-foreground-muted">
+        <p id="with-min-max-dates-p-selection-limited-to" className="text-sm text-foreground-muted">
           Selection limited to next 60 days
         </p>
         <RangeCalendar
@@ -129,7 +129,7 @@ export const DisabledWeekends: Story = {
     };
     return (
       <div className="space-y-4">
-        <p className="text-sm text-foreground-muted">
+        <p id="disabled-weekends-p-weekends-are-disable" className="text-sm text-foreground-muted">
           Weekends are disabled (business days only)
         </p>
         <RangeCalendar
@@ -170,15 +170,15 @@ export const HotelBookingExample: Story = {
         <div className="flex items-center gap-4 text-sm">
           <div className="flex items-center gap-2">
             <div className="w-4 h-4 bg-primary rounded-sm" />
-            <span>Selected</span>
+            <span id="hotel-booking-example-span-selected">Selected</span>
           </div>
           <div className="flex items-center gap-2">
             <div className="w-4 h-4 bg-primary/20 rounded-sm" />
-            <span>In Range</span>
+            <span id="hotel-booking-example-span-in-range">In Range</span>
           </div>
           <div className="flex items-center gap-2">
             <div className="w-4 h-4 bg-secondary text-foreground-subtle text-xs flex items-center justify-center">x</div>
-            <span>Unavailable</span>
+            <span id="hotel-booking-example-span-unavailable">Unavailable</span>
           </div>
         </div>
         <RangeCalendar
@@ -191,8 +191,8 @@ export const HotelBookingExample: Story = {
         {nights > 0 && (
           <div className="p-4 border border-border rounded-sm">
             <div className="flex justify-between">
-              <span className="text-foreground-muted">Duration</span>
-              <span className="font-medium">{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" className="font-medium">{nights} night{nights !== 1 ? 's' : ''}</span>
             </div>
           </div>
         )}
@@ -239,7 +239,7 @@ export const ReportDateRangeExample: Story = {
           maxDate={today}
         />
         {range.start && range.end && (
-          <p className="text-sm">
+          <p id="report-date-range-example-p-selected-rangestartt" className="text-sm">
             Selected: {range.start.toLocaleDateString()} - {range.end.toLocaleDateString()}
           </p>
         )}
@@ -258,7 +258,7 @@ export const AllConfigurations: Story = {
     return (
       <div className="space-y-8">
         <div>
-          <h4 className="text-sm font-medium mb-2">Single Month</h4>
+          <h4 id="all-configurations-h4-single-month" className="text-sm font-medium mb-2">Single Month</h4>
           <RangeCalendar
             value={range1}
             onValueChange={setRange1}
@@ -266,7 +266,7 @@ export const AllConfigurations: Story = {
           />
         </div>
         <div>
-          <h4 className="text-sm font-medium mb-2">Two Months (Default)</h4>
+          <h4 id="all-configurations-h4-two-months-default" className="text-sm font-medium mb-2">Two Months (Default)</h4>
           <RangeCalendar
             value={range2}
             onValueChange={setRange2}
@@ -274,7 +274,7 @@ export const AllConfigurations: Story = {
           />
         </div>
         <div>
-          <h4 className="text-sm font-medium mb-2">Three Months</h4>
+          <h4 id="all-configurations-h4-three-months" className="text-sm font-medium mb-2">Three Months</h4>
           <RangeCalendar
             value={range3}
             onValueChange={setRange3}
@@ -297,7 +297,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 overflow-x-auto">
             <RangeCalendar
               value={mobile}
@@ -308,7 +308,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">
             <RangeCalendar
               value={tablet}
@@ -319,7 +319,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">
             <RangeCalendar
               value={desktop}