@dust-tt/sparkle 0.2.501 → 0.2.503-rc-1

package/dist/sparkle.css

@@ -973,10 +973,6 @@ select {
   bottom: 0.75rem;
 }
 
-.s-bottom-6 {
-  bottom: 1.5rem;
-}
-
 .s-bottom-\[14\%\] {
   bottom: 14%;
 }
@@ -997,14 +993,6 @@ select {
   left: 0.5rem;
 }
 
-.s-left-3 {
-  left: 0.75rem;
-}
-
-.s-left-6 {
-  left: 1.5rem;
-}
-
 .s-left-\[50\%\] {
   left: 50%;
 }
@@ -1029,10 +1017,6 @@ select {
   right: 0.75rem;
 }
 
-.s-right-6 {
-  right: 1.5rem;
-}
-
 .s-top-0 {
   top: 0px;
 }
@@ -1057,10 +1041,6 @@ select {
   top: 0.75rem;
 }
 
-.s-top-6 {
-  top: 1.5rem;
-}
-
 .s-top-\[50\%\] {
   top: 50%;
 }
@@ -1303,10 +1283,6 @@ select {
   aspect-ratio: 1 / 1;
 }
 
-.s-aspect-video {
-  aspect-ratio: 16 / 9;
-}
-
 .s-h-0 {
   height: 0px;
 }
@@ -1379,6 +1355,10 @@ select {
   height: 11rem;
 }
 
+.s-h-48 {
+  height: 12rem;
+}
+
 .s-h-5 {
   height: 1.25rem;
 }
@@ -1427,18 +1407,10 @@ select {
   height: 200px;
 }
 
-.s-h-\[240px\] {
-  height: 240px;
-}
-
 .s-h-\[30\%\] {
   height: 30%;
 }
 
-.s-h-\[32px\] {
-  height: 32px;
-}
-
 .s-h-\[340px\] {
   height: 340px;
 }
@@ -1520,10 +1492,6 @@ select {
   min-height: 100%;
 }
 
-.s-min-h-screen {
-  min-height: 100vh;
-}
-
 .s-w-0 {
   width: 0px;
 }
@@ -1680,18 +1648,14 @@ select {
   width: 380px;
 }
 
-.s-w-\[3px\] {
-  width: 3px;
-}
-
-.s-w-\[420px\] {
-  width: 420px;
-}
-
 .s-w-\[48px\] {
   width: 48px;
 }
 
+.s-w-\[600px\] {
+  width: 600px;
+}
+
 .s-w-\[70\%\] {
   width: 70%;
 }
@@ -1920,28 +1884,6 @@ select {
   animation: s-breathing 3s infinite ease-in-out;
 }
 
-@keyframes s-cursor-blink {
-  0% {
-    opacity: 1;
-  }
-
-  60% {
-    opacity: 1;
-  }
-
-  70% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.s-animate-cursor-blink {
-  animation: s-cursor-blink 0.9s infinite;;
-}
-
 @keyframes s-pulse {
   50% {
     opacity: .5;
@@ -2062,14 +2004,6 @@ select {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-.s-grid-cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.s-grid-cols-6 {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
 .s-grid-cols-8 {
   grid-template-columns: repeat(8, minmax(0, 1fr));
 }
@@ -2567,11 +2501,6 @@ select {
   border-color: rgb(122 198 255 / var(--tw-border-opacity));
 }
 
-.s-border-highlight-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(75 171 255 / var(--tw-border-opacity));
-}
-
 .s-border-info-100 {
   --tw-border-opacity: 1;
   border-color: rgb(255 239 168 / var(--tw-border-opacity));
@@ -2855,26 +2784,6 @@ select {
   background-color: rgb(255 226 98 / var(--tw-bg-opacity));
 }
 
-.s-bg-brand-support-blue {
-  --tw-bg-opacity: 1;
-  background-color: rgb(233 247 255 / var(--tw-bg-opacity));
-}
-
-.s-bg-brand-support-golden {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 250 224 / var(--tw-bg-opacity));
-}
-
-.s-bg-brand-support-green {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 255 240 / var(--tw-bg-opacity));
-}
-
-.s-bg-brand-support-rose {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
-}
-
 .s-bg-brand-tea-green {
   --tw-bg-opacity: 1;
   background-color: rgb(226 247 140 / var(--tw-bg-opacity));
@@ -2935,11 +2844,6 @@ select {
   background-color: rgb(4 20 10 / var(--tw-bg-opacity));
 }
 
-.s-bg-foreground {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 20 24 / var(--tw-bg-opacity));
-}
-
 .s-bg-golden-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 239 168 / var(--tw-bg-opacity));
@@ -4299,10 +4203,6 @@ select {
   padding-right: 0.75rem;
 }
 
-.s-pr-5 {
-  padding-right: 1.25rem;
-}
-
 .s-pr-8 {
   padding-right: 2rem;
 }
@@ -5086,10 +4986,6 @@ select {
   --tw-ring-color: rgb(122 198 255 / var(--tw-ring-opacity));
 }
 
-.s-ring-highlight-400\/30 {
-  --tw-ring-color: rgb(75 171 255 / 0.3);
-}
-
 .s-ring-highlight\/0 {
   --tw-ring-color: rgb(28 145 255 / 0);
 }
@@ -5498,16 +5394,6 @@ select {
   border-color: rgb(223 224 226 / var(--tw-border-opacity));
 }
 
-.hover\:s-bg-blue-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(202 235 255 / var(--tw-bg-opacity));
-}
-
-.hover\:s-bg-green-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 251 189 / var(--tw-bg-opacity));
-}
-
 .hover\:s-bg-highlight-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(122 198 255 / var(--tw-bg-opacity));
@@ -5556,11 +5442,6 @@ select {
   background-color: rgb(84 93 108 / var(--tw-bg-opacity));
 }
 
-.hover\:s-bg-red-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 206 199 / var(--tw-bg-opacity));
-}
-
 .hover\:s-bg-warning-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 241 247 / var(--tw-bg-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.501",
+  "version": "0.2.503-rc-1",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/AnchoredPopover.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from "react";
+
+import {
+  PopoverAnchor,
+  PopoverContent,
+  PopoverRoot,
+} from "@sparkle/components/Popover";
+
+interface AnchoredPopoverProps {
+  open: boolean;
+  anchorRef?: React.RefObject<HTMLElement>;
+  children: React.ReactNode;
+  align?: "start" | "center" | "end";
+  side?: "top" | "right" | "bottom" | "left";
+  sideOffset?: number;
+  className?: string;
+}
+
+export function AnchoredPopover({
+  open,
+  anchorRef,
+  children,
+  align = "center",
+  side = "bottom",
+  sideOffset = 4,
+  className,
+}: AnchoredPopoverProps) {
+  const [position, setPosition] = useState({
+    top: "50%",
+    left: "50%",
+    width: "0px",
+    height: "0px",
+  });
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const updatePosition = () => {
+      if (!anchorRef?.current) {
+        setPosition({
+          top: "50%",
+          left: "50%",
+          width: "0px",
+          height: "0px",
+        });
+        return;
+      }
+
+      const rect = anchorRef.current.getBoundingClientRect();
+      setPosition({
+        top: `${rect.top}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+      });
+    };
+
+    updatePosition();
+
+    const resizeObserver = new ResizeObserver(updatePosition);
+    if (anchorRef?.current) {
+      resizeObserver.observe(anchorRef.current);
+    }
+
+    window.addEventListener("scroll", updatePosition, true);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [open, anchorRef]);
+
+  return (
+    <PopoverRoot open={open} modal={false}>
+      <PopoverAnchor
+        className="s-fixed s-transition-all s-duration-300 s-ease-in-out"
+        style={{
+          top: position.top,
+          left: position.left,
+          width: position.width,
+          height: position.height,
+        }}
+      />
+      <PopoverContent
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        className={className}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        mountPortal={false}
+      >
+        {children}
+      </PopoverContent>
+    </PopoverRoot>
+  );
+}

package/src/components/Breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import type { ComponentType } from "react";
 import React from "react";
 
-import { Button } from "@sparkle/components/Button";
+import { Button, ICON_SIZE_MAP } from "@sparkle/components/Button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -133,6 +133,19 @@ function BreadcrumbItem({
     );
   }
 
+  if (item.icon) {
+    return (
+      <div className="s-shrink0 s-label-sm s-inline-flex s-h-9 s-items-center s-gap-2 s-border s-border-border/0 s-px-3">
+        <Icon
+          visual={item.icon}
+          size={ICON_SIZE_MAP[size]}
+          className={cn("-s-mx-0.5")}
+        />
+        <div className={cn("", commonClassName)}>{item.label}</div>
+      </div>
+    );
+  }
+
   return (
     <div className={cn("s-px-2 s-py-1.5", commonClassName)}>{item.label}</div>
   );

package/src/components/Button.tsx

@@ -171,7 +171,7 @@ MetaButton.displayName = "MetaButton";
 type IconSizeType = "xs" | "sm" | "md";
 type CounterSizeType = "xs" | "sm" | "md";
 
-const ICON_SIZE_MAP: Record<ButtonSizeType, IconSizeType> = {
+export const ICON_SIZE_MAP: Record<ButtonSizeType, IconSizeType> = {
   xmini: "xs",
   mini: "sm",
   xs: "xs",

package/src/components/Popover.tsx

@@ -5,10 +5,9 @@ import { useEffect, useState } from "react";
 import { cn } from "@sparkle/lib/utils";
 
 const PopoverRoot = PopoverPrimitive.Root;
-
 const PopoverTrigger = PopoverPrimitive.Trigger;
-
 const PopoverPortal = PopoverPrimitive.Portal;
+const PopoverAnchor = PopoverPrimitive.Anchor;
 
 interface PopoverContentProps
   extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
@@ -68,7 +67,7 @@ const PopoverContent = React.forwardRef<
         const defaultContainer = dialogElements[dialogElements.length - 1];
         setContainer(defaultContainer);
       }
-    }, []);
+    }, [mountPortal, container]);
 
     return mountPortal ? (
       <PopoverPrimitive.Portal container={container}>
@@ -102,4 +101,11 @@ function Popover({
 
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger };
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
+};

package/src/components/RadioGroup.tsx

@@ -106,7 +106,7 @@ const RadioGroupItem = React.forwardRef<
     );
 
     const wrappedItem = (
-      <div className="s-flex s-items-center s-gap-2 s-w-full">
+      <div className="s-flex s-w-full s-items-center s-gap-2">
         {tooltipMessage ? (
           <Tooltip trigger={item} label={tooltipMessage} />
         ) : (
@@ -165,12 +165,12 @@ const RadioGroupCustomItem = React.forwardRef<
     return (
       <div
         className={cn(
-          "s-flex s-flex-col s-w-full",
+          "s-flex s-w-full s-flex-col",
           className,
           `s-items-${iconPosition}`
         )}
       >
-        <div className="s-flex s-items-center s-gap-2 s-w-full">
+        <div className="s-flex s-w-full s-items-center s-gap-2">
           {item}
           {customItem}
         </div>

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { AnchoredPopover } from "./AnchoredPopover";
 export { AnimatedText } from "./AnimatedText";
 export { AspectRatio } from "./AspectRatio";
 export {
@@ -104,6 +105,7 @@ export { Pagination } from "./Pagination";
 export { ColorPicker, IconPicker } from "./Picker";
 export {
   Popover,
+  PopoverAnchor,
   PopoverContent,
   PopoverPortal,
   PopoverRoot,
@@ -147,13 +149,6 @@ export {
   TooltipRoot,
   TooltipTrigger,
 } from "./Tooltip";
-export {
-  TourGuide,
-  TourGuideCard,
-  TourGuideCardContent,
-  TourGuideCardTitle,
-  TourGuideCardVisual,
-} from "./TourGuide";
 export { Tree } from "./Tree";
 export { TypingAnimation } from "./TypingAnimation";
 export { ValueCard } from "./ValueCard";

package/src/stories/AnchoredPopover.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useRef, useState } from "react";
+
+import { AnchoredPopover } from "@sparkle/components/AnchoredPopover";
+import { Button } from "@sparkle/components/Button";
+
+const meta = {
+  title: "Components/AnchoredPopover",
+  component: AnchoredPopover,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof AnchoredPopover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ExampleWrapper = ({ children }: { children: React.ReactNode }) => (
+  <div className="s-flex s-h-[400px] s-w-[600px] s-items-center s-justify-center s-gap-8">
+    {children}
+  </div>
+);
+
+const MultipleAnchorsExample = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeRef, setActiveRef] =
+    useState<React.RefObject<HTMLButtonElement>>();
+  const topRef = useRef<HTMLButtonElement>(null);
+  const rightRef = useRef<HTMLButtonElement>(null);
+  const bottomRef = useRef<HTMLButtonElement>(null);
+  const leftRef = useRef<HTMLButtonElement>(null);
+
+  const handleClick = (ref: React.RefObject<HTMLButtonElement>) => {
+    setActiveRef(ref);
+    setIsOpen(true);
+  };
+
+  return (
+    <ExampleWrapper>
+      <div className="s-relative s-flex s-h-48 s-w-48 s-flex-col s-items-center s-justify-center">
+        <div className="s-absolute s-left-1/2 s-top-0 s--translate-x-1/2">
+          <Button
+            ref={topRef}
+            label="Top"
+            onClick={() => handleClick(topRef)}
+            size="sm"
+          />
+        </div>
+        <div className="s-absolute s-right-0 s-top-1/2 s--translate-y-1/2">
+          <Button
+            ref={rightRef}
+            label="Right"
+            onClick={() => handleClick(rightRef)}
+            size="sm"
+          />
+        </div>
+        <div className="s-absolute s-bottom-0 s-left-1/2 s--translate-x-1/2">
+          <Button
+            ref={bottomRef}
+            label="Bottom"
+            onClick={() => handleClick(bottomRef)}
+            size="sm"
+          />
+        </div>
+        <div className="s-absolute s-left-0 s-top-1/2 s--translate-y-1/2">
+          <Button
+            ref={leftRef}
+            label="Left"
+            onClick={() => handleClick(leftRef)}
+            size="sm"
+          />
+        </div>
+
+        <AnchoredPopover
+          open={isOpen}
+          anchorRef={activeRef}
+          side={
+            activeRef === topRef
+              ? "top"
+              : activeRef === rightRef
+                ? "right"
+                : activeRef === bottomRef
+                  ? "bottom"
+                  : "left"
+          }
+          className="s-w-40 s-p-4"
+        >
+          <div className="s-text-sm">
+            This popover is anchored to the{" "}
+            {activeRef === topRef
+              ? "top"
+              : activeRef === rightRef
+                ? "right"
+                : activeRef === bottomRef
+                  ? "bottom"
+                  : "left"}{" "}
+            button.
+          </div>
+        </AnchoredPopover>
+      </div>
+    </ExampleWrapper>
+  );
+};
+
+export const Example: Story = {
+  args: {
+    open: true,
+    side: "bottom",
+    align: "center",
+    sideOffset: 4,
+    children: <div>Popover content</div>,
+  },
+  render: () => <MultipleAnchorsExample />,
+};

package/src/stories/Breadcrumbs.stories.tsx

@@ -27,6 +27,8 @@ type BreadcrumbsExampleProps = {
 };
 
 export const BreadcrumbsExample = (args: BreadcrumbsExampleProps) => {
+  const items0 = [{ label: "Home", icon: HomeIcon }];
+
   const items1 = [
     { label: "Home", href: "#", icon: HomeIcon },
     { label: "Spaces", onClick: () => alert("Spaces clicked!") },
@@ -80,6 +82,7 @@ export const BreadcrumbsExample = (args: BreadcrumbsExampleProps) => {
 
   return (
     <div className="s-flex s-flex-col s-gap-4 s-pb-8">
+      <Breadcrumbs items={items0} {...args} />
       <Breadcrumbs items={items1} {...args} />
       <Breadcrumbs items={items2} {...args} />
       <Breadcrumbs items={items4} {...args} />

package/dist/esm/components/TourGuide.d.ts

@@ -1,39 +0,0 @@
-import React from "react";
-interface TourGuideCardProps {
-    anchorRef?: React.RefObject<HTMLDivElement>;
-    title?: string;
-    content?: React.ReactNode;
-    visual?: React.ReactNode;
-    onNext?: () => void;
-    onDismiss?: () => void;
-    isLastStep?: boolean;
-    className?: string;
-    children?: React.ReactNode;
-    asPopover?: boolean;
-    align?: "start" | "center" | "end";
-    side?: "top" | "right" | "bottom" | "left";
-    sideOffset?: number;
-    currentIndex?: number;
-    totalCards?: number;
-}
-export declare const TourGuideCardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const TourGuideCardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const TourGuideCardVisual: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-interface TourGuideCardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
-    currentIndex: number;
-    totalCards: number;
-    onNext?: () => void;
-    onDismiss?: () => void;
-}
-export declare const TourGuideCardActions: React.ForwardRefExoticComponent<TourGuideCardActionsProps & React.RefAttributes<HTMLDivElement>>;
-export declare const TourGuideCard: React.ForwardRefExoticComponent<TourGuideCardProps & React.RefAttributes<HTMLDivElement>>;
-export interface TourGuideProps {
-    children: React.ReactNode;
-    autoStart?: boolean;
-    onStart?: () => void;
-    onEnd?: () => void;
-    onDismiss?: () => void;
-}
-export declare function TourGuide({ children, autoStart, onStart, onEnd, onDismiss, }: TourGuideProps): React.JSX.Element | null;
-export {};
-//# sourceMappingURL=TourGuide.d.ts.map

package/dist/esm/components/TourGuide.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TourGuide.d.ts","sourceRoot":"","sources":["../../../src/components/TourGuide.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,6GAW7B,CAAC;AAGH,eAAO,MAAM,oBAAoB,6GAc/B,CAAC;AAGH,eAAO,MAAM,mBAAmB,6GAc9B,CAAC;AAGH,UAAU,yBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,kGAyDhC,CAAC;AAGF,eAAO,MAAM,aAAa,2FAsCzB,CAAC;AAGF,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAgB,EAChB,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,cAAc,4BAwHhB"}