@lotte-innovate/ui-component-test 0.0.37 → 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (192) hide show
  1. package/README.md +163 -163
  2. package/dist/lib/Typography/Header/index.d.ts +2 -2
  3. package/dist/lib/Typography/Header/{index.jsx → index.js} +2 -5
  4. package/dist/lib/Typography/Text/index.d.ts +1 -1
  5. package/dist/lib/Typography/Text/{index.jsx → index.js} +3 -6
  6. package/dist/lib/components/Accordion/{index.jsx → index.js} +5 -17
  7. package/dist/lib/components/AlertDialog/AlertDialogAction.d.ts +2 -2
  8. package/dist/lib/components/AlertDialog/{AlertDialogAction.jsx → AlertDialogAction.js} +3 -4
  9. package/dist/lib/components/AlertDialog/AlertDialogCancel.d.ts +2 -2
  10. package/dist/lib/components/AlertDialog/{AlertDialogCancel.jsx → AlertDialogCancel.js} +3 -4
  11. package/dist/lib/components/AlertDialog/AlertDialogContent.d.ts +1 -1
  12. package/dist/lib/components/AlertDialog/{AlertDialogContent.jsx → AlertDialogContent.js} +3 -7
  13. package/dist/lib/components/AlertDialog/{AlertDialogDescription.jsx → AlertDialogDescription.js} +14 -4
  14. package/dist/lib/components/AlertDialog/{AlertDialogTitle.jsx → AlertDialogTitle.js} +14 -4
  15. package/dist/lib/components/AlertDialog/AlertDialogTrigger.d.ts +2 -2
  16. package/dist/lib/components/AlertDialog/{AlertDialogTrigger.jsx → AlertDialogTrigger.js} +3 -4
  17. package/dist/lib/components/AlertDialog/{index.jsx → index.js} +14 -4
  18. package/dist/lib/components/AspectRatio/{index.jsx → index.js} +3 -4
  19. package/dist/lib/components/Avatar/index.d.ts +1 -1
  20. package/dist/lib/components/Avatar/{index.jsx → index.js} +3 -7
  21. package/dist/lib/components/Badge/index.d.ts +2 -2
  22. package/dist/lib/components/Badge/{index.jsx → index.js} +3 -4
  23. package/dist/lib/components/BubbleChart/index.d.ts +1 -2
  24. package/dist/lib/components/BubbleChart/{index.jsx → index.js} +2 -2
  25. package/dist/lib/components/Button/index.d.ts +2 -2
  26. package/dist/lib/components/Button/{index.jsx → index.js} +3 -4
  27. package/dist/lib/components/Callout/{CalloutIcon.jsx → CalloutIcon.js} +3 -8
  28. package/dist/lib/components/Callout/{CalloutText.jsx → CalloutText.js} +14 -4
  29. package/dist/lib/components/Callout/index.d.ts +1 -1
  30. package/dist/lib/components/Callout/{index.jsx → index.js} +3 -6
  31. package/dist/lib/components/Card/index.d.ts +2 -2
  32. package/dist/lib/components/Card/{index.jsx → index.js} +3 -4
  33. package/dist/lib/components/Checkbox/index.d.ts +1 -1
  34. package/dist/lib/components/Checkbox/{index.jsx → index.js} +3 -11
  35. package/dist/lib/components/CheckboxCard/index.d.ts +1 -1
  36. package/dist/lib/components/CheckboxCard/{index.jsx → index.js} +3 -5
  37. package/dist/lib/components/CheckboxGroup/{CheckboxGroupItem.jsx → CheckboxGroupItem.js} +14 -6
  38. package/dist/lib/components/CheckboxGroup/{index.jsx → index.js} +2 -5
  39. package/dist/lib/components/ContextMenu/{ContextMenuCheckboxItem.jsx → ContextMenuCheckboxItem.js} +14 -7
  40. package/dist/lib/components/ContextMenu/ContextMenuContent.d.ts +1 -1
  41. package/dist/lib/components/ContextMenu/{ContextMenuContent.jsx → ContextMenuContent.js} +3 -6
  42. package/dist/lib/components/ContextMenu/{ContextMenuGroup.jsx → ContextMenuGroup.js} +14 -4
  43. package/dist/lib/components/ContextMenu/ContextMenuItem.d.ts +1 -1
  44. package/dist/lib/components/ContextMenu/{ContextMenuItem.jsx → ContextMenuItem.js} +3 -5
  45. package/dist/lib/components/ContextMenu/ContextMenuItemIndicator.d.ts +1 -1
  46. package/dist/lib/components/ContextMenu/{ContextMenuItemIndicator.jsx → ContextMenuItemIndicator.js} +3 -4
  47. package/dist/lib/components/ContextMenu/{ContextMenuLabel.jsx → ContextMenuLabel.js} +3 -4
  48. package/dist/lib/components/ContextMenu/{ContextMenuRadioGroup.jsx → ContextMenuRadioGroup.js} +14 -6
  49. package/dist/lib/components/ContextMenu/{ContextMenuRadioItem.jsx → ContextMenuRadioItem.js} +14 -7
  50. package/dist/lib/components/ContextMenu/{ContextMenuSeparator.jsx → ContextMenuSeparator.js} +14 -4
  51. package/dist/lib/components/ContextMenu/ContextMenuSubContent.d.ts +1 -1
  52. package/dist/lib/components/ContextMenu/{ContextMenuSubContent.jsx → ContextMenuSubContent.js} +6 -9
  53. package/dist/lib/components/ContextMenu/{ContextMenuSubTrigger.jsx → ContextMenuSubTrigger.js} +14 -9
  54. package/dist/lib/components/ContextMenu/{ContextMenuTrigger.jsx → ContextMenuTrigger.js} +14 -4
  55. package/dist/lib/components/ContextMenu/{index.jsx → index.js} +14 -6
  56. package/dist/lib/components/DataList/{DataListItem.jsx → DataListItem.js} +3 -4
  57. package/dist/lib/components/DataList/DataListLabel.d.ts +1 -1
  58. package/dist/lib/components/DataList/{DataListLabel.jsx → DataListLabel.js} +3 -4
  59. package/dist/lib/components/DataList/DataListValue.d.ts +1 -1
  60. package/dist/lib/components/DataList/{DataListValue.jsx → DataListValue.js} +3 -4
  61. package/dist/lib/components/DataList/{index.jsx → index.js} +14 -6
  62. package/dist/lib/components/Dialog/DialogAction.d.ts +1 -1
  63. package/dist/lib/components/Dialog/{DialogAction.jsx → DialogAction.js} +14 -4
  64. package/dist/lib/components/Dialog/DialogCancel.d.ts +1 -1
  65. package/dist/lib/components/Dialog/{DialogCancel.jsx → DialogCancel.js} +14 -4
  66. package/dist/lib/components/Dialog/DialogContent.d.ts +1 -1
  67. package/dist/lib/components/Dialog/{DialogContent.jsx → DialogContent.js} +3 -4
  68. package/dist/lib/components/Dialog/{DialogDescription.jsx → DialogDescription.js} +14 -4
  69. package/dist/lib/components/Dialog/{DialogSlot.jsx → DialogSlot.js} +14 -4
  70. package/dist/lib/components/Dialog/{DialogTitle.jsx → DialogTitle.js} +14 -4
  71. package/dist/lib/components/Dialog/{DialogTrigger.jsx → DialogTrigger.js} +14 -4
  72. package/dist/lib/components/Dialog/{index.jsx → index.js} +14 -4
  73. package/dist/lib/components/DoughnutChart/index.d.ts +1 -2
  74. package/dist/lib/components/DoughnutChart/{index.jsx → index.js} +2 -2
  75. package/dist/lib/components/DropdownMenu/{DropdonMenuRadioGroup.jsx → DropdonMenuRadioGroup.js} +14 -6
  76. package/dist/lib/components/DropdownMenu/DropdonMenuSubContent.d.ts +1 -1
  77. package/dist/lib/components/DropdownMenu/{DropdonMenuSubContent.jsx → DropdonMenuSubContent.js} +7 -10
  78. package/dist/lib/components/DropdownMenu/{DropdownMenuCheckboxItem.jsx → DropdownMenuCheckboxItem.js} +14 -7
  79. package/dist/lib/components/DropdownMenu/DropdownMenuContent.d.ts +1 -1
  80. package/dist/lib/components/DropdownMenu/{DropdownMenuContent.jsx → DropdownMenuContent.js} +3 -6
  81. package/dist/lib/components/DropdownMenu/DropdownMenuItem.d.ts +1 -1
  82. package/dist/lib/components/DropdownMenu/{DropdownMenuItem.jsx → DropdownMenuItem.js} +3 -5
  83. package/dist/lib/components/DropdownMenu/DropdownMenuItemIndicator.d.ts +1 -1
  84. package/dist/lib/components/DropdownMenu/{DropdownMenuItemIndicator.jsx → DropdownMenuItemIndicator.js} +3 -4
  85. package/dist/lib/components/DropdownMenu/{DropdownMenuLable.jsx → DropdownMenuLable.js} +3 -4
  86. package/dist/lib/components/DropdownMenu/{DropdownMenuRadioItem.jsx → DropdownMenuRadioItem.js} +14 -7
  87. package/dist/lib/components/DropdownMenu/{DropdownMenuSeparator.jsx → DropdownMenuSeparator.js} +14 -2
  88. package/dist/lib/components/DropdownMenu/{DropdownMenuSub.jsx → DropdownMenuSub.js} +14 -2
  89. package/dist/lib/components/DropdownMenu/{DropdownMenuSubTrigger.jsx → DropdownMenuSubTrigger.js} +14 -7
  90. package/dist/lib/components/DropdownMenu/DropdownMenuTrigger.d.ts +1 -1
  91. package/dist/lib/components/DropdownMenu/{DropdownMenuTrigger.jsx → DropdownMenuTrigger.js} +14 -4
  92. package/dist/lib/components/DropdownMenu/{index.jsx → index.js} +14 -2
  93. package/dist/lib/components/HoverCard/HoverCardContent.d.ts +2 -2
  94. package/dist/lib/components/HoverCard/{HoverCardContent.jsx → HoverCardContent.js} +3 -4
  95. package/dist/lib/components/HoverCard/{HoverCardTrigger.jsx → HoverCardTrigger.js} +14 -4
  96. package/dist/lib/components/HoverCard/{index.jsx → index.js} +14 -4
  97. package/dist/lib/components/IconButton/index.d.ts +1 -1
  98. package/dist/lib/components/IconButton/{index.jsx → index.js} +2 -3
  99. package/dist/lib/components/Inset/index.d.ts +1 -1
  100. package/dist/lib/components/Inset/{index.jsx → index.js} +3 -6
  101. package/dist/lib/components/Label/index.d.ts +1 -1
  102. package/dist/lib/components/Label/{index.jsx → index.js} +2 -3
  103. package/dist/lib/components/Menubar/{MenubarCheckboxItem.jsx → MenubarCheckboxItem.js} +14 -7
  104. package/dist/lib/components/Menubar/MenubarContent.d.ts +1 -1
  105. package/dist/lib/components/Menubar/{MenubarContent.jsx → MenubarContent.js} +7 -10
  106. package/dist/lib/components/Menubar/MenubarItem.d.ts +1 -1
  107. package/dist/lib/components/Menubar/{MenubarItem.jsx → MenubarItem.js} +3 -5
  108. package/dist/lib/components/Menubar/MenubarItemIndicator.d.ts +1 -1
  109. package/dist/lib/components/Menubar/{MenubarItemIndicator.jsx → MenubarItemIndicator.js} +3 -4
  110. package/dist/lib/components/Menubar/{MenubarMenu.jsx → MenubarMenu.js} +14 -2
  111. package/dist/lib/components/Menubar/{MenubarRadioGroup.jsx → MenubarRadioGroup.js} +14 -6
  112. package/dist/lib/components/Menubar/{MenubarRadioItem.jsx → MenubarRadioItem.js} +14 -7
  113. package/dist/lib/components/Menubar/{MenubarSeparator.jsx → MenubarSeparator.js} +14 -4
  114. package/dist/lib/components/Menubar/{MenubarSub.jsx → MenubarSub.js} +14 -2
  115. package/dist/lib/components/Menubar/MenubarSubContent.d.ts +1 -1
  116. package/dist/lib/components/Menubar/{MenubarSubContent.jsx → MenubarSubContent.js} +4 -5
  117. package/dist/lib/components/Menubar/{MenubarSubTrigger.jsx → MenubarSubTrigger.js} +14 -7
  118. package/dist/lib/components/Menubar/MenubarTrigger.d.ts +1 -1
  119. package/dist/lib/components/Menubar/{MenubarTrigger.jsx → MenubarTrigger.js} +3 -4
  120. package/dist/lib/components/Menubar/index.d.ts +1 -1
  121. package/dist/lib/components/Menubar/{index.jsx → index.js} +3 -6
  122. package/dist/lib/components/NavigationMenu/NavigationMenuContent.d.ts +1 -1
  123. package/dist/lib/components/NavigationMenu/{NavigationMenuContent.jsx → NavigationMenuContent.js} +3 -4
  124. package/dist/lib/components/NavigationMenu/NavigationMenuIndicator.js +31 -0
  125. package/dist/lib/components/NavigationMenu/{NavigationMenuItem.jsx → NavigationMenuItem.js} +14 -4
  126. package/dist/lib/components/NavigationMenu/NavigationMenuLink.d.ts +1 -1
  127. package/dist/lib/components/NavigationMenu/{NavigationMenuLink.jsx → NavigationMenuLink.js} +3 -4
  128. package/dist/lib/components/NavigationMenu/NavigationMenuList.d.ts +1 -1
  129. package/dist/lib/components/NavigationMenu/{NavigationMenuList.jsx → NavigationMenuList.js} +3 -5
  130. package/dist/lib/components/NavigationMenu/NavigationMenuTrigger.d.ts +1 -1
  131. package/dist/lib/components/NavigationMenu/{NavigationMenuTrigger.jsx → NavigationMenuTrigger.js} +3 -5
  132. package/dist/lib/components/NavigationMenu/NavigationMenuViewport.d.ts +2 -2
  133. package/dist/lib/components/NavigationMenu/{NavigationMenuViewport.jsx → NavigationMenuViewport.js} +3 -4
  134. package/dist/lib/components/NavigationMenu/{index.jsx → index.js} +14 -6
  135. package/dist/lib/components/PieChart/index.d.ts +1 -2
  136. package/dist/lib/components/PieChart/{index.jsx → index.js} +2 -2
  137. package/dist/lib/components/Popover/PopoverClose.d.ts +1 -1
  138. package/dist/lib/components/Popover/{PopoverClose.jsx → PopoverClose.js} +14 -4
  139. package/dist/lib/components/Popover/PopoverContent.d.ts +1 -1
  140. package/dist/lib/components/Popover/{PopoverContent.jsx → PopoverContent.js} +3 -4
  141. package/dist/lib/components/Popover/{PopoverTrigger.jsx → PopoverTrigger.js} +14 -4
  142. package/dist/lib/components/Popover/{index.jsx → index.js} +14 -4
  143. package/dist/lib/components/Progress/index.d.ts +1 -1
  144. package/dist/lib/components/Progress/{index.jsx → index.js} +3 -4
  145. package/dist/lib/components/RadarChart/index.d.ts +1 -2
  146. package/dist/lib/components/RadarChart/{index.jsx → index.js} +2 -2
  147. package/dist/lib/components/Radio/{index.jsx → index.js} +13 -8
  148. package/dist/lib/components/RadioCards/RadioCardsItem.d.ts +1 -1
  149. package/dist/lib/components/RadioCards/{RadioCardsItem.jsx → RadioCardsItem.js} +14 -4
  150. package/dist/lib/components/RadioCards/{index.jsx → index.js} +3 -6
  151. package/dist/lib/components/RadioGroup/{RadioGroupItem.jsx → RadioGroupItem.js} +14 -4
  152. package/dist/lib/components/RadioGroup/{index.jsx → index.js} +14 -6
  153. package/dist/lib/components/ScrollArea/{index.jsx → index.js} +14 -6
  154. package/dist/lib/components/SegmentedControl/{SegmentedControlItem.jsx → SegmentedControlItem.js} +14 -4
  155. package/dist/lib/components/SegmentedControl/{index.jsx → index.js} +2 -5
  156. package/dist/lib/components/Select/index.d.ts +1 -1
  157. package/dist/lib/components/Select/{index.jsx → index.js} +8 -25
  158. package/dist/lib/components/Separator/{index.jsx → index.js} +2 -5
  159. package/dist/lib/components/Skeleton/index.d.ts +1 -1
  160. package/dist/lib/components/Skeleton/{index.jsx → index.js} +2 -5
  161. package/dist/lib/components/Slider/index.d.ts +1 -1
  162. package/dist/lib/components/Slider/{index.jsx → index.js} +2 -3
  163. package/dist/lib/components/Spinner/{index.jsx → index.js} +2 -5
  164. package/dist/lib/components/TabNav/{index.jsx → index.js} +14 -8
  165. package/dist/lib/components/Table/index.d.ts +1 -1
  166. package/dist/lib/components/Table/{index.jsx → index.js} +8 -23
  167. package/dist/lib/components/Tabs/index.d.ts +1 -1
  168. package/dist/lib/components/Tabs/{index.jsx → index.js} +5 -14
  169. package/dist/lib/components/TextArea/index.d.ts +1 -1
  170. package/dist/lib/components/TextArea/{index.jsx → index.js} +2 -3
  171. package/dist/lib/components/TextField/index.d.ts +1 -1
  172. package/dist/lib/components/TextField/{index.jsx → index.js} +3 -8
  173. package/dist/lib/components/Toast/ToastActionButton.d.ts +1 -1
  174. package/dist/lib/components/Toast/{ToastActionButton.jsx → ToastActionButton.js} +3 -4
  175. package/dist/lib/components/Toast/{ToastDescription.jsx → ToastDescription.js} +14 -6
  176. package/dist/lib/components/Toast/{ToastTitle.jsx → ToastTitle.js} +14 -4
  177. package/dist/lib/components/Toast/index.d.ts +1 -1
  178. package/dist/lib/components/Toast/{index.jsx → index.js} +3 -9
  179. package/dist/lib/components/Toggle/ToggleWithText.d.ts +1 -1
  180. package/dist/lib/components/Toggle/{ToggleWithText.jsx → ToggleWithText.js} +4 -6
  181. package/dist/lib/components/Toggle/index.d.ts +1 -1
  182. package/dist/lib/components/Toggle/{index.jsx → index.js} +3 -4
  183. package/dist/lib/components/ToggleGroup/{index.jsx → index.js} +3 -6
  184. package/dist/lib/components/ToggleGroup/{toggleGroupItem.jsx → toggleGroupItem.js} +14 -4
  185. package/dist/lib/components/ToggleSwitch/index.d.ts +1 -1
  186. package/dist/lib/components/ToggleSwitch/{index.jsx → index.js} +2 -6
  187. package/dist/lib/components/Tooltip/index.d.ts +3 -3
  188. package/dist/lib/components/Tooltip/{index.jsx → index.js} +2 -11
  189. package/dist/tailwind.config.js +2 -2
  190. package/package.json +126 -125
  191. package/dist/lib/components/NavigationMenu/NavigationMenuIndicator.jsx +0 -22
  192. package/dist/styles.css +0 -27469
package/README.md CHANGED
@@ -1,163 +1,163 @@
1
- # radix-ui 라이브러리 활용 Storybook UI Component 만들기
2
-
3
- <br />
4
-
5
- ## 사전 설치 라이브러리
6
-
7
- - radix-ui
8
- - 주요 컴포넌트 사용 시 활용할 Headless UI 라이브러리
9
-
10
- ```shell
11
- npm install @radix-ui/react-popover@latest -E
12
- ```
13
-
14
- - storybook
15
- - 컴포넌트 관리를 위해 사용
16
-
17
- ```shell
18
- npx sb init
19
- npx storybook@latest add @storybook/addon-styling-webpack
20
- ```
21
-
22
- - clsx
23
- - 조건부 className 작성을 위해 사용
24
-
25
- ```shell
26
- npm i clsx
27
- ```
28
-
29
- - tailwind-merge
30
- - 스타일 충돌 없이 자바스크립트에서 tailwind CSS 클래스를 효율적으로 병합하는 기능을 가진 라이브러리
31
-
32
- ```shell
33
- npm i tailwind-merge
34
- ```
35
-
36
- - class-variance-authority (CVA)
37
- - 일관성 있는 UI를 정의하고 사용할 수 있도록 도와주는 툴로써 shadcn/ui 컴포넌트의 핵심 도구
38
-
39
- ```shell
40
- npm i class-variance-authority
41
- ```
42
-
43
- <br />
44
-
45
- ## 실행
46
-
47
- - 스토리북 실행
48
-
49
- ```shell
50
- npm run storybook
51
- ```
52
-
53
- > 접속주소(포트 6006 사용 시): `http://localhost:6006`
54
-
55
- - 웹페이지 실행
56
-
57
- ```shell
58
- npm run dev
59
- ```
60
-
61
- > 접속주소(포트 3000 사용 시): `http://localhost:3000`
62
-
63
- ## package publish
64
-
65
- - 타입스크립트 컴파일
66
-
67
- ```shell
68
- npm run publish:npm
69
- ```
70
-
71
- - npm package 배포 시
72
-
73
- - npm 로그인
74
-
75
- ```shell
76
- npm login
77
- ```
78
-
79
- - package.json 버전 수정 후 컴파일 진행
80
-
81
- ```shell
82
- npm run publish:npm
83
- ```
84
-
85
- - 패키지 배포
86
-
87
- ```shell
88
- npm publish
89
- ```
90
-
91
- - npm scope 배포
92
- - npm 로그인 후, 조직 생성 시 @계정명 으로 scope 생성
93
- scope로 생성된 패키지는 npm publish 시, 아래 옵션 추가
94
-
95
- ```shell
96
- npm publish --access=public
97
- ```
98
-
99
-
100
- - npm package 미배포시
101
-
102
- - package.json 버전 수정 후 컴파일 진행
103
-
104
- ```shell
105
- npm run publish:npm
106
- ```
107
-
108
- - dist/ 파일 및 설정파일 추출 후 전달
109
-
110
- ## 사용자 이용 방법
111
-
112
- ### npm 배포 시
113
-
114
- - npm package 설치
115
-
116
- ```sh
117
- npm install <package_name>
118
- ```
119
-
120
- ### npm 미배포시
121
-
122
- - 전달 받은 package 모듈 파일을 node_modules/ 폴더에 추가
123
-
124
- ### tailwind 설정 방법
125
-
126
- - tailwind config 파일 설정
127
-
128
- ```js
129
- // tailwind.config.ts
130
- import type { Config } from 'tailwindcss';
131
- // UI 라이브러리 tailwind config 파일 호출
132
- // >>>>>>>> 추가
133
- const packageTailwindConfig = require('ui-component-test/tailwind.config.js');
134
- // >>>>>>>>
135
-
136
- const config: Config = {
137
- content: [
138
- './src/pages/**/*.{js,ts,jsx,tsx,mdx,zip}',
139
- './src/components/**/*.{js,ts,jsx,tsx,mdx,zip}',
140
- './src/app/**/*.{js,ts,jsx,tsx,mdx,zip}',
141
- // 해당 프로젝트 css 표준 컴포넌트에 적용 가능
142
- // >>>>>>>> 추가
143
- './node_modules/ui-component-test/**/*.{js,ts,jsx,tsx,mdx,zip}',
144
- // >>>>>>>>
145
- ],
146
- theme: {
147
- extend: {
148
- backgroundImage: {
149
- 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
150
- 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
151
- },
152
- colors: {},
153
- // UI 라이브러리 tailwind config 파일 적용
154
- // >>>>>>>> 추가
155
- ...packageTailwindConfig?.theme?.extend,
156
- // >>>>>>>>
157
- },
158
- },
159
- plugins: [],
160
- };
161
- export default config;
162
-
163
- ```
1
+ # radix-ui 라이브러리 활용 Storybook UI Component 만들기
2
+
3
+ <br />
4
+
5
+ ## 사전 설치 라이브러리
6
+
7
+ - radix-ui
8
+ - 주요 컴포넌트 사용 시 활용할 Headless UI 라이브러리
9
+
10
+ ```shell
11
+ npm install @radix-ui/react-popover@latest -E
12
+ ```
13
+
14
+ - storybook
15
+ - 컴포넌트 관리를 위해 사용
16
+
17
+ ```shell
18
+ npx sb init
19
+ npx storybook@latest add @storybook/addon-styling-webpack
20
+ ```
21
+
22
+ - clsx
23
+ - 조건부 className 작성을 위해 사용
24
+
25
+ ```shell
26
+ npm i clsx
27
+ ```
28
+
29
+ - tailwind-merge
30
+ - 스타일 충돌 없이 자바스크립트에서 tailwind CSS 클래스를 효율적으로 병합하는 기능을 가진 라이브러리
31
+
32
+ ```shell
33
+ npm i tailwind-merge
34
+ ```
35
+
36
+ - class-variance-authority (CVA)
37
+ - 일관성 있는 UI를 정의하고 사용할 수 있도록 도와주는 툴로써 shadcn/ui 컴포넌트의 핵심 도구
38
+
39
+ ```shell
40
+ npm i class-variance-authority
41
+ ```
42
+
43
+ <br />
44
+
45
+ ## 실행
46
+
47
+ - 스토리북 실행
48
+
49
+ ```shell
50
+ npm run storybook
51
+ ```
52
+
53
+ > 접속주소(포트 6006 사용 시): `http://localhost:6006`
54
+
55
+ - 웹페이지 실행
56
+
57
+ ```shell
58
+ npm run dev
59
+ ```
60
+
61
+ > 접속주소(포트 3000 사용 시): `http://localhost:3000`
62
+
63
+ ## package publish
64
+
65
+ - 타입스크립트 컴파일
66
+
67
+ ```shell
68
+ npm run publish:npm
69
+ ```
70
+
71
+ - npm package 배포 시
72
+
73
+ - npm 로그인
74
+
75
+ ```shell
76
+ npm login
77
+ ```
78
+
79
+ - package.json 버전 수정 후 컴파일 진행
80
+
81
+ ```shell
82
+ npm run publish:npm
83
+ ```
84
+
85
+ - 패키지 배포
86
+
87
+ ```shell
88
+ npm publish
89
+ ```
90
+
91
+ - npm scope 배포
92
+ - npm 로그인 후, 조직 생성 시 @계정명 으로 scope 생성
93
+ scope로 생성된 패키지는 npm publish 시, 아래 옵션 추가
94
+
95
+ ```shell
96
+ npm publish --access=public
97
+ ```
98
+
99
+
100
+ - npm package 미배포시
101
+
102
+ - package.json 버전 수정 후 컴파일 진행
103
+
104
+ ```shell
105
+ npm run publish:npm
106
+ ```
107
+
108
+ - dist/ 파일 및 설정파일 추출 후 전달
109
+
110
+ ## 사용자 이용 방법
111
+
112
+ ### npm 배포 시
113
+
114
+ - npm package 설치
115
+
116
+ ```sh
117
+ npm install <package_name>
118
+ ```
119
+
120
+ ### npm 미배포시
121
+
122
+ - 전달 받은 package 모듈 파일을 node_modules/ 폴더에 추가
123
+
124
+ ### tailwind 설정 방법
125
+
126
+ - tailwind config 파일 설정
127
+
128
+ ```js
129
+ // tailwind.config.ts
130
+ import type { Config } from 'tailwindcss';
131
+ // UI 라이브러리 tailwind config 파일 호출
132
+ // >>>>>>>> 추가
133
+ const packageTailwindConfig = require('ui-component-test/tailwind.config.js');
134
+ // >>>>>>>>
135
+
136
+ const config: Config = {
137
+ content: [
138
+ './src/pages/**/*.{js,ts,jsx,tsx,mdx,zip}',
139
+ './src/components/**/*.{js,ts,jsx,tsx,mdx,zip}',
140
+ './src/app/**/*.{js,ts,jsx,tsx,mdx,zip}',
141
+ // 해당 프로젝트 css 표준 컴포넌트에 적용 가능
142
+ // >>>>>>>> 추가
143
+ './node_modules/ui-component-test/**/*.{js,ts,jsx,tsx,mdx,zip}',
144
+ // >>>>>>>>
145
+ ],
146
+ theme: {
147
+ extend: {
148
+ backgroundImage: {
149
+ 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
150
+ 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
151
+ },
152
+ colors: {},
153
+ // UI 라이브러리 tailwind config 파일 적용
154
+ // >>>>>>>> 추가
155
+ ...packageTailwindConfig?.theme?.extend,
156
+ // >>>>>>>>
157
+ },
158
+ },
159
+ plugins: [],
160
+ };
161
+ export default config;
162
+
163
+ ```
@@ -5,8 +5,8 @@ export interface HeaderProps extends VariantProps<typeof headerVariants> {
5
5
  color?: IColor;
6
6
  }
7
7
  declare let headerVariants: (props?: ({
8
- weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
9
- headers?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null | undefined;
8
+ weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
9
+ headers?: "h2" | "h3" | "h1" | "h4" | "h5" | "h6" | null | undefined;
10
10
  color?: string | null | undefined;
11
11
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
12
12
  export declare const Header: React.ForwardRefExoticComponent<Omit<import("@radix-ui/themes").HeadingProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & HeaderProps & React.RefAttributes<HTMLHeadingElement>>;
@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
+ import { jsx as _jsx } from "react/jsx-runtime";
23
24
  import { cn } from '../../../lib/utils/utils';
24
25
  import { cva } from 'class-variance-authority';
25
26
  import { textColorStyle, weightVariants } from '../../../lib/constants';
@@ -48,11 +49,7 @@ export var Header = React.forwardRef(function (_a, ref) {
48
49
  var className = _a.className, children = _a.children, size = _a.size, weight = _a.weight, color = _a.color, headers = _a.headers, align = _a.align, rootProps = __rest(_a, ["className", "children", "size", "weight", "color", "headers", "align"]);
49
50
  if (!headers)
50
51
  headers = 'h1';
51
- return (<Theme>
52
- <HeadingTheme ref={ref} as={headers} size={size} align={align} className={cn('leading-normal', headerVariants({ weight: weight, color: color }), className)} {...rootProps}>
53
- {children}
54
- </HeadingTheme>
55
- </Theme>);
52
+ return (_jsx(Theme, { children: _jsx(HeadingTheme, __assign({ ref: ref, as: headers, size: size, align: align, className: cn('leading-normal', headerVariants({ weight: weight, color: color }), className) }, rootProps, { children: children })) }));
56
53
  });
57
54
  Header.displayName = 'Header';
58
55
  export default Header;
@@ -8,7 +8,7 @@ export interface TextProps extends VariantProps<typeof textVariants> {
8
8
  align?: 'left' | 'center' | 'right';
9
9
  }
10
10
  declare const textVariants: (props?: ({
11
- weight?: "medium" | "regular" | "semibold" | "bold" | "light" | null | undefined;
11
+ weight?: "bold" | "medium" | "regular" | "semibold" | "light" | null | undefined;
12
12
  color?: string | null | undefined;
13
13
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
14
14
  export declare const Text: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & TextProps & React.RefAttributes<HTMLSpanElement>>;
@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- import React, { forwardRef } from 'react';
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
+ import { forwardRef } from 'react';
24
25
  import { cva } from 'class-variance-authority';
25
26
  import { Text as TextTheme, Theme } from '@radix-ui/themes';
26
27
  import { textColorStyle, weightVariants } from '../../../lib/constants';
@@ -37,11 +38,7 @@ var textVariants = cva('text', {
37
38
  });
38
39
  export var Text = forwardRef(function (_a, ref) {
39
40
  var className = _a.className, children = _a.children, as = _a.as, align = _a.align, weight = _a.weight, color = _a.color, size = _a.size, props = __rest(_a, ["className", "children", "as", "align", "weight", "color", "size"]);
40
- return (<Theme>
41
- <TextTheme as={as} ref={ref} size={size} align={align} className={cn(textVariants({ weight: weight, color: color }), className)} {...props}>
42
- {children}
43
- </TextTheme>
44
- </Theme>);
41
+ return (_jsx(Theme, { children: _jsx(TextTheme, __assign({ as: as, ref: ref, size: size, align: align, className: cn(textVariants({ weight: weight, color: color }), className) }, props, { children: children })) }));
45
42
  });
46
43
  Text.displayName = 'Text';
47
44
  export default Text;
@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
23
24
  import React from 'react';
24
25
  import * as AccordionPrimitive from '@radix-ui/react-accordion';
25
26
  import { ChevronDownIcon } from '@radix-ui/react-icons';
@@ -36,35 +37,22 @@ var accoridanVariants = cva('', {
36
37
  });
37
38
  export var Accordion = React.forwardRef(function (_a, forwardedRef) {
38
39
  var className = _a.className, children = _a.children, scaling = _a.scaling, rootProps = __rest(_a, ["className", "children", "scaling"]);
39
- return (<AccordionPrimitive.Root className={cn('w-[280px] rounded-md border border-slateA-4 dark:border-slateDarkA-4', accoridanVariants({ scaling: scaling }), className)} {...rootProps} ref={forwardedRef}>
40
- {children}
41
- </AccordionPrimitive.Root>);
40
+ return (_jsx(AccordionPrimitive.Root, __assign({ className: cn('w-[280px] rounded-md border border-slateA-4 dark:border-slateDarkA-4', accoridanVariants({ scaling: scaling }), className) }, rootProps, { ref: forwardedRef, children: children })));
42
41
  });
43
42
  Accordion.displayName = 'AccordionRoot';
44
43
  export var AccordionItem = React.forwardRef(function (_a, forwardedRef) {
45
44
  var className = _a.className, children = _a.children, rootProps = __rest(_a, ["className", "children"]);
46
- return (<AccordionPrimitive.Item {...rootProps} ref={forwardedRef} className={cn('w-[278px] mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b ', className)}>
47
- {children}
48
- </AccordionPrimitive.Item>);
45
+ return (_jsx(AccordionPrimitive.Item, __assign({}, rootProps, { ref: forwardedRef, className: cn('w-[278px] mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b ', className), children: children })));
49
46
  });
50
47
  AccordionItem.displayName = 'AccordionItem';
51
48
  export var AccordionTrigger = React.forwardRef(function (_a, forwardedRef) {
52
49
  var className = _a.className, children = _a.children, _b = _a.color, color = _b === void 0 ? 'red' : _b, rootProps = __rest(_a, ["className", "children", "color"]);
53
- return (<AccordionPrimitive.Header {...rootProps} className={cn('flex', className)}>
54
- <AccordionPrimitive.Trigger {...rootProps} ref={forwardedRef} className={cn(" w-[278px] group flex h-[44px] cursor-default items-center justify-between py-[10px] px-[20px] text-base font-normal ", "dark:bg-[#111113] text-".concat(color, "A-11 dark:text-").concat(color, "Dark-11 "), "hover:bg-".concat(color, "A-4 dark:hover:bg-").concat(color, "Dark-4 hover:text-").concat(color, "A-11 dark:hover:text-").concat(color, "DarkA-11"), "data-[state=open]:bg-".concat(color, "A-5 dark:data-[state=open]:bg-").concat(color, "DarkA-5"), "disabled:bg-slateA-3 disabled:dark:bg-slateDarkA-3 disabled:text-slateA-3 disabled:dark:text-slateDarkA-8", className)}>
55
- {children}
56
- <ChevronDownIcon className="ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180" aria-hidden/>
57
- </AccordionPrimitive.Trigger>
58
- </AccordionPrimitive.Header>);
50
+ return (_jsx(AccordionPrimitive.Header, __assign({}, rootProps, { className: cn('flex', className), children: _jsxs(AccordionPrimitive.Trigger, __assign({}, rootProps, { ref: forwardedRef, className: cn(" w-[278px] group flex h-[44px] cursor-default items-center justify-between py-[10px] px-[20px] text-base font-normal ", "dark:bg-[#111113] text-".concat(color, "A-11 dark:text-").concat(color, "Dark-11 "), "hover:bg-".concat(color, "A-4 dark:hover:bg-").concat(color, "Dark-4 hover:text-").concat(color, "A-11 dark:hover:text-").concat(color, "DarkA-11"), "data-[state=open]:bg-".concat(color, "A-5 dark:data-[state=open]:bg-").concat(color, "DarkA-5"), "disabled:bg-slateA-3 disabled:dark:bg-slateDarkA-3 disabled:text-slateA-3 disabled:dark:text-slateDarkA-8", className), children: [children, _jsx(ChevronDownIcon, { className: "ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180", "aria-hidden": true })] })) })));
59
51
  });
60
52
  AccordionTrigger.displayName = 'AccordionTrigger';
61
53
  export var AccordionContent = React.forwardRef(function (_a, forwardedRef) {
62
54
  var className = _a.className, children = _a.children, rootProps = __rest(_a, ["className", "children"]);
63
- return (<AccordionPrimitive.Content {...rootProps} ref={forwardedRef} className={cn('w-[278px] max-h-[800px] bg-slateA-2 dark:bg-slateDarkA-2 border-t border-t-slateA-4 dark:border-t-slateDarkA-4 text-slateA-11 dark:text-slateDarkA-11 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[16px]', className)}>
64
- <div className="px-[20px] py-[15px] text-base font-normal h-auto max-h-[1000px] overflow-y-auto">
65
- {children}
66
- </div>
67
- </AccordionPrimitive.Content>);
55
+ return (_jsx(AccordionPrimitive.Content, __assign({}, rootProps, { ref: forwardedRef, className: cn('w-[278px] max-h-[800px] bg-slateA-2 dark:bg-slateDarkA-2 border-t border-t-slateA-4 dark:border-t-slateDarkA-4 text-slateA-11 dark:text-slateDarkA-11 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[16px]', className), children: _jsx("div", { className: "px-[20px] py-[15px] text-base font-normal h-auto max-h-[1000px] overflow-y-auto", children: children }) })));
68
56
  });
69
57
  AccordionContent.displayName = 'AccordionContent';
70
58
  export default Accordion;
@@ -6,9 +6,9 @@ export interface AlertDialogActionProps extends VariantProps<typeof alertDialogA
6
6
  appearance?: IAppearance;
7
7
  }
8
8
  export declare const alertDialogActionVariants: (props?: ({
9
- radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
9
+ radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
10
10
  size?: "small" | "medium" | "large" | "x-large" | null | undefined;
11
- weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
11
+ weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
12
12
  color?: string | null | undefined;
13
13
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
14
14
  export declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- import React, { forwardRef } from 'react';
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
+ import { forwardRef } from 'react';
24
25
  import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
25
26
  import { cva } from 'class-variance-authority';
26
27
  import { cn } from '../../../lib/utils/utils';
@@ -53,8 +54,6 @@ export var alertDialogActionVariants = cva("inline-flex items-center justify-cen
53
54
  export var AlertDialogAction = forwardRef(function (_a, ref) {
54
55
  var className = _a.className, children = _a.children, radius = _a.radius, weight = _a.weight, size = _a.size, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'solid' : _c, props = __rest(_a, ["className", "children", "radius", "weight", "size", "color", "appearance"]);
55
56
  var buttonClassName = cn(alertDialogActionVariants({ radius: radius, size: size, weight: weight, color: color }), appearanceStyle(appearance, color), className);
56
- return (<AlertDialogPrimitive.Action ref={ref} className={buttonClassName} {...props}>
57
- {children}
58
- </AlertDialogPrimitive.Action>);
57
+ return (_jsx(AlertDialogPrimitive.Action, __assign({ ref: ref, className: buttonClassName }, props, { children: children })));
59
58
  });
60
59
  AlertDialogAction.displayName = 'AlertDialogAction';
@@ -6,8 +6,8 @@ export interface AlertDialogCancelProps extends VariantProps<typeof alertDialogC
6
6
  appearance?: IAppearance;
7
7
  }
8
8
  export declare const alertDialogCancelVariants: (props?: ({
9
- radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
9
+ radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
10
10
  size?: "small" | "medium" | "large" | "x-large" | null | undefined;
11
- weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
11
+ weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
12
12
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
13
13
  export declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- import React, { forwardRef } from 'react';
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
+ import { forwardRef } from 'react';
24
25
  import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
25
26
  import { cva } from 'class-variance-authority';
26
27
  import { cn } from '../../../lib/utils/utils';
@@ -50,8 +51,6 @@ export var alertDialogCancelVariants = cva("inline-flex justify-center items-cen
50
51
  });
51
52
  export var AlertDialogCancel = forwardRef(function (_a, ref) {
52
53
  var className = _a.className, children = _a.children, radius = _a.radius, size = _a.size, weight = _a.weight, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, props = __rest(_a, ["className", "children", "radius", "size", "weight", "appearance"]);
53
- return (<AlertDialogPrimitive.Cancel ref={ref} {...props} className={cn(alertDialogCancelVariants({ radius: radius, size: size, weight: weight }), className)}>
54
- {children}
55
- </AlertDialogPrimitive.Cancel>);
54
+ return (_jsx(AlertDialogPrimitive.Cancel, __assign({ ref: ref }, props, { className: cn(alertDialogCancelVariants({ radius: radius, size: size, weight: weight }), className), children: children })));
56
55
  });
57
56
  AlertDialogCancel.displayName = 'AlertDialogCancel';
@@ -6,6 +6,6 @@ export interface AlertDialogContentProps extends VariantProps<typeof alertDialog
6
6
  export declare const alertDialogContentVariants: (props?: ({
7
7
  size?: "small" | "medium" | "large" | "x-large" | null | undefined;
8
8
  scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
9
- radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
9
+ radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
10
10
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
11
11
  export declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
@@ -20,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- import React, { forwardRef } from 'react';
23
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
+ import { forwardRef } from 'react';
24
25
  import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
25
26
  import { cva } from 'class-variance-authority';
26
27
  import { cn } from '../../../lib/utils/utils';
@@ -43,11 +44,6 @@ export var alertDialogContentVariants = cva("fixed max-h-[85vh] top-[50%] left-[
43
44
  });
44
45
  export var AlertDialogContent = forwardRef(function (_a, ref) {
45
46
  var className = _a.className, children = _a.children, radius = _a.radius, size = _a.size, scaling = _a.scaling, props = __rest(_a, ["className", "children", "radius", "size", "scaling"]);
46
- return (<AlertDialogPrimitive.Portal>
47
- <AlertDialogPrimitive.Overlay className="fixed data-[state=open]:animate-overlayShow inset-0"/>
48
- <AlertDialogPrimitive.Content className={cn(alertDialogContentVariants({ radius: radius, size: size, scaling: scaling }), className)} ref={ref} {...props}>
49
- {children}
50
- </AlertDialogPrimitive.Content>
51
- </AlertDialogPrimitive.Portal>);
47
+ return (_jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { className: "fixed data-[state=open]:animate-overlayShow inset-0" }), _jsx(AlertDialogPrimitive.Content, __assign({ className: cn(alertDialogContentVariants({ radius: radius, size: size, scaling: scaling }), className), ref: ref }, props, { children: children }))] }));
52
48
  });
53
49
  AlertDialogContent.displayName = 'AlertDialogContent';
@@ -1,3 +1,14 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
1
12
  var __rest = (this && this.__rest) || function (s, e) {
2
13
  var t = {};
3
14
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
9
20
  }
10
21
  return t;
11
22
  };
12
- import React, { forwardRef } from 'react';
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
+ import { forwardRef } from 'react';
13
25
  import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
14
26
  import { cva } from 'class-variance-authority';
15
27
  import { cn } from '../../../lib/utils/utils';
@@ -28,8 +40,6 @@ export var alertDialogDescriptionVariants = cva("text-slate-12 dark:text-slateDa
28
40
  });
29
41
  export var AlertDialogDescription = forwardRef(function (_a, ref) {
30
42
  var className = _a.className, children = _a.children, size = _a.size, contentText = _a.contentText, props = __rest(_a, ["className", "children", "size", "contentText"]);
31
- return (<AlertDialogPrimitive.Description className={cn(alertDialogDescriptionVariants({ size: size }), className)} ref={ref} {...props}>
32
- {contentText !== null && contentText !== void 0 ? contentText : children}
33
- </AlertDialogPrimitive.Description>);
43
+ return (_jsx(AlertDialogPrimitive.Description, __assign({ className: cn(alertDialogDescriptionVariants({ size: size }), className), ref: ref }, props, { children: contentText !== null && contentText !== void 0 ? contentText : children })));
34
44
  });
35
45
  AlertDialogDescription.displayName = 'AlertDialogDescription';
@@ -1,3 +1,14 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
1
12
  var __rest = (this && this.__rest) || function (s, e) {
2
13
  var t = {};
3
14
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,7 +20,8 @@ var __rest = (this && this.__rest) || function (s, e) {
9
20
  }
10
21
  return t;
11
22
  };
12
- import React, { forwardRef } from 'react';
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
+ import { forwardRef } from 'react';
13
25
  import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
14
26
  import { cva } from 'class-variance-authority';
15
27
  import { cn } from '../../../lib/utils/utils';
@@ -28,8 +40,6 @@ export var alertDialogTitleVariants = cva("m-0 text-slate-12 dark:text-slateDark
28
40
  });
29
41
  export var AlertDialogTitle = forwardRef(function (_a, ref) {
30
42
  var className = _a.className, children = _a.children, size = _a.size, titleText = _a.titleText, props = __rest(_a, ["className", "children", "size", "titleText"]);
31
- return (<AlertDialogPrimitive.Title className={cn(alertDialogTitleVariants({ size: size }), className)} ref={ref} {...props}>
32
- {titleText !== null && titleText !== void 0 ? titleText : children}
33
- </AlertDialogPrimitive.Title>);
43
+ return (_jsx(AlertDialogPrimitive.Title, __assign({ className: cn(alertDialogTitleVariants({ size: size }), className), ref: ref }, props, { children: titleText !== null && titleText !== void 0 ? titleText : children })));
34
44
  });
35
45
  AlertDialogTitle.displayName = 'AlertDialogTitle';
@@ -7,10 +7,10 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
7
7
  appearance?: IAppearance;
8
8
  }
9
9
  declare const buttonVariants: (props?: ({
10
- radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
10
+ radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
11
11
  size?: "small" | "medium" | "large" | "x-large" | null | undefined;
12
12
  scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
13
- weight?: "medium" | "regular" | "semibold" | "bold" | null | undefined;
13
+ weight?: "bold" | "medium" | "regular" | "semibold" | null | undefined;
14
14
  color?: string | null | undefined;
15
15
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
16
16
  export declare const AlertDialogTrigger: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & ButtonProps & React.RefAttributes<HTMLButtonElement>>;