sonance-brand-mcp 1.1.3 → 1.1.7

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

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Progress, CircularProgress } from './progress';
+
+const meta: Meta<typeof Progress> = {
+  title: 'Components/Feedback/Progress',
+  component: Progress,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Progress indicators for showing completion status. Includes linear and circular variants.',
+      },
+    },
+  },
+  argTypes: {
+    value: { control: { type: 'range', min: 0, max: 100 } },
+    max: { control: 'number' },
+    label: { control: 'text' },
+    showValue: { control: 'boolean' },
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: 60,
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    value: 75,
+    label: 'Progress',
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    value: 45,
+    label: 'Upload Progress',
+    showValue: true,
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="space-y-6 w-80">
+      <Progress value={60} size="sm" label="Small" />
+      <Progress value={60} size="md" label="Medium" />
+      <Progress value={60} size="lg" label="Large" />
+    </div>
+  ),
+};
+
+export const DifferentValues: Story = {
+  render: () => (
+    <div className="space-y-4 w-80">
+      <Progress value={0} showValue />
+      <Progress value={25} showValue />
+      <Progress value={50} showValue />
+      <Progress value={75} showValue />
+      <Progress value={100} showValue />
+    </div>
+  ),
+};
+
+// Circular Progress Stories
+export const Circular: StoryObj<typeof CircularProgress> = {
+  render: () => <CircularProgress value={65} />,
+};
+
+export const CircularWithValue: StoryObj<typeof CircularProgress> = {
+  render: () => <CircularProgress value={75} showValue />,
+};
+
+export const CircularSizes: StoryObj<typeof CircularProgress> = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <CircularProgress value={60} size="sm" showValue />
+      <CircularProgress value={60} size="md" showValue />
+      <CircularProgress value={60} size="lg" showValue />
+    </div>
+  ),
+};
+
+export const CircularCustomSize: StoryObj<typeof CircularProgress> = {
+  render: () => (
+    <CircularProgress value={80} size={100} strokeWidth={8} showValue />
+  ),
+};
+
+export const LoadingExample: Story = {
+  render: () => (
+    <div className="space-y-6 w-96">
+      <div>
+        <h4 className="text-sm font-medium text-foreground mb-2">File Upload</h4>
+        <Progress value={67} label="document.pdf" showValue />
+      </div>
+      <div>
+        <h4 className="text-sm font-medium text-foreground mb-2">Installation Progress</h4>
+        <Progress value={45} label="Installing dependencies..." showValue />
+      </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-6">
+          <Progress value={65} label="Upload Progress" showValue />
+          <div className="flex justify-center">
+            <CircularProgress value={75} showValue />
+          </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-8 items-center">
+            <Progress value={45} label="Installation" showValue />
+            <div className="flex justify-center gap-4">
+              <CircularProgress value={60} size="sm" showValue />
+              <CircularProgress value={85} size="md" showValue />
+            </div>
+          </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-8 items-center">
+            <Progress value={25} size="sm" showValue />
+            <Progress value={50} size="md" showValue />
+            <Progress value={75} size="lg" showValue />
+            <div className="flex justify-center">
+              <CircularProgress value={90} size="lg" showValue />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/radio-group.stories.tsx

@@ -0,0 +1,187 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { ComponentProps } from 'react';
+import { RadioGroup, RadioGroupItem, type RadioGroupItemState } from './radio-group';
+
+type RadioGroupStoryProps = ComponentProps<typeof RadioGroup> & {
+  state?: RadioGroupItemState;
+};
+
+const meta: Meta<RadioGroupStoryProps> = {
+  title: 'Components/Forms/RadioGroup',
+  component: RadioGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A group of radio buttons for selecting a single option from multiple choices.',
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'hover', 'focus', 'checked', 'disabled'],
+      description: 'Visual state for documentation (RadioGroupItem)',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<RadioGroupStoryProps>;
+
+export const Default: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option1">
+      <RadioGroupItem value="option1" label="Option 1" />
+      <RadioGroupItem value="option2" label="Option 2" />
+      <RadioGroupItem value="option3" label="Option 3" />
+    </RadioGroup>
+  ),
+};
+
+export const WithDescriptions: Story = {
+  render: () => (
+    <RadioGroup defaultValue="standard">
+      <RadioGroupItem
+        value="standard"
+        label="Standard Shipping"
+        description="Delivery in 5-7 business days"
+      />
+      <RadioGroupItem
+        value="express"
+        label="Express Shipping"
+        description="Delivery in 2-3 business days"
+      />
+      <RadioGroupItem
+        value="overnight"
+        label="Overnight Shipping"
+        description="Next day delivery"
+      />
+    </RadioGroup>
+  ),
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <RadioGroup defaultValue="small" orientation="horizontal">
+      <RadioGroupItem value="small" label="Small" />
+      <RadioGroupItem value="medium" label="Medium" />
+      <RadioGroupItem value="large" label="Large" />
+    </RadioGroup>
+  ),
+};
+
+export const WithDisabledOption: Story = {
+  render: () => (
+    <RadioGroup defaultValue="available">
+      <RadioGroupItem value="available" label="Available" />
+      <RadioGroupItem value="limited" label="Limited Stock" />
+      <RadioGroupItem value="outofstock" label="Out of Stock" disabled />
+    </RadioGroup>
+  ),
+};
+
+export const PlanSelection: Story = {
+  render: () => (
+    <div className="w-80">
+      <h3 className="text-sm font-medium text-foreground mb-4">Select a Plan</h3>
+      <RadioGroup defaultValue="pro">
+        <RadioGroupItem
+          value="free"
+          label="Free"
+          description="Basic features for personal use"
+        />
+        <RadioGroupItem
+          value="pro"
+          label="Pro"
+          description="Advanced features for professionals"
+        />
+        <RadioGroupItem
+          value="enterprise"
+          label="Enterprise"
+          description="Custom solutions for large teams"
+        />
+      </RadioGroup>
+    </div>
+  ),
+};
+
+// State Matrix - Visual documentation of all states
+export const StateMatrix: Story = {
+  render: () => {
+    const states: RadioGroupItemState[] = ['default', 'hover', 'focus', 'checked', 'disabled'];
+    return (
+      <div className="space-y-6">
+        <h3 className="text-sm font-medium text-foreground-muted">RadioGroupItem States</h3>
+        <div className="space-y-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>
+              <RadioGroup>
+                <RadioGroupItem
+                  value="demo"
+                  label={`${state} state`}
+                  state={state}
+                />
+              </RadioGroup>
+            </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">
+          <RadioGroup defaultValue="standard">
+            <RadioGroupItem value="standard" label="Standard" description="5-7 business days" />
+            <RadioGroupItem value="express" label="Express" description="2-3 business days" />
+            <RadioGroupItem value="overnight" label="Overnight" description="Next day" />
+          </RadioGroup>
+        </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-8">
+            <RadioGroup defaultValue="small">
+              <RadioGroupItem value="small" label="Small" />
+              <RadioGroupItem value="medium" label="Medium" />
+              <RadioGroupItem value="large" label="Large" />
+            </RadioGroup>
+            <RadioGroup defaultValue="monthly" orientation="horizontal">
+              <RadioGroupItem value="monthly" label="Monthly" />
+              <RadioGroupItem value="yearly" label="Yearly" />
+            </RadioGroup>
+          </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">
+          <RadioGroup defaultValue="pro" orientation="horizontal" className="flex gap-8">
+            <RadioGroupItem value="free" label="Free" description="Basic features" />
+            <RadioGroupItem value="pro" label="Pro" description="Advanced features" />
+            <RadioGroupItem value="enterprise" label="Enterprise" description="Custom solutions" />
+          </RadioGroup>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/radio-group.tsx

@@ -1,8 +1,24 @@
 "use client";
 
-import { forwardRef, createContext, useContext, useState } from "react";
+import { forwardRef, createContext, useContext, useState, useId } from "react";
 import { cn } from "@/lib/utils";
 
+export type RadioGroupItemState = "default" | "hover" | "focus" | "checked" | "disabled";
+
+// State styles for Storybook/Figma visualization
+const getStateStyles = (state?: RadioGroupItemState) => {
+  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",
+    disabled: "opacity-50 cursor-not-allowed",
+  };
+
+  return stateMap[state] || "";
+};
+
 interface RadioGroupContextValue {
   value: string;
   onChange: (value: string) => void;
@@ -25,13 +41,15 @@ export function RadioGroup({
   value: controlledValue,
   defaultValue = "",
   onValueChange,
-  name = `radio-group-${Math.random().toString(36).substr(2, 9)}`,
+  name,
   className,
   children,
   orientation = "vertical",
 }: RadioGroupProps) {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const value = controlledValue ?? internalValue;
+  const uniqueId = useId();
+  const groupName = name || `radio-group-${uniqueId}`;
 
   const onChange = (newValue: string) => {
     setInternalValue(newValue);
@@ -39,7 +57,7 @@ export function RadioGroup({
   };
 
   return (
-    <RadioGroupContext.Provider value={{ value, onChange, name }}>
+    <RadioGroupContext.Provider value={{ value, onChange, name: groupName }}>
       <div
         role="radiogroup"
         className={cn(
@@ -58,10 +76,12 @@ interface RadioGroupItemProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
   value: string;
   label?: string;
   description?: string;
+  /** Visual state for Storybook/Figma documentation */
+  state?: RadioGroupItemState;
 }
 
 export const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
-  ({ className, value, label, description, id, ...props }, ref) => {
+  ({ className, value, label, description, id, state, disabled, ...props }, ref) => {
     const context = useContext(RadioGroupContext);
     if (!context) {
       throw new Error("RadioGroupItem must be used within a RadioGroup");
@@ -69,7 +89,8 @@ export const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
 
     const { value: groupValue, onChange, name } = context;
     const inputId = id || `radio-${value}`;
-    const isChecked = groupValue === value;
+    const isChecked = groupValue === value || state === "checked";
+    const isDisabled = disabled || state === "disabled";
 
     return (
       <div className="flex items-start gap-3">
@@ -82,12 +103,14 @@ export const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
             value={value}
             checked={isChecked}
             onChange={() => onChange(value)}
+            disabled={isDisabled}
             className={cn(
               "peer h-5 w-5 shrink-0 appearance-none rounded-full border border-border bg-input",
               "checked:border-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}
@@ -95,7 +118,8 @@ export const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
           <div
             className={cn(
               "pointer-events-none absolute h-2.5 w-2.5 rounded-full bg-primary",
-              "scale-0 peer-checked:scale-100 transition-transform duration-150"
+              "scale-0 transition-transform duration-150",
+              isChecked && "scale-100"
             )}
           />
         </div>