@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.
- package/dist/Typography/Header/index.d.ts +1 -1
- package/dist/Typography/Header/{index.jsx → index.js} +2 -5
- package/dist/Typography/Text/{index.jsx → index.js} +3 -6
- package/dist/app/layout.d.ts +1 -1
- package/dist/app/{layout.jsx → layout.js} +2 -3
- package/dist/app/page.d.ts +1 -2
- package/dist/app/{page.jsx → page.js} +2 -2
- package/dist/app/template/badgeTemplate.d.ts +1 -2
- package/dist/app/template/badgeTemplate.js +11 -0
- package/dist/app/template/buttonTemplate.d.ts +1 -2
- package/dist/app/template/buttonTemplate.js +11 -0
- package/dist/app/template/colorPicker.d.ts +1 -2
- package/dist/app/template/colorPicker.js +14 -0
- package/dist/app/template/textTemplate.d.ts +1 -2
- package/dist/app/template/textTemplate.js +23 -0
- package/dist/app/template/theme.d.ts +2 -2
- package/dist/app/template/theme.js +12 -0
- package/dist/components/Accordion/{index.jsx → index.js} +5 -17
- package/dist/components/AlertDialog/{AlertDialogAction.jsx → AlertDialogAction.js} +3 -4
- package/dist/components/AlertDialog/{AlertDialogCancel.jsx → AlertDialogCancel.js} +3 -4
- package/dist/components/AlertDialog/{AlertDialogContent.jsx → AlertDialogContent.js} +3 -7
- package/dist/components/AlertDialog/{AlertDialogDescription.jsx → AlertDialogDescription.js} +14 -4
- package/dist/components/AlertDialog/{AlertDialogTitle.jsx → AlertDialogTitle.js} +14 -4
- package/dist/components/AlertDialog/{AlertDialogTrigger.jsx → AlertDialogTrigger.js} +3 -4
- package/dist/components/AlertDialog/{index.jsx → index.js} +14 -2
- package/dist/components/AspectRatio/{index.jsx → index.js} +3 -4
- package/dist/components/Avatar/{index.jsx → index.js} +3 -7
- package/dist/components/Badge/{index.jsx → index.js} +3 -4
- package/dist/components/BubbleChart/index.d.ts +1 -2
- package/dist/components/BubbleChart/{index.jsx → index.js} +2 -2
- package/dist/components/Button/{index.jsx → index.js} +3 -4
- package/dist/components/Callout/{CalloutIcon.jsx → CalloutIcon.js} +3 -8
- package/dist/components/Callout/{CalloutText.jsx → CalloutText.js} +14 -4
- package/dist/components/Callout/{index.jsx → index.js} +3 -6
- package/dist/components/Card/{index.jsx → index.js} +3 -4
- package/dist/components/Checkbox/{index.jsx → index.js} +3 -11
- package/dist/components/CheckboxCard/{index.jsx → index.js} +3 -5
- package/dist/components/CheckboxGroup/{CheckboxGroupItem.jsx → CheckboxGroupItem.js} +14 -6
- package/dist/components/CheckboxGroup/{index.jsx → index.js} +2 -5
- package/dist/components/ContextMenu/{ContextMenuCheckboxItem.jsx → ContextMenuCheckboxItem.js} +14 -7
- package/dist/components/ContextMenu/{ContextMenuContent.jsx → ContextMenuContent.js} +3 -6
- package/dist/components/ContextMenu/{ContextMenuGroup.jsx → ContextMenuGroup.js} +14 -4
- package/dist/components/ContextMenu/{ContextMenuItem.jsx → ContextMenuItem.js} +3 -5
- package/dist/components/ContextMenu/{ContextMenuItemIndicator.jsx → ContextMenuItemIndicator.js} +3 -4
- package/dist/components/ContextMenu/{ContextMenuLabel.jsx → ContextMenuLabel.js} +3 -4
- package/dist/components/ContextMenu/{ContextMenuRadioGroup.jsx → ContextMenuRadioGroup.js} +14 -6
- package/dist/components/ContextMenu/{ContextMenuRadioItem.jsx → ContextMenuRadioItem.js} +14 -7
- package/dist/components/ContextMenu/{ContextMenuSeparator.jsx → ContextMenuSeparator.js} +14 -4
- package/dist/components/ContextMenu/{ContextMenuSubContent.jsx → ContextMenuSubContent.js} +6 -9
- package/dist/components/ContextMenu/{ContextMenuSubTrigger.jsx → ContextMenuSubTrigger.js} +14 -9
- package/dist/components/ContextMenu/{ContextMenuTrigger.jsx → ContextMenuTrigger.js} +14 -4
- package/dist/components/ContextMenu/{index.jsx → index.js} +14 -4
- package/dist/components/DataList/{DataListItem.jsx → DataListItem.js} +3 -4
- package/dist/components/DataList/{DataListLabel.jsx → DataListLabel.js} +3 -4
- package/dist/components/DataList/{DataListValue.jsx → DataListValue.js} +3 -4
- package/dist/components/DataList/{index.jsx → index.js} +14 -6
- package/dist/components/Dialog/{DialogAction.jsx → DialogAction.js} +14 -4
- package/dist/components/Dialog/{DialogCancel.jsx → DialogCancel.js} +14 -4
- package/dist/components/Dialog/{DialogContent.jsx → DialogContent.js} +3 -4
- package/dist/components/Dialog/{DialogDescription.jsx → DialogDescription.js} +14 -4
- package/dist/components/Dialog/{DialogSlot.jsx → DialogSlot.js} +14 -4
- package/dist/components/Dialog/{DialogTitle.jsx → DialogTitle.js} +14 -4
- package/dist/components/Dialog/{DialogTrigger.jsx → DialogTrigger.js} +14 -4
- package/dist/components/Dialog/{index.jsx → index.js} +14 -4
- package/dist/components/DoughnutChart/index.d.ts +1 -2
- package/dist/components/DoughnutChart/{index.jsx → index.js} +2 -2
- package/dist/components/DropdownMenu/{DropdonMenuRadioGroup.jsx → DropdonMenuRadioGroup.js} +14 -6
- package/dist/components/DropdownMenu/{DropdonMenuSubContent.jsx → DropdonMenuSubContent.js} +7 -10
- package/dist/components/DropdownMenu/{DropdownMenuCheckboxItem.jsx → DropdownMenuCheckboxItem.js} +14 -7
- package/dist/components/DropdownMenu/{DropdownMenuContent.jsx → DropdownMenuContent.js} +3 -6
- package/dist/components/DropdownMenu/{DropdownMenuItem.jsx → DropdownMenuItem.js} +3 -5
- package/dist/components/DropdownMenu/{DropdownMenuItemIndicator.jsx → DropdownMenuItemIndicator.js} +3 -4
- package/dist/components/DropdownMenu/{DropdownMenuLable.jsx → DropdownMenuLable.js} +3 -4
- package/dist/components/DropdownMenu/{DropdownMenuRadioItem.jsx → DropdownMenuRadioItem.js} +14 -7
- package/dist/components/DropdownMenu/{DropdownMenuSeparator.jsx → DropdownMenuSeparator.js} +14 -2
- package/dist/components/DropdownMenu/{DropdownMenuSub.jsx → DropdownMenuSub.js} +14 -2
- package/dist/components/DropdownMenu/{DropdownMenuSubTrigger.jsx → DropdownMenuSubTrigger.js} +14 -7
- package/dist/components/DropdownMenu/{DropdownMenuTrigger.jsx → DropdownMenuTrigger.js} +14 -4
- package/dist/components/DropdownMenu/{index.jsx → index.js} +14 -2
- package/dist/components/HoverCard/{HoverCardContent.jsx → HoverCardContent.js} +3 -4
- package/dist/components/HoverCard/{HoverCardTrigger.jsx → HoverCardTrigger.js} +14 -4
- package/dist/components/HoverCard/{index.jsx → index.js} +14 -4
- package/dist/components/IconButton/{index.jsx → index.js} +2 -3
- package/dist/components/Input/Input.stories.d.ts +4 -4
- package/dist/components/Input/{Input.stories.jsx → Input.stories.js} +15 -9
- package/dist/components/Input/index.d.ts +1 -1
- package/dist/components/Input/{index.jsx → index.js} +3 -3
- package/dist/components/Inset/{index.jsx → index.js} +3 -6
- package/dist/components/Label/{index.jsx → index.js} +2 -3
- package/dist/components/Menubar/{MenubarCheckboxItem.jsx → MenubarCheckboxItem.js} +14 -7
- package/dist/components/Menubar/{MenubarContent.jsx → MenubarContent.js} +7 -10
- package/dist/components/Menubar/{MenubarItem.jsx → MenubarItem.js} +3 -5
- package/dist/components/Menubar/{MenubarItemIndicator.jsx → MenubarItemIndicator.js} +3 -4
- package/dist/components/Menubar/{MenubarMenu.jsx → MenubarMenu.js} +14 -2
- package/dist/components/Menubar/{MenubarRadioGroup.jsx → MenubarRadioGroup.js} +14 -6
- package/dist/components/Menubar/{MenubarRadioItem.jsx → MenubarRadioItem.js} +14 -7
- package/dist/components/Menubar/{MenubarSeparator.jsx → MenubarSeparator.js} +14 -4
- package/dist/components/Menubar/{MenubarSub.jsx → MenubarSub.js} +14 -2
- package/dist/components/Menubar/{MenubarSubContent.jsx → MenubarSubContent.js} +4 -5
- package/dist/components/Menubar/{MenubarSubTrigger.jsx → MenubarSubTrigger.js} +14 -7
- package/dist/components/Menubar/{MenubarTrigger.jsx → MenubarTrigger.js} +3 -4
- package/dist/components/Menubar/{index.jsx → index.js} +3 -6
- package/dist/components/NavigationMenu/{NavigationMenuContent.jsx → NavigationMenuContent.js} +3 -4
- package/dist/components/NavigationMenu/NavigationMenuIndicator.js +31 -0
- package/dist/components/NavigationMenu/{NavigationMenuItem.jsx → NavigationMenuItem.js} +14 -4
- package/dist/components/NavigationMenu/{NavigationMenuLink.jsx → NavigationMenuLink.js} +3 -4
- package/dist/components/NavigationMenu/{NavigationMenuList.jsx → NavigationMenuList.js} +3 -5
- package/dist/components/NavigationMenu/{NavigationMenuTrigger.jsx → NavigationMenuTrigger.js} +3 -5
- package/dist/components/NavigationMenu/{NavigationMenuViewport.jsx → NavigationMenuViewport.js} +3 -4
- package/dist/components/NavigationMenu/{index.jsx → index.js} +14 -6
- package/dist/components/PieChart/index.d.ts +1 -2
- package/dist/components/PieChart/{index.jsx → index.js} +2 -2
- package/dist/components/Popover/{PopoverClose.jsx → PopoverClose.js} +14 -4
- package/dist/components/Popover/{PopoverContent.jsx → PopoverContent.js} +3 -4
- package/dist/components/Popover/{PopoverTrigger.jsx → PopoverTrigger.js} +14 -4
- package/dist/components/Popover/{index.jsx → index.js} +14 -4
- package/dist/components/Progress/{index.jsx → index.js} +3 -4
- package/dist/components/RadarChart/index.d.ts +1 -2
- package/dist/components/RadarChart/{index.jsx → index.js} +2 -2
- package/dist/components/Radio/{index.jsx → index.js} +13 -8
- package/dist/components/RadioCards/{RadioCardsItem.jsx → RadioCardsItem.js} +14 -4
- package/dist/components/RadioCards/{index.jsx → index.js} +3 -6
- package/dist/components/RadioGroup/{RadioGroupItem.jsx → RadioGroupItem.js} +14 -4
- package/dist/components/RadioGroup/{index.jsx → index.js} +14 -6
- package/dist/components/ScrollArea/{index.jsx → index.js} +14 -6
- package/dist/components/SegmentedControl/{SegmentedControlItem.jsx → SegmentedControlItem.js} +14 -4
- package/dist/components/SegmentedControl/{index.jsx → index.js} +2 -5
- package/dist/components/Select/{index.jsx → index.js} +8 -23
- package/dist/components/Separator/{index.jsx → index.js} +2 -5
- package/dist/components/Skeleton/{index.jsx → index.js} +2 -5
- package/dist/components/Slider/{index.jsx → index.js} +2 -3
- package/dist/components/Spinner/{index.jsx → index.js} +2 -5
- package/dist/components/TabNav/{index.jsx → index.js} +14 -8
- package/dist/components/Table/{index.jsx → index.js} +8 -23
- package/dist/components/Tabs/{index.jsx → index.js} +5 -14
- package/dist/components/TextArea/{index.jsx → index.js} +2 -3
- package/dist/components/TextField/{index.jsx → index.js} +3 -8
- package/dist/components/Toast/{ToastActionButton.jsx → ToastActionButton.js} +3 -4
- package/dist/components/Toast/{ToastDescription.jsx → ToastDescription.js} +14 -6
- package/dist/components/Toast/{ToastTitle.jsx → ToastTitle.js} +14 -4
- package/dist/components/Toast/{index.jsx → index.js} +3 -9
- package/dist/components/Toggle/{ToggleWithText.jsx → ToggleWithText.js} +4 -6
- package/dist/components/Toggle/{index.jsx → index.js} +3 -4
- package/dist/components/ToggleGroup/{index.jsx → index.js} +3 -6
- package/dist/components/ToggleGroup/{toggleGroupItem.jsx → toggleGroupItem.js} +14 -4
- package/dist/components/ToggleSwitch/{index.jsx → index.js} +2 -6
- package/dist/components/Tooltip/index.d.ts +1 -1
- package/dist/components/Tooltip/{index.jsx → index.js} +2 -11
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -3
- package/dist/stories/Welcome.d.ts +1 -2
- package/dist/stories/Welcome.js +30 -0
- package/dist/stories/accordion/Accordion.stories.d.ts +1 -1
- package/dist/stories/accordion/{Accordion.stories.jsx → Accordion.stories.js} +2 -20
- package/dist/stories/alert-dialog/AlertDialog.stories.d.ts +1 -1
- package/dist/stories/alert-dialog/{AlertDialog.stories.jsx → AlertDialog.stories.js} +2 -15
- package/dist/stories/aspect-ratio/AspectRatio.stories.d.ts +3 -3
- package/dist/stories/aspect-ratio/AspectRatio.stories.js +78 -0
- package/dist/stories/avatar/Avatar.stories.d.ts +5 -5
- package/dist/stories/avatar/{Avatar.stories.jsx → Avatar.stories.js} +6 -17
- package/dist/stories/badge/Badge.stories.d.ts +6 -6
- package/dist/stories/badge/{Badge.stories.jsx → Badge.stories.js} +7 -51
- package/dist/stories/bubble-chart/BubbleChart.stories.d.ts +4 -5
- package/dist/stories/bubble-chart/{BubbleChart.stories.jsx → BubbleChart.stories.js} +4 -12
- package/dist/stories/button/Button.stories.d.ts +7 -7
- package/dist/stories/button/{Button.stories.jsx → Button.stories.js} +8 -41
- package/dist/stories/button/IconButton.stories.d.ts +4 -4
- package/dist/stories/button/{IconButton.stories.jsx → IconButton.stories.js} +5 -18
- package/dist/stories/callout/Callout.stories.d.ts +7 -7
- package/dist/stories/callout/Callout.stories.js +104 -0
- package/dist/stories/card/Card.stories.d.ts +5 -5
- package/dist/stories/card/{Card.stories.jsx → Card.stories.js} +6 -56
- package/dist/stories/checkbox/Checkbox.stories.d.ts +6 -6
- package/dist/stories/checkbox/{Checkbox.stories.jsx → Checkbox.stories.js} +7 -63
- package/dist/stories/checkbox/CheckboxCard.stories.d.ts +5 -5
- package/dist/stories/checkbox/{CheckboxCard.stories.jsx → CheckboxCard.stories.js} +6 -41
- package/dist/stories/checkbox/CheckboxGroup.stories.d.ts +3 -3
- package/dist/stories/checkbox/{CheckboxGroup.stories.jsx → CheckboxGroup.stories.js} +4 -76
- package/dist/stories/context-menu/ContextMenu.stories.d.ts +4 -4
- package/dist/stories/context-menu/{ContextMenu.stories.jsx → ContextMenu.stories.js} +5 -74
- package/dist/stories/data-list/DataList.stories.d.ts +4 -4
- package/dist/stories/data-list/DataList.stories.js +87 -0
- package/dist/stories/dialog/Dialog.stories.d.ts +1 -1
- package/dist/stories/dialog/{Dialog.stories.jsx → Dialog.stories.js} +2 -25
- package/dist/stories/doughnut-chart/DoughnutChart.stories.d.ts +4 -5
- package/dist/stories/doughnut-chart/{DoughnutChart.stories.jsx → DoughnutChart.stories.js} +4 -12
- package/dist/stories/dropdown-menu/DropdownMenu.stories.d.ts +4 -4
- package/dist/stories/dropdown-menu/DropdownMenu.stories.js +75 -0
- package/dist/stories/header/Header.stories.d.ts +6 -6
- package/dist/stories/header/{Header.stories.jsx → Header.stories.js} +7 -26
- package/dist/stories/hover-card/HoverCard.stories.d.ts +2 -2
- package/dist/stories/hover-card/{HoverCard.stories.jsx → HoverCard.stories.js} +3 -30
- package/dist/stories/inset/Inset.stories.d.ts +2 -2
- package/dist/stories/inset/{Inset.stories.jsx → Inset.stories.js} +12 -27
- package/dist/stories/label/Label.stories.d.ts +4 -4
- package/dist/stories/label/{Label.stories.jsx → Label.stories.js} +5 -26
- package/dist/stories/menubar/Menubar.stories.d.ts +1 -1
- package/dist/stories/menubar/{Menubar.stories.jsx → Menubar.stories.js} +8 -45
- package/dist/stories/navigation-menu/NavigationMenu.stories.d.ts +13 -13
- package/dist/stories/navigation-menu/{NavigationMenu.stories.jsx → NavigationMenu.stories.js} +3 -68
- package/dist/stories/pie-chart/PieChart.stories.d.ts +5 -6
- package/dist/stories/pie-chart/{PieChart.stories.jsx → PieChart.stories.js} +13 -32
- package/dist/stories/popover/Popover.stories.d.ts +2 -2
- package/dist/stories/popover/{Popover.stories.jsx → Popover.stories.js} +9 -42
- package/dist/stories/progress/Progress.stories.d.ts +4 -4
- package/dist/stories/progress/{Progress.stories.jsx → Progress.stories.js} +6 -11
- package/dist/stories/radar-chart/RadarChart.stories.d.ts +5 -6
- package/dist/stories/radar-chart/{RadarChart.stories.jsx → RadarChart.stories.js} +5 -4
- package/dist/stories/radio/Radio.stories.d.ts +3 -3
- package/dist/stories/radio/{Radio.stories.jsx → Radio.stories.js} +4 -14
- package/dist/stories/radio/RadioCards.stories.d.ts +4 -4
- package/dist/stories/radio/{RadioCards.stories.jsx → RadioCards.stories.js} +5 -64
- package/dist/stories/radio/RadioGroup.stories.d.ts +4 -4
- package/dist/stories/radio/{RadioGroup.stories.jsx → RadioGroup.stories.js} +5 -59
- package/dist/stories/scroll-area/ScrollArea.stories.d.ts +2 -2
- package/dist/stories/scroll-area/ScrollArea.stories.js +63 -0
- package/dist/stories/segmented-control/SegmentedControl.stories.d.ts +4 -4
- package/dist/stories/segmented-control/{SegmentedControl.stories.jsx → SegmentedControl.stories.js} +5 -26
- package/dist/stories/select/Select.stories.d.ts +5 -5
- package/dist/stories/select/{Select.stories.jsx → Select.stories.js} +6 -67
- package/dist/stories/separator/Separator.stories.d.ts +4 -4
- package/dist/stories/separator/{Separator.stories.jsx → Separator.stories.js} +5 -29
- package/dist/stories/skeleton/Skeleton.stories.d.ts +5 -5
- package/dist/stories/skeleton/{Skeleton.stories.jsx → Skeleton.stories.js} +6 -33
- package/dist/stories/slider/Slider.stories.d.ts +4 -4
- package/dist/stories/slider/{Slider.stories.jsx → Slider.stories.js} +5 -16
- package/dist/stories/spinner/Spinner.stories.d.ts +5 -5
- package/dist/stories/spinner/{Spinner.stories.jsx → Spinner.stories.js} +6 -31
- package/dist/stories/switch/Switch.stories.d.ts +4 -4
- package/dist/stories/switch/{Switch.stories.jsx → Switch.stories.js} +5 -16
- package/dist/stories/tab-nav/TabNav.stories.d.ts +1 -1
- package/dist/stories/tab-nav/{TabNav.stories.jsx → TabNav.stories.js} +2 -11
- package/dist/stories/table/Table.stories.d.ts +1 -1
- package/dist/stories/table/{Table.stories.jsx → Table.stories.js} +2 -29
- package/dist/stories/tabs/Tabs.stories.d.ts +1 -1
- package/dist/stories/tabs/{Tabs.stories.jsx → Tabs.stories.js} +2 -19
- package/dist/stories/text/Text.stories.d.ts +5 -5
- package/dist/stories/text/{Text.stories.jsx → Text.stories.js} +6 -21
- package/dist/stories/textArea/TextArea.stories.d.ts +5 -5
- package/dist/stories/textArea/{TextArea.stories.jsx → TextArea.stories.js} +6 -22
- package/dist/stories/textfield/TextField.stories.d.ts +5 -5
- package/dist/stories/textfield/{TextField.stories.jsx → TextField.stories.js} +6 -38
- package/dist/stories/toast/Toast.stories.d.ts +3 -3
- package/dist/stories/toast/{Toast.stories.jsx → Toast.stories.js} +4 -22
- package/dist/stories/toggle/Toggle.stories.d.ts +5 -5
- package/dist/stories/toggle/{Toggle.stories.jsx → Toggle.stories.js} +6 -23
- package/dist/stories/toggle/ToggleGroup.stories.d.ts +3 -3
- package/dist/stories/toggle/{ToggleGroup.stories.jsx → ToggleGroup.stories.js} +6 -39
- package/dist/stories/tooltip/Tooltip.stories.d.ts +3 -3
- package/dist/stories/tooltip/{Tooltip.stories.jsx → Tooltip.stories.js} +4 -17
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -3
- package/dist/app/template/badgeTemplate.jsx +0 -82
- package/dist/app/template/buttonTemplate.jsx +0 -82
- package/dist/app/template/colorPicker.jsx +0 -19
- package/dist/app/template/textTemplate.jsx +0 -72
- package/dist/app/template/theme.jsx +0 -44
- package/dist/components/NavigationMenu/NavigationMenuIndicator.jsx +0 -22
- package/dist/stories/Welcome.jsx +0 -48
- package/dist/stories/aspect-ratio/AspectRatio.stories.jsx +0 -106
- package/dist/stories/callout/Callout.stories.jsx +0 -205
- package/dist/stories/data-list/DataList.stories.jsx +0 -185
- package/dist/stories/dropdown-menu/DropdownMenu.stories.jsx +0 -170
- 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 { Spinner } from '../../components/Spinner/index';
|
24
25
|
import { commonArgTypes } from '../../constants';
|
25
26
|
import { ToggleSwitch } from 'components/ToggleSwitch';
|
@@ -66,47 +67,21 @@ var meta = {
|
|
66
67
|
export default meta;
|
67
68
|
export var Default = function (_a) {
|
68
69
|
var args = __rest(_a, []);
|
69
|
-
return
|
70
|
+
return _jsx(Spinner, __assign({}, args));
|
70
71
|
};
|
71
72
|
export var Loading = function (_a) {
|
72
73
|
var args = __rest(_a, []);
|
73
|
-
return (
|
74
|
-
<Spinner loading={true} {...args}>
|
75
|
-
Loading
|
76
|
-
</Spinner>
|
77
|
-
<Spinner loading={false} {...args}>
|
78
|
-
Loading
|
79
|
-
</Spinner>
|
80
|
-
</div>);
|
74
|
+
return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Spinner, __assign({ loading: true }, args, { children: "Loading" })), _jsx(Spinner, __assign({ loading: false }, args, { children: "Loading" }))] }));
|
81
75
|
};
|
82
76
|
export var WithChildren = function (_a) {
|
83
77
|
var args = __rest(_a, []);
|
84
|
-
return (
|
85
|
-
<Spinner loading={true} {...args}>
|
86
|
-
<ToggleSwitch></ToggleSwitch>
|
87
|
-
</Spinner>
|
88
|
-
<Spinner loading={false} {...args}>
|
89
|
-
<ToggleSwitch></ToggleSwitch>
|
90
|
-
</Spinner>
|
91
|
-
</div>);
|
78
|
+
return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Spinner, __assign({ loading: true }, args, { children: _jsx(ToggleSwitch, {}) })), _jsx(Spinner, __assign({ loading: false }, args, { children: _jsx(ToggleSwitch, {}) }))] }));
|
92
79
|
};
|
93
80
|
export var WithButton = function (_a) {
|
94
81
|
var args = __rest(_a, []);
|
95
|
-
return (
|
96
|
-
<Button color="slate" className="mr-2" {...args}>
|
97
|
-
<Spinner {...args}/>
|
98
|
-
</Button>
|
99
|
-
<Button color="slate" {...args}>
|
100
|
-
<Spinner {...args} className="mr-2"/>
|
101
|
-
Loading
|
102
|
-
</Button>
|
103
|
-
</div>);
|
82
|
+
return (_jsxs("div", { children: [_jsx(Button, __assign({ color: "slate", className: "mr-2" }, args, { children: _jsx(Spinner, __assign({}, args)) })), _jsxs(Button, __assign({ color: "slate" }, args, { children: [_jsx(Spinner, __assign({}, args, { className: "mr-2" })), "Loading"] }))] }));
|
104
83
|
};
|
105
84
|
export var Size = function (_a) {
|
106
85
|
var args = __rest(_a, []);
|
107
|
-
return (
|
108
|
-
<Spinner loading={true} {...args} size={'small'}/>
|
109
|
-
<Spinner loading={true} {...args} size={'medium'}/>
|
110
|
-
<Spinner loading={true} {...args} size={'large'}/>
|
111
|
-
</div>);
|
86
|
+
return (_jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx(Spinner, __assign({ loading: true }, args, { size: 'small' })), _jsx(Spinner, __assign({ loading: true }, args, { size: 'medium' })), _jsx(Spinner, __assign({ loading: true }, args, { size: 'large' }))] }));
|
112
87
|
};
|
@@ -134,13 +134,13 @@ type Story = StoryObj<typeof meta>;
|
|
134
134
|
export declare const Default: Story;
|
135
135
|
export declare const Size: ({ ...args }: {
|
136
136
|
[x: string]: any;
|
137
|
-
}) => import("react").JSX.Element;
|
137
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
138
138
|
export declare const Scaling: ({ ...args }: {
|
139
139
|
[x: string]: any;
|
140
|
-
}) => import("react").JSX.Element;
|
140
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
141
141
|
export declare const Radius: ({ ...args }: {
|
142
142
|
[x: string]: any;
|
143
|
-
}) => import("react").JSX.Element;
|
143
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
144
144
|
export declare const Appearance: ({ ...args }: {
|
145
145
|
[x: string]: any;
|
146
|
-
}) => import("react").JSX.Element;
|
146
|
+
}) => 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 { ToggleSwitch } from '../../components/ToggleSwitch/index';
|
24
25
|
import { commonArgTypes, radiusOptions, scalingOptions } from '../../constants';
|
25
26
|
var meta = {
|
@@ -91,29 +92,17 @@ export var Default = {
|
|
91
92
|
};
|
92
93
|
export var Size = function (_a) {
|
93
94
|
var args = __rest(_a, []);
|
94
|
-
return (
|
95
|
-
<ToggleSwitch {...args} size={'small'}></ToggleSwitch>
|
96
|
-
<ToggleSwitch {...args} size={'medium'}></ToggleSwitch>
|
97
|
-
<ToggleSwitch {...args} size={'large'}></ToggleSwitch>
|
98
|
-
</div>);
|
95
|
+
return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ToggleSwitch, __assign({}, args, { size: 'small' })), _jsx(ToggleSwitch, __assign({}, args, { size: 'medium' })), _jsx(ToggleSwitch, __assign({}, args, { size: 'large' }))] }));
|
99
96
|
};
|
100
97
|
export var Scaling = function (_a) {
|
101
98
|
var args = __rest(_a, []);
|
102
|
-
return (
|
103
|
-
{scalingOptions.map(function (scaling) { return (<ToggleSwitch key={scaling} {...args} scaling={scaling}></ToggleSwitch>); })}
|
104
|
-
</div>);
|
99
|
+
return (_jsx("div", { className: "flex items-center gap-3", children: scalingOptions.map(function (scaling) { return (_jsx(ToggleSwitch, __assign({}, args, { scaling: scaling }), scaling)); }) }));
|
105
100
|
};
|
106
101
|
export var Radius = function (_a) {
|
107
102
|
var args = __rest(_a, []);
|
108
|
-
return (
|
109
|
-
{radiusOptions.map(function (radius) { return (<div key={radius}>
|
110
|
-
<ToggleSwitch key={radius} radius={radius} {...args}/>
|
111
|
-
</div>); })}
|
112
|
-
</div>);
|
103
|
+
return (_jsx("div", { className: "flex items-center gap-3", children: radiusOptions.map(function (radius) { return (_jsx("div", { children: _jsx(ToggleSwitch, __assign({ radius: radius }, args), radius) }, radius)); }) }));
|
113
104
|
};
|
114
105
|
export var Appearance = function (_a) {
|
115
106
|
var args = __rest(_a, []);
|
116
|
-
return (
|
117
|
-
{['classic', 'soft', 'surface'].map(function (appearance) { return (<ToggleSwitch key={appearance} {...args} appearance={appearance}></ToggleSwitch>); })}
|
118
|
-
</div>);
|
107
|
+
return (_jsx("div", { className: "flex items-center gap-3", children: ['classic', 'soft', 'surface'].map(function (appearance) { return (_jsx(ToggleSwitch, __assign({}, args, { appearance: appearance }), appearance)); }) }));
|
119
108
|
};
|
@@ -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 { TabNav, TabNavLink } from '../../components/TabNav/index';
|
24
25
|
import { commonArgTypes } from '../../constants';
|
25
26
|
var meta = {
|
@@ -54,15 +55,5 @@ var meta = {
|
|
54
55
|
export default meta;
|
55
56
|
export var Default = function (_a) {
|
56
57
|
var args = __rest(_a, []);
|
57
|
-
return (
|
58
|
-
<TabNavLink href="#" active {...args}>
|
59
|
-
Account
|
60
|
-
</TabNavLink>
|
61
|
-
<TabNavLink href="#" {...args}>
|
62
|
-
Documents
|
63
|
-
</TabNavLink>
|
64
|
-
<TabNavLink href="#" {...args}>
|
65
|
-
Settings
|
66
|
-
</TabNavLink>
|
67
|
-
</TabNav>);
|
58
|
+
return (_jsxs(TabNav, __assign({}, args, { children: [_jsx(TabNavLink, __assign({ href: "#", active: true }, args, { children: "Account" })), _jsx(TabNavLink, __assign({ href: "#" }, args, { children: "Documents" })), _jsx(TabNavLink, __assign({ href: "#" }, args, { children: "Settings" }))] })));
|
68
59
|
};
|
@@ -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 { Table, TableHeader, TableRow, TableColumnHeaderCell, TableBody, TableRowHeaderCell, TableCell, } from '../../components/Table/index';
|
24
25
|
import { commonArgTypes } from '../../constants';
|
25
26
|
var meta = {
|
@@ -74,33 +75,5 @@ var meta = {
|
|
74
75
|
export default meta;
|
75
76
|
export var Default = function (_a) {
|
76
77
|
var args = __rest(_a, []);
|
77
|
-
return (
|
78
|
-
<TableHeader>
|
79
|
-
<TableRow>
|
80
|
-
<TableColumnHeaderCell>Full name</TableColumnHeaderCell>
|
81
|
-
<TableColumnHeaderCell>Email</TableColumnHeaderCell>
|
82
|
-
<TableColumnHeaderCell>Group</TableColumnHeaderCell>
|
83
|
-
</TableRow>
|
84
|
-
</TableHeader>
|
85
|
-
|
86
|
-
<TableBody>
|
87
|
-
<TableRow>
|
88
|
-
<TableRowHeaderCell>Danilo Sousa</TableRowHeaderCell>
|
89
|
-
<TableCell>danilo@examplecom</TableCell>
|
90
|
-
<TableCell>Developer</TableCell>
|
91
|
-
</TableRow>
|
92
|
-
|
93
|
-
<TableRow>
|
94
|
-
<TableRowHeaderCell>Zahra Ambessa</TableRowHeaderCell>
|
95
|
-
<TableCell>zahra@examplecom</TableCell>
|
96
|
-
<TableCell>Admin</TableCell>
|
97
|
-
</TableRow>
|
98
|
-
|
99
|
-
<TableRow>
|
100
|
-
<TableRowHeaderCell>Jasper Eriksson</TableRowHeaderCell>
|
101
|
-
<TableCell>jasper@examplecom</TableCell>
|
102
|
-
<TableCell>Developer</TableCell>
|
103
|
-
</TableRow>
|
104
|
-
</TableBody>
|
105
|
-
</Table>);
|
78
|
+
return (_jsxs(Table, __assign({}, args, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableColumnHeaderCell, { children: "Full name" }), _jsx(TableColumnHeaderCell, { children: "Email" }), _jsx(TableColumnHeaderCell, { children: "Group" })] }) }), _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableRowHeaderCell, { children: "Danilo Sousa" }), _jsx(TableCell, { children: "danilo@examplecom" }), _jsx(TableCell, { children: "Developer" })] }), _jsxs(TableRow, { children: [_jsx(TableRowHeaderCell, { children: "Zahra Ambessa" }), _jsx(TableCell, { children: "zahra@examplecom" }), _jsx(TableCell, { children: "Admin" })] }), _jsxs(TableRow, { children: [_jsx(TableRowHeaderCell, { children: "Jasper Eriksson" }), _jsx(TableCell, { children: "jasper@examplecom" }), _jsx(TableCell, { children: "Developer" })] })] })] })));
|
106
79
|
};
|
@@ -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 { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/Tabs/index';
|
24
25
|
import { commonArgTypes } from '../../constants';
|
25
26
|
var meta = {
|
@@ -54,23 +55,5 @@ var meta = {
|
|
54
55
|
export default meta;
|
55
56
|
export var Default = function (_a) {
|
56
57
|
var args = __rest(_a, []);
|
57
|
-
return (
|
58
|
-
<TabsList {...args}>
|
59
|
-
<TabsTrigger value="account">Account</TabsTrigger>
|
60
|
-
<TabsTrigger value="documents">Documents</TabsTrigger>
|
61
|
-
<TabsTrigger value="settings">Settings</TabsTrigger>
|
62
|
-
</TabsList>
|
63
|
-
|
64
|
-
<TabsContent value="account">
|
65
|
-
<div>Make changes to your account</div>
|
66
|
-
</TabsContent>
|
67
|
-
|
68
|
-
<TabsContent value="documents">
|
69
|
-
<div>Access and update your documents</div>
|
70
|
-
</TabsContent>
|
71
|
-
|
72
|
-
<TabsContent value="settings">
|
73
|
-
<div>Edit your profile</div>
|
74
|
-
</TabsContent>
|
75
|
-
</Tabs>);
|
58
|
+
return (_jsxs(Tabs, __assign({ defaultValue: "account" }, args, { children: [_jsxs(TabsList, __assign({}, args, { children: [_jsx(TabsTrigger, { value: "account", children: "Account" }), _jsx(TabsTrigger, { value: "documents", children: "Documents" }), _jsx(TabsTrigger, { value: "settings", children: "Settings" })] })), _jsx(TabsContent, { value: "account", children: _jsx("div", { children: "Make changes to your account" }) }), _jsx(TabsContent, { value: "documents", children: _jsx("div", { children: "Access and update your documents" }) }), _jsx(TabsContent, { value: "settings", children: _jsx("div", { children: "Edit your profile" }) })] })));
|
76
59
|
};
|
@@ -59,16 +59,16 @@ declare const meta: {
|
|
59
59
|
export default meta;
|
60
60
|
export declare const Default: ({ ...args }: {
|
61
61
|
[x: string]: any;
|
62
|
-
}) => import("react").JSX.Element;
|
62
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
63
63
|
export declare const Weight: ({ ...args }: {
|
64
64
|
[x: string]: any;
|
65
|
-
}) => import("react").JSX.Element;
|
65
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
66
66
|
export declare const Color: ({ ...args }: {
|
67
67
|
[x: string]: any;
|
68
|
-
}) => import("react").JSX.Element;
|
68
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
69
69
|
export declare const Size: ({ ...args }: {
|
70
70
|
[x: string]: any;
|
71
|
-
}) => import("react").JSX.Element;
|
71
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
72
72
|
export declare const Align: ({ ...args }: {
|
73
73
|
[x: string]: any;
|
74
|
-
}) => import("react").JSX.Element;
|
74
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
@@ -29,6 +29,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
29
29
|
}
|
30
30
|
return to.concat(ar || Array.prototype.slice.call(from));
|
31
31
|
};
|
32
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
32
33
|
import { commonArgTypes, typoSizeOptions, weightOptions } from '../../constants';
|
33
34
|
import { Text } from '../../Typography/Text';
|
34
35
|
import { colorOptions } from 'color/constants';
|
@@ -55,37 +56,21 @@ var meta = {
|
|
55
56
|
export default meta;
|
56
57
|
export var Default = function (_a) {
|
57
58
|
var args = __rest(_a, []);
|
58
|
-
return
|
59
|
+
return _jsx(Text, __assign({}, args, { children: "Text Component" }));
|
59
60
|
};
|
60
61
|
export var Weight = function (_a) {
|
61
62
|
var args = __rest(_a, []);
|
62
|
-
return (
|
63
|
-
{textWeightOption.map(function (weight, index) { return (<Text key={weight} {...args} weight={weight}>
|
64
|
-
Text Component
|
65
|
-
</Text>); })}
|
66
|
-
</div>);
|
63
|
+
return (_jsx("div", { className: "flex items-center space-x-4", children: textWeightOption.map(function (weight, index) { return (_jsx(Text, __assign({}, args, { weight: weight, children: "Text Component" }), weight)); }) }));
|
67
64
|
};
|
68
65
|
export var Color = function (_a) {
|
69
66
|
var args = __rest(_a, []);
|
70
|
-
return (
|
71
|
-
{colorOptions.map(function (color) { return (<Text key={color} {...args} color={color}>
|
72
|
-
Text Component
|
73
|
-
</Text>); })}
|
74
|
-
</div>);
|
67
|
+
return (_jsx("div", { children: colorOptions.map(function (color) { return (_jsx(Text, __assign({}, args, { color: color, children: "Text Component" }), color)); }) }));
|
75
68
|
};
|
76
69
|
export var Size = function (_a) {
|
77
70
|
var args = __rest(_a, []);
|
78
|
-
return (
|
79
|
-
{typoSizeOptions.map(function (size) { return (<Text key={size} {...args} size={size}>
|
80
|
-
Text Component
|
81
|
-
</Text>); })}
|
82
|
-
</div>);
|
71
|
+
return (_jsx("div", { className: "flex items-center space-x-4", children: typoSizeOptions.map(function (size) { return (_jsx(Text, __assign({}, args, { size: size, children: "Text Component" }), size)); }) }));
|
83
72
|
};
|
84
73
|
export var Align = function (_a) {
|
85
74
|
var args = __rest(_a, []);
|
86
|
-
return (
|
87
|
-
{['left', 'center', 'right'].map(function (align) { return (<Text key={align} {...args} align={align} as="div">
|
88
|
-
Text Component
|
89
|
-
</Text>); })}
|
90
|
-
</div>);
|
75
|
+
return (_jsx("div", { children: ['left', 'center', 'right'].map(function (align) { return (_jsx(Text, __assign({}, args, { align: align, as: "div", children: "Text Component" }), align)); }) }));
|
91
76
|
};
|
@@ -102,16 +102,16 @@ 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 Scaling: ({ ...args }: {
|
107
107
|
[x: string]: any;
|
108
|
-
}) => import("react").JSX.Element;
|
108
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
109
109
|
export declare const Size: ({ ...args }: {
|
110
110
|
[x: string]: any;
|
111
|
-
}) => import("react").JSX.Element;
|
111
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
112
112
|
export declare const Appearance: ({ ...args }: {
|
113
113
|
[x: string]: any;
|
114
|
-
}) => import("react").JSX.Element;
|
114
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
115
115
|
export declare const Radius: ({ ...args }: {
|
116
116
|
[x: string]: any;
|
117
|
-
}) => import("react").JSX.Element;
|
117
|
+
}) => 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 { TextArea } from '../../components/TextArea/index';
|
24
25
|
import { commonArgTypes, radiusOptions, scalingOptions } from '../../constants';
|
25
26
|
var meta = {
|
@@ -75,38 +76,21 @@ var meta = {
|
|
75
76
|
export default meta;
|
76
77
|
export var Default = function (_a) {
|
77
78
|
var args = __rest(_a, []);
|
78
|
-
return
|
79
|
+
return _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args));
|
79
80
|
};
|
80
81
|
export var Scaling = function (_a) {
|
81
82
|
var args = __rest(_a, []);
|
82
|
-
return (
|
83
|
-
{scalingOptions.map(function (scaling, index) { return (<div key={scaling} className="">
|
84
|
-
<TextArea placeholder="Reply to comment…" {...args} scaling={scaling}/>
|
85
|
-
</div>); })}
|
86
|
-
</div>);
|
83
|
+
return (_jsx("div", { className: "grid gap-5", children: scalingOptions.map(function (scaling, index) { return (_jsx("div", { className: "", children: _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { scaling: scaling })) }, scaling)); }) }));
|
87
84
|
};
|
88
85
|
export var Size = function (_a) {
|
89
86
|
var args = __rest(_a, []);
|
90
|
-
return (
|
91
|
-
<TextArea placeholder="Reply to comment…" {...args} size={'small'}></TextArea>
|
92
|
-
<TextArea placeholder="Reply to comment…" {...args} size={'medium'}></TextArea>
|
93
|
-
<TextArea placeholder="Reply to comment…" {...args} size={'large'}></TextArea>
|
94
|
-
<TextArea placeholder="Reply to comment…" {...args} size={'x-large'}></TextArea>
|
95
|
-
</div>);
|
87
|
+
return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { size: 'small' })), _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { size: 'medium' })), _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { size: 'large' })), _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { size: 'x-large' }))] }));
|
96
88
|
};
|
97
89
|
export var Appearance = function (_a) {
|
98
90
|
var args = __rest(_a, []);
|
99
|
-
return (
|
100
|
-
{['classic', 'soft', 'surface'].map(function (appearance, index) { return (<div key={appearance} className="">
|
101
|
-
<TextArea placeholder="Reply to comment…" {...args} appearance={appearance}/>
|
102
|
-
</div>); })}
|
103
|
-
</div>);
|
91
|
+
return (_jsx("div", { className: "grid gap-3", children: ['classic', 'soft', 'surface'].map(function (appearance, index) { return (_jsx("div", { className: "", children: _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { appearance: appearance })) }, appearance)); }) }));
|
104
92
|
};
|
105
93
|
export var Radius = function (_a) {
|
106
94
|
var args = __rest(_a, []);
|
107
|
-
return (
|
108
|
-
{radiusOptions.map(function (radius, index) { return (<div key={radius} className="">
|
109
|
-
<TextArea placeholder="Reply to comment…" {...args} radius={radius}/>
|
110
|
-
</div>); })}
|
111
|
-
</div>);
|
95
|
+
return (_jsx("div", { className: "grid gap-3", children: radiusOptions.map(function (radius, index) { return (_jsx("div", { className: "", children: _jsx(TextArea, __assign({ placeholder: "Reply to comment\u2026" }, args, { radius: radius })) }, radius)); }) }));
|
112
96
|
};
|
@@ -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 Radius: ({ ...args }: {
|
109
109
|
[x: string]: any;
|
110
|
-
}) => import("react").JSX.Element;
|
110
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
111
111
|
export declare const Appearance: ({ ...args }: {
|
112
112
|
[x: string]: any;
|
113
|
-
}) => import("react").JSX.Element;
|
113
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
114
114
|
export declare const States: ({ ...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 { TextField, TextFieldSlot } from '../../components/TextField/index';
|
24
25
|
import { commonArgTypes, radiusOptions } from '../../constants';
|
25
26
|
import { DotsHorizontalIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
|
@@ -67,54 +68,21 @@ var meta = {
|
|
67
68
|
export default meta;
|
68
69
|
export var Default = function (_a) {
|
69
70
|
var args = __rest(_a, []);
|
70
|
-
return
|
71
|
+
return _jsx(TextField, __assign({ placeholder: "Search the docs..." }, args));
|
71
72
|
};
|
72
73
|
export var Size = function (_a) {
|
73
74
|
var args = __rest(_a, []);
|
74
|
-
return (
|
75
|
-
<TextField placeholder="Search the docs..." {...args} size={'small'}></TextField>
|
76
|
-
<TextField placeholder="Search the docs..." {...args} size={'medium'}></TextField>
|
77
|
-
<TextField placeholder="Search the docs..." {...args} size={'large'}></TextField>
|
78
|
-
</div>);
|
75
|
+
return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { size: 'small' })), _jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { size: 'medium' })), _jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { size: 'large' }))] }));
|
79
76
|
};
|
80
77
|
export var Radius = function (_a) {
|
81
78
|
var args = __rest(_a, []);
|
82
|
-
return (
|
83
|
-
{radiusOptions.map(function (radius) { return (<div key={radius} className="pb-1">
|
84
|
-
<TextField placeholder="Search the docs..." key={radius} radius={radius} {...args}/>
|
85
|
-
</div>); })}
|
86
|
-
</div>);
|
79
|
+
return (_jsx("div", { children: radiusOptions.map(function (radius) { return (_jsx("div", { className: "pb-1", children: _jsx(TextField, __assign({ placeholder: "Search the docs...", radius: radius }, args), radius) }, radius)); }) }));
|
87
80
|
};
|
88
81
|
export var Appearance = function (_a) {
|
89
82
|
var args = __rest(_a, []);
|
90
|
-
return (
|
91
|
-
{['classic', 'soft', 'surface'].map(function (appearance) { return (<div key={appearance} className="pb-1">
|
92
|
-
<TextField placeholder="Search the docs..." key={appearance} appearance={appearance} {...args}/>
|
93
|
-
</div>); })}
|
94
|
-
</div>);
|
83
|
+
return (_jsx("div", { children: ['classic', 'soft', 'surface'].map(function (appearance) { return (_jsx("div", { className: "pb-1", children: _jsx(TextField, __assign({ placeholder: "Search the docs...", appearance: appearance }, args), appearance) }, appearance)); }) }));
|
95
84
|
};
|
96
85
|
export var States = function (_a) {
|
97
86
|
var args = __rest(_a, []);
|
98
|
-
return (
|
99
|
-
<TextField placeholder="Search the docs..." {...args}>
|
100
|
-
<TextFieldSlot>
|
101
|
-
<MagnifyingGlassIcon height="16" width="16"/>
|
102
|
-
</TextFieldSlot>
|
103
|
-
</TextField>
|
104
|
-
|
105
|
-
<TextField placeholder="Search the docs..." {...args}>
|
106
|
-
<TextFieldSlot side={'right'}>
|
107
|
-
<DotsHorizontalIcon height="14" width="14"/>
|
108
|
-
</TextFieldSlot>
|
109
|
-
</TextField>
|
110
|
-
|
111
|
-
<TextField {...args}>
|
112
|
-
<TextFieldSlot>
|
113
|
-
<MagnifyingGlassIcon height="16" width="16"/>
|
114
|
-
</TextFieldSlot>
|
115
|
-
<TextFieldSlot>
|
116
|
-
<DotsHorizontalIcon height="14" width="14"/>
|
117
|
-
</TextFieldSlot>
|
118
|
-
</TextField>
|
119
|
-
</div>);
|
87
|
+
return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { children: _jsx(TextFieldSlot, { children: _jsx(MagnifyingGlassIcon, { height: "16", width: "16" }) }) })), _jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { children: _jsx(TextFieldSlot, { side: 'right', children: _jsx(DotsHorizontalIcon, { height: "14", width: "14" }) }) })), _jsxs(TextField, __assign({}, args, { children: [_jsx(TextFieldSlot, { children: _jsx(MagnifyingGlassIcon, { height: "16", width: "16" }) }), _jsx(TextFieldSlot, { children: _jsx(DotsHorizontalIcon, { height: "14", width: "14" }) })] }))] }));
|
120
88
|
};
|
@@ -129,10 +129,10 @@ declare const meta: {
|
|
129
129
|
export default meta;
|
130
130
|
export declare const Default: ({ ...args }: {
|
131
131
|
[x: string]: any;
|
132
|
-
}) => import("react").JSX.Element;
|
132
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
133
133
|
export declare const NoTitleToast: ({ ...args }: {
|
134
134
|
[x: string]: any;
|
135
|
-
}) => import("react").JSX.Element;
|
135
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
136
136
|
export declare const NoButtonToast: ({ ...args }: {
|
137
137
|
[x: string]: any;
|
138
|
-
}) => import("react").JSX.Element;
|
138
|
+
}) => 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 { useState } from 'react';
|
24
25
|
import { commonArgTypes, sizeOptions } from '../../constants';
|
25
26
|
import { Toast, ToastDescription, ToastTitle, ToastActionButton } from 'components/Toast';
|
@@ -89,34 +90,15 @@ export default meta;
|
|
89
90
|
export var Default = function (_a) {
|
90
91
|
var args = __rest(_a, []);
|
91
92
|
var _b = useState(false), open = _b[0], setOpen = _b[1];
|
92
|
-
return (
|
93
|
-
<Button onClick={function () { return setOpen(true); }}>토스트 메세지 호출</Button>
|
94
|
-
<Toast openToast={open} setOpenToast={setOpen} {...args}>
|
95
|
-
<ToastTitle titleText={args.titleText}>토스트 타이틀</ToastTitle>
|
96
|
-
<ToastDescription contentText={args.contentText}>토스트 내용이 위치합니다</ToastDescription>
|
97
|
-
<ToastActionButton altText="액션버튼">Action</ToastActionButton>
|
98
|
-
</Toast>
|
99
|
-
</div>);
|
93
|
+
return (_jsxs("div", { children: [_jsx(Button, { onClick: function () { return setOpen(true); }, children: "\uD1A0\uC2A4\uD2B8 \uBA54\uC138\uC9C0 \uD638\uCD9C" }), _jsxs(Toast, __assign({ openToast: open, setOpenToast: setOpen }, args, { children: [_jsx(ToastTitle, { titleText: args.titleText, children: "\uD1A0\uC2A4\uD2B8 \uD0C0\uC774\uD2C0" }), _jsx(ToastDescription, { contentText: args.contentText, children: "\uD1A0\uC2A4\uD2B8 \uB0B4\uC6A9\uC774 \uC704\uCE58\uD569\uB2C8\uB2E4" }), _jsx(ToastActionButton, { altText: "\uC561\uC158\uBC84\uD2BC", children: "Action" })] }))] }));
|
100
94
|
};
|
101
95
|
export var NoTitleToast = function (_a) {
|
102
96
|
var args = __rest(_a, []);
|
103
97
|
var _b = useState(false), open = _b[0], setOpen = _b[1];
|
104
|
-
return (
|
105
|
-
<Button onClick={function () { return setOpen(true); }}>타이틀 없음</Button>
|
106
|
-
<Toast openToast={open} setOpenToast={setOpen} {...args}>
|
107
|
-
<ToastDescription>토스트 내용이 위치합니다</ToastDescription>
|
108
|
-
<ToastActionButton altText="액션버튼">닫기</ToastActionButton>
|
109
|
-
</Toast>
|
110
|
-
</div>);
|
98
|
+
return (_jsxs("div", { children: [_jsx(Button, { onClick: function () { return setOpen(true); }, children: "\uD0C0\uC774\uD2C0 \uC5C6\uC74C" }), _jsxs(Toast, __assign({ openToast: open, setOpenToast: setOpen }, args, { children: [_jsx(ToastDescription, { children: "\uD1A0\uC2A4\uD2B8 \uB0B4\uC6A9\uC774 \uC704\uCE58\uD569\uB2C8\uB2E4" }), _jsx(ToastActionButton, { altText: "\uC561\uC158\uBC84\uD2BC", children: "\uB2EB\uAE30" })] }))] }));
|
111
99
|
};
|
112
100
|
export var NoButtonToast = function (_a) {
|
113
101
|
var args = __rest(_a, []);
|
114
102
|
var _b = useState(false), open = _b[0], setOpen = _b[1];
|
115
|
-
return (
|
116
|
-
<Button onClick={function () { return setOpen(true); }}>버튼 없음</Button>
|
117
|
-
<Toast openToast={open} setOpenToast={setOpen} {...args}>
|
118
|
-
<ToastTitle>토스트 타이틀</ToastTitle>
|
119
|
-
<ToastDescription>토스트 내용이 위치합니다</ToastDescription>
|
120
|
-
</Toast>
|
121
|
-
</div>);
|
103
|
+
return (_jsxs("div", { children: [_jsx(Button, { onClick: function () { return setOpen(true); }, children: "\uBC84\uD2BC \uC5C6\uC74C" }), _jsxs(Toast, __assign({ openToast: open, setOpenToast: setOpen }, args, { children: [_jsx(ToastTitle, { children: "\uD1A0\uC2A4\uD2B8 \uD0C0\uC774\uD2C0" }), _jsx(ToastDescription, { children: "\uD1A0\uC2A4\uD2B8 \uB0B4\uC6A9\uC774 \uC704\uCE58\uD569\uB2C8\uB2E4" })] }))] }));
|
122
104
|
};
|
@@ -100,16 +100,16 @@ declare const meta: {
|
|
100
100
|
export default meta;
|
101
101
|
export declare const Default: ({ ...args }: {
|
102
102
|
[x: string]: any;
|
103
|
-
}) => import("react").JSX.Element;
|
103
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
104
104
|
export declare const Radius: ({ ...args }: {
|
105
105
|
[x: string]: any;
|
106
|
-
}) => import("react").JSX.Element;
|
106
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
107
107
|
export declare const Size: ({ ...args }: {
|
108
108
|
[x: string]: any;
|
109
|
-
}) => import("react").JSX.Element;
|
109
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
110
110
|
export declare const WithText: ({ ...args }: {
|
111
111
|
[x: string]: any;
|
112
|
-
}) => import("react").JSX.Element;
|
112
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
113
113
|
export declare const Appearance: ({ ...args }: {
|
114
114
|
[x: string]: any;
|
115
|
-
}) => import("react").JSX.Element;
|
115
|
+
}) => 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 } from "react/jsx-runtime";
|
23
24
|
import { commonArgTypes, radiusOptions, sizeOptions, appearanceOptions } from '../../constants';
|
24
25
|
import { FontBoldIcon } from '@radix-ui/react-icons';
|
25
26
|
import { Toggle, ToggleWithText } from '../../components/Toggle';
|
@@ -68,39 +69,21 @@ var meta = {
|
|
68
69
|
export default meta;
|
69
70
|
export var Default = function (_a) {
|
70
71
|
var args = __rest(_a, []);
|
71
|
-
return (
|
72
|
-
<Toggle {...args} aria-label="Toggle italic">
|
73
|
-
<FontBoldIcon />
|
74
|
-
</Toggle>
|
75
|
-
</div>);
|
72
|
+
return (_jsx("div", { className: "flex items-center space-x-4", children: _jsx(Toggle, __assign({}, args, { "aria-label": "Toggle italic", children: _jsx(FontBoldIcon, {}) })) }));
|
76
73
|
};
|
77
74
|
export var Radius = function (_a) {
|
78
75
|
var args = __rest(_a, []);
|
79
|
-
return (
|
80
|
-
{radiusOptions.map(function (radius) { return (<Toggle key={radius} aria-label="Toggle italic" {...args} radius={radius}>
|
81
|
-
<FontBoldIcon />
|
82
|
-
</Toggle>); })}
|
83
|
-
</div>);
|
76
|
+
return (_jsx("div", { className: "flex items-center space-x-4", children: radiusOptions.map(function (radius) { return (_jsx(Toggle, __assign({ "aria-label": "Toggle italic" }, args, { radius: radius, children: _jsx(FontBoldIcon, {}) }), radius)); }) }));
|
84
77
|
};
|
85
78
|
export var Size = function (_a) {
|
86
79
|
var args = __rest(_a, []);
|
87
|
-
return (
|
88
|
-
{['small', 'medium', 'large'].map(function (size) { return (<Toggle key={size} aria-label="Toggle italic" {...args} size={size}>
|
89
|
-
<FontBoldIcon />
|
90
|
-
</Toggle>); })}
|
91
|
-
</div>);
|
80
|
+
return (_jsx("div", { className: "flex items-center space-x-4", children: ['small', 'medium', 'large'].map(function (size) { return (_jsx(Toggle, __assign({ "aria-label": "Toggle italic" }, args, { size: size, children: _jsx(FontBoldIcon, {}) }), size)); }) }));
|
92
81
|
};
|
93
82
|
export var WithText = function (_a) {
|
94
83
|
var args = __rest(_a, []);
|
95
|
-
return (
|
96
|
-
<FontBoldIcon />
|
97
|
-
</ToggleWithText>);
|
84
|
+
return (_jsx(ToggleWithText, __assign({}, args, { "aria-label": "Toggle italic", text: 'Bold', children: _jsx(FontBoldIcon, {}) })));
|
98
85
|
};
|
99
86
|
export var Appearance = function (_a) {
|
100
87
|
var args = __rest(_a, []);
|
101
|
-
return (
|
102
|
-
{['ghost', 'soft', 'surface', 'outline'].map(function (appearance) { return (<Toggle key={appearance} aria-label="Toggle italic" {...args} appearance={appearance}>
|
103
|
-
<FontBoldIcon />
|
104
|
-
</Toggle>); })}
|
105
|
-
</div>);
|
88
|
+
return (_jsx("div", { className: "flex items-center space-x-4", children: ['ghost', 'soft', 'surface', 'outline'].map(function (appearance) { return (_jsx(Toggle, __assign({ "aria-label": "Toggle italic" }, args, { appearance: appearance, children: _jsx(FontBoldIcon, {}) }), appearance)); }) }));
|
106
89
|
};
|