@lotte-innovate/ui-component-test 0.0.11 → 0.0.12

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>);
 };

package/dist/stories/radio/RadioGroup.stories.jsx

@@ -71,72 +71,72 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<RadioGroup defaultValue={'1'} name="example" {...args}>
-    <RadioGroupItem value="1" {...args}>
-      Default
-    </RadioGroupItem>
-    <RadioGroupItem value="2" {...args}>
-      Comfortable
-    </RadioGroupItem>
-    <RadioGroupItem value="3" {...args}>
-      Compact
-    </RadioGroupItem>
+    return (<RadioGroup defaultValue={'1'} name="example" {...args}>
+    <RadioGroupItem value="1" {...args}>
+      Default
+    </RadioGroupItem>
+    <RadioGroupItem value="2" {...args}>
+      Comfortable
+    </RadioGroupItem>
+    <RadioGroupItem value="3" {...args}>
+      Compact
+    </RadioGroupItem>
   </RadioGroup>);
 };
 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 (<RadioGroup key={size} defaultValue={'1'} name={size} {...args} size={size}>
-        <RadioGroupItem value="1" {...args}>
-          Default
-        </RadioGroupItem>
-        <RadioGroupItem value="2" {...args}>
-          Comfortable
-        </RadioGroupItem>
-        <RadioGroupItem value="3" {...args}>
-          Compact
-        </RadioGroupItem>
-      </RadioGroup>); })}
+    return (<div className="flex items-center space-x-4">
+    {['small', 'medium', 'large'].map(function (size) { return (<RadioGroup key={size} defaultValue={'1'} name={size} {...args} size={size}>
+        <RadioGroupItem value="1" {...args}>
+          Default
+        </RadioGroupItem>
+        <RadioGroupItem value="2" {...args}>
+          Comfortable
+        </RadioGroupItem>
+        <RadioGroupItem value="3" {...args}>
+          Compact
+        </RadioGroupItem>
+      </RadioGroup>); })}
   </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 (<RadioGroup key={appearance} defaultValue={'1'} name={appearance} {...args} appearance={appearance}>
-        <RadioGroupItem value="1" {...args}>
-          Default
-        </RadioGroupItem>
-        <RadioGroupItem value="2" {...args}>
-          Comfortable
-        </RadioGroupItem>
-        <RadioGroupItem value="3" {...args}>
-          Compact
-        </RadioGroupItem>
-      </RadioGroup>); })}
+    return (<div className="flex items-center space-x-4">
+    {['classic', 'soft', 'surface'].map(function (appearance) { return (<RadioGroup key={appearance} defaultValue={'1'} name={appearance} {...args} appearance={appearance}>
+        <RadioGroupItem value="1" {...args}>
+          Default
+        </RadioGroupItem>
+        <RadioGroupItem value="2" {...args}>
+          Comfortable
+        </RadioGroupItem>
+        <RadioGroupItem value="3" {...args}>
+          Compact
+        </RadioGroupItem>
+      </RadioGroup>); })}
   </div>);
 };
 export var Disabled = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex items-center space-x-4">
-    <div>
-      <RadioGroup defaultValue={'On'} {...args}>
-        <RadioGroupItem value="Off" {...args}>
-          Off
-        </RadioGroupItem>
-        <RadioGroupItem value="On" {...args}>
-          On
-        </RadioGroupItem>
-      </RadioGroup>
-    </div>
-    <div>
-      <RadioGroup defaultValue={'On'} {...args}>
-        <RadioGroupItem value="Off" {...args} disabled>
-          Off
-        </RadioGroupItem>
-        <RadioGroupItem value="On" {...args} disabled>
-          On
-        </RadioGroupItem>
-      </RadioGroup>
-    </div>
+    return (<div className="flex items-center space-x-4">
+    <div>
+      <RadioGroup defaultValue={'On'} {...args}>
+        <RadioGroupItem value="Off" {...args}>
+          Off
+        </RadioGroupItem>
+        <RadioGroupItem value="On" {...args}>
+          On
+        </RadioGroupItem>
+      </RadioGroup>
+    </div>
+    <div>
+      <RadioGroup defaultValue={'On'} {...args}>
+        <RadioGroupItem value="Off" {...args} disabled>
+          Off
+        </RadioGroupItem>
+        <RadioGroupItem value="On" {...args} disabled>
+          On
+        </RadioGroupItem>
+      </RadioGroup>
+    </div>
   </div>);
 };