@dust-tt/sparkle 0.2.274 → 0.2.276

package/src/stories/ContextItem.stories.tsx

@@ -78,20 +78,15 @@ export const ListItemExample = () => (
         title="Slack"
         visual={<ContextItem.Visual visual={SlackLogo} />}
         action={
-          <Button.List>
+          <div className="s-flex s-gap-1">
+            <Button icon={TrashIcon} variant="warning" label="Remove" />
             <Button
-              icon={TrashIcon}
-              variant="secondaryWarning"
-              label="Remove"
-              labelVisible={false}
-            />
-            <Button
-              variant="secondary"
+              variant="outline"
               label="Edit"
               size="sm"
               icon={PencilSquareIcon}
             />
-          </Button.List>
+          </div>
         }
       >
         <ContextItem.Description description="Hello you" />
@@ -126,7 +121,7 @@ export const ListItemExample = () => (
         subElement={<>By: Edouard Wautier, Amira Hadad</>}
         action={
           <Button
-            variant="secondary"
+            variant="outline"
             label="Manage"
             size="sm"
             icon={Cog6ToothIcon}
@@ -146,7 +141,7 @@ export const ListItemExample = () => (
         subElement={<>By: Edouard Wautier, Amira Hadad</>}
         action={
           <Button
-            variant="secondary"
+            variant="outline"
             label="Manage"
             size="sm"
             icon={Cog6ToothIcon}

package/src/stories/Dialog.stories.tsx

@@ -42,7 +42,7 @@ export const DialogExample = () => {
           cancelLabel="Cancel"
           onValidate={() => setisOpen2(false)}
           onCancel={() => setisOpen2(false)}
-          validateVariant="primaryWarning"
+          validateVariant="warning"
         >
           <div>I'm the modal content</div>
         </Dialog>

package/src/stories/DropdownMenu.stories.tsx

@@ -112,12 +112,7 @@ export const DropdownExample = () => {
         <div className="s-text-sm">Custom Dropdown:</div>
         <DropdownMenu>
           <DropdownMenu.Button>
-            <Button
-              label="Advanced settings"
-              variant="tertiary"
-              size="sm"
-              type="select"
-            />
+            <Button label="Advanced settings" variant="outline" size="sm" />
           </DropdownMenu.Button>
           <DropdownMenu.Items width={300} overflow="visible">
             <div className="s-flex s-flex-col s-gap-4">
@@ -127,14 +122,7 @@ export const DropdownExample = () => {
                 </div>
                 <DropdownMenu>
                   <DropdownMenu.Button>
-                    <Button
-                      type="select"
-                      labelVisible={true}
-                      label="GPT4"
-                      variant="tertiary"
-                      hasMagnifying={false}
-                      size="sm"
-                    />
+                    <Button label="GPT4" variant="outline" size="sm" />
                   </DropdownMenu.Button>
                   <DropdownMenu.Items origin="topRight">
                     {["GPT4", "GPT3", "GPT2", "GPT1"].map((item) => (
@@ -158,14 +146,7 @@ export const DropdownExample = () => {
                 </div>
                 <DropdownMenu>
                   <DropdownMenu.Button>
-                    <Button
-                      type="select"
-                      labelVisible={true}
-                      label="Balanced"
-                      variant="tertiary"
-                      hasMagnifying={false}
-                      size="sm"
-                    />
+                    <Button label="Balanced" variant="outline" size="sm" />
                   </DropdownMenu.Button>
                   <DropdownMenu.Items origin="topRight">
                     {["Deterministic", "Factual", "Balanced", "Creative"].map(
@@ -215,14 +196,14 @@ export const DropdownExample = () => {
                   <div className="s-flex s-border-t s-border-structure-50 s-p-2">
                     <Button
                       label="Manage"
-                      variant="tertiary"
+                      variant="outline"
                       size="xs"
                       icon={ListIcon}
                     />
                     <div className="s-flex-grow" />
                     <Button
                       label="New"
-                      variant="secondary"
+                      variant="outline"
                       size="xs"
                       icon={PlusIcon}
                       onClick={close}
@@ -466,7 +447,7 @@ export const DropdownExample = () => {
         <DropdownMenu>
           <DropdownMenu.Button>
             <Button
-              variant="tertiary"
+              variant="outline"
               size="xs"
               icon={EyeIcon}
               label="See the error"
@@ -479,10 +460,10 @@ export const DropdownExample = () => {
               </div>
               <div className="self-end">
                 <Button
-                  variant="tertiary"
+                  variant="outline"
                   size="xs"
                   icon={DocumentDuplicateIcon}
-                  label={"Copy"}
+                  label="Copy"
                   onClick={() =>
                     void navigator.clipboard.writeText("Hello error messange!")
                   }

package/src/stories/IconButton.stories.tsx

@@ -29,8 +29,8 @@ export const IconButtonWithTooltip: Story = {
 
 export const IconButtonSecondary: Story = {
   args: {
-    variant: "secondary",
-    tooltip: "This a secondary IconButton",
+    variant: "highlight",
+    tooltip: "This a highlight IconButton",
     tooltipPosition: "bottom",
     icon: Cog6ToothIcon,
   },
@@ -38,8 +38,8 @@ export const IconButtonSecondary: Story = {
 
 export const IconButtonTertiary: Story = {
   args: {
-    variant: "tertiary",
-    tooltip: "This a tertiary IconButton",
+    variant: "ghost",
+    tooltip: "This a ghost IconButton",
     tooltipPosition: "bottom",
     icon: Cog6ToothIcon,
   },

package/src/stories/Input.stories.tsx

@@ -17,27 +17,27 @@ export const InputExample = () => (
       <Input
         placeholder="placeholder"
         name="input"
-        value={"value"}
-        error={"errored because it's a very long message"}
+        value="value"
+        error="errored because it's a very long message"
         showErrorLabel
       />
       <Input
         placeholder="placeholder"
         name="input"
-        value={"value"}
-        error={"errored"}
+        value="value"
+        error="errored"
       />
       <Input
         placeholder="placeholder"
         name="input"
-        value={"value"}
-        error={"errored because it's a very long message"}
+        value="value"
+        error="errored because it's a very long message"
         showErrorLabel
       />
       <Input
         placeholder="placeholder"
         name="input"
-        value={"disabled"}
+        value="disabled"
         disabled={true}
         showErrorLabel
       />
@@ -47,27 +47,27 @@ export const InputExample = () => (
       <Input
         placeholder="placeholder"
         name="input"
-        value={"value"}
-        error={"errored because it's a very long message"}
+        value="value"
+        error="errored because it's a very long message"
         showErrorLabel
       />
       <Input
         placeholder="placeholder"
         name="input"
-        value={"value"}
-        error={"errored"}
+        value="value"
+        error="errored"
       />
       <Input
         placeholder="placeholder"
         name="input"
-        value={"value"}
-        error={"errored because it's a very long message"}
+        value="value"
+        error="errored because it's a very long message"
         showErrorLabel
       />
       <Input
         placeholder="placeholder"
         name="input"
-        value={"disabled"}
+        value="test"
         showErrorLabel
       />
     </div>

package/src/stories/Modal.stories.tsx

@@ -60,9 +60,8 @@ export const ModalExample = () => {
         isOpen={isOpenWithActionAndChange}
         onClose={() => setIsOpenWithActionAndChange(false)}
         action={{
-          labelVisible: true,
           label: "An action",
-          variant: "tertiary",
+          variant: "outline",
           size: "xs",
         }}
         saveLabel="Save (custom name possible)"

package/src/stories/NavigationList.stories.tsx

@@ -0,0 +1,173 @@
+import type { Meta } from "@storybook/react";
+import React, { useEffect, useState } from "react";
+
+import {
+  NavigationList,
+  NavigationListItem,
+  NavigationListLabel,
+  ScrollArea,
+  ScrollBar,
+} from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/NavigationList",
+} satisfies Meta;
+
+export default meta;
+
+const getRandomTitles = (count: number) => {
+  const shuffled = fakeTitles.sort(() => 0.5 - Math.random());
+  return shuffled.slice(0, count);
+};
+
+export const NewNavigationListDemo = () => {
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const [conversationTitles, setConversationTitles] = useState<
+    { label: string; items: string[] }[]
+  >([]);
+
+  useEffect(() => {
+    // Generate random titles for each date section only once
+    setConversationTitles([
+      { label: "Today", items: getRandomTitles(5) },
+      { label: "Yesterday", items: getRandomTitles(10) },
+    ]);
+    console.log(conversationTitles); // Add this line
+  }, []);
+
+  // Flatten the items array to easily manage indices
+  const allItems = conversationTitles.flatMap((section) => section.items);
+
+  return (
+    <div className="s-h-[400px] s-w-[200px] s-py-12">
+      <ScrollArea>
+        <NavigationList className="s-w-full">
+          {conversationTitles.map((section, sectionIndex) => (
+            <React.Fragment key={sectionIndex}>
+              <NavigationListLabel label={section.label} />
+              {section.items.map((title, index) => {
+                const itemIndex = allItems.indexOf(title); // Calculate the global index
+                return (
+                  <NavigationListItem
+                    key={index}
+                    selected={itemIndex === selectedIndex}
+                    onClick={() => setSelectedIndex(itemIndex)}
+                    label={title}
+                    className="s-w-full"
+                  />
+                );
+              })}
+            </React.Fragment>
+          ))}
+        </NavigationList>
+        <ScrollBar />
+      </ScrollArea>
+    </div>
+  );
+};
+
+const fakeTitles = [
+  "Project Kickoff Meeting",
+  "Budget Review Discussion",
+  "Weekly Sync with Team",
+  "AI Bot Training Session",
+  "Quarterly Planning Meeting",
+  "Feedback on Latest Design",
+  "Client Requirements Gathering",
+  "Sprint Retrospective",
+  "Daily Standup",
+  "Marketing Strategy Planning",
+  "Code Review Session",
+  "Product Launch Preparation",
+  "Onboarding New Team Members",
+  "Customer Feedback Analysis",
+  "Feature Prioritization Discussion",
+  "Technical Debt Assessment",
+  "Supply Chain Optimization",
+  "Sales Performance Review",
+  "Cross-Department Collaboration",
+  "Innovation Brainstorming",
+  "Risk Management Workshop",
+  "Holiday Schedule Planning",
+  "Compliance and Security Update",
+  "UI/UX Design Critique",
+  "End-of-Year Wrap Up",
+  "Resource Allocation Meeting",
+  "Vendor Negotiation Strategy",
+  "Crisis Management Scenario",
+  "SEO Best Practices Review",
+  "New Hire Orientation",
+  "Remote Work Policy Update",
+  "Company Values Workshop",
+  "Leadership Development Session",
+  "Diversity and Inclusion Training",
+  "Performance Improvement Plan",
+  "Customer Success Story Sharing",
+  "Community Engagement Strategy",
+  "Internal Product Demo",
+  "Cost Reduction Initiative",
+  "Change Management Planning",
+  "Employee Recognition Program",
+  "IT Infrastructure Upgrade",
+  "Content Marketing Planning",
+  "Team Building Activities",
+  "Data Privacy Compliance",
+  "Board Meeting Preparation",
+  "Investor Relations Update",
+  "KPI Tracking and Reporting",
+  "Industry Trends Analysis",
+  "Partnership Opportunities Exploration",
+  "Employee Wellness Program",
+  "Talent Acquisition Strategy",
+  "Brand Positioning Workshop",
+  "Social Media Campaign Planning",
+  "Competitive Analysis Review",
+  "Legal Compliance Training",
+  "Cybersecurity Awareness Session",
+  "Cultural Exchange Program",
+  "Product Roadmap Presentation",
+  "Customer Journey Mapping",
+  "Financial Forecasting Session",
+  "Brand Storytelling Workshop",
+  "AI Ethics and Governance Discussion",
+  "Operational Efficiency Assessment",
+  "Annual Report Drafting",
+  "Project Milestone Celebration",
+  "Quality Assurance Review",
+  "Public Relations Strategy",
+  "Team Performance Metrics",
+  "Innovation Lab Tour",
+  "Digital Transformation Roadmap",
+  "Sustainability Initiatives Planning",
+  "Internal Communications Strategy",
+  "Customer Advisory Board Meeting",
+  "Agile Methodology Training",
+  "E-commerce Platform Update",
+  "Risk Assessment and Mitigation",
+  "Employee Satisfaction Survey Results",
+  "Sales Funnel Optimization",
+  "Cross-Cultural Communication Training",
+  "Global Expansion Strategy",
+  "Cloud Migration Plan",
+  "Crisis Communication Strategy",
+  "Webinar Content Creation",
+  "Supply Chain Risk Management",
+  "Data Analytics and Insights",
+  "Customer Onboarding Process",
+  "Brand Awareness Campaign",
+  "Product Feature Request Review",
+  "Annual Budget Allocation",
+  "Employee Exit Interview",
+  "User Feedback Session",
+  "Strategic Partnership Negotiation",
+  "Market Entry Strategy",
+  "Employee Handbook Update",
+  "Stakeholder Engagement Plan",
+  "AI Chatbot Development",
+  "Customer Retention Strategy",
+  "Company Anniversary Celebration",
+  "Leadership Team Offsite",
+  "Innovation Challenge Kickoff",
+  "Employee Benefits Review",
+  "Business Continuity Planning",
+];

package/src/stories/NewDropdown.stories.tsx

@@ -200,14 +200,7 @@ function ModelsDropdownDemo() {
   return (
     <NewDropdownMenu>
       <NewDropdownMenuTrigger>
-        <Button
-          type="select"
-          labelVisible={true}
-          label={selectedModel}
-          variant="secondary"
-          hasMagnifying={false}
-          size="sm"
-        />
+        <Button label={selectedModel} variant="outline" size="sm" />
       </NewDropdownMenuTrigger>
       <NewDropdownMenuContent>
         <NewDropdownMenuLabel label="Best performing models" />
@@ -255,14 +248,7 @@ function ModelsDropdownRadioGroupDemo() {
   return (
     <NewDropdownMenu>
       <NewDropdownMenuTrigger>
-        <Button
-          type="select"
-          labelVisible={true}
-          label={selectedModel}
-          variant="secondary"
-          hasMagnifying={false}
-          size="sm"
-        />
+        <Button label={selectedModel} variant="ghost" size="sm" />
       </NewDropdownMenuTrigger>
       <NewDropdownMenuContent>
         <NewDropdownMenuRadioGroup

package/src/stories/Page.stories.tsx

@@ -229,7 +229,7 @@ export const PageExample = () => {
         </ContextItem>
         <ContextItem
           title="@SalesFr"
-          action={<Button variant="secondary" label="Manage" size="sm" />}
+          action={<Button variant="outline" label="Manage" size="sm" />}
           visual={
             <Avatar
               visual="https://dust.tt/static/droidavatar/Droid_Indigo_4.jpg"
@@ -241,7 +241,7 @@ export const PageExample = () => {
         </ContextItem>
         <ContextItem
           title="@SupportFr"
-          action={<Button variant="secondary" label="Manage" size="sm" />}
+          action={<Button variant="outline" label="Manage" size="sm" />}
           visual={
             <Avatar
               visual="https://dust.tt/static/droidavatar/Droid_Pink_4.jpg"
@@ -282,7 +282,7 @@ export const AssistantBuilder = () => {
             size="xl"
             visual="https://dust.tt/static/droidavatar/Droid_Black_2.jpg/"
           />
-          <Button size="sm" variant="tertiary" label="Change" />
+          <Button size="sm" variant="outline" label="Change" />
         </Page.Layout>
       </Page.Layout>
       <Page.Separator />
@@ -365,22 +365,19 @@ export const HelpExample = () => {
         <Page.SectionHeader title="Frequently asked questions" />
         <Page.Layout direction="fluid" gap="sm">
           <Button
-            variant="secondary"
+            variant="outline"
             label="Hey @helper, how do I use the assistant?"
             icon={ChatBubbleLeftRightIcon}
-            hasMagnifying={false}
           />
           <Button
-            variant="secondary"
+            variant="outline"
             label="Hey @helper, What is assistant not good at?"
             icon={ChatBubbleLeftRightIcon}
-            hasMagnifying={false}
           />
           <Button
-            variant="secondary"
+            variant="outline"
             label="Hey @helper, Anything I should know?"
             icon={ChatBubbleLeftRightIcon}
-            hasMagnifying={false}
           />
         </Page.Layout>
       </Page.Layout>

package/src/stories/Popover.stories.tsx

@@ -23,7 +23,7 @@ export default meta;
 export function SimplePopoverExample() {
   return (
     <Popover
-      trigger={<Button label="Popover" variant="secondary" />}
+      trigger={<Button label="Popover" variant="outline" />}
       content={
         <div className="s-grid s-gap-2 s-p-2">
           <p>Lorem</p>

package/src/stories/Searchbar.stories.tsx

@@ -33,7 +33,7 @@ export const SearchbarExample = () => {
             size="md"
           />
           <div>
-            <Button variant="tertiary" size="md" label="Hello" />
+            <Button variant="outline" size="md" label="Hello" />
           </div>
         </div>
         <Searchbar
@@ -60,7 +60,7 @@ export const SearchbarExample = () => {
             onChange={handleChange}
           />
           <div>
-            <Button variant="tertiary" size="sm" label="Hello" />
+            <Button variant="outline" size="sm" label="Hello" />
           </div>
         </div>
         <Searchbar
@@ -86,7 +86,7 @@ export const SearchbarExample = () => {
             size="xs"
           />
           <div>
-            <Button variant="tertiary" size="xs" label="Hello" />
+            <Button variant="outline" size="xs" label="Hello" />
           </div>
         </div>
         <Searchbar

package/src/stories/SliderToggle.stories.tsx

@@ -20,14 +20,14 @@ export const SliderToggleBasic: Story = {
 export const SliderExample = () => (
   <div className="s-flex s-flex-col s-gap-6">
     <div className="s-flex s-items-center s-gap-2">
-      <Button variant="tertiary" size="sm" label="Settings" />
+      <Button variant="outline" size="sm" label="Settings" />
       <SliderToggle size="sm" />
       <SliderToggle size="sm" selected />
       <SliderToggle size="sm" disabled />
     </div>
 
     <div className="s-flex s-items-center s-gap-2">
-      <Button variant="tertiary" size="xs" label="Settings" />
+      <Button variant="outline" size="xs" label="Settings" />
       <SliderToggle size="xs" />
       <SliderToggle size="xs" selected />
       <SliderToggle size="xs" disabled />

package/src/stories/Tree.stories.tsx

@@ -118,7 +118,7 @@ export const TreeExample = () => {
                         <IconButton
                           size="xs"
                           icon={EyeIcon}
-                          variant="tertiary"
+                          variant="outline"
                         />
                       </>
                     }
@@ -645,9 +645,8 @@ export const SelectDataSourceExample = () => {
                     <Button
                       label="Manage"
                       icon={Cog6ToothIcon}
-                      variant="tertiary"
+                      variant="outline"
                       size="sm"
-                      hasMagnifying={false}
                     />
                   </div>
                 }
@@ -666,9 +665,8 @@ export const SelectDataSourceExample = () => {
                     <Button
                       label="Manage"
                       icon={Cog6ToothIcon}
-                      variant="tertiary"
+                      variant="outline"
                       size="sm"
-                      hasMagnifying={false}
                     />
                   </div>
                 }
@@ -686,9 +684,8 @@ export const SelectDataSourceExample = () => {
                     <Button
                       label="Manage"
                       icon={Cog6ToothIcon}
-                      variant="tertiary"
+                      variant="outline"
                       size="sm"
-                      hasMagnifying={false}
                     />
                   </div>
                 }
@@ -715,9 +712,8 @@ export const SelectDataSourceExample = () => {
                     <Button
                       label="Manage"
                       icon={Cog6ToothIcon}
-                      variant="tertiary"
+                      variant="outline"
                       size="sm"
-                      hasMagnifying={false}
                     />
                   </div>
                 }
@@ -838,7 +834,7 @@ const TreeItem = ({
           <span className="s-text-xs s-text-element-700">
             last updated Jan 6
           </span>
-          <IconButton icon={CloudArrowDownIcon} size="xs" variant="tertiary" />
+          <IconButton icon={CloudArrowDownIcon} size="xs" variant="outline" />
           <IconButton icon={PlusCircleIcon} size="xs" />
         </div>
       }