@situaction/traq-ui-ste 1.2.15 → 1.2.16

package/dist/components/carousel/Carousel.d.ts

@@ -0,0 +1,33 @@
+import { default as React, CSSProperties, ReactNode } from 'react';
+
+export type CarouselAlign = "start" | "center";
+export interface CarouselRef {
+    next: () => void;
+    prev: () => void;
+    goTo: (index: number, behavior?: ScrollBehavior) => void;
+    getIndex: () => number;
+    getLength: () => number;
+}
+export interface CarouselProps {
+    children: ReactNode;
+    className?: string;
+    viewportClassName?: string;
+    slideClassName?: string;
+    style?: CSSProperties;
+    slideSize?: string;
+    gap?: number;
+    align?: CarouselAlign;
+    showArrows?: boolean;
+    dragEnabled?: boolean;
+    snapOnRelease?: boolean;
+    keyboardNavigation?: boolean;
+    step?: number;
+    initialIndex?: number;
+    /** Loop infini (boutons + drag + wheel/trackpad) */
+    loop?: boolean;
+    ariaLabel?: string;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    onIndexChange?: (index: number) => void;
+}
+export declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselRef>>;

package/dist/components/carousel/Carousel.js

@@ -0,0 +1,328 @@
+import { jsxs as ae, jsx as I, Fragment as We } from "react/jsx-runtime";
+import ze, { forwardRef as Ee, useMemo as ie, useRef as l, useState as q, useCallback as i, useImperativeHandle as Fe, useEffect as Y } from "react";
+import '../../styles/Carousel.css';const Be = "_root_1kths_1", $e = "_viewport_1kths_6", qe = "_dragEnabled_1kths_22", je = "_dragging_1kths_27", Oe = "_slide_1kths_34", Xe = "_navButton_1kths_41", He = "_navPrev_1kths_63", Ve = "_navNext_1kths_67", d = {
+  root: Be,
+  viewport: $e,
+  dragEnabled: qe,
+  dragging: je,
+  slide: Oe,
+  navButton: Xe,
+  navPrev: He,
+  navNext: Ve
+}, C = (...M) => M.filter(Boolean).join(" "), Ye = Ee(
+  ({
+    children: M,
+    className: ue,
+    viewportClassName: le,
+    slideClassName: fe,
+    style: de,
+    slideSize: pe = "30%",
+    gap: ve = 12,
+    align: h = "center",
+    showArrows: me = !0,
+    dragEnabled: R = !0,
+    snapOnRelease: G = !0,
+    keyboardNavigation: he = !0,
+    step: we = 1,
+    initialIndex: J = 0,
+    loop: y = !1,
+    ariaLabel: Q = "Carousel",
+    iconLeft: ge,
+    iconRight: xe,
+    onIndexChange: A
+  }, _e) => {
+    const w = ie(() => ze.Children.toArray(M), [M]), s = w.length, c = y && s > 1, T = Math.max(1, Math.min(we, Math.max(1, s))), p = c ? s : 0, g = ie(() => {
+      if (!c)
+        return w.map((n, o) => ({
+          key: `real-${o}`,
+          node: n,
+          realIndex: o,
+          isClone: !1
+        }));
+      const e = w.map((n, o) => ({
+        key: `clone-head-${o}`,
+        node: n,
+        realIndex: o,
+        isClone: !0
+      })), t = w.map((n, o) => ({
+        key: `real-${o}`,
+        node: n,
+        realIndex: o,
+        isClone: !1
+      })), r = w.map((n, o) => ({
+        key: `clone-tail-${o}`,
+        node: n,
+        realIndex: o,
+        isClone: !0
+      }));
+      return [...e, ...t, ...r];
+    }, [c, w]), j = g.length, a = l(null), x = l([]), [Le, be] = q(0), N = l(0), [ke, Z] = q(!1), [Ie, ee] = q(!1), _ = l(!1), te = l(0), O = l(0), X = l(!1), H = l(!1), [Re, re] = q(!1), v = i(
+      (e) => {
+        N.current = e, be(e), A == null || A(e);
+      },
+      [A]
+    ), ne = i((e) => {
+      const t = a.current;
+      t && (t.style.scrollSnapType = e ? "x mandatory" : "none", t.style.scrollBehavior = e ? "smooth" : "auto");
+    }, []), P = i(
+      (e, t) => h === "center" ? t.offsetLeft - (e.clientWidth - t.offsetWidth) / 2 : t.offsetLeft,
+      [h]
+    ), L = i(
+      (e, t = "smooth") => {
+        const r = a.current, n = x.current[e];
+        if (!r || !n) return;
+        const o = P(r, n);
+        r.scrollTo({ left: o, behavior: t });
+      },
+      [P]
+    ), D = i(
+      (e) => s === 0 ? 0 : y ? (e % s + s) % s : Math.max(0, Math.min(s - 1, e)),
+      [y, s]
+    ), W = i(
+      (e) => c ? p + e : e,
+      [c, p]
+    ), b = i(
+      (e, t = "smooth") => {
+        const r = D(e), n = W(r);
+        L(n, t), v(r);
+      },
+      [D, W, L, v]
+    ), z = i(() => {
+      const e = a.current;
+      if (!e || j === 0) return 0;
+      const t = e.scrollLeft, r = h === "center" ? t + e.clientWidth / 2 : t;
+      let n = 0, o = Number.POSITIVE_INFINITY;
+      for (let f = 0; f < j; f++) {
+        const u = x.current[f];
+        if (!u) continue;
+        const m = h === "center" ? u.offsetLeft + u.offsetWidth / 2 : u.offsetLeft, $ = Math.abs(m - r);
+        $ < o && (o = $, n = f);
+      }
+      return n;
+    }, [h, j]), E = i(
+      (e) => c ? e < p ? e + s : e >= p + s ? e - s : e : e,
+      [c, p, s]
+    ), oe = l({
+      middleStart: 0,
+      groupWidth: 0
+    }), k = i(() => {
+      if (!c) return;
+      const e = a.current;
+      if (!e) return;
+      const t = x.current[p], r = x.current[p + s];
+      if (!t || !r) return;
+      const n = P(e, t), o = P(e, r);
+      oe.current = {
+        middleStart: n,
+        groupWidth: o - n
+      };
+    }, [c, p, s, P]), V = l(!1), K = i(
+      (e) => {
+        if (!c) return;
+        const t = a.current;
+        if (!t) return;
+        const { middleStart: r, groupWidth: n } = oe.current;
+        if (n <= 0) return;
+        const o = r, f = r + n;
+        let u = t.scrollLeft, m = 0;
+        u < o ? m = Math.ceil((o - u) / n) * n : u > f && (m = -Math.ceil((u - f) / n) * n), m !== 0 && (V.current = !0, t.scrollLeft = u + m, e === "drag" && (O.current += m), V.current = !1);
+      },
+      [c]
+    ), S = i(() => {
+      if (y) {
+        Z(s > 1), ee(s > 1);
+        return;
+      }
+      const e = a.current;
+      if (!e) return;
+      const t = e.scrollWidth - e.clientWidth, r = 1;
+      Z(t > r && e.scrollLeft > r), ee(t > r && e.scrollLeft < t - r);
+    }, [y, s]), F = i(() => {
+      s <= 1 || b(N.current + T);
+    }, [b, s, T]), B = i(() => {
+      s <= 1 || b(N.current - T);
+    }, [b, s, T]), ye = i(() => {
+      var n;
+      if (!G) return;
+      const e = z(), t = E(e);
+      L(t, "smooth");
+      const r = ((n = g[t]) == null ? void 0 : n.realIndex) ?? 0;
+      v(r);
+    }, [
+      G,
+      z,
+      E,
+      L,
+      g,
+      v
+    ]);
+    Fe(
+      _e,
+      () => ({
+        next: F,
+        prev: B,
+        goTo: b,
+        getIndex: () => N.current,
+        getLength: () => s
+      }),
+      [b, F, B, s]
+    ), Y(() => {
+      if (s === 0) return;
+      const e = D(J), t = W(e), r = window.requestAnimationFrame(() => {
+        k(), L(t, "auto"), v(e), S();
+      });
+      return () => window.cancelAnimationFrame(r);
+    }, [
+      s,
+      J,
+      D,
+      W,
+      L,
+      v,
+      S,
+      k
+    ]), Y(() => {
+      if (!c) return;
+      const e = a.current;
+      if (!e) return;
+      const t = typeof ResizeObserver < "u" ? new ResizeObserver(() => {
+        k();
+      }) : null;
+      t == null || t.observe(e), x.current.forEach((o) => o && (t == null ? void 0 : t.observe(o)));
+      const r = () => k();
+      window.addEventListener("resize", r);
+      const n = window.requestAnimationFrame(() => k());
+      return () => {
+        window.removeEventListener("resize", r), window.cancelAnimationFrame(n), t == null || t.disconnect();
+      };
+    }, [c, k]), Y(() => {
+      const e = a.current;
+      if (!e) return;
+      const t = { current: 0 }, r = () => {
+        V.current || (c && !_.current && K("scroll"), S(), !t.current && (t.current = window.requestAnimationFrame(() => {
+          var u;
+          t.current = 0;
+          const n = z(), o = E(n), f = ((u = g[o]) == null ? void 0 : u.realIndex) ?? 0;
+          f !== N.current && v(f);
+        })));
+      };
+      return e.addEventListener("scroll", r, { passive: !0 }), () => {
+        e.removeEventListener("scroll", r), t.current && window.cancelAnimationFrame(t.current);
+      };
+    }, [
+      c,
+      K,
+      S,
+      z,
+      E,
+      g,
+      v
+    ]);
+    const Ne = (e) => e instanceof HTMLElement ? !!e.closest(
+      'button, a, input, textarea, select, option, [role="button"], [data-carousel-no-drag="true"]'
+    ) : !1, U = l(null), se = l(0), Pe = (e) => {
+      var t, r, n, o;
+      R && a.current && (Ne(e.target) || e.pointerType === "mouse" && e.button !== 0 || (e.preventDefault(), ne(!1), _.current = !0, X.current = !1, te.current = e.clientX, O.current = a.current.scrollLeft, re(!0), (r = (t = a.current).focus) == null || r.call(t), (o = (n = a.current).setPointerCapture) == null || o.call(n, e.pointerId)));
+    }, Se = (e) => {
+      if (!R || !_.current || (e.preventDefault(), !a.current)) return;
+      const r = e.clientX - te.current;
+      Math.abs(r) > 4 && (X.current = !0);
+      const n = O.current - r;
+      se.current = n, U.current == null && (U.current = window.requestAnimationFrame(() => {
+        U.current = null;
+        const o = a.current;
+        o && (o.scrollLeft = se.current, c && K("drag"));
+      }));
+    }, ce = (e) => {
+      var r;
+      const t = a.current;
+      if (_.current = !1, re(!1), t && e != null)
+        try {
+          (r = t.releasePointerCapture) == null || r.call(t, e);
+        } catch {
+        }
+      X.current && (H.current = !0, window.setTimeout(() => {
+        H.current = !1;
+      }, 0)), ne(!0), ye(), S();
+    }, Ce = (e) => {
+      R && _.current && ce(e.pointerId);
+    }, Me = (e) => {
+      R && _.current && ce(e.pointerId);
+    }, Ae = (e) => {
+      H.current && (e.preventDefault(), e.stopPropagation());
+    }, Te = (e) => {
+      he && (e.key === "ArrowLeft" ? (e.preventDefault(), B()) : e.key === "ArrowRight" && (e.preventDefault(), F()));
+    }, De = {
+      ...de ?? {},
+      "--carousel-gap": `${ve}px`,
+      "--carousel-slide-size": pe,
+      "--carousel-snap-align": h
+    };
+    return /* @__PURE__ */ ae("div", { className: C(d.root, ue), style: De, "aria-label": Q, children: [
+      me && s > 1 && /* @__PURE__ */ ae(We, { children: [
+        /* @__PURE__ */ I(
+          "button",
+          {
+            type: "button",
+            className: C(d.navButton, d.navPrev),
+            onClick: B,
+            disabled: !ke,
+            "aria-label": "Précédent",
+            children: ge ?? /* @__PURE__ */ I("span", { "aria-hidden": !0, children: "‹" })
+          }
+        ),
+        /* @__PURE__ */ I(
+          "button",
+          {
+            type: "button",
+            className: C(d.navButton, d.navNext),
+            onClick: F,
+            disabled: !Ie,
+            "aria-label": "Suivant",
+            children: xe ?? /* @__PURE__ */ I("span", { "aria-hidden": !0, children: "›" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ I(
+        "div",
+        {
+          ref: a,
+          className: C(
+            d.viewport,
+            R && d.dragEnabled,
+            Re && d.dragging,
+            le
+          ),
+          tabIndex: 0,
+          role: "region",
+          "aria-roledescription": "carousel",
+          "aria-label": Q,
+          onKeyDown: Te,
+          onPointerDown: Pe,
+          onPointerMove: Se,
+          onPointerUp: Ce,
+          onPointerCancel: Me,
+          onClickCapture: Ae,
+          children: g.map((e, t) => /* @__PURE__ */ I(
+            "div",
+            {
+              ref: (r) => {
+                x.current[t] = r;
+              },
+              className: C(d.slide, fe),
+              "data-carousel-slide": !0,
+              "data-carousel-clone": e.isClone ? "true" : "false",
+              "aria-label": `Item ${e.realIndex + 1} sur ${s}`,
+              "aria-current": e.realIndex === Le,
+              children: e.node
+            },
+            e.key
+          ))
+        }
+      )
+    ] });
+  }
+);
+export {
+  Ye as Carousel
+};

package/dist/components/list/list-controls/ListControls.js

@@ -5,6 +5,7 @@ import "../../icon-button/IconButton.js";
 import { Checkbox as _ } from "../../checkbox/Checkbox.js";
 import { Icon as a } from "../../icon/Icon.js";
 import "../../modal/Modal.js";
+import "../../carousel/Carousel.js";
 import "../../theme/ThemeContext.js";
 import '../../../styles/Size.css';import '../../../styles/ListControls.css';/* empty css                      */
 const u = "_list_1nihg_6", f = "_children_1nihg_29", g = "_selected_1nihg_43", k = "_reset_1nihg_47", i = {
@@ -12,10 +13,10 @@ const u = "_list_1nihg_6", f = "_children_1nihg_29", g = "_selected_1nihg_43", k
   children: f,
   selected: g,
   reset: k
-}, F = ({ listChildren: o, handleItemClick: d, selectedItems: h, onReset: t, labelButtonReset: r }) => /* @__PURE__ */ l("div", { className: i.list, children: [
-  /* @__PURE__ */ e("div", { children: o.map((n, m) => {
-    if (n.key == null) return null;
-    const s = n.key, c = h.includes(s);
+}, I = ({ listChildren: o, handleItemClick: d, selectedItems: h, onReset: n, labelButtonReset: r }) => /* @__PURE__ */ l("div", { className: i.list, children: [
+  /* @__PURE__ */ e("div", { children: o.map((t, m) => {
+    if (t.key == null) return null;
+    const s = t.key, c = h.includes(s);
     return /* @__PURE__ */ l(
       "div",
       {
@@ -28,22 +29,22 @@ const u = "_list_1nihg_6", f = "_children_1nihg_29", g = "_selected_1nihg_43", k
               onChange: () => d(s)
             }
           ),
-          /* @__PURE__ */ e("span", { children: n })
+          /* @__PURE__ */ e("span", { children: t })
         ]
       },
       m
     );
   }) }),
-  t && r && /* @__PURE__ */ e("div", { className: i.reset, children: /* @__PURE__ */ e(
+  n && r && /* @__PURE__ */ e("div", { className: i.reset, children: /* @__PURE__ */ e(
     p,
     {
       mode: "ghost",
       label: r,
-      onClick: t,
+      onClick: n,
       childrenLeft: /* @__PURE__ */ e(a, { icon: "FunnelX" })
     }
   ) })
 ] });
 export {
-  F as ListControls
+  I as ListControls
 };

package/dist/components/list/nested-list/NestedList.js

@@ -5,15 +5,16 @@ import "react";
 import "../../icon-button/IconButton.js";
 import { Icon as a } from "../../icon/Icon.js";
 import "../../modal/Modal.js";
+import "../../carousel/Carousel.js";
 import "../../theme/ThemeContext.js";
 import '../../../styles/Size.css';import '../../../styles/NestedList.css';/* empty css                      */
-const h = "_nestedlist_7rnd3_6", _ = "_reset_7rnd3_18", r = {
+const h = "_nestedlist_7rnd3_6", _ = "_reset_7rnd3_18", s = {
   nestedlist: h,
   reset: _
-}, k = ({ items: i, align: o = "right", onReset: e, children: n, labelButtonReset: s }) => /* @__PURE__ */ l("div", { className: r.nestedlist, children: [
-  i.map((m, d) => /* @__PURE__ */ t(c, { ...m, align: o ?? "right", children: n }, d)),
-  e && s && /* @__PURE__ */ t("div", { className: r.reset, children: /* @__PURE__ */ t(p, { mode: "ghost", label: s, onClick: e, childrenLeft: /* @__PURE__ */ t(a, { icon: "FunnelX" }) }) })
+}, y = ({ items: i, align: o = "right", onReset: e, children: m, labelButtonReset: r }) => /* @__PURE__ */ l("div", { className: s.nestedlist, children: [
+  i.map((n, d) => /* @__PURE__ */ t(c, { ...n, align: o ?? "right", children: m }, d)),
+  e && r && /* @__PURE__ */ t("div", { className: s.reset, children: /* @__PURE__ */ t(p, { mode: "ghost", label: r, onClick: e, childrenLeft: /* @__PURE__ */ t(a, { icon: "FunnelX" }) }) })
 ] });
 export {
-  k as NestedList
+  y as NestedList
 };

package/dist/components/list/nested-list/item/NestedListItem.js

@@ -5,6 +5,7 @@ import "../../../icon-button/IconButton.js";
 import { TagCounter as B } from "../../../tag-counter/TagCounter.js";
 import { Icon as l } from "../../../icon/Icon.js";
 import { Modal as L } from "../../../modal/Modal.js";
+import "../../../carousel/Carousel.js";
 import "../../../theme/ThemeContext.js";
 import '../../../../styles/Size.css';import '../../../../styles/NestedListItem.css';/* empty css                         */
 const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28", v = "_modal_2r2ga_34", s = {
@@ -12,7 +13,7 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
   items: $,
   textSmall: j,
   modal: v
-}, W = ({
+}, q = ({
   icon: a,
   title: h,
   numberSelect: i,
@@ -68,5 +69,5 @@ const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28
   ] });
 };
 export {
-  W as NestedListItem
+  q as NestedListItem
 };

package/dist/components/menu/Menu.js

@@ -4,6 +4,7 @@ import { Button as $ } from "../button/Button.js";
 import { IconButton as f } from "../icon-button/IconButton.js";
 import { Icon as N } from "../icon/Icon.js";
 import { Modal as W } from "../modal/Modal.js";
+import "../carousel/Carousel.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/Menu.css';/* empty css                   */
 const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21", D = "_close_11eub_25", q = "_menuButton_11eub_29", A = "_closeIcon_11eub_37", F = "_textEllipsis_11eub_47", G = "_pointer_11eub_52", J = "_fullImg_11eub_55", K = "_menuParams_11eub_61", Q = "_line_11eub_67", T = "_borderRadiusM_11eub_74", U = "_menuItem_11eub_78", X = "_longLogo_11eub_87", Y = "_flexVerticalBetweenStart_11eub_92", Z = "_flexHorizontalCenter_11eub_106", ee = "_flexVerticalBetweenCenter_11eub_121", e = {
@@ -24,7 +25,7 @@ const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21
   flexVerticalBetweenStart: Y,
   flexHorizontalCenter: Z,
   flexVerticalBetweenCenter: ee
-}, ae = ({ menuItems: s = [], menuParams: a = [], shortLogo: m, logo: h, isOpen: p, defaultOpen: I = !1, selectedId: u }) => {
+}, ue = ({ menuItems: s = [], menuParams: a = [], shortLogo: m, logo: h, isOpen: p, defaultOpen: I = !1, selectedId: u }) => {
   const [t, g] = c(I ?? !1), [b, x] = c(u ?? (s.length > 0 ? s[0].id : null)), w = M(null), [H, _] = c(!1), [L, C] = c(!1), [k, E] = c(null), [z, R] = c({}), V = M(null);
   B(() => {
     u != null && x(u);
@@ -115,5 +116,5 @@ const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21
   ] }) });
 };
 export {
-  ae as Menu
+  ue as Menu
 };

package/dist/components/panel/side-panel-header/SidePanelHeader.js

@@ -4,13 +4,14 @@ import "react";
 import { IconButton as i } from "../../icon-button/IconButton.js";
 import { Icon as t } from "../../icon/Icon.js";
 import "../../modal/Modal.js";
+import "../../carousel/Carousel.js";
 import "../../theme/ThemeContext.js";
 import '../../../styles/Size.css';import '../../../styles/SidePanelHeader.css';/* empty css                      */
 const c = "_sidePanelHeader_72g7b_6", m = "_buttonArrow_72g7b_13", h = "_title_72g7b_20", r = {
   sidePanelHeader: c,
   buttonArrow: m,
   title: h
-}, v = ({
+}, z = ({
   title: s,
   icon: o,
   onClickBack: L,
@@ -72,5 +73,5 @@ const c = "_sidePanelHeader_72g7b_6", m = "_buttonArrow_72g7b_13", h = "_title_7
   )
 ] });
 export {
-  v as SidePanelHeader
+  z as SidePanelHeader
 };

package/dist/components/select/Select.js

@@ -5,6 +5,7 @@ import { Input as G } from "../input/Input.js";
 import { IconButton as H } from "../icon-button/IconButton.js";
 import { Icon as _ } from "../icon/Icon.js";
 import { Modal as J } from "../modal/Modal.js";
+import "../carousel/Carousel.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/Select.css';/* empty css                   */
 const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_133eb_78", Z = "_selectList_133eb_82", O = "_modal_133eb_91", I = "_itemLabel_133eb_98", ee = "_searchWrapper_133eb_103", te = "_noResults_133eb_109", f = {
@@ -16,7 +17,7 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
   itemLabel: I,
   searchWrapper: ee,
   noResults: te
-}, de = ({
+}, fe = ({
   selected: k,
   size: g = "m",
   listItem: h,
@@ -211,5 +212,5 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
   ] });
 };
 export {
-  de as Select
+  fe as Select
 };

package/dist/components/select-filter-input-tags/SelectFilterInputTags.js

@@ -1,24 +1,25 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import "../button/Button.js";
 import "react";
 import { Input as a } from "../input/Input.js";
 import "../icon-button/IconButton.js";
 import "../modal/Modal.js";
+import "../carousel/Carousel.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/SelectFilterInputTags.css';/* empty css                   */
 const c = "_listTagSelect_2v3fb_6", p = {
   listTagSelect: c
-}, v = ({ children: s, inputValue: l, handleInputChange: o, handleKeyDown: i }) => /* @__PURE__ */ e("div", { className: p.listTagSelect, children: /* @__PURE__ */ r("div", { children: [
+}, x = ({ children: s, inputValue: o, handleInputChange: r, handleKeyDown: i }) => /* @__PURE__ */ e("div", { className: p.listTagSelect, children: /* @__PURE__ */ l("div", { children: [
   s,
   /* @__PURE__ */ e("div", { className: "flexAutoSize", children: /* @__PURE__ */ e(
     a,
     {
       type: "text",
-      value: l,
+      value: o,
       onKeyDown: (t) => {
         t.key === "Enter" && i && i(t);
       },
-      onChange: (t) => o(t.target.value),
+      onChange: (t) => r(t.target.value),
       autoFocus: !0,
       placeholder: "",
       status: "ghost",
@@ -27,5 +28,5 @@ const c = "_listTagSelect_2v3fb_6", p = {
   ) })
 ] }) });
 export {
-  v as SelectFilterInputTags
+  x as SelectFilterInputTags
 };

package/dist/components/select-multi-items/SelectMultiItems.js

@@ -5,13 +5,14 @@ import { Button as M } from "../button/Button.js";
 import "../icon-button/IconButton.js";
 import { TagCounter as w } from "../tag-counter/TagCounter.js";
 import { Modal as y } from "../modal/Modal.js";
+import "../carousel/Carousel.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/SelectMultiItems.css';/* empty css                   */
 const N = "_relative_w7e9a_6", R = "_tagCounter_w7e9a_10", b = "_modal_w7e9a_18", r = {
   relative: N,
   tagCounter: R,
   modal: b
-}, $ = ({
+}, q = ({
   label: i,
   iconButton: l,
   selectedCount: t = 0,
@@ -40,5 +41,5 @@ const N = "_relative_w7e9a_6", R = "_tagCounter_w7e9a_10", b = "_modal_w7e9a_18"
   ] });
 };
 export {
-  $ as SelectMultiItems
+  q as SelectMultiItems
 };

package/dist/components/switch/Switch.js

@@ -1,9 +1,10 @@
-import { jsxs as m, jsx as c } from "react/jsx-runtime";
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
 import { useState as $, useEffect as b } from "react";
 import "../button/Button.js";
 import { IconButton as k } from "../icon-button/IconButton.js";
 import { Icon as g } from "../icon/Icon.js";
 import "../modal/Modal.js";
+import "../carousel/Carousel.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/Switch.css';/* empty css                   */
 const y = "_slider_1mxgk_21", I = "_s_1mxgk_6", N = "_m_1mxgk_58", S = "_l_1mxgk_75", j = "_xl_1mxgk_92", B = "_disabled_1mxgk_110", E = "_wrapper_1mxgk_121", R = "_button_1mxgk_136", T = "_active_1mxgk_145", t = {
@@ -17,7 +18,7 @@ const y = "_slider_1mxgk_21", I = "_s_1mxgk_6", N = "_m_1mxgk_58", S = "_l_1mxgk
   wrapper: E,
   button: R,
   active: T
-}, K = ({
+}, L = ({
   size: i = "m",
   variant: w = "classic",
   checked: l,
@@ -27,14 +28,14 @@ const y = "_slider_1mxgk_21", I = "_s_1mxgk_6", N = "_m_1mxgk_58", S = "_l_1mxgk
   defaultChecked: h = !1,
   icons: a = { left: "Table", right: "Rows" }
 }) => {
-  const o = l !== void 0, [p, n] = $(h), u = o ? l : p, d = (e) => {
-    o || n(e), s == null || s(e);
+  const o = l !== void 0, [p, m] = $(h), u = o ? l : p, d = (e) => {
+    o || m(e), s == null || s(e);
   }, v = (e) => {
     const f = e.target.checked;
-    r || (o || n(f), s == null || s(f));
+    r || (o || m(f), s == null || s(f));
   };
   b(() => {
-    o && n(l);
+    o && m(l);
   }, [l, o]);
   const x = () => {
     switch (i) {
@@ -50,8 +51,8 @@ const y = "_slider_1mxgk_21", I = "_s_1mxgk_6", N = "_m_1mxgk_58", S = "_l_1mxgk
         return 18;
     }
   };
-  return w === "icon" ? /* @__PURE__ */ m("div", { className: `${t.switch} ${t[i]}`, children: [
-    /* @__PURE__ */ m("div", { className: `${t.wrapper} ${r ? t.disabled : ""}`, children: [
+  return w === "icon" ? /* @__PURE__ */ n("div", { className: `${t.switch} ${t[i]}`, children: [
+    /* @__PURE__ */ n("div", { className: `${t.wrapper} ${r ? t.disabled : ""}`, children: [
       /* @__PURE__ */ c(
         k,
         {
@@ -74,7 +75,7 @@ const y = "_slider_1mxgk_21", I = "_s_1mxgk_6", N = "_m_1mxgk_58", S = "_l_1mxgk
       )
     ] }),
     _
-  ] }) : /* @__PURE__ */ m("div", { className: `${t.switch} ${t[i]} ${r ? t.disabled : ""}`, children: [
+  ] }) : /* @__PURE__ */ n("div", { className: `${t.switch} ${t[i]} ${r ? t.disabled : ""}`, children: [
     /* @__PURE__ */ c(
       "input",
       {
@@ -89,5 +90,5 @@ const y = "_slider_1mxgk_21", I = "_s_1mxgk_6", N = "_m_1mxgk_58", S = "_l_1mxgk
   ] });
 };
 export {
-  K as Switch
+  L as Switch
 };

package/dist/main.d.ts

@@ -31,4 +31,5 @@ export { EditableSelect } from './components/editable-select/EditableSelect';
 export { Toast } from './components/toast/Toast';
 export { DragAndDrop } from './components/drag-and-drop/DragAndDrop';
 export { Loading } from './components/loading/Loading';
+export { Carousel } from './components/carousel/Carousel';
 export { ThemeProvider, useTheme } from './components/theme/ThemeContext';

package/dist/main.js

@@ -2,7 +2,7 @@ import { Button as t } from "./components/button/Button.js";
 import { ButtonControlledScroll as p } from "./components/buttonControledScroll/ButtonControlledScroll.js";
 import { Input as f } from "./components/input/Input.js";
 import { Tabs as n } from "./components/tabs/Tabs.js";
-import { IconButton as a } from "./components/icon-button/IconButton.js";
+import { IconButton as i } from "./components/icon-button/IconButton.js";
 import { Tag as c } from "./components/tag/Tag.js";
 import { Title as u } from "./components/title/Title.js";
 import { TagCounter as I } from "./components/tag-counter/TagCounter.js";
@@ -29,8 +29,9 @@ import { EditableField as to } from "./components/editable-field/EditableField.j
 import { EditableSelect as po } from "./components/editable-select/EditableSelect.js";
 import { Toast as fo } from "./components/toast/Toast.js";
 import { DragAndDrop as no } from "./components/drag-and-drop/DragAndDrop.js";
-import { Loading as ao } from "./components/loading/Loading.js";
-import { ThemeProvider as so, useTheme as uo } from "./components/theme/ThemeContext.js";
+import { Loading as io } from "./components/loading/Loading.js";
+import { Carousel as so } from "./components/carousel/Carousel.js";
+import { ThemeProvider as To, useTheme as Io } from "./components/theme/ThemeContext.js";
 import './styles/Size.css';/* empty css               */
 export {
   P as Accordion,
@@ -39,16 +40,17 @@ export {
   p as ButtonControlledScroll,
   B as Calendar,
   N as Card,
+  so as Carousel,
   C as Checkbox,
   no as DragAndDrop,
   to as EditableField,
   po as EditableSelect,
   v as Icon,
-  a as IconButton,
+  i as IconButton,
   f as Input,
   ro as InputLabel,
   O as ListControls,
-  ao as Loading,
+  io as Loading,
   H as Menu,
   q as Modal,
   R as NestedList,
@@ -62,9 +64,9 @@ export {
   n as Tabs,
   c as Tag,
   I as TagCounter,
-  so as ThemeProvider,
+  To as ThemeProvider,
   u as Title,
   fo as Toast,
   g as Tooltip,
-  uo as useTheme
+  Io as useTheme
 };

package/dist/styles/Carousel.css

@@ -0,0 +1 @@
+._root_1kths_1{position:relative;width:100%}._viewport_1kths_6{display:flex;gap:var(--carousel-gap, 12px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px;scrollbar-width:none}._viewport_1kths_6::-webkit-scrollbar{display:none}._dragEnabled_1kths_22{cursor:grab;touch-action:pan-y}._dragging_1kths_27{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;-webkit-user-select:none;user-select:none}._slide_1kths_34{flex:0 0 var(--carousel-slide-size, 280px);width:var(--carousel-slide-size, 280px);scroll-snap-align:var(--carousel-snap-align, start);min-width:0}._navButton_1kths_41{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:36px;height:36px;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#ffffffeb;box-shadow:0 2px 8px #00000026;cursor:pointer;-webkit-user-select:none;user-select:none}._navButton_1kths_41:disabled{opacity:.4;cursor:not-allowed}._navPrev_1kths_63{left:8px}._navNext_1kths_67{right:8px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.2.15",
+  "version": "1.2.16",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",