@bearmenu/ui 0.6.0 → 0.6.1

package/dist/components/alert.d.ts

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | "outline" | "secondary" | "glass" | "brown" | "overlay" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "glass" | "brown" | "success" | "warning" | "overlay" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/components/button.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | "glass" | "brown" | "antagonist" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "glass" | "brown" | "antagonist" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/card.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const cardVariants: (props?: ({
-    variant?: "muted" | "outline" | "glass" | "surface" | null | undefined;
+    variant?: "outline" | "glass" | "muted" | "surface" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "muted" | "outline" | "glass" | "surface" | null | undefined;
+    variant?: "outline" | "glass" | "muted" | "surface" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/command.d.ts

@@ -4,11 +4,11 @@ import { DialogProps } from '@radix-ui/react-dialog';
 
 declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -28,61 +28,61 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandLoading: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     progress?: number;
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "disabled" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/date-input.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     /** Native input type. Defaults to "date". */
     type?: "date" | "datetime-local" | "time" | "month" | "week";
     size?: "sm" | "default" | "lg";

package/dist/components/item.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const itemVariants: (props?: ({
-    variant?: "default" | "muted" | "outline" | null | undefined;
+    variant?: "default" | "outline" | "muted" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Item: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "muted" | "outline" | null | undefined;
+    variant?: "default" | "outline" | "muted" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {

package/dist/components/scroll-fade.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+type Orientation = "vertical" | "horizontal";
+type FadeColor = "background" | "card" | "muted";
+type Size = "sm" | "md" | "lg";
+interface ScrollFadeProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: Orientation;
+    fadeColor?: FadeColor;
+    size?: Size;
+    /** Class names applied to the inner scrollable element (where overflow lives). */
+    scrollClassName?: string;
+}
+declare const ScrollFade: React.ForwardRefExoticComponent<ScrollFadeProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ScrollFade, type ScrollFadeProps };

package/dist/components/scroll-fade.js

@@ -0,0 +1,116 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var fromMap = {
+  background: "from-background",
+  card: "from-card",
+  muted: "from-muted"
+};
+var sizeMap = {
+  vertical: { sm: "h-6", md: "h-12", lg: "h-20" },
+  horizontal: { sm: "w-8", md: "w-16", lg: "w-28" }
+};
+var ScrollFade = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      orientation = "vertical",
+      fadeColor = "background",
+      size = "md",
+      className,
+      scrollClassName,
+      children
+    } = _b, props = __objRest(_b, [
+      "orientation",
+      "fadeColor",
+      "size",
+      "className",
+      "scrollClassName",
+      "children"
+    ]);
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    const [atStart, setAtStart] = React.useState(true);
+    const [atEnd, setAtEnd] = React.useState(true);
+    const update = React.useCallback(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      if (orientation === "vertical") {
+        const overflow = el.scrollHeight - el.clientHeight;
+        setAtStart(el.scrollTop <= 1);
+        setAtEnd(overflow <= 1 || el.scrollTop >= overflow - 1);
+      } else {
+        const overflow = el.scrollWidth - el.clientWidth;
+        setAtStart(el.scrollLeft <= 1);
+        setAtEnd(overflow <= 1 || el.scrollLeft >= overflow - 1);
+      }
+    }, [orientation]);
+    React.useEffect(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      update();
+      el.addEventListener("scroll", update, { passive: true });
+      const ro = new ResizeObserver(update);
+      ro.observe(el);
+      return () => {
+        el.removeEventListener("scroll", update);
+        ro.disconnect();
+      };
+    }, [update]);
+    const fromClass = fromMap[fadeColor];
+    const fadeSize = sizeMap[orientation][size];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative isolate flex",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            __spreadProps(__spreadValues({
+              ref: innerRef,
+              className: cn(
+                "min-h-0 min-w-0 flex-1",
+                orientation === "vertical" ? "overflow-y-auto" : "overflow-x-auto",
+                scrollClassName
+              )
+            }, props), {
+              children
+            })
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "pointer-events-none absolute z-10 transition-opacity duration-300",
+                orientation === "vertical" ? `inset-x-0 top-0 ${fadeSize} bg-gradient-to-b` : `inset-y-0 left-0 ${fadeSize} bg-gradient-to-r`,
+                fromClass,
+                atStart ? "opacity-0" : "opacity-100"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "pointer-events-none absolute z-10 transition-opacity duration-300",
+                orientation === "vertical" ? `inset-x-0 bottom-0 ${fadeSize} bg-gradient-to-t` : `inset-y-0 right-0 ${fadeSize} bg-gradient-to-l`,
+                fromClass,
+                atEnd ? "opacity-0" : "opacity-100"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ScrollFade.displayName = "ScrollFade";
+
+export { ScrollFade };

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
+    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
+    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | "primary" | "outline" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | "primary" | "outline" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -4,9 +4,9 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const textVariants: (props?: ({
-    variant?: "small" | "display" | "h1" | "h2" | "h3" | "h4" | "body-lg" | "body" | "body-sm" | "caption" | "label" | "overline" | null | undefined;
-    color?: "default" | "destructive" | "inherit" | "muted" | "primary" | "primary-foreground" | null | undefined;
-    weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
+    variant?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "inherit" | "default" | "destructive" | "muted" | "primary" | "primary-foreground" | null | undefined;
+    weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;
     wrap?: "balance" | "pretty" | "nowrap" | null | undefined;

package/dist/components/toaster.js

@@ -1,5 +1,5 @@
-import { useToast } from '../chunk-EBAMCZDW.js';
 import { ToastProvider, Toast, ToastTitle, ToastDescription, ToastClose, ToastViewport } from '../chunk-7PPCH42H.js';
+import { useToast } from '../chunk-EBAMCZDW.js';
 import '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
@@ -67,6 +67,7 @@
     "./components/radio-group": "./src/components/radio-group.tsx",
     "./components/rating": "./src/components/rating.tsx",
     "./components/scroll-area": "./src/components/scroll-area.tsx",
+    "./components/scroll-fade": "./src/components/scroll-fade.tsx",
     "./components/search-bar": "./src/components/search-bar.tsx",
     "./components/searchable-select": "./src/components/searchable-select.tsx",
     "./components/select": "./src/components/select.tsx",

package/src/components/scroll-fade.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ScrollFade } from "./scroll-fade";
+
+const meta = {
+  title: "Components/ScrollFade",
+  component: ScrollFade,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Scroll-position-aware fade overlay. Hides when at the corresponding edge, fades in when there's more content to scroll. Works vertically or horizontally and matches a chosen surface color.",
+      },
+    },
+  },
+} satisfies Meta<typeof ScrollFade>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const longList = Array.from({ length: 30 });
+const wideList = Array.from({ length: 20 });
+
+export const Vertical: Story = {
+  args: {
+    orientation: "vertical",
+    fadeColor: "background",
+    size: "md",
+  },
+  render: (args) => (
+    <ScrollFade {...args} className="h-[320px] w-[360px] rounded-lg border" scrollClassName="p-4">
+      <ul className="space-y-3">
+        {longList.map((_, i) => (
+          <li key={i} className="text-sm text-muted-foreground">
+            Item #{i + 1} — scroll to reveal the fades at the edges.
+          </li>
+        ))}
+      </ul>
+    </ScrollFade>
+  ),
+};
+
+export const Horizontal: Story = {
+  args: {
+    orientation: "horizontal",
+    fadeColor: "background",
+    size: "md",
+  },
+  render: (args) => (
+    <ScrollFade {...args} className="w-[480px] rounded-lg border" scrollClassName="flex gap-3 p-4">
+      {wideList.map((_, i) => (
+        <div
+          key={i}
+          className="flex h-24 w-32 shrink-0 items-center justify-center rounded-md bg-muted text-sm"
+        >
+          Card {i + 1}
+        </div>
+      ))}
+    </ScrollFade>
+  ),
+};
+
+export const InsideCard: Story = {
+  args: {
+    orientation: "vertical",
+    fadeColor: "card",
+    size: "md",
+  },
+  render: (args) => (
+    <div className="bg-card text-card-foreground w-[360px] rounded-2xl border shadow-md">
+      <div className="border-border border-b p-4 font-semibold">Drawer header</div>
+      <ScrollFade {...args} className="h-[280px]" scrollClassName="p-4">
+        <ul className="space-y-3">
+          {longList.map((_, i) => (
+            <li key={i} className="text-sm text-muted-foreground">
+              Row #{i + 1} — fades use <code>fadeColor=&quot;card&quot;</code> to match the surface.
+            </li>
+          ))}
+        </ul>
+      </ScrollFade>
+    </div>
+  ),
+};
+
+export const NoOverflow: Story = {
+  args: {
+    orientation: "vertical",
+    fadeColor: "background",
+    size: "md",
+  },
+  render: (args) => (
+    <ScrollFade {...args} className="h-[200px] w-[320px] rounded-lg border" scrollClassName="p-4">
+      <p className="text-sm text-muted-foreground">
+        Content fits inside the box — both fades stay hidden.
+      </p>
+    </ScrollFade>
+  ),
+};

package/src/components/scroll-fade.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+type Orientation = "vertical" | "horizontal";
+type FadeColor = "background" | "card" | "muted";
+type Size = "sm" | "md" | "lg";
+
+interface ScrollFadeProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: Orientation;
+  fadeColor?: FadeColor;
+  size?: Size;
+  /** Class names applied to the inner scrollable element (where overflow lives). */
+  scrollClassName?: string;
+}
+
+// Static maps so Tailwind can statically analyze the class names.
+const fromMap: Record<FadeColor, string> = {
+  background: "from-background",
+  card: "from-card",
+  muted: "from-muted",
+};
+
+const sizeMap: Record<Orientation, Record<Size, string>> = {
+  vertical: { sm: "h-6", md: "h-12", lg: "h-20" },
+  horizontal: { sm: "w-8", md: "w-16", lg: "w-28" },
+};
+
+const ScrollFade = React.forwardRef<HTMLDivElement, ScrollFadeProps>(
+  (
+    {
+      orientation = "vertical",
+      fadeColor = "background",
+      size = "md",
+      className,
+      scrollClassName,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const innerRef = React.useRef<HTMLDivElement>(null);
+    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);
+
+    const [atStart, setAtStart] = React.useState(true);
+    const [atEnd, setAtEnd] = React.useState(true);
+
+    const update = React.useCallback(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      if (orientation === "vertical") {
+        const overflow = el.scrollHeight - el.clientHeight;
+        setAtStart(el.scrollTop <= 1);
+        setAtEnd(overflow <= 1 || el.scrollTop >= overflow - 1);
+      } else {
+        const overflow = el.scrollWidth - el.clientWidth;
+        setAtStart(el.scrollLeft <= 1);
+        setAtEnd(overflow <= 1 || el.scrollLeft >= overflow - 1);
+      }
+    }, [orientation]);
+
+    React.useEffect(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      update();
+      el.addEventListener("scroll", update, { passive: true });
+      const ro = new ResizeObserver(update);
+      ro.observe(el);
+      return () => {
+        el.removeEventListener("scroll", update);
+        ro.disconnect();
+      };
+    }, [update]);
+
+    const fromClass = fromMap[fadeColor];
+    const fadeSize = sizeMap[orientation][size];
+
+    return (
+      <div
+        className={cn(
+          "relative isolate flex",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          className
+        )}
+      >
+        <div
+          ref={innerRef}
+          className={cn(
+            "min-h-0 min-w-0 flex-1",
+            orientation === "vertical" ? "overflow-y-auto" : "overflow-x-auto",
+            scrollClassName
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+        <div
+          aria-hidden
+          className={cn(
+            "pointer-events-none absolute z-10 transition-opacity duration-300",
+            orientation === "vertical"
+              ? `inset-x-0 top-0 ${fadeSize} bg-gradient-to-b`
+              : `inset-y-0 left-0 ${fadeSize} bg-gradient-to-r`,
+            fromClass,
+            atStart ? "opacity-0" : "opacity-100"
+          )}
+        />
+        <div
+          aria-hidden
+          className={cn(
+            "pointer-events-none absolute z-10 transition-opacity duration-300",
+            orientation === "vertical"
+              ? `inset-x-0 bottom-0 ${fadeSize} bg-gradient-to-t`
+              : `inset-y-0 right-0 ${fadeSize} bg-gradient-to-l`,
+            fromClass,
+            atEnd ? "opacity-0" : "opacity-100"
+          )}
+        />
+      </div>
+    );
+  }
+);
+ScrollFade.displayName = "ScrollFade";
+
+export { ScrollFade };
+export type { ScrollFadeProps };