@elabs-ai/components-ui 4.1.0 → 5.0.0

package/dist/chunk-BM6NGS3A.js

@@ -0,0 +1,201 @@
+"use client";
+import {
+  cardVariants
+} from "./chunk-URVAZW44.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/bento-grid/bento-grid.tsx
+import {
+  createContext,
+  forwardRef,
+  use,
+  useEffect,
+  useRef,
+  useCallback
+} from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BentoGridContext = createContext({ spotlight: false });
+var BentoGrid = forwardRef(function BentoGrid2({ className, spotlight = false, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(BentoGridContext, { value: { spotlight }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "bento-grid",
+      className: cn(
+        "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+        "[grid-auto-flow:dense]",
+        "auto-rows-[14rem]",
+        "gap-4",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+});
+var SIZE_SPANS = {
+  sm: { col: 1, row: 1 },
+  md: { col: 2, row: 1 },
+  lg: { col: 2, row: 2 },
+  hero: { col: 2, row: 2 }
+};
+var bentoGridItemVariants = cva(
+  [
+    // Base: compose Card surface (bg-card border rounded-lg shadow-sm).
+    cardVariants({ interactive: false }),
+    // Overflow hidden so content + spotlight overlay stay within rounded corners.
+    "relative overflow-hidden",
+    // Flex column layout for slot content.
+    "flex flex-col",
+    // Ensure long unbroken strings can't overflow the tile.
+    "min-w-0 break-words",
+    // ELEVATION IS THE HOVER GESTURE. The grid rests FLAT — `shadow-none` beats
+    // the `shadow-sm` inherited from `cardVariants` (tailwind-merge, later wins)
+    // so a bento sheet reads as one plane, not a field of lifted chips. On hover
+    // the single tile under the pointer rises to `shadow-lg`, a stacked rung of
+    // the ONE elevation ramp (never a hand-rolled box-shadow). The rung is
+    // `hover:`-prefixed, so pairing it with the card border is the sanctioned
+    // "bordered card, hover lift" shape, not the flagged double edge.
+    "shadow-none hover:shadow-xl",
+    // Shadow alone is a LIGHT-theme signal: the ramp's ink is black, so on a dark
+    // ground even `shadow-xl` is faint (measured on `theme:dark` — the hovered tile
+    // was hard to pick out). The hover EDGE carries the lift there. It is
+    // `ring/40`, the same tint `Card interactive` uses — NOT `border-strong`, which
+    // is a near-charcoal 0.65 L against a 0.88 L resting border and reads as a hard
+    // outline snapping on, not as a lift. At 40% the brand hue stays a soft warm
+    // edge on white and a clearly brighter one on charcoal.
+    "hover:border-ring/40",
+    // A lift you can SEE: ~4px of travel. Below ~16px a slide is a flicker, but a
+    // hover-lift is the exception the motion guidelines size at ≥4px — and the
+    // travel, not the duration, is what makes the elevation legible.
+    "hover:-translate-y-1 motion-reduce:hover:translate-y-0",
+    // `ease-entrance` (easeOutQuint) — a near-zero arrival velocity is the #1
+    // smoothness lever; `ease-standard` snaps at the end. Duration stays at the
+    // 260ms `base` rung: lengthening it does NOT fix abruptness. Under OS
+    // reduced-motion the travel is neutralized and the transition is dropped, so
+    // the shadow + edge still state the hover without any movement.
+    "transition-[translate,box-shadow,border-color] duration-base ease-entrance motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      /** Hero tile gets a subtle gradient wash to distinguish it from supporting tiles. */
+      hero: {
+        true: "bg-gradient-to-br from-primary/8 to-card",
+        false: ""
+      },
+      /**
+       * Interactive tiles (those holding a clickable inner element, e.g. a
+       * stretched link) get a pointer cursor and a `focus-within` ring so keyboard
+       * focus on the inner control is visible on the whole tile. The hover lift
+       * (elevation + edge) is on the base — every tile lifts, clickable or not.
+       */
+      interactive: {
+        true: "cursor-pointer focus-ring-within",
+        false: ""
+      }
+    },
+    defaultVariants: { hero: false, interactive: false }
+  }
+);
+var BentoGridItem = forwardRef(function BentoGridItem2({ size = "sm", span, spotlight, hero, interactive, className, style, children, ...props }, ref) {
+  const tileRef = useRef(null);
+  const overlayRef = useRef(null);
+  const spotlightOn = spotlight ?? use(BentoGridContext).spotlight;
+  const resolvedCol = span?.col ?? SIZE_SPANS[size].col;
+  const resolvedRow = span?.row ?? SIZE_SPANS[size].row;
+  const isInteractive = interactive ?? false;
+  const isHero = hero ?? size === "hero";
+  const rafRef = useRef(0);
+  useEffect(() => {
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!spotlightOn || !tileRef.current || !overlayRef.current) return;
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        if (!tileRef.current || !overlayRef.current) return;
+        const rect = tileRef.current.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        tileRef.current.style.setProperty("--bento-x", `${x}px`);
+        tileRef.current.style.setProperty("--bento-y", `${y}px`);
+        overlayRef.current.style.opacity = "1";
+      });
+    },
+    [spotlightOn]
+  );
+  const handleMouseLeave = useCallback(() => {
+    if (!overlayRef.current) return;
+    overlayRef.current.style.opacity = "0";
+  }, []);
+  const gridStyle = {
+    gridColumn: resolvedCol > 1 ? `span ${resolvedCol} / span ${resolvedCol}` : void 0,
+    gridRow: resolvedRow > 1 ? `span ${resolvedRow} / span ${resolvedRow}` : void 0,
+    ...style
+  };
+  const mergedRef = useCallback(
+    (node) => {
+      tileRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: mergedRef,
+      className: cn(
+        bentoGridItemVariants({
+          hero: isHero,
+          interactive: isInteractive
+        }),
+        className
+      ),
+      style: gridStyle,
+      "data-slot": "bento-grid-item",
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      ...props,
+      children: [
+        spotlightOn && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: overlayRef,
+            "aria-hidden": "true",
+            "data-testid": "bento-spotlight",
+            className: cn(
+              "pointer-events-none absolute inset-0 z-10",
+              "opacity-0 transition-opacity duration-base ease-standard",
+              // Suppress entirely under reduced-motion (cursor tracking = motion).
+              "motion-reduce:hidden"
+            ),
+            style: {
+              // Spotlight color is a DERIVED tint of the --primary token (not a raw
+              // literal), so it stays theme-correct in every theme without a new
+              // token. `color-mix` keeps it ~12% primary over transparent.
+              background: "radial-gradient(400px circle at var(--bento-x, 50%) var(--bento-y, 50%), color-mix(in oklch, var(--primary) 12%, transparent), transparent 70%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative z-20 flex min-w-0 flex-1 flex-col", children })
+      ]
+    }
+  );
+});
+
+export {
+  BentoGrid,
+  bentoGridItemVariants,
+  BentoGridItem
+};
+//# sourceMappingURL=chunk-BM6NGS3A.js.map

package/dist/chunk-BM6NGS3A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/bento-grid/bento-grid.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * BentoGrid + BentoGridItem — a hover-elevation bento layout.\n *\n * A responsive dense CSS-grid container. **The default separation gesture is\n * ELEVATION, not colour:** the grid rests flat (`shadow-none` — border only) and\n * each tile rises ~4px into `shadow-xl` with a brand-tinted edge on hover, so the\n * tile under the pointer clearly separates from the sheet.\n *\n * The cursor-following **spotlight is OPT-IN** (`spotlight`, default `false`) —\n * set it on the `BentoGrid` to enable it for every tile, or per tile to override\n * the grid. Its colour is a DERIVED tint of the `--primary` token\n * (`color-mix(in oklch, var(--primary) 12%, transparent)`), so it stays\n * theme-correct in every theme with no raw colors and no extra token. Under OS\n * reduced-motion the spotlight is suppressed entirely (`motion-reduce:hidden`);\n * tiles still respond to hover/focus with their normal card states.\n *\n * Key design choices:\n * - `BentoGridItem` composes `Card` (inherits card surface/border/radius) and\n *   then overrides the resting `shadow-sm` down to `shadow-none`.\n * - Under reduced motion the travel is neutralized and the transition dropped —\n *   the shadow and the edge still state the hover (\"reduced != none\").\n * - Spans are inline `grid-column/grid-row` and collapse to one cell on the\n *   1-column mobile grid (the browser caps a span at the available tracks).\n * - The tile is presentational; for a clickable tile, place an interactive inner\n *   element (e.g. a stretched `<a className=\"absolute inset-0\">`) and set\n *   `interactive` so the tile shows a `focus-within` ring.\n * - The spotlight overlay is `pointer-events-none` + `aria-hidden` (decorative).\n * - Motion is gated via `duration-base` / `ease-standard` (token-backed).\n */\n\nimport {\n  createContext,\n  forwardRef,\n  use,\n  useEffect,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\nimport { cardVariants } from \"../card/card\";\n\n// ---------------------------------------------------------------------------\n// Context — the grid hands its spotlight default down to every tile so a whole\n// bento can opt in with ONE prop instead of repeating it on every child. A tile's\n// own `spotlight` prop always wins.\n// ---------------------------------------------------------------------------\n\nconst BentoGridContext = createContext<{ spotlight: boolean }>({ spotlight: false });\n\n// ---------------------------------------------------------------------------\n// BentoGrid\n// ---------------------------------------------------------------------------\n\nexport interface BentoGridProps extends HTMLAttributes<HTMLDivElement> {\n  /** Additional className merged via cn(). */\n  className?: string;\n  /**\n   * Enable the cursor-following spotlight on every tile in this grid. Individual\n   * tiles can still opt out (or in) with their own `spotlight` prop. Disabled\n   * entirely under OS `prefers-reduced-motion` regardless of this prop.\n   * @default false\n   */\n  spotlight?: boolean;\n}\n\n/**\n * Responsive CSS-grid container.\n * - 1 column on mobile, 2 on sm, 4 on lg.\n * - `grid-auto-flow: dense` fills in gaps left by spanning tiles.\n * - `auto-rows-[14rem]` gives a baseline row height (14rem ≈ 224px); tiles can\n *   span multiple rows via the `size` / `span.row` API.\n * - Carries the grid-wide `spotlight` default for its tiles (opt-in).\n */\nexport const BentoGrid = forwardRef<HTMLDivElement, BentoGridProps>(function BentoGrid(\n  { className, spotlight = false, children, ...props },\n  ref,\n) {\n  return (\n    <BentoGridContext value={{ spotlight }}>\n      <div\n        ref={ref}\n        data-slot=\"bento-grid\"\n        className={cn(\n          \"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n          \"[grid-auto-flow:dense]\",\n          \"auto-rows-[14rem]\",\n          \"gap-4\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </BentoGridContext>\n  );\n});\n\n// ---------------------------------------------------------------------------\n// BentoGridItem — size / span presets\n// ---------------------------------------------------------------------------\n\n/**\n * Size preset → [colSpan, rowSpan].\n *\n * | size  | cols | rows | purpose                                                    |\n * |-------|------|------|------------------------------------------------------------|\n * | sm    |  1   |  1   | Supporting: compact metric or icon tile                    |\n * | md    |  2   |  1   | Supporting: wider but single-row                           |\n * | lg    |  2   |  2   | Featured: 2×2 block                                        |\n * | hero  |  2   |  2   | Hero: 2×2 + gradient emphasis wash                         |\n *\n * On a 1-column layout (mobile) ALL col spans clamp to 1 automatically via\n * CSS `min()` in `gridColumn`. Row spans are always honoured.\n */\nexport type BentoGridSize = \"sm\" | \"md\" | \"lg\" | \"hero\";\n\nconst SIZE_SPANS: Record<BentoGridSize, { col: number; row: number }> = {\n  sm: { col: 1, row: 1 },\n  md: { col: 2, row: 1 },\n  lg: { col: 2, row: 2 },\n  hero: { col: 2, row: 2 },\n};\n\n// cva for the item's structural/visual axes (NOT size — span is applied via\n// inline style so it collapses correctly on mobile without media-query gymnastics).\nexport const bentoGridItemVariants = cva(\n  [\n    // Base: compose Card surface (bg-card border rounded-lg shadow-sm).\n    cardVariants({ interactive: false }),\n    // Overflow hidden so content + spotlight overlay stay within rounded corners.\n    \"relative overflow-hidden\",\n    // Flex column layout for slot content.\n    \"flex flex-col\",\n    // Ensure long unbroken strings can't overflow the tile.\n    \"min-w-0 break-words\",\n    // ELEVATION IS THE HOVER GESTURE. The grid rests FLAT — `shadow-none` beats\n    // the `shadow-sm` inherited from `cardVariants` (tailwind-merge, later wins)\n    // so a bento sheet reads as one plane, not a field of lifted chips. On hover\n    // the single tile under the pointer rises to `shadow-lg`, a stacked rung of\n    // the ONE elevation ramp (never a hand-rolled box-shadow). The rung is\n    // `hover:`-prefixed, so pairing it with the card border is the sanctioned\n    // \"bordered card, hover lift\" shape, not the flagged double edge.\n    \"shadow-none hover:shadow-xl\",\n    // Shadow alone is a LIGHT-theme signal: the ramp's ink is black, so on a dark\n    // ground even `shadow-xl` is faint (measured on `theme:dark` — the hovered tile\n    // was hard to pick out). The hover EDGE carries the lift there. It is\n    // `ring/40`, the same tint `Card interactive` uses — NOT `border-strong`, which\n    // is a near-charcoal 0.65 L against a 0.88 L resting border and reads as a hard\n    // outline snapping on, not as a lift. At 40% the brand hue stays a soft warm\n    // edge on white and a clearly brighter one on charcoal.\n    \"hover:border-ring/40\",\n    // A lift you can SEE: ~4px of travel. Below ~16px a slide is a flicker, but a\n    // hover-lift is the exception the motion guidelines size at ≥4px — and the\n    // travel, not the duration, is what makes the elevation legible.\n    \"hover:-translate-y-1 motion-reduce:hover:translate-y-0\",\n    // `ease-entrance` (easeOutQuint) — a near-zero arrival velocity is the #1\n    // smoothness lever; `ease-standard` snaps at the end. Duration stays at the\n    // 260ms `base` rung: lengthening it does NOT fix abruptness. Under OS\n    // reduced-motion the travel is neutralized and the transition is dropped, so\n    // the shadow + edge still state the hover without any movement.\n    \"transition-[translate,box-shadow,border-color] duration-base ease-entrance motion-reduce:transition-none\",\n  ].join(\" \"),\n  {\n    variants: {\n      /** Hero tile gets a subtle gradient wash to distinguish it from supporting tiles. */\n      hero: {\n        true: \"bg-gradient-to-br from-primary/8 to-card\",\n        false: \"\",\n      },\n      /**\n       * Interactive tiles (those holding a clickable inner element, e.g. a\n       * stretched link) get a pointer cursor and a `focus-within` ring so keyboard\n       * focus on the inner control is visible on the whole tile. The hover lift\n       * (elevation + edge) is on the base — every tile lifts, clickable or not.\n       */\n      interactive: {\n        true: \"cursor-pointer focus-ring-within\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { hero: false, interactive: false },\n  },\n);\n\nexport type BentoGridItemVariants = VariantProps<typeof bentoGridItemVariants>;\n\nexport interface BentoGridItemProps extends HTMLAttributes<HTMLDivElement>, BentoGridItemVariants {\n  /**\n   * Size preset. Resolves to a col + row span. Overridden by explicit `span`.\n   * @default \"sm\"\n   */\n  size?: BentoGridSize;\n  /**\n   * Explicit grid span. Wins over `size`. Spans clamp gracefully on narrow\n   * layouts — a `col: 4` on a 2-col grid becomes `span min(4, 2)`.\n   */\n  span?: { col?: number; row?: number };\n  /**\n   * Enable the cursor-following spotlight gradient on this tile. Omit to inherit\n   * the parent `BentoGrid`'s `spotlight` (itself `false` by default) — so the\n   * effect is opt-in, per grid or per tile. Disabled entirely under OS\n   * `prefers-reduced-motion` regardless of this prop.\n   * @default false (inherited from BentoGrid)\n   */\n  spotlight?: boolean;\n}\n\n/**\n * A single bento tile. Composes `Card`, rests flat, lifts to `shadow-lg` on\n * hover, and adds the OPT-IN spotlight overlay.\n *\n * Spotlight:\n * - Sets `--bento-x` / `--bento-y` CSS custom properties on `onMouseMove`\n *   via a direct style set (no layout reads in render — uses\n *   `getBoundingClientRect` in the event handler only, never during paint).\n * - An absolutely-positioned `pointer-events-none aria-hidden` overlay paints\n *   `radial-gradient(… at var(--bento-x) var(--bento-y), color-mix(--primary), transparent)`.\n * - Revealed on hover via opacity transition gated by `duration-base ease-standard`.\n * - Suppressed with `motion-reduce:hidden` — cursor-following IS motion.\n */\nexport const BentoGridItem = forwardRef<HTMLDivElement, BentoGridItemProps>(function BentoGridItem(\n  { size = \"sm\", span, spotlight, hero, interactive, className, style, children, ...props },\n  ref,\n) {\n  const tileRef = useRef<HTMLDivElement>(null);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  // Own prop wins; otherwise inherit the grid's opt-in (default false).\n  const spotlightOn = spotlight ?? use(BentoGridContext).spotlight;\n\n  // Resolve spans: explicit span wins over size preset.\n  const resolvedCol = span?.col ?? SIZE_SPANS[size].col;\n  const resolvedRow = span?.row ?? SIZE_SPANS[size].row;\n\n  const isInteractive = interactive ?? false;\n\n  // isHero: explicit prop or size === \"hero\".\n  const isHero = hero ?? size === \"hero\";\n\n  // rAF ref so we only schedule one frame at a time.\n  const rafRef = useRef<number>(0);\n\n  // Cancel a pending frame on unmount — otherwise a mouse move right before\n  // the tile unmounts (removed from the grid while hovered) still fires the\n  // scheduled callback after teardown.\n  useEffect(() => {\n    return () => {\n      if (rafRef.current) cancelAnimationFrame(rafRef.current);\n    };\n  }, []);\n\n  const handleMouseMove = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!spotlightOn || !tileRef.current || !overlayRef.current) return;\n      // Cancel pending rAF to debounce rapid moves.\n      if (rafRef.current) cancelAnimationFrame(rafRef.current);\n      rafRef.current = requestAnimationFrame(() => {\n        if (!tileRef.current || !overlayRef.current) return;\n        const rect = tileRef.current.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n        // Direct style mutation — no React render cycle.\n        tileRef.current.style.setProperty(\"--bento-x\", `${x}px`);\n        tileRef.current.style.setProperty(\"--bento-y\", `${y}px`);\n        overlayRef.current.style.opacity = \"1\";\n      });\n    },\n    [spotlightOn],\n  );\n\n  const handleMouseLeave = useCallback(() => {\n    if (!overlayRef.current) return;\n    overlayRef.current.style.opacity = \"0\";\n  }, []);\n\n  // Grid span via inline style. On mobile (grid-cols-1) a col-span of any value\n  // is effectively clamped to 1 by the grid itself — a 4-col tile in a 1-col\n  // grid still renders in one cell. Row spans are always honoured as-is.\n  // We use `gridColumn: \"span N / span N\"` which the browser safely caps at the\n  // available track count; no CSS min() with custom-property arithmetic needed.\n  const gridStyle: CSSProperties = {\n    gridColumn: resolvedCol > 1 ? `span ${resolvedCol} / span ${resolvedCol}` : undefined,\n    gridRow: resolvedRow > 1 ? `span ${resolvedRow} / span ${resolvedRow}` : undefined,\n    ...style,\n  };\n\n  // Merge the forwarded ref and the internal tileRef into one callback ref.\n  const mergedRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      (tileRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }\n    },\n    [ref],\n  );\n\n  return (\n    <div\n      ref={mergedRef as React.Ref<HTMLDivElement>}\n      className={cn(\n        bentoGridItemVariants({\n          hero: isHero,\n          interactive: isInteractive,\n        }),\n        className,\n      )}\n      style={gridStyle}\n      data-slot=\"bento-grid-item\"\n      onMouseMove={handleMouseMove}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n    >\n      {/* Spotlight overlay — OPT-IN, decorative, pointer-events-none, aria-hidden.\n            Hidden in full under reduced-motion (the cursor-following IS the motion).\n            Color is a color-mix tint of --primary (token-derived, no raw color). */}\n      {spotlightOn && (\n        <div\n          ref={overlayRef}\n          aria-hidden=\"true\"\n          data-testid=\"bento-spotlight\"\n          className={cn(\n            \"pointer-events-none absolute inset-0 z-10\",\n            \"opacity-0 transition-opacity duration-base ease-standard\",\n            // Suppress entirely under reduced-motion (cursor tracking = motion).\n            \"motion-reduce:hidden\",\n          )}\n          style={{\n            // Spotlight color is a DERIVED tint of the --primary token (not a raw\n            // literal), so it stays theme-correct in every theme without a new\n            // token. `color-mix` keeps it ~12% primary over transparent.\n            background:\n              \"radial-gradient(400px circle at var(--bento-x, 50%) var(--bento-y, 50%), color-mix(in oklch, var(--primary) 12%, transparent), transparent 70%)\",\n          }}\n        />\n      )}\n      {/* Tile content — min-w-0 on inner wrapper prevents flex children from\n            overflowing on long unbroken strings (the silent truncation culprit). */}\n      <div className=\"relative z-20 flex min-w-0 flex-1 flex-col\">{children}</div>\n    </div>\n  );\n});\n"],"mappings":"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","names":["BentoGrid","BentoGridItem"]}