sonance-brand-mcp 1.1.4 → 1.2.2

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

@@ -0,0 +1,275 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, type CardState } from './card';
+import { Button } from './button';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Data Display/Card',
+  component: Card,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A versatile card component for grouping related content. Supports default and elevated variants.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'elevated'],
+      description: 'Visual style variant',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'hover', 'focus'],
+      description: 'Visual state for documentation',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story
+export const Default: Story = {
+  render: (args) => (
+    <Card {...args} className="w-80">
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card description goes here</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-foreground-secondary">
+          This is the card content area where you can place any content.
+        </p>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// Elevated
+export const Elevated: Story = {
+  render: () => (
+    <Card variant="elevated" className="w-80">
+      <CardHeader>
+        <CardTitle>Elevated Card</CardTitle>
+        <CardDescription>With shadow effect</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-foreground-secondary">
+          Elevated cards have a shadow that increases on hover.
+        </p>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// With Footer
+export const WithFooter: Story = {
+  render: () => (
+    <Card className="w-80">
+      <CardHeader>
+        <CardTitle>Card with Actions</CardTitle>
+        <CardDescription>Includes action buttons in footer</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-foreground-secondary">
+          Cards can include a footer section for actions.
+        </p>
+      </CardContent>
+      <CardFooter className="gap-2">
+        <Button variant="primary" size="sm">Save</Button>
+        <Button variant="secondary" size="sm">Cancel</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+// Product Card Example
+export const ProductCard: Story = {
+  render: () => (
+    <Card className="w-72 overflow-hidden">
+      <div className="aspect-square bg-background-secondary flex items-center justify-center">
+        <span className="text-foreground-muted">Product Image</span>
+      </div>
+      <CardHeader>
+        <CardTitle>Sonance Speaker</CardTitle>
+        <CardDescription>Premium in-wall speaker</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-2xl font-light text-foreground">$1,299.00</p>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Add to Cart</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+// Grid Layout
+export const GridLayout: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-4">
+      {[1, 2, 3].map((i) => (
+        <Card key={i} variant="elevated" className="w-64">
+          <CardHeader>
+            <CardTitle>Feature {i}</CardTitle>
+            <CardDescription>Feature description</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-foreground-secondary text-sm">
+              Brief explanation of this feature and its benefits.
+            </p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  ),
+};
+
+// Variants Comparison
+export const VariantsComparison: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <Card className="w-64">
+        <CardHeader>
+          <CardTitle>Default Card</CardTitle>
+          <CardDescription>Subtle border, hover effect</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-foreground-secondary text-sm">
+            Best for content lists and grids.
+          </p>
+        </CardContent>
+      </Card>
+      <Card variant="elevated" className="w-64">
+        <CardHeader>
+          <CardTitle>Elevated Card</CardTitle>
+          <CardDescription>Shadow with hover enhancement</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-foreground-secondary text-sm">
+            Best for featured or important content.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  ),
+};
+
+// Interactive States - for Figma documentation
+export const StateMatrix: Story = {
+  render: () => {
+    const variants = ['default', 'elevated'] as const;
+    const states: CardState[] = ['default', 'hover', 'focus'];
+
+    return (
+      <div className="space-y-8">
+        <h3 className="text-sm font-medium text-foreground-muted">Card State Matrix</h3>
+        <div className="grid grid-cols-4 gap-4">
+          <div></div>
+          {states.map((state) => (
+            <div key={state} className="text-xs font-medium text-foreground-muted uppercase text-center">
+              {state}
+            </div>
+          ))}
+        </div>
+        {variants.map((variant) => (
+          <div key={variant} className="grid grid-cols-4 gap-4 items-start">
+            <div className="text-xs font-medium text-foreground-muted uppercase pt-4">{variant}</div>
+            {states.map((state) => (
+              <Card key={`${variant}-${state}`} variant={variant} state={state} className="w-full">
+                <CardHeader>
+                  <CardTitle>Card Title</CardTitle>
+                  <CardDescription>{state} state</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-foreground-secondary text-sm">
+                    Card content goes here.
+                  </p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ))}
+      </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 space-y-4">
+          <Card className="w-full">
+            <CardHeader>
+              <CardTitle>Card Title</CardTitle>
+              <CardDescription>Card description</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p className="text-foreground-secondary text-sm">Content that fills the mobile width.</p>
+            </CardContent>
+            <CardFooter>
+              <Button className="w-full">Action</Button>
+            </CardFooter>
+          </Card>
+        </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">
+            <Card>
+              <CardHeader>
+                <CardTitle>Feature One</CardTitle>
+                <CardDescription>Description</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-foreground-secondary text-sm">Card content for tablet view.</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>Feature Two</CardTitle>
+                <CardDescription>Description</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-foreground-secondary text-sm">Card content for tablet view.</p>
+              </CardContent>
+            </Card>
+          </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-4 gap-4">
+            {[1, 2, 3, 4].map((i) => (
+              <Card key={i} variant="elevated">
+                <CardHeader>
+                  <CardTitle>Feature {i}</CardTitle>
+                  <CardDescription>Feature description</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-foreground-secondary text-sm">Card content at desktop width.</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/card.tsx

@@ -1,12 +1,36 @@
 import { cn } from "@/lib/utils";
 import { forwardRef } from "react";
 
+export type CardState = "default" | "hover" | "focus";
+
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   variant?: "default" | "elevated";
+  /** Visual state for Storybook/Figma documentation */
+  state?: CardState;
 }
 
+// State styles for Storybook/Figma visualization
+const getStateStyles = (variant: string, state?: CardState) => {
+  if (!state || state === "default") return "";
+
+  if (variant === "elevated") {
+    const stateMap: Record<string, string> = {
+      hover: "shadow-lg",
+      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+    };
+    return stateMap[state] || "";
+  }
+
+  const stateMap: Record<string, string> = {
+    hover: "border-border-hover bg-card-hover",
+    focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+  };
+
+  return stateMap[state] || "";
+};
+
 export const Card = forwardRef<HTMLDivElement, CardProps>(
-  ({ className, variant = "default", ...props }, ref) => {
+  ({ className, variant = "default", state, ...props }, ref) => {
     return (
       <div
         ref={ref}
@@ -14,6 +38,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
           "bg-card border border-card-border transition-all duration-200",
           variant === "elevated" && "shadow-md hover:shadow-lg",
           variant === "default" && "hover:border-border-hover hover:bg-card-hover",
+          getStateStyles(variant, state),
           className
         )}
         {...props}

package/dist/assets/components/checkbox-group.stories.tsx

@@ -0,0 +1,281 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { CheckboxGroup, CheckboxGroupItem, CheckboxList } from './checkbox-group';
+
+const meta: Meta<typeof CheckboxGroup> = {
+  title: 'Components/Forms/CheckboxGroup',
+  component: CheckboxGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A group of checkboxes for selecting multiple options. Supports vertical and horizontal layouts, labels, descriptions, and error states.',
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+      description: 'Layout orientation of the checkbox group',
+      table: {
+        defaultValue: { summary: 'vertical' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable all checkboxes in the group',
+    },
+    label: {
+      control: 'text',
+      description: 'Group label text',
+    },
+    error: {
+      control: 'text',
+      description: 'Error message',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default
+export const Default: Story = {
+  render: () => {
+    const [values, setValues] = useState<string[]>([]);
+    return (
+      <CheckboxGroup value={values} onValueChange={setValues}>
+        <CheckboxGroupItem value="option1" label="Option 1" />
+        <CheckboxGroupItem value="option2" label="Option 2" />
+        <CheckboxGroupItem value="option3" label="Option 3" />
+      </CheckboxGroup>
+    );
+  },
+};
+
+// With Label
+export const WithLabel: Story = {
+  render: () => {
+    const [values, setValues] = useState<string[]>(['notifications']);
+    return (
+      <CheckboxGroup
+        label="Communication Preferences"
+        value={values}
+        onValueChange={setValues}
+      >
+        <CheckboxGroupItem
+          value="notifications"
+          label="Push notifications"
+          description="Receive notifications on your device"
+        />
+        <CheckboxGroupItem
+          value="emails"
+          label="Email updates"
+          description="Receive product updates via email"
+        />
+        <CheckboxGroupItem
+          value="sms"
+          label="SMS alerts"
+          description="Receive text message alerts"
+        />
+      </CheckboxGroup>
+    );
+  },
+};
+
+// Horizontal Layout
+export const Horizontal: Story = {
+  render: () => {
+    const [values, setValues] = useState<string[]>([]);
+    return (
+      <CheckboxGroup
+        label="Select sizes"
+        orientation="horizontal"
+        value={values}
+        onValueChange={setValues}
+      >
+        <CheckboxGroupItem value="small" label="Small" />
+        <CheckboxGroupItem value="medium" label="Medium" />
+        <CheckboxGroupItem value="large" label="Large" />
+        <CheckboxGroupItem value="xlarge" label="X-Large" />
+      </CheckboxGroup>
+    );
+  },
+};
+
+// With Error
+export const WithError: Story = {
+  render: () => {
+    const [values, setValues] = useState<string[]>([]);
+    return (
+      <CheckboxGroup
+        label="Required Selection"
+        error="Please select at least one option"
+        value={values}
+        onValueChange={setValues}
+      >
+        <CheckboxGroupItem value="agree" label="I agree to the terms" />
+        <CheckboxGroupItem value="marketing" label="I want to receive marketing emails" />
+      </CheckboxGroup>
+    );
+  },
+};
+
+// Disabled
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <CheckboxGroup
+        label="Disabled Group"
+        disabled
+        defaultValue={['option1']}
+      >
+        <CheckboxGroupItem value="option1" label="Option 1 (pre-selected)" />
+        <CheckboxGroupItem value="option2" label="Option 2" />
+        <CheckboxGroupItem value="option3" label="Option 3" />
+      </CheckboxGroup>
+    );
+  },
+};
+
+// Individual Disabled Items
+export const IndividualDisabled: Story = {
+  render: () => {
+    const [values, setValues] = useState<string[]>(['basic']);
+    return (
+      <CheckboxGroup
+        label="Select Features"
+        value={values}
+        onValueChange={setValues}
+      >
+        <CheckboxGroupItem value="basic" label="Basic features" description="Always included" />
+        <CheckboxGroupItem value="advanced" label="Advanced features" description="Requires Pro plan" />
+        <CheckboxGroupItem
+          value="enterprise"
+          label="Enterprise features"
+          description="Contact sales for access"
+          disabled
+        />
+      </CheckboxGroup>
+    );
+  },
+};
+
+// Using CheckboxList (convenience component)
+export const UsingCheckboxList: Story = {
+  render: () => {
+    const [values, setValues] = useState<string[]>(['speaker']);
+    const options = [
+      { value: 'speaker', label: 'In-Wall Speakers', description: 'Premium architectural speakers' },
+      { value: 'soundbar', label: 'Soundbar', description: 'For home theater setups' },
+      { value: 'subwoofer', label: 'Subwoofer', description: 'Deep bass performance' },
+      { value: 'outdoor', label: 'Outdoor Speakers', description: 'Weather-resistant design', disabled: true },
+    ];
+
+    return (
+      <CheckboxList
+        label="Product Interests"
+        options={options}
+        value={values}
+        onValueChange={setValues}
+      />
+    );
+  },
+};
+
+// Form Example
+export const FormExample: Story = {
+  render: () => {
+    const [interests, setInterests] = useState<string[]>([]);
+    const [agreements, setAgreements] = useState<string[]>([]);
+
+    return (
+      <div className="space-y-8 max-w-md">
+        <CheckboxGroup
+          label="Areas of Interest"
+          value={interests}
+          onValueChange={setInterests}
+        >
+          <CheckboxGroupItem value="residential" label="Residential Audio" />
+          <CheckboxGroupItem value="commercial" label="Commercial Installations" />
+          <CheckboxGroupItem value="outdoor" label="Outdoor Sound Systems" />
+          <CheckboxGroupItem value="marine" label="Marine Audio" />
+        </CheckboxGroup>
+
+        <CheckboxGroup
+          label="Agreements"
+          value={agreements}
+          onValueChange={setAgreements}
+          error={agreements.length === 0 ? "Please accept the required agreements" : undefined}
+        >
+          <CheckboxGroupItem
+            value="terms"
+            label="I accept the terms and conditions"
+          />
+          <CheckboxGroupItem
+            value="privacy"
+            label="I have read the privacy policy"
+          />
+          <CheckboxGroupItem
+            value="newsletter"
+            label="Subscribe to newsletter (optional)"
+          />
+        </CheckboxGroup>
+
+        <div className="text-sm text-foreground-muted">
+          <p>Interests: {interests.join(', ') || 'None selected'}</p>
+          <p>Agreements: {agreements.join(', ') || 'None selected'}</p>
+        </div>
+      </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">
+          <CheckboxGroup label="Select Options" defaultValue={['option1']}>
+            <CheckboxGroupItem value="option1" label="Option 1" />
+            <CheckboxGroupItem value="option2" label="Option 2" />
+            <CheckboxGroupItem value="option3" label="Option 3" />
+          </CheckboxGroup>
+        </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">
+          <CheckboxGroup label="Select Sizes" orientation="horizontal" defaultValue={['medium']}>
+            <CheckboxGroupItem value="small" label="Small" />
+            <CheckboxGroupItem value="medium" label="Medium" />
+            <CheckboxGroupItem value="large" label="Large" />
+            <CheckboxGroupItem value="xlarge" label="X-Large" />
+          </CheckboxGroup>
+        </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-2 gap-8">
+            <CheckboxGroup label="Features" defaultValue={['basic']}>
+              <CheckboxGroupItem value="basic" label="Basic features" description="Always included" />
+              <CheckboxGroupItem value="advanced" label="Advanced features" description="Pro plan" />
+              <CheckboxGroupItem value="enterprise" label="Enterprise" description="Contact sales" disabled />
+            </CheckboxGroup>
+            <CheckboxGroup label="With Error" error="Please select at least one">
+              <CheckboxGroupItem value="agree" label="I agree to terms" />
+              <CheckboxGroupItem value="marketing" label="Marketing emails" />
+            </CheckboxGroup>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};