@dust-tt/sparkle 0.4.11 → 0.4.12-rc-2

package/src/components/ButtonGroup.tsx

@@ -4,6 +4,30 @@ import * as React from "react";
 import { cn } from "@sparkle/lib/utils";
 
 import type { ButtonProps, ButtonSizeType, ButtonVariantType } from "./Button";
+import { Button } from "./Button";
+import type { DropdownMenuItemProps } from "./Dropdown";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./Dropdown";
+
+type ButtonGroupButtonItem = {
+  type: "button";
+  props: ButtonProps;
+};
+
+type ButtonGroupDropdownItem = {
+  type: "dropdown";
+  triggerProps: Omit<ButtonProps, "onClick">;
+  dropdownProps: {
+    items: DropdownMenuItemProps[];
+    align?: "start" | "center" | "end";
+  };
+};
+
+export type ButtonGroupItem = ButtonGroupButtonItem | ButtonGroupDropdownItem;
 
 type DisallowedButtonGroupVariant =
   | "ghost"
@@ -58,13 +82,16 @@ const buttonGroupVariants = cva("s-inline-flex", {
 export interface ButtonGroupProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
     VariantProps<typeof buttonGroupVariants> {
-  children: React.ReactElement<ButtonProps> | React.ReactElement<ButtonProps>[];
+  /**
+   * Array of button or dropdown items to render in the group.
+   */
+  items: ButtonGroupItem[];
   /**
    * Variant to apply to all buttons in the group.
    */
   variant?: ButtonGroupVariantType;
   /**
-   * Size to apply to all buttons in the group. Mini buttons must opt-in per child.
+   * Size to apply to all buttons in the group. Mini buttons must opt-in per item.
    */
   size?: Exclude<ButtonSizeType, "mini">;
   /**
@@ -86,26 +113,19 @@ const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
       size,
       disabled,
       removeGaps = true,
-      children,
+      items,
       ...props
     },
     ref
   ) => {
-    const childrenArray = React.Children.toArray(
-      children
-    ) as React.ReactElement<ButtonProps>[];
-
-    const clonedChildren = childrenArray.map((child, index) => {
-      if (!React.isValidElement<ButtonProps>(child)) {
-        return child;
-      }
-
-      const totalChildren = childrenArray.length;
+    const totalItems = items?.length ?? 0;
+    
+    const renderedItems = items.map((item, index) => {
       const isFirst = index === 0;
-      const isLast = index === totalChildren - 1;
+      const isLast = index === totalItems - 1;
 
       const borderRadiusClasses = (() => {
-        if (!removeGaps || totalChildren === 1) {
+        if (!removeGaps || totalItems === 1) {
           return "";
         }
 
@@ -140,22 +160,61 @@ const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
         return isLast ? "" : "s-border-b-0";
       })();
 
-      const nextVariant = sanitizeVariant(variant ?? child.props.variant);
-      const nextSize = (size ?? child.props.size) as ButtonProps["size"];
-
-      const overrides = {
-        variant: nextVariant,
-        size: nextSize,
-        disabled: disabled ?? child.props.disabled,
-        isRounded: false,
-        className: cn(
-          child.props.className,
-          borderRadiusClasses,
-          borderClasses
-        ),
-      } as Partial<ButtonProps>;
-
-      return React.cloneElement(child, overrides);
+      if (item.type === "button") {
+        const nextVariant = sanitizeVariant(variant ?? item.props.variant);
+        const rawSize = size ?? item.props.size;
+        const nextSize: Exclude<ButtonSizeType, "mini"> | undefined =
+          rawSize === "mini"
+            ? undefined
+            : (rawSize as Exclude<ButtonSizeType, "mini"> | undefined);
+
+        return (
+          <Button
+            key={index}
+            {...item.props}
+            variant={nextVariant}
+            size={nextSize}
+            disabled={disabled ?? item.props.disabled}
+            isRounded={false}
+            className={cn(
+              item.props.className,
+              borderRadiusClasses,
+              borderClasses
+            )}
+          />
+        );
+      }
+
+      const nextVariant = sanitizeVariant(variant ?? item.triggerProps.variant);
+      const rawSize = size ?? item.triggerProps.size;
+      const nextSize: Exclude<ButtonSizeType, "mini"> | undefined =
+        rawSize === "mini"
+          ? undefined
+          : (rawSize as Exclude<ButtonSizeType, "mini"> | undefined);
+
+      return (
+        <DropdownMenu key={index}>
+          <DropdownMenuTrigger asChild>
+            <Button
+              {...item.triggerProps}
+              variant={nextVariant}
+              size={nextSize}
+              disabled={disabled ?? item.triggerProps.disabled}
+              isRounded={false}
+              className={cn(
+                item.triggerProps.className,
+                borderRadiusClasses,
+                borderClasses
+              )}
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align={item.dropdownProps.align ?? "center"}>
+            {item.dropdownProps.items.map((dropdownItem, dropdownIndex) => (
+              <DropdownMenuItem key={dropdownIndex} {...dropdownItem} />
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
     });
 
     return (
@@ -169,7 +228,7 @@ const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
         role="group"
         {...props}
       >
-        {clonedChildren}
+        {renderedItems}
       </div>
     );
   }

package/src/components/index.ts

@@ -17,7 +17,7 @@ export type {
   RegularButtonProps,
 } from "./Button";
 export { Button } from "./Button";
-export type { ButtonGroupProps } from "./ButtonGroup";
+export type { ButtonGroupItem, ButtonGroupProps } from "./ButtonGroup";
 export { ButtonGroup } from "./ButtonGroup";
 export { ButtonsSwitch, ButtonsSwitchList } from "./ButtonsSwitch";
 export type { CardProps } from "./Card";

package/src/stories/ButtonGroup.stories.tsx

@@ -6,23 +6,27 @@ import {
   BUTTON_VARIANTS,
   type ButtonVariantType,
 } from "@sparkle/components/Button";
-import type { ButtonGroupVariantType } from "@sparkle/components/ButtonGroup";
+import type {
+  ButtonGroupItem,
+  ButtonGroupVariantType,
+} from "@sparkle/components/ButtonGroup";
 
 import {
-  Button,
+  ArrowPathIcon,
   ButtonGroup,
+  ChevronDownIcon,
+  ClipboardIcon,
   PlusIcon,
   RobotIcon,
   Separator,
+  TrashIcon,
 } from "../index_with_tw_base";
 
-const DEFAULT_CHILDREN = (
-  <>
-    <Button label="First" />
-    <Button label="Second" />
-    <Button label="Third" />
-  </>
-);
+const DEFAULT_ITEMS: ButtonGroupItem[] = [
+  { type: "button", props: { label: "First" } },
+  { type: "button", props: { label: "Second" } },
+  { type: "button", props: { label: "Third" } },
+];
 
 const DISALLOWED_GROUP_VARIANTS: ButtonVariantType[] = [
   "ghost",
@@ -41,12 +45,12 @@ const meta = {
   tags: ["autodocs"],
   argTypes: {
     variant: {
-      description: "Variant applied to every child button",
+      description: "Variant applied to every button",
       control: { type: "select" },
       options: BUTTON_GROUP_VARIANTS,
     },
     size: {
-      description: "Size applied to every child button",
+      description: "Size applied to every button",
       control: { type: "select" },
       options: BUTTON_SIZES.filter((size) => size !== "mini"),
     },
@@ -63,12 +67,12 @@ const meta = {
       description: "Remove gaps and merge button borders",
       control: "boolean",
     },
-    children: {
+    items: {
       table: { disable: true },
     },
   },
   args: {
-    children: DEFAULT_CHILDREN,
+    items: DEFAULT_ITEMS,
     variant: "outline",
     size: "sm",
     orientation: "horizontal",
@@ -85,55 +89,58 @@ type Story = StoryObj<typeof meta>;
 export const Playground: Story = {};
 
 export const WithIcons: Story = {
-  render: () => (
-    <ButtonGroup variant="outline" size="sm">
-      <Button icon={PlusIcon} label="Add" />
-      <Button icon={RobotIcon} label="Agent" />
-      <Button label="More" />
-    </ButtonGroup>
-  ),
+  args: {
+    items: [
+      { type: "button", props: { icon: PlusIcon, label: "Add" } },
+      { type: "button", props: { icon: RobotIcon, label: "Agent" } },
+      { type: "button", props: { label: "More" } },
+    ],
+  },
 };
 
 export const WithCounters: Story = {
-  render: () => (
-    <ButtonGroup variant="outline" size="sm">
-      <Button label="Inbox" isCounter counterValue="5" />
-      <Button label="Sent" isCounter counterValue="12" />
-      <Button label="Drafts" isCounter counterValue="3" />
-    </ButtonGroup>
-  ),
+  args: {
+    items: [
+      {
+        type: "button",
+        props: { label: "Inbox", isCounter: true, counterValue: "5" },
+      },
+      {
+        type: "button",
+        props: { label: "Sent", isCounter: true, counterValue: "12" },
+      },
+      {
+        type: "button",
+        props: { label: "Drafts", isCounter: true, counterValue: "3" },
+      },
+    ],
+  },
 };
 
 export const Vertical: Story = {
-  render: () => (
-    <ButtonGroup variant="outline" size="sm" orientation="vertical">
-      <Button label="First" />
-      <Button label="Second" />
-      <Button label="Third" />
-    </ButtonGroup>
-  ),
+  args: {
+    orientation: "vertical",
+  },
 };
 
 export const Disabled: Story = {
-  render: () => (
-    <ButtonGroup variant="outline" size="sm" disabled>
-      <Button label="First" />
-      <Button label="Second" />
-      <Button label="Third" />
-    </ButtonGroup>
-  ),
+  args: {
+    disabled: true,
+  },
 };
 
 export const WithGaps: Story = {
-  render: () => (
-    <ButtonGroup variant="outline" size="sm" removeGaps={false}>
-      <Button label="First" />
-      <Button label="Second" />
-      <Button label="Third" />
-    </ButtonGroup>
-  ),
+  args: {
+    removeGaps: false,
+  },
 };
 
+const VARIANT_ITEMS: ButtonGroupItem[] = [
+  { type: "button", props: { label: "One" } },
+  { type: "button", props: { label: "Two" } },
+  { type: "button", props: { label: "Three" } },
+];
+
 const ButtonGroupByVariant = ({
   variant,
 }: {
@@ -143,21 +150,9 @@ const ButtonGroupByVariant = ({
     <Separator />
     <h3 className="s-text-primary dark:s-text-primary-50">{variant}</h3>
     <div className="s-flex s-items-center s-gap-4">
-      <ButtonGroup variant={variant} size="xs">
-        <Button label="One" />
-        <Button label="Two" />
-        <Button label="Three" />
-      </ButtonGroup>
-      <ButtonGroup variant={variant} size="sm">
-        <Button label="One" />
-        <Button label="Two" />
-        <Button label="Three" />
-      </ButtonGroup>
-      <ButtonGroup variant={variant} size="md">
-        <Button label="One" />
-        <Button label="Two" />
-        <Button label="Three" />
-      </ButtonGroup>
+      <ButtonGroup variant={variant} size="xs" items={VARIANT_ITEMS} />
+      <ButtonGroup variant={variant} size="sm" items={VARIANT_ITEMS} />
+      <ButtonGroup variant={variant} size="md" items={VARIANT_ITEMS} />
     </div>
   </>
 );
@@ -172,3 +167,107 @@ export const Gallery: Story = {
     </div>
   ),
 };
+
+export const WithDropdownMenu: Story = {
+  render: () => (
+    <div className="s-flex s-flex-col s-gap-4">
+      <div>
+        <h3 className="s-mb-2 s-text-sm s-font-medium">
+          Split button with dropdown
+        </h3>
+        <ButtonGroup
+          variant="outline"
+          items={[
+            {
+              type: "button",
+              props: {
+                icon: ClipboardIcon,
+                tooltip: "Copy to clipboard",
+                variant: "ghost-secondary",
+                size: "xs",
+              },
+            },
+            {
+              type: "dropdown",
+              triggerProps: {
+                variant: "ghost-secondary",
+                size: "xs",
+                icon: ChevronDownIcon,
+              },
+              dropdownProps: {
+                items: [
+                  { label: "Retry", icon: ArrowPathIcon },
+                  { label: "Delete", icon: TrashIcon, variant: "warning" },
+                ],
+              },
+            },
+          ]}
+        />
+      </div>
+
+      <div>
+        <h3 className="s-mb-2 s-text-sm s-font-medium">Multiple variations</h3>
+        <div className="s-flex s-flex-wrap s-gap-4">
+          <ButtonGroup
+            variant="outline"
+            items={[
+              { type: "button", props: { label: "Copy", size: "sm" } },
+              {
+                type: "dropdown",
+                triggerProps: { size: "sm", icon: ChevronDownIcon },
+                dropdownProps: {
+                  items: [
+                    { label: "Option 1" },
+                    { label: "Option 2" },
+                    { label: "Option 3" },
+                  ],
+                },
+              },
+            ]}
+          />
+
+          <ButtonGroup
+            variant="primary"
+            items={[
+              { type: "button", props: { label: "Save", size: "sm" } },
+              {
+                type: "dropdown",
+                triggerProps: { size: "sm", icon: ChevronDownIcon },
+                dropdownProps: {
+                  items: [
+                    { label: "Save and close" },
+                    { label: "Save as draft" },
+                  ],
+                },
+              },
+            ]}
+          />
+
+          <ButtonGroup
+            variant="outline"
+            items={[
+              {
+                type: "button",
+                props: { icon: PlusIcon, label: "Add", size: "sm" },
+              },
+              {
+                type: "button",
+                props: { icon: RobotIcon, label: "Agent", size: "sm" },
+              },
+              {
+                type: "dropdown",
+                triggerProps: { size: "sm", icon: ChevronDownIcon },
+                dropdownProps: {
+                  items: [
+                    { label: "More options", icon: PlusIcon },
+                    { label: "Settings" },
+                  ],
+                },
+              },
+            ]}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};