@agnos-ui/react-bootstrap 0.8.0-next.0 → 0.8.0

package/{accordion-QclyKh8E.cjs → accordion-CKX3QpIN.cjs}

@@ -22,8 +22,10 @@ const AccordionItemDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxRu
 ] });
 function AccordionItem(props) {
   const { registerItem } = React.useContext(AccordionDIContext);
+  const id = React.useId();
   const widgetContext = generated_config.useWidgetWithConfig(registerItem, props, null, {
-    structure: AccordionItemDefaultSlotStructure
+    structure: AccordionItemDefaultSlotStructure,
+    id
   });
   const { state, api, directives } = widgetContext;
   React.useImperativeHandle(props.ref, () => api, [api]);

package/{accordion-GX854ooE.js → accordion-CrXiNNLE.js}

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Slot } from "@agnos-ui/react-headless/slot";
 import { useDirectives, classDirective } from "@agnos-ui/react-headless/utils/directive";
-import { createContext, useContext, useImperativeHandle, useEffect } from "react";
+import { useContext, createContext, useId, useImperativeHandle, useEffect } from "react";
 import { useWidgetWithConfig } from "./generated/config.js";
 import { getAccordionDefaultConfig, createAccordionItem, createAccordion, factoryCreateAccordion } from "@agnos-ui/core-bootstrap/components/accordion";
 const export_getAccordionDefaultConfig = getAccordionDefaultConfig;
@@ -21,8 +21,10 @@ const AccordionItemDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxs(
 ] });
 function AccordionItem(props) {
   const { registerItem } = useContext(AccordionDIContext);
+  const id = useId();
   const widgetContext = useWidgetWithConfig(registerItem, props, null, {
-    structure: AccordionItemDefaultSlotStructure
+    structure: AccordionItemDefaultSlotStructure,
+    id
   });
   const { state, api, directives } = widgetContext;
   useImperativeHandle(props.ref, () => api, [api]);

package/carousel-B8b91cHo.cjs

@@ -0,0 +1,72 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const carousel = require("@agnos-ui/core-bootstrap/components/carousel");
+const config = require("@agnos-ui/react-headless/config");
+const slot = require("@agnos-ui/react-headless/slot");
+const directive = require("@agnos-ui/react-headless/utils/directive");
+const React = require("react");
+const export_getCarouselDefaultConfig = carousel.getCarouselDefaultConfig;
+const export_createCarousel = carousel.createCarousel;
+const CarouselPrevButton = ({ direction, scrollPrev }) => {
+  const prevBtnClassPrefix = direction === "rtl" ? "carousel-control-next" : "carousel-control-prev";
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { className: prevBtnClassPrefix, ...directive.useDirective(scrollPrev), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${prevBtnClassPrefix}-icon` }) });
+};
+const CarouselNextButton = ({ direction, scrollNext }) => {
+  const prevBtnClassPrefix = direction === "ltr" ? "carousel-control-next" : "carousel-control-prev";
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { className: prevBtnClassPrefix, ...directive.useDirective(scrollNext), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${prevBtnClassPrefix}-icon` }) });
+};
+const CarouselTabIndicator = ({
+  index,
+  id,
+  tabIndicator,
+  active
+}) => /* @__PURE__ */ jsxRuntime.jsx("button", { "data-bs-target": true, className: active ? "active" : void 0, ...directive.useDirective(tabIndicator, { index, id }) });
+const CarouselSlide = ({
+  slideData,
+  widget,
+  index
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(widget.directives.slide, { id: slideData.id, index }), children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: widget.state.slide, props: { ...slideData, ...widget } }) });
+const CarouselTabList = ({
+  slidesData,
+  tabList,
+  tabIndicator,
+  selectedScrollSnap
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "carousel-indicators", ...directive.useDirective(tabList), children: slidesData.map(({ id }, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselTabIndicator, { index, tabIndicator, id, active: selectedScrollSnap === index }, id)) });
+const CarouselDefaultNavigation = (widget) => {
+  const {
+    state: { showNavigationArrows, showNavigationIndicators, canScrollNext, canScrollPrev, slidesData, direction, selectedScrollSnap },
+    directives
+  } = widget;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showNavigationArrows && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      canScrollPrev && /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevButton, { scrollPrev: directives.scrollPrev, direction }),
+      canScrollNext && /* @__PURE__ */ jsxRuntime.jsx(CarouselNextButton, { scrollNext: directives.scrollNext, direction })
+    ] }),
+    showNavigationIndicators && /* @__PURE__ */ jsxRuntime.jsx(
+      CarouselTabList,
+      {
+        slidesData,
+        tabList: directives.tabList,
+        tabIndicator: directives.tabIndicator,
+        selectedScrollSnap
+      }
+    )
+  ] });
+};
+const CarouselDefaultStructure = (widget) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: widget.state.navigation, props: widget }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(widget.directives.container), children: widget.state.slidesData.map((slideData, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselSlide, { slideData, widget, index }, slideData.id)) })
+] });
+function Carousel({ ref, ...props }) {
+  const widget = config.useWidgetWithConfig(export_createCarousel, props, "carousel", {
+    structure: CarouselDefaultStructure,
+    navigation: CarouselDefaultNavigation
+  });
+  React.useImperativeHandle(ref, () => widget.api, [widget.api]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(widget.directives.root), children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: widget.state.structure, props: widget }) });
+}
+exports.Carousel = Carousel;
+exports.CarouselDefaultNavigation = CarouselDefaultNavigation;
+exports.CarouselDefaultStructure = CarouselDefaultStructure;
+exports.export_createCarousel = export_createCarousel;
+exports.export_getCarouselDefaultConfig = export_getCarouselDefaultConfig;

package/carousel-CB4uoAm0.js

@@ -0,0 +1,73 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { getCarouselDefaultConfig, createCarousel } from "@agnos-ui/core-bootstrap/components/carousel";
+import { useWidgetWithConfig } from "@agnos-ui/react-headless/config";
+import { Slot } from "@agnos-ui/react-headless/slot";
+import { useDirective } from "@agnos-ui/react-headless/utils/directive";
+import { useImperativeHandle } from "react";
+const export_getCarouselDefaultConfig = getCarouselDefaultConfig;
+const export_createCarousel = createCarousel;
+const CarouselPrevButton = ({ direction, scrollPrev }) => {
+  const prevBtnClassPrefix = direction === "rtl" ? "carousel-control-next" : "carousel-control-prev";
+  return /* @__PURE__ */ jsx("button", { className: prevBtnClassPrefix, ...useDirective(scrollPrev), children: /* @__PURE__ */ jsx("span", { className: `${prevBtnClassPrefix}-icon` }) });
+};
+const CarouselNextButton = ({ direction, scrollNext }) => {
+  const prevBtnClassPrefix = direction === "ltr" ? "carousel-control-next" : "carousel-control-prev";
+  return /* @__PURE__ */ jsx("button", { className: prevBtnClassPrefix, ...useDirective(scrollNext), children: /* @__PURE__ */ jsx("span", { className: `${prevBtnClassPrefix}-icon` }) });
+};
+const CarouselTabIndicator = ({
+  index,
+  id,
+  tabIndicator,
+  active
+}) => /* @__PURE__ */ jsx("button", { "data-bs-target": true, className: active ? "active" : void 0, ...useDirective(tabIndicator, { index, id }) });
+const CarouselSlide = ({
+  slideData,
+  widget,
+  index
+}) => /* @__PURE__ */ jsx("div", { ...useDirective(widget.directives.slide, { id: slideData.id, index }), children: /* @__PURE__ */ jsx(Slot, { slotContent: widget.state.slide, props: { ...slideData, ...widget } }) });
+const CarouselTabList = ({
+  slidesData,
+  tabList,
+  tabIndicator,
+  selectedScrollSnap
+}) => /* @__PURE__ */ jsx("div", { className: "carousel-indicators", ...useDirective(tabList), children: slidesData.map(({ id }, index) => /* @__PURE__ */ jsx(CarouselTabIndicator, { index, tabIndicator, id, active: selectedScrollSnap === index }, id)) });
+const CarouselDefaultNavigation = (widget) => {
+  const {
+    state: { showNavigationArrows, showNavigationIndicators, canScrollNext, canScrollPrev, slidesData, direction, selectedScrollSnap },
+    directives
+  } = widget;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showNavigationArrows && /* @__PURE__ */ jsxs(Fragment, { children: [
+      canScrollPrev && /* @__PURE__ */ jsx(CarouselPrevButton, { scrollPrev: directives.scrollPrev, direction }),
+      canScrollNext && /* @__PURE__ */ jsx(CarouselNextButton, { scrollNext: directives.scrollNext, direction })
+    ] }),
+    showNavigationIndicators && /* @__PURE__ */ jsx(
+      CarouselTabList,
+      {
+        slidesData,
+        tabList: directives.tabList,
+        tabIndicator: directives.tabIndicator,
+        selectedScrollSnap
+      }
+    )
+  ] });
+};
+const CarouselDefaultStructure = (widget) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Slot, { slotContent: widget.state.navigation, props: widget }),
+  /* @__PURE__ */ jsx("div", { ...useDirective(widget.directives.container), children: widget.state.slidesData.map((slideData, index) => /* @__PURE__ */ jsx(CarouselSlide, { slideData, widget, index }, slideData.id)) })
+] });
+function Carousel({ ref, ...props }) {
+  const widget = useWidgetWithConfig(export_createCarousel, props, "carousel", {
+    structure: CarouselDefaultStructure,
+    navigation: CarouselDefaultNavigation
+  });
+  useImperativeHandle(ref, () => widget.api, [widget.api]);
+  return /* @__PURE__ */ jsx("div", { ...useDirective(widget.directives.root), children: /* @__PURE__ */ jsx(Slot, { slotContent: widget.state.structure, props: widget }) });
+}
+export {
+  CarouselDefaultNavigation as C,
+  export_createCarousel as a,
+  CarouselDefaultStructure as b,
+  Carousel as c,
+  export_getCarouselDefaultConfig as e
+};

package/{collapse-UMbDs6Gh.cjs → collapse-BQNW5NFj.cjs}

@@ -7,7 +7,8 @@ const directive = require("@agnos-ui/react-headless/utils/directive");
 const export_getCollapseDefaultConfig = collapse.getCollapseDefaultConfig;
 const export_createCollapse = collapse.createCollapse;
 function Collapse(props) {
-  const { api, directives } = generated_config.useWidgetWithConfig(export_createCollapse, props, "collapse");
+  const id = React.useId();
+  const { api, directives } = generated_config.useWidgetWithConfig(export_createCollapse, props, "collapse", { id });
   React.useImperativeHandle(props.ref, () => api, [api]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirectives(directives.collapseDirective), children: props.children });
 }

package/{collapse-BOXBa8_8.js → collapse-DojQXsLN.js}

@@ -1,12 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { useImperativeHandle } from "react";
+import { useId, useImperativeHandle } from "react";
 import { useWidgetWithConfig } from "./generated/config.js";
 import { getCollapseDefaultConfig, createCollapse } from "@agnos-ui/core-bootstrap/components/collapse";
 import { useDirectives } from "@agnos-ui/react-headless/utils/directive";
 const export_getCollapseDefaultConfig = getCollapseDefaultConfig;
 const export_createCollapse = createCollapse;
 function Collapse(props) {
-  const { api, directives } = useWidgetWithConfig(export_createCollapse, props, "collapse");
+  const id = useId();
+  const { api, directives } = useWidgetWithConfig(export_createCollapse, props, "collapse", { id });
   useImperativeHandle(props.ref, () => api, [api]);
   return /* @__PURE__ */ jsx("div", { ...useDirectives(directives.collapseDirective), children: props.children });
 }

package/components/accordion/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const accordion = require("../../accordion-QclyKh8E.cjs");
+const accordion = require("../../accordion-CKX3QpIN.cjs");
 exports.Accordion = accordion.Accordion;
 exports.AccordionItem = accordion.AccordionItem;
 exports.AccordionItemDefaultSlotStructure = accordion.AccordionItemDefaultSlotStructure;

package/components/accordion/index.js

@@ -1,4 +1,4 @@
-import { b, a, A, d, c, f, e } from "../../accordion-GX854ooE.js";
+import { b, a, A, d, c, f, e } from "../../accordion-CrXiNNLE.js";
 export {
   b as Accordion,
   a as AccordionItem,

package/components/carousel/carousel.d.ts

@@ -0,0 +1,39 @@
+import type { CarouselApi, CarouselContext, CarouselProps } from './carousel.gen';
+import type { Ref } from 'react';
+/**
+ * Renders the default slot navigation for the carousel component.
+ *
+ * @param widget - The widget context containing the state, api and directives for carousel.
+ * @returns The rendered carousel navigation.
+ */
+export declare const CarouselDefaultNavigation: <SlideData extends {
+    id: string;
+}>(widget: CarouselContext<SlideData>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders the default slot structure for the carousel component.
+ *
+ * @param widget - The widget context containing the state, api and directives for carousel.
+ * @returns The rendered carousel structure.
+ */
+export declare const CarouselDefaultStructure: <SlideData extends {
+    id: string;
+}>(widget: CarouselContext<SlideData>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Carousel component that uses a forward ref to expose an API.
+ *
+ * This component utilizes the {@link useWidgetWithConfig} hook to create a carousel widget
+ * and the {@link https://react.dev/reference/react/useImperativeHandle | useImperativeHandle} hook to expose the widget's API via the ref.
+ *
+ * @template SlideData - The type of data used by each slide in the carousel.
+ *
+ * @param props - partial properties of the CarouselProps interface.
+ * @param props.ref - forwarded reference to the CarouselApi.
+ * @param props.children - content of the carousel
+ *
+ * @returns a JSX element that renders the Carousel component with navigation arrows and indicators.
+ */
+export declare function Carousel<SlideData extends {
+    id: string;
+}>({ ref, ...props }: Partial<CarouselProps<SlideData>> & {
+    ref?: Ref<CarouselApi>;
+}): import("react/jsx-runtime").JSX.Element;

package/components/carousel/carousel.gen.d.ts

@@ -0,0 +1,358 @@
+import type { PropsConfig, WidgetSlotContext, SlotContent, Directive, Widget } from '@agnos-ui/react-headless/types';
+import type { EmblaPluginType, EmblaPluginsType, EmblaCarouselType } from 'embla-carousel';
+/**
+ * Retrieve a shallow copy of the default Carousel config
+ * @returns the default Carousel config
+ */
+declare const export_getCarouselDefaultConfig: () => CarouselProps<any>;
+export { export_getCarouselDefaultConfig as getCarouselDefaultConfig };
+/**
+ * Create a Carousel with given config props
+ *
+ * @template SlideData - The type of the data for each slide.
+ * @param config - an optional carousel config
+ * @returns a CarouselWidget
+ */
+declare const export_createCarousel: <SlideData extends {
+    id: string;
+}>(config?: PropsConfig<CarouselProps<SlideData>>) => CarouselWidget<SlideData>;
+export { export_createCarousel as createCarousel };
+/**
+ * Represents the context for a carousel.
+ *
+ * @template SlideData - The type of data used by each slide in the carousel.
+ */
+export type CarouselContext<SlideData extends {
+    id: string;
+}> = WidgetSlotContext<CarouselWidget<SlideData>>;
+/**
+ * Represents the context for a carousel slide.
+ *
+ * @template SlideData - The type of data used by each slide in the carousel.
+ */
+export type CarouselSlideContext<SlideData extends {
+    id: string;
+}> = WidgetSlotContext<CarouselWidget<SlideData>> & SlideData;
+/**
+ * Represents the state of a carousel component.
+ *
+ * @template SlideData - The type of data used by each slide in the carousel.
+ */
+export interface CarouselState<SlideData extends {
+    id: string;
+}> {
+    /**
+     * is the carousel currently scrolling
+     */
+    scrolling: boolean;
+    /**
+     * can carousel scroll to previous slide
+     */
+    canScrollPrev: boolean;
+    /**
+     * can carousel scroll to next slide
+     */
+    canScrollNext: boolean;
+    /**
+     * selected scroll snap
+     */
+    selectedScrollSnap: number;
+    /**
+     * is the carousel initialized
+     */
+    initialized: boolean;
+    /**
+     * If `true`, 'previous' and 'next' navigation arrows will be visible.
+     */
+    showNavigationArrows: boolean;
+    /**
+     * If `true`, navigation indicators at the bottom of the slide will be visible.
+     */
+    showNavigationIndicators: boolean;
+    /**
+     * Choose content direction between `ltr` and `rtl`
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#direction}
+     * @defaultValue `'ltr'`
+     */
+    direction: 'ltr' | 'rtl';
+    /**
+     * CSS classes to be applied on the widget main container
+     *
+     * @defaultValue `''`
+     */
+    className: string;
+    /**
+     * Class name to apply to the container of the carousel.
+     *
+     * @defaultValue `''`
+     */
+    containerClass: string;
+    /**
+     * Class name to apply to each slide in the carousel.
+     *
+     * @defaultValue `''`
+     */
+    slideClass: string | ((slideContext: {
+        id: string;
+        index: number;
+        active: boolean;
+    }) => string);
+    /**
+     * The data for each slide in the carousel.
+     *
+     * @defaultValue `[]`
+     */
+    slidesData: SlideData[];
+    /**
+     * The structure of the carousel.
+     *
+     * @defaultValue `undefined`
+     */
+    structure: SlotContent<CarouselContext<SlideData>>;
+    /**
+     * The navigation layer of the carousel.
+     *
+     * @defaultValue `undefined`
+     */
+    navigation: SlotContent<CarouselContext<SlideData>>;
+    /**
+     * The content of each slide in the carousel.
+     *
+     * @defaultValue `undefined`
+     */
+    slide: SlotContent<CarouselSlideContext<SlideData>>;
+    /**
+     * The aria-live attribute value for the carousel container.
+     *
+     * @defaultValue `'polite'`
+     */
+    ariaLive: string;
+}
+/**
+ * Interface representing the properties for a carousel component.
+ *
+ * @template SlideData - The type of data used by each slide in the carousel.
+ */
+export interface CarouselProps<SlideData extends {
+    id: string;
+}> {
+    /**
+     * Plugins to extend the carousel with additional features
+     * @defaultValue `[]`
+     */
+    plugins: EmblaPluginType[];
+    /**
+     * Aria label for navigation indicators
+     */
+    ariaIndicatorLabel: (index: number) => string;
+    /**
+     * Aria label for previous button
+     */
+    ariaPrevLabel: string;
+    /**
+     * Aria label for next button
+     */
+    ariaNextLabel: string;
+    /**
+     * Align the slides relative to the carousel viewport
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#align}
+     * @defaultValue `'center'`
+     */
+    align: 'start' | 'center' | 'end';
+    /**
+     * Enables choosing a custom container element which holds the slides. By default, Embla will choose the first direct child element of the root element. Provide a valid CSS selector string.
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#container}
+     */
+    container: string | null;
+    /**
+     * Clear leading and trailing empty space that causes excessive scrolling
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#containScroll}
+     * @defaultValue `'trimSnaps'`
+     */
+    containScroll: false | 'trimSnaps' | 'keepSnaps';
+    /**
+     * Choose content direction between `ltr` and `rtl`
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#direction}
+     * @defaultValue `'ltr'`
+     */
+    direction: 'ltr' | 'rtl';
+    /**
+     * Enables momentum scrolling
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#dragFree}
+     * @defaultValue `false`
+     */
+    dragFree: boolean;
+    /**
+     * Drag threshold in pixels
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#dragThreshold}
+     * @defaultValue `10`
+     */
+    dragThreshold: number;
+    /**
+     * Set scroll duration when triggered by any of the API methods
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#duration}
+     * @defaultValue `25`
+     */
+    duration: number;
+    /**
+     * Enables infinite looping
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#loop}
+     * @defaultValue `false`
+     */
+    loop: boolean;
+    /**
+     * Allow the carousel to skip scroll snaps if it's dragged vigorously
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#skipsnaps}
+     * @defaultValue `false`
+     */
+    skipSnaps: boolean;
+    /**
+     * If `true`, 'previous' and 'next' navigation arrows will be visible.
+     */
+    showNavigationArrows: boolean;
+    /**
+     * If `true`, navigation indicators at the bottom of the slide will be visible.
+     */
+    showNavigationIndicators: boolean;
+    /**
+     * CSS classes to be applied on the widget main container
+     *
+     * @defaultValue `''`
+     */
+    className: string;
+    /**
+     * Class name to apply to the container of the carousel.
+     *
+     * @defaultValue `''`
+     */
+    containerClass: string;
+    /**
+     * Class name to apply to each slide in the carousel.
+     *
+     * @defaultValue `''`
+     */
+    slideClass: string | ((slideContext: {
+        id: string;
+        index: number;
+        active: boolean;
+    }) => string);
+    /**
+     * The data for each slide in the carousel.
+     *
+     * @defaultValue `[]`
+     */
+    slidesData: SlideData[];
+    /**
+     * The structure of the carousel.
+     *
+     * @defaultValue `undefined`
+     */
+    structure: SlotContent<CarouselContext<SlideData>>;
+    /**
+     * The navigation layer of the carousel.
+     *
+     * @defaultValue `undefined`
+     */
+    navigation: SlotContent<CarouselContext<SlideData>>;
+    /**
+     * The content of each slide in the carousel.
+     *
+     * @defaultValue `undefined`
+     */
+    slide: SlotContent<CarouselSlideContext<SlideData>>;
+    /**
+     * The aria-live attribute value for the carousel container.
+     *
+     * @defaultValue `'polite'`
+     */
+    ariaLive: string;
+}
+/**
+ * Represents the directives for a carousel component.
+ */
+export interface CarouselDirectives {
+    /**
+     * A directive to be applied to each slide in the carousel.
+     */
+    slide: Directive<{
+        id: string;
+        index: number;
+    }>;
+    /**
+     * A directive to be applied to container of the carousel.
+     */
+    container: Directive;
+    /**
+     * the root directive
+     */
+    root: Directive;
+    /**
+     * A directive to be applied to a navigation button allowing to scroll to the previous slide.
+     */
+    scrollPrev: Directive;
+    /**
+     * A directive to be applied to a navigation button allowing to scroll to the next slide.
+     */
+    scrollNext: Directive;
+    /**
+     * A directive to be applied to a tab list allowing to navigate to the corresponding slide.
+     * This directive adds the role `tablist` and is recommended to be used together with {@link tabIndicator}.
+     */
+    tabList: Directive;
+    /**
+     * A directive to be applied to a navigation indicator allowing to scroll to the corresponding slide.
+     * As this directive adds the role `tab` to the element, it is recommended to use it on a button or a link and the parent element should have the {@link tabList} directive attached.
+     */
+    tabIndicator: Directive<{
+        index: number;
+        id: string;
+        jump?: boolean;
+    }>;
+}
+/**
+ * Represents a carousel widget with specific properties, state, API, and directives.
+ *
+ * @template SlideData - The type of the data for each slide.
+ */
+export type CarouselWidget<SlideData extends {
+    id: string;
+}> = Widget<CarouselProps<SlideData>, CarouselState<SlideData>, CarouselApi, CarouselDirectives>;
+/**
+ * Represents the API for a carousel component.
+ */
+export interface CarouselApi {
+    /**
+     * Scroll to the previous snap point if possible.
+     * @param jump - scroll instantly
+     */
+    scrollPrev: (jump?: boolean) => void;
+    /**
+     * Scroll to the next snap point if possible.
+     * @param jump - scroll instantly
+     */
+    scrollNext: (jump?: boolean) => void;
+    /**
+     * Scroll to a snap point by index
+     * @param index - the snap point index
+     * @param jump - scroll instantly
+     */
+    scrollTo: (index: number, jump?: boolean) => void;
+    /**
+     * Retrieve the enabled plugins
+     */
+    plugins: () => EmblaPluginsType | undefined;
+    /**
+     * Retrieve the inner EmblaApi object
+     */
+    emblaApi: () => EmblaCarouselType | undefined;
+}

package/components/carousel/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const carousel = require("../../carousel-B8b91cHo.cjs");
+exports.Carousel = carousel.Carousel;
+exports.CarouselDefaultNavigation = carousel.CarouselDefaultNavigation;
+exports.CarouselDefaultStructure = carousel.CarouselDefaultStructure;
+exports.createCarousel = carousel.export_createCarousel;
+exports.getCarouselDefaultConfig = carousel.export_getCarouselDefaultConfig;

package/components/carousel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './carousel.gen';
+export * from './carousel';

package/components/carousel/index.js

@@ -0,0 +1,8 @@
+import { c, C, b, a, e } from "../../carousel-CB4uoAm0.js";
+export {
+  c as Carousel,
+  C as CarouselDefaultNavigation,
+  b as CarouselDefaultStructure,
+  a as createCarousel,
+  e as getCarouselDefaultConfig
+};

package/components/collapse/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const collapse = require("../../collapse-UMbDs6Gh.cjs");
+const collapse = require("../../collapse-BQNW5NFj.cjs");
 exports.Collapse = collapse.Collapse;
 exports.createCollapse = collapse.export_createCollapse;
 exports.getCollapseDefaultConfig = collapse.export_getCollapseDefaultConfig;

package/components/collapse/index.js

@@ -1,4 +1,4 @@
-import { C, a, e } from "../../collapse-BOXBa8_8.js";
+import { C, a, e } from "../../collapse-DojQXsLN.js";
 export {
   C as Collapse,
   a as createCollapse,

package/components/select/index.js

@@ -1,4 +1,4 @@
-import { S, a, e } from "../../select-C2jCf6jT.js";
+import { S, a, e } from "../../select-ClQGKBMF.js";
 export {
   S as Select,
   a as createSelect,