@wishket/design-system 1.13.18 → 1.15.0
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/DataDisplays/Li/Li.d.ts +34 -0
- package/dist/Components/Inputs/Checkbox/Checkbox.js +5 -5
- package/dist/Components/Inputs/Radio/Radio.js +9 -9
- package/dist/Components/Inputs/SupportTextContainer/SupportTextContainer.js +2 -2
- package/dist/Components/Inputs/Textarea/Textarea.d.ts +10 -2
- package/dist/Components/Inputs/Textarea/Textarea.js +14 -6
- package/dist/Components/Navigations/TextTab/TextTab.parts.js +6 -6
- package/dist/cjs/Components/DataDisplays/Avatar/Avatar.js +7 -6
- package/dist/cjs/Components/Inputs/Checkbox/Checkbox.js +5 -5
- package/dist/cjs/Components/Inputs/Radio/Radio.js +7 -7
- package/dist/cjs/Components/Inputs/SupportTextContainer/SupportTextContainer.js +3 -3
- package/dist/cjs/Components/Inputs/Textarea/Textarea.js +14 -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};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
interface LiProps {
|
|
2
|
+
text: string;
|
|
3
|
+
bulletClassName?: string;
|
|
4
|
+
gap?: number;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* 리스트 아이템 컴포넌트입니다.
|
|
9
|
+
*
|
|
10
|
+
* @param {Object} props - 컴포넌트 프로퍼티
|
|
11
|
+
* @param {string} props.text - 리스트 아이템 텍스트
|
|
12
|
+
* @param {string} [props.bulletClassName] - 리스트 아이템 불릿 클래스명
|
|
13
|
+
* @param {number} [props.gap] - 리스트 아이템 간격
|
|
14
|
+
* @param {string} [props.className] - 컴포넌트에 적용할 추가 CSS 클래스명
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* // 기본 사용법
|
|
18
|
+
* <Li text="Li" />
|
|
19
|
+
*
|
|
20
|
+
* * // 간격 조절
|
|
21
|
+
* <Li text="Li" gap={1} />
|
|
22
|
+
*
|
|
23
|
+
* // 불릿 색상 조절
|
|
24
|
+
* <Li text="Li" bulletClassName="text-w-red-800" />
|
|
25
|
+
*
|
|
26
|
+
* // 커스텀 클래스와 함께 사용
|
|
27
|
+
* <Li text="Li" className="text-w-red-800" />
|
|
28
|
+
*
|
|
29
|
+
*/
|
|
30
|
+
declare const Li: ({ text, gap, bulletClassName, className, }: LiProps) => import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export default Li;
|
|
32
|
+
export declare const BulletIcon: ({ className }: {
|
|
33
|
+
className?: string;
|
|
34
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useState as
|
|
1
|
+
"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useState as o,useEffect as n,useCallback as c}from"react";import"tailwind-merge";import{Box as a}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{CheckboxButton as s}from"./Checkbox.parts.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]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){i(e,r,t[r])}))}return e}function u(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},c=Object.keys(e);for(o=0;o<c.length;o++)t=c[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}
|
|
2
2
|
/**
|
|
3
3
|
* @component
|
|
4
4
|
* @param {Object} props - 체크박스 컴포넌트 프로퍼티
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
* console.log('체크박스 상태:', e.target.checked);
|
|
28
28
|
* };
|
|
29
29
|
* <Checkbox onChange={handleChange} />
|
|
30
|
-
*/(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(
|
|
31
|
-
return e(
|
|
32
|
-
/*#__PURE__*/r("input",
|
|
33
|
-
/*#__PURE__*/r(
|
|
30
|
+
*/(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)t=c[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}const b=/*#__PURE__*/t(((t,i)=>{var{checked:b=!1,onChange:p,disabled:f=!1,isError:d=!1,type:m="box",className:y}=t,h=u(t,["checked","onChange","disabled","isError","type","className"]);const[g,O]=o(b),[j,k]=o(!1);n((()=>{O(b)}),[b]);const x=c((e=>{f||p&&(p(e),O(e.target.checked),e.target.checked||k(!1))}),[p,f]);/*#__PURE__*/
|
|
31
|
+
return e(a,{"data-testid":"design-system-checkbox",className:"group flex size-fit",children:[
|
|
32
|
+
/*#__PURE__*/r("input",l({ref:i,className:"absolute h-0 w-0 opacity-0",type:"checkbox",checked:g,onChange:x,onFocus:()=>{k(!0)},onBlur:()=>{k(!1)},disabled:f},h)),
|
|
33
|
+
/*#__PURE__*/r(s,{checked:g,disabled:f,isError:d,isFocused:j,type:m,className:y})]})}));b.displayName="Checkbox";export{b as Checkbox};
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{forwardRef as
|
|
1
|
+
"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{forwardRef as o}from"react";import{Box as i}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";function a(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]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){a(e,r,t[r])}))}return e}function n(e,r){if(null==e)return{};var t,o,i=function(e,r){if(null==e)return{};var t,o,i={},a=Object.keys(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const s=({isDisabled:e,isSelected:o=!1,isError:i,className:a})=>/*#__PURE__*/r("div",{className:t("relative box-border flex h-[18px] w-[18px] items-center justify-center rounded-full border p-[4px]",
|
|
2
2
|
// 체크되었고 비활성화 상태의 경우
|
|
3
|
-
|
|
3
|
+
o&&e?"bg-w-white border-primary-100 cursor-not-allowed":
|
|
4
4
|
// 비활성화 상태의 경우
|
|
5
5
|
e?"bg-w-gray-50 border-w-gray-200 cursor-not-allowed":
|
|
6
6
|
// 활성화 상태에서 체크되었고 오류가 없는 경우
|
|
7
|
-
i
|
|
7
|
+
o&&!i?"bg-w-white border-primary-500":
|
|
8
8
|
// 활성화 상태에서 체크되었고 오류가 있는 경우
|
|
9
|
-
i
|
|
9
|
+
o&&i?"bg-w-white border-w-red-500":
|
|
10
10
|
// 활성화 상태에서 체크되지 않았고 오류가 있는 경우
|
|
11
|
-
!i
|
|
12
|
-
return e(
|
|
13
|
-
/*#__PURE__*/r("input",
|
|
14
|
-
/*#__PURE__*/r(
|
|
11
|
+
!o&&i?"border-w-red-500":"bg-white border-w-gray-200 group-hover:border-primary-500 cursor-pointer",a),role:"radio-button",children:/*#__PURE__*/r("div",{className:t("size-2 rounded-full bg-primary transition-all duration-100 ease-in-out",!o&&"h-0 w-0",i&&"bg-w-red-500",e&&"bg-w-gray-200",o&&e&&"bg-primary-100")})}),d=/*#__PURE__*/o(((t,o)=>{var{value:a="",isSelected:d=!1,isDisabled:c=!1,isError:u=!1,className:b}=t,m=n(t,["value","isSelected","isDisabled","isError","className"]);/*#__PURE__*/
|
|
12
|
+
return e(i,{"data-testid":"design-system-radio",className:"group cursor-pointer",children:[
|
|
13
|
+
/*#__PURE__*/r("input",l({ref:o,type:"radio",className:"hidden",value:a,checked:d,disabled:c},m)),
|
|
14
|
+
/*#__PURE__*/r(s,{isSelected:d,isError:u,isDisabled:c,className:b})]})}));
|
|
15
15
|
/**
|
|
16
16
|
* 사용자가 여러 옵션 중 하나를 선택할 수 있는 라디오 버튼 컴포넌트입니다.
|
|
17
17
|
*
|
|
@@ -38,4 +38,4 @@ return e("label",{"data-testid":"design-system-radio",className:"group cursor-po
|
|
|
38
38
|
*
|
|
39
39
|
* // 커스텀 스타일
|
|
40
40
|
* <Radio value="option5" className="custom-radio" />
|
|
41
|
-
*/
|
|
41
|
+
*/d.displayName="Radio";export{d as Radio};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as r}from"../../Base/Layouts/Box/Box.js";import"tailwind-merge";import"../../Base/Layouts/FullBleed/FullBleed.js";const s=({errorMessage:s,supportMessage:o,currentLength:
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as r}from"../../Base/Layouts/Box/Box.js";import"tailwind-merge";import"../../Base/Layouts/FullBleed/FullBleed.js";const s=({errorMessage:s,supportMessage:o,currentLength:l,maxLength:i,isMaxLengthVisible:n})=>{const p=o||n;/*#__PURE__*/
|
|
2
2
|
return e(r,{className:"flex flex-col gap-2 px-[17px]","data-testid":"design-system--support-text-container",children:[s&&/*#__PURE__*/t(a,{variant:"body2",className:"text-w-red-500",children:s}),p&&/*#__PURE__*/e(r,{className:"flex gap-6",children:[
|
|
3
|
-
/*#__PURE__*/t(a,{variant:"body2",className:"flex-1 text-w-gray-400",children:o}),n&&/*#__PURE__*/e(a,{variant:"body2",className:"w-[72px] text-right text-w-gray-400",children:[
|
|
3
|
+
/*#__PURE__*/t(a,{variant:"body2",className:"flex-1 text-w-gray-400",children:o}),n&&/*#__PURE__*/e(a,{variant:"body2",className:"w-[72px] text-right text-w-gray-400",children:[null==l?void 0:l.toLocaleString(),"/",null==i?void 0:i.toLocaleString()]})]})]})};export{s as SupportTextContainer};
|
|
@@ -4,7 +4,7 @@ import { ComponentProps } from 'react';
|
|
|
4
4
|
*/
|
|
5
5
|
export interface TextareaProps extends ComponentProps<'textarea'> {
|
|
6
6
|
isError?: boolean;
|
|
7
|
-
size?: 'sm' | 'md' | 'lg';
|
|
7
|
+
size?: 'sm' | 'md' | 'lg' | 'full';
|
|
8
8
|
resize?: boolean;
|
|
9
9
|
supportText?: string;
|
|
10
10
|
errorText?: string;
|
|
@@ -15,7 +15,7 @@ export interface TextareaProps extends ComponentProps<'textarea'> {
|
|
|
15
15
|
*
|
|
16
16
|
* @param {Object} props
|
|
17
17
|
* @param {boolean} [props.isError] - 에러 상태를 표시합니다
|
|
18
|
-
* @param {('sm'|'md'|'lg')} [props.size='md'] - textarea의 크기를 지정합니다
|
|
18
|
+
* @param {('sm'|'md'|'lg'|'full')} [props.size='md'] - textarea의 크기를 지정합니다
|
|
19
19
|
* @param {boolean} [props.resize=false] - 크기 조절 가능 여부를 설정합니다
|
|
20
20
|
* @param {string} [props.supportText] - 도움말 텍스트를 표시합니다
|
|
21
21
|
* @param {string} [props.errorText] - 에러 메시지를 표시합니다
|
|
@@ -43,6 +43,14 @@ export interface TextareaProps extends ComponentProps<'textarea'> {
|
|
|
43
43
|
* isLengthVisible={true}
|
|
44
44
|
* supportText="최대 1000자까지 입력 가능합니다"
|
|
45
45
|
* />
|
|
46
|
+
*
|
|
47
|
+
* // 외부 컨테이너 높이에 맞게 최대로 확장
|
|
48
|
+
* <div className="h-96">
|
|
49
|
+
* <Textarea
|
|
50
|
+
* size="full"
|
|
51
|
+
* placeholder="컨테이너 높이에 맞게 확장됩니다"
|
|
52
|
+
* />
|
|
53
|
+
* </div>
|
|
46
54
|
* ```
|
|
47
55
|
*/
|
|
48
56
|
declare const Textarea: ({ isError, size, resize, isLengthVisible, supportText, errorText, maxLength, value, disabled, name, onChange, onBlur, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,10 +1,10 @@
|
|
|
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{Box as
|
|
1
|
+
"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r}from"react";import{twMerge as n,twJoin as o}from"tailwind-merge";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{SystemIcon as a}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{TextFieldContainer as i}from"../TextFieldContainer/TextFieldContainer.js";import{SupportTextContainer as s}from"../SupportTextContainer/SupportTextContainer.js";function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function m(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){u(e,t,r[t])}))}return e}function c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}
|
|
2
2
|
/**
|
|
3
3
|
* 사용자가 여러 줄의 텍스트를 입력할 수 있는 textarea 컴포넌트입니다.
|
|
4
4
|
*
|
|
5
5
|
* @param {Object} props
|
|
6
6
|
* @param {boolean} [props.isError] - 에러 상태를 표시합니다
|
|
7
|
-
* @param {('sm'|'md'|'lg')} [props.size='md'] - textarea의 크기를 지정합니다
|
|
7
|
+
* @param {('sm'|'md'|'lg'|'full')} [props.size='md'] - textarea의 크기를 지정합니다
|
|
8
8
|
* @param {boolean} [props.resize=false] - 크기 조절 가능 여부를 설정합니다
|
|
9
9
|
* @param {string} [props.supportText] - 도움말 텍스트를 표시합니다
|
|
10
10
|
* @param {string} [props.errorText] - 에러 메시지를 표시합니다
|
|
@@ -32,8 +32,16 @@
|
|
|
32
32
|
* isLengthVisible={true}
|
|
33
33
|
* supportText="최대 1000자까지 입력 가능합니다"
|
|
34
34
|
* />
|
|
35
|
+
*
|
|
36
|
+
* // 외부 컨테이너 높이에 맞게 최대로 확장
|
|
37
|
+
* <div className="h-96">
|
|
38
|
+
* <Textarea
|
|
39
|
+
* size="full"
|
|
40
|
+
* placeholder="컨테이너 높이에 맞게 확장됩니다"
|
|
41
|
+
* />
|
|
42
|
+
* </div>
|
|
35
43
|
* ```
|
|
36
|
-
*/(e,t);if(Object.getOwnPropertySymbols){var
|
|
37
|
-
return e(
|
|
38
|
-
/*#__PURE__*/e(i,{isDisabled:
|
|
39
|
-
/*#__PURE__*/t("textarea",m({"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"===
|
|
44
|
+
*/(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const p=u=>{var{isError:p=!1,size:f="md",resize:g=!1,isLengthVisible:x=!1,supportText:d,errorText:y,maxLength:h,value:b,disabled:j,name:O,onChange:v,onBlur:w}=u,S=c(u,["isError","size","resize","isLengthVisible","supportText","errorText","maxLength","value","disabled","name","onChange","onBlur"]);const[L,z]=r(!1),B=p||d||x;/*#__PURE__*/
|
|
45
|
+
return e(l,{"data-testid":"design-system-textarea",className:n("flex w-full flex-col gap-2","full"===f?"h-full":"h-fit"),children:[
|
|
46
|
+
/*#__PURE__*/e(i,{isDisabled:j,isError:p,isFocused:L,isTextarea:!0,className:o("full"===f&&"h-full"),children:[
|
|
47
|
+
/*#__PURE__*/t("textarea",m({"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"===f?"min-h-[118px]":"md"===f?"min-h-[238px]":"lg"===f?"min-h-[358px]":"full"===f?"min-h-full":void 0,g?"resize-y":"resize-none",j&&"resize-none"),name:O,value:b,disabled:j,onChange:v,maxLength:h,onFocus:e=>{z(!0)},onBlur:e=>{z(!1),w&&w(e)}},S)),g&&/*#__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:y,supportMessage:d,currentLength:(null==b?void 0:b.toString().length)||0,maxLength:h,isMaxLengthVisible:x})]})};export{p as Textarea};
|
|
@@ -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||v)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,v]),/*#__PURE__*/e(d,{ref:x,className:c("block w-full touch-pan-x items-start overflow-x-scroll scrollbar-list",f&&"px-9",O?"cursor-grabbing":"cursor-grab",u),"data-testid":"design-system-textTab--container",onTouchStart:()=>{j(!0)},onTouchEnd:()=>{j(!1)},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:"relative w-max border-b border-w-gray-200","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"),
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react");require("tailwind-merge");var t=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var c=require("./Checkbox.parts.js");function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},c=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(c=c.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),c.forEach((function(r){n(e,r,t[r])}))}return e}function s(e,r){if(null==e)return{};var t,c,n=function(e,r){if(null==e)return{};var t,c,n={},o=Object.keys(e);for(c=0;c<o.length;c++)t=o[c],r.indexOf(t)>=0||(n[t]=e[t]);return n}
|
|
2
2
|
/**
|
|
3
3
|
* @component
|
|
4
4
|
* @param {Object} props - 체크박스 컴포넌트 프로퍼티
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
* console.log('체크박스 상태:', e.target.checked);
|
|
28
28
|
* };
|
|
29
29
|
* <Checkbox onChange={handleChange} />
|
|
30
|
-
*/(e,
|
|
31
|
-
return e.jsxs(
|
|
32
|
-
/*#__PURE__*/e.jsx("input",
|
|
33
|
-
/*#__PURE__*/e.jsx(
|
|
30
|
+
*/(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(c=0;c<o.length;c++)t=o[c],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}const a=/*#__PURE__*/r.forwardRef(((n,a)=>{var{checked:u=!1,onChange:l,disabled:i=!1,isError:b=!1,type:d="box",className:f}=n,y=s(n,["checked","onChange","disabled","isError","type","className"]);const[p,h]=r.useState(u),[x,g]=r.useState(!1);r.useEffect((()=>{h(u)}),[u]);const j=r.useCallback((e=>{i||l&&(l(e),h(e.target.checked),e.target.checked||g(!1))}),[l,i]);/*#__PURE__*/
|
|
31
|
+
return e.jsxs(t.Box,{"data-testid":"design-system-checkbox",className:"group flex size-fit",children:[
|
|
32
|
+
/*#__PURE__*/e.jsx("input",o({ref:a,className:"absolute h-0 w-0 opacity-0",type:"checkbox",checked:p,onChange:j,onFocus:()=>{g(!0)},onBlur:()=>{g(!1)},disabled:i},y)),
|
|
33
|
+
/*#__PURE__*/e.jsx(c.CheckboxButton,{checked:p,disabled:i,isError:b,isFocused:x,type:d,className:f})]})}));a.displayName="Checkbox",exports.Checkbox=a;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),t=require("react");function
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),t=require("react"),i=require("../../Base/Layouts/Box/Box.js");function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){o(e,r,t[r])}))}return e}function s(e,r){if(null==e)return{};var t,i,o=function(e,r){if(null==e)return{};var t,i,o={},a=Object.keys(e);for(i=0;i<a.length;i++)t=a[i],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)t=a[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}require("../../Base/Layouts/FullBleed/FullBleed.js");const l=({isDisabled:t,isSelected:i=!1,isError:o,className:a})=>/*#__PURE__*/e.jsx("div",{className:r.twMerge("relative box-border flex h-[18px] w-[18px] items-center justify-center rounded-full border p-[4px]",
|
|
2
2
|
// 체크되었고 비활성화 상태의 경우
|
|
3
3
|
i&&t?"bg-w-white border-primary-100 cursor-not-allowed":
|
|
4
4
|
// 비활성화 상태의 경우
|
|
5
5
|
t?"bg-w-gray-50 border-w-gray-200 cursor-not-allowed":
|
|
6
6
|
// 활성화 상태에서 체크되었고 오류가 없는 경우
|
|
7
|
-
i&&!
|
|
7
|
+
i&&!o?"bg-w-white border-primary-500":
|
|
8
8
|
// 활성화 상태에서 체크되었고 오류가 있는 경우
|
|
9
|
-
i&&
|
|
9
|
+
i&&o?"bg-w-white border-w-red-500":
|
|
10
10
|
// 활성화 상태에서 체크되지 않았고 오류가 있는 경우
|
|
11
|
-
!i&&
|
|
12
|
-
return e.jsxs(
|
|
13
|
-
/*#__PURE__*/e.jsx("input",a({ref:t,type:"radio",className:"hidden",value:
|
|
14
|
-
/*#__PURE__*/e.jsx(
|
|
11
|
+
!i&&o?"border-w-red-500":"bg-white border-w-gray-200 group-hover:border-primary-500 cursor-pointer",a),role:"radio-button",children:/*#__PURE__*/e.jsx("div",{className:r.twMerge("size-2 rounded-full bg-primary transition-all duration-100 ease-in-out",!i&&"h-0 w-0",o&&"bg-w-red-500",t&&"bg-w-gray-200",i&&t&&"bg-primary-100")})}),n=/*#__PURE__*/t.forwardRef(((r,t)=>{var{value:o="",isSelected:n=!1,isDisabled:u=!1,isError:d=!1,className:c}=r,b=s(r,["value","isSelected","isDisabled","isError","className"]);/*#__PURE__*/
|
|
12
|
+
return e.jsxs(i.Box,{"data-testid":"design-system-radio",className:"group cursor-pointer",children:[
|
|
13
|
+
/*#__PURE__*/e.jsx("input",a({ref:t,type:"radio",className:"hidden",value:o,checked:n,disabled:u},b)),
|
|
14
|
+
/*#__PURE__*/e.jsx(l,{isSelected:n,isError:d,isDisabled:u,className:c})]})}));
|
|
15
15
|
/**
|
|
16
16
|
* 사용자가 여러 옵션 중 하나를 선택할 수 있는 라디오 버튼 컴포넌트입니다.
|
|
17
17
|
*
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("../../Base/Typography/Typography.js"),
|
|
2
|
-
return e.jsxs(
|
|
3
|
-
/*#__PURE__*/e.jsx(r.Typography,{variant:"body2",className:"flex-1 text-w-gray-400",children:t}),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("../../Base/Typography/Typography.js"),a=require("../../Base/Layouts/Box/Box.js");require("tailwind-merge"),require("../../Base/Layouts/FullBleed/FullBleed.js");exports.SupportTextContainer=({errorMessage:s,supportMessage:t,currentLength:i,maxLength:l,isMaxLengthVisible:o})=>{const x=t||o;/*#__PURE__*/
|
|
2
|
+
return e.jsxs(a.Box,{className:"flex flex-col gap-2 px-[17px]","data-testid":"design-system--support-text-container",children:[s&&/*#__PURE__*/e.jsx(r.Typography,{variant:"body2",className:"text-w-red-500",children:s}),x&&/*#__PURE__*/e.jsxs(a.Box,{className:"flex gap-6",children:[
|
|
3
|
+
/*#__PURE__*/e.jsx(r.Typography,{variant:"body2",className:"flex-1 text-w-gray-400",children:t}),o&&/*#__PURE__*/e.jsxs(r.Typography,{variant:"body2",className:"w-[72px] text-right text-w-gray-400",children:[null==i?void 0:i.toLocaleString(),"/",null==l?void 0:l.toLocaleString()]})]})]})};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),n=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var s=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var a=require("../TextFieldContainer/TextFieldContainer.js"),i=require("../SupportTextContainer/SupportTextContainer.js");function
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),n=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var s=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var a=require("../TextFieldContainer/TextFieldContainer.js"),i=require("../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 o(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 u(e,t){if(null==e)return{};var r,n,s=function(e,t){if(null==e)return{};var r,n,s={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(s[r]=e[r]);return s}
|
|
2
2
|
/**
|
|
3
3
|
* 사용자가 여러 줄의 텍스트를 입력할 수 있는 textarea 컴포넌트입니다.
|
|
4
4
|
*
|
|
5
5
|
* @param {Object} props
|
|
6
6
|
* @param {boolean} [props.isError] - 에러 상태를 표시합니다
|
|
7
|
-
* @param {('sm'|'md'|'lg')} [props.size='md'] - textarea의 크기를 지정합니다
|
|
7
|
+
* @param {('sm'|'md'|'lg'|'full')} [props.size='md'] - textarea의 크기를 지정합니다
|
|
8
8
|
* @param {boolean} [props.resize=false] - 크기 조절 가능 여부를 설정합니다
|
|
9
9
|
* @param {string} [props.supportText] - 도움말 텍스트를 표시합니다
|
|
10
10
|
* @param {string} [props.errorText] - 에러 메시지를 표시합니다
|
|
@@ -32,8 +32,16 @@
|
|
|
32
32
|
* isLengthVisible={true}
|
|
33
33
|
* supportText="최대 1000자까지 입력 가능합니다"
|
|
34
34
|
* />
|
|
35
|
+
*
|
|
36
|
+
* // 외부 컨테이너 높이에 맞게 최대로 확장
|
|
37
|
+
* <div className="h-96">
|
|
38
|
+
* <Textarea
|
|
39
|
+
* size="full"
|
|
40
|
+
* placeholder="컨테이너 높이에 맞게 확장됩니다"
|
|
41
|
+
* />
|
|
42
|
+
* </div>
|
|
35
43
|
* ```
|
|
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)&&(s[r]=e[r])}return s}exports.Textarea=
|
|
37
|
-
return e.jsxs(n.Box,{"data-testid":"design-system-textarea",className:"flex
|
|
38
|
-
/*#__PURE__*/e.jsxs(a.TextFieldContainer,{isDisabled:
|
|
39
|
-
/*#__PURE__*/e.jsx("textarea",
|
|
44
|
+
*/(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)&&(s[r]=e[r])}return s}exports.Textarea=l=>{var{isError:c=!1,size:x="md",resize:m=!1,isLengthVisible:p=!1,supportText:g,errorText:f,maxLength:d,value:y,disabled:h,name:b,onChange:j,onBlur:v}=l,w=u(l,["isError","size","resize","isLengthVisible","supportText","errorText","maxLength","value","disabled","name","onChange","onBlur"]);const[O,S]=t.useState(!1),T=c||g||p;/*#__PURE__*/
|
|
45
|
+
return e.jsxs(n.Box,{"data-testid":"design-system-textarea",className:r.twMerge("flex w-full flex-col gap-2","full"===x?"h-full":"h-fit"),children:[
|
|
46
|
+
/*#__PURE__*/e.jsxs(a.TextFieldContainer,{isDisabled:h,isError:c,isFocused:O,isTextarea:!0,className:r.twJoin("full"===x&&"h-full"),children:[
|
|
47
|
+
/*#__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"===x?"min-h-[118px]":"md"===x?"min-h-[238px]":"lg"===x?"min-h-[358px]":"full"===x?"min-h-full":void 0,m?"resize-y":"resize-none",h&&"resize-none"),name:b,value:y,disabled:h,onChange:j,maxLength:d,onFocus:e=>{S(!0)},onBlur:e=>{S(!1),v&&v(e)}},w)),m&&/*#__PURE__*/e.jsx(s.SystemIcon,{name:"small_resizer",className:"absolute bottom-[5px] right-[5px] text-w-gray-400",testId:"design-system-textarea--resize-icon"})]}),T&&/*#__PURE__*/e.jsx(i.SupportTextContainer,{errorMessage:f,supportMessage:g,currentLength:(null==y?void 0:y.toString().length)||0,maxLength:d,isMaxLengthVisible:p})]})};
|
|
@@ -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"),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");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:n}=t.useContext(u);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,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: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",c)})]})};
|
|
26
|
+
}),[s]),/*#__PURE__*/e.jsx(u.Provider,{value:{barColor:l,activeTab:c,currentActiveTab:s,isFit:a,hasPadding:n,handleTabClick:e=>{e!==c&&(null==i||i(e),d(e))},isFull:o},children:r})},exports.Tab=({children:l,index:d,className:x,disabled:f=!1,badgeNumber:b,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",f&&"cursor-not-allowed",w&&"w-full",x),onClick:()=>{!f&&p(d)}},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",!m&&"px-[33.5px]",w&&"w-full px-0",j&&"font-medium text-w-gray-900"),children:[g&&/*#__PURE__*/e.jsx(a.Box,{className:"flex size-4 flex-shrink-0 items-center justify-center",children:/*#__PURE__*/e.jsx(n.SystemIcon,{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(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(a.Box,c(i({},v),{children:T}))},exports.Tabs=({children:s,className:n})=>{const{activeTab:o,hasPadding:l,isFull:i,barColor:c}=t.useContext(u),d=t.useRef([]),x=t.useRef(null),f=t.useRef(null),b=t.Children.toArray(s),[g,y]=t.useState(!1),[m,p]=t.useState(!1),[h,w]=t.useState({x:0,scrollLeft:0});return t.useEffect((()=>{if(!d.current[o]||!x.current||g)return;const e=d.current[o],t=x.current,r=f.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,g]),/*#__PURE__*/e.jsx(a.Box,{ref:f,className:r.twJoin("block w-full touch-pan-x items-start overflow-x-scroll scrollbar-list",l&&"px-9",m?"cursor-grabbing":"cursor-grab",n),"data-testid":"design-system-textTab--container",onTouchStart:()=>{y(!0)},onTouchEnd:()=>{y(!1)},onMouseDown:e=>{f.current&&(p(!0),w({x:e.pageX,scrollLeft:f.current.scrollLeft}))},onMouseMove:e=>{if(!m||!f.current)return;e.preventDefault();const t=e.pageX-h.x;f.current.scrollLeft=h.scrollLeft-t},onMouseUp:()=>{p(!1)},onMouseLeave:()=>{p(!1)},children:/*#__PURE__*/e.jsxs(a.Box,{className:"relative w-max border-b border-w-gray-200","data-testid":"design-system-textTab--inner-container",children:[
|
|
28
|
+
/*#__PURE__*/e.jsx(a.Box,{className:r.twMerge("inline-flex w-max gap-10",i&&"w-full gap-0"),children:b.map(((t,s)=>/*#__PURE__*/e.jsx(a.Box,{className:r.twMerge(i&&"w-full"),ref:e=>{d.current[s]=e},children:t},s)))}),
|
|
29
|
+
/*#__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",c)})]})})};
|