@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/navigation/accordion/index.js

@@ -0,0 +1,107 @@
+"use client";
+import { Transition } from "../../utilities/transition/index.js";
+import "./accordion.css";
+import { cn } from "@puzzle-ui/core";
+import { Fragment, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/navigation/accordion/index.tsx
+const normalizeOpenItemIndexes = (indexes, itemCount, type) => {
+	const validIndexes = Array.from(new Set((indexes ?? []).filter((index) => Number.isInteger(index) && index >= 0 && index < itemCount)));
+	if (type === "single") return validIndexes.slice(0, 1);
+	return validIndexes.sort((a, b) => a - b);
+};
+const normalizeOpenItemIds = (value, type) => {
+	const ids = value == null ? [] : Array.isArray(value) ? [...value] : [value];
+	const uniqueIds = Array.from(new Set(ids));
+	return type === "single" ? uniqueIds.slice(0, 1) : uniqueIds;
+};
+const Accordion = ({ items, initialOpenItemIndexes, openItemIndexes, onChange, value, defaultValue, onValueChange, type = "multiple", collapsible = true, headingLevel = 3, region, className, triggerClassName, panelClassName, contentClassName, unMountOnClose = false, ...rootProps }) => {
+	const generatedId = useId();
+	const isValueMode = value !== void 0 || defaultValue !== void 0;
+	const isValueControlled = value !== void 0;
+	const triggerRefs = useRef([]);
+	const contentRefs = useRef([]);
+	if (isValueMode) {
+		const itemIds = /* @__PURE__ */ new Set();
+		for (const item of items) {
+			if (item.id === void 0) throw new Error("Accordion value and defaultValue require an id on every item.");
+			const key = `${typeof item.id}:${item.id}`;
+			if (itemIds.has(key)) throw new Error("Accordion item IDs must be unique.");
+			itemIds.add(key);
+		}
+	}
+	const [uncontrolledOpenItemIndexes, setUncontrolledOpenItemIndexes] = useState(() => normalizeOpenItemIndexes(initialOpenItemIndexes, items.length, type));
+	const [uncontrolledOpenItemIds, setUncontrolledOpenItemIds] = useState(() => normalizeOpenItemIds(defaultValue, type));
+	const requestedOpenItemIds = normalizeOpenItemIds(isValueControlled ? value : uncontrolledOpenItemIds, type);
+	const currentOpenItemIndexes = isValueMode ? items.flatMap((item, index) => requestedOpenItemIds.includes(item.id) ? [index] : []) : normalizeOpenItemIndexes(openItemIndexes ?? uncontrolledOpenItemIndexes, items.length, type);
+	const HeadingTag = `h${headingLevel}`;
+	const useRegions = region ?? items.length <= 6;
+	const handleToggle = (index, disabled = false) => {
+		if (disabled) return;
+		const isOpen = currentOpenItemIndexes.includes(index);
+		if (type === "single" && isOpen && !collapsible) return;
+		const nextOpenItemIndexes = normalizeOpenItemIndexes(type === "single" ? isOpen ? [] : [index] : isOpen ? currentOpenItemIndexes.filter((openIndex) => openIndex !== index) : [...currentOpenItemIndexes, index], items.length, type);
+		if (isValueMode) {
+			const nextIds = nextOpenItemIndexes.map((openIndex) => items[openIndex].id);
+			if (!isValueControlled) setUncontrolledOpenItemIds(nextIds);
+			onValueChange?.(type === "single" ? nextIds[0] ?? null : nextIds);
+		} else if (openItemIndexes === void 0) setUncontrolledOpenItemIndexes(nextOpenItemIndexes);
+		onChange?.(nextOpenItemIndexes);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("puzzle-accordion", className),
+		...rootProps,
+		children: items.map((item, index) => {
+			const isOpen = currentOpenItemIndexes.includes(index);
+			const cannotCollapse = type === "single" && isOpen && !collapsible;
+			const triggerId = `${generatedId}-trigger-${index}`;
+			const panelId = `${generatedId}-panel-${index}`;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HeadingTag, {
+				className: "puzzle-accordion__heading",
+				children: /* @__PURE__ */ jsx("button", {
+					ref: (node) => {
+						triggerRefs.current[index] = node;
+					},
+					id: triggerId,
+					type: "button",
+					className: cn("puzzle-accordion__trigger", triggerClassName),
+					"aria-expanded": isOpen,
+					"aria-controls": panelId,
+					"aria-disabled": cannotCollapse || void 0,
+					"data-state": isOpen ? "open" : "closed",
+					disabled: item.disabled,
+					onClick: () => handleToggle(index, item.disabled),
+					children: item.title
+				})
+			}), /* @__PURE__ */ jsx(Transition, {
+				visible: isOpen,
+				template: "accordion",
+				duration: 300,
+				unmountOnExit: unMountOnClose,
+				className: panelClassName,
+				id: panelId,
+				role: useRegions ? "region" : void 0,
+				"aria-labelledby": useRegions ? triggerId : void 0,
+				"aria-hidden": !isOpen,
+				inert: !isOpen,
+				"data-state": isOpen ? "open" : "closed",
+				children: /* @__PURE__ */ jsx("div", {
+					ref: (node) => {
+						contentRefs.current[index] = node;
+					},
+					className: "puzzle-accordion__panel",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "puzzle-accordion__panel-inner",
+						children: /* @__PURE__ */ jsx("div", {
+							className: cn("puzzle-accordion__content", contentClassName),
+							children: item.content
+						})
+					})
+				})
+			})] }, item.id === void 0 ? index : `${typeof item.id}:${item.id}`);
+		})
+	});
+};
+export { Accordion };
+
+//# sourceMappingURL=index.js.map

package/dist/components/navigation/accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/navigation/accordion/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Fragment,\n  useId,\n  useState,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { Transition } from \"../../utilities/transition\";\nimport \"./accordion.css\";\n\ntype AccordionType = \"single\" | \"multiple\";\ntype AccordionItemId = string | number;\ntype AccordionValue =\n  | AccordionItemId\n  | readonly AccordionItemId[]\n  | null;\n\ntype AccordionItemData = {\n  /** Stable key for the item when the list is reordered. */\n  id?: string | number;\n\n  /** Visible title of the accordion item. */\n  title: ReactNode;\n\n  /** Content shown when the item is expanded. */\n  content: ReactNode;\n\n  /** Prevents the item from being toggled by the user. */\n  disabled?: boolean;\n};\n\ntype AccordionProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\" | \"onChange\"\n> & {\n  /** Items displayed by the accordion. */\n  items: AccordionItemData[];\n\n  /** Initial expanded indexes for uncontrolled usage. Defaults to []. */\n  initialOpenItemIndexes?: number[];\n\n  /** Expanded indexes for controlled usage. */\n  openItemIndexes?: number[];\n\n  /** Called with the next expanded indexes after user interaction. */\n  onChange?: (openItemIndexes: number[]) => void;\n\n  /** Expanded item ID(s). Requires an ID on every item. */\n  value?: AccordionValue;\n\n  /** Initially expanded item ID(s). Requires an ID on every item. */\n  defaultValue?: AccordionValue;\n\n  /** Called with the next expanded item ID(s). */\n  onValueChange?: (value: AccordionItemId | AccordionItemId[] | null) => void;\n\n  /** Whether multiple items can be expanded simultaneously. */\n  type?: AccordionType;\n\n  /** Allow the currently expanded item to collapse in single mode. */\n  collapsible?: boolean;\n\n  /** Semantic heading level used for each item. Defaults to 3. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /** Adds region landmarks to the panels. Defaults to true for <= 6 items. */\n  region?: boolean;\n\n  /** Class applied to each trigger button. */\n  triggerClassName?: string;\n\n  /** Class applied to each animated panel. */\n  panelClassName?: string;\n\n  /** Class applied to the panel content wrapper. */\n  contentClassName?: string;\n\n  /** Unmount panel content after its closing animation completes. Defaults to false. */\n  unMountOnClose?: boolean;\n};\n\nconst normalizeOpenItemIndexes = (\n  indexes: number[] | undefined,\n  itemCount: number,\n  type: AccordionType,\n): number[] => {\n  const validIndexes = Array.from(\n    new Set(\n      (indexes ?? []).filter(\n        (index) => Number.isInteger(index) && index >= 0 && index < itemCount,\n      ),\n    ),\n  );\n\n  if (type === \"single\") {\n    return validIndexes.slice(0, 1);\n  }\n\n  return validIndexes.sort((a, b) => a - b);\n};\n\nconst normalizeOpenItemIds = (\n  value: AccordionValue | undefined,\n  type: AccordionType,\n): AccordionItemId[] => {\n  const ids =\n    value == null ? [] : Array.isArray(value) ? [...value] : [value];\n  const uniqueIds = Array.from(new Set(ids));\n\n  return type === \"single\" ? uniqueIds.slice(0, 1) : uniqueIds;\n};\n\nconst Accordion = ({\n  items,\n  initialOpenItemIndexes,\n  openItemIndexes,\n  onChange,\n  value,\n  defaultValue,\n  onValueChange,\n  type = \"multiple\",\n  collapsible = true,\n  headingLevel = 3,\n  region,\n  className,\n  triggerClassName,\n  panelClassName,\n  contentClassName,\n  unMountOnClose = false,\n  ...rootProps\n}: AccordionProps) => {\n  const generatedId = useId();\n  const isValueMode = value !== undefined || defaultValue !== undefined;\n  const isValueControlled = value !== undefined;\n  const triggerRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const contentRefs = useRef<(HTMLDivElement | null)[]>([]);\n\n  if (isValueMode) {\n    const itemIds = new Set<string>();\n\n    for (const item of items) {\n      if (item.id === undefined) {\n        throw new Error(\n          \"Accordion value and defaultValue require an id on every item.\",\n        );\n      }\n\n      const key = `${typeof item.id}:${item.id}`;\n\n      if (itemIds.has(key)) {\n        throw new Error(\"Accordion item IDs must be unique.\");\n      }\n\n      itemIds.add(key);\n    }\n  }\n\n  const [uncontrolledOpenItemIndexes, setUncontrolledOpenItemIndexes] =\n    useState<number[]>(() =>\n      normalizeOpenItemIndexes(initialOpenItemIndexes, items.length, type),\n    );\n\n  const [uncontrolledOpenItemIds, setUncontrolledOpenItemIds] = useState<\n    AccordionItemId[]\n  >(() => normalizeOpenItemIds(defaultValue, type));\n\n  const requestedOpenItemIds = normalizeOpenItemIds(\n    isValueControlled ? value : uncontrolledOpenItemIds,\n    type,\n  );\n  const currentOpenItemIndexes = isValueMode\n    ? items.flatMap((item, index) =>\n        requestedOpenItemIds.includes(item.id as AccordionItemId) ? [index] : [],\n      )\n    : normalizeOpenItemIndexes(\n        openItemIndexes ?? uncontrolledOpenItemIndexes,\n        items.length,\n        type,\n      );\n\n  const HeadingTag = `h${headingLevel}` as\n    | \"h1\"\n    | \"h2\"\n    | \"h3\"\n    | \"h4\"\n    | \"h5\"\n    | \"h6\";\n\n  // Avoid excessive landmark regions in long accordions.\n  const useRegions = region ?? items.length <= 6;\n\n  const handleToggle = (index: number, disabled = false) => {\n    if (disabled) {\n      return;\n    }\n\n    const isOpen = currentOpenItemIndexes.includes(index);\n\n    if (type === \"single\" && isOpen && !collapsible) {\n      return;\n    }\n\n    const nextOpenItemIndexes = normalizeOpenItemIndexes(\n      type === \"single\"\n        ? isOpen\n          ? []\n          : [index]\n        : isOpen\n          ? currentOpenItemIndexes.filter((openIndex) => openIndex !== index)\n          : [...currentOpenItemIndexes, index],\n      items.length,\n      type,\n    );\n\n    if (isValueMode) {\n      const nextIds = nextOpenItemIndexes.map(\n        (openIndex) => items[openIndex].id as AccordionItemId,\n      );\n\n      if (!isValueControlled) {\n        setUncontrolledOpenItemIds(nextIds);\n      }\n\n      onValueChange?.(\n        type === \"single\" ? (nextIds[0] ?? null) : nextIds,\n      );\n    } else if (openItemIndexes === undefined) {\n      setUncontrolledOpenItemIndexes(nextOpenItemIndexes);\n    }\n\n    onChange?.(nextOpenItemIndexes);\n  };\n\n  return (\n    <div className={cn(\"puzzle-accordion\", className)} {...rootProps}>\n      {items.map((item, index) => {\n        const isOpen = currentOpenItemIndexes.includes(index);\n        const cannotCollapse = type === \"single\" && isOpen && !collapsible;\n\n        const triggerId = `${generatedId}-trigger-${index}`;\n        const panelId = `${generatedId}-panel-${index}`;\n\n        return (\n          <Fragment\n            key={\n              item.id === undefined\n                ? index\n                : `${typeof item.id}:${item.id}`\n            }\n          >\n            <HeadingTag className=\"puzzle-accordion__heading\">\n              <button\n                ref={(node) => {\n                  triggerRefs.current[index] = node;\n                }}\n                id={triggerId}\n                type=\"button\"\n                className={cn(\"puzzle-accordion__trigger\", triggerClassName)}\n                aria-expanded={isOpen}\n                aria-controls={panelId}\n                aria-disabled={cannotCollapse || undefined}\n                data-state={isOpen ? \"open\" : \"closed\"}\n                disabled={item.disabled}\n                onClick={() => handleToggle(index, item.disabled)}\n              >\n                {item.title}\n              </button>\n            </HeadingTag>\n\n            <Transition\n              visible={isOpen}\n              template=\"accordion\"\n              duration={300}\n              unmountOnExit={unMountOnClose}\n              className={panelClassName}\n              id={panelId}\n              role={useRegions ? \"region\" : undefined}\n              aria-labelledby={useRegions ? triggerId : undefined}\n              aria-hidden={!isOpen}\n              inert={!isOpen}\n              data-state={isOpen ? \"open\" : \"closed\"}\n            >\n              <div\n                ref={(node) => {\n                  contentRefs.current[index] = node;\n                }}\n                className=\"puzzle-accordion__panel\"\n              >\n                <div className=\"puzzle-accordion__panel-inner\">\n                  <div\n                    className={cn(\n                      \"puzzle-accordion__content\",\n                      contentClassName,\n                    )}\n                  >\n                    {item.content}\n                  </div>\n                </div>\n              </div>\n            </Transition>\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n};\n\nexport {\n  Accordion,\n  type AccordionProps,\n  type AccordionItemData,\n  type AccordionType,\n  type AccordionItemId,\n  type AccordionValue,\n};\n"],"mappings":"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"}

package/dist/components/navigation/carousel/carousel.css

@@ -0,0 +1,283 @@
+.puzzle-carousel {
+  --puzzle-carousel-gap-current: var(--puzzle-carousel-gap-mobile, 0px);
+  width: 100%;
+  min-width: 0;
+  position: relative;
+}
+
+.puzzle-carousel__stage {
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  min-width: 0;
+  display: grid;
+  position: relative;
+}
+
+.puzzle-carousel__viewport {
+  touch-action: pan-y;
+  overscroll-behavior-x: contain;
+  cursor: grab;
+  overflow: hidden;
+}
+
+.puzzle-carousel__track {
+  align-items: stretch;
+  column-gap: var(--puzzle-carousel-gap-current);
+  will-change: transform;
+  transition: transform .28s;
+  display: flex;
+}
+
+.puzzle-carousel__item {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.puzzle-carousel[data-sizing="panels"] .puzzle-carousel__item {
+  flex: 0 0 var(--puzzle-carousel-basis-mobile);
+  width: var(--puzzle-carousel-basis-mobile);
+}
+
+.puzzle-carousel[data-sizing="item-width"] .puzzle-carousel__item {
+  flex: 0 0 var(--puzzle-carousel-item-width-mobile);
+  width: var(--puzzle-carousel-item-width-mobile);
+}
+
+.puzzle-carousel[data-dragging="true"] .puzzle-carousel__viewport {
+  cursor: grabbing;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.puzzle-carousel[data-dragging="true"] .puzzle-carousel__viewport * {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.puzzle-carousel__viewport img {
+  -webkit-user-drag: none;
+}
+
+.puzzle-carousel[data-dragging="true"] .puzzle-carousel__track, .puzzle-carousel[data-animating="true"] .puzzle-carousel__track {
+  transition: none;
+}
+
+.puzzle-carousel[data-single-page="true"][data-single-page-alignment="left"] .puzzle-carousel__track {
+  justify-content: flex-start;
+}
+
+.puzzle-carousel[data-single-page="true"][data-single-page-alignment="center"] .puzzle-carousel__track {
+  justify-content: center;
+}
+
+.puzzle-carousel[data-single-page="true"][data-single-page-alignment="right"] .puzzle-carousel__track {
+  justify-content: flex-end;
+}
+
+.puzzle-carousel__navigation {
+  z-index: 3;
+  justify-content: center;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+  position: absolute;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
+
+.puzzle-carousel__navigation--previous {
+  inset-inline-start: 0;
+}
+
+.puzzle-carousel__navigation--next {
+  inset-inline-end: 0;
+}
+
+.puzzle-carousel__pager {
+  z-index: 2;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  display: flex;
+  position: relative;
+}
+
+.puzzle-carousel[data-button-mobile="aside"] .puzzle-carousel__stage {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  column-gap: 1rem;
+}
+
+.puzzle-carousel[data-button-mobile="aside"] .puzzle-carousel__navigation {
+  position: static;
+  inset: auto;
+  transform: none;
+}
+
+.puzzle-carousel[data-button-mobile="aside"] .puzzle-carousel__navigation--previous {
+  grid-area: 1 / 1;
+}
+
+.puzzle-carousel[data-button-mobile="aside"] .puzzle-carousel__viewport {
+  grid-area: 1 / 2;
+}
+
+.puzzle-carousel[data-button-mobile="aside"] .puzzle-carousel__navigation--next {
+  grid-area: 1 / 3;
+}
+
+.puzzle-carousel[data-pager-mobile="over"] .puzzle-carousel__pager {
+  position: absolute;
+  inset: auto 0 0;
+}
+
+@media (width >= 768px) {
+  .puzzle-carousel {
+    --puzzle-carousel-gap-current: var(--puzzle-carousel-gap-tablet, var(--puzzle-carousel-gap-mobile, 0px));
+  }
+
+  .puzzle-carousel[data-sizing="panels"] .puzzle-carousel__item {
+    flex-basis: var(--puzzle-carousel-basis-tablet);
+    width: var(--puzzle-carousel-basis-tablet);
+  }
+
+  .puzzle-carousel[data-sizing="item-width"] .puzzle-carousel__item {
+    flex-basis: var(--puzzle-carousel-item-width-tablet);
+    width: var(--puzzle-carousel-item-width-tablet);
+  }
+
+  .puzzle-carousel[data-button-tablet="aside"] .puzzle-carousel__stage {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    column-gap: 1rem;
+  }
+
+  .puzzle-carousel[data-button-tablet="aside"] .puzzle-carousel__navigation {
+    position: static;
+    inset: auto;
+    transform: none;
+  }
+
+  .puzzle-carousel[data-button-tablet="aside"] .puzzle-carousel__navigation--previous {
+    grid-area: 1 / 1;
+  }
+
+  .puzzle-carousel[data-button-tablet="aside"] .puzzle-carousel__viewport {
+    grid-area: 1 / 2;
+  }
+
+  .puzzle-carousel[data-button-tablet="aside"] .puzzle-carousel__navigation--next {
+    grid-area: 1 / 3;
+  }
+
+  .puzzle-carousel[data-button-tablet="over"] .puzzle-carousel__stage {
+    grid-template-columns: minmax(0, 1fr);
+    column-gap: 0;
+  }
+
+  .puzzle-carousel[data-button-tablet="over"] .puzzle-carousel__navigation {
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+  }
+
+  .puzzle-carousel[data-button-tablet="over"] .puzzle-carousel__navigation--previous {
+    inset-inline: 0 auto;
+  }
+
+  .puzzle-carousel[data-button-tablet="over"] .puzzle-carousel__navigation--next {
+    inset-inline: auto 0;
+  }
+
+  .puzzle-carousel[data-button-tablet="over"] .puzzle-carousel__viewport {
+    grid-area: 1 / 1;
+  }
+
+  .puzzle-carousel[data-pager-tablet="below"] .puzzle-carousel__pager {
+    position: relative;
+    inset: auto;
+  }
+
+  .puzzle-carousel[data-pager-tablet="over"] .puzzle-carousel__pager {
+    position: absolute;
+    inset: auto 0 0;
+  }
+}
+
+@media (width >= 1024px) {
+  .puzzle-carousel {
+    --puzzle-carousel-gap-current: var(--puzzle-carousel-gap-desktop, var(--puzzle-carousel-gap-tablet, var(--puzzle-carousel-gap-mobile, 0px)));
+  }
+
+  .puzzle-carousel[data-sizing="panels"] .puzzle-carousel__item {
+    flex-basis: var(--puzzle-carousel-basis-desktop);
+    width: var(--puzzle-carousel-basis-desktop);
+  }
+
+  .puzzle-carousel[data-sizing="item-width"] .puzzle-carousel__item {
+    flex-basis: var(--puzzle-carousel-item-width-desktop);
+    width: var(--puzzle-carousel-item-width-desktop);
+  }
+
+  .puzzle-carousel[data-button-desktop="aside"] .puzzle-carousel__stage {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    column-gap: 1rem;
+  }
+
+  .puzzle-carousel[data-button-desktop="aside"] .puzzle-carousel__navigation {
+    position: static;
+    inset: auto;
+    transform: none;
+  }
+
+  .puzzle-carousel[data-button-desktop="aside"] .puzzle-carousel__navigation--previous {
+    grid-area: 1 / 1;
+  }
+
+  .puzzle-carousel[data-button-desktop="aside"] .puzzle-carousel__viewport {
+    grid-area: 1 / 2;
+  }
+
+  .puzzle-carousel[data-button-desktop="aside"] .puzzle-carousel__navigation--next {
+    grid-area: 1 / 3;
+  }
+
+  .puzzle-carousel[data-button-desktop="over"] .puzzle-carousel__stage {
+    grid-template-columns: minmax(0, 1fr);
+    column-gap: 0;
+  }
+
+  .puzzle-carousel[data-button-desktop="over"] .puzzle-carousel__navigation {
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+  }
+
+  .puzzle-carousel[data-button-desktop="over"] .puzzle-carousel__navigation--previous {
+    inset-inline: 0 auto;
+  }
+
+  .puzzle-carousel[data-button-desktop="over"] .puzzle-carousel__navigation--next {
+    inset-inline: auto 0;
+  }
+
+  .puzzle-carousel[data-button-desktop="over"] .puzzle-carousel__viewport {
+    grid-area: 1 / 1;
+  }
+
+  .puzzle-carousel[data-pager-desktop="below"] .puzzle-carousel__pager {
+    position: relative;
+    inset: auto;
+  }
+
+  .puzzle-carousel[data-pager-desktop="over"] .puzzle-carousel__pager {
+    position: absolute;
+    inset: auto 0 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-carousel__track {
+    will-change: auto;
+    transition: none;
+  }
+}

package/dist/components/navigation/carousel/controller.cjs

@@ -0,0 +1,46 @@
+"use client";
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/navigation/carousel/controller.tsx
+const CarouselContext = (0, react.createContext)(null);
+const normalizePanel = (panel) => {
+	if (!Number.isFinite(panel)) return 0;
+	return Math.max(0, Math.floor(panel));
+};
+const CarouselController = ({ items, children, currentPanel: controlledPanel, defaultPanel = 0, onPanelChange }) => {
+	const isControlled = controlledPanel !== void 0;
+	const [internalPanel, setInternalPanel] = (0, react.useState)(() => normalizePanel(defaultPanel));
+	const currentPanel = normalizePanel(isControlled ? controlledPanel : internalPanel);
+	const setPanel = (0, react.useCallback)((panel) => {
+		const nextPanel = normalizePanel(panel);
+		if (nextPanel === currentPanel) return;
+		if (!isControlled) setInternalPanel(nextPanel);
+		onPanelChange?.(nextPanel);
+	}, [
+		currentPanel,
+		isControlled,
+		onPanelChange
+	]);
+	const contextValue = (0, react.useMemo)(() => ({
+		currentPanel,
+		setPanel,
+		items
+	}), [
+		currentPanel,
+		setPanel,
+		items
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CarouselContext.Provider, {
+		value: contextValue,
+		children
+	});
+};
+const useCarouselContext = () => {
+	const context = (0, react.useContext)(CarouselContext);
+	if (!context) throw new Error("useCarouselContext must be used within a CarouselController.");
+	return context;
+};
+exports.CarouselController = CarouselController;
+exports.useCarouselContext = useCarouselContext;
+
+//# sourceMappingURL=controller.cjs.map

package/dist/components/navigation/carousel/controller.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.cjs","names":["createContext","useState","useCallback","useMemo","useContext"],"sources":["../../../../src/components/navigation/carousel/controller.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\n\ntype CarouselContextValue<T> = {\n  currentPanel: number;\n  setPanel: (panel: number) => void;\n  items: T[];\n};\n\ntype CarouselControllerProps<T> = {\n  items: T[];\n  children: ReactNode;\n  currentPanel?: number;\n  defaultPanel?: number;\n  onPanelChange?: (panel: number) => void;\n};\n\nconst CarouselContext = createContext<CarouselContextValue<unknown> | null>(\n  null,\n);\n\nconst normalizePanel = (panel: number) => {\n  if (!Number.isFinite(panel)) {\n    return 0;\n  }\n\n  return Math.max(0, Math.floor(panel));\n};\n\nconst CarouselController = <T,>({\n  items,\n  children,\n  currentPanel: controlledPanel,\n  defaultPanel = 0,\n  onPanelChange,\n}: CarouselControllerProps<T>) => {\n  const isControlled = controlledPanel !== undefined;\n\n  const [internalPanel, setInternalPanel] = useState(() =>\n    normalizePanel(defaultPanel),\n  );\n\n  const currentPanel = normalizePanel(\n    isControlled ? controlledPanel : internalPanel,\n  );\n\n  const setPanel = useCallback(\n    (panel: number) => {\n      const nextPanel = normalizePanel(panel);\n\n      if (nextPanel === currentPanel) {\n        return;\n      }\n\n      if (!isControlled) {\n        setInternalPanel(nextPanel);\n      }\n\n      onPanelChange?.(nextPanel);\n    },\n    [currentPanel, isControlled, onPanelChange],\n  );\n\n  const contextValue = useMemo<CarouselContextValue<T>>(\n    () => ({\n      currentPanel,\n      setPanel,\n      items,\n    }),\n    [currentPanel, setPanel, items],\n  );\n\n  return (\n    <CarouselContext.Provider\n      value={contextValue as CarouselContextValue<unknown>}\n    >\n      {children}\n    </CarouselContext.Provider>\n  );\n};\n\nconst useCarouselContext = <T,>() => {\n  const context = useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\n      \"useCarouselContext must be used within a CarouselController.\",\n    );\n  }\n\n  return context as CarouselContextValue<T>;\n};\n\nexport {\n  CarouselController,\n  useCarouselContext,\n  type CarouselControllerProps,\n  type CarouselContextValue,\n};\n"],"mappings":";;;;AAyBA,MAAM,mBAAA,GAAkBA,MAAAA,cAAAA,CACtB,IACF;AAEA,MAAM,kBAAkB,UAAkB;CACxC,IAAI,CAAC,OAAO,SAAS,KAAK,GACxB,OAAO;CAGT,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC;AACtC;AAEA,MAAM,sBAA0B,EAC9B,OACA,UACA,cAAc,iBACd,eAAe,GACf,oBACgC;CAChC,MAAM,eAAe,oBAAoB,KAAA;CAEzC,MAAM,CAAC,eAAe,qBAAA,GAAoBC,MAAAA,SAAAA,OACxC,eAAe,YAAY,CAC7B;CAEA,MAAM,eAAe,eACnB,eAAe,kBAAkB,aACnC;CAEA,MAAM,YAAA,GAAWC,MAAAA,YAAAA,EACd,UAAkB;EACjB,MAAM,YAAY,eAAe,KAAK;EAEtC,IAAI,cAAc,cAChB;EAGF,IAAI,CAAC,cACH,iBAAiB,SAAS;EAG5B,gBAAgB,SAAS;CAC3B,GACA;EAAC;EAAc;EAAc;CAAa,CAC5C;CAEA,MAAM,gBAAA,GAAeC,MAAAA,QAAAA,QACZ;EACL;EACA;EACA;CACF,IACA;EAAC;EAAc;EAAU;CAAK,CAChC;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAgB,UAAjB;EACE,OAAO;EAEN;CACuB,CAAA;AAE9B;AAEA,MAAM,2BAA+B;CACnC,MAAM,WAAA,GAAUC,MAAAA,WAAAA,CAAW,eAAe;CAE1C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,8DACF;CAGF,OAAO;AACT"}

package/dist/components/navigation/carousel/controller.d.cts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+type CarouselContextValue<T> = {
+  currentPanel: number;
+  setPanel: (panel: number) => void;
+  items: T[];
+};
+type CarouselControllerProps<T> = {
+  items: T[];
+  children: ReactNode;
+  currentPanel?: number;
+  defaultPanel?: number;
+  onPanelChange?: (panel: number) => void;
+};
+declare const CarouselController: <T>({ items, children, currentPanel: controlledPanel, defaultPanel, onPanelChange }: CarouselControllerProps<T>) => import("react").JSX.Element;
+declare const useCarouselContext: <T>() => CarouselContextValue<T>;
+export { type CarouselContextValue, CarouselController, type CarouselControllerProps, useCarouselContext };

package/dist/components/navigation/carousel/controller.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+type CarouselContextValue<T> = {
+  currentPanel: number;
+  setPanel: (panel: number) => void;
+  items: T[];
+};
+type CarouselControllerProps<T> = {
+  items: T[];
+  children: ReactNode;
+  currentPanel?: number;
+  defaultPanel?: number;
+  onPanelChange?: (panel: number) => void;
+};
+declare const CarouselController: <T>({ items, children, currentPanel: controlledPanel, defaultPanel, onPanelChange }: CarouselControllerProps<T>) => import("react").JSX.Element;
+declare const useCarouselContext: <T>() => CarouselContextValue<T>;
+export { type CarouselContextValue, CarouselController, type CarouselControllerProps, useCarouselContext };

package/dist/components/navigation/carousel/controller.js

@@ -0,0 +1,45 @@
+"use client";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/navigation/carousel/controller.tsx
+const CarouselContext = createContext(null);
+const normalizePanel = (panel) => {
+	if (!Number.isFinite(panel)) return 0;
+	return Math.max(0, Math.floor(panel));
+};
+const CarouselController = ({ items, children, currentPanel: controlledPanel, defaultPanel = 0, onPanelChange }) => {
+	const isControlled = controlledPanel !== void 0;
+	const [internalPanel, setInternalPanel] = useState(() => normalizePanel(defaultPanel));
+	const currentPanel = normalizePanel(isControlled ? controlledPanel : internalPanel);
+	const setPanel = useCallback((panel) => {
+		const nextPanel = normalizePanel(panel);
+		if (nextPanel === currentPanel) return;
+		if (!isControlled) setInternalPanel(nextPanel);
+		onPanelChange?.(nextPanel);
+	}, [
+		currentPanel,
+		isControlled,
+		onPanelChange
+	]);
+	const contextValue = useMemo(() => ({
+		currentPanel,
+		setPanel,
+		items
+	}), [
+		currentPanel,
+		setPanel,
+		items
+	]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: contextValue,
+		children
+	});
+};
+const useCarouselContext = () => {
+	const context = useContext(CarouselContext);
+	if (!context) throw new Error("useCarouselContext must be used within a CarouselController.");
+	return context;
+};
+export { CarouselController, useCarouselContext };
+
+//# sourceMappingURL=controller.js.map

package/dist/components/navigation/carousel/controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.js","names":[],"sources":["../../../../src/components/navigation/carousel/controller.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\n\ntype CarouselContextValue<T> = {\n  currentPanel: number;\n  setPanel: (panel: number) => void;\n  items: T[];\n};\n\ntype CarouselControllerProps<T> = {\n  items: T[];\n  children: ReactNode;\n  currentPanel?: number;\n  defaultPanel?: number;\n  onPanelChange?: (panel: number) => void;\n};\n\nconst CarouselContext = createContext<CarouselContextValue<unknown> | null>(\n  null,\n);\n\nconst normalizePanel = (panel: number) => {\n  if (!Number.isFinite(panel)) {\n    return 0;\n  }\n\n  return Math.max(0, Math.floor(panel));\n};\n\nconst CarouselController = <T,>({\n  items,\n  children,\n  currentPanel: controlledPanel,\n  defaultPanel = 0,\n  onPanelChange,\n}: CarouselControllerProps<T>) => {\n  const isControlled = controlledPanel !== undefined;\n\n  const [internalPanel, setInternalPanel] = useState(() =>\n    normalizePanel(defaultPanel),\n  );\n\n  const currentPanel = normalizePanel(\n    isControlled ? controlledPanel : internalPanel,\n  );\n\n  const setPanel = useCallback(\n    (panel: number) => {\n      const nextPanel = normalizePanel(panel);\n\n      if (nextPanel === currentPanel) {\n        return;\n      }\n\n      if (!isControlled) {\n        setInternalPanel(nextPanel);\n      }\n\n      onPanelChange?.(nextPanel);\n    },\n    [currentPanel, isControlled, onPanelChange],\n  );\n\n  const contextValue = useMemo<CarouselContextValue<T>>(\n    () => ({\n      currentPanel,\n      setPanel,\n      items,\n    }),\n    [currentPanel, setPanel, items],\n  );\n\n  return (\n    <CarouselContext.Provider\n      value={contextValue as CarouselContextValue<unknown>}\n    >\n      {children}\n    </CarouselContext.Provider>\n  );\n};\n\nconst useCarouselContext = <T,>() => {\n  const context = useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\n      \"useCarouselContext must be used within a CarouselController.\",\n    );\n  }\n\n  return context as CarouselContextValue<T>;\n};\n\nexport {\n  CarouselController,\n  useCarouselContext,\n  type CarouselControllerProps,\n  type CarouselContextValue,\n};\n"],"mappings":";;;;AAyBA,MAAM,kBAAkB,cACtB,IACF;AAEA,MAAM,kBAAkB,UAAkB;CACxC,IAAI,CAAC,OAAO,SAAS,KAAK,GACxB,OAAO;CAGT,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC;AACtC;AAEA,MAAM,sBAA0B,EAC9B,OACA,UACA,cAAc,iBACd,eAAe,GACf,oBACgC;CAChC,MAAM,eAAe,oBAAoB,KAAA;CAEzC,MAAM,CAAC,eAAe,oBAAoB,eACxC,eAAe,YAAY,CAC7B;CAEA,MAAM,eAAe,eACnB,eAAe,kBAAkB,aACnC;CAEA,MAAM,WAAW,aACd,UAAkB;EACjB,MAAM,YAAY,eAAe,KAAK;EAEtC,IAAI,cAAc,cAChB;EAGF,IAAI,CAAC,cACH,iBAAiB,SAAS;EAG5B,gBAAgB,SAAS;CAC3B,GACA;EAAC;EAAc;EAAc;CAAa,CAC5C;CAEA,MAAM,eAAe,eACZ;EACL;EACA;EACA;CACF,IACA;EAAC;EAAc;EAAU;CAAK,CAChC;CAEA,OACE,oBAAC,gBAAgB,UAAjB;EACE,OAAO;EAEN;CACuB,CAAA;AAE9B;AAEA,MAAM,2BAA+B;CACnC,MAAM,UAAU,WAAW,eAAe;CAE1C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,8DACF;CAGF,OAAO;AACT"}