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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
2
  import { Slot } from "@agnos-ui/react-headless/slot";
3
3
  import { useDirectives, classDirective } from "@agnos-ui/react-headless/utils/directive";
4
- import { createContext, useContext, useImperativeHandle, useEffect } from "react";
4
+ import { useContext, createContext, useImperativeHandle, useEffect } from "react";
5
5
  import { useWidgetWithConfig } from "./generated/config.js";
6
6
  import { getAccordionDefaultConfig, createAccordionItem, createAccordion, factoryCreateAccordion } from "@agnos-ui/core-bootstrap/components/accordion";
7
7
  const export_getAccordionDefaultConfig = getAccordionDefaultConfig;
@@ -1,4 +1,4 @@
1
- import { b, a, A, d, c, f, e } from "../../accordion-GX854ooE.js";
1
+ import { b, a, A, d, c, f, e } from "../../accordion-Id2wOeL4.js";
2
2
  export {
3
3
  b as Accordion,
4
4
  a as AccordionItem,
@@ -134,6 +134,10 @@ export interface CollapseDirectives {
134
134
  * Directive to apply the collapse.
135
135
  */
136
136
  collapseDirective: Directive;
137
+ /**
138
+ * Directive to apply to a trigger;
139
+ */
140
+ triggerDirective: Directive;
137
141
  }
138
142
  /**
139
143
  * Represents a widget for handling collapse functionality.
@@ -1,4 +1,4 @@
1
- import { S, a, e } from "../../select-C2jCf6jT.js";
1
+ import { S, a, e } from "../../select-ClQGKBMF.js";
2
2
  export {
3
3
  S as Select,
4
4
  a as createSelect,
@@ -1,8 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const slider = require("../../slider-D0knY75x.cjs");
3
+ const slider = require("../../slider-BQ9e4Vf9.cjs");
4
4
  exports.Slider = slider.Slider;
5
5
  exports.SliderDefaultSlotHandle = slider.SliderDefaultSlotHandle;
6
6
  exports.SliderDefaultSlotStructure = slider.SliderDefaultSlotStructure;
7
+ exports.SliderDefaultTick = slider.SliderDefaultTick;
7
8
  exports.createSlider = slider.export_createSlider;
8
9
  exports.getSliderDefaultConfig = slider.export_getSliderDefaultConfig;
@@ -1,8 +1,9 @@
1
- import { b, S, a, c, e } from "../../slider-UQlY3PHn.js";
1
+ import { c, S, b, a, d, e } from "../../slider-CkQ5_vKI.js";
2
2
  export {
3
- b as Slider,
3
+ c as Slider,
4
4
  S as SliderDefaultSlotHandle,
5
- a as SliderDefaultSlotStructure,
6
- c as createSlider,
5
+ b as SliderDefaultSlotStructure,
6
+ a as SliderDefaultTick,
7
+ d as createSlider,
7
8
  e as getSliderDefaultConfig
8
9
  };
@@ -1,5 +1,5 @@
1
1
  import type { PropsWithChildren } from 'react';
2
- import type { SliderContext, SliderProps, SliderSlotHandleContext } from './slider.gen';
2
+ import type { SliderContext, SliderProps, SliderSlotHandleContext, SliderSlotTickContext } from './slider.gen';
3
3
  /**
4
4
  * A functional component that renders a button element with a directive applied to it.
5
5
  * The directive is provided through the `slotContext` parameter.
@@ -8,6 +8,14 @@ import type { SliderContext, SliderProps, SliderSlotHandleContext } from './slid
8
8
  * @returns A button element with the applied directive.
9
9
  */
10
10
  export declare const SliderDefaultSlotHandle: (slotContext: SliderSlotHandleContext) => import("react/jsx-runtime").JSX.Element;
11
+ /**
12
+ * A functional component that renders a tick element with a directive applied to it.
13
+ * The directive is provided through the `slotContext` parameter.
14
+ *
15
+ * @param slotContext - The context object containing the directives and item for the slider tick.
16
+ * @returns A tick element with the applied directive.
17
+ */
18
+ export declare const SliderDefaultTick: (slotContext: SliderSlotTickContext) => import("react/jsx-runtime").JSX.Element;
11
19
  /**
12
20
  * Renders the default slot structure for the Slider component.
13
21
  *
@@ -31,6 +31,15 @@ export interface SliderSlotHandleContext extends SliderContext {
31
31
  */
32
32
  item: SliderHandle;
33
33
  }
34
+ /**
35
+ * Represents the context for a slider tick slot
36
+ */
37
+ export interface SliderSlotTickContext extends SliderContext {
38
+ /**
39
+ * tick context
40
+ */
41
+ tick: SliderTick;
42
+ }
34
43
  /**
35
44
  * Represents the state of a slider component.
36
45
  */
@@ -75,6 +84,10 @@ export interface SliderState {
75
84
  * Check if the slider is interactive, meaning it is not disabled or readonly
76
85
  */
77
86
  interactive: boolean;
87
+ /**
88
+ * Array of ticks to display on the slider component
89
+ */
90
+ ticks: SliderTick[];
78
91
  /**
79
92
  * Minimum value that can be assigned to the slider
80
93
  *
@@ -129,6 +142,12 @@ export interface SliderState {
129
142
  * @defaultValue `true`
130
143
  */
131
144
  showMinMaxLabels: boolean;
145
+ /**
146
+ * If `true` the ticks are displayed on the slider
147
+ *
148
+ * @defaultValue `false`
149
+ */
150
+ showTicks: boolean;
132
151
  /**
133
152
  * It `true` slider display is inversed
134
153
  *
@@ -158,6 +177,10 @@ export interface SliderState {
158
177
  * Slot to change the handlers
159
178
  */
160
179
  handle: SlotContent<SliderSlotHandleContext>;
180
+ /**
181
+ * Slot to change the ticks
182
+ */
183
+ tick: SlotContent<SliderSlotTickContext>;
161
184
  }
162
185
  /**
163
186
  * Represents the properties for the Slider component.
@@ -205,6 +228,19 @@ export interface SliderProps {
205
228
  * ```
206
229
  */
207
230
  onValuesChange: (values: number[]) => void;
231
+ /**
232
+ * Unit value between the ticks
233
+ * If value is set to `0` the {@link stepSize} is used to space the ticks
234
+ *
235
+ * @defaultValue `0`
236
+ */
237
+ tickInterval: number;
238
+ /**
239
+ * If `true` the tick values are displayed on the slider
240
+ *
241
+ * @defaultValue `true`
242
+ */
243
+ showTickValues: boolean;
208
244
  /**
209
245
  * Minimum value that can be assigned to the slider
210
246
  *
@@ -259,6 +295,12 @@ export interface SliderProps {
259
295
  * @defaultValue `true`
260
296
  */
261
297
  showMinMaxLabels: boolean;
298
+ /**
299
+ * If `true` the ticks are displayed on the slider
300
+ *
301
+ * @defaultValue `false`
302
+ */
303
+ showTicks: boolean;
262
304
  /**
263
305
  * It `true` slider display is inversed
264
306
  *
@@ -288,6 +330,10 @@ export interface SliderProps {
288
330
  * Slot to change the handlers
289
331
  */
290
332
  handle: SlotContent<SliderSlotHandleContext>;
333
+ /**
334
+ * Slot to change the ticks
335
+ */
336
+ tick: SlotContent<SliderSlotTickContext>;
291
337
  }
292
338
  /**
293
339
  * Represents a slider widget component.
@@ -371,6 +417,35 @@ export interface SliderHandle {
371
417
  */
372
418
  ariaLabelledBy: string | undefined;
373
419
  }
420
+ /**
421
+ * Represents a tick in a slider component.
422
+ */
423
+ export interface SliderTick {
424
+ /**
425
+ * CSS classes to be applied on the tick
426
+ */
427
+ className?: string | null;
428
+ /**
429
+ * Visualized optional explanation of the label
430
+ */
431
+ legend?: string | null;
432
+ /**
433
+ * Position of the tick in percent
434
+ */
435
+ position: number;
436
+ /**
437
+ * If `true` the tick has selected style
438
+ */
439
+ selected: boolean;
440
+ /**
441
+ * Value of the tick
442
+ */
443
+ value: number;
444
+ /**
445
+ * If `true` the tick label is displayed
446
+ */
447
+ displayLabel: boolean;
448
+ }
374
449
  /**
375
450
  * Interface representing various directives used in the slider component.
376
451
  */
@@ -421,4 +496,16 @@ export interface SliderDirectives {
421
496
  handleLabelDisplayDirective: Directive<{
422
497
  index: number;
423
498
  }>;
499
+ /**
500
+ * Directive to apply to the slider tick
501
+ */
502
+ tickDirective: Directive<{
503
+ tick: SliderTick;
504
+ }>;
505
+ /**
506
+ * Directive to apply to the slider tick label
507
+ */
508
+ tickLabelDirective: Directive<{
509
+ tick: SliderTick;
510
+ }>;
424
511
  }
@@ -7,6 +7,7 @@ export * from './utils/stores';
7
7
  export * from './utils/portal';
8
8
  export * from './utils/directive';
9
9
  export * from './utils/writables';
10
+ export * from './utils/func';
10
11
  export * from './services/siblingsInert';
11
12
  export * from './services/resizeObserver';
12
13
  export * from './services/portal';
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const func = require("@agnos-ui/react-headless/utils/func");
4
+ Object.keys(func).forEach((k) => {
5
+ if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
6
+ enumerable: true,
7
+ get: () => func[k]
8
+ });
9
+ });
@@ -0,0 +1 @@
1
+ export * from '@agnos-ui/react-headless/utils/func';
@@ -0,0 +1 @@
1
+ export * from "@agnos-ui/react-headless/utils/func";
package/index.cjs CHANGED
@@ -8,7 +8,7 @@ const pagination = require("./pagination-Bq4Hvm1j.cjs");
8
8
  const progressbar = require("./progressbar-CnbqCXqH.cjs");
9
9
  const rating = require("./rating-BaZTCQi1.cjs");
10
10
  const select = require("./select-DHNspXXB.cjs");
11
- const slider = require("./slider-D0knY75x.cjs");
11
+ const slider = require("./slider-BQ9e4Vf9.cjs");
12
12
  const toast = require("./toast-CkwIDuRg.cjs");
13
13
  const tree = require("./tree-DT261j-0.cjs");
14
14
  const types = require("@agnos-ui/react-headless/types");
@@ -20,6 +20,7 @@ const stores = require("@agnos-ui/react-headless/utils/stores");
20
20
  const portal = require("@agnos-ui/react-headless/utils/portal");
21
21
  const directive = require("@agnos-ui/react-headless/utils/directive");
22
22
  const writables = require("@agnos-ui/react-headless/utils/writables");
23
+ const func = require("@agnos-ui/react-headless/utils/func");
23
24
  const siblingsInert = require("@agnos-ui/react-headless/services/siblingsInert");
24
25
  const resizeObserver = require("@agnos-ui/react-headless/services/resizeObserver");
25
26
  const portal$1 = require("@agnos-ui/react-headless/services/portal");
@@ -77,6 +78,7 @@ exports.getSelectDefaultConfig = select.export_getSelectDefaultConfig;
77
78
  exports.Slider = slider.Slider;
78
79
  exports.SliderDefaultSlotHandle = slider.SliderDefaultSlotHandle;
79
80
  exports.SliderDefaultSlotStructure = slider.SliderDefaultSlotStructure;
81
+ exports.SliderDefaultTick = slider.SliderDefaultTick;
80
82
  exports.createSlider = slider.export_createSlider;
81
83
  exports.getSliderDefaultConfig = slider.export_getSliderDefaultConfig;
82
84
  exports.Toast = toast.Toast;
@@ -142,6 +144,12 @@ Object.keys(writables).forEach((k) => {
142
144
  get: () => writables[k]
143
145
  });
144
146
  });
147
+ Object.keys(func).forEach((k) => {
148
+ if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
149
+ enumerable: true,
150
+ get: () => func[k]
151
+ });
152
+ });
145
153
  Object.keys(siblingsInert).forEach((k) => {
146
154
  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
147
155
  enumerable: true,
package/index.js CHANGED
@@ -1,14 +1,14 @@
1
- import { b, a, A, d, c, f, e } from "./accordion-GX854ooE.js";
1
+ import { b, a, A, d, c, f, e } from "./accordion-Id2wOeL4.js";
2
2
  import { a as a2, A as A2, b as b2, e as e2 } from "./alert-BM4ImSpO.js";
3
3
  import { C, a as a3, e as e3 } from "./collapse-BOXBa8_8.js";
4
4
  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";
5
5
  import { N, P, c as c3, a as a5, b as b4, d as d3, e as e5 } from "./pagination-B1Ho_-r4.js";
6
6
  import { a as a6, P as P2, b as b5, e as e6 } from "./progressbar-Ck20N_ee.js";
7
7
  import { R, a as a7, e as e7 } from "./rating-DziC4Tsh.js";
8
- import { S, a as a8, e as e8 } from "./select-C2jCf6jT.js";
9
- import { b as b6, S as S2, a as a9, c as c4, e as e9 } from "./slider-UQlY3PHn.js";
8
+ import { S, a as a8, e as e8 } from "./select-ClQGKBMF.js";
9
+ import { c as c4, S as S2, b as b6, a as a9, d as d4, e as e9 } from "./slider-CkQ5_vKI.js";
10
10
  import { a as a10, T, b as b7, e as e10 } from "./toast-BUHjCme7.js";
11
- import { b as b8, a as a11, D, c as c5, T as T2, d as d4, e as e11 } from "./tree-BflF5hyD.js";
11
+ import { b as b8, a as a11, D, c as c5, T as T2, d as d5, e as e11 } from "./tree-BflF5hyD.js";
12
12
  export * from "@agnos-ui/react-headless/types";
13
13
  export * from "@agnos-ui/react-headless/slot";
14
14
  export * from "@agnos-ui/react-headless/config";
@@ -18,6 +18,7 @@ export * from "@agnos-ui/react-headless/utils/stores";
18
18
  export * from "@agnos-ui/react-headless/utils/portal";
19
19
  export * from "@agnos-ui/react-headless/utils/directive";
20
20
  export * from "@agnos-ui/react-headless/utils/writables";
21
+ export * from "@agnos-ui/react-headless/utils/func";
21
22
  export * from "@agnos-ui/react-headless/services/siblingsInert";
22
23
  export * from "@agnos-ui/react-headless/services/resizeObserver";
23
24
  export * from "@agnos-ui/react-headless/services/portal";
@@ -56,9 +57,10 @@ export {
56
57
  P2 as ProgressbarDefaultSlotStructure,
57
58
  R as Rating,
58
59
  S as Select,
59
- b6 as Slider,
60
+ c4 as Slider,
60
61
  S2 as SliderDefaultSlotHandle,
61
- a9 as SliderDefaultSlotStructure,
62
+ b6 as SliderDefaultSlotStructure,
63
+ a9 as SliderDefaultTick,
62
64
  a10 as Toast,
63
65
  T as ToastDefaultSlotStructure,
64
66
  T2 as Tree,
@@ -73,9 +75,9 @@ export {
73
75
  b5 as createProgressbar,
74
76
  a7 as createRating,
75
77
  a8 as createSelect,
76
- c4 as createSlider,
78
+ d4 as createSlider,
77
79
  b7 as createToast,
78
- d4 as createTree,
80
+ d5 as createTree,
79
81
  f as factoryCreateAccordion,
80
82
  e as getAccordionDefaultConfig,
81
83
  e2 as getAlertDefaultConfig,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@agnos-ui/react-bootstrap",
3
3
  "description": "Bootstrap-based component library for React.",
4
- "version": "0.7.1",
4
+ "version": "0.8.0-next.1",
5
5
  "type": "module",
6
6
  "main": "./index.cjs",
7
7
  "module": "./index.js",
@@ -49,8 +49,8 @@
49
49
  }
50
50
  },
51
51
  "dependencies": {
52
- "@agnos-ui/core-bootstrap": "0.7.1",
53
- "@agnos-ui/react-headless": "0.7.1",
52
+ "@agnos-ui/core-bootstrap": "0.8.0-next.1",
53
+ "@agnos-ui/react-headless": "0.8.0-next.1",
54
54
  "clsx": "^2.1.1"
55
55
  },
56
56
  "peerDependencies": {
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
2
  import { Slot } from "@agnos-ui/react-headless/slot";
3
- import { useDirectives, classDirective, useDirective } from "@agnos-ui/react-headless/utils/directive";
3
+ import { useDirectives, useDirective, classDirective } from "@agnos-ui/react-headless/utils/directive";
4
4
  import clsx from "clsx";
5
5
  import { useWidgetWithConfig } from "./generated/config.js";
6
6
  import { getSelectDefaultConfig, createSelect } from "@agnos-ui/core-bootstrap/components/select";
@@ -2,6 +2,7 @@
2
2
  const jsxRuntime = require("react/jsx-runtime");
3
3
  const slot = require("@agnos-ui/react-headless/slot");
4
4
  const directive = require("@agnos-ui/react-headless/utils/directive");
5
+ const clsx = require("clsx");
5
6
  const React = require("react");
6
7
  const generated_config = require("./generated/config.cjs");
7
8
  const slider = require("@agnos-ui/core-bootstrap/components/slider");
@@ -10,6 +11,25 @@ const export_createSlider = slider.createSlider;
10
11
  const SliderDefaultSlotHandle = (slotContext) => {
11
12
  return /* @__PURE__ */ jsxRuntime.jsx("button", { ...directive.useDirective(slotContext.directives.handleDirective, { item: slotContext.item }), children: " " });
12
13
  };
14
+ const TickLabelDisplay = ({ directive: directive$1, tick }) => {
15
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { ...directive.useDirective(directive$1, { tick }), children: tick.value });
16
+ };
17
+ const SliderDefaultTick = (slotContext) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
18
+ slotContext.tick.displayLabel && /* @__PURE__ */ jsxRuntime.jsx(TickLabelDisplay, { directive: slotContext.directives.tickLabelDirective, tick: slotContext.tick }),
19
+ /* @__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: [
20
+ /* @__PURE__ */ jsxRuntime.jsx(
21
+ "circle",
22
+ {
23
+ className: clsx(
24
+ "au-slider-tick-outer",
25
+ { "au-slider-tick-disabled": slotContext.state.disabled },
26
+ { "au-slider-tick-selected": slotContext.tick.selected }
27
+ )
28
+ }
29
+ ),
30
+ slotContext.tick.selected && /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "au-slider-tick-inner au-slider-tick-selected" })
31
+ ] }) })
32
+ ] });
13
33
  const ProgressDisplay = ({ directive: directive$1, option }) => {
14
34
  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(directive$1, { option }) });
15
35
  };
@@ -38,6 +58,7 @@ const SliderDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxRuntime.j
38
58
  /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(slotContext.directives.clickableAreaDirective) }),
39
59
  slotContext.state.showMinMaxLabels && /* @__PURE__ */ jsxRuntime.jsx(MinMaxLabels, { ...slotContext }),
40
60
  slotContext.state.showValueLabels && slotContext.state.combinedLabelDisplay && /* @__PURE__ */ jsxRuntime.jsx(CombinedLabel, { ...slotContext }),
61
+ slotContext.state.ticks.map((tick) => /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.tick, props: { tick, ...slotContext } }, tick.position)),
41
62
  slotContext.state.sortedHandles.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
42
63
  /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.handle, props: { item, ...slotContext } }),
43
64
  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 +67,14 @@ const SliderDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxRuntime.j
46
67
  function Slider(props) {
47
68
  const widgetContext = generated_config.useWidgetWithConfig(export_createSlider, props, "slider", {
48
69
  structure: SliderDefaultSlotStructure,
49
- handle: SliderDefaultSlotHandle
70
+ handle: SliderDefaultSlotHandle,
71
+ tick: SliderDefaultTick
50
72
  });
51
73
  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirective(widgetContext.directives.sliderDirective), children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: widgetContext.state.structure, props: widgetContext }) });
52
74
  }
53
75
  exports.Slider = Slider;
54
76
  exports.SliderDefaultSlotHandle = SliderDefaultSlotHandle;
55
77
  exports.SliderDefaultSlotStructure = SliderDefaultSlotStructure;
78
+ exports.SliderDefaultTick = SliderDefaultTick;
56
79
  exports.export_createSlider = export_createSlider;
57
80
  exports.export_getSliderDefaultConfig = export_getSliderDefaultConfig;
@@ -1,6 +1,7 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
1
+ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
2
  import { Slot } from "@agnos-ui/react-headless/slot";
3
3
  import { useDirective } from "@agnos-ui/react-headless/utils/directive";
4
+ import clsx from "clsx";
4
5
  import React__default from "react";
5
6
  import { useWidgetWithConfig } from "./generated/config.js";
6
7
  import { getSliderDefaultConfig, createSlider } from "@agnos-ui/core-bootstrap/components/slider";
@@ -9,6 +10,25 @@ const export_createSlider = createSlider;
9
10
  const SliderDefaultSlotHandle = (slotContext) => {
10
11
  return /* @__PURE__ */ jsx("button", { ...useDirective(slotContext.directives.handleDirective, { item: slotContext.item }), children: " " });
11
12
  };
13
+ const TickLabelDisplay = ({ directive, tick }) => {
14
+ return /* @__PURE__ */ jsx("span", { ...useDirective(directive, { tick }), children: tick.value });
15
+ };
16
+ const SliderDefaultTick = (slotContext) => /* @__PURE__ */ jsxs(Fragment, { children: [
17
+ slotContext.tick.displayLabel && /* @__PURE__ */ jsx(TickLabelDisplay, { directive: slotContext.directives.tickLabelDirective, tick: slotContext.tick }),
18
+ /* @__PURE__ */ jsx("span", { ...useDirective(slotContext.directives.tickDirective, { tick: slotContext.tick }), children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", children: [
19
+ /* @__PURE__ */ jsx(
20
+ "circle",
21
+ {
22
+ className: clsx(
23
+ "au-slider-tick-outer",
24
+ { "au-slider-tick-disabled": slotContext.state.disabled },
25
+ { "au-slider-tick-selected": slotContext.tick.selected }
26
+ )
27
+ }
28
+ ),
29
+ slotContext.tick.selected && /* @__PURE__ */ jsx("circle", { className: "au-slider-tick-inner au-slider-tick-selected" })
30
+ ] }) })
31
+ ] });
12
32
  const ProgressDisplay = ({ directive, option }) => {
13
33
  return /* @__PURE__ */ jsx("div", { ...useDirective(directive, { option }) });
14
34
  };
@@ -37,6 +57,7 @@ const SliderDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxs(Fragmen
37
57
  /* @__PURE__ */ jsx("div", { ...useDirective(slotContext.directives.clickableAreaDirective) }),
38
58
  slotContext.state.showMinMaxLabels && /* @__PURE__ */ jsx(MinMaxLabels, { ...slotContext }),
39
59
  slotContext.state.showValueLabels && slotContext.state.combinedLabelDisplay && /* @__PURE__ */ jsx(CombinedLabel, { ...slotContext }),
60
+ slotContext.state.ticks.map((tick) => /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.tick, props: { tick, ...slotContext } }, tick.position)),
40
61
  slotContext.state.sortedHandles.map((item, i) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
41
62
  /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.handle, props: { item, ...slotContext } }),
42
63
  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 +66,16 @@ const SliderDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxs(Fragmen
45
66
  function Slider(props) {
46
67
  const widgetContext = useWidgetWithConfig(export_createSlider, props, "slider", {
47
68
  structure: SliderDefaultSlotStructure,
48
- handle: SliderDefaultSlotHandle
69
+ handle: SliderDefaultSlotHandle,
70
+ tick: SliderDefaultTick
49
71
  });
50
72
  return /* @__PURE__ */ jsx("div", { ...useDirective(widgetContext.directives.sliderDirective), children: /* @__PURE__ */ jsx(Slot, { slotContent: widgetContext.state.structure, props: widgetContext }) });
51
73
  }
52
74
  export {
53
75
  SliderDefaultSlotHandle as S,
54
- SliderDefaultSlotStructure as a,
55
- Slider as b,
56
- export_createSlider as c,
76
+ SliderDefaultTick as a,
77
+ SliderDefaultSlotStructure as b,
78
+ Slider as c,
79
+ export_createSlider as d,
57
80
  export_getSliderDefaultConfig as e
58
81
  };