@bearmenu/ui 0.5.2 → 0.6.1

package/src/components/rating.tsx

@@ -1,20 +1,37 @@
 "use client";
 
 import * as React from "react";
-import { cn } from "../lib/utils";
 import { Star, StarHalf } from "lucide-react";
+import { cn } from "../lib/utils";
 
 interface RatingProps {
-  value: number; // 1-5
-  max?: number; // default 5
+  value: number;
+  max?: number;
   size?: "sm" | "md" | "lg";
   showCount?: boolean;
   reviewCount?: number;
   readonly?: boolean;
   onRatingChange?: (rating: number) => void;
   className?: string;
+  /** Accessible label for the rating control. Defaults to "Rating". */
+  label?: string;
 }
 
+const sizeClasses = {
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5",
+} as const;
+
+const textSizeClasses = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+} as const;
+
+const FILLED_CLASSES = "fill-amber-400 text-amber-400";
+const EMPTY_CLASSES = "fill-transparent text-muted-foreground/40";
+
 const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
   (
     {
@@ -26,103 +43,101 @@ const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
       readonly = true,
       onRatingChange,
       className,
+      label = "Rating",
       ...props
     },
     ref
   ) => {
     const [hoverValue, setHoverValue] = React.useState<number | null>(null);
+    const displayValue = hoverValue ?? value;
 
-    const sizeClasses = {
-      sm: "h-3 w-3",
-      md: "h-4 w-4",
-      lg: "h-5 w-5",
-    };
-
-    const textSizeClasses = {
-      sm: "text-xs",
-      md: "text-sm",
-      lg: "text-base",
-    };
-
-    const handleClick = (rating: number) => {
-      if (!readonly && onRatingChange) {
-        onRatingChange(rating);
-      }
-    };
+    if (readonly) {
+      const fullStars = Math.floor(displayValue);
+      const hasHalfStar = displayValue % 1 !== 0;
+      const emptyStars = max - fullStars - (hasHalfStar ? 1 : 0);
 
-    const handleMouseEnter = (rating: number) => {
-      if (!readonly) {
-        setHoverValue(rating);
-      }
-    };
+      return (
+        <div
+          ref={ref}
+          role="img"
+          aria-label={`${label}: ${value} out of ${max}`}
+          className={cn("flex items-center gap-1", className)}
+          {...props}
+        >
+          <div className="flex items-center gap-0.5">
+            {Array.from({ length: fullStars }).map((_, i) => (
+              <Star key={`full-${i}`} className={cn(sizeClasses[size], FILLED_CLASSES)} />
+            ))}
+            {hasHalfStar && <StarHalf className={cn(sizeClasses[size], FILLED_CLASSES)} />}
+            {Array.from({ length: emptyStars }).map((_, i) => (
+              <Star key={`empty-${i}`} className={cn(sizeClasses[size], EMPTY_CLASSES)} />
+            ))}
+          </div>
+          {showCount && reviewCount !== undefined && (
+            <span className={cn("ml-1 text-muted-foreground", textSizeClasses[size])}>
+              ({reviewCount})
+            </span>
+          )}
+        </div>
+      );
+    }
 
-    const handleMouseLeave = () => {
-      if (!readonly) {
-        setHoverValue(null);
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!onRatingChange) return;
+      if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+        e.preventDefault();
+        onRatingChange(Math.min(max, value + 1));
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+        e.preventDefault();
+        onRatingChange(Math.max(0, value - 1));
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        onRatingChange(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        onRatingChange(max);
       }
     };
 
-    const displayValue = hoverValue ?? value;
-    const fullStars = Math.floor(displayValue);
-    const hasHalfStar = displayValue % 1 !== 0;
-    const emptyStars = max - fullStars - (hasHalfStar ? 1 : 0);
-
     return (
       <div
         ref={ref}
-        className={cn("flex items-center gap-1", !readonly && "cursor-pointer", className)}
+        role="radiogroup"
+        aria-label={label}
+        onKeyDown={handleKeyDown}
+        className={cn("flex items-center gap-1", className)}
         {...props}
       >
-        {/* Stars */}
-        <div className="flex items-center gap-0.5">
-          {/* Full stars */}
-          {Array.from({ length: fullStars }).map((_, i) => (
-            <Star
-              key={`full-${i}`}
-              className={cn(
-                sizeClasses[size],
-                "fill-primary text-primary transition-colors",
-                !readonly && "hover:fill-primary/80"
-              )}
-              onClick={() => handleClick(i + 1)}
-              onMouseEnter={() => handleMouseEnter(i + 1)}
-              onMouseLeave={handleMouseLeave}
-            />
-          ))}
-
-          {/* Half star */}
-          {hasHalfStar && (
-            <StarHalf
-              className={cn(
-                sizeClasses[size],
-                "fill-primary text-primary transition-colors",
-                !readonly && "hover:fill-primary/80"
-              )}
-              onClick={() => handleClick(fullStars + 1)}
-              onMouseEnter={() => handleMouseEnter(fullStars + 1)}
-              onMouseLeave={handleMouseLeave}
-            />
-          )}
-
-          {/* Empty stars */}
-          {Array.from({ length: emptyStars }).map((_, i) => (
-            <Star
-              key={`empty-${i}`}
-              className={cn(
-                sizeClasses[size],
-                "text-muted-foreground/30 transition-colors",
-                !readonly && "hover:text-primary/50"
-              )}
-              onClick={() => handleClick(fullStars + (hasHalfStar ? 1 : 0) + i + 1)}
-              onMouseEnter={() => handleMouseEnter(fullStars + (hasHalfStar ? 1 : 0) + i + 1)}
-              onMouseLeave={handleMouseLeave}
-            />
-          ))}
+        <div className="flex items-center gap-0.5" onMouseLeave={() => setHoverValue(null)}>
+          {Array.from({ length: max }).map((_, i) => {
+            const starValue = i + 1;
+            const isActive = starValue <= displayValue;
+            return (
+              <button
+                key={starValue}
+                type="button"
+                role="radio"
+                aria-checked={value === starValue}
+                aria-label={`${starValue} star${starValue === 1 ? "" : "s"}`}
+                onClick={() => onRatingChange?.(starValue)}
+                onMouseEnter={() => setHoverValue(starValue)}
+                className={cn(
+                  "rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+                )}
+              >
+                <Star
+                  className={cn(
+                    sizeClasses[size],
+                    isActive ? FILLED_CLASSES : EMPTY_CLASSES,
+                    "transition-colors"
+                  )}
+                />
+              </button>
+            );
+          })}
         </div>
-
-        {/* Review count */}
         {showCount && reviewCount !== undefined && (
-          <span className={cn("text-muted-foreground ml-1", textSizeClasses[size])}>
+          <span className={cn("ml-1 text-muted-foreground", textSizeClasses[size])}>
             ({reviewCount})
           </span>
         )}

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 };

package/src/components/search-bar.stories.tsx

@@ -20,44 +20,13 @@ export const Default: Story = {
   render: () => <SearchBarDemo />,
 };
 
-export const Editorial: Story = {
+export const Wide: Story = {
   render: () => {
     const [value, setValue] = useState("");
     return (
       <SearchBar
         value={value}
         onChange={setValue}
-        variant="editorial"
-        placeholder="Search..."
-        className="w-[400px]"
-      />
-    );
-  },
-};
-
-export const Primary: Story = {
-  render: () => {
-    const [value, setValue] = useState("");
-    return (
-      <SearchBar
-        value={value}
-        onChange={setValue}
-        variant="primary"
-        placeholder="Search..."
-        className="w-[400px]"
-      />
-    );
-  },
-};
-
-export const Secondary: Story = {
-  render: () => {
-    const [value, setValue] = useState("");
-    return (
-      <SearchBar
-        value={value}
-        onChange={setValue}
-        variant="secondary"
         placeholder="Search..."
         className="w-[400px]"
       />

package/src/components/search-bar.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import type { ChangeEvent } from "react";
-import { Card } from "./card";
 import { Loader2, Search } from "lucide-react";
 import { cn } from "../lib/utils";
 
@@ -15,7 +14,6 @@ interface SearchBarProps {
   autoFocus?: boolean;
   inputAriaLabel?: string;
   size?: "default" | "compact";
-  variant?: "primary" | "secondary" | "editorial";
 }
 
 export function SearchBar({
@@ -28,49 +26,26 @@ export function SearchBar({
   autoFocus = false,
   inputAriaLabel,
   size = "default",
-  variant = "editorial",
 }: SearchBarProps) {
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    onChange?.(newValue);
+    onChange?.(e.target.value);
   };
 
-  const Wrapper = variant === "editorial" ? "div" : Card;
-  const wrapperClassName =
-    variant === "editorial"
-      ? cn(
-          "bg-surface border border-border rounded-[14px] h-12 flex items-center transition-colors focus-within:border-primary",
-          className
-        )
-      : cn(
-          "border-2 border-primary-foreground/20 backdrop-blur-xl rounded-lg p-0",
-          size === "compact" ? "md:p-1.5" : "md:p-2",
-          variant === "primary"
-            ? "!bg-primary-foreground/10 !text-primary !border-primary/20"
-            : "!bg-primary !text-primary-foreground !border-primary/20",
-          className
-        );
-
   return (
-    <Wrapper className={wrapperClassName}>
-      <div className="flex items-center relative">
-        <div
+    <div
+      className={cn(
+        "flex w-full items-center rounded-[14px] border border-border bg-surface transition-colors focus-within:border-primary",
+        size === "compact" ? "h-10" : "h-12",
+        className
+      )}
+    >
+      <div className="relative flex w-full items-center">
+        <Search
           className={cn(
-            "absolute top-1/2 z-10 -translate-y-1/2",
-            size === "compact" ? "left-3.5" : "left-4"
+            "pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 text-muted-foreground",
+            size === "compact" ? "left-3.5 h-3.5 w-3.5" : "left-4 h-4 w-4"
           )}
-        >
-          <Search
-            className={cn(
-              variant === "editorial"
-                ? "text-muted-foreground"
-                : variant === "primary"
-                  ? "text-primary"
-                  : "text-primary-foreground",
-              size === "compact" ? "h-3.5 w-3.5" : "h-4 w-4"
-            )}
-          />
-        </div>
+        />
         <input
           type="text"
           placeholder={placeholder}
@@ -79,35 +54,23 @@ export function SearchBar({
           autoFocus={autoFocus}
           aria-label={inputAriaLabel ?? placeholder}
           className={cn(
-            "w-full bg-transparent border-0 focus:outline-none focus-visible:outline-none",
+            "w-full border-0 bg-transparent text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none",
             size === "compact"
-              ? "pl-9 pr-3 py-2.5 text-sm placeholder:text-sm rounded-lg"
-              : "pl-10 pr-4 py-3 text-[14px] placeholder:text-[14px] rounded-[14px]",
-            variant === "editorial"
-              ? "text-foreground placeholder:text-muted-foreground"
-              : variant === "primary"
-                ? "!text-primary placeholder:text-primary/60"
-                : "!text-primary-foreground placeholder:text-primary-foreground/60",
+              ? "rounded-lg py-2.5 pl-9 pr-3 text-base placeholder:text-base md:text-sm md:placeholder:text-sm"
+              : "rounded-[14px] py-3 pl-10 pr-4 text-base placeholder:text-base md:text-[14px] md:placeholder:text-[14px]",
             inputClassName
           )}
         />
         {isSearching && (
-          <div
+          <Loader2
+            aria-hidden
             className={cn(
-              "absolute top-1/2 -translate-y-1/2",
-              size === "compact" ? "right-3.5" : "right-4"
+              "absolute top-1/2 -translate-y-1/2 animate-spin text-muted-foreground",
+              size === "compact" ? "right-3.5 h-3.5 w-3.5" : "right-4 h-4 w-4"
             )}
-          >
-            <Loader2
-              className={cn(
-                "animate-spin",
-                variant === "editorial" ? "text-muted-foreground" : "text-primary/60",
-                size === "compact" ? "h-3.5 w-3.5" : "h-4 w-4"
-              )}
-            />
-          </div>
+          />
         )}
       </div>
-    </Wrapper>
+    </div>
   );
 }