Add use client directive at top of client-component files

.changeset/gold-nails-crash.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': minor
+---
+
+The use client directive has been added at the top of all components inside @channel.io/bezier-react.

packages/bezier-react/rollup.config.mjs

@@ -113,6 +113,15 @@ const generateConfig = ({ output = [], plugins = [] }) =>
       minifycss(),
       ...plugins,
     ],
+    onwarn(warning, warn) {
+      if (
+        warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
+        warning.message.includes('use client')
+      ) {
+        return
+      }
+      warn(warning)
+    },
   })
 
 export default defineConfig([

packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useMemo } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useCallback, useMemo } from 'react'
 
 import { MoreIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/AlphaButton/Button.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/AlphaDialogPrimitive/DialogPrimitive.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import {
   Dialog,
   DialogClose,

packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/AlphaLoader/Loader.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { type CSSProperties, forwardRef } from 'react'
 
 import { MoonFilledIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useMemo } from 'react'
 
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'

packages/bezier-react/src/components/AlphaTooltipPrimitive/TooltipPrimitive.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import {
   Tooltip,
   TooltipArrow,

packages/bezier-react/src/components/AppProvider/AppProvider.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect } from 'react'
 
 import { getWindow } from 'ssr-window'

packages/bezier-react/src/components/AutoFocus/AutoFocus.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useState } from 'react'
 
 import { Slot } from '@radix-ui/react-slot'

packages/bezier-react/src/components/Avatar/Avatar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useMemo } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx

@@ -1,3 +1,5 @@
+'use client' 
+
 import React, { forwardRef, useCallback, useMemo } from 'react'
 
 import { MoreIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/Badge/Badge.tsx

@@ -1,3 +1,5 @@
+'use client' 
+
 import React, { forwardRef, memo } from 'react'
 
 import { isEmpty } from '~/src/utils/type'

packages/bezier-react/src/components/Banner/Banner.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/BaseButton/BaseButton.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/BaseTagBadge/BaseTagBadge.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/Box/Box.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { createElement, forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/Button/Button.tsx

@@ -1,3 +1,5 @@
+'use client' 
+
 import React, { forwardRef, useCallback } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { Stack } from '~/src/components/Stack'

packages/bezier-react/src/components/Center/Center.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/CheckableAvatar/CheckableAvatar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { CheckIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/Checkbox/Checkbox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { CheckBoldIcon, HyphenBoldIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/ConfirmModal/ConfirmModal.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import {

packages/bezier-react/src/components/Divider/Divider.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import * as SeparatorPrimitive from '@radix-ui/react-separator'

packages/bezier-react/src/components/Emoji/Emoji.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { type CSSProperties, forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/FeatureProvider/FeatureProvider.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useMemo, useState } from 'react'
 
 import { useIsomorphicLayoutEffect } from '~/src/hooks/useIsomorphicLayoutEffect'

packages/bezier-react/src/components/FormControl/FormControl.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useCallback, useMemo, useState } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/FormGroup/FormGroup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import useMergeRefs from '~/src/hooks/useMergeRefs'

packages/bezier-react/src/components/FormHelperText/FormHelperText.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/FormLabel/FormLabel.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/Help/Help.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { HelpFilledIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/Icon/Icon.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, memo } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/KeyValueItem/KeyValueItem.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/LegacyIcon/LegacyIcon.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { memo } from 'react'
 
 import { icons } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/LegacyStack/LegacyHStack/LegacyHStack.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { LegacyStack } from '~/src/components/LegacyStack/LegacyStack'

packages/bezier-react/src/components/LegacyStack/LegacySpacer/LegacySpacer.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { LegacyStackItem } from '~/src/components/LegacyStack/LegacyStackItem'

packages/bezier-react/src/components/LegacyStack/LegacyStack/LegacyStack.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   Children,
   cloneElement,

packages/bezier-react/src/components/LegacyStack/LegacyStackItem/LegacyStackItem.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/LegacyStack/LegacyVStack/LegacyVStack.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { LegacyStack } from '~/src/components/LegacyStack/LegacyStack'

packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   type Ref,
   forwardRef,

packages/bezier-react/src/components/LegacyTooltip/LegacyTooltipContent.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import ReactDOM from 'react-dom'
 

packages/bezier-react/src/components/ListItem/ListItem.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/Modal/Modal.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useCallback, useMemo, useState } from 'react'
 
 import { CancelIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/NavGroup/NavGroup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import {

packages/bezier-react/src/components/NavItem/NavItem.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/OutlineItem/OutlineItem.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useMemo } from 'react'
 
 import {

packages/bezier-react/src/components/Overlay/Overlay.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   forwardRef,
   useCallback,

packages/bezier-react/src/components/ProgressBar/ProgressBar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/RadioGroup/RadioGroup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'

packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   type ForwardedRef,
   forwardRef,

packages/bezier-react/src/components/Select/Select.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   forwardRef,
   useCallback,

packages/bezier-react/src/components/Slider/Slider.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { type CSSProperties, forwardRef, memo } from 'react'
 
 import * as SliderPrimitive from '@radix-ui/react-slider'

packages/bezier-react/src/components/SmoothCornersBox/SmoothCornersBox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/Spinner/Spinner.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/Stack/Stack.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { createElement, forwardRef } from 'react'
 
 import classNames from 'classnames'

packages/bezier-react/src/components/Status/Status.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { type CSSProperties, forwardRef, memo } from 'react'
 
 import { LockIcon, MoonFilledIcon } from '@channel.io/bezier-icons'

packages/bezier-react/src/components/Switch/Switch.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import * as SwitchPrimitive from '@radix-ui/react-switch'

packages/bezier-react/src/components/Tabs/Tabs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useMemo } from 'react'
 
 import { OpenInNewIcon } from '@channel.io/bezier-icons'