@dust-tt/sparkle 0.2.575 → 0.2.576

package/src/components/Resizable.tsx

@@ -48,7 +48,7 @@ const ResizableHandle = ({
       <div
         className={cn(
           "s-absolute s-flex s-h-6 s-w-2 s-items-center s-justify-center s-rounded-2xl",
-          "s-border-gray-100 s-border s-bg-white"
+          "s-border s-border-gray-100 s-bg-white"
         )}
       >
         <div className="s-w-px" />

package/src/stories/Dialog.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
-import { Avatar, Button, Input } from "@sparkle/components";
+import { Avatar, Button, Input, SearchInput } from "@sparkle/components";
 
 import {
   Dialog,
@@ -168,7 +168,16 @@ export const LargeContent: Story = {
         <DialogHeader>
           <DialogTitle>Terms of Service</DialogTitle>
         </DialogHeader>
-        <DialogContainer>
+        <DialogContainer
+          fixedContent={
+            <SearchInput
+              value=""
+              onChange={() => {}}
+              name="search-terms"
+              placeholder="Search terms..."
+            />
+          }
+        >
           <div className="s-space-y-4">
             <h3 className="s-font-semibold">1. Introduction</h3>
             <p className="s-text-sm s-text-muted-foreground">
@@ -203,6 +212,13 @@ export const LargeContent: Story = {
               architecto dolorem corrupti accusamus optio neque officia
               perferendis molestiae.
             </p>
+            <h3 className="s-font-semibold">6. Additional Terms</h3>
+            <p className="s-text-sm s-text-muted-foreground">
+              More content to make the dialog scrollable and test the fixed
+              search input functionality. Lorem ipsum dolor sit amet consectetur
+              adipisicing elit. Quod possimus sit modi reprehenderit sed dolorem
+              nisi nostrum.
+            </p>
           </div>
         </DialogContainer>
         <DialogFooter

package/src/stories/MultiPageDialog.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 
+import { SearchInput } from "@sparkle/components";
 import { Button } from "@sparkle/components/Button";
 import {
   MultiPageDialog,
@@ -274,6 +275,7 @@ export const SimpleToolDialog: Story = {
         </MultiPageDialogTrigger>
         <MultiPageDialogContent
           pages={toolPages}
+          showHeaderNavigation={false}
           currentPageId="tool-selection"
           onPageChange={() => {}}
           size="xl"
@@ -709,6 +711,7 @@ export const ScrollableContent: Story = {
   render: () => {
     const [currentPageId, setCurrentPageId] = useState("long-form");
     const [isOpen, setIsOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
 
     const handleSave = () => {
       alert("Long form submitted!");
@@ -738,8 +741,17 @@ export const ScrollableContent: Story = {
       {
         id: "long-form",
         title: "Long Form Content",
-        description: "This page demonstrates scrollable content",
+        description:
+          "This page demonstrates scrollable content with fixed search",
         icon: DocumentTextIcon,
+        fixedContent: (
+          <SearchInput
+            value={searchTerm}
+            onChange={setSearchTerm}
+            name="search-content"
+            placeholder="Search through content..."
+          />
+        ),
         content: (
           <div className="s-space-y-6">
             <div>
@@ -748,9 +760,16 @@ export const ScrollableContent: Story = {
               </h3>
               <p className="s-text-sm s-text-muted-foreground">
                 This page contains a lot of content to demonstrate scrolling
-                functionality. The content should be scrollable within the
-                dialog area.
+                functionality with a fixed search input. The search input stays
+                visible while scrolling through the content below.
               </p>
+              {searchTerm && (
+                <div className="s-rounded-md s-border s-bg-yellow-50 s-p-3">
+                  <p className="s-text-sm s-text-yellow-800">
+                    🔍 Searching for: <strong>{searchTerm}</strong>
+                  </p>
+                </div>
+              )}
             </div>
 
             {Array.from({ length: 15 }, (_, i) => (
@@ -793,12 +812,13 @@ export const ScrollableContent: Story = {
 
             <div className="s-rounded-md s-border s-bg-blue-50 s-p-4">
               <h4 className="s-mb-2 s-text-sm s-font-semibold s-text-blue-900">
-                Scroll Test Complete
+                Fixed Content Test Complete
               </h4>
               <p className="s-text-xs s-text-blue-700">
-                If you can see this message, the scrolling functionality is
-                working correctly! The dialog maintains its fixed height while
-                allowing the content to scroll.
+                If you can see this message, the fixed content functionality is
+                working correctly! The search input remains fixed at the top
+                while this content scrolls. Try scrolling back up - the search
+                input should always be visible.
               </p>
             </div>
           </div>
@@ -836,13 +856,14 @@ export const ScrollableContent: Story = {
     return (
       <MultiPageDialog open={isOpen} onOpenChange={setIsOpen}>
         <MultiPageDialogTrigger asChild>
-          <Button label="Open Scrollable Content Dialog" />
+          <Button label="Open Fixed Content Test Dialog" />
         </MultiPageDialogTrigger>
         <MultiPageDialogContent
           pages={scrollablePages}
           currentPageId={currentPageId}
           onPageChange={setCurrentPageId}
-          size="lg"
+          size="xl"
+          height="xl"
           leftButton={{
             label: "Cancel",
             variant: "outline",