@stll/ui 0.50.0 → 0.50.2

package/dist/components/horizontal-scroller.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+//#region src/components/horizontal-scroller.d.ts
+type ScrollDirection = "ltr" | "rtl";
+type HorizontalScrollerProps = ComponentProps<"div"> & {
+  nextLabel: string;
+  previousLabel: string;
+  /** Lays out the items: the row that may grow wider than the viewport. */
+  contentClassName?: string;
+  viewportClassName?: string;
+};
+type ScrollState = {
+  canScrollEnd: boolean;
+  canScrollStart: boolean;
+};
+export declare const HorizontalScroller: ({ children, className, nextLabel, previousLabel, contentClassName, viewportClassName, ...props }: HorizontalScrollerProps) => import("react").JSX.Element;
+export declare const scrollState: (scrollLeft: number, scrollWidth: number, clientWidth: number, direction: ScrollDirection) => ScrollState;
+/** Wheel deltas arrive in pixels, lines or pages; scrollBy takes pixels. */
+export declare const wheelDeltaPixels: (event: Pick<WheelEvent, "deltaMode" | "deltaY">, node: Pick<HTMLElement, "clientWidth">) => number;
+//#endregion

package/dist/components/horizontal-scroller.js

@@ -0,0 +1,112 @@
+"use client";
+import { ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
+import { cn } from "../lib/utils.js";
+import { containedEventHandler } from "../hooks/use-contained-handler.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+//#region src/components/horizontal-scroller.tsx
+const CONTROL_CLASS = "bg-background/90 text-foreground absolute top-1/2 -translate-y-1/2 rounded-full border p-1 shadow-sm";
+const HorizontalScroller = ({ children, className, nextLabel, previousLabel, contentClassName, viewportClassName, ...props }) => {
+	const [viewport, setViewport] = useState(null);
+	const [state, setState] = useState({
+		canScrollEnd: false,
+		canScrollStart: false
+	});
+	const measure = useCallback((node) => {
+		setState(scrollState(node.scrollLeft, node.scrollWidth, node.clientWidth, getComputedStyle(node).direction === "rtl" ? "rtl" : "ltr"));
+	}, []);
+	const viewportRef = useCallback((node) => {
+		setViewport(node);
+		if (!node) return;
+		const observer = new ResizeObserver(() => measure(node));
+		observer.observe(node);
+		if (node.firstElementChild !== null) observer.observe(node.firstElementChild);
+		measure(node);
+		const onWheel = (event) => {
+			if (event.ctrlKey || event.deltaX !== 0 || event.deltaY === 0 || node.scrollWidth <= node.clientWidth) return;
+			const rtl = getComputedStyle(node).direction === "rtl";
+			const { canScrollEnd, canScrollStart } = scrollState(node.scrollLeft, node.scrollWidth, node.clientWidth, rtl ? "rtl" : "ltr");
+			if (event.deltaY > 0 ? !canScrollEnd : !canScrollStart) return;
+			event.preventDefault();
+			const delta = wheelDeltaPixels(event, node);
+			node.scrollBy({ left: rtl ? -delta : delta });
+		};
+		node.addEventListener("wheel", onWheel, { passive: false });
+		return () => {
+			observer.disconnect();
+			node.removeEventListener("wheel", onWheel);
+		};
+	}, [measure]);
+	const scroll = (inlineDirection) => {
+		if (!viewport) return;
+		const rtl = getComputedStyle(viewport).direction === "rtl";
+		viewport.scrollBy({
+			behavior: "smooth",
+			left: viewport.clientWidth * .8 * inlineDirection * (rtl ? -1 : 1)
+		});
+	};
+	const onScroll = (event) => measure(event.currentTarget);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative min-w-0", className),
+		onFocus: containedEventHandler(({ target }) => {
+			if (target instanceof HTMLElement && target !== viewport) target.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		}),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn("scrollbar-subtle overflow-x-auto overscroll-x-contain", viewportClassName),
+				onScroll,
+				ref: viewportRef,
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("w-max min-w-full", contentClassName),
+					children
+				})
+			}),
+			state.canScrollStart && /* @__PURE__ */ jsx("div", { className: "from-background pointer-events-none absolute inset-y-0 start-0 w-10 bg-linear-to-r to-transparent rtl:bg-linear-to-l" }),
+			state.canScrollEnd && /* @__PURE__ */ jsx("div", { className: "from-background pointer-events-none absolute inset-y-0 end-0 w-10 bg-linear-to-l to-transparent rtl:bg-linear-to-r" }),
+			(state.canScrollStart || state.canScrollEnd) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+				"aria-disabled": !state.canScrollStart,
+				tabIndex: state.canScrollStart ? void 0 : -1,
+				"aria-label": previousLabel,
+				className: cn(CONTROL_CLASS, "start-1", !state.canScrollStart && "pointer-events-none opacity-0 focus-visible:opacity-100"),
+				onClick: () => {
+					if (state.canScrollStart) scroll(-1);
+				},
+				type: "button",
+				children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4 rtl:rotate-180" })
+			}), /* @__PURE__ */ jsx("button", {
+				"aria-disabled": !state.canScrollEnd,
+				tabIndex: state.canScrollEnd ? void 0 : -1,
+				"aria-label": nextLabel,
+				className: cn(CONTROL_CLASS, "end-1", !state.canScrollEnd && "pointer-events-none opacity-0 focus-visible:opacity-100"),
+				onClick: () => {
+					if (state.canScrollEnd) scroll(1);
+				},
+				type: "button",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 rtl:rotate-180" })
+			})] })
+		]
+	});
+};
+const scrollState = (scrollLeft, scrollWidth, clientWidth, direction) => {
+	const maximum = Math.max(0, scrollWidth - clientWidth);
+	const position = direction === "rtl" ? Math.abs(scrollLeft) : scrollLeft;
+	return {
+		canScrollStart: maximum > 1 && position > 1,
+		canScrollEnd: maximum > 1 && position < maximum - 1
+	};
+};
+const LINE_HEIGHT_PX = 16;
+/** Wheel deltas arrive in pixels, lines or pages; scrollBy takes pixels. */
+const wheelDeltaPixels = (event, node) => {
+	switch (event.deltaMode) {
+		case WheelEvent.DOM_DELTA_LINE: return event.deltaY * LINE_HEIGHT_PX;
+		case WheelEvent.DOM_DELTA_PAGE: return event.deltaY * node.clientWidth;
+		default: return event.deltaY;
+	}
+};
+//#endregion
+export { HorizontalScroller, scrollState, wheelDeltaPixels };

package/dist/components/landing.js

@@ -91,7 +91,7 @@ const LandingItemText = ({ icon, iconTone = "muted", meta, title }) => /* @__PUR
 	})]
 });
 const LandingRowIcon = ({ children, tone = "muted" }) => /* @__PURE__ */ jsx("span", {
-	className: cn("mt-0.5 flex size-4 shrink-0 items-center justify-center", tone === "muted" && "text-foreground-muted group-hover:text-muted-foreground"),
+	className: cn("mt-0.5 flex min-h-4 min-w-4 shrink-0 items-center justify-center", tone === "muted" && "text-foreground-muted group-hover:text-muted-foreground"),
 	children
 });
 const LandingEmpty = ({ children }) => /* @__PURE__ */ jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.50.0",
+  "version": "0.50.2",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",
@@ -321,6 +321,10 @@
       "types": "./dist/components/scroll-area.d.ts",
       "import": "./dist/components/scroll-area.js"
     },
+    "./horizontal-scroller": {
+      "types": "./dist/components/horizontal-scroller.d.ts",
+      "import": "./dist/components/horizontal-scroller.js"
+    },
     "./scroll-to-top": {
       "types": "./dist/components/scroll-to-top.d.ts",
       "import": "./dist/components/scroll-to-top.js"
@@ -606,6 +610,10 @@
       "types": "./dist/components/scroll-area.d.ts",
       "import": "./dist/components/scroll-area.js"
     },
+    "./components/horizontal-scroller": {
+      "types": "./dist/components/horizontal-scroller.d.ts",
+      "import": "./dist/components/horizontal-scroller.js"
+    },
     "./components/scroll-to-top": {
       "types": "./dist/components/scroll-to-top.d.ts",
       "import": "./dist/components/scroll-to-top.js"