@dust-tt/sparkle 0.2.455 → 0.2.457

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/src/stories/DoubleIcon.stories.tsx

@@ -0,0 +1,163 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { DoubleIcon } from "@sparkle/components";
+import {
+  ChatBubbleBottomCenterTextIcon,
+  CheckCircleIcon,
+  DocumentIcon,
+  FolderIcon,
+  HeartIcon,
+  PlusIcon,
+  SparklesIcon,
+  StarIcon,
+  UserIcon,
+} from "@sparkle/icons";
+import { SlackLogo } from "@sparkle/logo";
+
+const meta = {
+  title: "Primitives/DoubleIcon",
+  component: DoubleIcon,
+} satisfies Meta<typeof DoubleIcon>;
+
+export default meta;
+
+export const IconPositions = () => (
+  <div className="s-flex s-flex-col s-gap-8">
+    <div className="s-flex s-items-center s-gap-16">
+      <div className="s-flex s-flex-col s-items-center s-gap-2">
+        <DoubleIcon
+          mainIconProps={{
+            visual: ChatBubbleBottomCenterTextIcon,
+            size: "md",
+            className: "s-text-primary-500",
+          }}
+          secondaryIconProps={{
+            visual: CheckCircleIcon,
+            size: "xs",
+            className: "s-text-success-500",
+          }}
+          position="bottom-right"
+        />
+        <span className="s-text-xs s-text-muted-foreground">bottom-right</span>
+      </div>
+
+      <div className="s-flex s-flex-col s-items-center s-gap-2">
+        <DoubleIcon
+          mainIconProps={{
+            visual: ChatBubbleBottomCenterTextIcon,
+            size: "md",
+            className: "s-text-primary-500",
+          }}
+          secondaryIconProps={{
+            visual: CheckCircleIcon,
+            size: "xs",
+            className: "s-text-success-500",
+          }}
+          position="top-right"
+        />
+        <span className="s-text-xs s-text-muted-foreground">top-right</span>
+      </div>
+
+      <div className="s-flex s-flex-col s-items-center s-gap-2">
+        <DoubleIcon
+          mainIconProps={{
+            visual: ChatBubbleBottomCenterTextIcon,
+            size: "md",
+            className: "s-text-primary-500",
+          }}
+          secondaryIconProps={{
+            visual: CheckCircleIcon,
+            size: "xs",
+            className: "s-text-success-500",
+          }}
+          position="bottom-left"
+        />
+        <span className="s-text-xs s-text-muted-foreground">bottom-left</span>
+      </div>
+
+      <div className="s-flex s-flex-col s-items-center s-gap-2">
+        <DoubleIcon
+          mainIconProps={{
+            visual: ChatBubbleBottomCenterTextIcon,
+            size: "md",
+            className: "s-text-primary-500",
+          }}
+          secondaryIconProps={{
+            visual: CheckCircleIcon,
+            size: "xs",
+            className: "s-text-success-500",
+          }}
+          position="top-left"
+        />
+        <span className="s-text-xs s-text-muted-foreground">top-left</span>
+      </div>
+    </div>
+
+    <div className="s-flex s-items-center s-gap-16">
+      <div className="s-flex s-flex-col s-items-center s-gap-2">
+        <DoubleIcon
+          mainIconProps={{
+            visual: DocumentIcon,
+            size: "md",
+            className: "s-text-blue-500",
+          }}
+          secondaryIconProps={{
+            visual: PlusIcon,
+            size: "xs",
+            className: "s-text-highlight-500",
+          }}
+          position="bottom-right"
+        />
+      </div>
+
+      <div className="s-flex s-flex-col s-items-center s-gap-2">
+        <DoubleIcon
+          mainIconProps={{
+            visual: UserIcon,
+            size: "md",
+            className: "s-text-purple-500",
+          }}
+          secondaryIconProps={{
+            visual: StarIcon,
+            size: "xs",
+            className: "s-text-golden-500",
+          }}
+          position="top-right"
+        />
+      </div>
+
+      <div className="s-flex s-flex-col s-items-center s-gap-2">
+        <DoubleIcon
+          mainIconProps={{
+            visual: SlackLogo,
+            size: "md",
+            className: "s-text-green-500",
+          }}
+          secondaryIconProps={{
+            visual: FolderIcon,
+            size: "sm",
+            className: "s-text-red-500",
+          }}
+          position="bottom-right"
+        />
+      </div>
+
+      <div className="s-flex s-flex-col s-items-center s-gap-2">
+        <DoubleIcon
+          mainIconProps={{
+            visual: HeartIcon,
+            size: "md",
+            className: "s-text-red-500",
+          }}
+          secondaryIconProps={{
+            visual: SparklesIcon,
+            size: "xs",
+            className: "s-text-golden-500",
+          }}
+          position="top-left"
+        />
+      </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":"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"}

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,
-  },
-};