@dust-tt/sparkle 0.2.455 → 0.2.456

package/src/components/DataTable.tsx

@@ -8,6 +8,8 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   PaginationState,
+  Row,
+  RowSelectionState,
   type SortingState,
   Updater,
   useReactTable,
@@ -18,6 +20,7 @@ import React, { ReactNode, useEffect, useRef, useState } from "react";
 import {
   Avatar,
   Button,
+  Checkbox,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
@@ -95,6 +98,9 @@ interface DataTableProps<TData extends TBaseData> {
   setSorting?: (sorting: SortingState) => void;
   isServerSideSorting?: boolean;
   disablePaginationNumbers?: boolean;
+  rowSelection?: RowSelectionState;
+  setRowSelection?: (rowSelection: RowSelectionState) => void;
+  enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
 }
 
 export function DataTable<TData extends TBaseData>({
@@ -113,6 +119,9 @@ export function DataTable<TData extends TBaseData>({
   setSorting,
   isServerSideSorting = false,
   disablePaginationNumbers = false,
+  rowSelection,
+  setRowSelection,
+  enableRowSelection = false,
 }: DataTableProps<TData>) {
   const windowSize = useWindowSize();
 
@@ -140,6 +149,15 @@ export function DataTable<TData extends TBaseData>({
         }
       : undefined;
 
+  const onRowSelectionChange =
+    rowSelection && setRowSelection
+      ? (updater: Updater<RowSelectionState>) => {
+          const newValue =
+            typeof updater === "function" ? updater(rowSelection) : updater;
+          setRowSelection(newValue);
+        }
+      : undefined;
+
   const table = useReactTable({
     data,
     columns,
@@ -157,17 +175,20 @@ export function DataTable<TData extends TBaseData>({
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
     onColumnFiltersChange: setColumnFilters,
+    onRowSelectionChange,
     state: {
       columnFilters,
       ...(isServerSideSorting && {
         sorting,
       }),
       pagination,
+      rowSelection,
     },
     initialState: {
       sorting,
     },
     onPaginationChange,
+    enableRowSelection,
   });
 
   useEffect(() => {
@@ -235,6 +256,7 @@ export function DataTable<TData extends TBaseData>({
               widthClassName={widthClassName}
               key={row.id}
               onClick={row.original.onClick}
+              data-selected={row.getIsSelected()}
             >
               {row.getVisibleCells().map((cell) => {
                 const breakpoint = columnsBreakpoints[cell.column.id];
@@ -291,6 +313,9 @@ export function ScrollableDataTable<TData extends TBaseData>({
   maxHeight = "s-h-100",
   onLoadMore,
   isLoading = false,
+  rowSelection,
+  setRowSelection,
+  enableRowSelection,
 }: ScrollableDataTableProps<TData>) {
   const windowSize = useWindowSize();
   const tableContainerRef = useRef<HTMLDivElement>(null);
@@ -316,12 +341,26 @@ export function ScrollableDataTable<TData extends TBaseData>({
     };
   }, []);
 
+  const onRowSelectionChange =
+    rowSelection && setRowSelection
+      ? (updater: Updater<RowSelectionState>) => {
+          const newValue =
+            typeof updater === "function" ? updater(rowSelection) : updater;
+          setRowSelection(newValue);
+        }
+      : undefined;
+
   const table = useReactTable({
     data,
     columns,
     rowCount: totalRowCount,
     getCoreRowModel: getCoreRowModel(),
     enableColumnResizing: true,
+    onRowSelectionChange,
+    enableRowSelection,
+    state: {
+      rowSelection,
+    },
   });
 
   useEffect(() => {
@@ -466,6 +505,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
                     widthClassName={widthClassName}
                     onClick={row.original.onClick}
                     className="s-absolute s-w-full"
+                    data-selected={row.getIsSelected()}
                     style={{
                       transform: `translateY(${virtualRow.start}px)`,
                     }}
@@ -616,6 +656,7 @@ interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   children: ReactNode;
   onClick?: () => void;
   widthClassName: string;
+  "data-selected"?: boolean;
 }
 
 DataTable.Row = function Row({
@@ -633,6 +674,8 @@ DataTable.Row = function Row({
         onClick
           ? "s-cursor-pointer hover:s-bg-muted dark:hover:s-bg-muted-night"
           : "",
+        props["data-selected"] &&
+          "s-bg-highlight-50 dark:s-bg-highlight-900/10",
         widthClassName,
         className
       )}
@@ -1013,3 +1056,47 @@ DataTable.Caption = function Caption({
     </caption>
   );
 };
+
+export function createSelectionColumn<TData>(): ColumnDef<TData> {
+  return {
+    id: "select",
+    enableSorting: false,
+    enableHiding: false,
+    header: ({ table }) => (
+      <Checkbox
+        size="xs"
+        checked={
+          table.getIsAllRowsSelected()
+            ? true
+            : table.getIsSomeRowsSelected()
+              ? "partial"
+              : false
+        }
+        onCheckedChange={(state) => {
+          if (state === "indeterminate") {
+            return;
+          }
+          table.toggleAllRowsSelected(state);
+        }}
+      />
+    ),
+    cell: ({ row }) => (
+      <div className="s-flex s-h-full s-w-full s-items-center">
+        <Checkbox
+          size="xs"
+          checked={row.getIsSelected()}
+          disabled={!row.getCanSelect()}
+          onCheckedChange={(state) => {
+            if (state === "indeterminate") {
+              return;
+            }
+            row.toggleSelected(state);
+          }}
+        />
+      </div>
+    ),
+    meta: {
+      className: "s-w-10",
+    },
+  };
+}

package/src/components/index.ts

@@ -87,7 +87,6 @@ export { Div3D, Hover3D } from "./Hover3D";
 export { Hoverable } from "./Hoverable";
 export { Icon } from "./Icon";
 export { IconButton } from "./IconButton";
-export { IconToggleButton } from "./IconToggleButton";
 export { Input } from "./Input";
 export { Label } from "./Label";
 export type { LinkWrapperProps } from "./LinkWrapper";

package/src/stories/DataTable.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta } from "@storybook/react";
 import {
   ColumnDef,
   PaginationState,
+  RowSelectionState,
   SortingState,
 } from "@tanstack/react-table";
 import React, { useCallback, useMemo, useState } from "react";
@@ -19,7 +20,7 @@ import {
   Input,
   ScrollableDataTable,
 } from "@sparkle/components/";
-import { MenuItem } from "@sparkle/components/DataTable";
+import { createSelectionColumn, MenuItem } from "@sparkle/components/DataTable";
 import { FolderIcon } from "@sparkle/icons";
 
 const meta = {
@@ -45,6 +46,7 @@ type Data = {
     React.ComponentPropsWithoutRef<typeof DropdownMenu>,
     "modal"
   >;
+  id?: number;
   roundedAvatar?: boolean;
 };
 
@@ -529,6 +531,7 @@ const createData = (start: number, count: number) => {
   return Array(count)
     .fill(0)
     .map((_, i) => ({
+      id: i,
       name: `Item ${start + i + 1}`,
       usedBy: Math.floor(Math.random() * 100),
       addedBy: `UserUserUserUserUserUserUserUserUserUserUser ${Math.floor(Math.random() * 10) + 1}`,
@@ -542,6 +545,7 @@ const createData = (start: number, count: number) => {
 
 export const ScrollableDataTableExample = () => {
   const [filter, setFilter] = useState("");
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [data, setData] = useState(() => createData(0, 50));
   const [isLoading, setIsLoading] = useState(false);
 
@@ -559,6 +563,11 @@ export const ScrollableDataTableExample = () => {
   const columnsWithSize = columns.map((column, index) => {
     return { ...column, meta: { sizeRatio: index % 2 === 0 ? 15 : 10 } };
   });
+
+  const columnsWithSelection: ColumnDef<Data>[] = useMemo(
+    () => [createSelectionColumn<Data>(), ...columnsWithSize],
+    []
+  );
   return (
     <div className="s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6">
       <h3 className="s-text-lg s-font-medium">
@@ -577,10 +586,13 @@ export const ScrollableDataTableExample = () => {
           data={data}
           filter={filter}
           filterColumn="name"
-          columns={columnsWithSize}
+          columns={columnsWithSelection}
           onLoadMore={loadMore}
           isLoading={isLoading}
           maxHeight="s-max-h-[500px]"
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          enableRowSelection={true}
         />
 
         <div className="s-text-sm s-text-muted-foreground">
@@ -590,3 +602,49 @@ export const ScrollableDataTableExample = () => {
     </div>
   );
 };
+
+export const DataTableWithRowSelectionExample = () => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [data] = useState<Data[]>(() => createData(0, 10));
+  const [filter, setFilter] = useState("");
+
+  const columnsWithSelection: ColumnDef<Data>[] = useMemo(
+    () => [createSelectionColumn<Data>(), ...columns],
+    []
+  );
+
+  return (
+    <div className="s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6">
+      <h3 className="s-text-lg s-font-medium">DataTable with Row Selection</h3>
+
+      <div className="s-flex s-flex-col s-gap-4">
+        <Input
+          name="filter"
+          placeholder="Filter"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+
+        <DataTable
+          data={data}
+          filter={filter}
+          filterColumn="name"
+          columns={columnsWithSelection}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          enableRowSelection={true}
+        />
+
+        <div className="s-rounded-md s-border s-bg-muted/50 s-p-2">
+          <h4 className="s-mb-2 s-font-medium">Selection State:</h4>
+          <pre className="s-overflow-auto s-text-xs">
+            {JSON.stringify(rowSelection, null, 2)}
+          </pre>
+          <p className="s-mt-2 s-text-sm">
+            Selected {Object.keys(rowSelection).length} of {data.length} rows
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

package/dist/esm/components/IconToggleButton.d.ts

@@ -1,17 +0,0 @@
-import React, { ComponentType, MouseEventHandler } from "react";
-import { Tooltip } from "./Tooltip";
-type IconToggleButtonProps = {
-    variant?: "secondary" | "tertiary";
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-    size?: "xs" | "sm" | "md";
-    tooltip?: string;
-    tooltipPosition?: React.ComponentProps<typeof Tooltip>["side"];
-    icon: ComponentType;
-    iconSelected?: ComponentType;
-    className?: string;
-    disabled?: boolean;
-    selected?: boolean;
-};
-export declare function IconToggleButton({ variant, onClick, disabled, tooltip, tooltipPosition, icon, iconSelected, className, selected, size, }: IconToggleButtonProps): React.JSX.Element;
-export {};
-//# sourceMappingURL=IconToggleButton.d.ts.map

package/dist/esm/components/IconToggleButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKhE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACnC,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/D,IAAI,EAAE,aAAa,CAAC;IACpB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAkCF,wBAAgB,gBAAgB,CAAC,EAC/B,OAAoB,EACpB,OAAO,EACP,QAAgB,EAChB,OAAO,EACP,eAAuB,EACvB,IAAI,EACJ,YAAY,EACZ,SAAc,EACd,QAAgB,EAChB,IAAW,GACZ,EAAE,qBAAqB,qBA0CvB"}

package/dist/esm/components/IconToggleButton.js

@@ -1,37 +0,0 @@
-import React from "react";
-import { classNames, cn } from "../lib/utils";
-import { Icon } from "./Icon";
-import { Tooltip } from "./Tooltip";
-var baseClasses = "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";
-var iconClasses = {
-    secondary: {
-        idle: cn("s-text-foreground", "dark:s-text-foreground-night"),
-        selected: cn("s-text-highlight-500", "dark:s-text-highlight-500-night"),
-        hover: cn("hover:s-text-highlight-400", "dark:hover:s-text-highlight-400-night"),
-        active: cn("active:s-text-highlight-600", "dark:active:s-text-highlight-600-night"),
-        disabled: cn("s-text-primary-500", "dark:s-text-primary-500-night"),
-    },
-    tertiary: {
-        idle: cn("s-text-primary-600", "dark:s-text-primary-600-night"),
-        selected: cn("s-text-highlight-500", "dark:s-text-highlight-500-night"),
-        hover: cn("hover:s-text-highlight-400", "dark:hover:s-text-highlight-400-night"),
-        active: cn("active:s-text-highlight-600", "dark:active:s-text-highlight-600-night"),
-        disabled: cn("s-text-primary-500", "dark:s-text-primary-500-night"),
-    },
-};
-export function IconToggleButton(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "tertiary" : _b, onClick = _a.onClick, _c = _a.disabled, disabled = _c === void 0 ? false : _c, tooltip = _a.tooltip, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? "top" : _d, icon = _a.icon, iconSelected = _a.iconSelected, _e = _a.className, className = _e === void 0 ? "" : _e, _f = _a.selected, selected = _f === void 0 ? false : _f, _g = _a.size, size = _g === void 0 ? "sm" : _g;
-    var iconGroup = iconClasses[variant];
-    var finalIconClasses = classNames(className, baseClasses, disabled
-        ? iconGroup.disabled
-        : selected
-            ? iconGroup.selected
-            : iconGroup.idle, disabled ? "" : selected ? "" : iconGroup.hover, disabled ? "" : iconGroup.active);
-    var IconButtonToggleContent = (React.createElement("button", { className: finalIconClasses, onClick: function (e) {
-            if (!disabled) {
-                onClick === null || onClick === void 0 ? void 0 : onClick(e); // Run passed onClick event
-            }
-        }, disabled: disabled }, icon && (React.createElement(Icon, { visual: selected && iconSelected ? iconSelected : icon, size: size }))));
-    return tooltip ? (React.createElement(Tooltip, { trigger: IconButtonToggleContent, label: tooltip, side: tooltipPosition })) : (IconButtonToggleContent);
-}
-//# sourceMappingURL=IconToggleButton.js.map

package/dist/esm/components/IconToggleButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconToggleButton.js","sourceRoot":"","sources":["../../../src/components/IconToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAepC,IAAM,WAAW,GACf,+EAA+E,CAAC;AAElF,IAAM,WAAW,GAAG;IAClB,SAAS,EAAE;QACT,IAAI,EAAE,EAAE,CAAC,mBAAmB,EAAE,8BAA8B,CAAC;QAC7D,QAAQ,EAAE,EAAE,CAAC,sBAAsB,EAAE,iCAAiC,CAAC;QACvE,KAAK,EAAE,EAAE,CACP,4BAA4B,EAC5B,uCAAuC,CACxC;QACD,MAAM,EAAE,EAAE,CACR,6BAA6B,EAC7B,wCAAwC,CACzC;QACD,QAAQ,EAAE,EAAE,CAAC,oBAAoB,EAAE,+BAA+B,CAAC;KACpE;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,CAAC,oBAAoB,EAAE,+BAA+B,CAAC;QAC/D,QAAQ,EAAE,EAAE,CAAC,sBAAsB,EAAE,iCAAiC,CAAC;QACvE,KAAK,EAAE,EAAE,CACP,4BAA4B,EAC5B,uCAAuC,CACxC;QACD,MAAM,EAAE,EAAE,CACR,6BAA6B,EAC7B,wCAAwC,CACzC;QACD,QAAQ,EAAE,EAAE,CAAC,oBAAoB,EAAE,+BAA+B,CAAC;KACpE;CACF,CAAC;AAEF,MAAM,UAAU,gBAAgB,CAAC,EAWT;QAVtB,eAAoB,EAApB,OAAO,mBAAG,UAAU,KAAA,EACpB,OAAO,aAAA,EACP,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,OAAO,aAAA,EACP,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA,EACvB,IAAI,UAAA,EACJ,YAAY,kBAAA,EACZ,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA;IAEX,IAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IACvC,IAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,EACT,WAAW,EACX,QAAQ;QACN,CAAC,CAAC,SAAS,CAAC,QAAQ;QACpB,CAAC,CAAC,QAAQ;YACR,CAAC,CAAC,SAAS,CAAC,QAAQ;YACpB,CAAC,CAAC,SAAS,CAAC,IAAI,EACpB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,EAC/C,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CACjC,CAAC;IAEF,IAAM,uBAAuB,GAAG,CAC9B,gCACE,SAAS,EAAE,gBAAgB,EAC3B,OAAO,EAAE,UAAC,CAAC;YACT,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC,CAAC,2BAA2B;YAC3C,CAAC;QACH,CAAC,EACD,QAAQ,EAAE,QAAQ,IAEjB,IAAI,IAAI,CACP,oBAAC,IAAI,IACH,MAAM,EAAE,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,EACtD,IAAI,EAAE,IAAyB,GAC/B,CACH,CACM,CACV,CAAC;IAEF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,oBAAC,OAAO,IACN,OAAO,EAAE,uBAAuB,EAChC,KAAK,EAAE,OAAO,EACd,IAAI,EAAE,eAAe,GACrB,CACH,CAAC,CAAC,CAAC,CACF,uBAAuB,CACxB,CAAC;AACJ,CAAC"}

package/dist/esm/stories/IconToggleButton.stories.d.ts

@@ -1,11 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import { IconToggleButton } from "../index_with_tw_base";
-declare const meta: {
-    title: string;
-    component: typeof IconToggleButton;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const IconToggleButtonSecondary: Story;
-export declare const IconToggleButtonTertiary: Story;
-//# sourceMappingURL=IconToggleButton.stories.d.ts.map

package/dist/esm/stories/IconToggleButton.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconToggleButton.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/IconToggleButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAiB,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAExE,QAAA,MAAM,IAAI;;;CAG+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,yBAAyB,EAAE,KAQvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAOtC,CAAC"}

package/dist/esm/stories/IconToggleButton.stories.js

@@ -1,24 +0,0 @@
-import { Cog6ToothIcon, IconToggleButton } from "../index_with_tw_base";
-var meta = {
-    title: "Primitives/IconToggleButton",
-    component: IconToggleButton,
-};
-export default meta;
-export var IconToggleButtonSecondary = {
-    args: {
-        variant: "secondary",
-        tooltip: "This a secondary IconButton",
-        icon: Cog6ToothIcon,
-        iconSelected: Cog6ToothIcon,
-        selected: false,
-    },
-};
-export var IconToggleButtonTertiary = {
-    args: {
-        variant: "tertiary",
-        tooltip: "This a tertiary IconButton",
-        icon: Cog6ToothIcon,
-        selected: false,
-    },
-};
-//# sourceMappingURL=IconToggleButton.stories.js.map

package/dist/esm/stories/IconToggleButton.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconToggleButton.stories.js","sourceRoot":"","sources":["../../../src/stories/IconToggleButton.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAExE,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,gBAAgB;CACY,CAAC;AAE1C,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,IAAM,yBAAyB,GAAU;IAC9C,IAAI,EAAE;QACJ,OAAO,EAAE,WAAW;QACpB,OAAO,EAAE,6BAA6B;QACtC,IAAI,EAAE,aAAa;QACnB,YAAY,EAAE,aAAa;QAC3B,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,wBAAwB,GAAU;IAC7C,IAAI,EAAE;QACJ,OAAO,EAAE,UAAU;QACnB,OAAO,EAAE,4BAA4B;QACrC,IAAI,EAAE,aAAa;QACnB,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC"}

package/src/components/IconToggleButton.tsx

@@ -1,106 +0,0 @@
-import React, { ComponentType, MouseEventHandler } from "react";
-
-import { classNames, cn } from "@sparkle/lib/utils";
-
-import { Icon, IconProps } from "./Icon";
-import { Tooltip } from "./Tooltip";
-
-type IconToggleButtonProps = {
-  variant?: "secondary" | "tertiary";
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  size?: "xs" | "sm" | "md";
-  tooltip?: string;
-  tooltipPosition?: React.ComponentProps<typeof Tooltip>["side"];
-  icon: ComponentType;
-  iconSelected?: ComponentType;
-  className?: string;
-  disabled?: boolean;
-  selected?: boolean;
-};
-
-const baseClasses =
-  "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";
-
-const iconClasses = {
-  secondary: {
-    idle: cn("s-text-foreground", "dark:s-text-foreground-night"),
-    selected: cn("s-text-highlight-500", "dark:s-text-highlight-500-night"),
-    hover: cn(
-      "hover:s-text-highlight-400",
-      "dark:hover:s-text-highlight-400-night"
-    ),
-    active: cn(
-      "active:s-text-highlight-600",
-      "dark:active:s-text-highlight-600-night"
-    ),
-    disabled: cn("s-text-primary-500", "dark:s-text-primary-500-night"),
-  },
-  tertiary: {
-    idle: cn("s-text-primary-600", "dark:s-text-primary-600-night"),
-    selected: cn("s-text-highlight-500", "dark:s-text-highlight-500-night"),
-    hover: cn(
-      "hover:s-text-highlight-400",
-      "dark:hover:s-text-highlight-400-night"
-    ),
-    active: cn(
-      "active:s-text-highlight-600",
-      "dark:active:s-text-highlight-600-night"
-    ),
-    disabled: cn("s-text-primary-500", "dark:s-text-primary-500-night"),
-  },
-};
-
-export function IconToggleButton({
-  variant = "tertiary",
-  onClick,
-  disabled = false,
-  tooltip,
-  tooltipPosition = "top",
-  icon,
-  iconSelected,
-  className = "",
-  selected = false,
-  size = "sm",
-}: IconToggleButtonProps) {
-  const iconGroup = iconClasses[variant];
-  const finalIconClasses = classNames(
-    className,
-    baseClasses,
-    disabled
-      ? iconGroup.disabled
-      : selected
-        ? iconGroup.selected
-        : iconGroup.idle,
-    disabled ? "" : selected ? "" : iconGroup.hover,
-    disabled ? "" : iconGroup.active
-  );
-
-  const IconButtonToggleContent = (
-    <button
-      className={finalIconClasses}
-      onClick={(e) => {
-        if (!disabled) {
-          onClick?.(e); // Run passed onClick event
-        }
-      }}
-      disabled={disabled}
-    >
-      {icon && (
-        <Icon
-          visual={selected && iconSelected ? iconSelected : icon}
-          size={size as IconProps["size"]}
-        />
-      )}
-    </button>
-  );
-
-  return tooltip ? (
-    <Tooltip
-      trigger={IconButtonToggleContent}
-      label={tooltip}
-      side={tooltipPosition}
-    />
-  ) : (
-    IconButtonToggleContent
-  );
-}

package/src/stories/IconToggleButton.stories.tsx

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { Cog6ToothIcon, IconToggleButton } from "../index_with_tw_base";
-
-const meta = {
-  title: "Primitives/IconToggleButton",
-  component: IconToggleButton,
-} satisfies Meta<typeof IconToggleButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const IconToggleButtonSecondary: Story = {
-  args: {
-    variant: "secondary",
-    tooltip: "This a secondary IconButton",
-    icon: Cog6ToothIcon,
-    iconSelected: Cog6ToothIcon,
-    selected: false,
-  },
-};
-
-export const IconToggleButtonTertiary: Story = {
-  args: {
-    variant: "tertiary",
-    tooltip: "This a tertiary IconButton",
-    icon: Cog6ToothIcon,
-    selected: false,
-  },
-};