@kanso-labs/kanso-ui 0.37.0 → 0.38.0

package/dist/components/carousel/index.js

@@ -0,0 +1,395 @@
+"use client";
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { radii } from "../../tokens/design.tokens.stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
+import { ChevronEndGlyph } from "../../glyphs/index.js";
+import { focus } from "../../styles/focus.js";
+import { useMessages } from "../../i18n/index.js";
+import { arrange, placements } from "../../carousel/arrangement.js";
+import IconButton from "../icon-button/index.js";
+import { c } from "react/compiler-runtime";
+import { Children, createContext, isValidElement, useContext, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/carousel/index.tsx
+/** The page's 16dp at a carousel's ends. */
+const PADDING = 16;
+const DEFAULT_ITEM_SIZE = 240;
+const styles = {
+	item: {
+		kaIpWk: "x19pkqky",
+		kB7OPa: "x9f619",
+		kzQI83: "x1c4vz4f",
+		kmuXW: "x2lah0s",
+		kAzted: "x2lwn1j",
+		kVQacm: "xb3r6kr",
+		kVAEAm: "x1n2onr6",
+		$$css: true
+	},
+	itemUncontained: {
+		k5xd4v: "x1bhewko",
+		$$css: true
+	},
+	marker: {
+		kmuXW: "x2lah0s",
+		k5xd4v: "x83psoy",
+		$$css: true
+	},
+	scroller: {
+		kOuLrU: "xfk6m8",
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		kXHlph: "xw2csxc",
+		kORKVm: "x10wlt62",
+		kvh3hx: "x7p5m3t",
+		kVAEAm: "x1n2onr6",
+		k5wCbM: "x1rohswg",
+		khEr5k: "xkcv6ua xg83hb1",
+		kc424l: "xhfbhpw",
+		$$css: true
+	},
+	scrollerUncontained: {
+		katHQp: "x7jkkja",
+		$$css: true
+	}
+};
+const _temp = {
+	kzqmXN: "x1uyokj7",
+	"$$css": true
+};
+const _temp2 = {
+	kzqmXN: "x1uyokj7",
+	"$$css": true
+};
+const _temp3 = {
+	kzqmXN: "x1uyokj7",
+	"$$css": true
+};
+const placed = {
+	item: (inlineSize, shift, clip) => [
+		_temp,
+		{
+			kz4h6p: clip != null ? "xx58lst" : clip,
+			kLqNvP: shift != null ? "x1lxsm33" : shift,
+			$$css: true
+		},
+		{
+			"--x-clipPath": clip != null ? clip : void 0,
+			"--x-inlineSize": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(inlineSize),
+			"--x-insetInlineStart": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(shift)
+		}
+	],
+	marker: (inlineSize) => [_temp2, { "--x-inlineSize": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(inlineSize) }],
+	uncontained: (inlineSize) => [_temp3, { "--x-inlineSize": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(inlineSize) }]
+};
+const SlotContext = createContext(null);
+function along(direction, { end, masked, scrolled, step }) {
+	if (step <= 0) return 0;
+	const offset = masked ? (Math.round(scrolled / step) + direction) * step : scrolled + direction * step;
+	return Math.min(Math.max(offset, 0), end);
+}
+/**
+* A row of items that scrolls on and off the screen, in the carousel page's
+* multi-browse, hero or uncontained layout. Name it with `label`, and give it
+* a `Carousel.Item` for each item.
+*
+* ```tsx
+* <Carousel label="Label">
+*   <Carousel.Item><img alt="First item" src="…" /></Carousel.Item>
+*   <Carousel.Item><img alt="Second item" src="…" /></Carousel.Item>
+* </Carousel>
+* ```
+*
+* The call site's `className` and `style` land on the carousel as a whole,
+* which is the element a layout positions.
+*/
+function Carousel(t0) {
+	const $ = c(40);
+	const { children, itemSize: t1, label, layout: t2, nextLabel, previousLabel, ref, ...props$2 } = t0;
+	const itemSize = t1 === void 0 ? DEFAULT_ITEM_SIZE : t1;
+	const layout = t2 === void 0 ? "multi-browse" : t2;
+	const messages = useMessages();
+	const scrollerRef = useRef(null);
+	const [width, setWidth] = useState(0);
+	const [scrolled, setScrolled] = useState(0);
+	const items = Children.toArray(children).filter(isValidElement);
+	const count = items.length;
+	const room = Math.max(width - 32, 0);
+	const arrangement = arrange(layout, room, itemSize, count);
+	const masked = layout !== "uncontained";
+	const step = arrangement.large + 8;
+	const end = masked ? arrangement.steps * step : Math.max(count * step - 8 + 32 - width, 0);
+	const lastLarge = arrangement.largeCount - 1;
+	const position = masked && step > 0 ? scrolled / step : 0;
+	const drawn = masked ? placements(layout, arrangement, room, PADDING, count, position) : [];
+	let t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => {
+			const scroller = scrollerRef.current;
+			if (scroller === null) return;
+			setWidth(scroller.clientWidth);
+			setScrolled(Math.abs(scroller.scrollLeft));
+		};
+		$[0] = t3;
+	} else t3 = $[0];
+	const measure = t3;
+	let t4;
+	let t5;
+	if ($[1] !== measure) {
+		t4 = () => {
+			const scroller_0 = scrollerRef.current;
+			if (scroller_0 === null) return;
+			measure();
+			const observer = new ResizeObserver(measure);
+			observer.observe(scroller_0);
+			return () => {
+				observer.disconnect();
+			};
+		};
+		t5 = [measure];
+		$[1] = measure;
+		$[2] = t4;
+		$[3] = t5;
+	} else {
+		t4 = $[2];
+		t5 = $[3];
+	}
+	useLayoutEffect(t4, t5);
+	let t6;
+	if ($[4] !== end || $[5] !== lastLarge || $[6] !== masked || $[7] !== scrolled || $[8] !== step) {
+		t6 = () => {
+			const geometry = {
+				end,
+				lastLarge,
+				masked,
+				scrolled,
+				step
+			};
+			scrollAlong(scrollerRef.current, along(-1, geometry));
+		};
+		$[4] = end;
+		$[5] = lastLarge;
+		$[6] = masked;
+		$[7] = scrolled;
+		$[8] = step;
+		$[9] = t6;
+	} else t6 = $[9];
+	const previous = t6;
+	let t7;
+	if ($[10] !== end || $[11] !== lastLarge || $[12] !== masked || $[13] !== scrolled || $[14] !== step) {
+		t7 = () => {
+			const geometry_0 = {
+				end,
+				lastLarge,
+				masked,
+				scrolled,
+				step
+			};
+			scrollAlong(scrollerRef.current, along(1, geometry_0));
+		};
+		$[10] = end;
+		$[11] = lastLarge;
+		$[12] = masked;
+		$[13] = scrolled;
+		$[14] = step;
+		$[15] = t7;
+	} else t7 = $[15];
+	const next = t7;
+	let t8;
+	if ($[16] !== end || $[17] !== lastLarge || $[18] !== masked || $[19] !== scrolled || $[20] !== step) {
+		t8 = (event) => {
+			const { target } = event;
+			if (!masked || step <= 0 || !(target instanceof Node)) return;
+			const index = Array.from(event.currentTarget.children).findIndex((child) => child.contains(target));
+			if (index < 0) return;
+			const offset = Math.min(restRevealing(index, {
+				end,
+				lastLarge,
+				masked,
+				scrolled,
+				step
+			}) * step, end);
+			scrollAlong(scrollerRef.current, offset);
+		};
+		$[16] = end;
+		$[17] = lastLarge;
+		$[18] = masked;
+		$[19] = scrolled;
+		$[20] = step;
+		$[21] = t8;
+	} else t8 = $[21];
+	const reveal = t8;
+	const slots = items.map((_, index_0) => ({
+		count,
+		index: index_0,
+		large: arrangement.large,
+		layout,
+		placement: drawn[index_0]
+	}));
+	const t9 = messages.carousel;
+	const t10 = mergeStyles({ className: "x9f619 x78zum5 xdt5ytf x126z3so xeuugli" }, props$2);
+	let t11;
+	if ($[22] !== masked) {
+		t11 = props(styles.scroller, focus.ring, !masked && styles.scrollerUncontained);
+		$[22] = masked;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== masked) {
+		t12 = masked ? /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "xjm9jq1 x1i1rx1s x13vifvy x1o0tod x47corl x10l6tqk x1bhewko"
+		}) : null;
+		$[24] = masked;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = {
+			0: { className: "x9f619 x78zum5 x2lah0s x126z3so x1cmllll x790zyz" },
+			1: { className: "x9f619 x78zum5 x2lah0s x126z3so x1cmllll x790zyz xh8yej3 x1o0tod x7giv3 x7wzq59" }
+		};
+		$[26] = t13;
+	} else t13 = $[26];
+	const t14 = previousLabel ?? messages.previousSlide;
+	const t15 = scrolled <= .5;
+	let t16;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(ChevronEndGlyph, { className: "xlzyvqe x1lliihq x15vhz18 x1pw7kks xpk2tj9" });
+		$[27] = t16;
+	} else t16 = $[27];
+	let t17;
+	if ($[28] !== previous || $[29] !== t14 || $[30] !== t15) {
+		t17 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t14,
+			isDisabled: t15,
+			onPress: previous,
+			children: t16
+		});
+		$[28] = previous;
+		$[29] = t14;
+		$[30] = t15;
+		$[31] = t17;
+	} else t17 = $[31];
+	const t18 = nextLabel ?? messages.nextSlide;
+	const t19 = scrolled >= end - .5;
+	let t20;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx(ChevronEndGlyph, { className: "xlzyvqe x1lliihq x15vhz18 x19axjrm x1c071of" });
+		$[32] = t20;
+	} else t20 = $[32];
+	let t21;
+	if ($[33] !== next || $[34] !== t18 || $[35] !== t19) {
+		t21 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t18,
+			isDisabled: t19,
+			onPress: next,
+			children: t20
+		});
+		$[33] = next;
+		$[34] = t18;
+		$[35] = t19;
+		$[36] = t21;
+	} else t21 = $[36];
+	let t22;
+	if ($[37] !== t17 || $[38] !== t21) {
+		t22 = /* @__PURE__ */ jsxs("div", {
+			className: "x9f619 x78zum5 x126z3so x13a6bvl x790zyz",
+			children: [t17, t21]
+		});
+		$[37] = t17;
+		$[38] = t21;
+		$[39] = t22;
+	} else t22 = $[39];
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": label,
+		"aria-roledescription": t9,
+		ref,
+		...props$2,
+		...t10,
+		children: [/* @__PURE__ */ jsxs("div", {
+			onScroll: measure,
+			ref: scrollerRef,
+			tabIndex: end > 0 ? 0 : void 0,
+			...t11,
+			children: [
+				t12,
+				/* @__PURE__ */ jsx("div", {
+					onFocus: reveal,
+					...t13[!!masked << 0],
+					children: items.map((item, index_1) => /* @__PURE__ */ jsx(SlotContext, {
+						value: slots[index_1] ?? null,
+						children: item
+					}, item.key ?? index_1))
+				}),
+				masked ? Array.from({ length: arrangement.steps }, (__0, rest) => /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					...props(styles.marker, placed.marker(`${step}px`))
+				}, rest)) : null
+			]
+		}), t22]
+	});
+}
+/**
+* One item. It is named by which of how many it is — "2 of 6" — unless it is
+* given an `aria-label` of its own.
+*
+* The call site's `className` and `style` land on the item.
+*/
+function CarouselItem(t0) {
+	const $ = c(11);
+	const { children, ref, ...props$1 } = t0;
+	const messages = useMessages();
+	const slot = useContext(SlotContext);
+	const count = slot?.count ?? 1;
+	const index = slot?.index ?? 0;
+	const large = slot?.large ?? 0;
+	const placement = slot?.placement;
+	const inset = placement === void 0 ? 0 : (large - placement.width) / 2;
+	let t1;
+	if ($[0] !== count || $[1] !== index || $[2] !== messages) {
+		t1 = messages.slideLabel(index + 1, count);
+		$[0] = count;
+		$[1] = index;
+		$[2] = messages;
+		$[3] = t1;
+	} else t1 = $[3];
+	const t2 = messages.slide;
+	const t3 = "group";
+	const t4 = mergeStyles(props(styles.item, slot?.layout === "uncontained" && styles.itemUncontained, slot?.layout === "uncontained" && placed.uncontained(`${large}px`), placement !== void 0 && placed.item(`${large}px`, `${placement.left - inset - index * (large + 8)}px`, `inset(0 ${inset}px round ${radii.xl})`)), props$1);
+	let t5;
+	if ($[4] !== children || $[5] !== messages.slide || $[6] !== props$1 || $[7] !== ref || $[8] !== t1 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			"aria-label": t1,
+			"aria-roledescription": t2,
+			ref,
+			role: t3,
+			...props$1,
+			...t4,
+			children
+		});
+		$[4] = children;
+		$[5] = messages.slide;
+		$[6] = props$1;
+		$[7] = ref;
+		$[8] = t1;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	return t5;
+}
+function restRevealing(index, { lastLarge, scrolled, step }) {
+	const at = Math.round(scrolled / step);
+	if (index < at) return index;
+	if (index > at + lastLarge) return index - lastLarge;
+	return at;
+}
+function scrollAlong(scroller, offset) {
+	if (scroller === null) return;
+	const sign = getComputedStyle(scroller).direction === "rtl" ? -1 : 1;
+	scroller.scrollTo({ left: sign * offset });
+}
+Carousel.Item = CarouselItem;
+//#endregion
+export { CarouselItem, Carousel as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","FocusEvent","HTMLAttributes","ReactNode","RefAttributes","stylex","Children","createContext","isValidElement","useCallback","useContext","useLayoutEffect","useRef","useState","CarouselLayout","Placement","arrange","GAP","placements","ChevronEndGlyph","useMessages","focus","mergeStyles","radii","spacing","IconButton","PADDING","DEFAULT_ITEM_SIZE","CarouselItemProps","Omit","HTMLDivElement","children","CarouselProps","HTMLElement","itemSize","label","layout","nextLabel","previousLabel","styles","item","kaIpWk","kB7OPa","kzQI83","kmuXW","kAzted","kVQacm","kVAEAm","$$css","itemUncontained","k5xd4v","marker","scroller","kOuLrU","k1xSpc","kXHlph","kORKVm","kvh3hx","k5wCbM","khEr5k","kc424l","scrollerUncontained","katHQp","_temp","kzqmXN","_temp2","_temp3","placed","inlineSize","shift","clip","kz4h6p","kLqNvP","undefined","val","uncontained","Slot","count","index","large","placement","SlotContext","Geometry","end","lastLarge","masked","scrolled","step","along","direction","offset","Math","round","min","max","Carousel","t0","$","t1","t2","ref","props","messages","scrollerRef","width","setWidth","setScrolled","items","toArray","filter","length","room","arrangement","steps","largeCount","position","drawn","t3","Symbol","for","current","clientWidth","abs","scrollLeft","measure","t4","t5","scroller_0","observer","ResizeObserver","observe","disconnect","t6","geometry","scrollAlong","previous","t7","geometry_0","next","t8","event","target","Node","Array","from","currentTarget","findIndex","child","contains","geometry_1","restRevealing","reveal","slots","map","_","index_0","t9","carousel","t10","className","t11","ring","t12","t13","0","1","t14","previousSlide","t15","t16","t17","t18","nextSlide","t19","t20","t21","t22","index_1","key","__0","rest","CarouselItem","slot","inset","slideLabel","slide","left","xl","at","sign","getComputedStyle","scrollTo","Item","_c","props","stylex.props"],"sources":["../../../src/components/carousel/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FocusEvent, HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { Children, createContext, isValidElement, useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';\nimport type { CarouselLayout, Placement } from '../../carousel/arrangement';\nimport { arrange, GAP, placements } from '../../carousel/arrangement';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useMessages } from '../../i18n';\nimport { focus } from '../../styles/focus';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { radii, spacing } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The carousel page's carousel: a row of items that scrolls on and off the\n// screen, drawn in three of the page's layouts. Each has the page's 16dp of\n// padding at its ends and 8dp at its top and bottom, 8dp between items and a\n// 28dp corner on every item.\n//\n// - **Multi-browse**, the default, shows as many large items as fit at\n//   `itemSize`, then a medium one and a small one, and fills its width\n//   exactly; the large width gives way where the preferred one does not fit.\n// - **Hero** shows one large item and one small.\n// - **Uncontained** shows every item at `itemSize`, scrolling past the edge.\n//\n// **Items change size as they move**, as the page draws them. The first two\n// layouts come to rest one item apart, and between two rests every item's\n// place and width are interpolated, so an item shrinks as it leaves and\n// grows as it arrives; the last rests turn the arrangement round a slot at a\n// time, so every item is drawn large at one of them. The arithmetic is\n// `src/carousel/arrangement.ts`.\n// An item is laid out at the large width and masked down to the width it is\n// drawn at, centred, with the page's corner on the mask: what it holds is\n// cut at both sides rather than squeezed, as the page's masked items are.\n//\n// **The scrolling is the browser's.** A scroller holds the items' track,\n// which stays put while it scrolls, and a run of empty markers one item\n// apart after it, which is what gives the scroller its length and its rests:\n// each marker's end is a scroll-snap point, and a mark at the scroller's\n// start is the first. The position the scroller reports is what the items\n// are drawn from. Uncontained has no rests and no masks, so its items scroll\n// in the track themselves, snapping to their own starts.\n//\n// **It is the ARIA carousel pattern**, since React Aria has no carousel: a\n// region named by `label` and described as a carousel, each item a group\n// described as a slide and named by which of how many it is, and a previous\n// and a next button under it, at the end. Focus moving into an item that is\n// not drawn large scrolls the carousel to the nearest rest that draws it\n// large, and the scroller is a tab stop while it scrolls, so the arrow keys\n// move it too. Under reduced motion the scroller jumps rather than scrolling\n// smoothly.\n//\n// The page's large width is \"dynamic, or user-set\", and neither MDC-Android\n// nor Compose has a default for it; `itemSize`'s 240 is this component's own.\n// Uncontained keeps the 16dp at its end as well as its start, where the page\n// gives it a leading padding alone, so its last item does not end flush\n// against the edge.\n\n/** The page's 16dp at a carousel's ends. */\nconst PADDING = 16;\nconst DEFAULT_ITEM_SIZE = 240;\ntype CarouselItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  /** What the item shows: usually an image, which the item masks. */\n  children?: ReactNode;\n};\ntype CarouselProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {\n  /** The items: `Carousel.Item` for each. */\n  children?: ReactNode;\n  /**\n   * The large item's preferred width, in pixels. Multi-browse lays out as\n   * many as fit and narrows them where they do not; uncontained draws every\n   * item at it; hero takes its large item's width from the carousel's.\n   * @default 240\n   */\n  itemSize?: number;\n  /**\n   * What the carousel shows, for a screen reader. Required rather than\n   * optional: a carousel is a region, and a region with no name is one a\n   * screen reader cannot introduce.\n   */\n  label: string;\n  /**\n   * Which of the page's layouts the carousel draws.\n   * @default 'multi-browse'\n   */\n  layout?: CarouselLayout;\n  /**\n   * What the next button is called. Left out, the library names it in the\n   * reader's locale — \"Next slide\" in English.\n   */\n  nextLabel?: string;\n  /**\n   * What the previous button is called. Left out, the library names it in\n   * the reader's locale — \"Previous slide\" in English.\n   */\n  previousLabel?: string;\n};\nconst styles = {\n  item: {\n    kaIpWk: \"x19pkqky\",\n    kB7OPa: \"x9f619\",\n    kzQI83: \"x1c4vz4f\",\n    kmuXW: \"x2lah0s\",\n    kAzted: \"x2lwn1j\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  itemUncontained: {\n    k5xd4v: \"x1bhewko\",\n    $$css: true\n  },\n  marker: {\n    kmuXW: \"x2lah0s\",\n    k5xd4v: \"x83psoy\",\n    $$css: true\n  },\n  scroller: {\n    kOuLrU: \"xfk6m8\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXHlph: \"xw2csxc\",\n    kORKVm: \"x10wlt62\",\n    kvh3hx: \"x7p5m3t\",\n    kVAEAm: \"x1n2onr6\",\n    k5wCbM: \"x1rohswg\",\n    khEr5k: \"xkcv6ua xg83hb1\",\n    kc424l: \"xhfbhpw\",\n    $$css: true\n  },\n  scrollerUncontained: {\n    katHQp: \"x7jkkja\",\n    $$css: true\n  }\n};\nconst _temp = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst _temp2 = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst _temp3 = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst placed = {\n  item: (inlineSize: string, shift: string, clip: string) => [_temp, {\n    kz4h6p: clip != null ? \"xx58lst\" : clip,\n    kLqNvP: shift != null ? \"x1lxsm33\" : shift,\n    $$css: true\n  }, {\n    \"--x-clipPath\": clip != null ? clip : undefined,\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(inlineSize),\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(shift)\n  }],\n  marker: (inlineSize: string) => [_temp2, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(inlineSize)\n  }],\n  uncontained: (inlineSize: string) => [_temp3, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(inlineSize)\n  }]\n};\ntype Slot = {\n  count: number;\n  index: number;\n  /** The width the item is laid out at. */\n  large: number;\n  layout: CarouselLayout;\n  /** Where it is drawn, for a layout that masks. */\n  placement: Placement | undefined;\n};\nconst SlotContext = createContext<null | Slot>(null);\n\n/** What the controls and focus scroll by, as numbers read off one render. */\ntype Geometry = {\n  /** The offset of the last rest, or for uncontained how far it scrolls. */\n  end: number;\n  /** How many items past the first large one the last large one is. */\n  lastLarge: number;\n  masked: boolean;\n  scrolled: number;\n  /** The distance between two rests, or for uncontained between two items. */\n  step: number;\n};\n\n// Where a press of previous or next scrolls to from `scrolled`: the rest\n// either side of the nearest one, or for uncontained an item's width along,\n// kept between the two ends.\nfunction along(direction: -1 | 1, {\n  end,\n  masked,\n  scrolled,\n  step\n}: Geometry): number {\n  if (step <= 0) {\n    return 0;\n  }\n  const offset = masked ? (Math.round(scrolled / step) + direction) * step : scrolled + direction * step;\n  return Math.min(Math.max(offset, 0), end);\n}\n\n/**\n * A row of items that scrolls on and off the screen, in the carousel page's\n * multi-browse, hero or uncontained layout. Name it with `label`, and give it\n * a `Carousel.Item` for each item.\n *\n * ```tsx\n * <Carousel label=\"Label\">\n *   <Carousel.Item><img alt=\"First item\" src=\"…\" /></Carousel.Item>\n *   <Carousel.Item><img alt=\"Second item\" src=\"…\" /></Carousel.Item>\n * </Carousel>\n * ```\n *\n * The call site's `className` and `style` land on the carousel as a whole,\n * which is the element a layout positions.\n */\nfunction Carousel({\n  children,\n  itemSize = DEFAULT_ITEM_SIZE,\n  label,\n  layout = 'multi-browse',\n  nextLabel,\n  previousLabel,\n  ref,\n  ...props\n}: CarouselProps & RefAttributes<HTMLElement>) {\n  const messages = useMessages();\n  const scrollerRef = useRef<HTMLDivElement>(null);\n  // The scroller's width and how far it has scrolled along the text:\n  // everything drawn is drawn from these two.\n  const [width, setWidth] = useState(0);\n  const [scrolled, setScrolled] = useState(0);\n  const items = Children.toArray(children).filter(isValidElement);\n  const count = items.length;\n  const room = Math.max(width - 2 * PADDING, 0);\n  const arrangement = arrange(layout, room, itemSize, count);\n  const masked = layout !== 'uncontained';\n  // Read off the arrangement as arithmetic, so each is a number of its own\n  // rather than a field of an object the calls below are handed.\n  const step = arrangement.large + GAP;\n  // The last rest, or how far the uncontained track runs past the scroller.\n  const end = masked ? arrangement.steps * step : Math.max(count * step - GAP + 2 * PADDING - width, 0);\n  const lastLarge = arrangement.largeCount - 1;\n  const position = masked && step > 0 ? scrolled / step : 0;\n  const drawn = masked ? placements(layout, arrangement, room, PADDING, count, position) : [];\n\n  // Measured before the first paint, again on every scroll, and whenever\n  // the scroller's width changes. A right-to-left scroller counts its offset\n  // down from zero.\n  const measure = useCallback(() => {\n    const scroller = scrollerRef.current;\n    if (scroller === null) {\n      return;\n    }\n    setWidth(scroller.clientWidth);\n    setScrolled(Math.abs(scroller.scrollLeft));\n  }, []);\n  useLayoutEffect(() => {\n    const scroller = scrollerRef.current;\n    if (scroller === null) {\n      return undefined;\n    }\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(scroller);\n    return () => {\n      observer.disconnect();\n    };\n  }, [measure]);\n  const previous = useCallback(() => {\n    const geometry = {\n      end,\n      lastLarge,\n      masked,\n      scrolled,\n      step\n    };\n    scrollAlong(scrollerRef.current, along(-1, geometry));\n  }, [end, lastLarge, masked, scrolled, step]);\n  const next = useCallback(() => {\n    const geometry = {\n      end,\n      lastLarge,\n      masked,\n      scrolled,\n      step\n    };\n    scrollAlong(scrollerRef.current, along(1, geometry));\n  }, [end, lastLarge, masked, scrolled, step]);\n\n  // Focus arriving in an item a masking layout is not drawing large.\n  // Uncontained items are where they are drawn, so the browser's own\n  // scrolling of focus into view is already right for them.\n  const reveal = useCallback((event: FocusEvent<HTMLDivElement>) => {\n    const {\n      target\n    } = event;\n    if (!masked || step <= 0 || !(target instanceof Node)) {\n      return;\n    }\n    const index = Array.from(event.currentTarget.children).findIndex(child => child.contains(target));\n    if (index < 0) {\n      return;\n    }\n    const geometry = {\n      end,\n      lastLarge,\n      masked,\n      scrolled,\n      step\n    };\n    const offset = Math.min(restRevealing(index, geometry) * step, end);\n    scrollAlong(scrollerRef.current, offset);\n  }, [end, lastLarge, masked, scrolled, step]);\n  const slots = items.map((_, index): Slot => ({\n    count,\n    index,\n    large: arrangement.large,\n    layout,\n    placement: drawn[index]\n  }));\n  return <section aria-label={label} aria-roledescription={messages.carousel} ref={ref} {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x126z3so xeuugli\"\n  }, props)}>\n      <div onScroll={measure} ref={scrollerRef}\n    // A tab stop while there is anywhere to scroll, so the arrow keys\n    // move it from rest to rest whatever its items hold. A scroll\n    // container with nothing focusable inside is otherwise out of a\n    // keyboard's reach, which axe's scrollable-region-focusable reports.\n    // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- see above\n    tabIndex={end > 0 ? 0 : undefined} {...stylex.props(styles.scroller, focus.ring, !masked && styles.scrollerUncontained)}>\n        {masked ? <div aria-hidden=\"true\" className=\"xjm9jq1 x1i1rx1s x13vifvy x1o0tod x47corl x10l6tqk x1bhewko\" /> : null}\n        <div onFocus={reveal} {...{\n        0: {\n          className: \"x9f619 x78zum5 x2lah0s x126z3so x1cmllll x790zyz\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x2lah0s x126z3so x1cmllll x790zyz xh8yej3 x1o0tod x7giv3 x7wzq59\"\n        }\n      }[!!masked << 0]}>\n          {items.map((item, index) => <SlotContext key={item.key ?? index} value={slots[index] ?? null}>\n              {item}\n            </SlotContext>)}\n        </div>\n        {masked ? Array.from({\n        length: arrangement.steps\n      }, (_, rest) => <div aria-hidden=\"true\" key={rest} {...stylex.props(styles.marker, placed.marker(`${step}px`))} />) : null}\n      </div>\n      <div className=\"x9f619 x78zum5 x126z3so x13a6bvl x790zyz\">\n        <IconButton aria-label={previousLabel ?? messages.previousSlide} isDisabled={scrolled <= 0.5} onPress={previous}>\n          <ChevronEndGlyph className=\"xlzyvqe x1lliihq x15vhz18 x1pw7kks xpk2tj9\" />\n        </IconButton>\n        <IconButton aria-label={nextLabel ?? messages.nextSlide} isDisabled={scrolled >= end - 0.5} onPress={next}>\n          <ChevronEndGlyph className=\"xlzyvqe x1lliihq x15vhz18 x19axjrm x1c071of\" />\n        </IconButton>\n      </div>\n    </section>;\n}\n\n/**\n * One item. It is named by which of how many it is — \"2 of 6\" — unless it is\n * given an `aria-label` of its own.\n *\n * The call site's `className` and `style` land on the item.\n */\nfunction CarouselItem({\n  children,\n  ref,\n  ...props\n}: CarouselItemProps & RefAttributes<HTMLDivElement>) {\n  const messages = useMessages();\n  const slot = useContext(SlotContext);\n  const count = slot?.count ?? 1;\n  const index = slot?.index ?? 0;\n  const large = slot?.large ?? 0;\n  const placement = slot?.placement;\n  const inset = placement === undefined ? 0 : (large - placement.width) / 2;\n  return <div aria-label={messages.slideLabel(index + 1, count)} aria-roledescription={messages.slide} ref={ref}\n  // The pattern's own role for a slide. Its suggested `fieldset` is a\n  // form's grouping, with a legend and a border of its own.\n  // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- see above\n  role=\"group\" {...props} {...mergeStyles(stylex.props(styles.item, slot?.layout === 'uncontained' && styles.itemUncontained, slot?.layout === 'uncontained' && placed.uncontained(`${large}px`), placement !== undefined && placed.item(`${large}px`, `${placement.left - inset - index * (large + GAP)}px`, `inset(0 ${inset}px round ${radii.xl})`)), props)}>\n      {children}\n    </div>;\n}\n\n// The nearest rest that draws the item at `index` large, from the rest\n// nearest `scrolled`: the one it starts, for an item before the large ones,\n// or the one it ends, for an item after them. At rest `s` the large items\n// are `s` to `s + lastLarge`.\nfunction restRevealing(index: number, {\n  lastLarge,\n  scrolled,\n  step\n}: Geometry): number {\n  const at = Math.round(scrolled / step);\n  if (index < at) {\n    return index;\n  }\n  if (index > at + lastLarge) {\n    return index - lastLarge;\n  }\n  return at;\n}\n\n// Scrolls to an offset along the text, whichever way it runs: a\n// right-to-left scroller counts its offset down from zero.\nfunction scrollAlong(scroller: HTMLElement | null, offset: number) {\n  if (scroller === null) {\n    return;\n  }\n  const sign = getComputedStyle(scroller).direction === 'rtl' ? -1 : 1;\n  scroller.scrollTo({\n    left: sign * offset\n  });\n}\nCarousel.Item = CarouselItem;\nexport type { CarouselItemProps, CarouselLayout, CarouselProps };\nexport { CarouselItem };\nexport default Carousel;"],"mappings":"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"}

package/dist/components/color-slider/index.js

@@ -3,7 +3,7 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { groupStyles } from "../../field/styles.js";
 import { FieldLabel } from "../../field/index.js";
-import { thumbClassName } from "../../styles/color.js";
+import { thumbClassName, verticalThumbClassName } from "../../styles/color.js";
 import { chequer } from "../../styles/chequer.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -14,6 +14,12 @@ const styles = {
 		kzqmXN: "xh8yej3",
 		$$css: true
 	},
+	rootVertical: {
+		kGNEyG: "x1cy8zhl",
+		kZKoxP: "x1u5z0ei",
+		kzqmXN: "x14atkfc",
+		$$css: true
+	},
 	trackGround: {
 		kZKoxP: "xlup9mm",
 		kaIpWk: "x1xdvaa9",
@@ -25,6 +31,15 @@ const styles = {
 	trackGroundDisabled: {
 		kSiTet: "x1ppv7y9",
 		$$css: true
+	},
+	trackGroundVertical: {
+		kZKoxP: "xt7dq6l",
+		kzQI83: "x1iyjqo2",
+		kzqmXN: "x1kky2od",
+		kqGvvJ: "x10im51j",
+		kUOVxO: "xcwsfa8",
+		kAzted: "x2lwn1j",
+		$$css: true
 	}
 };
 /**
@@ -49,7 +64,7 @@ const styles = {
 * which is the element a layout positions.
 */
 function ColorSlider$1(t0) {
-	const $ = c(31);
+	const $ = c(35);
 	let T0;
 	let isDisabled;
 	let label;
@@ -57,15 +72,17 @@ function ColorSlider$1(t0) {
 	let t1;
 	let t2;
 	let t3;
+	let vertical;
 	if ($[0] !== t0) {
 		const { isDisabled: t4, label: t5, showValue: t6, ...props$1 } = t0;
 		label = t5;
 		isDisabled = t4 === void 0 ? false : t4;
 		showValue = t6 === void 0 ? true : t6;
+		vertical = props$1.orientation === "vertical";
 		T0 = ColorSlider;
 		t1 = isDisabled;
 		t2 = props$1;
-		t3 = mergeStatefulStyles(props(groupStyles.root, styles.root), props$1);
+		t3 = mergeStatefulStyles(props(groupStyles.root, styles.root, vertical && styles.rootVertical), props$1);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = isDisabled;
@@ -74,6 +91,7 @@ function ColorSlider$1(t0) {
 		$[5] = t1;
 		$[6] = t2;
 		$[7] = t3;
+		$[8] = vertical;
 	} else {
 		T0 = $[1];
 		isDisabled = $[2];
@@ -82,88 +100,95 @@ function ColorSlider$1(t0) {
 		t1 = $[5];
 		t2 = $[6];
 		t3 = $[7];
+		vertical = $[8];
 	}
 	let t4;
-	if ($[8] !== label) {
+	if ($[9] !== label) {
 		t4 = label === void 0 ? null : /* @__PURE__ */ jsx(FieldLabel, {
 			variant: "group",
 			children: label
 		});
-		$[8] = label;
-		$[9] = t4;
-	} else t4 = $[9];
+		$[9] = label;
+		$[10] = t4;
+	} else t4 = $[10];
 	let t5;
-	if ($[10] !== showValue) {
+	if ($[11] !== showValue) {
 		t5 = showValue ? /* @__PURE__ */ jsx(SliderOutput, { className: "x1w5n3ug x1yicsit x1b35g6e xwth0xh xybisxh xvc5jky" }) : null;
-		$[10] = showValue;
-		$[11] = t5;
-	} else t5 = $[11];
+		$[11] = showValue;
+		$[12] = t5;
+	} else t5 = $[12];
 	let t6;
-	if ($[12] !== t4 || $[13] !== t5) {
+	if ($[13] !== t4 || $[14] !== t5) {
 		t6 = /* @__PURE__ */ jsxs("div", {
 			className: "x1pha0wt x78zum5 x126z3so",
 			children: [t4, t5]
 		});
-		$[12] = t4;
-		$[13] = t5;
-		$[14] = t6;
-	} else t6 = $[14];
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
 	let t7;
-	if ($[15] !== isDisabled) {
-		t7 = props(chequer.ground, styles.trackGround, isDisabled && styles.trackGroundDisabled);
-		$[15] = isDisabled;
-		$[16] = t7;
-	} else t7 = $[16];
+	if ($[16] !== isDisabled || $[17] !== vertical) {
+		t7 = props(chequer.ground, styles.trackGround, vertical && styles.trackGroundVertical, isDisabled && styles.trackGroundDisabled);
+		$[16] = isDisabled;
+		$[17] = vertical;
+		$[18] = t7;
+	} else t7 = $[18];
 	let t8;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
 		t8 = {
 			0: { className: "x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 x1ypdohk xh8yej3 x1n2onr6" },
-			1: { className: "x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 xh8yej3 x1n2onr6 x1h6gzvc" }
+			2: { className: "x1cpjm7i x1hmns74 x5yr21d x9f619 x1ypdohk xh8yej3 x1n2onr6 x1nc033x x8s3y0y" },
+			1: { className: "x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 xh8yej3 x1n2onr6 x1h6gzvc" },
+			3: { className: "x1cpjm7i x1hmns74 x5yr21d x9f619 xh8yej3 x1n2onr6 x1nc033x x8s3y0y x1h6gzvc" }
 		};
-		$[17] = t8;
-	} else t8 = $[17];
-	const t9 = t8[!!isDisabled << 0];
-	let t10;
-	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ jsx(ColorThumb, { className: thumbClassName });
-		$[18] = t10;
-	} else t10 = $[18];
+		$[19] = t8;
+	} else t8 = $[19];
+	const t9 = t8[!!vertical << 1 | !!isDisabled << 0];
+	const t10 = vertical ? verticalThumbClassName : thumbClassName;
 	let t11;
-	if ($[19] !== t9) {
-		t11 = /* @__PURE__ */ jsx(SliderTrack, {
-			...t9,
-			children: t10
-		});
-		$[19] = t9;
-		$[20] = t11;
-	} else t11 = $[20];
+	if ($[20] !== t10) {
+		t11 = /* @__PURE__ */ jsx(ColorThumb, { className: t10 });
+		$[20] = t10;
+		$[21] = t11;
+	} else t11 = $[21];
 	let t12;
-	if ($[21] !== t11 || $[22] !== t7) {
-		t12 = /* @__PURE__ */ jsx("div", {
-			...t7,
+	if ($[22] !== t11 || $[23] !== t9) {
+		t12 = /* @__PURE__ */ jsx(SliderTrack, {
+			...t9,
 			children: t11
 		});
-		$[21] = t11;
-		$[22] = t7;
-		$[23] = t12;
-	} else t12 = $[23];
+		$[22] = t11;
+		$[23] = t9;
+		$[24] = t12;
+	} else t12 = $[24];
 	let t13;
-	if ($[24] !== T0 || $[25] !== t1 || $[26] !== t12 || $[27] !== t2 || $[28] !== t3 || $[29] !== t6) {
-		t13 = /* @__PURE__ */ jsxs(T0, {
+	if ($[25] !== t12 || $[26] !== t7) {
+		t13 = /* @__PURE__ */ jsx("div", {
+			...t7,
+			children: t12
+		});
+		$[25] = t12;
+		$[26] = t7;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== T0 || $[29] !== t1 || $[30] !== t13 || $[31] !== t2 || $[32] !== t3 || $[33] !== t6) {
+		t14 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled: t1,
 			...t2,
 			...t3,
-			children: [t6, t12]
+			children: [t6, t13]
 		});
-		$[24] = T0;
-		$[25] = t1;
-		$[26] = t12;
-		$[27] = t2;
-		$[28] = t3;
-		$[29] = t6;
+		$[28] = T0;
+		$[29] = t1;
 		$[30] = t13;
-	} else t13 = $[30];
-	return t13;
+		$[31] = t2;
+		$[32] = t3;
+		$[33] = t6;
+		$[34] = t14;
+	} else t14 = $[34];
+	return t14;
 }
 //#endregion
 export { ColorSlider$1 as default };