sonance-brand-mcp 1.1.4 → 1.2.2

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

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Checkbox } from './checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Forms/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A checkbox input with optional label and description. Clean, minimal design.',
+      },
+    },
+  },
+  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: 'Accept terms and conditions',
+  },
+};
+
+// With Description
+export const WithDescription: Story = {
+  args: {
+    label: 'Marketing emails',
+    description: 'Receive emails about new products, features, and more.',
+  },
+};
+
+// Checked
+export const Checked: Story = {
+  args: {
+    label: 'Remember me',
+    defaultChecked: true,
+  },
+};
+
+// Disabled
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled option',
+    disabled: true,
+  },
+};
+
+// Disabled Checked
+export const DisabledChecked: Story = {
+  args: {
+    label: 'Disabled checked',
+    disabled: true,
+    defaultChecked: true,
+  },
+};
+
+// All States
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Checkbox label="Unchecked" />
+      <Checkbox label="Checked" defaultChecked />
+      <Checkbox label="With description" description="Additional information about this option" />
+      <Checkbox label="Disabled" disabled />
+      <Checkbox label="Disabled checked" disabled defaultChecked />
+    </div>
+  ),
+};
+
+// Form Example
+export const FormExample: Story = {
+  render: () => (
+    <div className="space-y-6 w-80">
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-foreground">Notification Preferences</h3>
+        <Checkbox
+          label="Email notifications"
+          description="Get notified about account activity via email"
+          defaultChecked
+        />
+        <Checkbox
+          label="SMS notifications"
+          description="Get notified via text message"
+        />
+        <Checkbox
+          label="Push notifications"
+          description="Get notified on your mobile device"
+          defaultChecked
+        />
+      </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">
+          <Checkbox label="Accept terms and conditions" />
+          <Checkbox label="Subscribe to newsletter" description="Receive updates about new features" />
+          <Checkbox label="Remember me" 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">
+            <Checkbox label="Email notifications" description="Get notified via email" defaultChecked />
+            <Checkbox label="SMS notifications" description="Get notified via text" />
+            <Checkbox label="Push notifications" description="Mobile app notifications" defaultChecked />
+            <Checkbox label="Marketing emails" description="Product updates and offers" />
+          </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">
+            <Checkbox label="Unchecked" />
+            <Checkbox label="Checked" defaultChecked />
+            <Checkbox label="Disabled" disabled />
+            <Checkbox label="Disabled checked" disabled defaultChecked />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/checkbox.tsx

@@ -1,17 +1,38 @@
 "use client";
 
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
 import { Check } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+export type CheckboxState = "default" | "hover" | "focus" | "checked" | "disabled";
+
 interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
   label?: string;
   description?: string;
+  /** Visual state for Storybook/Figma documentation */
+  state?: CheckboxState;
 }
 
+// State styles for Storybook/Figma visualization
+const getStateStyles = (state?: CheckboxState) => {
+  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 Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, label, description, id, ...props }, ref) => {
-    const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+  ({ className, label, description, id, state, disabled, checked, ...props }, ref) => {
+    const uniqueId = useId();
+    const inputId = id || `checkbox-${uniqueId}`;
+    const isDisabled = disabled || state === "disabled";
+    const isChecked = checked || state === "checked";
 
     return (
       <div className="flex items-start gap-3">
@@ -20,18 +41,25 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             type="checkbox"
             id={inputId}
             ref={ref}
+            disabled={isDisabled}
+            checked={isChecked}
             className={cn(
               "peer h-5 w-5 shrink-0 appearance-none border border-border bg-input",
+              "hover:border-border-hover",
               "checked:border-primary checked:bg-primary",
               "focus:outline-none focus:ring-2 focus:ring-border-focus focus:ring-offset-2 focus:ring-offset-background",
               "disabled:cursor-not-allowed disabled:opacity-50",
               "transition-colors duration-150",
+              getStateStyles(state),
               className
             )}
             {...props}
           />
           <Check
-            className="pointer-events-none absolute h-3.5 w-3.5 text-primary-foreground opacity-0 peer-checked:opacity-100 transition-opacity"
+            className={cn(
+              "pointer-events-none absolute h-3.5 w-3.5 text-primary-foreground opacity-0 peer-checked:opacity-100 transition-opacity",
+              state === "checked" && "opacity-100"
+            )}
           />
         </div>
         {(label || description) && (

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

@@ -0,0 +1,265 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Code, CodeBlock, Snippet } from './code';
+
+const meta: Meta<typeof Code> = {
+  title: 'Components/Utilities/Code',
+  component: Code,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Components for displaying code inline and in blocks with syntax highlighting.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'primary'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const InlineDefault: Story = {
+  render: () => (
+    <p className="text-foreground-secondary">
+      Use the <Code>npm install</Code> command to install dependencies.
+    </p>
+  ),
+};
+
+export const InlinePrimary: Story = {
+  render: () => (
+    <p className="text-foreground-secondary">
+      The <Code variant="primary">useState</Code> hook is used for managing state in React.
+    </p>
+  ),
+};
+
+export const Block: Story = {
+  render: () => (
+    <CodeBlock
+      code={`function greet(name) {
+  console.log(\`Hello, \${name}!\`);
+}
+
+greet('Sonance');`}
+      language="javascript"
+    />
+  ),
+};
+
+export const BlockWithFilename: Story = {
+  render: () => (
+    <CodeBlock
+      filename="greeting.ts"
+      language="typescript"
+      code={`interface User {
+  name: string;
+  email: string;
+}
+
+function greet(user: User): string {
+  return \`Hello, \${user.name}!\`;
+}`}
+    />
+  ),
+};
+
+export const BlockWithLineNumbers: Story = {
+  render: () => (
+    <CodeBlock
+      showLineNumbers
+      code={`import { useState } from 'react';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <button onClick={() => setCount(count + 1)}>
+      Count: {count}
+    </button>
+  );
+}`}
+      language="tsx"
+    />
+  ),
+};
+
+export const BlockWithHighlightedLines: Story = {
+  render: () => (
+    <CodeBlock
+      showLineNumbers
+      highlightLines={[4, 5, 6]}
+      code={`import { useState } from 'react';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+  const increment = () => setCount(count + 1);
+  const decrement = () => setCount(count - 1);
+
+  return (
+    <div>
+      <button onClick={decrement}>-</button>
+      <span>{count}</span>
+      <button onClick={increment}>+</button>
+    </div>
+  );
+}`}
+      language="tsx"
+      filename="Counter.tsx"
+    />
+  ),
+};
+
+export const SnippetDefault: Story = {
+  render: () => <Snippet text="npm install @sonance/ui" />,
+};
+
+export const SnippetWithoutSymbol: Story = {
+  render: () => <Snippet text="pnpm add @sonance/ui" symbol="" />,
+};
+
+export const SnippetNoCopy: Story = {
+  render: () => <Snippet text="yarn add @sonance/ui" hideCopyButton />,
+};
+
+export const InstallCommands: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">npm</p>
+        <Snippet text="npm install @sonance/ui" />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">pnpm</p>
+        <Snippet text="pnpm add @sonance/ui" />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">yarn</p>
+        <Snippet text="yarn add @sonance/ui" />
+      </div>
+    </div>
+  ),
+};
+
+export const DocumentationExample: Story = {
+  render: () => (
+    <div className="max-w-2xl space-y-6">
+      <h2 className="text-xl font-semibold text-foreground">Button Component</h2>
+
+      <p className="text-foreground-secondary">
+        Import the <Code>Button</Code> component from the UI library:
+      </p>
+
+      <CodeBlock
+        filename="example.tsx"
+        language="tsx"
+        code={`import { Button } from '@sonance/ui';
+
+export function MyComponent() {
+  return (
+    <Button variant="primary" size="lg">
+      Click me
+    </Button>
+  );
+}`}
+      />
+
+      <h3 className="text-lg font-medium text-foreground">Props</h3>
+
+      <p className="text-foreground-secondary">
+        The <Code variant="primary">variant</Code> prop accepts{' '}
+        <Code>primary</Code>, <Code>secondary</Code>, <Code>ghost</Code>, or{' '}
+        <Code>inverted</Code>.
+      </p>
+    </div>
+  ),
+};
+
+export const AllExamples: Story = {
+  render: () => (
+    <div className="space-y-8 max-w-2xl">
+      <div>
+        <h3 className="text-sm font-medium text-foreground mb-2">Inline Code</h3>
+        <p className="text-foreground-secondary">
+          Default: <Code>const x = 1</Code> | Primary: <Code variant="primary">useState</Code>
+        </p>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-medium text-foreground mb-2">Code Block</h3>
+        <CodeBlock
+          code={`const greeting = "Hello, World!";
+console.log(greeting);`}
+        />
+      </div>
+
+      <div>
+        <h3 className="text-sm font-medium text-foreground mb-2">Snippet</h3>
+        <Snippet text="npm install @sonance/ui" />
+      </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">
+          <p className="text-foreground-secondary text-sm">
+            Use <Code>npm install</Code> to install.
+          </p>
+          <Snippet text="npm install @sonance/ui" />
+        </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">
+          <CodeBlock
+            code={`import { Button } from '@sonance/ui';
+
+export function App() {
+  return <Button>Click me</Button>;
+}`}
+            language="tsx"
+          />
+        </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">
+          <CodeBlock
+            filename="component.tsx"
+            showLineNumbers
+            code={`import { useState } from 'react';
+import { Button, Card, Input } from '@sonance/ui';
+
+export function ContactForm() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  return (
+    <Card>
+      <Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
+      <Input label="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+      <Button>Submit</Button>
+    </Card>
+  );
+}`}
+            language="tsx"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};