chore: use client directive

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/dropdown/common/button.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { Fragment } from "react";
 // headless ui
 import { Combobox } from "@headlessui/react";

packages/ui/src/dropdown/common/input-search.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, useEffect, useRef } from "react";
 // headless ui
 import { Combobox } from "@headlessui/react";

packages/ui/src/dropdown/common/loader.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 export const DropdownOptionsLoader = () => (

packages/ui/src/dropdown/common/options.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 // headless ui
 import { Combobox } from "@headlessui/react";

packages/ui/src/dropdown/multi-select.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, useMemo, useRef, useState } from "react";
 import sortBy from "lodash/sortBy";
 // headless ui

packages/ui/src/dropdown/single-select.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, useMemo, useRef, useState } from "react";
 import sortBy from "lodash/sortBy";
 // headless ui

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-helper.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Placement } from "@popperjs/core";
 import { EmojiClickData, Theme } from "emoji-picker-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/icons/archive-icon.tsx

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

packages/ui/src/icons/blocked-icon.tsx

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

packages/ui/src/icons/blocker-icon.tsx

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

packages/ui/src/icons/calendar-after-icon.tsx

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

packages/ui/src/icons/calendar-before-icon.tsx

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

packages/ui/src/icons/center-panel-icon.tsx

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

packages/ui/src/icons/create-icon.tsx

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

packages/ui/src/icons/cycle/circle-dot-full-icon.tsx

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

packages/ui/src/icons/cycle/contrast-icon.tsx

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

packages/ui/src/icons/cycle/cycle-group-icon.tsx

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

packages/ui/src/icons/cycle/double-circle-icon.tsx

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

packages/ui/src/icons/dice-icon.tsx

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

packages/ui/src/icons/discord-icon.tsx

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

packages/ui/src/icons/full-screen-panel-icon.tsx

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

packages/ui/src/icons/github-icon.tsx

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

packages/ui/src/icons/info-icon.tsx

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

packages/ui/src/icons/layer-stack.tsx

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

packages/ui/src/icons/layers-icon.tsx

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

packages/ui/src/icons/module/backlog.tsx

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

packages/ui/src/icons/module/cancelled.tsx

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

packages/ui/src/icons/module/completed.tsx

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

packages/ui/src/icons/module/in-progress.tsx

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

packages/ui/src/icons/module/module-status-icon.tsx

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

packages/ui/src/icons/module/paused.tsx

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

packages/ui/src/icons/module/planned.tsx

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

packages/ui/src/icons/photo-filter-icon.tsx

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

packages/ui/src/icons/priority-icon.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { AlertCircle, Ban, SignalHigh, SignalLow, SignalMedium } from "lucide-react";
 import { cn } from "../../helpers";

packages/ui/src/icons/related-icon.tsx

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

packages/ui/src/icons/side-panel-icon.tsx

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

packages/ui/src/icons/state/backlog-group-icon.tsx

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

packages/ui/src/icons/state/cancelled-group-icon.tsx

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

packages/ui/src/icons/state/completed-group-icon.tsx

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

packages/ui/src/icons/state/started-group-icon.tsx

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

packages/ui/src/icons/state/state-group-icon.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 import { BacklogGroupIcon } from "./backlog-group-icon";

packages/ui/src/icons/state/unstarted-group-icon.tsx

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

packages/ui/src/icons/transfer-icon.tsx

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

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";