sonance-brand-mcp 1.1.4 → 1.2.2

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

@@ -0,0 +1,306 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { ComponentProps } from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent, type TabsTriggerState } from './tabs';
+import { Card, CardContent } from './card';
+
+type TabsStoryProps = ComponentProps<typeof Tabs> & {
+  state?: TabsTriggerState;
+};
+
+const meta: Meta<TabsStoryProps> = {
+  title: 'Components/Navigation/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A tabbed interface component for organizing content into selectable sections.',
+      },
+    },
+  },
+  argTypes: {
+    state: {
+      control: 'select',
+      options: ['default', 'hover', 'focus', 'active', 'disabled'],
+      description: 'Visual state for TabsTrigger documentation',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<TabsStoryProps>;
+
+// Default
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="tab1" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="tab1">Account</TabsTrigger>
+        <TabsTrigger value="tab2">Password</TabsTrigger>
+        <TabsTrigger value="tab3">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1">
+        <p className="text-foreground-secondary">
+          Manage your account settings and preferences here.
+        </p>
+      </TabsContent>
+      <TabsContent value="tab2">
+        <p className="text-foreground-secondary">
+          Change your password and security settings.
+        </p>
+      </TabsContent>
+      <TabsContent value="tab3">
+        <p className="text-foreground-secondary">
+          Configure application settings and preferences.
+        </p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+// With Cards
+export const WithCards: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" className="w-[500px]">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        <TabsTrigger value="reports">Reports</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <Card>
+          <CardContent className="pt-6">
+            <h4 className="text-lg font-medium text-foreground mb-2">Overview</h4>
+            <p className="text-foreground-secondary">
+              Get a high-level view of your account activity and recent changes.
+            </p>
+          </CardContent>
+        </Card>
+      </TabsContent>
+      <TabsContent value="analytics">
+        <Card>
+          <CardContent className="pt-6">
+            <h4 className="text-lg font-medium text-foreground mb-2">Analytics</h4>
+            <p className="text-foreground-secondary">
+              View detailed analytics and performance metrics.
+            </p>
+          </CardContent>
+        </Card>
+      </TabsContent>
+      <TabsContent value="reports">
+        <Card>
+          <CardContent className="pt-6">
+            <h4 className="text-lg font-medium text-foreground mb-2">Reports</h4>
+            <p className="text-foreground-secondary">
+              Generate and download reports for your data.
+            </p>
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+// With Disabled Tab
+export const WithDisabledTab: Story = {
+  render: () => (
+    <Tabs defaultValue="tab1" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="tab1">Available</TabsTrigger>
+        <TabsTrigger value="tab2" disabled>
+          Coming Soon
+        </TabsTrigger>
+        <TabsTrigger value="tab3">Active</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1">
+        <p className="text-foreground-secondary">This feature is available now.</p>
+      </TabsContent>
+      <TabsContent value="tab2">
+        <p className="text-foreground-secondary">This content is coming soon.</p>
+      </TabsContent>
+      <TabsContent value="tab3">
+        <p className="text-foreground-secondary">This feature is active.</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+// Many Tabs
+export const ManyTabs: Story = {
+  render: () => (
+    <Tabs defaultValue="home" className="w-[600px]">
+      <TabsList>
+        <TabsTrigger value="home">Home</TabsTrigger>
+        <TabsTrigger value="products">Products</TabsTrigger>
+        <TabsTrigger value="services">Services</TabsTrigger>
+        <TabsTrigger value="about">About</TabsTrigger>
+        <TabsTrigger value="contact">Contact</TabsTrigger>
+      </TabsList>
+      <TabsContent value="home">
+        <p className="text-foreground-secondary">Welcome to our home page.</p>
+      </TabsContent>
+      <TabsContent value="products">
+        <p className="text-foreground-secondary">Browse our product catalog.</p>
+      </TabsContent>
+      <TabsContent value="services">
+        <p className="text-foreground-secondary">Explore our services.</p>
+      </TabsContent>
+      <TabsContent value="about">
+        <p className="text-foreground-secondary">Learn more about us.</p>
+      </TabsContent>
+      <TabsContent value="contact">
+        <p className="text-foreground-secondary">Get in touch with us.</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+// Settings Panel Example
+export const SettingsPanel: Story = {
+  render: () => (
+    <Tabs defaultValue="profile" className="w-[500px]">
+      <TabsList>
+        <TabsTrigger value="profile">Profile</TabsTrigger>
+        <TabsTrigger value="notifications">Notifications</TabsTrigger>
+        <TabsTrigger value="security">Security</TabsTrigger>
+      </TabsList>
+      <TabsContent value="profile">
+        <div className="space-y-4">
+          <div>
+            <h4 className="font-medium text-foreground">Profile Information</h4>
+            <p className="text-sm text-foreground-secondary mt-1">
+              Update your personal information and profile picture.
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-4 pt-4 border-t border-divider">
+            <div>
+              <span className="text-xs text-foreground-muted">Name</span>
+              <p className="text-foreground">John Doe</p>
+            </div>
+            <div>
+              <span className="text-xs text-foreground-muted">Email</span>
+              <p className="text-foreground">john@example.com</p>
+            </div>
+          </div>
+        </div>
+      </TabsContent>
+      <TabsContent value="notifications">
+        <div className="space-y-4">
+          <div>
+            <h4 className="font-medium text-foreground">Notification Preferences</h4>
+            <p className="text-sm text-foreground-secondary mt-1">
+              Choose how you want to be notified about updates.
+            </p>
+          </div>
+        </div>
+      </TabsContent>
+      <TabsContent value="security">
+        <div className="space-y-4">
+          <div>
+            <h4 className="font-medium text-foreground">Security Settings</h4>
+            <p className="text-sm text-foreground-secondary mt-1">
+              Manage your password and two-factor authentication.
+            </p>
+          </div>
+        </div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+// State Matrix - Visual documentation of all TabsTrigger states
+export const StateMatrix: Story = {
+  render: () => {
+    const states: TabsTriggerState[] = ['default', 'hover', 'focus', 'active', 'disabled'];
+    return (
+      <div className="space-y-6">
+        <h3 className="text-sm font-medium text-foreground-muted">TabsTrigger States</h3>
+        <div className="flex flex-wrap gap-4">
+          {states.map((state) => (
+            <div key={state} className="flex flex-col items-center gap-2">
+              <span className="text-xs font-medium text-foreground-muted uppercase">{state}</span>
+              <Tabs defaultValue="demo">
+                <TabsList>
+                  <TabsTrigger value="demo" state={state}>
+                    {state}
+                  </TabsTrigger>
+                </TabsList>
+              </Tabs>
+            </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">
+          <Tabs defaultValue="tab1" className="w-full">
+            <TabsList className="w-full">
+              <TabsTrigger value="tab1" className="flex-1">Tab 1</TabsTrigger>
+              <TabsTrigger value="tab2" className="flex-1">Tab 2</TabsTrigger>
+            </TabsList>
+            <TabsContent value="tab1">
+              <p className="text-foreground-secondary text-sm">Mobile tab content.</p>
+            </TabsContent>
+            <TabsContent value="tab2">
+              <p className="text-foreground-secondary text-sm">Second tab content.</p>
+            </TabsContent>
+          </Tabs>
+        </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">
+          <Tabs defaultValue="overview" className="w-full">
+            <TabsList>
+              <TabsTrigger value="overview">Overview</TabsTrigger>
+              <TabsTrigger value="analytics">Analytics</TabsTrigger>
+              <TabsTrigger value="reports">Reports</TabsTrigger>
+            </TabsList>
+            <TabsContent value="overview">
+              <Card>
+                <CardContent className="pt-6">
+                  <p className="text-foreground-secondary">Overview content for tablet view.</p>
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </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">
+          <Tabs defaultValue="home" className="w-full">
+            <TabsList>
+              <TabsTrigger value="home">Home</TabsTrigger>
+              <TabsTrigger value="products">Products</TabsTrigger>
+              <TabsTrigger value="services">Services</TabsTrigger>
+              <TabsTrigger value="about">About</TabsTrigger>
+              <TabsTrigger value="contact">Contact</TabsTrigger>
+            </TabsList>
+            <TabsContent value="home">
+              <Card>
+                <CardContent className="pt-6">
+                  <p className="text-foreground-secondary">Full-width desktop tab content with multiple tabs available.</p>
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/tabs.tsx

@@ -3,6 +3,22 @@
 import { createContext, useContext, useState } from "react";
 import { cn } from "@/lib/utils";
 
+export type TabsTriggerState = "default" | "hover" | "focus" | "active" | "disabled";
+
+// State styles for Storybook/Figma visualization
+const getStateStyles = (state?: TabsTriggerState, isActive?: boolean) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, string> = {
+    hover: "text-foreground",
+    focus: "ring-2 ring-border-focus",
+    active: "text-foreground",
+    disabled: "opacity-50 cursor-not-allowed",
+  };
+
+  return stateMap[state] || "";
+};
+
 interface TabsContextValue {
   value: string;
   onChange: (value: string) => void;
@@ -64,6 +80,8 @@ interface TabsTriggerProps {
   disabled?: boolean;
   className?: string;
   children: React.ReactNode;
+  /** Visual state for Storybook/Figma documentation */
+  state?: TabsTriggerState;
 }
 
 export function TabsTrigger({
@@ -71,26 +89,29 @@ export function TabsTrigger({
   disabled = false,
   className,
   children,
+  state,
 }: TabsTriggerProps) {
   const context = useContext(TabsContext);
   if (!context) throw new Error("TabsTrigger must be used within Tabs");
 
-  const isActive = context.value === value;
+  const isActive = context.value === value || state === "active";
+  const isDisabled = disabled || state === "disabled";
 
   return (
     <button
       role="tab"
       type="button"
       aria-selected={isActive}
-      disabled={disabled}
-      onClick={() => !disabled && context.onChange(value)}
+      disabled={isDisabled}
+      onClick={() => !isDisabled && context.onChange(value)}
       className={cn(
         "relative px-4 py-2.5 text-sm font-medium transition-colors",
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
         isActive
           ? "text-foreground"
           : "text-foreground-muted hover:text-foreground",
-        disabled && "cursor-not-allowed opacity-50",
+        isDisabled && "cursor-not-allowed opacity-50",
+        getStateStyles(state, isActive),
         className
       )}
     >

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

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Textarea } from './textarea';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Components/Forms/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A multi-line text input field with optional label and error state.',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: 'text' },
+    error: { control: 'text' },
+    placeholder: { control: 'text' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter your message...',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Message',
+    placeholder: 'Type your message here...',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Description',
+    error: 'Description is required',
+    defaultValue: '',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Notes',
+    placeholder: 'Cannot edit...',
+    disabled: true,
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-6 w-96">
+      <Textarea placeholder="Default textarea" />
+      <Textarea label="With Label" placeholder="Enter text..." />
+      <Textarea label="With Error" error="This field is required" />
+      <Textarea label="Disabled" placeholder="Cannot edit..." disabled />
+      <Textarea label="With Content" defaultValue="This textarea has pre-filled content that can be edited by the user." />
+    </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">
+          <Textarea label="Message" placeholder="Enter your message..." />
+          <Textarea label="Feedback" placeholder="Share your thoughts..." rows={4} />
+        </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">
+            <Textarea label="Description" placeholder="Enter description..." />
+            <Textarea label="Notes" placeholder="Additional notes..." />
+          </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">
+          <Textarea
+            label="Project Brief"
+            placeholder="Describe your project requirements..."
+            rows={6}
+            className="w-full"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/textarea.tsx

@@ -1,13 +1,34 @@
 import { cn } from "@/lib/utils";
 import { forwardRef } from "react";
 
+export type TextareaState = "default" | "hover" | "focus" | "error" | "disabled";
+
 interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   label?: string;
   error?: string;
+  /** Visual state for Storybook/Figma documentation */
+  state?: TextareaState;
 }
 
+// State styles for Storybook/Figma visualization
+const getStateStyles = (state?: TextareaState) => {
+  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 bg-secondary",
+  };
+
+  return stateMap[state] || "";
+};
+
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ 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,13 +38,16 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         )}
         <textarea
           ref={ref}
+          disabled={isDisabled}
           className={cn(
             "min-h-[120px] w-full resize-y 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",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            error && "border-error",
+            "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-secondary",
+            hasError && "border-error",
+            getStateStyles(state),
             className
           )}
           {...props}