sonance-brand-mcp 1.2.4 → 1.3.1

package/dist/assets/components/scroll-area.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ScrollArea, ScrollBar } from "./scroll-area";
+import { Divider } from "./divider";
+
+const meta: Meta<typeof ScrollArea> = {
+  title: "Components/Data Display/ScrollArea",
+  component: ScrollArea,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollArea>;
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+);
+
+export const Default: Story = {
+  render: () => (
+    <ScrollArea className="h-72 w-48 rounded-sm border border-border">
+      <div className="p-4">
+        <h4 className="mb-4 text-sm font-medium leading-none text-foreground">Tags</h4>
+        {tags.map((tag) => (
+          <div key={tag}>
+            <div className="text-sm text-foreground-secondary">{tag}</div>
+            <Divider className="my-2" />
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+};
+
+const works = [
+  {
+    artist: "Ornella Binni",
+    art: "Reflection",
+  },
+  {
+    artist: "Tom Byrom",
+    art: "Living Room",
+  },
+  {
+    artist: "Vladimir Malyavko",
+    art: "Sunrise",
+  },
+  {
+    artist: "Anton Repponen",
+    art: "Mountains",
+  },
+  {
+    artist: "Sead Dedić",
+    art: "Coastline",
+  },
+];
+
+export const Horizontal: Story = {
+  render: () => (
+    <ScrollArea className="w-96 whitespace-nowrap rounded-sm border border-border">
+      <div className="flex w-max space-x-4 p-4">
+        {works.map((artwork) => (
+          <figure key={artwork.artist} className="shrink-0">
+            <div className="overflow-hidden rounded-sm">
+              <div className="h-[150px] w-[200px] bg-secondary-hover flex items-center justify-center">
+                <span className="text-foreground-muted text-xs">{artwork.art}</span>
+              </div>
+            </div>
+            <figcaption className="pt-2 text-xs text-foreground-muted">
+              Photo by{" "}
+              <span className="font-medium text-foreground">
+                {artwork.artist}
+              </span>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  ),
+};
+
+export const LargeContent: Story = {
+  render: () => (
+    <ScrollArea className="h-[400px] w-[350px] rounded-sm border border-border p-4">
+      <div className="space-y-4">
+        <h4 className="text-lg font-medium text-foreground">Sonance Brand Guidelines</h4>
+        <p className="text-sm text-foreground-secondary leading-relaxed">
+          Welcome to the Sonance Brand Guidelines. This document outlines the visual 
+          identity and design standards for the Sonance family of brands.
+        </p>
+        <h5 className="text-sm font-medium text-foreground mt-6">Typography</h5>
+        <p className="text-sm text-foreground-secondary leading-relaxed">
+          All text should use the Montserrat font family. Headlines use font-weight 300 
+          (Light) or 500 (Medium), while body text uses 400 (Regular).
+        </p>
+        <h5 className="text-sm font-medium text-foreground mt-6">Colors</h5>
+        <p className="text-sm text-foreground-secondary leading-relaxed">
+          The Sonance brand uses a sophisticated palette centered around Charcoal 
+          (#333F48) as the primary color, with Sonance Blue (#00D3C8) as the accent.
+        </p>
+        <h5 className="text-sm font-medium text-foreground mt-6">Logo Usage</h5>
+        <p className="text-sm text-foreground-secondary leading-relaxed">
+          The Sonance logo should always have adequate clear space and never be 
+          stretched, rotated, or modified in any way.
+        </p>
+        <h5 className="text-sm font-medium text-foreground mt-6">Photography</h5>
+        <p className="text-sm text-foreground-secondary leading-relaxed">
+          Use photo-realistic imagery only. Avoid cartoons, illustrations, or 
+          AI-generated images that don&apos;t meet our quality standards.
+        </p>
+        <h5 className="text-sm font-medium text-foreground mt-6">Design Principles</h5>
+        <p className="text-sm text-foreground-secondary leading-relaxed">
+          Embrace generous whitespace, minimal borders, refined shadows, and clean 
+          backgrounds. Every element should feel premium and intentional.
+        </p>
+      </div>
+    </ScrollArea>
+  ),
+};
+

package/dist/assets/components/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
+

package/dist/assets/components/scroll-shadow.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState, useEffect, ReactNode } from "react";
+import { useRef, useState, useEffect, ReactNode, useMemo } from "react";
 import { cn } from "@/lib/utils";
 
 interface ScrollShadowProps {
@@ -12,6 +12,19 @@ interface ScrollShadowProps {
   style?: React.CSSProperties;
 }
 
+// Responsive size maps for different screen sizes
+const mobileSizeMap = {
+  sm: 12,
+  md: 24,
+  lg: 36,
+};
+
+const desktopSizeMap = {
+  sm: 20,
+  md: 40,
+  lg: 60,
+};
+
 export function ScrollShadow({
   children,
   orientation = "vertical",
@@ -23,14 +36,23 @@ export function ScrollShadow({
   const scrollRef = useRef<HTMLDivElement>(null);
   const [showStartShadow, setShowStartShadow] = useState(false);
   const [showEndShadow, setShowEndShadow] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
 
-  const sizeMap = {
-    sm: 20,
-    md: 40,
-    lg: 60,
-  };
+  // Detect mobile screen size
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 640); // sm breakpoint
+    };
+    
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
 
-  const shadowSize = sizeMap[size];
+  const shadowSize = useMemo(() => {
+    const sizeMap = isMobile ? mobileSizeMap : desktopSizeMap;
+    return sizeMap[size];
+  }, [isMobile, size]);
 
   const updateShadows = () => {
     const element = scrollRef.current;

package/dist/assets/components/separator.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
+

package/dist/assets/components/sheet.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
+