sonance-brand-mcp 1.1.4 → 1.2.2

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

@@ -0,0 +1,218 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import {
+  Navbar,
+  NavbarContent,
+  NavbarBrand,
+  NavbarItems,
+  NavbarItem,
+  ResponsiveNavbar,
+} from './navbar';
+import { Button } from './button';
+
+const meta: Meta<typeof Navbar> = {
+  title: 'Components/Navigation/Navbar',
+  component: Navbar,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A responsive navigation bar component with multiple variants and mobile support.',
+      },
+    },
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'dark', 'transparent', 'blur'],
+    },
+    sticky: { control: 'boolean' },
+    bordered: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Navbar>
+      <NavbarContent>
+        <NavbarBrand>
+          <span className="text-xl font-semibold">Sonance</span>
+        </NavbarBrand>
+        <NavbarItems>
+          <NavbarItem href="#" active>Home</NavbarItem>
+          <NavbarItem href="#">Products</NavbarItem>
+          <NavbarItem href="#">About</NavbarItem>
+          <NavbarItem href="#">Contact</NavbarItem>
+        </NavbarItems>
+        <Button size="sm">Sign In</Button>
+      </NavbarContent>
+    </Navbar>
+  ),
+};
+
+export const Dark: Story = {
+  render: () => (
+    <Navbar variant="dark">
+      <NavbarContent>
+        <NavbarBrand>
+          <span className="text-xl font-semibold">Sonance</span>
+        </NavbarBrand>
+        <NavbarItems>
+          <NavbarItem href="#" active>Home</NavbarItem>
+          <NavbarItem href="#">Products</NavbarItem>
+          <NavbarItem href="#">About</NavbarItem>
+        </NavbarItems>
+        <Button size="sm" variant="inverted">Sign In</Button>
+      </NavbarContent>
+    </Navbar>
+  ),
+};
+
+export const Transparent: Story = {
+  render: () => (
+    <div className="relative h-64 bg-gradient-to-br from-sonance-charcoal to-sonance-gray-700">
+      <Navbar variant="transparent" className="text-white">
+        <NavbarContent>
+          <NavbarBrand>
+            <span className="text-xl font-semibold">Sonance</span>
+          </NavbarBrand>
+          <NavbarItems>
+            <NavbarItem href="#" active>Home</NavbarItem>
+            <NavbarItem href="#">Products</NavbarItem>
+            <NavbarItem href="#">About</NavbarItem>
+          </NavbarItems>
+          <Button size="sm" variant="inverted">Sign In</Button>
+        </NavbarContent>
+      </Navbar>
+    </div>
+  ),
+};
+
+export const Blur: Story = {
+  render: () => (
+    <div className="relative h-64 bg-gradient-to-br from-sonance-blue to-foundation-green">
+      <Navbar variant="blur">
+        <NavbarContent>
+          <NavbarBrand>
+            <span className="text-xl font-semibold">Sonance</span>
+          </NavbarBrand>
+          <NavbarItems>
+            <NavbarItem href="#" active>Home</NavbarItem>
+            <NavbarItem href="#">Products</NavbarItem>
+            <NavbarItem href="#">About</NavbarItem>
+          </NavbarItems>
+          <Button size="sm">Sign In</Button>
+        </NavbarContent>
+      </Navbar>
+      <div className="p-8 text-white">
+        <p>Content behind the blurred navbar</p>
+      </div>
+    </div>
+  ),
+};
+
+export const Responsive: Story = {
+  render: () => (
+    <ResponsiveNavbar
+      brand={<span className="text-xl font-semibold">Sonance</span>}
+      items={[
+        { label: 'Home', href: '#', active: true },
+        { label: 'Products', href: '#' },
+        { label: 'About', href: '#' },
+        { label: 'Contact', href: '#' },
+      ]}
+      actions={<Button size="sm">Sign In</Button>}
+    />
+  ),
+};
+
+export const WithLogo: Story = {
+  render: () => (
+    <Navbar>
+      <NavbarContent>
+        <NavbarBrand>
+          <div className="w-8 h-8 bg-primary rounded" />
+          <span className="text-xl font-semibold">Sonance</span>
+        </NavbarBrand>
+        <NavbarItems>
+          <NavbarItem href="#" active>Home</NavbarItem>
+          <NavbarItem href="#">Products</NavbarItem>
+          <NavbarItem href="#">Support</NavbarItem>
+        </NavbarItems>
+        <div className="flex items-center gap-2">
+          <Button size="sm" variant="ghost">Log In</Button>
+          <Button size="sm">Sign Up</Button>
+        </div>
+      </NavbarContent>
+    </Navbar>
+  ),
+};
+
+// 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 overflow-hidden">
+          <ResponsiveNavbar
+            brand={<span className="text-lg font-semibold">Sonance</span>}
+            items={[
+              { label: 'Home', href: '#', active: true },
+              { label: 'Products', href: '#' },
+              { label: 'About', href: '#' },
+            ]}
+            actions={<Button size="sm">Sign In</Button>}
+          />
+        </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 overflow-hidden">
+          <Navbar>
+            <NavbarContent>
+              <NavbarBrand>
+                <span className="text-xl font-semibold">Sonance</span>
+              </NavbarBrand>
+              <NavbarItems>
+                <NavbarItem href="#" active>Home</NavbarItem>
+                <NavbarItem href="#">Products</NavbarItem>
+                <NavbarItem href="#">About</NavbarItem>
+              </NavbarItems>
+              <Button size="sm">Sign In</Button>
+            </NavbarContent>
+          </Navbar>
+        </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 overflow-hidden">
+          <Navbar>
+            <NavbarContent>
+              <NavbarBrand>
+                <span className="text-xl font-semibold">Sonance</span>
+              </NavbarBrand>
+              <NavbarItems>
+                <NavbarItem href="#" active>Home</NavbarItem>
+                <NavbarItem href="#">Products</NavbarItem>
+                <NavbarItem href="#">About</NavbarItem>
+                <NavbarItem href="#">Support</NavbarItem>
+                <NavbarItem href="#">Contact</NavbarItem>
+              </NavbarItems>
+              <div className="flex items-center gap-2">
+                <Button size="sm" variant="ghost">Log In</Button>
+                <Button size="sm">Sign Up</Button>
+              </div>
+            </NavbarContent>
+          </Navbar>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/number-input.stories.tsx

@@ -0,0 +1,295 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { NumberInput, Stepper, type NumberInputState } from './number-input';
+
+const meta: Meta<typeof NumberInput> = {
+  title: 'Components/Forms/NumberInput',
+  component: NumberInput,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A number input component with increment/decrement controls.',
+      },
+    },
+  },
+  argTypes: {
+    state: {
+      control: 'select',
+      options: ['default', 'hover', 'focus', 'error', 'disabled'],
+      description: 'Visual state for documentation',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-48">
+      <NumberInput defaultValue={5} />
+    </div>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="w-48">
+      <NumberInput label="Quantity" defaultValue={1} />
+    </div>
+  ),
+};
+
+export const WithMinMax: Story = {
+  render: () => (
+    <div className="w-48">
+      <NumberInput
+        label="Volume Level"
+        defaultValue={50}
+        min={0}
+        max={100}
+      />
+    </div>
+  ),
+};
+
+export const CustomStep: Story = {
+  render: () => (
+    <div className="w-48">
+      <NumberInput
+        label="Price (in cents)"
+        defaultValue={500}
+        step={25}
+        min={0}
+      />
+    </div>
+  ),
+};
+
+export const DecimalStep: Story = {
+  render: () => (
+    <div className="w-48">
+      <NumberInput
+        label="Temperature"
+        defaultValue={72.5}
+        step={0.5}
+        min={60}
+        max={85}
+      />
+    </div>
+  ),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <div className="w-48">
+      <NumberInput
+        label="Quantity"
+        defaultValue={0}
+        min={1}
+        error="Minimum quantity is 1"
+      />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-48">
+      <NumberInput
+        label="Locked Value"
+        defaultValue={42}
+        disabled
+      />
+    </div>
+  ),
+};
+
+export const HiddenControls: Story = {
+  render: () => (
+    <div className="w-48">
+      <NumberInput
+        label="Direct Entry"
+        defaultValue={100}
+        hideControls
+      />
+    </div>
+  ),
+};
+
+export const CurrencyFormat: Story = {
+  render: () => (
+    <div className="w-48">
+      <NumberInput
+        label="Price"
+        defaultValue={1299}
+        formatOptions={{
+          style: 'currency',
+          currency: 'USD',
+        }}
+      />
+    </div>
+  ),
+};
+
+export const PercentageFormat: Story = {
+  render: () => (
+    <div className="w-48">
+      <NumberInput
+        label="Discount"
+        defaultValue={15}
+        min={0}
+        max={100}
+        formatOptions={{
+          style: 'percent',
+          maximumFractionDigits: 0,
+        }}
+      />
+    </div>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState(10);
+    return (
+      <div className="w-48 space-y-4">
+        <NumberInput
+          label="Controlled Input"
+          value={value}
+          onValueChange={setValue}
+          min={0}
+          max={20}
+        />
+        <p className="text-sm text-foreground-muted">
+          Current value: {value}
+        </p>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setValue(0)}
+            className="text-sm text-primary hover:text-primary-hover"
+          >
+            Reset to 0
+          </button>
+          <button
+            onClick={() => setValue(20)}
+            className="text-sm text-primary hover:text-primary-hover"
+          >
+            Set to Max
+          </button>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const StepperVariant: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="w-48">
+        <Stepper label="Small" size="sm" defaultValue={1} />
+      </div>
+      <div className="w-48">
+        <Stepper label="Medium" size="md" defaultValue={1} />
+      </div>
+      <div className="w-48">
+        <Stepper label="Large" size="lg" defaultValue={1} />
+      </div>
+    </div>
+  ),
+};
+
+export const QuantitySelector: Story = {
+  render: () => {
+    const [quantity, setQuantity] = useState(1);
+    const pricePerUnit = 1299;
+    const total = quantity * pricePerUnit;
+
+    return (
+      <div className="p-4 border border-border w-80">
+        <h3 className="font-medium text-foreground">VP66 TL In-Wall Speaker</h3>
+        <p className="text-sm text-foreground-muted mt-1">${pricePerUnit.toFixed(2)} each</p>
+        <div className="mt-4">
+          <NumberInput
+            label="Quantity"
+            value={quantity}
+            onValueChange={setQuantity}
+            min={1}
+            max={10}
+          />
+        </div>
+        <div className="mt-4 pt-4 border-t border-border flex justify-between items-center">
+          <span className="text-sm text-foreground-muted">Total:</span>
+          <span className="text-lg font-medium text-foreground">
+            ${total.toFixed(2)}
+          </span>
+        </div>
+      </div>
+    );
+  },
+};
+
+// State Matrix - Visual documentation of all states
+export const StateMatrix: Story = {
+  render: () => {
+    const states: NumberInputState[] = ['default', 'hover', 'focus', 'error', 'disabled'];
+    return (
+      <div className="space-y-6 w-48">
+        <h3 className="text-sm font-medium text-foreground-muted">NumberInput States</h3>
+        <div className="space-y-4">
+          {states.map((state) => (
+            <div key={state}>
+              <span className="text-xs font-medium text-foreground-muted uppercase">{state}</span>
+              <NumberInput
+                state={state}
+                defaultValue={5}
+                error={state === 'error' ? 'Error message' : undefined}
+              />
+            </div>
+          ))}
+        </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">
+          <NumberInput label="Quantity" defaultValue={1} min={1} max={10} />
+        </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">
+            <NumberInput label="Quantity" defaultValue={5} />
+            <NumberInput label="Volume" defaultValue={50} min={0} max={100} />
+          </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">
+            <NumberInput label="Default" defaultValue={5} />
+            <NumberInput label="With Min/Max" defaultValue={50} min={0} max={100} />
+            <NumberInput label="With Error" defaultValue={0} min={1} error="Min 1" />
+            <NumberInput label="Disabled" defaultValue={42} disabled />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/number-input.tsx

@@ -4,6 +4,22 @@ import { forwardRef, useState, useCallback } from "react";
 import { Plus, Minus } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+export type NumberInputState = "default" | "hover" | "focus" | "error" | "disabled";
+
+// State styles for Storybook/Figma visualization
+const getStateStyles = (state?: NumberInputState) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, string> = {
+    hover: "border-border-hover",
+    focus: "border-input-focus",
+    error: "border-error",
+    disabled: "opacity-50 cursor-not-allowed",
+  };
+
+  return stateMap[state] || "";
+};
+
 interface NumberInputProps {
   value?: number;
   defaultValue?: number;
@@ -17,6 +33,8 @@ interface NumberInputProps {
   hideControls?: boolean;
   formatOptions?: Intl.NumberFormatOptions;
   className?: string;
+  /** Visual state for Storybook/Figma documentation */
+  state?: NumberInputState;
 }
 
 export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
@@ -34,9 +52,12 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       hideControls = false,
       formatOptions,
       className,
+      state,
     },
     ref
   ) => {
+    const isDisabled = disabled || state === "disabled";
+    const hasError = error || state === "error";
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [inputValue, setInputValue] = useState(String(defaultValue));
 
@@ -58,13 +79,13 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     );
 
     const increment = () => {
-      if (!disabled) {
+      if (!isDisabled) {
         updateValue(value + step);
       }
     };
 
     const decrement = () => {
-      if (!disabled) {
+      if (!isDisabled) {
         updateValue(value - step);
       }
     };
@@ -90,7 +111,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     };
 
     const handleKeyDown = (e: React.KeyboardEvent) => {
-      if (disabled) return;
+      if (isDisabled) return;
 
       switch (e.key) {
         case "ArrowUp":
@@ -124,7 +145,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             <button
               type="button"
               onClick={decrement}
-              disabled={disabled || !canDecrement}
+              disabled={isDisabled || !canDecrement}
               className={cn(
                 "flex items-center justify-center w-10",
                 "border border-r-0 border-input-border bg-background-secondary",
@@ -145,22 +166,23 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             onChange={handleInputChange}
             onBlur={handleBlur}
             onKeyDown={handleKeyDown}
-            disabled={disabled}
+            disabled={isDisabled}
             className={cn(
               "flex-1 min-w-0 border border-input-border bg-input px-4 py-3",
               "text-center text-foreground",
               "transition-colors duration-200",
               "focus:border-input-focus focus:outline-none focus:z-10",
               "disabled:cursor-not-allowed disabled:opacity-50",
-              error && "border-error",
-              hideControls ? "" : "border-x-0"
+              hasError && "border-error",
+              hideControls ? "" : "border-x-0",
+              getStateStyles(state)
             )}
           />
           {!hideControls && (
             <button
               type="button"
               onClick={increment}
-              disabled={disabled || !canIncrement}
+              disabled={isDisabled || !canIncrement}
               className={cn(
                 "flex items-center justify-center w-10",
                 "border border-l-0 border-input-border bg-background-secondary",