sonance-brand-mcp 1.2.5 → 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,13 +17,7 @@ export const Code = forwardRef<HTMLElement, CodeProps>(
     };
 
     return (
-      <code
-        ref={ref}
-        className={cn(
-          "px-1.5 py-0.5 font-mono text-sm rounded-sm",
-          variantClasses[variant],
-          className
-        )}
+      <code data-sonance-name="code"
         {...props}
       />
     );
@@ -61,12 +55,12 @@ export function CodeBlock({
   const lines = code.split("\n");
 
   return (
-    <div className={cn("relative group", 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-4 py-2 border-b border-border bg-background-tertiary">
-          <span className="text-xs font-medium text-foreground-muted">{filename}</span>
+        <div className="flex items-center justify-between px-3 sm:px-4 py-2 border-b border-border bg-background-tertiary">
+          <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">
+            <span id="code-block-span-language" className="text-xs uppercase tracking-wider text-foreground-subtle flex-shrink-0 ml-2">
               {language}
             </span>
           )}
@@ -75,25 +69,25 @@ export function CodeBlock({
       <div className="relative">
         <pre
           className={cn(
-            "overflow-x-auto bg-background-secondary p-4",
-            "font-mono text-sm text-foreground-secondary",
+            "overflow-x-auto bg-background-secondary p-3 sm:p-4 w-full max-w-full",
+            "font-mono text-xs sm:text-sm text-foreground-secondary",
             filename && "rounded-t-none"
           )}
         >
-          <code>
+          <code className="block">
             {showLineNumbers ? (
               lines.map((line, index) => (
                 <div
                   key={index}
                   className={cn(
                     "flex",
-                    highlightLines.includes(index + 1) && "bg-primary/10 -mx-4 px-4"
+                    highlightLines.includes(index + 1) && "bg-primary/10 -mx-3 sm:-mx-4 px-3 sm:px-4"
                   )}
                 >
-                  <span className="mr-4 inline-block 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>
               ))
             ) : (
@@ -104,7 +98,7 @@ export function CodeBlock({
         <button
           onClick={copyToClipboard}
           className={cn(
-            "absolute right-2 top-2 p-2",
+            "absolute right-1.5 sm:right-2 top-1.5 sm:top-2 p-1.5 sm:p-2",
             "bg-background border border-border rounded-sm",
             "text-foreground-muted hover:text-foreground",
             "opacity-0 group-hover:opacity-100 transition-opacity",
@@ -113,9 +107,9 @@ export function CodeBlock({
           aria-label={copied ? "Copied!" : "Copy code"}
         >
           {copied ? (
-            <Check className="h-4 w-4 text-success" />
+            <Check className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-success" />
           ) : (
-            <Copy className="h-4 w-4" />
+            <Copy className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
           )}
         </button>
       </div>
@@ -148,24 +142,25 @@ export function Snippet({
   return (
     <div
       className={cn(
-        "inline-flex items-center gap-2 px-3 py-2",
+        "inline-flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2",
         "bg-background-secondary border border-border rounded-sm",
-        "font-mono text-sm",
+        "font-mono text-xs sm:text-sm",
+        "max-w-full overflow-hidden",
         className
       )}
     >
-      {symbol && <span className="text-foreground-muted">{symbol}</span>}
-      <code className="text-foreground">{text}</code>
+      {symbol && <span id="snippet-span-symbol" className="text-foreground-muted flex-shrink-0">{symbol}</span>}
+      <code className="text-foreground truncate">{text}</code>
       {!hideCopyButton && (
         <button
           onClick={copyToClipboard}
-          className="ml-2 p-1 text-foreground-muted hover:text-foreground transition-colors"
+          className="ml-1 sm:ml-2 p-1 text-foreground-muted hover:text-foreground transition-colors flex-shrink-0"
           aria-label={copied ? "Copied!" : "Copy"}
         >
           {copied ? (
-            <Check className="h-3.5 w-3.5 text-success" />
+            <Check className="h-3 w-3 sm:h-3.5 sm:w-3.5 text-success" />
           ) : (
-            <Copy className="h-3.5 w-3.5" />
+            <Copy className="h-3 w-3 sm:h-3.5 sm:w-3.5" />
           )}
         </button>
       )}

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

@@ -0,0 +1,128 @@
+"use client";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./collapsible";
+import { cn } from "@/lib/utils";
+
+const meta: Meta<typeof Collapsible> = {
+  title: "Components/Data Display/Collapsible",
+  component: Collapsible,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+
+function CollapsibleDemo() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <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 id="collapsible-demo-h4-peduarte-starred-3-r" className="text-sm font-medium text-foreground">
+          @peduarte starred 3 repositories
+        </h4>
+        <CollapsibleTrigger asChild>
+          <button className="inline-flex h-8 w-8 items-center justify-center rounded-sm border border-border bg-transparent hover:bg-secondary-hover transition-colors">
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 transition-transform duration-200",
+                isOpen && "rotate-180"
+              )}
+            />
+            <span id="collapsible-demo-span-toggle" className="sr-only">Toggle</span>
+          </button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-sm border border-border px-4 py-3 text-sm text-foreground">
+        @radix-ui/primitives
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-sm border border-border px-4 py-3 text-sm text-foreground">
+          @radix-ui/colors
+        </div>
+        <div className="rounded-sm border border-border px-4 py-3 text-sm text-foreground">
+          @stitches/react
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export const Default: Story = {
+  render: () => <CollapsibleDemo />,
+};
+
+function CollapsibleFAQDemo() {
+  const [openItems, setOpenItems] = useState<string[]>([]);
+
+  const toggleItem = (item: string) => {
+    setOpenItems((prev) =>
+      prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]
+    );
+  };
+
+  const faqs = [
+    {
+      id: "1",
+      question: "What is Sonance?",
+      answer:
+        "Sonance is a premium audio brand specializing in architectural speakers and outdoor audio solutions.",
+    },
+    {
+      id: "2",
+      question: "How do I install outdoor speakers?",
+      answer:
+        "Outdoor speakers should be installed by a certified integrator to ensure proper weatherproofing and optimal audio performance.",
+    },
+    {
+      id: "3",
+      question: "Do you offer warranties?",
+      answer:
+        "Yes, all Sonance products come with comprehensive warranty coverage. Please refer to your product documentation for specific terms.",
+    },
+  ];
+
+  return (
+    <div className="w-[400px] space-y-2">
+      {faqs.map((faq) => (
+        <Collapsible
+          key={faq.id}
+          open={openItems.includes(faq.id)}
+          onOpenChange={() => toggleItem(faq.id)}
+        >
+          <CollapsibleTrigger asChild>
+            <button className="flex w-full items-center justify-between rounded-sm border border-border bg-card px-4 py-3 text-left text-sm font-medium text-foreground hover:bg-card-hover transition-colors">
+              {faq.question}
+              <ChevronDown
+                className={cn(
+                  "h-4 w-4 shrink-0 transition-transform duration-200",
+                  openItems.includes(faq.id) && "rotate-180"
+                )}
+              />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="border border-t-0 border-border bg-background px-4 py-3 text-sm text-foreground-secondary">
+              {faq.answer}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      ))}
+    </div>
+  );
+}
+
+export const FAQ: Story = {
+  render: () => <CollapsibleFAQDemo />,
+};
+

package/dist/assets/components/collapsible.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+

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

@@ -0,0 +1,183 @@
+"use client";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState, useEffect } from "react";
+import {
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from "lucide-react";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "./command";
+
+const meta: Meta<typeof Command> = {
+  title: "Components/Forms/Command",
+  component: Command,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Command>;
+
+export const Default: Story = {
+  render: () => (
+    <Command className="rounded-sm border border-border shadow-md w-[400px]">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <Calendar className="mr-2 h-4 w-4" />
+            <span id="default-span-calendar">Calendar</span>
+          </CommandItem>
+          <CommandItem>
+            <Smile className="mr-2 h-4 w-4" />
+            <span id="default-span-search-emoji">Search Emoji</span>
+          </CommandItem>
+          <CommandItem>
+            <Calculator className="mr-2 h-4 w-4" />
+            <span id="default-span-calculator">Calculator</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            <User className="mr-2 h-4 w-4" />
+            <span id="default-span-profile">Profile</span>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <CreditCard className="mr-2 h-4 w-4" />
+            <span id="default-span-billing">Billing</span>
+            <CommandShortcut>⌘B</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Settings className="mr-2 h-4 w-4" />
+            <span id="default-span-settings">Settings</span>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+};
+
+function CommandDialogDemo() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((open) => !open);
+      }
+    };
+
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  return (
+    <>
+      <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 id="command-dialog-demo-span" className="text-xs">⌘</span>K
+        </kbd>
+      </p>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>
+              <Calendar className="mr-2 h-4 w-4" />
+              <span id="command-dialog-demo-span-calendar">Calendar</span>
+            </CommandItem>
+            <CommandItem>
+              <Smile className="mr-2 h-4 w-4" />
+              <span id="command-dialog-demo-span-search-emoji">Search Emoji</span>
+            </CommandItem>
+            <CommandItem>
+              <Calculator className="mr-2 h-4 w-4" />
+              <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 id="command-dialog-demo-span-profile">Profile</span>
+              <CommandShortcut>⌘P</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <CreditCard className="mr-2 h-4 w-4" />
+              <span id="command-dialog-demo-span-billing">Billing</span>
+              <CommandShortcut>⌘B</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <Settings className="mr-2 h-4 w-4" />
+              <span id="command-dialog-demo-span-settings">Settings</span>
+              <CommandShortcut>⌘S</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}
+
+export const Dialog: Story = {
+  render: () => <CommandDialogDemo />,
+};
+
+export const Simple: Story = {
+  render: () => (
+    <Command className="rounded-sm border border-border shadow-md w-[300px]">
+      <CommandInput placeholder="Search products..." />
+      <CommandList>
+        <CommandEmpty>No products found.</CommandEmpty>
+        <CommandGroup heading="Products">
+          <CommandItem>Architectural Speakers</CommandItem>
+          <CommandItem>Outdoor Speakers</CommandItem>
+          <CommandItem>Subwoofers</CommandItem>
+          <CommandItem>Amplifiers</CommandItem>
+          <CommandItem>Accessories</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+};
+
+export const WithDisabledItems: Story = {
+  render: () => (
+    <Command className="rounded-sm border border-border shadow-md w-[350px]">
+      <CommandInput placeholder="Search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Actions">
+          <CommandItem>Create new project</CommandItem>
+          <CommandItem>Open existing project</CommandItem>
+          <CommandItem disabled>Import from Figma (Pro)</CommandItem>
+          <CommandItem disabled>Export to PDF (Pro)</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+};
+