sonance-brand-mcp 1.1.4 → 1.2.2

package/dist/assets/components/theme-toggle.stories.tsx

@@ -0,0 +1,248 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { ThemeToggle, SimpleThemeToggle } from './theme-toggle';
+
+const meta: Meta<typeof ThemeToggle> = {
+  title: 'Components/Utilities/ThemeToggle',
+  component: ThemeToggle,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Theme toggle components for switching between light, dark, and system color modes. Requires next-themes ThemeProvider to be set up.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default Three-Way Toggle
+export const Default: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-foreground-muted">
+        Three-way toggle: Light, Dark, and System
+      </p>
+      <ThemeToggle />
+    </div>
+  ),
+};
+
+// Simple Two-Way Toggle
+export const Simple: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-foreground-muted">
+        Simple toggle: switches between Light and Dark
+      </p>
+      <SimpleThemeToggle />
+    </div>
+  ),
+};
+
+// In Navbar Context
+export const InNavbar: Story = {
+  render: () => (
+    <div className="flex items-center justify-between p-4 border border-border rounded-sm bg-card">
+      <div className="flex items-center gap-2">
+        <div className="w-8 h-8 bg-primary rounded-sm" />
+        <span className="font-medium">Sonance</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <nav className="flex gap-4 text-sm">
+          <a href="#" className="hover:text-primary">Products</a>
+          <a href="#" className="hover:text-primary">About</a>
+          <a href="#" className="hover:text-primary">Contact</a>
+        </nav>
+        <SimpleThemeToggle />
+      </div>
+    </div>
+  ),
+};
+
+// In Settings Panel
+export const InSettingsPanel: Story = {
+  render: () => (
+    <div className="w-80 p-6 border border-border rounded-sm bg-card space-y-6">
+      <h3 className="font-medium">Appearance</h3>
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <label className="text-sm text-foreground-muted">Theme</label>
+          <ThemeToggle />
+        </div>
+        <p className="text-xs text-foreground-muted">
+          Choose your preferred color scheme. System will match your device settings.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// With Labels
+export const WithLabels: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between w-64">
+        <span className="text-sm">Dark Mode</span>
+        <SimpleThemeToggle />
+      </div>
+      <div className="space-y-2">
+        <span className="text-sm">Color Theme</span>
+        <ThemeToggle />
+      </div>
+    </div>
+  ),
+};
+
+// Size Comparison
+export const SizeComparison: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Full Toggle (3 options)</p>
+        <ThemeToggle />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Simple Toggle (2 options)</p>
+        <SimpleThemeToggle />
+      </div>
+    </div>
+  ),
+};
+
+// Dark Background Preview
+export const OnDarkBackground: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="p-6 bg-sonance-charcoal rounded-sm">
+        <div className="flex items-center justify-between">
+          <span className="text-white text-sm">On dark background</span>
+          <SimpleThemeToggle className="[&_button]:text-white [&_button:hover]:bg-white/10" />
+        </div>
+      </div>
+      <div className="p-6 bg-card border border-border rounded-sm">
+        <div className="flex items-center justify-between">
+          <span className="text-sm">On light background</span>
+          <SimpleThemeToggle />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// Footer Example
+export const InFooter: Story = {
+  render: () => (
+    <div className="p-6 border-t border-border bg-background-secondary">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-foreground-muted">
+          &copy; 2024 Sonance. All rights reserved.
+        </p>
+        <div className="flex items-center gap-4">
+          <a href="#" className="text-sm text-foreground-muted hover:text-foreground">Privacy</a>
+          <a href="#" className="text-sm text-foreground-muted hover:text-foreground">Terms</a>
+          <div className="w-px h-4 bg-border" />
+          <SimpleThemeToggle />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// Mobile Menu Example
+export const InMobileMenu: Story = {
+  render: () => (
+    <div className="w-72 p-4 border border-border rounded-sm bg-card space-y-4">
+      <div className="flex items-center justify-between pb-4 border-b border-border">
+        <span className="font-medium">Menu</span>
+        <button className="p-1 hover:bg-secondary-hover rounded-sm">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <nav className="space-y-1">
+        {['Home', 'Products', 'About', 'Contact'].map((item) => (
+          <a
+            key={item}
+            href="#"
+            className="block px-3 py-2 rounded-sm hover:bg-secondary-hover"
+          >
+            {item}
+          </a>
+        ))}
+      </nav>
+      <div className="pt-4 border-t border-border">
+        <div className="flex items-center justify-between px-3">
+          <span className="text-sm text-foreground-muted">Theme</span>
+          <ThemeToggle />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// All Variants
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h4 className="text-sm font-medium mb-3">ThemeToggle (Light / Dark / System)</h4>
+        <ThemeToggle />
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-3">SimpleThemeToggle (Light / Dark)</h4>
+        <SimpleThemeToggle />
+      </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-sm">Dark Mode</span>
+            <SimpleThemeToggle />
+          </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 justify-between">
+            <span className="text-sm">Theme Preference</span>
+            <ThemeToggle />
+          </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 p-4 border border-border rounded-sm bg-card">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 bg-primary rounded-sm" />
+              <span className="font-medium">Sonance</span>
+            </div>
+            <div className="flex items-center gap-4">
+              <nav className="flex gap-4 text-sm">
+                <a href="#" className="hover:text-primary">Products</a>
+                <a href="#" className="hover:text-primary">About</a>
+                <a href="#" className="hover:text-primary">Contact</a>
+              </nav>
+              <SimpleThemeToggle />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,365 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { TimeInput, type TimeInputState } from './time-input';
+
+interface TimeValue {
+  hours: number;
+  minutes: number;
+}
+
+const meta: Meta<typeof TimeInput> = {
+  title: 'Components/Forms/TimeInput',
+  component: TimeInput,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A time input component supporting 12-hour and 24-hour formats. Includes AM/PM toggle for 12-hour mode.',
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Input label',
+    },
+    use24Hour: {
+      control: 'boolean',
+      description: 'Use 24-hour format instead of 12-hour',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    error: {
+      control: 'text',
+      description: 'Error message',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state',
+    },
+    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 (12-hour)
+export const Default: Story = {
+  render: () => {
+    const [time, setTime] = useState<TimeValue>({ hours: 12, minutes: 0 });
+    return (
+      <div className="w-48 space-y-4">
+        <TimeInput
+          value={time}
+          onValueChange={setTime}
+        />
+        <p className="text-sm text-foreground-muted">
+          Selected: {time.hours}:{time.minutes.toString().padStart(2, '0')}
+        </p>
+      </div>
+    );
+  },
+};
+
+// With Label
+export const WithLabel: Story = {
+  render: () => {
+    const [time, setTime] = useState<TimeValue>({ hours: 9, minutes: 30 });
+    return (
+      <div className="w-48">
+        <TimeInput
+          label="Start Time"
+          value={time}
+          onValueChange={setTime}
+        />
+      </div>
+    );
+  },
+};
+
+// 24-Hour Format
+export const Use24Hour: Story = {
+  render: () => {
+    const [time, setTime] = useState<TimeValue>({ hours: 14, minutes: 30 });
+    return (
+      <div className="w-40 space-y-4">
+        <TimeInput
+          label="Time (24h)"
+          use24Hour
+          value={time}
+          onValueChange={setTime}
+        />
+        <p className="text-sm text-foreground-muted">
+          24-hour format: {time.hours}:{time.minutes.toString().padStart(2, '0')}
+        </p>
+      </div>
+    );
+  },
+};
+
+// With Error
+export const WithError: Story = {
+  render: () => {
+    const [time, setTime] = useState<TimeValue>({ hours: 8, minutes: 0 });
+    return (
+      <div className="w-48">
+        <TimeInput
+          label="Appointment Time"
+          error="Please select a time after 9:00 AM"
+          value={time}
+          onValueChange={setTime}
+        />
+      </div>
+    );
+  },
+};
+
+// Disabled
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <div className="w-48">
+        <TimeInput
+          label="Locked Time"
+          defaultValue={{ hours: 10, minutes: 30 }}
+          disabled
+        />
+      </div>
+    );
+  },
+};
+
+// Morning Time
+export const MorningTime: Story = {
+  render: () => {
+    const [time, setTime] = useState<TimeValue>({ hours: 8, minutes: 0 });
+    return (
+      <div className="w-48">
+        <TimeInput
+          label="Wake Up"
+          value={time}
+          onValueChange={setTime}
+        />
+      </div>
+    );
+  },
+};
+
+// Evening Time
+export const EveningTime: Story = {
+  render: () => {
+    const [time, setTime] = useState<TimeValue>({ hours: 20, minutes: 30 });
+    return (
+      <div className="w-48">
+        <TimeInput
+          label="Dinner Reservation"
+          value={time}
+          onValueChange={setTime}
+        />
+      </div>
+    );
+  },
+};
+
+// Appointment Booking Example
+export const AppointmentBookingExample: Story = {
+  render: () => {
+    const [startTime, setStartTime] = useState<TimeValue>({ hours: 9, minutes: 0 });
+    const [endTime, setEndTime] = useState<TimeValue>({ hours: 10, minutes: 0 });
+
+    const startMinutes = startTime.hours * 60 + startTime.minutes;
+    const endMinutes = endTime.hours * 60 + endTime.minutes;
+    const durationMinutes = endMinutes - startMinutes;
+
+    const hasError = durationMinutes <= 0;
+
+    return (
+      <div className="w-64 space-y-4 p-4 border border-border rounded-sm">
+        <h3 className="font-medium">Schedule Appointment</h3>
+        <TimeInput
+          label="Start Time"
+          value={startTime}
+          onValueChange={setStartTime}
+        />
+        <TimeInput
+          label="End Time"
+          value={endTime}
+          onValueChange={setEndTime}
+          error={hasError ? "End time must be after start time" : undefined}
+        />
+        {!hasError && (
+          <p className="text-sm text-foreground-muted">
+            Duration: {Math.floor(durationMinutes / 60)}h {durationMinutes % 60}m
+          </p>
+        )}
+      </div>
+    );
+  },
+};
+
+// Time Zone Example
+export const TimeZoneExample: Story = {
+  render: () => {
+    const [time, setTime] = useState<TimeValue>({ hours: 15, minutes: 0 });
+
+    // Calculate times in different zones
+    const utcOffset = -5; // EST
+    const localHours = time.hours;
+    const utcHours = (localHours - utcOffset + 24) % 24;
+    const londonHours = (utcHours + 0) % 24; // GMT
+    const tokyoHours = (utcHours + 9) % 24; // JST
+
+    const formatTime = (h: number) => {
+      const period = h >= 12 ? 'PM' : 'AM';
+      const hour = h % 12 || 12;
+      return `${hour}:00 ${period}`;
+    };
+
+    return (
+      <div className="w-64 space-y-4">
+        <TimeInput
+          label="Your Local Time (EST)"
+          value={time}
+          onValueChange={setTime}
+        />
+        <div className="space-y-2 text-sm">
+          <div className="flex justify-between">
+            <span className="text-foreground-muted">UTC</span>
+            <span>{formatTime(utcHours)}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-foreground-muted">London (GMT)</span>
+            <span>{formatTime(londonHours)}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-foreground-muted">Tokyo (JST)</span>
+            <span>{formatTime(tokyoHours)}</span>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+// Format Comparison
+export const FormatComparison: Story = {
+  render: () => {
+    const [time, setTime] = useState<TimeValue>({ hours: 14, minutes: 30 });
+    return (
+      <div className="flex gap-8">
+        <div className="w-48">
+          <TimeInput
+            label="12-Hour Format"
+            value={time}
+            onValueChange={setTime}
+          />
+        </div>
+        <div className="w-40">
+          <TimeInput
+            label="24-Hour Format"
+            use24Hour
+            value={time}
+            onValueChange={setTime}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+// All States
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="flex gap-8">
+        <div className="w-48">
+          <TimeInput label="Default (12h)" />
+        </div>
+        <div className="w-40">
+          <TimeInput label="24-Hour" use24Hour />
+        </div>
+      </div>
+      <div className="flex gap-8">
+        <div className="w-48">
+          <TimeInput label="With Value" defaultValue={{ hours: 14, minutes: 30 }} />
+        </div>
+        <div className="w-48">
+          <TimeInput label="With Error" error="Invalid time" />
+        </div>
+      </div>
+      <div className="w-48">
+        <TimeInput label="Disabled" disabled defaultValue={{ hours: 9, minutes: 0 }} />
+      </div>
+    </div>
+  ),
+};
+
+// State Matrix - Visual documentation of all states
+export const StateMatrix: Story = {
+  render: () => {
+    const states: TimeInputState[] = ['default', 'hover', 'focus', 'error', 'disabled'];
+    return (
+      <div className="space-y-6 w-48">
+        <h3 className="text-sm font-medium text-foreground-muted">TimeInput 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>
+              <TimeInput
+                state={state}
+                defaultValue={{ hours: 9, minutes: 30 }}
+                error={state === 'error' ? 'Error message' : 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">
+          <TimeInput label="Start Time" defaultValue={{ hours: 9, minutes: 0 }} />
+        </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">
+            <TimeInput label="Start Time" defaultValue={{ hours: 9, minutes: 0 }} />
+            <TimeInput label="End Time" defaultValue={{ hours: 17, minutes: 0 }} />
+          </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">
+            <TimeInput label="12-Hour" defaultValue={{ hours: 9, minutes: 30 }} />
+            <TimeInput label="24-Hour" use24Hour defaultValue={{ hours: 14, minutes: 30 }} />
+            <TimeInput label="With Error" error="Invalid time" />
+            <TimeInput label="Disabled" disabled defaultValue={{ hours: 10, minutes: 0 }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

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

@@ -4,6 +4,22 @@ import { forwardRef, useState, useEffect, useRef } from "react";
 import { Clock } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+export type TimeInputState = "default" | "hover" | "focus" | "error" | "disabled";
+
+// State styles for Storybook/Figma visualization
+const getStateStyles = (state?: TimeInputState) => {
+  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 TimeValue {
   hours: number;
   minutes: number;
@@ -19,6 +35,8 @@ interface TimeInputProps {
   use24Hour?: boolean;
   disabled?: boolean;
   className?: string;
+  /** Visual state for Storybook/Figma documentation */
+  state?: TimeInputState;
 }
 
 export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
@@ -33,9 +51,12 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
       use24Hour = false,
       disabled = false,
       className,
+      state,
     },
     ref
   ) => {
+    const isDisabled = disabled || state === "disabled";
+    const hasError = error || state === "error";
     const [internalValue, setInternalValue] = useState<TimeValue>(defaultValue);
     const [inputValue, setInputValue] = useState(() => formatTime(defaultValue, use24Hour));
     const [period, setPeriod] = useState<"AM" | "PM">(defaultValue.hours >= 12 ? "PM" : "AM");
@@ -102,7 +123,7 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
               onChange={handleInputChange}
               onBlur={handleBlur}
               placeholder={placeholder}
-              disabled={disabled}
+              disabled={isDisabled}
               className={cn(
                 "w-full border border-input-border bg-input px-4 py-3 pr-10",
                 "text-foreground placeholder:text-input-placeholder",
@@ -110,7 +131,8 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
                 "focus:border-input-focus focus:outline-none",
                 "disabled:cursor-not-allowed disabled:opacity-50",
                 !use24Hour && "rounded-r-none border-r-0",
-                error && "border-error"
+                hasError && "border-error",
+                getStateStyles(state)
               )}
             />
             <Clock className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-foreground-muted" />
@@ -119,7 +141,7 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
             <button
               type="button"
               onClick={handlePeriodChange}
-              disabled={disabled}
+              disabled={isDisabled}
               className={cn(
                 "px-3 border border-input-border bg-background-secondary",
                 "text-sm font-medium text-foreground",