sonance-brand-mcp 1.2.5 → 1.3.2

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

@@ -41,8 +41,8 @@ type Story = StoryObj<typeof meta>;
 
 const sampleContent = Array.from({ length: 20 }, (_, i) => (
   <div key={i} className="p-4 border-b border-border">
-    <h4 className="font-medium">Item {i + 1}</h4>
-    <p className="text-sm text-foreground-muted">
+    <h4 id="h4-item-i-1" className="font-medium">Item {i + 1}</h4>
+    <p id="p-this-is-sample-conte" className="text-sm text-foreground-muted">
       This is sample content for item {i + 1}. Scroll to see the shadow effect.
     </p>
   </div>
@@ -53,8 +53,8 @@ const horizontalItems = Array.from({ length: 15 }, (_, i) => (
     key={i}
     className="flex-shrink-0 w-48 h-32 p-4 border border-border rounded-sm bg-card"
   >
-    <h4 className="font-medium">Card {i + 1}</h4>
-    <p className="text-sm text-foreground-muted">Scroll horizontally</p>
+    <h4 id="h4-card-i-1" className="font-medium">Card {i + 1}</h4>
+    <p id="p-scroll-horizontally" className="text-sm text-foreground-muted">Scroll horizontally</p>
   </div>
 ));
 
@@ -141,7 +141,7 @@ export const LargeShadow: Story = {
 export const HiddenScrollbar: Story = {
   render: () => (
     <div className="space-y-4">
-      <p className="text-sm text-foreground-muted">
+      <p id="hidden-scrollbar-p-scrollbar-is-hidden-" className="text-sm text-foreground-muted">
         Scrollbar is hidden but scrolling still works
       </p>
       <ScrollShadow
@@ -171,19 +171,19 @@ export const ProductListExample: Story = {
     ];
 
     return (
-      <div className="w-80 border border-border rounded-sm">
+      <div data-sonance-name="scroll-shadow.stories" className="w-80 border border-border rounded-sm">
         <div className="p-4 border-b border-border">
-          <h3 className="font-medium">Products ({products.length})</h3>
+          <h3 id="product-list-example-h3-products-productslen" className="font-medium">Products ({products.length})</h3>
         </div>
         <ScrollShadow className="h-64">
           {products.map((product, i) => (
             <div key={i} className="p-4 border-b border-border hover:bg-secondary-hover transition-colors cursor-pointer">
               <div className="flex justify-between items-start">
                 <div>
-                  <h4 className="font-medium text-sm">{product.name}</h4>
-                  <p className="text-xs text-foreground-muted">{product.category}</p>
+                  <h4 id="product-list-example-h4-productname" className="font-medium text-sm">{product.name}</h4>
+                  <p id="product-list-example-p-productcategory" className="text-xs text-foreground-muted">{product.category}</p>
                 </div>
-                <span className="font-medium">{product.price}</span>
+                <span id="product-list-example-span-productprice" className="font-medium">{product.price}</span>
               </div>
             </div>
           ))}
@@ -203,7 +203,7 @@ export const ImageGalleryExample: Story = {
 
     return (
       <div className="space-y-2">
-        <h3 className="font-medium">Gallery</h3>
+        <h3 id="image-gallery-example-h3-gallery" className="font-medium">Gallery</h3>
         <ScrollShadow
           orientation="horizontal"
           hideScrollbar
@@ -265,19 +265,19 @@ export const AllSizesComparison: Story = {
   render: () => (
     <div className="flex gap-8">
       <div className="space-y-2">
-        <p className="text-sm font-medium">Small</p>
+        <p id="all-sizes-comparison-p-small" className="text-sm font-medium">Small</p>
         <ScrollShadow size="sm" className="h-48 w-64 border border-border rounded-sm">
           {sampleContent.slice(0, 10)}
         </ScrollShadow>
       </div>
       <div className="space-y-2">
-        <p className="text-sm font-medium">Medium</p>
+        <p id="all-sizes-comparison-p-medium" className="text-sm font-medium">Medium</p>
         <ScrollShadow size="md" className="h-48 w-64 border border-border rounded-sm">
           {sampleContent.slice(0, 10)}
         </ScrollShadow>
       </div>
       <div className="space-y-2">
-        <p className="text-sm font-medium">Large</p>
+        <p id="all-sizes-comparison-p-large" className="text-sm font-medium">Large</p>
         <ScrollShadow size="lg" className="h-48 w-64 border border-border rounded-sm">
           {sampleContent.slice(0, 10)}
         </ScrollShadow>
@@ -292,7 +292,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">
           <ScrollShadow className="h-48 border border-border rounded-sm">
             {sampleContent.slice(0, 8)}
@@ -301,7 +301,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">
           <ScrollShadow
             orientation="horizontal"
@@ -315,7 +315,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="grid grid-cols-3 gap-4">
             <ScrollShadow size="sm" className="h-48 border border-border rounded-sm">

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;
@@ -70,9 +92,9 @@ export function ScrollShadow({
   const isHorizontal = orientation === "horizontal" || orientation === "both";
 
   return (
-    <div className={cn("relative", className)} style={style}>
+    <div data-sonance-name="scroll-shadow" className={cn("relative", className)} style={style}>
       {/* Start shadow (top/left) */}
-      <div
+      <div data-sonance-name="scroll-shadow"
         className={cn(
           "pointer-events-none absolute z-10 transition-opacity duration-200",
           isVertical && "inset-x-0 top-0",

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

@@ -101,11 +101,11 @@ export const WithDisabledOption: Story = {
 export const AllStates: Story = {
   render: () => (
     <div className="space-y-6 w-72">
-      <Select options={defaultOptions} placeholder="Default select" />
-      <Select options={countryOptions} label="With Label" placeholder="Select..." />
-      <Select options={countryOptions} label="With Value" defaultValue="uk" />
-      <Select options={countryOptions} label="With Error" error="Required field" />
-      <Select options={countryOptions} label="Disabled" defaultValue="us" disabled />
+      <Select id="all-states-select-default-select" options={defaultOptions} placeholder="Default select" />
+      <Select id="all-states-select" options={countryOptions} label="With Label" placeholder="Select..." />
+      <Select id="all-states-select" options={countryOptions} label="With Value" defaultValue="uk" />
+      <Select id="all-states-select" options={countryOptions} label="With Error" error="Required field" />
+      <Select id="all-states-select" options={countryOptions} label="Disabled" defaultValue="us" disabled />
     </div>
   ),
 };
@@ -132,13 +132,14 @@ export const StateMatrix: Story = {
   render: () => {
     const states: SelectState[] = ['default', 'hover', 'focus', 'open', 'error', 'disabled'];
     return (
-      <div className="space-y-6 w-80">
-        <h3 className="text-sm font-medium text-foreground-muted">Select States</h3>
+      <div data-sonance-name="select.stories" className="space-y-6 w-80">
+        <h3 id="state-matrix-h3-select-states" className="text-sm font-medium text-foreground-muted">Select States</h3>
         <div className="grid grid-cols-1 gap-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>
+              <span id="state-matrix-span-state" className="text-xs font-medium text-foreground-muted uppercase w-20">{state}</span>
               <Select
+                id="state-matrix-select-select-option"
                 state={state}
                 options={defaultOptions}
                 placeholder="Select option"
@@ -159,31 +160,31 @@ 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-4">
-          <Select options={countryOptions} label="Country" placeholder="Select..." />
-          <Select options={defaultOptions} label="Option" placeholder="Choose..." />
+          <Select id="responsive-matrix-select" options={countryOptions} label="Country" placeholder="Select..." />
+          <Select id="responsive-matrix-select-choose" options={defaultOptions} label="Option" placeholder="Choose..." />
         </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">
           <div className="grid grid-cols-2 gap-4">
-            <Select options={countryOptions} label="Country" placeholder="Select country..." />
-            <Select options={defaultOptions} label="Category" placeholder="Select category..." />
+            <Select id="responsive-matrix-select-select-country" options={countryOptions} label="Country" placeholder="Select country..." />
+            <Select id="responsive-matrix-select-select-category" options={defaultOptions} label="Category" placeholder="Select category..." />
           </div>
         </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">
           <div className="grid grid-cols-4 gap-4">
-            <Select options={countryOptions} label="Country" defaultValue="us" />
-            <Select options={defaultOptions} label="Default" placeholder="Select..." />
-            <Select options={countryOptions} label="With Error" error="Required" />
-            <Select options={countryOptions} label="Disabled" defaultValue="uk" disabled />
+            <Select id="responsive-matrix-select" options={countryOptions} label="Country" defaultValue="us" />
+            <Select id="responsive-matrix-select" options={defaultOptions} label="Default" placeholder="Select..." />
+            <Select id="responsive-matrix-select" options={countryOptions} label="With Error" error="Required" />
+            <Select id="responsive-matrix-select" options={countryOptions} label="Disabled" defaultValue="uk" disabled />
           </div>
         </div>
       </div>

package/dist/assets/components/select.tsx

@@ -39,6 +39,8 @@ interface SelectProps {
   className?: string;
   /** Visual state for Storybook/Figma documentation */
   state?: SelectState;
+  /** Style for the select button */
+  style?: React.CSSProperties;
 }
 
 export function Select({
@@ -52,6 +54,7 @@ export function Select({
   disabled = false,
   className,
   state,
+  style,
 }: SelectProps) {
   const isDisabled = disabled || state === "disabled";
   const hasError = error || state === "error";
@@ -94,7 +97,7 @@ export function Select({
   }, []);
 
   return (
-    <div className={cn("w-full", className)} ref={containerRef}>
+    <div data-sonance-name="select" className={cn("w-full", className)} ref={containerRef}>
       {label && (
         <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
           {label}
@@ -105,6 +108,7 @@ export function Select({
           type="button"
           onClick={() => !isDisabled && setIsOpen(!isOpen)}
           disabled={isDisabled}
+          style={style}
           className={cn(
             "flex w-full items-center justify-between border border-input-border bg-input px-4 py-3",
             "text-left text-foreground transition-colors duration-200",
@@ -115,7 +119,7 @@ export function Select({
             getStateStyles(state)
           )}
         >
-          <span className={cn(!selectedOption && "text-input-placeholder")}>
+          <span id="span-selectedoptionlabel-" className={cn(!selectedOption && "text-input-placeholder")}>
             {selectedOption?.label || placeholder}
           </span>
           <ChevronDown
@@ -155,7 +159,7 @@ export function Select({
           </div>
         )}
       </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>
   );
 }
@@ -191,7 +195,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
     const hasError = error || state === "error";
 
     return (
-      <div className="w-full">
+      <div data-sonance-name="select" className="w-full">
         {label && (
           <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
             {label}
@@ -209,7 +213,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
               hasError && "border-error",
               getNativeSelectStateStyles(state),
               className
-            )}
+            )} data-sonance-name="select"
             {...props}
           >
             {options.map((option) => (
@@ -220,7 +224,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           </select>
           <ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground-muted" />
         </div>
-        {error && <p className="mt-1 text-sm text-error">{error}</p>}
+        {error && <p id="native-select-p-error" className="mt-1 text-sm text-error">{error}</p>}
       </div>
     );
   }

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 data-sonance-name="separator"
+      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,137 @@
+"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 id="sheet-content-span-close" className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div data-sonance-name="sheet"
+    {...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
+    )} data-sonance-name="sheet"
+    {...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,
+}
+