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

package/dist/stories/navigation-menu/NavigationMenu.stories.d.ts

@@ -15,8 +15,9 @@ declare const meta: {
         };
     };
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        value?: string | undefined;
         className?: string | undefined;
-        color?: "black" | "slate" | "olive" | "sand" | "tomato" | "red" | "ruby" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "indigo" | "blue" | "cyan" | "teal" | "jade" | "green" | "grass" | "brown" | "bronze" | "gold" | "sky" | "mint" | "lime" | "yellow" | "amber" | "orange" | "white" | undefined;
+        color?: "slate" | "olive" | "sand" | "tomato" | "red" | "ruby" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "indigo" | "blue" | "cyan" | "teal" | "jade" | "green" | "grass" | "brown" | "bronze" | "gold" | "sky" | "mint" | "lime" | "yellow" | "amber" | "orange" | "black" | "white" | undefined;
         asChild?: boolean | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | undefined;
@@ -63,13 +64,13 @@ declare const meta: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         inert?: boolean | undefined;
         tw?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
-        "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+        "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -84,7 +85,7 @@ declare const meta: {
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        "aria-dropeffect"?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
@@ -285,14 +286,13 @@ declare const meta: {
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
         orientation?: ("horizontal" | "vertical") | undefined;
-        value?: string | undefined;
         onValueChange?: ((value: string) => void) | undefined;
         delayDuration?: number | undefined;
         skipDelayDuration?: number | undefined;
-        appearance?: "ghost" | "solid" | undefined;
-        radius?: "medium" | "small" | "none" | "large" | "full" | null | undefined;
-        scaling?: "100%" | "90%" | "95%" | "105%" | "110%" | null | undefined;
-        size?: "medium" | "small" | null | undefined;
+        appearance?: "solid" | "ghost" | undefined;
+        radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
+        scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
+        size?: "small" | "medium" | null | undefined;
         ref?: import("react").LegacyRef<HTMLElement> | undefined;
     }>) => import("react").JSX.Element)[];
     tags: string[];

package/dist/stories/navigation-menu/NavigationMenu.stories.jsx

@@ -24,7 +24,7 @@ import { appearanceOptions, commonArgTypes, sizeOptions } from '../../constants'
 import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from 'components/NavigationMenu';
 import Image from 'next/image';
 import { Text } from 'Typography/Text';
-import { Card } from 'components';
+import Card from 'components/Card';
 var meta = {
     title: 'Component/NavigationMenu',
     component: NavigationMenu,
@@ -40,8 +40,8 @@ var meta = {
         },
     },
     decorators: [
-        function (Story) { return (<div className="h-[300px] p-2">
-        <Story />
+        function (Story) { return (<div className="h-[300px] p-2">
+        <Story />
       </div>); },
     ],
     tags: ['autodocs'],
@@ -76,69 +76,69 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<NavigationMenu {...args}>
-      <NavigationMenuList>
-        <NavigationMenuItem>
-          <NavigationMenuTrigger>홈페이지</NavigationMenuTrigger>
-          <NavigationMenuContent>
-            <div className="flex space-x-2">
-              <Image className="rounded" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" width={120} height={200}/>
-              <div className="space-y-2">
-                <Card size={'small'} className="w-[150px] hover:bg-red-3 dark:hover:bg-redDark-3">
-                  <Text weight={'bold'}>타이틀</Text>
-                  <Text>내용</Text>
-                </Card>
-                <Card size={'small'} className="w-[150px] hover:bg-red-3 dark:hover:bg-redDark-3">
-                  <Text weight={'bold'}>타이틀</Text>
-                  <Text>내용</Text>
-                </Card>
-                <Card size={'small'} className="w-[150px] hover:bg-red-3 dark:hover:bg-redDark-3">
-                  <Text weight={'bold'}>타이틀</Text>
-                  <Text>내용</Text>
-                </Card>
-              </div>
-            </div>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
-
-        <NavigationMenuItem>
-          <NavigationMenuTrigger>개요</NavigationMenuTrigger>
-          <NavigationMenuContent>
-            <div className="flex flex-col space-y-3">
-              <Card className="hover:bg-red-3 dark:hover:bg-redDark-3" appearance="ghost">
-                <div className="flex flex-col">
-                  <Text weight={'bold'} color="red">
-                    타이틀이 들어가는 자리입니다.
-                  </Text>
-                  <Text>내용이 들어가는 자리입니다.</Text>
-                </div>
-              </Card>
-              <Card className="hover:bg-red-3 dark:hover:bg-redDark-3" appearance="ghost">
-                <div className="flex flex-col">
-                  <Text weight={'bold'} color="red">
-                    타이틀이 들어가는 자리입니다.
-                  </Text>
-                  <Text>내용이 들어가는 자리입니다.</Text>
-                </div>
-              </Card>
-              <Card className="hover:bg-red-3 dark:hover:bg-redDark-3" appearance="ghost">
-                <div className="flex flex-col">
-                  <Text weight={'bold'} color="red">
-                    타이틀이 들어가는 자리입니다.
-                  </Text>
-                  <Text>내용이 들어가는 자리입니다.</Text>
-                </div>
-              </Card>
-            </div>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
-
-        <NavigationMenuItem>
-          <NavigationMenuLink href="https://tailwindcss.com/docs/border-radius">
-            tailwind 바로가기
-          </NavigationMenuLink>
-        </NavigationMenuItem>
-      </NavigationMenuList>
-      <NavigationMenuViewport />
+    return (<NavigationMenu {...args}>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>홈페이지</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div className="flex space-x-2">
+              <Image className="rounded" src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape photograph by Tobias Tullius" width={120} height={200}/>
+              <div className="space-y-2">
+                <Card size={'small'} className="w-[150px] hover:bg-red-3 dark:hover:bg-redDark-3">
+                  <Text weight={'bold'}>타이틀</Text>
+                  <Text>내용</Text>
+                </Card>
+                <Card size={'small'} className="w-[150px] hover:bg-red-3 dark:hover:bg-redDark-3">
+                  <Text weight={'bold'}>타이틀</Text>
+                  <Text>내용</Text>
+                </Card>
+                <Card size={'small'} className="w-[150px] hover:bg-red-3 dark:hover:bg-redDark-3">
+                  <Text weight={'bold'}>타이틀</Text>
+                  <Text>내용</Text>
+                </Card>
+              </div>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>개요</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div className="flex flex-col space-y-3">
+              <Card className="hover:bg-red-3 dark:hover:bg-redDark-3" appearance="ghost">
+                <div className="flex flex-col">
+                  <Text weight={'bold'} color="red">
+                    타이틀이 들어가는 자리입니다.
+                  </Text>
+                  <Text>내용이 들어가는 자리입니다.</Text>
+                </div>
+              </Card>
+              <Card className="hover:bg-red-3 dark:hover:bg-redDark-3" appearance="ghost">
+                <div className="flex flex-col">
+                  <Text weight={'bold'} color="red">
+                    타이틀이 들어가는 자리입니다.
+                  </Text>
+                  <Text>내용이 들어가는 자리입니다.</Text>
+                </div>
+              </Card>
+              <Card className="hover:bg-red-3 dark:hover:bg-redDark-3" appearance="ghost">
+                <div className="flex flex-col">
+                  <Text weight={'bold'} color="red">
+                    타이틀이 들어가는 자리입니다.
+                  </Text>
+                  <Text>내용이 들어가는 자리입니다.</Text>
+                </div>
+              </Card>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuLink href="https://tailwindcss.com/docs/border-radius">
+            tailwind 바로가기
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+      <NavigationMenuViewport />
     </NavigationMenu>);
 };

package/dist/stories/pie-chart/PieChart.stories.jsx

@@ -174,8 +174,8 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="w-[300px]">
-      <PieChart labels={args.label} datasets={args.datasets} {...args}/>
+    return (<div className="w-[300px]">
+      <PieChart labels={args.label} datasets={args.datasets} {...args}/>
     </div>);
 };
 export var LabelsStyle = function () {
@@ -188,8 +188,8 @@ export var LabelsStyle = function () {
             borderColor: [ruby[9], violet[9], amber[9], green[9]],
         },
     ];
-    return (<div className="flex">
-      {labelStyleList.map(function (labelOption) { return (<div className="w-[200px]" key={labelOption}>
+    return (<div className="flex">
+      {labelStyleList.map(function (labelOption) { return (<div className="w-[200px]" key={labelOption}>
           <PieChart labels={labels} datasets={datasets} options={{
                 plugins: {
                     legend: {
@@ -200,8 +200,8 @@ export var LabelsStyle = function () {
                         position: 'top',
                     },
                 },
-            }}/>
-        </div>); })}
+            }}/>
+        </div>); })}
     </div>);
 };
 export var BorderStyles = function () {
@@ -236,13 +236,13 @@ export var BorderStyles = function () {
             },
         },
     };
-    return (<div className="flex">
-      <div className="w-[200px]">
-        <PieChart datasets={datasets} options={options}/>
-      </div>
-      <div className="w-[200px]">
-        <PieChart datasets={dashDatasets} options={dashOptions}/>
-      </div>
+    return (<div className="flex">
+      <div className="w-[200px]">
+        <PieChart datasets={datasets} options={options}/>
+      </div>
+      <div className="w-[200px]">
+        <PieChart datasets={dashDatasets} options={dashOptions}/>
+      </div>
     </div>);
 };
 export var DataLabels = function () {
@@ -289,12 +289,12 @@ export var DataLabels = function () {
             },
         },
     };
-    return (<div className="flex">
-      <div className="w-[200px]">
-        <PieChart datasets={datasets} options={options}/>
-      </div>
-      <div className="w-[200px]">
-        <PieChart datasets={datasets} options={customOptions}/>
-      </div>
+    return (<div className="flex">
+      <div className="w-[200px]">
+        <PieChart datasets={datasets} options={options}/>
+      </div>
+      <div className="w-[200px]">
+        <PieChart datasets={datasets} options={customOptions}/>
+      </div>
     </div>);
 };

package/dist/stories/popover/Popover.stories.jsx

@@ -59,49 +59,49 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<Popover {...args}>
-    <PopoverTrigger>
-      <Button>Comment</Button>
-    </PopoverTrigger>
-    <PopoverContent {...args}>
+    return (<Popover {...args}>
+    <PopoverTrigger>
+      <Button>Comment</Button>
+    </PopoverTrigger>
+    <PopoverContent {...args}>
       <Avatar imagePath="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop" {...args} size={args.size === 'small'
             ? '2'
             : args.size === 'large'
                 ? '4'
                 : args.size === 'x-large'
                     ? '5'
-                    : '3'}/>
-      <div className="grow">
-        <TextArea placeholder="Write a comment…" {...args} className="w-full"/>
-        <div className="flex mt-3 justify-end">
-          <PopoverClose {...args}>
-            <Button>Comment</Button>
-          </PopoverClose>
-        </div>
-      </div>
-    </PopoverContent>
+                    : '3'}/>
+      <div className="grow">
+        <TextArea placeholder="Write a comment…" {...args} className="w-full"/>
+        <div className="flex mt-3 justify-end">
+          <PopoverClose {...args}>
+            <Button>Comment</Button>
+          </PopoverClose>
+        </div>
+      </div>
+    </PopoverContent>
   </Popover>);
 };
 export var WithInset = function (_a) {
     var args = __rest(_a, []);
-    return (<Popover {...args}>
-    <PopoverTrigger>
-      <Button>Share image</Button>
-    </PopoverTrigger>
-    <PopoverContent {...args}>
-      <div className="grid grid-cols-[130px_1fr]">
-        <Inset side="left" pr="current">
-          <Image src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?&auto=format&fit=crop&w=400&q=80" alt="toggle with inset" width={150} height={150} style={{ objectFit: 'cover', width: '100%', height: '100%' }}/>
-        </Inset>
-        <div>
-          <span>Minimalistic 3D rendering wallpaper.</span>
-          <div className="mt-2 flex-col items-stretch">
-            <PopoverClose {...args}>
-              <Button>Copy link</Button>
-            </PopoverClose>
-          </div>
-        </div>
-      </div>
-    </PopoverContent>
+    return (<Popover {...args}>
+    <PopoverTrigger>
+      <Button>Share image</Button>
+    </PopoverTrigger>
+    <PopoverContent {...args}>
+      <div className="grid grid-cols-[130px_1fr]">
+        <Inset side="left" pr="current">
+          <Image src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?&auto=format&fit=crop&w=400&q=80" alt="toggle with inset" width={150} height={150} style={{ objectFit: 'cover', width: '100%', height: '100%' }}/>
+        </Inset>
+        <div>
+          <span>Minimalistic 3D rendering wallpaper.</span>
+          <div className="mt-2 flex-col items-stretch">
+            <PopoverClose {...args}>
+              <Button>Copy link</Button>
+            </PopoverClose>
+          </div>
+        </div>
+      </div>
+    </PopoverContent>
   </Popover>);
 };

package/dist/stories/progress/Progress.stories.jsx

@@ -62,21 +62,21 @@ export var Default = function (_a) {
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {radiusOptions.map(function (radius) { return (<Progress key={radius} value={25} {...args} radius={radius}/>); })}
+    return (<div className="flex flex-col space-y-3">
+    {radiusOptions.map(function (radius) { return (<Progress key={radius} value={25} {...args} radius={radius}/>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
+    return (<div className="flex flex-col space-y-3">
     {sizeOptions
             .filter(function (value) { return value != 'x-small' && value != 'x-large'; })
-            .map(function (size) { return (<Progress key={size} value={25} {...args} size={size}/>); })}
+            .map(function (size) { return (<Progress key={size} value={25} {...args} size={size}/>); })}
   </div>);
 };
 export var Variant = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {['classic', 'surface', 'soft'].map(function (appearance) { return (<Default key={appearance} value={25} {...args} appearance={appearance}/>); })}
+    return (<div className="flex flex-col space-y-3">
+    {['classic', 'surface', 'soft'].map(function (appearance) { return (<Default key={appearance} value={25} {...args} appearance={appearance}/>); })}
   </div>);
 };

package/dist/stories/radio/Radio.stories.jsx

@@ -71,24 +71,24 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<>
-    <Radio value={'1'} name={'example'} {...args}>
-      radio option1
-    </Radio>
-    <Radio value={'2'} name={'example'} {...args}>
-      radio option2
-    </Radio>
+    return (<>
+    <Radio value={'1'} name={'example'} {...args}>
+      radio option1
+    </Radio>
+    <Radio value={'2'} name={'example'} {...args}>
+      radio option2
+    </Radio>
   </>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {['small', 'medium', 'large'].map(function (size) { return (<Radio key={size} size={size} value={'1'} name={'size'} defaultChecked={size === 'small'} {...args}/>); })}
+    return (<div className="flex items-center space-x-4">
+    {['small', 'medium', 'large'].map(function (size) { return (<Radio key={size} size={size} value={'1'} name={'size'} defaultChecked={size === 'small'} {...args}/>); })}
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    {['classic', 'soft', 'surface'].map(function (appearance) { return (<Radio key={appearance} value={appearance} appearance={appearance} name={'appearance'} defaultChecked={appearance === 'classic'} {...args}/>); })}
+    return (<div className="flex items-center space-x-4">
+    {['classic', 'soft', 'surface'].map(function (appearance) { return (<Radio key={appearance} value={appearance} appearance={appearance} name={'appearance'} defaultChecked={appearance === 'classic'} {...args}/>); })}
   </div>);
 };

package/dist/stories/radio/RadioCards.stories.jsx

@@ -77,77 +77,77 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<RadioCards {...args} defaultValue="1">
-    <RadioCardsItem value="1" {...args}>
-      radioCard 1
-    </RadioCardsItem>
-    <RadioCardsItem value="2" {...args}>
-      radioCard 2
-    </RadioCardsItem>
-    <RadioCardsItem value="3" {...args}>
-      radioCard 3
-    </RadioCardsItem>
+    return (<RadioCards {...args} defaultValue="1">
+    <RadioCardsItem value="1" {...args}>
+      radioCard 1
+    </RadioCardsItem>
+    <RadioCardsItem value="2" {...args}>
+      radioCard 2
+    </RadioCardsItem>
+    <RadioCardsItem value="3" {...args}>
+      radioCard 3
+    </RadioCardsItem>
   </RadioCards>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    <div className="flex space-x-1">
-      <RadioCards {...args} defaultValue="none">
-        <RadioCardsItem value="none" {...args} radius={'none'}>
-          none
-        </RadioCardsItem>
-        <RadioCardsItem value="small" {...args} radius={'small'}>
-          small
-        </RadioCardsItem>
-        <RadioCardsItem value="medium" {...args} radius={'medium'}>
-          medium
-        </RadioCardsItem>
-        <RadioCardsItem value="large" {...args} radius={'large'}>
-          large
-        </RadioCardsItem>
-      </RadioCards>
-    </div>
+    return (<div className="flex items-center space-x-4">
+    <div className="flex space-x-1">
+      <RadioCards {...args} defaultValue="none">
+        <RadioCardsItem value="none" {...args} radius={'none'}>
+          none
+        </RadioCardsItem>
+        <RadioCardsItem value="small" {...args} radius={'small'}>
+          small
+        </RadioCardsItem>
+        <RadioCardsItem value="medium" {...args} radius={'medium'}>
+          medium
+        </RadioCardsItem>
+        <RadioCardsItem value="large" {...args} radius={'large'}>
+          large
+        </RadioCardsItem>
+      </RadioCards>
+    </div>
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    <RadioCards defaultValue="small" {...args}>
-      <RadioCardsItem value={'small'} {...args} size={'small'}>
-        small
-      </RadioCardsItem>
-      <RadioCardsItem value={'medium'} {...args} size={'medium'}>
-        medium
-      </RadioCardsItem>
-      <RadioCardsItem value={'large'} {...args} size={'large'}>
-        large
-      </RadioCardsItem>
-    </RadioCards>
+    return (<div className="flex items-center space-x-4">
+    <RadioCards defaultValue="small" {...args}>
+      <RadioCardsItem value={'small'} {...args} size={'small'}>
+        small
+      </RadioCardsItem>
+      <RadioCardsItem value={'medium'} {...args} size={'medium'}>
+        medium
+      </RadioCardsItem>
+      <RadioCardsItem value={'large'} {...args} size={'large'}>
+        large
+      </RadioCardsItem>
+    </RadioCards>
   </div>);
 };
 export var States = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="space-y-2">
-    <div className="flex items-center space-x-4">
-      <RadioCards {...args} defaultValue="On">
-        <RadioCardsItem value="Off" {...args}>
-          Off
-        </RadioCardsItem>
-        <RadioCardsItem value="On" {...args}>
-          On
-        </RadioCardsItem>
-      </RadioCards>
-    </div>
-    <div className="flex items-center space-x-4">
-      <RadioCards {...args} defaultValue="On">
-        <RadioCardsItem value="Off" {...args} disabled>
-          Off
-        </RadioCardsItem>
-        <RadioCardsItem value="On" {...args} disabled>
-          On
-        </RadioCardsItem>
-      </RadioCards>
-    </div>
+    return (<div className="space-y-2">
+    <div className="flex items-center space-x-4">
+      <RadioCards {...args} defaultValue="On">
+        <RadioCardsItem value="Off" {...args}>
+          Off
+        </RadioCardsItem>
+        <RadioCardsItem value="On" {...args}>
+          On
+        </RadioCardsItem>
+      </RadioCards>
+    </div>
+    <div className="flex items-center space-x-4">
+      <RadioCards {...args} defaultValue="On">
+        <RadioCardsItem value="Off" {...args} disabled>
+          Off
+        </RadioCardsItem>
+        <RadioCardsItem value="On" {...args} disabled>
+          On
+        </RadioCardsItem>
+      </RadioCards>
+    </div>
   </div>);
 };