@spark-ui/components 12.1.1 → 12.2.0

package/dist/drawer/index.mjs

@@ -1,11 +1,11 @@
 import {
   IconButton
 } from "../chunk-DCXWGQVZ.mjs";
-import "../chunk-2YM6GKWW.mjs";
-import "../chunk-GAK4SC2F.mjs";
 import {
   Icon
 } from "../chunk-UMUMFMFB.mjs";
+import "../chunk-2YM6GKWW.mjs";
+import "../chunk-GAK4SC2F.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import "../chunk-6QCEPQ3U.mjs";
 

package/dist/dropdown/index.mjs

@@ -2,11 +2,11 @@ import {
   Popover
 } from "../chunk-GPJMLIHC.mjs";
 import "../chunk-DCXWGQVZ.mjs";
-import "../chunk-2YM6GKWW.mjs";
-import "../chunk-GAK4SC2F.mjs";
 import {
   Icon
 } from "../chunk-UMUMFMFB.mjs";
+import "../chunk-2YM6GKWW.mjs";
+import "../chunk-GAK4SC2F.mjs";
 import {
   VisuallyHidden
 } from "../chunk-KEGAAGJW.mjs";

package/dist/file-upload/index.mjs

@@ -4,14 +4,14 @@ import {
 import {
   IconButton
 } from "../chunk-DCXWGQVZ.mjs";
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
 import {
   Button,
   buttonStyles
 } from "../chunk-2YM6GKWW.mjs";
 import "../chunk-GAK4SC2F.mjs";
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import {
   Slot

package/dist/icon/index.d.mts

@@ -4,8 +4,8 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 
 declare const iconStyles: (props?: ({
-    intent?: "main" | "alert" | "error" | "current" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
-    size?: "sm" | "md" | "lg" | "current" | "xl" | null | undefined;
+    intent?: "main" | "current" | "alert" | "error" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
+    size?: "current" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type IconVariantsProps = VariantProps<typeof iconStyles>;
 

package/dist/icon/index.d.ts

@@ -4,8 +4,8 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 
 declare const iconStyles: (props?: ({
-    intent?: "main" | "alert" | "error" | "current" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
-    size?: "sm" | "md" | "lg" | "current" | "xl" | null | undefined;
+    intent?: "main" | "current" | "alert" | "error" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
+    size?: "current" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type IconVariantsProps = VariantProps<typeof iconStyles>;
 

package/dist/pagination/index.mjs

@@ -1,13 +1,13 @@
 import {
   IconButton
 } from "../chunk-DCXWGQVZ.mjs";
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
 import {
   Button
 } from "../chunk-2YM6GKWW.mjs";
 import "../chunk-GAK4SC2F.mjs";
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import "../chunk-6QCEPQ3U.mjs";
 

package/dist/popover/index.mjs

@@ -2,9 +2,9 @@ import {
   Popover
 } from "../chunk-GPJMLIHC.mjs";
 import "../chunk-DCXWGQVZ.mjs";
+import "../chunk-UMUMFMFB.mjs";
 import "../chunk-2YM6GKWW.mjs";
 import "../chunk-GAK4SC2F.mjs";
-import "../chunk-UMUMFMFB.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import "../chunk-6QCEPQ3U.mjs";
 export {

package/dist/scrolling-list/index.mjs

@@ -1,13 +1,13 @@
 import {
   IconButton
 } from "../chunk-DCXWGQVZ.mjs";
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
 import {
   Button
 } from "../chunk-2YM6GKWW.mjs";
 import "../chunk-GAK4SC2F.mjs";
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import {
   Slot

package/dist/snackbar/index.mjs

@@ -1,13 +1,13 @@
 import {
   IconButton
 } from "../chunk-DCXWGQVZ.mjs";
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
 import {
   Button
 } from "../chunk-2YM6GKWW.mjs";
 import "../chunk-GAK4SC2F.mjs";
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import "../chunk-6QCEPQ3U.mjs";
 

package/dist/spinner/index.d.mts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerStyles: (props?: ({
     size?: "sm" | "md" | "current" | "full" | null | undefined;
-    intent?: "main" | "alert" | "error" | "current" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
+    intent?: "main" | "current" | "alert" | "error" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
     isBackgroundVisible?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SpinnerStylesProps = VariantProps<typeof spinnerStyles>;

package/dist/spinner/index.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerStyles: (props?: ({
     size?: "sm" | "md" | "current" | "full" | null | undefined;
-    intent?: "main" | "alert" | "error" | "current" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
+    intent?: "main" | "current" | "alert" | "error" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
     isBackgroundVisible?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SpinnerStylesProps = VariantProps<typeof spinnerStyles>;

package/dist/stepper/index.mjs

@@ -5,11 +5,11 @@ import {
 import {
   IconButton
 } from "../chunk-DCXWGQVZ.mjs";
-import "../chunk-2YM6GKWW.mjs";
-import "../chunk-GAK4SC2F.mjs";
 import {
   Icon
 } from "../chunk-UMUMFMFB.mjs";
+import "../chunk-2YM6GKWW.mjs";
+import "../chunk-GAK4SC2F.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import "../chunk-6QCEPQ3U.mjs";
 

package/dist/tabs/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Tabs as Tabs$2 } from 'radix-ui';
-import * as react from 'react';
+import * as React from 'react';
 import { PropsWithChildren, Ref, ReactElement, ComponentType, ReactNode } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -80,8 +80,8 @@ interface TabsPopoverTriggerProps extends Omit<TriggerProps, 'asChild' | 'childr
     'aria-label': string;
     children?: ReactNode;
 }
-declare const TabsPopoverTrigger: react.ForwardRefExoticComponent<Omit<TabsPopoverTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-declare const TabsPopoverContent: react.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const TabsPopoverTrigger: React.ForwardRefExoticComponent<Omit<TabsPopoverTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsPopoverContent: React.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 type TabsPopoverTriggerComponent = typeof TabsPopoverTrigger;
 type TabsPopoverContentComponent = typeof TabsPopoverContent;
 type ConfiguredPopoverComponent = ComponentType<PopoverProps> & Omit<typeof Popover, 'Content' | 'Trigger'> & {

package/dist/tabs/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Tabs as Tabs$2 } from 'radix-ui';
-import * as react from 'react';
+import * as React from 'react';
 import { PropsWithChildren, Ref, ReactElement, ComponentType, ReactNode } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -80,8 +80,8 @@ interface TabsPopoverTriggerProps extends Omit<TriggerProps, 'asChild' | 'childr
     'aria-label': string;
     children?: ReactNode;
 }
-declare const TabsPopoverTrigger: react.ForwardRefExoticComponent<Omit<TabsPopoverTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-declare const TabsPopoverContent: react.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const TabsPopoverTrigger: React.ForwardRefExoticComponent<Omit<TabsPopoverTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsPopoverContent: React.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 type TabsPopoverTriggerComponent = typeof TabsPopoverTrigger;
 type TabsPopoverContentComponent = typeof TabsPopoverContent;
 type ConfiguredPopoverComponent = ComponentType<PopoverProps> & Omit<typeof Popover, 'Content' | 'Trigger'> & {

package/dist/tabs/index.mjs

@@ -4,13 +4,13 @@ import {
 import {
   IconButton
 } from "../chunk-DCXWGQVZ.mjs";
+import {
+  Icon
+} from "../chunk-UMUMFMFB.mjs";
 import {
   Button
 } from "../chunk-2YM6GKWW.mjs";
 import "../chunk-GAK4SC2F.mjs";
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import "../chunk-6QCEPQ3U.mjs";
 

package/dist/toast/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Toast } from '@base-ui-components/react/toast';
-import * as react from 'react';
+import * as React from 'react';
 import { ButtonProps } from '../button/index.mjs';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
@@ -8,12 +8,14 @@ import 'class-variance-authority';
 type ToastIntent = 'main' | 'support' | 'accent' | 'basic' | 'success' | 'alert' | 'error' | 'info' | 'neutral' | 'surface' | 'surfaceInverse';
 type ToastDesign = 'tinted' | 'filled';
 interface ToastData {
-    icon?: react.ReactNode;
+    icon?: React.ReactNode;
     design?: ToastDesign;
     intent?: ToastIntent;
     isClosable?: boolean;
     closeLabel?: string;
     compact?: boolean;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
     action?: {
         close?: boolean;
         label: string;
@@ -21,8 +23,10 @@ interface ToastData {
     } & ButtonProps;
 }
 type ToastObject = Toast.Root.ToastObject<ToastData>;
-interface AddOptions extends Omit<ToastObject, 'id' | 'animation' | 'height' | 'ref' | 'limited'> {
+interface AddOptions extends Omit<ToastObject, 'id' | 'animation' | 'height' | 'ref' | 'limited' | 'title' | 'description'> {
     id?: string;
+    title?: string | React.ReactNode;
+    description?: string | React.ReactNode;
 }
 type UpdateOptions = Partial<AddOptions>;
 interface PromiseOptions<Value> {
@@ -41,19 +45,19 @@ interface UseToastManagerReturnValue {
 
 declare function useToastManager(): UseToastManagerReturnValue;
 
-interface ToastProviderProps extends react.ComponentProps<typeof Toast.Provider> {
-    children: react.ReactNode;
+interface ToastProviderProps extends React.ComponentProps<typeof Toast.Provider> {
+    children: React.ReactNode;
 }
 declare function ToastProvider({ children, limit, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
-interface ToastTriggerProps extends react.ComponentPropsWithRef<'button'>, Pick<ToastObject, 'priority'>, Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {
-    children: react.ReactNode;
+interface ToastTriggerProps extends Omit<React.ComponentPropsWithRef<'button'>, 'title'>, Pick<ToastObject, 'priority'>, Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {
+    children: React.ReactNode;
     asChild?: boolean;
-    title: string;
-    description?: string;
+    title: string | React.ReactNode;
+    description?: string | React.ReactNode;
     timeout?: number;
 }
 declare function ToastTrigger({ children, onClick, asChild, title, description, timeout, design, intent, isClosable, icon, action, compact, priority, }: ToastTriggerProps): react_jsx_runtime.JSX.Element;
 type ToastManager = ReturnType<typeof Toast.createToastManager>;
 declare const createToastManager: () => ToastManager;
 
-export { type ToastData, type ToastDesign, type ToastIntent, type ToastManager, type ToastObject, ToastProvider, ToastTrigger, type UseToastManagerReturnValue, createToastManager, useToastManager };
+export { type AddOptions, type ToastData, type ToastDesign, type ToastIntent, type ToastManager, type ToastObject, ToastProvider, ToastTrigger, type UseToastManagerReturnValue, createToastManager, useToastManager };

package/dist/toast/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Toast } from '@base-ui-components/react/toast';
-import * as react from 'react';
+import * as React from 'react';
 import { ButtonProps } from '../button/index.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
@@ -8,12 +8,14 @@ import 'class-variance-authority';
 type ToastIntent = 'main' | 'support' | 'accent' | 'basic' | 'success' | 'alert' | 'error' | 'info' | 'neutral' | 'surface' | 'surfaceInverse';
 type ToastDesign = 'tinted' | 'filled';
 interface ToastData {
-    icon?: react.ReactNode;
+    icon?: React.ReactNode;
     design?: ToastDesign;
     intent?: ToastIntent;
     isClosable?: boolean;
     closeLabel?: string;
     compact?: boolean;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
     action?: {
         close?: boolean;
         label: string;
@@ -21,8 +23,10 @@ interface ToastData {
     } & ButtonProps;
 }
 type ToastObject = Toast.Root.ToastObject<ToastData>;
-interface AddOptions extends Omit<ToastObject, 'id' | 'animation' | 'height' | 'ref' | 'limited'> {
+interface AddOptions extends Omit<ToastObject, 'id' | 'animation' | 'height' | 'ref' | 'limited' | 'title' | 'description'> {
     id?: string;
+    title?: string | React.ReactNode;
+    description?: string | React.ReactNode;
 }
 type UpdateOptions = Partial<AddOptions>;
 interface PromiseOptions<Value> {
@@ -41,19 +45,19 @@ interface UseToastManagerReturnValue {
 
 declare function useToastManager(): UseToastManagerReturnValue;
 
-interface ToastProviderProps extends react.ComponentProps<typeof Toast.Provider> {
-    children: react.ReactNode;
+interface ToastProviderProps extends React.ComponentProps<typeof Toast.Provider> {
+    children: React.ReactNode;
 }
 declare function ToastProvider({ children, limit, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
-interface ToastTriggerProps extends react.ComponentPropsWithRef<'button'>, Pick<ToastObject, 'priority'>, Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {
-    children: react.ReactNode;
+interface ToastTriggerProps extends Omit<React.ComponentPropsWithRef<'button'>, 'title'>, Pick<ToastObject, 'priority'>, Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {
+    children: React.ReactNode;
     asChild?: boolean;
-    title: string;
-    description?: string;
+    title: string | React.ReactNode;
+    description?: string | React.ReactNode;
     timeout?: number;
 }
 declare function ToastTrigger({ children, onClick, asChild, title, description, timeout, design, intent, isClosable, icon, action, compact, priority, }: ToastTriggerProps): react_jsx_runtime.JSX.Element;
 type ToastManager = ReturnType<typeof Toast.createToastManager>;
 declare const createToastManager: () => ToastManager;
 
-export { type ToastData, type ToastDesign, type ToastIntent, type ToastManager, type ToastObject, ToastProvider, ToastTrigger, type UseToastManagerReturnValue, createToastManager, useToastManager };
+export { type AddOptions, type ToastData, type ToastDesign, type ToastIntent, type ToastManager, type ToastObject, ToastProvider, ToastTrigger, type UseToastManagerReturnValue, createToastManager, useToastManager };

package/dist/toast/index.js

@@ -1324,6 +1324,29 @@ function Toast({ toast }) {
       }
     );
   };
+  const renderTitle = () => {
+    const title = toast.data?.title ?? toast.title;
+    const hasDescription = !!(toast.data?.description ?? toast.description);
+    if (typeof title !== "string" && title !== void 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_toast.Toast.Title,
+        {
+          className: hasDescription ? "text-headline-2" : "text-body-1",
+          render: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {}),
+          children: title
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_toast.Toast.Title, { className: hasDescription ? "text-headline-2" : "text-body-1" });
+  };
+  const renderDescription = () => {
+    const description = toast.data?.description ?? toast.description;
+    if (!description) return null;
+    if (typeof description !== "string") {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_toast.Toast.Description, { className: "text-body-1 break-all", render: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {}), children: description });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_toast.Toast.Description, { className: "text-body-1 break-all" });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_toast.Toast.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_class_variance_authority7.cx)("flex", compact ? "gap-lg items-center" : "gap-md flex-col"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "gap-lg p-md flex grow items-center", children: [
       ToastIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "md", children: ToastIcon }),
@@ -1336,8 +1359,8 @@ function Toast({ toast }) {
             !compact && isClosable && "pr-3xl"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_toast.Toast.Title, { className: toast.description ? "text-headline-2" : "text-body-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_toast.Toast.Description, { className: "text-body-1" })
+            renderTitle(),
+            renderDescription()
           ]
         }
       )
@@ -1399,7 +1422,7 @@ function ToastTrigger({
   compact,
   priority = "low"
 }) {
-  const toastManager = import_toast3.Toast.useToastManager();
+  const toastManager = useToastManager();
   const Component = asChild ? Slot : "button";
   function createToast(e) {
     onClick?.(e);