@agnos-ui/core 0.1.0 → 0.2.0

package/components/select/select.js

@@ -1,9 +1,12 @@
-import { asWritable, computed, writable } from '@amadeus-it-group/tansu';
+import { asWritable, batch, computed, writable } from '@amadeus-it-group/tansu';
 import { autoPlacement, offset, size } from '@floating-ui/dom';
 import { createFloatingUI } from '../../services/floatingUI';
 import { createHasFocus } from '../../services/focustrack';
+import { createNavManager } from '../../services/navManager';
+import { bindDirective } from '../../utils/directive';
+import { generateId } from '../../utils/internal/dom';
 import { noop } from '../../utils/internal/func';
-import { bindableDerived, stateStores, writablesForProps } from '../../utils/stores';
+import { bindableDerived, bindableProp, stateStores, writablesForProps } from '../../utils/stores';
 const defaultItemId = (item) => '' + item;
 export const defaultConfig = {
     id: undefined,
@@ -14,6 +17,7 @@ export const defaultConfig = {
     filterText: '',
     loading: false,
     selected: [],
+    navSelector: (node) => node.querySelectorAll('.au-select-badge,input'),
     itemIdFn: defaultItemId,
     onOpenChange: noop,
     onFilterTextChange: noop,
@@ -40,9 +44,10 @@ export function getSelectDefaultConfig() {
  */
 export function createSelect(config) {
     // Props
-    const [{ open$: _dirtyOpen$, filterText$: _dirtyFilterText$, items$, itemIdFn$, onOpenChange$, onFilterTextChange$, onSelectedChange$, allowedPlacements$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config);
+    const [{ id$: _dirtyId$, open$: _dirtyOpen$, filterText$: _dirtyFilterText$, items$, itemIdFn$, onOpenChange$, onFilterTextChange$, onSelectedChange$, allowedPlacements$, navSelector$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config);
     const { selected$ } = stateProps;
-    const filterText$ = bindableDerived(onFilterTextChange$, [_dirtyFilterText$]);
+    const id$ = computed(() => _dirtyId$() ?? generateId());
+    const filterText$ = bindableProp(_dirtyFilterText$, onFilterTextChange$);
     const { hasFocus$, directive: hasFocusDirective } = createHasFocus();
     const open$ = bindableDerived(onOpenChange$, [_dirtyOpen$, hasFocus$], ([_dirtyOpen, hasFocus]) => _dirtyOpen && hasFocus);
     const selectedContextsMap$ = computed(() => {
@@ -112,8 +117,31 @@ export function createSelect(config) {
             }))),
         },
     });
+    const { directive: navDirective, refreshElements, focusFirst, focusLast, focusLeft, focusRight } = createNavManager();
+    const navManagerConfig$ = computed(() => ({
+        keys: {
+            Home: focusFirst,
+            End: focusLast,
+            ArrowLeft: focusLeft,
+            ArrowRight: focusRight,
+        },
+        selector: navSelector$(),
+    }));
+    const onRemoveBadge = (event, item) => {
+        const referenceElement = event.target;
+        refreshElements();
+        widget.api.unselect(item);
+        // Waiting for refresh by the framework, to have the elements inside or outside the dom
+        if (referenceElement instanceof HTMLElement) {
+            setTimeout(() => {
+                focusLeft({ event, referenceElement }) || focusRight({ event, referenceElement });
+            });
+        }
+        event.preventDefault();
+    };
     const widget = {
         ...stateStores({
+            id$,
             visibleItems$,
             highlighted$,
             open$,
@@ -181,40 +209,29 @@ export function createSelect(config) {
             highlightLast() {
                 highlightedIndex$.set(-1);
             },
-            focus(item) {
-                // FIXME: not implemented yet!
-            },
-            focusFirst() {
-                // FIXME: not implemented yet!
-            },
-            focusPrevious() {
-                // FIXME: not implemented yet!
-            },
-            focusNext() {
-                // FIXME: not implemented yet!
-            },
-            focusLast() {
-                // FIXME: not implemented yet!
-            },
             open: () => widget.api.toggle(true),
             close: () => widget.api.toggle(false),
             toggle(isOpen) {
-                _dirtyOpen$.update((value) => (isOpen != null ? isOpen : !value));
+                open$.update((value) => (isOpen != null ? isOpen : !value));
             },
         },
         directives: {
             hasFocusDirective,
             floatingDirective,
             referenceDirective,
+            inputContainerDirective: bindDirective(navDirective, navManagerConfig$),
         },
         actions: {
             onInput({ target }) {
                 const value = target.value;
-                patch({
-                    open: value != null && value !== '',
-                    filterText: value,
+                batch(() => {
+                    open$.set(value != null && value !== '');
+                    filterText$.set(value);
                 });
             },
+            onRemoveBadgeClick(event, item) {
+                onRemoveBadge(event, item);
+            },
             onInputKeydown(e) {
                 const { ctrlKey, key } = e;
                 let keyManaged = true;
@@ -251,7 +268,7 @@ export function createSelect(config) {
                         break;
                     }
                     case 'Escape':
-                        _dirtyOpen$.set(false);
+                        open$.set(false);
                         break;
                     default:
                         keyManaged = false;
@@ -260,6 +277,20 @@ export function createSelect(config) {
                     e.preventDefault();
                 }
             },
+            onBadgeKeydown(event, item) {
+                let keyManaged = false;
+                switch (event.key) {
+                    case 'Backspace':
+                    case 'Delete': {
+                        onRemoveBadge(event, item);
+                        keyManaged = true;
+                        break;
+                    }
+                }
+                if (keyManaged) {
+                    event.preventDefault();
+                }
+            },
         },
     };
     return widget;

package/components/slider/slider.d.ts

@@ -1,5 +1,12 @@
 import type { WidgetsCommonPropsAndState } from '../commonProps';
-import type { Directive, PropsConfig, Widget } from '../../types';
+import type { Directive, PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
+export type SliderContext = WidgetSlotContext<SliderWidget>;
+export type SliderSlotLabelContext = SliderContext & {
+    value: number;
+};
+export type SliderSlotHandleContext = SliderContext & {
+    item: SliderHandle;
+};
 export interface ProgressDisplayOptions {
     /**
      * Right offset of the progress in %
@@ -36,6 +43,24 @@ export interface HandleDisplayOptions {
      */
     top: number | null;
 }
+export interface SliderHandle {
+    /**
+     * Value of the handle
+     */
+    value: number;
+    /**
+     * Handle id
+     */
+    id: number;
+    /**
+     * ariaLabel of the handle
+     */
+    ariaLabel: string;
+    /**
+     * ariaValueText of the handle
+     */
+    ariaValueText: string;
+}
 export interface SliderCommonPropsAndState extends WidgetsCommonPropsAndState {
     /**
      * Minimum value that can be assigned to the slider
@@ -77,6 +102,18 @@ export interface SliderCommonPropsAndState extends WidgetsCommonPropsAndState {
      * It `true` slider display is inversed
      */
     rtl: boolean;
+    /**
+     * Slot to change the default display of the slider
+     */
+    slotStructure: SlotContent<SliderContext>;
+    /**
+     * Slot to change the default labels of the slider
+     */
+    slotLabel: SlotContent<SliderSlotLabelContext>;
+    /**
+     *  Slot to change the handlers
+     */
+    slotHandle: SlotContent<SliderSlotHandleContext>;
 }
 export interface SliderState extends SliderCommonPropsAndState {
     /**
@@ -106,11 +143,7 @@ export interface SliderState extends SliderCommonPropsAndState {
     /**
      * Array of the sorted handles to display
      */
-    sortedHandles: {
-        value: number;
-        id: number;
-        ariaLabel: string;
-    }[];
+    sortedHandles: SliderHandle[];
     /**
      * Array of objects representing progress display options
      */
@@ -119,6 +152,11 @@ export interface SliderState extends SliderCommonPropsAndState {
      * Array of objects representing handle display options
      */
     handleDisplayOptions: HandleDisplayOptions[];
+    /**
+     * Check if the slider is interactable, meaning it is not disabled or readonly
+     * TODO: rename to `interactive`, issue #510
+     */
+    isInteractable: boolean;
 }
 export interface SliderProps extends SliderCommonPropsAndState {
     /**
@@ -128,6 +166,13 @@ export interface SliderProps extends SliderCommonPropsAndState {
      * @param index - index of the handle in the original list
      */
     ariaLabelHandle: (value: number, sortedIndex: number, index: number) => string;
+    /**
+     * Return the value for the 'aria-valuetext' attribute for the handle
+     * @param value - value of the handle
+     * @param sortedIndex - index of the handle in the sorted list
+     * @param index - index of the handle in the original list
+     */
+    ariaValueText: (value: number, sortedIndex: number, index: number) => string;
     /**
      * An event emitted when slider values are changed
      *
@@ -189,6 +234,13 @@ export declare function getSliderDefaultConfig(): {
      * @param index - index of the handle in the original list
      */
     ariaLabelHandle: (value: number, sortedIndex: number, index: number) => string;
+    /**
+     * Return the value for the 'aria-valuetext' attribute for the handle
+     * @param value - value of the handle
+     * @param sortedIndex - index of the handle in the sorted list
+     * @param index - index of the handle in the original list
+     */
+    ariaValueText: (value: number, sortedIndex: number, index: number) => string;
     /**
      * An event emitted when slider values are changed
      *
@@ -235,6 +287,18 @@ export declare function getSliderDefaultConfig(): {
      * It `true` slider display is inversed
      */
     rtl: boolean;
+    /**
+     * Slot to change the default display of the slider
+     */
+    slotStructure: SlotContent<SliderContext>;
+    /**
+     * Slot to change the default labels of the slider
+     */
+    slotLabel: SlotContent<SliderSlotLabelContext>;
+    /**
+     *  Slot to change the handlers
+     */
+    slotHandle: SlotContent<SliderSlotHandleContext>;
     className: string;
 };
 /**

package/components/slider/slider.js

@@ -1,10 +1,10 @@
-import { computed, derived, writable } from '@amadeus-it-group/tansu';
-import { bindableDerived, writablesForProps } from '../../utils/stores';
-import { createStoreDirective, directiveSubscribe, mergeDirectives } from '../../utils/directive';
-import { stateStores } from '../../utils/stores';
-import { typeArray, typeBoolean, typeFunction, typeNumber, typeNumberInRangeFactory } from '../../utils/writables';
+import { computed, writable } from '@amadeus-it-group/tansu';
+import { createStoreDirective, mergeDirectives } from '../../utils/directive';
 import { noop } from '../../utils/internal/func';
 import { getDecimalPrecision } from '../../utils/internal/math';
+import { bindableProp, stateStores, writablesForProps } from '../../utils/stores';
+import { typeArray, typeBoolean, typeFunction, typeNumber, typeNumberInRangeFactory } from '../../utils/writables';
+import { createResizeObserver } from '../../services/resizeObserver';
 const defaultSliderConfig = {
     min: 0,
     max: 100,
@@ -13,12 +13,16 @@ const defaultSliderConfig = {
     disabled: false,
     vertical: false,
     className: '',
-    ariaLabelHandle: (value, _index) => '' + value,
+    ariaLabelHandle: (value) => '' + value,
+    ariaValueText: (value) => '' + value,
     onValuesChange: noop,
     values: [0],
     showValueLabels: true,
     showMinMaxLabels: true,
     rtl: false,
+    slotStructure: undefined,
+    slotLabel: ({ value }) => '' + value,
+    slotHandle: undefined,
 };
 /**
  * Returns a shallow copy of the default slider config.
@@ -35,6 +39,7 @@ const configValidator = {
     disabled: typeBoolean,
     vertical: typeBoolean,
     ariaLabelHandle: typeFunction,
+    ariaValueText: typeFunction,
     onValuesChange: typeFunction,
     values: typeArray,
     showValueLabels: typeBoolean,
@@ -62,17 +67,16 @@ const computeCleanValue = (value, min, max, intStepSize, decimalPrecision) => {
     return +(((((value - min) * magnitude) % intStepSize < intStepSize / 2 ? indexMin : indexMin + 1) * intStepSize) / magnitude + min).toFixed(decimalPrecision);
 };
 /**
- * Method to update the dirtyValues for the slider keyboard navigation
+ * Method to update the values for the slider keyboard navigation
  * @param handleIndex - index of the handle to update
- * @param _dirtyValues$ - writable signal that contains dirtyValues
- * @param values - slider values
+ * @param values$ - writable signal that contains values
  * @param stepSize - slider step size
- * @param updateDirection - if equals 1 - value is increased, if equals -1 values is decreased
+ * @param updateDirection - if equals 1 value is increased, if equals -1 value is decreased
  */
-const updateDirtyValue = (handleIndex, _dirtyValues$, values, stepSize, updateDirection) => {
-    _dirtyValues$.update((value) => {
+const updateValue = (handleIndex, values$, stepSize, updateDirection) => {
+    values$.update((value) => {
         value = [...value];
-        value[handleIndex] = values[handleIndex] + stepSize * updateDirection;
+        value[handleIndex] = value[handleIndex] + stepSize * updateDirection;
         return value;
     });
 };
@@ -99,7 +103,7 @@ const getUpdateDirection = (vertical, rtl, keysVertical) => {
 export function createSlider(config) {
     const [{ 
     // dirty inputs that need adjustment:
-    min$: _dirtyMinimum$, max$: _dirtyMaximum$, stepSize$, rtl$, values$: _dirtyValues$, ariaLabelHandle$, onValuesChange$, showValueLabels$, showMinMaxLabels$, ...stateProps }, patch,] = writablesForProps(defaultSliderConfig, config, configValidator);
+    min$: _dirtyMinimum$, max$: _dirtyMaximum$, stepSize$, rtl$, values$: _dirtyValues$, ariaLabelHandle$, ariaValueText$, onValuesChange$, showValueLabels$, showMinMaxLabels$, ...stateProps }, patch,] = writablesForProps(defaultSliderConfig, config, configValidator);
     const { vertical$, disabled$, readonly$ } = stateProps;
     let _prevCoordinate = -1;
     // clean inputs adjustment
@@ -119,39 +123,35 @@ export function createSlider(config) {
     });
     const _decimalPrecision$ = computed(() => Math.max(getDecimalPrecision(stepSize$()), getDecimalPrecision(min$()), getDecimalPrecision(max$())));
     const _intStepSize$ = computed(() => stepSize$() * Math.pow(10, _decimalPrecision$()));
-    const values$ = bindableDerived(onValuesChange$, [_dirtyValues$, min$, max$, _intStepSize$, _decimalPrecision$], ([dirtyValues, min, max, intStepSize, decimalPrecision]) => dirtyValues.map((dv) => computeCleanValue(dv, min, max, intStepSize, decimalPrecision)), typeArray.equal);
+    const values$ = bindableProp(_dirtyValues$, onValuesChange$, (dirtyValues) => {
+        const min = min$();
+        const max = max$();
+        const intStepSize = _intStepSize$();
+        const decimalPrecision = _decimalPrecision$();
+        return dirtyValues.map((dv) => computeCleanValue(dv, min, max, intStepSize, decimalPrecision));
+    }, typeArray.equal);
     // computed
     const { directive: sliderDirective, element$: sliderDom$ } = createStoreDirective();
     const { directive: minLabelDirective, element$: minLabelDom$ } = createStoreDirective();
     const { directive: maxLabelDirective, element$: maxLabelDom$ } = createStoreDirective();
-    const sliderResized$ = derived(sliderDom$, (sliderDom, set) => {
-        if (!sliderDom) {
-            set({});
-            return;
-        }
-        const resizeObserver = new ResizeObserver(() => {
-            set({});
-        });
-        resizeObserver.observe(sliderDom);
-        return () => resizeObserver.disconnect();
-    }, {});
+    const { directive: resizeDirective, dimensions$ } = createResizeObserver();
     const updateSliderSize$ = writable({});
     const sliderDomRect$ = computed(() => {
-        sliderResized$();
+        dimensions$();
         updateSliderSize$();
         return sliderDom$()?.getBoundingClientRect() ?? {};
     }, {
         equal: Object.is,
     });
     const minLabelDomRect$ = computed(() => {
-        sliderResized$();
+        dimensions$();
         updateSliderSize$();
         return minLabelDom$()?.getBoundingClientRect() ?? {};
     }, {
         equal: (a, b) => Object.is(a, b),
     });
     const maxLabelDomRect$ = computed(() => {
-        sliderResized$();
+        dimensions$();
         updateSliderSize$();
         return maxLabelDom$()?.getBoundingClientRect() ?? {};
     }, {
@@ -168,9 +168,13 @@ export function createSlider(config) {
             .sort((a, b) => a.value - b.value);
     });
     const sortedHandles$ = computed(() => {
-        const ariaLabelHandle = ariaLabelHandle$();
+        const ariaLabelHandle = ariaLabelHandle$(), ariaValueText = ariaValueText$();
         return _sortedHandlesValues$().map((sortedValue, index) => {
-            return { ...sortedValue, ariaLabel: ariaLabelHandle(sortedValue.value, index, sortedValue.id) };
+            return {
+                ...sortedValue,
+                ariaLabel: ariaLabelHandle(sortedValue.value, index, sortedValue.id),
+                ariaValueText: ariaValueText(sortedValue.value, index, sortedValue.id),
+            };
         });
     });
     const valuesPercent$ = computed(() => values$().map((val) => percentCompute(val)));
@@ -281,7 +285,7 @@ export function createSlider(config) {
             clickedPercent = rtl$() ? 1 - clickedPercent : clickedPercent;
             const derivedHandleIndex = handleNumber ?? getClosestSliderHandle(clickedPercent);
             const newValue = clickedPercent * (max$() - min$()) + min$();
-            _dirtyValues$.update((dh) => {
+            values$.update((dh) => {
                 dh = [...dh];
                 dh[derivedHandleIndex] = newValue;
                 return dh;
@@ -312,7 +316,7 @@ export function createSlider(config) {
         patch,
         api: {},
         directives: {
-            sliderDirective: mergeDirectives(sliderDirective, directiveSubscribe(sliderResized$)),
+            sliderDirective: mergeDirectives(sliderDirective, resizeDirective),
             minLabelDirective,
             maxLabelDirective,
         },
@@ -322,30 +326,30 @@ export function createSlider(config) {
             },
             keydown(event, handleIndex) {
                 const { key } = event;
-                const rtl = rtl$(), values = values$(), stepSize = stepSize$(), min = min$(), max = max$(), vertical = vertical$();
+                const rtl = rtl$(), stepSize = stepSize$(), min = min$(), max = max$(), vertical = vertical$();
                 if (isInteractable$()) {
                     switch (key) {
                         case 'ArrowDown':
-                            updateDirtyValue(handleIndex, _dirtyValues$, values, stepSize, getUpdateDirection(vertical, rtl, true));
+                            updateValue(handleIndex, values$, stepSize, getUpdateDirection(vertical, rtl, true));
                             break;
                         case 'ArrowLeft':
-                            updateDirtyValue(handleIndex, _dirtyValues$, values, stepSize, getUpdateDirection(vertical, rtl, false));
+                            updateValue(handleIndex, values$, stepSize, getUpdateDirection(vertical, rtl, false));
                             break;
                         case 'ArrowUp':
-                            updateDirtyValue(handleIndex, _dirtyValues$, values, stepSize, -1 * getUpdateDirection(vertical, rtl, true));
+                            updateValue(handleIndex, values$, stepSize, -1 * getUpdateDirection(vertical, rtl, true));
                             break;
                         case 'ArrowRight':
-                            updateDirtyValue(handleIndex, _dirtyValues$, values, stepSize, -1 * getUpdateDirection(vertical, rtl, false));
+                            updateValue(handleIndex, values$, stepSize, -1 * getUpdateDirection(vertical, rtl, false));
                             break;
                         case 'Home':
-                            _dirtyValues$.update((value) => {
+                            values$.update((value) => {
                                 value = [...value];
                                 value[handleIndex] = min;
                                 return value;
                             });
                             break;
                         case 'End':
-                            _dirtyValues$.update((value) => {
+                            values$.update((value) => {
                                 value = [...value];
                                 value[handleIndex] = max;
                                 return value;
@@ -366,10 +370,11 @@ export function createSlider(config) {
             },
             mouseDown(event, handleId) {
                 event.preventDefault();
+                const currentTarget = event.target;
                 const handleDrag = (e) => {
                     e.preventDefault();
                     const newCoord = vertical$() ? e.clientY : e.clientX;
-                    event.target.focus();
+                    currentTarget.focus();
                     if (_prevCoordinate !== newCoord) {
                         _prevCoordinate = newCoord;
                         adjustCoordinate(newCoord, handleId);
@@ -377,7 +382,7 @@ export function createSlider(config) {
                 };
                 if (isInteractable$()) {
                     updateSliderSize$.set({});
-                    event.target.focus();
+                    currentTarget.focus();
                     document.addEventListener('mousemove', handleDrag);
                     // TODO mouse up doesn't work outside the handle area
                     document.addEventListener('mouseup', () => {

package/components/toast/index.d.ts

@@ -0,0 +1 @@
+export * from './toast';

package/components/toast/index.js

@@ -0,0 +1 @@
+export * from './toast';

package/components/toast/toast.d.ts

@@ -0,0 +1,44 @@
+import type { ExtendWidgetAdaptSlotWidgetProps, ExtendWidgetInterfaces } from '../../services/extendWidget';
+import type { Directive, PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
+import type { CommonAlertApi, CommonAlertDirectives, CommonAlertProps, CommonAlertState } from '../alert/common';
+export type ToastContext = WidgetSlotContext<ToastWidget>;
+export interface ToastExtraProps {
+    /**
+     * If `true` automatically hides the toast after the delay.
+     */
+    autohide: boolean;
+    /**
+     * Delay in milliseconds before hiding the toast.
+     */
+    delay: number;
+    /**
+     * Header template for the toast component
+     */
+    slotHeader: SlotContent<ToastContext>;
+}
+export interface ExtraDirectives {
+    /**
+     * Directive that handles the autohide of the toast component
+     */
+    autohideDirective: Directive;
+}
+export interface ToastState extends ExtendWidgetAdaptSlotWidgetProps<CommonAlertState, ToastExtraProps, ExtraDirectives> {
+}
+export interface ToastProps extends ExtendWidgetAdaptSlotWidgetProps<CommonAlertProps, ToastExtraProps, ExtraDirectives> {
+}
+export interface ToastApi extends CommonAlertApi {
+}
+export interface ToastDirectives extends ExtendWidgetInterfaces<CommonAlertDirectives, ExtraDirectives> {
+}
+export type ToastWidget = Widget<ToastProps, ToastState, ToastApi, object, ToastDirectives>;
+/**
+ * Retrieve a shallow copy of the default toast config
+ * @returns the default toast config
+ */
+export declare function getToastDefaultConfig(): ToastProps;
+/**
+ * Create a ToastWidget with given config props
+ * @param config - an optional toast config
+ * @returns a ToastWidget
+ */
+export declare function createToast(config?: PropsConfig<ToastProps>): ToastWidget;

package/components/toast/toast.js

@@ -0,0 +1,43 @@
+import { computed } from '@amadeus-it-group/tansu';
+import { extendWidgetProps } from '../../services/extendWidget';
+import { directiveSubscribe } from '../../utils/directive';
+import { typeBoolean, typeNumberInRangeFactory } from '../../utils/writables';
+import { createCommonAlert, getCommonAlertDefaultConfig } from '../alert/common';
+const toastDefaultConfig = {
+    autohide: true,
+    delay: 5000,
+    slotHeader: undefined,
+};
+const toastConfigValidator = {
+    autohide: typeBoolean,
+    delay: typeNumberInRangeFactory(0, +Infinity, { strict: true }),
+};
+/**
+ * Retrieve a shallow copy of the default toast config
+ * @returns the default toast config
+ */
+export function getToastDefaultConfig() {
+    return { ...getCommonAlertDefaultConfig(), ...toastDefaultConfig };
+}
+/**
+ * Create a ToastWidget with given config props
+ * @param config - an optional toast config
+ * @returns a ToastWidget
+ */
+export function createToast(config) {
+    let _timeout;
+    const extendedAlert = extendWidgetProps(createCommonAlert, toastDefaultConfig, toastConfigValidator)(config);
+    const time$ = computed(() => {
+        clearTimeout(_timeout);
+        if (extendedAlert.stores.autohide$()) {
+            _timeout = setTimeout(() => extendedAlert.api.close(), extendedAlert.stores.delay$());
+        }
+    });
+    return {
+        ...extendedAlert,
+        directives: {
+            ...extendedAlert.directives,
+            autohideDirective: directiveSubscribe(time$),
+        },
+    };
+}

package/config.d.ts

@@ -7,6 +7,7 @@ import type { SelectProps } from './components/select/select';
 import type { AccordionProps } from './components/accordion/accordion';
 import type { ProgressbarProps } from './components/progressbar/progressbar';
 import type { SliderProps } from './components/slider/slider';
+import type { ToastProps } from './components/toast/toast';
 export type Partial2Levels<T> = Partial<{
     [Level1 in keyof T]: Partial<T[Level1]>;
 }>;
@@ -78,4 +79,8 @@ export interface WidgetsConfig {
      * slider widget config
      */
     slider: SliderProps;
+    /**
+     * toast widget config
+     */
+    toast: ToastProps;
 }

package/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/progressbar';
 export * from './components/rating';
 export * from './components/select';
 export * from './components/slider';
+export * from './components/toast';
 export * from './config';
 export * from './services/extendWidget';
 export * from './services/floatingUI';
@@ -15,6 +16,7 @@ export * from './services/focustrack';
 export * from './services/intersection';
 export * from './services/navManager';
 export * from './services/portal';
+export * from './services/resizeObserver';
 export * from './services/siblingsInert';
 export * from './services/transitions/baseTransitions';
 export * from './services/transitions/cssTransitions';

package/index.js

@@ -10,6 +10,7 @@ export * from './components/progressbar';
 export * from './components/rating';
 export * from './components/select';
 export * from './components/slider';
+export * from './components/toast';
 // config
 export * from './config';
 // services
@@ -19,6 +20,7 @@ export * from './services/focustrack';
 export * from './services/intersection';
 export * from './services/navManager';
 export * from './services/portal';
+export * from './services/resizeObserver';
 export * from './services/siblingsInert';
 // services transitions
 export * from './services/transitions/baseTransitions';

package/package.json

@@ -47,14 +47,12 @@
 			"default": "./utils/*.js"
 		}
 	},
-	"dependencies": {
-		"@amadeus-it-group/tansu": "1.0.0"
-	},
 	"peerDependencies": {
+		"@amadeus-it-group/tansu": "*",
 		"@floating-ui/dom": "*"
 	},
 	"sideEffects": false,
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
 	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
 	"license": "MIT",