@wishket/design-system 1.16.8 → 1.16.10
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/SystemIcon/Icons/Medium/MediumClip.js +1 -1
- package/dist/Components/Inputs/CheckboxCard/CheckboxCard.d.ts +1 -1
- package/dist/Components/Inputs/CheckboxCard/CheckboxCard.js +6 -6
- package/dist/Components/Inputs/CheckboxCard/CheckboxCard.parts.js +4 -4
- package/dist/Components/Inputs/CheckboxCard/CheckboxCard.types.d.ts +22 -10
- package/dist/Components/Inputs/RadioCard/RadioCard.d.ts +1 -1
- package/dist/Components/Inputs/RadioCard/RadioCard.js +6 -9
- package/dist/Components/Inputs/RadioCard/RadioCard.parts.d.ts +3 -3
- package/dist/Components/Inputs/RadioCard/RadioCard.types.d.ts +21 -5
- package/dist/Components/Inputs/SupportTextContainer/SupportTextContainer.js +2 -2
- package/dist/cjs/Components/DataDisplays/SystemIcon/Icons/Medium/MediumClip.js +1 -1
- package/dist/cjs/Components/Inputs/CheckboxCard/CheckboxCard.js +5 -50
- package/dist/cjs/Components/Inputs/CheckboxCard/CheckboxCard.parts.js +4 -4
- package/dist/cjs/Components/Inputs/RadioCard/RadioCard.js +5 -8
- package/dist/cjs/Components/Inputs/SupportTextContainer/SupportTextContainer.js +3 -3
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import"react";const e=({testId:e,className:
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import"react";const e=({testId:e,className:r})=>/*#__PURE__*/t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","data-testid":e,className:r,children:/*#__PURE__*/t("path",{d:"M2.34313 7.5563L7.29288 2.60655C8.85497 1.04445 11.3876 1.04445 12.9497 2.60655V2.60655C14.5118 4.16865 14.5118 6.70131 12.9497 8.2634L7.76428 13.4489C6.72288 14.4903 5.03444 14.4903 3.99304 13.4489V13.4489C2.95165 12.4075 2.95165 10.719 3.99304 9.67762L8.73537 4.93529C9.26649 4.40418 10.1276 4.40418 10.6587 4.93529V4.93529C11.1898 5.4664 11.1898 6.32751 10.6587 6.85862L6.32884 11.1885",stroke:"currentColor",strokeWidth:"1.4",strokeLinecap:"round"})});export{e as MediumClip};
|
|
@@ -44,5 +44,5 @@ import { CheckboxCardProps } from './CheckboxCard.types';
|
|
|
44
44
|
* checked={true}
|
|
45
45
|
* />
|
|
46
46
|
*/
|
|
47
|
-
declare const CheckboxCard: (
|
|
47
|
+
declare const CheckboxCard: (props: CheckboxCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
48
48
|
export { CheckboxCard };
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{twMerge as a}from"tailwind-merge";import{Typography as r}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{CheckboxCardContainer as s,StyledCheckbox as i,CheckboxCardIcon as d,TitleContainer as o}from"./CheckboxCard.parts.js";
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{twMerge as a}from"tailwind-merge";import{Typography as r}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{CheckboxCardContainer as s,StyledCheckbox as i,CheckboxCardIcon as d,TitleContainer as o}from"./CheckboxCard.parts.js";const c=c=>{const{disabled:l=!1,checked:n=!1,isError:m=!1,onChange:h,isWide:x=!1,containerClassName:p,className:y,iconName:g,title:b,description:u,testId:k,name:C,value:f}=c,B=null!=g?g:x?null:"receipt";/*#__PURE__*/
|
|
2
|
+
return e("label",{"data-testid":k,role:"checkbox-card",className:a("group",p),children:/*#__PURE__*/t(s,{"data-testid":"design-system-checkboxCard--container",checked:n,isError:m,isWide:x,disabled:l,className:y,children:[
|
|
3
|
+
/*#__PURE__*/e(i,{isWide:x,checked:n,onChange:h,isError:m,disabled:l,name:C,value:f}),B&&/*#__PURE__*/e(d,{isError:m,checked:n,iconName:B,disabled:l}),
|
|
4
|
+
/*#__PURE__*/t(o,{isWide:x,"data-testid":"design-system-checkboxCard--titleBox",children:[
|
|
5
|
+
/*#__PURE__*/e(r,{"data-testid":"design-system-checkboxCard--title",variant:"body1",className:a("font-medium",x?"text-left":"text-center",l?"text-w-gray-300":"text-w-gray-900"),children:b}),u&&/*#__PURE__*/e(r,{variant:"body2",className:a("font-normal",x?"text-left":"text-center",l?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-checkboxCard--description",children:u})]})]})})};
|
|
2
6
|
/**
|
|
3
7
|
* 체크박스와 함께 아이콘, 제목, 설명을 포함하는 카드 형태의 선택 컴포넌트입니다.
|
|
4
8
|
*
|
|
@@ -43,8 +47,4 @@
|
|
|
43
47
|
* isError={true}
|
|
44
48
|
* checked={true}
|
|
45
49
|
* />
|
|
46
|
-
*/
|
|
47
|
-
/*#__PURE__*/e(i,{isWide:h,checked:l,onChange:m,isError:n,disabled:c,name:u,value:C}),
|
|
48
|
-
/*#__PURE__*/e(d,{isError:n,checked:l,iconName:y,disabled:c}),
|
|
49
|
-
/*#__PURE__*/t(o,{isWide:h,"data-testid":"design-system-checkboxCard--titleBox",children:[
|
|
50
|
-
/*#__PURE__*/e(r,{"data-testid":"design-system-checkboxCard--title",variant:"body1",className:a("font-medium",h?"text-left":"text-center",c?"text-w-gray-300":"text-w-gray-900"),children:g}),b&&/*#__PURE__*/e(r,{variant:"body2",className:a("font-normal",h?"text-left":"text-center",c?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-checkboxCard--description",children:b})]})]})});export{c as CheckboxCard};
|
|
50
|
+
*/export{c as CheckboxCard};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{twMerge as r}from"tailwind-merge";import"react";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{ProductIcon as
|
|
2
|
-
return e("div",
|
|
3
|
-
return e(o,
|
|
4
|
-
return e("div",{className:r("flex size-[60px] flex-shrink-0 items-center justify-center",
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{twMerge as r,twJoin as t}from"tailwind-merge";import"react";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Box as o}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{ProductIcon as i}from"../../DataDisplays/ProductIcon/ProductIcon.js";import{Checkbox as n}from"../Checkbox/Checkbox.js";function c(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(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){c(e,r,t[r])}))}return e}function a(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function l(e,r){if(null==e)return{};var t,o,i=function(e,r){if(null==e)return{};var t,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const p=t=>{var{children:o,isWide:i,checked:n,isError:c,disabled:p,className:d}=t,b=l(t,["children","isWide","checked","isError","disabled","className"]);/*#__PURE__*/
|
|
2
|
+
return e("div",a(s({className:r("relative flex h-auto cursor-pointer items-center gap-2 rounded-xl border",i?"min-h-[94px] w-[298px] flex-row gap-3 px-5 py-4":"min-h-fit w-[224px] flex-col justify-center px-4 pb-6 pt-4",p?r("cursor-not-allowed",n&&!c?"border-primary-100":"border-w-gray-200"):c?"border-w-red-500":n?"border-primary-500":"border-w-gray-200 group-hover:border-primary",p?n&&!c?"bg-primary-10":"bg-w-gray-10":n?c?"bg-w-red-10":"bg-primary-10":"bg-w-white",d)},b),{children:o}))},d=({isWide:t,children:o})=>/*#__PURE__*/e("div",{className:r("flex h-auto w-full flex-col justify-between gap-0.5",t?"items-start":"items-center"),children:o}),b=i=>{var{isWide:c,className:a}=i,p=l(i,["isWide","className"]);const d=!c;/*#__PURE__*/
|
|
3
|
+
return e(o,{className:t(d&&"absolute left-[17px] top-[17px]"),children:/*#__PURE__*/e(n,s({className:r(d&&"group-hover:border-primary-500",a)},p))})},u=({iconName:t,disabled:o,checked:n,isError:c})=>{const s=c||!n;/*#__PURE__*/
|
|
4
|
+
return e("div",{className:r("flex size-[60px] flex-shrink-0 items-center justify-center",o&&"opacity-30"),"data-testid":"design-system-checkboxCard--icon",children:/*#__PURE__*/e(i,{name:t,disabled:s})})};export{p as CheckboxCardContainer,u as CheckboxCardIcon,b as StyledCheckbox,d as TitleContainer};
|
|
@@ -2,28 +2,39 @@ import { ChangeEvent, PropsWithChildren, ReactNode } from 'react';
|
|
|
2
2
|
import { CheckboxStatus } from '../../../types';
|
|
3
3
|
import { CheckboxProps } from '../../Inputs/Checkbox/Checkbox.types';
|
|
4
4
|
import { ProductIconName } from '../../DataDisplays/ProductIcon/ProductIcon.types';
|
|
5
|
-
|
|
6
|
-
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
5
|
+
interface CheckboxCardBaseProps {
|
|
7
6
|
className?: string;
|
|
8
|
-
|
|
7
|
+
testId?: string;
|
|
9
8
|
isWide?: boolean;
|
|
9
|
+
}
|
|
10
|
+
interface CheckboxCardMainProps extends CheckboxCardBaseProps, CheckboxStatus {
|
|
11
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
10
12
|
title: string;
|
|
11
13
|
description?: string;
|
|
12
|
-
testId?: string;
|
|
13
14
|
name?: string;
|
|
14
15
|
value?: string;
|
|
15
16
|
containerClassName?: string;
|
|
16
17
|
}
|
|
17
|
-
|
|
18
|
-
isWide?:
|
|
18
|
+
interface NormalLayoutProps extends CheckboxCardMainProps {
|
|
19
|
+
isWide?: false;
|
|
20
|
+
iconName: ProductIconName;
|
|
21
|
+
}
|
|
22
|
+
interface WideLayoutProps extends CheckboxCardMainProps {
|
|
23
|
+
isWide: true;
|
|
24
|
+
iconName?: ProductIconName;
|
|
25
|
+
}
|
|
26
|
+
export type CheckboxCardProps = NormalLayoutProps | WideLayoutProps;
|
|
27
|
+
interface CheckboxCardContainerBaseProps extends CheckboxStatus {
|
|
19
28
|
className?: string;
|
|
20
29
|
children: ReactNode;
|
|
21
30
|
}
|
|
22
|
-
export interface
|
|
31
|
+
export interface CheckboxCardContainerProps extends CheckboxCardContainerBaseProps {
|
|
32
|
+
isWide?: boolean;
|
|
33
|
+
}
|
|
34
|
+
interface CheckboxCardIconBaseProps {
|
|
23
35
|
iconName: ProductIconName;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
isError: boolean;
|
|
36
|
+
}
|
|
37
|
+
export interface CheckboxCardIconProps extends CheckboxCardIconBaseProps, CheckboxStatus {
|
|
27
38
|
}
|
|
28
39
|
export interface StyledCheckboxProps extends CheckboxProps {
|
|
29
40
|
isWide: boolean;
|
|
@@ -31,3 +42,4 @@ export interface StyledCheckboxProps extends CheckboxProps {
|
|
|
31
42
|
export interface CheckboxCardTitleContainerProps extends PropsWithChildren {
|
|
32
43
|
isWide: boolean;
|
|
33
44
|
}
|
|
45
|
+
export {};
|
|
@@ -43,5 +43,5 @@ import { RadioCardProps } from './RadioCard.types';
|
|
|
43
43
|
* onChange={(checked) => console.log('선택됨:', checked)}
|
|
44
44
|
* />
|
|
45
45
|
*/
|
|
46
|
-
declare const RadioCard: (
|
|
46
|
+
declare const RadioCard: (props: RadioCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
47
47
|
export { RadioCard };
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{twMerge as a}from"tailwind-merge";import{Typography as i}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{RadioCardContainer as r,StyledRadio as s,RadioCardIcon as d,TitleContainer as o}from"./RadioCard.parts.js";import{useRadioCard as l}from"./useRadioCard.js";
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{twMerge as a}from"tailwind-merge";import{Typography as i}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{RadioCardContainer as r,StyledRadio as s,RadioCardIcon as d,TitleContainer as o}from"./RadioCard.parts.js";import{useRadioCard as l}from"./useRadioCard.js";const n=n=>{const{disabled:m=!1,isSelected:c=!1,isError:p=!1,onChange:g,isWide:y=!1,className:u,iconName:h,title:x,description:C,testId:f,value:b,name:B}=n,N=null!=h?h:y?null:"receipt",{handleChange:j}=l({checked:c,disabled:m,onChange:g});/*#__PURE__*/
|
|
2
|
+
return e("label",{"data-testid":f,role:"radio-card",className:"group",children:/*#__PURE__*/t(r,{"data-testid":"design-system-radioCard--container",isSelected:c,isError:p,isWide:y,disabled:m,className:u,children:[
|
|
3
|
+
/*#__PURE__*/e(s,{name:B,value:b,isWide:y,isSelected:c,onChange:j,isError:p,disabled:m}),N&&/*#__PURE__*/e(d,{isError:p,isSelected:c,iconName:N,disabled:m}),
|
|
4
|
+
/*#__PURE__*/t(o,{isWide:y,"data-testid":"design-system-radioCard--titleBox",children:[
|
|
5
|
+
/*#__PURE__*/e(i,{"data-testid":"design-system-radioCard--title",variant:"body1",className:a("font-medium",y?"text-left":"text-center",m?"text-w-gray-300":"text-w-gray-900"),children:x}),C&&/*#__PURE__*/e(i,{variant:"body2",className:a("font-normal",y?"text-left":"text-center",m?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-radioCard--description",children:C})]})]})})};
|
|
2
6
|
/**
|
|
3
7
|
* 라디오 카드 컴포넌트
|
|
4
8
|
*
|
|
@@ -42,11 +46,4 @@
|
|
|
42
46
|
* description="내일 오전까지 배송"
|
|
43
47
|
* onChange={(checked) => console.log('선택됨:', checked)}
|
|
44
48
|
* />
|
|
45
|
-
*/
|
|
46
|
-
// TODO: useRadioCard 필요 로직만 분리하여 훅 삭제 또는 정리
|
|
47
|
-
const{handleChange:B}=l({checked:m,disabled:n,onChange:p});/*#__PURE__*/
|
|
48
|
-
return e("label",{"data-testid":C,role:"radio-card",className:"group",children:/*#__PURE__*/t(r,{"data-testid":"design-system-radioCard--container",isSelected:m,isError:c,isWide:g,disabled:n,className:y,children:[
|
|
49
|
-
/*#__PURE__*/e(s,{name:b,value:f,isWide:g,isSelected:m,onChange:B,isError:c,disabled:n}),
|
|
50
|
-
/*#__PURE__*/e(d,{isError:c,isSelected:m,iconName:h,disabled:n}),
|
|
51
|
-
/*#__PURE__*/t(o,{isWide:g,"data-testid":"design-system-radioCard--titleBox",children:[
|
|
52
|
-
/*#__PURE__*/e(i,{"data-testid":"design-system-radioCard--title",variant:"body1",className:a("font-medium",g?"text-left":"text-center",n?"text-w-gray-300":"text-w-gray-900"),children:x}),u&&/*#__PURE__*/e(i,{variant:"body2",className:a("font-normal",g?"text-left":"text-center",n?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-radioCard--description",children:u})]})]})})};export{n as RadioCard};
|
|
49
|
+
*/export{n as RadioCard};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const RadioCardContainer: ({ children, isWide, isSelected, isError, disabled, className, ...rest }:
|
|
1
|
+
import { RadioCardPartsProps, RadioCardIconProps, TitleContainerProps } from './RadioCard.types';
|
|
2
|
+
export declare const RadioCardContainer: ({ children, isWide, isSelected, isError, disabled, className, ...rest }: RadioCardPartsProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export declare const TitleContainer: ({ isWide, children }: TitleContainerProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
export declare const StyledRadio: ({ isWide, className, disabled, isError, isSelected, ...rest }:
|
|
4
|
+
export declare const StyledRadio: ({ isWide, className, disabled, isError, isSelected, ...rest }: RadioCardPartsProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export declare const RadioCardIcon: ({ iconName, disabled, isSelected, isError, }: RadioCardIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,19 +1,34 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { RadioStatus } from '../../../types';
|
|
3
3
|
import { ProductIconName } from '../../DataDisplays/ProductIcon/ProductIcon.types';
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
interface RadioCardBaseProps {
|
|
5
|
+
className?: string;
|
|
6
|
+
testId?: string;
|
|
6
7
|
isWide?: boolean;
|
|
8
|
+
}
|
|
9
|
+
interface RadioCardMainProps extends RadioCardBaseProps, RadioStatus {
|
|
7
10
|
title: string;
|
|
8
11
|
description?: string;
|
|
9
|
-
testId?: string;
|
|
10
12
|
disabled?: boolean;
|
|
13
|
+
value?: string;
|
|
14
|
+
name?: string;
|
|
11
15
|
}
|
|
12
|
-
|
|
16
|
+
interface NormalLayoutProps extends RadioCardMainProps {
|
|
17
|
+
isWide?: false;
|
|
18
|
+
iconName: ProductIconName;
|
|
19
|
+
}
|
|
20
|
+
interface WideLayoutProps extends RadioCardMainProps {
|
|
21
|
+
isWide: true;
|
|
22
|
+
iconName?: ProductIconName;
|
|
23
|
+
}
|
|
24
|
+
export type RadioCardProps = NormalLayoutProps | WideLayoutProps;
|
|
25
|
+
export interface RadioCardPartsProps extends RadioStatus {
|
|
13
26
|
isWide?: boolean;
|
|
14
27
|
}
|
|
15
|
-
|
|
28
|
+
interface RadioCardIconBaseProps {
|
|
16
29
|
iconName: ProductIconName;
|
|
30
|
+
}
|
|
31
|
+
export interface RadioCardIconProps extends RadioCardIconBaseProps, RadioStatus {
|
|
17
32
|
isSelected: boolean;
|
|
18
33
|
disabled?: boolean;
|
|
19
34
|
checked?: boolean;
|
|
@@ -22,3 +37,4 @@ export interface RadioCardIconProps extends RadioStatus {
|
|
|
22
37
|
export interface TitleContainerProps extends PropsWithChildren {
|
|
23
38
|
isWide: boolean;
|
|
24
39
|
}
|
|
40
|
+
export {};
|
|
@@ -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:i,maxLength:l,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:[null==
|
|
3
|
+
/*#__PURE__*/t(a,{variant:"body2",className:"flex-1 text-w-gray-400",children:o}),n&&/*#__PURE__*/e(a,{variant:"body2",className:"w-fit min-w-[72px] text-right text-w-gray-400",children:[null==i?void 0:i.toLocaleString(),"/",null==l?void 0:l.toLocaleString()]})]})]})};export{s as SupportTextContainer};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("react");exports.MediumClip=({testId:t,className:
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("react");exports.MediumClip=({testId:t,className:r})=>/*#__PURE__*/e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","data-testid":t,className:r,children:/*#__PURE__*/e.jsx("path",{d:"M2.34313 7.5563L7.29288 2.60655C8.85497 1.04445 11.3876 1.04445 12.9497 2.60655V2.60655C14.5118 4.16865 14.5118 6.70131 12.9497 8.2634L7.76428 13.4489C6.72288 14.4903 5.03444 14.4903 3.99304 13.4489V13.4489C2.95165 12.4075 2.95165 10.719 3.99304 9.67762L8.73537 4.93529C9.26649 4.40418 10.1276 4.40418 10.6587 4.93529V4.93529C11.1898 5.4664 11.1898 6.32751 10.6587 6.85862L6.32884 11.1885",stroke:"currentColor",strokeWidth:"1.4",strokeLinecap:"round"})});
|
|
@@ -1,50 +1,5 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime");require("react");var r=require("tailwind-merge"),
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
* @param {Object} props
|
|
7
|
-
* @param {boolean} [props.disabled=false] - 컴포넌트의 비활성화 여부
|
|
8
|
-
* @param {boolean} [props.checked=false] - 체크박스의 선택 상태
|
|
9
|
-
* @param {boolean} [props.isError=false] - 오류 상태 표시 여부
|
|
10
|
-
* @param {(event: React.ChangeEvent<HTMLInputElement>) => void} props.onChange - 체크박스 상태 변경 시 호출되는 핸들러
|
|
11
|
-
* @param {boolean} [props.isWide=false] - 넓은 형태로 표시할지 여부
|
|
12
|
-
* @param {string} [props.className] - 추가적인 CSS 클래스
|
|
13
|
-
* @param {string} props.iconName - 표시할 아이콘의 이름
|
|
14
|
-
* @param {string} props.title - 카드의 제목
|
|
15
|
-
* @param {string} [props.description] - 카드의 설명 텍스트
|
|
16
|
-
* @param {string} [props.testId] - 테스트를 위한 ID
|
|
17
|
-
* @param {string} [props.name] - 체크박스의 name 속성
|
|
18
|
-
* @param {string} [props.value] - 체크박스의 value 속성
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
* // 기본 사용 예시
|
|
22
|
-
* <CheckboxCard
|
|
23
|
-
* iconName="user"
|
|
24
|
-
* title="사용자 정보"
|
|
25
|
-
* description="사용자의 기본 정보를 포함합니다"
|
|
26
|
-
* onChange={(e) => console.log('체크박스 상태:', e.target.checked)}
|
|
27
|
-
* />
|
|
28
|
-
*
|
|
29
|
-
* // 넓은 형태의 비활성화된 체크박스 카드
|
|
30
|
-
* <CheckboxCard
|
|
31
|
-
* iconName="settings"
|
|
32
|
-
* title="설정"
|
|
33
|
-
* description="시스템 설정을 관리합니다"
|
|
34
|
-
* isWide={true}
|
|
35
|
-
* disabled={true}
|
|
36
|
-
* />
|
|
37
|
-
*
|
|
38
|
-
* // 에러 상태의 체크박스 카드
|
|
39
|
-
* <CheckboxCard
|
|
40
|
-
* iconName="warning"
|
|
41
|
-
* title="오류 상태"
|
|
42
|
-
* description="오류가 발생했습니다"
|
|
43
|
-
* isError={true}
|
|
44
|
-
* checked={true}
|
|
45
|
-
* />
|
|
46
|
-
*/exports.CheckboxCard=({disabled:s=!1,checked:i=!1,isError:d=!1,onChange:c,isWide:o=!1,containerClassName:n,className:l,iconName:x,title:h,description:y,testId:g,name:m,value:u})=>/*#__PURE__*/e.jsx("label",{"data-testid":g,role:"checkbox-card",className:r.twMerge("group",n),children:/*#__PURE__*/e.jsxs(t.CheckboxCardContainer,{"data-testid":"design-system-checkboxCard--container",checked:i,isError:d,isWide:o,disabled:s,className:l,children:[
|
|
47
|
-
/*#__PURE__*/e.jsx(t.StyledCheckbox,{isWide:o,checked:i,onChange:c,isError:d,disabled:s,name:m,value:u}),
|
|
48
|
-
/*#__PURE__*/e.jsx(t.CheckboxCardIcon,{isError:d,checked:i,iconName:x,disabled:s}),
|
|
49
|
-
/*#__PURE__*/e.jsxs(t.TitleContainer,{isWide:o,"data-testid":"design-system-checkboxCard--titleBox",children:[
|
|
50
|
-
/*#__PURE__*/e.jsx(a.Typography,{"data-testid":"design-system-checkboxCard--title",variant:"body1",className:r.twMerge("font-medium",o?"text-left":"text-center",s?"text-w-gray-300":"text-w-gray-900"),children:h}),y&&/*#__PURE__*/e.jsx(a.Typography,{variant:"body2",className:r.twMerge("font-normal",o?"text-left":"text-center",s?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-checkboxCard--description",children:y})]})]})});
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime");require("react");var r=require("tailwind-merge"),t=require("../../Base/Typography/Typography.js");require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js");var a=require("./CheckboxCard.parts.js");exports.CheckboxCard=s=>{const{disabled:i=!1,checked:d=!1,isError:c=!1,onChange:o,isWide:n=!1,containerClassName:l,className:x,iconName:h,title:u,description:y,testId:g,name:m,value:C}=s,b=null!=h?h:n?null:"receipt";/*#__PURE__*/
|
|
2
|
+
return e.jsx("label",{"data-testid":g,role:"checkbox-card",className:r.twMerge("group",l),children:/*#__PURE__*/e.jsxs(a.CheckboxCardContainer,{"data-testid":"design-system-checkboxCard--container",checked:d,isError:c,isWide:n,disabled:i,className:x,children:[
|
|
3
|
+
/*#__PURE__*/e.jsx(a.StyledCheckbox,{isWide:n,checked:d,onChange:o,isError:c,disabled:i,name:m,value:C}),b&&/*#__PURE__*/e.jsx(a.CheckboxCardIcon,{isError:c,checked:d,iconName:b,disabled:i}),
|
|
4
|
+
/*#__PURE__*/e.jsxs(a.TitleContainer,{isWide:n,"data-testid":"design-system-checkboxCard--titleBox",children:[
|
|
5
|
+
/*#__PURE__*/e.jsx(t.Typography,{"data-testid":"design-system-checkboxCard--title",variant:"body1",className:r.twMerge("font-medium",n?"text-left":"text-center",i?"text-w-gray-300":"text-w-gray-900"),children:u}),y&&/*#__PURE__*/e.jsx(t.Typography,{variant:"body2",className:r.twMerge("font-normal",n?"text-left":"text-center",i?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-checkboxCard--description",children:y})]})]})})};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge");require("react"),require("../../DataDisplays/SystemIcon/SystemIcon.constants.js")
|
|
2
|
-
return e.jsx("div",s(
|
|
3
|
-
return e.jsx("div",{className:r.twMerge("flex size-[60px] flex-shrink-0 items-center justify-center",n&&"opacity-30"),"data-testid":"design-system-checkboxCard--icon",children:/*#__PURE__*/e.jsx(
|
|
4
|
-
return e.jsx(
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge");require("react"),require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var t=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var o=require("../../DataDisplays/ProductIcon/ProductIcon.js"),n=require("../Checkbox/Checkbox.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 s(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 c(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function a(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)t=i[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}exports.CheckboxCardContainer=t=>{var{children:o,isWide:n,checked:i,isError:l,disabled:u,className:d}=t,b=a(t,["children","isWide","checked","isError","disabled","className"]);/*#__PURE__*/
|
|
2
|
+
return e.jsx("div",c(s({className:r.twMerge("relative flex h-auto cursor-pointer items-center gap-2 rounded-xl border",n?"min-h-[94px] w-[298px] flex-row gap-3 px-5 py-4":"min-h-fit w-[224px] flex-col justify-center px-4 pb-6 pt-4",(()=>{const e=i&&!l;return u?r.twMerge("cursor-not-allowed",e?"border-primary-100":"border-w-gray-200"):l?"border-w-red-500":i?"border-primary-500":"border-w-gray-200 group-hover:border-primary"})(),u?i&&!l?"bg-primary-10":"bg-w-gray-10":i?l?"bg-w-red-10":"bg-primary-10":"bg-w-white",d)},b),{children:o}))},exports.CheckboxCardIcon=({iconName:t,disabled:n,checked:i,isError:s})=>{const c=s||!i;/*#__PURE__*/
|
|
3
|
+
return e.jsx("div",{className:r.twMerge("flex size-[60px] flex-shrink-0 items-center justify-center",n&&"opacity-30"),"data-testid":"design-system-checkboxCard--icon",children:/*#__PURE__*/e.jsx(o.ProductIcon,{name:t,disabled:c})})},exports.StyledCheckbox=o=>{var{isWide:i,className:c}=o,l=a(o,["isWide","className"]);const u=!i;/*#__PURE__*/
|
|
4
|
+
return e.jsx(t.Box,{className:r.twJoin(u&&"absolute left-[17px] top-[17px]"),children:/*#__PURE__*/e.jsx(n.Checkbox,s({className:r.twMerge(u&&"group-hover:border-primary-500",c)},l))})},exports.TitleContainer=({isWide:t,children:o})=>/*#__PURE__*/e.jsx("div",{className:r.twMerge("flex h-auto w-full flex-col justify-between gap-0.5",t?"items-start":"items-center"),children:o});
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime");require("react");var a=require("tailwind-merge"),r=require("../../Base/Typography/Typography.js");require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js");var t=require("./RadioCard.parts.js"),i=require("./useRadioCard.js");exports.RadioCard=
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
/*#__PURE__*/e.jsx(
|
|
6
|
-
/*#__PURE__*/e.jsx(t.RadioCardIcon,{isError:o,isSelected:d,iconName:u,disabled:s}),
|
|
7
|
-
/*#__PURE__*/e.jsxs(t.TitleContainer,{isWide:l,"data-testid":"design-system-radioCard--titleBox",children:[
|
|
8
|
-
/*#__PURE__*/e.jsx(r.Typography,{"data-testid":"design-system-radioCard--title",variant:"body1",className:a.twMerge("font-medium",l?"text-left":"text-center",s?"text-w-gray-300":"text-w-gray-900"),children:y}),g&&/*#__PURE__*/e.jsx(r.Typography,{variant:"body2",className:a.twMerge("font-normal",l?"text-left":"text-center",s?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-radioCard--description",children:g})]})]})})};
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime");require("react");var a=require("tailwind-merge"),r=require("../../Base/Typography/Typography.js");require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js");var t=require("./RadioCard.parts.js"),i=require("./useRadioCard.js");exports.RadioCard=s=>{const{disabled:d=!1,isSelected:l=!1,isError:o=!1,onChange:n,isWide:c=!1,className:u,iconName:y,title:g,description:x,testId:m,value:C,name:h}=s,p=null!=y?y:c?null:"receipt",{handleChange:j}=i.useRadioCard({checked:l,disabled:d,onChange:n});/*#__PURE__*/
|
|
2
|
+
return e.jsx("label",{"data-testid":m,role:"radio-card",className:"group",children:/*#__PURE__*/e.jsxs(t.RadioCardContainer,{"data-testid":"design-system-radioCard--container",isSelected:l,isError:o,isWide:c,disabled:d,className:u,children:[
|
|
3
|
+
/*#__PURE__*/e.jsx(t.StyledRadio,{name:h,value:C,isWide:c,isSelected:l,onChange:j,isError:o,disabled:d}),p&&/*#__PURE__*/e.jsx(t.RadioCardIcon,{isError:o,isSelected:l,iconName:p,disabled:d}),
|
|
4
|
+
/*#__PURE__*/e.jsxs(t.TitleContainer,{isWide:c,"data-testid":"design-system-radioCard--titleBox",children:[
|
|
5
|
+
/*#__PURE__*/e.jsx(r.Typography,{"data-testid":"design-system-radioCard--title",variant:"body1",className:a.twMerge("font-medium",c?"text-left":"text-center",d?"text-w-gray-300":"text-w-gray-900"),children:g}),x&&/*#__PURE__*/e.jsx(r.Typography,{variant:"body2",className:a.twMerge("font-normal",c?"text-left":"text-center",d?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-radioCard--description",children:x})]})]})})};
|
|
@@ -1,3 +1,3 @@
|
|
|
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
|
|
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}),
|
|
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
|
+
"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 n=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}),n&&/*#__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-fit min-w-[72px] text-right text-w-gray-400",children:[null==i?void 0:i.toLocaleString(),"/",null==l?void 0:l.toLocaleString()]})]})]})};
|