@situaction/traq-ui-ste 1.1.25 → 1.1.26

package/dist/components/tabs/Tabs.d.ts

@@ -11,6 +11,7 @@ export interface TabsProps {
     position?: 'center' | 'right' | 'left';
     /** Callback function to handle tab selection, receiving the selected tab's label */
     onTabSelect: (selectedItem: string | ReactNode) => void;
+    fullWidth?: boolean;
 }
 /**
  * Tabs component that allows tab navigation with text, icons, or buttons.

package/dist/components/tabs/Tabs.js

@@ -1,76 +1,80 @@
-import { jsxs as v, jsx as c } from "react/jsx-runtime";
-import { useState as m, useRef as _, useEffect as d, useLayoutEffect as C } from "react";
+import { jsxs as H, jsx as a } from "react/jsx-runtime";
+import { useState as u, useRef as s, useLayoutEffect as $ } from "react";
 import '../../styles/index.css';import '../../styles/Tabs.css';/* empty css                    */
-import { Button as N } from "../button/Button.js";
-import { IconButton as $ } from "../icon-button/IconButton.js";
-const p = "_underline_12jm7_57", n = {
-  "tab-container": "_tab-container_12jm7_23",
-  "tab-container-button": "_tab-container-button_12jm7_27",
-  "tab-container-icon": "_tab-container-icon_12jm7_32",
-  "tab-container-text": "_tab-container-text_12jm7_32",
-  "tab-items": "_tab-items_12jm7_35",
-  "tab-items-button": "_tab-items-button_12jm7_39",
-  "selected-button": "_selected-button_12jm7_44",
-  "selected-text": "_selected-text_12jm7_50",
+import { Button as C } from "../button/Button.js";
+import { IconButton as N } from "../icon-button/IconButton.js";
+const p = "_underline_1twz4_63", n = {
+  "tab-container": "_tab-container_1twz4_23",
+  "tab-container-button": "_tab-container-button_1twz4_27",
+  "tab-container-icon": "_tab-container-icon_1twz4_32",
+  "tab-container-text": "_tab-container-text_1twz4_32",
+  "tab-items": "_tab-items_1twz4_35",
+  "tab-items-button": "_tab-items-button_1twz4_39",
+  "tab-full-width": "_tab-full-width_1twz4_44",
+  "selected-button": "_selected-button_1twz4_50",
+  "selected-text": "_selected-text_1twz4_56",
   underline: p,
-  "flexHorizontal-center": "_flexHorizontal-center_12jm7_65",
-  "flexHorizontal-left": "_flexHorizontal-left_12jm7_71",
-  "flexHorizontal-right": "_flexHorizontal-right_12jm7_77"
-}, E = ({ listItems: o, type: l, onTabSelect: x, defaultActiveTab: a = 0, position: h = "left" }) => {
-  const [r, b] = m(a), [j, g] = m({}), i = _(null), z = _(null), s = _(new Array(o.length).fill(null));
-  d(() => {
-    s.current = new Array(o.length).fill(null);
-  }, [o.length]);
-  const f = (t) => {
-    b(t), x(o[t]);
-  }, R = (t) => {
-    if (i.current && t) {
-      const e = t.getBoundingClientRect(), u = i.current.getBoundingClientRect();
-      g({
-        left: `${e.left - u.left}px`,
+  "flexHorizontal-center": "_flexHorizontal-center_1twz4_71",
+  "flexHorizontal-left": "_flexHorizontal-left_1twz4_77",
+  "flexHorizontal-right": "_flexHorizontal-right_1twz4_83"
+}, A = ({
+  listItems: i,
+  type: o,
+  onTabSelect: f,
+  defaultActiveTab: d = 0,
+  position: m = "left",
+  fullWidth: z = !1
+}) => {
+  const [l, w] = u(d), [x, h] = u({}), c = s(null), g = s(null), _ = s([]), b = (t) => {
+    w(t), f(i[t]);
+  }, v = (t) => {
+    if (c.current && t) {
+      const e = t.getBoundingClientRect(), r = c.current.getBoundingClientRect();
+      h({
+        left: `${e.left - r.left}px`,
         width: `${e.width}px`
       });
     }
-  }, H = [
-    n[`flexHorizontal-${h}`],
-    l === "button" ? n["tab-items-button"] : n["tab-items"]
+  }, R = [
+    n[`flexHorizontal-${m}`],
+    o === "button" ? n["tab-items-button"] : n["tab-items"]
   ].filter(Boolean).join(" ");
-  return C(() => {
-    const t = s.current[r];
-    t && R(t);
-  }, [r, o.length]), d(() => {
-    b(a);
-  }, [a]), /* @__PURE__ */ v("div", { className: `tab ${n["tab-container"]} ${n[`tab-container-${l}`]}`, ref: i, children: [
-    /* @__PURE__ */ c("div", { className: H, children: o.map((t, e) => /* @__PURE__ */ c(
+  return $(() => {
+    const t = _.current[l];
+    t && requestAnimationFrame(() => {
+      v(t);
+    });
+  }, [l, i.length]), /* @__PURE__ */ H("div", { className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]} ${z && n["tab-full-width"]}`, ref: c, children: [
+    /* @__PURE__ */ a("div", { className: R, children: i.map((t, e) => /* @__PURE__ */ a(
       "div",
       {
-        ref: (u) => s.current[e] = u,
-        className: l === "button" && e === r ? n["selected-button"] : "",
-        children: l === "icon" ? /* @__PURE__ */ c(
-          $,
+        ref: (r) => _.current[e] = r,
+        className: o === "button" && e === l ? n["selected-button"] : "",
+        children: o === "icon" ? /* @__PURE__ */ a(
+          N,
           {
             mode: "icon",
             size: "s",
-            selected: e === r,
-            onClick: () => f(e),
+            selected: e === l,
+            onClick: () => b(e),
             children: t
           }
-        ) : /* @__PURE__ */ c("div", { className: e === r ? n["selected-text"] : void 0, children: /* @__PURE__ */ c(
-          N,
+        ) : /* @__PURE__ */ a("div", { className: e === l ? n["selected-text"] : void 0, children: /* @__PURE__ */ a(
+          C,
           {
             size: "s",
             label: t,
-            mode: l === "text" ? "text" : "ghost",
-            selected: e === r,
-            onClick: () => f(e)
+            mode: o === "text" ? "text" : "ghost",
+            selected: e === l,
+            onClick: () => b(e)
           }
         ) })
       },
       e
     )) }),
-    l !== "button" && /* @__PURE__ */ c("div", { ref: z, className: n.underline, style: j })
+    o !== "button" && /* @__PURE__ */ a("div", { ref: g, className: n.underline, style: x })
   ] });
 };
 export {
-  E as Tabs
+  A as Tabs
 };

package/dist/styles/Tabs.css

@@ -1 +1 @@
-._tab-container_12jm7_23{position:relative;line-height:1.25rem}._tab-container-button_12jm7_27{border-radius:.375rem;border:1px solid var(--tabs-button-border);background:var(--tabs-button-background)}._tab-container-icon_12jm7_32,._tab-container-text_12jm7_32{border-bottom:1px solid var(--tabs-line-border)}._tab-items_12jm7_35{gap:2.25rem;padding:.625rem .125rem}._tab-items-button_12jm7_39{gap:.25rem;padding:.125rem}._selected-button_12jm7_44{border:1px solid var(--button-tertiary-default-border);background:var(--tabs-button-background-button);border-radius:.25rem}._selected-text_12jm7_50>button{font-weight:600!important}._selected-text_12jm7_50>button:hover{background-color:transparent!important}._underline_12jm7_57{position:absolute;bottom:0;height:2px;background-color:var(--tabs-cell-active-border);transition:all .3s ease}._flexHorizontal-center_12jm7_65{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal-left_12jm7_71{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}._flexHorizontal-right_12jm7_77{display:flex;justify-content:flex-end;align-items:center;flex-direction:row}
+._tab-container_1twz4_23{position:relative;line-height:1.25rem}._tab-container-button_1twz4_27{border-radius:.375rem;border:1px solid var(--tabs-button-border);background:var(--tabs-button-background)}._tab-container-icon_1twz4_32,._tab-container-text_1twz4_32{border-bottom:1px solid var(--tabs-line-border)}._tab-items_1twz4_35{gap:2.25rem;padding:.625rem .125rem}._tab-items-button_1twz4_39{gap:.25rem;padding:.125rem}._tab-full-width_1twz4_44{width:100%;display:flex;justify-content:center}._selected-button_1twz4_50{border:1px solid var(--button-tertiary-default-border);background:var(--tabs-button-background-button);border-radius:.25rem}._selected-text_1twz4_56>button{font-weight:600!important}._selected-text_1twz4_56>button:hover{background-color:transparent!important}._underline_1twz4_63{position:absolute;bottom:0;height:2px;background-color:var(--tabs-cell-active-border);transition:all .3s ease}._flexHorizontal-center_1twz4_71{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal-left_1twz4_77{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}._flexHorizontal-right_1twz4_83{display:flex;justify-content:flex-end;align-items:center;flex-direction:row}

package/package.json

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