@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.
Files changed (253) hide show
  1. package/README.md +133 -163
  2. package/dist/globals.css +4 -0
  3. package/dist/lib/Typography/Header/index.d.ts +1 -1
  4. package/dist/lib/Typography/Text/index.d.ts +1 -1
  5. package/dist/lib/color/constants.d.ts +9 -0
  6. package/dist/lib/components/Accordion/index.d.ts +10 -4
  7. package/dist/lib/components/AlertDialog/AlertDialogAction.d.ts +2 -2
  8. package/dist/lib/components/AlertDialog/AlertDialogCancel.d.ts +2 -2
  9. package/dist/lib/components/AlertDialog/AlertDialogContent.d.ts +1 -1
  10. package/dist/lib/components/AlertDialog/AlertDialogRoot.d.ts +16 -0
  11. package/dist/lib/components/AlertDialog/AlertDialogTrigger.d.ts +2 -2
  12. package/dist/lib/components/AlertDialog/index.d.ts +10 -19
  13. package/dist/lib/components/Avatar/index.d.ts +5 -1
  14. package/dist/lib/components/Badge/index.d.ts +2 -2
  15. package/dist/lib/components/BarChart/index.d.ts +37 -0
  16. package/dist/lib/components/BubbleChart/index.d.ts +15 -18
  17. package/dist/lib/components/Button/index.d.ts +2 -2
  18. package/dist/lib/components/Callout/CalloutIcon.d.ts +2 -1
  19. package/dist/lib/components/Callout/CalloutRoot.d.ts +18 -0
  20. package/dist/lib/components/Callout/index.d.ts +6 -19
  21. package/dist/lib/components/Card/index.d.ts +2 -2
  22. package/dist/lib/components/Checkbox/index.d.ts +1 -1
  23. package/dist/lib/components/CheckboxCard/index.d.ts +1 -1
  24. package/dist/lib/components/CheckboxGroup/CheckboxGroupRoot.d.ts +17 -0
  25. package/dist/lib/components/CheckboxGroup/index.d.ts +5 -16
  26. package/dist/lib/components/ContextMenu/ContextMenuCheckboxItem.d.ts +1 -1
  27. package/dist/lib/components/ContextMenu/ContextMenuContent.d.ts +1 -1
  28. package/dist/lib/components/ContextMenu/ContextMenuGroup.d.ts +1 -1
  29. package/dist/lib/components/ContextMenu/ContextMenuItem.d.ts +1 -1
  30. package/dist/lib/components/ContextMenu/ContextMenuItemIndicator.d.ts +1 -1
  31. package/dist/lib/components/ContextMenu/ContextMenuRadioItem.d.ts +1 -1
  32. package/dist/lib/components/ContextMenu/ContextMenuRoot.d.ts +13 -0
  33. package/dist/lib/components/ContextMenu/ContextMenuSubContent.d.ts +1 -1
  34. package/dist/lib/components/ContextMenu/ContextMenuTrigger.d.ts +1 -1
  35. package/dist/lib/components/ContextMenu/index.d.ts +16 -24
  36. package/dist/lib/components/DataList/DataListLabel.d.ts +1 -1
  37. package/dist/lib/components/DataList/DataListRoot.d.ts +14 -0
  38. package/dist/lib/components/DataList/DataListValue.d.ts +1 -1
  39. package/dist/lib/components/DataList/index.d.ts +7 -16
  40. package/dist/lib/components/Dialog/DialogAction.d.ts +1 -3
  41. package/dist/lib/components/Dialog/DialogCancel.d.ts +1 -1
  42. package/dist/lib/components/Dialog/DialogContent.d.ts +1 -1
  43. package/dist/lib/components/Dialog/DialogRoot.d.ts +15 -0
  44. package/dist/lib/components/Dialog/index.d.ts +14 -17
  45. package/dist/lib/components/DoughnutChart/index.d.ts +12 -13
  46. package/dist/lib/components/DropdownMenu/DropdonMenuRadioGroup.d.ts +0 -5
  47. package/dist/lib/components/DropdownMenu/DropdonMenuSubContent.d.ts +1 -1
  48. package/dist/lib/components/DropdownMenu/DropdownMenuCheckboxItem.d.ts +1 -1
  49. package/dist/lib/components/DropdownMenu/DropdownMenuContent.d.ts +1 -1
  50. package/dist/lib/components/DropdownMenu/DropdownMenuItem.d.ts +3 -1
  51. package/dist/lib/components/DropdownMenu/DropdownMenuItemIndicator.d.ts +1 -1
  52. package/dist/lib/components/DropdownMenu/DropdownMenuLable.d.ts +0 -1
  53. package/dist/lib/components/DropdownMenu/DropdownMenuRadioItem.d.ts +4 -2
  54. package/dist/lib/components/DropdownMenu/DropdownMenuRoot.d.ts +15 -0
  55. package/dist/lib/components/DropdownMenu/DropdownMenuTrigger.d.ts +3 -2
  56. package/dist/lib/components/DropdownMenu/index.d.ts +19 -22
  57. package/dist/lib/components/HoverCard/HoverCardContent.d.ts +2 -2
  58. package/dist/lib/components/HoverCard/HoverCardRoot.d.ts +11 -0
  59. package/dist/lib/components/HoverCard/index.d.ts +9 -9
  60. package/dist/lib/components/IconButton/index.d.ts +1 -1
  61. package/dist/lib/components/Inset/index.d.ts +1 -1
  62. package/dist/lib/components/Label/index.d.ts +1 -1
  63. package/dist/lib/components/LineChart/index.d.ts +43 -0
  64. package/dist/lib/components/Menubar/MenubarContent.d.ts +1 -1
  65. package/dist/lib/components/Menubar/MenubarItem.d.ts +1 -1
  66. package/dist/lib/components/Menubar/MenubarItemIndicator.d.ts +1 -1
  67. package/dist/lib/components/Menubar/MenubarMenu.d.ts +4 -1
  68. package/dist/lib/components/Menubar/MenubarRoot.d.ts +19 -0
  69. package/dist/lib/components/Menubar/MenubarSubContent.d.ts +1 -1
  70. package/dist/lib/components/Menubar/MenubarTrigger.d.ts +1 -1
  71. package/dist/lib/components/Menubar/index.d.ts +18 -30
  72. package/dist/lib/components/NavigationMenu/NavigationMenuContent.d.ts +1 -1
  73. package/dist/lib/components/NavigationMenu/NavigationMenuLink.d.ts +1 -1
  74. package/dist/lib/components/NavigationMenu/NavigationMenuList.d.ts +1 -1
  75. package/dist/lib/components/NavigationMenu/NavigationMenuRoot.d.ts +14 -0
  76. package/dist/lib/components/NavigationMenu/NavigationMenuTrigger.d.ts +1 -1
  77. package/dist/lib/components/NavigationMenu/NavigationMenuViewport.d.ts +2 -2
  78. package/dist/lib/components/NavigationMenu/index.d.ts +11 -20
  79. package/dist/lib/components/PieChart/index.d.ts +12 -13
  80. package/dist/lib/components/Popover/PopoverClose.d.ts +1 -1
  81. package/dist/lib/components/Popover/PopoverContent.d.ts +1 -1
  82. package/dist/lib/components/Popover/PopoverRoot.d.ts +12 -0
  83. package/dist/lib/components/Popover/index.d.ts +10 -11
  84. package/dist/lib/components/Progress/index.d.ts +2 -5
  85. package/dist/lib/components/RadarChart/index.d.ts +19 -21
  86. package/dist/lib/components/Radio/index.d.ts +0 -1
  87. package/dist/lib/components/RadioCards/RadioCardsItem.d.ts +1 -1
  88. package/dist/lib/components/RadioCards/RadioCardsRoot.d.ts +13 -0
  89. package/dist/lib/components/RadioCards/index.d.ts +5 -13
  90. package/dist/lib/components/RadioGroup/RadioGroupRoot.d.ts +15 -0
  91. package/dist/lib/components/RadioGroup/index.d.ts +5 -15
  92. package/dist/lib/components/SegmentedControl/SegmentedControlRoot.d.ts +14 -0
  93. package/dist/lib/components/SegmentedControl/index.d.ts +5 -14
  94. package/dist/lib/components/Select/index.d.ts +17 -8
  95. package/dist/lib/components/Skeleton/index.d.ts +1 -2
  96. package/dist/lib/components/Slider/index.d.ts +1 -2
  97. package/dist/lib/components/TabNav/index.d.ts +6 -2
  98. package/dist/lib/components/Table/index.d.ts +17 -8
  99. package/dist/lib/components/Tabs/index.d.ts +11 -5
  100. package/dist/lib/components/TextArea/index.d.ts +1 -1
  101. package/dist/lib/components/TextField/index.d.ts +7 -4
  102. package/dist/lib/components/Toast/ToastActionButton.d.ts +1 -1
  103. package/dist/lib/components/Toast/ToastRoot.d.ts +27 -0
  104. package/dist/lib/components/Toast/index.d.ts +7 -29
  105. package/dist/lib/components/Toggle/ToggleWithText.d.ts +2 -2
  106. package/dist/lib/components/Toggle/index.d.ts +1 -1
  107. package/dist/lib/components/ToggleGroup/ToggleGroupRoot.d.ts +15 -0
  108. package/dist/lib/components/ToggleGroup/index.d.ts +5 -19
  109. package/dist/lib/components/ToggleSwitch/index.d.ts +1 -1
  110. package/dist/lib/components/Tooltip/index.d.ts +4 -5
  111. package/dist/lib/components/index.d.ts +4 -0
  112. package/dist/lib/constants.d.ts +470 -0
  113. package/dist/lib/types.d.ts +70 -0
  114. package/dist/lib/utils/useDarkMode.d.ts +1 -0
  115. package/dist/lib/utils/utils.d.ts +0 -1
  116. package/package.json +137 -124
  117. package/dist/lib/Typography/Header/index.js +0 -55
  118. package/dist/lib/Typography/Text/index.js +0 -44
  119. package/dist/lib/Typography/index.js +0 -2
  120. package/dist/lib/color/alpha.js +0 -784
  121. package/dist/lib/color/constants.js +0 -200
  122. package/dist/lib/color/dark.js +0 -392
  123. package/dist/lib/color/krdsColors.js +0 -309
  124. package/dist/lib/color/light.js +0 -393
  125. package/dist/lib/components/Accordion/index.js +0 -58
  126. package/dist/lib/components/AlertDialog/AlertDialogAction.js +0 -59
  127. package/dist/lib/components/AlertDialog/AlertDialogCancel.js +0 -56
  128. package/dist/lib/components/AlertDialog/AlertDialogContent.js +0 -49
  129. package/dist/lib/components/AlertDialog/AlertDialogDescription.js +0 -45
  130. package/dist/lib/components/AlertDialog/AlertDialogTitle.js +0 -45
  131. package/dist/lib/components/AlertDialog/AlertDialogTrigger.js +0 -55
  132. package/dist/lib/components/AlertDialog/index.js +0 -37
  133. package/dist/lib/components/AspectRatio/index.js +0 -42
  134. package/dist/lib/components/Avatar/index.js +0 -57
  135. package/dist/lib/components/Badge/index.js +0 -54
  136. package/dist/lib/components/BubbleChart/index.js +0 -43
  137. package/dist/lib/components/Button/index.js +0 -56
  138. package/dist/lib/components/Callout/CalloutIcon.js +0 -57
  139. package/dist/lib/components/Callout/CalloutText.js +0 -52
  140. package/dist/lib/components/Callout/index.js +0 -75
  141. package/dist/lib/components/Card/index.js +0 -64
  142. package/dist/lib/components/Checkbox/index.js +0 -89
  143. package/dist/lib/components/CheckboxCard/index.js +0 -58
  144. package/dist/lib/components/CheckboxGroup/CheckboxGroupItem.js +0 -33
  145. package/dist/lib/components/CheckboxGroup/index.js +0 -35
  146. package/dist/lib/components/ContextMenu/ContextMenuCheckboxItem.js +0 -40
  147. package/dist/lib/components/ContextMenu/ContextMenuContent.js +0 -56
  148. package/dist/lib/components/ContextMenu/ContextMenuGroup.js +0 -30
  149. package/dist/lib/components/ContextMenu/ContextMenuItem.js +0 -59
  150. package/dist/lib/components/ContextMenu/ContextMenuItemIndicator.js +0 -50
  151. package/dist/lib/components/ContextMenu/ContextMenuLabel.js +0 -48
  152. package/dist/lib/components/ContextMenu/ContextMenuRadioGroup.js +0 -31
  153. package/dist/lib/components/ContextMenu/ContextMenuRadioItem.js +0 -41
  154. package/dist/lib/components/ContextMenu/ContextMenuSeparator.js +0 -31
  155. package/dist/lib/components/ContextMenu/ContextMenuSubContent.js +0 -53
  156. package/dist/lib/components/ContextMenu/ContextMenuSubTrigger.js +0 -40
  157. package/dist/lib/components/ContextMenu/ContextMenuTrigger.js +0 -31
  158. package/dist/lib/components/ContextMenu/index.js +0 -54
  159. package/dist/lib/components/DataList/DataListItem.js +0 -43
  160. package/dist/lib/components/DataList/DataListLabel.js +0 -49
  161. package/dist/lib/components/DataList/DataListValue.js +0 -51
  162. package/dist/lib/components/DataList/index.js +0 -57
  163. package/dist/lib/components/Dialog/DialogAction.js +0 -57
  164. package/dist/lib/components/Dialog/DialogCancel.js +0 -53
  165. package/dist/lib/components/Dialog/DialogContent.js +0 -55
  166. package/dist/lib/components/Dialog/DialogDescription.js +0 -45
  167. package/dist/lib/components/Dialog/DialogSlot.js +0 -44
  168. package/dist/lib/components/Dialog/DialogTitle.js +0 -45
  169. package/dist/lib/components/Dialog/DialogTrigger.js +0 -30
  170. package/dist/lib/components/Dialog/index.js +0 -38
  171. package/dist/lib/components/DoughnutChart/index.js +0 -46
  172. package/dist/lib/components/DropdownMenu/DropdonMenuRadioGroup.js +0 -31
  173. package/dist/lib/components/DropdownMenu/DropdonMenuSubContent.js +0 -58
  174. package/dist/lib/components/DropdownMenu/DropdownMenuCheckboxItem.js +0 -38
  175. package/dist/lib/components/DropdownMenu/DropdownMenuContent.js +0 -54
  176. package/dist/lib/components/DropdownMenu/DropdownMenuItem.js +0 -56
  177. package/dist/lib/components/DropdownMenu/DropdownMenuItemIndicator.js +0 -46
  178. package/dist/lib/components/DropdownMenu/DropdownMenuLable.js +0 -46
  179. package/dist/lib/components/DropdownMenu/DropdownMenuRadioItem.js +0 -39
  180. package/dist/lib/components/DropdownMenu/DropdownMenuSeparator.js +0 -31
  181. package/dist/lib/components/DropdownMenu/DropdownMenuSub.js +0 -30
  182. package/dist/lib/components/DropdownMenu/DropdownMenuSubTrigger.js +0 -38
  183. package/dist/lib/components/DropdownMenu/DropdownMenuTrigger.js +0 -51
  184. package/dist/lib/components/DropdownMenu/index.js +0 -43
  185. package/dist/lib/components/HoverCard/HoverCardContent.js +0 -59
  186. package/dist/lib/components/HoverCard/HoverCardTrigger.js +0 -30
  187. package/dist/lib/components/HoverCard/index.js +0 -33
  188. package/dist/lib/components/IconButton/index.js +0 -63
  189. package/dist/lib/components/Inset/index.js +0 -50
  190. package/dist/lib/components/Label/index.js +0 -53
  191. package/dist/lib/components/Menubar/MenubarCheckboxItem.js +0 -38
  192. package/dist/lib/components/Menubar/MenubarContent.js +0 -60
  193. package/dist/lib/components/Menubar/MenubarItem.js +0 -54
  194. package/dist/lib/components/Menubar/MenubarItemIndicator.js +0 -49
  195. package/dist/lib/components/Menubar/MenubarMenu.js +0 -30
  196. package/dist/lib/components/Menubar/MenubarRadioGroup.js +0 -31
  197. package/dist/lib/components/Menubar/MenubarRadioItem.js +0 -40
  198. package/dist/lib/components/Menubar/MenubarSeparator.js +0 -31
  199. package/dist/lib/components/Menubar/MenubarSub.js +0 -30
  200. package/dist/lib/components/Menubar/MenubarSubContent.js +0 -51
  201. package/dist/lib/components/Menubar/MenubarSubTrigger.js +0 -41
  202. package/dist/lib/components/Menubar/MenubarTrigger.js +0 -57
  203. package/dist/lib/components/Menubar/index.js +0 -73
  204. package/dist/lib/components/NavigationMenu/NavigationMenuContent.js +0 -48
  205. package/dist/lib/components/NavigationMenu/NavigationMenuIndicator.js +0 -31
  206. package/dist/lib/components/NavigationMenu/NavigationMenuItem.js +0 -30
  207. package/dist/lib/components/NavigationMenu/NavigationMenuLink.js +0 -51
  208. package/dist/lib/components/NavigationMenu/NavigationMenuList.js +0 -47
  209. package/dist/lib/components/NavigationMenu/NavigationMenuTrigger.js +0 -58
  210. package/dist/lib/components/NavigationMenu/NavigationMenuViewport.js +0 -53
  211. package/dist/lib/components/NavigationMenu/index.js +0 -50
  212. package/dist/lib/components/PieChart/index.js +0 -46
  213. package/dist/lib/components/Popover/PopoverClose.js +0 -46
  214. package/dist/lib/components/Popover/PopoverContent.js +0 -63
  215. package/dist/lib/components/Popover/PopoverTrigger.js +0 -30
  216. package/dist/lib/components/Popover/index.js +0 -34
  217. package/dist/lib/components/Progress/index.js +0 -57
  218. package/dist/lib/components/RadarChart/index.js +0 -43
  219. package/dist/lib/components/Radio/index.js +0 -51
  220. package/dist/lib/components/RadioCards/RadioCardsItem.js +0 -52
  221. package/dist/lib/components/RadioCards/index.js +0 -43
  222. package/dist/lib/components/RadioGroup/RadioGroupItem.js +0 -44
  223. package/dist/lib/components/RadioGroup/index.js +0 -51
  224. package/dist/lib/components/ScrollArea/index.js +0 -36
  225. package/dist/lib/components/SegmentedControl/SegmentedControlItem.js +0 -35
  226. package/dist/lib/components/SegmentedControl/index.js +0 -48
  227. package/dist/lib/components/Select/index.js +0 -83
  228. package/dist/lib/components/Separator/index.js +0 -47
  229. package/dist/lib/components/Skeleton/index.js +0 -43
  230. package/dist/lib/components/Slider/index.js +0 -50
  231. package/dist/lib/components/Spinner/index.js +0 -47
  232. package/dist/lib/components/TabNav/index.js +0 -46
  233. package/dist/lib/components/Table/index.js +0 -89
  234. package/dist/lib/components/Tabs/index.js +0 -59
  235. package/dist/lib/components/TextArea/index.js +0 -58
  236. package/dist/lib/components/TextField/index.js +0 -53
  237. package/dist/lib/components/Toast/ToastActionButton.js +0 -67
  238. package/dist/lib/components/Toast/ToastDescription.js +0 -53
  239. package/dist/lib/components/Toast/ToastTitle.js +0 -53
  240. package/dist/lib/components/Toast/index.js +0 -94
  241. package/dist/lib/components/Toggle/ToggleWithText.js +0 -57
  242. package/dist/lib/components/Toggle/index.js +0 -58
  243. package/dist/lib/components/ToggleGroup/index.js +0 -43
  244. package/dist/lib/components/ToggleGroup/toggleGroupItem.js +0 -52
  245. package/dist/lib/components/ToggleSwitch/index.js +0 -71
  246. package/dist/lib/components/Tooltip/index.js +0 -49
  247. package/dist/lib/components/index.js +0 -48
  248. package/dist/lib/constants.js +0 -569
  249. package/dist/lib/index.js +0 -2
  250. package/dist/lib/types.js +0 -1
  251. package/dist/lib/utils/utils.js +0 -27
  252. package/dist/tailwind.config.js +0 -144
  253. /package/dist/lib/components/ToggleGroup/{toggleGroupItem.d.ts → ToggleGroupItem.d.ts} +0 -0
@@ -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
@@ -1,2 +0,0 @@
1
- export * from './components';
2
- export * from './Typography';
package/dist/lib/types.js DELETED
@@ -1 +0,0 @@
1
- export {};
@@ -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
- }