@wishket/design-system 1.16.9 → 1.16.11
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/Navigations/Menu/Menu.d.ts +9 -2
- package/dist/Components/Navigations/Menu/Menu.js +9 -4
- 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/Navigations/Menu/Menu.js +2 -3
- package/package.json +2 -2
|
@@ -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 {};
|
|
@@ -9,8 +9,9 @@ export interface MenuProps {
|
|
|
9
9
|
isSelected?: boolean;
|
|
10
10
|
leadingIcon?: MediumSystemIconName;
|
|
11
11
|
iconButtonName?: SmallSystemIconName;
|
|
12
|
-
onClick
|
|
12
|
+
onClick?: () => void;
|
|
13
13
|
onOptionClick?: () => void;
|
|
14
|
+
href?: string;
|
|
14
15
|
children?: ReactNode;
|
|
15
16
|
items?: IconButtonDropdownItem[];
|
|
16
17
|
selectedItem?: IconButtonDropdownItem;
|
|
@@ -29,6 +30,7 @@ export interface MenuProps {
|
|
|
29
30
|
* @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown 아이콘(small 사이즈)
|
|
30
31
|
* @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수
|
|
31
32
|
* @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButtonDropdown이 아닌 IconButton으로만 사용 시 필요)
|
|
33
|
+
* @param {string} [props.href] - 메뉴 링크 주소
|
|
32
34
|
* @param {ReactNode} [props.children] - 메뉴 내부에 표시될 자식 요소 (IconButtonDropdown 컴포넌트 사용 시 필요, trailingIcon과 함께 사용하지 않도록 주의 필요)
|
|
33
35
|
* @param {Item[]} [props.items] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}[]
|
|
34
36
|
* @param {Item} [props.selectedItem] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}
|
|
@@ -69,6 +71,11 @@ export interface MenuProps {
|
|
|
69
71
|
* onClick={() => console.log('메뉴 클릭')}
|
|
70
72
|
* onOptionClick={() => console.log('옵션 클릭', '모달 오픈')}
|
|
71
73
|
* />
|
|
74
|
+
* // 링크로 사용해야하는 메뉴
|
|
75
|
+
* <Menu
|
|
76
|
+
* href="/test"
|
|
77
|
+
* name="테스트 메뉴"
|
|
78
|
+
* />
|
|
72
79
|
*/
|
|
73
|
-
declare const Menu: ({ type, variant, name, isSelected, badgeCount, leadingIcon, iconButtonName, onClick, onOptionClick, items, selectedItem, onItemClick, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
80
|
+
declare const Menu: ({ type, variant, name, isSelected, badgeCount, leadingIcon, iconButtonName, onClick, onOptionClick, href, items, selectedItem, onItemClick, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
74
81
|
export { Menu };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as t,jsx as
|
|
1
|
+
import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{twJoin as s,twMerge as i}from"tailwind-merge";import n from"next/link";import"react";import{SystemIcon as r}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Typography as a}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{CountBadge as m}from"../../DataDisplays/CountBadge/CountBadge.js";import"@wishket/yogokit";import"../../Inputs/AutoCompleteList/AutoCompleteList.parts.js";import"../../Inputs/Input/Input.js";import"../../Inputs/Input/PasswordInput.js";import"../../Inputs/Input/LableInput.js";import"../../Inputs/Input/InputTypeSelector.js";import"../../Inputs/Calendar/Calendar.utils.js";import"../../Inputs/Checkbox/Checkbox.js";import"../../Inputs/ChoiceChip/ChoiceChip.js";import{IconButton as p}from"../../Inputs/IconButton/IconButton.js";import"../../Inputs/Radio/Radio.js";import"../../Inputs/TextField/TextField.js";import"../../Inputs/CommentArea/CommentArea.js";import{IconButtonDropdown as l}from"../../Inputs/IconButtonDropdown/IconButtonDropdown.js";import"../../Inputs/FilterChip/FilterChip.js";
|
|
2
2
|
/**
|
|
3
3
|
* 메뉴 컴포넌트는 네비게이션에서 사용되는 클릭 가능한 항목을 표시합니다.
|
|
4
4
|
*
|
|
@@ -12,6 +12,7 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as o,twMerge as
|
|
|
12
12
|
* @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown 아이콘(small 사이즈)
|
|
13
13
|
* @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수
|
|
14
14
|
* @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButtonDropdown이 아닌 IconButton으로만 사용 시 필요)
|
|
15
|
+
* @param {string} [props.href] - 메뉴 링크 주소
|
|
15
16
|
* @param {ReactNode} [props.children] - 메뉴 내부에 표시될 자식 요소 (IconButtonDropdown 컴포넌트 사용 시 필요, trailingIcon과 함께 사용하지 않도록 주의 필요)
|
|
16
17
|
* @param {Item[]} [props.items] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}[]
|
|
17
18
|
* @param {Item} [props.selectedItem] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}
|
|
@@ -52,6 +53,10 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as o,twMerge as
|
|
|
52
53
|
* onClick={() => console.log('메뉴 클릭')}
|
|
53
54
|
* onOptionClick={() => console.log('옵션 클릭', '모달 오픈')}
|
|
54
55
|
* />
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
* // 링크로 사용해야하는 메뉴
|
|
57
|
+
* <Menu
|
|
58
|
+
* href="/test"
|
|
59
|
+
* name="테스트 메뉴"
|
|
60
|
+
* />
|
|
61
|
+
*/const u=({type:u="main",variant:c="white",name:d,isSelected:y=!1,badgeCount:I,leadingIcon:g,iconButtonName:h,onClick:C,onOptionClick:j,href:w,items:x,selectedItem:b,onItemClick:f})=>{const B=!!(h&&x&&f&&b),k=!!h&&!!j,v=(t,e,o)=>{const n="sub"===t?"pl-12":"",r={white:s("bg-w-white hover:bg-w-gray-50",o&&"bg-primary-10 text-primary hover:bg-primary-10"),gray:s("bg-w-gray-50 hover:bg-w-gray-100",o&&"bg-w-gray-100 hover:bg-w-gray-100")};return i("flex w-full cursor-pointer items-center gap-2 rounded-xl px-4 py-3 text-w-gray-900 text-left",n,r[e])},D=/*#__PURE__*/t(e,{children:[g&&/*#__PURE__*/o(r,{testId:"design-system-menu-leading-icon",name:g,className:s("white"===c&&y&&"text-primary")}),
|
|
62
|
+
/*#__PURE__*/o(a,{"data-testid":"design-system-menu-name",variant:"body1",className:"w-full select-none",children:d}),I&&/*#__PURE__*/o(m,{variant:((t,e)=>"white"!==t?"white_gray":e?"primary":"gray")(c,y),text:I,className:"relative",showZero:!0}),B&&/*#__PURE__*/o(l,{size:"sm",icon:h,items:x,selectedItem:b,onItemClick:f}),k&&/*#__PURE__*/o(p,{size:"sm",className:"shrink-0",onClick:t=>{t.stopPropagation(),j()},children:/*#__PURE__*/o(r,{name:h})})]});return w?/*#__PURE__*/o(n,{href:w,"data-testid":"design-system-menu",className:v(u,c,y),children:D}):/*#__PURE__*/o("button",{"data-testid":"design-system-menu",className:v(u,c,y),onClick:C,children:D})};export{u as Menu};
|
|
@@ -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,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge");require("react");var
|
|
2
|
-
|
|
3
|
-
/*#__PURE__*/e.jsx(s.Typography,{"data-testid":"design-system-menu-name",variant:"body1",className:"w-full select-none",children:l}),m&&/*#__PURE__*/e.jsx(i.CountBadge,{variant:((e,t)=>"white"!==e?"white_gray":t?"primary":"gray")(p,c),text:m,className:"relative",showZero:!0}),q&&/*#__PURE__*/e.jsx(o.IconButtonDropdown,{size:"sm",icon:y,items:j,selectedItem:h,onItemClick:w}),C&&/*#__PURE__*/e.jsx(a.IconButton,{size:"sm",className:"shrink-0",onClick:e=>{e.stopPropagation(),g()},children:/*#__PURE__*/e.jsx(r.SystemIcon,{name:y})})]})};
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),r=require("next/link");require("react");var s=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var n=require("../../Base/Typography/Typography.js");require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js");var i=require("../../DataDisplays/CountBadge/CountBadge.js");require("@wishket/yogokit"),require("../../Inputs/AutoCompleteList/AutoCompleteList.parts.js"),require("../../Inputs/Input/Input.js"),require("../../Inputs/Input/PasswordInput.js"),require("../../Inputs/Input/LableInput.js"),require("../../Inputs/Input/InputTypeSelector.js"),require("../../Inputs/Calendar/Calendar.utils.js"),require("../../Inputs/Checkbox/Checkbox.js"),require("../../Inputs/ChoiceChip/ChoiceChip.js");var a=require("../../Inputs/IconButton/IconButton.js");require("../../Inputs/Radio/Radio.js"),require("../../Inputs/TextField/TextField.js"),require("../../Inputs/CommentArea/CommentArea.js");var o=require("../../Inputs/IconButtonDropdown/IconButtonDropdown.js");require("../../Inputs/FilterChip/FilterChip.js");exports.Menu=({type:u="main",variant:p="white",name:l,isSelected:c=!1,badgeCount:m,leadingIcon:d,iconButtonName:y,onClick:I,onOptionClick:g,href:h,items:j,selectedItem:w,onItemClick:x})=>{const q=!!(y&&j&&x&&w),C=!!y&&!!g,B=(e,r,s)=>{const n="sub"===e?"pl-12":"",i={white:t.twJoin("bg-w-white hover:bg-w-gray-50",s&&"bg-primary-10 text-primary hover:bg-primary-10"),gray:t.twJoin("bg-w-gray-50 hover:bg-w-gray-100",s&&"bg-w-gray-100 hover:bg-w-gray-100")};return t.twMerge("flex w-full cursor-pointer items-center gap-2 rounded-xl px-4 py-3 text-w-gray-900 text-left",n,i[r])},b=/*#__PURE__*/e.jsxs(e.Fragment,{children:[d&&/*#__PURE__*/e.jsx(s.SystemIcon,{testId:"design-system-menu-leading-icon",name:d,className:t.twJoin("white"===p&&c&&"text-primary")}),
|
|
2
|
+
/*#__PURE__*/e.jsx(n.Typography,{"data-testid":"design-system-menu-name",variant:"body1",className:"w-full select-none",children:l}),m&&/*#__PURE__*/e.jsx(i.CountBadge,{variant:((e,t)=>"white"!==e?"white_gray":t?"primary":"gray")(p,c),text:m,className:"relative",showZero:!0}),q&&/*#__PURE__*/e.jsx(o.IconButtonDropdown,{size:"sm",icon:y,items:j,selectedItem:w,onItemClick:x}),C&&/*#__PURE__*/e.jsx(a.IconButton,{size:"sm",className:"shrink-0",onClick:e=>{e.stopPropagation(),g()},children:/*#__PURE__*/e.jsx(s.SystemIcon,{name:y})})]});return h?/*#__PURE__*/e.jsx(r,{href:h,"data-testid":"design-system-menu",className:B(u,p,c),children:b}):/*#__PURE__*/e.jsx("button",{"data-testid":"design-system-menu",className:B(u,p,c),onClick:I,children:b})};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wishket/design-system",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.11",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Wishket Design System",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@savvywombat/tailwindcss-grid-areas": "^4.0.0",
|
|
46
|
-
"@wishket/yogokit": "^0.2.
|
|
46
|
+
"@wishket/yogokit": "^0.2.2",
|
|
47
47
|
"next": "15.3.3",
|
|
48
48
|
"react": "19.1.0",
|
|
49
49
|
"react-dom": "19.1.0",
|