sonance-brand-mcp 1.3.1 → 1.3.2

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

@@ -55,11 +55,11 @@ export const Disabled: Story = {
 export const AllStates: Story = {
   render: () => (
     <div className="space-y-6 w-96">
-      <Textarea placeholder="Default textarea" />
-      <Textarea label="With Label" placeholder="Enter text..." />
-      <Textarea label="With Error" error="This field is required" />
-      <Textarea label="Disabled" placeholder="Cannot edit..." disabled />
-      <Textarea label="With Content" defaultValue="This textarea has pre-filled content that can be edited by the user." />
+      <Textarea id="all-states-textarea-default-textare" placeholder="Default textarea" />
+      <Textarea id="all-states-textarea-enter-text" label="With Label" placeholder="Enter text..." />
+      <Textarea id="all-states-textarea" label="With Error" error="This field is required" />
+      <Textarea id="all-states-textarea-cannot-edit" label="Disabled" placeholder="Cannot edit..." disabled />
+      <Textarea id="all-states-textarea" label="With Content" defaultValue="This textarea has pre-filled content that can be edited by the user." />
     </div>
   ),
 };
@@ -70,27 +70,28 @@ 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">
-          <Textarea label="Message" placeholder="Enter your message..." />
-          <Textarea label="Feedback" placeholder="Share your thoughts..." rows={4} />
+          <Textarea id="responsive-matrix-textarea-enter-your-mess" label="Message" placeholder="Enter your message..." />
+          <Textarea id="responsive-matrix-textarea-share-your-thou" label="Feedback" placeholder="Share your thoughts..." rows={4} />
         </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">
-            <Textarea label="Description" placeholder="Enter description..." />
-            <Textarea label="Notes" placeholder="Additional notes..." />
+            <Textarea id="responsive-matrix-textarea-enter-descripti" label="Description" placeholder="Enter description..." />
+            <Textarea id="responsive-matrix-textarea-additional-note" label="Notes" placeholder="Additional notes..." />
           </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">
           <Textarea
+            id="responsive-matrix-textarea-describe-your-p"
             label="Project Brief"
             placeholder="Describe your project requirements..."
             rows={6}

package/dist/assets/components/textarea.tsx

@@ -30,7 +30,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     const hasError = error || state === "error";
 
     return (
-      <div className="w-full">
+      <div data-sonance-name="textarea" className="w-full">
         {label && (
           <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
             {label}
@@ -49,10 +49,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             hasError && "border-error",
             getStateStyles(state),
             className
-          )}
+          )} data-sonance-name="textarea"
           {...props}
         />
-        {error && <p className="mt-1 text-sm text-error">{error}</p>}
+        {error && <p id="textarea-p-error" className="mt-1 text-sm text-error">{error}</p>}
       </div>
     );
   }

package/dist/assets/components/theme-toggle.stories.tsx

@@ -21,7 +21,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => (
     <div className="space-y-4">
-      <p className="text-sm text-foreground-muted">
+      <p id="default-p-threeway-toggle-ligh" className="text-sm text-foreground-muted">
         Three-way toggle: Light, Dark, and System
       </p>
       <ThemeToggle />
@@ -33,7 +33,7 @@ export const Default: Story = {
 export const Simple: Story = {
   render: () => (
     <div className="space-y-4">
-      <p className="text-sm text-foreground-muted">
+      <p id="simple-p-simple-toggle-switch" className="text-sm text-foreground-muted">
         Simple toggle: switches between Light and Dark
       </p>
       <SimpleThemeToggle />
@@ -47,13 +47,13 @@ export const InNavbar: Story = {
     <div className="flex items-center justify-between p-4 border border-border rounded-sm bg-card">
       <div className="flex items-center gap-2">
         <div className="w-8 h-8 bg-primary rounded-sm" />
-        <span className="font-medium">Sonance</span>
+        <span id="in-navbar-span-sonance" className="font-medium">Sonance</span>
       </div>
       <div className="flex items-center gap-4">
         <nav className="flex gap-4 text-sm">
-          <a href="#" className="hover:text-primary">Products</a>
-          <a href="#" className="hover:text-primary">About</a>
-          <a href="#" className="hover:text-primary">Contact</a>
+          <a id="nav-a" href="#" className="hover:text-primary">Products</a>
+          <a id="nav-a" href="#" className="hover:text-primary">About</a>
+          <a id="nav-a" href="#" className="hover:text-primary">Contact</a>
         </nav>
         <SimpleThemeToggle />
       </div>
@@ -65,13 +65,13 @@ export const InNavbar: Story = {
 export const InSettingsPanel: Story = {
   render: () => (
     <div className="w-80 p-6 border border-border rounded-sm bg-card space-y-6">
-      <h3 className="font-medium">Appearance</h3>
+      <h3 id="nav-h3-appearance" className="font-medium">Appearance</h3>
       <div className="space-y-4">
         <div className="space-y-2">
           <label className="text-sm text-foreground-muted">Theme</label>
           <ThemeToggle />
         </div>
-        <p className="text-xs text-foreground-muted">
+        <p id="in-settings-panel-p-choose-your-preferre" className="text-xs text-foreground-muted">
           Choose your preferred color scheme. System will match your device settings.
         </p>
       </div>
@@ -84,11 +84,11 @@ export const WithLabels: Story = {
   render: () => (
     <div className="space-y-6">
       <div className="flex items-center justify-between w-64">
-        <span className="text-sm">Dark Mode</span>
+        <span id="with-labels-span-dark-mode" className="text-sm">Dark Mode</span>
         <SimpleThemeToggle />
       </div>
       <div className="space-y-2">
-        <span className="text-sm">Color Theme</span>
+        <span id="with-labels-span-color-theme" className="text-sm">Color Theme</span>
         <ThemeToggle />
       </div>
     </div>
@@ -100,11 +100,11 @@ export const SizeComparison: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="space-y-2">
-        <p className="text-sm font-medium">Full Toggle (3 options)</p>
+        <p id="size-comparison-p-full-toggle-3-option" className="text-sm font-medium">Full Toggle (3 options)</p>
         <ThemeToggle />
       </div>
       <div className="space-y-2">
-        <p className="text-sm font-medium">Simple Toggle (2 options)</p>
+        <p id="size-comparison-p-simple-toggle-2-opti" className="text-sm font-medium">Simple Toggle (2 options)</p>
         <SimpleThemeToggle />
       </div>
     </div>
@@ -117,13 +117,13 @@ export const OnDarkBackground: Story = {
     <div className="space-y-4">
       <div className="p-6 bg-sonance-charcoal rounded-sm">
         <div className="flex items-center justify-between">
-          <span className="text-white text-sm">On dark background</span>
+          <span id="on-dark-background-span" className="text-white text-sm">On dark background</span>
           <SimpleThemeToggle className="[&_button]:text-white [&_button:hover]:bg-white/10" />
         </div>
       </div>
       <div className="p-6 bg-card border border-border rounded-sm">
         <div className="flex items-center justify-between">
-          <span className="text-sm">On light background</span>
+          <span id="on-dark-background-span-on-light-background" className="text-sm">On light background</span>
           <SimpleThemeToggle />
         </div>
       </div>
@@ -136,12 +136,12 @@ export const InFooter: Story = {
   render: () => (
     <div className="p-6 border-t border-border bg-background-secondary">
       <div className="flex items-center justify-between">
-        <p className="text-sm text-foreground-muted">
+        <p id="in-footer-p-copy-2024-sonance-al" className="text-sm text-foreground-muted">
           &copy; 2024 Sonance. All rights reserved.
         </p>
         <div className="flex items-center gap-4">
-          <a href="#" className="text-sm text-foreground-muted hover:text-foreground">Privacy</a>
-          <a href="#" className="text-sm text-foreground-muted hover:text-foreground">Terms</a>
+          <a id="in-footer-a" href="#" className="text-sm text-foreground-muted hover:text-foreground">Privacy</a>
+          <a id="in-footer-a" href="#" className="text-sm text-foreground-muted hover:text-foreground">Terms</a>
           <div className="w-px h-4 bg-border" />
           <SimpleThemeToggle />
         </div>
@@ -155,7 +155,7 @@ export const InMobileMenu: Story = {
   render: () => (
     <div className="w-72 p-4 border border-border rounded-sm bg-card space-y-4">
       <div className="flex items-center justify-between pb-4 border-b border-border">
-        <span className="font-medium">Menu</span>
+        <span id="in-mobile-menu-span-menu" className="font-medium">Menu</span>
         <button className="p-1 hover:bg-secondary-hover rounded-sm">
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -165,6 +165,7 @@ export const InMobileMenu: Story = {
       <nav className="space-y-1">
         {['Home', 'Products', 'About', 'Contact'].map((item) => (
           <a
+            id="nav-a"
             key={item}
             href="#"
             className="block px-3 py-2 rounded-sm hover:bg-secondary-hover"
@@ -175,7 +176,7 @@ export const InMobileMenu: Story = {
       </nav>
       <div className="pt-4 border-t border-border">
         <div className="flex items-center justify-between px-3">
-          <span className="text-sm text-foreground-muted">Theme</span>
+          <span id="nav-span-theme" className="text-sm text-foreground-muted">Theme</span>
           <ThemeToggle />
         </div>
       </div>
@@ -188,11 +189,11 @@ export const AllVariants: Story = {
   render: () => (
     <div className="space-y-8">
       <div>
-        <h4 className="text-sm font-medium mb-3">ThemeToggle (Light / Dark / System)</h4>
+        <h4 id="all-variants-h4-themetoggle-light-da" className="text-sm font-medium mb-3">ThemeToggle (Light / Dark / System)</h4>
         <ThemeToggle />
       </div>
       <div>
-        <h4 className="text-sm font-medium mb-3">SimpleThemeToggle (Light / Dark)</h4>
+        <h4 id="all-variants-h4-simplethemetoggle-li" className="text-sm font-medium mb-3">SimpleThemeToggle (Light / Dark)</h4>
         <SimpleThemeToggle />
       </div>
     </div>
@@ -205,38 +206,38 @@ export const ResponsiveMatrix: Story = {
     <div className="space-y-8">
       {/* Mobile */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <h4 id="responsive-matrix-h4-mobile-375px" className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
         <div className="w-[375px] border border-dashed border-border p-4">
           <div className="flex items-center justify-between">
-            <span className="text-sm">Dark Mode</span>
+            <span id="responsive-matrix-span-dark-mode" className="text-sm">Dark Mode</span>
             <SimpleThemeToggle />
           </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">
           <div className="flex items-center justify-between">
-            <span className="text-sm">Theme Preference</span>
+            <span id="responsive-matrix-span-theme-preference" className="text-sm">Theme Preference</span>
             <ThemeToggle />
           </div>
         </div>
       </div>
       {/* Desktop */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <h4 id="responsive-matrix-h4-desktop-1280px" className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
         <div className="w-[1280px] border border-dashed border-border p-4">
           <div className="flex items-center justify-between p-4 border border-border rounded-sm bg-card">
             <div className="flex items-center gap-2">
               <div className="w-8 h-8 bg-primary rounded-sm" />
-              <span className="font-medium">Sonance</span>
+              <span id="responsive-matrix-span-sonance" className="font-medium">Sonance</span>
             </div>
             <div className="flex items-center gap-4">
               <nav className="flex gap-4 text-sm">
-                <a href="#" className="hover:text-primary">Products</a>
-                <a href="#" className="hover:text-primary">About</a>
-                <a href="#" className="hover:text-primary">Contact</a>
+                <a id="nav-a" href="#" className="hover:text-primary">Products</a>
+                <a id="nav-a" href="#" className="hover:text-primary">About</a>
+                <a id="nav-a" href="#" className="hover:text-primary">Contact</a>
               </nav>
               <SimpleThemeToggle />
             </div>

package/dist/assets/components/theme-toggle.tsx

@@ -16,7 +16,7 @@ export function ThemeToggle({ className }: { className?: string }) {
   }
 
   return (
-    <div className={cn("flex items-center gap-1 p-1 bg-background-secondary rounded-sm", className)}>
+    <div data-sonance-name="theme-toggle" className={cn("flex items-center gap-1 p-1 bg-background-secondary rounded-sm", className)}>
       <button
         onClick={() => setTheme("light")}
         className={cn(
@@ -62,7 +62,7 @@ export function SimpleThemeToggle({ className }: { className?: string }) {
   }
 
   return (
-    <button
+    <button data-sonance-name="theme-toggle"
       onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
       className={cn(
         "p-2 rounded-sm hover:bg-secondary-hover transition-colors",

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

@@ -57,12 +57,12 @@ export const Default: Story = {
   render: () => {
     const [time, setTime] = useState<TimeValue>({ hours: 12, minutes: 0 });
     return (
-      <div className="w-48 space-y-4">
+      <div data-sonance-name="time-input.stories" className="w-48 space-y-4">
         <TimeInput
           value={time}
           onValueChange={setTime}
         />
-        <p className="text-sm text-foreground-muted">
+        <p id="default-p-selected-timehoursti" className="text-sm text-foreground-muted">
           Selected: {time.hours}:{time.minutes.toString().padStart(2, '0')}
         </p>
       </div>
@@ -98,7 +98,7 @@ export const Use24Hour: Story = {
           value={time}
           onValueChange={setTime}
         />
-        <p className="text-sm text-foreground-muted">
+        <p id="use24-hour-p-24hour-format-timeho" className="text-sm text-foreground-muted">
           24-hour format: {time.hours}:{time.minutes.toString().padStart(2, '0')}
         </p>
       </div>
@@ -184,7 +184,7 @@ export const AppointmentBookingExample: Story = {
 
     return (
       <div className="w-64 space-y-4 p-4 border border-border rounded-sm">
-        <h3 className="font-medium">Schedule Appointment</h3>
+        <h3 id="appointment-booking-example-h3-schedule-appointment" className="font-medium">Schedule Appointment</h3>
         <TimeInput
           label="Start Time"
           value={startTime}
@@ -197,7 +197,7 @@ export const AppointmentBookingExample: Story = {
           error={hasError ? "End time must be after start time" : undefined}
         />
         {!hasError && (
-          <p className="text-sm text-foreground-muted">
+          <p id="appointment-booking-example-p-duration-mathfloordu" className="text-sm text-foreground-muted">
             Duration: {Math.floor(durationMinutes / 60)}h {durationMinutes % 60}m
           </p>
         )}
@@ -233,16 +233,16 @@ export const TimeZoneExample: Story = {
         />
         <div className="space-y-2 text-sm">
           <div className="flex justify-between">
-            <span className="text-foreground-muted">UTC</span>
-            <span>{formatTime(utcHours)}</span>
+            <span id="time-zone-example-span-utc" className="text-foreground-muted">UTC</span>
+            <span id="time-zone-example-span-formattimeutchours">{formatTime(utcHours)}</span>
           </div>
           <div className="flex justify-between">
-            <span className="text-foreground-muted">London (GMT)</span>
-            <span>{formatTime(londonHours)}</span>
+            <span id="time-zone-example-span-london-gmt" className="text-foreground-muted">London (GMT)</span>
+            <span id="time-zone-example-span-formattimelondonhour">{formatTime(londonHours)}</span>
           </div>
           <div className="flex justify-between">
-            <span className="text-foreground-muted">Tokyo (JST)</span>
-            <span>{formatTime(tokyoHours)}</span>
+            <span id="time-zone-example-span-tokyo-jst" className="text-foreground-muted">Tokyo (JST)</span>
+            <span id="time-zone-example-span-formattimetokyohours">{formatTime(tokyoHours)}</span>
           </div>
         </div>
       </div>
@@ -309,11 +309,11 @@ export const StateMatrix: Story = {
     const states: TimeInputState[] = ['default', 'hover', 'focus', 'error', 'disabled'];
     return (
       <div className="space-y-6 w-48">
-        <h3 className="text-sm font-medium text-foreground-muted">TimeInput States</h3>
+        <h3 id="state-matrix-h3-timeinput-states" className="text-sm font-medium text-foreground-muted">TimeInput 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>
               <TimeInput
                 state={state}
                 defaultValue={{ hours: 9, minutes: 30 }}
@@ -333,14 +333,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">
           <TimeInput label="Start Time" defaultValue={{ hours: 9, minutes: 0 }} />
         </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">
             <TimeInput label="Start Time" defaultValue={{ hours: 9, minutes: 0 }} />
@@ -350,7 +350,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">
             <TimeInput label="12-Hour" defaultValue={{ hours: 9, minutes: 30 }} />

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

@@ -108,7 +108,7 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
     };
 
     return (
-      <div className={cn("w-full", className)}>
+      <div data-sonance-name="time-input" className={cn("w-full", className)}>
         {label && (
           <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
             {label}
@@ -154,7 +154,7 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
             </button>
           )}
         </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/toast.stories.tsx

@@ -89,7 +89,7 @@ export const WithAction: Story = {
     description: 'A new version of the app is ready to install.',
     onClose: () => {},
     action: (
-      <Button size="sm" variant="secondary">
+      <Button id="with-action-button-secondary" size="sm" variant="secondary">
         Update now
       </Button>
     ),
@@ -108,8 +108,9 @@ function ToastDemo() {
   const { addToast } = useToast();
 
   return (
-    <div className="space-y-4">
+    <div data-sonance-name="toast.stories" className="space-y-4">
       <Button
+        id="toast-demo-button"
         onClick={() =>
           addToast({
             title: 'Success',
@@ -121,6 +122,7 @@ function ToastDemo() {
         Show Success Toast
       </Button>
       <Button
+        id="toast-demo-button-secondary"
         variant="secondary"
         onClick={() =>
           addToast({
@@ -133,6 +135,7 @@ function ToastDemo() {
         Show Error Toast
       </Button>
       <Button
+        id="toast-demo-button-ghost"
         variant="ghost"
         onClick={() =>
           addToast({
@@ -162,7 +165,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-2">
           <Toast variant="success" title="Success" description="Changes saved." onClose={() => {}} />
           <Toast variant="error" title="Error" description="Failed to save." onClose={() => {}} />
@@ -170,7 +173,7 @@ export const ResponsiveMatrix: Story = {
       </div>
       {/* Tablet */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <h4 id="responsive-matrix-h4-tablet-768px" className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
         <div className="w-[768px] border border-dashed border-border p-4">
           <div className="flex gap-4">
             <Toast variant="success" title="Success" description="Your changes have been saved." onClose={() => {}} />
@@ -180,7 +183,7 @@ export const ResponsiveMatrix: Story = {
       </div>
       {/* Desktop */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <h4 id="responsive-matrix-h4-desktop-1280px" className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
         <div className="w-[1280px] border border-dashed border-border p-4">
           <div className="flex gap-4">
             <Toast variant="default" title="Notification" description="Default toast notification." onClose={() => {}} />

package/dist/assets/components/toast.tsx

@@ -47,17 +47,17 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
     const Icon = iconMap[variant || "default"];
 
     return (
-      <div
+      <div data-sonance-name="toast"
         ref={ref}
         role="alert"
-        className={cn(toastVariants({ variant }), className)}
+        className={cn(toastVariants({ variant }), className)} 
         {...props}
       >
         <Icon className="h-5 w-5 shrink-0 mt-0.5" />
         <div className="flex-1 space-y-1">
-          {title && <p className="text-sm font-medium">{title}</p>}
+          {title && <p id="icon-p-title" className="text-sm font-medium">{title}</p>}
           {description && (
-            <p className={cn("text-sm", variant === "default" && "text-foreground-secondary")}>
+            <p id="icon-p-description" className={cn("text-sm", variant === "default" && "text-foreground-secondary")}>
               {description}
             </p>
           )}
@@ -70,7 +70,7 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
             className="shrink-0 p-1 opacity-70 hover:opacity-100 transition-opacity"
           >
             <X className="h-4 w-4" />
-            <span className="sr-only">Dismiss</span>
+            <span id="icon-span-dismiss" className="sr-only">Dismiss</span>
           </button>
         )}
       </div>
@@ -163,7 +163,7 @@ export function ToastProvider({
   return (
     <ToastContext.Provider value={{ toasts, addToast, removeToast, clearToasts }}>
       {children}
-      <div
+      <div data-sonance-name="toast"
         className={cn(
           "fixed z-[100] flex flex-col gap-2 pointer-events-none",
           positionClasses[position]

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

@@ -18,7 +18,7 @@ const ToggleGroup = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
     VariantProps<typeof toggleVariants>
 >(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
+  <ToggleGroupPrimitive.Root data-sonance-name="toggle-group"
     ref={ref}
     className={cn("flex items-center justify-center gap-1", className)}
     {...props}

package/dist/assets/components/toggle.tsx

@@ -33,7 +33,7 @@ const Toggle = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
     VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
+  <TogglePrimitive.Root data-sonance-name="toggle"
     ref={ref}
     className={cn(toggleVariants({ variant, size, className }))}
     {...props}