@agnos-ui/react-bootstrap 0.5.0 → 0.6.0-next.1

package/{accordion-CxT3atuW.cjs → accordion-01ch6GZW.cjs}

@@ -27,17 +27,17 @@ const AccordionItem = React.forwardRef(
       structure: AccordionItemDefaultSlotStructure
     });
     const { state, api, directives } = widgetContext;
-    React.useImperativeHandle(ref, () => api, []);
+    React.useImperativeHandle(ref, () => api, [api]);
     React.useEffect(() => {
       api.initDone();
-    }, []);
+    }, [api]);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirectives([directive.classDirective, `accordion-item ${state.className}`], directives.itemDirective), children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: state.structure, props: widgetContext }) });
   }
 );
 const Accordion = React.forwardRef(
   function Accordion2(props, ref) {
     const widget = generated_config.useWidgetWithConfig(export_createAccordion, props, "accordion");
-    React.useImperativeHandle(ref, () => widget.api, []);
+    React.useImperativeHandle(ref, () => widget.api, [widget.api]);
     return /* @__PURE__ */ jsxRuntime.jsx(AccordionDIContext.Provider, { value: widget.api, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirectives([directive.classDirective, "accordion"], widget.directives.accordionDirective), children: props.children }) });
   }
 );

package/{accordion-BX1iR5BO.js → accordion-D3SZgVk6.js}

@@ -26,17 +26,17 @@ const AccordionItem = forwardRef(
       structure: AccordionItemDefaultSlotStructure
     });
     const { state, api, directives } = widgetContext;
-    useImperativeHandle(ref, () => api, []);
+    useImperativeHandle(ref, () => api, [api]);
     useEffect(() => {
       api.initDone();
-    }, []);
+    }, [api]);
     return /* @__PURE__ */ jsx("div", { ...useDirectives([classDirective, `accordion-item ${state.className}`], directives.itemDirective), children: /* @__PURE__ */ jsx(Slot, { slotContent: state.structure, props: widgetContext }) });
   }
 );
 const Accordion = forwardRef(
   function Accordion2(props, ref) {
     const widget = useWidgetWithConfig(export_createAccordion, props, "accordion");
-    useImperativeHandle(ref, () => widget.api, []);
+    useImperativeHandle(ref, () => widget.api, [widget.api]);
     return /* @__PURE__ */ jsx(AccordionDIContext.Provider, { value: widget.api, children: /* @__PURE__ */ jsx("div", { ...useDirectives([classDirective, "accordion"], widget.directives.accordionDirective), children: props.children }) });
   }
 );

package/{alert-D1FXDsJn.js → alert-CTTuh9t9.js}

@@ -28,7 +28,7 @@ const Alert = forwardRef(function Alert2(props, ref) {
   const widgetContext = useWidgetWithConfig(export_createAlert, props, "alert", {
     structure: AlertDefaultSlotStructure
   });
-  useImperativeHandle(ref, () => widgetContext.api, []);
+  useImperativeHandle(ref, () => widgetContext.api, [widgetContext.api]);
   return /* @__PURE__ */ jsx(Fragment, { children: !widgetContext.state.hidden && /* @__PURE__ */ jsx(AlertElement, { ...widgetContext }) });
 });
 export {

package/{alert-LKMMYmg_.cjs → alert-DGvp2r3W.cjs}

@@ -29,7 +29,7 @@ const Alert = React.forwardRef(function Alert2(props, ref) {
   const widgetContext = generated_config.useWidgetWithConfig(export_createAlert, props, "alert", {
     structure: AlertDefaultSlotStructure
   });
-  React.useImperativeHandle(ref, () => widgetContext.api, []);
+  React.useImperativeHandle(ref, () => widgetContext.api, [widgetContext.api]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !widgetContext.state.hidden && /* @__PURE__ */ jsxRuntime.jsx(AlertElement, { ...widgetContext }) });
 });
 exports.Alert = Alert;

package/{collapse-DhsL8j2h.js → collapse-DNwn7xgF.js}

@@ -8,7 +8,7 @@ const export_createCollapse = createCollapse;
 const Collapse = forwardRef(
   function Collapse2(props, ref) {
     const { api, directives } = useWidgetWithConfig(export_createCollapse, props, "collapse");
-    useImperativeHandle(ref, () => api, []);
+    useImperativeHandle(ref, () => api, [api]);
     return /* @__PURE__ */ jsx("div", { ...useDirectives(directives.collapseDirective), children: props.children });
   }
 );

package/{collapse-BpPYsx89.cjs → collapse-Dodvr8dn.cjs}

@@ -9,7 +9,7 @@ const export_createCollapse = collapse.createCollapse;
 const Collapse = React.forwardRef(
   function Collapse2(props, ref) {
     const { api, directives } = generated_config.useWidgetWithConfig(export_createCollapse, props, "collapse");
-    React.useImperativeHandle(ref, () => api, []);
+    React.useImperativeHandle(ref, () => api, [api]);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirectives(directives.collapseDirective), children: props.children });
   }
 );

package/components/accordion/accordion.d.ts

@@ -3,8 +3,8 @@ import type { AccordionApi, AccordionItemApi, AccordionItemContext, AccordionIte
 /**
  * Renders the default slot structure for an accordion item.
  *
- * @param {AccordionItemContext} slotContext - The context containing state and directives for the accordion item.
- * @returns {JSX.Element} The JSX element representing the accordion item's default slot structure.
+ * @param slotContext - The context containing state and directives for the accordion item.
+ * @returns The JSX element representing the accordion item's default slot structure.
  */
 export declare const AccordionItemDefaultSlotStructure: (slotContext: AccordionItemContext) => import("react/jsx-runtime").JSX.Element;
 /**
@@ -33,7 +33,7 @@ export declare const AccordionItem: ForwardRefExoticComponent<Partial<AccordionI
  * This component uses a forward ref to expose the Accordion API to parent components.
  * It leverages the {@link useWidgetWithConfig} hook to create the accordion widget and
  * {@link https://react.dev/reference/react/useImperativeHandle | useImperativeHandle} to bind the widget API to the ref.
-
+ *
  * @param {PropsWithChildren<Partial<AccordionProps>>} props - The properties for the Accordion component.
  * @param {ForwardedRef<AccordionApi>} ref - The ref to be forwarded to the Accordion API.
  *

package/components/accordion/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const accordion = require("../../accordion-CxT3atuW.cjs");
+const accordion = require("../../accordion-01ch6GZW.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-BX1iR5BO.js";
+import { b, a, A, d, c, f, e } from "../../accordion-D3SZgVk6.js";
 export {
   b as Accordion,
   a as AccordionItem,

package/components/alert/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const alert = require("../../alert-LKMMYmg_.cjs");
+const alert = require("../../alert-DGvp2r3W.cjs");
 exports.Alert = alert.Alert;
 exports.AlertDefaultSlotStructure = alert.AlertDefaultSlotStructure;
 exports.createAlert = alert.export_createAlert;

package/components/alert/index.js

@@ -1,4 +1,4 @@
-import { a, A, b, e } from "../../alert-D1FXDsJn.js";
+import { a, A, b, e } from "../../alert-CTTuh9t9.js";
 export {
   a as Alert,
   A as AlertDefaultSlotStructure,

package/components/collapse/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const collapse = require("../../collapse-BpPYsx89.cjs");
+const collapse = require("../../collapse-Dodvr8dn.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-DhsL8j2h.js";
+import { C, a, e } from "../../collapse-DNwn7xgF.js";
 export {
   C as Collapse,
   a as createCollapse,

package/components/modal/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const modal = require("../../modal-DpMvOtL2.cjs");
+const modal = require("../../modal-_OcXelvY.cjs");
 exports.Modal = modal.Modal;
 exports.ModalDefaultSlotHeader = modal.ModalDefaultSlotHeader;
 exports.ModalDefaultSlotStructure = modal.ModalDefaultSlotStructure;

package/components/modal/index.js

@@ -1,4 +1,4 @@
-import { b, M, a, c, e, f, d, o } from "../../modal-CWuYx5n5.js";
+import { b, M, a, c, e, f, d, o } from "../../modal-DuCmvYiX.js";
 export {
   b as Modal,
   M as ModalDefaultSlotHeader,

package/components/modal/modal.d.ts

@@ -4,16 +4,16 @@ import type { ModalApi, ModalContext, ModalProps } from './modal.gen';
  * A default header component for the modal that displays a title and an optional close button.
  *
  * @template Data - The type of data used in the modal context.
- * @param {ModalContext<Data>} slotContext - The context object containing the state and directives for the modal.
- * @returns {JSX.Element} The JSX element representing the modal header.
+ * @param slotContext - The context object containing the state and directives for the modal.
+ * @returns The JSX element representing the modal header.
  */
 export declare const ModalDefaultSlotHeader: <Data>(slotContext: ModalContext<Data>) => import("react/jsx-runtime").JSX.Element;
 /**
  * Renders the default slot structure for a modal component.
  *
  * @template Data - The type of the data used in the modal context.
- * @param {ModalContext<Data>} slotContext - The context containing the state and props for the modal slots.
- * @returns {JSX.Element} The JSX structure for the modal's default slots.
+ * @param slotContext - The context containing the state and props for the modal slots.
+ * @returns The JSX structure for the modal's default slots.
  */
 export declare const ModalDefaultSlotStructure: <Data>(slotContext: ModalContext<Data>) => import("react/jsx-runtime").JSX.Element;
 /**
@@ -31,7 +31,7 @@ export declare const Modal: <Data>(props: Partial<ModalProps<Data>> & RefAttribu
  * Opens a modal dialog with the specified options.
  *
  * @template Data - The type of data that the modal will handle.
- * @param {Partial<ModalProps<Data>>} options - The options to configure the modal.
- * @returns {Promise<any>} A promise that resolves when the modal is closed.
+ * @param options - The options to configure the modal.
+ * @returns A promise that resolves when the modal is closed.
  */
 export declare function openModal<Data>(options: Partial<ModalProps<Data>>): Promise<any>;

package/components/pagination/pagination.d.ts

@@ -2,8 +2,8 @@ import type { PaginationContext, PaginationProps } from './pagination.gen';
 /**
  * Renders the default slot pages for the pagination component.
  *
- * @param {PaginationContext} slotContext - The context containing pagination state and directives.
- * @returns {JSX.Element | null} The rendered pagination items or null if there are no pages.
+ * @param slotContext - The context containing pagination state and directives.
+ * @returns The rendered pagination items or null if there are no pages.
  *
  * The function iterates over the pages in the pagination state and generates JSX elements for each page.
  * If a page is represented by -1, it renders an ellipsis item. Otherwise, it renders a page item.
@@ -17,8 +17,8 @@ export declare const PaginationDefaultSlotPages: (slotContext: PaginationContext
 /**
  * Renders the default slot structure for the pagination component.
  *
- * @param {PaginationContext} slotContext - The context containing the state and directives for pagination.
- * @returns {JSX.Element} The rendered pagination component.
+ * @param slotContext - The context containing the state and directives for pagination.
+ * @returns The rendered pagination component.
  *
  * The function constructs the pagination structure based on the provided state and directives.
  * It conditionally includes navigation buttons for first, previous, next, and last pages based on the state.
@@ -30,7 +30,7 @@ export declare const PaginationDefaultSlotStructure: (slotContext: PaginationCon
  * Pagination component that renders a navigation element for paginated content.
  * It uses the {@link useWidgetWithConfig} hook to create a pagination widget with the provided props.
  *
- * @param {Partial<PaginationProps>} props - The properties for the Pagination component.
- * @returns {JSX.Element} The rendered pagination navigation element.
+ * @param props - The properties for the Pagination component.
+ * @returns The rendered pagination navigation element.
  */
 export declare function Pagination(props: Partial<PaginationProps>): import("react/jsx-runtime").JSX.Element;

package/components/progressbar/progressbar.d.ts

@@ -2,16 +2,16 @@ import type { ProgressbarContext, ProgressbarProps } from './progressbar.gen';
 /**
  * Renders a progress bar component with customizable appearance and behavior.
  *
- * @param {ProgressbarContext} slotContext - The context containing the state and properties for the progress bar.
+ * @param slotContext - The context containing the state and properties for the progress bar.
  *
- * @returns {JSX.Element} The rendered progress bar component.
+ * @returns The rendered progress bar component.
  */
 export declare const ProgressbarDefaultSlotStructure: (slotContext: ProgressbarContext) => import("react/jsx-runtime").JSX.Element;
 /**
  * Progressbar component that utilizes the {@link useWidgetWithConfig} hook to create a progress bar widget.
  *
- * @param {Partial<ProgressbarProps>} props - The properties to configure the progress bar.
+ * @param props - The properties to configure the progress bar.
  *
- * @returns {JSX.Element} A div element containing the progress bar with appropriate ARIA directives and slot content.
+ * @returns A div element containing the progress bar with appropriate ARIA directives and slot content.
  */
 export declare const Progressbar: (props: Partial<ProgressbarProps>) => import("react/jsx-runtime").JSX.Element;

package/components/rating/rating.d.ts

@@ -2,8 +2,8 @@ import type { RatingProps } from './rating.gen';
 /**
  * Rating component that displays a series of stars based on the provided state.
  *
- * @param {Partial<RatingProps>} props - The properties for the Rating component.
- * @returns {JSX.Element} The rendered Rating component.
+ * @param props - The properties for the Rating component.
+ * @returns The rendered Rating component.
  *
  * @remarks
  * This component uses the {@link useWidgetWithConfig} hook to initialize and configure the rating widget.

package/components/select/select.d.ts

@@ -3,15 +3,11 @@ import type { SelectProps } from './select.gen';
  * A generic Select component that provides a customizable dropdown selection interface.
  *
  * @template Item - The type of the items in the selection.
- * @param {Partial<SelectProps<Item>>} props - The properties for the Select component.
- * @returns {JSX.Element} The rendered Select component.
+ * @param props - The properties for the Select component.
+ * @returns The rendered Select component.
  *
  * @remarks
  * This component uses a widget context to manage its state and directives. It supports
  * custom badge labels and item labels through the widget configuration.
- *
- * @component
- * @param {Partial<SelectProps<Item>>} props - The properties for the Select component.
- * @returns {JSX.Element} The rendered Select component.
  */
 export declare function Select<Item>(props: Partial<SelectProps<Item>>): import("react/jsx-runtime").JSX.Element;

package/components/select/select.gen.d.ts

@@ -306,6 +306,8 @@ declare const export_createSelect: <Item>(config?: PropsConfig<SelectProps<Item>
 export { export_createSelect as createSelect };
 /**
  * Item representation built from the items provided in parameters
+ *
+ * @template T - The type of the Select Items
  */
 export interface ItemContext<T> {
     /**
@@ -323,6 +325,8 @@ export interface ItemContext<T> {
 }
 /**
  * Interface representing the API for a Select component.
+ *
+ * @template Item - The type of the Select Items
  */
 export interface SelectApi<Item> {
     /**
@@ -388,6 +392,8 @@ export interface SelectApi<Item> {
 }
 /**
  * Interface representing the directives used in the Select component.
+ *
+ * @template Item - The type of the Select Items
  */
 export interface SelectDirectives<Item> {
     /**

package/components/slider/slider.d.ts

@@ -4,23 +4,23 @@ import type { SliderContext, SliderProps, SliderSlotHandleContext } from './slid
  * A functional component that renders a button element with a directive applied to it.
  * The directive is provided through the `slotContext` parameter.
  *
- * @param {SliderSlotHandleContext} slotContext - The context object containing the directives and item for the slider handle.
- * @returns {JSX.Element} A button element with the applied directive.
+ * @param slotContext - The context object containing the directives and item for the slider handle.
+ * @returns A button element with the applied directive.
  */
 export declare const SliderDefaultSlotHandle: (slotContext: SliderSlotHandleContext) => import("react/jsx-runtime").JSX.Element;
 /**
  * Renders the default slot structure for the Slider component.
  *
- * @param {SliderContext} slotContext - The context object containing state and directives for the slider.
- * @returns {JSX.Element} The JSX element representing the default slot structure.
+ * @param slotContext - The context object containing state and directives for the slider.
+ * @returns The JSX element representing the default slot structure.
  *
  */
 export declare const SliderDefaultSlotStructure: (slotContext: SliderContext) => import("react/jsx-runtime").JSX.Element;
 /**
  * Slider component that integrates with a widget context and renders a slot structure.
  *
- * @param {PropsWithChildren<Partial<SliderProps>>} props - The properties for the Slider component.
- * @returns {JSX.Element} The rendered Slider component.
+ * @param props - The properties for the Slider component.
+ * @returns The rendered Slider component.
  *
  * The Slider component uses the {@link useWidgetWithConfig} hook to create a widget context with the provided
  * configuration. It then applies the `sliderDirective` to a `div` element and renders the slot content

package/components/toast/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const toast = require("../../toast-E1DM85iZ.cjs");
+const toast = require("../../toast-Vv1dxnuA.cjs");
 exports.Toast = toast.Toast;
 exports.ToastDefaultSlotStructure = toast.ToastDefaultSlotStructure;
 exports.createToast = toast.export_createToast;

package/components/toast/index.js

@@ -1,4 +1,4 @@
-import { a, T, b, e } from "../../toast-Dgfv5S_p.js";
+import { a, T, b, e } from "../../toast-CS1mMdhx.js";
 export {
   a as Toast,
   T as ToastDefaultSlotStructure,

package/components/toast/toast.d.ts

@@ -3,8 +3,8 @@ import type { ToastApi, ToastContext, ToastProps } from './toast.gen';
 /**
  * Renders the default slot structure for a Toast component.
  *
- * @param {ToastContext} slotContext - The context containing the state and properties for the Toast component.
- * @returns {JSX.Element} The JSX element representing the default slot structure of the Toast.
+ * @param slotContext - The context containing the state and properties for the Toast component.
+ * @returns The JSX element representing the default slot structure of the Toast.
  */
 export declare const ToastDefaultSlotStructure: (slotContext: ToastContext) => import("react/jsx-runtime").JSX.Element;
 /**

package/components/tree/index.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tree = require("../../tree-CCmlpEPq.cjs");
+exports.DefaultTreeSlotItem = tree.DefaultTreeSlotItem;
+exports.DefaultTreeSlotItemContent = tree.DefaultTreeSlotItemContent;
+exports.DefaultTreeSlotItemToggle = tree.DefaultTreeSlotItemToggle;
+exports.DefaultTreeSlotStructure = tree.DefaultTreeSlotStructure;
+exports.Tree = tree.Tree;
+exports.createTree = tree.export_createTree;
+exports.getTreeDefaultConfig = tree.export_getTreeDefaultConfig;

package/components/tree/index.d.ts

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

package/components/tree/index.js

@@ -0,0 +1,10 @@
+import { b, a, D, c, T, d, e } from "../../tree-CrXS0sFt.js";
+export {
+  b as DefaultTreeSlotItem,
+  a as DefaultTreeSlotItemContent,
+  D as DefaultTreeSlotItemToggle,
+  c as DefaultTreeSlotStructure,
+  T as Tree,
+  d as createTree,
+  e as getTreeDefaultConfig
+};

package/components/tree/tree.d.ts

@@ -0,0 +1,42 @@
+import type { TreeContext, TreeProps, TreeSlotItemContext } from './tree.gen';
+/**
+ * A functional component that renders a toggle element with a directive applied to it.
+ * The directive is provided through the `slotContext` parameter.
+ *
+ * @param slotContext - The context object containing the directives and item the toggle.
+ * @returns A toggle element with the applied directive.
+ */
+export declare const DefaultTreeSlotItemToggle: (slotContext: TreeSlotItemContext) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A functional component that renders a tree item content element.
+ *
+ * @param slotContext - The context object containing the item content for display.
+ * @returns A tree item element.
+ */
+export declare const DefaultTreeSlotItemContent: (slotContext: TreeSlotItemContext) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A functional component that renders a tree item element with a directive applied to it.
+ * The directive is provided through the `slotContext` parameter.
+ *
+ * @param slotContext - The context object containing the directives and item for the tree item element.
+ * @returns A tree root element with the applied directive.
+ */
+export declare const DefaultTreeSlotItem: (slotContext: TreeSlotItemContext) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A functional component that renders a tree structure with a directive applied to it.
+ * The directive is provided through the `slotContext` parameter.
+ *
+ * @param slotContext - The context object containing the directives and items for the tree display.
+ * @returns A tree structure with the applied directive.
+ */
+export declare const DefaultTreeSlotStructure: (slotContext: TreeContext) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Tree component that integrates with a widget context and renders a slot structure.
+ *
+ * @param props - The properties for the Tree component.
+ * @returns The rendered Tree component.
+ *
+ * The Tree component uses the {@link useWidgetWithConfig} hook to create a widget context with the provided
+ * configuration. It renders the slot content using the `Slot` component.
+ */
+export declare function Tree(props: Partial<TreeProps>): import("react/jsx-runtime").JSX.Element;

package/components/tree/tree.gen.d.ts

@@ -0,0 +1,216 @@
+import type { WidgetSlotContext, SlotContent, Widget, WidgetFactory, Directive } from '@agnos-ui/react-headless/types';
+/**
+ * Retrieve a shallow copy of the default Tree config
+ * @returns the default Tree config
+ */
+declare const export_getTreeDefaultConfig: () => TreeProps;
+export { export_getTreeDefaultConfig as getTreeDefaultConfig };
+/**
+ * Represents the context for a Tree widget.
+ * This interface is an alias for `WidgetSlotContext<TreeWidget>`.
+ */
+export type TreeContext = WidgetSlotContext<TreeWidget>;
+/**
+ * Represents the context for a tree item, extending the base `TreeContext`
+ * with an additional `item` property.
+ */
+export type TreeSlotItemContext = TreeContext & {
+    item: NormalizedTreeItem;
+};
+/**
+ * Represents the state of a Tree component.
+ */
+export interface TreeState {
+    /**
+     * Array of normalized tree nodes
+     */
+    normalizedNodes: NormalizedTreeItem[];
+    /**
+     * Getter of expanded state for each tree node
+     */
+    expandedMap: {
+        get(item: NormalizedTreeItem): boolean | undefined;
+    };
+    /**
+     * Optional accessibility label for the tree if there is no explicit label
+     *
+     * @defaultValue `''`
+     */
+    ariaLabel?: string;
+    /**
+     * CSS classes to be applied on the widget main container
+     *
+     * @defaultValue `''`
+     */
+    className: string;
+    /**
+     * Slot to change the default display of the tree
+     */
+    structure: SlotContent<TreeContext>;
+    /**
+     * Slot to change the default tree item
+     */
+    item: SlotContent<TreeSlotItemContext>;
+    /**
+     * Slot to change the default tree item content
+     */
+    itemContent: SlotContent<TreeSlotItemContext>;
+    /**
+     * Slot to change the default tree item toggle
+     */
+    itemToggle: SlotContent<TreeSlotItemContext>;
+}
+/**
+ * Represents the properties for the Tree component.
+ */
+export interface TreeProps {
+    /**
+     * Array of the tree nodes to display
+     *
+     * @defaultValue `[]`
+     */
+    nodes: TreeItem[];
+    /**
+     * An event emitted when the user toggles the expand of the TreeItem.
+     *
+     * Event payload is equal to the TreeItem clicked.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onExpandToggle: (node: NormalizedTreeItem) => void;
+    /**
+     * Retrieves expand items of the TreeItem
+     *
+     * @param node - HTML element that is representing the expand item
+     *
+     * @defaultValue
+     * ```ts
+     * (node: HTMLElement) => node.querySelectorAll('button')
+     * ```
+     */
+    navSelector(node: HTMLElement): NodeListOf<HTMLButtonElement>;
+    /**
+     * Return the value for the 'aria-label' attribute of the toggle
+     * @param label - tree item label
+     *
+     * @defaultValue
+     * ```ts
+     * (label: string) => `Toggle ${label}`
+     * ```
+     */
+    ariaLabelToggleFn: (label: string) => string;
+    /**
+     * Optional accessibility label for the tree if there is no explicit label
+     *
+     * @defaultValue `''`
+     */
+    ariaLabel?: string;
+    /**
+     * CSS classes to be applied on the widget main container
+     *
+     * @defaultValue `''`
+     */
+    className: string;
+    /**
+     * Slot to change the default display of the tree
+     */
+    structure: SlotContent<TreeContext>;
+    /**
+     * Slot to change the default tree item
+     */
+    item: SlotContent<TreeSlotItemContext>;
+    /**
+     * Slot to change the default tree item content
+     */
+    itemContent: SlotContent<TreeSlotItemContext>;
+    /**
+     * Slot to change the default tree item toggle
+     */
+    itemToggle: SlotContent<TreeSlotItemContext>;
+}
+/**
+ * Represents a Tree widget component.
+ */
+export type TreeWidget = Widget<TreeProps, TreeState, TreeApi, TreeDirectives>;
+/**
+ * Create a Tree with given config props
+ * @param config - an optional tree config
+ * @returns a TreeWidget
+ */
+declare const export_createTree: WidgetFactory<TreeWidget>;
+export { export_createTree as createTree };
+/**
+ * Represents a tree item component.
+ */
+export interface TreeItem {
+    /**
+     * Optional accessibility label for the node
+     */
+    ariaLabel?: string;
+    /**
+     * Optional array of children nodes
+     */
+    children?: TreeItem[];
+    /**
+     * If `true` the node is expanded
+     */
+    isExpanded?: boolean;
+    /**
+     * String title of the node
+     */
+    label: string;
+}
+/**
+ * Normalized TreeItem object
+ */
+export interface NormalizedTreeItem {
+    /**
+     * Accessibility label for the node
+     */
+    ariaLabel: string;
+    /**
+     * Level in the hierarchy, starts with 0 for a root node
+     */
+    level: number;
+    /**
+     * An array of children nodes
+     */
+    children: NormalizedTreeItem[];
+    /**
+     * If `true` the node is expanded
+     */
+    isExpanded?: boolean;
+    /**
+     * String title of the node
+     */
+    label: string;
+}
+/**
+ * Interface representing the API for a Tree component.
+ */
+export interface TreeApi {
+}
+/**
+ * Interface representing various directives used in the Tree component.
+ */
+export interface TreeDirectives {
+    /**
+     * Directive to attach navManager for the tree
+     */
+    navigationDirective: Directive;
+    /**
+     * Directive to handle toggle for the tree item
+     */
+    itemToggleDirective: Directive<{
+        item: NormalizedTreeItem;
+    }>;
+    /**
+     * Directive to handle attributes for the tree item
+     */
+    itemAttributesDirective: Directive<{
+        item: NormalizedTreeItem;
+    }>;
+}

package/config.gen.d.ts

@@ -8,6 +8,7 @@ import type { RatingProps } from './components/rating';
 import type { SelectProps } from './components/select';
 import type { SliderProps } from './components/slider';
 import type { ToastProps } from './components/toast';
+import type { TreeProps } from './components/tree';
 export type WidgetsConfig = {
     /**
      * the accordion widget config
@@ -49,4 +50,8 @@ export type WidgetsConfig = {
      * the toast widget config
      */
     toast: ToastProps;
+    /**
+     * the tree widget config
+     */
+    tree: TreeProps;
 };

package/index.cjs

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const accordion = require("./accordion-CxT3atuW.cjs");
-const alert = require("./alert-LKMMYmg_.cjs");
-const collapse = require("./collapse-BpPYsx89.cjs");
-const modal = require("./modal-DpMvOtL2.cjs");
+const accordion = require("./accordion-01ch6GZW.cjs");
+const alert = require("./alert-DGvp2r3W.cjs");
+const collapse = require("./collapse-Dodvr8dn.cjs");
+const modal = require("./modal-_OcXelvY.cjs");
 const pagination = require("./pagination-b4pKj3Kx.cjs");
 const progressbar = require("./progressbar-JO1ey9mx.cjs");
 const rating = require("./rating-eI8T0zvS.cjs");
 const select = require("./select-XHUAqTDw.cjs");
 const slider = require("./slider-BUQne5aJ.cjs");
-const toast = require("./toast-E1DM85iZ.cjs");
+const toast = require("./toast-Vv1dxnuA.cjs");
+const tree = require("./tree-CCmlpEPq.cjs");
 const types = require("@agnos-ui/react-headless/types");
 const slot = require("@agnos-ui/react-headless/slot");
 const config = require("@agnos-ui/react-headless/config");
@@ -82,6 +83,13 @@ exports.Toast = toast.Toast;
 exports.ToastDefaultSlotStructure = toast.ToastDefaultSlotStructure;
 exports.createToast = toast.export_createToast;
 exports.getToastDefaultConfig = toast.export_getToastDefaultConfig;
+exports.DefaultTreeSlotItem = tree.DefaultTreeSlotItem;
+exports.DefaultTreeSlotItemContent = tree.DefaultTreeSlotItemContent;
+exports.DefaultTreeSlotItemToggle = tree.DefaultTreeSlotItemToggle;
+exports.DefaultTreeSlotStructure = tree.DefaultTreeSlotStructure;
+exports.Tree = tree.Tree;
+exports.createTree = tree.export_createTree;
+exports.getTreeDefaultConfig = tree.export_getTreeDefaultConfig;
 exports.WidgetsDefaultConfig = generated_config.WidgetsDefaultConfig;
 exports.useWidgetContext = generated_config.useWidgetContext;
 exports.useWidgetWithConfig = generated_config.useWidgetWithConfig;

package/index.d.ts

@@ -8,4 +8,5 @@ export * from './components/rating';
 export * from './components/select';
 export * from './components/slider';
 export * from './components/toast';
+export * from './components/tree';
 export * from './generated';

package/index.js

@@ -1,13 +1,14 @@
-import { b, a, A, d, c, f, e } from "./accordion-BX1iR5BO.js";
-import { a as a2, A as A2, b as b2, e as e2 } from "./alert-D1FXDsJn.js";
-import { C, a as a3, e as e3 } from "./collapse-DhsL8j2h.js";
-import { b as b3, M, a as a4, c as c2, e as e4, f as f2, d as d2, o } from "./modal-CWuYx5n5.js";
+import { b, a, A, d, c, f, e } from "./accordion-D3SZgVk6.js";
+import { a as a2, A as A2, b as b2, e as e2 } from "./alert-CTTuh9t9.js";
+import { C, a as a3, e as e3 } from "./collapse-DNwn7xgF.js";
+import { b as b3, M, a as a4, c as c2, e as e4, f as f2, d as d2, o } from "./modal-DuCmvYiX.js";
 import { N, P, c as c3, a as a5, b as b4, d as d3, e as e5 } from "./pagination-5jlJWfFj.js";
 import { a as a6, P as P2, b as b5, e as e6 } from "./progressbar-DKFR5epE.js";
 import { R, a as a7, e as e7 } from "./rating-CTfRQGGu.js";
 import { S, a as a8, e as e8 } from "./select-BriGqe3k.js";
 import { b as b6, S as S2, a as a9, c as c4, e as e9 } from "./slider--K7ri_0l.js";
-import { a as a10, T, b as b7, e as e10 } from "./toast-Dgfv5S_p.js";
+import { a as a10, T, b as b7, e as e10 } from "./toast-CS1mMdhx.js";
+import { b as b8, a as a11, D, c as c5, T as T2, d as d4, e as e11 } from "./tree-CrXS0sFt.js";
 export * from "@agnos-ui/react-headless/types";
 export * from "@agnos-ui/react-headless/slot";
 export * from "@agnos-ui/react-headless/config";
@@ -39,6 +40,10 @@ export {
   a2 as Alert,
   A2 as AlertDefaultSlotStructure,
   C as Collapse,
+  b8 as DefaultTreeSlotItem,
+  a11 as DefaultTreeSlotItemContent,
+  D as DefaultTreeSlotItemToggle,
+  c5 as DefaultTreeSlotStructure,
   b3 as Modal,
   M as ModalDefaultSlotHeader,
   a4 as ModalDefaultSlotStructure,
@@ -56,6 +61,7 @@ export {
   a9 as SliderDefaultSlotStructure,
   a10 as Toast,
   T as ToastDefaultSlotStructure,
+  T2 as Tree,
   WidgetsDefaultConfig,
   d as createAccordion,
   c as createAccordionItem,
@@ -68,6 +74,7 @@ export {
   a8 as createSelect,
   c4 as createSlider,
   b7 as createToast,
+  d4 as createTree,
   f as factoryCreateAccordion,
   e as getAccordionDefaultConfig,
   e2 as getAlertDefaultConfig,
@@ -79,6 +86,7 @@ export {
   e8 as getSelectDefaultConfig,
   e9 as getSliderDefaultConfig,
   e10 as getToastDefaultConfig,
+  e11 as getTreeDefaultConfig,
   f2 as modalCloseButtonClick,
   d2 as modalOutsideClick,
   o as openModal,

package/{modal-CWuYx5n5.js → modal-DuCmvYiX.js}

@@ -31,7 +31,7 @@ const Modal = forwardRef(function Modal2(props, ref) {
     header: ModalDefaultSlotHeader,
     structure: ModalDefaultSlotStructure
   });
-  useImperativeHandle(ref, () => widgetContext.api, []);
+  useImperativeHandle(ref, () => widgetContext.api, [widgetContext.api]);
   return /* @__PURE__ */ jsxs(Portal, { container: widgetContext.state.container, children: [
     !widgetContext.state.backdropHidden && /* @__PURE__ */ jsx(BackdropElement, { ...widgetContext }),
     !widgetContext.state.hidden && /* @__PURE__ */ jsx(ModalElement, { ...widgetContext })

package/{modal-DpMvOtL2.cjs → modal-_OcXelvY.cjs}

@@ -32,7 +32,7 @@ const Modal = React.forwardRef(function Modal2(props, ref) {
     header: ModalDefaultSlotHeader,
     structure: ModalDefaultSlotStructure
   });
-  React.useImperativeHandle(ref, () => widgetContext.api, []);
+  React.useImperativeHandle(ref, () => widgetContext.api, [widgetContext.api]);
   return /* @__PURE__ */ jsxRuntime.jsxs(portal.Portal, { container: widgetContext.state.container, children: [
     !widgetContext.state.backdropHidden && /* @__PURE__ */ jsxRuntime.jsx(BackdropElement, { ...widgetContext }),
     !widgetContext.state.hidden && /* @__PURE__ */ jsxRuntime.jsx(ModalElement, { ...widgetContext })

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/react-bootstrap",
 	"description": "Bootstrap-based component library for React.",
-	"version": "0.5.0",
+	"version": "0.6.0-next.1",
 	"type": "module",
 	"main": "./index.cjs",
 	"module": "./index.js",
@@ -49,8 +49,8 @@
 		}
 	},
 	"dependencies": {
-		"@agnos-ui/core-bootstrap": "0.5.0",
-		"@agnos-ui/react-headless": "0.5.0",
+		"@agnos-ui/core-bootstrap": "0.6.0-next.1",
+		"@agnos-ui/react-headless": "0.6.0-next.1",
 		"classnames": "^2.5.1"
 	},
 	"peerDependencies": {

package/{toast-Dgfv5S_p.js → toast-CS1mMdhx.js}

@@ -6,9 +6,10 @@ import { useWidgetWithConfig } from "./generated/config.js";
 import { getToastDefaultConfig, createToast } from "@agnos-ui/core-bootstrap/components/toast";
 const export_getToastDefaultConfig = getToastDefaultConfig;
 const export_createToast = createToast;
+const ToastHeaderContent = (slotContext) => /* @__PURE__ */ jsx("button", { ...useDirectives([classDirective, "btn-close me-0 ms-auto"], slotContext.directives.closeButtonDirective) });
 const ToastHeader = (slotContext) => /* @__PURE__ */ jsxs("div", { className: "toast-header", children: [
   /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.header, props: slotContext }),
-  slotContext.state.dismissible && /* @__PURE__ */ jsx("button", { ...useDirectives([classDirective, "btn-close me-0 ms-auto"], slotContext.directives.closeButtonDirective) })
+  slotContext.state.dismissible && /* @__PURE__ */ jsx(ToastHeaderContent, { ...slotContext })
 ] });
 const ToastCloseButtonNoHeader = (slotContext) => /* @__PURE__ */ jsx("button", { ...useDirectives([classDirective, "btn-close btn-close-white me-2 m-auto"], slotContext.directives.closeButtonDirective) });
 const ToastDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -33,7 +34,7 @@ const Toast = forwardRef(function Toast2(props, ref) {
     structure: ToastDefaultSlotStructure,
     children: props.children
   });
-  useImperativeHandle(ref, () => widgetContext.api, []);
+  useImperativeHandle(ref, () => widgetContext.api, [widgetContext.api]);
   return /* @__PURE__ */ jsx(Fragment, { children: !widgetContext.state.hidden && /* @__PURE__ */ jsx(ToastElement, { ...widgetContext }) });
 });
 export {

package/{toast-E1DM85iZ.cjs → toast-Vv1dxnuA.cjs}

@@ -7,9 +7,10 @@ const generated_config = require("./generated/config.cjs");
 const toast = require("@agnos-ui/core-bootstrap/components/toast");
 const export_getToastDefaultConfig = toast.getToastDefaultConfig;
 const export_createToast = toast.createToast;
+const ToastHeaderContent = (slotContext) => /* @__PURE__ */ jsxRuntime.jsx("button", { ...directive.useDirectives([directive.classDirective, "btn-close me-0 ms-auto"], slotContext.directives.closeButtonDirective) });
 const ToastHeader = (slotContext) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "toast-header", children: [
   /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.header, props: slotContext }),
-  slotContext.state.dismissible && /* @__PURE__ */ jsxRuntime.jsx("button", { ...directive.useDirectives([directive.classDirective, "btn-close me-0 ms-auto"], slotContext.directives.closeButtonDirective) })
+  slotContext.state.dismissible && /* @__PURE__ */ jsxRuntime.jsx(ToastHeaderContent, { ...slotContext })
 ] });
 const ToastCloseButtonNoHeader = (slotContext) => /* @__PURE__ */ jsxRuntime.jsx("button", { ...directive.useDirectives([directive.classDirective, "btn-close btn-close-white me-2 m-auto"], slotContext.directives.closeButtonDirective) });
 const ToastDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -34,7 +35,7 @@ const Toast = React.forwardRef(function Toast2(props, ref) {
     structure: ToastDefaultSlotStructure,
     children: props.children
   });
-  React.useImperativeHandle(ref, () => widgetContext.api, []);
+  React.useImperativeHandle(ref, () => widgetContext.api, [widgetContext.api]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !widgetContext.state.hidden && /* @__PURE__ */ jsxRuntime.jsx(ToastElement, { ...widgetContext }) });
 });
 exports.Toast = Toast;

package/tree-CCmlpEPq.cjs

@@ -0,0 +1,51 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const slot = require("@agnos-ui/react-headless/slot");
+const directive = require("@agnos-ui/react-headless/utils/directive");
+const generated_config = require("./generated/config.cjs");
+const tree = require("@agnos-ui/core-bootstrap/components/tree");
+const classNames = require("classnames");
+const export_getTreeDefaultConfig = tree.getTreeDefaultConfig;
+const export_createTree = tree.createTree;
+const ToggleButtonDisplay = ({ directive: directive$1, item }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { ...directive.useDirective(directive$1, { item }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-tree-expand-icon-svg" }) });
+};
+const DefaultTreeSlotItemToggle = (slotContext) => {
+  const { directives, item } = slotContext;
+  return item.children.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonDisplay, { directive: directives.itemToggleDirective, item }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-tree-expand-icon-placeholder" });
+};
+const DefaultTreeSlotItemContent = (slotContext) => {
+  const { state, item } = slotContext;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "au-tree-item", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: state.itemToggle, props: { ...slotContext } }),
+    item.label
+  ] });
+};
+const DefaultTreeSlotItem = (slotContext) => {
+  const { state, directives, item } = slotContext;
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { ...directive.useDirective(directives.itemAttributesDirective, { item }), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: state.itemContent, props: { ...slotContext, item } }),
+    state.expandedMap.get(item) && /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "group", children: item.children.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: state.item, props: { ...slotContext, item: child } }, child.label + child.level + index)) })
+  ] });
+};
+const DefaultTreeSlotStructure = (slotContext) => {
+  const { state } = slotContext;
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "tree", className: classNames("au-tree", state.className), ...directive.useDirective(slotContext.directives.navigationDirective), children: state.normalizedNodes.map((node, index) => /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: state.item, props: { item: node, ...slotContext } }, node.label + node.level + index)) });
+};
+const defaultConfig = {
+  structure: DefaultTreeSlotStructure,
+  item: DefaultTreeSlotItem,
+  itemContent: DefaultTreeSlotItemContent,
+  itemToggle: DefaultTreeSlotItemToggle
+};
+function Tree(props) {
+  const widgetContext = generated_config.useWidgetWithConfig(export_createTree, props, "tree", { ...defaultConfig });
+  return /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: widgetContext.state.structure, props: widgetContext });
+}
+exports.DefaultTreeSlotItem = DefaultTreeSlotItem;
+exports.DefaultTreeSlotItemContent = DefaultTreeSlotItemContent;
+exports.DefaultTreeSlotItemToggle = DefaultTreeSlotItemToggle;
+exports.DefaultTreeSlotStructure = DefaultTreeSlotStructure;
+exports.Tree = Tree;
+exports.export_createTree = export_createTree;
+exports.export_getTreeDefaultConfig = export_getTreeDefaultConfig;

package/tree-CrXS0sFt.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@agnos-ui/react-headless/slot";
+import { useDirective } from "@agnos-ui/react-headless/utils/directive";
+import { useWidgetWithConfig } from "./generated/config.js";
+import { getTreeDefaultConfig, createTree } from "@agnos-ui/core-bootstrap/components/tree";
+import classNames from "classnames";
+const export_getTreeDefaultConfig = getTreeDefaultConfig;
+const export_createTree = createTree;
+const ToggleButtonDisplay = ({ directive, item }) => {
+  return /* @__PURE__ */ jsx("button", { ...useDirective(directive, { item }), children: /* @__PURE__ */ jsx("span", { className: "au-tree-expand-icon-svg" }) });
+};
+const DefaultTreeSlotItemToggle = (slotContext) => {
+  const { directives, item } = slotContext;
+  return item.children.length > 0 ? /* @__PURE__ */ jsx(ToggleButtonDisplay, { directive: directives.itemToggleDirective, item }) : /* @__PURE__ */ jsx("span", { className: "au-tree-expand-icon-placeholder" });
+};
+const DefaultTreeSlotItemContent = (slotContext) => {
+  const { state, item } = slotContext;
+  return /* @__PURE__ */ jsxs("span", { className: "au-tree-item", children: [
+    /* @__PURE__ */ jsx(Slot, { slotContent: state.itemToggle, props: { ...slotContext } }),
+    item.label
+  ] });
+};
+const DefaultTreeSlotItem = (slotContext) => {
+  const { state, directives, item } = slotContext;
+  return /* @__PURE__ */ jsxs("li", { ...useDirective(directives.itemAttributesDirective, { item }), children: [
+    /* @__PURE__ */ jsx(Slot, { slotContent: state.itemContent, props: { ...slotContext, item } }),
+    state.expandedMap.get(item) && /* @__PURE__ */ jsx("ul", { role: "group", children: item.children.map((child, index) => /* @__PURE__ */ jsx(Slot, { slotContent: state.item, props: { ...slotContext, item: child } }, child.label + child.level + index)) })
+  ] });
+};
+const DefaultTreeSlotStructure = (slotContext) => {
+  const { state } = slotContext;
+  return /* @__PURE__ */ jsx("ul", { role: "tree", className: classNames("au-tree", state.className), ...useDirective(slotContext.directives.navigationDirective), children: state.normalizedNodes.map((node, index) => /* @__PURE__ */ jsx(Slot, { slotContent: state.item, props: { item: node, ...slotContext } }, node.label + node.level + index)) });
+};
+const defaultConfig = {
+  structure: DefaultTreeSlotStructure,
+  item: DefaultTreeSlotItem,
+  itemContent: DefaultTreeSlotItemContent,
+  itemToggle: DefaultTreeSlotItemToggle
+};
+function Tree(props) {
+  const widgetContext = useWidgetWithConfig(export_createTree, props, "tree", { ...defaultConfig });
+  return /* @__PURE__ */ jsx(Slot, { slotContent: widgetContext.state.structure, props: widgetContext });
+}
+export {
+  DefaultTreeSlotItemToggle as D,
+  Tree as T,
+  DefaultTreeSlotItemContent as a,
+  DefaultTreeSlotItem as b,
+  DefaultTreeSlotStructure as c,
+  export_createTree as d,
+  export_getTreeDefaultConfig as e
+};