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

package/components/collapse/collapse.gen.d.ts

@@ -134,6 +134,10 @@ export interface CollapseDirectives {
      * Directive to apply the collapse.
      */
     collapseDirective: Directive;
+    /**
+     * Directive to apply to a trigger;
+     */
+    triggerDirective: Directive;
 }
 /**
  * Represents a widget for handling collapse functionality.

package/components/slider/index.cjs

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const slider = require("../../slider-D0knY75x.cjs");
+const slider = require("../../slider-DyvRcMCK.cjs");
 exports.Slider = slider.Slider;
 exports.SliderDefaultSlotHandle = slider.SliderDefaultSlotHandle;
 exports.SliderDefaultSlotStructure = slider.SliderDefaultSlotStructure;
+exports.SliderDefaultTick = slider.SliderDefaultTick;
 exports.createSlider = slider.export_createSlider;
 exports.getSliderDefaultConfig = slider.export_getSliderDefaultConfig;

package/components/slider/index.js

@@ -1,8 +1,9 @@
-import { b, S, a, c, e } from "../../slider-UQlY3PHn.js";
+import { c, S, b, a, d, e } from "../../slider-vFEkaZP-.js";
 export {
-  b as Slider,
+  c as Slider,
   S as SliderDefaultSlotHandle,
-  a as SliderDefaultSlotStructure,
-  c as createSlider,
+  b as SliderDefaultSlotStructure,
+  a as SliderDefaultTick,
+  d as createSlider,
   e as getSliderDefaultConfig
 };

package/components/slider/slider.d.ts

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import type { SliderContext, SliderProps, SliderSlotHandleContext } from './slider.gen';
+import type { SliderContext, SliderProps, SliderSlotHandleContext, SliderSlotTickContext } from './slider.gen';
 /**
  * A functional component that renders a button element with a directive applied to it.
  * The directive is provided through the `slotContext` parameter.
@@ -8,6 +8,14 @@ import type { SliderContext, SliderProps, SliderSlotHandleContext } from './slid
  * @returns A button element with the applied directive.
  */
 export declare const SliderDefaultSlotHandle: (slotContext: SliderSlotHandleContext) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A functional component that renders a tick 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 slider tick.
+ * @returns A tick element with the applied directive.
+ */
+export declare const SliderDefaultTick: (slotContext: SliderSlotTickContext) => import("react/jsx-runtime").JSX.Element;
 /**
  * Renders the default slot structure for the Slider component.
  *

package/components/slider/slider.gen.d.ts

@@ -31,6 +31,15 @@ export interface SliderSlotHandleContext extends SliderContext {
      */
     item: SliderHandle;
 }
+/**
+ * Represents the context for a slider tick slot
+ */
+export interface SliderSlotTickContext extends SliderContext {
+    /**
+     * tick context
+     */
+    tick: SliderTick;
+}
 /**
  * Represents the state of a slider component.
  */
@@ -75,6 +84,10 @@ export interface SliderState {
      * Check if the slider is interactive, meaning it is not disabled or readonly
      */
     interactive: boolean;
+    /**
+     * Array of ticks to display on the slider component
+     */
+    ticks: SliderTick[];
     /**
      * Minimum value that can be assigned to the slider
      *
@@ -129,6 +142,12 @@ export interface SliderState {
      * @defaultValue `true`
      */
     showMinMaxLabels: boolean;
+    /**
+     * If `true` the ticks are displayed on the slider
+     *
+     * @defaultValue `false`
+     */
+    showTicks: boolean;
     /**
      * It `true` slider display is inversed
      *
@@ -158,6 +177,10 @@ export interface SliderState {
      *  Slot to change the handlers
      */
     handle: SlotContent<SliderSlotHandleContext>;
+    /**
+     * Slot to change the ticks
+     */
+    tick: SlotContent<SliderSlotTickContext>;
 }
 /**
  * Represents the properties for the Slider component.
@@ -205,6 +228,19 @@ export interface SliderProps {
      * ```
      */
     onValuesChange: (values: number[]) => void;
+    /**
+     * Unit value between the ticks
+     * If value is set to `0` the {@link stepSize} is used to space the ticks
+     *
+     * @defaultValue `0`
+     */
+    tickInterval: number;
+    /**
+     * If `true` the tick values are displayed on the slider
+     *
+     * @defaultValue `true`
+     */
+    showTickValues: boolean;
     /**
      * Minimum value that can be assigned to the slider
      *
@@ -259,6 +295,12 @@ export interface SliderProps {
      * @defaultValue `true`
      */
     showMinMaxLabels: boolean;
+    /**
+     * If `true` the ticks are displayed on the slider
+     *
+     * @defaultValue `false`
+     */
+    showTicks: boolean;
     /**
      * It `true` slider display is inversed
      *
@@ -288,6 +330,10 @@ export interface SliderProps {
      *  Slot to change the handlers
      */
     handle: SlotContent<SliderSlotHandleContext>;
+    /**
+     * Slot to change the ticks
+     */
+    tick: SlotContent<SliderSlotTickContext>;
 }
 /**
  * Represents a slider widget component.
@@ -371,6 +417,35 @@ export interface SliderHandle {
      */
     ariaLabelledBy: string | undefined;
 }
+/**
+ * Represents a tick in a slider component.
+ */
+export interface SliderTick {
+    /**
+     * CSS classes to be applied on the tick
+     */
+    className?: string | null;
+    /**
+     * Visualized optional explanation of the label
+     */
+    legend?: string | null;
+    /**
+     * Position of the tick in percent
+     */
+    position: number;
+    /**
+     * If `true` the tick has selected style
+     */
+    selected: boolean;
+    /**
+     * Value of the tick
+     */
+    value: number;
+    /**
+     * If `true` the tick label is displayed
+     */
+    displayLabel: boolean;
+}
 /**
  * Interface representing various directives used in the slider component.
  */
@@ -421,4 +496,16 @@ export interface SliderDirectives {
     handleLabelDisplayDirective: Directive<{
         index: number;
     }>;
+    /**
+     * Directive to apply to the slider tick
+     */
+    tickDirective: Directive<{
+        tick: SliderTick;
+    }>;
+    /**
+     * Directive to apply to the slider tick label
+     */
+    tickLabelDirective: Directive<{
+        tick: SliderTick;
+    }>;
 }

package/generated/index.d.ts

@@ -7,6 +7,7 @@ export * from './utils/stores';
 export * from './utils/portal';
 export * from './utils/directive';
 export * from './utils/writables';
+export * from './utils/func';
 export * from './services/siblingsInert';
 export * from './services/resizeObserver';
 export * from './services/portal';

package/generated/utils/func.cjs

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

package/generated/utils/func.d.ts

@@ -0,0 +1 @@
+export * from '@agnos-ui/react-headless/utils/func';

package/generated/utils/func.js

@@ -0,0 +1 @@
+export * from "@agnos-ui/react-headless/utils/func";

package/index.cjs

@@ -8,7 +8,7 @@ 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-D0knY75x.cjs");
+const slider = require("./slider-DyvRcMCK.cjs");
 const toast = require("./toast-CkwIDuRg.cjs");
 const tree = require("./tree-DT261j-0.cjs");
 const types = require("@agnos-ui/react-headless/types");
@@ -20,6 +20,7 @@ const stores = require("@agnos-ui/react-headless/utils/stores");
 const portal = require("@agnos-ui/react-headless/utils/portal");
 const directive = require("@agnos-ui/react-headless/utils/directive");
 const writables = require("@agnos-ui/react-headless/utils/writables");
+const func = require("@agnos-ui/react-headless/utils/func");
 const siblingsInert = require("@agnos-ui/react-headless/services/siblingsInert");
 const resizeObserver = require("@agnos-ui/react-headless/services/resizeObserver");
 const portal$1 = require("@agnos-ui/react-headless/services/portal");
@@ -77,6 +78,7 @@ exports.getSelectDefaultConfig = select.export_getSelectDefaultConfig;
 exports.Slider = slider.Slider;
 exports.SliderDefaultSlotHandle = slider.SliderDefaultSlotHandle;
 exports.SliderDefaultSlotStructure = slider.SliderDefaultSlotStructure;
+exports.SliderDefaultTick = slider.SliderDefaultTick;
 exports.createSlider = slider.export_createSlider;
 exports.getSliderDefaultConfig = slider.export_getSliderDefaultConfig;
 exports.Toast = toast.Toast;
@@ -142,6 +144,12 @@ Object.keys(writables).forEach((k) => {
     get: () => writables[k]
   });
 });
+Object.keys(func).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => func[k]
+  });
+});
 Object.keys(siblingsInert).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,

package/index.js

@@ -6,9 +6,9 @@ import { N, P, c as c3, a as a5, b as b4, d as d3, e as e5 } from "./pagination-
 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 { b as b6, S as S2, a as a9, c as c4, e as e9 } from "./slider-UQlY3PHn.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 d4, e as e11 } from "./tree-BflF5hyD.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";
 export * from "@agnos-ui/react-headless/types";
 export * from "@agnos-ui/react-headless/slot";
 export * from "@agnos-ui/react-headless/config";
@@ -18,6 +18,7 @@ export * from "@agnos-ui/react-headless/utils/stores";
 export * from "@agnos-ui/react-headless/utils/portal";
 export * from "@agnos-ui/react-headless/utils/directive";
 export * from "@agnos-ui/react-headless/utils/writables";
+export * from "@agnos-ui/react-headless/utils/func";
 export * from "@agnos-ui/react-headless/services/siblingsInert";
 export * from "@agnos-ui/react-headless/services/resizeObserver";
 export * from "@agnos-ui/react-headless/services/portal";
@@ -56,9 +57,10 @@ export {
   P2 as ProgressbarDefaultSlotStructure,
   R as Rating,
   S as Select,
-  b6 as Slider,
+  c4 as Slider,
   S2 as SliderDefaultSlotHandle,
-  a9 as SliderDefaultSlotStructure,
+  b6 as SliderDefaultSlotStructure,
+  a9 as SliderDefaultTick,
   a10 as Toast,
   T as ToastDefaultSlotStructure,
   T2 as Tree,
@@ -73,9 +75,9 @@ export {
   b5 as createProgressbar,
   a7 as createRating,
   a8 as createSelect,
-  c4 as createSlider,
+  d4 as createSlider,
   b7 as createToast,
-  d4 as createTree,
+  d5 as createTree,
   f as factoryCreateAccordion,
   e as getAccordionDefaultConfig,
   e2 as getAlertDefaultConfig,

package/package.json

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

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

@@ -10,6 +10,50 @@ const export_createSlider = slider.createSlider;
 const SliderDefaultSlotHandle = (slotContext) => {
   return /* @__PURE__ */ jsxRuntime.jsx("button", { ...directive.useDirective(slotContext.directives.handleDirective, { item: slotContext.item }), children: " " });
 };
+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"
+        }
+      )
+    }
+  ) })
+] });
 const ProgressDisplay = ({ directive: directive$1, option }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(directive$1, { option }) });
 };
@@ -38,6 +82,7 @@ const SliderDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxRuntime.j
   /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(slotContext.directives.clickableAreaDirective) }),
   slotContext.state.showMinMaxLabels && /* @__PURE__ */ jsxRuntime.jsx(MinMaxLabels, { ...slotContext }),
   slotContext.state.showValueLabels && slotContext.state.combinedLabelDisplay && /* @__PURE__ */ jsxRuntime.jsx(CombinedLabel, { ...slotContext }),
+  slotContext.state.ticks.map((tick) => /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.tick, props: { tick, ...slotContext } }, tick.position)),
   slotContext.state.sortedHandles.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.handle, props: { item, ...slotContext } }),
     slotContext.state.showValueLabels && !slotContext.state.combinedLabelDisplay && /* @__PURE__ */ jsxRuntime.jsx(HandleLabelDisplay, { directive: slotContext.directives.handleLabelDisplayDirective, index: i, children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.label, props: { value: slotContext.state.values[i], ...slotContext } }) })
@@ -46,12 +91,14 @@ const SliderDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxRuntime.j
 function Slider(props) {
   const widgetContext = generated_config.useWidgetWithConfig(export_createSlider, props, "slider", {
     structure: SliderDefaultSlotStructure,
-    handle: SliderDefaultSlotHandle
+    handle: SliderDefaultSlotHandle,
+    tick: SliderDefaultTick
   });
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(widgetContext.directives.sliderDirective), children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: widgetContext.state.structure, props: widgetContext }) });
 }
 exports.Slider = Slider;
 exports.SliderDefaultSlotHandle = SliderDefaultSlotHandle;
 exports.SliderDefaultSlotStructure = SliderDefaultSlotStructure;
+exports.SliderDefaultTick = SliderDefaultTick;
 exports.export_createSlider = export_createSlider;
 exports.export_getSliderDefaultConfig = export_getSliderDefaultConfig;

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

@@ -9,6 +9,50 @@ const export_createSlider = createSlider;
 const SliderDefaultSlotHandle = (slotContext) => {
   return /* @__PURE__ */ jsx("button", { ...useDirective(slotContext.directives.handleDirective, { item: slotContext.item }), children: " " });
 };
+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"
+        }
+      )
+    }
+  ) })
+] });
 const ProgressDisplay = ({ directive, option }) => {
   return /* @__PURE__ */ jsx("div", { ...useDirective(directive, { option }) });
 };
@@ -37,6 +81,7 @@ const SliderDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxs(Fragmen
   /* @__PURE__ */ jsx("div", { ...useDirective(slotContext.directives.clickableAreaDirective) }),
   slotContext.state.showMinMaxLabels && /* @__PURE__ */ jsx(MinMaxLabels, { ...slotContext }),
   slotContext.state.showValueLabels && slotContext.state.combinedLabelDisplay && /* @__PURE__ */ jsx(CombinedLabel, { ...slotContext }),
+  slotContext.state.ticks.map((tick) => /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.tick, props: { tick, ...slotContext } }, tick.position)),
   slotContext.state.sortedHandles.map((item, i) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
     /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.handle, props: { item, ...slotContext } }),
     slotContext.state.showValueLabels && !slotContext.state.combinedLabelDisplay && /* @__PURE__ */ jsx(HandleLabelDisplay, { directive: slotContext.directives.handleLabelDisplayDirective, index: i, children: /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.label, props: { value: slotContext.state.values[i], ...slotContext } }) })
@@ -45,14 +90,16 @@ const SliderDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxs(Fragmen
 function Slider(props) {
   const widgetContext = useWidgetWithConfig(export_createSlider, props, "slider", {
     structure: SliderDefaultSlotStructure,
-    handle: SliderDefaultSlotHandle
+    handle: SliderDefaultSlotHandle,
+    tick: SliderDefaultTick
   });
   return /* @__PURE__ */ jsx("div", { ...useDirective(widgetContext.directives.sliderDirective), children: /* @__PURE__ */ jsx(Slot, { slotContent: widgetContext.state.structure, props: widgetContext }) });
 }
 export {
   SliderDefaultSlotHandle as S,
-  SliderDefaultSlotStructure as a,
-  Slider as b,
-  export_createSlider as c,
+  SliderDefaultTick as a,
+  SliderDefaultSlotStructure as b,
+  Slider as c,
+  export_createSlider as d,
   export_getSliderDefaultConfig as e
 };