diff --git a/component-docs/public/__registry__/component/action-button.json b/component-docs/public/__registry__/component/action-button.json
index 568248649..c338ef5d8 100644
--- a/component-docs/public/__registry__/component/action-button.json
+++ b/component-docs/public/__registry__/component/action-button.json
@@ -3,7 +3,10 @@
   "dependencies": [
     "@radix-ui/react-slot"
   ],
-  "files": [
-    "component/action-button.tsx"
+  "registries": [
+    {
+      "name": "action-button.tsx",
+      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/actionButton.css\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { actionButton, type ActionButtonVariantProps } from \"@seed-design/recipe/actionButton\";\n\nexport interface ActionButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    ActionButtonVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n\n  asChild?: boolean;\n}\n\n/**\n * @see https://component.seed-design.io/components/box-button\n */\nexport const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      className,\n      variant = \"brandSolid\",\n      size = \"medium\",\n      children,\n      prefixIcon,\n      suffixIcon,\n      layout = \"withText\",\n      asChild = false,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const classNames = actionButton({ variant, layout, size });\n    return (\n      <Comp ref={ref} className={clsx(classNames.root, className)} {...otherProps}>\n        {prefixIcon && <Slot className={classNames.prefixIcon}>{prefixIcon}</Slot>}\n        {layout === \"withText\" ? (\n          <span className={classNames.label}>{children}</span>\n        ) : (\n          <Slot className={classNames.icon}>{children}</Slot>\n        )}\n        {suffixIcon && <Slot className={classNames.suffixIcon}>{suffixIcon}</Slot>}\n      </Comp>\n    );\n  },\n);\nActionButton.displayName = \"ActionButton\";\n"
+    }
   ]
 }
\ No newline at end of file
diff --git a/component-docs/public/__registry__/component/action-chip.json b/component-docs/public/__registry__/component/action-chip.json
index ab27a80cd..2d8638e27 100644
--- a/component-docs/public/__registry__/component/action-chip.json
+++ b/component-docs/public/__registry__/component/action-chip.json
@@ -3,7 +3,10 @@
   "dependencies": [
     "@radix-ui/react-slot"
   ],
-  "files": [
-    "component/action-chip.tsx"
+  "registries": [
+    {
+      "name": "action-chip.tsx",
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { actionChip, type ActionChipVariantProps } from \"@seed-design/recipe/actionChip\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/actionChip.css\";\n\nexport interface ActionChipProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    ActionChipVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n\n  asChild?: boolean;\n}\n\nexport const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(\n  (\n    {\n      className,\n      size = \"medium\",\n      layout = \"withText\",\n      children,\n      prefixIcon,\n      suffixIcon,\n      asChild = false,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const classNames = actionChip({ size, layout });\n    return (\n      <Comp ref={ref} className={clsx(classNames.root, className)} {...otherProps}>\n        {prefixIcon && <Slot className={classNames.prefix}>{prefixIcon}</Slot>}\n        {layout === \"withText\" ? (\n          <span className={classNames.label}>{children}</span>\n        ) : (\n          <Slot className={classNames.icon}>{children}</Slot>\n        )}\n        {suffixIcon && <Slot className={classNames.suffix}>{suffixIcon}</Slot>}\n      </Comp>\n    );\n  },\n);\nActionChip.displayName = \"ActionChip\";\n"
+    }
   ]
 }
\ No newline at end of file
diff --git a/component-docs/public/__registry__/component/alert-dialog.json b/component-docs/public/__registry__/component/alert-dialog.json
index c3262bc22..a8ee9b74a 100644
--- a/component-docs/public/__registry__/component/alert-dialog.json
+++ b/component-docs/public/__registry__/component/alert-dialog.json
@@ -3,7 +3,10 @@
   "innerDependencies": [
     "action-button"
   ],
-  "files": [
-    "component/alert-dialog.tsx"
+  "registries": [
+    {
+      "name": "alert-dialog.tsx",
+      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/dialog.css\";\n\nimport * as React from \"react\";\nimport { dialog } from \"@seed-design/recipe/dialog\";\n\nimport { ActionButton } from \"./action-button\";\n\nexport type AlertDialogProps = {\n  title: string;\n  description: string;\n  onInteractOutside?: React.MouseEventHandler;\n};\n\n/**\n * @see https://component.seed-design.io/components/alert-dialog\n */\nexport const AlertDialog: React.FC<AlertDialogProps> = ({\n  title,\n  description,\n  onInteractOutside,\n}) => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const backdropRef = React.useRef<HTMLDivElement>(null);\n\n  const popLock = React.useRef(false);\n\n  const onClickOutside: React.MouseEventHandler = (e) => {\n    onInteractOutside?.(e);\n\n    if (e.defaultPrevented) {\n      return;\n    }\n\n    if (popLock.current) {\n      return;\n    }\n    popLock.current = true;\n  };\n  const onClickContent: React.MouseEventHandler = (e) => {\n    e.stopPropagation();\n  };\n\n  const classNames = dialog();\n\n  return (\n    <div\n      ref={containerRef}\n      role=\"alertdialog\"\n      className={classNames.container}\n      onClick={onClickOutside}\n    >\n      <div ref={backdropRef} className={classNames.backdrop} />\n      <div onClick={onClickContent} className={classNames.content}>\n        <div className={classNames.header}>\n          <h2 className={classNames.title}>{title}</h2>\n          <p className={classNames.description}>{description}</p>\n        </div>\n        <div className={classNames.footer}>\n          <ActionButton className={classNames.action}>lol</ActionButton>\n          <ActionButton className={classNames.action}>lol</ActionButton>\n        </div>\n      </div>\n    </div>\n  );\n};\nAlertDialog.displayName = \"AlertDialog\";\n"
+    }
   ]
 }
\ No newline at end of file
diff --git a/component-docs/public/__registry__/component/checkbox.json b/component-docs/public/__registry__/component/checkbox.json
index 6f5590554..cac10726d 100644
--- a/component-docs/public/__registry__/component/checkbox.json
+++ b/component-docs/public/__registry__/component/checkbox.json
@@ -3,7 +3,10 @@
   "dependencies": [
     "@seed-design/react-checkbox"
   ],
-  "files": [
-    "component/checkbox.tsx"
+  "registries": [
+    {
+      "name": "checkbox.tsx",
+      "content": "\"use client\";\n\nimport { type UseCheckboxProps, useCheckbox } from \"@seed-design/react-checkbox\";\nimport { type CheckboxVariantProps, checkbox } from \"@seed-design/recipe/checkbox\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport type { CSSProperties } from \"react\";\n\nimport \"@seed-design/stylesheet/checkbox.css\";\n\ntype Assign<T, U> = Omit<T, keyof U> & U;\n\nconst visuallyHidden: CSSProperties = {\n  border: 0,\n  clip: \"rect(0 0 0 0)\",\n  height: \"1px\",\n  margin: \"-1px\",\n  overflow: \"hidden\",\n  padding: 0,\n  position: \"absolute\",\n  whiteSpace: \"nowrap\",\n  width: \"1px\",\n};\n\nconst Checkmark = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>((props, ref) => (\n  <svg\n    aria-hidden=\"true\"\n    ref={ref}\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M17.5179 6.98877C17.9658 7.3118 18.0671 7.93681 17.7441 8.38478L11.7108 16.7515C11.5351 16.9952 11.2591 17.1469 10.9592 17.1648C10.6593 17.1827 10.3672 17.0647 10.1638 16.8436L6.33048 12.677C5.95655 12.2705 5.98291 11.6379 6.38935 11.264C6.7958 10.89 7.42841 10.9164 7.80234 11.3228L10.8056 14.5873L16.1219 7.21498C16.4449 6.76702 17.0699 6.66574 17.5179 6.98877Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n));\n\nexport interface CheckboxProps\n  extends Assign<React.HTMLAttributes<HTMLInputElement>, UseCheckboxProps>,\n    CheckboxVariantProps {\n  label: React.ReactNode;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"medium\", label, ...otherProps }, ref) => {\n    const { stateProps, restProps, controlProps, hiddenInputProps, rootProps } =\n      useCheckbox(otherProps);\n\n    const classNames = checkbox({ size });\n    return (\n      <label className={clsx(classNames.root, className)} {...rootProps}>\n        <div {...controlProps} className={classNames.control}>\n          <Checkmark {...stateProps} className={classNames.icon} />\n        </div>\n        <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />\n        <span {...stateProps} className={classNames.label}>\n          {label}\n        </span>\n      </label>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n"
+    }
   ]
 }
\ No newline at end of file
diff --git a/component-docs/public/__registry__/component/chip-tabs.json b/component-docs/public/__registry__/component/chip-tabs.json
index 1f0f3ef5c..0ed90a854 100644
--- a/component-docs/public/__registry__/component/chip-tabs.json
+++ b/component-docs/public/__registry__/component/chip-tabs.json
@@ -3,7 +3,10 @@
   "dependencies": [
     "@seed-design/react-tabs"
   ],
-  "files": [
-    "component/chip-tabs.tsx"
+  "registries": [
+    {
+      "name": "chip-tabs.tsx",
+      "content": "\"use client\";\n\nimport {\n  useLazyContents,\n  useTabs,\n  type ContentProps,\n  type TriggerProps,\n  type UseLazyContentsProps,\n  type UseTabsProps,\n} from \"@seed-design/react-tabs\";\nimport { chipTab } from \"@seed-design/recipe/chipTab\";\nimport { ChipTabsVariant, chipTabs } from \"@seed-design/recipe/chipTabs\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/chipTab.css\";\nimport \"@seed-design/stylesheet/chipTabs.css\";\n\ntype Assign<T, U> = Omit<T, keyof U> & U;\n\ninterface ChipTabsContextValue {\n  api: ReturnType<typeof useTabs>;\n  classNames: ReturnType<typeof chipTabs>;\n  shouldRender: (value: string) => boolean;\n  variant: ChipTabsVariant[\"variant\"];\n}\n\nconst ChipTabsContext = React.createContext<ChipTabsContextValue | null>(null);\n\nconst useChipTabsContext = () => {\n  const context = React.useContext(ChipTabsContext);\n  if (!context) {\n    throw new Error(\"Tabs cannot be rendered outside the Tabs\");\n  }\n  return context;\n};\n\nexport interface ChipTabsProps\n  extends Assign<React.HTMLAttributes<HTMLDivElement>, Omit<UseTabsProps, \"layout\">>,\n    ChipTabsVariant,\n    Omit<UseLazyContentsProps, \"currentValue\"> {}\n\nexport const ChipTabs = React.forwardRef<HTMLDivElement, ChipTabsProps>((props, ref) => {\n  const { className, lazyMode, isLazy, variant } = props;\n  const api = useTabs(props);\n  const classNames = chipTabs({\n    variant,\n  });\n  const { rootProps, value, restProps } = api;\n  const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy });\n\n  return (\n    <div ref={ref} {...rootProps} {...restProps} className={clsx(classNames.root, className)}>\n      <ChipTabsContext.Provider\n        value={{\n          api,\n          classNames,\n          shouldRender,\n          variant,\n        }}\n      >\n        {props.children}\n      </ChipTabsContext.Provider>\n    </div>\n  );\n});\nChipTabs.displayName = \"ChipTabs\";\n\nexport const ChipTabTriggerList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...otherProps }, ref) => {\n  const { api, classNames } = useChipTabsContext();\n  const { tabTriggerListProps, triggerSize } = api;\n  const { left } = triggerSize;\n  const { triggerList } = classNames;\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      containerRef.current?.scrollTo({\n        // NOTE: 27px is half of tab's min-width\n        left: left - 27,\n        behavior: \"smooth\",\n      });\n    }\n  }, [left]);\n\n  return (\n    <div\n      ref={containerRef}\n      {...tabTriggerListProps}\n      className={clsx(triggerList, className)}\n      {...otherProps}\n    >\n      {children}\n    </div>\n  );\n});\nChipTabTriggerList.displayName = \"ChipTabTriggerList\";\n\nexport interface ChipTabTriggerProps\n  extends Assign<React.HTMLAttributes<HTMLButtonElement>, TriggerProps> {}\n\nexport const ChipTabTrigger = React.forwardRef<HTMLButtonElement, ChipTabTriggerProps>(\n  ({ className, children, value, isDisabled, ...otherProps }, ref) => {\n    const { api, variant } = useChipTabsContext();\n    const { getTabTriggerProps } = api;\n    const { label, root } = chipTab({\n      variant,\n    });\n    const { rootProps, labelProps } = getTabTriggerProps({ value, isDisabled });\n\n    return (\n      <button ref={ref} {...rootProps} className={clsx(root, className)} {...otherProps}>\n        <span className={label} {...labelProps}>\n          {children}\n        </span>\n      </button>\n    );\n  },\n);\nChipTabTrigger.displayName = \"ChipTabTrigger\";\n\nexport const ChipTabContent = React.forwardRef<\n  HTMLDivElement,\n  Assign<React.HTMLAttributes<HTMLDivElement>, ContentProps>\n>(({ className, children, value, ...otherProps }, ref) => {\n  const { api, classNames, shouldRender } = useChipTabsContext();\n  const { getTabContentProps } = api;\n  const { content } = classNames;\n  const tabContentProps = getTabContentProps({ value });\n  const isRender = shouldRender(value);\n\n  return (\n    <div ref={ref} {...tabContentProps} className={clsx(content, className)} {...otherProps}>\n      {isRender && children}\n    </div>\n  );\n});\nChipTabContent.displayName = \"ChipTabContent\";\n"
+    }
   ]
 }
\ No newline at end of file
diff --git a/component-docs/public/__registry__/component/control-chip.json b/component-docs/public/__registry__/component/control-chip.json
index b9bb5d23c..d3b75ec6a 100644
--- a/component-docs/public/__registry__/component/control-chip.json
+++ b/component-docs/public/__registry__/component/control-chip.json
@@ -3,7 +3,10 @@
   "dependencies": [
     "@radix-ui/react-slot"
   ],
-  "files": [
-    "component/control-chip.tsx"
+  "registries": [
+    {
+      "name": "control-chip.tsx",
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { controlChip, type ControlChipVariantProps } from \"@seed-design/recipe/controlChip\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/controlChip.css\";\nimport { UseCheckboxProps, useCheckbox } from \"@seed-design/react-checkbox\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nexport interface ControlChipToggleProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    UseCheckboxProps,\n    ControlChipVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  suffixIcon?: React.ReactNode;\n}\n\nconst ControlChipToggle = React.forwardRef<HTMLInputElement, ControlChipToggleProps>(\n  (\n    {\n      className,\n      size = \"medium\",\n      layout = \"withText\",\n      children,\n      prefixIcon,\n      suffixIcon,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const classNames = controlChip({ size, layout });\n    const { rootProps, hiddenInputProps, stateProps, restProps } = useCheckbox(otherProps);\n    return (\n      <label {...rootProps} className={clsx(classNames.root, className)}>\n        {prefixIcon && (\n          <Slot {...stateProps} className={classNames.prefix}>\n            {prefixIcon}\n          </Slot>\n        )}\n        {layout === \"withText\" ? (\n          <span {...stateProps} className={classNames.label}>\n            {children}\n          </span>\n        ) : (\n          <Slot {...stateProps} className={classNames.icon}>\n            {children}\n          </Slot>\n        )}\n        {suffixIcon && (\n          <Slot {...stateProps} className={classNames.suffix}>\n            {suffixIcon}\n          </Slot>\n        )}\n        <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />\n      </label>\n    );\n  },\n);\nControlChipToggle.displayName = \"ControlChip.Toggle\";\n\nexport const ControlChip = Object.assign(\n  () => {\n    console.warn(\n      \"ControlChip is a base component and should not be rendered. Use ControlChip.Toggle or ControlChip.Radio instead.\",\n    );\n  },\n  {\n    Toggle: ControlChipToggle,\n  },\n);\n"
+    }
   ]
 }
\ No newline at end of file
diff --git a/component-docs/public/__registry__/component/expand-button.json b/component-docs/public/__registry__/component/expand-button.json
index 2a027fe88..bf186b6dc 100644
--- a/component-docs/public/__registry__/component/expand-button.json
+++ b/component-docs/public/__registry__/component/expand-button.json
@@ -3,7 +3,10 @@
   "dependencies": [
     "@radix-ui/react-slot"
   ],
-  "files": [
-    "component/expand-button.tsx"
+  "registries": [
+    {
+      "name": "expand-button.tsx",
+      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/expandButton.css\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { expandButton, type ExpandButtonVariantProps } from \"@seed-design/recipe/expandButton\";\n\nexport interface ExpandButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    ExpandButtonVariantProps {\n  suffixIcon?: React.ReactNode;\n\n  asChild?: boolean;\n}\n\n/**\n * @see https://component.seed-design.io/components/box-button\n */\nexport const ExpandButton = React.forwardRef<HTMLButtonElement, ExpandButtonProps>(\n  ({ className, children, suffixIcon, asChild = false, ...otherProps }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    const classNames = expandButton({});\n    return (\n      <Comp ref={ref} className={clsx(classNames.root, className)} {...otherProps}>\n        <span className={classNames.label}>{children}</span>\n        {suffixIcon && <Slot className={classNames.suffixIcon}>{suffixIcon}</Slot>}\n      </Comp>\n    );\n  },\n);\nExpandButton.displayName = \"ExpandButton\";\n"
+    }
   ]
 }
\ No newline at end of file
diff --git a/component-docs/public/__registry__/component/switch.json b/component-docs/public/__registry__/component/switch.json
index db30dd2ba..44c460957 100644
--- a/component-docs/public/__registry__/component/switch.json
+++ b/component-docs/public/__registry__/component/switch.json
@@ -3,7 +3,10 @@
   "dependencies": [
     "@seed-design/react-switch"
   ],
-  "files": [
-    "component/switch.tsx"
+  "registries": [
+    {
+      "name": "switch.tsx",
+      "content": "import { type UseSwitchProps, useSwitch } from \"@seed-design/react-switch\";\nimport { type SwitchVariantProps, switchStyle } from \"@seed-design/recipe/switch\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport type { Assign } from \"../util/types\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nimport \"@seed-design/stylesheet/switch.css\";\n\nexport interface SwitchProps\n  extends Assign<React.HTMLAttributes<HTMLInputElement>, UseSwitchProps>,\n    SwitchVariantProps {}\n\nexport const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className, size = \"medium\", ...otherProps }, ref) => {\n    const { restProps, controlProps, hiddenInputProps, rootProps, thumbProps } =\n      useSwitch(otherProps);\n    const classNames = switchStyle({ size });\n\n    return (\n      <label className={clsx(classNames.root, className)} {...rootProps}>\n        <div {...controlProps} className={classNames.control}>\n          <div {...thumbProps} className={classNames.thumb} />\n        </div>\n        <input ref={ref} {...hiddenInputProps} {...restProps} style={visuallyHidden} />\n      </label>\n    );\n  },\n);\nSwitch.displayName = \"Switch\";\n"
+    }
   ]
 }
\ No newline at end of file
diff --git a/component-docs/public/__registry__/component/tabs.json b/component-docs/public/__registry__/component/tabs.json
index 7941b3d02..a97c51375 100644
--- a/component-docs/public/__registry__/component/tabs.json
+++ b/component-docs/public/__registry__/component/tabs.json
@@ -3,7 +3,10 @@
   "dependencies": [
     "@seed-design/react-tabs"
   ],
-  "files": [
-    "component/tabs.tsx"
+  "registries": [
+    {
+      "name": "tabs.tsx",
+      "content": "\"use client\";\n\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport {\n  useTabs,\n  useSwipeable,\n  type UseTabsProps,\n  type TriggerProps,\n  type ContentProps,\n  useLazyContents,\n  type UseLazyContentsProps,\n} from \"@seed-design/react-tabs\";\nimport { tabs } from \"@seed-design/recipe/tabs\";\nimport { tab } from \"@seed-design/recipe/tab\";\n\nimport \"@seed-design/stylesheet/tabs.css\";\nimport \"@seed-design/stylesheet/tab.css\";\n\ntype Assign<T, U> = Omit<T, keyof U> & U;\n\ninterface TabsContextValue {\n  api: ReturnType<typeof useTabs> & ReturnType<typeof useSwipeable>;\n  classNames: ReturnType<typeof tabs>;\n  shouldRender: (value: string) => boolean;\n\n  /**\n   * @default false\n   */\n  isSwipeable: boolean;\n\n  layout: \"fill\" | \"hug\";\n  size: \"small\" | \"medium\";\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null);\n\nconst useTabsContext = () => {\n  const context = React.useContext(TabsContext);\n  if (!context) {\n    throw new Error(\"Tabs cannot be rendered outside the Tabs\");\n  }\n  return context;\n};\n\nexport interface TabsProps\n  extends Assign<React.HTMLAttributes<HTMLDivElement>, UseTabsProps>,\n    Omit<UseLazyContentsProps, \"currentValue\"> {\n  /**\n   * @default \"hug\"\n   */\n  layout?: \"fill\" | \"hug\";\n\n  /**\n   * @default \"small\"\n   */\n  size?: \"small\" | \"medium\";\n}\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {\n  const {\n    className,\n    lazyMode,\n    isLazy,\n    isSwipeable = false,\n    layout = \"hug\",\n    size = \"small\",\n  } = props;\n  const useTabsProps = useTabs(props);\n  const useSwipeableProps = useSwipeable({\n    isSwipeable,\n    onSwipeLeftToRight: useTabsProps.movePrev,\n    onSwipeRightToLeft: useTabsProps.moveNext,\n  });\n  const classNames = tabs({\n    layout,\n  });\n  const { rootProps, value, restProps } = useTabsProps;\n  const { shouldRender } = useLazyContents({ currentValue: value, lazyMode, isLazy });\n  const api = {\n    ...useTabsProps,\n    ...useSwipeableProps,\n  };\n\n  return (\n    <div ref={ref} {...rootProps} {...restProps} className={clsx(classNames.root, className)}>\n      <TabsContext.Provider\n        value={{\n          api,\n          size,\n          classNames,\n          shouldRender,\n          isSwipeable,\n          layout,\n        }}\n      >\n        {props.children}\n      </TabsContext.Provider>\n    </div>\n  );\n});\nTabs.displayName = \"Tabs\";\n\nexport const TabTriggerList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...otherProps }, ref) => {\n  const { api, classNames } = useTabsContext();\n  const { tabTriggerListProps, triggerSize } = api;\n  const { left } = triggerSize;\n  const { triggerList } = classNames;\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n  React.useEffect(() => {\n    if (containerRef.current) {\n      containerRef.current?.scrollTo({\n        // NOTE: 27px is half of tab's min-width\n        left: left - 27,\n        behavior: \"smooth\",\n      });\n    }\n  }, [left]);\n\n  return (\n    <div\n      ref={containerRef}\n      {...tabTriggerListProps}\n      className={clsx(triggerList, className)}\n      {...otherProps}\n    >\n      {children}\n      <TabIndicator />\n    </div>\n  );\n});\nTabTriggerList.displayName = \"TabTriggerList\";\n\nexport interface TabTriggerProps\n  extends Assign<React.HTMLAttributes<HTMLButtonElement>, TriggerProps> {\n  /**\n   * @default false\n   */\n  alert?: boolean;\n}\n\nexport const TabTrigger = React.forwardRef<HTMLButtonElement, TabTriggerProps>(\n  ({ className, children, value, isDisabled, alert = false, ...otherProps }, ref) => {\n    const { api, layout, size } = useTabsContext();\n    const { getTabTriggerProps } = api;\n    const { label, notification, root } = tab({\n      size,\n      layout,\n    });\n    const { rootProps, notificationProps, labelProps } = getTabTriggerProps({ value, isDisabled });\n\n    return (\n      <button ref={ref} {...rootProps} className={clsx(root, className)} {...otherProps}>\n        <span className={label} {...labelProps}>\n          {children}\n          {alert && <div className={notification} {...notificationProps} />}\n        </span>\n      </button>\n    );\n  },\n);\nTabTrigger.displayName = \"TabTrigger\";\n\nexport const TabContentList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...otherProps }, ref) => {\n  const { api, classNames, isSwipeable } = useTabsContext();\n  const {\n    tabContentListProps,\n    tabContentCameraProps,\n    getDragProps,\n    currentTabEnabledIndex,\n    swipeMoveX,\n    swipeStatus,\n    tabEnabledCount,\n  } = api;\n  const { contentList, contentCamera } = classNames;\n  const dragProps = getDragProps();\n\n  const getCameraTranslateX = () => {\n    const MODIFIER = 5;\n\n    const currentContentOffsetX = currentTabEnabledIndex * 100;\n\n    if (swipeMoveX > 0 && currentTabEnabledIndex === 0) {\n      return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`;\n    }\n\n    if (swipeMoveX < 0 && currentTabEnabledIndex === tabEnabledCount - 1) {\n      return `calc(-${currentContentOffsetX}% + ${swipeMoveX / MODIFIER}px)`;\n    }\n\n    return `calc(-${currentContentOffsetX}% + ${swipeMoveX}px)`;\n  };\n\n  return (\n    <div\n      ref={ref}\n      {...tabContentListProps}\n      className={clsx(contentList, className)}\n      {...otherProps}\n      style={{\n        userSelect: \"none\",\n        touchAction: \"pan-y\",\n        ...otherProps.style,\n      }}\n    >\n      <div\n        {...tabContentCameraProps}\n        {...dragProps}\n        className={clsx(contentCamera)}\n        style={{\n          willChange: \"transform\",\n          transition:\n            isSwipeable && swipeStatus === \"idle\"\n              ? \"transform 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)\"\n              : \"none\",\n          transform: `translateX(${getCameraTranslateX()})`,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\nTabContentList.displayName = \"TabContentList\";\n\nexport const TabContent = React.forwardRef<\n  HTMLDivElement,\n  Assign<React.HTMLAttributes<HTMLDivElement>, ContentProps>\n>(({ className, children, value, ...otherProps }, ref) => {\n  const { api, classNames, shouldRender } = useTabsContext();\n  const { getTabContentProps } = api;\n  const { content } = classNames;\n  const tabContentProps = getTabContentProps({ value });\n  const isRender = shouldRender(value);\n\n  return (\n    <div ref={ref} {...tabContentProps} className={clsx(content, className)} {...otherProps}>\n      {isRender && children}\n    </div>\n  );\n});\nTabContent.displayName = \"TabContent\";\n\nconst TabIndicator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...otherProps }, ref) => {\n    const { api, classNames, isSwipeable, layout } = useTabsContext();\n    const { tabIndicatorProps, triggerSize, currentTabIndex, swipeMoveX, tabCount, swipeStatus } =\n      api;\n    const { indicator } = classNames;\n    const { left: triggerLeft, width: triggerWidth } = triggerSize;\n\n    const getLeft = () => {\n      const MODIFIER = layout === \"hug\" ? 10 : 5;\n      const GUTTER = layout === \"fill\" ? 16 : 0;\n\n      // 양끝 탭에서 스와이프로 인한 이동은 MODIFIER를 5배로 늘려서 완전 조금 이동하도록 함\n      if (\n        (swipeMoveX > 0 && currentTabIndex === 0) ||\n        (swipeMoveX < 0 && currentTabIndex === tabCount - 1)\n      ) {\n        return `calc(${GUTTER}px + ${triggerLeft}px - ${swipeMoveX / (MODIFIER * 5)}px)`;\n      }\n\n      return `calc(${GUTTER}px + ${triggerLeft}px - ${swipeMoveX / MODIFIER}px)`;\n    };\n\n    const getWidth = () => {\n      const GUTTER = 16;\n\n      if (layout === \"hug\") {\n        return triggerWidth;\n      }\n\n      return triggerWidth - GUTTER * 2;\n    };\n\n    const leftTransition =\n      isSwipeable && swipeStatus === \"idle\" ? \"left 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)\" : \"\";\n    const widthTransition = \"width 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)\";\n    const transitions = [leftTransition, widthTransition].filter(Boolean).join(\", \");\n\n    return (\n      <div\n        ref={ref}\n        {...tabIndicatorProps}\n        className={clsx(indicator, className)}\n        {...otherProps}\n        style={{\n          ...otherProps.style,\n          position: \"absolute\",\n          width: getWidth(),\n          left: getLeft(),\n          willChange: \"left, width\",\n          transition: isSwipeable && transitions,\n        }}\n      />\n    );\n  },\n);\nTabIndicator.displayName = \"TabIndicator\";\n"
+    }
   ]
 }
\ No newline at end of file
diff --git a/component-docs/scripts/generate-registry.ts b/component-docs/scripts/generate-registry.ts
index eeab131bc..f8f51bbeb 100644
--- a/component-docs/scripts/generate-registry.ts
+++ b/component-docs/scripts/generate-registry.ts
@@ -5,7 +5,10 @@ import path, { basename } from "node:path";
 import { match } from "ts-pattern";
 
 import { registryComponent } from "../registry/registry-component.js";
-import { RegistryComponent, registryComponentItemSchema } from "../registry/schema.js";
+import {
+  RegistryComponent,
+  registryComponentItemMachineGeneratedSchema,
+} from "../registry/schema.js";
 import { generateMDXTemplate } from "./utils/generate-mdx-template.js";
 
 const GENERATED_REGISTRY_PATH = path.join(process.cwd(), "public", "__registry__");
@@ -77,18 +80,18 @@ async function generateRegistry({ registry, type }: GenerateRegistryProps) {
       })
       .filter(Boolean);
 
-    const removeSnipepts = {
+    const removeFiles = {
       ...item,
-      snippets: undefined,
+      files: undefined,
     };
 
     const payload = {
-      ...removeSnipepts,
+      ...removeFiles,
       registries,
     };
 
     const parsedPayload = match(type)
-      .with("component", () => registryComponentItemSchema.parse(payload))
+      .with("component", () => registryComponentItemMachineGeneratedSchema.parse(payload))
       .exhaustive();
 
     await fs.writeFile(