@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/layout/stack/stack.css

@@ -0,0 +1,303 @@
+.puzzle-stack {
+  gap: var(--puzzle-space-4, 1rem);
+  justify-content: flex-start;
+  align-items: stretch;
+  display: flex;
+}
+
+.puzzle-stack.nowrap {
+  flex-wrap: nowrap;
+}
+
+.puzzle-stack.wrap {
+  flex-wrap: wrap;
+}
+
+.puzzle-stack.wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.puzzle-stack.gap-0 {
+  gap: 0;
+}
+
+.puzzle-stack.gap-xs {
+  gap: var(--puzzle-space-1, .25rem);
+}
+
+.puzzle-stack.gap-sm {
+  gap: var(--puzzle-space-2, .5rem);
+}
+
+.puzzle-stack.gap-md {
+  gap: var(--puzzle-space-3, .75rem);
+}
+
+.puzzle-stack.gap-lg {
+  gap: var(--puzzle-space-4, 1rem);
+}
+
+.puzzle-stack.gap-xl {
+  gap: var(--puzzle-space-5, 1.25rem);
+}
+
+.puzzle-stack.direction-mobile-row {
+  flex-direction: row;
+}
+
+.puzzle-stack.direction-mobile-row.reverse {
+  flex-direction: row-reverse;
+}
+
+.puzzle-stack.direction-mobile-col {
+  flex-direction: column;
+}
+
+.puzzle-stack.direction-mobile-col.reverse {
+  flex-direction: column-reverse;
+}
+
+.puzzle-stack.direction-mobile-row.align-h-start, .puzzle-stack.direction-mobile-col.align-v-start {
+  justify-content: flex-start;
+}
+
+.puzzle-stack.direction-mobile-row.align-h-center, .puzzle-stack.direction-mobile-col.align-v-center {
+  justify-content: center;
+}
+
+.puzzle-stack.direction-mobile-row.align-h-end, .puzzle-stack.direction-mobile-col.align-v-end {
+  justify-content: flex-end;
+}
+
+.puzzle-stack.direction-mobile-row.align-h-stretch, .puzzle-stack.direction-mobile-col.align-v-stretch {
+  justify-content: stretch;
+}
+
+.puzzle-stack.direction-mobile-row.align-h-around, .puzzle-stack.direction-mobile-col.align-v-around {
+  justify-content: space-around;
+}
+
+.puzzle-stack.direction-mobile-row.align-h-between, .puzzle-stack.direction-mobile-col.align-v-between {
+  justify-content: space-between;
+}
+
+.puzzle-stack.direction-mobile-row.align-h-evenly, .puzzle-stack.direction-mobile-col.align-v-evenly {
+  justify-content: space-evenly;
+}
+
+.puzzle-stack.direction-mobile-row.align-v-start, .puzzle-stack.direction-mobile-col.align-h-start {
+  align-items: flex-start;
+}
+
+.puzzle-stack.direction-mobile-row.align-v-center, .puzzle-stack.direction-mobile-col.align-h-center {
+  align-items: center;
+}
+
+.puzzle-stack.direction-mobile-row.align-v-end, .puzzle-stack.direction-mobile-col.align-h-end {
+  align-items: flex-end;
+}
+
+.puzzle-stack.direction-mobile-row.align-v-stretch, .puzzle-stack.direction-mobile-col.align-h-stretch {
+  align-items: stretch;
+}
+
+@media (width >= 768px) {
+  .puzzle-stack.direction-tablet-row {
+    flex-direction: row;
+  }
+
+  .puzzle-stack.direction-tablet-row.reverse {
+    flex-direction: row-reverse;
+  }
+
+  .puzzle-stack.direction-tablet-col {
+    flex-direction: column;
+  }
+
+  .puzzle-stack.direction-tablet-col.reverse {
+    flex-direction: column-reverse;
+  }
+
+  .puzzle-stack.direction-tablet-row.has-alignment, .puzzle-stack.direction-tablet-col.has-alignment {
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+
+  .puzzle-stack.direction-tablet-row.align-h-start, .puzzle-stack.direction-tablet-col.align-v-start {
+    justify-content: flex-start;
+  }
+
+  .puzzle-stack.direction-tablet-row.align-h-center, .puzzle-stack.direction-tablet-col.align-v-center {
+    justify-content: center;
+  }
+
+  .puzzle-stack.direction-tablet-row.align-h-end, .puzzle-stack.direction-tablet-col.align-v-end {
+    justify-content: flex-end;
+  }
+
+  .puzzle-stack.direction-tablet-row.align-h-stretch, .puzzle-stack.direction-tablet-col.align-v-stretch {
+    justify-content: stretch;
+  }
+
+  .puzzle-stack.direction-tablet-row.align-h-around, .puzzle-stack.direction-tablet-col.align-v-around {
+    justify-content: space-around;
+  }
+
+  .puzzle-stack.direction-tablet-row.align-h-between, .puzzle-stack.direction-tablet-col.align-v-between {
+    justify-content: space-between;
+  }
+
+  .puzzle-stack.direction-tablet-row.align-h-evenly, .puzzle-stack.direction-tablet-col.align-v-evenly {
+    justify-content: space-evenly;
+  }
+
+  .puzzle-stack.direction-tablet-row.align-v-start, .puzzle-stack.direction-tablet-col.align-h-start {
+    align-items: flex-start;
+  }
+
+  .puzzle-stack.direction-tablet-row.align-v-center, .puzzle-stack.direction-tablet-col.align-h-center {
+    align-items: center;
+  }
+
+  .puzzle-stack.direction-tablet-row.align-v-end, .puzzle-stack.direction-tablet-col.align-h-end {
+    align-items: flex-end;
+  }
+
+  .puzzle-stack.direction-tablet-row.align-v-stretch, .puzzle-stack.direction-tablet-col.align-h-stretch {
+    align-items: stretch;
+  }
+}
+
+@media (width >= 1024px) {
+  .puzzle-stack.direction-desktop-row {
+    flex-direction: row;
+  }
+
+  .puzzle-stack.direction-desktop-row.reverse {
+    flex-direction: row-reverse;
+  }
+
+  .puzzle-stack.direction-desktop-col {
+    flex-direction: column;
+  }
+
+  .puzzle-stack.direction-desktop-col.reverse {
+    flex-direction: column-reverse;
+  }
+
+  .puzzle-stack.direction-desktop-row.has-alignment, .puzzle-stack.direction-desktop-col.has-alignment {
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+
+  .puzzle-stack.direction-desktop-row.align-h-start, .puzzle-stack.direction-desktop-col.align-v-start {
+    justify-content: flex-start;
+  }
+
+  .puzzle-stack.direction-desktop-row.align-h-center, .puzzle-stack.direction-desktop-col.align-v-center {
+    justify-content: center;
+  }
+
+  .puzzle-stack.direction-desktop-row.align-h-end, .puzzle-stack.direction-desktop-col.align-v-end {
+    justify-content: flex-end;
+  }
+
+  .puzzle-stack.direction-desktop-row.align-h-stretch, .puzzle-stack.direction-desktop-col.align-v-stretch {
+    justify-content: stretch;
+  }
+
+  .puzzle-stack.direction-desktop-row.align-h-around, .puzzle-stack.direction-desktop-col.align-v-around {
+    justify-content: space-around;
+  }
+
+  .puzzle-stack.direction-desktop-row.align-h-between, .puzzle-stack.direction-desktop-col.align-v-between {
+    justify-content: space-between;
+  }
+
+  .puzzle-stack.direction-desktop-row.align-h-evenly, .puzzle-stack.direction-desktop-col.align-v-evenly {
+    justify-content: space-evenly;
+  }
+
+  .puzzle-stack.direction-desktop-row.align-v-start, .puzzle-stack.direction-desktop-col.align-h-start {
+    align-items: flex-start;
+  }
+
+  .puzzle-stack.direction-desktop-row.align-v-center, .puzzle-stack.direction-desktop-col.align-h-center {
+    align-items: center;
+  }
+
+  .puzzle-stack.direction-desktop-row.align-v-end, .puzzle-stack.direction-desktop-col.align-h-end {
+    align-items: flex-end;
+  }
+
+  .puzzle-stack.direction-desktop-row.align-v-stretch, .puzzle-stack.direction-desktop-col.align-h-stretch {
+    align-items: stretch;
+  }
+}
+
+@media (width >= 1440px) {
+  .puzzle-stack.direction-hd-row {
+    flex-direction: row;
+  }
+
+  .puzzle-stack.direction-hd-row.reverse {
+    flex-direction: row-reverse;
+  }
+
+  .puzzle-stack.direction-hd-col {
+    flex-direction: column;
+  }
+
+  .puzzle-stack.direction-hd-col.reverse {
+    flex-direction: column-reverse;
+  }
+
+  .puzzle-stack.direction-hd-row.has-alignment, .puzzle-stack.direction-hd-col.has-alignment {
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+
+  .puzzle-stack.direction-hd-row.align-h-start, .puzzle-stack.direction-hd-col.align-v-start {
+    justify-content: flex-start;
+  }
+
+  .puzzle-stack.direction-hd-row.align-h-center, .puzzle-stack.direction-hd-col.align-v-center {
+    justify-content: center;
+  }
+
+  .puzzle-stack.direction-hd-row.align-h-end, .puzzle-stack.direction-hd-col.align-v-end {
+    justify-content: flex-end;
+  }
+
+  .puzzle-stack.direction-hd-row.align-h-stretch, .puzzle-stack.direction-hd-col.align-v-stretch {
+    justify-content: stretch;
+  }
+
+  .puzzle-stack.direction-hd-row.align-h-around, .puzzle-stack.direction-hd-col.align-v-around {
+    justify-content: space-around;
+  }
+
+  .puzzle-stack.direction-hd-row.align-h-between, .puzzle-stack.direction-hd-col.align-v-between {
+    justify-content: space-between;
+  }
+
+  .puzzle-stack.direction-hd-row.align-h-evenly, .puzzle-stack.direction-hd-col.align-v-evenly {
+    justify-content: space-evenly;
+  }
+
+  .puzzle-stack.direction-hd-row.align-v-start, .puzzle-stack.direction-hd-col.align-h-start {
+    align-items: flex-start;
+  }
+
+  .puzzle-stack.direction-hd-row.align-v-center, .puzzle-stack.direction-hd-col.align-h-center {
+    align-items: center;
+  }
+
+  .puzzle-stack.direction-hd-row.align-v-end, .puzzle-stack.direction-hd-col.align-h-end {
+    align-items: flex-end;
+  }
+
+  .puzzle-stack.direction-hd-row.align-v-stretch, .puzzle-stack.direction-hd-col.align-h-stretch {
+    align-items: stretch;
+  }
+}

package/dist/components/navigation/accordion/accordion.css

@@ -0,0 +1,97 @@
+.puzzle-accordion {
+  --puzzle-accordion-border-color: var(--puzzle-color-border, #e5e0d6);
+  --puzzle-accordion-trigger-padding-block: var(--puzzle-space-4, 1rem);
+  --puzzle-accordion-trigger-padding-inline: var(--puzzle-space-4, 1rem);
+  --puzzle-accordion-content-padding-inline: var(--puzzle-space-4, 1rem);
+  --puzzle-accordion-content-padding-top: var(--puzzle-space-2, .5rem);
+  --puzzle-accordion-content-padding-bottom: var(--puzzle-space-4, 1rem);
+  --puzzle-accordion-duration: var(--puzzle-duration-normal, .3s);
+  --puzzle-accordion-easing: var(--puzzle-easing-standard, ease);
+  color: var(--puzzle-color-text, #171717);
+  border-block-end: var(--puzzle-border-width, 1px) solid var(--puzzle-accordion-border-color);
+}
+
+.puzzle-accordion:empty {
+  border-block-end: 0;
+}
+
+.puzzle-accordion__heading {
+  border-block-start: var(--puzzle-border-width, 1px) solid var(--puzzle-accordion-border-color);
+  margin: 0;
+}
+
+.puzzle-accordion__trigger {
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--puzzle-space-3, .75rem);
+  width: 100%;
+  padding: var(--puzzle-accordion-trigger-padding-block) var(--puzzle-accordion-trigger-padding-inline);
+  color: inherit;
+  font-family: var(--puzzle-font-family-subtitle1, inherit);
+  font-size: var(--puzzle-font-size-subtitle1, 1rem);
+  font-weight: var(--puzzle-font-weight-subtitle1, 600);
+  line-height: var(--puzzle-font-line-height-subtitle1, 1.35);
+  letter-spacing: var(--puzzle-font-letter-spacing-subtitle1, 0);
+  text-align: start;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: background-color var(--puzzle-accordion-duration) var(--puzzle-accordion-easing);
+  background: none;
+  border: 0;
+  border-radius: 0;
+  display: flex;
+}
+
+.puzzle-accordion__trigger:hover:not(:disabled) {
+  background-color: var(--puzzle-color-surface-sunken);
+}
+
+.puzzle-accordion__trigger:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: -3px;
+}
+
+.puzzle-accordion__trigger:disabled {
+  cursor: not-allowed;
+  opacity: .55;
+}
+
+.puzzle-accordion__trigger:after {
+  content: "";
+  width: var(--puzzle-space-2, .5rem);
+  height: var(--puzzle-space-2, .5rem);
+  border-inline-end: var(--puzzle-border-width-strong, 2px) solid currentColor;
+  border-block-end: var(--puzzle-border-width-strong, 2px) solid currentColor;
+  transition: transform var(--puzzle-accordion-duration) var(--puzzle-accordion-easing);
+  flex: none;
+  transform: translateY(-.125em) rotate(45deg);
+}
+
+.puzzle-accordion__trigger[aria-expanded="true"]:after {
+  transform: translateY(.125em) rotate(225deg);
+}
+
+.puzzle-accordion__panel, .puzzle-accordion__panel-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.puzzle-accordion__content {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-inline: var(--puzzle-accordion-content-padding-inline);
+  color: var(--puzzle-color-text-muted);
+  transition: padding-top var(--puzzle-accordion-duration) var(--puzzle-accordion-easing),
+        padding-bottom var(--puzzle-accordion-duration) var(--puzzle-accordion-easing);
+}
+
+.puzzle-accordion__panel.puzzle-transition-accordion-active .puzzle-accordion__content {
+  padding-top: var(--puzzle-accordion-content-padding-top);
+  padding-bottom: var(--puzzle-accordion-content-padding-bottom);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-accordion__content {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,107 @@
+"use client";
+const require_index = require("../../utilities/transition/index.cjs");
+;/* empty css                */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("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 = (0, react.useId)();
+	const isValueMode = value !== void 0 || defaultValue !== void 0;
+	const isValueControlled = value !== void 0;
+	const triggerRefs = (0, react.useRef)([]);
+	const contentRefs = (0, react.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] = (0, react.useState)(() => normalizeOpenItemIndexes(initialOpenItemIndexes, items.length, type));
+	const [uncontrolledOpenItemIds, setUncontrolledOpenItemIds] = (0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _puzzle_ui_core.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__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeadingTag, {
+				className: "puzzle-accordion__heading",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					ref: (node) => {
+						triggerRefs.current[index] = node;
+					},
+					id: triggerId,
+					type: "button",
+					className: (0, _puzzle_ui_core.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__ */ (0, react_jsx_runtime.jsx)(require_index.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__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: (node) => {
+						contentRefs.current[index] = node;
+					},
+					className: "puzzle-accordion__panel",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "puzzle-accordion__panel-inner",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, _puzzle_ui_core.cn)("puzzle-accordion__content", contentClassName),
+							children: item.content
+						})
+					})
+				})
+			})] }, item.id === void 0 ? index : `${typeof item.id}:${item.id}`);
+		})
+	});
+};
+exports.Accordion = Accordion;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useId","useRef","useState","cn","Fragment","Transition"],"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/accordion/index.d.cts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+type AccordionType = "single" | "multiple";
+type AccordionItemId = string | number;
+type AccordionValue = AccordionItemId | readonly AccordionItemId[] | null;
+type AccordionItemData = {
+  /** Stable key for the item when the list is reordered. */
+  id?: string | number;
+  /** Visible title of the accordion item. */
+  title: ReactNode;
+  /** Content shown when the item is expanded. */
+  content: ReactNode;
+  /** Prevents the item from being toggled by the user. */
+  disabled?: boolean;
+};
+type AccordionProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange"> & {
+  /** Items displayed by the accordion. */
+  items: AccordionItemData[];
+  /** Initial expanded indexes for uncontrolled usage. Defaults to []. */
+  initialOpenItemIndexes?: number[];
+  /** Expanded indexes for controlled usage. */
+  openItemIndexes?: number[];
+  /** Called with the next expanded indexes after user interaction. */
+  onChange?: (openItemIndexes: number[]) => void;
+  /** Expanded item ID(s). Requires an ID on every item. */
+  value?: AccordionValue;
+  /** Initially expanded item ID(s). Requires an ID on every item. */
+  defaultValue?: AccordionValue;
+  /** Called with the next expanded item ID(s). */
+  onValueChange?: (value: AccordionItemId | AccordionItemId[] | null) => void;
+  /** Whether multiple items can be expanded simultaneously. */
+  type?: AccordionType;
+  /** Allow the currently expanded item to collapse in single mode. */
+  collapsible?: boolean;
+  /** Semantic heading level used for each item. Defaults to 3. */
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Adds region landmarks to the panels. Defaults to true for <= 6 items. */
+  region?: boolean;
+  /** Class applied to each trigger button. */
+  triggerClassName?: string;
+  /** Class applied to each animated panel. */
+  panelClassName?: string;
+  /** Class applied to the panel content wrapper. */
+  contentClassName?: string;
+  /** Unmount panel content after its closing animation completes. Defaults to false. */
+  unMountOnClose?: boolean;
+};
+declare const Accordion: ({ items, initialOpenItemIndexes, openItemIndexes, onChange, value, defaultValue, onValueChange, type, collapsible, headingLevel, region, className, triggerClassName, panelClassName, contentClassName, unMountOnClose, ...rootProps }: AccordionProps) => import("react").JSX.Element;
+export { Accordion, type AccordionItemData, type AccordionItemId, type AccordionProps, type AccordionType, type AccordionValue };

package/dist/components/navigation/accordion/index.d.ts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+type AccordionType = "single" | "multiple";
+type AccordionItemId = string | number;
+type AccordionValue = AccordionItemId | readonly AccordionItemId[] | null;
+type AccordionItemData = {
+  /** Stable key for the item when the list is reordered. */
+  id?: string | number;
+  /** Visible title of the accordion item. */
+  title: ReactNode;
+  /** Content shown when the item is expanded. */
+  content: ReactNode;
+  /** Prevents the item from being toggled by the user. */
+  disabled?: boolean;
+};
+type AccordionProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange"> & {
+  /** Items displayed by the accordion. */
+  items: AccordionItemData[];
+  /** Initial expanded indexes for uncontrolled usage. Defaults to []. */
+  initialOpenItemIndexes?: number[];
+  /** Expanded indexes for controlled usage. */
+  openItemIndexes?: number[];
+  /** Called with the next expanded indexes after user interaction. */
+  onChange?: (openItemIndexes: number[]) => void;
+  /** Expanded item ID(s). Requires an ID on every item. */
+  value?: AccordionValue;
+  /** Initially expanded item ID(s). Requires an ID on every item. */
+  defaultValue?: AccordionValue;
+  /** Called with the next expanded item ID(s). */
+  onValueChange?: (value: AccordionItemId | AccordionItemId[] | null) => void;
+  /** Whether multiple items can be expanded simultaneously. */
+  type?: AccordionType;
+  /** Allow the currently expanded item to collapse in single mode. */
+  collapsible?: boolean;
+  /** Semantic heading level used for each item. Defaults to 3. */
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Adds region landmarks to the panels. Defaults to true for <= 6 items. */
+  region?: boolean;
+  /** Class applied to each trigger button. */
+  triggerClassName?: string;
+  /** Class applied to each animated panel. */
+  panelClassName?: string;
+  /** Class applied to the panel content wrapper. */
+  contentClassName?: string;
+  /** Unmount panel content after its closing animation completes. Defaults to false. */
+  unMountOnClose?: boolean;
+};
+declare const Accordion: ({ items, initialOpenItemIndexes, openItemIndexes, onChange, value, defaultValue, onValueChange, type, collapsible, headingLevel, region, className, triggerClassName, panelClassName, contentClassName, unMountOnClose, ...rootProps }: AccordionProps) => import("react").JSX.Element;
+export { Accordion, type AccordionItemData, type AccordionItemId, type AccordionProps, type AccordionType, type AccordionValue };