sonance-brand-mcp 1.1.4 → 1.1.7

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

@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Link, Anchor } from './link';
+
+const meta: Meta<typeof Link> = {
+  title: 'Components/Navigation/Link',
+  component: Link,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A styled link component with variants for different contexts.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'primary', 'muted', 'subtle', 'nav'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    external: { control: 'boolean' },
+    showExternalIcon: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    href: '#',
+    children: 'Default Link',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    href: '#',
+    children: 'Primary Link',
+  },
+};
+
+export const Muted: Story = {
+  args: {
+    variant: 'muted',
+    href: '#',
+    children: 'Muted Link',
+  },
+};
+
+export const Subtle: Story = {
+  args: {
+    variant: 'subtle',
+    href: '#',
+    children: 'Subtle Link',
+  },
+};
+
+export const Nav: Story = {
+  args: {
+    variant: 'nav',
+    href: '#',
+    children: 'Navigation Link',
+  },
+};
+
+export const ExternalLink: Story = {
+  args: {
+    href: 'https://sonance.com',
+    children: 'Visit Sonance',
+  },
+};
+
+export const ExternalWithoutIcon: Story = {
+  args: {
+    href: 'https://sonance.com',
+    showExternalIcon: false,
+    children: 'Visit Sonance (no icon)',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Link href="#" size="sm">Small</Link>
+      <Link href="#" size="md">Medium</Link>
+      <Link href="#" size="lg">Large</Link>
+    </div>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-xs text-foreground-muted mb-1">Default</p>
+        <Link href="#">Click here to learn more</Link>
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-1">Primary</p>
+        <Link href="#" variant="primary">View documentation</Link>
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-1">Muted</p>
+        <Link href="#" variant="muted">Terms of service</Link>
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-1">Subtle</p>
+        <Link href="#" variant="subtle">Privacy policy</Link>
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-1">Nav</p>
+        <Link href="#" variant="nav">Navigation item</Link>
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-1">External</p>
+        <Link href="https://sonance.com">Visit Sonance</Link>
+      </div>
+    </div>
+  ),
+};
+
+export const InParagraph: Story = {
+  render: () => (
+    <p className="text-foreground-secondary max-w-md">
+      Sonance has been creating premium audio solutions for over 35 years.{' '}
+      <Link href="#">Learn more about our history</Link> or{' '}
+      <Link href="https://sonance.com" variant="primary">visit our website</Link>{' '}
+      for the latest products.
+    </p>
+  ),
+};
+
+export const AnchorExample: Story = {
+  render: () => (
+    <Anchor href="#" className="group">
+      <div className="p-4 border border-border hover:border-primary transition-colors">
+        <h3 className="font-medium text-foreground group-hover:text-primary transition-colors">
+          Clickable Card
+        </h3>
+        <p className="text-sm text-foreground-muted">
+          The Anchor component wraps any element in an unstyled link.
+        </p>
+      </div>
+    </Anchor>
+  ),
+};
+
+// Responsive Matrix - Mobile, Tablet, Desktop
+export const ResponsiveMatrix: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Mobile */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <div className="w-[375px] border border-dashed border-border p-4">
+          <p className="text-foreground-secondary text-sm">
+            Visit <Link href="#">our products</Link> or <Link href="https://sonance.com">sonance.com</Link>.
+          </p>
+        </div>
+      </div>
+      {/* Tablet */}
+      <div>
+        <h4 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 gap-6">
+            <Link href="#" variant="nav">Home</Link>
+            <Link href="#" variant="nav">Products</Link>
+            <Link href="#" variant="nav">About</Link>
+            <Link href="#" variant="nav">Contact</Link>
+          </div>
+        </div>
+      </div>
+      {/* Desktop */}
+      <div>
+        <h4 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">
+            <div className="flex items-center gap-6">
+              <Link href="#" variant="nav">Home</Link>
+              <Link href="#" variant="nav">Products</Link>
+              <Link href="#" variant="nav">Support</Link>
+              <Link href="#" variant="nav">About</Link>
+            </div>
+            <div className="flex items-center gap-4">
+              <Link href="#" variant="muted" size="sm">Terms</Link>
+              <Link href="#" variant="muted" size="sm">Privacy</Link>
+              <Link href="https://sonance.com" variant="primary">Visit Sonance</Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/link.tsx

@@ -3,6 +3,8 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { ExternalLink } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+export type LinkState = "default" | "hover" | "focus" | "active" | "visited";
+
 const linkVariants = cva(
   "inline-flex items-center gap-1 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
   {
@@ -27,11 +29,53 @@ const linkVariants = cva(
   }
 );
 
+// State styles for Storybook/Figma visualization
+const getStateStyles = (variant: string | null | undefined, state?: LinkState) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, Record<string, string>> = {
+    default: {
+      hover: "text-foreground-secondary",
+      focus: "ring-2 ring-border-focus ring-offset-2",
+      active: "text-foreground-muted",
+      visited: "text-foreground-muted",
+    },
+    primary: {
+      hover: "text-primary-hover",
+      focus: "ring-2 ring-border-focus ring-offset-2",
+      active: "text-primary-active",
+      visited: "text-primary-hover",
+    },
+    muted: {
+      hover: "text-foreground",
+      focus: "ring-2 ring-border-focus ring-offset-2",
+      active: "text-foreground",
+      visited: "text-foreground-muted",
+    },
+    subtle: {
+      hover: "text-foreground-muted",
+      focus: "ring-2 ring-border-focus ring-offset-2",
+      active: "text-foreground-muted",
+      visited: "text-foreground-subtle",
+    },
+    nav: {
+      hover: "text-foreground",
+      focus: "ring-2 ring-border-focus ring-offset-2",
+      active: "text-foreground",
+      visited: "text-foreground-secondary",
+    },
+  };
+
+  return stateMap[variant || "default"]?.[state] || "";
+};
+
 interface LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
     VariantProps<typeof linkVariants> {
   external?: boolean;
   showExternalIcon?: boolean;
+  /** Visual state for Storybook/Figma documentation */
+  state?: LinkState;
 }
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
@@ -42,6 +86,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       size,
       external,
       showExternalIcon = true,
+      state,
       children,
       href,
       ...props
@@ -54,7 +99,11 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       <a
         ref={ref}
         href={href}
-        className={cn(linkVariants({ variant, size }), className)}
+        className={cn(
+          linkVariants({ variant, size }),
+          getStateStyles(variant, state),
+          className
+        )}
         {...(isExternal && {
           target: "_blank",
           rel: "noopener noreferrer",

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

@@ -0,0 +1,287 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { ComponentProps } from 'react';
+import { Speaker, Headphones, Radio, Music } from 'lucide-react';
+import { Listbox, ListboxItem, ListboxSection, type ListboxItemState } from './listbox';
+
+type ListboxStoryProps = ComponentProps<typeof Listbox> & {
+  state?: ListboxItemState;
+};
+
+const meta: Meta<ListboxStoryProps> = {
+  title: 'Components/Forms/Listbox',
+  component: Listbox,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A list selection component supporting single and multiple selection modes.',
+      },
+    },
+  },
+  argTypes: {
+    state: {
+      control: 'select',
+      options: ['default', 'hover', 'focus', 'selected', 'disabled'],
+      description: 'Visual state for ListboxItem documentation',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ListboxStoryProps>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-64">
+      <Listbox defaultValue="speaker1">
+        <ListboxItem value="speaker1">VP66 TL</ListboxItem>
+        <ListboxItem value="speaker2">VP86 TL</ListboxItem>
+        <ListboxItem value="speaker3">Garden Series</ListboxItem>
+        <ListboxItem value="speaker4">Soundbar 3.0</ListboxItem>
+      </Listbox>
+    </div>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="w-64">
+      <Listbox label="Select Speaker" defaultValue="speaker1">
+        <ListboxItem value="speaker1">VP66 TL</ListboxItem>
+        <ListboxItem value="speaker2">VP86 TL</ListboxItem>
+        <ListboxItem value="speaker3">Garden Series</ListboxItem>
+      </Listbox>
+    </div>
+  ),
+};
+
+export const WithDescriptions: Story = {
+  render: () => (
+    <div className="w-80">
+      <Listbox label="Choose Product" defaultValue="inwall">
+        <ListboxItem value="inwall" description="Invisible sound for any room">
+          In-Wall Speakers
+        </ListboxItem>
+        <ListboxItem value="outdoor" description="Weather-resistant for gardens">
+          Outdoor Speakers
+        </ListboxItem>
+        <ListboxItem value="soundbar" description="Premium home theater audio">
+          Soundbar
+        </ListboxItem>
+        <ListboxItem value="subwoofer" description="Deep bass performance">
+          Subwoofer
+        </ListboxItem>
+      </Listbox>
+    </div>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className="w-72">
+      <Listbox label="Audio Source" defaultValue="speakers">
+        <ListboxItem
+          value="speakers"
+          startContent={<Speaker className="h-4 w-4" />}
+          description="Main room speakers"
+        >
+          Speakers
+        </ListboxItem>
+        <ListboxItem
+          value="headphones"
+          startContent={<Headphones className="h-4 w-4" />}
+          description="Private listening"
+        >
+          Headphones
+        </ListboxItem>
+        <ListboxItem
+          value="radio"
+          startContent={<Radio className="h-4 w-4" />}
+          description="FM/AM broadcast"
+        >
+          Radio
+        </ListboxItem>
+        <ListboxItem
+          value="streaming"
+          startContent={<Music className="h-4 w-4" />}
+          description="Online music services"
+        >
+          Streaming
+        </ListboxItem>
+      </Listbox>
+    </div>
+  ),
+};
+
+export const MultipleSelection: Story = {
+  render: () => (
+    <div className="w-64">
+      <Listbox label="Select Rooms" multiple defaultValue={['living', 'kitchen']}>
+        <ListboxItem value="living">Living Room</ListboxItem>
+        <ListboxItem value="kitchen">Kitchen</ListboxItem>
+        <ListboxItem value="bedroom">Bedroom</ListboxItem>
+        <ListboxItem value="office">Office</ListboxItem>
+        <ListboxItem value="patio">Patio</ListboxItem>
+      </Listbox>
+    </div>
+  ),
+};
+
+export const WithDisabledItems: Story = {
+  render: () => (
+    <div className="w-64">
+      <Listbox label="Select Zone" defaultValue="zone1">
+        <ListboxItem value="zone1">Zone 1 - Living</ListboxItem>
+        <ListboxItem value="zone2">Zone 2 - Kitchen</ListboxItem>
+        <ListboxItem value="zone3" disabled>
+          Zone 3 - Offline
+        </ListboxItem>
+        <ListboxItem value="zone4">Zone 4 - Bedroom</ListboxItem>
+        <ListboxItem value="zone5" disabled>
+          Zone 5 - Maintenance
+        </ListboxItem>
+      </Listbox>
+    </div>
+  ),
+};
+
+export const WithSections: Story = {
+  render: () => (
+    <div className="w-72">
+      <Listbox label="Select Product" defaultValue="vp66">
+        <ListboxSection title="In-Wall">
+          <ListboxItem value="vp66">VP66 TL</ListboxItem>
+          <ListboxItem value="vp86">VP86 TL</ListboxItem>
+          <ListboxItem value="vp88">VP88 R</ListboxItem>
+        </ListboxSection>
+        <ListboxSection title="Outdoor">
+          <ListboxItem value="garden">Garden Series</ListboxItem>
+          <ListboxItem value="landscape">Landscape Series</ListboxItem>
+        </ListboxSection>
+        <ListboxSection title="Soundbars">
+          <ListboxItem value="soundbar3">Soundbar 3.0</ListboxItem>
+          <ListboxItem value="soundbar5">Soundbar 5.1</ListboxItem>
+        </ListboxSection>
+      </Listbox>
+    </div>
+  ),
+};
+
+export const SettingsList: Story = {
+  render: () => (
+    <div className="w-80">
+      <Listbox label="Audio Quality" defaultValue="high">
+        <ListboxItem
+          value="low"
+          description="128 kbps - Saves data"
+        >
+          Low Quality
+        </ListboxItem>
+        <ListboxItem
+          value="normal"
+          description="256 kbps - Balanced"
+        >
+          Normal Quality
+        </ListboxItem>
+        <ListboxItem
+          value="high"
+          description="320 kbps - Best sound"
+        >
+          High Quality
+        </ListboxItem>
+        <ListboxItem
+          value="lossless"
+          description="FLAC - Studio quality"
+        >
+          Lossless
+        </ListboxItem>
+      </Listbox>
+    </div>
+  ),
+};
+
+// State Matrix - Visual documentation of all ListboxItem states
+export const StateMatrix: Story = {
+  render: () => {
+    const states: ListboxItemState[] = ['default', 'hover', 'focus', 'selected', 'disabled'];
+    return (
+      <div className="space-y-6 w-64">
+        <h3 className="text-sm font-medium text-foreground-muted">ListboxItem States</h3>
+        <Listbox>
+          {states.map((state) => (
+            <ListboxItem key={state} value={state} state={state}>
+              {state} state
+            </ListboxItem>
+          ))}
+        </Listbox>
+      </div>
+    );
+  },
+};
+
+// Responsive Matrix - Mobile, Tablet, Desktop
+export const ResponsiveMatrix: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Mobile */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <div className="w-[375px] border border-dashed border-border p-4">
+          <Listbox label="Select Speaker" defaultValue="speaker1">
+            <ListboxItem value="speaker1">VP66 TL</ListboxItem>
+            <ListboxItem value="speaker2">VP86 TL</ListboxItem>
+            <ListboxItem value="speaker3">Garden Series</ListboxItem>
+          </Listbox>
+        </div>
+      </div>
+      {/* Tablet */}
+      <div>
+        <h4 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">
+            <Listbox label="Product Category" defaultValue="inwall">
+              <ListboxItem value="inwall">In-Wall Speakers</ListboxItem>
+              <ListboxItem value="outdoor">Outdoor Speakers</ListboxItem>
+              <ListboxItem value="soundbar">Soundbar</ListboxItem>
+            </Listbox>
+            <Listbox label="Audio Quality" defaultValue="high">
+              <ListboxItem value="low">Low Quality</ListboxItem>
+              <ListboxItem value="normal">Normal Quality</ListboxItem>
+              <ListboxItem value="high">High Quality</ListboxItem>
+            </Listbox>
+          </div>
+        </div>
+      </div>
+      {/* Desktop */}
+      <div>
+        <h4 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-3 gap-4">
+            <Listbox label="Select Product" defaultValue="vp66">
+              <ListboxSection title="In-Wall">
+                <ListboxItem value="vp66">VP66 TL</ListboxItem>
+                <ListboxItem value="vp86">VP86 TL</ListboxItem>
+              </ListboxSection>
+              <ListboxSection title="Outdoor">
+                <ListboxItem value="garden">Garden Series</ListboxItem>
+              </ListboxSection>
+            </Listbox>
+            <Listbox label="Select Room" multiple defaultValue={['living']}>
+              <ListboxItem value="living">Living Room</ListboxItem>
+              <ListboxItem value="kitchen">Kitchen</ListboxItem>
+              <ListboxItem value="bedroom">Bedroom</ListboxItem>
+            </Listbox>
+            <Listbox label="Audio Quality" defaultValue="high">
+              <ListboxItem value="low" description="128 kbps">Low</ListboxItem>
+              <ListboxItem value="high" description="320 kbps">High</ListboxItem>
+              <ListboxItem value="lossless" description="FLAC">Lossless</ListboxItem>
+            </Listbox>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/listbox.tsx

@@ -4,6 +4,22 @@ import { forwardRef, createContext, useContext, useState } from "react";
 import { Check } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+export type ListboxItemState = "default" | "hover" | "focus" | "selected" | "disabled";
+
+// State styles for Storybook/Figma visualization
+const getItemStateStyles = (state?: ListboxItemState, isSelected?: boolean) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, string> = {
+    hover: "bg-secondary-hover",
+    focus: "ring-2 ring-border-focus ring-inset",
+    selected: "bg-primary text-primary-foreground",
+    disabled: "opacity-50 cursor-not-allowed",
+  };
+
+  return stateMap[state] || "";
+};
+
 interface ListboxContextValue {
   value: string | string[];
   onChange: (value: string) => void;
@@ -83,6 +99,8 @@ interface ListboxItemProps {
   endContent?: React.ReactNode;
   className?: string;
   children: React.ReactNode;
+  /** Visual state for Storybook/Figma documentation */
+  state?: ListboxItemState;
 }
 
 export const ListboxItem = forwardRef<HTMLLIElement, ListboxItemProps>(
@@ -95,6 +113,7 @@ export const ListboxItem = forwardRef<HTMLLIElement, ListboxItemProps>(
       endContent,
       className,
       children,
+      state,
     },
     ref
   ) => {
@@ -105,21 +124,25 @@ export const ListboxItem = forwardRef<HTMLLIElement, ListboxItemProps>(
     const isSelected = multiple
       ? Array.isArray(selectedValue) && selectedValue.includes(value)
       : selectedValue === value;
+    const isSelectedState = state === "selected";
+    const isDisabled = disabled || state === "disabled";
+    const finalSelected = isSelected || isSelectedState;
 
     return (
       <li
         ref={ref}
         role="option"
-        aria-selected={isSelected}
-        aria-disabled={disabled}
-        onClick={() => !disabled && onChange(value)}
+        aria-selected={finalSelected}
+        aria-disabled={isDisabled}
+        onClick={() => !isDisabled && onChange(value)}
         className={cn(
           "flex items-center gap-3 px-4 py-3 cursor-pointer",
           "transition-colors duration-150",
-          isSelected
+          finalSelected
             ? "bg-primary text-primary-foreground"
             : "hover:bg-secondary-hover",
-          disabled && "cursor-not-allowed opacity-50",
+          isDisabled && "cursor-not-allowed opacity-50",
+          getItemStateStyles(state, finalSelected),
           className
         )}
       >
@@ -132,7 +155,7 @@ export const ListboxItem = forwardRef<HTMLLIElement, ListboxItemProps>(
             <div
               className={cn(
                 "text-xs mt-0.5 truncate",
-                isSelected ? "text-primary-foreground/70" : "text-foreground-muted"
+                finalSelected ? "text-primary-foreground/70" : "text-foreground-muted"
               )}
             >
               {description}
@@ -142,7 +165,7 @@ export const ListboxItem = forwardRef<HTMLLIElement, ListboxItemProps>(
         {endContent && (
           <span className="shrink-0">{endContent}</span>
         )}
-        {isSelected && !endContent && (
+        {finalSelected && !endContent && (
           <Check className="h-4 w-4 shrink-0" />
         )}
       </li>