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

package/dist/stories/dialog/Dialog.stories.jsx

@@ -54,29 +54,29 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Dialog {...args}>
-    <DialogTrigger>
-      <Button>Edit profile</Button>
-    </DialogTrigger>
-    <DialogContent {...args}>
-      <DialogTitle {...args}>Edit profile</DialogTitle>
-      <DialogDescription {...args}>Make changes to your profile.</DialogDescription>
-
-      <DialogSlot {...args}>
-        <span>Name</span>
-        <TextField {...args} placeholder="Enter your full name"/>
-        <span>Email</span>
-        <TextField {...args} placeholder="Enter your email"/>
-      </DialogSlot>
-
-      <div className="flex justify-end">
-        <DialogCancel {...args}>
-          <span>Cancel</span>
-        </DialogCancel>
-        <DialogAction {...args}>
-          <span>Save</span>
-        </DialogAction>
-      </div>
-    </DialogContent>
+    return (<Dialog {...args}>
+    <DialogTrigger>
+      <Button>Edit profile</Button>
+    </DialogTrigger>
+    <DialogContent {...args}>
+      <DialogTitle {...args}>Edit profile</DialogTitle>
+      <DialogDescription {...args}>Make changes to your profile.</DialogDescription>
+
+      <DialogSlot {...args}>
+        <span>Name</span>
+        <TextField {...args} placeholder="Enter your full name"/>
+        <span>Email</span>
+        <TextField {...args} placeholder="Enter your email"/>
+      </DialogSlot>
+
+      <div className="flex justify-end">
+        <DialogCancel {...args}>
+          <span>Cancel</span>
+        </DialogCancel>
+        <DialogAction {...args}>
+          <span>Save</span>
+        </DialogAction>
+      </div>
+    </DialogContent>
   </Dialog>);
 };

package/dist/stories/doughnut-chart/DoughnutChart.stories.jsx

@@ -169,8 +169,8 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="w-[300px]">
-      <DoughnutChart labels={args.label} datasets={args.datasets} {...args}/>
+    return (<div className="w-[300px]">
+      <DoughnutChart labels={args.label} datasets={args.datasets} {...args}/>
     </div>);
 };
 export var BorderStyles = function () {
@@ -204,13 +204,13 @@ export var BorderStyles = function () {
             },
         },
     };
-    return (<div className="flex">
-      <div className="w-[200px]">
-        <DoughnutChart datasets={datasets} options={options}/>
-      </div>
-      <div className="w-[200px]">
-        <DoughnutChart datasets={dashDatasets} options={dashOptions}/>
-      </div>
+    return (<div className="flex">
+      <div className="w-[200px]">
+        <DoughnutChart datasets={datasets} options={options}/>
+      </div>
+      <div className="w-[200px]">
+        <DoughnutChart datasets={dashDatasets} options={dashOptions}/>
+      </div>
     </div>);
 };
 export var DataLabels = function () {

package/dist/stories/dropdown-menu/DropdownMenu.stories.jsx

@@ -58,113 +58,113 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<DropdownMenu>
-      <DropdownMenuTrigger {...args}>
-        <Button>
-          Options
-          <ChevronDownIcon />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent {...args}>
-        <DropdownMenuLabel {...args}>라벨</DropdownMenuLabel>
-        <DropdownMenuItem {...args} shortcut="⌘ E">
-          기본 아이템
-        </DropdownMenuItem>
-        <DropdownMenuItem {...args} disabled>
-          사용불가 아이템
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuCheckboxItem checked {...args}>
-          체크박스1
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem checked={false} {...args}>
-          체크박스2
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuSeparator />
-
-        <DropdownMenuRadioGroup value="option1">
-          <DropdownMenuRadioItem value="option1" {...args}>
-            라디오1
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="option2" {...args}>
-            라디오2
-          </DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-        <DropdownMenuSeparator />
-
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger {...args}>More Menu</DropdownMenuSubTrigger>
-          <DropdownMenuSubContent {...args}>
-            <DropdownMenuItem {...args}>project</DropdownMenuItem>
-            <DropdownMenuItem {...args}>folder</DropdownMenuItem>
-
-            <DropdownMenuSeparator />
-            <DropdownMenuItem {...args}>options</DropdownMenuItem>
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
-      </DropdownMenuContent>
+    return (<DropdownMenu>
+      <DropdownMenuTrigger {...args}>
+        <Button>
+          Options
+          <ChevronDownIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent {...args}>
+        <DropdownMenuLabel {...args}>라벨</DropdownMenuLabel>
+        <DropdownMenuItem {...args} shortcut="⌘ E">
+          기본 아이템
+        </DropdownMenuItem>
+        <DropdownMenuItem {...args} disabled>
+          사용불가 아이템
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem checked {...args}>
+          체크박스1
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem checked={false} {...args}>
+          체크박스2
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuSeparator />
+
+        <DropdownMenuRadioGroup value="option1">
+          <DropdownMenuRadioItem value="option1" {...args}>
+            라디오1
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="option2" {...args}>
+            라디오2
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+        <DropdownMenuSeparator />
+
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger {...args}>More Menu</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent {...args}>
+            <DropdownMenuItem {...args}>project</DropdownMenuItem>
+            <DropdownMenuItem {...args}>folder</DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+            <DropdownMenuItem {...args}>options</DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuContent>
     </DropdownMenu>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {radiusOptions.map(function (radius) { return (<DropdownMenu key={radius}>
-        <DropdownMenuTrigger {...args} radius={radius}>
-          <Button>
-            {radius}
-            <ChevronDownIcon />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent {...args} radius={radius}>
-          <DropdownMenuItem {...args} radius={radius}>
-            메뉴1
-          </DropdownMenuItem>
-          <DropdownMenuItem {...args} radius={radius}>
-            메뉴2
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>); })}
+    return (<div className="flex items-center space-x-4">
+    {radiusOptions.map(function (radius) { return (<DropdownMenu key={radius}>
+        <DropdownMenuTrigger {...args} radius={radius}>
+          <Button>
+            {radius}
+            <ChevronDownIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent {...args} radius={radius}>
+          <DropdownMenuItem {...args} radius={radius}>
+            메뉴1
+          </DropdownMenuItem>
+          <DropdownMenuItem {...args} radius={radius}>
+            메뉴2
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {['small', 'medium'].map(function (size) { return (<DropdownMenu key={size}>
-        <DropdownMenuTrigger {...args} size={size}>
-          <Button>
-            {size}
-            <ChevronDownIcon />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent {...args} size={size}>
-          <DropdownMenuItem {...args} size={size}>
-            메뉴1
-          </DropdownMenuItem>
-          <DropdownMenuItem {...args} size={size}>
-            메뉴2
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>); })}
+    return (<div className="flex items-center space-x-4">
+    {['small', 'medium'].map(function (size) { return (<DropdownMenu key={size}>
+        <DropdownMenuTrigger {...args} size={size}>
+          <Button>
+            {size}
+            <ChevronDownIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent {...args} size={size}>
+          <DropdownMenuItem {...args} size={size}>
+            메뉴1
+          </DropdownMenuItem>
+          <DropdownMenuItem {...args} size={size}>
+            메뉴2
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>); })}
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {['solid', 'soft'].map(function (appearance) { return (<DropdownMenu key={appearance}>
-        <DropdownMenuTrigger {...args} appearance={appearance}>
-          <Button>
-            {appearance}
-            <ChevronDownIcon />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent {...args}>
-          <DropdownMenuItem {...args} appearance={appearance}>
-            메뉴1
-          </DropdownMenuItem>
-          <DropdownMenuItem {...args} appearance={appearance}>
-            메뉴2
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>); })}
+    return (<div className="flex items-center space-x-4">
+    {['solid', 'soft'].map(function (appearance) { return (<DropdownMenu key={appearance}>
+        <DropdownMenuTrigger {...args} appearance={appearance}>
+          <Button>
+            {appearance}
+            <ChevronDownIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent {...args}>
+          <DropdownMenuItem {...args} appearance={appearance}>
+            메뉴1
+          </DropdownMenuItem>
+          <DropdownMenuItem {...args} appearance={appearance}>
+            메뉴2
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>); })}
   </div>);
 };

package/dist/stories/header/Header.stories.jsx

@@ -76,41 +76,41 @@ export var Default = function (_a) {
 };
 export var Weight = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-      {weightOptions.map(function (weight) { return (<Header key={weight} {...args} weight={weight}>
-          The quick brown fox jumps over the lazy dog
-        </Header>); })}
+    return (<div>
+      {weightOptions.map(function (weight) { return (<Header key={weight} {...args} weight={weight}>
+          The quick brown fox jumps over the lazy dog
+        </Header>); })}
     </div>);
 };
 export var Color = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    {colorOptions.map(function (color) { return (<Header key={color} {...args} color={color}>
-        The quick brown fox jumps over the lazy dog
-      </Header>); })}
+    return (<div>
+    {colorOptions.map(function (color) { return (<Header key={color} {...args} color={color}>
+        The quick brown fox jumps over the lazy dog
+      </Header>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    {typoSizeOptions.map(function (size) { return (<Header key={size} {...args} size={size}>
-        The quick brown fox jumps over the lazy dog
-      </Header>); })}
+    return (<div>
+    {typoSizeOptions.map(function (size) { return (<Header key={size} {...args} size={size}>
+        The quick brown fox jumps over the lazy dog
+      </Header>); })}
   </div>);
 };
 export var Headers = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    {headerOptions.map(function (headers) { return (<Header key={headers} {...args} headers={headers}>
-        The quick brown fox jumps over the lazy dog
-      </Header>); })}
+    return (<div>
+    {headerOptions.map(function (headers) { return (<Header key={headers} {...args} headers={headers}>
+        The quick brown fox jumps over the lazy dog
+      </Header>); })}
   </div>);
 };
 export var Align = function (_a) {
     var args = __rest(_a, []);
-    return (<div>
-    {['left', 'center', 'right'].map(function (align) { return (<Header key={align} {...args} align={align}>
-        The quick brown fox jumps over the lazy dog
-      </Header>); })}
+    return (<div>
+    {['left', 'center', 'right'].map(function (align) { return (<Header key={align} {...args} align={align}>
+        The quick brown fox jumps over the lazy dog
+      </Header>); })}
   </div>);
 };

package/dist/stories/hover-card/HoverCard.stories.jsx

@@ -62,37 +62,37 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<HoverCard>
-    <HoverCardTrigger>
-      <Link href="#" target="_blank" className="text-indigo-9 dark:text-indigoDark-9 hover:underline">
-        @radix_ui
-      </Link>
-    </HoverCardTrigger>
-    <HoverCardContent {...args}>
-      <div>
-        <strong>Typography</strong> is the art and technique of arranging type to make written
-        language legible, readable and appealing when displayed.
-      </div>
-    </HoverCardContent>
+    return (<HoverCard>
+    <HoverCardTrigger>
+      <Link href="#" target="_blank" className="text-indigo-9 dark:text-indigoDark-9 hover:underline">
+        @radix_ui
+      </Link>
+    </HoverCardTrigger>
+    <HoverCardContent {...args}>
+      <div>
+        <strong>Typography</strong> is the art and technique of arranging type to make written
+        language legible, readable and appealing when displayed.
+      </div>
+    </HoverCardContent>
   </HoverCard>);
 };
 export var WithInset = function (_a) {
     var args = __rest(_a, []);
-    return (<HoverCard>
-    <HoverCardTrigger>
-      <Link href="https://twitter.com/radix_ui" target="_blank" className="text-indigo-9 dark:text-indigoDark-9 hover:underline">
-        @radix_ui
-      </Link>
-    </HoverCardTrigger>
-    <HoverCardContent {...args}>
-      <div className="flex">
-        <Inset side="left" pr="current">
-          <Image src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?&auto=format&fit=crop&w=300&q=90" alt="Bold typography" width={150} height={150} className="h-full block object-cover"/>
-        </Inset>
-        <span>
-          <strong>Typography</strong> is the art and technique.
-        </span>
-      </div>
-    </HoverCardContent>
+    return (<HoverCard>
+    <HoverCardTrigger>
+      <Link href="https://twitter.com/radix_ui" target="_blank" className="text-indigo-9 dark:text-indigoDark-9 hover:underline">
+        @radix_ui
+      </Link>
+    </HoverCardTrigger>
+    <HoverCardContent {...args}>
+      <div className="flex">
+        <Inset side="left" pr="current">
+          <Image src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?&auto=format&fit=crop&w=300&q=90" alt="Bold typography" width={150} height={150} className="h-full block object-cover"/>
+        </Inset>
+        <span>
+          <strong>Typography</strong> is the art and technique.
+        </span>
+      </div>
+    </HoverCardContent>
   </HoverCard>);
 };

package/dist/stories/inset/Inset.stories.jsx

@@ -46,34 +46,34 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Inset clip="padding-box" side="top" pb="current" className="w-[290px]" {...args}>
+    return (<Inset clip="padding-box" side="top" pb="current" className="w-[290px]" {...args}>
     <Image src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Bold typography" width={100} height={200} style={{
             display: 'block',
             objectFit: 'cover',
             width: '100%',
             backgroundColor: 'var(--gray-5)',
-        }}/>
-    <div className="p-4">
-      <span>
-        Typography is the art and technique of arranging type to make written language legible.
-      </span>
-    </div>
+        }}/>
+    <div className="p-4">
+      <span>
+        Typography is the art and technique of arranging type to make written language legible.
+      </span>
+    </div>
   </Inset>);
 };
 export var Horizontal = function (_a) {
     var args = __rest(_a, []);
-    return (<Inset side="left" pr="current" className="w-[400px]" {...args}>
-    <div className="flex">
+    return (<Inset side="left" pr="current" className="w-[400px]" {...args}>
+    <div className="flex">
       <Image src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Bold typography" width={150} height={140} style={{
             display: 'block',
             objectFit: 'cover',
             backgroundColor: 'var(--gray-5)',
-        }}/>
-      <div className="p-4">
-        <span>
-          Typography is the art and technique of arranging type to make written language legible.
-        </span>
-      </div>
-    </div>
+        }}/>
+      <div className="p-4">
+        <span>
+          Typography is the art and technique of arranging type to make written language legible.
+        </span>
+      </div>
+    </div>
   </Inset>);
 };

package/dist/stories/label/Label.stories.jsx

@@ -78,35 +78,35 @@ export var Default = function (_a) {
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="">
-    {scalingOptions.map(function (scaling, index) { return (<div key={scaling} className="flex pt-3 items-center space-x-2">
-        <Label scaling={scaling} {...args}>
-          Label component
-        </Label>
-      </div>); })}
+    return (<div className="">
+    {scalingOptions.map(function (scaling, index) { return (<div key={scaling} className="flex pt-3 items-center space-x-2">
+        <Label scaling={scaling} {...args}>
+          Label component
+        </Label>
+      </div>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-wrap items-center gap-[15px] px-5">
-    <Label size={'small'} {...args}>
-      Label component
-    </Label>
-    <Label size={'medium'} {...args}>
-      Label component
-    </Label>
-    <Label size={'large'} {...args}>
-      Label component
-    </Label>
+    return (<div className="flex flex-wrap items-center gap-[15px] px-5">
+    <Label size={'small'} {...args}>
+      Label component
+    </Label>
+    <Label size={'medium'} {...args}>
+      Label component
+    </Label>
+    <Label size={'large'} {...args}>
+      Label component
+    </Label>
   </div>);
 };
 export var Weight = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="">
-    {['regular', 'bold'].map(function (weight, index) { return (<div key={weight} className="flex pt-3 items-center space-x-2">
-        <Label weight={weight} {...args}>
-          Label component
-        </Label>
-      </div>); })}
+    return (<div className="">
+    {['regular', 'bold'].map(function (weight, index) { return (<div key={weight} className="flex pt-3 items-center space-x-2">
+        <Label weight={weight} {...args}>
+          Label component
+        </Label>
+      </div>); })}
   </div>);
 };

package/dist/stories/menubar/Menubar.stories.jsx

@@ -87,49 +87,49 @@ export var Default = function (_a) {
     var RADIO_ITEMS = ['구글', '네이버', '인트라넷'];
     var _b = useState([CHECK_ITEMS[0]]), checkedSelection = _b[0], setCheckedSelection = _b[1];
     var _c = useState(RADIO_ITEMS[0]), radioSelection = _c[0], setRadioSelection = _c[1];
-    return (<Menubar {...args}>
-      {/* 메뉴-기본 */}
-      <MenubarMenu>
-        <MenubarTrigger>파일</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem shortcut="⌘ T">새 탭</MenubarItem>
-          <MenubarItem shortcut="⌘ N">새 창</MenubarItem>
-          <MenubarItem disabled>사용불가</MenubarItem>
-          <MenubarSeparator />
-          <MenubarSub>
-            <MenubarSubTrigger>공유하기</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>이메일</MenubarItem>
-              <MenubarItem>메신저</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-        </MenubarContent>
-      </MenubarMenu>
-      {/* 메뉴-체크 */}
-      <MenubarMenu>
-        <MenubarTrigger>보기</MenubarTrigger>
-        <MenubarContent>
+    return (<Menubar {...args}>
+      {/* 메뉴-기본 */}
+      <MenubarMenu>
+        <MenubarTrigger>파일</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem shortcut="⌘ T">새 탭</MenubarItem>
+          <MenubarItem shortcut="⌘ N">새 창</MenubarItem>
+          <MenubarItem disabled>사용불가</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>공유하기</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>이메일</MenubarItem>
+              <MenubarItem>메신저</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+        </MenubarContent>
+      </MenubarMenu>
+      {/* 메뉴-체크 */}
+      <MenubarMenu>
+        <MenubarTrigger>보기</MenubarTrigger>
+        <MenubarContent>
           {CHECK_ITEMS.map(function (item) { return (<MenubarCheckboxItem key={item} checked={checkedSelection.includes(item)} onCheckedChange={function () {
                 return setCheckedSelection(function (current) {
                     return current.includes(item)
                         ? current.filter(function (el) { return el !== item; })
                         : current.concat(item);
                 });
-            }}>
-              {item}
-            </MenubarCheckboxItem>); })}
-        </MenubarContent>
-      </MenubarMenu>
-      {/* 메뉴-라디오 */}
-      <MenubarMenu>
-        <MenubarTrigger>프로필</MenubarTrigger>
-        <MenubarContent>
-          <MenubarRadioGroup value={radioSelection} onValueChange={setRadioSelection}>
-            {RADIO_ITEMS.map(function (item) { return (<MenubarRadioItem key={item} value={item}>
-                {item}
-              </MenubarRadioItem>); })}
-          </MenubarRadioGroup>
-        </MenubarContent>
-      </MenubarMenu>
+            }}>
+              {item}
+            </MenubarCheckboxItem>); })}
+        </MenubarContent>
+      </MenubarMenu>
+      {/* 메뉴-라디오 */}
+      <MenubarMenu>
+        <MenubarTrigger>프로필</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value={radioSelection} onValueChange={setRadioSelection}>
+            {RADIO_ITEMS.map(function (item) { return (<MenubarRadioItem key={item} value={item}>
+                {item}
+              </MenubarRadioItem>); })}
+          </MenubarRadioGroup>
+        </MenubarContent>
+      </MenubarMenu>
     </Menubar>);
 };