chore: add use client directive to UI packages.

packages/ui/src/avatar/avatar-group.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 // ui
 import { Tooltip } from "../tooltip";

packages/ui/src/avatar/avatar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 // ui
 import { Tooltip } from "../tooltip";

packages/ui/src/badge/badge.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 // helpers
 import { getIconStyling, getBadgeStyling, TBadgeVariant, TBadgeSizes } from "./helper";

packages/ui/src/breadcrumbs/breadcrumbs.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { ChevronRight } from "lucide-react";
 

packages/ui/src/button/button.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 import { getIconStyling, getButtonStyling, TButtonVariant, TButtonSizes } from "./helper";

packages/ui/src/button/toggle-switch.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { Switch } from "@headlessui/react";
 // helpers

packages/ui/src/control-link/control-link.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {

packages/ui/src/drag-handle.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { forwardRef } from "react";
 import { MoreVertical } from "lucide-react";
 // helpers

packages/ui/src/drop-indicator.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { cn } from "../helpers";
 

packages/ui/src/dropdowns/context-menu/item.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 // helpers
 import { cn } from "../../../helpers";

packages/ui/src/dropdowns/context-menu/root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 // components

packages/ui/src/dropdowns/custom-menu.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import ReactDOM from "react-dom";
 import { Menu } from "@headlessui/react";

packages/ui/src/dropdowns/custom-search-select.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef, useState } from "react";
 import { usePopper } from "react-popper";
 import { Combobox } from "@headlessui/react";

packages/ui/src/dropdowns/custom-select.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef, useState } from "react";
 import { usePopper } from "react-popper";
 import { Listbox } from "@headlessui/react";

packages/ui/src/emoji/emoji-icon-picker-new.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef, useState } from "react";
 import { usePopper } from "react-popper";
 import { Popover, Tab } from "@headlessui/react";

packages/ui/src/emoji/emoji-icon-picker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef, useState } from "react";
 import { usePopper } from "react-popper";
 import EmojiPicker from "emoji-picker-react";

packages/ui/src/emoji/icons-list.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 // components
 import { Input } from "../form-fields";

packages/ui/src/emoji/lucide-icons-list.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 // components
 import { Input } from "../form-fields";

packages/ui/src/form-fields/checkbox.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 // helpers
 import { cn } from "../../helpers";

packages/ui/src/form-fields/input-color-picker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { Popover, Transition } from "@headlessui/react";
 import { ColorResult, SketchPicker } from "react-color";

packages/ui/src/form-fields/input.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 // helpers
 import { cn } from "../../helpers";

packages/ui/src/form-fields/textarea.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef } from "react";
 // helpers
 import { cn } from "../../helpers";

packages/ui/src/loader.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 // helpers
 import { cn } from "../helpers";

packages/ui/src/progress/circular-progress-indicator.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 interface ICircularProgressIndicator {

packages/ui/src/progress/linear-progress-indicator.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { Tooltip } from "../tooltip";
 import { cn } from "../../helpers";

packages/ui/src/progress/progress-bar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 type Props = {

packages/ui/src/progress/radial-progress.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useEffect, FC } from "react";
 
 interface IRadialProgressBar {

packages/ui/src/sortable/draggable.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

packages/ui/src/sortable/sortable.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { Fragment, useEffect, useMemo } from "react";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { Draggable } from "./draggable";

packages/ui/src/spinners/circular-bar-spinner.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 interface ICircularBarSpinner extends React.SVGAttributes<SVGElement> {

packages/ui/src/spinners/circular-spinner.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 // helpers
 import { cn } from "../../helpers";

packages/ui/src/toast/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { Toaster, toast } from "sonner";
 // icons

packages/ui/src/tooltip/tooltip.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { Tooltip2 } from "@blueprintjs/popover2";
 // helpers

packages/ui/src/typography/sub-heading.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { cn } from "../../helpers";