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

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

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

@@ -17,14 +17,10 @@ declare const meta: {
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         value?: string | undefined;
         className?: string | undefined;
+        defaultValue?: string | 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;
+        onChange?: import("react").FormEventHandler<HTMLElement> | undefined;
         defaultChecked?: boolean | undefined;
-        defaultValue?: string | undefined;
-        slot?: string | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined;
-        key?: import("react").Key | null | undefined;
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
@@ -37,8 +33,11 @@ declare const meta: {
         id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
+        slot?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: import("react").CSSProperties | undefined;
         tabIndex?: number | undefined;
+        title?: string | undefined;
         translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: import("react").AriaRole | undefined;
@@ -64,7 +63,7 @@ declare const meta: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         inert?: boolean | undefined;
         tw?: string | undefined;
@@ -80,7 +79,7 @@ declare const meta: {
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "true" | "false" | "time" | "step" | "page" | "location" | "date" | undefined;
+        "aria-current"?: boolean | "true" | "false" | "step" | "time" | "date" | "page" | "location" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
@@ -141,7 +140,6 @@ declare const meta: {
         onFocusCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLElement> | undefined;
         onBlurCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
-        onChange?: import("react").FormEventHandler<HTMLElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
         onBeforeInput?: import("react").FormEventHandler<HTMLElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
@@ -285,13 +283,15 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-        orientation?: ("horizontal" | "vertical") | undefined;
+        key?: import("react").Key | null | undefined;
+        asChild?: boolean | undefined;
         onValueChange?: ((value: string) => void) | undefined;
+        orientation?: ("horizontal" | "vertical") | undefined;
         delayDuration?: number | undefined;
         skipDelayDuration?: number | undefined;
         appearance?: "solid" | "ghost" | undefined;
-        radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
         scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
+        radius?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
         size?: "small" | "medium" | null | undefined;
         ref?: import("react").LegacyRef<HTMLElement> | undefined;
     }>) => import("react").JSX.Element)[];