sonance-brand-mcp 1.2.5 → 1.3.2

package/dist/assets/components/range-calendar.stories.tsx

@@ -38,15 +38,15 @@ export const Default: Story = {
   render: () => {
     const [range, setRange] = useState<DateRange>({ start: undefined, end: undefined });
     return (
-      <div className="space-y-4">
+      <div data-sonance-name="range-calendar.stories" className="space-y-4">
         <RangeCalendar
           value={range}
           onValueChange={setRange}
         />
         <div className="text-sm text-foreground-muted">
-          {range.start && <span>Start: {range.start.toLocaleDateString()}</span>}
-          {range.start && range.end && <span> | </span>}
-          {range.end && <span>End: {range.end.toLocaleDateString()}</span>}
+          {range.start && <span id="default-span-start-rangestarttolo">Start: {range.start.toLocaleDateString()}</span>}
+          {range.start && range.end && <span id="default-span"> | </span>}
+          {range.end && <span id="default-span-end-rangeendtolocale">End: {range.end.toLocaleDateString()}</span>}
         </div>
       </div>
     );
@@ -105,7 +105,7 @@ export const WithMinMaxDates: Story = {
     const today = new Date();
     return (
       <div className="space-y-4">
-        <p className="text-sm text-foreground-muted">
+        <p id="with-min-max-dates-p-selection-limited-to" className="text-sm text-foreground-muted">
           Selection limited to next 60 days
         </p>
         <RangeCalendar
@@ -129,7 +129,7 @@ export const DisabledWeekends: Story = {
     };
     return (
       <div className="space-y-4">
-        <p className="text-sm text-foreground-muted">
+        <p id="disabled-weekends-p-weekends-are-disable" className="text-sm text-foreground-muted">
           Weekends are disabled (business days only)
         </p>
         <RangeCalendar
@@ -170,15 +170,15 @@ export const HotelBookingExample: Story = {
         <div className="flex items-center gap-4 text-sm">
           <div className="flex items-center gap-2">
             <div className="w-4 h-4 bg-primary rounded-sm" />
-            <span>Selected</span>
+            <span id="hotel-booking-example-span-selected">Selected</span>
           </div>
           <div className="flex items-center gap-2">
             <div className="w-4 h-4 bg-primary/20 rounded-sm" />
-            <span>In Range</span>
+            <span id="hotel-booking-example-span-in-range">In Range</span>
           </div>
           <div className="flex items-center gap-2">
             <div className="w-4 h-4 bg-secondary text-foreground-subtle text-xs flex items-center justify-center">x</div>
-            <span>Unavailable</span>
+            <span id="hotel-booking-example-span-unavailable">Unavailable</span>
           </div>
         </div>
         <RangeCalendar
@@ -191,8 +191,8 @@ export const HotelBookingExample: Story = {
         {nights > 0 && (
           <div className="p-4 border border-border rounded-sm">
             <div className="flex justify-between">
-              <span className="text-foreground-muted">Duration</span>
-              <span className="font-medium">{nights} night{nights !== 1 ? 's' : ''}</span>
+              <span id="hotel-booking-example-span-duration" className="text-foreground-muted">Duration</span>
+              <span id="hotel-booking-example-span-nights-nightnights-1" className="font-medium">{nights} night{nights !== 1 ? 's' : ''}</span>
             </div>
           </div>
         )}
@@ -239,7 +239,7 @@ export const ReportDateRangeExample: Story = {
           maxDate={today}
         />
         {range.start && range.end && (
-          <p className="text-sm">
+          <p id="report-date-range-example-p-selected-rangestartt" className="text-sm">
             Selected: {range.start.toLocaleDateString()} - {range.end.toLocaleDateString()}
           </p>
         )}
@@ -258,7 +258,7 @@ export const AllConfigurations: Story = {
     return (
       <div className="space-y-8">
         <div>
-          <h4 className="text-sm font-medium mb-2">Single Month</h4>
+          <h4 id="all-configurations-h4-single-month" className="text-sm font-medium mb-2">Single Month</h4>
           <RangeCalendar
             value={range1}
             onValueChange={setRange1}
@@ -266,7 +266,7 @@ export const AllConfigurations: Story = {
           />
         </div>
         <div>
-          <h4 className="text-sm font-medium mb-2">Two Months (Default)</h4>
+          <h4 id="all-configurations-h4-two-months-default" className="text-sm font-medium mb-2">Two Months (Default)</h4>
           <RangeCalendar
             value={range2}
             onValueChange={setRange2}
@@ -274,7 +274,7 @@ export const AllConfigurations: Story = {
           />
         </div>
         <div>
-          <h4 className="text-sm font-medium mb-2">Three Months</h4>
+          <h4 id="all-configurations-h4-three-months" className="text-sm font-medium mb-2">Three Months</h4>
           <RangeCalendar
             value={range3}
             onValueChange={setRange3}
@@ -297,7 +297,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 overflow-x-auto">
             <RangeCalendar
               value={mobile}
@@ -308,7 +308,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">
             <RangeCalendar
               value={tablet}
@@ -319,7 +319,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">
             <RangeCalendar
               value={desktop}

package/dist/assets/components/range-calendar.tsx

@@ -112,8 +112,8 @@ export function RangeCalendar({
     const days = eachDayOfInterval({ start: calendarStart, end: calendarEnd });
 
     return (
-      <div key={monthDate.toISOString()}>
-        <h3 className="text-sm font-medium text-foreground text-center mb-4">
+      <div data-sonance-name="range-calendar" key={monthDate.toISOString()}>
+        <h3 id="h3-formatmonthdate-mmmm" className="text-sm font-medium text-foreground text-center mb-4">
           {format(monthDate, "MMMM yyyy")}
         </h3>
 
@@ -140,7 +140,7 @@ export function RangeCalendar({
             const isEnd = isRangeEnd(day);
 
             return (
-              <button
+              <button data-sonance-name="range-calendar"
                 key={day.toISOString()}
                 type="button"
                 onClick={() => handleSelectDate(day)}

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

@@ -0,0 +1,197 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "./resizable";
+
+const meta: Meta<typeof ResizablePanelGroup> = {
+  title: "Components/Layout/Resizable",
+  component: ResizablePanelGroup,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ResizablePanelGroup>;
+
+export const Default: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="max-w-md rounded-sm border border-border"
+    >
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span id="default-span-one" className="font-medium text-foreground">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span id="default-span-two" className="font-medium text-foreground">Two</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      direction="vertical"
+      className="min-h-[200px] max-w-md rounded-sm border border-border"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span id="vertical-span-header" className="font-medium text-foreground">Header</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span id="vertical-span-content" className="font-medium text-foreground">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const WithHandle: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] max-w-md rounded-sm border border-border"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span id="with-handle-span-sidebar" className="font-medium text-foreground">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span id="with-handle-span-content" className="font-medium text-foreground">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const ThreePanels: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] max-w-lg rounded-sm border border-border"
+    >
+      <ResizablePanel defaultSize={20} minSize={15}>
+        <div className="flex h-full items-center justify-center p-4">
+          <span id="three-panels-span-nav" className="text-sm font-medium text-foreground">Nav</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={60}>
+        <div className="flex h-full items-center justify-center p-4">
+          <span id="three-panels-span-main-content" className="font-medium text-foreground">Main Content</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={20} minSize={15}>
+        <div className="flex h-full items-center justify-center p-4">
+          <span id="three-panels-span-panel" className="text-sm font-medium text-foreground">Panel</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const NestedPanels: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[300px] max-w-lg rounded-sm border border-border"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span id="nested-panels-span-sidebar" className="font-medium text-foreground">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={50}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span id="nested-panels-span-top-panel" className="font-medium text-foreground">Top Panel</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={50}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span id="nested-panels-span-bottom-panel" className="font-medium text-foreground">Bottom Panel</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const IDELayout: Story = {
+  render: () => (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[400px] max-w-2xl rounded-sm border border-border"
+    >
+      <ResizablePanel defaultSize={20} minSize={10}>
+        <div className="flex h-full flex-col bg-background p-2">
+          <p id="i-d-e-layout-p-explorer" className="text-xs font-medium uppercase tracking-widest text-foreground-muted mb-2">
+            Explorer
+          </p>
+          <div className="space-y-1 text-sm text-foreground-secondary">
+            <p id="i-d-e-layout-p--src">📁 src</p>
+            <p id="i-d-e-layout-p--components" className="pl-4">📁 components</p>
+            <p id="i-d-e-layout-p--lib" className="pl-4">📁 lib</p>
+            <p id="i-d-e-layout-p--packagejson">📄 package.json</p>
+          </div>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={60}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={70}>
+            <div className="flex h-full items-center justify-center bg-card p-6">
+              <span id="i-d-e-layout-span-editor" className="font-medium text-foreground">Editor</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={30} minSize={15}>
+            <div className="flex h-full flex-col bg-background p-2">
+              <p id="i-d-e-layout-p-terminal" className="text-xs font-medium uppercase tracking-widest text-foreground-muted mb-2">
+                Terminal
+              </p>
+              <code className="text-sm text-foreground-secondary">
+                $ npm run dev
+              </code>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={20} minSize={10}>
+        <div className="flex h-full flex-col bg-background p-2">
+          <p id="i-d-e-layout-p-outline" className="text-xs font-medium uppercase tracking-widest text-foreground-muted mb-2">
+            Outline
+          </p>
+          <div className="space-y-1 text-sm text-foreground-secondary">
+            <p id="button-p--function-button">• function Button</p>
+            <p id="card-p--function-card">• function Card</p>
+            <p id="dialog-p--function-dialog">• function Dialog</p>
+          </div>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+

package/dist/assets/components/resizable.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { GripVertical } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+import { cn } from "@/lib/utils";
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup data-sonance-name="resizable"
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-1",
+      "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0",
+      "[&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-border bg-card">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+

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 id="default-h4-tags" 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 id="horizontal-span-artworkart" className="text-foreground-muted text-xs">{artwork.art}</span>
+              </div>
+            </div>
+            <figcaption className="pt-2 text-xs text-foreground-muted">
+              Photo by{" "}
+              <span id="horizontal-span-artworkartist" 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 id="large-content-h4-sonance-brand-guidel" className="text-lg font-medium text-foreground">Sonance Brand Guidelines</h4>
+        <p id="large-content-p-welcome-to-the-sonan" 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 id="large-content-h5-typography" className="text-sm font-medium text-foreground mt-6">Typography</h5>
+        <p id="large-content-p-all-text-should-use-" 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 id="large-content-h5-colors" className="text-sm font-medium text-foreground mt-6">Colors</h5>
+        <p id="large-content-p-the-sonance-brand-us" 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 id="large-content-h5-logo-usage" className="text-sm font-medium text-foreground mt-6">Logo Usage</h5>
+        <p id="large-content-p-the-sonance-logo-sho" 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 id="large-content-h5-photography" className="text-sm font-medium text-foreground mt-6">Photography</h5>
+        <p id="large-content-p-use-photorealistic-i" 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 id="large-content-h5-design-principles" className="text-sm font-medium text-foreground mt-6">Design Principles</h5>
+        <p id="large-content-p-embrace-generous-whi" 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 data-sonance-name="scroll-area"
+    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 };
+