sonance-brand-mcp 1.1.4 → 1.2.2

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

@@ -0,0 +1,348 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Image, ZoomImage, ImageGallery } from './image';
+
+const meta: Meta<typeof Image> = {
+  title: 'Components/Data Display/Image',
+  component: Image,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'An enhanced image component with loading states, fallbacks, and various display options.',
+      },
+    },
+  },
+  argTypes: {
+    aspectRatio: {
+      control: 'select',
+      options: ['auto', 'square', 'video', 'wide'],
+    },
+    objectFit: {
+      control: 'select',
+      options: ['contain', 'cover', 'fill', 'none', 'scale-down'],
+    },
+    radius: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg', 'full'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-64">
+      <Image
+        src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop"
+        alt="Speaker system"
+      />
+    </div>
+  ),
+};
+
+export const AspectRatios: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4 max-w-2xl">
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Auto</p>
+        <Image
+          src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop"
+          alt="Auto aspect"
+          aspectRatio="auto"
+          className="w-full"
+        />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Square</p>
+        <Image
+          src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop"
+          alt="Square aspect"
+          aspectRatio="square"
+          className="w-full"
+        />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Video (16:9)</p>
+        <Image
+          src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=450&fit=crop"
+          alt="Video aspect"
+          aspectRatio="video"
+          className="w-full"
+        />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Wide (21:9)</p>
+        <Image
+          src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=343&fit=crop"
+          alt="Wide aspect"
+          aspectRatio="wide"
+          className="w-full"
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const ObjectFit: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-4 max-w-3xl">
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Cover</p>
+        <Image
+          src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=200&fit=crop"
+          alt="Cover fit"
+          aspectRatio="square"
+          objectFit="cover"
+          className="w-full"
+        />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Contain</p>
+        <Image
+          src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=200&fit=crop"
+          alt="Contain fit"
+          aspectRatio="square"
+          objectFit="contain"
+          className="w-full"
+        />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Fill</p>
+        <Image
+          src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=200&fit=crop"
+          alt="Fill fit"
+          aspectRatio="square"
+          objectFit="fill"
+          className="w-full"
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const BorderRadius: Story = {
+  render: () => (
+    <div className="flex gap-4 flex-wrap">
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">None</p>
+        <Image
+          src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=150&h=150&fit=crop"
+          alt="No radius"
+          aspectRatio="square"
+          radius="none"
+          className="w-24"
+        />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Small</p>
+        <Image
+          src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=150&h=150&fit=crop"
+          alt="Small radius"
+          aspectRatio="square"
+          radius="sm"
+          className="w-24"
+        />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Medium</p>
+        <Image
+          src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=150&h=150&fit=crop"
+          alt="Medium radius"
+          aspectRatio="square"
+          radius="md"
+          className="w-24"
+        />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Large</p>
+        <Image
+          src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=150&h=150&fit=crop"
+          alt="Large radius"
+          aspectRatio="square"
+          radius="lg"
+          className="w-24"
+        />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Full</p>
+        <Image
+          src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=150&h=150&fit=crop"
+          alt="Full radius"
+          aspectRatio="square"
+          radius="full"
+          className="w-24"
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const ErrorState: Story = {
+  render: () => (
+    <div className="w-64">
+      <Image
+        src="https://invalid-url-that-will-fail.com/image.jpg"
+        alt="Failed image"
+        aspectRatio="video"
+      />
+    </div>
+  ),
+};
+
+export const CustomFallback: Story = {
+  render: () => (
+    <div className="w-64">
+      <Image
+        src="https://invalid-url-that-will-fail.com/image.jpg"
+        alt="Failed image"
+        aspectRatio="video"
+        fallback={
+          <div className="flex flex-col items-center gap-2 text-foreground-muted">
+            <span className="text-3xl">📷</span>
+            <span className="text-sm">Image not available</span>
+          </div>
+        }
+      />
+    </div>
+  ),
+};
+
+export const WithoutSkeleton: Story = {
+  render: () => (
+    <div className="w-64">
+      <Image
+        src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop"
+        alt="No skeleton"
+        showSkeleton={false}
+      />
+    </div>
+  ),
+};
+
+export const ZoomOnHover: Story = {
+  render: () => (
+    <div className="w-64">
+      <ZoomImage
+        src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop"
+        alt="Zoom on hover"
+        aspectRatio="square"
+        zoomScale={1.15}
+      />
+    </div>
+  ),
+};
+
+export const Gallery: Story = {
+  render: () => (
+    <div className="max-w-2xl">
+      <ImageGallery
+        images={[
+          { src: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop', alt: 'Product 1' },
+          { src: 'https://images.unsplash.com/photo-1545454675-3531b543be5d?w=400&h=400&fit=crop', alt: 'Product 2' },
+          { src: 'https://images.unsplash.com/photo-1558089687-f282ffcbc126?w=400&h=400&fit=crop', alt: 'Product 3' },
+          { src: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop', alt: 'Product 4' },
+          { src: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&h=400&fit=crop', alt: 'Product 5' },
+          { src: 'https://images.unsplash.com/photo-1524678606370-a47ad25cb82a?w=400&h=400&fit=crop', alt: 'Product 6' },
+        ]}
+        columns={3}
+        gap="md"
+      />
+    </div>
+  ),
+};
+
+export const GalleryColumns: Story = {
+  render: () => {
+    const images = [
+      { src: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop', alt: 'Image 1' },
+      { src: 'https://images.unsplash.com/photo-1545454675-3531b543be5d?w=400&h=400&fit=crop', alt: 'Image 2' },
+      { src: 'https://images.unsplash.com/photo-1558089687-f282ffcbc126?w=400&h=400&fit=crop', alt: 'Image 3' },
+      { src: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop', alt: 'Image 4' },
+    ];
+
+    return (
+      <div className="space-y-8">
+        <div>
+          <p className="text-xs text-foreground-muted mb-2">2 Columns</p>
+          <ImageGallery images={images} columns={2} />
+        </div>
+        <div>
+          <p className="text-xs text-foreground-muted mb-2">4 Columns</p>
+          <ImageGallery images={images} columns={4} />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const ProductImage: Story = {
+  render: () => (
+    <div className="w-80 border border-border">
+      <Image
+        src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=400&fit=crop"
+        alt="VP66 TL In-Wall Speaker"
+        aspectRatio="video"
+      />
+      <div className="p-4">
+        <h3 className="font-medium text-foreground">VP66 TL</h3>
+        <p className="text-sm text-foreground-muted">In-Wall Speaker</p>
+        <p className="text-lg font-medium text-foreground mt-2">$1,299.00</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">
+          <Image
+            src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop"
+            alt="Speaker"
+            aspectRatio="video"
+          />
+        </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">
+            <Image
+              src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop"
+              alt="Square"
+              aspectRatio="square"
+            />
+            <Image
+              src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=400&fit=crop"
+              alt="Video"
+              aspectRatio="video"
+            />
+          </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">
+          <ImageGallery
+            images={[
+              { src: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop', alt: 'Product 1' },
+              { src: 'https://images.unsplash.com/photo-1545454675-3531b543be5d?w=400&h=400&fit=crop', alt: 'Product 2' },
+              { src: 'https://images.unsplash.com/photo-1558089687-f282ffcbc126?w=400&h=400&fit=crop', alt: 'Product 3' },
+              { src: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop', alt: 'Product 4' },
+            ]}
+            columns={4}
+            gap="md"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,336 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { InputOTP, InputOTPGrouped, type InputOTPState } from './input-otp';
+
+const meta: Meta<typeof InputOTP> = {
+  title: 'Components/Forms/InputOTP',
+  component: InputOTP,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A one-time password (OTP) input component for verification codes. Supports paste, arrow key navigation, and auto-focus on next input.',
+      },
+    },
+  },
+  argTypes: {
+    length: {
+      control: { type: 'number', min: 4, max: 8 },
+      description: 'Number of digits',
+      table: {
+        defaultValue: { summary: '6' },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Input label',
+    },
+    error: {
+      control: 'text',
+      description: 'Error message',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state',
+    },
+    autoFocus: {
+      control: 'boolean',
+      description: 'Auto-focus first input on mount',
+    },
+    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>;
+
+// Default
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <div className="space-y-4">
+        <InputOTP
+          value={value}
+          onValueChange={setValue}
+          onComplete={(code) => console.log('Complete:', code)}
+        />
+        <p className="text-sm text-foreground-muted">
+          Value: {value || 'empty'}
+        </p>
+      </div>
+    );
+  },
+};
+
+// With Label
+export const WithLabel: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <InputOTP
+        label="Verification Code"
+        value={value}
+        onValueChange={setValue}
+      />
+    );
+  },
+};
+
+// Four Digits
+export const FourDigits: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <InputOTP
+        label="PIN"
+        length={4}
+        value={value}
+        onValueChange={setValue}
+      />
+    );
+  },
+};
+
+// Eight Digits
+export const EightDigits: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <InputOTP
+        label="Recovery Code"
+        length={8}
+        value={value}
+        onValueChange={setValue}
+      />
+    );
+  },
+};
+
+// With Error
+export const WithError: Story = {
+  render: () => {
+    const [value, setValue] = useState('123456');
+    return (
+      <InputOTP
+        label="Enter Code"
+        error="Invalid verification code"
+        value={value}
+        onValueChange={setValue}
+      />
+    );
+  },
+};
+
+// Disabled
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <InputOTP
+        label="Disabled Input"
+        defaultValue="123456"
+        disabled
+      />
+    );
+  },
+};
+
+// Auto Focus
+export const AutoFocus: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <div className="space-y-2">
+        <InputOTP
+          label="Auto-focused"
+          autoFocus
+          value={value}
+          onValueChange={setValue}
+        />
+        <p className="text-sm text-foreground-muted">
+          The first input is automatically focused
+        </p>
+      </div>
+    );
+  },
+};
+
+// With Completion Handler
+export const WithCompletionHandler: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    const [status, setStatus] = useState<'idle' | 'verifying' | 'success' | 'error'>('idle');
+
+    const handleComplete = async (code: string) => {
+      setStatus('verifying');
+      // Simulate API verification
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      if (code === '123456') {
+        setStatus('success');
+      } else {
+        setStatus('error');
+      }
+    };
+
+    return (
+      <div className="space-y-4">
+        <InputOTP
+          label="Enter Verification Code"
+          value={value}
+          onValueChange={(v) => {
+            setValue(v);
+            if (status !== 'idle') setStatus('idle');
+          }}
+          onComplete={handleComplete}
+          error={status === 'error' ? 'Invalid code. Try 123456' : undefined}
+        />
+        {status === 'verifying' && (
+          <p className="text-sm text-foreground-muted">Verifying...</p>
+        )}
+        {status === 'success' && (
+          <p className="text-sm text-success">Code verified successfully!</p>
+        )}
+      </div>
+    );
+  },
+};
+
+// Verification Flow Example
+export const VerificationFlowExample: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    const [verified, setVerified] = useState(false);
+
+    const handleComplete = async (code: string) => {
+      // Simulate verification
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      if (code.length === 6) {
+        setVerified(true);
+      }
+    };
+
+    if (verified) {
+      return (
+        <div className="w-80 p-6 border border-success rounded-sm text-center space-y-2">
+          <div className="text-success text-2xl">&#10003;</div>
+          <h3 className="font-medium">Verified!</h3>
+          <p className="text-sm text-foreground-muted">
+            Your phone number has been verified.
+          </p>
+          <button
+            onClick={() => {
+              setValue('');
+              setVerified(false);
+            }}
+            className="text-sm text-primary hover:underline"
+          >
+            Reset demo
+          </button>
+        </div>
+      );
+    }
+
+    return (
+      <div className="w-80 space-y-4">
+        <div className="text-center space-y-1">
+          <h3 className="font-medium">Verify your phone</h3>
+          <p className="text-sm text-foreground-muted">
+            We sent a code to +1 (555) ***-1234
+          </p>
+        </div>
+        <InputOTP
+          value={value}
+          onValueChange={setValue}
+          onComplete={handleComplete}
+          autoFocus
+        />
+        <p className="text-center text-sm text-foreground-muted">
+          Didn&apos;t receive a code?{' '}
+          <button className="text-primary hover:underline">Resend</button>
+        </p>
+      </div>
+    );
+  },
+};
+
+// All States
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <InputOTP label="Default" />
+      <InputOTP label="With Value" defaultValue="123456" />
+      <InputOTP label="With Error" error="Invalid code" defaultValue="000000" />
+      <InputOTP label="Disabled" disabled defaultValue="123456" />
+      <InputOTP label="4 Digits" length={4} />
+    </div>
+  ),
+};
+
+// State Matrix - Visual documentation of all states
+export const StateMatrix: Story = {
+  render: () => {
+    const states: InputOTPState[] = ['default', 'hover', 'focus', 'error', 'disabled'];
+    return (
+      <div className="space-y-6">
+        <h3 className="text-sm font-medium text-foreground-muted">InputOTP 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>
+              <InputOTP
+                state={state}
+                length={6}
+                defaultValue={state === 'error' ? '000000' : ''}
+                error={state === 'error' ? 'Invalid code' : 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">
+          <InputOTP label="Verification Code" length={6} />
+        </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 gap-8">
+            <InputOTP label="4-Digit PIN" length={4} />
+            <InputOTP label="6-Digit Code" length={6} />
+          </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 gap-8">
+            <InputOTP label="Default" />
+            <InputOTP label="With Value" defaultValue="123456" />
+            <InputOTP label="With Error" error="Invalid" defaultValue="000000" />
+            <InputOTP label="Disabled" disabled defaultValue="123456" />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};