sonance-brand-mcp 1.1.4 → 1.2.2

package/dist/assets/components/slider.tsx

@@ -3,6 +3,35 @@
 import { forwardRef, useState, useRef, useCallback } from "react";
 import { cn } from "@/lib/utils";
 
+export type SliderState = "default" | "hover" | "focus" | "active" | "disabled";
+
+// State styles for Storybook/Figma visualization
+const getTrackStateStyles = (state?: SliderState) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, string> = {
+    hover: "",
+    focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+    active: "",
+    disabled: "opacity-50 cursor-not-allowed",
+  };
+
+  return stateMap[state] || "";
+};
+
+const getThumbStateStyles = (state?: SliderState) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, string> = {
+    hover: "scale-110",
+    focus: "",
+    active: "scale-110",
+    disabled: "hover:scale-100",
+  };
+
+  return stateMap[state] || "";
+};
+
 interface SliderProps {
   value?: number;
   defaultValue?: number;
@@ -14,6 +43,8 @@ interface SliderProps {
   showValue?: boolean;
   disabled?: boolean;
   className?: string;
+  /** Visual state for Storybook/Figma documentation */
+  state?: SliderState;
 }
 
 export const Slider = forwardRef<HTMLDivElement, SliderProps>(
@@ -29,9 +60,11 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
       showValue = false,
       disabled = false,
       className,
+      state,
     },
     ref
   ) => {
+    const isDisabled = disabled || state === "disabled";
     const [internalValue, setInternalValue] = useState(defaultValue);
     const trackRef = useRef<HTMLDivElement>(null);
 
@@ -40,7 +73,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
 
     const updateValue = useCallback(
       (clientX: number) => {
-        if (!trackRef.current || disabled) return;
+        if (!trackRef.current || isDisabled) return;
 
         const rect = trackRef.current.getBoundingClientRect();
         const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
@@ -51,11 +84,11 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
         setInternalValue(clampedValue);
         onValueChange?.(clampedValue);
       },
-      [disabled, min, max, step, onValueChange]
+      [isDisabled, min, max, step, onValueChange]
     );
 
     const handleMouseDown = (e: React.MouseEvent) => {
-      if (disabled) return;
+      if (isDisabled) return;
 
       updateValue(e.clientX);
 
@@ -73,7 +106,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
     };
 
     const handleKeyDown = (e: React.KeyboardEvent) => {
-      if (disabled) return;
+      if (isDisabled) return;
 
       let newValue = value;
       switch (e.key) {
@@ -120,14 +153,15 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
           aria-valuemin={min}
           aria-valuemax={max}
           aria-valuenow={value}
-          aria-disabled={disabled}
-          tabIndex={disabled ? -1 : 0}
+          aria-disabled={isDisabled}
+          tabIndex={isDisabled ? -1 : 0}
           onMouseDown={handleMouseDown}
           onKeyDown={handleKeyDown}
           className={cn(
             "relative h-2 w-full cursor-pointer rounded-full bg-background-secondary",
             "focus:outline-none focus:ring-2 focus:ring-border-focus focus:ring-offset-2 focus:ring-offset-background",
-            disabled && "cursor-not-allowed opacity-50"
+            isDisabled && "cursor-not-allowed opacity-50",
+            getTrackStateStyles(state)
           )}
         >
           {/* Filled track */}
@@ -141,7 +175,8 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
               "absolute top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full",
               "border-2 border-primary bg-background shadow-sm transition-all",
               "hover:scale-110",
-              disabled && "hover:scale-100"
+              isDisabled && "hover:scale-100",
+              getThumbStateStyles(state)
             )}
             style={{ left: `${percentage}%` }}
           />

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

@@ -0,0 +1,216 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Spacer, SpacerXS, SpacerSM, SpacerMD, SpacerLG, SpacerXL, FlexSpacer } from './spacer';
+
+const meta: Meta<typeof Spacer> = {
+  title: 'Components/Utilities/Spacer',
+  component: Spacer,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A utility component for adding consistent spacing between elements.',
+      },
+    },
+  },
+  argTypes: {
+    x: { control: { type: 'number', min: 0, max: 20 } },
+    y: { control: { type: 'number', min: 0, max: 20 } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="border border-dashed border-border p-4 w-64">
+      <div className="p-2 bg-primary text-primary-foreground text-center text-sm">Block 1</div>
+      <Spacer y={4} />
+      <div className="p-2 bg-primary text-primary-foreground text-center text-sm">Block 2</div>
+      <Spacer y={8} />
+      <div className="p-2 bg-primary text-primary-foreground text-center text-sm">Block 3</div>
+    </div>
+  ),
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <div className="flex items-center border border-dashed border-border p-4">
+      <div className="p-2 bg-primary text-primary-foreground text-center text-sm">A</div>
+      <Spacer x={4} />
+      <div className="p-2 bg-primary text-primary-foreground text-center text-sm">B</div>
+      <Spacer x={8} />
+      <div className="p-2 bg-primary text-primary-foreground text-center text-sm">C</div>
+    </div>
+  ),
+};
+
+export const PresetSizes: Story = {
+  render: () => (
+    <div className="border border-dashed border-border p-4 w-64">
+      <div className="p-2 bg-secondary text-foreground text-center text-xs">SpacerXS (8px)</div>
+      <SpacerXS />
+      <div className="p-2 bg-secondary text-foreground text-center text-xs">SpacerSM (16px)</div>
+      <SpacerSM />
+      <div className="p-2 bg-secondary text-foreground text-center text-xs">SpacerMD (24px)</div>
+      <SpacerMD />
+      <div className="p-2 bg-secondary text-foreground text-center text-xs">SpacerLG (32px)</div>
+      <SpacerLG />
+      <div className="p-2 bg-secondary text-foreground text-center text-xs">SpacerXL (48px)</div>
+      <SpacerXL />
+      <div className="p-2 bg-secondary text-foreground text-center text-xs">End</div>
+    </div>
+  ),
+};
+
+export const FlexSpacerExample: Story = {
+  render: () => (
+    <div className="flex items-center border border-border p-4 w-96">
+      <span className="text-foreground font-medium">Logo</span>
+      <FlexSpacer />
+      <button className="px-3 py-1 text-sm text-foreground-muted hover:text-foreground">About</button>
+      <Spacer x={2} />
+      <button className="px-3 py-1 text-sm text-foreground-muted hover:text-foreground">Contact</button>
+      <Spacer x={4} />
+      <button className="px-3 py-1 text-sm bg-primary text-primary-foreground">Sign In</button>
+    </div>
+  ),
+};
+
+export const CardLayout: Story = {
+  render: () => (
+    <div className="border border-border p-6 w-80">
+      <h3 className="text-lg font-medium text-foreground">Card Title</h3>
+      <SpacerXS />
+      <p className="text-sm text-foreground-muted">A subtitle or meta information</p>
+      <SpacerMD />
+      <p className="text-foreground-secondary">
+        This is the main content of the card. Notice how spacers provide consistent rhythm between elements.
+      </p>
+      <SpacerLG />
+      <div className="flex">
+        <button className="text-sm text-foreground-muted hover:text-foreground">Cancel</button>
+        <FlexSpacer />
+        <button className="px-4 py-2 bg-primary text-primary-foreground text-sm">Confirm</button>
+      </div>
+    </div>
+  ),
+};
+
+export const ResponsiveSpacing: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-xs text-foreground-muted">
+        Spacer uses a 4px base unit. y=1 is 4px, y=4 is 16px, etc.
+      </p>
+      <div className="border border-dashed border-border p-4 w-64">
+        {[1, 2, 4, 6, 8, 12].map((size) => (
+          <div key={size}>
+            <div className="p-2 bg-secondary text-foreground text-center text-xs">
+              y={size} ({size * 4}px)
+            </div>
+            <Spacer y={size} />
+          </div>
+        ))}
+        <div className="p-2 bg-secondary text-foreground text-center text-xs">End</div>
+      </div>
+    </div>
+  ),
+};
+
+export const FormLayout: Story = {
+  render: () => (
+    <form className="w-80 border border-border p-6">
+      <h2 className="text-lg font-medium text-foreground">Contact Form</h2>
+      <SpacerMD />
+
+      <label className="block text-sm font-medium text-foreground">Name</label>
+      <SpacerXS />
+      <input
+        type="text"
+        className="w-full px-3 py-2 border border-border bg-background text-foreground"
+        placeholder="Enter your name"
+      />
+
+      <SpacerSM />
+
+      <label className="block text-sm font-medium text-foreground">Email</label>
+      <SpacerXS />
+      <input
+        type="email"
+        className="w-full px-3 py-2 border border-border bg-background text-foreground"
+        placeholder="Enter your email"
+      />
+
+      <SpacerSM />
+
+      <label className="block text-sm font-medium text-foreground">Message</label>
+      <SpacerXS />
+      <textarea
+        className="w-full px-3 py-2 border border-border bg-background text-foreground"
+        placeholder="Your message"
+        rows={3}
+      />
+
+      <SpacerLG />
+
+      <button
+        type="submit"
+        className="w-full px-4 py-2 bg-primary text-primary-foreground"
+      >
+        Send Message
+      </button>
+    </form>
+  ),
+};
+
+// 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">
+          <div className="p-2 bg-primary text-primary-foreground text-center text-sm">Header</div>
+          <SpacerMD />
+          <div className="p-2 bg-secondary text-foreground text-center text-sm">Content</div>
+          <SpacerLG />
+          <div className="p-2 bg-primary text-primary-foreground text-center text-sm">Footer</div>
+        </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">
+            <span className="text-foreground font-medium">Logo</span>
+            <FlexSpacer />
+            <button className="px-3 py-1 text-sm text-foreground-muted">About</button>
+            <Spacer x={2} />
+            <button className="px-3 py-1 text-sm text-foreground-muted">Contact</button>
+            <Spacer x={4} />
+            <button className="px-3 py-1 bg-primary text-primary-foreground text-sm">Sign In</button>
+          </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">
+            <span className="text-foreground font-medium">Sonance</span>
+            <Spacer x={8} />
+            <button className="px-3 py-1 text-sm text-foreground-muted">Products</button>
+            <Spacer x={4} />
+            <button className="px-3 py-1 text-sm text-foreground-muted">Support</button>
+            <Spacer x={4} />
+            <button className="px-3 py-1 text-sm text-foreground-muted">About</button>
+            <FlexSpacer />
+            <button className="px-4 py-2 bg-primary text-primary-foreground text-sm">Get Started</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Spinner, DotsSpinner } from './spinner';
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Components/Feedback/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Loading spinner components for indicating async operations.',
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl'],
+    },
+    label: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Loading...',
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-end gap-6">
+      <Spinner size="sm" />
+      <Spinner size="md" />
+      <Spinner size="lg" />
+      <Spinner size="xl" />
+    </div>
+  ),
+};
+
+export const AllSizesWithLabels: Story = {
+  render: () => (
+    <div className="flex items-start gap-8">
+      <Spinner size="sm" label="Small" />
+      <Spinner size="md" label="Medium" />
+      <Spinner size="lg" label="Large" />
+      <Spinner size="xl" label="Extra Large" />
+    </div>
+  ),
+};
+
+// Dots Spinner Stories
+export const Dots: StoryObj<typeof DotsSpinner> = {
+  render: () => <DotsSpinner />,
+};
+
+export const DotsSizes: StoryObj<typeof DotsSpinner> = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <DotsSpinner size="sm" />
+      <DotsSpinner size="md" />
+      <DotsSpinner size="lg" />
+    </div>
+  ),
+};
+
+export const LoadingStates: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="flex items-center gap-4">
+        <Spinner size="sm" />
+        <span className="text-foreground-secondary">Loading content...</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <DotsSpinner />
+        <span className="text-foreground-secondary">Processing...</span>
+      </div>
+      <div className="text-center p-8 border border-border rounded">
+        <Spinner size="lg" label="Loading data" />
+      </div>
+    </div>
+  ),
+};
+
+export const ButtonLoading: Story = {
+  render: () => (
+    <button className="inline-flex items-center gap-2 bg-primary text-primary-foreground px-6 py-3">
+      <Spinner size="sm" />
+      <span>Processing...</span>
+    </button>
+  ),
+};
+
+// 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">
+          <div className="text-center p-8 border border-border rounded">
+            <Spinner size="md" label="Loading..." />
+          </div>
+        </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 justify-center items-center gap-8">
+            <Spinner size="sm" label="Small" />
+            <Spinner size="md" label="Medium" />
+            <DotsSpinner size="md" />
+          </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 justify-between items-center">
+            <div className="flex items-center gap-4">
+              <Spinner size="sm" />
+              <span className="text-foreground-secondary">Loading content...</span>
+            </div>
+            <div className="flex items-center gap-8">
+              <Spinner size="sm" />
+              <Spinner size="md" />
+              <Spinner size="lg" />
+              <Spinner size="xl" />
+            </div>
+            <div className="flex items-center gap-4">
+              <DotsSpinner />
+              <span className="text-foreground-secondary">Processing...</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Switch } from './switch';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Forms/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A toggle switch for binary settings. Ideal for on/off states.',
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label text',
+    },
+    description: {
+      control: 'text',
+      description: 'Description text below the label',
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Checked state',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default
+export const Default: Story = {
+  args: {},
+};
+
+// With Label
+export const WithLabel: Story = {
+  args: {
+    label: 'Enable notifications',
+  },
+};
+
+// With Description
+export const WithDescription: Story = {
+  args: {
+    label: 'Dark mode',
+    description: 'Switch between light and dark themes',
+  },
+};
+
+// Checked
+export const Checked: Story = {
+  args: {
+    label: 'Enabled',
+    defaultChecked: true,
+  },
+};
+
+// Disabled
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled switch',
+    disabled: true,
+  },
+};
+
+// Disabled Checked
+export const DisabledChecked: Story = {
+  args: {
+    label: 'Disabled enabled',
+    disabled: true,
+    defaultChecked: true,
+  },
+};
+
+// All States
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Switch label="Off" />
+      <Switch label="On" defaultChecked />
+      <Switch label="With description" description="Additional context for this setting" />
+      <Switch label="Disabled" disabled />
+      <Switch label="Disabled on" disabled defaultChecked />
+    </div>
+  ),
+};
+
+// Settings Example
+export const SettingsExample: Story = {
+  render: () => (
+    <div className="space-y-6 w-96">
+      <h3 className="text-lg font-medium text-foreground">Settings</h3>
+      <div className="space-y-4 divide-y divide-divider">
+        <Switch
+          label="Push notifications"
+          description="Receive push notifications on your device"
+          defaultChecked
+        />
+        <div className="pt-4">
+          <Switch
+            label="Email digest"
+            description="Weekly summary of your activity"
+          />
+        </div>
+        <div className="pt-4">
+          <Switch
+            label="Auto-update"
+            description="Automatically install updates"
+            defaultChecked
+          />
+        </div>
+        <div className="pt-4">
+          <Switch
+            label="Analytics"
+            description="Help improve the product with usage data"
+          />
+        </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 space-y-4">
+          <Switch label="Dark mode" description="Enable dark theme" />
+          <Switch label="Notifications" defaultChecked />
+          <Switch label="Auto-save" defaultChecked />
+        </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">
+            <Switch label="Email notifications" description="Receive email updates" defaultChecked />
+            <Switch label="Push notifications" description="Mobile app alerts" />
+            <Switch label="Weekly digest" description="Summary of activity" defaultChecked />
+            <Switch label="Marketing emails" description="Product announcements" />
+          </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">
+            <Switch label="Off" />
+            <Switch label="On" defaultChecked />
+            <Switch label="Disabled" disabled />
+            <Switch label="Disabled on" disabled defaultChecked />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};