@accelint/design-toolkit 9.9.2 → 9.10.0

package/dist/components/carousel/gallery.js

@@ -0,0 +1,84 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { ToggleButton } from "../button/toggle.js";
+import { CarouselContext } from "./context.js";
+import "client-only";
+import { useCallback, useContext, useLayoutEffect, useRef, useState } from "react";
+import { clsx } from "@accelint/design-foundation/lib/utils";
+import { jsx } from "react/jsx-runtime";
+import styles from "./style.module.css";
+
+//#region src/components/carousel/gallery.tsx
+/**
+* Number of visible thumbnail items to keep before the selected item
+* when scrolling the gallery. This keeps the selected item visually
+* centered rather than pinned to the leading edge.
+*/
+const VISIBLE_ITEMS_BEFORE_SELECTED = 2;
+/**
+* Renders a horizontally-scrolling strip of thumbnail buttons for carousel navigation.
+*
+* Automatically scrolls to keep the selected thumbnail visible. Clicking a
+* thumbnail navigates the carousel to that item. Note that it relies on the <Carousel/>
+* component to supply context and must be used as a child of that component.
+*
+* @param props - The gallery props.
+* @param props.classNames - Custom class names for gallery elements.
+* @param props.classNames.container - Class name for the gallery container.
+* @param props.classNames.item - Class name for individual gallery items.
+* @returns The carousel gallery component.
+* ```
+*/
+function CarouselGallery({ classNames, ...rest }) {
+	const { items, currentPosition, setCurrentPosition } = useContext(CarouselContext);
+	const [galleryXOffset, setGalleryXOffset] = useState(0);
+	const containerRef = useRef(null);
+	const selectedItem = items[currentPosition];
+	const handleItemClick = useCallback((index) => {
+		setCurrentPosition(index);
+	}, [setCurrentPosition]);
+	useLayoutEffect(() => {
+		if (!containerRef.current) return;
+		const { width } = containerRef.current.children?.[0]?.getBoundingClientRect() || { width: 0 };
+		if (currentPosition > VISIBLE_ITEMS_BEFORE_SELECTED) setGalleryXOffset(currentPosition * -width + width * VISIBLE_ITEMS_BEFORE_SELECTED);
+		else setGalleryXOffset(0);
+	}, [currentPosition]);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: clsx(styles["gallery-container"], classNames?.container),
+		ref: containerRef,
+		children: items.map((item, index) => {
+			const isSelected = selectedItem && item.id === selectedItem.id;
+			return /* @__PURE__ */ jsx(ToggleButton, {
+				style: { translate: `${galleryXOffset}px` },
+				isSelected,
+				className: clsx(styles["gallery-item"], classNames?.item),
+				onClick: () => handleItemClick(index),
+				size: "small",
+				color: "accent",
+				"data-id": `thumbnail-id-${item.id}`,
+				children: /* @__PURE__ */ jsx("img", {
+					src: item.thumbnailUrl,
+					alt: item.title
+				})
+			}, `thumbnail-${item.id}`);
+		})
+	});
+}
+
+//#endregion
+export { CarouselGallery };
+//# sourceMappingURL=gallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.js","names":[],"sources":["../../../src/components/carousel/gallery.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  useCallback,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { CarouselContext } from './context';\nimport styles from './style.module.css';\nimport type { CarouselGalleryProps } from './types';\nimport { ToggleButton } from '../button/toggle';\n\n/**\n * Number of visible thumbnail items to keep before the selected item\n * when scrolling the gallery. This keeps the selected item visually\n * centered rather than pinned to the leading edge.\n */\nconst VISIBLE_ITEMS_BEFORE_SELECTED = 2;\n\n/**\n * Renders a horizontally-scrolling strip of thumbnail buttons for carousel navigation.\n *\n * Automatically scrolls to keep the selected thumbnail visible. Clicking a\n * thumbnail navigates the carousel to that item. Note that it relies on the <Carousel/>\n * component to supply context and must be used as a child of that component.\n *\n * @param props - The gallery props.\n * @param props.classNames - Custom class names for gallery elements.\n * @param props.classNames.container - Class name for the gallery container.\n * @param props.classNames.item - Class name for individual gallery items.\n * @returns The carousel gallery component.\n * ```\n */\nexport function CarouselGallery({ classNames, ...rest }: CarouselGalleryProps) {\n  const { items, currentPosition, setCurrentPosition } =\n    useContext(CarouselContext);\n  const [galleryXOffset, setGalleryXOffset] = useState(0);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const selectedItem = items[currentPosition];\n\n  const handleItemClick = useCallback(\n    (index: number) => {\n      setCurrentPosition(index);\n    },\n    [setCurrentPosition],\n  );\n\n  // Calculate scroll position synchronously before browser paint to prevent visual flicker when the gallery scrolls\n  useLayoutEffect(() => {\n    if (!containerRef.current) {\n      return;\n    }\n\n    const rect = containerRef.current.children?.[0]?.getBoundingClientRect();\n    const { width } = rect || { width: 0 };\n\n    if (currentPosition > VISIBLE_ITEMS_BEFORE_SELECTED) {\n      setGalleryXOffset(\n        currentPosition * -width + width * VISIBLE_ITEMS_BEFORE_SELECTED,\n      );\n    } else {\n      setGalleryXOffset(0);\n    }\n  }, [currentPosition]);\n\n  return (\n    <div\n      {...rest}\n      className={clsx(styles['gallery-container'], classNames?.container)}\n      ref={containerRef}\n    >\n      {items.map((item, index) => {\n        const isSelected = selectedItem && item.id === selectedItem.id;\n        return (\n          <ToggleButton\n            style={{\n              translate: `${galleryXOffset}px`,\n            }}\n            isSelected={isSelected}\n            className={clsx(styles['gallery-item'], classNames?.item)}\n            onClick={() => handleItemClick(index)}\n            key={`thumbnail-${item.id}`}\n            size='small'\n            color='accent'\n            data-id={`thumbnail-id-${item.id}`}\n          >\n            <img src={item.thumbnailUrl} alt={item.title} />\n          </ToggleButton>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,gCAAgC;;;;;;;;;;;;;;;AAgBtC,SAAgB,gBAAgB,EAAE,YAAY,GAAG,QAA8B;CAC7E,MAAM,EAAE,OAAO,iBAAiB,uBAC9B,WAAW,gBAAgB;CAC7B,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,EAAE;CACvD,MAAM,eAAe,OAAuB,KAAK;CAEjD,MAAM,eAAe,MAAM;CAE3B,MAAM,kBAAkB,aACrB,UAAkB;AACjB,qBAAmB,MAAM;IAE3B,CAAC,mBAAmB,CACrB;AAGD,uBAAsB;AACpB,MAAI,CAAC,aAAa,QAChB;EAIF,MAAM,EAAE,UADK,aAAa,QAAQ,WAAW,IAAI,uBAAuB,IAC9C,EAAE,OAAO,GAAG;AAEtC,MAAI,kBAAkB,8BACpB,mBACE,kBAAkB,CAAC,QAAQ,QAAQ,8BACpC;MAED,mBAAkB,EAAE;IAErB,CAAC,gBAAgB,CAAC;AAErB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,sBAAsB,YAAY,UAAU;EACnE,KAAK;YAEJ,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,aAAa,gBAAgB,KAAK,OAAO,aAAa;AAC5D,UACE,oBAAC;IACC,OAAO,EACL,WAAW,GAAG,eAAe,KAC9B;IACW;IACZ,WAAW,KAAK,OAAO,iBAAiB,YAAY,KAAK;IACzD,eAAe,gBAAgB,MAAM;IAErC,MAAK;IACL,OAAM;IACN,WAAS,gBAAgB,KAAK;cAE9B,oBAAC;KAAI,KAAK,KAAK;KAAc,KAAK,KAAK;MAAS;MAL3C,aAAa,KAAK,KAMV;IAEjB;GACE"}

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

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { CarouselProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime33 from "react/jsx-runtime";
+
+//#region src/components/carousel/index.d.ts
+
+/**
+ * A compound carousel component for navigating a collection of media items.
+ *
+ * Provides carousel state via context to composable sub-components
+ * (CarouselViewer, CarouselGallery, CarouselPrevious, CarouselNext,
+ * CarouselPosition, CarouselSelect).
+ *
+ * @param props - The carousel props.
+ * @param props.items - The carousel data items to display.
+ * @param props.className - Custom class names for carousel elements.
+ * @param props.children - Carousel sub-components to render.
+ * @param props.currentPosition - Zero-based index of the active item.
+ * @param props.setCurrentPosition - Callback invoked when the active item changes.
+ * @returns The carousel component.
+ *
+ * @example
+ * ```tsx
+ * const [position, setPosition] = useState(0);
+ *
+ * <Carousel items={items} currentPosition={position} setCurrentPosition={setPosition}>
+ *   <CarouselViewer />
+ *   <CarouselPrevious />
+ *   <CarouselGallery />
+ *   <CarouselNext />
+ * </Carousel>
+ * ```
+ */
+declare function Carousel({
+  items,
+  className,
+  children,
+  currentPosition,
+  setCurrentPosition,
+  ...rest
+}: CarouselProps): react_jsx_runtime33.JSX.Element;
+//#endregion
+export { Carousel };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/carousel/index.js

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { CarouselProvider } from "./context.js";
+import "client-only";
+import { clsx } from "@accelint/design-foundation/lib/utils";
+import { jsx } from "react/jsx-runtime";
+import styles from "./style.module.css";
+
+//#region src/components/carousel/index.tsx
+const EMPTY_ITEMS = [];
+/**
+* A compound carousel component for navigating a collection of media items.
+*
+* Provides carousel state via context to composable sub-components
+* (CarouselViewer, CarouselGallery, CarouselPrevious, CarouselNext,
+* CarouselPosition, CarouselSelect).
+*
+* @param props - The carousel props.
+* @param props.items - The carousel data items to display.
+* @param props.className - Custom class names for carousel elements.
+* @param props.children - Carousel sub-components to render.
+* @param props.currentPosition - Zero-based index of the active item.
+* @param props.setCurrentPosition - Callback invoked when the active item changes.
+* @returns The carousel component.
+*
+* @example
+* ```tsx
+* const [position, setPosition] = useState(0);
+*
+* <Carousel items={items} currentPosition={position} setCurrentPosition={setPosition}>
+*   <CarouselViewer />
+*   <CarouselPrevious />
+*   <CarouselGallery />
+*   <CarouselNext />
+* </Carousel>
+* ```
+*/
+function Carousel({ items = EMPTY_ITEMS, className, children, currentPosition, setCurrentPosition, ...rest }) {
+	return /* @__PURE__ */ jsx(CarouselProvider, {
+		items,
+		currentPosition,
+		setCurrentPosition,
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			className: clsx(styles.carousel, className),
+			children
+		})
+	});
+}
+
+//#endregion
+export { Carousel };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["EMPTY_ITEMS: CarouselData[]"],"sources":["../../../src/components/carousel/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { CarouselProvider } from './context';\nimport styles from './style.module.css';\nimport type { CarouselData, CarouselProps } from './types';\n\nconst EMPTY_ITEMS: CarouselData[] = [];\n\n/**\n * A compound carousel component for navigating a collection of media items.\n *\n * Provides carousel state via context to composable sub-components\n * (CarouselViewer, CarouselGallery, CarouselPrevious, CarouselNext,\n * CarouselPosition, CarouselSelect).\n *\n * @param props - The carousel props.\n * @param props.items - The carousel data items to display.\n * @param props.className - Custom class names for carousel elements.\n * @param props.children - Carousel sub-components to render.\n * @param props.currentPosition - Zero-based index of the active item.\n * @param props.setCurrentPosition - Callback invoked when the active item changes.\n * @returns The carousel component.\n *\n * @example\n * ```tsx\n * const [position, setPosition] = useState(0);\n *\n * <Carousel items={items} currentPosition={position} setCurrentPosition={setPosition}>\n *   <CarouselViewer />\n *   <CarouselPrevious />\n *   <CarouselGallery />\n *   <CarouselNext />\n * </Carousel>\n * ```\n */\nexport function Carousel({\n  items = EMPTY_ITEMS,\n  className,\n  children,\n  currentPosition,\n  setCurrentPosition,\n  ...rest\n}: CarouselProps) {\n  return (\n    <CarouselProvider\n      items={items}\n      currentPosition={currentPosition}\n      setCurrentPosition={setCurrentPosition}\n    >\n      <div {...rest} className={clsx(styles.carousel, className)}>\n        {children}\n      </div>\n    </CarouselProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAMA,cAA8B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BtC,SAAgB,SAAS,EACvB,QAAQ,aACR,WACA,UACA,iBACA,oBACA,GAAG,QACa;AAChB,QACE,oBAAC;EACQ;EACU;EACG;YAEpB,oBAAC;GAAI,GAAI;GAAM,WAAW,KAAK,OAAO,UAAU,UAAU;GACvD;IACG;GACW"}

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

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { ButtonProps } from "../button/types.js";
+import "client-only";
+import * as react_jsx_runtime34 from "react/jsx-runtime";
+
+//#region src/components/carousel/navigation.d.ts
+/**
+ * Navigates the carousel to the previous item. Automatically disables when at the first item.
+ * Note that it relies on the <Carousel/>
+ * component to supply context and must be used as a child of that component.
+ *
+ * @param props - The control props.
+ * @param props.className - Additional CSS class name.
+ * @returns The previous navigation button.
+ *
+ */
+declare function CarouselPrevious({
+  className,
+  variant,
+  isDisabled,
+  ...rest
+}: ButtonProps): react_jsx_runtime34.JSX.Element;
+/**
+ * Navigates the carousel to the next item. Automatically disables when at the last item.
+ * Note that it relies on the <Carousel/> component to supply context and must be used
+ * as a child of that component.
+ *
+ * @param props - The control props.
+ * @param props.className - Additional CSS class name.
+ * @returns The next navigation button.
+ */
+declare function CarouselNext({
+  className,
+  variant,
+  isDisabled,
+  ...rest
+}: ButtonProps): react_jsx_runtime34.JSX.Element;
+//#endregion
+export { CarouselNext, CarouselPrevious };
+//# sourceMappingURL=navigation.d.ts.map

package/dist/components/carousel/navigation.js

@@ -0,0 +1,82 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { Icon } from "../icon/index.js";
+import { Button } from "../button/index.js";
+import { CarouselContext } from "./context.js";
+import "client-only";
+import { useContext } from "react";
+import { clsx } from "@accelint/design-foundation/lib/utils";
+import { jsx } from "react/jsx-runtime";
+import ChevronRight from "@accelint/icons/chevron-right";
+import styles from "./style.module.css";
+import ChevronLeft from "@accelint/icons/chevron-left";
+
+//#region src/components/carousel/navigation.tsx
+/**
+* Navigates the carousel to the previous item. Automatically disables when at the first item.
+* Note that it relies on the <Carousel/>
+* component to supply context and must be used as a child of that component.
+*
+* @param props - The control props.
+* @param props.className - Additional CSS class name.
+* @returns The previous navigation button.
+*
+*/
+function CarouselPrevious({ className, variant = "flat", isDisabled, ...rest }) {
+	const { currentPosition, setCurrentPosition } = useContext(CarouselContext);
+	const shouldDisablePrevious = currentPosition === 0 || isDisabled;
+	const onClick = () => {
+		if (currentPosition - 1 >= 0) setCurrentPosition(currentPosition - 1);
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		"aria-label": "Previous",
+		onClick,
+		className: clsx(styles.navigation, className),
+		variant,
+		isDisabled: shouldDisablePrevious,
+		children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronLeft, {}) })
+	});
+}
+/**
+* Navigates the carousel to the next item. Automatically disables when at the last item.
+* Note that it relies on the <Carousel/> component to supply context and must be used
+* as a child of that component.
+*
+* @param props - The control props.
+* @param props.className - Additional CSS class name.
+* @returns The next navigation button.
+*/
+function CarouselNext({ className, variant = "flat", isDisabled, ...rest }) {
+	const { currentPosition, setCurrentPosition, items } = useContext(CarouselContext);
+	const shouldDisableNext = currentPosition === items.length - 1 || isDisabled;
+	const onClick = () => {
+		if (currentPosition + 1 < items.length) setCurrentPosition(currentPosition + 1);
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		"aria-label": "Next",
+		onClick,
+		className: clsx(styles.navigation, className),
+		variant,
+		isDisabled: shouldDisableNext,
+		children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronRight, {}) })
+	});
+}
+
+//#endregion
+export { CarouselNext, CarouselPrevious };
+//# sourceMappingURL=navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","names":[],"sources":["../../../src/components/carousel/navigation.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport ChevronLeft from '@accelint/icons/chevron-left';\nimport ChevronRight from '@accelint/icons/chevron-right';\nimport { useContext } from 'react';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { CarouselContext } from './context';\nimport styles from './style.module.css';\nimport type { ButtonProps } from '../button/types';\n\n/**\n * Navigates the carousel to the previous item. Automatically disables when at the first item.\n * Note that it relies on the <Carousel/>\n * component to supply context and must be used as a child of that component.\n *\n * @param props - The control props.\n * @param props.className - Additional CSS class name.\n * @returns The previous navigation button.\n *\n */\nexport function CarouselPrevious({\n  className,\n  variant = 'flat',\n  isDisabled,\n  ...rest\n}: ButtonProps) {\n  const context = useContext(CarouselContext);\n  const { currentPosition, setCurrentPosition } = context;\n\n  const shouldDisablePrevious = currentPosition === 0 || isDisabled;\n\n  const onClick = () => {\n    if (currentPosition - 1 >= 0) {\n      setCurrentPosition(currentPosition - 1);\n    }\n  };\n\n  return (\n    <Button\n      {...rest}\n      aria-label='Previous'\n      onClick={onClick}\n      className={clsx(styles.navigation, className)}\n      variant={variant}\n      isDisabled={shouldDisablePrevious}\n    >\n      <Icon>\n        <ChevronLeft />\n      </Icon>\n    </Button>\n  );\n}\n\n/**\n * Navigates the carousel to the next item. Automatically disables when at the last item.\n * Note that it relies on the <Carousel/> component to supply context and must be used\n * as a child of that component.\n *\n * @param props - The control props.\n * @param props.className - Additional CSS class name.\n * @returns The next navigation button.\n */\nexport function CarouselNext({\n  className,\n  variant = 'flat',\n  isDisabled,\n  ...rest\n}: ButtonProps) {\n  const context = useContext(CarouselContext);\n  const { currentPosition, setCurrentPosition, items } = context;\n\n  const shouldDisableNext = currentPosition === items.length - 1 || isDisabled;\n\n  const onClick = () => {\n    if (currentPosition + 1 < items.length) {\n      setCurrentPosition(currentPosition + 1);\n    }\n  };\n\n  return (\n    <Button\n      {...rest}\n      aria-label='Next'\n      onClick={onClick}\n      className={clsx(styles.navigation, className)}\n      variant={variant}\n      isDisabled={shouldDisableNext}\n    >\n      <Icon>\n        <ChevronRight />\n      </Icon>\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,iBAAiB,EAC/B,WACA,UAAU,QACV,YACA,GAAG,QACW;CAEd,MAAM,EAAE,iBAAiB,uBADT,WAAW,gBAAgB;CAG3C,MAAM,wBAAwB,oBAAoB,KAAK;CAEvD,MAAM,gBAAgB;AACpB,MAAI,kBAAkB,KAAK,EACzB,oBAAmB,kBAAkB,EAAE;;AAI3C,QACE,oBAAC;EACC,GAAI;EACJ,cAAW;EACF;EACT,WAAW,KAAK,OAAO,YAAY,UAAU;EACpC;EACT,YAAY;YAEZ,oBAAC,kBACC,oBAAC,gBAAc,GACV;GACA;;;;;;;;;;;AAab,SAAgB,aAAa,EAC3B,WACA,UAAU,QACV,YACA,GAAG,QACW;CAEd,MAAM,EAAE,iBAAiB,oBAAoB,UAD7B,WAAW,gBAAgB;CAG3C,MAAM,oBAAoB,oBAAoB,MAAM,SAAS,KAAK;CAElE,MAAM,gBAAgB;AACpB,MAAI,kBAAkB,IAAI,MAAM,OAC9B,oBAAmB,kBAAkB,EAAE;;AAI3C,QACE,oBAAC;EACC,GAAI;EACJ,cAAW;EACF;EACT,WAAW,KAAK,OAAO,YAAY,UAAU;EACpC;EACT,YAAY;YAEZ,oBAAC,kBACC,oBAAC,iBAAe,GACX;GACA"}

package/dist/components/carousel/position.d.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import "client-only";
+import { HTMLAttributes } from "react";
+import * as react_jsx_runtime36 from "react/jsx-runtime";
+
+//#region src/components/carousel/position.d.ts
+/**
+ * Displays the current position and total item count (e.g. "3 / 9").
+ * Note that it relies on the <Carousel/> component to supply context and must be used
+ * as a child of that component.
+ *
+ * @param props - The position display props.
+ * @param props.className - Additional CSS class name.
+ * @returns The carousel position indicator.
+ */
+declare function CarouselPosition({
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement>): react_jsx_runtime36.JSX.Element;
+//#endregion
+export { CarouselPosition };
+//# sourceMappingURL=position.d.ts.map

package/dist/components/carousel/position.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { CarouselContext } from "./context.js";
+import "client-only";
+import { useContext } from "react";
+import { clsx } from "@accelint/design-foundation/lib/utils";
+import { jsxs } from "react/jsx-runtime";
+import styles from "./style.module.css";
+
+//#region src/components/carousel/position.tsx
+/**
+* Displays the current position and total item count (e.g. "3 / 9").
+* Note that it relies on the <Carousel/> component to supply context and must be used
+* as a child of that component.
+*
+* @param props - The position display props.
+* @param props.className - Additional CSS class name.
+* @returns The carousel position indicator.
+*/
+function CarouselPosition({ className, ...rest }) {
+	const { currentPosition, items } = useContext(CarouselContext);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(styles.position, className),
+		...rest,
+		children: [
+			currentPosition + 1,
+			" / ",
+			items.length
+		]
+	});
+}
+
+//#endregion
+export { CarouselPosition };
+//# sourceMappingURL=position.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"position.js","names":[],"sources":["../../../src/components/carousel/position.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { type HTMLAttributes, useContext } from 'react';\nimport { CarouselContext } from './context';\nimport styles from './style.module.css';\n\n/**\n * Displays the current position and total item count (e.g. \"3 / 9\").\n * Note that it relies on the <Carousel/> component to supply context and must be used\n * as a child of that component.\n *\n * @param props - The position display props.\n * @param props.className - Additional CSS class name.\n * @returns The carousel position indicator.\n */\nexport function CarouselPosition({\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n  const context = useContext(CarouselContext);\n  const { currentPosition, items } = context;\n  return (\n    <div className={clsx(styles.position, className)} {...rest}>\n      {currentPosition + 1} / {items.length}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,iBAAiB,EAC/B,WACA,GAAG,QAC8B;CAEjC,MAAM,EAAE,iBAAiB,UADT,WAAW,gBAAgB;AAE3C,QACE,qBAAC;EAAI,WAAW,KAAK,OAAO,UAAU,UAAU;EAAE,GAAI;;GACnD,kBAAkB;GAAE;GAAI,MAAM;;GAC3B"}

package/dist/components/carousel/select.d.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { CarouselSelectProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime37 from "react/jsx-runtime";
+
+//#region src/components/carousel/select.d.ts
+/**
+ * Renders a dropdown select for navigating the carousel by item title.
+ * Note that it relies on the <Carousel/> component to supply context and must be used
+ * as a child of that component.
+ *
+ * Displays the current item's title and allows the user to jump to any
+ * item in the carousel via a select dropdown.
+ *
+ * @param props - The select props.
+ * @param props.classNames - Custom class names for select elements.
+ * @param props.classNames.field - Class names passed to the SelectField.
+ * @param props.classNames.optionItem - Class names passed to each OptionsItem.
+ * @returns The carousel select component.
+ */
+declare function CarouselSelect({
+  classNames,
+  ...rest
+}: CarouselSelectProps): react_jsx_runtime37.JSX.Element;
+//#endregion
+export { CarouselSelect };
+//# sourceMappingURL=select.d.ts.map

package/dist/components/carousel/select.js

@@ -0,0 +1,69 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { CarouselContext } from "./context.js";
+import { OptionsItem } from "../options/item.js";
+import { SelectField } from "../select-field/index.js";
+import "client-only";
+import { useContext } from "react";
+import { clsx } from "@accelint/design-foundation/lib/utils";
+import { jsx } from "react/jsx-runtime";
+import styles from "./style.module.css";
+
+//#region src/components/carousel/select.tsx
+/**
+* Renders a dropdown select for navigating the carousel by item title.
+* Note that it relies on the <Carousel/> component to supply context and must be used
+* as a child of that component.
+*
+* Displays the current item's title and allows the user to jump to any
+* item in the carousel via a select dropdown.
+*
+* @param props - The select props.
+* @param props.classNames - Custom class names for select elements.
+* @param props.classNames.field - Class names passed to the SelectField.
+* @param props.classNames.optionItem - Class names passed to each OptionsItem.
+* @returns The carousel select component.
+*/
+function CarouselSelect({ classNames, ...rest }) {
+	const { items, currentPosition, setCurrentPosition } = useContext(CarouselContext);
+	const onChange = (key) => {
+		const index = items.findIndex((i) => i.id === key);
+		if (index >= 0) setCurrentPosition(index);
+	};
+	return /* @__PURE__ */ jsx(SelectField, {
+		...rest,
+		"aria-label": "Carousel item select",
+		value: items[currentPosition]?.title,
+		placeholder: items[currentPosition]?.title,
+		onChange,
+		classNames: {
+			...classNames?.select,
+			field: clsx(styles["gallery-select"], classNames?.select?.field),
+			trigger: clsx(styles["gallery-select"], classNames?.select?.trigger)
+		},
+		children: items.map((item) => /* @__PURE__ */ jsx(OptionsItem, {
+			textValue: item.title,
+			"aria-label": item.title,
+			id: item.id,
+			classNames: classNames?.optionItem,
+			children: item.title
+		}, item.id))
+	});
+}
+
+//#endregion
+export { CarouselSelect };
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":[],"sources":["../../../src/components/carousel/select.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport 'client-only';\nimport { useContext } from 'react';\nimport { OptionsItem } from '../options/item';\nimport { SelectField } from '../select-field';\nimport { CarouselContext } from './context';\nimport type { Key } from 'react-aria-components';\nimport type { CarouselSelectProps } from './types';\nimport styles from './style.module.css';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\n\n/**\n * Renders a dropdown select for navigating the carousel by item title.\n * Note that it relies on the <Carousel/> component to supply context and must be used\n * as a child of that component.\n *\n * Displays the current item's title and allows the user to jump to any\n * item in the carousel via a select dropdown.\n *\n * @param props - The select props.\n * @param props.classNames - Custom class names for select elements.\n * @param props.classNames.field - Class names passed to the SelectField.\n * @param props.classNames.optionItem - Class names passed to each OptionsItem.\n * @returns The carousel select component.\n */\nexport function CarouselSelect({ classNames, ...rest }: CarouselSelectProps) {\n  const { items, currentPosition, setCurrentPosition } =\n    useContext(CarouselContext);\n\n  const onChange = (key: Key | null) => {\n    const index = items.findIndex((i) => i.id === key);\n    if (index >= 0) {\n      setCurrentPosition(index);\n    }\n  };\n\n  return (\n    <SelectField\n      {...rest}\n      aria-label='Carousel item select'\n      value={items[currentPosition]?.title}\n      placeholder={items[currentPosition]?.title}\n      onChange={onChange}\n      classNames={{\n        ...classNames?.select,\n        field: clsx(styles['gallery-select'], classNames?.select?.field),\n        trigger: clsx(styles['gallery-select'], classNames?.select?.trigger),\n      }}\n    >\n      {items.map((item) => (\n        <OptionsItem\n          textValue={item.title}\n          key={item.id}\n          aria-label={item.title}\n          id={item.id}\n          classNames={classNames?.optionItem}\n        >\n          {item.title}\n        </OptionsItem>\n      ))}\n    </SelectField>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAgB,eAAe,EAAE,YAAY,GAAG,QAA6B;CAC3E,MAAM,EAAE,OAAO,iBAAiB,uBAC9B,WAAW,gBAAgB;CAE7B,MAAM,YAAY,QAAoB;EACpC,MAAM,QAAQ,MAAM,WAAW,MAAM,EAAE,OAAO,IAAI;AAClD,MAAI,SAAS,EACX,oBAAmB,MAAM;;AAI7B,QACE,oBAAC;EACC,GAAI;EACJ,cAAW;EACX,OAAO,MAAM,kBAAkB;EAC/B,aAAa,MAAM,kBAAkB;EAC3B;EACV,YAAY;GACV,GAAG,YAAY;GACf,OAAO,KAAK,OAAO,mBAAmB,YAAY,QAAQ,MAAM;GAChE,SAAS,KAAK,OAAO,mBAAmB,YAAY,QAAQ,QAAQ;GACrE;YAEA,MAAM,KAAK,SACV,oBAAC;GACC,WAAW,KAAK;GAEhB,cAAY,KAAK;GACjB,IAAI,KAAK;GACT,YAAY,YAAY;aAEvB,KAAK;KALD,KAAK,GAME,CACd;GACU"}

package/dist/components/carousel/style.module.css

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '@accelint/design-foundation/styles';
+
+@layer components.l1 {
+  .carousel {
+    @apply gap-s flex flex-col;
+  }
+
+  .viewer {
+    @apply p-s flex w-full items-center justify-center;
+  }
+
+  .viewer-item {
+    @apply flex aspect-3/2 h-320 w-full justify-center object-contain;
+
+    &:where([data-media='audio']) {
+      @apply items-center;
+    }
+  }
+
+  .controls {
+    @apply gap-s flex w-full flex-row items-center;
+  }
+
+  .gallery-container {
+    @apply gap-x-s flex w-full flex-row overflow-x-hidden py-1;
+  }
+
+  .position {
+    @apply gap-s flex flex-row items-center;
+  }
+}
+
+@layer components.l2 {
+  .gallery-item {
+    @apply aspect-3/2 rounded-none bg-transparent p-0 transition-all duration-200 ease-in-out;
+    height: 32px;
+
+    @variant selected {
+      @apply outline-accent-primary-bold fg-a11y-on-utility outline-2;
+    }
+  }
+
+  .navigation {
+    @apply min-w-[28px];
+  }
+
+  .gallery-select {
+    @apply w-full;
+  }
+}