@usefui/components 1.5.3 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefui/components",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "Open Source React components library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -19,21 +19,21 @@
     "@types/react": "*",
     "@types/react-dom": "*",
     "@types/styled-components": "*",
-    "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
-    "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0",
-    "styled-components": "^5.1.34"
+    "react": ">=16.8",
+    "react-dom": ">=16.8",
+    "styled-components": ">=5.1.34"
   },
   "devDependencies": {
-    "@types/react": "^18.3.26",
-    "@types/react-dom": "^18.3.7",
-    "@types/styled-components": "^5.1.34",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/styled-components": "^5.1.36",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "styled-components": "^5.3.11",
     "typescript": "^5.9.3",
-    "@usefui/core": "^1.3.4",
-    "@usefui/hooks": "^1.3.4",
-    "@usefui/tokens": "^1.5.4"
+    "@usefui/core": "^1.4.0",
+    "@usefui/hooks": "^1.4.0",
+    "@usefui/tokens": "^1.6.0"
   },
   "scripts": {
     "test": "vitest run --coverage --logHeapUsage",

package/src/__tests__/MessageBubble.test.tsx

@@ -0,0 +1,179 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import { screen, render, cleanup, waitFor } from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { MessageBubble } from "../../src/message-bubble";
+
+const MOCK_DATE = new Date("2026-03-17T13:00:00Z");
+const MOCK_MESSAGE = "test-message-content";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+expect.extend(toHaveNoViolations);
+
+describe("MessageBubble", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(
+      <MessageBubble.Root>
+        <MessageBubble side="left">
+          <MessageBubble.Content>{MOCK_MESSAGE}</MessageBubble.Content>
+          <MessageBubble.Meta createdAt={MOCK_DATE} />
+        </MessageBubble>
+      </MessageBubble.Root>,
+    );
+
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+
+  test("Renders with accessibility definitions on the left side", async () => {
+    render(
+      <MessageBubble.Root>
+        <MessageBubble side="left">
+          <MessageBubble.Content>{MOCK_MESSAGE}</MessageBubble.Content>
+          <MessageBubble.Meta createdAt={MOCK_DATE} />
+        </MessageBubble>
+      </MessageBubble.Root>,
+    );
+
+    await waitFor(() => {
+      const bubble = screen.getByLabelText("message-bubble-left");
+      expect(bubble).toBeDefined();
+      expect(bubble.getAttribute("data-side")).toBe("left");
+
+      const meta = screen.getByLabelText("message-bubble-meta-left");
+      expect(meta).toBeDefined();
+      expect(meta.getAttribute("data-side")).toBe("left");
+    });
+  });
+
+  test("Renders with accessibility definitions on the right side", async () => {
+    render(
+      <MessageBubble.Root>
+        <MessageBubble side="right">
+          <MessageBubble.Content>{MOCK_MESSAGE}</MessageBubble.Content>
+          <MessageBubble.Meta createdAt={MOCK_DATE} />
+        </MessageBubble>
+      </MessageBubble.Root>,
+    );
+
+    await waitFor(() => {
+      const bubble = screen.getByLabelText("message-bubble-right");
+      expect(bubble).toBeDefined();
+      expect(bubble.getAttribute("data-side")).toBe("right");
+
+      const meta = screen.getByLabelText("message-bubble-meta-right");
+      expect(meta).toBeDefined();
+      expect(meta.getAttribute("data-side")).toBe("right");
+    });
+  });
+
+  test("Propagates side through context to all compound components", async () => {
+    render(
+      <MessageBubble.Root>
+        <MessageBubble side="right">
+          <MessageBubble.Content>{MOCK_MESSAGE}</MessageBubble.Content>
+          <MessageBubble.Meta createdAt={MOCK_DATE} />
+        </MessageBubble>
+      </MessageBubble.Root>,
+    );
+
+    await waitFor(() => {
+      const bubble = screen.getByLabelText("message-bubble-right");
+      const meta = screen.getByLabelText("message-bubble-meta-right");
+
+      expect(bubble.getAttribute("data-side")).toBe("right");
+      expect(meta.getAttribute("data-side")).toBe("right");
+
+      const content = meta.closest("[data-side]");
+      expect(content).toBeDefined();
+    });
+  });
+
+  test("Renders content with the correct message text", () => {
+    render(
+      <MessageBubble.Root>
+        <MessageBubble side="left">
+          <MessageBubble.Content>{MOCK_MESSAGE}</MessageBubble.Content>
+          <MessageBubble.Meta createdAt={MOCK_DATE} />
+        </MessageBubble>
+      </MessageBubble.Root>,
+    );
+
+    expect(screen.getByText(MOCK_MESSAGE)).toBeDefined();
+  });
+
+  test("Renders Meta with a correctly formatted date", () => {
+    render(
+      <MessageBubble.Root>
+        <MessageBubble side="left">
+          <MessageBubble.Content>{MOCK_MESSAGE}</MessageBubble.Content>
+          <MessageBubble.Meta createdAt={MOCK_DATE} />
+        </MessageBubble>
+      </MessageBubble.Root>,
+    );
+
+    const expected = new Intl.DateTimeFormat("en-US", {
+      dateStyle: "medium",
+      timeStyle: "short",
+    }).format(MOCK_DATE);
+
+    expect(screen.getByText(expected)).toBeDefined();
+  });
+
+  test("Renders raw prop on all compounds when set", async () => {
+    render(
+      <MessageBubble.Root>
+        <MessageBubble side="left" raw>
+          <MessageBubble.Content raw>{MOCK_MESSAGE}</MessageBubble.Content>
+          <MessageBubble.Meta createdAt={MOCK_DATE} raw />
+        </MessageBubble>
+      </MessageBubble.Root>,
+    );
+
+    await waitFor(() => {
+      const bubble = screen.getByLabelText("message-bubble-left");
+      const meta = screen.getByLabelText("message-bubble-meta-left");
+
+      expect(bubble.getAttribute("data-raw")).toBe("true");
+      expect(meta.getAttribute("data-raw")).toBe("true");
+    });
+  });
+
+  test("Renders multiple bubbles in a conversation with correct sides", async () => {
+    render(
+      <React.Fragment>
+        <MessageBubble.Root>
+          <MessageBubble side="left">
+            <MessageBubble.Content>Hello</MessageBubble.Content>
+            <MessageBubble.Meta createdAt={MOCK_DATE} />
+          </MessageBubble>
+        </MessageBubble.Root>
+        <MessageBubble.Root>
+          <MessageBubble side="right">
+            <MessageBubble.Content>Hi back</MessageBubble.Content>
+            <MessageBubble.Meta createdAt={MOCK_DATE} />
+          </MessageBubble>
+        </MessageBubble.Root>
+      </React.Fragment>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Hello")).toBeDefined();
+      expect(screen.getByText("Hi back")).toBeDefined();
+
+      expect(
+        screen.getByLabelText("message-bubble-left").getAttribute("data-side"),
+      ).toBe("left");
+      expect(
+        screen.getByLabelText("message-bubble-right").getAttribute("data-side"),
+      ).toBe("right");
+    });
+  });
+});

package/src/__tests__/Shimmer.test.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import { screen, render, cleanup } from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Shimmer } from "../../src/shimmer";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+expect.extend(toHaveNoViolations);
+
+describe("Shimmer", () => {
+  test("Renders without accessibility violations", async () => {
+    const { container } = render(<Shimmer>Loading your content…</Shimmer>);
+
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+
+  test("Renders with accessibility definition", () => {
+    render(<Shimmer>Loading your content…</Shimmer>);
+
+    const shimmer = screen.getByLabelText("shimmer-text");
+    expect(shimmer).toBeDefined();
+  });
+
+  test("Renders children correctly", () => {
+    render(<Shimmer>Loading your content…</Shimmer>);
+
+    expect(screen.getByText("Loading your content…")).toBeDefined();
+  });
+
+  test("Applies correct data attributes for default props", () => {
+    render(<Shimmer>Default shimmer</Shimmer>);
+
+    const shimmer = screen.getByLabelText("shimmer-text");
+    expect(shimmer.getAttribute("data-raw")).toBe("false");
+    expect(shimmer.getAttribute("data-duration")).toBe("2");
+    expect(shimmer.getAttribute("data-spread")).toBe("200");
+    expect(shimmer.getAttribute("data-shimmer-color")).toBe(
+      "var(--font-color-alpha-60)",
+    );
+    expect(shimmer.getAttribute("data-base-color")).toBe(
+      "var(--font-color-alpha-30)",
+    );
+  });
+
+  test("Applies correct data attributes for custom props", () => {
+    render(
+      <Shimmer
+        duration={5}
+        spread={300}
+        shimmerColor="var(--color-brand-alpha-80)"
+        baseColor="var(--color-brand-alpha-30)"
+      >
+        Custom shimmer
+      </Shimmer>,
+    );
+
+    const shimmer = screen.getByLabelText("shimmer-text");
+    expect(shimmer.getAttribute("data-duration")).toBe("5");
+    expect(shimmer.getAttribute("data-spread")).toBe("300");
+    expect(shimmer.getAttribute("data-shimmer-color")).toBe(
+      "var(--color-brand-alpha-80)",
+    );
+    expect(shimmer.getAttribute("data-base-color")).toBe(
+      "var(--color-brand-alpha-30)",
+    );
+  });
+
+  test("Applies data-raw attribute when raw prop is true", () => {
+    render(<Shimmer raw>Raw shimmer</Shimmer>);
+
+    const shimmer = screen.getByLabelText("shimmer-text");
+    expect(shimmer.getAttribute("data-raw")).toBe("true");
+  });
+
+  test("Renders with a custom aria-label", () => {
+    render(
+      <Shimmer aria-label="custom-shimmer-label">Accessible shimmer</Shimmer>,
+    );
+
+    expect(screen.getByLabelText("custom-shimmer-label")).toBeDefined();
+    expect(() => screen.getByLabelText("shimmer-text")).toThrow();
+  });
+
+  test("Renders multiple instances independently", () => {
+    render(
+      <React.Fragment>
+        <Shimmer aria-label="shimmer-1">First</Shimmer>
+        <Shimmer aria-label="shimmer-2" duration={5}>
+          Second
+        </Shimmer>
+      </React.Fragment>,
+    );
+
+    const first = screen.getByLabelText("shimmer-1");
+    const second = screen.getByLabelText("shimmer-2");
+
+    expect(first).toBeDefined();
+    expect(second).toBeDefined();
+    expect(first.getAttribute("data-duration")).toBe("2");
+    expect(second.getAttribute("data-duration")).toBe("5");
+  });
+
+  test("Forwards extra HTML span attributes", () => {
+    render(
+      <Shimmer id="my-shimmer" className="custom-class">
+        Forwarded attrs
+      </Shimmer>,
+    );
+
+    const shimmer = screen.getByLabelText("shimmer-text");
+    expect(shimmer.getAttribute("id")).toBe("my-shimmer");
+    expect(shimmer.getAttribute("class")).toContain("custom-class");
+  });
+});

package/src/__tests__/Tree.test.tsx

@@ -0,0 +1,275 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import {
+  screen,
+  render,
+  cleanup,
+  waitFor,
+  fireEvent,
+} from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Tree } from "../../src/tree";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+expect.extend(toHaveNoViolations);
+
+describe("Tree", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(
+      <Tree.Root>
+        <Tree>
+          <Tree.Node nodeId="node-1">
+            <Tree.Trigger nodeId="node-1">Node 1</Tree.Trigger>
+            <Tree.Content nodeId="node-1" defaultOpen>
+              <Tree.Node level={1} nodeId="node-1-child">
+                <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
+              </Tree.Node>
+            </Tree.Content>
+          </Tree.Node>
+        </Tree>
+      </Tree.Root>,
+    );
+
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+
+  //   test("Renders with accessibility definition", async () => {
+  //     render(
+  //       <Tree.Root>
+  //         <Tree>
+  //           <Tree.Node nodeId="node-1">
+  //             <Tree.Trigger nodeId="node-1">Node 1</Tree.Trigger>
+  //             <Tree.Content nodeId="node-1">
+  //               <Tree.Node level={1} nodeId="node-1-child">
+  //                 <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
+  //               </Tree.Node>
+  //             </Tree.Content>
+  //           </Tree.Node>
+  //         </Tree>
+  //       </Tree.Root>,
+  //     );
+
+  //     const treeView = screen.getByRole("tree");
+  //     expect(treeView).toBeDefined();
+
+  //     const treeItems = screen.getAllByRole("treeitem");
+  //     expect(treeItems.length).toBe(1);
+
+  //     expect(() => screen.getByRole("group")).toThrow();
+
+  //     const trigger = screen.getByLabelText("node-1-action");
+  //     expect(trigger).toBeDefined();
+  //     expect(trigger.getAttribute("aria-expanded")).toBe("false");
+  //     expect(trigger.getAttribute("aria-selected")).toBe("false");
+  //     expect(trigger.getAttribute("data-state")).toBe("collapsed");
+
+  //     fireEvent.click(trigger);
+  //     await waitFor(() => {
+  //       const group = screen.getByRole("group");
+  //       expect(group).toBeDefined();
+  //       expect(group.getAttribute("aria-labelledby")).toBeDefined();
+  //       expect(group.getAttribute("id")).toBeDefined();
+  //       expect(group.getAttribute("data-nodeid")).toBe("node-1");
+
+  //       expect(trigger.getAttribute("aria-expanded")).toBe("true");
+  //       expect(trigger.getAttribute("aria-selected")).toBe("true");
+  //       expect(trigger.getAttribute("data-state")).toBe("expanded");
+
+  //       const childItems = screen.getAllByRole("treeitem");
+  //       expect(childItems.length).toBe(2);
+  //     });
+  //   });
+
+  test("Renders with correct aria-level on nested nodes", async () => {
+    render(
+      <Tree.Root>
+        <Tree>
+          <Tree.Node nodeId="root">
+            <Tree.Trigger nodeId="root">Root</Tree.Trigger>
+            <Tree.Content nodeId="root" defaultOpen>
+              <Tree.Node level={1} nodeId="child">
+                <Tree.Trigger nodeId="child">Child</Tree.Trigger>
+                <Tree.Content nodeId="child" defaultOpen>
+                  <Tree.Node level={2} nodeId="grandchild">
+                    <Tree.Trigger nodeId="grandchild">Grandchild</Tree.Trigger>
+                  </Tree.Node>
+                </Tree.Content>
+              </Tree.Node>
+            </Tree.Content>
+          </Tree.Node>
+        </Tree>
+      </Tree.Root>,
+    );
+
+    const treeItems = screen.getAllByRole("treeitem");
+    expect((treeItems[0] as HTMLElement).getAttribute("aria-level")).toBe("1");
+    expect((treeItems[1] as HTMLElement).getAttribute("aria-level")).toBe("2");
+    expect((treeItems[2] as HTMLElement).getAttribute("aria-level")).toBe("3");
+  });
+
+  //   test("Renders with defaultOpen and expands content on mount", async () => {
+  //     render(
+  //       <Tree.Root>
+  //         <Tree>
+  //           <Tree.Node nodeId="node-1">
+  //             <Tree.Trigger nodeId="node-1">Node 1</Tree.Trigger>
+  //             <Tree.Content nodeId="node-1" defaultOpen>
+  //               <Tree.Node level={1} nodeId="node-1-child">
+  //                 <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
+  //               </Tree.Node>
+  //             </Tree.Content>
+  //           </Tree.Node>
+  //         </Tree>
+  //       </Tree.Root>,
+  //     );
+
+  //     await waitFor(() => {
+  //       expect(screen.getByRole("group")).toBeDefined();
+  //       expect(screen.getByText("Node 1 Child")).toBeDefined();
+
+  //       const trigger = screen.getByLabelText("node-1-action");
+  //       expect(trigger.getAttribute("aria-expanded")).toBe("true");
+  //       expect(trigger.getAttribute("data-state")).toBe("expanded");
+  //     });
+  //   });
+
+  test("Fires the defined callback and toggles content when trigger is clicked", async () => {
+    const onClickCallback = vi.fn();
+
+    render(
+      <Tree.Root>
+        <Tree>
+          <Tree.Node nodeId="node-1">
+            <Tree.Trigger
+              nodeId="node-1"
+              name="trigger-1"
+              onClick={onClickCallback}
+            >
+              Node 1
+            </Tree.Trigger>
+            <Tree.Content nodeId="node-1" defaultOpen>
+              <Tree.Node level={1} nodeId="node-1-child">
+                <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
+              </Tree.Node>
+            </Tree.Content>
+          </Tree.Node>
+          <Tree.Node nodeId="node-2">
+            <Tree.Trigger nodeId="node-2" name="trigger-2">
+              Node 2
+            </Tree.Trigger>
+            <Tree.Content nodeId="node-2">
+              <Tree.Node level={1} nodeId="node-2-child">
+                <Tree.Trigger nodeId="node-2-child">Node 2 Child</Tree.Trigger>
+              </Tree.Node>
+            </Tree.Content>
+          </Tree.Node>
+        </Tree>
+      </Tree.Root>,
+    );
+
+    expect(screen.getByText("Node 1 Child")).toBeDefined();
+    expect(() => screen.getByText("Node 2 Child")).toThrow();
+
+    fireEvent.click(screen.getByLabelText("trigger-2-action"));
+    await waitFor(() => {
+      expect(screen.getByText("Node 2 Child")).toBeDefined();
+    });
+
+    fireEvent.click(screen.getByLabelText("trigger-1-action"));
+    await waitFor(() => {
+      expect(() => screen.getByText("Node 1 Child")).toThrow();
+      expect(onClickCallback).toHaveBeenCalledTimes(1);
+    });
+
+    fireEvent.click(screen.getByLabelText("trigger-1-action"));
+    await waitFor(() => {
+      expect(screen.getByText("Node 1 Child")).toBeDefined();
+      expect(onClickCallback).toHaveBeenCalledTimes(2);
+    });
+
+    fireEvent.click(screen.getByLabelText("trigger-1-action"));
+    await waitFor(() => {
+      expect(() => screen.getByText("Node 1 Child")).toThrow();
+    });
+  });
+
+  test("Fires onSelectionChange callback with selected node ids", async () => {
+    const onSelectionChange = vi.fn();
+
+    render(
+      <Tree.Root onSelectionChange={onSelectionChange}>
+        <Tree>
+          <Tree.Node nodeId="node-1">
+            <Tree.Trigger nodeId="node-1" name="trigger-1">
+              Node 1
+            </Tree.Trigger>
+          </Tree.Node>
+          <Tree.Node nodeId="node-2">
+            <Tree.Trigger nodeId="node-2" name="trigger-2">
+              Node 2
+            </Tree.Trigger>
+          </Tree.Node>
+        </Tree>
+      </Tree.Root>,
+    );
+
+    fireEvent.click(screen.getByLabelText("trigger-1-action"));
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      expect(onSelectionChange).toHaveBeenCalledWith(["node-1"]);
+    });
+
+    fireEvent.click(screen.getByLabelText("trigger-2-action"));
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledTimes(2);
+      expect(onSelectionChange).toHaveBeenCalledWith(["node-1", "node-2"]);
+    });
+
+    fireEvent.click(screen.getByLabelText("trigger-1-action"));
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledTimes(3);
+      expect(onSelectionChange).toHaveBeenCalledWith(["node-2"]);
+    });
+  });
+
+  test("Renders with defaultExpandedIds and expands matching nodes on mount", async () => {
+    render(
+      <Tree.Root defaultExpandedIds={["node-1", "node-2"]}>
+        <Tree>
+          <Tree.Node nodeId="node-1">
+            <Tree.Trigger nodeId="node-1">Node 1</Tree.Trigger>
+            <Tree.Content nodeId="node-1">
+              <Tree.Node level={1} nodeId="node-1-child">
+                <Tree.Trigger nodeId="node-1-child">Node 1 Child</Tree.Trigger>
+              </Tree.Node>
+            </Tree.Content>
+          </Tree.Node>
+          <Tree.Node nodeId="node-2">
+            <Tree.Trigger nodeId="node-2">Node 2</Tree.Trigger>
+            <Tree.Content nodeId="node-2">
+              <Tree.Node level={1} nodeId="node-2-child">
+                <Tree.Trigger nodeId="node-2-child">Node 2 Child</Tree.Trigger>
+              </Tree.Node>
+            </Tree.Content>
+          </Tree.Node>
+        </Tree>
+      </Tree.Root>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Node 1 Child")).toBeDefined();
+      expect(screen.getByText("Node 2 Child")).toBeDefined();
+
+      const groups = screen.getAllByRole("group");
+      expect(groups.length).toBe(2);
+    });
+  });
+});

package/src/accordion/hooks/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, createContext, useContext } from "react";
 import { IReactChildren, IComponentAPI } from "../../../../../types";
 
@@ -11,7 +13,7 @@ export const useAccordion = () => useContext(AccordionContext);
 
 export const AccordionProvider = ({
   children,
-}: IReactChildren): JSX.Element => {
+}: IReactChildren): React.JSX.Element => {
   const context = useAccordionProvider();
 
   return (

package/src/badge/index.tsx

@@ -5,9 +5,8 @@ import { BadgeWrapper } from "./styles";
 
 import type { IComponentStyling, TComponentShape } from "../../../../types";
 
-interface IBadgeProperties
-  extends IComponentStyling,
-    React.ComponentProps<"div"> {
+export interface IBadgeProperties
+  extends IComponentStyling, React.ComponentProps<"div"> {
   variant?:
     | "primary"
     | "secondary"

package/src/checkbox/hooks/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, createContext, useContext } from "react";
 import {
   IReactChildren,
@@ -13,7 +15,9 @@ const defaultComponentAPI = {
 const CheckboxContext = createContext<IComponentAPI>(defaultComponentAPI);
 export const useCheckbox = () => useContext(CheckboxContext);
 
-export const CheckboxProvider = ({ children }: IReactChildren): JSX.Element => {
+export const CheckboxProvider = ({
+  children,
+}: IReactChildren): React.JSX.Element => {
   const context = useCheckboxProvider();
 
   return (

package/src/collapsible/hooks/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, createContext, useContext } from "react";
 import { IReactChildren, IComponentAPI } from "../../../../../types";
 
@@ -11,7 +13,7 @@ export const useCollapsible = () => useContext(CollapsibleContext);
 
 export const CollapsibleProvider = ({
   children,
-}: IReactChildren): JSX.Element => {
+}: IReactChildren): React.JSX.Element => {
   const context = useCollapsibleProvider();
 
   return (