@wishket/design-system 1.14.0 → 1.15.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.
- package/dist/Components/DataDisplays/Avatar/Avatar.d.ts +2 -1
- package/dist/Components/DataDisplays/Avatar/Avatar.js +9 -8
- package/dist/Components/Navigations/TextTab/TextTab.parts.js +6 -6
- package/dist/cjs/Components/DataDisplays/Avatar/Avatar.js +7 -6
- package/dist/cjs/Components/Navigations/TextTab/TextTab.parts.js +6 -6
- package/package.json +1 -1
|
@@ -5,6 +5,7 @@ export interface AvatarProps {
|
|
|
5
5
|
imgUrl?: string;
|
|
6
6
|
isEditable?: boolean;
|
|
7
7
|
onClick?: () => void;
|
|
8
|
+
hasBorder?: boolean;
|
|
8
9
|
}
|
|
9
|
-
declare const MemoizedAvatar: import("react").MemoExoticComponent<({ size, name, imgUrl, isEditable, onClick, }: AvatarProps) => import("react/jsx-runtime").JSX.Element>;
|
|
10
|
+
declare const MemoizedAvatar: import("react").MemoExoticComponent<({ size, name, imgUrl, isEditable, onClick, hasBorder, }: AvatarProps) => import("react/jsx-runtime").JSX.Element>;
|
|
10
11
|
export { MemoizedAvatar as Avatar };
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as a,twJoin as
|
|
2
|
-
return e(l,{className:a("relative z-0 h-fit w-fit",
|
|
3
|
-
/*#__PURE__*/t(l,{"data-testid":"design-system-avatar--container",className:a(
|
|
1
|
+
"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as a,twJoin as r}from"tailwind-merge";import{memo as s,useState as i}from"react";import{SystemIcon as o}from"../SystemIcon/SystemIcon.js";import"../SystemIcon/SystemIcon.constants.js";import{Typography as n}from"../../Base/Typography/Typography.js";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";const m=({size:e="md",name:a,imgUrl:r,isMonogram:s,avatarStyle:l})=>{const[m,d]=i(!1),c=null==a?void 0:a.slice(0,1);return r&&!m?/*#__PURE__*/t("img",{src:r,alt:"",width:80,height:80,className:"h-full w-full object-cover","data-testid":"design-system-avatar--image",onError:()=>d(!0)}):s?/*#__PURE__*/t(n,{variant:l[e].char,className:"cursor-default select-none text-w-white",children:c}):/*#__PURE__*/t(o,{name:"large_user_image_avatar",className:"h-full w-full",testId:"design-system-avatar--default-image"})},d=/*#__PURE__*/s((({size:s="md",name:i,imgUrl:n,isEditable:d=!1,onClick:c,hasBorder:u=!0})=>{const g=!n&&!!i,h={sm:{container:"size-[22px]",char:"caption1",editButton:"hidden"},md:{container:"size-8",char:"body1",editButton:"size-4"},lg:{container:"size-12",char:"title3",editButton:"size-5"},xl:{container:"size-20",char:"title2",editButton:"size-6"}};/*#__PURE__*/
|
|
2
|
+
return e(l,{className:a("relative z-0 h-fit w-fit",d&&"cursor-pointer"),onClick:c,children:[
|
|
3
|
+
/*#__PURE__*/t(l,{"data-testid":"design-system-avatar--container",className:a(h[s].container,"flex items-center justify-center overflow-hidden rounded-full",g&&"bg-primary",u&&"border border-w-gray-200"),children:/*#__PURE__*/t(m,{size:s,name:i,imgUrl:n,isMonogram:g,avatarStyle:h})}),!g&&d&&/*#__PURE__*/t(l,{className:a("absolute bottom-0 right-0 z-10 flex items-center justify-center rounded-full bg-w-white shadow-graysmall",h[s].editButton),"data-testid":"design-system-avatar--edit-button",children:/*#__PURE__*/t(o,{name:"small_camera",solid:!0,className:r("md"===s&&"size-3"),testId:"design-system-avatar--edit-button-icon"})})]})}));
|
|
4
4
|
/**
|
|
5
5
|
* Avatar 컴포넌트는 사용자의 프로필 이미지, 모노그램, 또는 기본 아이콘을 표시합니다.
|
|
6
6
|
* @component
|
|
7
7
|
* @param {Object} props
|
|
8
|
-
* @param {AvatarSize} [props.size='md'] -
|
|
8
|
+
* @param {AvatarSize} [props.size='md'] - 크기 ('sm' | 'md' | 'lg' | 'xl')
|
|
9
9
|
* @param {string} [props.name] - 이미지가 없을 경우 표시할 사용자 이름 (이니셜로 표시됨)
|
|
10
|
-
* @param {string} [props.imgUrl] -
|
|
11
|
-
* @param {boolean} [props.isEditable=false] -
|
|
12
|
-
* @param {
|
|
10
|
+
* @param {string} [props.imgUrl] - 이미지 URL
|
|
11
|
+
* @param {boolean} [props.isEditable=false] - 수정 아이콘 여부
|
|
12
|
+
* @param {boolean} [props.hasBorder=true] - 테두리 여부
|
|
13
|
+
* @param {() => void} [props.onClick] - 클릭 시 실행될 콜백 함수
|
|
13
14
|
* @returns {JSX.Element} Avatar component
|
|
14
15
|
* @example
|
|
15
16
|
* // Basic usage
|
|
@@ -20,4 +21,4 @@ return e(l,{className:a("relative z-0 h-fit w-fit",c&&"cursor-pointer"),onClick:
|
|
|
20
21
|
*
|
|
21
22
|
* // Editable avatar
|
|
22
23
|
* <Avatar name="John Doe" isEditable={true} onClick={() => handleEdit()} />
|
|
23
|
-
*/export{
|
|
24
|
+
*/export{d as Avatar};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as r,createContext as
|
|
1
|
+
"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";function b(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(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){b(e,t,r[t])}))}return e}function y(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=>{}}),h=({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);
|
|
2
2
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3
|
-
}),[r]),/*#__PURE__*/e(
|
|
4
|
-
/*#__PURE__*/e(d,{className:
|
|
5
|
-
/*#__PURE__*/e("span",{ref:
|
|
6
|
-
/*#__PURE__*/e(u,{variant:"body1",className:"relative",children:
|
|
3
|
+
}),[r]),/*#__PURE__*/e(g.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})},x=({children:n,className:u})=>{const{activeTab:m,hasPadding:f,isFull:b,barColor:p}=r(g),y=a([]),h=a(null),x=a(null),w=o.toArray(n),[v,j]=s(!1),[O,T]=s(!1),[P,N]=s({x:0,scrollLeft:0});return l((()=>{if(!y.current[m]||!h.current)return;const e=y.current[m],t=h.current,r=x.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(x.current){const e=x.current.scrollWidth>x.current.clientWidth;j(e)}})),()=>{document.removeEventListener("resize",(()=>{}))})),[]),/*#__PURE__*/e(d,{ref:x,className:c("block w-full touch-pan-x items-start overflow-x-scroll scrollbar-hide",v&&"scrollbar-list",f&&"px-9",u),"data-testid":"design-system-textTab--container",onMouseDown:e=>{x.current&&(T(!0),N({x:e.pageX,scrollLeft:x.current.scrollLeft}))},onMouseMove:e=>{if(!O||!x.current)return;e.preventDefault();const t=e.pageX-P.x;x.current.scrollLeft=P.scrollLeft-t},onMouseUp:()=>{T(!1)},onMouseLeave:()=>{T(!1)},children:/*#__PURE__*/t(d,{className:i("relative w-full border-b border-w-gray-200",v&&"w-max"),"data-testid":"design-system-textTab--inner-container",children:[
|
|
4
|
+
/*#__PURE__*/e(d,{className:i("inline-flex w-max gap-10",b&&"w-full gap-0"),children:w.map(((t,r)=>/*#__PURE__*/e(d,{className:i(b&&"w-full"),ref:e=>{y.current[r]=e},children:t},r)))}),
|
|
5
|
+
/*#__PURE__*/e("span",{ref:h,"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",p)})]})})},w=({children:n,index:a,className:o,disabled:s=!1,badgeNumber:l,iconName:c,href:b})=>{const{isFit:h,handleTabClick:x,activeTab:w,isFull:v}=r(g),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",!h&&"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")})}),
|
|
6
|
+
/*#__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",y(p({href:b},O),{children:T})):/*#__PURE__*/e(d,y(p({},O),{children:T}))},v=({children:t,index:n})=>{const{activeTab:a}=r(g);return a===n&&/*#__PURE__*/e(d,{"data-testid":"design-system-textTab--content",children:t})};
|
|
7
7
|
/**
|
|
8
8
|
* TextTab의 Root 컴포넌트입니다.
|
|
9
9
|
* TextTab의 상태를 관리합니다.
|
|
@@ -26,4 +26,4 @@
|
|
|
26
26
|
* <TextTab.Panel index={0}>첫 번째 패널 내용</TextTab.Panel>
|
|
27
27
|
* <TextTab.Panel index={1}>두 번째 패널 내용</TextTab.Panel>
|
|
28
28
|
* </TextTab.Root>
|
|
29
|
-
*/export{v as Panel,
|
|
29
|
+
*/export{v as Panel,h as Root,w as Tab,x as Tabs};
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),a=require("react"),s=require("../SystemIcon/SystemIcon.js");require("../SystemIcon/SystemIcon.constants.js");var r=require("../../Base/Typography/Typography.js"),i=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");const n=({size:t="md",name:i,imgUrl:n,isMonogram:o,avatarStyle:l})=>{const[c,d]=a.useState(!1),m=null==i?void 0:i.slice(0,1),u=()=>d(!0);return n&&!c?/*#__PURE__*/e.jsx("img",{src:n,alt:"",width:80,height:80,className:"h-full w-full object-cover","data-testid":"design-system-avatar--image",onError:u}):o?/*#__PURE__*/e.jsx(r.Typography,{variant:l[t].char,className:"cursor-default select-none text-w-white",children:m}):/*#__PURE__*/e.jsx(s.SystemIcon,{name:"large_user_image_avatar",className:"h-full w-full",testId:"design-system-avatar--default-image"})},o=({size:a="md",name:r,imgUrl:o,isEditable:l=!1,onClick:c})=>{const
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),a=require("react"),s=require("../SystemIcon/SystemIcon.js");require("../SystemIcon/SystemIcon.constants.js");var r=require("../../Base/Typography/Typography.js"),i=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");const n=({size:t="md",name:i,imgUrl:n,isMonogram:o,avatarStyle:l})=>{const[c,d]=a.useState(!1),m=null==i?void 0:i.slice(0,1),u=()=>d(!0);return n&&!c?/*#__PURE__*/e.jsx("img",{src:n,alt:"",width:80,height:80,className:"h-full w-full object-cover","data-testid":"design-system-avatar--image",onError:u}):o?/*#__PURE__*/e.jsx(r.Typography,{variant:l[t].char,className:"cursor-default select-none text-w-white",children:m}):/*#__PURE__*/e.jsx(s.SystemIcon,{name:"large_user_image_avatar",className:"h-full w-full",testId:"design-system-avatar--default-image"})},o=({size:a="md",name:r,imgUrl:o,isEditable:l=!1,onClick:c,hasBorder:d=!0})=>{const m=!o&&!!r,u={sm:{container:"size-[22px]",char:"caption1",editButton:"hidden"},md:{container:"size-8",char:"body1",editButton:"size-4"},lg:{container:"size-12",char:"title3",editButton:"size-5"},xl:{container:"size-20",char:"title2",editButton:"size-6"}};/*#__PURE__*/
|
|
2
2
|
return e.jsxs(i.Box,{className:t.twMerge("relative z-0 h-fit w-fit",l&&"cursor-pointer"),onClick:c,children:[
|
|
3
|
-
/*#__PURE__*/e.jsx(i.Box,{"data-testid":"design-system-avatar--container",className:t.twMerge(
|
|
3
|
+
/*#__PURE__*/e.jsx(i.Box,{"data-testid":"design-system-avatar--container",className:t.twMerge(u[a].container,"flex items-center justify-center overflow-hidden rounded-full",m&&"bg-primary",d&&"border border-w-gray-200"),children:/*#__PURE__*/e.jsx(n,{size:a,name:r,imgUrl:o,isMonogram:m,avatarStyle:u})}),!m&&l&&/*#__PURE__*/e.jsx(i.Box,{className:t.twMerge("absolute bottom-0 right-0 z-10 flex items-center justify-center rounded-full bg-w-white shadow-graysmall",u[a].editButton),"data-testid":"design-system-avatar--edit-button",children:/*#__PURE__*/e.jsx(s.SystemIcon,{name:"small_camera",solid:!0,className:t.twJoin("md"===a&&"size-3"),testId:"design-system-avatar--edit-button-icon"})})]})},l=/*#__PURE__*/a.memo(o);
|
|
4
4
|
/**
|
|
5
5
|
* Avatar 컴포넌트는 사용자의 프로필 이미지, 모노그램, 또는 기본 아이콘을 표시합니다.
|
|
6
6
|
* @component
|
|
7
7
|
* @param {Object} props
|
|
8
|
-
* @param {AvatarSize} [props.size='md'] -
|
|
8
|
+
* @param {AvatarSize} [props.size='md'] - 크기 ('sm' | 'md' | 'lg' | 'xl')
|
|
9
9
|
* @param {string} [props.name] - 이미지가 없을 경우 표시할 사용자 이름 (이니셜로 표시됨)
|
|
10
|
-
* @param {string} [props.imgUrl] -
|
|
11
|
-
* @param {boolean} [props.isEditable=false] -
|
|
12
|
-
* @param {
|
|
10
|
+
* @param {string} [props.imgUrl] - 이미지 URL
|
|
11
|
+
* @param {boolean} [props.isEditable=false] - 수정 아이콘 여부
|
|
12
|
+
* @param {boolean} [props.hasBorder=true] - 테두리 여부
|
|
13
|
+
* @param {() => void} [props.onClick] - 클릭 시 실행될 콜백 함수
|
|
13
14
|
* @returns {JSX.Element} Avatar component
|
|
14
15
|
* @example
|
|
15
16
|
* // Basic usage
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),
|
|
1
|
+
"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");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 i(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 c(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 u=/*#__PURE__*/t.createContext({barColor:"bg-w-gray-900",activeTab:0,currentActiveTab:0,isFit:!0,hasPadding:!1,isFull:!1,handleTabClick:e=>{}});
|
|
2
2
|
/**
|
|
3
3
|
* TextTab의 Root 컴포넌트입니다.
|
|
4
4
|
* TextTab의 상태를 관리합니다.
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
* <TextTab.Panel index={0}>첫 번째 패널 내용</TextTab.Panel>
|
|
22
22
|
* <TextTab.Panel index={1}>두 번째 패널 내용</TextTab.Panel>
|
|
23
23
|
* </TextTab.Root>
|
|
24
|
-
*/exports.Panel=({children:r,index:
|
|
24
|
+
*/exports.Panel=({children:r,index:s})=>{const{activeTab:a}=t.useContext(u);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:l="bg-w-gray-900",onChange:i})=>{const[c,d]=t.useState(s);return t.useEffect((()=>{s!==c&&d(s);
|
|
25
25
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
26
|
-
}),[
|
|
27
|
-
/*#__PURE__*/e.jsx(
|
|
28
|
-
/*#__PURE__*/e.jsx(
|
|
29
|
-
/*#__PURE__*/e.jsx("span",{ref:
|
|
26
|
+
}),[s]),/*#__PURE__*/e.jsx(u.Provider,{value:{barColor:l,activeTab:c,currentActiveTab:s,isFit:n,hasPadding:a,handleTabClick:e=>{e!==c&&(null==i||i(e),d(e))},isFull:o},children:r})},exports.Tab=({children:l,index:d,className:f,disabled:x=!1,badgeNumber:b,iconName:m,href:y})=>{const{isFit:g,handleTabClick:p,activeTab:h,isFull:w}=t.useContext(u),j=d===h,v={tabIndex:0,"data-testid":`design-system-textTab--item-${d}`,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(d)}},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",!g&&"px-[33.5px]",w&&"w-full px-0",j&&"font-medium text-w-gray-900"),children:[m&&/*#__PURE__*/e.jsx(n.Box,{className:"flex size-4 flex-shrink-0 items-center justify-center",children:/*#__PURE__*/e.jsx(a.SystemIcon,{name:m,className:r.twMerge("size-4 text-w-gray-600 group-hover:text-w-gray-900",j&&"text-w-gray-900")})}),
|
|
27
|
+
/*#__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",c(i({href:y},v),{children:T})):/*#__PURE__*/e.jsx(n.Box,c(i({},v),{children:T}))},exports.Tabs=({children:s,className:a})=>{const{activeTab:o,hasPadding:l,isFull:i,barColor:c}=t.useContext(u),d=t.useRef([]),f=t.useRef(null),x=t.useRef(null),b=t.Children.toArray(s),[m,y]=t.useState(!1),[g,p]=t.useState(!1),[h,w]=t.useState({x:0,scrollLeft:0});return t.useEffect((()=>{if(!d.current[o]||!f.current)return;const e=d.current[o],t=f.current,r=x.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((()=>(document.addEventListener("resize",(()=>{if(x.current){const e=x.current.scrollWidth>x.current.clientWidth;y(e)}})),()=>{document.removeEventListener("resize",(()=>{}))})),[]),/*#__PURE__*/e.jsx(n.Box,{ref:x,className:r.twJoin("block w-full touch-pan-x items-start overflow-x-scroll scrollbar-hide",m&&"scrollbar-list",l&&"px-9",a),"data-testid":"design-system-textTab--container",onMouseDown:e=>{x.current&&(p(!0),w({x:e.pageX,scrollLeft:x.current.scrollLeft}))},onMouseMove:e=>{if(!g||!x.current)return;e.preventDefault();const t=e.pageX-h.x;x.current.scrollLeft=h.scrollLeft-t},onMouseUp:()=>{p(!1)},onMouseLeave:()=>{p(!1)},children:/*#__PURE__*/e.jsxs(n.Box,{className:r.twMerge("relative w-full border-b border-w-gray-200",m&&"w-max"),"data-testid":"design-system-textTab--inner-container",children:[
|
|
28
|
+
/*#__PURE__*/e.jsx(n.Box,{className:r.twMerge("inline-flex w-max gap-10",i&&"w-full gap-0"),children:b.map(((t,s)=>/*#__PURE__*/e.jsx(n.Box,{className:r.twMerge(i&&"w-full"),ref:e=>{d.current[s]=e},children:t},s)))}),
|
|
29
|
+
/*#__PURE__*/e.jsx("span",{ref:f,"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",c)})]})})};
|