sonance-brand-mcp 1.3.1 → 1.3.2

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

@@ -25,7 +25,7 @@ type Story = StoryObj<typeof meta>;
 
 export const InlineDefault: Story = {
   render: () => (
-    <p className="text-foreground-secondary">
+    <p id="inline-default-p" className="text-foreground-secondary">
       Use the <Code>npm install</Code> command to install dependencies.
     </p>
   ),
@@ -33,7 +33,7 @@ export const InlineDefault: Story = {
 
 export const InlinePrimary: Story = {
   render: () => (
-    <p className="text-foreground-secondary">
+    <p id="inline-primary-p" className="text-foreground-secondary">
       The <Code variant="primary">useState</Code> hook is used for managing state in React.
     </p>
   ),
@@ -79,7 +79,7 @@ export function Counter() {
   const [count, setCount] = useState(0);
 
   return (
-    <button onClick={() => setCount(count + 1)}>
+    <button data-sonance-name="code.stories" onClick={() => setCount(count + 1)}>
       Count: {count}
     </button>
   );
@@ -104,7 +104,7 @@ export function Counter() {
   return (
     <div>
       <button onClick={decrement}>-</button>
-      <span>{count}</span>
+      <span id="counter-span-count">{count}</span>
       <button onClick={increment}>+</button>
     </div>
   );
@@ -131,15 +131,15 @@ export const InstallCommands: Story = {
   render: () => (
     <div className="space-y-4">
       <div>
-        <p className="text-xs text-foreground-muted mb-2">npm</p>
+        <p id="install-commands-p-npm" className="text-xs text-foreground-muted mb-2">npm</p>
         <Snippet text="npm install @sonance/ui" />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">pnpm</p>
+        <p id="install-commands-p-pnpm" className="text-xs text-foreground-muted mb-2">pnpm</p>
         <Snippet text="pnpm add @sonance/ui" />
       </div>
       <div>
-        <p className="text-xs text-foreground-muted mb-2">yarn</p>
+        <p id="install-commands-p-yarn" className="text-xs text-foreground-muted mb-2">yarn</p>
         <Snippet text="yarn add @sonance/ui" />
       </div>
     </div>
@@ -149,9 +149,9 @@ export const InstallCommands: Story = {
 export const DocumentationExample: Story = {
   render: () => (
     <div className="max-w-2xl space-y-6">
-      <h2 className="text-xl font-semibold text-foreground">Button Component</h2>
+      <h2 id="documentation-example-h2-button-component" className="text-xl font-semibold text-foreground">Button Component</h2>
 
-      <p className="text-foreground-secondary">
+      <p id="documentation-example-p" className="text-foreground-secondary">
         Import the <Code>Button</Code> component from the UI library:
       </p>
 
@@ -162,16 +162,16 @@ export const DocumentationExample: Story = {
 
 export function MyComponent() {
   return (
-    <Button variant="primary" size="lg">
+    <Button id="my-component-button-primary" variant="primary" size="lg">
       Click me
     </Button>
   );
 }`}
       />
 
-      <h3 className="text-lg font-medium text-foreground">Props</h3>
+      <h3 id="my-component-h3-props" className="text-lg font-medium text-foreground">Props</h3>
 
-      <p className="text-foreground-secondary">
+      <p id="my-component-p" className="text-foreground-secondary">
         The <Code variant="primary">variant</Code> prop accepts{' '}
         <Code>primary</Code>, <Code>secondary</Code>, <Code>ghost</Code>, or{' '}
         <Code>inverted</Code>.
@@ -184,14 +184,14 @@ export const AllExamples: Story = {
   render: () => (
     <div className="space-y-8 max-w-2xl">
       <div>
-        <h3 className="text-sm font-medium text-foreground mb-2">Inline Code</h3>
-        <p className="text-foreground-secondary">
+        <h3 id="all-examples-h3-inline-code" className="text-sm font-medium text-foreground mb-2">Inline Code</h3>
+        <p id="all-examples-p" className="text-foreground-secondary">
           Default: <Code>const x = 1</Code> | Primary: <Code variant="primary">useState</Code>
         </p>
       </div>
 
       <div>
-        <h3 className="text-sm font-medium text-foreground mb-2">Code Block</h3>
+        <h3 id="all-examples-h3-code-block" className="text-sm font-medium text-foreground mb-2">Code Block</h3>
         <CodeBlock
           code={`const greeting = "Hello, World!";
 console.log(greeting);`}
@@ -199,7 +199,7 @@ console.log(greeting);`}
       </div>
 
       <div>
-        <h3 className="text-sm font-medium text-foreground mb-2">Snippet</h3>
+        <h3 id="all-examples-h3-snippet" className="text-sm font-medium text-foreground mb-2">Snippet</h3>
         <Snippet text="npm install @sonance/ui" />
       </div>
     </div>
@@ -212,9 +212,9 @@ 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">
-          <p className="text-foreground-secondary text-sm">
+          <p id="responsive-matrix-p" className="text-foreground-secondary text-sm">
             Use <Code>npm install</Code> to install.
           </p>
           <Snippet text="npm install @sonance/ui" />
@@ -222,13 +222,13 @@ 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">
           <CodeBlock
             code={`import { Button } from '@sonance/ui';
 
 export function App() {
-  return <Button>Click me</Button>;
+  return <Button id="app-button">Click me</Button>;
 }`}
             language="tsx"
           />
@@ -236,7 +236,7 @@ export function App() {
       </div>
       {/* Desktop */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <h4 id="app-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">
           <CodeBlock
             filename="component.tsx"
@@ -250,9 +250,9 @@ export function ContactForm() {
 
   return (
     <Card>
-      <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
-      <Input label="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
-      <Button>Submit</Button>
+      <Input id="contact-form-input" label="Name" value={name} onChange={(e) => setName(e.target.value)} />
+      <Input id="contact-form-input" label="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+      <Button id="contact-form-button">Submit</Button>
     </Card>
   );
 }`}

package/dist/assets/components/code.tsx

@@ -17,14 +17,7 @@ export const Code = forwardRef<HTMLElement, CodeProps>(
     };
 
     return (
-      <code
-        ref={ref}
-        className={cn(
-          "px-1 py-0.5 font-mono text-xs sm:text-sm rounded-sm",
-          "break-words",
-          variantClasses[variant],
-          className
-        )}
+      <code data-sonance-name="code"
         {...props}
       />
     );
@@ -62,12 +55,12 @@ export function CodeBlock({
   const lines = code.split("\n");
 
   return (
-    <div className={cn("relative group w-full max-w-full overflow-hidden", className)}>
+    <div data-sonance-name="code" className={cn("relative group w-full max-w-full overflow-hidden", className)}>
       {filename && (
         <div className="flex items-center justify-between px-3 sm:px-4 py-2 border-b border-border bg-background-tertiary">
-          <span className="text-xs font-medium text-foreground-muted truncate">{filename}</span>
+          <span id="code-block-span-filename" className="text-xs font-medium text-foreground-muted truncate">{filename}</span>
           {language && (
-            <span className="text-xs uppercase tracking-wider text-foreground-subtle flex-shrink-0 ml-2">
+            <span id="code-block-span-language" className="text-xs uppercase tracking-wider text-foreground-subtle flex-shrink-0 ml-2">
               {language}
             </span>
           )}
@@ -91,10 +84,10 @@ export function CodeBlock({
                     highlightLines.includes(index + 1) && "bg-primary/10 -mx-3 sm:-mx-4 px-3 sm:px-4"
                   )}
                 >
-                  <span className="mr-3 sm:mr-4 inline-block w-6 sm:w-8 select-none text-right text-foreground-subtle">
+                  <span id="code-block-span-index-1" className="mr-3 sm:mr-4 inline-block w-6 sm:w-8 select-none text-right text-foreground-subtle">
                     {index + 1}
                   </span>
-                  <span>{line}</span>
+                  <span id="code-block-span-line">{line}</span>
                 </div>
               ))
             ) : (
@@ -156,7 +149,7 @@ export function Snippet({
         className
       )}
     >
-      {symbol && <span className="text-foreground-muted flex-shrink-0">{symbol}</span>}
+      {symbol && <span id="snippet-span-symbol" className="text-foreground-muted flex-shrink-0">{symbol}</span>}
       <code className="text-foreground truncate">{text}</code>
       {!hideCopyButton && (
         <button

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

@@ -22,13 +22,13 @@ function CollapsibleDemo() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <Collapsible
+    <Collapsible data-sonance-name="collapsible.stories"
       open={isOpen}
       onOpenChange={setIsOpen}
       className="w-[350px] space-y-2"
     >
       <div className="flex items-center justify-between space-x-4 px-4">
-        <h4 className="text-sm font-medium text-foreground">
+        <h4 id="collapsible-demo-h4-peduarte-starred-3-r" className="text-sm font-medium text-foreground">
           @peduarte starred 3 repositories
         </h4>
         <CollapsibleTrigger asChild>
@@ -39,7 +39,7 @@ function CollapsibleDemo() {
                 isOpen && "rotate-180"
               )}
             />
-            <span className="sr-only">Toggle</span>
+            <span id="collapsible-demo-span-toggle" className="sr-only">Toggle</span>
           </button>
         </CollapsibleTrigger>
       </div>

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

@@ -43,32 +43,32 @@ export const Default: Story = {
         <CommandGroup heading="Suggestions">
           <CommandItem>
             <Calendar className="mr-2 h-4 w-4" />
-            <span>Calendar</span>
+            <span id="default-span-calendar">Calendar</span>
           </CommandItem>
           <CommandItem>
             <Smile className="mr-2 h-4 w-4" />
-            <span>Search Emoji</span>
+            <span id="default-span-search-emoji">Search Emoji</span>
           </CommandItem>
           <CommandItem>
             <Calculator className="mr-2 h-4 w-4" />
-            <span>Calculator</span>
+            <span id="default-span-calculator">Calculator</span>
           </CommandItem>
         </CommandGroup>
         <CommandSeparator />
         <CommandGroup heading="Settings">
           <CommandItem>
             <User className="mr-2 h-4 w-4" />
-            <span>Profile</span>
+            <span id="default-span-profile">Profile</span>
             <CommandShortcut>⌘P</CommandShortcut>
           </CommandItem>
           <CommandItem>
             <CreditCard className="mr-2 h-4 w-4" />
-            <span>Billing</span>
+            <span id="default-span-billing">Billing</span>
             <CommandShortcut>⌘B</CommandShortcut>
           </CommandItem>
           <CommandItem>
             <Settings className="mr-2 h-4 w-4" />
-            <span>Settings</span>
+            <span id="default-span-settings">Settings</span>
             <CommandShortcut>⌘S</CommandShortcut>
           </CommandItem>
         </CommandGroup>
@@ -94,10 +94,10 @@ function CommandDialogDemo() {
 
   return (
     <>
-      <p className="text-sm text-foreground-muted">
+      <p id="command-dialog-demo-p" className="text-sm text-foreground-muted">
         Press{" "}
         <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-card px-1.5 font-mono text-[10px] font-medium text-foreground-muted opacity-100">
-          <span className="text-xs">⌘</span>K
+          <span id="command-dialog-demo-span" className="text-xs">⌘</span>K
         </kbd>
       </p>
       <CommandDialog open={open} onOpenChange={setOpen}>
@@ -107,32 +107,32 @@ function CommandDialogDemo() {
           <CommandGroup heading="Suggestions">
             <CommandItem>
               <Calendar className="mr-2 h-4 w-4" />
-              <span>Calendar</span>
+              <span id="command-dialog-demo-span-calendar">Calendar</span>
             </CommandItem>
             <CommandItem>
               <Smile className="mr-2 h-4 w-4" />
-              <span>Search Emoji</span>
+              <span id="command-dialog-demo-span-search-emoji">Search Emoji</span>
             </CommandItem>
             <CommandItem>
               <Calculator className="mr-2 h-4 w-4" />
-              <span>Calculator</span>
+              <span id="command-dialog-demo-span-calculator">Calculator</span>
             </CommandItem>
           </CommandGroup>
           <CommandSeparator />
           <CommandGroup heading="Settings">
             <CommandItem>
               <User className="mr-2 h-4 w-4" />
-              <span>Profile</span>
+              <span id="command-dialog-demo-span-profile">Profile</span>
               <CommandShortcut>⌘P</CommandShortcut>
             </CommandItem>
             <CommandItem>
               <CreditCard className="mr-2 h-4 w-4" />
-              <span>Billing</span>
+              <span id="command-dialog-demo-span-billing">Billing</span>
               <CommandShortcut>⌘B</CommandShortcut>
             </CommandItem>
             <CommandItem>
               <Settings className="mr-2 h-4 w-4" />
-              <span>Settings</span>
+              <span id="command-dialog-demo-span-settings">Settings</span>
               <CommandShortcut>⌘S</CommandShortcut>
             </CommandItem>
           </CommandGroup>

package/dist/assets/components/command.tsx

@@ -19,7 +19,7 @@ const Command = React.forwardRef<
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-sm bg-card text-foreground",
       className
-    )}
+    )} data-sonance-name="command"
     {...props}
   />
 ));
@@ -37,7 +37,7 @@ const CommandDialog = ({ children, open, onOpenChange }: CommandDialogProps) =>
   }, [onOpenChange]);
 
   return (
-    <Dialog open={open ?? false} onClose={handleClose}>
+    <Dialog data-sonance-name="command" open={open ?? false} onClose={handleClose}>
       <DialogContent className="overflow-hidden p-0 shadow-lg" showClose={false}>
         <DialogTitle className="sr-only">Command Menu</DialogTitle>
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-foreground-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
@@ -146,10 +146,11 @@ const CommandShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
+      id="command-shortcut-span"
       className={cn(
         "ml-auto text-xs tracking-widest text-foreground-muted",
         className
-      )}
+      )} data-sonance-name="command"
       {...props}
     />
   );

package/dist/assets/components/context-menu.stories.tsx

@@ -128,7 +128,7 @@ export const FileContextMenu: Story = {
     <ContextMenu>
       <ContextMenuTrigger className="flex h-[100px] w-[200px] flex-col items-center justify-center gap-2 rounded-sm border border-border bg-card p-4">
         <div className="h-12 w-12 rounded-sm bg-secondary-hover" />
-        <span className="text-sm text-foreground">Document.pdf</span>
+        <span id="file-context-menu-span-documentpdf" className="text-sm text-foreground">Document.pdf</span>
       </ContextMenuTrigger>
       <ContextMenuContent className="w-48">
         <ContextMenuItem>

package/dist/assets/components/context-menu.tsx

@@ -117,7 +117,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span id="context-menu-checkbox-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -142,7 +142,7 @@ const ContextMenuRadioItem = React.forwardRef<
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span id="context-menu-radio-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <Circle className="h-2 w-2 fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -187,11 +187,7 @@ const ContextMenuShortcut = ({
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-foreground-muted",
-        className
-      )}
+    <span id="context-menu-shortcut-span" data-sonance-name="context-menu"
       {...props}
     />
   );

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

@@ -59,13 +59,13 @@ export const Default: Story = {
   render: () => {
     const [date, setDate] = useState<Date | undefined>(undefined);
     return (
-      <div className="w-64">
+      <div data-sonance-name="date-input.stories" className="w-64">
         <DateInput
           value={date}
           onValueChange={setDate}
         />
         {date && (
-          <p className="mt-2 text-sm text-foreground-muted">
+          <p id="default-p-selected-datetolocal" className="mt-2 text-sm text-foreground-muted">
             Selected: {date.toLocaleDateString()}
           </p>
         )}
@@ -196,8 +196,8 @@ export const FormExample: Story = {
           error={hasError ? "End date must be after start date" : undefined}
         />
         <div className="text-sm text-foreground-muted">
-          {startDate && <p>Start: {startDate.toLocaleDateString()}</p>}
-          {endDate && <p>End: {endDate.toLocaleDateString()}</p>}
+          {startDate && <p id="form-example-p-start-startdatetoloc">Start: {startDate.toLocaleDateString()}</p>}
+          {endDate && <p id="form-example-p-end-enddatetolocaled">End: {endDate.toLocaleDateString()}</p>}
         </div>
       </div>
     );
@@ -222,11 +222,11 @@ export const StateMatrix: Story = {
     const states: DateInputState[] = ['default', 'hover', 'focus', 'error', 'disabled'];
     return (
       <div className="space-y-6 w-64">
-        <h3 className="text-sm font-medium text-foreground-muted">DateInput States</h3>
+        <h3 id="state-matrix-h3-dateinput-states" className="text-sm font-medium text-foreground-muted">DateInput 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>
               <DateInput
                 state={state}
                 placeholder="MM/DD/YYYY"
@@ -246,14 +246,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">
           <DateInput label="Date of Birth" placeholder="MM/DD/YYYY" />
         </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">
             <DateInput label="Start Date" placeholder="MM/DD/YYYY" />
@@ -263,7 +263,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">
             <DateInput label="Default" placeholder="MM/DD/YYYY" />

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

@@ -98,7 +98,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
     };
 
     return (
-      <div className={cn("w-full", className)}>
+      <div data-sonance-name="date-input" className={cn("w-full", className)}>
         {label && (
           <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
             {label}
@@ -125,7 +125,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
           />
           <CalendarIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-foreground-muted" />
         </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-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>
   );
 }