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