@dust-tt/sparkle 0.2.275 → 0.2.276

package/src/components/NavigationList.tsx

@@ -0,0 +1,137 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Button, Icon } from "@sparkle/components/";
+import { MoreIcon } from "@sparkle/icons";
+import { cn } from "@sparkle/lib/utils";
+
+const listStyles = cva("s-flex", {
+  variants: {
+    layout: {
+      container: "s-gap-1 s-flex-col s-overflow-hidden",
+      item: cn(
+        "s-box-border s-items-center s-w-full s-flex s-gap-1.5 s-cursor-pointer s-select-none s-items-center s-outline-none s-rounded-xl s-text-sm s-px-3 s-py-2 s-transition-colors s-duration-300",
+        "data-[disabled]:s-pointer-events-none data-[disabled]:s-text-muted-foreground",
+        "hover:s-text-foreground hover:s-bg-structure-150"
+      ),
+    },
+    state: {
+      active: "active:s-bg-structure-200",
+      selected: "s-text-foreground s-font-medium s-bg-structure-150",
+      unselected: "s-text-muted-foreground",
+    },
+  },
+  defaultVariants: {
+    layout: "container",
+    state: "unselected",
+  },
+});
+
+const labelStyles = cva(
+  "s-font-semibold s-pt-6 s-pb-2 s-text-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
+);
+
+const NavigationList = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(listStyles({ layout: "container" }), className)}
+    {...props}
+  />
+));
+NavigationList.displayName = "NavigationList";
+
+interface NavigationListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  selected?: boolean;
+  label?: string;
+  icon?: React.ComponentType;
+}
+
+const NavigationListItem = React.forwardRef<
+  HTMLDivElement,
+  NavigationListItemProps
+>(({ className, selected, label, icon, ...props }, ref) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isPressed, setIsPressed] = React.useState(false);
+
+  const handleMouseDown = (event: React.MouseEvent) => {
+    if (!(event.target as HTMLElement).closest(".new-button-class")) {
+      setIsPressed(true);
+    }
+  };
+
+  return (
+    <div className={className} ref={ref} {...props}>
+      <div
+        className={listStyles({
+          layout: "item",
+          state: selected ? "selected" : isPressed ? "active" : "unselected",
+        })}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => {
+          setIsHovered(false);
+          setIsPressed(false);
+        }}
+        onMouseDown={handleMouseDown}
+        onMouseUp={() => setIsPressed(false)}
+      >
+        {icon && <Icon visual={icon} size="sm" />}
+        {label && (
+          <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap">
+            {label}
+          </span>
+        )}
+        {isHovered && (
+          <div className="-s-mr-2 s-flex s-h-4 s-items-center">
+            <Button
+              variant="ghost"
+              icon={MoreIcon}
+              size="xs"
+              onClick={(e) => e.stopPropagation()}
+              onMouseDown={(e) => e.stopPropagation()}
+              onMouseUp={(e) => e.stopPropagation()}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+NavigationListItem.displayName = "NavigationListItem";
+
+const variantStyles = cva("", {
+  variants: {
+    variant: {
+      primary: "s-text-foreground",
+      secondary: "s-text-muted-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+  },
+});
+
+interface NavigationListLabelProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof variantStyles> {
+  label: string;
+}
+
+const NavigationListLabel = React.forwardRef<
+  HTMLDivElement,
+  NavigationListLabelProps
+>(({ className, variant, label, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(labelStyles(), variantStyles({ variant }), className)}
+    {...props}
+  >
+    {label}
+  </div>
+));
+
+NavigationListLabel.displayName = "NavigationListLabel";
+
+export { NavigationList, NavigationListItem, NavigationListLabel };

package/src/components/NewDropdown.tsx

@@ -13,7 +13,7 @@ type ItemVariantType = (typeof ITEM_VARIANTS)[number];
 export const menuStyleClasses = {
   inset: "s-pl-8",
   container: cn(
-    "s-rounded-lg s-border s-border-hovering s-bg-white s-p-1 s-text-primary-950",
+    "s-rounded-xl s-border s-border-hovering s-bg-white s-p-1 s-text-primary-950",
     "s-z-50 s-min-w-[8rem] s-overflow-hidden",
     "data-[state=open]:s-animate-in data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=open]:s-fade-in-0 data-[state=closed]:s-zoom-out-95 data-[state=open]:s-zoom-in-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2"
   ),
@@ -83,7 +83,7 @@ const ItemWithLabelIconAndDescription = <
   return (
     <>
       {label && (
-        <div className="s-grid s-grid-cols-[auto,1fr] s-gap-x-1">
+        <div className="s-grid s-grid-cols-[auto,1fr] s-gap-x-1.5">
           {icon && (
             <div
               className={cn(

package/src/components/Popover.tsx

@@ -38,7 +38,7 @@ const PopoverContent = React.forwardRef<
           "data-[side=left]:s-slide-in-from-right-2",
           "data-[side=right]:s-slide-in-from-left-2",
           "data-[side=top]:s-slide-in-from-bottom-2",
-          "s-z-50 s-rounded-lg s-border s-bg-background s-text-primary-950 s-shadow-md s-outline-none",
+          "s-z-50 s-rounded-xl s-border s-bg-background s-text-primary-950 s-shadow-md s-outline-none",
           fullWidth ? "s-grow" : "s-w-72 s-p-4",
           className
         )}

package/src/components/RadioGroup.tsx

@@ -46,7 +46,7 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
-      className={cn("s-grid", className)}
+      className={cn("s-grid s-gap-2", className)}
       {...props}
       ref={ref}
     />
@@ -69,34 +69,32 @@ const RadioGroupItem = React.forwardRef<
     { tooltipMessage, className, size, tooltipAsChild = false, ...props },
     ref
   ) => {
+    const item = (
+      <RadioGroupPrimitive.Item
+        ref={ref}
+        className={cn(radioStyles({ size }), className)}
+        {...props}
+      >
+        <RadioGroupPrimitive.Indicator
+          className={radioIndicatorStyles({ size })}
+        />
+      </RadioGroupPrimitive.Item>
+    );
     return (
-      <div className="s-group">
+      <div
+        className={cn(
+          "s-group",
+          size === "sm" ? "s-h-5 s-w-5" : "-s-mt-1.5 s-h-4 s-w-4"
+        )}
+      >
         {tooltipMessage ? (
           <Tooltip
             triggerAsChild={tooltipAsChild}
-            trigger={
-              <RadioGroupPrimitive.Item
-                ref={ref}
-                className={cn(radioStyles({ size }), className)}
-                {...props}
-              >
-                <RadioGroupPrimitive.Indicator
-                  className={radioIndicatorStyles({ size })}
-                />
-              </RadioGroupPrimitive.Item>
-            }
+            trigger={item}
             label={<span>{tooltipMessage}</span>}
           />
         ) : (
-          <RadioGroupPrimitive.Item
-            ref={ref}
-            className={cn(radioStyles({ size }), className)}
-            {...props}
-          >
-            <RadioGroupPrimitive.Indicator
-              className={radioIndicatorStyles({ size })}
-            />
-          </RadioGroupPrimitive.Item>
+          item
         )}
       </div>
     );

package/src/components/Spinner.tsx

@@ -47,7 +47,7 @@ const colors: Record<Exclude<SpinnerVariantType, "color">, LottieColorType> = {
   dark: [0.0588, 0.0902, 0.1647, 1],
   purple900: [0.298, 0.1137, 0.5843, 1], // #4C1D95
   pink900: [0.5137, 0.0941, 0.2627, 1], // #831843
-  slate400: [0.5647, 0.6314, 0.7176, 1], // #94a3b8
+  slate400: [0.5804, 0.6392, 0.7216, 1], // #94A3B8
 };
 
 const isColorArray = (arr: unknown): arr is LottieColorType => {

package/src/components/Tree.tsx

@@ -14,6 +14,7 @@ export interface TreeProps {
   isLoading?: boolean;
   tailwindIconTextColor?: string;
   variant?: "navigator" | "finder";
+  className?: string;
 }
 
 export function Tree({
@@ -22,6 +23,7 @@ export function Tree({
   isBoxed = false,
   tailwindIconTextColor,
   variant = "finder",
+  className,
 }: TreeProps) {
   const modifiedChildren = React.Children.map(children, (child) => {
     // /!\ Limitation: This stops on the first invalid element.
@@ -44,7 +46,7 @@ export function Tree({
   });
 
   return isLoading ? (
-    <div className="s-py-2 s-pl-4">
+    <div className={cn("s-py-2 s-pl-4", className)}>
       <Spinner size="xs" variant="dark" />
     </div>
   ) : (
@@ -52,7 +54,8 @@ export function Tree({
       className={cn(
         "s-flex s-flex-col s-gap-0.5 s-overflow-hidden",
         isBoxed &&
-          "s-rounded-xl s-border s-border-structure-200 s-bg-structure-50 s-p-4"
+          "s-rounded-xl s-border s-border-structure-200 s-bg-structure-50 s-p-4",
+        className
       )}
     >
       {modifiedChildren}
@@ -61,12 +64,11 @@ export function Tree({
 }
 
 const treeItemStyleClasses = {
-  base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-py-1.5",
+  base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-py-2",
   isNavigatableBase:
-    "s-rounded-lg s-pl-1.5 s-pr-3 s-border s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
-  isNavigatableUnselected:
-    "s-border-structure-200/0 s-bg-white/0 hover:s-border-structure-200 hover:s-bg-white",
-  isNavigatableSelected: "s-border-structure-200 s-bg-white",
+    "s-rounded-xl s-pl-1.5 s-pr-3 s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
+  isNavigatableUnselected: "s-bg-structure-150/0 hover:s-bg-structure-150",
+  isNavigatableSelected: "s-font-medium s-bg-structure-150",
 };
 
 interface TreeItemProps {
@@ -172,7 +174,7 @@ Tree.Item = function ({
         )}
         {type === "leaf" && <div className="s-w-4 s-flex-shrink-0"></div>}
         {checkbox && <Checkbox {...checkbox} size="xs" />}
-        <Icon visual={visual} size="xs" className={tailwindIconTextColor} />
+        <Icon visual={visual} size="sm" className={tailwindIconTextColor} />
         <div
           className={`s-font-regular s-truncate s-text-sm s-text-element-900 ${labelClassName}`}
         >

package/src/components/index.ts

@@ -44,6 +44,11 @@ export { Item } from "./Item";
 export { Label } from "./Label";
 export { Markdown } from "./Markdown";
 export { Modal } from "./Modal";
+export {
+  NavigationList,
+  NavigationListItem,
+  NavigationListLabel,
+} from "./NavigationList";
 export {
   NewDropdownMenu,
   NewDropdownMenuCheckboxItem,
@@ -74,7 +79,7 @@ export {
 export { Popup } from "./Popup";
 export { PriceTable } from "./PriceTable";
 export { RadioGroup, RadioGroupChoice, RadioGroupItem } from "./RadioGroup";
-export { ScrollArea } from "./ScrollArea";
+export { ScrollArea, ScrollBar } from "./ScrollArea";
 export { Searchbar } from "./Searchbar";
 export { Separator } from "./Separator";
 export { SliderToggle } from "./SliderToggle";

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/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",
+];