@situaction/traq-ui-ste 1.1.9 → 1.1.11

package/dist/components/accordion/Accordion.js

@@ -1,8 +1,8 @@
 import { jsx as c } from "react/jsx-runtime";
 import { AccordionItem as i } from "./item/AccordionItem.js";
-import '../../styles/Accordion.css';const t = "_accordion_1s28g_6", d = {
+import '../../styles/Accordion.css';const t = "_accordion_hz3a1_6", a = {
   accordion: t
-}, l = ({ items: n, type: r = "block" }) => /* @__PURE__ */ c("div", { className: d.accordion, children: n.map((o, e) => /* @__PURE__ */ c(
+}, l = ({ items: n, type: r = "block" }) => /* @__PURE__ */ c("div", { className: a.accordion, children: n.map((o, e) => /* @__PURE__ */ c(
   i,
   {
     header: o.header,

package/dist/components/buttonControledScroll/ButtonControlledScroll.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+
+export interface ButtonControlledScrollProps {
+    items: React.ReactNode[];
+    iconLeft: ReactNode;
+    iconRight: ReactNode;
+}
+export declare const ButtonControlledScroll: FC<ButtonControlledScrollProps>;

package/dist/components/buttonControledScroll/ButtonControlledScroll.js

@@ -0,0 +1,31 @@
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import { useRef as m, useState as s, useEffect as p } from "react";
+import '../../styles/ButtonControlledScroll.css';const R = "_wrapper_wftna_1", S = "_container_wftna_11", w = "_btn_wftna_22", C = "_btnLeft_wftna_39", N = "_btnRight_wftna_44", n = {
+  wrapper: R,
+  container: S,
+  btn: w,
+  btnLeft: C,
+  btnRight: N
+}, $ = ({ items: a, iconLeft: i, iconRight: f }) => {
+  const e = m(null), [_, b] = s(!1), [h, u] = s(!1), c = () => {
+    const t = e.current;
+    t && (b(t.scrollLeft > 0), u(t.scrollLeft + t.clientWidth < t.scrollWidth));
+  }, o = (t) => {
+    const r = e.current;
+    if (!r) return;
+    const L = t === "left" ? -100 : 100;
+    r.scrollBy({ left: L, behavior: "smooth" });
+  };
+  return p(() => {
+    const t = e.current;
+    if (t)
+      return c(), t.addEventListener("scroll", c), () => t.removeEventListener("scroll", c);
+  }, []), /* @__PURE__ */ d("div", { className: `${n.wrapper}`, children: [
+    _ && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnLeft}`, onClick: () => o("left"), children: i }),
+    /* @__PURE__ */ l("div", { className: `${n.container}`, ref: e, children: a.map((t, r) => /* @__PURE__ */ l("div", { className: n.item, children: t }, r)) }),
+    h && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnRight}`, onClick: () => o("right"), children: f })
+  ] });
+};
+export {
+  $ as ButtonControlledScroll
+};

package/dist/components/tag/Tag.js

@@ -1,58 +1,54 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { useEffect as u } from "react";
-import { IconButton as z } from "../icon-button/IconButton.js";
-import '../../styles/Tag.css';const v = "_tag_19tve_6", m = "_label_19tve_63", x = "_flexHorizontalCenter_19tve_67", f = "_flexHorizontal_19tve_67", e = {
-  tag: v,
-  "tag-children": "_tag-children_19tve_16",
-  "tag-size-xl": "_tag-size-xl_19tve_23",
-  "tag-size-xl-round": "_tag-size-xl-round_19tve_27",
-  "tag-size-l": "_tag-size-l_19tve_33",
-  "tag-size-l-round": "_tag-size-l-round_19tve_37",
-  "tag-size-m": "_tag-size-m_19tve_43",
-  "tag-size-m-round": "_tag-size-m-round_19tve_47",
-  "tag-size-s": "_tag-size-s_19tve_53",
-  "tag-size-s-round": "_tag-size-s-round_19tve_57",
-  label: m,
-  flexHorizontalCenter: x,
-  flexHorizontal: f
-}, o = ["light", "dark", "grey", "blue-grey", "blue", "blue-situaction", "purple", "pink", "gold", "brown", "emerald"], $ = ({
-  label: l,
-  color: t,
-  deletable: s = !1,
-  size: i = "m",
-  children: n,
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useEffect as d } from "react";
+import '../../styles/Tag.css';const z = "_tag_1yjvr_6", u = "_icon_1yjvr_16", v = "_label_1yjvr_68", y = "_flexHorizontalCenter_1yjvr_72", x = "_flexHorizontal_1yjvr_72", t = {
+  tag: z,
+  icon: u,
+  "tag-children": "_tag-children_1yjvr_21",
+  "tag-size-xl": "_tag-size-xl_1yjvr_28",
+  "tag-size-xl-round": "_tag-size-xl-round_1yjvr_32",
+  "tag-size-l": "_tag-size-l_1yjvr_38",
+  "tag-size-l-round": "_tag-size-l-round_1yjvr_42",
+  "tag-size-m": "_tag-size-m_1yjvr_48",
+  "tag-size-m-round": "_tag-size-m-round_1yjvr_52",
+  "tag-size-s": "_tag-size-s_1yjvr_58",
+  "tag-size-s-round": "_tag-size-s-round_1yjvr_62",
+  label: v,
+  flexHorizontalCenter: y,
+  flexHorizontal: x
+}, s = ["light", "dark", "grey", "blue-grey", "blue", "blue-situaction", "purple", "pink", "gold", "brown", "emerald"], f = ({
+  label: n,
+  color: e,
+  deletable: o = !1,
+  size: l = "m",
+  children: i,
   onClick: r
 }) => {
-  u(() => {
-    t && !o.includes(t) && console.warn(`Warning: The color "${t}" is not a valid option. Expected one of: ${o.join(", ")}.`);
-  }, [t]);
+  d(() => {
+    e && !s.includes(e) && console.warn(`Warning: The color "${e}" is not a valid option. Expected one of: ${s.join(", ")}.`);
+  }, [e]);
   const _ = [
-    e.tag,
-    n && !l && e[`tag-size-${i}-round`],
-    e[`tag-size-${i}`],
-    e.flexHorizontalCenter
+    t.tag,
+    i && !n && t[`tag-size-${l}-round`],
+    t[`tag-size-${l}`],
+    t.flexHorizontalCenter
   ].join(" "), g = {
-    "--dynamic-background": t && o.includes(t) ? `var(--color-${t}-200)` : "var(--color-blue-situaction-200)",
-    "--dynamic-color-text": t && o.includes(t) ? `var(--color-${t}-950)` : "var(--color-blue-situaction-950)"
-  }, c = {
-    color: t ? `var(--color${t}-950)` : "var(--color-blue-situaction-950)"
+    "--dynamic-background": e && s.includes(e) ? `var(--color-${e}-200)` : "var(--color-blue-situaction-200)",
+    "--dynamic-color-text": e && s.includes(e) ? `var(--color-${e}-950)` : "var(--color-blue-situaction-950)"
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "div",
     {
       className: _,
       style: g,
       children: [
-        n && /* @__PURE__ */ a("div", { className: `${e.flexHorizontalCenter} ${e["tag-children"]}`, children: n }),
-        l && /* @__PURE__ */ a("label", { className: `${e.flexHorizontal} ${e.label}`, children: l }),
-        s && /* @__PURE__ */ a(z, { mode: "ghost", size: "s", onClick: () => r, children: /* @__PURE__ */ a(
+        i && /* @__PURE__ */ a("div", { className: `${t.flexHorizontalCenter} ${t["tag-children"]}`, children: i }),
+        n && /* @__PURE__ */ a("label", { className: `${t.flexHorizontal} ${t.label}`, children: n }),
+        o && /* @__PURE__ */ a("div", { className: t.icon, onClick: () => r == null ? void 0 : r(), children: /* @__PURE__ */ a(
           "svg",
           {
-            style: c,
             xmlns: "http://www.w3.org/2000/svg",
-            width: "9",
-            height: "9",
-            fill: "currentColor",
+            width: "10",
+            height: "10",
             viewBox: "0 0 256 256",
             children: /* @__PURE__ */ a(
               "path",
@@ -67,5 +63,5 @@ import '../../styles/Tag.css';const v = "_tag_19tve_6", m = "_label_19tve_63", x
   );
 };
 export {
-  $ as Tag
+  f as Tag
 };

package/dist/main.d.ts

@@ -1,5 +1,6 @@
 /** Export components **/
 export { Button } from './components/button/Button';
+export { ButtonControlledScroll } from './components/buttonControledScroll/ButtonControlledScroll';
 export { Input } from './components/input/Input';
 export { Tabs } from './components/tabs/Tabs';
 export { IconButton } from './components/icon-button/IconButton';

package/dist/main.js

@@ -1,33 +1,35 @@
 import { Button as e } from "./components/button/Button.js";
-import { Input as m } from "./components/input/Input.js";
-import { Tabs as x } from "./components/tabs/Tabs.js";
-import { IconButton as n } from "./components/icon-button/IconButton.js";
-import { Tag as T } from "./components/tag/Tag.js";
-import { Title as d } from "./components/title/Title.js";
-import { TagCounter as u } from "./components/tag-counter/TagCounter.js";
-import { Checkbox as C } from "./components/checkbox/Checkbox.js";
-import { Tooltip as I } from "./components/tooltip/Tooltip.js";
-import { Select as g } from "./components/select/Select.js";
-import { Calendar as A } from "./components/calendar/Calendar.js";
-import { Accordion as k } from "./components/accordion/Accordion.js";
-import { AccordionItem as P } from "./components/accordion/item/AccordionItem.js";
-import { Card as j } from "./components/card/Card.js";
-import { ThemeProvider as w, useTheme as y } from "./components/theme/ThemeContext.js";
+import { ButtonControlledScroll as m } from "./components/buttonControledScroll/ButtonControlledScroll.js";
+import { Input as x } from "./components/input/Input.js";
+import { Tabs as n } from "./components/tabs/Tabs.js";
+import { IconButton as l } from "./components/icon-button/IconButton.js";
+import { Tag as a } from "./components/tag/Tag.js";
+import { Title as u } from "./components/title/Title.js";
+import { TagCounter as C } from "./components/tag-counter/TagCounter.js";
+import { Checkbox as B } from "./components/checkbox/Checkbox.js";
+import { Tooltip as b } from "./components/tooltip/Tooltip.js";
+import { Select as s } from "./components/select/Select.js";
+import { Calendar as S } from "./components/calendar/Calendar.js";
+import { Accordion as v } from "./components/accordion/Accordion.js";
+import { AccordionItem as j } from "./components/accordion/item/AccordionItem.js";
+import { Card as w } from "./components/card/Card.js";
+import { ThemeProvider as z, useTheme as D } from "./components/theme/ThemeContext.js";
 import './styles/main.css';export {
-  k as Accordion,
-  P as AccordionItem,
+  v as Accordion,
+  j as AccordionItem,
   e as Button,
-  A as Calendar,
-  j as Card,
-  C as Checkbox,
-  n as IconButton,
-  m as Input,
-  g as Select,
-  x as Tabs,
-  T as Tag,
-  u as TagCounter,
-  w as ThemeProvider,
-  d as Title,
-  I as Tooltip,
-  y as useTheme
+  m as ButtonControlledScroll,
+  S as Calendar,
+  w as Card,
+  B as Checkbox,
+  l as IconButton,
+  x as Input,
+  s as Select,
+  n as Tabs,
+  a as Tag,
+  C as TagCounter,
+  z as ThemeProvider,
+  u as Title,
+  b as Tooltip,
+  D as useTheme
 };

package/dist/styles/Accordion.css

@@ -1 +1 @@
-._accordion_1s28g_6{overflow:visible;border-radius:.375rem;width:100%;overflow-y:auto;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:.625rem}
+._accordion_hz3a1_6{overflow:visible;border-radius:.375rem;width:100%;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:.625rem}

package/dist/styles/ButtonControlledScroll.css

@@ -0,0 +1 @@
+._wrapper_wftna_1{position:relative;display:flex;align-items:center;width:300px;-webkit-user-select:none;user-select:none}._wrapper_wftna_1 label{-webkit-user-select:none;user-select:none}._wrapper_wftna_1 ._container_wftna_11{display:flex;overflow-x:auto;scroll-behavior:smooth;gap:10px;padding:10px;width:100%}._wrapper_wftna_1 ._container_wftna_11::-webkit-scrollbar{display:none}._wrapper_wftna_1 ._btn_wftna_22{transition:.3s;display:flex;justify-content:center;align-items:center;width:30px;height:30px;padding:var(--spacing-xs-5);border-radius:50%;border:1px solid var(--button-tertiary-default-border);background-color:var(--button-primary-default-icon);position:absolute;cursor:pointer}._wrapper_wftna_1 ._btn_wftna_22:hover{background-color:var(--background-tooltip)}._wrapper_wftna_1 ._btnLeft_wftna_39{left:3px;top:50%;transform:translateY(-50%)}._wrapper_wftna_1 ._btnRight_wftna_44{right:3px;top:50%;transform:translateY(-50%)}

package/dist/styles/Tag.css

@@ -1 +1 @@
-._tag_19tve_6{color:var(--dynamic-color-text);background-color:var(--dynamic-background);border-radius:50px;line-height:normal;gap:.25rem;font-weight:600;letter-spacing:.84px}._tag-children_19tve_16{color:var(--dynamic-color-text);border-radius:50px;min-width:16px;min-height:16px;aspect-ratio:1/1}._tag-size-xl_19tve_23{padding:.5rem .75rem;font-size:1.125em}._tag-size-xl-round_19tve_27{padding:.5rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-l_19tve_33{padding:.375rem .625rem;font-size:1em}._tag-size-l-round_19tve_37{padding:.375rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-m_19tve_43{padding:.25rem .5rem;font-size:.875em}._tag-size-m-round_19tve_47{padding:.25rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-s_19tve_53{padding:.1875rem .5rem;font-size:.75em}._tag-size-s-round_19tve_57{padding:.125rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag_19tve_6 ._label_19tve_63{white-space:nowrap}._flexHorizontalCenter_19tve_67{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal_19tve_67{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
+._tag_1yjvr_6{color:var(--dynamic-color-text);background-color:var(--dynamic-background);border-radius:50px;line-height:normal;gap:.25rem;font-weight:600;letter-spacing:.84px}._tag_1yjvr_6 ._icon_1yjvr_16{display:flex;cursor:pointer;fill:var(--dynamic-color-text)!important}._tag-children_1yjvr_21{color:var(--dynamic-color-text);border-radius:50px;min-width:16px;min-height:16px;aspect-ratio:1/1}._tag-size-xl_1yjvr_28{padding:.5rem .75rem;font-size:1.125em}._tag-size-xl-round_1yjvr_32{padding:.5rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-l_1yjvr_38{padding:.375rem .625rem;font-size:1em}._tag-size-l-round_1yjvr_42{padding:.375rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-m_1yjvr_48{padding:.25rem .5rem;font-size:.875em}._tag-size-m-round_1yjvr_52{padding:.25rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-s_1yjvr_58{padding:.1875rem .5rem;font-size:.75em}._tag-size-s-round_1yjvr_62{padding:.125rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag_1yjvr_6 ._label_1yjvr_68{white-space:nowrap}._flexHorizontalCenter_1yjvr_72{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal_1yjvr_72{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}

package/package.json

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