@dust-tt/sparkle 0.2.199 → 0.2.201

package/package.json

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

package/src/components/DataTable.tsx

@@ -22,6 +22,7 @@ interface DataTableProps<TData, TValue> {
   className?: string;
   filter?: string;
   filterColumn?: string;
+  initialColumnOrder?: SortingState;
 }
 
 export function DataTable<TData, TValue>({
@@ -30,8 +31,11 @@ export function DataTable<TData, TValue>({
   className,
   filter,
   filterColumn,
+  initialColumnOrder,
 }: DataTableProps<TData, TValue>) {
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const [sorting, setSorting] = useState<SortingState>(
+    initialColumnOrder ?? []
+  );
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
   const table = useReactTable({
@@ -79,8 +83,9 @@ export function DataTable<TData, TValue>({
                             ? ArrowDownIcon
                             : ArrowDownIcon
                       }
+                      size="xs"
                       className={classNames(
-                        "s-ml-1 s-w-2.5 s-font-extralight",
+                        "s-ml-1",
                         header.column.getIsSorted()
                           ? "s-opacity-100"
                           : "s-opacity-0"
@@ -197,7 +202,7 @@ DataTable.Row = function Row({
     <tr
       className={classNames(
         "s-border-b s-border-structure-200 s-text-sm",
-        onClick ? "s-cursor-pointer" : "",
+        onClick ? "s-cursor-pointer hover:s-bg-gray-50" : "",
         className || ""
       )}
       onClick={onClick ? onClick : undefined}

package/src/components/Tab.tsx

@@ -12,13 +12,14 @@ import { Icon } from "./Icon";
 import { Tooltip } from "./Tooltip";
 
 type TabType<E> = {
-  label: string;
-  id?: E;
-  hideLabel?: boolean;
   current: boolean;
-  sizing?: "hug" | "expand";
-  icon?: ComponentType<{ className?: string }>;
+  disabled?: boolean;
   hasSeparator?: boolean;
+  hideLabel?: boolean;
+  icon?: ComponentType<{ className?: string }>;
+  id?: E;
+  label: string;
+  sizing?: "hug" | "expand";
 } & (
   | { onClick?: (event: MouseEvent<HTMLAnchorElement>) => void; href?: never }
   | { onClick?: never; href: string }
@@ -137,7 +138,8 @@ export function Tab<E>({
         tabStateClasses.hover,
         tabStateClasses.dark.base,
         tabStateClasses.dark.hover,
-        tabClassName
+        tabClassName,
+        tab.disabled ? "s-opacity-50 s-pointer-events-none" : ""
       );
 
       const finalIconClasses = classNames(

package/src/stories/DataTable.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta } from "@storybook/react";
 import { ColumnDef } from "@tanstack/react-table";
 import React from "react";
 
@@ -10,7 +10,6 @@ const meta = {
 } satisfies Meta<typeof DataTable>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 type Data = {
   name: string;
@@ -27,7 +26,7 @@ type Data = {
   onMoreClick?: () => void;
 };
 
-const DataTableExample = () => {
+export const DataTableExample = () => {
   const data: Data[] = [
     {
       name: "Marketing",
@@ -116,11 +115,11 @@ const DataTableExample = () => {
 
   return (
     <div className="s-w-full s-max-w-4xl s-overflow-x-auto">
-      <DataTable data={data} columns={columns} />
+      <DataTable
+        data={data}
+        columns={columns}
+        initialColumnOrder={[{ id: "name", desc: false }]}
+      />
     </div>
   );
 };
-
-export const Default: Story = {
-  render: () => <DataTableExample />,
-};

package/src/stories/Tab.stories.tsx

@@ -41,7 +41,15 @@ export const TabExample = () => {
               current: currentTab === "build",
               icon: RobotIcon,
               sizing: "expand",
+            },
+            {
+              label: "Admin",
+              id: "admin",
+              current: currentTab === "admin",
+              icon: RobotIcon,
+              sizing: "expand",
               hasSeparator: true,
+              disabled: true,
             },
             {
               label: "Settings",