@wishket/design-system 1.16.5 → 1.16.6

package/dist/Components/Navigations/TextTab/TextTab.parts.js

@@ -1,10 +1,10 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as r,createContext as n,useRef as a,Children as o,useState as s,useEffect as l}from"react";import{twMerge as i,twJoin as c}from"tailwind-merge";import{Typography as u}from"../../Base/Typography/Typography.js";import{Box as d}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{SystemIcon as m}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{CountBadge as f}from"../../DataDisplays/CountBadge/CountBadge.js";import{Divider as b}from"../../DataDisplays/Divider/Divider.js";function p(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function y(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){p(e,t,r[t])}))}return e}function g(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const h=/*#__PURE__*/n({barColor:"bg-w-gray-900",activeTab:0,currentActiveTab:0,isFit:!0,hasPadding:!1,isFull:!1,handleTabClick:e=>{}}),x=({children:t,currentActiveTab:r=0,isFit:n=!0,hasPadding:a=!1,isFull:o=!1,barColor:i="bg-w-gray-900",onChange:c})=>{const[u,d]=s(r);return l((()=>{r!==u&&d(r);
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as r,createContext as n,useRef as a,Children as o,useState as s,useEffect as i}from"react";import{twMerge as l,twJoin as c}from"tailwind-merge";import{Typography as u}from"../../Base/Typography/Typography.js";import{Box as d}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{SystemIcon as m}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{CountBadge as f}from"../../DataDisplays/CountBadge/CountBadge.js";import{Divider as b}from"../../DataDisplays/Divider/Divider.js";function p(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function y(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){p(e,t,r[t])}))}return e}function h(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const g=/*#__PURE__*/n({barColor:"bg-w-gray-900",activeTab:0,currentActiveTab:0,isFit:!0,hasPadding:!1,isFull:!1,handleTabClick:e=>{}}),x=({children:t,currentActiveTab:r=0,isFit:n=!0,hasPadding:a=!1,isFull:o=!1,barColor:l="bg-w-gray-900",onChange:c})=>{const[u,d]=s(r);return i((()=>{r!==u&&d(r);
 // eslint-disable-next-line react-hooks/exhaustive-deps
-}),[r]),/*#__PURE__*/e(h.Provider,{value:{barColor:i,activeTab:u,currentActiveTab:r,isFit:n,hasPadding:a,handleTabClick:e=>{e!==u&&(null==c||c(e),d(e))},isFull:o},children:t})},w=({children:n,className:u})=>{const{activeTab:m,hasPadding:f,isFull:p,barColor:y}=r(h),g=a([]),x=a(null),w=a(null),v=o.toArray(n),[j,O]=s(!1),[T,D]=s(!1),[N,P]=s({x:0,scrollLeft:0});return l((()=>{if(!g.current[m]||!x.current)return;const e=g.current[m],t=x.current,r=w.current;if(e&&t&&r){const{offsetLeft:n,offsetWidth:a}=e,{scrollLeft:o,clientWidth:s}=r;t.style.width=`${a}px`,t.style.transform=`translateX(${n}px)`;if(!(o<=n&&o+s>=n+a)){const t=setTimeout((()=>{e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}),0);return()=>clearTimeout(t)}}}),[m]),l((()=>(document.addEventListener("resize",(()=>{if(w.current){const e=w.current.scrollWidth>w.current.clientWidth;O(e)}})),()=>{document.removeEventListener("resize",(()=>{}))})),[]),/*#__PURE__*/t(d,{ref:w,className:c("block w-full touch-pan-x items-start overflow-x-scroll scrollbar-hide",j&&"scrollbar-list",f&&"relative px-9",u),"data-testid":"design-system-textTab--container",onMouseDown:e=>{w.current&&(D(!0),P({x:e.pageX,scrollLeft:w.current.scrollLeft}))},onMouseMove:e=>{if(!T||!w.current)return;e.preventDefault();const t=e.pageX-N.x;w.current.scrollLeft=N.scrollLeft-t},onMouseUp:()=>{D(!1)},onMouseLeave:()=>{D(!1)},children:[
-/*#__PURE__*/t(d,{className:i("relative w-full border-b border-w-gray-200",j&&"w-max"),"data-testid":"design-system-textTab--inner-container",children:[
-/*#__PURE__*/e(d,{className:i("inline-flex w-max gap-10",p&&"w-full gap-0"),children:v.map(((t,r)=>/*#__PURE__*/e(d,{className:i(p&&"w-full"),ref:e=>{g.current[r]=e},children:t},r)))}),
-/*#__PURE__*/e("span",{ref:x,"data-testid":`design-system-textTab--underbar-${m}`,className:c("absolute bottom-0 left-0 h-0.5 rounded-t-lg transition-all duration-300 ease-out",y)})]}),f&&/*#__PURE__*/e(b,{className:"absolute bottom-0 left-0 h-px w-full"})]})},v=({children:n,index:a,className:o,disabled:s=!1,badgeNumber:l,iconName:c,href:b})=>{const{isFit:p,handleTabClick:x,activeTab:w,isFull:v}=r(h),j=a===w,O={tabIndex:0,"data-testid":`design-system-textTab--item-${a}`,className:i("group flex w-max cursor-pointer items-center rounded-xl hover:font-medium",s&&"cursor-not-allowed",v&&"w-full",o),onClick:()=>{!s&&x(a)}},T=/*#__PURE__*/t(d,{className:i("relative flex w-full select-none flex-row items-center justify-center gap-2 py-4 font-normal text-w-gray-600 group-hover:text-w-gray-900",!p&&"px-[33.5px]",v&&"w-full px-0",j&&"font-medium text-w-gray-900"),children:[c&&/*#__PURE__*/e(d,{className:"flex size-4 flex-shrink-0 items-center justify-center",children:/*#__PURE__*/e(m,{name:c,className:i("size-4 text-w-gray-600 group-hover:text-w-gray-900",j&&"text-w-gray-900")})}),
-/*#__PURE__*/e(u,{variant:"body1",className:"relative",children:n}),void 0!==l&&/*#__PURE__*/e(f,{text:l,showZero:!0,className:"relative",variant:"gray"})]});return b?/*#__PURE__*/e("a",g(y({href:b},O),{children:T})):/*#__PURE__*/e(d,g(y({},O),{children:T}))},j=({children:t,index:n})=>{const{activeTab:a}=r(h);return a===n&&/*#__PURE__*/e(d,{"data-testid":"design-system-textTab--content",children:t})};
+}),[r]),/*#__PURE__*/e(g.Provider,{value:{barColor:l,activeTab:u,currentActiveTab:r,isFit:n,hasPadding:a,handleTabClick:e=>{e!==u&&(null==c||c(e),d(e))},isFull:o},children:t})},w=({children:n,className:u})=>{const{activeTab:m,hasPadding:f,isFull:p,barColor:y}=r(g),h=a([]),x=a(null),w=a(null),v=o.toArray(n),[j,O]=s(!1),[T,D]=s(!1),[N,P]=s({x:0,scrollLeft:0});return i((()=>{if(!h.current[m]||!x.current)return;const e=h.current[m],t=x.current,r=w.current;if(e&&t&&r){const{offsetLeft:n,offsetWidth:a}=e,{scrollLeft:o,clientWidth:s}=r;t.style.width=`${a}px`,t.style.transform=`translateX(${n}px)`;if(!(o<=n&&o+s>=n+a)){const t=setTimeout((()=>{e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}),0);return()=>clearTimeout(t)}}}),[m]),i((()=>{const e=()=>{if(w.current){const e=w.current.scrollWidth>w.current.clientWidth;O(e)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),i((()=>{if(w.current){const e=w.current.scrollWidth>w.current.clientWidth;O(e)}}),[n]),/*#__PURE__*/e(d,{ref:w,className:c("block w-full touch-pan-x items-start overflow-x-scroll scrollbar-hide",j&&"scrollbar-list",u),"data-testid":"design-system-textTab--container",onMouseDown:e=>{w.current&&(D(!0),P({x:e.pageX,scrollLeft:w.current.scrollLeft}))},onMouseMove:e=>{if(!T||!w.current)return;e.preventDefault();const t=e.pageX-N.x;w.current.scrollLeft=N.scrollLeft-t},onMouseUp:()=>{D(!1)},onMouseLeave:()=>{D(!1)},children:/*#__PURE__*/t(d,{className:l("relative w-full border-b border-w-gray-200",j&&"w-max",f&&"px-9"),"data-testid":"design-system-textTab--inner-container",children:[
+/*#__PURE__*/e(d,{className:l("inline-flex w-max gap-10",p&&"w-full gap-0"),children:v.map(((t,r)=>/*#__PURE__*/e(d,{className:l(p&&"w-full"),ref:e=>{h.current[r]=e},children:t},r)))}),
+/*#__PURE__*/e("span",{ref:x,"data-testid":`design-system-textTab--underbar-${m}`,className:c("absolute bottom-0 left-0 h-0.5 rounded-t-lg transition-all duration-300 ease-out",y)}),
+/*#__PURE__*/e(b,{className:"absolute -bottom-px left-0 h-px"})]})})},v=({children:n,index:a,className:o,disabled:s=!1,badgeNumber:i,iconName:c,href:b})=>{const{isFit:p,handleTabClick:x,activeTab:w,isFull:v}=r(g),j=a===w,O={tabIndex:0,"data-testid":`design-system-textTab--item-${a}`,className:l("group flex w-max cursor-pointer items-center rounded-xl hover:font-medium",s&&"cursor-not-allowed",v&&"w-full",o),onClick:()=>{!s&&x(a)}},T=/*#__PURE__*/t(d,{className:l("relative flex w-full select-none flex-row items-center justify-center gap-2 py-4 font-normal text-w-gray-600 group-hover:text-w-gray-900",!p&&"px-[33.5px]",v&&"w-full px-0",j&&"font-medium text-w-gray-900"),children:[c&&/*#__PURE__*/e(d,{className:"flex size-4 flex-shrink-0 items-center justify-center",children:/*#__PURE__*/e(m,{name:c,className:l("size-4 text-w-gray-600 group-hover:text-w-gray-900",j&&"text-w-gray-900")})}),
+/*#__PURE__*/e(u,{variant:"body1",className:"relative",children:n}),void 0!==i&&/*#__PURE__*/e(f,{text:i,showZero:!0,className:"relative",variant:"gray"})]});return b?/*#__PURE__*/e("a",h(y({href:b},O),{children:T})):/*#__PURE__*/e(d,h(y({},O),{children:T}))},j=({children:t,index:n})=>{const{activeTab:a}=r(g);return a===n&&/*#__PURE__*/e(d,{"data-testid":"design-system-textTab--content",children:t})};
 /**
  * TextTab의 Root 컴포넌트입니다.
  * TextTab의 상태를 관리합니다.

package/dist/cjs/Components/Navigations/TextTab/TextTab.parts.js

@@ -1,4 +1,4 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),s=require("../../Base/Typography/Typography.js"),a=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var n=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var o=require("../../DataDisplays/CountBadge/CountBadge.js"),l=require("../../DataDisplays/Divider/Divider.js");function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},s=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),s.forEach((function(t){i(e,t,r[t])}))}return e}function u(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const d=/*#__PURE__*/t.createContext({barColor:"bg-w-gray-900",activeTab:0,currentActiveTab:0,isFit:!0,hasPadding:!1,isFull:!1,handleTabClick:e=>{}});
+"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),s=require("../../Base/Typography/Typography.js"),n=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var a=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var o=require("../../DataDisplays/CountBadge/CountBadge.js"),i=require("../../DataDisplays/Divider/Divider.js");function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},s=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),s.forEach((function(t){l(e,t,r[t])}))}return e}function u(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const d=/*#__PURE__*/t.createContext({barColor:"bg-w-gray-900",activeTab:0,currentActiveTab:0,isFit:!0,hasPadding:!1,isFull:!1,handleTabClick:e=>{}});
 /**
  * TextTab의 Root 컴포넌트입니다.
  * TextTab의 상태를 관리합니다.
@@ -21,10 +21,10 @@
  *   <TextTab.Panel index={0}>첫 번째 패널 내용</TextTab.Panel>
  *   <TextTab.Panel index={1}>두 번째 패널 내용</TextTab.Panel>
  * </TextTab.Root>
- */exports.Panel=({children:r,index:s})=>{const{activeTab:n}=t.useContext(d);return n===s&&/*#__PURE__*/e.jsx(a.Box,{"data-testid":"design-system-textTab--content",children:r})},exports.Root=({children:r,currentActiveTab:s=0,isFit:a=!0,hasPadding:n=!1,isFull:o=!1,barColor:l="bg-w-gray-900",onChange:i})=>{const[c,u]=t.useState(s);return t.useEffect((()=>{s!==c&&u(s);
+ */exports.Panel=({children:r,index:s})=>{const{activeTab:a}=t.useContext(d);return a===s&&/*#__PURE__*/e.jsx(n.Box,{"data-testid":"design-system-textTab--content",children:r})},exports.Root=({children:r,currentActiveTab:s=0,isFit:n=!0,hasPadding:a=!1,isFull:o=!1,barColor:i="bg-w-gray-900",onChange:l})=>{const[c,u]=t.useState(s);return t.useEffect((()=>{s!==c&&u(s);
 // eslint-disable-next-line react-hooks/exhaustive-deps
-}),[s]),/*#__PURE__*/e.jsx(d.Provider,{value:{barColor:l,activeTab:c,currentActiveTab:s,isFit:a,hasPadding:n,handleTabClick:e=>{e!==c&&(null==i||i(e),u(e))},isFull:o},children:r})},exports.Tab=({children:l,index:i,className:f,disabled:x=!1,badgeNumber:b,iconName:m,href:y})=>{const{isFit:g,handleTabClick:p,activeTab:h,isFull:w}=t.useContext(d),v=i===h,j={tabIndex:0,"data-testid":`design-system-textTab--item-${i}`,className:r.twMerge("group flex w-max cursor-pointer items-center rounded-xl hover:font-medium",x&&"cursor-not-allowed",w&&"w-full",f),onClick:()=>{!x&&p(i)}},T=/*#__PURE__*/e.jsxs(a.Box,{className:r.twMerge("relative flex w-full select-none flex-row items-center justify-center gap-2 py-4 font-normal text-w-gray-600 group-hover:text-w-gray-900",!g&&"px-[33.5px]",w&&"w-full px-0",v&&"font-medium text-w-gray-900"),children:[m&&/*#__PURE__*/e.jsx(a.Box,{className:"flex size-4 flex-shrink-0 items-center justify-center",children:/*#__PURE__*/e.jsx(n.SystemIcon,{name:m,className:r.twMerge("size-4 text-w-gray-600 group-hover:text-w-gray-900",v&&"text-w-gray-900")})}),
-/*#__PURE__*/e.jsx(s.Typography,{variant:"body1",className:"relative",children:l}),void 0!==b&&/*#__PURE__*/e.jsx(o.CountBadge,{text:b,showZero:!0,className:"relative",variant:"gray"})]});return y?/*#__PURE__*/e.jsx("a",u(c({href:y},j),{children:T})):/*#__PURE__*/e.jsx(a.Box,u(c({},j),{children:T}))},exports.Tabs=({children:s,className:n})=>{const{activeTab:o,hasPadding:i,isFull:c,barColor:u}=t.useContext(d),f=t.useRef([]),x=t.useRef(null),b=t.useRef(null),m=t.Children.toArray(s),[y,g]=t.useState(!1),[p,h]=t.useState(!1),[w,v]=t.useState({x:0,scrollLeft:0});return t.useEffect((()=>{if(!f.current[o]||!x.current)return;const e=f.current[o],t=x.current,r=b.current;if(e&&t&&r){const{offsetLeft:s,offsetWidth:a}=e,{scrollLeft:n,clientWidth:o}=r;t.style.width=`${a}px`,t.style.transform=`translateX(${s}px)`;if(!(n<=s&&n+o>=s+a)){const t=setTimeout((()=>{e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}),0);return()=>clearTimeout(t)}}}),[o]),t.useEffect((()=>(document.addEventListener("resize",(()=>{if(b.current){const e=b.current.scrollWidth>b.current.clientWidth;g(e)}})),()=>{document.removeEventListener("resize",(()=>{}))})),[]),/*#__PURE__*/e.jsxs(a.Box,{ref:b,className:r.twJoin("block w-full touch-pan-x items-start overflow-x-scroll scrollbar-hide",y&&"scrollbar-list",i&&"relative px-9",n),"data-testid":"design-system-textTab--container",onMouseDown:e=>{b.current&&(h(!0),v({x:e.pageX,scrollLeft:b.current.scrollLeft}))},onMouseMove:e=>{if(!p||!b.current)return;e.preventDefault();const t=e.pageX-w.x;b.current.scrollLeft=w.scrollLeft-t},onMouseUp:()=>{h(!1)},onMouseLeave:()=>{h(!1)},children:[
-/*#__PURE__*/e.jsxs(a.Box,{className:r.twMerge("relative w-full border-b border-w-gray-200",y&&"w-max"),"data-testid":"design-system-textTab--inner-container",children:[
-/*#__PURE__*/e.jsx(a.Box,{className:r.twMerge("inline-flex w-max gap-10",c&&"w-full gap-0"),children:m.map(((t,s)=>/*#__PURE__*/e.jsx(a.Box,{className:r.twMerge(c&&"w-full"),ref:e=>{f.current[s]=e},children:t},s)))}),
-/*#__PURE__*/e.jsx("span",{ref:x,"data-testid":`design-system-textTab--underbar-${o}`,className:r.twJoin("absolute bottom-0 left-0 h-0.5 rounded-t-lg transition-all duration-300 ease-out",u)})]}),i&&/*#__PURE__*/e.jsx(l.Divider,{className:"absolute bottom-0 left-0 h-px w-full"})]})};
+}),[s]),/*#__PURE__*/e.jsx(d.Provider,{value:{barColor:i,activeTab:c,currentActiveTab:s,isFit:n,hasPadding:a,handleTabClick:e=>{e!==c&&(null==l||l(e),u(e))},isFull:o},children:r})},exports.Tab=({children:i,index:l,className:f,disabled:x=!1,badgeNumber:b,iconName:y,href:m})=>{const{isFit:p,handleTabClick:g,activeTab:h,isFull:w}=t.useContext(d),j=l===h,v={tabIndex:0,"data-testid":`design-system-textTab--item-${l}`,className:r.twMerge("group flex w-max cursor-pointer items-center rounded-xl hover:font-medium",x&&"cursor-not-allowed",w&&"w-full",f),onClick:()=>{!x&&g(l)}},T=/*#__PURE__*/e.jsxs(n.Box,{className:r.twMerge("relative flex w-full select-none flex-row items-center justify-center gap-2 py-4 font-normal text-w-gray-600 group-hover:text-w-gray-900",!p&&"px-[33.5px]",w&&"w-full px-0",j&&"font-medium text-w-gray-900"),children:[y&&/*#__PURE__*/e.jsx(n.Box,{className:"flex size-4 flex-shrink-0 items-center justify-center",children:/*#__PURE__*/e.jsx(a.SystemIcon,{name:y,className:r.twMerge("size-4 text-w-gray-600 group-hover:text-w-gray-900",j&&"text-w-gray-900")})}),
+/*#__PURE__*/e.jsx(s.Typography,{variant:"body1",className:"relative",children:i}),void 0!==b&&/*#__PURE__*/e.jsx(o.CountBadge,{text:b,showZero:!0,className:"relative",variant:"gray"})]});return m?/*#__PURE__*/e.jsx("a",u(c({href:m},v),{children:T})):/*#__PURE__*/e.jsx(n.Box,u(c({},v),{children:T}))},exports.Tabs=({children:s,className:a})=>{const{activeTab:o,hasPadding:l,isFull:c,barColor:u}=t.useContext(d),f=t.useRef([]),x=t.useRef(null),b=t.useRef(null),y=t.Children.toArray(s),[m,p]=t.useState(!1),[g,h]=t.useState(!1),[w,j]=t.useState({x:0,scrollLeft:0});return t.useEffect((()=>{if(!f.current[o]||!x.current)return;const e=f.current[o],t=x.current,r=b.current;if(e&&t&&r){const{offsetLeft:s,offsetWidth:n}=e,{scrollLeft:a,clientWidth:o}=r;t.style.width=`${n}px`,t.style.transform=`translateX(${s}px)`;if(!(a<=s&&a+o>=s+n)){const t=setTimeout((()=>{e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}),0);return()=>clearTimeout(t)}}}),[o]),t.useEffect((()=>{const e=()=>{if(b.current){const e=b.current.scrollWidth>b.current.clientWidth;p(e)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),t.useEffect((()=>{if(b.current){const e=b.current.scrollWidth>b.current.clientWidth;p(e)}}),[s]),/*#__PURE__*/e.jsx(n.Box,{ref:b,className:r.twJoin("block w-full touch-pan-x items-start overflow-x-scroll scrollbar-hide",m&&"scrollbar-list",a),"data-testid":"design-system-textTab--container",onMouseDown:e=>{b.current&&(h(!0),j({x:e.pageX,scrollLeft:b.current.scrollLeft}))},onMouseMove:e=>{if(!g||!b.current)return;e.preventDefault();const t=e.pageX-w.x;b.current.scrollLeft=w.scrollLeft-t},onMouseUp:()=>{h(!1)},onMouseLeave:()=>{h(!1)},children:/*#__PURE__*/e.jsxs(n.Box,{className:r.twMerge("relative w-full border-b border-w-gray-200",m&&"w-max",l&&"px-9"),"data-testid":"design-system-textTab--inner-container",children:[
+/*#__PURE__*/e.jsx(n.Box,{className:r.twMerge("inline-flex w-max gap-10",c&&"w-full gap-0"),children:y.map(((t,s)=>/*#__PURE__*/e.jsx(n.Box,{className:r.twMerge(c&&"w-full"),ref:e=>{f.current[s]=e},children:t},s)))}),
+/*#__PURE__*/e.jsx("span",{ref:x,"data-testid":`design-system-textTab--underbar-${o}`,className:r.twJoin("absolute bottom-0 left-0 h-0.5 rounded-t-lg transition-all duration-300 ease-out",u)}),
+/*#__PURE__*/e.jsx(i.Divider,{className:"absolute -bottom-px left-0 h-px"})]})})};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishket/design-system",
-  "version": "1.16.5",
+  "version": "1.16.6",
   "type": "module",
   "description": "Wishket Design System",
   "main": "dist/index.js",