@dust-tt/sparkle 0.2.210-rc75 → 0.2.211

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.210-rc75",
+  "version": "0.2.211",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

package/src/_index.ts

@@ -254,13 +254,13 @@ import {
   ArrowDownOnSquare as ArrowDownOnSquareIcon,
   ArrowDownS as ArrowDownSIcon,
   ArrowLeft as ArrowLeftIcon,
-ArrowLeftS as ArrowLeftSIcon,
+  ArrowLeftS as ArrowLeftSIcon,
   ArrowPath as ArrowPathIcon,
   ArrowRight as ArrowRightIcon,
-ArrowRightS as ArrowRightSIcon,
+  ArrowRightS as ArrowRightSIcon,
   ArrowUp as ArrowUpIcon,
   ArrowUpOnSquare as ArrowUpOnSquareIcon,
-ArrowUpS as ArrowUpSIcon,
+  ArrowUpS as ArrowUpSIcon,
   Attachment as AttachmentIcon,
   Backspace as BackspaceIcon,
   Bookmark as BookmarkIcon,
@@ -273,8 +273,8 @@ ArrowUpS as ArrowUpSIcon,
   ChatBubbleThought as ChatBubbleThoughtIcon,
   Check as CheckIcon,
   CheckCircle as CheckCircleIcon,
-ChevronDoubleLeft as ChevronDoubleLeftIcon,
-ChevronDoubleRight as ChevronDoubleRightIcon,
+  ChevronDoubleLeft as ChevronDoubleLeftIcon,
+  ChevronDoubleRight as ChevronDoubleRightIcon,
   ChevronDown as ChevronDownIcon,
   ChevronLeft as ChevronLeftIcon,
   ChevronRight as ChevronRightIcon,
@@ -291,7 +291,7 @@ ChevronDoubleRight as ChevronDoubleRightIcon,
   Cog6Tooth as Cog6ToothIcon,
   Command as CommandIcon,
   CommandLine as CommandLineIcon,
-Company as CompanyIcon,
+  Company as CompanyIcon,
   Cube as CubeIcon,
   Dash as DashIcon,
   Document as DocumentIcon,
@@ -306,7 +306,7 @@ Company as CompanyIcon,
   ExternalLink as ExternalLinkIcon,
   Eye as EyeIcon,
   EyeSlash as EyeSlashIcon,
-Filter as FilterIcon,
+  Filter as FilterIcon,
   Fire as FireIcon,
   Flag as FlagIcon,
   Folder as FolderIcon,
@@ -317,11 +317,11 @@ Filter as FilterIcon,
   Grab as GrabIcon,
   HandThumbDown as HandThumbDownIcon,
   HandThumbUp as HandThumbUpIcon,
-Heart as HeartIcon,
+  Heart as HeartIcon,
   HeartAlt as HeartAltIcon,
   Hexagon as HexagonIcon,
-History as HistoryIcon,
-Home as HomeIcon,
+  History as HistoryIcon,
+  Home as HomeIcon,
   Image as ImageIcon,
   InformationCircle as InformationCircleIcon,
   Key as KeyIcon,
@@ -336,7 +336,7 @@ Home as HomeIcon,
   Logout as LogoutIcon,
   Magic as MagicIcon,
   MagnifyingGlass as MagnifyingGlassIcon,
-MarkPen as MarkPenIcon,
+  MarkPen as MarkPenIcon,
   Menu as MenuIcon,
   More as MoreIcon,
   MovingMail as MovingMailIcon,
@@ -369,7 +369,7 @@ MarkPen as MarkPenIcon,
   Template as TemplateIcon,
   TestTube as TestTubeIcon,
   Time as TimeIcon,
-Translate as TranslateIcon,
+  Translate as TranslateIcon,
   Trash as TrashIcon,
   Triangle as TriangleIcon,
   User as UserIcon,
@@ -387,13 +387,13 @@ export {
   ArrowDownOnSquareIcon,
   ArrowDownSIcon,
   ArrowLeftIcon,
-ArrowLeftSIcon,
+  ArrowLeftSIcon,
   ArrowPathIcon,
   ArrowRightIcon,
-ArrowRightSIcon,
+  ArrowRightSIcon,
   ArrowUpIcon,
   ArrowUpOnSquareIcon,
-ArrowUpSIcon,
+  ArrowUpSIcon,
   AttachmentIcon,
   BackspaceIcon,
   BookmarkIcon,
@@ -406,8 +406,8 @@ ArrowUpSIcon,
   ChatBubbleThoughtIcon,
   CheckCircleIcon,
   CheckIcon,
-ChevronDoubleLeftIcon,
-ChevronDoubleRightIcon,
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -424,7 +424,7 @@ ChevronDoubleRightIcon,
   Cog6ToothIcon,
   CommandIcon,
   CommandLineIcon,
-CompanyIcon,
+  CompanyIcon,
   CubeIcon,
   DashIcon,
   DocumentDuplicateIcon,
@@ -439,7 +439,7 @@ CompanyIcon,
   ExternalLinkIcon,
   EyeIcon,
   EyeSlashIcon,
-FilterIcon,
+  FilterIcon,
   FireIcon,
   FlagIcon,
   FolderIcon,
@@ -451,10 +451,10 @@ FilterIcon,
   HandThumbDownIcon,
   HandThumbUpIcon,
   HeartAltIcon,
-HeartIcon,
+  HeartIcon,
   HexagonIcon,
-HistoryIcon,
-HomeIcon,
+  HistoryIcon,
+  HomeIcon,
   ImageIcon,
   InformationCircleIcon,
   KeyIcon,
@@ -469,7 +469,7 @@ HomeIcon,
   LogoutIcon,
   MagicIcon,
   MagnifyingGlassIcon,
-MarkPenIcon,
+  MarkPenIcon,
   MenuIcon,
   MoreIcon,
   MovingMailIcon,
@@ -502,7 +502,7 @@ MarkPenIcon,
   TemplateIcon,
   TestTubeIcon,
   TimeIcon,
-TranslateIcon,
+  TranslateIcon,
   TrashIcon,
   TriangleIcon,
   UserArrowIcon,
@@ -520,13 +520,13 @@ import {
   ArrowDownOnSquare as ArrowDownOnSquareStrokeIcon,
   ArrowDownS as ArrowDownSStrokeIcon,
   ArrowLeft as ArrowLeftStrokeIcon,
-ArrowLeftS as ArrowLeftSStrokeIcon,
+  ArrowLeftS as ArrowLeftSStrokeIcon,
   ArrowPath as ArrowPathStrokeIcon,
   ArrowRight as ArrowRightStrokeIcon,
-ArrowRightS as ArrowRightSStrokeIcon,
+  ArrowRightS as ArrowRightSStrokeIcon,
   ArrowUp as ArrowUpStrokeIcon,
   ArrowUpOnSquare as ArrowUpOnSquareStrokeIcon,
-ArrowUpS as ArrowUpSStrokeIcon,
+  ArrowUpS as ArrowUpSStrokeIcon,
   Attachment as AttachmentStrokeIcon,
   Backspace as BackspaceStrokeIcon,
   Bookmark as BookmarkStrokeIcon,
@@ -539,8 +539,8 @@ ArrowUpS as ArrowUpSStrokeIcon,
   ChatBubbleThought as ChatBubbleThoughtStrokeIcon,
   Check as CheckStrokeIcon,
   CheckCircle as CheckCircleStrokeIcon,
-ChevronDoubleLeft as ChevronDoubleLeftStrokeIcon,
-ChevronDoubleRight as ChevronDoubleRightStrokeIcon,
+  ChevronDoubleLeft as ChevronDoubleLeftStrokeIcon,
+  ChevronDoubleRight as ChevronDoubleRightStrokeIcon,
   ChevronDown as ChevronDownStrokeIcon,
   ChevronLeft as ChevronLeftStrokeIcon,
   ChevronRight as ChevronRightStrokeIcon,
@@ -557,7 +557,7 @@ ChevronDoubleRight as ChevronDoubleRightStrokeIcon,
   Cog6Tooth as Cog6ToothStrokeIcon,
   Command as CommandStrokeIcon,
   CommandLine as CommandLineStrokeIcon,
-Company as CompanyStrokeIcon,
+  Company as CompanyStrokeIcon,
   Cube as CubeStrokeIcon,
   Dash as DashStrokeIcon,
   Document as DocumentStrokeIcon,
@@ -572,7 +572,7 @@ Company as CompanyStrokeIcon,
   ExternalLink as ExternalLinkStrokeIcon,
   Eye as EyeStrokeIcon,
   EyeSlash as EyeSlashStrokeIcon,
-Filter as FilterStrokeIcon,
+  Filter as FilterStrokeIcon,
   Fire as FireStrokeIcon,
   Flag as FlagStrokeIcon,
   Folder as FolderStrokeIcon,
@@ -583,11 +583,11 @@ Filter as FilterStrokeIcon,
   Grab as GrabStrokeIcon,
   HandThumbDown as HandThumbDownStrokeIcon,
   HandThumbUp as HandThumbUpStrokeIcon,
-Heart as HeartStrokeIcon,
+  Heart as HeartStrokeIcon,
   HeartAlt as HeartAltStrokeIcon,
   Hexagon as HexagonStrokeIcon,
-History as HistoryStrokeIcon,
-Home as HomeStrokeIcon,
+  History as HistoryStrokeIcon,
+  Home as HomeStrokeIcon,
   Image as ImageStrokeIcon,
   InformationCircle as InformationCircleStrokeIcon,
   Key as KeyStrokeIcon,
@@ -602,7 +602,7 @@ Home as HomeStrokeIcon,
   Logout as LogoutStrokeIcon,
   Magic as MagicStrokeIcon,
   MagnifyingGlass as MagnifyingGlassStrokeIcon,
-MarkPen as MarkPenStrokeIcon,
+  MarkPen as MarkPenStrokeIcon,
   Menu as MenuStrokeIcon,
   More as MoreStrokeIcon,
   MovingMail as MovingMailStrokeIcon,
@@ -635,7 +635,7 @@ MarkPen as MarkPenStrokeIcon,
   Template as TemplateStrokeIcon,
   TestTube as TestTubeStrokeIcon,
   Time as TimeStrokeIcon,
-Translate as TranslateStrokeIcon,
+  Translate as TranslateStrokeIcon,
   Trash as TrashStrokeIcon,
   Triangle as TriangleStrokeIcon,
   User as UserStrokeIcon,
@@ -652,13 +652,13 @@ export {
   ArrowDownOnSquareStrokeIcon,
   ArrowDownSStrokeIcon,
   ArrowDownStrokeIcon,
-ArrowLeftSStrokeIcon,
+  ArrowLeftSStrokeIcon,
   ArrowLeftStrokeIcon,
   ArrowPathStrokeIcon,
-ArrowRightSStrokeIcon,
+  ArrowRightSStrokeIcon,
   ArrowRightStrokeIcon,
   ArrowUpOnSquareStrokeIcon,
-ArrowUpSStrokeIcon,
+  ArrowUpSStrokeIcon,
   ArrowUpStrokeIcon,
   AttachmentStrokeIcon,
   BackspaceStrokeIcon,
@@ -672,8 +672,8 @@ ArrowUpSStrokeIcon,
   ChatBubbleThoughtStrokeIcon,
   CheckCircleStrokeIcon,
   CheckStrokeIcon,
-ChevronDoubleLeftStrokeIcon,
-ChevronDoubleRightStrokeIcon,
+  ChevronDoubleLeftStrokeIcon,
+  ChevronDoubleRightStrokeIcon,
   ChevronDownStrokeIcon,
   ChevronLeftStrokeIcon,
   ChevronRightStrokeIcon,
@@ -690,7 +690,7 @@ ChevronDoubleRightStrokeIcon,
   Cog6ToothStrokeIcon,
   CommandLineStrokeIcon,
   CommandStrokeIcon,
-CompanyStrokeIcon,
+  CompanyStrokeIcon,
   CubeStrokeIcon,
   DashStrokeIcon,
   DocumentDuplicateStrokeIcon,
@@ -705,7 +705,7 @@ CompanyStrokeIcon,
   ExternalLinkStrokeIcon,
   EyeSlashStrokeIcon,
   EyeStrokeIcon,
-FilterStrokeIcon,
+  FilterStrokeIcon,
   FireStrokeIcon,
   FlagStrokeIcon,
   FolderOpenStrokeIcon,
@@ -717,10 +717,10 @@ FilterStrokeIcon,
   HandThumbDownStrokeIcon,
   HandThumbUpStrokeIcon,
   HeartAltStrokeIcon,
-HeartStrokeIcon,
+  HeartStrokeIcon,
   HexagonStrokeIcon,
-HistoryStrokeIcon,
-HomeStrokeIcon,
+  HistoryStrokeIcon,
+  HomeStrokeIcon,
   ImageStrokeIcon,
   InformationCircleStrokeIcon,
   KeyStrokeIcon,
@@ -735,7 +735,7 @@ HomeStrokeIcon,
   LogoutStrokeIcon,
   MagicStrokeIcon,
   MagnifyingGlassStrokeIcon,
-MarkPenStrokeIcon,
+  MarkPenStrokeIcon,
   MenuStrokeIcon,
   MoreStrokeIcon,
   MovingMailStrokeIcon,
@@ -768,7 +768,7 @@ MarkPenStrokeIcon,
   TemplateStrokeIcon,
   TestTubeStrokeIcon,
   TimeStrokeIcon,
-TranslateStrokeIcon,
+  TranslateStrokeIcon,
   TrashStrokeIcon,
   TriangleStrokeIcon,
   UserArrowStrokeIcon,

package/src/components/Checkbox.tsx

@@ -8,7 +8,7 @@ import { Icon } from "./Icon";
 export interface CheckboxProps {
   variant?: "selectable" | "checkable";
   size?: "xs" | "sm";
-  checked?: true | false | "partial";
+  checked?: "checked" | "unchecked" | "partial";
   disabled?: boolean;
   onChange: (checked: boolean) => void;
   className?: string;
@@ -16,7 +16,7 @@ export interface CheckboxProps {
 
 export function Checkbox({
   variant = "selectable",
-  checked = false,
+  checked = "unchecked",
   size = "sm",
   onChange,
   className = "",
@@ -25,11 +25,11 @@ export function Checkbox({
   let isChecked: boolean;
   let isPartialChecked: boolean;
   switch (checked) {
-    case true:
+    case "checked":
       isChecked = true;
       isPartialChecked = false;
       break;
-    case false:
+    case "unchecked":
       isChecked = false;
       isPartialChecked = false;
       break;

package/src/components/DataTable.tsx

@@ -11,11 +11,12 @@ import {
 import React, { ReactNode, useEffect, useState } from "react";
 
 import { DropdownItemProps } from "@sparkle/components/DropdownMenu";
-import { Avatar, DropdownMenu, MoreIcon } from "@sparkle/index";
+import { Avatar, DropdownMenu, IconButton, MoreIcon } from "@sparkle/index";
 import { ArrowDownIcon, ArrowUpIcon } from "@sparkle/index";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
+import { breakpoints, useWindowSize } from "./WindowUtility";
 
 interface TBaseData {
   onClick?: () => void;
@@ -26,9 +27,9 @@ interface ColumnBreakpoint {
   [columnId: string]: "xs" | "sm" | "md" | "lg" | "xl";
 }
 
-interface DataTableProps<TData extends TBaseData, TValue> {
+interface DataTableProps<TData extends TBaseData> {
   data: TData[];
-  columns: ColumnDef<TData, TValue>[];
+  columns: ColumnDef<TData, any>[]; // eslint-disable-line @typescript-eslint/no-explicit-any
   className?: string;
   filter?: string;
   filterColumn?: string;
@@ -36,7 +37,17 @@ interface DataTableProps<TData extends TBaseData, TValue> {
   columnsBreakpoints?: ColumnBreakpoint;
 }
 
-export function DataTable<TData extends TBaseData, TValue>({
+function shouldRenderColumn(
+  windowWidth: number,
+  breakpoint?: keyof typeof breakpoints
+): boolean {
+  if (!breakpoint) {
+    return true;
+  }
+  return windowWidth >= breakpoints[breakpoint];
+}
+
+export function DataTable<TData extends TBaseData>({
   data,
   columns,
   className,
@@ -44,7 +55,8 @@ export function DataTable<TData extends TBaseData, TValue>({
   filterColumn,
   initialColumnOrder,
   columnsBreakpoints = {},
-}: DataTableProps<TData, TValue>) {
+}: DataTableProps<TData>) {
+  const windowSize = useWindowSize();
   const [sorting, setSorting] = useState<SortingState>(
     initialColumnOrder ?? []
   );
@@ -75,43 +87,49 @@ export function DataTable<TData extends TBaseData, TValue>({
       <DataTable.Header>
         {table.getHeaderGroups().map((headerGroup) => (
           <DataTable.Row key={headerGroup.id}>
-            {headerGroup.headers.map((header) => (
-              <DataTable.Head
-                key={header.id}
-                onClick={header.column.getToggleSortingHandler()}
-                className={classNames(
-                  header.column.getCanSort() ? "s-cursor-pointer" : "",
-                  columnsBreakpoints[header.id]
-                    ? `s-hidden ${columnsBreakpoints[header.id]}:s-block`
-                    : ""
-                )}
-              >
-                <div className="s-flex s-items-center s-space-x-1 s-whitespace-nowrap">
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
+            {headerGroup.headers.map((header) => {
+              const breakpoint = columnsBreakpoints[header.id];
+              if (
+                !windowSize.width ||
+                !shouldRenderColumn(windowSize.width, breakpoint)
+              ) {
+                return null;
+              }
+              return (
+                <DataTable.Head
+                  key={header.id}
+                  onClick={header.column.getToggleSortingHandler()}
+                  className={classNames(
+                    header.column.getCanSort() ? "s-cursor-pointer" : ""
                   )}
-                  {header.column.getCanSort() && (
-                    <Icon
-                      visual={
-                        header.column.getIsSorted() === "asc"
-                          ? ArrowUpIcon
-                          : header.column.getIsSorted() === "desc"
-                            ? ArrowDownIcon
-                            : ArrowDownIcon
-                      }
-                      size="xs"
-                      className={classNames(
-                        "s-ml-1",
-                        header.column.getIsSorted()
-                          ? "s-opacity-100"
-                          : "s-opacity-0"
-                      )}
-                    />
-                  )}
-                </div>
-              </DataTable.Head>
-            ))}
+                >
+                  <div className="s-flex s-items-center s-space-x-1 s-whitespace-nowrap">
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                    {header.column.getCanSort() && (
+                      <Icon
+                        visual={
+                          header.column.getIsSorted() === "asc"
+                            ? ArrowUpIcon
+                            : header.column.getIsSorted() === "desc"
+                              ? ArrowDownIcon
+                              : ArrowDownIcon
+                        }
+                        size="xs"
+                        className={classNames(
+                          "s-ml-1",
+                          header.column.getIsSorted()
+                            ? "s-opacity-100"
+                            : "s-opacity-0"
+                        )}
+                      />
+                    )}
+                  </div>
+                </DataTable.Head>
+              );
+            })}
           </DataTable.Row>
         ))}
       </DataTable.Header>
@@ -122,18 +140,20 @@ export function DataTable<TData extends TBaseData, TValue>({
             onClick={row.original.onClick}
             moreMenuItems={row.original.moreMenuItems}
           >
-            {row.getVisibleCells().map((cell) => (
-              <DataTable.Cell
-                key={cell.id}
-                className={classNames(
-                  columnsBreakpoints[cell.column.id]
-                    ? `s-hidden ${columnsBreakpoints[cell.column.id]}:s-block`
-                    : ""
-                )}
-              >
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </DataTable.Cell>
-            ))}
+            {row.getVisibleCells().map((cell) => {
+              const breakpoint = columnsBreakpoints[cell.column.id];
+              if (
+                !windowSize.width ||
+                !shouldRenderColumn(windowSize.width, breakpoint)
+              ) {
+                return null;
+              }
+              return (
+                <DataTable.Cell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </DataTable.Cell>
+              );
+            })}
           </DataTable.Row>
         ))}
       </DataTable.Body>
@@ -225,23 +245,23 @@ DataTable.Row = function Row({
   return (
     <tr
       className={classNames(
-        "s-border-b s-border-structure-200 s-text-sm",
-        onClick ? "s-cursor-pointer hover:s-bg-gray-50" : "",
+        "s-group s-border-b s-border-structure-200 s-text-sm s-transition-colors s-duration-300 s-ease-out",
+        onClick ? "s-cursor-pointer hover:s-bg-structure-50" : "",
         className || ""
       )}
       onClick={onClick ? onClick : undefined}
       {...props}
     >
       {children}
-      {moreMenuItems && (
-        <td className="s-w-1 s-cursor-pointer s-pl-1 s-text-element-600">
-          <DropdownMenu className="s-flex">
+      <td className="s-w-1 s-cursor-pointer s-pl-1 s-text-element-600">
+        {moreMenuItems && (
+          <DropdownMenu className="s-mr-1.5 s-flex">
             <DropdownMenu.Button
               onClick={(e) => {
                 e.stopPropagation();
               }}
             >
-              <Icon visual={MoreIcon} size="sm" />
+              <IconButton icon={MoreIcon} size="sm" variant="tertiary" />
             </DropdownMenu.Button>
             <DropdownMenu.Items origin="topRight" width={220}>
               {moreMenuItems?.map((item, index) => (
@@ -249,8 +269,8 @@ DataTable.Row = function Row({
               ))}
             </DropdownMenu.Items>
           </DropdownMenu>
-        </td>
-      )}
+        )}
+      </td>
     </tr>
   );
 };
@@ -263,7 +283,7 @@ DataTable.Cell = function Cell({ children, className, ...props }: CellProps) {
   return (
     <td
       className={classNames(
-        "s-whitespace-nowrap s-py-2 s-pl-0.5 s-text-element-800",
+        "s-h-12 s-whitespace-nowrap s-pl-1.5 s-text-element-800",
         className || ""
       )}
       {...props}
@@ -293,7 +313,10 @@ DataTable.CellContent = function CellContent({
   ...props
 }: CellContentProps) {
   return (
-    <div className={classNames("s-flex s-py-2", className || "")} {...props}>
+    <div
+      className={classNames("s-flex s-items-center s-py-2", className || "")}
+      {...props}
+    >
       {avatarUrl && (
         <Avatar
           visual={avatarUrl}

package/src/components/Item.tsx

@@ -74,7 +74,7 @@ export function Item({
   disabled = false,
   className = "",
   href,
-  target
+  target,
 }: ItemProps) {
   const { components } = React.useContext(SparkleContext);
 

package/src/components/Tree.tsx

@@ -23,6 +23,8 @@ export function Tree({
   variant = "finder",
 }: TreeProps) {
   const modifiedChildren = React.Children.map(children, (child) => {
+    // /!\ Limitation: This stops on the first invalid element.
+    // Meaning that if Tree.Item is not the first child, it will not work.
     if (React.isValidElement<TreeItemProps>(child)) {
       // Clone the child element and pass the necessary props
       const childProps: Partial<TreeItemProps> = {};

package/src/components/WindowUtility.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+
+// Define breakpoints
+export const breakpoints = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  xxl: 1536,
+};
+
+// Helper function to determine active breakpoint
+function getActiveBreakpoint(width: number): keyof typeof breakpoints {
+  if (width >= breakpoints.xxl) {
+    return "xxl";
+  }
+  if (width >= breakpoints.xl) {
+    return "xl";
+  }
+  if (width >= breakpoints.lg) {
+    return "lg";
+  }
+  if (width >= breakpoints.md) {
+    return "md";
+  }
+  if (width >= breakpoints.sm) {
+    return "sm";
+  }
+  return "xs";
+}
+
+interface WindowSizeState {
+  width: number | undefined;
+  height: number | undefined;
+  activeBreakpoint: keyof typeof breakpoints;
+}
+
+// Custom hook to get window size and active breakpoint
+export function useWindowSize() {
+  const [windowSize, setWindowSize] = useState<WindowSizeState>({
+    width: undefined,
+    height: undefined,
+    activeBreakpoint: "xs",
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      const width = window.innerWidth;
+      setWindowSize({
+        width,
+        height: window.innerHeight,
+        activeBreakpoint: getActiveBreakpoint(width),
+      });
+    }
+
+    window.addEventListener("resize", handleResize);
+    handleResize();
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return windowSize;
+}
+
+export default useWindowSize;

package/src/icons/solid/index.ts

@@ -128,4 +128,3 @@ export { default as UserPlus } from "./UserPlus";
 export { default as Wrench } from "./Wrench";
 export { default as XCircle } from "./XCircle";
 export { default as XMark } from "./XMark";
-