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

package/components/slider/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const slider = require("../../slider-DyvRcMCK.cjs");
+const slider = require("../../slider-CkKKSyai.cjs");
 exports.Slider = slider.Slider;
 exports.SliderDefaultSlotHandle = slider.SliderDefaultSlotHandle;
 exports.SliderDefaultSlotStructure = slider.SliderDefaultSlotStructure;

package/components/slider/index.js

@@ -1,4 +1,4 @@
-import { c, S, b, a, d, e } from "../../slider-vFEkaZP-.js";
+import { c, S, b, a, d, e } from "../../slider-ZmbENVpb.js";
 export {
   c as Slider,
   S as SliderDefaultSlotHandle,

package/components/toast/index.cjs

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const toast = require("../../toast-CkwIDuRg.cjs");
-exports.Toast = toast.Toast;
-exports.ToastDefaultSlotStructure = toast.ToastDefaultSlotStructure;
-exports.createToast = toast.export_createToast;
-exports.getToastDefaultConfig = toast.export_getToastDefaultConfig;
+const toasterProvider = require("../../toasterProvider-glQ29Go3.cjs");
+exports.Toast = toasterProvider.Toast;
+exports.ToastDefaultSlotStructure = toasterProvider.ToastDefaultSlotStructure;
+exports.ToasterContainer = toasterProvider.ToasterContainer;
+exports.ToasterProvider = toasterProvider.ToasterProvider;
+exports.createToast = toasterProvider.export_createToast;
+exports.defaultToasterProps = toasterProvider.export_defaultToasterProps;
+exports.getToastDefaultConfig = toasterProvider.export_getToastDefaultConfig;
+exports.toastPositions = toasterProvider.export_toastPositions;
+exports.useToaster = toasterProvider.useToaster;

package/components/toast/index.d.ts

@@ -1,2 +1,3 @@
 export * from './toast';
 export * from './toast.gen';
+export * from './toasterProvider';

package/components/toast/index.js

@@ -1,7 +1,12 @@
-import { a, T, b, e } from "../../toast-BUHjCme7.js";
+import { a, T, f, g, b, d, e, c, u } from "../../toasterProvider-DO_5lfVp.js";
 export {
   a as Toast,
   T as ToastDefaultSlotStructure,
+  f as ToasterContainer,
+  g as ToasterProvider,
   b as createToast,
-  e as getToastDefaultConfig
+  d as defaultToasterProps,
+  e as getToastDefaultConfig,
+  c as toastPositions,
+  u as useToaster
 };

package/components/toast/toast.gen.d.ts

@@ -188,6 +188,21 @@ export type ToastWidget = Widget<ToastProps, ToastState, ToastApi, ToastDirectiv
  */
 declare const export_createToast: WidgetFactory<ToastWidget>;
 export { export_createToast as createToast };
+/**
+ * A mapping of toast position keys to their corresponding CSS class strings of bootstrap.
+ * These classes define the positioning of toast notifications on the screen.
+ *
+ * The keys represent various positions on the screen, such as top-left, top-center,
+ * middle-right, etc., and the values are the CSS classes of bootstrap that apply the respective
+ * positioning styles.
+ *
+ * Example usage:
+ * ```typescript
+ * const positionClass = toastPositions.topLeft; // "top-0 start-0"
+ * ```
+ */
+declare const export_toastPositions: Record<ToastPositions, string>;
+export { export_toastPositions as toastPositions };
 /**
  * Represents the API for the toast component.
  */
@@ -222,3 +237,73 @@ export interface ToastDirectives {
      */
     closeButtonDirective: Directive;
 }
+/**
+ * Represents the possible positions for displaying a toast notification.
+ *
+ * The positions are defined based on a grid layout with three horizontal
+ * alignments (left, center, right) and three vertical alignments (top, middle, bottom).
+ *
+ * Available positions:
+ * - `topLeft`: Top-left corner of the screen.
+ * - `topCenter`: Top-center of the screen.
+ * - `topRight`: Top-right corner of the screen.
+ * - `middleLeft`: Middle-left side of the screen.
+ * - `middleCenter`: Center of the screen.
+ * - `middleRight`: Middle-right side of the screen.
+ * - `bottomLeft`: Bottom-left corner of the screen.
+ * - `bottomCenter`: Bottom-center of the screen.
+ * - `bottomRight`: Bottom-right corner of the screen.
+ */
+export type ToastPositions = 'topLeft' | 'topCenter' | 'topRight' | 'middleLeft' | 'middleCenter' | 'middleRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
+/**
+ * Props of the toaster
+ */
+export interface ToasterProps {
+    /** How much time (ms) a toast is displayed; 0 means it won't be removed until a manual action */
+    duration: number;
+    /** Where to position the toasts */
+    position: ToastPositions;
+    /** Maximum number of toasts displayed */
+    limit?: number;
+    /**  Pause toast when hover */
+    pauseOnHover?: boolean;
+    /** Display a dismiss button on each toast. When duration = 0, this is enforced to true */
+    dismissible: boolean;
+    /** Add a button to close all the toasts at once */
+    closeAll?: boolean;
+    /** Close all label */
+    closeAllLabel?: string;
+}
+/**
+ * Toast object
+ * @template Props Type of the toast properties.
+ */
+export interface ToasterToast<Props> {
+    /** Identifier of the toasts in the toaster */
+    id: number;
+    /** Properties of the toast */
+    props: Props;
+}
+/**
+ * Represents a timer used by the toaster service.
+ */
+export interface ToasterTimer {
+    /**
+     * The timeout identifier returned by `setTimeout`.
+     */
+    timeout: ReturnType<typeof setTimeout> | null;
+    /**
+     * The timestamp when the timer was started.
+     */
+    started: number;
+    /**
+     * The timestamp when the timer was paused (optional).
+     */
+    paused?: number;
+    /**
+     * The duration for which the timer is set (optional). Used internally to compute the remaining time.
+     */
+    duration: number;
+}
+declare const export_defaultToasterProps: ToasterProps;
+export { export_defaultToasterProps as defaultToasterProps };

package/components/toast/toasterProvider.d.ts

@@ -0,0 +1,34 @@
+import type { ToasterProps, ToastProps } from './toast.gen';
+import type { PropsWithChildren } from 'react';
+/**
+ * Toaster component that displays a list of toast notifications.
+ *
+ * This component uses the `useToaster` hook to manage the state of the toasts.
+ * It renders a container with a list of toasts and an optional "Close all" button
+ * if the `closeAll` option is enabled and there is more than one toast.
+ *
+ * @returns The rendered Toaster component.
+ */
+export declare function ToasterContainer(): import("react/jsx-runtime").JSX.Element;
+/**
+ * ToasterProvider component to provide toaster context to its children.
+ * @param props - The properties object.
+ * @param [props.options] - Optional toaster properties.
+ * @param props.children - The children components.
+ * @returns The ToasterProvider component.
+ */
+export declare const ToasterProvider: ({ options, children }: PropsWithChildren<{
+    options?: ToasterProps;
+}>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Custom hook to use the toaster context.
+ * @returns The toaster context.
+ */
+export declare const useToaster: () => {
+    toasts: import("core/dist/components/toast").ToasterToast<Partial<ToastProps>>[];
+    options: import("core/dist/components/toast").ToasterProps;
+    addToast: (props: Partial<ToastProps>) => number;
+    removeToast: (id: number) => void;
+    eventsDirective: import("core/dist/types").Directive<number>;
+    closeAll: () => void;
+};

package/config.gen.d.ts

@@ -1,5 +1,6 @@
 import type { AccordionProps } from './components/accordion';
 import type { AlertProps } from './components/alert';
+import type { CarouselProps } from './components/carousel';
 import type { CollapseProps } from './components/collapse';
 import type { ModalProps } from './components/modal';
 import type { PaginationProps } from './components/pagination';
@@ -18,6 +19,10 @@ export type WidgetsConfig = {
      * the alert widget config
      */
     alert: AlertProps;
+    /**
+     * the carousel widget config
+     */
+    carousel: CarouselProps<any>;
     /**
      * the collapse widget config
      */

package/generated/types.cjs

@@ -1,9 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const types = require("@agnos-ui/react-headless/types");
+const types$1 = require("@agnos-ui/core-bootstrap/types");
 Object.keys(types).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,
     get: () => types[k]
   });
 });
+Object.keys(types$1).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => types$1[k]
+  });
+});

package/generated/types.d.ts

@@ -1 +1 @@
-export * from '@agnos-ui/react-headless/types';
+export * from './../types';

package/generated/types.js

@@ -1 +1,2 @@
 export * from "@agnos-ui/react-headless/types";
+export * from "@agnos-ui/core-bootstrap/types";

package/index.cjs

@@ -1,17 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const accordion = require("./accordion-QclyKh8E.cjs");
+const accordion = require("./accordion-CKX3QpIN.cjs");
 const alert = require("./alert-BGVw_vsM.cjs");
-const collapse = require("./collapse-UMbDs6Gh.cjs");
+const carousel = require("./carousel-B8b91cHo.cjs");
+const collapse = require("./collapse-BQNW5NFj.cjs");
 const modal = require("./modal-DQLOz7TE.cjs");
 const pagination = require("./pagination-Bq4Hvm1j.cjs");
 const progressbar = require("./progressbar-CnbqCXqH.cjs");
 const rating = require("./rating-BaZTCQi1.cjs");
 const select = require("./select-DHNspXXB.cjs");
-const slider = require("./slider-DyvRcMCK.cjs");
-const toast = require("./toast-CkwIDuRg.cjs");
+const slider = require("./slider-CkKKSyai.cjs");
+const toasterProvider = require("./toasterProvider-glQ29Go3.cjs");
 const tree = require("./tree-DT261j-0.cjs");
 const types = require("@agnos-ui/react-headless/types");
+const types$1 = require("@agnos-ui/core-bootstrap/types");
 const slot = require("@agnos-ui/react-headless/slot");
 const config = require("@agnos-ui/react-headless/config");
 const generated_config = require("./generated/config.cjs");
@@ -47,6 +49,11 @@ exports.Alert = alert.Alert;
 exports.AlertDefaultSlotStructure = alert.AlertDefaultSlotStructure;
 exports.createAlert = alert.export_createAlert;
 exports.getAlertDefaultConfig = alert.export_getAlertDefaultConfig;
+exports.Carousel = carousel.Carousel;
+exports.CarouselDefaultNavigation = carousel.CarouselDefaultNavigation;
+exports.CarouselDefaultStructure = carousel.CarouselDefaultStructure;
+exports.createCarousel = carousel.export_createCarousel;
+exports.getCarouselDefaultConfig = carousel.export_getCarouselDefaultConfig;
 exports.Collapse = collapse.Collapse;
 exports.createCollapse = collapse.export_createCollapse;
 exports.getCollapseDefaultConfig = collapse.export_getCollapseDefaultConfig;
@@ -81,10 +88,15 @@ exports.SliderDefaultSlotStructure = slider.SliderDefaultSlotStructure;
 exports.SliderDefaultTick = slider.SliderDefaultTick;
 exports.createSlider = slider.export_createSlider;
 exports.getSliderDefaultConfig = slider.export_getSliderDefaultConfig;
-exports.Toast = toast.Toast;
-exports.ToastDefaultSlotStructure = toast.ToastDefaultSlotStructure;
-exports.createToast = toast.export_createToast;
-exports.getToastDefaultConfig = toast.export_getToastDefaultConfig;
+exports.Toast = toasterProvider.Toast;
+exports.ToastDefaultSlotStructure = toasterProvider.ToastDefaultSlotStructure;
+exports.ToasterContainer = toasterProvider.ToasterContainer;
+exports.ToasterProvider = toasterProvider.ToasterProvider;
+exports.createToast = toasterProvider.export_createToast;
+exports.defaultToasterProps = toasterProvider.export_defaultToasterProps;
+exports.getToastDefaultConfig = toasterProvider.export_getToastDefaultConfig;
+exports.toastPositions = toasterProvider.export_toastPositions;
+exports.useToaster = toasterProvider.useToaster;
 exports.DefaultTreeSlotItem = tree.DefaultTreeSlotItem;
 exports.DefaultTreeSlotItemContent = tree.DefaultTreeSlotItemContent;
 exports.DefaultTreeSlotItemToggle = tree.DefaultTreeSlotItemToggle;
@@ -102,6 +114,12 @@ Object.keys(types).forEach((k) => {
     get: () => types[k]
   });
 });
+Object.keys(types$1).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => types$1[k]
+  });
+});
 Object.keys(slot).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/accordion';
 export * from './components/alert';
+export * from './components/carousel';
 export * from './components/collapse';
 export * from './components/modal';
 export * from './components/pagination';

package/index.js

@@ -1,15 +1,17 @@
-import { b, a, A, d, c, f, e } from "./accordion-GX854ooE.js";
+import { b, a, A, d, c, f, e } from "./accordion-CrXiNNLE.js";
 import { a as a2, A as A2, b as b2, e as e2 } from "./alert-BM4ImSpO.js";
-import { C, a as a3, e as e3 } from "./collapse-BOXBa8_8.js";
-import { b as b3, M, a as a4, c as c2, e as e4, f as f2, d as d2, o } from "./modal-apFubipB.js";
-import { N, P, c as c3, a as a5, b as b4, d as d3, e as e5 } from "./pagination-B1Ho_-r4.js";
-import { a as a6, P as P2, b as b5, e as e6 } from "./progressbar-Ck20N_ee.js";
-import { R, a as a7, e as e7 } from "./rating-DziC4Tsh.js";
-import { S, a as a8, e as e8 } from "./select-C2jCf6jT.js";
-import { c as c4, S as S2, b as b6, a as a9, d as d4, e as e9 } from "./slider-vFEkaZP-.js";
-import { a as a10, T, b as b7, e as e10 } from "./toast-BUHjCme7.js";
-import { b as b8, a as a11, D, c as c5, T as T2, d as d5, e as e11 } from "./tree-BflF5hyD.js";
+import { c as c2, C, b as b3, a as a3, e as e3 } from "./carousel-CB4uoAm0.js";
+import { C as C2, a as a4, e as e4 } from "./collapse-DojQXsLN.js";
+import { b as b4, M, a as a5, c as c3, e as e5, f as f2, d as d2, o } from "./modal-apFubipB.js";
+import { N, P, c as c4, a as a6, b as b5, d as d3, e as e6 } from "./pagination-B1Ho_-r4.js";
+import { a as a7, P as P2, b as b6, e as e7 } from "./progressbar-Ck20N_ee.js";
+import { R, a as a8, e as e8 } from "./rating-DziC4Tsh.js";
+import { S, a as a9, e as e9 } from "./select-ClQGKBMF.js";
+import { c as c5, S as S2, b as b7, a as a10, d as d4, e as e10 } from "./slider-ZmbENVpb.js";
+import { a as a11, T, f as f3, g, b as b8, d as d5, e as e11, c as c6, u } from "./toasterProvider-DO_5lfVp.js";
+import { b as b9, a as a12, D, c as c7, T as T2, d as d6, e as e12 } from "./tree-BflF5hyD.js";
 export * from "@agnos-ui/react-headless/types";
+export * from "@agnos-ui/core-bootstrap/types";
 export * from "@agnos-ui/react-headless/slot";
 export * from "@agnos-ui/react-headless/config";
 import { WidgetsConfigContext, WidgetsDefaultConfig, useWidgetContext, useWidgetWithConfig } from "./generated/config.js";
@@ -40,59 +42,69 @@ export {
   A as AccordionItemDefaultSlotStructure,
   a2 as Alert,
   A2 as AlertDefaultSlotStructure,
-  C as Collapse,
-  b8 as DefaultTreeSlotItem,
-  a11 as DefaultTreeSlotItemContent,
+  c2 as Carousel,
+  C as CarouselDefaultNavigation,
+  b3 as CarouselDefaultStructure,
+  C2 as Collapse,
+  b9 as DefaultTreeSlotItem,
+  a12 as DefaultTreeSlotItemContent,
   D as DefaultTreeSlotItemToggle,
-  c5 as DefaultTreeSlotStructure,
-  b3 as Modal,
+  c7 as DefaultTreeSlotStructure,
+  b4 as Modal,
   M as ModalDefaultSlotHeader,
-  a4 as ModalDefaultSlotStructure,
+  a5 as ModalDefaultSlotStructure,
   N as NavButton,
   P as PageItem,
-  c3 as Pagination,
-  a5 as PaginationDefaultSlotPages,
-  b4 as PaginationDefaultSlotStructure,
-  a6 as Progressbar,
+  c4 as Pagination,
+  a6 as PaginationDefaultSlotPages,
+  b5 as PaginationDefaultSlotStructure,
+  a7 as Progressbar,
   P2 as ProgressbarDefaultSlotStructure,
   R as Rating,
   S as Select,
-  c4 as Slider,
+  c5 as Slider,
   S2 as SliderDefaultSlotHandle,
-  b6 as SliderDefaultSlotStructure,
-  a9 as SliderDefaultTick,
-  a10 as Toast,
+  b7 as SliderDefaultSlotStructure,
+  a10 as SliderDefaultTick,
+  a11 as Toast,
   T as ToastDefaultSlotStructure,
+  f3 as ToasterContainer,
+  g as ToasterProvider,
   T2 as Tree,
   WidgetsConfigContext,
   WidgetsDefaultConfig,
   d as createAccordion,
   c as createAccordionItem,
   b2 as createAlert,
-  a3 as createCollapse,
-  c2 as createModal,
+  a3 as createCarousel,
+  a4 as createCollapse,
+  c3 as createModal,
   d3 as createPagination,
-  b5 as createProgressbar,
-  a7 as createRating,
-  a8 as createSelect,
+  b6 as createProgressbar,
+  a8 as createRating,
+  a9 as createSelect,
   d4 as createSlider,
-  b7 as createToast,
-  d5 as createTree,
+  b8 as createToast,
+  d6 as createTree,
+  d5 as defaultToasterProps,
   f as factoryCreateAccordion,
   e as getAccordionDefaultConfig,
   e2 as getAlertDefaultConfig,
-  e3 as getCollapseDefaultConfig,
-  e4 as getModalDefaultConfig,
-  e5 as getPaginationDefaultConfig,
-  e6 as getProgressbarDefaultConfig,
-  e7 as getRatingDefaultConfig,
-  e8 as getSelectDefaultConfig,
-  e9 as getSliderDefaultConfig,
-  e10 as getToastDefaultConfig,
-  e11 as getTreeDefaultConfig,
+  e3 as getCarouselDefaultConfig,
+  e4 as getCollapseDefaultConfig,
+  e5 as getModalDefaultConfig,
+  e6 as getPaginationDefaultConfig,
+  e7 as getProgressbarDefaultConfig,
+  e8 as getRatingDefaultConfig,
+  e9 as getSelectDefaultConfig,
+  e10 as getSliderDefaultConfig,
+  e11 as getToastDefaultConfig,
+  e12 as getTreeDefaultConfig,
   f2 as modalCloseButtonClick,
   d2 as modalOutsideClick,
   o as openModal,
+  c6 as toastPositions,
+  u as useToaster,
   useWidgetContext,
   useWidgetWithConfig
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/react-bootstrap",
 	"description": "Bootstrap-based component library for React.",
-	"version": "0.8.0-next.0",
+	"version": "0.8.0",
 	"type": "module",
 	"main": "./index.cjs",
 	"module": "./index.js",
@@ -49,8 +49,8 @@
 		}
 	},
 	"dependencies": {
-		"@agnos-ui/core-bootstrap": "0.8.0-next.0",
-		"@agnos-ui/react-headless": "0.8.0-next.0",
+		"@agnos-ui/core-bootstrap": "0.8.0",
+		"@agnos-ui/react-headless": "0.8.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -73,6 +73,7 @@
 		"accordion",
 		"AgnosUI",
 		"alert",
+		"carousel",
 		"collapse",
 		"components",
 		"modal",
@@ -81,6 +82,7 @@
 		"rating",
 		"slider",
 		"toast",
+		"tree",
 		"widgets"
 	]
 }

package/{select-C2jCf6jT.js → select-ClQGKBMF.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Slot } from "@agnos-ui/react-headless/slot";
-import { useDirectives, classDirective, useDirective } from "@agnos-ui/react-headless/utils/directive";
+import { useDirectives, useDirective, classDirective } from "@agnos-ui/react-headless/utils/directive";
 import clsx from "clsx";
 import { useWidgetWithConfig } from "./generated/config.js";
 import { getSelectDefaultConfig, createSelect } from "@agnos-ui/core-bootstrap/components/select";

package/{slider-DyvRcMCK.cjs → slider-CkKKSyai.cjs}

@@ -2,57 +2,33 @@
 const jsxRuntime = require("react/jsx-runtime");
 const slot = require("@agnos-ui/react-headless/slot");
 const directive = require("@agnos-ui/react-headless/utils/directive");
+const clsx = require("clsx");
 const React = require("react");
 const generated_config = require("./generated/config.cjs");
 const slider = require("@agnos-ui/core-bootstrap/components/slider");
 const export_getSliderDefaultConfig = slider.getSliderDefaultConfig;
 const export_createSlider = slider.createSlider;
 const SliderDefaultSlotHandle = (slotContext) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("button", { ...directive.useDirective(slotContext.directives.handleDirective, { item: slotContext.item }), children: " " });
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { ...directive.useDirective(slotContext.directives.handleDirective, { item: slotContext.item }) });
 };
 const TickLabelDisplay = ({ directive: directive$1, tick }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { ...directive.useDirective(directive$1, { tick }), children: tick.value });
 };
 const SliderDefaultTick = (slotContext) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
   slotContext.tick.displayLabel && /* @__PURE__ */ jsxRuntime.jsx(TickLabelDisplay, { directive: slotContext.directives.tickLabelDirective, tick: slotContext.tick }),
-  /* @__PURE__ */ jsxRuntime.jsx("span", { ...directive.useDirective(slotContext.directives.tickDirective, { tick: slotContext.tick }), children: slotContext.tick.selected ? /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      style: { width: "var(--bs-slider-tick-secondary-size)", height: "var(--bs-slider-tick-primary-size)" },
-      fill: "none",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
-          {
-            cx: "50%",
-            cy: "50%",
-            r: "50%",
-            fill: slotContext.state.disabled ? "var(--bs-slider-tick-disabled-color)" : "var(--bs-slider-tick-selected-color)"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50%", cy: "50%", r: "25%", fill: "white" })
-      ]
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      style: { width: "var(--bs-slider-tick-secondary-size)", height: "var(--bs-slider-tick-primary-size)" },
-      fill: "none",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "circle",
-        {
-          cx: "50%",
-          cy: "50%",
-          r: "45%",
-          fill: "white",
-          stroke: slotContext.state.disabled ? "var(--bs-slider-tick-disabled-color)" : "var(--bs-slider-tick-neutral-color)",
-          strokeWidth: "1.5"
-        }
-      )
-    }
-  ) })
+  /* @__PURE__ */ jsxRuntime.jsx("span", { ...directive.useDirective(slotContext.directives.tickDirective, { tick: slotContext.tick }), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        className: clsx(
+          "au-slider-tick-outer",
+          { "au-slider-tick-disabled": slotContext.state.disabled },
+          { "au-slider-tick-selected": slotContext.tick.selected }
+        )
+      }
+    ),
+    slotContext.tick.selected && /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "au-slider-tick-inner au-slider-tick-selected" })
+  ] }) })
 ] });
 const ProgressDisplay = ({ directive: directive$1, option }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(directive$1, { option }) });

package/{slider-vFEkaZP-.js → slider-ZmbENVpb.js}

@@ -1,57 +1,33 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Slot } from "@agnos-ui/react-headless/slot";
 import { useDirective } from "@agnos-ui/react-headless/utils/directive";
+import clsx from "clsx";
 import React__default from "react";
 import { useWidgetWithConfig } from "./generated/config.js";
 import { getSliderDefaultConfig, createSlider } from "@agnos-ui/core-bootstrap/components/slider";
 const export_getSliderDefaultConfig = getSliderDefaultConfig;
 const export_createSlider = createSlider;
 const SliderDefaultSlotHandle = (slotContext) => {
-  return /* @__PURE__ */ jsx("button", { ...useDirective(slotContext.directives.handleDirective, { item: slotContext.item }), children: " " });
+  return /* @__PURE__ */ jsx("button", { ...useDirective(slotContext.directives.handleDirective, { item: slotContext.item }) });
 };
 const TickLabelDisplay = ({ directive, tick }) => {
   return /* @__PURE__ */ jsx("span", { ...useDirective(directive, { tick }), children: tick.value });
 };
 const SliderDefaultTick = (slotContext) => /* @__PURE__ */ jsxs(Fragment, { children: [
   slotContext.tick.displayLabel && /* @__PURE__ */ jsx(TickLabelDisplay, { directive: slotContext.directives.tickLabelDirective, tick: slotContext.tick }),
-  /* @__PURE__ */ jsx("span", { ...useDirective(slotContext.directives.tickDirective, { tick: slotContext.tick }), children: slotContext.tick.selected ? /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      style: { width: "var(--bs-slider-tick-secondary-size)", height: "var(--bs-slider-tick-primary-size)" },
-      fill: "none",
-      children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "50%",
-            cy: "50%",
-            r: "50%",
-            fill: slotContext.state.disabled ? "var(--bs-slider-tick-disabled-color)" : "var(--bs-slider-tick-selected-color)"
-          }
-        ),
-        /* @__PURE__ */ jsx("circle", { cx: "50%", cy: "50%", r: "25%", fill: "white" })
-      ]
-    }
-  ) : /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      style: { width: "var(--bs-slider-tick-secondary-size)", height: "var(--bs-slider-tick-primary-size)" },
-      fill: "none",
-      children: /* @__PURE__ */ jsx(
-        "circle",
-        {
-          cx: "50%",
-          cy: "50%",
-          r: "45%",
-          fill: "white",
-          stroke: slotContext.state.disabled ? "var(--bs-slider-tick-disabled-color)" : "var(--bs-slider-tick-neutral-color)",
-          strokeWidth: "1.5"
-        }
-      )
-    }
-  ) })
+  /* @__PURE__ */ jsx("span", { ...useDirective(slotContext.directives.tickDirective, { tick: slotContext.tick }), children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        className: clsx(
+          "au-slider-tick-outer",
+          { "au-slider-tick-disabled": slotContext.state.disabled },
+          { "au-slider-tick-selected": slotContext.tick.selected }
+        )
+      }
+    ),
+    slotContext.tick.selected && /* @__PURE__ */ jsx("circle", { className: "au-slider-tick-inner au-slider-tick-selected" })
+  ] }) })
 ] });
 const ProgressDisplay = ({ directive, option }) => {
   return /* @__PURE__ */ jsx("div", { ...useDirective(directive, { option }) });