@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/invite-carousel/carousel-controls.js

@@ -0,0 +1,189 @@
+"use client";
+import { mirrorForDirection } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+//#region src/components/invite-carousel/carousel-controls.tsx
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+function prefersReducedMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION).matches;
+}
+function subscribeReducedMotion(onChange) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+	const query = window.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", onChange);
+	return () => {
+		query.removeEventListener("change", onChange);
+	};
+}
+/** Whether the reader has asked for less motion, kept live. */
+function usePrefersReducedMotion() {
+	return useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, () => false);
+}
+/** `index` wrapped into `[0, count)`. */
+function wrapIndex(index, count) {
+	if (count <= 0) return 0;
+	return (index % count + count) % count;
+}
+/** A controllable slide index that wraps or clamps. */
+function useCarouselIndex({ count, index: indexProp, defaultIndex = 0, onIndexChange, loop }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultIndex);
+	const controlled = indexProp !== void 0;
+	const raw = controlled ? indexProp : uncontrolled;
+	const last = Math.max(0, count - 1);
+	const index = loop ? wrapIndex(raw, count) : Math.min(Math.max(raw, 0), last);
+	const goTo = useCallback((target) => {
+		const next = loop ? wrapIndex(target, count) : Math.min(Math.max(target, 0), last);
+		if (next === index) return;
+		if (!controlled) setUncontrolled(next);
+		onIndexChange?.(next);
+	}, [
+		loop,
+		count,
+		last,
+		index,
+		controlled,
+		onIndexChange
+	]);
+	return {
+		index,
+		goTo,
+		next: () => {
+			goTo(index + 1);
+		},
+		previous: () => {
+			goTo(index - 1);
+		},
+		canNext: count > 1 && (loop || index < last),
+		canPrevious: count > 1 && (loop || index > 0)
+	};
+}
+function isRightToLeft(element) {
+	return element.closest("[dir]")?.getAttribute("dir") === "rtl";
+}
+/**
+* Arrow keys (mirrored in RTL), Home and End, for the carousel's own controls.
+* It is bound to the buttons rather than the region, so arrow keys pressed
+* inside a slide's content — a text field, a slider — are never taken over.
+* Returns true when it handled the key.
+*/
+function handleCarouselKey(event, keys) {
+	if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return false;
+	const rtl = isRightToLeft(event.currentTarget);
+	const action = {
+		ArrowRight: rtl ? keys.previous : keys.next,
+		ArrowLeft: rtl ? keys.next : keys.previous,
+		Home: keys.first,
+		End: keys.last
+	}[event.key];
+	if (!action) return false;
+	event.preventDefault();
+	action();
+	return true;
+}
+/** APG automatic rotation: a stop/start control, and pauses for hover and focus. */
+function useAutoRotate({ autoPlay, interval, count, resetKey, advance }) {
+	const reduced = usePrefersReducedMotion();
+	const [playing, setPlaying] = useState(autoPlay);
+	const [chosen, setChosen] = useState(false);
+	const [hovered, setHovered] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const advanceRef = useRef(advance);
+	useEffect(() => {
+		advanceRef.current = advance;
+	});
+	const enabled = playing && (chosen || !reduced);
+	const rotating = enabled && !hovered && !focused && count > 1;
+	useEffect(() => {
+		if (!rotating) return;
+		const timer = setInterval(() => {
+			advanceRef.current();
+		}, interval);
+		return () => {
+			clearInterval(timer);
+		};
+	}, [
+		rotating,
+		interval,
+		resetKey
+	]);
+	return {
+		/** Whether rotation is switched on (it may still be paused by hover or focus). */
+		enabled,
+		/** Whether slides are changing by themselves right now. */
+		rotating,
+		toggle: () => {
+			setChosen(true);
+			setPlaying(!enabled);
+		},
+		rootProps: {
+			onPointerEnter: () => {
+				setHovered(true);
+			},
+			onPointerLeave: () => {
+				setHovered(false);
+			},
+			onFocus: (event) => {
+				const target = event.target;
+				setFocused(target.closest("[data-slot=carousel-rotation]") === null);
+			},
+			onBlur: (event) => {
+				if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+			}
+		}
+	};
+}
+/** Chains a consumer's handler before ours. */
+function chain(ours, theirs) {
+	return (event) => {
+		theirs?.(event);
+		ours(event);
+	};
+}
+/** A round previous/next button whose chevron mirrors in RTL. */
+function CarouselButton({ direction, className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outline",
+		size: "icon-sm",
+		"data-slot": `carousel-${direction}`,
+		className: cn("size-8 rounded-full bg-background/70 backdrop-blur-sm", className),
+		...props,
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			className: cn("size-4", mirrorForDirection),
+			children: /* @__PURE__ */ jsx("path", { d: direction === "previous" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
+		})
+	});
+}
+/** The APG rotation control. Its name says what pressing it will do. */
+function RotationButton({ enabled, onToggle, stopLabel, startLabel, className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outline",
+		size: "icon-sm",
+		"data-slot": "carousel-rotation",
+		"aria-label": enabled ? stopLabel : startLabel,
+		className: cn("size-8 rounded-full bg-background/70 backdrop-blur-sm", className),
+		onClick: onToggle,
+		...props,
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			className: "size-3.5",
+			children: enabled ? /* @__PURE__ */ jsx("path", { d: "M7 5h3v14H7zM14 5h3v14h-3z" }) : /* @__PURE__ */ jsx("path", { d: "M8 5.5v13a.5.5 0 0 0 .76.43l10.4-6.5a.5.5 0 0 0 0-.86L8.76 5.07A.5.5 0 0 0 8 5.5z" })
+		})
+	});
+}
+//#endregion
+export { CarouselButton, RotationButton, chain, handleCarouselKey, prefersReducedMotion, useAutoRotate, useCarouselIndex, usePrefersReducedMotion, wrapIndex };
+
+//# sourceMappingURL=carousel-controls.js.map

package/dist/components/invite-carousel/carousel-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-controls.js","names":[],"sources":["../../../src/components/invite-carousel/carousel-controls.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by the WAI-ARIA APG Carousel pattern).\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type FocusEvent,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { Button, type ButtonProps } from \"@/components/button\";\nimport { mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * The state, keyboard and rotation rules every Dowel carousel shares, kept in\n * one file that each carousel carries so it installs on its own.\n *\n * - The index is controllable (`index` / `defaultIndex` / `onIndexChange`).\n * - Arrow keys follow the reading direction: in a right-to-left document the\n *   right arrow goes back, because \"next\" lies toward the inline end.\n * - Automatic rotation follows the APG: it has a stop/start control, pauses\n *   while the pointer is over the carousel or focus is inside it, and never\n *   starts by itself under reduced motion.\n */\n\nconst REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\n\nexport function prefersReducedMotion(): boolean {\n  return (\n    typeof window !== \"undefined\" &&\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(REDUCED_MOTION).matches\n  );\n}\n\nfunction subscribeReducedMotion(onChange: () => void): () => void {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return () => {};\n  }\n  const query = window.matchMedia(REDUCED_MOTION);\n  query.addEventListener(\"change\", onChange);\n  return () => {\n    query.removeEventListener(\"change\", onChange);\n  };\n}\n\n/** Whether the reader has asked for less motion, kept live. */\nexport function usePrefersReducedMotion(): boolean {\n  return useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, () => false);\n}\n\n/** `index` wrapped into `[0, count)`. */\nexport function wrapIndex(index: number, count: number): number {\n  if (count <= 0) return 0;\n  return ((index % count) + count) % count;\n}\n\nexport interface CarouselIndexOptions {\n  count: number;\n  index?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Wrap from the last slide to the first. Otherwise the ends are hard stops. */\n  loop: boolean;\n}\n\n/** A controllable slide index that wraps or clamps. */\nexport function useCarouselIndex({\n  count,\n  index: indexProp,\n  defaultIndex = 0,\n  onIndexChange,\n  loop,\n}: CarouselIndexOptions) {\n  const [uncontrolled, setUncontrolled] = useState(defaultIndex);\n  const controlled = indexProp !== undefined;\n  const raw = controlled ? indexProp : uncontrolled;\n  const last = Math.max(0, count - 1);\n  const index = loop ? wrapIndex(raw, count) : Math.min(Math.max(raw, 0), last);\n\n  const goTo = useCallback(\n    (target: number) => {\n      const next = loop ? wrapIndex(target, count) : Math.min(Math.max(target, 0), last);\n      if (next === index) return;\n      if (!controlled) setUncontrolled(next);\n      onIndexChange?.(next);\n    },\n    [loop, count, last, index, controlled, onIndexChange],\n  );\n\n  return {\n    index,\n    goTo,\n    next: () => {\n      goTo(index + 1);\n    },\n    previous: () => {\n      goTo(index - 1);\n    },\n    canNext: count > 1 && (loop || index < last),\n    canPrevious: count > 1 && (loop || index > 0),\n  };\n}\n\nfunction isRightToLeft(element: Element): boolean {\n  return element.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n}\n\nexport interface CarouselKeys {\n  next: () => void;\n  previous: () => void;\n  first: () => void;\n  last: () => void;\n}\n\n/**\n * Arrow keys (mirrored in RTL), Home and End, for the carousel's own controls.\n * It is bound to the buttons rather than the region, so arrow keys pressed\n * inside a slide's content — a text field, a slider — are never taken over.\n * Returns true when it handled the key.\n */\nexport function handleCarouselKey(\n  event: KeyboardEvent<HTMLElement>,\n  keys: CarouselKeys,\n): boolean {\n  if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return false;\n  const rtl = isRightToLeft(event.currentTarget);\n  const action = {\n    ArrowRight: rtl ? keys.previous : keys.next,\n    ArrowLeft: rtl ? keys.next : keys.previous,\n    Home: keys.first,\n    End: keys.last,\n  }[event.key];\n  if (!action) return false;\n  event.preventDefault();\n  action();\n  return true;\n}\n\nexport interface AutoRotateOptions {\n  autoPlay: boolean;\n  /** Milliseconds per slide. */\n  interval: number;\n  count: number;\n  /** Changes whenever the slide changes, so a manual move restarts the clock. */\n  resetKey: number;\n  advance: () => void;\n}\n\n/** APG automatic rotation: a stop/start control, and pauses for hover and focus. */\nexport function useAutoRotate({\n  autoPlay,\n  interval,\n  count,\n  resetKey,\n  advance,\n}: AutoRotateOptions) {\n  const reduced = usePrefersReducedMotion();\n  const [playing, setPlaying] = useState(autoPlay);\n  // Under reduced motion rotation only runs once the reader has asked for it.\n  const [chosen, setChosen] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const advanceRef = useRef(advance);\n\n  useEffect(() => {\n    advanceRef.current = advance;\n  });\n\n  const enabled = playing && (chosen || !reduced);\n  const rotating = enabled && !hovered && !focused && count > 1;\n\n  useEffect(() => {\n    if (!rotating) return;\n    const timer = setInterval(() => {\n      advanceRef.current();\n    }, interval);\n    return () => {\n      clearInterval(timer);\n    };\n  }, [rotating, interval, resetKey]);\n\n  return {\n    /** Whether rotation is switched on (it may still be paused by hover or focus). */\n    enabled,\n    /** Whether slides are changing by themselves right now. */\n    rotating,\n    toggle: () => {\n      setChosen(true);\n      setPlaying(!enabled);\n    },\n    rootProps: {\n      onPointerEnter: () => {\n        setHovered(true);\n      },\n      onPointerLeave: () => {\n        setHovered(false);\n      },\n      // Focus on the rotation control itself does not pause: that is where a\n      // keyboard user sits to start rotation and watch it run.\n      onFocus: (event: FocusEvent<HTMLElement>) => {\n        const target = event.target as Element;\n        setFocused(target.closest(\"[data-slot=carousel-rotation]\") === null);\n      },\n      onBlur: (event: FocusEvent<HTMLElement>) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);\n      },\n    },\n  };\n}\n\n/** Chains a consumer's handler before ours. */\nexport function chain<E>(ours: (event: E) => void, theirs?: (event: E) => void) {\n  return (event: E) => {\n    theirs?.(event);\n    ours(event);\n  };\n}\n\nexport interface CarouselButtonProps extends Omit<ButtonProps, \"children\"> {\n  direction: \"previous\" | \"next\";\n}\n\n/** A round previous/next button whose chevron mirrors in RTL. */\nexport function CarouselButton({ direction, className, ...props }: CarouselButtonProps) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      data-slot={`carousel-${direction}`}\n      className={cn(\"size-8 rounded-full bg-background/70 backdrop-blur-sm\", className)}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n        className={cn(\"size-4\", mirrorForDirection)}\n      >\n        <path d={direction === \"previous\" ? \"m15 18-6-6 6-6\" : \"m9 18 6-6-6-6\"} />\n      </svg>\n    </Button>\n  );\n}\n\nexport interface RotationButtonProps extends Omit<ButtonProps, \"children\" | \"onClick\"> {\n  enabled: boolean;\n  onToggle: () => void;\n  stopLabel: string;\n  startLabel: string;\n}\n\n/** The APG rotation control. Its name says what pressing it will do. */\nexport function RotationButton({\n  enabled,\n  onToggle,\n  stopLabel,\n  startLabel,\n  className,\n  ...props\n}: RotationButtonProps) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      data-slot=\"carousel-rotation\"\n      aria-label={enabled ? stopLabel : startLabel}\n      className={cn(\"size-8 rounded-full bg-background/70 backdrop-blur-sm\", className)}\n      onClick={onToggle}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" className=\"size-3.5\">\n        {enabled ? (\n          <path d=\"M7 5h3v14H7zM14 5h3v14h-3z\" />\n        ) : (\n          <path d=\"M8 5.5v13a.5.5 0 0 0 .76.43l10.4-6.5a.5.5 0 0 0 0-.86L8.76 5.07A.5.5 0 0 0 8 5.5z\" />\n        )}\n      </svg>\n    </Button>\n  );\n}\n"],"mappings":"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"}

package/dist/components/invite-carousel/index.d.ts

@@ -0,0 +1,2 @@
+import { InviteCarousel, InviteCarouselEvent, InviteCarouselLabels, InviteCarouselProps, InviteParticipant, inviteCarouselVariants } from "./invite-carousel.js";
+export { InviteCarousel, type InviteCarouselEvent, type InviteCarouselLabels, type InviteCarouselProps, type InviteParticipant, inviteCarouselVariants };

package/dist/components/invite-carousel/index.js

@@ -0,0 +1,2 @@
+import { InviteCarousel, inviteCarouselVariants } from "./invite-carousel.js";
+export { InviteCarousel, inviteCarouselVariants };

package/dist/components/invite-carousel/invite-carousel.d.ts

@@ -0,0 +1,56 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/invite-carousel/invite-carousel.d.ts
+/** A card. Its position comes from the variables in PLACES. */
+declare const inviteCarouselVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+interface InviteParticipant {
+  avatar: string;
+  /** Used as the avatar's alternative text. */
+  name: string;
+}
+interface InviteCarouselEvent {
+  id: string | number;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  location?: ReactNode;
+  /** A short status, e.g. "Hosting" or "Going", shown in a pill at the top. */
+  badge?: ReactNode;
+  /** An icon before the badge text. Decorative. */
+  badgeIcon?: ReactNode;
+  /** Background image URL. */
+  image?: string;
+  /** Alternative text for `image`. Omitted, the image is treated as decorative. */
+  imageAlt?: string;
+  /** A background node instead of an image, e.g. a gradient. */
+  background?: ReactNode;
+  participants?: InviteParticipant[];
+}
+interface InviteCarouselLabels {
+  previous: string;
+  next: string;
+  stop: string;
+  start: string;
+  slide: (index: number, count: number) => string;
+}
+interface InviteCarouselProps extends Omit<ComponentPropsWithRef<"section">, "children"> {
+  events: InviteCarouselEvent[];
+  /** Controlled current card. */
+  index?: number;
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** Advances on a timer (the source always did), with a stop/start control. */
+  autoPlay?: boolean;
+  /** Milliseconds per card while playing. */
+  interval?: number;
+  /** Any CSS length, including `clamp()` for a responsive width. */
+  cardWidth?: string;
+  /** Height as a multiple of width. */
+  aspectRatio?: number;
+  cardClassName?: string;
+  showNavigation?: boolean;
+  labels?: Partial<InviteCarouselLabels>;
+}
+/** Event invitations fanned out as tilted cards, advancing on their own or by hand. */
+declare function InviteCarousel({ className, events, index: indexProp, defaultIndex, onIndexChange, autoPlay, interval, cardWidth, aspectRatio, cardClassName, showNavigation, labels: labelsProp, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }: InviteCarouselProps): import("react").JSX.Element | null;
+//#endregion
+export { InviteCarousel, InviteCarouselEvent, InviteCarouselLabels, InviteCarouselProps, InviteParticipant, inviteCarouselVariants };
+//# sourceMappingURL=invite-carousel.d.ts.map

package/dist/components/invite-carousel/invite-carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"invite-carousel.d.ts","names":[],"sources":["../../../src/components/invite-carousel/invite-carousel.tsx"],"mappings":";;;cAoEM,yBAAsB,iDAAA;UASX;EACf;;EAEA;;UAGe;EACf;EACA,QAAQ;EACR,WAAW;EACX,WAAW;;EAEX,QAAQ;;EAER,YAAY;;EAEZ;;EAEA;;EAEA,aAAa;EACb,eAAe;;UAGA;EACf;EACA;EACA;EACA;EACA,QAAQ,eAAe;;UAWR,4BAA4B,KAC3C;EAGA,QAAQ;;EAER;EACA;EACA,iBAAiB;;EAEjB;;EAEA;;EAEA;;EAEA;EACA;EACA;EACA,SAAS,QAAQ;;;iBAaH,iBACd,WACA,QACA,OAAO,WACP,cACA,eACA,UACA,UACA,WACA,aACA,eACA,gBACA,QAAQ,YACR,gBACA,gBACA,SACA,WACG,SACF,sCAAmB,IAAA"}

package/dist/components/invite-carousel/invite-carousel.js

@@ -0,0 +1,207 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { CarouselButton, RotationButton, chain, handleCarouselKey, useAutoRotate, useCarouselIndex, wrapIndex } from "./carousel-controls.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/invite-carousel/invite-carousel.tsx
+const PLACES = {
+	current: {
+		"--invite-x": "0%",
+		"--invite-r": "0deg",
+		"--invite-s": "1",
+		opacity: 1,
+		zIndex: 3
+	},
+	next: {
+		"--invite-x": "80%",
+		"--invite-r": "12deg",
+		"--invite-s": "0.9",
+		opacity: .8,
+		zIndex: 2
+	},
+	previous: {
+		"--invite-x": "-80%",
+		"--invite-r": "-12deg",
+		"--invite-s": "0.9",
+		opacity: .8,
+		zIndex: 2
+	},
+	hidden: {
+		"--invite-x": "0%",
+		"--invite-r": "0deg",
+		"--invite-s": "0.8",
+		opacity: 0,
+		zIndex: 1
+	}
+};
+/** A card. Its position comes from the variables in PLACES. */
+const inviteCarouselVariants = cva(cn("@container col-start-1 row-start-1 overflow-hidden rounded-3xl bg-primary text-foreground shadow-xl", "translate-x-(--invite-x) scale-(--invite-s) rotate-(--invite-r)", "rtl:translate-x-[calc(var(--invite-x)*-1)] rtl:rotate-[calc(var(--invite-r)*-1)]", "transition-[translate,rotate,scale,opacity] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]"));
+const DEFAULT_LABELS = {
+	previous: "Previous invitation",
+	next: "Next invitation",
+	stop: "Stop automatic slide show",
+	start: "Start automatic slide show",
+	slide: (index, count) => `${String(index + 1)} of ${String(count)}`
+};
+function placeOf(position, index, count) {
+	let offset = wrapIndex(position - index, count);
+	if (offset > count / 2) offset -= count;
+	if (offset === 0) return "current";
+	if (offset === 1) return "next";
+	if (offset === -1) return "previous";
+	return "hidden";
+}
+/** Event invitations fanned out as tilted cards, advancing on their own or by hand. */
+function InviteCarousel({ className, events, index: indexProp, defaultIndex, onIndexChange, autoPlay = true, interval = 3e3, cardWidth = "15rem", aspectRatio = 1.5625, cardClassName, showNavigation = true, labels: labelsProp, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }) {
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const count = events.length;
+	const carousel = useCarouselIndex({
+		count,
+		index: indexProp,
+		defaultIndex,
+		onIndexChange,
+		loop: true
+	});
+	const { index, goTo } = carousel;
+	const rotation = useAutoRotate({
+		autoPlay,
+		interval,
+		count,
+		resetKey: index,
+		advance: carousel.next
+	});
+	if (count === 0) return null;
+	const hasControls = showNavigation || autoPlay;
+	function handleKeyDown(event) {
+		handleCarouselKey(event, {
+			next: carousel.next,
+			previous: carousel.previous,
+			first: () => {
+				goTo(0);
+			},
+			last: () => {
+				goTo(count - 1);
+			}
+		});
+	}
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "invite-carousel",
+		"aria-roledescription": "carousel",
+		"aria-label": props["aria-labelledby"] ? void 0 : "Invitations",
+		className: cn("relative flex w-full flex-col items-center gap-6 overflow-x-clip py-6", className),
+		onPointerEnter: chain(rotation.rootProps.onPointerEnter, onPointerEnter),
+		onPointerLeave: chain(rotation.rootProps.onPointerLeave, onPointerLeave),
+		onFocus: chain(rotation.rootProps.onFocus, onFocus),
+		onBlur: chain(rotation.rootProps.onBlur, onBlur),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "invite-carousel-viewport",
+			"aria-live": rotation.rotating ? "off" : "polite",
+			className: "grid place-items-center",
+			children: events.map((event, position) => {
+				const place = placeOf(position, index, count);
+				const current = place === "current";
+				return /* @__PURE__ */ jsx("div", {
+					role: "group",
+					"aria-roledescription": "slide",
+					"aria-label": labels.slide(position, count),
+					"aria-hidden": current ? void 0 : true,
+					inert: current ? void 0 : true,
+					"data-slot": "invite-carousel-card",
+					"data-place": place,
+					className: cn(inviteCarouselVariants(), cardClassName),
+					style: {
+						...PLACES[place],
+						width: cardWidth,
+						aspectRatio: `1 / ${String(aspectRatio)}`
+					},
+					children: /* @__PURE__ */ jsx(InviteCard, { event })
+				}, event.id);
+			})
+		}), hasControls ? /* @__PURE__ */ jsxs("div", {
+			"data-slot": "invite-carousel-controls",
+			className: "relative z-10 flex items-center gap-2",
+			children: [autoPlay ? /* @__PURE__ */ jsx(RotationButton, {
+				enabled: rotation.enabled,
+				onToggle: rotation.toggle,
+				onKeyDown: handleKeyDown,
+				stopLabel: labels.stop,
+				startLabel: labels.start
+			}) : null, showNavigation ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CarouselButton, {
+				direction: "previous",
+				"aria-label": labels.previous,
+				onClick: carousel.previous,
+				onKeyDown: handleKeyDown
+			}), /* @__PURE__ */ jsx(CarouselButton, {
+				direction: "next",
+				"aria-label": labels.next,
+				onClick: carousel.next,
+				onKeyDown: handleKeyDown
+			})] }) : null]
+		}) : null]
+	});
+}
+/** The face of one card. Sizes are in container units, floored for legibility. */
+function InviteCard({ event }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative size-full",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "invite-carousel-background",
+				className: "absolute inset-0",
+				children: event.background ?? (event.image ? /* @__PURE__ */ jsx("img", {
+					src: event.image,
+					alt: event.imageAlt ?? "",
+					draggable: false,
+					className: "size-full object-cover"
+				}) : null)
+			}),
+			event.badge != null ? /* @__PURE__ */ jsxs("span", {
+				"data-slot": "invite-carousel-badge",
+				className: cn("absolute start-[max(0.5rem,6.5cqi)] top-[max(0.5rem,6.5cqi)] z-10 flex items-center gap-[max(0.25rem,3cqi)]", "rounded-full bg-background/60 px-[max(0.5rem,5cqi)] py-[max(0.0625rem,1cqi)] font-medium backdrop-blur-xl", "text-[length:max(0.625rem,5cqi)] [&_svg]:size-[max(0.75rem,6cqi)] [&_svg]:shrink-0"),
+				children: [event.badgeIcon != null ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: event.badgeIcon
+				}) : null, event.badge]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "absolute inset-x-0 bottom-0 h-3/5 bg-linear-to-t from-background/90 via-background/50 to-transparent [mask-image:linear-gradient(to_top,var(--color-foreground)_40%,transparent)] backdrop-blur-sm"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "invite-carousel-content",
+				className: "absolute inset-x-0 bottom-0 z-10 p-[max(0.75rem,10cqi)] text-center leading-[1.4]",
+				children: [
+					event.participants && event.participants.length > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "mb-[max(0.25rem,3cqi)] flex items-center justify-center gap-[max(0.25rem,3cqi)]",
+						children: event.participants.map((participant, position) => /* @__PURE__ */ jsx("img", {
+							src: participant.avatar,
+							alt: participant.name,
+							draggable: false,
+							className: "size-[max(1.25rem,10cqi)] rounded-full object-cover"
+						}, `${participant.avatar}-${String(position)}`))
+					}) : null,
+					event.title != null ? /* @__PURE__ */ jsx("p", {
+						className: "mb-[max(0.125rem,1.5cqi)] text-[length:max(0.875rem,7.5cqi)] font-bold break-words",
+						children: event.title
+					}) : null,
+					event.subtitle != null ? /* @__PURE__ */ jsx("p", {
+						className: "text-[length:max(0.625rem,5cqi)] break-words opacity-90",
+						children: event.subtitle
+					}) : null,
+					event.location != null ? /* @__PURE__ */ jsx("p", {
+						className: "text-[length:max(0.625rem,5cqi)] break-words opacity-90",
+						children: event.location
+					}) : null
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { InviteCarousel, inviteCarouselVariants };
+
+//# sourceMappingURL=invite-carousel.js.map

package/dist/components/invite-carousel/invite-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"invite-carousel.js","names":[],"sources":["../../../src/components/invite-carousel/invite-carousel.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Apple Invites (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentPropsWithRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  CarouselButton,\n  RotationButton,\n  chain,\n  handleCarouselKey,\n  useAutoRotate,\n  useCarouselIndex,\n  wrapIndex,\n} from \"./carousel-controls\";\n\n/*\n * Three invitation cards fanned out: the current one upright in front, its\n * neighbours tilted behind it on either side, the rest faded out in the middle.\n *\n * The source mounts only the three visible cards and animates them with motion\n * springs and AnimatePresence, using popmotion's `wrap` for the index. Every\n * card is mounted here instead, and each moves between four resting places by\n * a CSS transition, so there is no animation library, no enter/exit bookkeeping\n * and reduced motion makes each move instant.\n *\n * The sideways offset and tilt are CSS variables that flip sign under\n * `dir=\"rtl\"`, so \"next\" always sits toward the inline end. The source scaled\n * its type with a JavaScript breakpoint table; the card is a size container\n * here, so its type scales with its width in CSS.\n */\n\ntype Place = \"current\" | \"next\" | \"previous\" | \"hidden\";\n\nconst PLACES: Record<Place, CSSProperties & Record<`--${string}`, string>> = {\n  current: {\n    \"--invite-x\": \"0%\",\n    \"--invite-r\": \"0deg\",\n    \"--invite-s\": \"1\",\n    opacity: 1,\n    zIndex: 3,\n  },\n  next: {\n    \"--invite-x\": \"80%\",\n    \"--invite-r\": \"12deg\",\n    \"--invite-s\": \"0.9\",\n    opacity: 0.8,\n    zIndex: 2,\n  },\n  previous: {\n    \"--invite-x\": \"-80%\",\n    \"--invite-r\": \"-12deg\",\n    \"--invite-s\": \"0.9\",\n    opacity: 0.8,\n    zIndex: 2,\n  },\n  hidden: {\n    \"--invite-x\": \"0%\",\n    \"--invite-r\": \"0deg\",\n    \"--invite-s\": \"0.8\",\n    opacity: 0,\n    zIndex: 1,\n  },\n};\n\n/** A card. Its position comes from the variables in PLACES. */\nconst inviteCarouselVariants = cva(\n  cn(\n    \"@container col-start-1 row-start-1 overflow-hidden rounded-3xl bg-primary text-foreground shadow-xl\",\n    \"translate-x-(--invite-x) scale-(--invite-s) rotate-(--invite-r)\",\n    \"rtl:translate-x-[calc(var(--invite-x)*-1)] rtl:rotate-[calc(var(--invite-r)*-1)]\",\n    \"transition-[translate,rotate,scale,opacity] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]\",\n  ),\n);\n\nexport interface InviteParticipant {\n  avatar: string;\n  /** Used as the avatar's alternative text. */\n  name: string;\n}\n\nexport interface InviteCarouselEvent {\n  id: string | number;\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  location?: ReactNode;\n  /** A short status, e.g. \"Hosting\" or \"Going\", shown in a pill at the top. */\n  badge?: ReactNode;\n  /** An icon before the badge text. Decorative. */\n  badgeIcon?: ReactNode;\n  /** Background image URL. */\n  image?: string;\n  /** Alternative text for `image`. Omitted, the image is treated as decorative. */\n  imageAlt?: string;\n  /** A background node instead of an image, e.g. a gradient. */\n  background?: ReactNode;\n  participants?: InviteParticipant[];\n}\n\nexport interface InviteCarouselLabels {\n  previous: string;\n  next: string;\n  stop: string;\n  start: string;\n  slide: (index: number, count: number) => string;\n}\n\nconst DEFAULT_LABELS: InviteCarouselLabels = {\n  previous: \"Previous invitation\",\n  next: \"Next invitation\",\n  stop: \"Stop automatic slide show\",\n  start: \"Start automatic slide show\",\n  slide: (index, count) => `${String(index + 1)} of ${String(count)}`,\n};\n\nexport interface InviteCarouselProps extends Omit<\n  ComponentPropsWithRef<\"section\">,\n  \"children\"\n> {\n  events: InviteCarouselEvent[];\n  /** Controlled current card. */\n  index?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Advances on a timer (the source always did), with a stop/start control. */\n  autoPlay?: boolean;\n  /** Milliseconds per card while playing. */\n  interval?: number;\n  /** Any CSS length, including `clamp()` for a responsive width. */\n  cardWidth?: string;\n  /** Height as a multiple of width. */\n  aspectRatio?: number;\n  cardClassName?: string;\n  showNavigation?: boolean;\n  labels?: Partial<InviteCarouselLabels>;\n}\n\nfunction placeOf(position: number, index: number, count: number): Place {\n  let offset = wrapIndex(position - index, count);\n  if (offset > count / 2) offset -= count;\n  if (offset === 0) return \"current\";\n  if (offset === 1) return \"next\";\n  if (offset === -1) return \"previous\";\n  return \"hidden\";\n}\n\n/** Event invitations fanned out as tilted cards, advancing on their own or by hand. */\nexport function InviteCarousel({\n  className,\n  events,\n  index: indexProp,\n  defaultIndex,\n  onIndexChange,\n  autoPlay = true,\n  interval = 3000,\n  cardWidth = \"15rem\",\n  aspectRatio = 1.5625,\n  cardClassName,\n  showNavigation = true,\n  labels: labelsProp,\n  onPointerEnter,\n  onPointerLeave,\n  onFocus,\n  onBlur,\n  ...props\n}: InviteCarouselProps) {\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const count = events.length;\n  const carousel = useCarouselIndex({\n    count,\n    index: indexProp,\n    defaultIndex,\n    onIndexChange,\n    loop: true,\n  });\n  const { index, goTo } = carousel;\n  const rotation = useAutoRotate({\n    autoPlay,\n    interval,\n    count,\n    resetKey: index,\n    advance: carousel.next,\n  });\n\n  if (count === 0) return null;\n\n  const hasControls = showNavigation || autoPlay;\n\n  function handleKeyDown(event: KeyboardEvent<HTMLElement>) {\n    handleCarouselKey(event, {\n      next: carousel.next,\n      previous: carousel.previous,\n      first: () => {\n        goTo(0);\n      },\n      last: () => {\n        goTo(count - 1);\n      },\n    });\n  }\n\n  return (\n    <section\n      data-slot=\"invite-carousel\"\n      aria-roledescription=\"carousel\"\n      aria-label={props[\"aria-labelledby\"] ? undefined : \"Invitations\"}\n      className={cn(\n        \"relative flex w-full flex-col items-center gap-6 overflow-x-clip py-6\",\n        className,\n      )}\n      onPointerEnter={chain(rotation.rootProps.onPointerEnter, onPointerEnter)}\n      onPointerLeave={chain(rotation.rootProps.onPointerLeave, onPointerLeave)}\n      onFocus={chain(rotation.rootProps.onFocus, onFocus)}\n      onBlur={chain(rotation.rootProps.onBlur, onBlur)}\n      {...props}\n    >\n      <div\n        data-slot=\"invite-carousel-viewport\"\n        aria-live={rotation.rotating ? \"off\" : \"polite\"}\n        className=\"grid place-items-center\"\n      >\n        {events.map((event, position) => {\n          const place = placeOf(position, index, count);\n          const current = place === \"current\";\n          return (\n            <div\n              key={event.id}\n              role=\"group\"\n              aria-roledescription=\"slide\"\n              aria-label={labels.slide(position, count)}\n              aria-hidden={current ? undefined : true}\n              inert={current ? undefined : true}\n              data-slot=\"invite-carousel-card\"\n              data-place={place}\n              className={cn(inviteCarouselVariants(), cardClassName)}\n              style={{\n                ...PLACES[place],\n                width: cardWidth,\n                aspectRatio: `1 / ${String(aspectRatio)}`,\n              }}\n            >\n              <InviteCard event={event} />\n            </div>\n          );\n        })}\n      </div>\n\n      {hasControls ? (\n        <div\n          data-slot=\"invite-carousel-controls\"\n          className=\"relative z-10 flex items-center gap-2\"\n        >\n          {autoPlay ? (\n            <RotationButton\n              enabled={rotation.enabled}\n              onToggle={rotation.toggle}\n              onKeyDown={handleKeyDown}\n              stopLabel={labels.stop}\n              startLabel={labels.start}\n            />\n          ) : null}\n          {showNavigation ? (\n            <>\n              <CarouselButton\n                direction=\"previous\"\n                aria-label={labels.previous}\n                onClick={carousel.previous}\n                onKeyDown={handleKeyDown}\n              />\n              <CarouselButton\n                direction=\"next\"\n                aria-label={labels.next}\n                onClick={carousel.next}\n                onKeyDown={handleKeyDown}\n              />\n            </>\n          ) : null}\n        </div>\n      ) : null}\n    </section>\n  );\n}\n\n/** The face of one card. Sizes are in container units, floored for legibility. */\nfunction InviteCard({ event }: { event: InviteCarouselEvent }) {\n  return (\n    <div className=\"relative size-full\">\n      <div data-slot=\"invite-carousel-background\" className=\"absolute inset-0\">\n        {event.background ??\n          (event.image ? (\n            <img\n              src={event.image}\n              alt={event.imageAlt ?? \"\"}\n              draggable={false}\n              className=\"size-full object-cover\"\n            />\n          ) : null)}\n      </div>\n\n      {event.badge != null ? (\n        <span\n          data-slot=\"invite-carousel-badge\"\n          className={cn(\n            \"absolute start-[max(0.5rem,6.5cqi)] top-[max(0.5rem,6.5cqi)] z-10 flex items-center gap-[max(0.25rem,3cqi)]\",\n            \"rounded-full bg-background/60 px-[max(0.5rem,5cqi)] py-[max(0.0625rem,1cqi)] font-medium backdrop-blur-xl\",\n            \"text-[length:max(0.625rem,5cqi)] [&_svg]:size-[max(0.75rem,6cqi)] [&_svg]:shrink-0\",\n          )}\n        >\n          {event.badgeIcon != null ? <span aria-hidden=\"true\">{event.badgeIcon}</span> : null}\n          {event.badge}\n        </span>\n      ) : null}\n\n      {/* A scrim that blurs and tints the lower half, so text reads on any image. */}\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute inset-x-0 bottom-0 h-3/5 bg-linear-to-t from-background/90 via-background/50 to-transparent [mask-image:linear-gradient(to_top,var(--color-foreground)_40%,transparent)] backdrop-blur-sm\"\n      />\n\n      <div\n        data-slot=\"invite-carousel-content\"\n        className=\"absolute inset-x-0 bottom-0 z-10 p-[max(0.75rem,10cqi)] text-center leading-[1.4]\"\n      >\n        {event.participants && event.participants.length > 0 ? (\n          <div className=\"mb-[max(0.25rem,3cqi)] flex items-center justify-center gap-[max(0.25rem,3cqi)]\">\n            {event.participants.map((participant, position) => (\n              <img\n                key={`${participant.avatar}-${String(position)}`}\n                src={participant.avatar}\n                alt={participant.name}\n                draggable={false}\n                className=\"size-[max(1.25rem,10cqi)] rounded-full object-cover\"\n              />\n            ))}\n          </div>\n        ) : null}\n        {event.title != null ? (\n          <p className=\"mb-[max(0.125rem,1.5cqi)] text-[length:max(0.875rem,7.5cqi)] font-bold break-words\">\n            {event.title}\n          </p>\n        ) : null}\n        {event.subtitle != null ? (\n          <p className=\"text-[length:max(0.625rem,5cqi)] break-words opacity-90\">\n            {event.subtitle}\n          </p>\n        ) : null}\n        {event.location != null ? (\n          <p className=\"text-[length:max(0.625rem,5cqi)] break-words opacity-90\">\n            {event.location}\n          </p>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport { inviteCarouselVariants };\n"],"mappings":"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"}

package/dist/components/invite-carousel/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/invite-carousel/meta.ts
+const meta = defineMeta({
+	name: "invite-carousel",
+	title: "Invite Carousel",
+	description: "Event invitations fanned out as tilted cards — the current one upright in front, its neighbours leaning behind — advancing on a timer or by hand.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["button"],
+	files: ["invite-carousel.tsx", "carousel-controls.tsx"],
+	a11y: "Follows the APG carousel pattern: a section with aria-roledescription=\"carousel\", each card a labelled group with aria-roledescription=\"slide\", and only the current card exposed (the neighbours are aria-hidden and inert). Automatic rotation — on by default, as in the source — has a stop/start control first in the tab order, pauses on hover and focus, turns the live region off while rotating, and does not start by itself under reduced motion. Previous/next buttons are named, arrow keys (mirrored in RTL), Home and End work inside it, and the fan mirrors under dir=\"rtl\". Background images are decorative unless `imageAlt` is given; participant avatars take their name as alt text."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/invite-carousel/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/invite-carousel/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"invite-carousel\",\n  title: \"Invite Carousel\",\n  description:\n    \"Event invitations fanned out as tilted cards — the current one upright in front, its neighbours leaning behind — advancing on a timer or by hand.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"button\"],\n  files: [\"invite-carousel.tsx\", \"carousel-controls.tsx\"],\n  a11y:\n    'Follows the APG carousel pattern: a section with aria-roledescription=\"carousel\", each card a ' +\n    'labelled group with aria-roledescription=\"slide\", and only the current card exposed (the neighbours ' +\n    \"are aria-hidden and inert). Automatic rotation — on by default, as in the source — has a stop/start \" +\n    \"control first in the tab order, pauses on hover and focus, turns the live region off while rotating, \" +\n    \"and does not start by itself under reduced motion. Previous/next buttons are named, arrow keys \" +\n    '(mirrored in RTL), Home and End work inside it, and the fan mirrors under dir=\"rtl\". Background ' +\n    \"images are decorative unless `imageAlt` is given; participant avatars take their name as alt text.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,uBAAuB,uBAAuB;CACtD,MACE;AAOJ,CAAC"}

package/dist/components/island/index.d.ts

@@ -0,0 +1,2 @@
+import { Island, IslandBounce, IslandProps, islandEasing, islandVariants } from "./island.js";
+export { Island, type IslandBounce, type IslandProps, islandEasing, islandVariants };

package/dist/components/island/index.js

@@ -0,0 +1,2 @@
+import { Island, islandEasing, islandVariants } from "./island.js";
+export { Island, islandEasing, islandVariants };

package/dist/components/island/island.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/island/island.d.ts
+declare const islandVariants: (props?: ({
+  tone?: "primary" | "inverted" | "card" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type IslandBounce = number | ((from: string, to: string) => number);
+interface IslandProps<V extends string = string> extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof islandVariants> {
+  /** The view currently shown — a key of `views`. */
+  view: V;
+  /** Content for each view, e.g. `{ compact: …, expanded: … }`. */
+  views: Record<V, ReactNode>;
+  /**
+   * How far the pill overshoots its new size, 0 (none) to 1. A function gets
+   * the previous and next view, so each transition can have its own feel.
+   */
+  bounce?: IslandBounce;
+  /**
+   * Announce each new view to screen readers. Off by default: an island that
+   * announces every idle tick trains people to ignore it.
+   */
+  live?: "off" | "polite" | "assertive";
+}
+/** Maps a 0–1 bounce onto the overshoot of a cubic-bezier, clamped. */
+declare function islandEasing(bounce: number): string;
+/** A pill that morphs between views, resizing around its content. */
+declare function Island<V extends string>({ className, style, view, views, bounce, live, tone, ...props }: IslandProps<V>): import("react").JSX.Element;
+//#endregion
+export { Island, IslandBounce, IslandProps, islandEasing, islandVariants };
+//# sourceMappingURL=island.d.ts.map

package/dist/components/island/island.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"island.d.ts","names":[],"sources":["../../../src/components/island/island.tsx"],"mappings":";;;cAuCM,iBAAc;;6CAkBnB;KAEW,0BAA0B,cAAc;UAEnC,YAAY,mCACnB,KAAK,2CAA2C,oBAAoB;;EAE5E,MAAM;;EAEN,OAAO,OAAO,GAAG;;;;;EAKjB,SAAS;;;;;EAKT;;;iBAIc,aAAa;;iBA8Bb,OAAO,oBACrB,WACA,OACA,MACA,OACA,QACA,MACA,SACG,SACF,YAAY,qBAAE,IAAA"}