sonance-brand-mcp 1.2.5 → 1.3.1

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
+    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
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };
+

package/dist/assets/components/tooltip.tsx

@@ -1,97 +1,30 @@
-"use client";
+"use client"
 
-import { useState, useRef, useEffect } from "react";
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
-type TooltipPosition = "top" | "bottom" | "left" | "right";
+import { cn } from "@/lib/utils"
 
-interface TooltipProps {
-  content: React.ReactNode;
-  children: React.ReactNode;
-  /** @deprecated Use `side` instead */
-  position?: TooltipPosition;
-  side?: TooltipPosition;
-  delay?: number;
-  className?: string;
-}
+const TooltipProvider = TooltipPrimitive.Provider
 
-export function Tooltip({
-  content,
-  children,
-  position,
-  side = "top",
-  delay = 200,
-  className,
-}: TooltipProps) {
-  // Support both `position` (legacy) and `side` (preferred)
-  const resolvedPosition = position ?? side;
-  const [isVisible, setIsVisible] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+const Tooltip = TooltipPrimitive.Root
 
-  const showTooltip = () => {
-    timeoutRef.current = setTimeout(() => {
-      setIsVisible(true);
-    }, delay);
-  };
+const TooltipTrigger = TooltipPrimitive.Trigger
 
-  const hideTooltip = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    setIsVisible(false);
-  };
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  const positionClasses: Record<TooltipPosition, string> = {
-    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-    left: "right-full top-1/2 -translate-y-1/2 mr-2",
-    right: "left-full top-1/2 -translate-y-1/2 ml-2",
-  };
-
-  const arrowClasses: Record<TooltipPosition, string> = {
-    top: "top-full left-1/2 -translate-x-1/2 border-t-sonance-charcoal border-x-transparent border-b-transparent",
-    bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-sonance-charcoal border-x-transparent border-t-transparent",
-    left: "left-full top-1/2 -translate-y-1/2 border-l-sonance-charcoal border-y-transparent border-r-transparent",
-    right: "right-full top-1/2 -translate-y-1/2 border-r-sonance-charcoal border-y-transparent border-l-transparent",
-  };
-
-  return (
-    <div
-      className="relative inline-block"
-      onMouseEnter={showTooltip}
-      onMouseLeave={hideTooltip}
-      onFocus={showTooltip}
-      onBlur={hideTooltip}
-    >
-      {children}
-      {isVisible && (
-        <div
-          role="tooltip"
-          className={cn(
-            "absolute z-50 px-3 py-1.5 text-xs font-medium text-white bg-sonance-charcoal whitespace-nowrap",
-            "animate-in fade-in zoom-in-95 duration-150",
-            positionClasses[resolvedPosition],
-            className
-          )}
-        >
-          {content}
-          <span
-            className={cn(
-              "absolute border-4",
-              arrowClasses[resolvedPosition]
-            )}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/dist/assets/globals.css

@@ -121,6 +121,16 @@
   --info: #1565C0;
   --info-light: #e3f2fd;
 
+  /* Sidebar Colors - Shadcn UI */
+  --sidebar-background: #f8f9fa;
+  --sidebar-foreground: #333F48;
+  --sidebar-primary: #333F48;
+  --sidebar-primary-foreground: #FFFFFF;
+  --sidebar-accent: #f0f2f3;
+  --sidebar-accent-foreground: #333F48;
+  --sidebar-border: #D9D9D6;
+  --sidebar-ring: #00A3E1;
+
   /* Typography Scale (clamp for responsiveness) */
   --text-xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);
   --text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
@@ -231,6 +241,16 @@
   --warning-light: rgba(255, 183, 77, 0.15);
   --info: #42A5F5;
   --info-light: rgba(66, 165, 245, 0.15);
+
+  /* Sidebar Colors - Dark Mode */
+  --sidebar-background: #1a1f24;
+  --sidebar-foreground: #FFFFFF;
+  --sidebar-primary: #FFFFFF;
+  --sidebar-primary-foreground: #333F48;
+  --sidebar-accent: #242a31;
+  --sidebar-accent-foreground: #FFFFFF;
+  --sidebar-border: #3a444c;
+  --sidebar-ring: #00A3E1;
 }
 
 /* System preference detection fallback */
@@ -320,6 +340,16 @@
   --color-info: var(--info);
   --color-info-light: var(--info-light);
 
+  /* Sidebar Colors */
+  --color-sidebar-background: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
   /* Brand Colors */
   --color-sonance-charcoal: var(--sonance-charcoal);
   --color-sonance-blue: var(--sonance-blue);