sonance-brand-mcp 1.1.4 → 1.2.2

package/dist/assets/components/switch.tsx

@@ -1,16 +1,37 @@
 "use client";
 
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
 import { cn } from "@/lib/utils";
 
+export type SwitchState = "default" | "hover" | "focus" | "checked" | "disabled";
+
 interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
   label?: string;
   description?: string;
+  /** Visual state for Storybook/Figma documentation */
+  state?: SwitchState;
 }
 
+// State styles for Storybook/Figma visualization
+const getTrackStateStyles = (state?: SwitchState) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, string> = {
+    hover: "border-border-hover",
+    focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+    checked: "border-primary bg-primary",
+    disabled: "opacity-50 cursor-not-allowed",
+  };
+
+  return stateMap[state] || "";
+};
+
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  ({ className, label, description, id, ...props }, ref) => {
-    const inputId = id || `switch-${Math.random().toString(36).substr(2, 9)}`;
+  ({ className, label, description, id, state, disabled, checked, ...props }, ref) => {
+    const uniqueId = useId();
+    const inputId = id || `switch-${uniqueId}`;
+    const isDisabled = disabled || state === "disabled";
+    const isChecked = checked || state === "checked";
 
     return (
       <div className="flex items-start gap-3">
@@ -22,6 +43,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             "has-[:checked]:border-primary has-[:checked]:bg-primary",
             "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
             "has-[:focus]:ring-2 has-[:focus]:ring-border-focus has-[:focus]:ring-offset-2 has-[:focus]:ring-offset-background",
+            getTrackStateStyles(state),
             className
           )}
         >
@@ -29,6 +51,8 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             type="checkbox"
             id={inputId}
             ref={ref}
+            disabled={isDisabled}
+            checked={isChecked}
             className="peer sr-only"
             {...props}
           />
@@ -36,7 +60,8 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             className={cn(
               "pointer-events-none absolute left-0.5 h-5 w-5 rounded-full bg-foreground-muted shadow-sm",
               "transition-transform duration-200",
-              "peer-checked:translate-x-5 peer-checked:bg-primary-foreground"
+              "peer-checked:translate-x-5 peer-checked:bg-primary-foreground",
+              state === "checked" && "translate-x-5 bg-primary-foreground"
             )}
           />
         </label>

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

@@ -0,0 +1,322 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+} from './table';
+import { Badge } from './badge';
+import { Checkbox } from './checkbox';
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Data Display/Table',
+  component: Table,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A table component for displaying structured data with support for headers, footers, and captions.',
+      },
+    },
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const products = [
+  { id: 1, name: 'VP66 TL', category: 'In-Wall', price: 1299.00, status: 'In Stock' },
+  { id: 2, name: 'VP86 TL', category: 'In-Wall', price: 1599.00, status: 'In Stock' },
+  { id: 3, name: 'Garden Series', category: 'Outdoor', price: 899.00, status: 'Low Stock' },
+  { id: 4, name: 'Soundbar 3.0', category: 'Soundbar', price: 2499.00, status: 'Out of Stock' },
+  { id: 5, name: 'Sub 10', category: 'Subwoofer', price: 1199.00, status: 'In Stock' },
+];
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Product</TableHead>
+          <TableHead>Category</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead className="text-right">Price</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {products.map((product) => (
+          <TableRow key={product.id}>
+            <TableCell className="font-medium">{product.name}</TableCell>
+            <TableCell>{product.category}</TableCell>
+            <TableCell>{product.status}</TableCell>
+            <TableCell className="text-right">${product.price.toFixed(2)}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+};
+
+export const WithCaption: Story = {
+  render: () => (
+    <Table>
+      <TableCaption>A list of Sonance products and their availability.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Product</TableHead>
+          <TableHead>Category</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead className="text-right">Price</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {products.slice(0, 3).map((product) => (
+          <TableRow key={product.id}>
+            <TableCell className="font-medium">{product.name}</TableCell>
+            <TableCell>{product.category}</TableCell>
+            <TableCell>{product.status}</TableCell>
+            <TableCell className="text-right">${product.price.toFixed(2)}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+};
+
+export const WithFooter: Story = {
+  render: () => {
+    const total = products.reduce((sum, p) => sum + p.price, 0);
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Product</TableHead>
+            <TableHead>Category</TableHead>
+            <TableHead className="text-right">Price</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {products.map((product) => (
+            <TableRow key={product.id}>
+              <TableCell className="font-medium">{product.name}</TableCell>
+              <TableCell>{product.category}</TableCell>
+              <TableCell className="text-right">${product.price.toFixed(2)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell colSpan={2}>Total</TableCell>
+            <TableCell className="text-right font-bold">${total.toFixed(2)}</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    );
+  },
+};
+
+export const WithBadges: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Product</TableHead>
+          <TableHead>Category</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead className="text-right">Price</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {products.map((product) => (
+          <TableRow key={product.id}>
+            <TableCell className="font-medium">{product.name}</TableCell>
+            <TableCell>{product.category}</TableCell>
+            <TableCell>
+              <Badge
+                variant={
+                  product.status === 'In Stock'
+                    ? 'success'
+                    : product.status === 'Low Stock'
+                    ? 'warning'
+                    : 'error'
+                }
+              >
+                {product.status}
+              </Badge>
+            </TableCell>
+            <TableCell className="text-right">${product.price.toFixed(2)}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+};
+
+export const WithCheckboxes: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-12">
+            <Checkbox />
+          </TableHead>
+          <TableHead>Product</TableHead>
+          <TableHead>Category</TableHead>
+          <TableHead className="text-right">Price</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {products.map((product) => (
+          <TableRow key={product.id}>
+            <TableCell>
+              <Checkbox />
+            </TableCell>
+            <TableCell className="font-medium">{product.name}</TableCell>
+            <TableCell>{product.category}</TableCell>
+            <TableCell className="text-right">${product.price.toFixed(2)}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+};
+
+export const Striped: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Product</TableHead>
+          <TableHead>Category</TableHead>
+          <TableHead className="text-right">Price</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {products.map((product, index) => (
+          <TableRow
+            key={product.id}
+            className={index % 2 === 0 ? 'bg-background-secondary' : ''}
+          >
+            <TableCell className="font-medium">{product.name}</TableCell>
+            <TableCell>{product.category}</TableCell>
+            <TableCell className="text-right">${product.price.toFixed(2)}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+};
+
+export const Compact: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="py-2">Product</TableHead>
+          <TableHead className="py-2">Category</TableHead>
+          <TableHead className="py-2 text-right">Price</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {products.map((product) => (
+          <TableRow key={product.id}>
+            <TableCell className="py-2 font-medium">{product.name}</TableCell>
+            <TableCell className="py-2">{product.category}</TableCell>
+            <TableCell className="py-2 text-right">${product.price.toFixed(2)}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+};
+
+// 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-2 overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="py-2 text-xs">Product</TableHead>
+                <TableHead className="py-2 text-xs text-right">Price</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {products.slice(0, 3).map((product) => (
+                <TableRow key={product.id}>
+                  <TableCell className="py-2 text-sm font-medium">{product.name}</TableCell>
+                  <TableCell className="py-2 text-sm text-right">${product.price.toFixed(2)}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </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">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Product</TableHead>
+                <TableHead>Category</TableHead>
+                <TableHead className="text-right">Price</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {products.slice(0, 4).map((product) => (
+                <TableRow key={product.id}>
+                  <TableCell className="font-medium">{product.name}</TableCell>
+                  <TableCell>{product.category}</TableCell>
+                  <TableCell className="text-right">${product.price.toFixed(2)}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </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">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-12"><Checkbox /></TableHead>
+                <TableHead>Product</TableHead>
+                <TableHead>Category</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="text-right">Price</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {products.map((product) => (
+                <TableRow key={product.id}>
+                  <TableCell><Checkbox /></TableCell>
+                  <TableCell className="font-medium">{product.name}</TableCell>
+                  <TableCell>{product.category}</TableCell>
+                  <TableCell>
+                    <Badge variant={product.status === 'In Stock' ? 'success' : product.status === 'Low Stock' ? 'warning' : 'error'}>
+                      {product.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-right">${product.price.toFixed(2)}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  ),
+};