sonance-brand-mcp 1.2.5 → 1.3.2

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

@@ -108,7 +108,7 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
     };
 
     return (
-      <div className={cn("w-full", className)}>
+      <div data-sonance-name="time-input" className={cn("w-full", className)}>
         {label && (
           <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
             {label}
@@ -154,7 +154,7 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
             </button>
           )}
         </div>
-        {error && <p className="mt-1 text-sm text-error">{error}</p>}
+        {error && <p id="p-error" className="mt-1 text-sm text-error">{error}</p>}
       </div>
     );
   }

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

@@ -89,7 +89,7 @@ export const WithAction: Story = {
     description: 'A new version of the app is ready to install.',
     onClose: () => {},
     action: (
-      <Button size="sm" variant="secondary">
+      <Button id="with-action-button-secondary" size="sm" variant="secondary">
         Update now
       </Button>
     ),
@@ -108,8 +108,9 @@ function ToastDemo() {
   const { addToast } = useToast();
 
   return (
-    <div className="space-y-4">
+    <div data-sonance-name="toast.stories" className="space-y-4">
       <Button
+        id="toast-demo-button"
         onClick={() =>
           addToast({
             title: 'Success',
@@ -121,6 +122,7 @@ function ToastDemo() {
         Show Success Toast
       </Button>
       <Button
+        id="toast-demo-button-secondary"
         variant="secondary"
         onClick={() =>
           addToast({
@@ -133,6 +135,7 @@ function ToastDemo() {
         Show Error Toast
       </Button>
       <Button
+        id="toast-demo-button-ghost"
         variant="ghost"
         onClick={() =>
           addToast({
@@ -162,7 +165,7 @@ export const ResponsiveMatrix: Story = {
     <div className="space-y-8">
       {/* Mobile */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <h4 id="responsive-matrix-h4-mobile-375px" 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-2">
           <Toast variant="success" title="Success" description="Changes saved." onClose={() => {}} />
           <Toast variant="error" title="Error" description="Failed to save." onClose={() => {}} />
@@ -170,7 +173,7 @@ export const ResponsiveMatrix: Story = {
       </div>
       {/* Tablet */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <h4 id="responsive-matrix-h4-tablet-768px" 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 gap-4">
             <Toast variant="success" title="Success" description="Your changes have been saved." onClose={() => {}} />
@@ -180,7 +183,7 @@ export const ResponsiveMatrix: Story = {
       </div>
       {/* Desktop */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <h4 id="responsive-matrix-h4-desktop-1280px" 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 gap-4">
             <Toast variant="default" title="Notification" description="Default toast notification." onClose={() => {}} />

package/dist/assets/components/toast.tsx

@@ -47,17 +47,17 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
     const Icon = iconMap[variant || "default"];
 
     return (
-      <div
+      <div data-sonance-name="toast"
         ref={ref}
         role="alert"
-        className={cn(toastVariants({ variant }), className)}
+        className={cn(toastVariants({ variant }), className)} 
         {...props}
       >
         <Icon className="h-5 w-5 shrink-0 mt-0.5" />
         <div className="flex-1 space-y-1">
-          {title && <p className="text-sm font-medium">{title}</p>}
+          {title && <p id="icon-p-title" className="text-sm font-medium">{title}</p>}
           {description && (
-            <p className={cn("text-sm", variant === "default" && "text-foreground-secondary")}>
+            <p id="icon-p-description" className={cn("text-sm", variant === "default" && "text-foreground-secondary")}>
               {description}
             </p>
           )}
@@ -70,7 +70,7 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
             className="shrink-0 p-1 opacity-70 hover:opacity-100 transition-opacity"
           >
             <X className="h-4 w-4" />
-            <span className="sr-only">Dismiss</span>
+            <span id="icon-span-dismiss" className="sr-only">Dismiss</span>
           </button>
         )}
       </div>
@@ -163,7 +163,7 @@ export function ToastProvider({
   return (
     <ToastContext.Provider value={{ toasts, addToast, removeToast, clearToasts }}>
       {children}
-      <div
+      <div data-sonance-name="toast"
         className={cn(
           "fixed z-[100] flex flex-col gap-2 pointer-events-none",
           positionClasses[position]

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

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+
+const meta: Meta<typeof ToggleGroup> = {
+  title: "Components/Forms/ToggleGroup",
+  component: ToggleGroup,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "outline"],
+    },
+    size: {
+      control: "select",
+      options: ["default", "sm", "lg"],
+    },
+    type: {
+      control: "select",
+      options: ["single", "multiple"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ToggleGroup>;
+
+export const Single: Story = {
+  args: {
+    type: "single",
+    defaultValue: "center",
+  },
+  render: (args) => (
+    <ToggleGroup {...args}>
+      <ToggleGroupItem value="left" aria-label="Left aligned">
+        <AlignLeft className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Center aligned">
+        <AlignCenter className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Right aligned">
+        <AlignRight className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Multiple: Story = {
+  args: {
+    type: "multiple",
+    defaultValue: ["bold"],
+  },
+  render: (args) => (
+    <ToggleGroup {...args}>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Outline: Story = {
+  args: {
+    type: "single",
+    variant: "outline",
+    defaultValue: "center",
+  },
+  render: (args) => (
+    <ToggleGroup {...args}>
+      <ToggleGroupItem value="left" aria-label="Left aligned">
+        <AlignLeft className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Center aligned">
+        <AlignCenter className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Right aligned">
+        <AlignRight className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Small: Story = {
+  args: {
+    type: "multiple",
+    size: "sm",
+  },
+  render: (args) => (
+    <ToggleGroup {...args}>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Large: Story = {
+  args: {
+    type: "single",
+    size: "lg",
+    defaultValue: "left",
+  },
+  render: (args) => (
+    <ToggleGroup {...args}>
+      <ToggleGroupItem value="left" aria-label="Left aligned">
+        <AlignLeft className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Center aligned">
+        <AlignCenter className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Right aligned">
+        <AlignRight className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    type: "single",
+    defaultValue: "center",
+    disabled: true,
+  },
+  render: (args) => (
+    <ToggleGroup {...args}>
+      <ToggleGroupItem value="left" aria-label="Left aligned">
+        <AlignLeft className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Center aligned">
+        <AlignCenter className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Right aligned">
+        <AlignRight className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+

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

@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/components/ui/toggle";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root data-sonance-name="toggle-group"
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };
+

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

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Bold, Italic, Underline } from "lucide-react";
+import { Toggle } from "./toggle";
+
+const meta: Meta<typeof Toggle> = {
+  title: "Components/Forms/Toggle",
+  component: Toggle,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "outline"],
+    },
+    size: {
+      control: "select",
+      options: ["default", "sm", "lg"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+
+export const Default: Story = {
+  args: {
+    "aria-label": "Toggle bold",
+    children: <Bold className="h-4 w-4" />,
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    "aria-label": "Toggle italic",
+    children: <Italic className="h-4 w-4" />,
+  },
+};
+
+export const WithText: Story = {
+  args: {
+    "aria-label": "Toggle italic",
+    children: (
+      <>
+        <Italic className="h-4 w-4" />
+        Italic
+      </>
+    ),
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+    "aria-label": "Toggle bold",
+    children: <Bold className="h-4 w-4" />,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    "aria-label": "Toggle bold",
+    children: <Bold className="h-4 w-4" />,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    "aria-label": "Toggle underline",
+    disabled: true,
+    children: <Underline className="h-4 w-4" />,
+  },
+};
+

package/dist/assets/components/toggle.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-transparent hover:bg-secondary-hover text-foreground-secondary data-[state=on]:bg-secondary-hover data-[state=on]:text-foreground",
+        outline:
+          "border border-border bg-transparent hover:bg-secondary-hover hover:text-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-8 px-2 min-w-8",
+        lg: "h-11 px-4 min-w-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root data-sonance-name="toggle"
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };
+

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

@@ -1,7 +1,29 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { Tooltip } from './tooltip';
+import { Tooltip as TooltipRoot, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
 import { Button } from './button';
 
+const Tooltip = ({
+  children,
+  content,
+  side,
+  delay,
+  ...props
+}: {
+  children: React.ReactNode;
+  content: string;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  delay?: number;
+} & React.ComponentProps<typeof TooltipRoot>) => {
+  return (
+    <TooltipProvider delayDuration={delay}>
+      <TooltipRoot data-sonance-name="tooltip.stories" {...props}>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side={side}>{content}</TooltipContent>
+      </TooltipRoot>
+    </TooltipProvider>
+  );
+};
+
 const meta: Meta<typeof Tooltip> = {
   title: 'Components/Overlays/Tooltip',
   component: Tooltip,
@@ -44,7 +66,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => (
     <Tooltip content="This is a tooltip">
-      <Button variant="secondary">Hover me</Button>
+      <Button id="default-button-secondary" variant="secondary">Hover me</Button>
     </Tooltip>
   ),
 };
@@ -53,7 +75,7 @@ export const Default: Story = {
 export const Top: Story = {
   render: () => (
     <Tooltip content="Tooltip on top" side="top">
-      <Button variant="secondary">Top</Button>
+      <Button id="top-button-secondary" variant="secondary">Top</Button>
     </Tooltip>
   ),
 };
@@ -62,7 +84,7 @@ export const Top: Story = {
 export const Bottom: Story = {
   render: () => (
     <Tooltip content="Tooltip on bottom" side="bottom">
-      <Button variant="secondary">Bottom</Button>
+      <Button id="bottom-button-secondary" variant="secondary">Bottom</Button>
     </Tooltip>
   ),
 };
@@ -71,7 +93,7 @@ export const Bottom: Story = {
 export const Left: Story = {
   render: () => (
     <Tooltip content="Tooltip on left" side="left">
-      <Button variant="secondary">Left</Button>
+      <Button id="left-button-secondary" variant="secondary">Left</Button>
     </Tooltip>
   ),
 };
@@ -80,7 +102,7 @@ export const Left: Story = {
 export const Right: Story = {
   render: () => (
     <Tooltip content="Tooltip on right" side="right">
-      <Button variant="secondary">Right</Button>
+      <Button id="right-button-secondary" variant="secondary">Right</Button>
     </Tooltip>
   ),
 };
@@ -90,16 +112,16 @@ export const AllPositions: Story = {
   render: () => (
     <div className="flex items-center gap-8 p-8">
       <Tooltip content="Top tooltip" side="top">
-        <Button variant="secondary">Top</Button>
+        <Button id="all-positions-button-secondary" variant="secondary">Top</Button>
       </Tooltip>
       <Tooltip content="Bottom tooltip" side="bottom">
-        <Button variant="secondary">Bottom</Button>
+        <Button id="all-positions-button-secondary" variant="secondary">Bottom</Button>
       </Tooltip>
       <Tooltip content="Left tooltip" side="left">
-        <Button variant="secondary">Left</Button>
+        <Button id="all-positions-button-secondary" variant="secondary">Left</Button>
       </Tooltip>
       <Tooltip content="Right tooltip" side="right">
-        <Button variant="secondary">Right</Button>
+        <Button id="all-positions-button-secondary" variant="secondary">Right</Button>
       </Tooltip>
     </div>
   ),
@@ -110,13 +132,13 @@ export const WithDelay: Story = {
   render: () => (
     <div className="flex gap-4">
       <Tooltip content="No delay (0ms)" delay={0}>
-        <Button variant="secondary">Instant</Button>
+        <Button id="with-delay-button-secondary" variant="secondary">Instant</Button>
       </Tooltip>
       <Tooltip content="Default delay (200ms)" delay={200}>
-        <Button variant="secondary">Default</Button>
+        <Button id="with-delay-button-secondary" variant="secondary">Default</Button>
       </Tooltip>
       <Tooltip content="Slow delay (500ms)" delay={500}>
-        <Button variant="secondary">Slow</Button>
+        <Button id="with-delay-button-secondary" variant="secondary">Slow</Button>
       </Tooltip>
     </div>
   ),
@@ -155,7 +177,7 @@ export const OnIconButton: Story = {
 export const LongContent: Story = {
   render: () => (
     <Tooltip content="This is a tooltip with longer content that explains something in more detail">
-      <Button variant="secondary">Hover for details</Button>
+      <Button id="long-content-button-secondary" variant="secondary">Hover for details</Button>
     </Tooltip>
   ),
 };
@@ -163,10 +185,10 @@ export const LongContent: Story = {
 // On Text
 export const OnText: Story = {
   render: () => (
-    <p className="text-foreground-secondary">
+    <p id="on-text-p" className="text-foreground-secondary">
       Hover over the{' '}
       <Tooltip content="This is additional information">
-        <span className="text-foreground border-b border-dashed border-foreground-muted cursor-help">
+        <span id="on-text-span-underlined-text" className="text-foreground border-b border-dashed border-foreground-muted cursor-help">
           underlined text
         </span>
       </Tooltip>{' '}
@@ -181,43 +203,43 @@ export const ResponsiveMatrix: Story = {
     <div className="space-y-8">
       {/* Mobile */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <h4 id="responsive-matrix-h4-mobile-375px" className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
         <div className="w-[375px] border border-dashed border-border p-4 flex justify-center">
           <Tooltip content="Mobile tooltip">
-            <Button variant="secondary" size="sm">Hover me</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary" size="sm">Hover me</Button>
           </Tooltip>
         </div>
       </div>
       {/* Tablet */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <h4 id="responsive-matrix-h4-tablet-768px" className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
         <div className="w-[768px] border border-dashed border-border p-4 flex justify-center gap-4">
           <Tooltip content="Top" side="top">
-            <Button variant="secondary">Top</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary">Top</Button>
           </Tooltip>
           <Tooltip content="Bottom" side="bottom">
-            <Button variant="secondary">Bottom</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary">Bottom</Button>
           </Tooltip>
           <Tooltip content="Left" side="left">
-            <Button variant="secondary">Left</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary">Left</Button>
           </Tooltip>
           <Tooltip content="Right" side="right">
-            <Button variant="secondary">Right</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary">Right</Button>
           </Tooltip>
         </div>
       </div>
       {/* Desktop */}
       <div>
-        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <h4 id="responsive-matrix-h4-desktop-1280px" className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
         <div className="w-[1280px] border border-dashed border-border p-4 flex justify-between items-center">
           <Tooltip content="Edit item">
-            <Button variant="ghost" size="sm">Edit</Button>
+            <Button id="responsive-matrix-button-ghost" variant="ghost" size="sm">Edit</Button>
           </Tooltip>
           <Tooltip content="This is a longer tooltip with more detailed explanation">
-            <Button variant="secondary">Hover for details</Button>
+            <Button id="responsive-matrix-button-secondary" variant="secondary">Hover for details</Button>
           </Tooltip>
           <Tooltip content="Delete permanently" side="left">
-            <Button variant="ghost" size="sm">Delete</Button>
+            <Button id="responsive-matrix-button-ghost" variant="ghost" size="sm">Delete</Button>
           </Tooltip>
         </div>
       </div>