sonance-brand-mcp 1.1.4 → 1.2.2

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

@@ -3,6 +3,22 @@
 import { useState, useRef, KeyboardEvent, ClipboardEvent, useEffect } from "react";
 import { cn } from "@/lib/utils";
 
+export type InputOTPState = "default" | "hover" | "focus" | "error" | "disabled";
+
+// State styles for Storybook/Figma visualization
+const getStateStyles = (state?: InputOTPState) => {
+  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 InputOTPProps {
   length?: number;
   value?: string;
@@ -14,6 +30,8 @@ interface InputOTPProps {
   disabled?: boolean;
   autoFocus?: boolean;
   className?: string;
+  /** Visual state for Storybook/Figma documentation */
+  state?: InputOTPState;
 }
 
 export function InputOTP({
@@ -27,7 +45,10 @@ export function InputOTP({
   disabled = false,
   autoFocus = false,
   className,
+  state,
 }: InputOTPProps) {
+  const isDisabled = disabled || state === "disabled";
+  const hasError = error || state === "error";
   const [internalValue, setInternalValue] = useState(defaultValue);
   const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
 
@@ -127,14 +148,15 @@ export function InputOTP({
             onKeyDown={(e) => handleKeyDown(index, e)}
             onPaste={handlePaste}
             onFocus={() => handleFocus(index)}
-            disabled={disabled}
+            disabled={isDisabled}
             className={cn(
               "h-12 w-10 border border-input-border bg-input",
               "text-center text-lg font-medium text-foreground",
               "transition-colors duration-200",
               "focus:border-input-focus focus:outline-none",
               "disabled:cursor-not-allowed disabled:opacity-50",
-              error && "border-error"
+              hasError && "border-error",
+              getStateStyles(state)
             )}
             aria-label={`Digit ${index + 1}`}
           />

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

@@ -0,0 +1,223 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Input, type InputState } from './input';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Forms/Input',
+  component: Input,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A text input field with optional label and error state. Clean, minimal design following Sonance brand guidelines.',
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label text displayed above the input',
+    },
+    error: {
+      control: 'text',
+      description: 'Error message displayed below the input',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'hover', 'focus', 'error', 'disabled'],
+      description: 'Visual state for documentation',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the input',
+    },
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'tel', 'url'],
+      description: 'Input type',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+};
+
+// With Label
+export const WithLabel: Story = {
+  args: {
+    label: 'Email Address',
+    placeholder: 'name@example.com',
+    type: 'email',
+  },
+};
+
+// With Error
+export const WithError: Story = {
+  args: {
+    label: 'Email Address',
+    placeholder: 'name@example.com',
+    error: 'Please enter a valid email address',
+    defaultValue: 'invalid-email',
+  },
+};
+
+// Disabled
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled Input',
+    placeholder: 'Cannot edit...',
+    disabled: true,
+  },
+};
+
+// Password
+export const Password: Story = {
+  args: {
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Enter password...',
+  },
+};
+
+// All States
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-6 w-80">
+      <Input placeholder="Default input" />
+      <Input label="With Label" placeholder="Enter text..." />
+      <Input
+        label="With Error"
+        placeholder="Enter email..."
+        error="This field is required"
+        defaultValue="invalid"
+      />
+      <Input
+        label="Disabled"
+        placeholder="Cannot edit..."
+        disabled
+      />
+      <Input
+        label="With Value"
+        defaultValue="Pre-filled value"
+      />
+    </div>
+  ),
+};
+
+// Form Example
+export const FormExample: Story = {
+  render: () => (
+    <form className="space-y-4 w-80">
+      <Input label="First Name" placeholder="John" />
+      <Input label="Last Name" placeholder="Doe" />
+      <Input label="Email" type="email" placeholder="john@example.com" />
+      <Input label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
+    </form>
+  ),
+};
+
+// Interactive States - for Figma documentation
+export const StateMatrix: Story = {
+  render: () => {
+    const states: InputState[] = ['default', 'hover', 'focus', 'error', 'disabled'];
+
+    return (
+      <div className="space-y-6 w-96">
+        <h3 className="text-sm font-medium text-foreground-muted">Input States</h3>
+        <div className="grid grid-cols-1 gap-4">
+          {states.map((state) => (
+            <div key={state} className="flex items-center gap-4">
+              <span className="text-xs font-medium text-foreground-muted uppercase w-20">{state}</span>
+              <Input
+                state={state}
+                placeholder={`${state} state`}
+                defaultValue={state !== 'default' ? 'Input value' : ''}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+// With Label States
+export const LabeledStateMatrix: Story = {
+  render: () => {
+    const states: InputState[] = ['default', 'hover', 'focus', 'error', 'disabled'];
+
+    return (
+      <div className="space-y-6">
+        <h3 className="text-sm font-medium text-foreground-muted">Input with Label - All States</h3>
+        <div className="grid grid-cols-5 gap-4">
+          {states.map((state) => (
+            <div key={state} className="text-center">
+              <Input
+                label="Email"
+                state={state}
+                placeholder="name@example.com"
+                defaultValue={state !== 'default' ? 'user@email.com' : ''}
+                error={state === 'error' ? 'Invalid email' : undefined}
+              />
+              <p className="text-xs text-foreground-muted mt-2 uppercase">{state}</p>
+            </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">
+          <Input label="Email" placeholder="name@example.com" />
+          <Input label="Password" type="password" placeholder="Enter password" />
+          <Input label="Error State" error="This field is required" defaultValue="Invalid" />
+        </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">
+            <Input label="First Name" placeholder="John" />
+            <Input label="Last Name" placeholder="Doe" />
+            <Input label="Email" type="email" placeholder="john@example.com" />
+            <Input label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
+          </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">
+            <Input label="First Name" placeholder="John" />
+            <Input label="Last Name" placeholder="Doe" />
+            <Input label="Email" type="email" placeholder="john@example.com" />
+            <Input label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/input.tsx

@@ -1,13 +1,34 @@
 import { cn } from "@/lib/utils";
 import { forwardRef } from "react";
 
+export type InputState = "default" | "hover" | "focus" | "error" | "disabled";
+
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   error?: string;
+  /** Visual state for Storybook/Figma documentation */
+  state?: InputState;
 }
 
+// State styles for Storybook/Figma visualization
+const getStateStyles = (state?: InputState) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, string> = {
+    hover: "border-border-hover bg-input",
+    focus: "border-input-focus",
+    error: "border-error",
+    disabled: "opacity-50 cursor-not-allowed bg-secondary",
+  };
+
+  return stateMap[state] || "";
+};
+
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, label, error, ...props }, ref) => {
+  ({ className, label, error, state, disabled, ...props }, ref) => {
+    const isDisabled = disabled || state === "disabled";
+    const hasError = error || state === "error";
+
     return (
       <div className="w-full">
         {label && (
@@ -17,12 +38,16 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         )}
         <input
           ref={ref}
+          disabled={isDisabled}
           className={cn(
             "w-full border border-input-border bg-input px-4 py-3",
             "text-foreground placeholder:text-input-placeholder",
             "transition-colors duration-200",
+            "hover:border-border-hover",
             "focus:border-input-focus focus:outline-none",
-            error && "border-error",
+            "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-secondary",
+            hasError && "border-error",
+            getStateStyles(state),
             className
           )}
           {...props}

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

@@ -0,0 +1,272 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Kbd, KeyboardShortcut, shortcuts } from './kbd';
+
+const meta: Meta<typeof Kbd> = {
+  title: 'Components/Utilities/Kbd',
+  component: Kbd,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Keyboard key display component for showing keyboard shortcuts and key combinations.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'outline', 'flat'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Kbd>K</Kbd>,
+};
+
+export const SingleKey: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Kbd>A</Kbd>
+      <Kbd>Enter</Kbd>
+      <Kbd>Esc</Kbd>
+      <Kbd>Tab</Kbd>
+    </div>
+  ),
+};
+
+export const KeyCombination: Story = {
+  render: () => <Kbd keys={['cmd', 'k']} />,
+};
+
+export const CommonShortcuts: Story = {
+  render: () => (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <span className="text-foreground-secondary">Copy</span>
+        <Kbd keys={shortcuts.copy} />
+      </div>
+      <div className="flex items-center justify-between">
+        <span className="text-foreground-secondary">Paste</span>
+        <Kbd keys={shortcuts.paste} />
+      </div>
+      <div className="flex items-center justify-between">
+        <span className="text-foreground-secondary">Undo</span>
+        <Kbd keys={shortcuts.undo} />
+      </div>
+      <div className="flex items-center justify-between">
+        <span className="text-foreground-secondary">Redo</span>
+        <Kbd keys={shortcuts.redo} />
+      </div>
+      <div className="flex items-center justify-between">
+        <span className="text-foreground-secondary">Save</span>
+        <Kbd keys={shortcuts.save} />
+      </div>
+      <div className="flex items-center justify-between">
+        <span className="text-foreground-secondary">Find</span>
+        <Kbd keys={shortcuts.find} />
+      </div>
+    </div>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <span className="text-xs text-foreground-muted w-20">Default</span>
+        <Kbd variant="default" keys={['cmd', 'shift', 'p']} />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-xs text-foreground-muted w-20">Outline</span>
+        <Kbd variant="outline" keys={['cmd', 'shift', 'p']} />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-xs text-foreground-muted w-20">Flat</span>
+        <Kbd variant="flat" keys={['cmd', 'shift', 'p']} />
+      </div>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <span className="text-xs text-foreground-muted w-20">Small</span>
+        <Kbd size="sm" keys={['cmd', 'k']} />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-xs text-foreground-muted w-20">Medium</span>
+        <Kbd size="md" keys={['cmd', 'k']} />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-xs text-foreground-muted w-20">Large</span>
+        <Kbd size="lg" keys={['cmd', 'k']} />
+      </div>
+    </div>
+  ),
+};
+
+export const KeyMapping: Story = {
+  render: () => (
+    <div className="space-y-3">
+      <p className="text-xs text-foreground-muted mb-4">
+        Common key names are automatically mapped to symbols:
+      </p>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="flex items-center gap-2">
+          <span className="text-foreground-secondary text-sm">cmd</span>
+          <span>→</span>
+          <Kbd>cmd</Kbd>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-foreground-secondary text-sm">ctrl</span>
+          <span>→</span>
+          <Kbd>ctrl</Kbd>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-foreground-secondary text-sm">alt</span>
+          <span>→</span>
+          <Kbd>alt</Kbd>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-foreground-secondary text-sm">shift</span>
+          <span>→</span>
+          <Kbd>shift</Kbd>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-foreground-secondary text-sm">enter</span>
+          <span>→</span>
+          <Kbd>enter</Kbd>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-foreground-secondary text-sm">escape</span>
+          <span>→</span>
+          <Kbd>escape</Kbd>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-foreground-secondary text-sm">backspace</span>
+          <span>→</span>
+          <Kbd>backspace</Kbd>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-foreground-secondary text-sm">up</span>
+          <span>→</span>
+          <Kbd>up</Kbd>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="space-y-3">
+      <KeyboardShortcut label="Search" keys={['cmd', 'k']} />
+      <KeyboardShortcut label="Command Palette" keys={['cmd', 'shift', 'p']} />
+      <KeyboardShortcut label="Quick Open" keys={['cmd', 'p']} />
+    </div>
+  ),
+};
+
+export const InContext: Story = {
+  render: () => (
+    <div className="w-64 border border-border">
+      <div className="px-3 py-2 text-xs font-medium uppercase tracking-widest text-foreground-muted border-b border-border">
+        Actions
+      </div>
+      <div className="py-1">
+        {[
+          { label: 'New File', keys: ['cmd', 'n'] },
+          { label: 'Open', keys: ['cmd', 'o'] },
+          { label: 'Save', keys: ['cmd', 's'] },
+          { label: 'Close', keys: ['cmd', 'w'] },
+        ].map((item) => (
+          <button
+            key={item.label}
+            className="w-full flex items-center justify-between px-3 py-2 text-sm text-foreground hover:bg-secondary-hover"
+          >
+            <span>{item.label}</span>
+            <Kbd keys={item.keys} size="sm" variant="flat" />
+          </button>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+export const SearchBar: Story = {
+  render: () => (
+    <div className="w-96 relative">
+      <input
+        type="text"
+        placeholder="Search..."
+        className="w-full px-4 py-2 pr-16 border border-border bg-background text-foreground"
+      />
+      <div className="absolute right-2 top-1/2 -translate-y-1/2">
+        <Kbd keys={['cmd', 'k']} size="sm" variant="outline" />
+      </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">
+          <div className="flex items-center justify-between">
+            <span className="text-foreground-secondary text-sm">Save</span>
+            <Kbd keys={['cmd', 's']} size="sm" />
+          </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="grid grid-cols-2 gap-4">
+            <KeyboardShortcut label="Copy" keys={['cmd', 'c']} />
+            <KeyboardShortcut label="Paste" keys={['cmd', 'v']} />
+            <KeyboardShortcut label="Undo" keys={['cmd', 'z']} />
+            <KeyboardShortcut label="Redo" keys={['cmd', 'shift', 'z']} />
+          </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 justify-between">
+            <div className="flex items-center gap-8">
+              <KeyboardShortcut label="Search" keys={['cmd', 'k']} />
+              <KeyboardShortcut label="Command Palette" keys={['cmd', 'shift', 'p']} />
+              <KeyboardShortcut label="New File" keys={['cmd', 'n']} />
+            </div>
+            <div className="relative w-64">
+              <input
+                type="text"
+                placeholder="Search..."
+                className="w-full px-4 py-2 pr-16 border border-border bg-background text-foreground text-sm"
+              />
+              <div className="absolute right-2 top-1/2 -translate-y-1/2">
+                <Kbd keys={['cmd', 'k']} size="sm" variant="outline" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};