sonance-brand-mcp 1.2.5 → 1.3.2

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

@@ -29,10 +29,10 @@ export const Default: Story = {
     };
 
     return (
-      <Form onSubmit={handleSubmit} className="w-80 space-y-4">
+      <Form data-sonance-name="form.stories" onSubmit={handleSubmit} className="w-80 space-y-4">
         <FormField name="email">
           <FormLabel>Email</FormLabel>
-          <Input name="email" type="email" placeholder="Enter your email" />
+          <Input id="default-input-email" name="email" type="email" placeholder="Enter your email" />
         </FormField>
         <FormSubmit>Subscribe</FormSubmit>
       </Form>
@@ -75,13 +75,13 @@ export const WithValidation: Story = {
       >
         <FormField name="email">
           <FormLabel required>Email</FormLabel>
-          <Input name="email" type="email" placeholder="you@example.com" />
+          <Input id="with-validation-input-email" name="email" type="email" placeholder="you@example.com" />
           <FormMessage />
         </FormField>
 
         <FormField name="password">
           <FormLabel required>Password</FormLabel>
-          <Input name="password" type="password" placeholder="Enter password" />
+          <Input id="with-validation-input-password" name="password" type="password" placeholder="Enter password" />
           <FormDescription>Must be at least 8 characters</FormDescription>
           <FormMessage />
         </FormField>
@@ -121,13 +121,13 @@ export const ContactForm: Story = {
         <div className="grid grid-cols-2 gap-4">
           <FormField name="name">
             <FormLabel required>Name</FormLabel>
-            <Input name="name" placeholder="Your name" />
+            <Input id="contact-form-input-name" name="name" placeholder="Your name" />
             <FormMessage />
           </FormField>
 
           <FormField name="email">
             <FormLabel required>Email</FormLabel>
-            <Input name="email" type="email" placeholder="you@example.com" />
+            <Input id="contact-form-input-email" name="email" type="email" placeholder="you@example.com" />
             <FormMessage />
           </FormField>
         </div>
@@ -135,6 +135,7 @@ export const ContactForm: Story = {
         <FormField name="subject">
           <FormLabel required>Subject</FormLabel>
           <Select
+            id="contact-form-select-select-a-topic"
             placeholder="Select a topic"
             options={[
               { value: 'sales', label: 'Sales Inquiry' },
@@ -148,7 +149,7 @@ export const ContactForm: Story = {
 
         <FormField name="message">
           <FormLabel required>Message</FormLabel>
-          <Textarea name="message" placeholder="How can we help?" rows={4} />
+          <Textarea id="contact-form-textarea-message" name="message" placeholder="How can we help?" rows={4} />
           <FormMessage />
         </FormField>
 
@@ -201,38 +202,38 @@ export const RegistrationForm: Story = {
         <div className="grid grid-cols-2 gap-4">
           <FormField name="firstName">
             <FormLabel required>First Name</FormLabel>
-            <Input name="firstName" placeholder="John" />
+            <Input id="registration-form-input-firstname" name="firstName" placeholder="John" />
             <FormMessage />
           </FormField>
 
           <FormField name="lastName">
             <FormLabel required>Last Name</FormLabel>
-            <Input name="lastName" placeholder="Doe" />
+            <Input id="registration-form-input-lastname" name="lastName" placeholder="Doe" />
             <FormMessage />
           </FormField>
         </div>
 
         <FormField name="email">
           <FormLabel required>Email</FormLabel>
-          <Input name="email" type="email" placeholder="john@example.com" />
+          <Input id="registration-form-input-email" name="email" type="email" placeholder="john@example.com" />
           <FormMessage />
         </FormField>
 
         <FormField name="password">
           <FormLabel required>Password</FormLabel>
-          <Input name="password" type="password" />
+          <Input id="registration-form-input-password" name="password" type="password" />
           <FormDescription>Minimum 8 characters</FormDescription>
           <FormMessage />
         </FormField>
 
         <FormField name="confirmPassword">
           <FormLabel required>Confirm Password</FormLabel>
-          <Input name="confirmPassword" type="password" />
+          <Input id="registration-form-input-confirmpassword" name="confirmPassword" type="password" />
           <FormMessage />
         </FormField>
 
         <FormField name="terms">
-          <Checkbox name="terms" value="accepted" label="I accept the terms and conditions" />
+          <Checkbox id="registration-form-checkbox-terms" name="terms" value="accepted" label="I accept the terms and conditions" />
           <FormMessage />
         </FormField>
 
@@ -247,25 +248,25 @@ export const ComponentsShowcase: Story = {
   render: () => (
     <div className="w-80 space-y-6">
       <div>
-        <h4 className="text-sm font-medium mb-2">FormLabel</h4>
+        <h4 id="components-showcase-h4-formlabel" className="text-sm font-medium mb-2">FormLabel</h4>
         <FormLabel>Regular Label</FormLabel>
         <FormLabel required>Required Label</FormLabel>
       </div>
 
       <div>
-        <h4 className="text-sm font-medium mb-2">FormDescription</h4>
+        <h4 id="components-showcase-h4-formdescription" className="text-sm font-medium mb-2">FormDescription</h4>
         <FormDescription>
           This is helper text that provides additional context for the field.
         </FormDescription>
       </div>
 
       <div>
-        <h4 className="text-sm font-medium mb-2">FormMessage (Error)</h4>
+        <h4 id="components-showcase-h4-formmessage-error" className="text-sm font-medium mb-2">FormMessage (Error)</h4>
         <FormMessage>This field is required</FormMessage>
       </div>
 
       <div>
-        <h4 className="text-sm font-medium mb-2">FormSubmit</h4>
+        <h4 id="components-showcase-h4-formsubmit" className="text-sm font-medium mb-2">FormSubmit</h4>
         <FormSubmit>Submit Button</FormSubmit>
       </div>
     </div>
@@ -285,7 +286,7 @@ export const AsyncSubmission: Story = {
       <Form onSubmit={handleSubmit} className="w-80 space-y-4">
         <FormField name="data">
           <FormLabel>Data</FormLabel>
-          <Input name="data" placeholder="Enter something" />
+          <Input id="async-submission-input-data" name="data" placeholder="Enter something" />
           <FormDescription>
             The submit button shows loading state during submission
           </FormDescription>
@@ -302,12 +303,12 @@ 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">
           <Form className="space-y-4">
             <FormField name="email">
               <FormLabel>Email</FormLabel>
-              <Input name="email" type="email" placeholder="you@example.com" />
+              <Input id="responsive-matrix-input-email" name="email" type="email" placeholder="you@example.com" />
             </FormField>
             <FormSubmit className="w-full">Subscribe</FormSubmit>
           </Form>
@@ -315,22 +316,22 @@ 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">
           <Form className="space-y-4">
             <div className="grid grid-cols-2 gap-4">
               <FormField name="firstName">
                 <FormLabel>First Name</FormLabel>
-                <Input name="firstName" placeholder="John" />
+                <Input id="responsive-matrix-input-firstname" name="firstName" placeholder="John" />
               </FormField>
               <FormField name="lastName">
                 <FormLabel>Last Name</FormLabel>
-                <Input name="lastName" placeholder="Doe" />
+                <Input id="responsive-matrix-input-lastname" name="lastName" placeholder="Doe" />
               </FormField>
             </div>
             <FormField name="email">
               <FormLabel>Email</FormLabel>
-              <Input name="email" type="email" placeholder="john@example.com" />
+              <Input id="responsive-matrix-input-email" name="email" type="email" placeholder="john@example.com" />
             </FormField>
             <FormSubmit>Submit</FormSubmit>
           </Form>
@@ -338,29 +339,29 @@ 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">
           <Form className="space-y-4 max-w-2xl">
             <div className="grid grid-cols-3 gap-4">
               <FormField name="firstName">
                 <FormLabel required>First Name</FormLabel>
-                <Input name="firstName" placeholder="John" />
+                <Input id="responsive-matrix-input-firstname" name="firstName" placeholder="John" />
                 <FormMessage />
               </FormField>
               <FormField name="lastName">
                 <FormLabel required>Last Name</FormLabel>
-                <Input name="lastName" placeholder="Doe" />
+                <Input id="responsive-matrix-input-lastname" name="lastName" placeholder="Doe" />
                 <FormMessage />
               </FormField>
               <FormField name="email">
                 <FormLabel required>Email</FormLabel>
-                <Input name="email" type="email" placeholder="john@example.com" />
+                <Input id="responsive-matrix-input-email" name="email" type="email" placeholder="john@example.com" />
                 <FormMessage />
               </FormField>
             </div>
             <FormField name="message">
               <FormLabel>Message</FormLabel>
-              <Textarea name="message" placeholder="How can we help?" rows={3} />
+              <Textarea id="responsive-matrix-textarea-message" name="message" placeholder="How can we help?" rows={3} />
               <FormDescription>Optional message</FormDescription>
             </FormField>
             <FormSubmit>Send Message</FormSubmit>

package/dist/assets/components/form.tsx

@@ -126,9 +126,9 @@ interface FormLabelProps {
 
 export function FormLabel({ children, required, className }: FormLabelProps) {
   return (
-    <label className={cn("block text-xs font-medium uppercase tracking-widest text-foreground-muted", className)}>
+    <label data-sonance-name="form" className={cn("block text-xs font-medium uppercase tracking-widest text-foreground-muted", className)}>
       {children}
-      {required && <span className="text-error ml-0.5">*</span>}
+      {required && <span id="form-label-span" className="text-error ml-0.5">*</span>}
     </label>
   );
 }
@@ -141,7 +141,7 @@ interface FormDescriptionProps {
 
 export function FormDescription({ children, className }: FormDescriptionProps) {
   return (
-    <p className={cn("text-sm text-foreground-muted", className)}>{children}</p>
+    <p id="form-description-p-children" data-sonance-name="form" className={cn("text-sm text-foreground-muted", className)}>{children}</p>
   );
 }
 
@@ -158,7 +158,7 @@ export function FormMessage({ children, className }: FormMessageProps) {
   if (!message) return null;
 
   return (
-    <p className={cn("text-sm text-error", className)}>{message}</p>
+    <p id="form-message-p-message" className={cn("text-sm text-error", className)}>{message}</p>
   );
 }
 
@@ -180,7 +180,7 @@ export function FormSubmit({ children, className, disabled, ...props }: FormSubm
         "transition-colors hover:bg-primary-hover",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         className
-      )}
+      )} data-sonance-name="form"
       {...props}
     >
       {form.isSubmitting ? "Submitting..." : children}

package/dist/assets/components/hover-card.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CalendarDays } from "lucide-react";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card";
+import { Avatar } from "./avatar";
+
+const meta: Meta<typeof HoverCard> = {
+  title: "Components/Overlays/HoverCard",
+  component: HoverCard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof HoverCard>;
+
+export const Default: Story = {
+  render: () => (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <a
+          id="default-a"
+          href="#"
+          className="text-sm font-medium text-primary underline underline-offset-4"
+        >
+          @sonance
+        </a>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="flex justify-between space-x-4">
+          <Avatar
+            fallback="Sonance"
+            size="md"
+          />
+          <div className="space-y-1">
+            <h4 id="default-h4-sonance" className="text-sm font-medium text-foreground">@sonance</h4>
+            <p id="default-p-premium-architectura" className="text-sm text-foreground-secondary">
+              Premium architectural speakers and outdoor audio solutions.
+            </p>
+            <div className="flex items-center pt-2">
+              <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
+              <span id="default-span-joined-december-2021" className="text-xs text-foreground-muted">
+                Joined December 2021
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  ),
+};
+
+export const ProductPreview: Story = {
+  render: () => (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <button className="text-sm font-medium underline underline-offset-4">
+          View Sonance Landscape Series
+        </button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="space-y-3">
+          <div className="h-32 rounded-sm bg-secondary-hover flex items-center justify-center">
+            <span id="product-preview-span-product-image" className="text-foreground-muted text-xs">Product Image</span>
+          </div>
+          <div className="space-y-1">
+            <h4 id="product-preview-h4-landscape-series" className="text-sm font-medium text-foreground">
+              Landscape Series
+            </h4>
+            <p id="product-preview-p-outdoor-speakers-des" className="text-sm text-foreground-secondary">
+              Outdoor speakers designed to blend seamlessly into your landscape
+              while delivering exceptional audio quality.
+            </p>
+            <p id="product-preview-p-starting-at-599" className="text-xs text-foreground-muted pt-1">
+              Starting at $599
+            </p>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  ),
+};
+
+export const LinkPreview: Story = {
+  render: () => (
+    <p id="link-preview-p" className="text-sm text-foreground-secondary">
+      Learn more about our{" "}
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <a
+            id="link-preview-a"
+            href="#"
+            className="font-medium text-foreground underline underline-offset-4"
+          >
+            installation services
+          </a>
+        </HoverCardTrigger>
+        <HoverCardContent>
+          <div className="space-y-2">
+            <h4 id="link-preview-h4-professional-install" className="text-sm font-medium text-foreground">
+              Professional Installation
+            </h4>
+            <p id="link-preview-p-our-certified-integr" className="text-sm text-foreground-secondary">
+              Our certified integrators ensure your audio system is installed
+              correctly for optimal performance.
+            </p>
+          </div>
+        </HoverCardContent>
+      </HoverCard>{" "}
+      for your home.
+    </p>
+  ),
+};
+

package/dist/assets/components/hover-card.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { cn } from "@/lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content data-sonance-name="hover-card"
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-sm border border-border bg-card p-4 text-foreground shadow-md outline-none",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2",
+      "data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2",
+      "data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
+