@design-factory/core 21.1.0 → 22.0.0-next.1

package/components/alert/alert.d.ts

@@ -1,14 +1,79 @@
 import type { CommonAlertApi, CommonAlertDirectives, CommonAlertProps, CommonAlertState } from './common';
-import type { Widget, WidgetFactory } from '../../types';
+import type { Directive, Widget, WidgetFactory } from '../../types';
+export type AlertSize = 'sm' | 'md' | 'lg';
+export type AlertType = 'success' | 'info' | 'warning' | 'danger' | 'tip';
+export type AlertRole = 'alert' | 'status';
+export type AlertAppearance = 'default' | 'banner';
+type AlertIcons = Record<AlertType | 'default', string>;
+interface AlertExtraPropsAndState {
+    /**
+     * Type of the alert.
+     */
+    type: AlertType;
+    /**
+     * Visual appearance variant for alert chrome.
+     */
+    appearance: AlertAppearance;
+    /**
+     * Size of the alert.
+     */
+    size: AlertSize;
+    /**
+     * Icon classes by alert type.
+     */
+    icons: AlertIcons;
+    /**
+     * Icon class for the collapse action.
+     */
+    collapseIcon: string;
+    /**
+     * Icon class for the expand action.
+     */
+    expandIcon: string;
+    /**
+     * Label shown when alert details can be expanded.
+     */
+    expandLabel: string;
+    /**
+     * Label shown when alert details can be collapsed.
+     */
+    collapseLabel: string;
+    /**
+     * If `true`, alert details can be toggled with a collapse trigger.
+     */
+    expandable: boolean;
+    /**
+     * If `true`, the collapsible content is shown.
+     */
+    expanded: boolean;
+}
+interface AlertExtraProps extends AlertExtraPropsAndState {
+    /**
+     * Callback called when collapsible content is hidden.
+     */
+    onCollapsed: () => void;
+    /**
+     * Callback called when collapsible content is shown.
+     */
+    onExpanded: () => void;
+}
 /**
  * Represents the state of an alert component.
  */
-export interface AlertState extends CommonAlertState {
+export interface AlertState extends CommonAlertState, AlertExtraPropsAndState {
+    /**
+     * Computed icon class for current alert type.
+     */
+    icon: string;
+    /**
+     * Computed ARIA live region role for current alert type.
+     */
+    role: AlertRole;
 }
 /**
  * Represents the properties for the alert component.
  */
-export interface AlertProps extends CommonAlertProps {
+export interface AlertProps extends CommonAlertProps, AlertExtraProps {
 }
 /**
  * Represents the API for an alert component.
@@ -19,19 +84,23 @@ export interface AlertApi extends CommonAlertApi {
  * Represents the directives for an alert component.
  */
 export interface AlertDirectives extends CommonAlertDirectives {
+    /**
+     * Directive to apply the collapse animation to alert details.
+     */
+    collapseDirective: Directive;
+    /**
+     * Directive to apply on the collapse trigger element.
+     */
+    collapseTriggerDirective: Directive;
 }
 /**
  * Represents an alert widget with specific properties, state, API, and directives.
  */
 export type AlertWidget = Widget<AlertProps, AlertState, AlertApi, AlertDirectives>;
-/**
- * Retrieve a shallow copy of the default alert config
- * @returns the default alert config
- */
-export declare function getAlertDefaultConfig(): AlertProps;
 /**
  * Create an AlertWidget with given config props
  * @param config - an optional alert config
  * @returns an AlertWidget
  */
 export declare const createAlert: WidgetFactory<AlertWidget>;
+export {};

package/components/alert/common.d.ts

@@ -24,6 +24,15 @@ export interface CommonAlertCommonPropsAndState extends WidgetsCommonPropsAndSta
      * @defaultValue `'Close'`
      */
     ariaCloseButtonLabel: string;
+    /**
+     * If `true`, the alert closing will be animated.
+     *
+     * Animation is triggered when clicked on the close button (×),
+     * via the `.close()` function or the visible prop is changed
+     *
+     * @defaultValue `true`
+     */
+    animated: boolean;
 }
 /**
  * Represents the state of a common alert component.
@@ -85,15 +94,6 @@ export interface CommonAlertProps extends CommonAlertCommonPropsAndState {
      * @defaultValue `false`
      */
     animatedOnInit: boolean;
-    /**
-     * If `true`, alert closing will be animated.
-     *
-     * Animation is triggered  when clicked on the close button (×),
-     * via the `.close()` function or the visible prop is changed
-     *
-     * @defaultValue `true`
-     */
-    animated: boolean;
 }
 /**
  * Interface representing the common API for alert components.

package/components/alert/index.js

@@ -1,5 +1,4 @@
-import { c, g } from "../../alert-Cb9FhbFQ.js";
+import { c } from "../../alert-Db6cG6JE.js";
 export {
-  c as createAlert,
-  g as getAlertDefaultConfig
+  c as createAlert
 };

package/components/carousel/index.js

@@ -1,8 +1,8 @@
 import { writablesForProps, true$, stateStores } from "../../utils/stores.js";
-import { b as bindDirective, d as browserDirective, g as createAttributesDirective, s as mergeDirectives } from "../../directive-CNNSo5Yn.js";
+import { b as bindDirective, d as browserDirective, g as createAttributesDirective, s as mergeDirectives } from "../../directive-CMT2vEDg.js";
 import EmblaCarousel from "embla-carousel";
 import { writable, computed, asReadable, readable } from "@amadeus-it-group/tansu";
-import { e as typeFunction, j as typeString, b as typeBoolean, g as typeNumber, k as typeStringOrNull, a as typeArray, c as createTypeEnum } from "../../writables-DYGjj5T3.js";
+import { f as typeFunction, k as typeString, d as typeBoolean, h as typeNumber, l as typeStringOrNull, b as typeArray, c as createTypeEnum } from "../../writables-_7BriMb2.js";
 import { createNavManager } from "../../services/navManager.js";
 import { createWidgetFactory } from "../../utils/widget.js";
 const defaultConfig = {

package/components/collapse/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../collapse-Bn8iHKrd.js";
+import { c, g } from "../../collapse-D8Jo56k9.js";
 export {
   c as createCollapse,
   g as getCollapseDefaultConfig

package/components/drawer/drawer.d.ts

@@ -107,6 +107,13 @@ export interface DrawerProps extends DrawerCommonPropsAndState {
      * @defaultValue `true`
      */
     animated: boolean;
+    /**
+     * If `true` the backdrop fade in / out will be animated.
+     * Will use the `animated` property if set to `null`.
+     *
+     * @defaultValue `null`
+     */
+    backdropAnimated: boolean | null;
     /**
      * aria-labelledby attribute to use for the drawer element.
      *
@@ -125,6 +132,12 @@ export interface DrawerProps extends DrawerCommonPropsAndState {
      * @defaultValue `true`
      */
     backdrop: boolean;
+    /**
+     * If `true` the drawer will be closed when clicking on the backdrop, otherwise the backdrop is static and non iteractive.
+     *
+     * @defaultValue `true`
+     */
+    closeOnBackdropClick: boolean;
     /**
      * If `true` allows body scrolling when the drawer is open.
      *

package/components/drawer/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../drawer-CoBXUPyv.js";
+import { c, g } from "../../drawer-D4xSbhcT.js";
 export {
   c as createDrawer,
   g as getDrawerDefaultConfig

package/components/dropdown/dropdown.d.ts

@@ -0,0 +1,110 @@
+import { type Placement } from '../../services/positioning';
+import { type Directive, type Widget, type WidgetFactory } from '../../types';
+export type DropdownSize = 'sm' | 'md' | 'lg';
+/**
+ * Common props and state for the Dropdown component.
+ */
+interface DropdownCommonPropsAndState {
+    /**
+     * If `true` the dropdown menu is open
+     */
+    opened: boolean;
+    /**
+     * Size of the dropdown.
+     *
+     * @defaultValue `'md'`
+     */
+    size: DropdownSize;
+}
+/**
+ * Represents the state of a Dropdown component.
+ */
+export interface DropdownState extends DropdownCommonPropsAndState {
+}
+/**
+ * Properties for the Dropdown component.
+ */
+export interface DropdownProps extends DropdownCommonPropsAndState {
+    /**
+     * Callback called when the open state of the dropdown changes.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onOpenedChange: (opened: boolean) => void;
+    /**
+     * Preferred dropdown menu placement.
+     *
+     * Must be a space-separated list or an array of Placement, where the first value is the main placement and
+     * subsequent values are fallback placements.
+     *
+     * @defaultValue `['bottom-start', 'bottom-end', 'top-start', 'top-end']`
+     */
+    placement: Placement[];
+    /**
+     * Which element should contain the dropdown menu DOM element.
+     * - `'body'`: the menu is appended to `document.body` (useful when the toggle is inside an element that clips
+     *   its content via `overflow` or creates a stacking context).
+     * - `null` (default): the menu is rendered inline, where the dropdown is declared.
+     *
+     * @defaultValue `null`
+     */
+    container: 'body' | null;
+}
+/**
+ * Interface representing the API for a dropdown component.
+ */
+export interface DropdownApi {
+    /**
+     * Triggers dropdown closing programmatically.
+     */
+    close(): void;
+    /**
+     * Triggers the dropdown content to be displayed for the user.
+     */
+    open(): void;
+    /**
+     * Toggles the dropdown content visibility.
+     * @param open Optional parameter to explicitly set the dropdown state. If not provided, the state will be toggled.
+     */
+    toggle(open?: boolean): void;
+}
+/**
+ * Interface representing the directives used in a dropdown component.
+ */
+export interface DropdownDirectives {
+    /**
+     * Directive to apply to the anchor element (the reference point for positioning the dropdown menu)
+     */
+    anchorDirective: Directive;
+    /**
+     * Directive to apply positioned.
+     */
+    menuDirective: Directive;
+    /**
+     * Directive to apply to the dropdown host element (carries the ARIA semantics: `id`, `aria-live`).
+     */
+    dropdownDirective: Directive;
+}
+/**
+ * Represents a widget for handling dropdown functionality.
+ *
+ * This type defines the structure of a DropdownWidget, which includes properties, state, API, and directives
+ * necessary for managing the dropdown behavior in the UI.
+ *
+ * @type {Widget<DropdownProps, DropdownState, DropdownApi, DropdownDirectives>}
+ */
+export type DropdownWidget = Widget<DropdownProps, DropdownState, DropdownApi, DropdownDirectives>;
+/**
+ * Retrieve a shallow copy of the default dropdown config
+ * @returns the default dropdown config
+ */
+export declare function getDropdownDefaultConfig(): DropdownProps;
+/**
+ * Create an DropdownWidget factory
+ * @returns an DropdownWidget
+ */
+export declare const createDropdown: WidgetFactory<DropdownWidget>;
+export {};

package/components/dropdown/index.d.ts

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

package/components/dropdown/index.js

@@ -0,0 +1,5 @@
+import { c, g } from "../../dropdown-Bjj2ql6d.js";
+export {
+  c as createDropdown,
+  g as getDropdownDefaultConfig
+};

package/components/modal/index.js

@@ -1,4 +1,4 @@
-import { c, g, m, a, b } from "../../modal-BH9nrwVz.js";
+import { c, g, m, a, b } from "../../modal-CQWh2Sm5.js";
 export {
   c as createModal,
   g as getModalDefaultConfig,

package/components/pagination/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../pagination-BQWusWXN.js";
+import { c, g } from "../../pagination-DIRcpdRE.js";
 export {
   c as createPagination,
   g as getPaginationDefaultConfig

package/components/progressbar/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../progressbar-S1pNn5rM.js";
+import { c, g } from "../../progressbar-Bth8r3Qu.js";
 export {
   c as createProgressbar,
   g as getProgressbarDefaultConfig

package/components/rating/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../rating-DWgGgwk3.js";
+import { c, g } from "../../rating-DLsgFSyB.js";
 export {
   c as createRating,
   g as getRatingDefaultConfig

package/components/slider/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../slider-Br_Qiopx.js";
+import { c, g } from "../../slider-tH5g55yQ.js";
 export {
   c as createSlider,
   g as getSliderDefaultConfig

package/components/slider/slider.d.ts

@@ -162,16 +162,22 @@ interface SliderCommonPropsAndState extends WidgetsCommonPropsAndState {
      */
     showTicks: boolean;
     /**
-     * It `true` slider display is inversed
+     * If `true`, visually flips the slider direction (both horizontal and vertical).
      *
      * @defaultValue `false`
      */
-    rtl: boolean;
+    flip: boolean;
 }
 /**
  * Represents the state of a slider component.
  */
 export interface SliderState extends SliderCommonPropsAndState {
+    /**
+     * It `true` slider display is inversed
+     *
+     * @defaultValue `false`
+     */
+    rtl: boolean;
     /**
      * Sorted slider values
      */
@@ -221,6 +227,13 @@ export interface SliderState extends SliderCommonPropsAndState {
  * Interface representing the properties for the Slider component.
  */
 export interface SliderProps extends SliderCommonPropsAndState {
+    /**
+     * If set, overrides the auto-detected RTL direction.
+     * When not set (`undefined`), RTL is auto-detected from the element's computed CSS direction.
+     *
+     * @defaultValue `undefined`
+     */
+    rtl: boolean | undefined;
     /**
      * Return the value for the 'aria-label' attribute for the handle
      * @param sortedIndex - index of the handle in the sorted list
@@ -277,16 +290,22 @@ export interface SliderProps extends SliderCommonPropsAndState {
      */
     showTickValues: boolean;
     /**
-     * Minimum distance between two values.
+     * Minimum distance between two handle values.
      * When set to 0, no minimum distance constraint is applied.
      *
+     * Note: constraints are only enforced when a handle value changes (via user interaction or programmatic update),
+     * not on the initial values. If the initial values violate the constraint, they are rendered as-is until a handle moves.
+     *
      * @defaultValue `0`
      */
     minRange: number;
     /**
-     * Maximum distance between two values
+     * Maximum distance between two handle values.
      * When set to 0, no maximum distance constraint is applied.
      *
+     * Note: constraints are only enforced when a handle value changes (via user interaction or programmatic update),
+     * not on the initial values. If the initial values violate the constraint, they are rendered as-is until a handle moves.
+     *
      * @defaultValue `0`
      */
     maxRange: number;

package/components/toast/index.js

@@ -1,4 +1,4 @@
-import { T, c, d, g } from "../../toaster-BUBzFeJM.js";
+import { T, c, d, g } from "../../toaster-BS9qeRLF.js";
 export {
   T as Toaster,
   c as createToast,

package/components/tooltip/index.d.ts

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

package/components/tooltip/index.js

@@ -0,0 +1,174 @@
+import { writable, derived, computed, readable } from "@amadeus-it-group/tansu";
+import { createHasFocus, activeElement$ } from "../../services/focustrack.js";
+import { createHasMouseInside } from "../../services/mousetrack.js";
+import { typePlacement, createPositioning } from "../../services/positioning.js";
+import { createTransition } from "../../services/transitions/baseTransitions.js";
+import { createSimpleClassTransition } from "../../services/transitions/simpleClassTransition.js";
+import { debounceSignal } from "../../utils/debounceSignal.js";
+import { w as addEvent, s as mergeDirectives, g as createAttributesDirective, o as directiveSubscribe } from "../../directive-CMT2vEDg.js";
+import { createEdgeState } from "../../utils/edgeState.js";
+import { generateId } from "../../utils/id.js";
+import { writablesForProps, stateStores } from "../../utils/stores.js";
+import { createWidgetFactory } from "../../utils/widget.js";
+import { a as createTypeStringSpacedArray, d as typeBoolean, l as typeStringOrNull, c as createTypeEnum } from "../../writables-_7BriMb2.js";
+const verticalPlacement = ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"];
+const horizontalPlacement = ["end", "end-end", "end-start", "start", "start-end", "start-start"];
+const defaultPlacement = [...verticalPlacement, ...horizontalPlacement];
+const fadeTransition = createSimpleClassTransition({
+  animationPendingClasses: ["df-fade"],
+  animationPendingShowClasses: ["df-show"],
+  showClasses: ["df-show", "df-fade"],
+  hideClasses: ["df-hidden", "df-fade"]
+});
+const defaultTooltipConfig = {
+  animated: true,
+  content: "",
+  disabled: false,
+  placement: defaultPlacement,
+  size: "md"
+};
+const tooltipConfigValidator = {
+  animated: typeBoolean,
+  content: typeStringOrNull,
+  disabled: typeBoolean,
+  placement: createTypeStringSpacedArray((placement) => {
+    if (placement === "auto") {
+      return defaultPlacement;
+    } else if (placement === "vertical") {
+      return verticalPlacement;
+    } else if (placement === "horizontal") {
+      return horizontalPlacement;
+    }
+    return typePlacement.normalizeValue(placement);
+  }),
+  size: createTypeEnum(["sm", "md", "lg"])
+};
+const DEBOUNCE_DELAY = 200;
+const createTooltip = createWidgetFactory(
+  "tooltip",
+  (config) => {
+    const [{ placement$, animated$, disabled$, content$, ...stateProps }, patch] = writablesForProps(
+      defaultTooltipConfig,
+      config,
+      tooltipConfigValidator
+    );
+    const floating = createPositioning({
+      props: {
+        placement: placement$
+      }
+    });
+    const { directive: hasFocusDirective, hasFocus$ } = createHasFocus();
+    const forceVisibleOnFocus$ = writable(false);
+    const hasVisibleFocus$ = derived(
+      [hasFocus$, activeElement$, forceVisibleOnFocus$],
+      ([hasFocus, activeElement, forceVisibleOnFocus], set) => {
+        if (hasFocus) {
+          if (forceVisibleOnFocus || activeElement?.matches(":focus-visible")) {
+            set(true);
+          }
+        } else {
+          set(false);
+        }
+      },
+      false
+    );
+    const debouncedHasVisibleFocus$ = debounceSignal(hasVisibleFocus$, (value) => value ? DEBOUNCE_DELAY : -1);
+    const { directive: hasMouseInsideDirective, hasMouseInside$ } = createHasMouseInside();
+    const debouncedHasMouseInside$ = debounceSignal(hasMouseInside$, DEBOUNCE_DELAY);
+    const visible$ = createEdgeState(
+      {
+        mouseInside: debouncedHasMouseInside$,
+        hasVisibleFocus: debouncedHasVisibleFocus$
+      },
+      computed(() => disabled$() || !content$() || floating.stores.referenceHidden$())
+    );
+    const transition = createTransition({
+      props: {
+        transition: fadeTransition,
+        visible: visible$,
+        animated: animated$,
+        animatedOnInit: true
+      }
+    });
+    const escDismiss$ = readable(void 0, {
+      onUse: () => addEvent(
+        document.documentElement,
+        "keydown",
+        (event) => {
+          if (visible$() && event.key === "Escape") {
+            void transition.api.toggle(false);
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        },
+        { capture: true }
+      )
+    });
+    const id$ = computed(generateId);
+    return {
+      ...stateStores({
+        ...stateProps,
+        content$,
+        animated$,
+        disabled$,
+        placement$,
+        visible$: transition.stores.visible$,
+        hidden$: transition.stores.hidden$
+      }),
+      patch,
+      api: {},
+      directives: {
+        referenceDirective: mergeDirectives(
+          floating.directives.referenceDirective,
+          hasFocusDirective,
+          hasMouseInsideDirective,
+          createAttributesDirective(() => ({
+            attributes: {
+              "aria-describedby": computed(() => transition.stores.hidden$() ? void 0 : id$())
+            },
+            styles: {
+              // prevents the trigger element from being selected when long-pressing on touch devices
+              userSelect: computed(() => disabled$() ? void 0 : "none")
+            },
+            events: {
+              contextmenu: (event) => {
+                if (event.pointerType === "touch" && !disabled$()) {
+                  event.preventDefault();
+                  if (hasVisibleFocus$()) {
+                    void transition.api.toggle(true);
+                  } else {
+                    forceVisibleOnFocus$.set(true);
+                    event.currentTarget?.focus?.();
+                    forceVisibleOnFocus$.set(false);
+                  }
+                }
+              }
+            }
+          }))
+        ),
+        floatingDirective: mergeDirectives(
+          floating.directives.floatingDirective,
+          transition.directives.directive,
+          hasMouseInsideDirective,
+          directiveSubscribe(escDismiss$),
+          createAttributesDirective(() => ({
+            attributes: {
+              role: readable("tooltip"),
+              id: id$
+            },
+            events: {
+              mousedown: (event) => {
+                if (hasVisibleFocus$() && debouncedHasMouseInside$() && !event.defaultPrevented) {
+                  visible$.skipNextSourceValue("hasVisibleFocus", false);
+                }
+              }
+            }
+          }))
+        )
+      }
+    };
+  }
+);
+export {
+  createTooltip
+};

package/components/tooltip/tooltip.d.ts

@@ -0,0 +1,63 @@
+import { type Placement } from '../../services/positioning';
+import type { Directive, SSRHTMLElement, Widget, WidgetFactory } from '../../types';
+/**
+ * Valid placement values for the tooltip.
+ * Includes all individual {@link Placement} values plus `'auto'`, `'vertical'` and `'horizontal'` shortcuts.
+ *
+ * - `'auto'` expands to `'vertical horizontal'`
+ * - `'vertical'` expands to `'top top-start top-end bottom bottom-start bottom-end'`
+ * - `'horizontal'` expands to `'end end-end end-start start start-end start-start'`
+ */
+export type TooltipPlacement = Placement | 'auto' | 'vertical' | 'horizontal';
+export type TooltipSize = 'sm' | 'md' | 'lg';
+export interface TooltipCommonPropsAndState {
+    /**
+     * Text content to be displayed inside the tooltip.
+     */
+    content: string | null;
+    /**
+     * Size of the tooltip.
+     */
+    size: TooltipSize;
+    /**
+     * Whether showing or hiding the tooltip should be animated.
+     */
+    animated: boolean;
+    /**
+     * Whether the tooltip is disabled. When `true`, the tooltip will not be displayed, even if the reference element is focused, hovered or long-pressed.
+     */
+    disabled: boolean;
+    /**
+     * List of placements, in order of preference. The first valid placement will be used.
+     */
+    placement: Placement[];
+}
+export interface TooltipState extends TooltipCommonPropsAndState {
+    /**
+     * Whether the tooltip is currently visible.
+     */
+    visible: boolean;
+    /**
+     * Whether the tooltip is currently hidden. Note that there can be a delay between when `visible` becomes false and when `hidden` becomes true (while the transition is running if animated is true).
+     */
+    hidden: boolean;
+}
+export interface TooltipProps extends TooltipCommonPropsAndState {
+}
+export interface TooltipDirectives {
+    /**
+     * Directive to attach to the reference element
+     */
+    referenceDirective: Directive<void, SSRHTMLElement>;
+    /**
+     * Directive to attach to the floating element
+     */
+    floatingDirective: Directive<void, SSRHTMLElement>;
+}
+export type TooltipWidget = Widget<TooltipProps, TooltipState, Record<string, never>, TooltipDirectives>;
+/**
+ * Create a TooltipWidget with given config props
+ * @param config - an optional tooltip config
+ * @returns a TooltipWidget
+ */
+export declare const createTooltip: WidgetFactory<TooltipWidget>;

package/components/tree/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../tree-vD7ZkV8Z.js";
+import { c, g } from "../../tree-DW6iLxdw.js";
 export {
   c as createTree,
   g as getTreeDefaultConfig