@lotte-innovate/ui-component-test 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (269) hide show
  1. package/dist/Typography/Header/index.d.ts +1 -1
  2. package/dist/Typography/Header/{index.js → index.jsx} +5 -2
  3. package/dist/Typography/Text/{index.js → index.jsx} +6 -3
  4. package/dist/app/layout.d.ts +7 -0
  5. package/dist/app/layout.jsx +13 -0
  6. package/dist/app/page.d.ts +2 -0
  7. package/dist/app/page.jsx +6 -0
  8. package/dist/app/template/badgeTemplate.d.ts +12 -0
  9. package/dist/app/template/badgeTemplate.jsx +82 -0
  10. package/dist/app/template/buttonTemplate.d.ts +12 -0
  11. package/dist/app/template/buttonTemplate.jsx +82 -0
  12. package/dist/app/template/colorPicker.d.ts +7 -0
  13. package/dist/app/template/colorPicker.jsx +19 -0
  14. package/dist/app/template/textTemplate.d.ts +11 -0
  15. package/dist/app/template/textTemplate.jsx +72 -0
  16. package/dist/app/template/theme.d.ts +12 -0
  17. package/dist/app/template/theme.jsx +44 -0
  18. package/dist/color/alpha.d.ts +784 -0
  19. package/dist/color/alpha.js +784 -0
  20. package/dist/color/constants.d.ts +20 -0
  21. package/dist/color/constants.js +200 -0
  22. package/dist/color/dark.d.ts +392 -0
  23. package/dist/color/dark.js +392 -0
  24. package/dist/color/krdsColors.d.ts +309 -0
  25. package/dist/color/krdsColors.js +309 -0
  26. package/dist/color/light.d.ts +392 -0
  27. package/dist/color/light.js +393 -0
  28. package/dist/components/Accordion/{index.js → index.jsx} +17 -5
  29. package/dist/components/AlertDialog/{AlertDialogAction.js → AlertDialogAction.jsx} +4 -3
  30. package/dist/components/AlertDialog/{AlertDialogCancel.js → AlertDialogCancel.jsx} +4 -3
  31. package/dist/components/AlertDialog/{AlertDialogContent.js → AlertDialogContent.jsx} +7 -3
  32. package/dist/components/AlertDialog/{AlertDialogDescription.js → AlertDialogDescription.jsx} +4 -14
  33. package/dist/components/AlertDialog/{AlertDialogTitle.js → AlertDialogTitle.jsx} +4 -14
  34. package/dist/components/AlertDialog/{AlertDialogTrigger.js → AlertDialogTrigger.jsx} +4 -3
  35. package/dist/components/AlertDialog/{index.js → index.jsx} +2 -14
  36. package/dist/components/AspectRatio/{index.js → index.jsx} +4 -3
  37. package/dist/components/Avatar/{index.js → index.jsx} +7 -3
  38. package/dist/components/Badge/{index.js → index.jsx} +4 -3
  39. package/dist/components/BubbleChart/index.d.ts +2 -1
  40. package/dist/components/BubbleChart/{index.js → index.jsx} +2 -2
  41. package/dist/components/Button/{index.js → index.jsx} +4 -3
  42. package/dist/components/Callout/{CalloutIcon.js → CalloutIcon.jsx} +8 -3
  43. package/dist/components/Callout/{CalloutText.js → CalloutText.jsx} +4 -14
  44. package/dist/components/Callout/{index.js → index.jsx} +6 -3
  45. package/dist/components/Card/{index.js → index.jsx} +4 -3
  46. package/dist/components/Checkbox/{index.js → index.jsx} +11 -3
  47. package/dist/components/CheckboxCard/{index.js → index.jsx} +5 -3
  48. package/dist/components/CheckboxGroup/{CheckboxGroupItem.js → CheckboxGroupItem.jsx} +6 -14
  49. package/dist/components/CheckboxGroup/{index.js → index.jsx} +5 -2
  50. package/dist/components/ContextMenu/{ContextMenuCheckboxItem.js → ContextMenuCheckboxItem.jsx} +7 -14
  51. package/dist/components/ContextMenu/{ContextMenuContent.js → ContextMenuContent.jsx} +6 -3
  52. package/dist/components/ContextMenu/{ContextMenuGroup.js → ContextMenuGroup.jsx} +4 -14
  53. package/dist/components/ContextMenu/{ContextMenuItem.js → ContextMenuItem.jsx} +5 -3
  54. package/dist/components/ContextMenu/{ContextMenuItemIndicator.js → ContextMenuItemIndicator.jsx} +4 -3
  55. package/dist/components/ContextMenu/{ContextMenuLabel.js → ContextMenuLabel.jsx} +4 -3
  56. package/dist/components/ContextMenu/{ContextMenuRadioGroup.js → ContextMenuRadioGroup.jsx} +6 -14
  57. package/dist/components/ContextMenu/{ContextMenuRadioItem.js → ContextMenuRadioItem.jsx} +7 -14
  58. package/dist/components/ContextMenu/{ContextMenuSeparator.js → ContextMenuSeparator.jsx} +4 -14
  59. package/dist/components/ContextMenu/{ContextMenuSubContent.js → ContextMenuSubContent.jsx} +9 -6
  60. package/dist/components/ContextMenu/{ContextMenuSubTrigger.js → ContextMenuSubTrigger.jsx} +9 -14
  61. package/dist/components/ContextMenu/{ContextMenuTrigger.js → ContextMenuTrigger.jsx} +4 -14
  62. package/dist/components/ContextMenu/{index.js → index.jsx} +4 -14
  63. package/dist/components/DataList/{DataListItem.js → DataListItem.jsx} +4 -3
  64. package/dist/components/DataList/{DataListLabel.js → DataListLabel.jsx} +4 -3
  65. package/dist/components/DataList/{DataListValue.js → DataListValue.jsx} +4 -3
  66. package/dist/components/DataList/{index.js → index.jsx} +6 -14
  67. package/dist/components/Dialog/{DialogAction.js → DialogAction.jsx} +4 -14
  68. package/dist/components/Dialog/{DialogCancel.js → DialogCancel.jsx} +4 -14
  69. package/dist/components/Dialog/{DialogContent.js → DialogContent.jsx} +4 -3
  70. package/dist/components/Dialog/{DialogDescription.js → DialogDescription.jsx} +4 -14
  71. package/dist/components/Dialog/{DialogSlot.js → DialogSlot.jsx} +4 -14
  72. package/dist/components/Dialog/{DialogTitle.js → DialogTitle.jsx} +4 -14
  73. package/dist/components/Dialog/{DialogTrigger.js → DialogTrigger.jsx} +4 -14
  74. package/dist/components/Dialog/{index.js → index.jsx} +4 -14
  75. package/dist/components/DoughnutChart/index.d.ts +2 -1
  76. package/dist/components/DoughnutChart/{index.js → index.jsx} +2 -2
  77. package/dist/components/DropdownMenu/{DropdonMenuRadioGroup.js → DropdonMenuRadioGroup.jsx} +6 -14
  78. package/dist/components/DropdownMenu/{DropdonMenuSubContent.js → DropdonMenuSubContent.jsx} +10 -7
  79. package/dist/components/DropdownMenu/{DropdownMenuCheckboxItem.js → DropdownMenuCheckboxItem.jsx} +7 -14
  80. package/dist/components/DropdownMenu/{DropdownMenuContent.js → DropdownMenuContent.jsx} +6 -3
  81. package/dist/components/DropdownMenu/{DropdownMenuItem.js → DropdownMenuItem.jsx} +5 -3
  82. package/dist/components/DropdownMenu/{DropdownMenuItemIndicator.js → DropdownMenuItemIndicator.jsx} +4 -3
  83. package/dist/components/DropdownMenu/{DropdownMenuLable.js → DropdownMenuLable.jsx} +4 -3
  84. package/dist/components/DropdownMenu/{DropdownMenuRadioItem.js → DropdownMenuRadioItem.jsx} +7 -14
  85. package/dist/components/DropdownMenu/{DropdownMenuSeparator.js → DropdownMenuSeparator.jsx} +2 -14
  86. package/dist/components/DropdownMenu/{DropdownMenuSub.js → DropdownMenuSub.jsx} +2 -14
  87. package/dist/components/DropdownMenu/{DropdownMenuSubTrigger.js → DropdownMenuSubTrigger.jsx} +7 -14
  88. package/dist/components/DropdownMenu/{DropdownMenuTrigger.js → DropdownMenuTrigger.jsx} +4 -14
  89. package/dist/components/DropdownMenu/{index.js → index.jsx} +2 -14
  90. package/dist/components/HoverCard/{HoverCardContent.js → HoverCardContent.jsx} +4 -3
  91. package/dist/components/HoverCard/{HoverCardTrigger.js → HoverCardTrigger.jsx} +4 -14
  92. package/dist/components/HoverCard/{index.js → index.jsx} +4 -14
  93. package/dist/components/IconButton/{index.js → index.jsx} +3 -2
  94. package/dist/components/Input/Input.stories.d.ts +4 -4
  95. package/dist/components/Input/{Input.stories.js → Input.stories.jsx} +9 -15
  96. package/dist/components/Input/index.d.ts +1 -1
  97. package/dist/components/Input/{index.js → index.jsx} +3 -3
  98. package/dist/components/Inset/{index.js → index.jsx} +6 -3
  99. package/dist/components/Label/{index.js → index.jsx} +3 -2
  100. package/dist/components/Menubar/{MenubarCheckboxItem.js → MenubarCheckboxItem.jsx} +7 -14
  101. package/dist/components/Menubar/{MenubarContent.js → MenubarContent.jsx} +10 -7
  102. package/dist/components/Menubar/{MenubarItem.js → MenubarItem.jsx} +5 -3
  103. package/dist/components/Menubar/{MenubarItemIndicator.js → MenubarItemIndicator.jsx} +4 -3
  104. package/dist/components/Menubar/{MenubarMenu.js → MenubarMenu.jsx} +2 -14
  105. package/dist/components/Menubar/{MenubarRadioGroup.js → MenubarRadioGroup.jsx} +6 -14
  106. package/dist/components/Menubar/{MenubarRadioItem.js → MenubarRadioItem.jsx} +7 -14
  107. package/dist/components/Menubar/{MenubarSeparator.js → MenubarSeparator.jsx} +4 -14
  108. package/dist/components/Menubar/{MenubarSub.js → MenubarSub.jsx} +2 -14
  109. package/dist/components/Menubar/{MenubarSubContent.js → MenubarSubContent.jsx} +5 -4
  110. package/dist/components/Menubar/{MenubarSubTrigger.js → MenubarSubTrigger.jsx} +7 -14
  111. package/dist/components/Menubar/{MenubarTrigger.js → MenubarTrigger.jsx} +4 -3
  112. package/dist/components/Menubar/{index.js → index.jsx} +6 -3
  113. package/dist/components/NavigationMenu/{NavigationMenuContent.js → NavigationMenuContent.jsx} +4 -3
  114. package/dist/components/NavigationMenu/NavigationMenuIndicator.jsx +22 -0
  115. package/dist/components/NavigationMenu/{NavigationMenuItem.js → NavigationMenuItem.jsx} +4 -14
  116. package/dist/components/NavigationMenu/{NavigationMenuLink.js → NavigationMenuLink.jsx} +4 -3
  117. package/dist/components/NavigationMenu/{NavigationMenuList.js → NavigationMenuList.jsx} +5 -3
  118. package/dist/components/NavigationMenu/{NavigationMenuTrigger.js → NavigationMenuTrigger.jsx} +5 -3
  119. package/dist/components/NavigationMenu/{NavigationMenuViewport.js → NavigationMenuViewport.jsx} +4 -3
  120. package/dist/components/NavigationMenu/{index.js → index.jsx} +6 -14
  121. package/dist/components/PieChart/index.d.ts +2 -1
  122. package/dist/components/PieChart/{index.js → index.jsx} +2 -2
  123. package/dist/components/Popover/{PopoverClose.js → PopoverClose.jsx} +4 -14
  124. package/dist/components/Popover/{PopoverContent.js → PopoverContent.jsx} +4 -3
  125. package/dist/components/Popover/{PopoverTrigger.js → PopoverTrigger.jsx} +4 -14
  126. package/dist/components/Popover/{index.js → index.jsx} +4 -14
  127. package/dist/components/Progress/{index.js → index.jsx} +4 -3
  128. package/dist/components/RadarChart/index.d.ts +2 -1
  129. package/dist/components/RadarChart/{index.js → index.jsx} +2 -2
  130. package/dist/components/Radio/{index.js → index.jsx} +8 -13
  131. package/dist/components/RadioCards/{RadioCardsItem.js → RadioCardsItem.jsx} +4 -14
  132. package/dist/components/RadioCards/{index.js → index.jsx} +6 -3
  133. package/dist/components/RadioGroup/{RadioGroupItem.js → RadioGroupItem.jsx} +4 -14
  134. package/dist/components/RadioGroup/{index.js → index.jsx} +6 -14
  135. package/dist/components/ScrollArea/{index.js → index.jsx} +6 -14
  136. package/dist/components/SegmentedControl/{SegmentedControlItem.js → SegmentedControlItem.jsx} +4 -14
  137. package/dist/components/SegmentedControl/{index.js → index.jsx} +5 -2
  138. package/dist/components/Select/{index.js → index.jsx} +23 -8
  139. package/dist/components/Separator/{index.js → index.jsx} +5 -2
  140. package/dist/components/Skeleton/{index.js → index.jsx} +5 -2
  141. package/dist/components/Slider/{index.js → index.jsx} +3 -2
  142. package/dist/components/Spinner/{index.js → index.jsx} +5 -2
  143. package/dist/components/TabNav/{index.js → index.jsx} +8 -14
  144. package/dist/components/Table/{index.js → index.jsx} +23 -8
  145. package/dist/components/Tabs/{index.js → index.jsx} +14 -5
  146. package/dist/components/TextArea/{index.js → index.jsx} +3 -2
  147. package/dist/components/TextField/{index.js → index.jsx} +8 -3
  148. package/dist/components/Toast/{ToastActionButton.js → ToastActionButton.jsx} +4 -3
  149. package/dist/components/Toast/{ToastDescription.js → ToastDescription.jsx} +6 -14
  150. package/dist/components/Toast/{ToastTitle.js → ToastTitle.jsx} +4 -14
  151. package/dist/components/Toast/{index.js → index.jsx} +9 -3
  152. package/dist/components/Toggle/{ToggleWithText.js → ToggleWithText.jsx} +6 -4
  153. package/dist/components/Toggle/{index.js → index.jsx} +4 -3
  154. package/dist/components/ToggleGroup/{index.js → index.jsx} +6 -3
  155. package/dist/components/ToggleGroup/{toggleGroupItem.js → toggleGroupItem.jsx} +4 -14
  156. package/dist/components/ToggleSwitch/{index.js → index.jsx} +6 -2
  157. package/dist/components/Tooltip/index.d.ts +1 -1
  158. package/dist/components/Tooltip/{index.js → index.jsx} +11 -2
  159. package/dist/constants.d.ts +185 -0
  160. package/dist/constants.js +569 -0
  161. package/dist/index.d.ts +0 -0
  162. package/dist/index.js +3 -2
  163. package/dist/stories/Welcome.d.ts +3 -0
  164. package/dist/stories/Welcome.jsx +48 -0
  165. package/dist/stories/accordion/Accordion.stories.d.ts +71 -0
  166. package/dist/stories/accordion/Accordion.stories.jsx +79 -0
  167. package/dist/stories/alert-dialog/AlertDialog.stories.d.ts +107 -0
  168. package/dist/stories/alert-dialog/AlertDialog.stories.jsx +73 -0
  169. package/dist/stories/aspect-ratio/AspectRatio.stories.d.ts +68 -0
  170. package/dist/stories/aspect-ratio/AspectRatio.stories.jsx +106 -0
  171. package/dist/stories/avatar/Avatar.stories.d.ts +127 -0
  172. package/dist/stories/avatar/Avatar.stories.jsx +105 -0
  173. package/dist/stories/badge/Badge.stories.d.ts +133 -0
  174. package/dist/stories/badge/Badge.stories.jsx +130 -0
  175. package/dist/stories/bubble-chart/BubbleChart.stories.d.ts +103 -0
  176. package/dist/stories/bubble-chart/BubbleChart.stories.jsx +176 -0
  177. package/dist/stories/button/Button.stories.d.ts +148 -0
  178. package/dist/stories/button/Button.stories.jsx +98 -0
  179. package/dist/stories/button/IconButton.stories.d.ts +125 -0
  180. package/dist/stories/button/IconButton.stories.jsx +93 -0
  181. package/dist/stories/callout/Callout.stories.d.ts +129 -0
  182. package/dist/stories/callout/Callout.stories.jsx +205 -0
  183. package/dist/stories/card/Card.stories.d.ts +100 -0
  184. package/dist/stories/card/Card.stories.jsx +134 -0
  185. package/dist/stories/checkbox/Checkbox.stories.d.ts +147 -0
  186. package/dist/stories/checkbox/Checkbox.stories.jsx +166 -0
  187. package/dist/stories/checkbox/CheckboxCard.stories.d.ts +129 -0
  188. package/dist/stories/checkbox/CheckboxCard.stories.jsx +125 -0
  189. package/dist/stories/checkbox/CheckboxGroup.stories.d.ts +91 -0
  190. package/dist/stories/checkbox/CheckboxGroup.stories.jsx +144 -0
  191. package/dist/stories/context-menu/ContextMenu.stories.d.ts +113 -0
  192. package/dist/stories/context-menu/ContextMenu.stories.jsx +155 -0
  193. package/dist/stories/data-list/DataList.stories.d.ts +97 -0
  194. package/dist/stories/data-list/DataList.stories.jsx +185 -0
  195. package/dist/stories/dialog/Dialog.stories.d.ts +88 -0
  196. package/dist/stories/dialog/Dialog.stories.jsx +82 -0
  197. package/dist/stories/doughnut-chart/DoughnutChart.stories.d.ts +181 -0
  198. package/dist/stories/doughnut-chart/DoughnutChart.stories.jsx +236 -0
  199. package/dist/stories/dropdown-menu/DropdownMenu.stories.d.ts +112 -0
  200. package/dist/stories/dropdown-menu/DropdownMenu.stories.jsx +170 -0
  201. package/dist/stories/header/Header.stories.d.ts +112 -0
  202. package/dist/stories/header/Header.stories.jsx +116 -0
  203. package/dist/stories/hover-card/HoverCard.stories.d.ts +107 -0
  204. package/dist/stories/hover-card/HoverCard.stories.jsx +98 -0
  205. package/dist/stories/inset/Inset.stories.d.ts +58 -0
  206. package/dist/stories/inset/Inset.stories.jsx +79 -0
  207. package/dist/stories/label/Label.stories.d.ts +94 -0
  208. package/dist/stories/label/Label.stories.jsx +112 -0
  209. package/dist/stories/menubar/Menubar.stories.d.ts +119 -0
  210. package/dist/stories/menubar/Menubar.stories.jsx +135 -0
  211. package/dist/stories/navigation-menu/NavigationMenu.stories.d.ts +385 -0
  212. package/dist/stories/navigation-menu/NavigationMenu.stories.jsx +144 -0
  213. package/dist/stories/pie-chart/PieChart.stories.d.ts +186 -0
  214. package/dist/stories/pie-chart/PieChart.stories.jsx +300 -0
  215. package/dist/stories/popover/Popover.stories.d.ts +78 -0
  216. package/dist/stories/popover/Popover.stories.jsx +107 -0
  217. package/dist/stories/progress/Progress.stories.d.ts +113 -0
  218. package/dist/stories/progress/Progress.stories.jsx +82 -0
  219. package/dist/stories/radar-chart/RadarChart.stories.d.ts +111 -0
  220. package/dist/stories/radar-chart/RadarChart.stories.jsx +200 -0
  221. package/dist/stories/radio/Radio.stories.d.ts +108 -0
  222. package/dist/stories/radio/Radio.stories.jsx +94 -0
  223. package/dist/stories/radio/RadioCards.stories.d.ts +127 -0
  224. package/dist/stories/radio/RadioCards.stories.jsx +153 -0
  225. package/dist/stories/radio/RadioGroup.stories.d.ts +111 -0
  226. package/dist/stories/radio/RadioGroup.stories.jsx +142 -0
  227. package/dist/stories/scroll-area/ScrollArea.stories.d.ts +59 -0
  228. package/dist/stories/scroll-area/ScrollArea.stories.jsx +123 -0
  229. package/dist/stories/segmented-control/SegmentedControl.stories.d.ts +97 -0
  230. package/dist/stories/segmented-control/SegmentedControl.stories.jsx +101 -0
  231. package/dist/stories/select/Select.stories.d.ts +116 -0
  232. package/dist/stories/select/Select.stories.jsx +149 -0
  233. package/dist/stories/separator/Separator.stories.d.ts +93 -0
  234. package/dist/stories/separator/Separator.stories.jsx +106 -0
  235. package/dist/stories/skeleton/Skeleton.stories.d.ts +88 -0
  236. package/dist/stories/skeleton/Skeleton.stories.jsx +119 -0
  237. package/dist/stories/slider/Slider.stories.d.ts +114 -0
  238. package/dist/stories/slider/Slider.stories.jsx +94 -0
  239. package/dist/stories/spinner/Spinner.stories.d.ts +83 -0
  240. package/dist/stories/spinner/Spinner.stories.jsx +112 -0
  241. package/dist/stories/switch/Switch.stories.d.ts +146 -0
  242. package/dist/stories/switch/Switch.stories.jsx +119 -0
  243. package/dist/stories/tab-nav/TabNav.stories.d.ts +55 -0
  244. package/dist/stories/tab-nav/TabNav.stories.jsx +68 -0
  245. package/dist/stories/table/Table.stories.d.ts +87 -0
  246. package/dist/stories/table/Table.stories.jsx +106 -0
  247. package/dist/stories/tabs/Tabs.stories.d.ts +55 -0
  248. package/dist/stories/tabs/Tabs.stories.jsx +76 -0
  249. package/dist/stories/text/Text.stories.d.ts +74 -0
  250. package/dist/stories/text/Text.stories.jsx +91 -0
  251. package/dist/stories/textArea/TextArea.stories.d.ts +117 -0
  252. package/dist/stories/textArea/TextArea.stories.jsx +112 -0
  253. package/dist/stories/textfield/TextField.stories.d.ts +116 -0
  254. package/dist/stories/textfield/TextField.stories.jsx +120 -0
  255. package/dist/stories/toast/Toast.stories.d.ts +138 -0
  256. package/dist/stories/toast/Toast.stories.jsx +122 -0
  257. package/dist/stories/toggle/Toggle.stories.d.ts +115 -0
  258. package/dist/stories/toggle/Toggle.stories.jsx +106 -0
  259. package/dist/stories/toggle/ToggleGroup.stories.d.ts +103 -0
  260. package/dist/stories/toggle/ToggleGroup.stories.jsx +127 -0
  261. package/dist/stories/tooltip/Tooltip.stories.d.ts +93 -0
  262. package/dist/stories/tooltip/Tooltip.stories.jsx +91 -0
  263. package/dist/tsconfig.tsbuildinfo +1 -0
  264. package/dist/types.d.ts +11 -0
  265. package/dist/types.js +1 -0
  266. package/dist/utils/utils.d.ts +3 -0
  267. package/dist/utils/utils.js +27 -0
  268. package/package.json +2 -3
  269. package/dist/components/NavigationMenu/NavigationMenuIndicator.js +0 -31
@@ -0,0 +1,123 @@
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
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import { commonArgTypes, sizeOptions } from '../../constants';
24
+ import { ScrollArea } from '../../components/ScrollArea';
25
+ import { Header } from 'Typography/Header';
26
+ import { Text } from 'Typography/Text';
27
+ var meta = {
28
+ title: 'Component/ScrollArea',
29
+ component: ScrollArea,
30
+ parameters: {
31
+ layout: 'centered',
32
+ themes: {
33
+ themeOverride: 'dark',
34
+ },
35
+ docs: {
36
+ description: {
37
+ component: '스크롤 가능 영역',
38
+ },
39
+ },
40
+ },
41
+ tags: ['autodocs'],
42
+ argTypes: {
43
+ radius: __assign(__assign({}, commonArgTypes.radius), { description: 'scrollArea 둥글기' }),
44
+ size: __assign(__assign({}, commonArgTypes.size), { table: {
45
+ category: 'Props',
46
+ type: {
47
+ summary: sizeOptions
48
+ .filter(function (value) { return value != 'x-small' && value != 'x-large'; })
49
+ .join(' | '),
50
+ },
51
+ }, options: sizeOptions.filter(function (value) { return value != 'x-small' && value != 'x-large'; }), description: 'scrollArea 크기' }),
52
+ },
53
+ };
54
+ export default meta;
55
+ export var Default = function (_a) {
56
+ var args = __rest(_a, []);
57
+ return (<ScrollArea type="always" scrollbars="vertical" className="h-[180px]" {...args}>
58
+ <div className="p-2 pr-8">
59
+ <Header size={'4'} mb={'2'} trim={'start'}>
60
+ Principles of the typographic craft
61
+ </Header>
62
+ <div className="flex flex-col gap-4">
63
+ <Text as="p">
64
+ Three fundamental aspects of typography are legibility, readability, and aesthetics.
65
+ Although in a non-technical sense “legible” and “readable” are often used synonymously,
66
+ typographically they are separate but related concepts.
67
+ </Text>
68
+
69
+ <Text as="p">
70
+ Legibility describes how easily individual characters can be distinguished from one
71
+ another. It is described by Walter Tracy as “the quality of being decipherable and
72
+ recognisable”. For instance, if a “b” and an “h”, or a “3” and an “8”, are difficult to
73
+ distinguish at small sizes, this is a problem of legibility.
74
+ </Text>
75
+
76
+ <Text as="p">
77
+ Typographers are concerned with legibility insofar as it is their job to select the
78
+ correct font to use. Brush Script is an example of a font containing many characters that
79
+ might be difficult to distinguish. The selection of cases influences the legibility of
80
+ typography because using only uppercase letters (all-caps) reduces legibility.
81
+ </Text>
82
+ </div>
83
+ </div>
84
+ </ScrollArea>);
85
+ };
86
+ export var Type = function (_a) {
87
+ var args = __rest(_a, []);
88
+ return (<div className="grid grid-cols-2 gap-2">
89
+ <ScrollArea type="always" scrollbars="vertical" className="h-[150px]" {...args}>
90
+ <div className="flex flex-col p-2 pr-8 gap-4">
91
+ <Text size="2">
92
+ Three fundamental aspects of typography are legibility, readability, and aesthetics.
93
+ Although in a non-technical sense legible and readable are often used synonymously,
94
+ typographically they are separate but related concepts.
95
+ </Text>
96
+
97
+ <Text size="2">
98
+ Legibility describes how easily individual characters can be distinguished from one
99
+ another. It is described by Walter Tracy as the quality of being decipherable and
100
+ recognisable. For instance, if a b and an h, or a 3 and an 8, are difficult to distinguish
101
+ at small sizes, this is a problem of legibility.
102
+ </Text>
103
+ </div>
104
+ </ScrollArea>
105
+
106
+ <ScrollArea type="always" scrollbars="horizontal" className="h-[150px]" {...args}>
107
+ <div className="gap-4 p-2 w-[700px]">
108
+ <Text size="2">
109
+ Three fundamental aspects of typography are legibility, readability, and aesthetics.
110
+ Although in a non-technical sense legible and readable are often used synonymously,
111
+ typographically they are separate but related concepts.
112
+ </Text>
113
+
114
+ <Text size="2">
115
+ Legibility describes how easily individual characters can be distinguished from one
116
+ another. It is described by Walter Tracy as the quality of being decipherable and
117
+ recognisable. For instance, if a b and an h, or a 3 and an 8, are difficult to distinguish
118
+ at small sizes, this is a problem of legibility.
119
+ </Text>
120
+ </div>
121
+ </ScrollArea>
122
+ </div>);
123
+ };
@@ -0,0 +1,97 @@
1
+ /// <reference types="react" />
2
+ import { ISize, IRadius } from '../../types';
3
+ declare const meta: {
4
+ title: string;
5
+ component: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes/dist/cjs/components/segmented-control").RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("../../components/SegmentedControl").SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>>;
6
+ parameters: {
7
+ layout: string;
8
+ themes: {
9
+ themeOverride: string;
10
+ };
11
+ docs: {
12
+ description: {
13
+ component: string;
14
+ };
15
+ };
16
+ };
17
+ tags: string[];
18
+ argTypes: {
19
+ size: {
20
+ table: {
21
+ category: string;
22
+ type: {
23
+ summary: string;
24
+ };
25
+ };
26
+ options: ISize[];
27
+ description: string;
28
+ control: {
29
+ type: string;
30
+ };
31
+ defaultValue: {
32
+ summary: string;
33
+ };
34
+ };
35
+ radius: {
36
+ description: string;
37
+ table: {
38
+ category: string;
39
+ type: {
40
+ summary: string;
41
+ };
42
+ };
43
+ options: IRadius[];
44
+ control: {
45
+ type: string;
46
+ };
47
+ defaultValue: {
48
+ summary: string;
49
+ };
50
+ };
51
+ scaling: {
52
+ description: string;
53
+ table: {
54
+ category: string;
55
+ type: {
56
+ summary: string;
57
+ };
58
+ };
59
+ control: {
60
+ type: string;
61
+ };
62
+ options: import("../../types").IScaling[];
63
+ defaultValue: {
64
+ summary: string;
65
+ };
66
+ };
67
+ appearance: {
68
+ description: string;
69
+ table: {
70
+ category: string;
71
+ type: {
72
+ summary: string;
73
+ };
74
+ };
75
+ control: {
76
+ type: string;
77
+ };
78
+ options: string[];
79
+ defaultValue: {
80
+ summary: string;
81
+ };
82
+ };
83
+ };
84
+ };
85
+ export default meta;
86
+ export declare const Default: ({ ...args }: {
87
+ [x: string]: any;
88
+ }) => import("react").JSX.Element;
89
+ export declare const Size: ({ ...args }: {
90
+ [x: string]: any;
91
+ }) => import("react").JSX.Element;
92
+ export declare const Radius: ({ ...args }: {
93
+ [x: string]: any;
94
+ }) => import("react").JSX.Element;
95
+ export declare const Variant: ({ ...args }: {
96
+ [x: string]: any;
97
+ }) => import("react").JSX.Element;
@@ -0,0 +1,101 @@
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
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import { SegmentedControl, SegmentedControlItem } from '../../components/SegmentedControl';
24
+ import { commonArgTypes, radiusOptions, sizeOptions } from '../../constants';
25
+ var meta = {
26
+ title: 'Component/SegmentedControl',
27
+ component: SegmentedControl,
28
+ parameters: {
29
+ layout: 'centered',
30
+ themes: {
31
+ themeOverride: 'dark',
32
+ },
33
+ docs: {
34
+ description: {
35
+ component: '다양한 옵션 중 하나를 컨트롤 할 수 있는 요소',
36
+ },
37
+ },
38
+ },
39
+ tags: ['autodocs'],
40
+ argTypes: {
41
+ size: __assign(__assign({}, commonArgTypes.size), { table: {
42
+ category: 'Props',
43
+ type: {
44
+ summary: sizeOptions
45
+ .filter(function (size) { return !['x-small', 'x-large'].includes(size); })
46
+ .join(' | '),
47
+ },
48
+ }, options: sizeOptions.filter(function (size) { return !['x-small', 'x-large'].includes(size); }), description: 'segmentedControl 크기' }),
49
+ radius: __assign(__assign({}, commonArgTypes.radius), { description: 'segmentedControl 둥글기' }),
50
+ scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'segmentedControl 비율' }),
51
+ appearance: {
52
+ description: 'segmentedControl 스타일',
53
+ table: {
54
+ category: 'Props',
55
+ type: { summary: ['surface', 'classic'].join(' | ') },
56
+ },
57
+ control: { type: 'select' },
58
+ options: ['surface', 'classic'],
59
+ defaultValue: { summary: 'surface' },
60
+ },
61
+ },
62
+ };
63
+ export default meta;
64
+ export var Default = function (_a) {
65
+ var args = __rest(_a, []);
66
+ return (<SegmentedControl {...args} defaultValue={'inbox'}>
67
+ <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
68
+ <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
69
+ <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
70
+ </SegmentedControl>);
71
+ };
72
+ export var Size = function (_a) {
73
+ var args = __rest(_a, []);
74
+ return (<div className="flex flex-col space-y-3">
75
+ {['small', 'medium', 'large'].map(function (size) { return (<SegmentedControl key={size} defaultValue={'inbox'} {...args} size={size}>
76
+ <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
77
+ <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
78
+ <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
79
+ </SegmentedControl>); })}
80
+ </div>);
81
+ };
82
+ export var Radius = function (_a) {
83
+ var args = __rest(_a, []);
84
+ return (<div className="flex flex-col space-y-3">
85
+ {radiusOptions.map(function (radius) { return (<SegmentedControl key={radius} defaultValue={'inbox'} {...args} radius={radius}>
86
+ <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
87
+ <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
88
+ <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
89
+ </SegmentedControl>); })}
90
+ </div>);
91
+ };
92
+ export var Variant = function (_a) {
93
+ var args = __rest(_a, []);
94
+ return (<div className="flex flex-col space-y-3">
95
+ {['surface', 'classic'].map(function (appearance) { return (<SegmentedControl key={appearance} defaultValue={'inbox'} {...args} appearance={appearance}>
96
+ <SegmentedControlItem value={'inbox'}>Inbox</SegmentedControlItem>
97
+ <SegmentedControlItem value={'drafts'}>Drafts</SegmentedControlItem>
98
+ <SegmentedControlItem value={'sent'}>Sent</SegmentedControlItem>
99
+ </SegmentedControl>); })}
100
+ </div>);
101
+ };
@@ -0,0 +1,116 @@
1
+ /// <reference types="react" />
2
+ import { IRadius } from 'types';
3
+ declare const meta: {
4
+ title: string;
5
+ component: import("react").ForwardRefExoticComponent<import("@radix-ui/themes/dist/cjs/components/select").RootProps & import("../../components/Select/index").SelectProps & import("react").RefAttributes<never>>;
6
+ parameters: {
7
+ layout: string;
8
+ themes: {
9
+ themeOverride: string;
10
+ };
11
+ docs: {
12
+ description: {
13
+ component: string;
14
+ };
15
+ };
16
+ };
17
+ tags: string[];
18
+ argTypes: {
19
+ scaling: {
20
+ description: string;
21
+ table: {
22
+ category: string;
23
+ type: {
24
+ summary: string;
25
+ };
26
+ };
27
+ control: {
28
+ type: string;
29
+ };
30
+ options: import("types").IScaling[];
31
+ defaultValue: {
32
+ summary: string;
33
+ };
34
+ };
35
+ radius: {
36
+ description: string;
37
+ table: {
38
+ category: string;
39
+ type: {
40
+ summary: string;
41
+ };
42
+ };
43
+ options: IRadius[];
44
+ control: {
45
+ type: string;
46
+ };
47
+ defaultValue: {
48
+ summary: string;
49
+ };
50
+ };
51
+ color: {
52
+ description: string;
53
+ table: {
54
+ category: string;
55
+ type: {
56
+ summary: string;
57
+ };
58
+ };
59
+ options: import("types").IColor[];
60
+ control: {
61
+ type: string;
62
+ };
63
+ defaultValue: {
64
+ summary: string;
65
+ };
66
+ };
67
+ size: {
68
+ table: {
69
+ category: string;
70
+ type: {
71
+ summary: string;
72
+ };
73
+ };
74
+ control: {
75
+ type: string;
76
+ };
77
+ options: string[];
78
+ defaultValue: {
79
+ summary: string;
80
+ };
81
+ description: string;
82
+ };
83
+ appearance: {
84
+ table: {
85
+ category: string;
86
+ type: {
87
+ summary: string;
88
+ };
89
+ };
90
+ control: {
91
+ type: string;
92
+ };
93
+ defaultValue: {
94
+ summary: string;
95
+ };
96
+ description: string;
97
+ options: string[];
98
+ };
99
+ };
100
+ };
101
+ export default meta;
102
+ export declare const Default: ({ ...args }: {
103
+ [x: string]: any;
104
+ }) => import("react").JSX.Element;
105
+ export declare const Size: ({ ...args }: {
106
+ [x: string]: any;
107
+ }) => import("react").JSX.Element;
108
+ export declare const Appearance: ({ ...args }: {
109
+ [x: string]: any;
110
+ }) => import("react").JSX.Element;
111
+ export declare const Radius: ({ ...args }: {
112
+ [x: string]: any;
113
+ }) => import("react").JSX.Element;
114
+ export declare const WithIcon: ({ ...args }: {
115
+ [x: string]: any;
116
+ }) => import("react").JSX.Element;
@@ -0,0 +1,149 @@
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
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import { Select, SelectContent, SelectItem, SelectTrigger } from '../../components/Select/index';
24
+ import { commonArgTypes, radiusOptions } from '../../constants';
25
+ import { MoonIcon, SunIcon } from '@radix-ui/react-icons';
26
+ var meta = {
27
+ title: 'Component/Select',
28
+ component: Select,
29
+ parameters: {
30
+ layout: 'centered',
31
+ themes: {
32
+ themeOverride: 'dark',
33
+ },
34
+ docs: {
35
+ description: {
36
+ component: '제공된 목록에서 하나 이상의 목록을 선택할 수 있는 기능',
37
+ },
38
+ },
39
+ },
40
+ tags: ['autodocs'],
41
+ argTypes: {
42
+ scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'Select 크기' }),
43
+ radius: __assign(__assign({}, commonArgTypes.radius), { description: 'Select 둥글기' }),
44
+ color: __assign(__assign({}, commonArgTypes.color), { description: 'Select 색상' }),
45
+ size: {
46
+ table: {
47
+ category: 'Props',
48
+ type: { summary: ['small', 'medium', 'large'].join(' | ') },
49
+ },
50
+ control: { type: 'select' },
51
+ options: ['small', 'medium', 'large'],
52
+ defaultValue: { summary: 'medium' },
53
+ description: 'Select 크기',
54
+ },
55
+ appearance: {
56
+ table: {
57
+ category: 'Props',
58
+ type: { summary: ['classic', 'soft', 'surface', 'ghost'].join(' | ') },
59
+ },
60
+ control: { type: 'select' },
61
+ defaultValue: { summary: 'surface' },
62
+ description: 'Select 스타일',
63
+ options: ['classic', 'soft', 'surface', 'ghost'],
64
+ },
65
+ },
66
+ };
67
+ export default meta;
68
+ export var Default = function (_a) {
69
+ var args = __rest(_a, []);
70
+ return (<Select {...args}>
71
+ <SelectTrigger {...args} placeholder="Select..."/>
72
+ <SelectContent {...args}>
73
+ <SelectItem value="apple" {...args}>
74
+ Apple
75
+ </SelectItem>
76
+ <SelectItem value="orange" {...args}>
77
+ Orange
78
+ </SelectItem>
79
+ </SelectContent>
80
+ </Select>);
81
+ };
82
+ export var Size = function (_a) {
83
+ var args = __rest(_a, []);
84
+ return (<div className="flex gap-3">
85
+ {['small', 'medium', 'large'].map(function (size) { return (<Select key={size} size={size} {...args}>
86
+ <SelectTrigger {...args} placeholder="Select..."/>
87
+ <SelectContent {...args}>
88
+ <SelectItem value="apple" {...args}>
89
+ Apple
90
+ </SelectItem>
91
+ <SelectItem value="orange" {...args}>
92
+ Orange
93
+ </SelectItem>
94
+ </SelectContent>
95
+ </Select>); })}
96
+ </div>);
97
+ };
98
+ export var Appearance = function (_a) {
99
+ var args = __rest(_a, []);
100
+ return (<div className="flex gap-3">
101
+ {['classic', 'surface', 'soft', 'ghost'].map(function (appearance) { return (<Select key={appearance} {...args}>
102
+ <SelectTrigger appearance={appearance} {...args} placeholder="Select..."/>
103
+ <SelectContent {...args}>
104
+ <SelectItem value="apple" {...args}>
105
+ Apple
106
+ </SelectItem>
107
+ <SelectItem value="orange" {...args}>
108
+ Orange
109
+ </SelectItem>
110
+ </SelectContent>
111
+ </Select>); })}
112
+ </div>);
113
+ };
114
+ export var Radius = function (_a) {
115
+ var args = __rest(_a, []);
116
+ return (<div className="flex gap-3">
117
+ {radiusOptions.map(function (radius) { return (<Select key={radius} {...args}>
118
+ <SelectTrigger radius={radius} {...args} placeholder="Select..."/>
119
+ <SelectContent {...args}>
120
+ <SelectItem value="apple" {...args}>
121
+ Apple
122
+ </SelectItem>
123
+ <SelectItem value="orange" {...args}>
124
+ Orange
125
+ </SelectItem>
126
+ </SelectContent>
127
+ </Select>); })}
128
+ </div>);
129
+ };
130
+ export var WithIcon = function (_a) {
131
+ var args = __rest(_a, []);
132
+ return (<Select defaultValue="dark" {...args}>
133
+ <SelectTrigger {...args}></SelectTrigger>
134
+ <SelectContent {...args}>
135
+ <SelectItem value="dark" {...args}>
136
+ <div className="flex gap-2 items-center">
137
+ <MoonIcon />
138
+ <label>Dark</label>
139
+ </div>
140
+ </SelectItem>
141
+ <SelectItem value="light" {...args}>
142
+ <div className="flex gap-2 items-center">
143
+ <SunIcon />
144
+ <label>Light</label>
145
+ </div>
146
+ </SelectItem>
147
+ </SelectContent>
148
+ </Select>);
149
+ };
@@ -0,0 +1,93 @@
1
+ /// <reference types="react" />
2
+ declare const meta: {
3
+ title: string;
4
+ component: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes").SeparatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("../../components/Separator/index").SeparatorProps & import("react").RefAttributes<HTMLSpanElement>>;
5
+ parameters: {
6
+ layout: string;
7
+ themes: {
8
+ themeOverride: string;
9
+ };
10
+ docs: {
11
+ description: {
12
+ component: string;
13
+ };
14
+ };
15
+ };
16
+ tags: string[];
17
+ argTypes: {
18
+ scaling: {
19
+ description: string;
20
+ table: {
21
+ category: string;
22
+ type: {
23
+ summary: string;
24
+ };
25
+ };
26
+ control: {
27
+ type: string;
28
+ };
29
+ options: import("types").IScaling[];
30
+ defaultValue: {
31
+ summary: string;
32
+ };
33
+ };
34
+ color: {
35
+ defaultValue: {
36
+ summary: string;
37
+ };
38
+ description: string;
39
+ table: {
40
+ category: string;
41
+ type: {
42
+ summary: string;
43
+ };
44
+ };
45
+ options: import("types").IColor[];
46
+ control: {
47
+ type: string;
48
+ };
49
+ };
50
+ orientation: {
51
+ table: {
52
+ category: string;
53
+ type: {
54
+ summary: string;
55
+ };
56
+ };
57
+ options: string[];
58
+ description: string;
59
+ defaultValue: {
60
+ summary: string;
61
+ };
62
+ };
63
+ size: {
64
+ table: {
65
+ category: string;
66
+ type: {
67
+ summary: string;
68
+ };
69
+ };
70
+ control: {
71
+ type: string;
72
+ };
73
+ options: string[];
74
+ defaultValue: {
75
+ summary: string;
76
+ };
77
+ description: string;
78
+ };
79
+ };
80
+ };
81
+ export default meta;
82
+ export declare const Default: ({ ...args }: {
83
+ [x: string]: any;
84
+ }) => import("react").JSX.Element;
85
+ export declare const Orientation: ({ ...args }: {
86
+ [x: string]: any;
87
+ }) => import("react").JSX.Element;
88
+ export declare const HorizontalSize: ({ ...args }: {
89
+ [x: string]: any;
90
+ }) => import("react").JSX.Element;
91
+ export declare const VerticalSize: ({ ...args }: {
92
+ [x: string]: any;
93
+ }) => import("react").JSX.Element;