@wishket/design-system 1.13.4 → 1.13.6
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/Feedbacks/MessageBox/MessageBox.parts.js +3 -3
- package/dist/Components/Inputs/TextField/TextField.js +3 -3
- package/dist/Components/Inputs/Textarea/Textarea.d.ts +1 -1
- package/dist/Components/Inputs/Textarea/Textarea.js +4 -4
- package/dist/Components/Navigations/BoxTab/BoxTab.parts.js +5 -5
- package/dist/Components/Navigations/TextTab/TextTab.parts.js +6 -6
- package/dist/Components/Utils/BottomModalContainer/useBottomModalContainer.d.ts +1 -1
- package/dist/Components/Wrappers/WithRichTooltip/WithRichTooltip.js +3 -3
- package/dist/Components/Wrappers/WithSnackBar/WithSnackBar.js +1 -1
- package/dist/cjs/Components/Feedbacks/MessageBox/MessageBox.parts.js +3 -3
- package/dist/cjs/Components/Inputs/TextField/TextField.js +3 -3
- package/dist/cjs/Components/Inputs/Textarea/Textarea.js +3 -3
- package/dist/cjs/Components/Navigations/BoxTab/BoxTab.parts.js +4 -4
- package/dist/cjs/Components/Navigations/TextTab/TextTab.parts.js +5 -5
- package/dist/cjs/Components/Wrappers/WithRichTooltip/WithRichTooltip.js +2 -2
- package/dist/cjs/Components/Wrappers/WithSnackBar/WithSnackBar.js +2 -2
- package/dist/hooks/useDropdown.d.ts +1 -1
- package/package.json +13 -9
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import
|
|
2
|
-
/*#__PURE__*/e(
|
|
3
|
-
/*#__PURE__*/e(a,{name:"small_arrow_right"})]},`${
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import"tailwind-merge";import"react";import a from"../../DataDisplays/SystemIcon/SystemIcon.js";import r from"../../Base/Typography/Typography.js";import s from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";const l=({links:l})=>/*#__PURE__*/e(s,{className:"flex h-auto w-full flex-col gap-3 p-6","data-testid":"design-system-message-box--external-links-container",children:null==l?void 0:l.map(((s,l)=>/*#__PURE__*/t("a",{target:s.target||"_blank",href:s.url,className:"flex items-center justify-between text-w-gray-600 no-underline","data-testid":`design-system-message-box--external-links-item-${l}`,children:[
|
|
2
|
+
/*#__PURE__*/e(r,{variant:"body1",className:"hover:underline hover:underline-offset-2",children:s.title}),
|
|
3
|
+
/*#__PURE__*/e(a,{name:"small_arrow_right"})]},`${s.title}-${s.url}`)))});export{l as ExternalLinks};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useState as n,useEffect as o}from"react";import{twMerge as a}from"tailwind-merge";import i from"../TextFieldContainer/TextFieldContainer.js";import s from"../SupportTextContainer/SupportTextContainer.js";import"../Input/Input.js";import"../Input/PasswordInput.js";import l from"../Input/LableInput.js";import c from"../Input/InputTypeSelector.js";function
|
|
1
|
+
"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useState as n,useEffect as o}from"react";import{twMerge as a}from"tailwind-merge";import i from"../TextFieldContainer/TextFieldContainer.js";import s from"../SupportTextContainer/SupportTextContainer.js";import"../Input/Input.js";import"../Input/PasswordInput.js";import l from"../Input/LableInput.js";import c from"../Input/InputTypeSelector.js";function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){u(e,r,t[r])}))}return e}function f(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function b(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}
|
|
2
2
|
/**
|
|
3
3
|
* 사용자 입력을 받을 수 있는 텍스트 필드 컴포넌트입니다.
|
|
4
4
|
*
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
* maxLength={50}
|
|
40
40
|
* isMaxLengthVisible={true}
|
|
41
41
|
* />
|
|
42
|
-
*/(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const m=/*#__PURE__*/t(((t,
|
|
43
|
-
/*#__PURE__*/r("label",{role:"input-box",className:j?"cursor-not-allowed":"cursor-text",children:/*#__PURE__*/e(i,{leadingIcon:L,trailingIcon:P,measure:v,isFocused:
|
|
42
|
+
*/(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const m=/*#__PURE__*/t(((t,u)=>{var{type:m,name:d,value:g,onChange:y,maxLength:O,disabled:j=!1,placeholder:h,lable:x,testId:I,measure:v,isError:w,endIcon:P,startIcon:L,errorMessage:M,supportMessage:S,variant:C="default",isMaxLengthVisible:E=!1,className:F,onBlur:D}=t,T=b(t,["type","name","value","onChange","maxLength","disabled","placeholder","lable","testId","measure","isError","endIcon","startIcon","errorMessage","supportMessage","variant","isMaxLengthVisible","className","onBlur"]);const[N,k]=n(!1),[B,V]=n(0),q=p({variant:C,type:m,name:d,value:g,placeholder:h,lable:x,maxLength:O,onChange:y,isFocused:N,isError:w,onFocus:()=>{k(!0)},disabled:j,onBlur:e=>{k(!1),D&&D(e)}},T),z=w||S||E;return o((()=>{"string"==typeof g&&O&&V(g.length)}),[g,O]),/*#__PURE__*/e("div",{className:a("flex min-w-fit select-none flex-col gap-2 tracking-default",F),"data-testid":I,children:[
|
|
43
|
+
/*#__PURE__*/r("label",{role:"input-box",className:j?"cursor-not-allowed":"cursor-text",children:/*#__PURE__*/e(i,{leadingIcon:L,trailingIcon:P,measure:v,isFocused:N,isError:w,isDisabled:j,children:["lable"===C&&/*#__PURE__*/r(l,f(p({isFixed:!!h},q),{ref:u})),"default"===C&&/*#__PURE__*/r(c,f(p({},q),{ref:u}))]})}),z&&/*#__PURE__*/r(s,{errorMessage:M,supportMessage:S,currentLength:B,maxLength:O,isMaxLengthVisible:E})]})}));m.displayName="TextField";export{m as default};
|
|
@@ -45,5 +45,5 @@ export interface TextareaProps extends ComponentProps<'textarea'> {
|
|
|
45
45
|
* />
|
|
46
46
|
* ```
|
|
47
47
|
*/
|
|
48
|
-
declare const Textarea: ({ isError, size, resize, isLengthVisible, supportText, errorText, maxLength, value, disabled, name, onChange, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
declare const Textarea: ({ isError, size, resize, isLengthVisible, supportText, errorText, maxLength, value, disabled, name, onChange, onBlur, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
|
|
49
49
|
export default Textarea;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r}from"react";import{twMerge as n}from"tailwind-merge";import o from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import a from"../../DataDisplays/SystemIcon/SystemIcon.js";import i from"../TextFieldContainer/TextFieldContainer.js";import s from"../SupportTextContainer/SupportTextContainer.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
|
|
1
|
+
"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r}from"react";import{twMerge as n}from"tailwind-merge";import o from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import a from"../../DataDisplays/SystemIcon/SystemIcon.js";import i from"../TextFieldContainer/TextFieldContainer.js";import s from"../SupportTextContainer/SupportTextContainer.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 u(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){l(e,t,r[t])}))}return e}function m(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}
|
|
2
2
|
/**
|
|
3
3
|
* 사용자가 여러 줄의 텍스트를 입력할 수 있는 textarea 컴포넌트입니다.
|
|
4
4
|
*
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
* supportText="최대 1000자까지 입력 가능합니다"
|
|
34
34
|
* />
|
|
35
35
|
* ```
|
|
36
|
-
*/(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const c=l=>{var{isError:c=!1,size:p="md",resize:f=!1,isLengthVisible:d=!1,supportText:g,errorText:x,maxLength:y,value:b,disabled:h,name:O,onChange:j}=l,
|
|
36
|
+
*/(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const c=l=>{var{isError:c=!1,size:p="md",resize:f=!1,isLengthVisible:d=!1,supportText:g,errorText:x,maxLength:y,value:b,disabled:h,name:O,onChange:j,onBlur:v}=l,w=m(l,["isError","size","resize","isLengthVisible","supportText","errorText","maxLength","value","disabled","name","onChange","onBlur"]);const[L,z]=r(!1),B=c||g||d;/*#__PURE__*/
|
|
37
37
|
return e(o,{"data-testid":"design-system-textarea",className:"flex h-fit w-full flex-col gap-2",children:[
|
|
38
|
-
/*#__PURE__*/e(i,{isDisabled:h,isError:c,isFocused:
|
|
39
|
-
/*#__PURE__*/t("textarea",
|
|
38
|
+
/*#__PURE__*/e(i,{isDisabled:h,isError:c,isFocused:L,isTextarea:!0,children:[
|
|
39
|
+
/*#__PURE__*/t("textarea",u({"data-testid":"design-system-textarea--textarea",className:n("w-full overflow-y-scroll py-[11px] pl-4 font-[inherit] font-normal tracking-default text-w-gray-600 outline-none scrollbar-list placeholder:font-[inherit] placeholder:tracking-default placeholder:text-w-gray-300","sm"===p?"min-h-[118px]":"md"===p?"min-h-[238px]":"lg"===p?"min-h-[358px]":void 0,f?"resize-y":"resize-none",h&&"resize-none"),name:O,value:b,disabled:h,onChange:j,maxLength:y,onFocus:e=>{z(!0)},onBlur:e=>{z(!1),v&&v(e)}},w)),f&&/*#__PURE__*/t(a,{name:"small_resizer",className:"absolute bottom-[5px] right-[5px] text-w-gray-400",testId:"design-system-textarea--resize-icon"})]}),B&&/*#__PURE__*/t(s,{errorMessage:x,supportMessage:g,currentLength:(null==b?void 0:b.toString().length)||0,maxLength:y,isMaxLengthVisible:d})]})};export{c as default};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use client";import{jsx as e}from"react/jsx-runtime";import{useState as r,useEffect as t,Children as n,cloneElement as i,Fragment as a,useContext as
|
|
1
|
+
"use client";import{jsx as e}from"react/jsx-runtime";import{useState as r,useEffect as t,Children as n,cloneElement as i,Fragment as a,useContext as c,createContext as o}from"react";import{twJoin as l,twMerge as s}from"tailwind-merge";import b from"../../Base/Typography/Typography.js";import u from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";function d(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function m(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){d(e,r,t[r])}))}return e}function p(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const y=/*#__PURE__*/o({activeTab:0,currentActiveTab:0,handleTabClick:e=>{}}),f=({children:n,currentActiveTab:i=0,onChange:a})=>{const[c,o]=r(i);return t((()=>{i!==c&&o(i);
|
|
2
2
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3
|
-
}),[i]),/*#__PURE__*/e(y.Provider,{value:{activeTab:
|
|
4
|
-
return e(
|
|
5
|
-
return e(a,{children:n},t)}))})})})},
|
|
3
|
+
}),[i]),/*#__PURE__*/e(y.Provider,{value:{activeTab:c,currentActiveTab:i,handleTabClick:e=>{e!==c&&(null==a||a(e),o(e))}},children:n})},h=({children:r,className:t})=>{const c=n.toArray(r);/*#__PURE__*/
|
|
4
|
+
return e(u,{className:l("relative block w-full",t),"data-testid":"design-system-boxTab--container",children:/*#__PURE__*/e(u,{children:/*#__PURE__*/e(u,{className:s("inline-flex w-full"),children:c.map(((r,t)=>{const n=/*#__PURE__*/i(r,{isFirst:0===t,isLast:t===c.length-1});/*#__PURE__*/
|
|
5
|
+
return e(a,{children:n},t)}))})})})},g=({children:r,index:t,className:n,isFirst:i,isLast:a,disabled:o=!1,href:l})=>{const{handleTabClick:d,activeTab:f}=c(y),h=t===f,g={tabIndex:0,"data-testid":`design-system-boxTab--item-${t}`,className:s("group flex w-full cursor-pointer items-center border border-w-gray-200 bg-w-white px-6 py-4 hover:bg-w-gray-10","relative","-ml-px",h&&"z-[1] border-primary bg-primary-10 hover:bg-primary-10",i&&"ml-0 rounded-l-xl",a&&"rounded-r-xl",n),onClick:()=>{!o&&d(t)}},O=/*#__PURE__*/e(u,{className:s("relative flex w-full flex-row items-center justify-center font-normal text-w-gray-600",h&&"font-medium text-primary"),children:/*#__PURE__*/e(b,{variant:"body1",className:"relative",children:r})});return l?/*#__PURE__*/e("a",p(m({href:l},g),{children:O})):/*#__PURE__*/e(u,p(m({},g),{children:O}))},O=({children:r,index:t})=>{const{activeTab:n}=c(y);return n===t&&/*#__PURE__*/e(u,{"data-testid":"design-system-boxTab--content",children:r})};
|
|
6
6
|
/**
|
|
7
7
|
* BoxTab의 최상위 컴포넌트입니다.
|
|
8
8
|
* 탭의 상태를 관리하고 하위 컴포넌트에 Context를 제공합니다.
|
|
@@ -23,4 +23,4 @@ return e(a,{children:n},t)}))})})})},O=({children:r,index:t,className:n,isFirst:
|
|
|
23
23
|
* <BoxTab.Panel index={1}>패널 2 내용</BoxTab.Panel>
|
|
24
24
|
* </BoxTab.Root>
|
|
25
25
|
* ```
|
|
26
|
-
*/export{
|
|
26
|
+
*/export{O as Panel,f as Root,g as Tab,h as Tabs};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as r,useEffect as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as r,useEffect as a,useContext as n,useRef as o,Children as i,createContext as l}from"react";import{twJoin as s,twMerge as c}from"tailwind-merge";import u from"../../Base/Typography/Typography.js";import d from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import m from"../../DataDisplays/SystemIcon/SystemIcon.js";import 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]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.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,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const g=/*#__PURE__*/l({barColor:"bg-w-gray-900",activeTab:0,currentActiveTab:0,isFit:!0,hasPadding:!1,isFull:!1,handleTabClick:e=>{}}),h=({children:t,currentActiveTab:n=0,isFit:o=!0,hasPadding:i=!1,isFull:l=!1,barColor:s="bg-w-gray-900",onChange:c})=>{const[u,d]=r(n);return a((()=>{n!==u&&d(n);
|
|
2
2
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3
|
-
}),[
|
|
4
|
-
/*#__PURE__*/e(
|
|
5
|
-
/*#__PURE__*/e("span",{ref:
|
|
6
|
-
/*#__PURE__*/e(
|
|
3
|
+
}),[n]),/*#__PURE__*/e(g.Provider,{value:{barColor:s,activeTab:u,currentActiveTab:n,isFit:o,hasPadding:i,handleTabClick:e=>{e!==u&&(null==c||c(e),d(e))},isFull:l},children:t})},x=({children:l,className:u})=>{const{activeTab:m,hasPadding:f,isFull:b,barColor:p}=n(g),y=o([]),h=o(null),x=o(null),w=i.toArray(l),[v,O]=r(!1);return a((()=>{if(!y.current[m]||!h.current||v)return;const e=y.current[m],t=h.current,r=x.current;if(e&&t&&r){const{offsetLeft:a,offsetWidth:n}=e,{scrollLeft:o,clientWidth:i}=r;t.style.width=`${n}px`,t.style.transform=`translateX(${a}px)`;if(!(o<=a&&o+i>=a+n)){const t=setTimeout((()=>{e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}),0);return()=>clearTimeout(t)}}}),[m,v]),/*#__PURE__*/t(d,{ref:x,className:s("relative block w-full touch-pan-x items-start overflow-x-scroll border-b border-w-gray-200 scrollbar-hide",f&&"px-9",u),"data-testid":"design-system-textTab--container",onTouchStart:()=>{O(!0)},onTouchEnd:()=>{O(!1)},children:[
|
|
4
|
+
/*#__PURE__*/e(d,{className:c("inline-flex w-max gap-10",b&&"w-full gap-0"),children:w.map(((t,r)=>/*#__PURE__*/e(d,{className:c(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:s("absolute bottom-0 left-0 h-0.5 rounded-t-lg transition-all duration-300 ease-out",p)})]})},w=({children:r,index:a,className:o,disabled:i=!1,badgeNumber:l,iconName:s,href:b})=>{const{isFit:h,handleTabClick:x,activeTab:w,isFull:v}=n(g),O=a===w,j={tabIndex:0,"data-testid":`design-system-textTab--item-${a}`,className:c("group flex w-max cursor-pointer items-center rounded-xl hover:font-medium",i&&"cursor-not-allowed",v&&"w-full",o),onClick:()=>{!i&&x(a)}},T=/*#__PURE__*/t(d,{className:c("relative flex w-full 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",O&&"font-medium text-w-gray-900"),children:[s&&/*#__PURE__*/e(d,{className:"flex size-4 flex-shrink-0 items-center justify-center",children:/*#__PURE__*/e(m,{name:s,className:c("size-4 text-w-gray-600 group-hover:text-w-gray-900",O&&"text-w-gray-900")})}),
|
|
6
|
+
/*#__PURE__*/e(u,{variant:"body1",className:"relative",children:r}),void 0!==l&&/*#__PURE__*/e(f,{text:l,showZero:!0,className:"relative",variant:"gray"})]});return b?/*#__PURE__*/e("a",y(p({href:b},j),{children:T})):/*#__PURE__*/e(d,y(p({},j),{children:T}))},v=({children:t,index:r})=>{const{activeTab:a}=n(g);return a===r&&/*#__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{
|
|
29
|
+
*/export{v as Panel,h as Root,w as Tab,x as Tabs};
|
|
@@ -3,7 +3,7 @@ interface UseBottomModalContainerProps {
|
|
|
3
3
|
onClose: () => void;
|
|
4
4
|
}
|
|
5
5
|
declare const useBottomModalContainer: ({ onClose }: UseBottomModalContainerProps) => {
|
|
6
|
-
containerRef: import("react").RefObject<HTMLDivElement>;
|
|
6
|
+
containerRef: import("react").RefObject<HTMLDivElement | null>;
|
|
7
7
|
isDragging: boolean;
|
|
8
8
|
currentTranslate: number;
|
|
9
9
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{jsxs as t,jsx as i}from"react/jsx-runtime";import{twMerge as e}from"tailwind-merge";import{useState as o}from"react";import s from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"@wishket/yogokit";import"react-dom";import r from"../../DataDisplays/SystemIcon/SystemIcon.js";import
|
|
1
|
+
"use client";import{jsxs as t,jsx as i}from"react/jsx-runtime";import{twMerge as e}from"tailwind-merge";import{useState as o}from"react";import s from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"@wishket/yogokit";import"react-dom";import r from"../../DataDisplays/SystemIcon/SystemIcon.js";import a from"../../Feedbacks/RichTooltip/RichTooltip.js";import"../../Feedbacks/GlobalLoadingIndicator/GlobalLoadingIndicator.js";
|
|
2
2
|
/**
|
|
3
3
|
* 정보 아이콘과 함께 리치 툴팁을 표시하는 래퍼 컴포넌트입니다.
|
|
4
4
|
*
|
|
@@ -27,6 +27,6 @@
|
|
|
27
27
|
* >
|
|
28
28
|
* <p>추가 배송 정보는 여기에 표시됩니다.</p>
|
|
29
29
|
* </WithRichTooltip>
|
|
30
|
-
*/const m=({size:m="md",variant:l="right",title:
|
|
30
|
+
*/const m=({size:m="md",variant:l="right",title:c,description:n,children:d,className:p})=>{const h="md"===m?"medium_information":"small_information",f="right"===l,g="down"===l,[u,y]=o(!1);/*#__PURE__*/
|
|
31
31
|
return t(s,{className:"relative h-fit w-fit","data-testid":"design-system-withRichTooltip",children:[
|
|
32
|
-
/*#__PURE__*/i(s,{"data-testid":"design-system-withRichTooltip--trigger",className:"flex h-fit w-fit shrink-0 items-center justify-center",onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),onClick:()=>y((t=>!t)),children:/*#__PURE__*/i(r,{name:h,className:"text-w-gray-400",testId:"md"===m?"design-system-withRichTooltip--trigger-icon-md":"design-system-withRichTooltip--trigger-icon-sm"})}),u&&/*#__PURE__*/i(a,{title:
|
|
32
|
+
/*#__PURE__*/i(s,{"data-testid":"design-system-withRichTooltip--trigger",className:"flex h-fit w-fit shrink-0 items-center justify-center",onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),onClick:()=>y((t=>!t)),children:/*#__PURE__*/i(r,{name:h,className:"text-w-gray-400",testId:"md"===m?"design-system-withRichTooltip--trigger-icon-md":"design-system-withRichTooltip--trigger-icon-sm"})}),u&&/*#__PURE__*/i(a,{title:c,description:n,className:e("absolute",f&&"left-[calc(100%_+_12px)] top-0",g&&"left-0 top-[calc(100%_+_12px)]",p),children:d})]})};export{m as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as e,jsx as a}from"react/jsx-runtime";import{twJoin as t}from"tailwind-merge";import s from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import"@wishket/yogokit";import"react-dom";import
|
|
1
|
+
import{jsxs as e,jsx as a}from"react/jsx-runtime";import{twJoin as t}from"tailwind-merge";import s from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import"@wishket/yogokit";import"react-dom";import o from"../../Feedbacks/SnackBar/SnackBar.js";import"../../Feedbacks/GlobalLoadingIndicator/GlobalLoadingIndicator.js";
|
|
2
2
|
/**
|
|
3
3
|
* 스낵바를 포함하는 래퍼 컴포넌트입니다.
|
|
4
4
|
* 자식 컴포넌트 상단에 알림 메시지를 표시할 수 있습니다.
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime")
|
|
2
|
-
/*#__PURE__*/e.jsx(
|
|
3
|
-
/*#__PURE__*/e.jsx(
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("tailwind-merge"),require("react");var s=require("../../DataDisplays/SystemIcon/SystemIcon.js"),a=require("../../Base/Typography/Typography.js"),r=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");exports.ExternalLinks=({links:t})=>/*#__PURE__*/e.jsx(r.default,{className:"flex h-auto w-full flex-col gap-3 p-6","data-testid":"design-system-message-box--external-links-container",children:null==t?void 0:t.map(((r,t)=>/*#__PURE__*/e.jsxs("a",{target:r.target||"_blank",href:r.url,className:"flex items-center justify-between text-w-gray-600 no-underline","data-testid":`design-system-message-box--external-links-item-${t}`,children:[
|
|
2
|
+
/*#__PURE__*/e.jsx(a.default,{variant:"body1",className:"hover:underline hover:underline-offset-2",children:r.title}),
|
|
3
|
+
/*#__PURE__*/e.jsx(s.default,{name:"small_arrow_right"})]},`${r.title}-${r.url}`)))});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("tailwind-merge"),n=require("../TextFieldContainer/TextFieldContainer.js"),a=require("../SupportTextContainer/SupportTextContainer.js");require("../Input/Input.js"),require("../Input/PasswordInput.js");var s=require("../Input/LableInput.js"),o=require("../Input/InputTypeSelector.js");function
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("tailwind-merge"),n=require("../TextFieldContainer/TextFieldContainer.js"),a=require("../SupportTextContainer/SupportTextContainer.js");require("../Input/Input.js"),require("../Input/PasswordInput.js");var s=require("../Input/LableInput.js"),o=require("../Input/InputTypeSelector.js");function l(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function i(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){l(e,r,t[r])}))}return e}function u(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function c(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},s=Object.keys(e);for(n=0;n<s.length;n++)t=s[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}
|
|
2
2
|
/**
|
|
3
3
|
* 사용자 입력을 받을 수 있는 텍스트 필드 컴포넌트입니다.
|
|
4
4
|
*
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
* maxLength={50}
|
|
40
40
|
* isMaxLengthVisible={true}
|
|
41
41
|
* />
|
|
42
|
-
*/(e,r);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n<s.length;n++)t=s[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}const p=/*#__PURE__*/r.forwardRef(((
|
|
43
|
-
/*#__PURE__*/e.jsx("label",{role:"input-box",className:y?"cursor-not-allowed":"cursor-text",children:/*#__PURE__*/e.jsxs(n.default,{leadingIcon:I,trailingIcon:w,measure:h,isFocused:
|
|
42
|
+
*/(e,r);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n<s.length;n++)t=s[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}const p=/*#__PURE__*/r.forwardRef(((l,p)=>{var{type:f,name:d,value:b,onChange:g,maxLength:j,disabled:y=!1,placeholder:O,lable:m,testId:x,measure:h,isError:v,endIcon:w,startIcon:I,errorMessage:P,supportMessage:M,variant:S="default",isMaxLengthVisible:q=!1,className:L,onBlur:E}=l,C=c(l,["type","name","value","onChange","maxLength","disabled","placeholder","lable","testId","measure","isError","endIcon","startIcon","errorMessage","supportMessage","variant","isMaxLengthVisible","className","onBlur"]);const[F,D]=r.useState(!1),[T,N]=r.useState(0),k=i({variant:S,type:f,name:d,value:b,placeholder:O,lable:m,maxLength:j,onChange:g,isFocused:F,isError:v,onFocus:()=>{D(!0)},disabled:y,onBlur:e=>{D(!1),E&&E(e)}},C),B=v||M||q;return r.useEffect((()=>{"string"==typeof b&&j&&N(b.length)}),[b,j]),/*#__PURE__*/e.jsxs("div",{className:t.twMerge("flex min-w-fit select-none flex-col gap-2 tracking-default",L),"data-testid":x,children:[
|
|
43
|
+
/*#__PURE__*/e.jsx("label",{role:"input-box",className:y?"cursor-not-allowed":"cursor-text",children:/*#__PURE__*/e.jsxs(n.default,{leadingIcon:I,trailingIcon:w,measure:h,isFocused:F,isError:v,isDisabled:y,children:["lable"===S&&/*#__PURE__*/e.jsx(s.default,u(i({isFixed:!!O},k),{ref:p})),"default"===S&&/*#__PURE__*/e.jsx(o.default,u(i({},k),{ref:p}))]})}),B&&/*#__PURE__*/e.jsx(a.default,{errorMessage:P,supportMessage:M,currentLength:T,maxLength:j,isMaxLengthVisible:q})]})}));p.displayName="TextField",exports.default=p;
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
* supportText="최대 1000자까지 입력 가능합니다"
|
|
34
34
|
* />
|
|
35
35
|
* ```
|
|
36
|
-
*/(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n<s.length;n++)r=s[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}exports.default=l=>{var{isError:c=!1,size:d="md",resize:x=!1,isLengthVisible:p=!1,supportText:f,errorText:g,maxLength:m,value:y,disabled:b,name:h,onChange:j}=l,
|
|
36
|
+
*/(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n<s.length;n++)r=s[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}exports.default=l=>{var{isError:c=!1,size:d="md",resize:x=!1,isLengthVisible:p=!1,supportText:f,errorText:g,maxLength:m,value:y,disabled:b,name:h,onChange:j,onBlur:O}=l,v=u(l,["isError","size","resize","isLengthVisible","supportText","errorText","maxLength","value","disabled","name","onChange","onBlur"]);const[w,L]=t.useState(!1),S=c||f||p;/*#__PURE__*/
|
|
37
37
|
return e.jsxs(n.default,{"data-testid":"design-system-textarea",className:"flex h-fit w-full flex-col gap-2",children:[
|
|
38
|
-
/*#__PURE__*/e.jsxs(s.default,{isDisabled:b,isError:c,isFocused:
|
|
39
|
-
/*#__PURE__*/e.jsx("textarea",o({"data-testid":"design-system-textarea--textarea",className:r.twMerge("w-full overflow-y-scroll py-[11px] pl-4 font-[inherit] font-normal tracking-default text-w-gray-600 outline-none scrollbar-list placeholder:font-[inherit] placeholder:tracking-default placeholder:text-w-gray-300","sm"===d?"min-h-[118px]":"md"===d?"min-h-[238px]":"lg"===d?"min-h-[358px]":void 0,x?"resize-y":"resize-none",b&&"resize-none"),name:h,value:y,disabled:b,onChange:j,maxLength:m,onFocus:e=>{
|
|
38
|
+
/*#__PURE__*/e.jsxs(s.default,{isDisabled:b,isError:c,isFocused:w,isTextarea:!0,children:[
|
|
39
|
+
/*#__PURE__*/e.jsx("textarea",o({"data-testid":"design-system-textarea--textarea",className:r.twMerge("w-full overflow-y-scroll py-[11px] pl-4 font-[inherit] font-normal tracking-default text-w-gray-600 outline-none scrollbar-list placeholder:font-[inherit] placeholder:tracking-default placeholder:text-w-gray-300","sm"===d?"min-h-[118px]":"md"===d?"min-h-[238px]":"lg"===d?"min-h-[358px]":void 0,x?"resize-y":"resize-none",b&&"resize-none"),name:h,value:y,disabled:b,onChange:j,maxLength:m,onFocus:e=>{L(!0)},onBlur:e=>{L(!1),O&&O(e)}},v)),x&&/*#__PURE__*/e.jsx(a.default,{name:"small_resizer",className:"absolute bottom-[5px] right-[5px] text-w-gray-400",testId:"design-system-textarea--resize-icon"})]}),S&&/*#__PURE__*/e.jsx(i.default,{errorMessage:g,supportMessage:f,currentLength:(null==y?void 0:y.toString().length)||0,maxLength:m,isMaxLengthVisible:p})]})};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("tailwind-merge"),n=require("
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("tailwind-merge"),n=require("../../Base/Typography/Typography.js"),a=require("../../Base/Layouts/Box/Box.js");function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function l(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){i(e,r,t[r])}))}return e}function s(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}require("../../Base/Layouts/FullBleed/FullBleed.js");const c=/*#__PURE__*/r.createContext({activeTab:0,currentActiveTab:0,handleTabClick:e=>{}});
|
|
2
2
|
/**
|
|
3
3
|
* BoxTab의 최상위 컴포넌트입니다.
|
|
4
4
|
* 탭의 상태를 관리하고 하위 컴포넌트에 Context를 제공합니다.
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
* <BoxTab.Panel index={1}>패널 2 내용</BoxTab.Panel>
|
|
20
20
|
* </BoxTab.Root>
|
|
21
21
|
* ```
|
|
22
|
-
*/exports.Panel=({children:t,index:n})=>{const{activeTab:
|
|
22
|
+
*/exports.Panel=({children:t,index:n})=>{const{activeTab:i}=r.useContext(c);return i===n&&/*#__PURE__*/e.jsx(a.default,{"data-testid":"design-system-boxTab--content",children:t})},exports.Root=({children:t,currentActiveTab:n=0,onChange:a})=>{const[i,l]=r.useState(n);return r.useEffect((()=>{n!==i&&l(n);
|
|
23
23
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
24
|
-
}),[n]),/*#__PURE__*/e.jsx(
|
|
25
|
-
return e.jsx(
|
|
24
|
+
}),[n]),/*#__PURE__*/e.jsx(c.Provider,{value:{activeTab:i,currentActiveTab:n,handleTabClick:e=>{e!==i&&(null==a||a(e),l(e))}},children:t})},exports.Tab=({children:i,index:o,className:u,isFirst:d,isLast:b,disabled:f=!1,href:p})=>{const{handleTabClick:y,activeTab:x}=r.useContext(c),m=o===x,g={tabIndex:0,"data-testid":`design-system-boxTab--item-${o}`,className:t.twMerge("group flex w-full cursor-pointer items-center border border-w-gray-200 bg-w-white px-6 py-4 hover:bg-w-gray-10","relative","-ml-px",m&&"z-[1] border-primary bg-primary-10 hover:bg-primary-10",d&&"ml-0 rounded-l-xl",b&&"rounded-r-xl",u),onClick:()=>{!f&&y(o)}},h=/*#__PURE__*/e.jsx(a.default,{className:t.twMerge("relative flex w-full flex-row items-center justify-center font-normal text-w-gray-600",m&&"font-medium text-primary"),children:/*#__PURE__*/e.jsx(n.default,{variant:"body1",className:"relative",children:i})});return p?/*#__PURE__*/e.jsx("a",s(l({href:p},g),{children:h})):/*#__PURE__*/e.jsx(a.default,s(l({},g),{children:h}))},exports.Tabs=({children:n,className:i})=>{const l=r.Children.toArray(n);/*#__PURE__*/
|
|
25
|
+
return e.jsx(a.default,{className:t.twJoin("relative block w-full",i),"data-testid":"design-system-boxTab--container",children:/*#__PURE__*/e.jsx(a.default,{children:/*#__PURE__*/e.jsx(a.default,{className:t.twMerge("inline-flex w-full"),children:l.map(((t,n)=>{const a=/*#__PURE__*/r.cloneElement(t,{isFirst:0===n,isLast:n===l.length-1});/*#__PURE__*/
|
|
26
26
|
return e.jsx(r.Fragment,{children:a},n)}))})})})};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),a=require("
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),a=require("../../Base/Typography/Typography.js"),n=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var s=require("../../DataDisplays/SystemIcon/SystemIcon.js"),l=require("../../DataDisplays/CountBadge/CountBadge.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 o(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.forEach((function(t){i(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,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}(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:a})=>{const{activeTab:
|
|
24
|
+
*/exports.Panel=({children:r,index:a})=>{const{activeTab:s}=t.useContext(u);return s===a&&/*#__PURE__*/e.jsx(n.default,{"data-testid":"design-system-textTab--content",children:r})},exports.Root=({children:r,currentActiveTab:a=0,isFit:n=!0,hasPadding:s=!1,isFull:l=!1,barColor:i="bg-w-gray-900",onChange:o})=>{const[c,d]=t.useState(a);return t.useEffect((()=>{a!==c&&d(a);
|
|
25
25
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
26
|
-
}),[a]),/*#__PURE__*/e.jsx(
|
|
27
|
-
/*#__PURE__*/e.jsx(
|
|
28
|
-
/*#__PURE__*/e.jsx(
|
|
26
|
+
}),[a]),/*#__PURE__*/e.jsx(u.Provider,{value:{barColor:i,activeTab:c,currentActiveTab:a,isFit:n,hasPadding:s,handleTabClick:e=>{e!==c&&(null==o||o(e),d(e))},isFull:l},children:r})},exports.Tab=({children:i,index:d,className:f,disabled:b=!1,badgeNumber:x,iconName:g,href:y})=>{const{isFit:m,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",b&&"cursor-not-allowed",w&&"w-full",f),onClick:()=>{!b&&p(d)}},O=/*#__PURE__*/e.jsxs(n.default,{className:r.twMerge("relative flex w-full flex-row items-center justify-center gap-2 py-4 font-normal text-w-gray-600 group-hover:text-w-gray-900",!m&&"px-[33.5px]",w&&"w-full px-0",j&&"font-medium text-w-gray-900"),children:[g&&/*#__PURE__*/e.jsx(n.default,{className:"flex size-4 flex-shrink-0 items-center justify-center",children:/*#__PURE__*/e.jsx(s.default,{name:g,className:r.twMerge("size-4 text-w-gray-600 group-hover:text-w-gray-900",j&&"text-w-gray-900")})}),
|
|
27
|
+
/*#__PURE__*/e.jsx(a.default,{variant:"body1",className:"relative",children:i}),void 0!==x&&/*#__PURE__*/e.jsx(l.default,{text:x,showZero:!0,className:"relative",variant:"gray"})]});return y?/*#__PURE__*/e.jsx("a",c(o({href:y},v),{children:O})):/*#__PURE__*/e.jsx(n.default,c(o({},v),{children:O}))},exports.Tabs=({children:a,className:s})=>{const{activeTab:l,hasPadding:i,isFull:o,barColor:c}=t.useContext(u),d=t.useRef([]),f=t.useRef(null),b=t.useRef(null),x=t.Children.toArray(a),[g,y]=t.useState(!1);return t.useEffect((()=>{if(!d.current[l]||!f.current||g)return;const e=d.current[l],t=f.current,r=b.current;if(e&&t&&r){const{offsetLeft:a,offsetWidth:n}=e,{scrollLeft:s,clientWidth:l}=r;t.style.width=`${n}px`,t.style.transform=`translateX(${a}px)`;if(!(s<=a&&s+l>=a+n)){const t=setTimeout((()=>{e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}),0);return()=>clearTimeout(t)}}}),[l,g]),/*#__PURE__*/e.jsxs(n.default,{ref:b,className:r.twJoin("relative block w-full touch-pan-x items-start overflow-x-scroll border-b border-w-gray-200 scrollbar-hide",i&&"px-9",s),"data-testid":"design-system-textTab--container",onTouchStart:()=>{y(!0)},onTouchEnd:()=>{y(!1)},children:[
|
|
28
|
+
/*#__PURE__*/e.jsx(n.default,{className:r.twMerge("inline-flex w-max gap-10",o&&"w-full gap-0"),children:x.map(((t,a)=>/*#__PURE__*/e.jsx(n.default,{className:r.twMerge(o&&"w-full"),ref:e=>{d.current[a]=e},children:t},a)))}),
|
|
29
29
|
/*#__PURE__*/e.jsx("span",{ref:f,"data-testid":`design-system-textTab--underbar-${l}`,className:r.twJoin("absolute bottom-0 left-0 h-0.5 rounded-t-lg transition-all duration-300 ease-out",c)})]})};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("tailwind-merge"),i=require("react"),s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("@wishket/yogokit"),require("react-dom");var r=require("../../DataDisplays/SystemIcon/SystemIcon.js")
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("tailwind-merge"),i=require("react"),s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("@wishket/yogokit"),require("react-dom");var r=require("../../DataDisplays/SystemIcon/SystemIcon.js"),a=require("../../Feedbacks/RichTooltip/RichTooltip.js");require("../../Feedbacks/GlobalLoadingIndicator/GlobalLoadingIndicator.js");exports.default=({size:o="md",variant:l="right",title:c,description:d,children:n,className:u})=>{const m="md"===o?"medium_information":"small_information",h="right"===l,g="down"===l,[f,p]=i.useState(!1);/*#__PURE__*/
|
|
2
2
|
return e.jsxs(s.default,{className:"relative h-fit w-fit","data-testid":"design-system-withRichTooltip",children:[
|
|
3
|
-
/*#__PURE__*/e.jsx(s.default,{"data-testid":"design-system-withRichTooltip--trigger",className:"flex h-fit w-fit shrink-0 items-center justify-center",onMouseEnter:()=>p(!0),onMouseLeave:()=>p(!1),onClick:()=>p((e=>!e)),children:/*#__PURE__*/e.jsx(r.default,{name:m,className:"text-w-gray-400",testId:"md"===o?"design-system-withRichTooltip--trigger-icon-md":"design-system-withRichTooltip--trigger-icon-sm"})}),f&&/*#__PURE__*/e.jsx(a.default,{title:
|
|
3
|
+
/*#__PURE__*/e.jsx(s.default,{"data-testid":"design-system-withRichTooltip--trigger",className:"flex h-fit w-fit shrink-0 items-center justify-center",onMouseEnter:()=>p(!0),onMouseLeave:()=>p(!1),onClick:()=>p((e=>!e)),children:/*#__PURE__*/e.jsx(r.default,{name:m,className:"text-w-gray-400",testId:"md"===o?"design-system-withRichTooltip--trigger-icon-md":"design-system-withRichTooltip--trigger-icon-sm"})}),f&&/*#__PURE__*/e.jsx(a.default,{title:c,description:d,className:t.twMerge("absolute",h&&"left-[calc(100%_+_12px)] top-0",g&&"left-0 top-[calc(100%_+_12px)]",u),children:n})]})};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("tailwind-merge"),
|
|
2
|
-
/*#__PURE__*/e.jsx(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("tailwind-merge"),s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("react"),require("@wishket/yogokit"),require("react-dom");var r=require("../../Feedbacks/SnackBar/SnackBar.js");require("../../Feedbacks/GlobalLoadingIndicator/GlobalLoadingIndicator.js");exports.default=({children:t,isOpen:l,message:i,type:d,onClose:n})=>/*#__PURE__*/e.jsxs(s.default,{"data-testid":"design-system-with-message-bar",children:[
|
|
2
|
+
/*#__PURE__*/e.jsx(s.default,{className:"w-full overflow-y-hidden",children:/*#__PURE__*/e.jsx(s.default,{className:a.twJoin("w-full transform overflow-y-hidden transition-all duration-300 ease-linear",l?"max-h-full translate-y-0":"max-h-0 -translate-y-full"),"data-testid":"design-system-with-message-bar--container",children:/*#__PURE__*/e.jsx(s.default,{className:"pt-8",children:/*#__PURE__*/e.jsx(r.default,{message:i,type:d,onClose:n})})})}),t]});
|
|
@@ -13,7 +13,7 @@ interface UseDropdownProps {
|
|
|
13
13
|
declare const useDropdown: ({ items, onItemClick, disabled }: UseDropdownProps) => {
|
|
14
14
|
isListOpen: boolean;
|
|
15
15
|
focusedIndex: number;
|
|
16
|
-
ref: import("react").
|
|
16
|
+
ref: import("react").RefObject<null>;
|
|
17
17
|
handleItemClick: (item: Item) => void;
|
|
18
18
|
toggleListOpen: (e?: MouseEvent) => void;
|
|
19
19
|
handleKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wishket/design-system",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Wishket Design System",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
39
|
"scripts": {
|
|
40
|
-
"dev": "next dev",
|
|
40
|
+
"dev": "next dev --turbopack",
|
|
41
41
|
"build": "rm -rf dist && yarn build:dts && rollup -c",
|
|
42
42
|
"start": "next start",
|
|
43
43
|
"build:dts": "tsc --project tsconfig.rollup.json --emitDeclarationOnly",
|
|
@@ -50,9 +50,9 @@
|
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@savvywombat/tailwindcss-grid-areas": "^4.0.0",
|
|
52
52
|
"@wishket/yogokit": "^0.2.0",
|
|
53
|
-
"next": "
|
|
54
|
-
"react": "
|
|
55
|
-
"react-dom": "
|
|
53
|
+
"next": "15.3.3",
|
|
54
|
+
"react": "19.1.0",
|
|
55
|
+
"react-dom": "19.1.0",
|
|
56
56
|
"tailwind-merge": "^2.2.2",
|
|
57
57
|
"tailwind-scrollbar-hide": "^1.1.7"
|
|
58
58
|
},
|
|
@@ -81,15 +81,15 @@
|
|
|
81
81
|
"@types/faker": "^6",
|
|
82
82
|
"@types/jest": "^29.5.11",
|
|
83
83
|
"@types/node": "^20.11.0",
|
|
84
|
-
"@types/react": "
|
|
85
|
-
"@types/react-dom": "
|
|
84
|
+
"@types/react": "19.1.7",
|
|
85
|
+
"@types/react-dom": "19.1.6",
|
|
86
86
|
"@wishket/eslint-config-wishket": "^1.1.0",
|
|
87
87
|
"autoprefixer": "^10.4.18",
|
|
88
88
|
"babel-jest": "^29.7.0",
|
|
89
89
|
"chromatic": "^11.7.0",
|
|
90
90
|
"dotenv": "^16.3.1",
|
|
91
91
|
"eslint": "^8",
|
|
92
|
-
"eslint-config-next": "
|
|
92
|
+
"eslint-config-next": "15.3.3",
|
|
93
93
|
"eslint-plugin-storybook": "^0.6.15",
|
|
94
94
|
"jest": "^29.7.0",
|
|
95
95
|
"jest-dom": "^4.0.0",
|
|
@@ -117,5 +117,9 @@
|
|
|
117
117
|
"*.less",
|
|
118
118
|
"*.styl"
|
|
119
119
|
],
|
|
120
|
-
"packageManager": "yarn@4.0.2"
|
|
120
|
+
"packageManager": "yarn@4.0.2",
|
|
121
|
+
"resolutions": {
|
|
122
|
+
"@types/react": "19.1.7",
|
|
123
|
+
"@types/react-dom": "19.1.6"
|
|
124
|
+
}
|
|
121
125
|
}
|