@dowel-ui/react 0.7.0 → 0.8.0

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

@@ -0,0 +1,288 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { CarouselButton, handleCarouselKey, prefersReducedMotion, useCarouselIndex, wrapIndex } from "./carousel-controls.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Children, useEffect, useRef, useState } from "react";
+import { MotionConfig, animate, motion, useMotionValue, useTransform } from "motion/react";
+//#region src/components/swipe-carousel/swipe-carousel.tsx
+const PREFIX = "dowel-swipe-carousel";
+/** Keyframes and the rules for the idle float only; decoration, never an indicator. */
+const STYLES = `
+@keyframes ${PREFIX}-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(calc(var(--${PREFIX}-lift) * -1)) rotate(var(--${PREFIX}-sway))}}
+[data-slot=swipe-carousel-float]{animation:${PREFIX}-float var(--${PREFIX}-duration) ease-in-out infinite}
+[data-slot=swipe-carousel][data-held] [data-slot=swipe-carousel-float]{animation-play-state:paused}
+@media (prefers-reduced-motion: reduce){[data-slot=swipe-carousel-float]{animation:none}}
+`;
+/** Ring geometry, as fractions of the card: sideways reach and rise at the back. */
+const REACH = 67;
+const RISE = 6.5;
+/** How far, in card widths, a drag travels to turn the ring by one card. */
+const DRAG_PER_CARD = .64;
+/** How far ahead a flick's velocity projects the resting card, in seconds. */
+const PROJECTION = .15;
+/** A resting tilt per card, so the stack reads as a hand of photos, not a grid. */
+const TILTS = [
+	1.7,
+	-4.2,
+	2.6,
+	-1.4,
+	3.8,
+	-2.4,
+	1.1
+];
+const FLOAT_SECONDS = [
+	7.1,
+	4.7,
+	5.9,
+	6.7,
+	5.3,
+	6.1,
+	4.9
+];
+const SPRING = {
+	type: "spring",
+	stiffness: 260,
+	damping: 30
+};
+const swipeCarouselVariants = cva(cn("col-start-1 row-start-1", "translate-x-(--swipe-x) translate-y-(--swipe-y) scale-(--swipe-s)", "rtl:translate-x-[calc(var(--swipe-x)*-1)]"));
+const DEFAULT_LABELS = {
+	previous: "Previous card",
+	next: "Next card",
+	slide: (index, count) => `${String(index + 1)} of ${String(count)}`
+};
+/** Rounded, and never "-0" from a sine that is a hair below zero. */
+function round(value, places = 2) {
+	const factor = 10 ** places;
+	return Math.round(value * factor) / factor + 0;
+}
+/** The shortest whole-card move from `from` that lands on `index`. */
+function nearest(from, index, count) {
+	let delta = wrapIndex(index - from, count);
+	if (delta > count / 2) delta -= count;
+	return from + delta;
+}
+/** A card that orbits a carousel on a ring, swiped, clicked or stepped with keys. */
+function SwipeCarousel({ className, children, index: indexProp, defaultIndex = 0, onIndexChange, cardWidth = "13rem", aspectRatio = 1.417, float = true, labels: labelsProp, ...props }) {
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const slides = Children.toArray(children);
+	const count = slides.length;
+	const carousel = useCarouselIndex({
+		count,
+		index: indexProp,
+		defaultIndex,
+		onIndexChange,
+		loop: true
+	});
+	const { index, goTo } = carousel;
+	const position = useMotionValue(index);
+	const target = useRef(index);
+	const running = useRef(null);
+	const drag = useRef(null);
+	const dragged = useRef(false);
+	const [held, setHeld] = useState(false);
+	function settle(next, velocity = 0) {
+		target.current = next;
+		running.current?.stop();
+		if (prefersReducedMotion()) {
+			position.set(next);
+			return;
+		}
+		running.current = animate(position, next, {
+			...SPRING,
+			velocity
+		});
+	}
+	const settleRef = useRef(settle);
+	useEffect(() => {
+		settleRef.current = settle;
+	});
+	useEffect(() => {
+		if (count === 0 || wrapIndex(target.current, count) === index) return;
+		settleRef.current(nearest(target.current, index, count));
+	}, [index, count]);
+	useEffect(() => () => {
+		running.current?.stop();
+	}, []);
+	if (count === 0) return null;
+	function release(next, velocity) {
+		settle(next, velocity);
+		goTo(wrapIndex(next, count));
+	}
+	function handlePointerDown(event) {
+		if (event.button !== 0) return;
+		running.current?.stop();
+		const card = event.currentTarget.querySelector("[data-slot=swipe-carousel-slide]");
+		const rtl = event.currentTarget.closest("[dir]")?.getAttribute("dir") === "rtl";
+		drag.current = {
+			pointer: event.pointerId,
+			startX: event.clientX,
+			startPosition: position.get(),
+			cardWidth: card?.offsetWidth || 200,
+			sign: rtl ? -1 : 1,
+			moved: false
+		};
+		event.currentTarget.setPointerCapture(event.pointerId);
+		setHeld(true);
+	}
+	function handlePointerMove(event) {
+		const current = drag.current;
+		if (current?.pointer !== event.pointerId) return;
+		const dx = event.clientX - current.startX;
+		if (Math.abs(dx) > 4) current.moved = true;
+		position.set(current.startPosition - current.sign * dx / (current.cardWidth * DRAG_PER_CARD));
+	}
+	function handlePointerUp(event) {
+		const current = drag.current;
+		if (current?.pointer !== event.pointerId) return;
+		drag.current = null;
+		setHeld(false);
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		if (current.moved) {
+			const velocity = position.getVelocity();
+			const carry = Math.max(-1, Math.min(1, velocity * PROJECTION));
+			release(Math.round(position.get() + carry), velocity);
+			return;
+		}
+		const box = event.currentTarget.getBoundingClientRect();
+		const offset = (event.clientX - (box.left + box.width / 2)) * current.sign;
+		const step = Math.abs(offset) > current.cardWidth * .35 ? Math.sign(offset) : 0;
+		release(target.current + step, 0);
+	}
+	function handlePointerCancel(event) {
+		if (drag.current?.pointer !== event.pointerId) return;
+		drag.current = null;
+		setHeld(false);
+		release(Math.round(position.get()), 0);
+	}
+	function handleClickCapture(event) {
+		if (dragged.current) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+		dragged.current = false;
+	}
+	function handleKeyDown(event) {
+		handleCarouselKey(event, {
+			next: carousel.next,
+			previous: carousel.previous,
+			first: () => {
+				goTo(0);
+			},
+			last: () => {
+				goTo(count - 1);
+			}
+		});
+	}
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsxs("section", {
+			"data-slot": "swipe-carousel",
+			"data-held": held || void 0,
+			"aria-roledescription": "carousel",
+			"aria-label": props["aria-labelledby"] ? void 0 : "Cards",
+			className: cn("relative flex w-full flex-col items-center gap-4 overflow-x-clip", className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx("style", {
+					href: PREFIX,
+					precedence: "dowel",
+					children: STYLES
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "swipe-carousel-viewport",
+					"aria-live": "polite",
+					className: cn("grid max-w-full touch-pan-y place-items-center select-none", held ? "cursor-grabbing" : "cursor-grab"),
+					style: {
+						inlineSize: `calc(${cardWidth} * 2.4)`,
+						paddingBlock: `calc(${cardWidth} * 0.15)`
+					},
+					onPointerDown: handlePointerDown,
+					onPointerMove: (event) => {
+						handlePointerMove(event);
+						if (drag.current?.moved) dragged.current = true;
+					},
+					onPointerUp: handlePointerUp,
+					onPointerCancel: handlePointerCancel,
+					onClickCapture: handleClickCapture,
+					onDragStart: (event) => {
+						event.preventDefault();
+					},
+					children: slides.map((slide, slot) => /* @__PURE__ */ jsx(Slide, {
+						slot,
+						count,
+						position,
+						active: slot === index,
+						label: labels.slide(slot, count),
+						float,
+						style: {
+							width: cardWidth,
+							aspectRatio: `1 / ${String(aspectRatio)}`
+						},
+						children: slide
+					}, slot))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": "swipe-carousel-controls",
+					className: "flex items-center gap-2",
+					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
+					})]
+				})
+			]
+		})
+	});
+}
+/** One card, placed on the ring from the shared position. */
+function Slide({ slot, count, position, active, label, float, style, children }) {
+	const angle = useTransform(position, (value) => (slot - value) * 2 * Math.PI / count);
+	const x = useTransform(angle, (value) => `${String(round(Math.sin(value) * REACH))}%`);
+	const y = useTransform(angle, (value) => `${String(round(-(1 - Math.cos(value)) * RISE))}%`);
+	const scale = useTransform(angle, (value) => String(round(.75 + .25 * Math.cos(value), 4)));
+	const zIndex = useTransform(angle, (value) => Math.round(50 + 50 * Math.cos(value)));
+	const tilt = TILTS[slot % TILTS.length] ?? 0;
+	const seconds = FLOAT_SECONDS[slot % FLOAT_SECONDS.length] ?? 6;
+	return /* @__PURE__ */ jsx(motion.div, {
+		role: "group",
+		"aria-roledescription": "slide",
+		"aria-label": label,
+		"aria-hidden": active ? void 0 : true,
+		inert: active ? void 0 : true,
+		"data-slot": "swipe-carousel-slide",
+		"data-state": active ? "active" : "inactive",
+		className: swipeCarouselVariants(),
+		style: {
+			...style,
+			zIndex,
+			"--swipe-x": x,
+			"--swipe-y": y,
+			"--swipe-s": scale
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": float ? "swipe-carousel-float" : "swipe-carousel-card",
+			className: "size-full overflow-hidden rounded-[1.125rem] bg-muted shadow-lg [&>img]:size-full [&>img]:object-cover",
+			style: {
+				rotate: `${String(tilt)}deg`,
+				[`--${PREFIX}-duration`]: `calc(${String(seconds * 1e3)}ms * var(--motion-scale, 1))`,
+				[`--${PREFIX}-lift`]: "0.15rem",
+				[`--${PREFIX}-sway`]: `${String(tilt > 0 ? .2 : -.2)}deg`
+			},
+			children
+		})
+	});
+}
+//#endregion
+export { SwipeCarousel, swipeCarouselVariants };
+
+//# sourceMappingURL=swipe-carousel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"swipe-carousel.js","names":[],"sources":["../../../src/components/swipe-carousel/swipe-carousel.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by bencho Carousel).\nimport { cva } from \"class-variance-authority\";\nimport {\n  MotionConfig,\n  animate,\n  motion,\n  useMotionValue,\n  useTransform,\n  type AnimationPlaybackControls,\n  type MotionValue,\n} from \"motion/react\";\nimport {\n  Children,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  CarouselButton,\n  handleCarouselKey,\n  prefersReducedMotion,\n  useCarouselIndex,\n  wrapIndex,\n} from \"./carousel-controls\";\n\n/*\n * Cards stand on a ring seen from the front: the current one faces you, the\n * others swing round behind it, smaller and higher, so a swipe turns the ring\n * and nothing ever slides out of the frame.\n *\n * The ring's rotation is one continuous number — the position, in cards. A\n * drag moves it directly under the finger; on release it springs to the\n * nearest card *carrying the flick's velocity*, which is the one thing a CSS\n * transition cannot do honestly, and why this uses `motion`. Buttons and keys\n * move the same number with the same spring and no velocity. Under reduced\n * motion the ring jumps instead of springing, and the idle float stops.\n */\n\nconst PREFIX = \"dowel-swipe-carousel\";\n\n/** Keyframes and the rules for the idle float only; decoration, never an indicator. */\nconst STYLES = `\n@keyframes ${PREFIX}-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(calc(var(--${PREFIX}-lift) * -1)) rotate(var(--${PREFIX}-sway))}}\n[data-slot=swipe-carousel-float]{animation:${PREFIX}-float var(--${PREFIX}-duration) ease-in-out infinite}\n[data-slot=swipe-carousel][data-held] [data-slot=swipe-carousel-float]{animation-play-state:paused}\n@media (prefers-reduced-motion: reduce){[data-slot=swipe-carousel-float]{animation:none}}\n`;\n\n/** Ring geometry, as fractions of the card: sideways reach and rise at the back. */\nconst REACH = 67;\nconst RISE = 6.5;\n/** How far, in card widths, a drag travels to turn the ring by one card. */\nconst DRAG_PER_CARD = 0.64;\n/** How far ahead a flick's velocity projects the resting card, in seconds. */\nconst PROJECTION = 0.15;\n/** A resting tilt per card, so the stack reads as a hand of photos, not a grid. */\nconst TILTS = [1.7, -4.2, 2.6, -1.4, 3.8, -2.4, 1.1];\nconst FLOAT_SECONDS = [7.1, 4.7, 5.9, 6.7, 5.3, 6.1, 4.9];\nconst SPRING = { type: \"spring\", stiffness: 260, damping: 30 } as const;\n\nconst swipeCarouselVariants = cva(\n  cn(\n    \"col-start-1 row-start-1\",\n    \"translate-x-(--swipe-x) translate-y-(--swipe-y) scale-(--swipe-s)\",\n    \"rtl:translate-x-[calc(var(--swipe-x)*-1)]\",\n  ),\n);\n\nexport interface SwipeCarouselLabels {\n  previous: string;\n  next: string;\n  slide: (index: number, count: number) => string;\n}\n\nconst DEFAULT_LABELS: SwipeCarouselLabels = {\n  previous: \"Previous card\",\n  next: \"Next card\",\n  slide: (index, count) => `${String(index + 1)} of ${String(count)}`,\n};\n\nexport interface SwipeCarouselProps extends Omit<ComponentPropsWithRef<\"section\">, \"children\"> {\n  /** One child per card: an image, or any content. */\n  children?: ReactNode;\n  index?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Any CSS length. */\n  cardWidth?: string;\n  /** Height as a multiple of width. */\n  aspectRatio?: number;\n  /** Lets each card drift gently while idle. */\n  float?: boolean;\n  labels?: Partial<SwipeCarouselLabels>;\n}\n\ninterface Drag {\n  pointer: number;\n  startX: number;\n  startPosition: number;\n  cardWidth: number;\n  sign: 1 | -1;\n  moved: boolean;\n}\n\n/** Rounded, and never \"-0\" from a sine that is a hair below zero. */\nfunction round(value: number, places = 2): number {\n  const factor = 10 ** places;\n  return Math.round(value * factor) / factor + 0;\n}\n\n/** The shortest whole-card move from `from` that lands on `index`. */\nfunction nearest(from: number, index: number, count: number): number {\n  let delta = wrapIndex(index - from, count);\n  if (delta > count / 2) delta -= count;\n  return from + delta;\n}\n\n/** A card that orbits a carousel on a ring, swiped, clicked or stepped with keys. */\nexport function SwipeCarousel({\n  className,\n  children,\n  index: indexProp,\n  defaultIndex = 0,\n  onIndexChange,\n  cardWidth = \"13rem\",\n  aspectRatio = 1.417,\n  float = true,\n  labels: labelsProp,\n  ...props\n}: SwipeCarouselProps) {\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const slides = Children.toArray(children);\n  const count = slides.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 position = useMotionValue(index);\n  // The whole-card position the ring is resting at, or springing toward.\n  const target = useRef(index);\n  const running = useRef<AnimationPlaybackControls | null>(null);\n  const drag = useRef<Drag | null>(null);\n  // Set once a pointer has moved far enough to count as a drag, not a tap.\n  const dragged = useRef(false);\n  const [held, setHeld] = useState(false);\n\n  function settle(next: number, velocity = 0) {\n    target.current = next;\n    running.current?.stop();\n    if (prefersReducedMotion()) {\n      position.set(next);\n      return;\n    }\n    running.current = animate(position, next, { ...SPRING, velocity });\n  }\n\n  const settleRef = useRef(settle);\n  useEffect(() => {\n    settleRef.current = settle;\n  });\n\n  // Follow the index wherever it changes from: buttons, keys, or the owner.\n  useEffect(() => {\n    if (count === 0 || wrapIndex(target.current, count) === index) return;\n    settleRef.current(nearest(target.current, index, count));\n  }, [index, count]);\n\n  useEffect(\n    () => () => {\n      running.current?.stop();\n    },\n    [],\n  );\n\n  if (count === 0) return null;\n\n  function release(next: number, velocity: number) {\n    settle(next, velocity);\n    goTo(wrapIndex(next, count));\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {\n    if (event.button !== 0) return;\n    running.current?.stop();\n    const card = event.currentTarget.querySelector<HTMLElement>(\n      \"[data-slot=swipe-carousel-slide]\",\n    );\n    const rtl = event.currentTarget.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n    drag.current = {\n      pointer: event.pointerId,\n      startX: event.clientX,\n      startPosition: position.get(),\n      cardWidth: card?.offsetWidth || 200,\n      sign: rtl ? -1 : 1,\n      moved: false,\n    };\n    event.currentTarget.setPointerCapture(event.pointerId);\n    setHeld(true);\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {\n    const current = drag.current;\n    if (current?.pointer !== event.pointerId) return;\n    const dx = event.clientX - current.startX;\n    if (Math.abs(dx) > 4) current.moved = true;\n    position.set(\n      current.startPosition - (current.sign * dx) / (current.cardWidth * DRAG_PER_CARD),\n    );\n  }\n\n  function handlePointerUp(event: PointerEvent<HTMLDivElement>) {\n    const current = drag.current;\n    if (current?.pointer !== event.pointerId) return;\n    drag.current = null;\n    setHeld(false);\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n\n    if (current.moved) {\n      const velocity = position.getVelocity();\n      // A flick carries on by at most one more card.\n      const carry = Math.max(-1, Math.min(1, velocity * PROJECTION));\n      release(Math.round(position.get() + carry), velocity);\n      return;\n    }\n\n    // A tap on a card peeking out at either side brings it to the front.\n    const box = event.currentTarget.getBoundingClientRect();\n    const offset = (event.clientX - (box.left + box.width / 2)) * current.sign;\n    const step = Math.abs(offset) > current.cardWidth * 0.35 ? Math.sign(offset) : 0;\n    release(target.current + step, 0);\n  }\n\n  function handlePointerCancel(event: PointerEvent<HTMLDivElement>) {\n    if (drag.current?.pointer !== event.pointerId) return;\n    drag.current = null;\n    setHeld(false);\n    release(Math.round(position.get()), 0);\n  }\n\n  // A drag that ends over a link in the front card must not also follow it.\n  function handleClickCapture(event: MouseEvent<HTMLDivElement>) {\n    if (dragged.current) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n    dragged.current = false;\n  }\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    <MotionConfig reducedMotion=\"user\">\n      <section\n        data-slot=\"swipe-carousel\"\n        data-held={held || undefined}\n        aria-roledescription=\"carousel\"\n        aria-label={props[\"aria-labelledby\"] ? undefined : \"Cards\"}\n        className={cn(\n          \"relative flex w-full flex-col items-center gap-4 overflow-x-clip\",\n          className,\n        )}\n        {...props}\n      >\n        <style href={PREFIX} precedence=\"dowel\">\n          {STYLES}\n        </style>\n        <div\n          data-slot=\"swipe-carousel-viewport\"\n          aria-live=\"polite\"\n          className={cn(\n            \"grid max-w-full touch-pan-y place-items-center select-none\",\n            held ? \"cursor-grabbing\" : \"cursor-grab\",\n          )}\n          style={{\n            inlineSize: `calc(${cardWidth} * 2.4)`,\n            paddingBlock: `calc(${cardWidth} * 0.15)`,\n          }}\n          onPointerDown={handlePointerDown}\n          onPointerMove={(event) => {\n            handlePointerMove(event);\n            if (drag.current?.moved) dragged.current = true;\n          }}\n          onPointerUp={handlePointerUp}\n          onPointerCancel={handlePointerCancel}\n          onClickCapture={handleClickCapture}\n          onDragStart={(event) => {\n            event.preventDefault();\n          }}\n        >\n          {slides.map((slide, slot) => (\n            <Slide\n              key={slot}\n              slot={slot}\n              count={count}\n              position={position}\n              active={slot === index}\n              label={labels.slide(slot, count)}\n              float={float}\n              style={{ width: cardWidth, aspectRatio: `1 / ${String(aspectRatio)}` }}\n            >\n              {slide}\n            </Slide>\n          ))}\n        </div>\n        <div data-slot=\"swipe-carousel-controls\" className=\"flex items-center gap-2\">\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        </div>\n      </section>\n    </MotionConfig>\n  );\n}\n\ninterface SlideProps {\n  slot: number;\n  count: number;\n  position: MotionValue<number>;\n  active: boolean;\n  label: string;\n  float: boolean;\n  style: CSSProperties;\n  children: ReactNode;\n}\n\n/** One card, placed on the ring from the shared position. */\nfunction Slide({ slot, count, position, active, label, float, style, children }: SlideProps) {\n  const angle = useTransform(position, (value) => ((slot - value) * 2 * Math.PI) / count);\n  const x = useTransform(angle, (value) => `${String(round(Math.sin(value) * REACH))}%`);\n  const y = useTransform(angle, (value) => `${String(round(-(1 - Math.cos(value)) * RISE))}%`);\n  const scale = useTransform(angle, (value) => String(round(0.75 + 0.25 * Math.cos(value), 4)));\n  const zIndex = useTransform(angle, (value) => Math.round(50 + 50 * Math.cos(value)));\n  const tilt = TILTS[slot % TILTS.length] ?? 0;\n  const seconds = FLOAT_SECONDS[slot % FLOAT_SECONDS.length] ?? 6;\n\n  return (\n    <motion.div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      aria-label={label}\n      aria-hidden={active ? undefined : true}\n      inert={active ? undefined : true}\n      data-slot=\"swipe-carousel-slide\"\n      data-state={active ? \"active\" : \"inactive\"}\n      className={swipeCarouselVariants()}\n      style={{\n        ...style,\n        zIndex,\n        ...({ \"--swipe-x\": x, \"--swipe-y\": y, \"--swipe-s\": scale } as object),\n      }}\n    >\n      <div\n        data-slot={float ? \"swipe-carousel-float\" : \"swipe-carousel-card\"}\n        className=\"size-full overflow-hidden rounded-[1.125rem] bg-muted shadow-lg [&>img]:size-full [&>img]:object-cover\"\n        style={\n          {\n            rotate: `${String(tilt)}deg`,\n            [`--${PREFIX}-duration`]: `calc(${String(seconds * 1000)}ms * var(--motion-scale, 1))`,\n            [`--${PREFIX}-lift`]: \"0.15rem\",\n            [`--${PREFIX}-sway`]: `${String(tilt > 0 ? 0.2 : -0.2)}deg`,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </div>\n    </motion.div>\n  );\n}\n\nexport { swipeCarouselVariants };\n"],"mappings":"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"}

package/dist/components/switch/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["radix-ui"],
 	registryDependencies: [],
 	files: ["switch.tsx"],
-	a11y: "Exposed as role=\"switch\" and toggled with Space or Enter. Needs a visible label tied with htmlFor/id. Do not rely on colour alone to show state — position and the label carry it too."
+	a11y: "Exposed as role=\"switch\" and toggled with Space or Enter. Needs a visible label tied with htmlFor/id. Do not rely on colour alone to show state — position and the label carry it too. Icons passed to `icons` are aria-hidden decoration; the press squash only runs without a reduced-motion preference."
 });
 //#endregion
 export { meta };

package/dist/components/switch/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/switch/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"switch\",\n  title: \"Switch\",\n  description: \"An immediate on/off toggle for settings that apply straight away.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"switch.tsx\"],\n  a11y:\n    'Exposed as role=\"switch\" and toggled with Space or Enter. Needs a visible label tied with ' +\n    \"htmlFor/id. Do not rely on colour alone to show state — position and the label carry it too.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,YAAY;CACpB,MACE;AAEJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/switch/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"switch\",\n  title: \"Switch\",\n  description: \"An immediate on/off toggle for settings that apply straight away.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"switch.tsx\"],\n  a11y:\n    'Exposed as role=\"switch\" and toggled with Space or Enter. Needs a visible label tied with ' +\n    \"htmlFor/id. Do not rely on colour alone to show state — position and the label carry it too. \" +\n    \"Icons passed to `icons` are aria-hidden decoration; the press squash only runs without \" +\n    \"a reduced-motion preference.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,YAAY;CACpB,MACE;AAIJ,CAAC"}

package/dist/components/switch/switch.d.ts

@@ -1,5 +1,5 @@
 import { Switch } from "radix-ui";
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, ReactNode } from "react";
 //#region src/components/switch/switch.d.ts
 /**
  * An immediate on/off toggle.
@@ -8,8 +8,30 @@ import { ComponentPropsWithRef } from "react";
  * staged until the form is submitted. The difference is real to users: a switch
  * that needs a Save button is a broken promise.
  */
-type SwitchProps = ComponentPropsWithRef<typeof Switch.Root>;
-declare function Switch$1({ className, ...props }: SwitchProps): import("react").JSX.Element;
+interface SwitchProps extends ComponentPropsWithRef<typeof Switch.Root> {
+  /**
+   * How the thumb moves. Opt-in, because both change the thumb's shape:
+   *
+   * - `default` — slides, as it always has.
+   * - `squash` — also stretches along its travel while held, like a finger
+   *   pushing it.
+   * - `morph` — squashes, and rests as a rounded square when off and a circle
+   *   when on.
+   *
+   * The press stretch only exists when the reader has not asked for reduced
+   * motion; the shape change still happens, instantly.
+   */
+  variant?: "default" | "squash" | "morph";
+  /**
+   * Icons drawn inside the thumb, one per state, that turn and crossfade as
+   * it moves. Decorative: the state is announced by the switch role.
+   */
+  icons?: {
+    checked: ReactNode;
+    unchecked: ReactNode;
+  };
+}
+declare function Switch$1({ className, variant, icons, ...props }: SwitchProps): import("react").JSX.Element;
 //#endregion
 export { Switch$1 as Switch, SwitchProps };
 //# sourceMappingURL=switch.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","names":[],"sources":["../../../src/components/switch/switch.tsx"],"mappings":";;;;;;;;;;KAeY,cAAc,6BAA6B,OAAgB;iBAEvD,WAAS,cAAc,SAAS,8BAAW,IAAA"}
+{"version":3,"file":"switch.d.ts","names":[],"sources":["../../../src/components/switch/switch.tsx"],"mappings":";;;;;;;;;;UAgBiB,oBAAoB,6BAA6B,OAAgB;;;;;;;;;;;;;EAahF;;;;;EAKA;IAAU,SAAS;IAAW,WAAW;;;iBAQ3B,WAAS,WAAW,SAAqB,UAAU,SAAS,8BAAW,IAAA"}

package/dist/components/switch/switch.js

@@ -2,16 +2,32 @@
 import { focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { Switch } from "radix-ui";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/switch/switch.tsx
-function Switch$1({ className, ...props }) {
+const iconLayer = cn("col-start-1 row-start-1 flex items-center justify-center [&_svg]:size-3", "transition-[opacity,scale,rotate] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]");
+function Switch$1({ className, variant = "default", icons, ...props }) {
+	const squash = variant === "squash" || variant === "morph";
 	return /* @__PURE__ */ jsx(Switch.Root, {
 		"data-slot": "switch",
-		className: cn("peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent p-0.5", "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "bg-input data-[state=checked]:bg-primary", "disabled:cursor-not-allowed disabled:opacity-55", focusRing, className),
+		"data-variant": variant === "default" ? void 0 : variant,
+		className: cn("peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent p-0.5", "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "bg-input data-[state=checked]:bg-primary", "disabled:cursor-not-allowed disabled:opacity-55", squash && "group/switch", focusRing, className),
 		...props,
 		children: /* @__PURE__ */ jsx(Switch.Thumb, {
 			"data-slot": "switch-thumb",
-			className: cn("pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0", "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "translate-x-0 data-[state=checked]:translate-x-4")
+			className: cn("pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0", "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "translate-x-0 data-[state=checked]:translate-x-4", squash && "origin-left data-[state=checked]:origin-right motion-safe:group-active/switch:scale-x-125", variant === "morph" && "rounded-[30%] transition-[transform,translate,scale,border-radius] data-[state=checked]:rounded-[50%]", icons && "group/thumb grid place-items-center"),
+			children: icons ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "switch-icon",
+				"data-icon": "unchecked",
+				className: cn(iconLayer, "text-muted-foreground", "group-data-[state=checked]/thumb:scale-50 group-data-[state=checked]/thumb:-rotate-90 group-data-[state=checked]/thumb:opacity-0"),
+				children: icons.unchecked
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "switch-icon",
+				"data-icon": "checked",
+				className: cn(iconLayer, "text-primary", "scale-50 rotate-90 opacity-0", "group-data-[state=checked]/thumb:scale-100 group-data-[state=checked]/thumb:rotate-0 group-data-[state=checked]/thumb:opacity-100"),
+				children: icons.checked
+			})] }) : null
 		})
 	});
 }

package/dist/components/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":["Switch","SwitchPrimitive"],"sources":["../../../src/components/switch/switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * An immediate on/off toggle.\n *\n * Use a Switch when the change takes effect at once, and a Checkbox when it is\n * staged until the form is submitted. The difference is real to users: a switch\n * that needs a Save button is a broken promise.\n */\nexport type SwitchProps = ComponentPropsWithRef<typeof SwitchPrimitive.Root>;\n\nexport function Switch({ className, ...props }: SwitchProps) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent p-0.5\",\n        \"transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n        \"bg-input data-[state=checked]:bg-primary\",\n        \"disabled:cursor-not-allowed disabled:opacity-55\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0\",\n          \"transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n          \"translate-x-0 data-[state=checked]:translate-x-4\",\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;AAiBA,SAAgBA,SAAO,EAAE,WAAW,GAAG,SAAsB;CAC3D,OACE,oBAACC,OAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GACT,+FACA,kFACA,4CACA,mDACA,WACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GACT,gFACA,qFACA,kDACF;EACD,CAAA;CACmB,CAAA;AAE1B"}
+{"version":3,"file":"switch.js","names":["Switch","SwitchPrimitive"],"sources":["../../../src/components/switch/switch.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AnimatedToggle (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * An immediate on/off toggle.\n *\n * Use a Switch when the change takes effect at once, and a Checkbox when it is\n * staged until the form is submitted. The difference is real to users: a switch\n * that needs a Save button is a broken promise.\n */\nexport interface SwitchProps extends ComponentPropsWithRef<typeof SwitchPrimitive.Root> {\n  /**\n   * How the thumb moves. Opt-in, because both change the thumb's shape:\n   *\n   * - `default` — slides, as it always has.\n   * - `squash` — also stretches along its travel while held, like a finger\n   *   pushing it.\n   * - `morph` — squashes, and rests as a rounded square when off and a circle\n   *   when on.\n   *\n   * The press stretch only exists when the reader has not asked for reduced\n   * motion; the shape change still happens, instantly.\n   */\n  variant?: \"default\" | \"squash\" | \"morph\";\n  /**\n   * Icons drawn inside the thumb, one per state, that turn and crossfade as\n   * it moves. Decorative: the state is announced by the switch role.\n   */\n  icons?: { checked: ReactNode; unchecked: ReactNode };\n}\n\nconst iconLayer = cn(\n  \"col-start-1 row-start-1 flex items-center justify-center [&_svg]:size-3\",\n  \"transition-[opacity,scale,rotate] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]\",\n);\n\nexport function Switch({ className, variant = \"default\", icons, ...props }: SwitchProps) {\n  const squash = variant === \"squash\" || variant === \"morph\";\n\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-variant={variant === \"default\" ? undefined : variant}\n      className={cn(\n        \"peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent p-0.5\",\n        \"transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n        \"bg-input data-[state=checked]:bg-primary\",\n        \"disabled:cursor-not-allowed disabled:opacity-55\",\n        squash && \"group/switch\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0\",\n          \"transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n          \"translate-x-0 data-[state=checked]:translate-x-4\",\n          // Stretch from the edge it is leaving, so the far edge reaches ahead.\n          squash &&\n            \"origin-left data-[state=checked]:origin-right motion-safe:group-active/switch:scale-x-125\",\n          variant === \"morph\" &&\n            \"rounded-[30%] transition-[transform,translate,scale,border-radius] data-[state=checked]:rounded-[50%]\",\n          icons && \"group/thumb grid place-items-center\",\n        )}\n      >\n        {icons ? (\n          <>\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"switch-icon\"\n              data-icon=\"unchecked\"\n              className={cn(\n                iconLayer,\n                \"text-muted-foreground\",\n                \"group-data-[state=checked]/thumb:scale-50 group-data-[state=checked]/thumb:-rotate-90 group-data-[state=checked]/thumb:opacity-0\",\n              )}\n            >\n              {icons.unchecked}\n            </span>\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"switch-icon\"\n              data-icon=\"checked\"\n              className={cn(\n                iconLayer,\n                \"text-primary\",\n                \"scale-50 rotate-90 opacity-0\",\n                \"group-data-[state=checked]/thumb:scale-100 group-data-[state=checked]/thumb:rotate-0 group-data-[state=checked]/thumb:opacity-100\",\n              )}\n            >\n              {icons.checked}\n            </span>\n          </>\n        ) : null}\n      </SwitchPrimitive.Thumb>\n    </SwitchPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;AAqCA,MAAM,YAAY,GAChB,2EACA,kGACF;AAEA,SAAgBA,SAAO,EAAE,WAAW,UAAU,WAAW,OAAO,GAAG,SAAsB;CACvF,MAAM,SAAS,YAAY,YAAY,YAAY;CAEnD,OACE,oBAACC,OAAgB,MAAjB;EACE,aAAU;EACV,gBAAc,YAAY,YAAY,KAAA,IAAY;EAClD,WAAW,GACT,+FACA,kFACA,4CACA,mDACA,UAAU,gBACV,WACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GACT,gFACA,qFACA,oDAEA,UACE,6FACF,YAAY,WACV,yGACF,SAAS,qCACX;GAEC,UAAA,QACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;IACE,eAAY;IACZ,aAAU;IACV,aAAU;IACV,WAAW,GACT,WACA,yBACA,kIACF;IAEC,UAAA,MAAM;GACH,CAAA,GACN,oBAAC,QAAD;IACE,eAAY;IACZ,aAAU;IACV,aAAU;IACV,WAAW,GACT,WACA,gBACA,gCACA,mIACF;IAEC,UAAA,MAAM;GACH,CAAA,CACN,EAAA,CAAA,IACA;EACiB,CAAA;CACH,CAAA;AAE1B"}

package/dist/components/switchboard-card/index.d.ts

@@ -0,0 +1,2 @@
+import { SwitchboardCard, SwitchboardCardProps, SwitchboardLightState, switchboardCardVariants } from "./switchboard-card.js";
+export { SwitchboardCard, type SwitchboardCardProps, type SwitchboardLightState, switchboardCardVariants };

package/dist/components/switchboard-card/index.js

@@ -0,0 +1,2 @@
+import { SwitchboardCard, switchboardCardVariants } from "./switchboard-card.js";
+export { SwitchboardCard, switchboardCardVariants };

package/dist/components/switchboard-card/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/switchboard-card/meta.ts
+const meta = defineMeta({
+	name: "switchboard-card",
+	title: "Switchboard Card",
+	description: "A feature card illustrated by a grid of tiny lights — a lit pattern such as a word, or random flicker.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["switchboard-card.tsx"],
+	a11y: "The lights are decorative and aria-hidden unless illustrationLabel describes them (a pattern spelling a word), in which case the grid is a single role=\"img\". The heading level is set with headingAs. With href the whole card is one link, or use asChild to render a router link or a button; the focus ring is shared. The flicker pauses off-screen and in hidden tabs, and under reduced motion it never starts: a still frame is shown instead."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/switchboard-card/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/switchboard-card/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"switchboard-card\",\n  title: \"Switchboard Card\",\n  description:\n    \"A feature card illustrated by a grid of tiny lights — a lit pattern such as a word, or random flicker.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"switchboard-card.tsx\"],\n  a11y:\n    \"The lights are decorative and aria-hidden unless illustrationLabel describes them (a pattern spelling a word), \" +\n    'in which case the grid is a single role=\"img\". The heading level is set with headingAs. With href the whole ' +\n    \"card is one link, or use asChild to render a router link or a button; the focus ring is shared. The flicker \" +\n    \"pauses off-screen and in hidden tabs, and under reduced motion it never starts: a still frame is shown instead.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,sBAAsB;CAC9B,MACE;AAIJ,CAAC"}

package/dist/components/switchboard-card/switchboard-card.d.ts

@@ -0,0 +1,44 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/switchboard-card/switchboard-card.d.ts
+type SwitchboardLightState = "off" | "medium" | "high";
+declare const switchboardCardVariants: (props?: ({
+  variant?: "default" | "inverted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SwitchboardCardProps extends Omit<ComponentPropsWithRef<"div">, "title">, VariantProps<typeof switchboardCardVariants> {
+  /** The card's heading. */
+  heading: ReactNode;
+  /** Supporting text under the heading. */
+  description?: ReactNode;
+  /** The heading element, so the card fits the page's outline. */
+  headingAs?: "h2" | "h3" | "h4" | "p";
+  /** Lights per row. */
+  columns?: number;
+  /** Rows of lights. */
+  rows?: number;
+  /**
+   * Lights to hold on: a flat row-major array or a `[row][column]` grid, where
+   * 1 is lit. Takes precedence over `randomLights`.
+   */
+  gridPattern?: number[] | number[][];
+  /** Flicker random lights instead of showing a pattern. */
+  randomLights?: boolean;
+  /** Milliseconds between flicker steps. */
+  interval?: number;
+  /** Seed for the still frame shown under reduced motion. */
+  seed?: number;
+  /**
+   * Describes the illustration when it means something (a pattern spelling a
+   * word). Without it the lights are decorative and hidden from assistive technology.
+   */
+  illustrationLabel?: string;
+  /** Makes the whole card a link. */
+  href?: string;
+  /** Renders the child element (a router link, a button) as the card. */
+  asChild?: boolean;
+}
+/** A feature card illustrated by a grid of lights — a lit pattern, or random flicker. */
+declare function SwitchboardCard({ className, heading, description, headingAs: Heading, columns, rows, gridPattern, randomLights, interval, seed, illustrationLabel, href, asChild, variant, children, ...props }: SwitchboardCardProps): import("react").JSX.Element;
+//#endregion
+export { SwitchboardCard, SwitchboardCardProps, SwitchboardLightState, switchboardCardVariants };
+//# sourceMappingURL=switchboard-card.d.ts.map

package/dist/components/switchboard-card/switchboard-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switchboard-card.d.ts","names":[],"sources":["../../../src/components/switchboard-card/switchboard-card.tsx"],"mappings":";;;KAiCY;cAEN,0BAAuB;;6CAqB5B;UAsEgB,6BAEb,KAAK,wCACL,oBAAoB;;EAEtB,SAAS;;EAET,cAAc;;EAEd;;EAEA;;EAEA;;;;;EAKA;;EAEA;;EAEA;;EAEA;;;;;EAKA;;EAEA;;EAEA;;;iBAIc,kBACd,WACA,SACA,aACA,WAAW,SACX,SACA,MACA,aACA,cACA,UACA,MACA,mBACA,MACA,SACA,SACA,aACG,SACF,uCAAoB,IAAA"}