@lotte-innovate/ui-component-test 0.0.36 → 0.0.40
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +133 -163
- package/dist/globals.css +4 -0
- package/dist/lib/Typography/Header/index.d.ts +1 -1
- package/dist/lib/Typography/Text/index.d.ts +1 -1
- package/dist/lib/color/constants.d.ts +9 -0
- package/dist/lib/components/Accordion/index.d.ts +10 -4
- package/dist/lib/components/AlertDialog/AlertDialogAction.d.ts +2 -2
- package/dist/lib/components/AlertDialog/AlertDialogCancel.d.ts +2 -2
- package/dist/lib/components/AlertDialog/AlertDialogContent.d.ts +1 -1
- package/dist/lib/components/AlertDialog/AlertDialogRoot.d.ts +16 -0
- package/dist/lib/components/AlertDialog/AlertDialogTrigger.d.ts +2 -2
- package/dist/lib/components/AlertDialog/index.d.ts +10 -19
- package/dist/lib/components/Avatar/index.d.ts +5 -1
- package/dist/lib/components/Badge/index.d.ts +2 -2
- package/dist/lib/components/BarChart/index.d.ts +37 -0
- package/dist/lib/components/BubbleChart/index.d.ts +15 -18
- package/dist/lib/components/Button/index.d.ts +2 -2
- package/dist/lib/components/Callout/CalloutIcon.d.ts +2 -1
- package/dist/lib/components/Callout/CalloutRoot.d.ts +18 -0
- package/dist/lib/components/Callout/index.d.ts +6 -19
- package/dist/lib/components/Card/index.d.ts +2 -2
- package/dist/lib/components/Checkbox/index.d.ts +1 -1
- package/dist/lib/components/CheckboxCard/index.d.ts +1 -1
- package/dist/lib/components/CheckboxGroup/CheckboxGroupRoot.d.ts +17 -0
- package/dist/lib/components/CheckboxGroup/index.d.ts +5 -16
- package/dist/lib/components/ContextMenu/ContextMenuCheckboxItem.d.ts +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuContent.d.ts +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuGroup.d.ts +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuItem.d.ts +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuItemIndicator.d.ts +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuRadioItem.d.ts +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuRoot.d.ts +13 -0
- package/dist/lib/components/ContextMenu/ContextMenuSubContent.d.ts +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuTrigger.d.ts +1 -1
- package/dist/lib/components/ContextMenu/index.d.ts +16 -24
- package/dist/lib/components/DataList/DataListLabel.d.ts +1 -1
- package/dist/lib/components/DataList/DataListRoot.d.ts +14 -0
- package/dist/lib/components/DataList/DataListValue.d.ts +1 -1
- package/dist/lib/components/DataList/index.d.ts +7 -16
- package/dist/lib/components/Dialog/DialogAction.d.ts +1 -3
- package/dist/lib/components/Dialog/DialogCancel.d.ts +1 -1
- package/dist/lib/components/Dialog/DialogContent.d.ts +1 -1
- package/dist/lib/components/Dialog/DialogRoot.d.ts +15 -0
- package/dist/lib/components/Dialog/index.d.ts +14 -17
- package/dist/lib/components/DoughnutChart/index.d.ts +12 -13
- package/dist/lib/components/DropdownMenu/DropdonMenuRadioGroup.d.ts +0 -5
- package/dist/lib/components/DropdownMenu/DropdonMenuSubContent.d.ts +1 -1
- package/dist/lib/components/DropdownMenu/DropdownMenuCheckboxItem.d.ts +1 -1
- package/dist/lib/components/DropdownMenu/DropdownMenuContent.d.ts +1 -1
- package/dist/lib/components/DropdownMenu/DropdownMenuItem.d.ts +3 -1
- package/dist/lib/components/DropdownMenu/DropdownMenuItemIndicator.d.ts +1 -1
- package/dist/lib/components/DropdownMenu/DropdownMenuLable.d.ts +0 -1
- package/dist/lib/components/DropdownMenu/DropdownMenuRadioItem.d.ts +4 -2
- package/dist/lib/components/DropdownMenu/DropdownMenuRoot.d.ts +15 -0
- package/dist/lib/components/DropdownMenu/DropdownMenuTrigger.d.ts +3 -2
- package/dist/lib/components/DropdownMenu/index.d.ts +19 -22
- package/dist/lib/components/HoverCard/HoverCardContent.d.ts +2 -2
- package/dist/lib/components/HoverCard/HoverCardRoot.d.ts +11 -0
- package/dist/lib/components/HoverCard/index.d.ts +9 -9
- package/dist/lib/components/IconButton/index.d.ts +1 -1
- package/dist/lib/components/Inset/index.d.ts +1 -1
- package/dist/lib/components/Label/index.d.ts +1 -1
- package/dist/lib/components/LineChart/index.d.ts +43 -0
- package/dist/lib/components/Menubar/MenubarContent.d.ts +1 -1
- package/dist/lib/components/Menubar/MenubarItem.d.ts +1 -1
- package/dist/lib/components/Menubar/MenubarItemIndicator.d.ts +1 -1
- package/dist/lib/components/Menubar/MenubarMenu.d.ts +4 -1
- package/dist/lib/components/Menubar/MenubarRoot.d.ts +19 -0
- package/dist/lib/components/Menubar/MenubarSubContent.d.ts +1 -1
- package/dist/lib/components/Menubar/MenubarTrigger.d.ts +1 -1
- package/dist/lib/components/Menubar/index.d.ts +18 -30
- package/dist/lib/components/NavigationMenu/NavigationMenuContent.d.ts +1 -1
- package/dist/lib/components/NavigationMenu/NavigationMenuLink.d.ts +1 -1
- package/dist/lib/components/NavigationMenu/NavigationMenuList.d.ts +1 -1
- package/dist/lib/components/NavigationMenu/NavigationMenuRoot.d.ts +14 -0
- package/dist/lib/components/NavigationMenu/NavigationMenuTrigger.d.ts +1 -1
- package/dist/lib/components/NavigationMenu/NavigationMenuViewport.d.ts +2 -2
- package/dist/lib/components/NavigationMenu/index.d.ts +11 -20
- package/dist/lib/components/PieChart/index.d.ts +12 -13
- package/dist/lib/components/Popover/PopoverClose.d.ts +1 -1
- package/dist/lib/components/Popover/PopoverContent.d.ts +1 -1
- package/dist/lib/components/Popover/PopoverRoot.d.ts +12 -0
- package/dist/lib/components/Popover/index.d.ts +10 -11
- package/dist/lib/components/Progress/index.d.ts +2 -5
- package/dist/lib/components/RadarChart/index.d.ts +19 -21
- package/dist/lib/components/Radio/index.d.ts +0 -1
- package/dist/lib/components/RadioCards/RadioCardsItem.d.ts +1 -1
- package/dist/lib/components/RadioCards/RadioCardsRoot.d.ts +13 -0
- package/dist/lib/components/RadioCards/index.d.ts +5 -13
- package/dist/lib/components/RadioGroup/RadioGroupRoot.d.ts +15 -0
- package/dist/lib/components/RadioGroup/index.d.ts +5 -15
- package/dist/lib/components/SegmentedControl/SegmentedControlRoot.d.ts +14 -0
- package/dist/lib/components/SegmentedControl/index.d.ts +5 -14
- package/dist/lib/components/Select/index.d.ts +17 -8
- package/dist/lib/components/Skeleton/index.d.ts +1 -2
- package/dist/lib/components/Slider/index.d.ts +1 -2
- package/dist/lib/components/TabNav/index.d.ts +6 -2
- package/dist/lib/components/Table/index.d.ts +17 -8
- package/dist/lib/components/Tabs/index.d.ts +11 -5
- package/dist/lib/components/TextArea/index.d.ts +1 -1
- package/dist/lib/components/TextField/index.d.ts +7 -4
- package/dist/lib/components/Toast/ToastActionButton.d.ts +1 -1
- package/dist/lib/components/Toast/ToastRoot.d.ts +27 -0
- package/dist/lib/components/Toast/index.d.ts +7 -29
- package/dist/lib/components/Toggle/ToggleWithText.d.ts +2 -2
- package/dist/lib/components/Toggle/index.d.ts +1 -1
- package/dist/lib/components/ToggleGroup/ToggleGroupRoot.d.ts +15 -0
- package/dist/lib/components/ToggleGroup/index.d.ts +5 -19
- package/dist/lib/components/ToggleSwitch/index.d.ts +1 -1
- package/dist/lib/components/Tooltip/index.d.ts +4 -5
- package/dist/lib/components/index.d.ts +4 -0
- package/dist/lib/constants.d.ts +470 -0
- package/dist/lib/types.d.ts +70 -0
- package/dist/lib/utils/useDarkMode.d.ts +1 -0
- package/dist/lib/utils/utils.d.ts +0 -1
- package/package.json +137 -124
- package/dist/lib/Typography/Header/index.js +0 -55
- package/dist/lib/Typography/Text/index.js +0 -44
- package/dist/lib/Typography/index.js +0 -2
- package/dist/lib/color/alpha.js +0 -784
- package/dist/lib/color/constants.js +0 -200
- package/dist/lib/color/dark.js +0 -392
- package/dist/lib/color/krdsColors.js +0 -309
- package/dist/lib/color/light.js +0 -393
- package/dist/lib/components/Accordion/index.js +0 -58
- package/dist/lib/components/AlertDialog/AlertDialogAction.js +0 -59
- package/dist/lib/components/AlertDialog/AlertDialogCancel.js +0 -56
- package/dist/lib/components/AlertDialog/AlertDialogContent.js +0 -49
- package/dist/lib/components/AlertDialog/AlertDialogDescription.js +0 -45
- package/dist/lib/components/AlertDialog/AlertDialogTitle.js +0 -45
- package/dist/lib/components/AlertDialog/AlertDialogTrigger.js +0 -55
- package/dist/lib/components/AlertDialog/index.js +0 -37
- package/dist/lib/components/AspectRatio/index.js +0 -42
- package/dist/lib/components/Avatar/index.js +0 -57
- package/dist/lib/components/Badge/index.js +0 -54
- package/dist/lib/components/BubbleChart/index.js +0 -43
- package/dist/lib/components/Button/index.js +0 -56
- package/dist/lib/components/Callout/CalloutIcon.js +0 -57
- package/dist/lib/components/Callout/CalloutText.js +0 -52
- package/dist/lib/components/Callout/index.js +0 -75
- package/dist/lib/components/Card/index.js +0 -64
- package/dist/lib/components/Checkbox/index.js +0 -89
- package/dist/lib/components/CheckboxCard/index.js +0 -58
- package/dist/lib/components/CheckboxGroup/CheckboxGroupItem.js +0 -33
- package/dist/lib/components/CheckboxGroup/index.js +0 -35
- package/dist/lib/components/ContextMenu/ContextMenuCheckboxItem.js +0 -40
- package/dist/lib/components/ContextMenu/ContextMenuContent.js +0 -56
- package/dist/lib/components/ContextMenu/ContextMenuGroup.js +0 -30
- package/dist/lib/components/ContextMenu/ContextMenuItem.js +0 -59
- package/dist/lib/components/ContextMenu/ContextMenuItemIndicator.js +0 -50
- package/dist/lib/components/ContextMenu/ContextMenuLabel.js +0 -48
- package/dist/lib/components/ContextMenu/ContextMenuRadioGroup.js +0 -31
- package/dist/lib/components/ContextMenu/ContextMenuRadioItem.js +0 -41
- package/dist/lib/components/ContextMenu/ContextMenuSeparator.js +0 -31
- package/dist/lib/components/ContextMenu/ContextMenuSubContent.js +0 -53
- package/dist/lib/components/ContextMenu/ContextMenuSubTrigger.js +0 -40
- package/dist/lib/components/ContextMenu/ContextMenuTrigger.js +0 -31
- package/dist/lib/components/ContextMenu/index.js +0 -54
- package/dist/lib/components/DataList/DataListItem.js +0 -43
- package/dist/lib/components/DataList/DataListLabel.js +0 -49
- package/dist/lib/components/DataList/DataListValue.js +0 -51
- package/dist/lib/components/DataList/index.js +0 -57
- package/dist/lib/components/Dialog/DialogAction.js +0 -57
- package/dist/lib/components/Dialog/DialogCancel.js +0 -53
- package/dist/lib/components/Dialog/DialogContent.js +0 -55
- package/dist/lib/components/Dialog/DialogDescription.js +0 -45
- package/dist/lib/components/Dialog/DialogSlot.js +0 -44
- package/dist/lib/components/Dialog/DialogTitle.js +0 -45
- package/dist/lib/components/Dialog/DialogTrigger.js +0 -30
- package/dist/lib/components/Dialog/index.js +0 -38
- package/dist/lib/components/DoughnutChart/index.js +0 -46
- package/dist/lib/components/DropdownMenu/DropdonMenuRadioGroup.js +0 -31
- package/dist/lib/components/DropdownMenu/DropdonMenuSubContent.js +0 -58
- package/dist/lib/components/DropdownMenu/DropdownMenuCheckboxItem.js +0 -38
- package/dist/lib/components/DropdownMenu/DropdownMenuContent.js +0 -54
- package/dist/lib/components/DropdownMenu/DropdownMenuItem.js +0 -56
- package/dist/lib/components/DropdownMenu/DropdownMenuItemIndicator.js +0 -46
- package/dist/lib/components/DropdownMenu/DropdownMenuLable.js +0 -46
- package/dist/lib/components/DropdownMenu/DropdownMenuRadioItem.js +0 -39
- package/dist/lib/components/DropdownMenu/DropdownMenuSeparator.js +0 -31
- package/dist/lib/components/DropdownMenu/DropdownMenuSub.js +0 -30
- package/dist/lib/components/DropdownMenu/DropdownMenuSubTrigger.js +0 -38
- package/dist/lib/components/DropdownMenu/DropdownMenuTrigger.js +0 -51
- package/dist/lib/components/DropdownMenu/index.js +0 -43
- package/dist/lib/components/HoverCard/HoverCardContent.js +0 -59
- package/dist/lib/components/HoverCard/HoverCardTrigger.js +0 -30
- package/dist/lib/components/HoverCard/index.js +0 -33
- package/dist/lib/components/IconButton/index.js +0 -63
- package/dist/lib/components/Inset/index.js +0 -50
- package/dist/lib/components/Label/index.js +0 -53
- package/dist/lib/components/Menubar/MenubarCheckboxItem.js +0 -38
- package/dist/lib/components/Menubar/MenubarContent.js +0 -60
- package/dist/lib/components/Menubar/MenubarItem.js +0 -54
- package/dist/lib/components/Menubar/MenubarItemIndicator.js +0 -49
- package/dist/lib/components/Menubar/MenubarMenu.js +0 -30
- package/dist/lib/components/Menubar/MenubarRadioGroup.js +0 -31
- package/dist/lib/components/Menubar/MenubarRadioItem.js +0 -40
- package/dist/lib/components/Menubar/MenubarSeparator.js +0 -31
- package/dist/lib/components/Menubar/MenubarSub.js +0 -30
- package/dist/lib/components/Menubar/MenubarSubContent.js +0 -51
- package/dist/lib/components/Menubar/MenubarSubTrigger.js +0 -41
- package/dist/lib/components/Menubar/MenubarTrigger.js +0 -57
- package/dist/lib/components/Menubar/index.js +0 -73
- package/dist/lib/components/NavigationMenu/NavigationMenuContent.js +0 -48
- package/dist/lib/components/NavigationMenu/NavigationMenuIndicator.js +0 -31
- package/dist/lib/components/NavigationMenu/NavigationMenuItem.js +0 -30
- package/dist/lib/components/NavigationMenu/NavigationMenuLink.js +0 -51
- package/dist/lib/components/NavigationMenu/NavigationMenuList.js +0 -47
- package/dist/lib/components/NavigationMenu/NavigationMenuTrigger.js +0 -58
- package/dist/lib/components/NavigationMenu/NavigationMenuViewport.js +0 -53
- package/dist/lib/components/NavigationMenu/index.js +0 -50
- package/dist/lib/components/PieChart/index.js +0 -46
- package/dist/lib/components/Popover/PopoverClose.js +0 -46
- package/dist/lib/components/Popover/PopoverContent.js +0 -63
- package/dist/lib/components/Popover/PopoverTrigger.js +0 -30
- package/dist/lib/components/Popover/index.js +0 -34
- package/dist/lib/components/Progress/index.js +0 -57
- package/dist/lib/components/RadarChart/index.js +0 -43
- package/dist/lib/components/Radio/index.js +0 -51
- package/dist/lib/components/RadioCards/RadioCardsItem.js +0 -52
- package/dist/lib/components/RadioCards/index.js +0 -43
- package/dist/lib/components/RadioGroup/RadioGroupItem.js +0 -44
- package/dist/lib/components/RadioGroup/index.js +0 -51
- package/dist/lib/components/ScrollArea/index.js +0 -36
- package/dist/lib/components/SegmentedControl/SegmentedControlItem.js +0 -35
- package/dist/lib/components/SegmentedControl/index.js +0 -48
- package/dist/lib/components/Select/index.js +0 -83
- package/dist/lib/components/Separator/index.js +0 -47
- package/dist/lib/components/Skeleton/index.js +0 -43
- package/dist/lib/components/Slider/index.js +0 -50
- package/dist/lib/components/Spinner/index.js +0 -47
- package/dist/lib/components/TabNav/index.js +0 -46
- package/dist/lib/components/Table/index.js +0 -89
- package/dist/lib/components/Tabs/index.js +0 -59
- package/dist/lib/components/TextArea/index.js +0 -58
- package/dist/lib/components/TextField/index.js +0 -53
- package/dist/lib/components/Toast/ToastActionButton.js +0 -67
- package/dist/lib/components/Toast/ToastDescription.js +0 -53
- package/dist/lib/components/Toast/ToastTitle.js +0 -53
- package/dist/lib/components/Toast/index.js +0 -94
- package/dist/lib/components/Toggle/ToggleWithText.js +0 -57
- package/dist/lib/components/Toggle/index.js +0 -58
- package/dist/lib/components/ToggleGroup/index.js +0 -43
- package/dist/lib/components/ToggleGroup/toggleGroupItem.js +0 -52
- package/dist/lib/components/ToggleSwitch/index.js +0 -71
- package/dist/lib/components/Tooltip/index.js +0 -49
- package/dist/lib/components/index.js +0 -48
- package/dist/lib/constants.js +0 -569
- package/dist/lib/index.js +0 -2
- package/dist/lib/types.js +0 -1
- package/dist/lib/utils/utils.js +0 -27
- package/dist/tailwind.config.js +0 -144
- /package/dist/lib/components/ToggleGroup/{toggleGroupItem.d.ts → ToggleGroupItem.d.ts} +0 -0
package/dist/lib/constants.js
DELETED
@@ -1,569 +0,0 @@
|
|
1
|
-
import { ColorStyle, DarkColorStyle, colorOptions } from '../lib/color/constants';
|
2
|
-
export var radiusOptions = ['none', 'small', 'medium', 'large', 'full'];
|
3
|
-
export var typoSizeOptions = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
|
4
|
-
export var scalingOptions = ['90%', '95%', '100%', '105%', '110%'];
|
5
|
-
export var sizeOptions = ['x-small', 'small', 'medium', 'large', 'x-large'];
|
6
|
-
export var weightOptions = ['regular', 'medium', 'semibold', 'bold'];
|
7
|
-
export var themeOptions = ['light', 'dark'];
|
8
|
-
export var appearanceOptions = [
|
9
|
-
'classic',
|
10
|
-
'ghost',
|
11
|
-
'outline',
|
12
|
-
'soft',
|
13
|
-
'solid',
|
14
|
-
'surface',
|
15
|
-
];
|
16
|
-
//차트 label 위치
|
17
|
-
export var labelPositionList = ['top', 'bottom', 'left', 'right'];
|
18
|
-
export var radiusVariants = {
|
19
|
-
// 체크박스
|
20
|
-
small: {
|
21
|
-
none: 'rounded-none',
|
22
|
-
small: 'rounded-[3px]',
|
23
|
-
medium: 'rounded',
|
24
|
-
large: 'rounded',
|
25
|
-
full: 'rounded',
|
26
|
-
},
|
27
|
-
// 라디오버튼, 스위치, 태그, 배지, 버튼, 텍스트인풋, 텍스트영역, 페이지네이션
|
28
|
-
base: {
|
29
|
-
none: 'rounded-none',
|
30
|
-
small: 'rounded-[3px]',
|
31
|
-
medium: 'rounded', // 4px
|
32
|
-
large: 'rounded-md', // 6px
|
33
|
-
full: 'rounded-full',
|
34
|
-
},
|
35
|
-
// 배너
|
36
|
-
large: {
|
37
|
-
none: 'rounded-none',
|
38
|
-
small: 'rounded',
|
39
|
-
medium: 'rounded-lg', // 8px
|
40
|
-
large: 'rounded-xl', // 12px
|
41
|
-
full: 'rounded-2xl', // 16px
|
42
|
-
},
|
43
|
-
// 다이얼로그, 바텀시트, 그리드, 카드
|
44
|
-
'extra-large': {
|
45
|
-
none: 'rounded-none',
|
46
|
-
small: 'rounded',
|
47
|
-
medium: 'rounded-lg',
|
48
|
-
large: 'rounded-xl',
|
49
|
-
full: 'rounded-xl',
|
50
|
-
},
|
51
|
-
// Dropdown, Context Menu 아이템
|
52
|
-
'menu-item': {
|
53
|
-
none: 'rounded-none',
|
54
|
-
small: 'rounded-[1px]',
|
55
|
-
medium: 'rounded-sm',
|
56
|
-
large: 'rounded',
|
57
|
-
full: 'rounded',
|
58
|
-
},
|
59
|
-
};
|
60
|
-
export var weightVariants = {
|
61
|
-
regular: 'font-normal', // 400
|
62
|
-
medium: 'font-medium', // 500
|
63
|
-
semibold: 'font-semibold', // 600
|
64
|
-
bold: 'font-bold', // 700
|
65
|
-
};
|
66
|
-
export var scalingVariants = {
|
67
|
-
'90%': 'scale-90',
|
68
|
-
'95%': 'scale-95',
|
69
|
-
'100%': 'scale-100',
|
70
|
-
'105%': 'scale-105',
|
71
|
-
'110%': 'scale-110',
|
72
|
-
};
|
73
|
-
// 스토리북 공통 argTypes 설정
|
74
|
-
export var commonArgTypes = {
|
75
|
-
typoSize: {
|
76
|
-
table: {
|
77
|
-
category: 'Theme Props',
|
78
|
-
type: { summary: '1 ~ 9' },
|
79
|
-
},
|
80
|
-
control: { type: 'select' },
|
81
|
-
options: typoSizeOptions,
|
82
|
-
defaultValue: { summary: '3' },
|
83
|
-
},
|
84
|
-
scaling: {
|
85
|
-
table: {
|
86
|
-
category: 'Theme Props',
|
87
|
-
type: { summary: scalingOptions.join(' | ') },
|
88
|
-
},
|
89
|
-
control: { type: 'select' },
|
90
|
-
options: scalingOptions,
|
91
|
-
defaultValue: { summary: '100%' },
|
92
|
-
},
|
93
|
-
weight: {
|
94
|
-
table: {
|
95
|
-
category: 'Theme Props',
|
96
|
-
type: { summary: weightOptions.join(' | ') },
|
97
|
-
},
|
98
|
-
options: weightOptions,
|
99
|
-
control: { type: 'select' },
|
100
|
-
defaultValue: { summary: 'medium' },
|
101
|
-
},
|
102
|
-
radius: {
|
103
|
-
table: {
|
104
|
-
category: 'Theme Props',
|
105
|
-
type: { summary: radiusOptions.join(' | ') },
|
106
|
-
},
|
107
|
-
options: radiusOptions,
|
108
|
-
control: { type: 'select' },
|
109
|
-
defaultValue: { summary: 'medium' },
|
110
|
-
},
|
111
|
-
color: {
|
112
|
-
table: {
|
113
|
-
category: 'Theme Props',
|
114
|
-
type: { summary: 'colorVariants' },
|
115
|
-
},
|
116
|
-
options: colorOptions,
|
117
|
-
control: { type: 'select' },
|
118
|
-
defaultValue: { summary: 'red' },
|
119
|
-
},
|
120
|
-
basicText: {
|
121
|
-
table: {
|
122
|
-
category: 'Props',
|
123
|
-
type: { summary: 'string' },
|
124
|
-
},
|
125
|
-
control: 'text',
|
126
|
-
},
|
127
|
-
appearance: {
|
128
|
-
table: {
|
129
|
-
category: 'Props',
|
130
|
-
type: { summary: appearanceOptions.join(' | ') },
|
131
|
-
},
|
132
|
-
options: appearanceOptions,
|
133
|
-
control: { type: 'select' },
|
134
|
-
defaultValue: { summary: 'solid' },
|
135
|
-
},
|
136
|
-
size: {
|
137
|
-
table: {
|
138
|
-
category: 'Props',
|
139
|
-
type: { summary: sizeOptions.join(' | ') },
|
140
|
-
},
|
141
|
-
control: { type: 'select' },
|
142
|
-
options: sizeOptions,
|
143
|
-
defaultValue: { summary: 'medium' },
|
144
|
-
},
|
145
|
-
};
|
146
|
-
export var blackText = ['sky', 'mint', 'lime', 'yellow', 'amber', 'orange', 'white'];
|
147
|
-
export var primaryColorStyle = function () {
|
148
|
-
var color = {};
|
149
|
-
for (var i in ColorStyle) {
|
150
|
-
var darkColor = "".concat(i, "Dark");
|
151
|
-
color[i] = blackText.includes(i)
|
152
|
-
? "bg-".concat(ColorStyle[i], " text-slate-12 dark:bg-").concat(DarkColorStyle[darkColor], " dark:text-slateDark-12")
|
153
|
-
: "bg-".concat(ColorStyle[i], " text-white dark:bg-").concat(DarkColorStyle[darkColor], " dark:text-slateDark-1");
|
154
|
-
}
|
155
|
-
return color;
|
156
|
-
};
|
157
|
-
export var bgColorStyle = function () {
|
158
|
-
var color = {};
|
159
|
-
for (var i in ColorStyle) {
|
160
|
-
var darkColor = "".concat(i, "Dark");
|
161
|
-
color[i] = "bg-".concat(ColorStyle[i], " dark:bg-").concat(DarkColorStyle[darkColor]);
|
162
|
-
}
|
163
|
-
return color;
|
164
|
-
};
|
165
|
-
export var textColorStyle = function () {
|
166
|
-
var color = {};
|
167
|
-
for (var i in ColorStyle) {
|
168
|
-
var darkColor = "".concat(i, "Dark");
|
169
|
-
color[i] = "text-".concat(ColorStyle[i], " dark:text-").concat(DarkColorStyle[darkColor]);
|
170
|
-
}
|
171
|
-
return color;
|
172
|
-
};
|
173
|
-
var makeClassName = function (type, isClickable) {
|
174
|
-
var className = '';
|
175
|
-
className += "".concat(type.light.default, " ").concat(type.dark.default);
|
176
|
-
if (isClickable) {
|
177
|
-
className += " ".concat(type.light.hover, " ").concat(type.light.active, " ").concat(type.light.disable, " ").concat(type.dark.hover, " ").concat(type.dark.active, " ").concat(type.dark.disable);
|
178
|
-
}
|
179
|
-
return className;
|
180
|
-
};
|
181
|
-
export var appearanceStyle = function (type, color, isClickable) {
|
182
|
-
if (isClickable === void 0) { isClickable = true; }
|
183
|
-
var darkColor = "".concat(color, "Dark");
|
184
|
-
var classic = {
|
185
|
-
light: {
|
186
|
-
default: "bg-".concat(color, "-9 border border-solid border-").concat(color, "-9 text-white shadow-button-classic"),
|
187
|
-
hover: "hover:bg-".concat(color, "-10 hover:border-").concat(color, "-9 hover:text-white"),
|
188
|
-
active: "active:bg-".concat(color, "-9 active:border-").concat(color, "-9 active:text-white"),
|
189
|
-
disable: "disabled:bg-slateA-3 disabled:border-slate-4 disabled:text-slateA-8",
|
190
|
-
},
|
191
|
-
dark: {
|
192
|
-
default: "dark:bg-".concat(darkColor, "-9 dark:border-").concat(darkColor, "-9 dark:text-slateDark-1 dark:shadow-button-dark-classic"),
|
193
|
-
hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:border-").concat(darkColor, "-9 dark:hover:text-slateDark-1"),
|
194
|
-
active: "dark:active:bg-".concat(darkColor, "-9 dark:active:border-").concat(darkColor, "-9 dark:active:text-slateDark-1"),
|
195
|
-
disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8",
|
196
|
-
},
|
197
|
-
};
|
198
|
-
var solid = {
|
199
|
-
light: {
|
200
|
-
default: "bg-".concat(color, "-9 border-none text-white"),
|
201
|
-
hover: "hover:bg-".concat(color, "-10 hover:border-none hover:text-white"),
|
202
|
-
active: "active:bg-".concat(color, "-10 active:border-none active:text-white active:opacity-[.92]"),
|
203
|
-
disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
|
204
|
-
},
|
205
|
-
dark: {
|
206
|
-
default: "dark:bg-".concat(darkColor, "-9 dark:text-slateDark-1"),
|
207
|
-
hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:text-slateDark-1"),
|
208
|
-
active: "dark:active:bg-".concat(darkColor, "-10 dark:active:text-slateDark-1 dark:active:opacity-[.92]"),
|
209
|
-
disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8",
|
210
|
-
},
|
211
|
-
};
|
212
|
-
var soft = {
|
213
|
-
light: {
|
214
|
-
default: "bg-".concat(color, "A-3 border-none text-").concat(color, "A-11"),
|
215
|
-
hover: "hover:bg-".concat(color, "A-4 hover:border-none hover:text-").concat(color, "A-11"),
|
216
|
-
active: "active:bg-".concat(color, "A-5 active:border-none active:text-").concat(color, "A-11 active:opacity-[.92]"),
|
217
|
-
disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
|
218
|
-
},
|
219
|
-
dark: {
|
220
|
-
default: "dark:bg-".concat(darkColor, "A-3 dark:text-").concat(darkColor, "A-11"),
|
221
|
-
hover: "dark:hover:bg-".concat(darkColor, "A-4 dark:hover:text-").concat(darkColor, "A-11"),
|
222
|
-
active: "dark:active:bg-".concat(darkColor, "A-5 dark:active:text-").concat(darkColor, "A-11 dark:active:opacity-[.92]"),
|
223
|
-
disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8",
|
224
|
-
},
|
225
|
-
};
|
226
|
-
var surface = {
|
227
|
-
light: {
|
228
|
-
default: "bg-".concat(color, "A-2 border border-solid border-").concat(color, "A-7 text-").concat(color, "A-11"),
|
229
|
-
hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11"),
|
230
|
-
active: "active:bg-".concat(color, "A-3 active:border-").concat(color, "A-8 active:text-").concat(color, "A-11 active:opacity-[.92]"),
|
231
|
-
disable: "disabled:bg-slateA-2 disabled:border-slateA-6 disabled:text-slateA-8",
|
232
|
-
},
|
233
|
-
dark: {
|
234
|
-
default: "dark:bg-".concat(darkColor, "A-2 dark:border-").concat(darkColor, "A-7 dark:text-").concat(darkColor, "A-11"),
|
235
|
-
hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11"),
|
236
|
-
active: "dark:active:bg-".concat(darkColor, "A-3 dark:active:border-").concat(darkColor, "A-8 dark:active:text-").concat(darkColor, "A-11 dark:active:opacity-[.92]"),
|
237
|
-
disable: "dark:disabled:bg-slateDarkA-2 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8",
|
238
|
-
},
|
239
|
-
};
|
240
|
-
var outline = {
|
241
|
-
light: {
|
242
|
-
default: "bg-transparent border border-solid border-".concat(color, "A-8 text-").concat(color, "A-11"),
|
243
|
-
hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11"),
|
244
|
-
active: "active:bg-".concat(color, "A-3 active:border-").concat(color, "A-8 active:text-").concat(color, "A-11"),
|
245
|
-
disable: "disabled:bg-transparent disabled:border-slateA-7 disabled:text-slateA-8",
|
246
|
-
},
|
247
|
-
dark: {
|
248
|
-
default: "dark:border-".concat(darkColor, "A-8 dark:bg-transparent dark:text-").concat(darkColor, "A-11"),
|
249
|
-
hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11"),
|
250
|
-
active: "dark:active:bg-".concat(darkColor, "A-3 dark:active:border-").concat(darkColor, "A-8 dark:active:text-").concat(darkColor, "A-11 dark:active:opacity-[.92]"),
|
251
|
-
disable: "dark:disabled:border-slateDarkA-7 dark:disabled:bg-transparent dark:disabled:text-slateDarkA-8 ",
|
252
|
-
},
|
253
|
-
};
|
254
|
-
var ghost = {
|
255
|
-
light: {
|
256
|
-
default: "bg-transparent border-none text-".concat(color, "A-11"),
|
257
|
-
hover: "hover:bg-".concat(color, "A-3 hover:border-none hover:text-").concat(color, "A-11"),
|
258
|
-
active: "active:bg-".concat(color, "A-4 active:border-none active:text-").concat(color, "A-11 active:opacity-[.92]"),
|
259
|
-
disable: "disabled:bg-transparent disabled:border-none disabled:text-slateA-8",
|
260
|
-
},
|
261
|
-
dark: {
|
262
|
-
default: "dark:bg-transparent dark:text-".concat(darkColor, "A-11"),
|
263
|
-
hover: "dark:hover:bg-".concat(darkColor, "A-3 dark:hover:text-").concat(darkColor, "A-11"),
|
264
|
-
active: "dark:active:bg-".concat(darkColor, "A-4 dark:active:text-").concat(darkColor, "A-11 dark:active:opacity-[.92]"),
|
265
|
-
disable: "dark:disabled:text-slateDarkA-8",
|
266
|
-
},
|
267
|
-
};
|
268
|
-
switch (type) {
|
269
|
-
case 'classic':
|
270
|
-
return makeClassName(classic, isClickable);
|
271
|
-
case 'solid':
|
272
|
-
return makeClassName(solid, isClickable);
|
273
|
-
case 'soft':
|
274
|
-
return makeClassName(soft, isClickable);
|
275
|
-
case 'surface':
|
276
|
-
return makeClassName(surface, isClickable);
|
277
|
-
case 'outline':
|
278
|
-
return makeClassName(outline, isClickable);
|
279
|
-
case 'ghost':
|
280
|
-
return makeClassName(ghost, isClickable);
|
281
|
-
default:
|
282
|
-
return '';
|
283
|
-
}
|
284
|
-
};
|
285
|
-
export var toggleAppearanceStyle = function (type, color, isClickable, stateOn) {
|
286
|
-
if (isClickable === void 0) { isClickable = true; }
|
287
|
-
if (stateOn === void 0) { stateOn = ''; }
|
288
|
-
var darkColor = "".concat(color, "Dark");
|
289
|
-
var classic = {
|
290
|
-
light: {
|
291
|
-
default: "bg-".concat(color, "-9 border border-solid border-").concat(color, "-9 text-white shadow-button-classic"),
|
292
|
-
hover: "hover:bg-".concat(color, "-10 hover:border-").concat(color, "-9 hover:text-white ").concat(stateOn, "hover:bg-").concat(color, "-10 ").concat(stateOn, "hover:border-").concat(color, "-9 ").concat(stateOn, "hover:text-white"),
|
293
|
-
active: "".concat(stateOn, "bg-").concat(color, "-9 ").concat(stateOn, "border-").concat(color, "-9 ").concat(stateOn, "text-white"),
|
294
|
-
disable: "disabled:bg-slateA-3 disabled:border-slate-4 disabled:text-slateA-8",
|
295
|
-
},
|
296
|
-
dark: {
|
297
|
-
default: "dark:bg-".concat(darkColor, "-9 dark:border-").concat(darkColor, "-9 dark:text-slateDark-1"),
|
298
|
-
hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:border-").concat(darkColor, "-9 dark:hover:text-slateDark-1 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "-10 ").concat(stateOn, "dark:hover:border-").concat(darkColor, "-9 ").concat(stateOn, "dark:hover:text-slateDark-1"),
|
299
|
-
active: "dark:".concat(stateOn, "bg-").concat(darkColor, "-9 dark:").concat(stateOn, "border-").concat(darkColor, "-9 dark:").concat(stateOn, "text-slateDark-1"),
|
300
|
-
disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8",
|
301
|
-
},
|
302
|
-
};
|
303
|
-
var solid = {
|
304
|
-
light: {
|
305
|
-
default: "bg-".concat(color, "-9 border-none text-white"),
|
306
|
-
hover: "hover:bg-".concat(color, "-10 hover:border-none hover:text-white ").concat(stateOn, "hover:bg-").concat(color, "-10 ").concat(stateOn, "hover:border-none ").concat(stateOn, "hover:text-white"),
|
307
|
-
active: "".concat(stateOn, "bg-").concat(color, "-10 ").concat(stateOn, "border-none ").concat(stateOn, "text-white ").concat(stateOn, "opacity-[.92]"),
|
308
|
-
disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
|
309
|
-
},
|
310
|
-
dark: {
|
311
|
-
default: "dark:bg-".concat(darkColor, "-9 dark:text-slateDark-1"),
|
312
|
-
hover: "dark:hover:bg-".concat(darkColor, "-10 dark:hover:text-slateDark-1 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "-10 ").concat(stateOn, "dark:hover:text-slateDark-1"),
|
313
|
-
active: "dark:".concat(stateOn, "bg-").concat(darkColor, "-10 dark:").concat(stateOn, "text-slateDark-1 dark:").concat(stateOn, "opacity-[.92]"),
|
314
|
-
disable: "dark:disabled:bg-slateDarkA-3 disabled:text-slateDarkA-8",
|
315
|
-
},
|
316
|
-
};
|
317
|
-
var soft = {
|
318
|
-
light: {
|
319
|
-
default: "bg-".concat(color, "A-3 border-none text-").concat(color, "A-11"),
|
320
|
-
hover: "hover:bg-".concat(color, "A-4 hover:border-none hover:text-").concat(color, "A-11 ").concat(stateOn, "hover:bg-").concat(color, "A-4 ").concat(stateOn, "hover:border-none ").concat(stateOn, "hover:text-").concat(color, "A-11"),
|
321
|
-
active: "".concat(stateOn, "bg-").concat(color, "A-5 ").concat(stateOn, "border-none ").concat(stateOn, "text-").concat(color, "A-11 ").concat(stateOn, "opacity-[.92]"),
|
322
|
-
disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
|
323
|
-
},
|
324
|
-
dark: {
|
325
|
-
default: "dark:bg-".concat(darkColor, "A-3 dark:text-").concat(darkColor, "A-11"),
|
326
|
-
hover: "dark:hover:bg-".concat(darkColor, "A-4 dark:hover:text-").concat(darkColor, "A-11 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "A-4 ").concat(stateOn, "dark:hover:text-").concat(darkColor, "A-11"),
|
327
|
-
active: "dark:".concat(stateOn, "bg-").concat(darkColor, "A-5 dark:").concat(stateOn, "text-").concat(darkColor, "A-11 dark:").concat(stateOn, "opacity-[.92]"),
|
328
|
-
disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8",
|
329
|
-
},
|
330
|
-
};
|
331
|
-
var surface = {
|
332
|
-
light: {
|
333
|
-
default: "bg-".concat(color, "A-2 border border-solid border-").concat(color, "A-7 text-").concat(color, "A-11"),
|
334
|
-
hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11 ").concat(stateOn, "hover:bg-").concat(color, "A-2 ").concat(stateOn, "hover:border-").concat(color, "A-8 ").concat(stateOn, "hover:text-").concat(color, "A-11"),
|
335
|
-
active: "".concat(stateOn, "bg-").concat(color, "A-3 ").concat(stateOn, "border-").concat(color, "A-8 ").concat(stateOn, "text-").concat(color, "A-11 ").concat(stateOn, "opacity-[.92]"),
|
336
|
-
disable: "disabled:bg-slatDarkeA-2 disabled:border-slateDarkA-6 disabled:text-slateDarkA-8",
|
337
|
-
},
|
338
|
-
dark: {
|
339
|
-
default: "dark:bg-".concat(darkColor, "A-2 dark:border-").concat(darkColor, "A-7 dark:text-").concat(darkColor, "A-11"),
|
340
|
-
hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "A-2 ").concat(stateOn, "dark:hover:border-").concat(darkColor, "A-8 ").concat(stateOn, "dark:hover:text-").concat(darkColor, "A-11"),
|
341
|
-
active: "dark:".concat(stateOn, "bg-").concat(darkColor, "A-3 dark:").concat(stateOn, "border-").concat(darkColor, "A-8 dark:").concat(stateOn, "text-").concat(darkColor, "A-11 dark:").concat(stateOn, "opacity-[.92]"),
|
342
|
-
disable: "dark:disabled:bg-slateDarkA-2 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8",
|
343
|
-
},
|
344
|
-
};
|
345
|
-
var outline = {
|
346
|
-
light: {
|
347
|
-
default: "bg-transparent border border-solid border-".concat(color, "A-8 text-").concat(color, "A-11"),
|
348
|
-
hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11 ").concat(stateOn, "hover:bg-").concat(color, "A-2 ").concat(stateOn, "hover:border-").concat(color, "A-8 ").concat(stateOn, "hover:text-").concat(color, "A-11"),
|
349
|
-
active: "".concat(stateOn, "bg-").concat(color, "A-3 ").concat(stateOn, "border-").concat(color, "A-8 ").concat(stateOn, "text-").concat(color, "A-11"),
|
350
|
-
disable: "disabled:bg-transparent disabled:border-slateA-7 disabled:text-slateA-8",
|
351
|
-
},
|
352
|
-
dark: {
|
353
|
-
default: "dark:border-".concat(darkColor, "A-8 dark:text-").concat(darkColor, "A-11"),
|
354
|
-
hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "A-2 ").concat(stateOn, "dark:hover:border-").concat(darkColor, "A-8 ").concat(stateOn, "dark:hover:text-").concat(darkColor, "A-11"),
|
355
|
-
active: "dark:".concat(stateOn, "bg-").concat(darkColor, "A-3 dark:").concat(stateOn, "border-").concat(darkColor, "A-8 dark:").concat(stateOn, "text-").concat(darkColor, "A-11 dark:").concat(stateOn, "opacity-[.92]"),
|
356
|
-
disable: "dark:disabled:border-slateDarkA-7 dark:disabled:text-slateDarkA-8",
|
357
|
-
},
|
358
|
-
};
|
359
|
-
var ghost = {
|
360
|
-
light: {
|
361
|
-
default: "bg-transparent border-none text-".concat(color, "A-11"),
|
362
|
-
hover: "hover:bg-".concat(color, "A-3 hover:border-none hover:text-").concat(color, "A-11 ").concat(stateOn, "hover:bg-").concat(color, "A-3 ").concat(stateOn, "hover:border-none ").concat(stateOn, "hover:text-").concat(color, "A-11"),
|
363
|
-
active: "".concat(stateOn, "bg-").concat(color, "A-4 ").concat(stateOn, "border-none ").concat(stateOn, "text-").concat(color, "A-11 ").concat(stateOn, "opacity-[.92]"),
|
364
|
-
disable: "disabled:bg-transparent disabled:border-none disabled:text-slateA-8",
|
365
|
-
},
|
366
|
-
dark: {
|
367
|
-
default: "dark:bg-transparent dark:text-".concat(darkColor, "A-11"),
|
368
|
-
hover: "dark:hover:bg-".concat(darkColor, "A-3 dark:hover:text-").concat(darkColor, "A-11 ").concat(stateOn, "dark:hover:bg-").concat(darkColor, "A-3 ").concat(stateOn, "dark:hover:text-").concat(darkColor, "A-11"),
|
369
|
-
active: "dark:".concat(stateOn, "bg-").concat(darkColor, "A-4 dark:").concat(stateOn, "text-").concat(darkColor, "A-11 dark:").concat(stateOn, "opacity-[.92]"),
|
370
|
-
disable: "dark:disabled:text-slateDarkA-8",
|
371
|
-
},
|
372
|
-
};
|
373
|
-
switch (type) {
|
374
|
-
case 'classic':
|
375
|
-
return makeClassName(classic, isClickable);
|
376
|
-
case 'solid':
|
377
|
-
return makeClassName(solid, isClickable);
|
378
|
-
case 'soft':
|
379
|
-
return makeClassName(soft, isClickable);
|
380
|
-
case 'surface':
|
381
|
-
return makeClassName(surface, isClickable);
|
382
|
-
case 'outline':
|
383
|
-
return makeClassName(outline, isClickable);
|
384
|
-
case 'ghost':
|
385
|
-
return makeClassName(ghost, isClickable);
|
386
|
-
default:
|
387
|
-
return '';
|
388
|
-
}
|
389
|
-
};
|
390
|
-
export var menuItemAppearanceStyle = function (type, color) {
|
391
|
-
var appearanceStyle = '';
|
392
|
-
if (type === 'solid') {
|
393
|
-
appearanceStyle = "hover:bg-".concat(color, "-9 dark:hover:bg-").concat(color, "Dark-9 ");
|
394
|
-
appearanceStyle += blackText.includes(color)
|
395
|
-
? "hover:text-slateA-11 dark:hover:text-white"
|
396
|
-
: "hover:text-white dark:hover:text-white";
|
397
|
-
}
|
398
|
-
if (type === 'soft') {
|
399
|
-
appearanceStyle = "hover:bg-".concat(color, "A-4 dark:hover-bg-").concat(color, "DarkA-4");
|
400
|
-
}
|
401
|
-
if (type === 'ghost') {
|
402
|
-
appearanceStyle = "hover:bg-".concat(color, "-3 dark:hover:bg-").concat(color, "Dark-3");
|
403
|
-
}
|
404
|
-
return appearanceStyle;
|
405
|
-
};
|
406
|
-
export var switchCheckedApperanceStyle = function (type, color) {
|
407
|
-
var softStyle = "data-[state=checked]:bg-".concat(color, "A-3 data-[state=unchecked]:bg-").concat(color, "A-2 ");
|
408
|
-
var surfaceStyle = "data-[state=checked]:bg-".concat(color, "A-2 border border-solid border-").concat(color, "A-7 data-[state=unchecked]:bg-slateA-2 data-[state=unchecked]:bg-slateA-6 ");
|
409
|
-
var classicStyle = "data-[state=checked]:bg-".concat(color, "-9 text-white border border-solid border-").concat(color, "-9 shadow-custom-1 shadow-custom-2 shadow-custom-3 data-[state=unchecked]:border-slate-4 data-[state=unchecked]:bg-slateA-3 data-[state=unchecked]:text-slateA-8");
|
410
|
-
switch (type) {
|
411
|
-
case 'classic':
|
412
|
-
return classicStyle;
|
413
|
-
case 'soft':
|
414
|
-
return softStyle;
|
415
|
-
case 'surface':
|
416
|
-
return surfaceStyle;
|
417
|
-
default:
|
418
|
-
return '';
|
419
|
-
}
|
420
|
-
};
|
421
|
-
export var checkboxAppearanceStyle = function (type, color, indeterminate) {
|
422
|
-
var darkColor = "".concat(color, "Dark");
|
423
|
-
var surface = {
|
424
|
-
light: {
|
425
|
-
default: "border data-[state=unchecked]:bg-transparent data-[state=unchecked]:border-slateA-7\n data-[state=checked]:bg-".concat(color, "-9 data-[state=checked]:border-none data-[state=checked]:text-slate-1"),
|
426
|
-
hover: "hover:data-[state=unchecked]:bg-transparent hover:data-[state=unchecked]:border-slateA-8\n hover:data-[state=checked]:bg-".concat(color, "-10 hover:data-[state=checked]:border-none hover:data-[state=checked]:text-white"),
|
427
|
-
active: "active:data-[state=unchecked]:bg-transparent active:data-[state=unchecked]:border-slateA-9\n active:data-[state=checked]:bg-".concat(color, "-10 active:data-[state=checked]:border-none active:data-[state=checked]:text-white"),
|
428
|
-
disable: "disabled:data-[state=unchecked]:bg-slateA-3 disabled:data-[state=unchecked]:border-slateA-6\n disabled:data-[state=checked]:bg-slateA-3 disabled:data-[state=checked]:border-slateA-6 disabled:data-[state=checked]:text-slateA-8",
|
429
|
-
},
|
430
|
-
dark: {
|
431
|
-
default: "dark:data-[state=unchecked]:border-slateDarkA-7\n dark:data-[state=checked]:bg-".concat(darkColor, "-9 dark:data-[state=checked]:text-#111113"),
|
432
|
-
hover: "dark:hover:data-[state=unchecked]:border-slateDarkA-8\n dark:hover:data-[state=checked]:bg-".concat(darkColor, "-10 dark:hover:data-[state=checked]:text-#111113"),
|
433
|
-
active: "dark:active:data-[state=unchecked]:border-slateDarkA-9\n dark:active:data-[state=checked]:bg-".concat(darkColor, "-10 dark:active:data-[state=checked]:text-#111113"),
|
434
|
-
disable: "dark:disabled:data-[state=unchecked]:bg-slateDarkA-3 dark:disabled:data-[state=unchecked]:border-slateDarkA-6\n dark:disabled:data-[state=checked]:bg-slateDarkA-3 dark:disabled:data-[state=checked]:border-slateDarkA-6 dark:disabled:data-[state=checked]:text-slateDarkA-8",
|
435
|
-
},
|
436
|
-
};
|
437
|
-
var soft = {
|
438
|
-
light: {
|
439
|
-
default: "data-[state=unchecked]:bg-".concat(color, "A-5 data-[state=unchecked]:border-none\n data-[state=checked]:bg-").concat(color, "A-5 data-[state=checked]:border-none data-[state=checked]:text-").concat(color, "-11"),
|
440
|
-
hover: "hover:data-[state=unchecked]:bg-".concat(color, "A-6 hover:data-[state=unchecked]:border-none\n hover:data-[state=checked]:bg-").concat(color, "A-6 hover:data-[state=checked]:border-none hover:data-[state=checked]:text-").concat(color, "-11"),
|
441
|
-
active: "active:data-[state=unchecked]:bg-".concat(color, "A-7 active:data-[state=unchecked]:border-none\n active:data-[state=checked]:bg-").concat(color, "A-7 active:data-[state=checked]:border-none active:data-[state=checked]:text-").concat(color, "-11"),
|
442
|
-
disable: "disabled:data-[state=unchecked]:bg-slateA-3 disabled:data-[state=unchecked]:border-none\n disabled:data-[state=checked]:bg-slateA-3 disabled:data-[state=checked]:border-none disabled:data-[state=checked]:text-slateA-8",
|
443
|
-
},
|
444
|
-
dark: {
|
445
|
-
default: "dark:data-[state=unchecked]:bg-".concat(darkColor, "A-5\n dark:data-[state=checked]:bg-").concat(darkColor, "A-5 dark:data-[state=checked]:text-").concat(darkColor, "-11"),
|
446
|
-
hover: "dark:hover:data-[state=unchecked]:bg-".concat(darkColor, "A-6\n dark:hover:data-[state=checked]:bg-").concat(darkColor, "A-6 dark:hover:data-[state=checked]:text-").concat(darkColor, "-11"),
|
447
|
-
active: "dark:active:data-[state=unchecked]:bg-".concat(darkColor, "A-7\n dark:active:data-[state=checked]:bg-").concat(darkColor, "A-7 dark:active:data-[state=checked]:text-").concat(darkColor, "-11"),
|
448
|
-
disable: "dark:disabled:data-[state=unchecked]:bg-slateDarkA-3\n dark:disabled:data-[state=checked]:bg-slateDarkA-3 dark:disabled:data-[state=checked]:text-slateDarkA-8",
|
449
|
-
},
|
450
|
-
};
|
451
|
-
var indeterminateSurface = {
|
452
|
-
light: {
|
453
|
-
default: "border bg-".concat(color, "A-2 border-").concat(color, "A-7 text-").concat(color, "A-11"),
|
454
|
-
hover: "hover:bg-".concat(color, "A-2 hover:border-").concat(color, "A-8 hover:text-").concat(color, "A-11"),
|
455
|
-
active: "active:bg-".concat(color, "A-3 active:border-").concat(color, "A-8 active:text-").concat(color, "A-11"),
|
456
|
-
disable: "disabled:bg-slateA-3 disabled:border-slateA-6 disabled:text-slateA-8",
|
457
|
-
},
|
458
|
-
dark: {
|
459
|
-
default: "dark:bg-".concat(darkColor, "A-2 dark:border-").concat(darkColor, "A-7 dark:text-").concat(darkColor, "A-11"),
|
460
|
-
hover: "dark:hover:bg-".concat(darkColor, "A-2 dark:hover:border-").concat(darkColor, "A-8 dark:hover:text-").concat(darkColor, "A-11"),
|
461
|
-
active: "dark:active:bg-".concat(darkColor, "A-3 dark:active:border-").concat(darkColor, "A-8 dark:active:text-").concat(darkColor, "A-11"),
|
462
|
-
disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8",
|
463
|
-
},
|
464
|
-
};
|
465
|
-
var indeterminateSoft = {
|
466
|
-
light: {
|
467
|
-
default: "border bg-transparent border-".concat(color, "A-6 text-").concat(color, "A-11"),
|
468
|
-
hover: "hover:bg-transparent hover:border-".concat(color, "A-6 hover:text-").concat(color, "A-11"),
|
469
|
-
active: "active:bg-transparent active:border-".concat(color, "A-6 active:text-").concat(color, "A-11"),
|
470
|
-
disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
|
471
|
-
},
|
472
|
-
dark: {
|
473
|
-
default: "dark:border-".concat(darkColor, "A-6 dark:text-").concat(darkColor, "A-11"),
|
474
|
-
hover: "dark:hover:border-".concat(darkColor, "A-6 dark:hover:text-").concat(darkColor, "A-11"),
|
475
|
-
active: "dark:active:border-".concat(darkColor, "A-6 dark:active:text-").concat(darkColor, "A-11"),
|
476
|
-
disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8",
|
477
|
-
},
|
478
|
-
};
|
479
|
-
switch (type) {
|
480
|
-
case 'classic':
|
481
|
-
return indeterminate
|
482
|
-
? makeClassName(indeterminateSurface, true)
|
483
|
-
: "".concat(makeClassName(surface, true), " data-[state=checked]:shadow-checkbox-classic data-[state=unchecked]:shadow-checkbox-classic\n dark:data-[state=checked]:shadow-checkbox-classic dark:data-[state=unchecked]:shadow-checkbox-classic");
|
484
|
-
case 'soft':
|
485
|
-
return indeterminate ? makeClassName(indeterminateSoft, true) : makeClassName(soft, true);
|
486
|
-
case 'surface':
|
487
|
-
return indeterminate
|
488
|
-
? makeClassName(indeterminateSurface, true)
|
489
|
-
: makeClassName(surface, true);
|
490
|
-
default:
|
491
|
-
return makeClassName(surface, true);
|
492
|
-
}
|
493
|
-
};
|
494
|
-
export var selectAppearanceStyle = function (type, color) {
|
495
|
-
var darkColor = "".concat(color, "Dark");
|
496
|
-
var surface = {
|
497
|
-
light: {
|
498
|
-
default: "bg-[#FFFFFF] border border-slateA-7 data-placeholder:text-slateA-10 text-slateA-12",
|
499
|
-
hover: "hover:bg-[#FFFFFF] hover:border hover:border-slateA-8 hover:text-slateA-10",
|
500
|
-
active: "active:bg-".concat(color, "A-3 active:border-").concat(color, "A-8 active:text-slateA-10 active:opacity-[.92]"),
|
501
|
-
disable: "disabled:bg-slateA-2 disabled:border-slateA-6 disabled:text-slateA-8",
|
502
|
-
},
|
503
|
-
dark: {
|
504
|
-
default: "dark:bg-[#111113] dark:border dark:data-placeholder:border-slateDarkA-7 dark:data-placeholder:text-slateDarkA-9 dark:border-slateDarkA-7 dark:text-slateDarkA-12",
|
505
|
-
hover: "dark:hover:bg-[#111113] dark:hover:border dark:hover:border-slateDarkA-8 dark:hover:text-slateDarkA-10",
|
506
|
-
active: "dark:active:bg-".concat(darkColor, "A-3 dark:active:border dark:active:border-").concat(darkColor, "A-8 dark:active:text-slateDarkA-10 dark:active:opacity-[.92]"),
|
507
|
-
disable: "dark:disabled:bg-slateDarkA-2 dark:disabled:border dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8",
|
508
|
-
},
|
509
|
-
};
|
510
|
-
var classic = {
|
511
|
-
light: {
|
512
|
-
default: "bg-slateA-2 border border-slate-4 data-placeholder:text-slateA-10 text-slateA-12",
|
513
|
-
hover: "hover:bg-slateA-3 hover:border hover:border-slate-4 hover:text-slateA-10",
|
514
|
-
active: "active:bg-slateA-4 active:border active:border-slate-6 active:text-slateA-10",
|
515
|
-
disable: "disabled:bg-slateA-3 disabled:border disabled:border-slate-4 disabled:text-slateA-8",
|
516
|
-
},
|
517
|
-
dark: {
|
518
|
-
default: "dark:bg-slateDarkA-2 dark:border-slateDark-4 dark:data-placeholder:text-slateDarkA-10 dark:text-slateDarkA-12",
|
519
|
-
hover: "dark:hover:bg-slateDarkA-3 dark:hover:border-slateDark-4 dark:hover:text-slateDarkA-10",
|
520
|
-
active: "dark:active:bg-slateDarkA-4 dark:active:border-slateDark-6 dark:active:text-slateDarkA-10",
|
521
|
-
disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8",
|
522
|
-
},
|
523
|
-
};
|
524
|
-
var soft = {
|
525
|
-
light: {
|
526
|
-
default: "bg-".concat(color, "A-3 border-none data-placeholder:text-").concat(color, "A-12/[.5] text-").concat(color, "A-12"),
|
527
|
-
hover: "hover:bg-".concat(color, "A-4 hover:border-none hover:text-").concat(color, "A-12/[.5]"),
|
528
|
-
active: "active:bg-".concat(color, "A-5 active:border-none active:text-").concat(color, "A-12/[.5] active:opacity-[.92]"),
|
529
|
-
disable: "disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8",
|
530
|
-
},
|
531
|
-
dark: {
|
532
|
-
default: "dark:bg-".concat(darkColor, "A-3 dark:border-none dark:data-placeholder:text-").concat(darkColor, "A-12/[.5] dark:text-").concat(darkColor, "A-12 "),
|
533
|
-
hover: "dark:hover:bg-".concat(darkColor, "A-4 dark:hover:border-none dark:hover:text-").concat(darkColor, "A-12/[.5]"),
|
534
|
-
active: "dark:active:bg-".concat(darkColor, "A-5 dark:active:border-none dark:active:text-").concat(darkColor, "A-12/[.5] dark:active:opacity-[.92]"),
|
535
|
-
disable: "dark:disabled:bg-slateDarkA-3 dark:disabled:border-none dark:disabled:text-slateDarkA-8",
|
536
|
-
},
|
537
|
-
};
|
538
|
-
var ghost = {
|
539
|
-
light: {
|
540
|
-
default: "bg-transparent border-none data-placeholder:text-".concat(color, "A-12/[.5] text-").concat(color, "A-12"),
|
541
|
-
hover: "hover:bg-".concat(color, "A-3 hover:border-none hover:text-").concat(color, "A-1/[.5]"),
|
542
|
-
active: "active:bg-".concat(color, "A-4 active:border-none active:text-").concat(color, "A-12/[.5] active:opacity-[.92]"),
|
543
|
-
disable: "disabled:bg-transparent disabled:border-none disabled:text-slateA-8",
|
544
|
-
},
|
545
|
-
dark: {
|
546
|
-
default: "dark:bg-transparent dark:border-none dark:data-placeholder:text-".concat(darkColor, "A-12/[.5] dark:text-").concat(darkColor, "A-12"),
|
547
|
-
hover: "dark:hover:bg-".concat(darkColor, "A-3 dark:hover:border-none dark:hover:text-").concat(darkColor, "A-12/[.5]"),
|
548
|
-
active: "dark:active:bg-".concat(darkColor, "A-4 dark:active:border-none dark:active:text-").concat(darkColor, "A-12/[.5] dark:active:opacity-[.92]"),
|
549
|
-
disable: "dark:disabled:text-slateDarkA-8 dark:disabled:border-none",
|
550
|
-
},
|
551
|
-
};
|
552
|
-
var makeClassName = function (type) {
|
553
|
-
var className = '';
|
554
|
-
className += "".concat(type.light.default, " ").concat(type.dark.default, " ").concat(type.light.hover, " ").concat(type.light.active, " ").concat(type.light.disable, " ").concat(type.dark.hover, " ").concat(type.dark.active, " ").concat(type.dark.disable);
|
555
|
-
return className;
|
556
|
-
};
|
557
|
-
switch (type) {
|
558
|
-
case 'classic':
|
559
|
-
return makeClassName(classic);
|
560
|
-
case 'soft':
|
561
|
-
return makeClassName(soft);
|
562
|
-
case 'surface':
|
563
|
-
return makeClassName(surface);
|
564
|
-
case 'ghost':
|
565
|
-
return makeClassName(ghost);
|
566
|
-
default:
|
567
|
-
return '';
|
568
|
-
}
|
569
|
-
};
|
package/dist/lib/index.js
DELETED
package/dist/lib/types.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
package/dist/lib/utils/utils.js
DELETED
@@ -1,27 +0,0 @@
|
|
1
|
-
import { clsx } from 'clsx';
|
2
|
-
import { twMerge } from 'tailwind-merge';
|
3
|
-
// tailwind를 merge할 때 발생할 수 있는 클래스 충돌 문제 해결
|
4
|
-
export function cn() {
|
5
|
-
var inputs = [];
|
6
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
7
|
-
inputs[_i] = arguments[_i];
|
8
|
-
}
|
9
|
-
return twMerge(clsx(inputs));
|
10
|
-
}
|
11
|
-
export function textColorFormat(colors) {
|
12
|
-
var _a;
|
13
|
-
var formatcolors = {};
|
14
|
-
for (var _i = 0, _b = Object.entries(colors); _i < _b.length; _i++) {
|
15
|
-
var _c = _b[_i], cn_1 = _c[0], c = _c[1];
|
16
|
-
var colorName = cn_1.toLowerCase();
|
17
|
-
for (var _d = 0, _e = Object.entries(c); _d < _e.length; _d++) {
|
18
|
-
var _f = _e[_d], radixScale = _f[0], value = _f[1];
|
19
|
-
var scale = (_a = radixScale.match(/\d+$/)) === null || _a === void 0 ? void 0 : _a[0];
|
20
|
-
if (!scale) {
|
21
|
-
continue;
|
22
|
-
}
|
23
|
-
formatcolors["".concat(cn_1).concat(scale)] = "text-".concat(colorName, "-").concat(scale);
|
24
|
-
}
|
25
|
-
}
|
26
|
-
return formatcolors;
|
27
|
-
}
|