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

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 (264) hide show
  1. package/dist/Typography/Header/index.d.ts +1 -1
  2. package/dist/Typography/Header/{index.jsx → index.js} +2 -5
  3. package/dist/Typography/Text/{index.jsx → index.js} +3 -6
  4. package/dist/app/layout.d.ts +1 -1
  5. package/dist/app/{layout.jsx → layout.js} +2 -3
  6. package/dist/app/page.d.ts +1 -2
  7. package/dist/app/{page.jsx → page.js} +2 -2
  8. package/dist/app/template/badgeTemplate.d.ts +1 -2
  9. package/dist/app/template/badgeTemplate.js +11 -0
  10. package/dist/app/template/buttonTemplate.d.ts +1 -2
  11. package/dist/app/template/buttonTemplate.js +11 -0
  12. package/dist/app/template/colorPicker.d.ts +1 -2
  13. package/dist/app/template/colorPicker.js +14 -0
  14. package/dist/app/template/textTemplate.d.ts +1 -2
  15. package/dist/app/template/textTemplate.js +23 -0
  16. package/dist/app/template/theme.d.ts +2 -2
  17. package/dist/app/template/theme.js +12 -0
  18. package/dist/components/Accordion/{index.jsx → index.js} +5 -17
  19. package/dist/components/AlertDialog/{AlertDialogAction.jsx → AlertDialogAction.js} +3 -4
  20. package/dist/components/AlertDialog/{AlertDialogCancel.jsx → AlertDialogCancel.js} +3 -4
  21. package/dist/components/AlertDialog/{AlertDialogContent.jsx → AlertDialogContent.js} +3 -7
  22. package/dist/components/AlertDialog/{AlertDialogDescription.jsx → AlertDialogDescription.js} +14 -4
  23. package/dist/components/AlertDialog/{AlertDialogTitle.jsx → AlertDialogTitle.js} +14 -4
  24. package/dist/components/AlertDialog/{AlertDialogTrigger.jsx → AlertDialogTrigger.js} +3 -4
  25. package/dist/components/AlertDialog/{index.jsx → index.js} +14 -2
  26. package/dist/components/AspectRatio/{index.jsx → index.js} +3 -4
  27. package/dist/components/Avatar/{index.jsx → index.js} +3 -7
  28. package/dist/components/Badge/{index.jsx → index.js} +3 -4
  29. package/dist/components/BubbleChart/index.d.ts +1 -2
  30. package/dist/components/BubbleChart/{index.jsx → index.js} +2 -2
  31. package/dist/components/Button/{index.jsx → index.js} +3 -4
  32. package/dist/components/Callout/{CalloutIcon.jsx → CalloutIcon.js} +3 -8
  33. package/dist/components/Callout/{CalloutText.jsx → CalloutText.js} +14 -4
  34. package/dist/components/Callout/{index.jsx → index.js} +3 -6
  35. package/dist/components/Card/{index.jsx → index.js} +3 -4
  36. package/dist/components/Checkbox/{index.jsx → index.js} +3 -11
  37. package/dist/components/CheckboxCard/{index.jsx → index.js} +3 -5
  38. package/dist/components/CheckboxGroup/{CheckboxGroupItem.jsx → CheckboxGroupItem.js} +14 -6
  39. package/dist/components/CheckboxGroup/{index.jsx → index.js} +2 -5
  40. package/dist/components/ContextMenu/{ContextMenuCheckboxItem.jsx → ContextMenuCheckboxItem.js} +14 -7
  41. package/dist/components/ContextMenu/{ContextMenuContent.jsx → ContextMenuContent.js} +3 -6
  42. package/dist/components/ContextMenu/{ContextMenuGroup.jsx → ContextMenuGroup.js} +14 -4
  43. package/dist/components/ContextMenu/{ContextMenuItem.jsx → ContextMenuItem.js} +3 -5
  44. package/dist/components/ContextMenu/{ContextMenuItemIndicator.jsx → ContextMenuItemIndicator.js} +3 -4
  45. package/dist/components/ContextMenu/{ContextMenuLabel.jsx → ContextMenuLabel.js} +3 -4
  46. package/dist/components/ContextMenu/{ContextMenuRadioGroup.jsx → ContextMenuRadioGroup.js} +14 -6
  47. package/dist/components/ContextMenu/{ContextMenuRadioItem.jsx → ContextMenuRadioItem.js} +14 -7
  48. package/dist/components/ContextMenu/{ContextMenuSeparator.jsx → ContextMenuSeparator.js} +14 -4
  49. package/dist/components/ContextMenu/{ContextMenuSubContent.jsx → ContextMenuSubContent.js} +6 -9
  50. package/dist/components/ContextMenu/{ContextMenuSubTrigger.jsx → ContextMenuSubTrigger.js} +14 -9
  51. package/dist/components/ContextMenu/{ContextMenuTrigger.jsx → ContextMenuTrigger.js} +14 -4
  52. package/dist/components/ContextMenu/{index.jsx → index.js} +14 -4
  53. package/dist/components/DataList/{DataListItem.jsx → DataListItem.js} +3 -4
  54. package/dist/components/DataList/{DataListLabel.jsx → DataListLabel.js} +3 -4
  55. package/dist/components/DataList/{DataListValue.jsx → DataListValue.js} +3 -4
  56. package/dist/components/DataList/{index.jsx → index.js} +14 -6
  57. package/dist/components/Dialog/{DialogAction.jsx → DialogAction.js} +14 -4
  58. package/dist/components/Dialog/{DialogCancel.jsx → DialogCancel.js} +14 -4
  59. package/dist/components/Dialog/{DialogContent.jsx → DialogContent.js} +3 -4
  60. package/dist/components/Dialog/{DialogDescription.jsx → DialogDescription.js} +14 -4
  61. package/dist/components/Dialog/{DialogSlot.jsx → DialogSlot.js} +14 -4
  62. package/dist/components/Dialog/{DialogTitle.jsx → DialogTitle.js} +14 -4
  63. package/dist/components/Dialog/{DialogTrigger.jsx → DialogTrigger.js} +14 -4
  64. package/dist/components/Dialog/{index.jsx → index.js} +14 -4
  65. package/dist/components/DoughnutChart/index.d.ts +1 -2
  66. package/dist/components/DoughnutChart/{index.jsx → index.js} +2 -2
  67. package/dist/components/DropdownMenu/{DropdonMenuRadioGroup.jsx → DropdonMenuRadioGroup.js} +14 -6
  68. package/dist/components/DropdownMenu/{DropdonMenuSubContent.jsx → DropdonMenuSubContent.js} +7 -10
  69. package/dist/components/DropdownMenu/{DropdownMenuCheckboxItem.jsx → DropdownMenuCheckboxItem.js} +14 -7
  70. package/dist/components/DropdownMenu/{DropdownMenuContent.jsx → DropdownMenuContent.js} +3 -6
  71. package/dist/components/DropdownMenu/{DropdownMenuItem.jsx → DropdownMenuItem.js} +3 -5
  72. package/dist/components/DropdownMenu/{DropdownMenuItemIndicator.jsx → DropdownMenuItemIndicator.js} +3 -4
  73. package/dist/components/DropdownMenu/{DropdownMenuLable.jsx → DropdownMenuLable.js} +3 -4
  74. package/dist/components/DropdownMenu/{DropdownMenuRadioItem.jsx → DropdownMenuRadioItem.js} +14 -7
  75. package/dist/components/DropdownMenu/{DropdownMenuSeparator.jsx → DropdownMenuSeparator.js} +14 -2
  76. package/dist/components/DropdownMenu/{DropdownMenuSub.jsx → DropdownMenuSub.js} +14 -2
  77. package/dist/components/DropdownMenu/{DropdownMenuSubTrigger.jsx → DropdownMenuSubTrigger.js} +14 -7
  78. package/dist/components/DropdownMenu/{DropdownMenuTrigger.jsx → DropdownMenuTrigger.js} +14 -4
  79. package/dist/components/DropdownMenu/{index.jsx → index.js} +14 -2
  80. package/dist/components/HoverCard/{HoverCardContent.jsx → HoverCardContent.js} +3 -4
  81. package/dist/components/HoverCard/{HoverCardTrigger.jsx → HoverCardTrigger.js} +14 -4
  82. package/dist/components/HoverCard/{index.jsx → index.js} +14 -4
  83. package/dist/components/IconButton/{index.jsx → index.js} +2 -3
  84. package/dist/components/Input/Input.stories.d.ts +4 -4
  85. package/dist/components/Input/{Input.stories.jsx → Input.stories.js} +15 -9
  86. package/dist/components/Input/index.d.ts +1 -1
  87. package/dist/components/Input/{index.jsx → index.js} +3 -3
  88. package/dist/components/Inset/{index.jsx → index.js} +3 -6
  89. package/dist/components/Label/{index.jsx → index.js} +2 -3
  90. package/dist/components/Menubar/{MenubarCheckboxItem.jsx → MenubarCheckboxItem.js} +14 -7
  91. package/dist/components/Menubar/{MenubarContent.jsx → MenubarContent.js} +7 -10
  92. package/dist/components/Menubar/{MenubarItem.jsx → MenubarItem.js} +3 -5
  93. package/dist/components/Menubar/{MenubarItemIndicator.jsx → MenubarItemIndicator.js} +3 -4
  94. package/dist/components/Menubar/{MenubarMenu.jsx → MenubarMenu.js} +14 -2
  95. package/dist/components/Menubar/{MenubarRadioGroup.jsx → MenubarRadioGroup.js} +14 -6
  96. package/dist/components/Menubar/{MenubarRadioItem.jsx → MenubarRadioItem.js} +14 -7
  97. package/dist/components/Menubar/{MenubarSeparator.jsx → MenubarSeparator.js} +14 -4
  98. package/dist/components/Menubar/{MenubarSub.jsx → MenubarSub.js} +14 -2
  99. package/dist/components/Menubar/{MenubarSubContent.jsx → MenubarSubContent.js} +4 -5
  100. package/dist/components/Menubar/{MenubarSubTrigger.jsx → MenubarSubTrigger.js} +14 -7
  101. package/dist/components/Menubar/{MenubarTrigger.jsx → MenubarTrigger.js} +3 -4
  102. package/dist/components/Menubar/{index.jsx → index.js} +3 -6
  103. package/dist/components/NavigationMenu/{NavigationMenuContent.jsx → NavigationMenuContent.js} +3 -4
  104. package/dist/components/NavigationMenu/NavigationMenuIndicator.js +31 -0
  105. package/dist/components/NavigationMenu/{NavigationMenuItem.jsx → NavigationMenuItem.js} +14 -4
  106. package/dist/components/NavigationMenu/{NavigationMenuLink.jsx → NavigationMenuLink.js} +3 -4
  107. package/dist/components/NavigationMenu/{NavigationMenuList.jsx → NavigationMenuList.js} +3 -5
  108. package/dist/components/NavigationMenu/{NavigationMenuTrigger.jsx → NavigationMenuTrigger.js} +3 -5
  109. package/dist/components/NavigationMenu/{NavigationMenuViewport.jsx → NavigationMenuViewport.js} +3 -4
  110. package/dist/components/NavigationMenu/{index.jsx → index.js} +14 -6
  111. package/dist/components/PieChart/index.d.ts +1 -2
  112. package/dist/components/PieChart/{index.jsx → index.js} +2 -2
  113. package/dist/components/Popover/{PopoverClose.jsx → PopoverClose.js} +14 -4
  114. package/dist/components/Popover/{PopoverContent.jsx → PopoverContent.js} +3 -4
  115. package/dist/components/Popover/{PopoverTrigger.jsx → PopoverTrigger.js} +14 -4
  116. package/dist/components/Popover/{index.jsx → index.js} +14 -4
  117. package/dist/components/Progress/{index.jsx → index.js} +3 -4
  118. package/dist/components/RadarChart/index.d.ts +1 -2
  119. package/dist/components/RadarChart/{index.jsx → index.js} +2 -2
  120. package/dist/components/Radio/{index.jsx → index.js} +13 -8
  121. package/dist/components/RadioCards/{RadioCardsItem.jsx → RadioCardsItem.js} +14 -4
  122. package/dist/components/RadioCards/{index.jsx → index.js} +3 -6
  123. package/dist/components/RadioGroup/{RadioGroupItem.jsx → RadioGroupItem.js} +14 -4
  124. package/dist/components/RadioGroup/{index.jsx → index.js} +14 -6
  125. package/dist/components/ScrollArea/{index.jsx → index.js} +14 -6
  126. package/dist/components/SegmentedControl/{SegmentedControlItem.jsx → SegmentedControlItem.js} +14 -4
  127. package/dist/components/SegmentedControl/{index.jsx → index.js} +2 -5
  128. package/dist/components/Select/{index.jsx → index.js} +8 -23
  129. package/dist/components/Separator/{index.jsx → index.js} +2 -5
  130. package/dist/components/Skeleton/{index.jsx → index.js} +2 -5
  131. package/dist/components/Slider/{index.jsx → index.js} +2 -3
  132. package/dist/components/Spinner/{index.jsx → index.js} +2 -5
  133. package/dist/components/TabNav/{index.jsx → index.js} +14 -8
  134. package/dist/components/Table/{index.jsx → index.js} +8 -23
  135. package/dist/components/Tabs/{index.jsx → index.js} +5 -14
  136. package/dist/components/TextArea/{index.jsx → index.js} +2 -3
  137. package/dist/components/TextField/{index.jsx → index.js} +3 -8
  138. package/dist/components/Toast/{ToastActionButton.jsx → ToastActionButton.js} +3 -4
  139. package/dist/components/Toast/{ToastDescription.jsx → ToastDescription.js} +14 -6
  140. package/dist/components/Toast/{ToastTitle.jsx → ToastTitle.js} +14 -4
  141. package/dist/components/Toast/{index.jsx → index.js} +3 -9
  142. package/dist/components/Toggle/{ToggleWithText.jsx → ToggleWithText.js} +4 -6
  143. package/dist/components/Toggle/{index.jsx → index.js} +3 -4
  144. package/dist/components/ToggleGroup/{index.jsx → index.js} +3 -6
  145. package/dist/components/ToggleGroup/{toggleGroupItem.jsx → toggleGroupItem.js} +14 -4
  146. package/dist/components/ToggleSwitch/{index.jsx → index.js} +2 -6
  147. package/dist/components/Tooltip/index.d.ts +1 -1
  148. package/dist/components/Tooltip/{index.jsx → index.js} +2 -11
  149. package/dist/index.d.ts +2 -0
  150. package/dist/index.js +2 -3
  151. package/dist/stories/Welcome.d.ts +1 -2
  152. package/dist/stories/Welcome.js +30 -0
  153. package/dist/stories/accordion/Accordion.stories.d.ts +1 -1
  154. package/dist/stories/accordion/{Accordion.stories.jsx → Accordion.stories.js} +2 -20
  155. package/dist/stories/alert-dialog/AlertDialog.stories.d.ts +1 -1
  156. package/dist/stories/alert-dialog/{AlertDialog.stories.jsx → AlertDialog.stories.js} +2 -15
  157. package/dist/stories/aspect-ratio/AspectRatio.stories.d.ts +3 -3
  158. package/dist/stories/aspect-ratio/AspectRatio.stories.js +78 -0
  159. package/dist/stories/avatar/Avatar.stories.d.ts +5 -5
  160. package/dist/stories/avatar/{Avatar.stories.jsx → Avatar.stories.js} +6 -17
  161. package/dist/stories/badge/Badge.stories.d.ts +6 -6
  162. package/dist/stories/badge/{Badge.stories.jsx → Badge.stories.js} +7 -51
  163. package/dist/stories/bubble-chart/BubbleChart.stories.d.ts +4 -5
  164. package/dist/stories/bubble-chart/{BubbleChart.stories.jsx → BubbleChart.stories.js} +4 -12
  165. package/dist/stories/button/Button.stories.d.ts +7 -7
  166. package/dist/stories/button/{Button.stories.jsx → Button.stories.js} +8 -41
  167. package/dist/stories/button/IconButton.stories.d.ts +4 -4
  168. package/dist/stories/button/{IconButton.stories.jsx → IconButton.stories.js} +5 -18
  169. package/dist/stories/callout/Callout.stories.d.ts +7 -7
  170. package/dist/stories/callout/Callout.stories.js +104 -0
  171. package/dist/stories/card/Card.stories.d.ts +5 -5
  172. package/dist/stories/card/{Card.stories.jsx → Card.stories.js} +6 -56
  173. package/dist/stories/checkbox/Checkbox.stories.d.ts +6 -6
  174. package/dist/stories/checkbox/{Checkbox.stories.jsx → Checkbox.stories.js} +7 -63
  175. package/dist/stories/checkbox/CheckboxCard.stories.d.ts +5 -5
  176. package/dist/stories/checkbox/{CheckboxCard.stories.jsx → CheckboxCard.stories.js} +6 -41
  177. package/dist/stories/checkbox/CheckboxGroup.stories.d.ts +3 -3
  178. package/dist/stories/checkbox/{CheckboxGroup.stories.jsx → CheckboxGroup.stories.js} +4 -76
  179. package/dist/stories/context-menu/ContextMenu.stories.d.ts +4 -4
  180. package/dist/stories/context-menu/{ContextMenu.stories.jsx → ContextMenu.stories.js} +5 -74
  181. package/dist/stories/data-list/DataList.stories.d.ts +4 -4
  182. package/dist/stories/data-list/DataList.stories.js +87 -0
  183. package/dist/stories/dialog/Dialog.stories.d.ts +1 -1
  184. package/dist/stories/dialog/{Dialog.stories.jsx → Dialog.stories.js} +2 -25
  185. package/dist/stories/doughnut-chart/DoughnutChart.stories.d.ts +4 -5
  186. package/dist/stories/doughnut-chart/{DoughnutChart.stories.jsx → DoughnutChart.stories.js} +4 -12
  187. package/dist/stories/dropdown-menu/DropdownMenu.stories.d.ts +4 -4
  188. package/dist/stories/dropdown-menu/DropdownMenu.stories.js +75 -0
  189. package/dist/stories/header/Header.stories.d.ts +6 -6
  190. package/dist/stories/header/{Header.stories.jsx → Header.stories.js} +7 -26
  191. package/dist/stories/hover-card/HoverCard.stories.d.ts +2 -2
  192. package/dist/stories/hover-card/{HoverCard.stories.jsx → HoverCard.stories.js} +3 -30
  193. package/dist/stories/inset/Inset.stories.d.ts +2 -2
  194. package/dist/stories/inset/{Inset.stories.jsx → Inset.stories.js} +12 -27
  195. package/dist/stories/label/Label.stories.d.ts +4 -4
  196. package/dist/stories/label/{Label.stories.jsx → Label.stories.js} +5 -26
  197. package/dist/stories/menubar/Menubar.stories.d.ts +1 -1
  198. package/dist/stories/menubar/{Menubar.stories.jsx → Menubar.stories.js} +8 -45
  199. package/dist/stories/navigation-menu/NavigationMenu.stories.d.ts +13 -13
  200. package/dist/stories/navigation-menu/{NavigationMenu.stories.jsx → NavigationMenu.stories.js} +3 -68
  201. package/dist/stories/pie-chart/PieChart.stories.d.ts +5 -6
  202. package/dist/stories/pie-chart/{PieChart.stories.jsx → PieChart.stories.js} +13 -32
  203. package/dist/stories/popover/Popover.stories.d.ts +2 -2
  204. package/dist/stories/popover/{Popover.stories.jsx → Popover.stories.js} +9 -42
  205. package/dist/stories/progress/Progress.stories.d.ts +4 -4
  206. package/dist/stories/progress/{Progress.stories.jsx → Progress.stories.js} +6 -11
  207. package/dist/stories/radar-chart/RadarChart.stories.d.ts +5 -6
  208. package/dist/stories/radar-chart/{RadarChart.stories.jsx → RadarChart.stories.js} +5 -4
  209. package/dist/stories/radio/Radio.stories.d.ts +3 -3
  210. package/dist/stories/radio/{Radio.stories.jsx → Radio.stories.js} +4 -14
  211. package/dist/stories/radio/RadioCards.stories.d.ts +4 -4
  212. package/dist/stories/radio/{RadioCards.stories.jsx → RadioCards.stories.js} +5 -64
  213. package/dist/stories/radio/RadioGroup.stories.d.ts +4 -4
  214. package/dist/stories/radio/{RadioGroup.stories.jsx → RadioGroup.stories.js} +5 -59
  215. package/dist/stories/scroll-area/ScrollArea.stories.d.ts +2 -2
  216. package/dist/stories/scroll-area/ScrollArea.stories.js +63 -0
  217. package/dist/stories/segmented-control/SegmentedControl.stories.d.ts +4 -4
  218. package/dist/stories/segmented-control/{SegmentedControl.stories.jsx → SegmentedControl.stories.js} +5 -26
  219. package/dist/stories/select/Select.stories.d.ts +5 -5
  220. package/dist/stories/select/{Select.stories.jsx → Select.stories.js} +6 -67
  221. package/dist/stories/separator/Separator.stories.d.ts +4 -4
  222. package/dist/stories/separator/{Separator.stories.jsx → Separator.stories.js} +5 -29
  223. package/dist/stories/skeleton/Skeleton.stories.d.ts +5 -5
  224. package/dist/stories/skeleton/{Skeleton.stories.jsx → Skeleton.stories.js} +6 -33
  225. package/dist/stories/slider/Slider.stories.d.ts +4 -4
  226. package/dist/stories/slider/{Slider.stories.jsx → Slider.stories.js} +5 -16
  227. package/dist/stories/spinner/Spinner.stories.d.ts +5 -5
  228. package/dist/stories/spinner/{Spinner.stories.jsx → Spinner.stories.js} +6 -31
  229. package/dist/stories/switch/Switch.stories.d.ts +4 -4
  230. package/dist/stories/switch/{Switch.stories.jsx → Switch.stories.js} +5 -16
  231. package/dist/stories/tab-nav/TabNav.stories.d.ts +1 -1
  232. package/dist/stories/tab-nav/{TabNav.stories.jsx → TabNav.stories.js} +2 -11
  233. package/dist/stories/table/Table.stories.d.ts +1 -1
  234. package/dist/stories/table/{Table.stories.jsx → Table.stories.js} +2 -29
  235. package/dist/stories/tabs/Tabs.stories.d.ts +1 -1
  236. package/dist/stories/tabs/{Tabs.stories.jsx → Tabs.stories.js} +2 -19
  237. package/dist/stories/text/Text.stories.d.ts +5 -5
  238. package/dist/stories/text/{Text.stories.jsx → Text.stories.js} +6 -21
  239. package/dist/stories/textArea/TextArea.stories.d.ts +5 -5
  240. package/dist/stories/textArea/{TextArea.stories.jsx → TextArea.stories.js} +6 -22
  241. package/dist/stories/textfield/TextField.stories.d.ts +5 -5
  242. package/dist/stories/textfield/{TextField.stories.jsx → TextField.stories.js} +6 -38
  243. package/dist/stories/toast/Toast.stories.d.ts +3 -3
  244. package/dist/stories/toast/{Toast.stories.jsx → Toast.stories.js} +4 -22
  245. package/dist/stories/toggle/Toggle.stories.d.ts +5 -5
  246. package/dist/stories/toggle/{Toggle.stories.jsx → Toggle.stories.js} +6 -23
  247. package/dist/stories/toggle/ToggleGroup.stories.d.ts +3 -3
  248. package/dist/stories/toggle/{ToggleGroup.stories.jsx → ToggleGroup.stories.js} +6 -39
  249. package/dist/stories/tooltip/Tooltip.stories.d.ts +3 -3
  250. package/dist/stories/tooltip/{Tooltip.stories.jsx → Tooltip.stories.js} +4 -17
  251. package/dist/tsconfig.tsbuildinfo +1 -1
  252. package/package.json +4 -3
  253. package/dist/app/template/badgeTemplate.jsx +0 -82
  254. package/dist/app/template/buttonTemplate.jsx +0 -82
  255. package/dist/app/template/colorPicker.jsx +0 -19
  256. package/dist/app/template/textTemplate.jsx +0 -72
  257. package/dist/app/template/theme.jsx +0 -44
  258. package/dist/components/NavigationMenu/NavigationMenuIndicator.jsx +0 -22
  259. package/dist/stories/Welcome.jsx +0 -48
  260. package/dist/stories/aspect-ratio/AspectRatio.stories.jsx +0 -106
  261. package/dist/stories/callout/Callout.stories.jsx +0 -205
  262. package/dist/stories/data-list/DataList.stories.jsx +0 -185
  263. package/dist/stories/dropdown-menu/DropdownMenu.stories.jsx +0 -170
  264. package/dist/stories/scroll-area/ScrollArea.stories.jsx +0 -123
@@ -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 { commonArgTypes, sizeOptions } from '../../constants';
24
25
  import { RadioGroup, RadioGroupItem } from '../../components/RadioGroup';
25
26
  var meta = {
@@ -71,72 +72,17 @@ var meta = {
71
72
  export default meta;
72
73
  export var Default = function (_a) {
73
74
  var args = __rest(_a, []);
74
- return (<RadioGroup defaultValue={'1'} name="example" {...args}>
75
- <RadioGroupItem value="1" {...args}>
76
- Default
77
- </RadioGroupItem>
78
- <RadioGroupItem value="2" {...args}>
79
- Comfortable
80
- </RadioGroupItem>
81
- <RadioGroupItem value="3" {...args}>
82
- Compact
83
- </RadioGroupItem>
84
- </RadioGroup>);
75
+ return (_jsxs(RadioGroup, __assign({ defaultValue: '1', name: "example" }, args, { children: [_jsx(RadioGroupItem, __assign({ value: "1" }, args, { children: "Default" })), _jsx(RadioGroupItem, __assign({ value: "2" }, args, { children: "Comfortable" })), _jsx(RadioGroupItem, __assign({ value: "3" }, args, { children: "Compact" }))] })));
85
76
  };
86
77
  export var Size = function (_a) {
87
78
  var args = __rest(_a, []);
88
- return (<div className="flex items-center space-x-4">
89
- {['small', 'medium', 'large'].map(function (size) { return (<RadioGroup key={size} defaultValue={'1'} name={size} {...args} size={size}>
90
- <RadioGroupItem value="1" {...args}>
91
- Default
92
- </RadioGroupItem>
93
- <RadioGroupItem value="2" {...args}>
94
- Comfortable
95
- </RadioGroupItem>
96
- <RadioGroupItem value="3" {...args}>
97
- Compact
98
- </RadioGroupItem>
99
- </RadioGroup>); })}
100
- </div>);
79
+ return (_jsx("div", { className: "flex items-center space-x-4", children: ['small', 'medium', 'large'].map(function (size) { return (_jsxs(RadioGroup, __assign({ defaultValue: '1', name: size }, args, { size: size, children: [_jsx(RadioGroupItem, __assign({ value: "1" }, args, { children: "Default" })), _jsx(RadioGroupItem, __assign({ value: "2" }, args, { children: "Comfortable" })), _jsx(RadioGroupItem, __assign({ value: "3" }, args, { children: "Compact" }))] }), size)); }) }));
101
80
  };
102
81
  export var Appearance = function (_a) {
103
82
  var args = __rest(_a, []);
104
- return (<div className="flex items-center space-x-4">
105
- {['classic', 'soft', 'surface'].map(function (appearance) { return (<RadioGroup key={appearance} defaultValue={'1'} name={appearance} {...args} appearance={appearance}>
106
- <RadioGroupItem value="1" {...args}>
107
- Default
108
- </RadioGroupItem>
109
- <RadioGroupItem value="2" {...args}>
110
- Comfortable
111
- </RadioGroupItem>
112
- <RadioGroupItem value="3" {...args}>
113
- Compact
114
- </RadioGroupItem>
115
- </RadioGroup>); })}
116
- </div>);
83
+ return (_jsx("div", { className: "flex items-center space-x-4", children: ['classic', 'soft', 'surface'].map(function (appearance) { return (_jsxs(RadioGroup, __assign({ defaultValue: '1', name: appearance }, args, { appearance: appearance, children: [_jsx(RadioGroupItem, __assign({ value: "1" }, args, { children: "Default" })), _jsx(RadioGroupItem, __assign({ value: "2" }, args, { children: "Comfortable" })), _jsx(RadioGroupItem, __assign({ value: "3" }, args, { children: "Compact" }))] }), appearance)); }) }));
117
84
  };
118
85
  export var Disabled = function (_a) {
119
86
  var args = __rest(_a, []);
120
- return (<div className="flex items-center space-x-4">
121
- <div>
122
- <RadioGroup defaultValue={'On'} {...args}>
123
- <RadioGroupItem value="Off" {...args}>
124
- Off
125
- </RadioGroupItem>
126
- <RadioGroupItem value="On" {...args}>
127
- On
128
- </RadioGroupItem>
129
- </RadioGroup>
130
- </div>
131
- <div>
132
- <RadioGroup defaultValue={'On'} {...args}>
133
- <RadioGroupItem value="Off" {...args} disabled>
134
- Off
135
- </RadioGroupItem>
136
- <RadioGroupItem value="On" {...args} disabled>
137
- On
138
- </RadioGroupItem>
139
- </RadioGroup>
140
- </div>
141
- </div>);
87
+ return (_jsxs("div", { className: "flex items-center space-x-4", children: [_jsx("div", { children: _jsxs(RadioGroup, __assign({ defaultValue: 'On' }, args, { children: [_jsx(RadioGroupItem, __assign({ value: "Off" }, args, { children: "Off" })), _jsx(RadioGroupItem, __assign({ value: "On" }, args, { children: "On" }))] })) }), _jsx("div", { children: _jsxs(RadioGroup, __assign({ defaultValue: 'On' }, args, { children: [_jsx(RadioGroupItem, __assign({ value: "Off" }, args, { disabled: true, children: "Off" })), _jsx(RadioGroupItem, __assign({ value: "On" }, args, { disabled: true, children: "On" }))] })) })] }));
142
88
  };
@@ -53,7 +53,7 @@ declare const meta: {
53
53
  export default meta;
54
54
  export declare const Default: ({ ...args }: {
55
55
  [x: string]: any;
56
- }) => import("react").JSX.Element;
56
+ }) => import("react/jsx-runtime").JSX.Element;
57
57
  export declare const Type: ({ ...args }: {
58
58
  [x: string]: any;
59
- }) => import("react").JSX.Element;
59
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,63 @@
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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
+ import { commonArgTypes, sizeOptions } from '../../constants';
25
+ import { ScrollArea } from '../../components/ScrollArea';
26
+ import { Header } from 'Typography/Header';
27
+ import { Text } from 'Typography/Text';
28
+ var meta = {
29
+ title: 'Component/ScrollArea',
30
+ component: ScrollArea,
31
+ parameters: {
32
+ layout: 'centered',
33
+ themes: {
34
+ themeOverride: 'dark',
35
+ },
36
+ docs: {
37
+ description: {
38
+ component: '스크롤 가능 영역',
39
+ },
40
+ },
41
+ },
42
+ tags: ['autodocs'],
43
+ argTypes: {
44
+ radius: __assign(__assign({}, commonArgTypes.radius), { description: 'scrollArea 둥글기' }),
45
+ size: __assign(__assign({}, commonArgTypes.size), { table: {
46
+ category: 'Props',
47
+ type: {
48
+ summary: sizeOptions
49
+ .filter(function (value) { return value != 'x-small' && value != 'x-large'; })
50
+ .join(' | '),
51
+ },
52
+ }, options: sizeOptions.filter(function (value) { return value != 'x-small' && value != 'x-large'; }), description: 'scrollArea 크기' }),
53
+ },
54
+ };
55
+ export default meta;
56
+ export var Default = function (_a) {
57
+ var args = __rest(_a, []);
58
+ return (_jsx(ScrollArea, __assign({ type: "always", scrollbars: "vertical", className: "h-[180px]" }, args, { children: _jsxs("div", { className: "p-2 pr-8", children: [_jsx(Header, { size: '4', mb: '2', trim: 'start', children: "Principles of the typographic craft" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Text, { as: "p", children: "Three fundamental aspects of typography are legibility, readability, and aesthetics. Although in a non-technical sense \u201Clegible\u201D and \u201Creadable\u201D are often used synonymously, typographically they are separate but related concepts." }), _jsx(Text, { as: "p", children: "Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as \u201Cthe quality of being decipherable and recognisable\u201D. For instance, if a \u201Cb\u201D and an \u201Ch\u201D, or a \u201C3\u201D and an \u201C8\u201D, are difficult to distinguish at small sizes, this is a problem of legibility." }), _jsx(Text, { as: "p", children: "Typographers are concerned with legibility insofar as it is their job to select the correct font to use. Brush Script is an example of a font containing many characters that might be difficult to distinguish. The selection of cases influences the legibility of typography because using only uppercase letters (all-caps) reduces legibility." })] })] }) })));
59
+ };
60
+ export var Type = function (_a) {
61
+ var args = __rest(_a, []);
62
+ return (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(ScrollArea, __assign({ type: "always", scrollbars: "vertical", className: "h-[150px]" }, args, { children: _jsxs("div", { className: "flex flex-col p-2 pr-8 gap-4", children: [_jsx(Text, { size: "2", children: "Three fundamental aspects of typography are legibility, readability, and aesthetics. Although in a non-technical sense legible and readable are often used synonymously, typographically they are separate but related concepts." }), _jsx(Text, { size: "2", children: "Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as the quality of being decipherable and recognisable. For instance, if a b and an h, or a 3 and an 8, are difficult to distinguish at small sizes, this is a problem of legibility." })] }) })), _jsx(ScrollArea, __assign({ type: "always", scrollbars: "horizontal", className: "h-[150px]" }, args, { children: _jsxs("div", { className: "gap-4 p-2 w-[700px]", children: [_jsx(Text, { size: "2", children: "Three fundamental aspects of typography are legibility, readability, and aesthetics. Although in a non-technical sense legible and readable are often used synonymously, typographically they are separate but related concepts." }), _jsx(Text, { size: "2", children: "Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as the quality of being decipherable and recognisable. For instance, if a b and an h, or a 3 and an 8, are difficult to distinguish at small sizes, this is a problem of legibility." })] }) }))] }));
63
+ };
@@ -85,13 +85,13 @@ declare const meta: {
85
85
  export default meta;
86
86
  export declare const Default: ({ ...args }: {
87
87
  [x: string]: any;
88
- }) => import("react").JSX.Element;
88
+ }) => import("react/jsx-runtime").JSX.Element;
89
89
  export declare const Size: ({ ...args }: {
90
90
  [x: string]: any;
91
- }) => import("react").JSX.Element;
91
+ }) => import("react/jsx-runtime").JSX.Element;
92
92
  export declare const Radius: ({ ...args }: {
93
93
  [x: string]: any;
94
- }) => import("react").JSX.Element;
94
+ }) => import("react/jsx-runtime").JSX.Element;
95
95
  export declare const Variant: ({ ...args }: {
96
96
  [x: string]: any;
97
- }) => import("react").JSX.Element;
97
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -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 { SegmentedControl, SegmentedControlItem } from '../../components/SegmentedControl';
24
25
  import { commonArgTypes, radiusOptions, sizeOptions } from '../../constants';
25
26
  var meta = {
@@ -63,39 +64,17 @@ var meta = {
63
64
  export default meta;
64
65
  export var Default = function (_a) {
65
66
  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>);
67
+ return (_jsxs(SegmentedControl, __assign({}, args, { defaultValue: 'inbox', children: [_jsx(SegmentedControlItem, { value: 'inbox', children: "Inbox" }), _jsx(SegmentedControlItem, { value: 'drafts', children: "Drafts" }), _jsx(SegmentedControlItem, { value: 'sent', children: "Sent" })] })));
71
68
  };
72
69
  export var Size = function (_a) {
73
70
  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>);
71
+ return (_jsx("div", { className: "flex flex-col space-y-3", children: ['small', 'medium', 'large'].map(function (size) { return (_jsxs(SegmentedControl, __assign({ defaultValue: 'inbox' }, args, { size: size, children: [_jsx(SegmentedControlItem, { value: 'inbox', children: "Inbox" }), _jsx(SegmentedControlItem, { value: 'drafts', children: "Drafts" }), _jsx(SegmentedControlItem, { value: 'sent', children: "Sent" })] }), size)); }) }));
81
72
  };
82
73
  export var Radius = function (_a) {
83
74
  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>);
75
+ return (_jsx("div", { className: "flex flex-col space-y-3", children: radiusOptions.map(function (radius) { return (_jsxs(SegmentedControl, __assign({ defaultValue: 'inbox' }, args, { radius: radius, children: [_jsx(SegmentedControlItem, { value: 'inbox', children: "Inbox" }), _jsx(SegmentedControlItem, { value: 'drafts', children: "Drafts" }), _jsx(SegmentedControlItem, { value: 'sent', children: "Sent" })] }), radius)); }) }));
91
76
  };
92
77
  export var Variant = function (_a) {
93
78
  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>);
79
+ return (_jsx("div", { className: "flex flex-col space-y-3", children: ['surface', 'classic'].map(function (appearance) { return (_jsxs(SegmentedControl, __assign({ defaultValue: 'inbox' }, args, { appearance: appearance, children: [_jsx(SegmentedControlItem, { value: 'inbox', children: "Inbox" }), _jsx(SegmentedControlItem, { value: 'drafts', children: "Drafts" }), _jsx(SegmentedControlItem, { value: 'sent', children: "Sent" })] }), appearance)); }) }));
101
80
  };
@@ -101,16 +101,16 @@ declare const meta: {
101
101
  export default meta;
102
102
  export declare const Default: ({ ...args }: {
103
103
  [x: string]: any;
104
- }) => import("react").JSX.Element;
104
+ }) => import("react/jsx-runtime").JSX.Element;
105
105
  export declare const Size: ({ ...args }: {
106
106
  [x: string]: any;
107
- }) => import("react").JSX.Element;
107
+ }) => import("react/jsx-runtime").JSX.Element;
108
108
  export declare const Appearance: ({ ...args }: {
109
109
  [x: string]: any;
110
- }) => import("react").JSX.Element;
110
+ }) => import("react/jsx-runtime").JSX.Element;
111
111
  export declare const Radius: ({ ...args }: {
112
112
  [x: string]: any;
113
- }) => import("react").JSX.Element;
113
+ }) => import("react/jsx-runtime").JSX.Element;
114
114
  export declare const WithIcon: ({ ...args }: {
115
115
  [x: string]: any;
116
- }) => import("react").JSX.Element;
116
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -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 { Select, SelectContent, SelectItem, SelectTrigger } from '../../components/Select/index';
24
25
  import { commonArgTypes, radiusOptions } from '../../constants';
25
26
  import { MoonIcon, SunIcon } from '@radix-ui/react-icons';
@@ -67,83 +68,21 @@ var meta = {
67
68
  export default meta;
68
69
  export var Default = function (_a) {
69
70
  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>);
71
+ return (_jsxs(Select, __assign({}, args, { children: [_jsx(SelectTrigger, __assign({}, args, { placeholder: "Select..." })), _jsxs(SelectContent, __assign({}, args, { children: [_jsx(SelectItem, __assign({ value: "apple" }, args, { children: "Apple" })), _jsx(SelectItem, __assign({ value: "orange" }, args, { children: "Orange" }))] }))] })));
81
72
  };
82
73
  export var Size = function (_a) {
83
74
  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>);
75
+ return (_jsx("div", { className: "flex gap-3", children: ['small', 'medium', 'large'].map(function (size) { return (_jsxs(Select, __assign({ size: size }, args, { children: [_jsx(SelectTrigger, __assign({}, args, { placeholder: "Select..." })), _jsxs(SelectContent, __assign({}, args, { children: [_jsx(SelectItem, __assign({ value: "apple" }, args, { children: "Apple" })), _jsx(SelectItem, __assign({ value: "orange" }, args, { children: "Orange" }))] }))] }), size)); }) }));
97
76
  };
98
77
  export var Appearance = function (_a) {
99
78
  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>);
79
+ return (_jsx("div", { className: "flex gap-3", children: ['classic', 'surface', 'soft', 'ghost'].map(function (appearance) { return (_jsxs(Select, __assign({}, args, { children: [_jsx(SelectTrigger, __assign({ appearance: appearance }, args, { placeholder: "Select..." })), _jsxs(SelectContent, __assign({}, args, { children: [_jsx(SelectItem, __assign({ value: "apple" }, args, { children: "Apple" })), _jsx(SelectItem, __assign({ value: "orange" }, args, { children: "Orange" }))] }))] }), appearance)); }) }));
113
80
  };
114
81
  export var Radius = function (_a) {
115
82
  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>);
83
+ return (_jsx("div", { className: "flex gap-3", children: radiusOptions.map(function (radius) { return (_jsxs(Select, __assign({}, args, { children: [_jsx(SelectTrigger, __assign({ radius: radius }, args, { placeholder: "Select..." })), _jsxs(SelectContent, __assign({}, args, { children: [_jsx(SelectItem, __assign({ value: "apple" }, args, { children: "Apple" })), _jsx(SelectItem, __assign({ value: "orange" }, args, { children: "Orange" }))] }))] }), radius)); }) }));
129
84
  };
130
85
  export var WithIcon = function (_a) {
131
86
  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>);
87
+ return (_jsxs(Select, __assign({ defaultValue: "dark" }, args, { children: [_jsx(SelectTrigger, __assign({}, args)), _jsxs(SelectContent, __assign({}, args, { children: [_jsx(SelectItem, __assign({ value: "dark" }, args, { children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx(MoonIcon, {}), _jsx("label", { children: "Dark" })] }) })), _jsx(SelectItem, __assign({ value: "light" }, args, { children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx(SunIcon, {}), _jsx("label", { children: "Light" })] }) }))] }))] })));
149
88
  };
@@ -81,13 +81,13 @@ declare const meta: {
81
81
  export default meta;
82
82
  export declare const Default: ({ ...args }: {
83
83
  [x: string]: any;
84
- }) => import("react").JSX.Element;
84
+ }) => import("react/jsx-runtime").JSX.Element;
85
85
  export declare const Orientation: ({ ...args }: {
86
86
  [x: string]: any;
87
- }) => import("react").JSX.Element;
87
+ }) => import("react/jsx-runtime").JSX.Element;
88
88
  export declare const HorizontalSize: ({ ...args }: {
89
89
  [x: string]: any;
90
- }) => import("react").JSX.Element;
90
+ }) => import("react/jsx-runtime").JSX.Element;
91
91
  export declare const VerticalSize: ({ ...args }: {
92
92
  [x: string]: any;
93
- }) => import("react").JSX.Element;
93
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -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 { Separator } from '../../components/Separator/index';
24
25
  import { commonArgTypes } from '../../constants';
25
26
  var meta = {
@@ -65,42 +66,17 @@ var meta = {
65
66
  export default meta;
66
67
  export var Default = function (_a) {
67
68
  var args = __rest(_a, []);
68
- return (<div className="text-slate-12 dark:text-slate-1 w-full max-w-[300px] mx-[15px]">
69
- Tools for building high-quality, accessible UI.
70
- <Separator my="3" size="fill-large" {...args}/>
71
- <div className="flex gap-3 text-slate-12 dark:text-slate-1 ">
72
- Themes
73
- <Separator orientation="vertical" {...args}/>
74
- Primitives
75
- <Separator orientation="vertical" {...args}/>
76
- Icons
77
- <Separator orientation="vertical" {...args}/>
78
- Colors
79
- </div>
80
- </div>);
69
+ return (_jsxs("div", { className: "text-slate-12 dark:text-slate-1 w-full max-w-[300px] mx-[15px]", children: ["Tools for building high-quality, accessible UI.", _jsx(Separator, __assign({ my: "3", size: "fill-large" }, args)), _jsxs("div", { className: "flex gap-3 text-slate-12 dark:text-slate-1 ", children: ["Themes", _jsx(Separator, __assign({ orientation: "vertical" }, args)), "Primitives", _jsx(Separator, __assign({ orientation: "vertical" }, args)), "Icons", _jsx(Separator, __assign({ orientation: "vertical" }, args)), "Colors"] })] }));
81
70
  };
82
71
  export var Orientation = function (_a) {
83
72
  var args = __rest(_a, []);
84
- return (<div className="grid grid-cols-2 gap-2">
85
- <Separator orientation={'horizontal'} {...args}/>
86
- <Separator orientation={'vertical'} {...args}/>
87
- </div>);
73
+ return (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(Separator, __assign({ orientation: 'horizontal' }, args)), _jsx(Separator, __assign({ orientation: 'vertical' }, args))] }));
88
74
  };
89
75
  export var HorizontalSize = function (_a) {
90
76
  var args = __rest(_a, []);
91
- return (<div className="w-96 grid gap-4">
92
- <Separator orientation={'horizontal'} size={'small'} {...args}/>
93
- <Separator orientation={'horizontal'} size={'medium'} {...args}/>
94
- <Separator orientation={'horizontal'} size={'large'} {...args}/>
95
- <Separator orientation={'horizontal'} size={'fill-large'} {...args}/>
96
- </div>);
77
+ return (_jsxs("div", { className: "w-96 grid gap-4", children: [_jsx(Separator, __assign({ orientation: 'horizontal', size: 'small' }, args)), _jsx(Separator, __assign({ orientation: 'horizontal', size: 'medium' }, args)), _jsx(Separator, __assign({ orientation: 'horizontal', size: 'large' }, args)), _jsx(Separator, __assign({ orientation: 'horizontal', size: 'fill-large' }, args))] }));
97
78
  };
98
79
  export var VerticalSize = function (_a) {
99
80
  var args = __rest(_a, []);
100
- return (<div className="h-60 grid grid-cols-4 gap-4">
101
- <Separator orientation={'vertical'} size={'small'} {...args}/>
102
- <Separator orientation={'vertical'} size={'medium'} {...args}/>
103
- <Separator orientation={'vertical'} size={'large'} {...args}/>
104
- <Separator orientation={'vertical'} size={'fill-large'} {...args}/>
105
- </div>);
81
+ return (_jsxs("div", { className: "h-60 grid grid-cols-4 gap-4", children: [_jsx(Separator, __assign({ orientation: 'vertical', size: 'small' }, args)), _jsx(Separator, __assign({ orientation: 'vertical', size: 'medium' }, args)), _jsx(Separator, __assign({ orientation: 'vertical', size: 'large' }, args)), _jsx(Separator, __assign({ orientation: 'vertical', size: 'fill-large' }, args))] }));
106
82
  };
@@ -73,16 +73,16 @@ declare const meta: {
73
73
  export default meta;
74
74
  export declare const Default: ({ ...args }: {
75
75
  [x: string]: any;
76
- }) => import("react").JSX.Element;
76
+ }) => import("react/jsx-runtime").JSX.Element;
77
77
  export declare const Loading: ({ ...args }: {
78
78
  [x: string]: any;
79
- }) => import("react").JSX.Element;
79
+ }) => import("react/jsx-runtime").JSX.Element;
80
80
  export declare const WithChildren: ({ ...args }: {
81
81
  [x: string]: any;
82
- }) => import("react").JSX.Element;
82
+ }) => import("react/jsx-runtime").JSX.Element;
83
83
  export declare const Radius: ({ ...args }: {
84
84
  [x: string]: any;
85
- }) => import("react").JSX.Element;
85
+ }) => import("react/jsx-runtime").JSX.Element;
86
86
  export declare const Size: ({ ...args }: {
87
87
  [x: string]: any;
88
- }) => import("react").JSX.Element;
88
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -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 { Skeleton } from '../../components/Skeleton/index';
24
25
  import { commonArgTypes, radiusOptions } from '../../constants';
25
26
  import { ToggleSwitch } from '../../components/ToggleSwitch';
@@ -71,49 +72,21 @@ var meta = {
71
72
  export default meta;
72
73
  export var Default = function (_a) {
73
74
  var args = __rest(_a, []);
74
- return (<Skeleton {...args}>
75
- <div>Component</div>
76
- </Skeleton>);
75
+ return (_jsx(Skeleton, __assign({}, args, { children: _jsx("div", { children: "Component" }) })));
77
76
  };
78
77
  export var Loading = function (_a) {
79
78
  var args = __rest(_a, []);
80
- return (<div className="">
81
- <Skeleton loading={true} {...args}>
82
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur
83
- id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec
84
- magna.
85
- </Skeleton>
86
- <Skeleton loading={false} {...args}>
87
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur
88
- id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec
89
- magna.
90
- </Skeleton>
91
- </div>);
79
+ return (_jsxs("div", { className: "", children: [_jsx(Skeleton, __assign({ loading: true }, args, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec magna." })), _jsx(Skeleton, __assign({ loading: false }, args, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec magna." }))] }));
92
80
  };
93
81
  export var WithChildren = function (_a) {
94
82
  var args = __rest(_a, []);
95
- return (<div className="grid gap-4 grid-cols-2">
96
- <Skeleton loading={true}>
97
- <ToggleSwitch />
98
- </Skeleton>
99
- <Skeleton loading={false}>
100
- <ToggleSwitch />
101
- </Skeleton>
102
- </div>);
83
+ return (_jsxs("div", { className: "grid gap-4 grid-cols-2", children: [_jsx(Skeleton, { loading: true, children: _jsx(ToggleSwitch, {}) }), _jsx(Skeleton, { loading: false, children: _jsx(ToggleSwitch, {}) })] }));
103
84
  };
104
85
  export var Radius = function (_a) {
105
86
  var args = __rest(_a, []);
106
- return (<div className="grid gap-5">
107
- {radiusOptions.map(function (radius) { return (<div key={radius}>
108
- <Skeleton loading={true} radius={radius} {...args}>
109
- <div>Component</div>
110
- </Skeleton>
111
- </div>); })}
112
- </div>);
87
+ return (_jsx("div", { className: "grid gap-5", children: radiusOptions.map(function (radius) { return (_jsx("div", { children: _jsx(Skeleton, __assign({ loading: true, radius: radius }, args, { children: _jsx("div", { children: "Component" }) })) }, radius)); }) }));
113
88
  };
114
89
  export var Size = function (_a) {
115
90
  var args = __rest(_a, []);
116
- return (<div className="">
117
- <Skeleton loading={true} width="48px" height="48px" {...args}/>
118
- </div>);
91
+ return (_jsx("div", { className: "", children: _jsx(Skeleton, __assign({ loading: true, width: "48px", height: "48px" }, args)) }));
119
92
  };
@@ -102,13 +102,13 @@ declare const meta: {
102
102
  export default meta;
103
103
  export declare const Default: ({ ...args }: {
104
104
  [x: string]: any;
105
- }) => import("react").JSX.Element;
105
+ }) => import("react/jsx-runtime").JSX.Element;
106
106
  export declare const Size: ({ ...args }: {
107
107
  [x: string]: any;
108
- }) => import("react").JSX.Element;
108
+ }) => import("react/jsx-runtime").JSX.Element;
109
109
  export declare const Radius: ({ ...args }: {
110
110
  [x: string]: any;
111
- }) => import("react").JSX.Element;
111
+ }) => import("react/jsx-runtime").JSX.Element;
112
112
  export declare const Range: ({ ...args }: {
113
113
  [x: string]: any;
114
- }) => import("react").JSX.Element;
114
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -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 { Slider } from '../../components/Slider/index';
24
25
  import { commonArgTypes, radiusOptions } from '../../constants';
25
26
  var meta = {
@@ -66,29 +67,17 @@ var meta = {
66
67
  export default meta;
67
68
  export var Default = function (_a) {
68
69
  var args = __rest(_a, []);
69
- return (<div className="w-60">
70
- <Slider defaultValue={[50]} {...args}/>
71
- </div>);
70
+ return (_jsx("div", { className: "w-60", children: _jsx(Slider, __assign({ defaultValue: [50] }, args)) }));
72
71
  };
73
72
  export var Size = function (_a) {
74
73
  var args = __rest(_a, []);
75
- return (<div className="w-60 grid items-center gap-3">
76
- <Slider defaultValue={[50]} {...args} size={'small'}></Slider>
77
- <Slider defaultValue={[50]} {...args} size={'medium'}></Slider>
78
- <Slider defaultValue={[50]} {...args} size={'large'}></Slider>
79
- </div>);
74
+ return (_jsxs("div", { className: "w-60 grid items-center gap-3", children: [_jsx(Slider, __assign({ defaultValue: [50] }, args, { size: 'small' })), _jsx(Slider, __assign({ defaultValue: [50] }, args, { size: 'medium' })), _jsx(Slider, __assign({ defaultValue: [50] }, args, { size: 'large' }))] }));
80
75
  };
81
76
  export var Radius = function (_a) {
82
77
  var args = __rest(_a, []);
83
- return (<div className="w-60">
84
- {radiusOptions.map(function (radius) { return (<div key={radius} className="pb-1">
85
- <Slider key={radius} defaultValue={[50]} radius={radius} {...args}/>
86
- </div>); })}
87
- </div>);
78
+ return (_jsx("div", { className: "w-60", children: radiusOptions.map(function (radius) { return (_jsx("div", { className: "pb-1", children: _jsx(Slider, __assign({ defaultValue: [50], radius: radius }, args), radius) }, radius)); }) }));
88
79
  };
89
80
  export var Range = function (_a) {
90
81
  var args = __rest(_a, []);
91
- return (<div className="w-60">
92
- <Slider defaultValue={[20, 80]} {...args}/>
93
- </div>);
82
+ return (_jsx("div", { className: "w-60", children: _jsx(Slider, __assign({ defaultValue: [20, 80] }, args)) }));
94
83
  };
@@ -68,16 +68,16 @@ declare const meta: {
68
68
  export default meta;
69
69
  export declare const Default: ({ ...args }: {
70
70
  [x: string]: any;
71
- }) => import("react").JSX.Element;
71
+ }) => import("react/jsx-runtime").JSX.Element;
72
72
  export declare const Loading: ({ ...args }: {
73
73
  [x: string]: any;
74
- }) => import("react").JSX.Element;
74
+ }) => import("react/jsx-runtime").JSX.Element;
75
75
  export declare const WithChildren: ({ ...args }: {
76
76
  [x: string]: any;
77
- }) => import("react").JSX.Element;
77
+ }) => import("react/jsx-runtime").JSX.Element;
78
78
  export declare const WithButton: ({ ...args }: {
79
79
  [x: string]: any;
80
- }) => import("react").JSX.Element;
80
+ }) => import("react/jsx-runtime").JSX.Element;
81
81
  export declare const Size: ({ ...args }: {
82
82
  [x: string]: any;
83
- }) => import("react").JSX.Element;
83
+ }) => import("react/jsx-runtime").JSX.Element;