@dust-tt/sparkle 0.2.210-rc → 0.2.210

package/src/stories/Tree.stories.tsx

@@ -8,10 +8,7 @@ import {
   Chip,
   CloudArrowDownIcon,
   Cog6ToothIcon,
-  DocumentIcon,
   DriveLogo,
-  EyeIcon,
-  FolderIcon,
   IconButton,
   IntercomLogo,
   NotionLogo,
@@ -34,12 +31,12 @@ export const TreeExample = () => {
         <div className="s-flex s-flex-col s-gap-3">
           <div className="s-text-xl">Tree</div>
           <div>
-            <Tree>
-              <Tree.Item label="item 1 (no children)" visual={FolderIcon} />
-              <Tree.Item label="item 2 (loading)" visual={FolderIcon}>
+            <Tree isBoxed>
+              <Tree.Item label="item 1 (no children)" variant="folder" isSelected={true}/>
+              <Tree.Item label="item 2 (loading)" variant="folder">
                 <Tree isLoading />
               </Tree.Item>
-              <Tree.Item label="item 3" visual={FolderIcon}>
+              <Tree.Item label="item 3" variant="folder">
                 <Tree>
                   <Tree.Item
                     type="leaf"
@@ -78,55 +75,109 @@ export const TreeExample = () => {
               </Tree.Item>
               <Tree.Item
                 label="item 4 (forced collapsed)"
-                visual={FolderIcon}
+                variant="folder"
                 collapsed={true}
               >
                 <Tree>
-                  <Tree.Item label="item 1" visual={DocumentIcon} />
+                  <Tree.Item label="item 1" />
                 </Tree>
               </Tree.Item>
               <Tree.Item
                 label="item 5 (forced expanded)"
-                visual={FolderIcon}
+                variant="folder"
                 collapsed={false}
               >
                 <Tree>
-                  <Tree.Item
-                    label="item 1"
-                    visual={DocumentIcon}
-                    actions={
-                      <>
-                        <div className="s-text-sm s-text-element-700">
-                          hello
-                        </div>
-                        <IconButton
-                          size="xs"
-                          icon={EyeIcon}
-                          variant="tertiary"
-                        />
-                      </>
-                    }
-                  />
+                  <Tree.Item label="item 1" />
                 </Tree>
               </Tree.Item>
               <Tree.Item
                 label="item 6 (default collapsed)"
-                visual={FolderIcon}
+                variant="folder"
                 defaultCollapsed={true}
               >
                 <Tree>
-                  <Tree.Item label="item 1" visual={DocumentIcon} />
+                  <Tree.Item
+                    label="item 1"
+                    checkbox={{
+                      variant: "checkable",
+                      checked: true,
+                      partialChecked: true,
+                      onChange: () => {
+                        return;
+                      },
+                    }}
+                  />
+                  <Tree.Item
+                    label="item 2"
+                    checkbox={{
+                      variant: "checkable",
+                      checked: true,
+                      onChange: () => {
+                        return;
+                      },
+                    }}
+                  />
+                  <Tree.Item
+                    label="item 3"
+                    checkbox={{
+                      variant: "checkable",
+                      checked: false,
+                      onChange: () => {
+                        return;
+                      },
+                    }}
+                  />
+                  <Tree.Item
+                    label="item 4"
+                    checkbox={{
+                      variant: "checkable",
+                      checked: false,
+                      onChange: () => {
+                        return;
+                      },
+                    }}
+                  />
+                  <Tree.Item
+                    label="item 5"
+                    checkbox={{
+                      variant: "checkable",
+                      checked: false,
+                      onChange: () => {
+                        return;
+                      },
+                    }}
+                  />
                 </Tree>
               </Tree.Item>
 
               <Tree.Item
                 label="item 7 (default expanded)"
-                visual={FolderIcon}
+                variant="folder"
                 defaultCollapsed={false}
               >
                 <Tree>
-                  <Tree.Item label="item 1" visual={DocumentIcon} />
-                  <Tree.Item label="item 2" visual={DocumentIcon} />
+                  <Tree.Item
+                    label="item 1"
+                    checkbox={{
+                      variant: "checkable",
+                      checked: true,
+                      partialChecked: true,
+                      onChange: () => {
+                        return;
+                      },
+                    }}
+                  />
+                  <Tree.Item
+                    label="item 2"
+                    checkbox={{
+                      variant: "checkable",
+                      checked: true,
+                      onChange: () => {
+                        return;
+                      },
+                    }}
+                  />
                 </Tree>
               </Tree.Item>
             </Tree>
@@ -135,11 +186,11 @@ export const TreeExample = () => {
         <div className="s-flex s-flex-col s-gap-3">
           <div className="s-text-xl">Flat</div>
           <div>
-            <Tree>
+            <Tree isBoxed>
               <Tree.Item
                 label="item 1"
                 type="item"
-                visual={FolderIcon}
+                variant="channel"
                 checkbox={{
                   variant: "checkable",
                   checked: true,
@@ -151,7 +202,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="item 2"
                 type="item"
-                visual={FolderIcon}
+                variant="channel"
                 checkbox={{
                   variant: "checkable",
                   checked: true,
@@ -163,7 +214,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="item 3"
                 type="item"
-                visual={FolderIcon}
+                variant="channel"
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -175,7 +226,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="item 4"
                 type="item"
-                visual={FolderIcon}
+                variant="channel"
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -187,7 +238,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="item 5"
                 type="item"
-                visual={FolderIcon}
+                variant="channel"
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -205,8 +256,8 @@ export const TreeExample = () => {
             <Tree>
               <Tree.Item
                 label="Intercom"
-                visual={IntercomLogo}
                 type="item"
+                visual={<IntercomLogo />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -218,7 +269,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="Notion"
                 type="item"
-                visual={NotionLogo}
+                visual={<NotionLogo />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -230,7 +281,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="Slack"
                 type="item"
-                visual={SlackLogo}
+                visual={<SlackLogo />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -242,7 +293,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="Dust"
                 type="item"
-                visual={Dust}
+                visual={<Dust />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -254,59 +305,18 @@ export const TreeExample = () => {
             </Tree>
           </div>
         </div>
-        <div className="s-flex s-flex-col s-gap-3">
-          <div className="s-text-xl">Nav bar</div>
-          <div>
-            <Tree variant="navigator">
-              <Tree.Item
-                label="Intercom"
-                visual={IntercomLogo}
-                onItemClick={() => console.log("Clickable")}
-                isSelected={true}
-                size="md"
-              >
-                <Tree variant="navigator">
-                  <Tree.Item label="item 1" visual={FolderIcon}>
-                    <Tree variant="navigator">
-                      <Tree.Item label="item 1" visual={FolderIcon} />
-                      <Tree.Item label="item 2" visual={FolderIcon} />
-                      <Tree.Item label="item 3" visual={FolderIcon} />
-                    </Tree>
-                  </Tree.Item>
-                  <Tree.Item label="item 2" visual={FolderIcon}>
-                    <Tree variant="navigator">
-                      <Tree.Item label="item 1" visual={FolderIcon} />
-                      <Tree.Item label="item 2" visual={FolderIcon} />
-                      <Tree.Item label="item 3" visual={FolderIcon} />
-                    </Tree>
-                  </Tree.Item>
-                  <Tree.Item label="item 3" visual={FolderIcon}>
-                    <Tree variant="navigator">
-                      <Tree.Item label="item 1" visual={FolderIcon} />
-                      <Tree.Item label="item 2" visual={FolderIcon} />
-                      <Tree.Item label="item 3" visual={FolderIcon} />
-                    </Tree>
-                  </Tree.Item>
-                </Tree>
-              </Tree.Item>
-              <Tree.Item label="Notion" visual={NotionLogo} size="md" />
-              <Tree.Item label="Slack" visual={SlackLogo} size="md" />
-              <Tree.Item label="Dust" visual={Dust} size="md" />
-            </Tree>
-          </div>
-        </div>
       </div>
 
       <div className="s-flex s-gap-10">
         <div className="s-flex s-flex-col s-gap-3">
           <div className="s-text-xl">Tree</div>
           <div>
-            <Tree isBoxed>
-              <Tree.Item label="item 1 (no children)" visual={FolderIcon} />
-              <Tree.Item label="item 2 (loading)" visual={FolderIcon}>
+            <Tree>
+              <Tree.Item label="item 1 (no children)" variant="folder" />
+              <Tree.Item label="item 2 (loading)" variant="folder">
                 <Tree isLoading />
               </Tree.Item>
-              <Tree.Item label="item 3" visual={FolderIcon}>
+              <Tree.Item label="item 3" variant="folder">
                 <Tree>
                   <Tree.Item
                     type="leaf"
@@ -345,7 +355,7 @@ export const TreeExample = () => {
               </Tree.Item>
               <Tree.Item
                 label="item 4 (forced collapsed)"
-                visual={FolderIcon}
+                variant="folder"
                 collapsed={true}
               >
                 <Tree>
@@ -354,7 +364,7 @@ export const TreeExample = () => {
               </Tree.Item>
               <Tree.Item
                 label="item 5 (forced expanded)"
-                visual={FolderIcon}
+                variant="folder"
                 collapsed={false}
               >
                 <Tree>
@@ -363,7 +373,7 @@ export const TreeExample = () => {
               </Tree.Item>
               <Tree.Item
                 label="item 6 (default collapsed)"
-                visual={FolderIcon}
+                variant="folder"
                 defaultCollapsed={true}
               >
                 <Tree>
@@ -371,7 +381,8 @@ export const TreeExample = () => {
                     label="item 1"
                     checkbox={{
                       variant: "checkable",
-                      checked: "partial",
+                      checked: true,
+                      partialChecked: true,
                       onChange: () => {
                         return;
                       },
@@ -422,7 +433,7 @@ export const TreeExample = () => {
 
               <Tree.Item
                 label="item 7 (default expanded)"
-                visual={FolderIcon}
+                variant="folder"
                 defaultCollapsed={false}
               >
                 <Tree>
@@ -430,7 +441,8 @@ export const TreeExample = () => {
                     label="item 1"
                     checkbox={{
                       variant: "checkable",
-                      checked: "partial",
+                      checked: true,
+                      partialChecked: true,
                       onChange: () => {
                         return;
                       },
@@ -454,11 +466,11 @@ export const TreeExample = () => {
         <div className="s-flex s-flex-col s-gap-3">
           <div className="s-text-xl">Flat</div>
           <div>
-            <Tree isBoxed>
+            <Tree>
               <Tree.Item
                 label="item 1"
                 type="item"
-                visual={FolderIcon}
+                variant="channel"
                 checkbox={{
                   variant: "checkable",
                   checked: true,
@@ -470,7 +482,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="item 2"
                 type="item"
-                visual={FolderIcon}
+                variant="channel"
                 checkbox={{
                   variant: "checkable",
                   checked: true,
@@ -482,7 +494,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="item 3"
                 type="item"
-                visual={FolderIcon}
+                variant="channel"
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -494,7 +506,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="item 4"
                 type="item"
-                visual={FolderIcon}
+                variant="channel"
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -506,7 +518,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="item 5"
                 type="item"
-                visual={FolderIcon}
+                variant="channel"
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -525,7 +537,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="Intercom"
                 type="item"
-                visual={IntercomLogo}
+                visual={<IntercomLogo />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -537,7 +549,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="Notion"
                 type="item"
-                visual={NotionLogo}
+                visual={<NotionLogo />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -549,7 +561,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="Slack"
                 type="item"
-                visual={SlackLogo}
+                visual={<SlackLogo />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -561,7 +573,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="Dust"
                 type="item"
-                visual={Dust}
+                visual={<Dust />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -573,51 +585,76 @@ export const TreeExample = () => {
             </Tree>
           </div>
         </div>
-        <div className="s-flex s-flex-col s-gap-3">
-          <div className="s-text-xl">Nav bar</div>
-          <div>
-            <Tree isBoxed variant="navigator">
-              <Tree.Item
-                label="Intercom"
-                visual={IntercomLogo}
-                onItemClick={() => console.log("Clickable")}
-                isSelected={true}
-              >
-                <Tree>
-                  <Tree.Item label="item 1" visual={FolderIcon}>
-                    <Tree>
-                      <Tree.Item label="item 1" visual={FolderIcon} />
-                      <Tree.Item label="item 2" visual={FolderIcon} />
-                      <Tree.Item label="item 3" visual={FolderIcon} />
-                    </Tree>
-                  </Tree.Item>
-                  <Tree.Item label="item 2" visual={FolderIcon}>
-                    <Tree>
-                      <Tree.Item label="item 1" visual={FolderIcon} />
-                      <Tree.Item label="item 2" visual={FolderIcon} />
-                      <Tree.Item label="item 3" visual={FolderIcon} />
-                    </Tree>
-                  </Tree.Item>
-                  <Tree.Item label="item 3" visual={FolderIcon}>
-                    <Tree>
-                      <Tree.Item label="item 1" visual={FolderIcon} />
-                      <Tree.Item label="item 2" visual={FolderIcon} />
-                      <Tree.Item label="item 3" visual={FolderIcon} />
-                    </Tree>
-                  </Tree.Item>
-                </Tree>
-              </Tree.Item>
-              <Tree.Item label="Notion" visual={NotionLogo} />
-              <Tree.Item label="Slack" visual={SlackLogo} />
-              <Tree.Item label="Dust" visual={Dust} />
-            </Tree>
-          </div>
-        </div>
+        <DummyNavBar/>
       </div>
     </div>
   );
 };
 
+export const DummyNavBar = () => {
+  return <div className="s-flex s-flex-col s-gap-3">
+    <div className="s-text-xl">Nav bar</div>
+    <div>
+      <Tree isBoxed>
+        <Tree.Item
+          label="Intercom"
+          visual={<IntercomLogo />}
+          onItemClick={() => console.log("Clickable")}
+          isSelected={true}
+        >
+          <Tree>
+            <Tree.Item
+              type="leaf"
+              label="item 1"
+              checkbox={{
+                variant: "checkable",
+                checked: false,
+                onChange: () => {
+                  return;
+                },
+              }}
+            />
+            <Tree.Item
+              label="item 2"
+              type="leaf"
+              checkbox={{
+                variant: "checkable",
+                checked: false,
+                onChange: () => {
+                  return;
+                },
+              }}
+            />
+            <Tree.Item
+              label="item 3"
+              type="leaf"
+              checkbox={{
+                variant: "checkable",
+                checked: false,
+                onChange: () => {
+                  return;
+                },
+              }}
+            />
+          </Tree>
+        </Tree.Item>
+        <Tree.Item
+          label="Notion"
+          visual={<NotionLogo />}
+        />
+        <Tree.Item
+          label="Slack"
+          visual={<SlackLogo />}
+        />
+        <Tree.Item
+          label="Dust"
+          visual={<Dust />}
+        />
+      </Tree>
+    </div>
+  </div>;
+}
+
 export const SelectDataSourceExample = () => {
   return (
     <div className="s-flex s-w-full s-flex-col s-gap-10">
@@ -628,7 +665,7 @@ export const SelectDataSourceExample = () => {
             <Tree>
               <Tree.Item
                 label="Intercom"
-                visual={IntercomLogo}
+                visual={<IntercomLogo />}
                 size="md"
                 areActionsFading={false}
                 actions={
@@ -650,7 +687,7 @@ export const SelectDataSourceExample = () => {
               <Tree.Item
                 label="Slack"
                 collapsed={true}
-                visual={SlackLogo}
+                visual={<SlackLogo />}
                 areActionsFading={false}
                 actions={
                   <div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
@@ -671,7 +708,7 @@ export const SelectDataSourceExample = () => {
               />
               <Tree.Item
                 label="Notion"
-                visual={NotionLogo}
+                visual={<NotionLogo />}
                 areActionsFading={false}
                 size="md"
                 actions={
@@ -700,7 +737,7 @@ export const SelectDataSourceExample = () => {
               </Tree.Item>
               <Tree.Item
                 label="Google Drive"
-                visual={DriveLogo}
+                visual={<DriveLogo />}
                 areActionsFading={false}
                 size="md"
                 defaultCollapsed={true}
@@ -731,7 +768,7 @@ export const SelectDataSourceExample = () => {
             <Tree>
               <Tree.Item
                 label="Intercom"
-                visual={IntercomLogo}
+                visual={<IntercomLogo />}
                 size="md"
                 checkbox={{
                   variant: "checkable",
@@ -744,7 +781,7 @@ export const SelectDataSourceExample = () => {
               <Tree.Item
                 label="Slack"
                 collapsed={true}
-                visual={SlackLogo}
+                visual={<SlackLogo />}
                 size="md"
                 checkbox={{
                   variant: "checkable",
@@ -756,7 +793,7 @@ export const SelectDataSourceExample = () => {
               />
               <Tree.Item
                 label="Notion"
-                visual={NotionLogo}
+                visual={<NotionLogo />}
                 size="md"
                 checkbox={{
                   variant: "checkable",
@@ -812,7 +849,7 @@ export const SelectDataSourceExample = () => {
               </Tree.Item>
               <Tree.Item
                 label="Google Drive"
-                visual={DriveLogo}
+                visual={<DriveLogo />}
                 size="md"
                 checkbox={{
                   variant: "checkable",
@@ -842,7 +879,7 @@ const TreeItem = ({
   return (
     <Tree.Item
       label={label}
-      visual={FolderIcon}
+      variant="folder"
       actions={
         <div className="s-flex s-flex-row s-justify-center s-gap-2">
           <span className="s-text-xs s-text-element-700">
@@ -865,4 +902,4 @@ const createTreeItems = (n = 5, getLabel: () => string) => {
   }
 
   return <Tree>{items}</Tree>;
-};
+};

package/dist/cjs/icons/solid/ArrowDownS.d.ts

@@ -1,4 +0,0 @@
-import type { SVGProps } from "react";
-import * as React from "react";
-declare const SvgArrowDownS: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgArrowDownS;

package/dist/cjs/icons/solid/ArrowLeftS.d.ts

@@ -1,4 +0,0 @@
-import type { SVGProps } from "react";
-import * as React from "react";
-declare const SvgArrowLeftS: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgArrowLeftS;

package/dist/cjs/icons/solid/ArrowRightS.d.ts

@@ -1,4 +0,0 @@
-import type { SVGProps } from "react";
-import * as React from "react";
-declare const SvgArrowRightS: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgArrowRightS;

package/dist/cjs/icons/solid/ArrowUpS.d.ts

@@ -1,4 +0,0 @@
-import type { SVGProps } from "react";
-import * as React from "react";
-declare const SvgArrowUpS: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgArrowUpS;

package/dist/cjs/icons/solid/ChevronDoubleLeft.d.ts

@@ -1,4 +0,0 @@
-import type { SVGProps } from "react";
-import * as React from "react";
-declare const SvgChevronDoubleLeft: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgChevronDoubleLeft;

package/dist/cjs/icons/solid/ChevronDoubleRight.d.ts

@@ -1,4 +0,0 @@
-import type { SVGProps } from "react";
-import * as React from "react";
-declare const SvgChevronDoubleRight: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgChevronDoubleRight;

package/dist/cjs/icons/solid/Company.d.ts

@@ -1,4 +0,0 @@
-import type { SVGProps } from "react";
-import * as React from "react";
-declare const SvgCompany: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgCompany;