@arcadeai/design-system 4.1.0 → 5.0.0

package/dist/components/ui/molecules/scroll-fade-area.d.ts

@@ -1,32 +0,0 @@
-import { ReactNode } from 'react';
-export type ScrollFadeAreaProps = {
-    children: ReactNode;
-    /** Classes for the outer sizing context. Defaults fill a flex column. */
-    className?: string;
-    /** Classes for the inner scroll viewport (padding, child spacing). */
-    viewportClassName?: string;
-    /**
-     * Receives the scroll viewport element (or `null` on unmount). Use when a
-     * child needs the scroll container itself — e.g. a virtualizer that reads
-     * scroll position from it.
-     */
-    viewportRef?: (el: HTMLDivElement | null) => void;
-};
-/**
- * Vertical scroll area with "there's more" affordances on whichever edge still
- * has hidden content: a fade-to-background gradient plus a soft inset shadow.
- * Both appear per edge and only when that edge can actually scroll.
- *
- * This draws gradient overlays from `useScrollFade`'s `edges` rather than
- * spreading the hook's `maskImage` style. A mask fades content to fully
- * transparent, which reads too strongly in dark mode; gradient overlays fade to
- * the surface color and let us dial the intensity per theme (see the
- * `dark:from-background/40` stops below). Horizontal scrollers that want the
- * lighter mask treatment should consume `useScrollFade("x").style` directly.
- *
- * The overlays fade to the `background` token, so place this on a
- * background-colored surface; on a `card`/`muted` surface the gradient seams.
- * Such callers want the mask treatment instead.
- */
-export declare function ScrollFadeArea({ children, className, viewportClassName, viewportRef, }: ScrollFadeAreaProps): import("react").JSX.Element;
-//# sourceMappingURL=scroll-fade-area.d.ts.map

package/dist/components/ui/molecules/scroll-fade-area.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"scroll-fade-area.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/molecules/scroll-fade-area.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAI5D,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,WAAW,GACZ,EAAE,mBAAmB,+BAkDrB"}

package/dist/components/ui/molecules/scroll-fade-area.js

@@ -1,30 +0,0 @@
-"use client";
-"use client";
-import { cn as e } from "../../../lib/utils.js";
-import { useScrollFade as t } from "../../../hooks/use-scroll-fade.js";
-import { useCallback as n, useRef as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region lib/components/ui/molecules/scroll-fade-area.tsx
-function o({ children: o, className: s, viewportClassName: c, viewportRef: l }) {
-	let u = t("y"), d = r(l);
-	d.current = l;
-	let f = n((e) => {
-		u.ref(e), d.current?.(e);
-	}, [u.ref]), p = [u.edges.start && "inset 0 8px 12px -10px color-mix(in oklch, var(--shadow-color) 3%, transparent)", u.edges.end && "inset 0 -12px 16px -10px color-mix(in oklch, var(--shadow-color) 6%, transparent)"].filter(Boolean).join(", ") || void 0;
-	return /* @__PURE__ */ a("div", {
-		className: e("relative min-h-0 flex-1", s),
-		children: [
-			u.edges.start ? /* @__PURE__ */ i("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-10 h-8 bg-gradient-to-b from-background to-transparent dark:from-background/40" }) : null,
-			u.edges.end ? /* @__PURE__ */ i("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-10 bg-gradient-to-t from-background to-transparent dark:from-background/40" }) : null,
-			/* @__PURE__ */ i("div", {
-				className: e("h-full overflow-y-auto transition-shadow duration-200", c),
-				onScroll: u.onScroll,
-				ref: f,
-				style: { boxShadow: p },
-				children: o
-			})
-		]
-	});
-}
-//#endregion
-export { o as ScrollFadeArea };

package/dist/hooks/use-scroll-fade.d.ts

@@ -1,22 +0,0 @@
-/**
- * Fades the edge(s) of a scroll container that still have hidden content, via a
- * dynamic mask-image — a lightweight "there's more" hint with no extra DOM.
- * Works on either axis and only fades an edge you can actually scroll toward.
- * Attach `ref` + `onScroll` to the scrollable element and spread `style`.
- *
- * Also returns `edges` ({ start, end }) for callers that want to draw their own
- * edge affordance (e.g. a shadow) only when there is hidden content.
- */
-export declare function useScrollFade(axis: "x" | "y"): {
-    ref: (el: HTMLDivElement | null) => void;
-    onScroll: () => void;
-    edges: {
-        start: boolean;
-        end: boolean;
-    };
-    style: {
-        maskImage: string;
-        WebkitMaskImage: string;
-    } | undefined;
-};
-//# sourceMappingURL=use-scroll-fade.d.ts.map

package/dist/hooks/use-scroll-fade.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-scroll-fade.d.ts","sourceRoot":"","sources":["../../lib/hooks/use-scroll-fade.ts"],"names":[],"mappings":"AAMA;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,GAAG,GAAG;cA+CpC,cAAc,GAAG,IAAI;;;;;;;;;;EAuC7B"}

package/dist/hooks/use-scroll-fade.js

@@ -1,39 +0,0 @@
-"use client";
-"use client";
-import { useCallback as e, useRef as t, useState as n } from "react";
-//#region lib/hooks/use-scroll-fade.ts
-var r = 24;
-function i(i) {
-	let [a, o] = n({
-		start: !1,
-		end: !1
-	}), s = t(null), c = t(null), l = t(null), u = e(() => {
-		let e = s.current;
-		if (!e) return;
-		let t = i === "x" ? e.scrollLeft : e.scrollTop, n = i === "x" ? e.clientWidth : e.clientHeight, r = i === "x" ? e.scrollWidth : e.scrollHeight, a = t > 1, c = t + n < r - 1;
-		o((e) => e.start === a && e.end === c ? e : {
-			start: a,
-			end: c
-		});
-	}, [i]), d = e(() => {
-		let e = s.current, t = c.current;
-		if (e && t) {
-			t.disconnect(), t.observe(e);
-			for (let n of Array.from(e.children)) t.observe(n);
-			u();
-		}
-	}, [u]), f = e((e) => {
-		c.current?.disconnect(), l.current?.disconnect(), c.current = null, l.current = null, s.current = e, e && (c.current = new ResizeObserver(() => u()), l.current = new MutationObserver(() => d()), l.current.observe(e, { childList: !0 }), d());
-	}, [u, d]), p;
-	return (a.start || a.end) && (p = `linear-gradient(${i === "x" ? "to right" : "to bottom"}, ${a.start ? `transparent 0, black ${r}px` : "black 0"}, ${a.end ? `black calc(100% - ${r}px), transparent 100%` : "black 100%"})`), {
-		ref: f,
-		onScroll: u,
-		edges: a,
-		style: p ? {
-			maskImage: p,
-			WebkitMaskImage: p
-		} : void 0
-	};
-}
-//#endregion
-export { i as useScrollFade };