@spark-ui/components 18.1.1 → 18.1.3

package/dist/toast/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toast/Toast.styles.ts","../../src/toast/Toast.tsx","../../src/toast/useToastManager.ts","../../src/toast/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const toastStyles = cva(\n  [\n    'gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md',\n    'absolute right-0 bottom-0 left-auto mr-0',\n    'bg-clip-padding shadow-md select-none',\n    'focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none',\n    'z-[calc(1000-var(--toast-index))]',\n    \"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n    // Stack effect while not focused\n    '[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-16px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]',\n    // Scale and translate\n    'ease-standard [transition-property:opacity,transform]',\n    'duration-400',\n    // Present when the toast is animating in.\n    'data-[starting-style]:[transform:translateY(150%)]',\n    // Expanded: Present when the toast is expanded in the viewport.\n    'data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]',\n    // Present when the toast is animating out.\n    'data-[ending-style]:duration-250',\n    'data-[ending-style]:opacity-0',\n    'data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',\n    'data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    // Limited: Present when the toast was removed due to exceeding the limit.\n    'data-[limited]:opacity-0',\n  ],\n  {\n    variants: {\n      design: {\n        filled: '',\n        tinted: '',\n      },\n      intent: {\n        success: '',\n        alert: '',\n        error: '',\n        info: '',\n        neutral: '',\n        main: '',\n        support: '',\n        accent: '',\n        surface: '',\n        surfaceInverse: '',\n      },\n    },\n    compoundVariants: [\n      // Filled variants\n      {\n        design: 'filled',\n        intent: 'success',\n        class: ['bg-success text-on-success border-success'],\n      },\n      {\n        design: 'filled',\n        intent: 'alert',\n        class: ['bg-alert text-on-alert border-alert'],\n      },\n      {\n        design: 'filled',\n        intent: 'error',\n        class: ['bg-error text-on-error border-error'],\n      },\n      {\n        design: 'filled',\n        intent: 'info',\n        class: ['bg-info text-on-info border-info'],\n      },\n      {\n        design: 'filled',\n        intent: 'neutral',\n        class: ['bg-neutral text-on-neutral border-neutral'],\n      },\n      {\n        design: 'filled',\n        intent: 'main',\n        class: ['bg-main text-on-main border-main'],\n      },\n      {\n        design: 'filled',\n        intent: 'support',\n        class: ['bg-support text-on-support border-support'],\n      },\n      {\n        design: 'filled',\n        intent: 'accent',\n        class: ['bg-accent text-on-accent border-accent'],\n      },\n      {\n        design: 'filled',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'filled',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n\n      // Tinted variants\n      {\n        design: 'tinted',\n        intent: 'success',\n        class: ['bg-success-container text-on-success-container border-success'],\n      },\n      {\n        design: 'tinted',\n        intent: 'alert',\n        class: ['bg-alert-container text-on-alert-container border-alert'],\n      },\n      {\n        design: 'tinted',\n        intent: 'error',\n        class: ['bg-error-container text-on-error-container border-error'],\n      },\n      {\n        design: 'tinted',\n        intent: 'info',\n        class: ['bg-info-container text-on-info-container border-info'],\n      },\n      {\n        design: 'tinted',\n        intent: 'neutral',\n        class: ['bg-neutral-container text-on-neutral-container border-neutral'],\n      },\n      {\n        design: 'tinted',\n        intent: 'main',\n        class: ['bg-main-container text-on-main-container border-main'],\n      },\n      {\n        design: 'tinted',\n        intent: 'support',\n        class: ['bg-support-container text-on-support-container border-support'],\n      },\n      {\n        design: 'tinted',\n        intent: 'accent',\n        class: ['bg-accent-container text-on-accent-container border-accent'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type ToastVariantProps = VariantProps<typeof toastStyles>\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Button, ButtonProps } from '@spark-ui/components/button'\nimport { Icon } from '@spark-ui/components/icon'\nimport { IconButton } from '@spark-ui/components/icon-button'\nimport { AlertFill } from '@spark-ui/icons/AlertFill'\nimport { Close } from '@spark-ui/icons/Close'\nimport { InfoFill } from '@spark-ui/icons/InfoFill'\nimport { ValidFill } from '@spark-ui/icons/ValidFill'\nimport { WarningFill } from '@spark-ui/icons/WarningFill'\nimport { cx } from 'class-variance-authority'\n\nimport { toastStyles } from './Toast.styles'\nimport type { ToastData, ToastDesign, ToastIntent, ToastObject } from './types'\n\nfunction getButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surface'\n  if (intent === 'surface') return 'surfaceInverse'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nfunction getCloseButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surfaceInverse'\n  if (intent === 'surface') return 'surface'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nconst getActionProps = (\n  action: ToastData['action'],\n  { toastDesign, toastIntent }: { toastDesign?: ToastDesign; toastIntent?: ToastIntent }\n): ButtonProps => {\n  if (!action) return {}\n\n  const { design, intent, className, onClick, ...rest } = action\n\n  return {\n    design: design ?? toastDesign,\n    intent: intent ?? getButtonIntent(toastIntent),\n    className: cx('ml-auto', className),\n    onClick,\n    ...rest,\n  }\n}\n\nconst getToastRootProps = (toast: ToastObject, design: ToastDesign, intent: ToastIntent) => ({\n  swipeDirection: ['down', 'right'] as ['down', 'right'],\n  toast,\n  className: cx(toastStyles({ design, intent })),\n  style: {\n    ['--gap' as string]: 'var(--spacing-md)',\n    ['--offset-y' as string]:\n      'calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))',\n  },\n})\n\nfunction getDefaultIcon(intent: ToastIntent): React.ReactNode {\n  switch (intent) {\n    case 'info':\n      return <InfoFill />\n    case 'success':\n      return <ValidFill />\n    case 'alert':\n      return <WarningFill />\n    case 'error':\n      return <AlertFill />\n    case 'main':\n    case 'support':\n    case 'accent':\n    case 'neutral':\n    case 'surface':\n    case 'surfaceInverse':\n    default:\n      return <InfoFill />\n  }\n}\n\nexport function Toast({ toast }: { toast: ToastObject }) {\n  const {\n    icon: ToastIcon,\n    intent = 'info',\n    design: _design, // deprecated prop, ignored\n    action,\n    isClosable,\n    closeLabel = 'Close',\n    compact = false,\n  } = toast.data ?? {}\n\n  // Always use 'tinted' design regardless of prop value\n  const design = 'tinted' as const\n\n  const ActionButton = action?.close ? BaseToast.Close : BaseToast.Action\n  const actionProps = getActionProps(action, { toastDesign: design, toastIntent: intent })\n  const rootProps = getToastRootProps(toast, design, intent)\n\n  // Use provided icon or default icon based on intent\n  const icon = ToastIcon ?? getDefaultIcon(intent)\n\n  const getCloseButton = (className?: string) => {\n    if (!isClosable) return null\n\n    return (\n      <BaseToast.Close\n        className={className}\n        render={\n          <IconButton\n            aria-label={closeLabel}\n            design={design}\n            intent={getCloseButtonIntent(intent)}\n            size=\"md\"\n          />\n        }\n      >\n        <Icon>\n          <Close />\n        </Icon>\n      </BaseToast.Close>\n    )\n  }\n\n  const renderTitle = () => {\n    // Check ToastData first for JSX, then fallback to toast.title (string)\n    const title = toast.data?.title ?? toast.title\n    const hasDescription = !!(toast.data?.description ?? toast.description)\n\n    if (typeof title !== 'string' && title !== undefined) {\n      return (\n        <BaseToast.Title\n          className={hasDescription ? 'text-headline-2' : 'text-body-1'}\n          render={<div />}\n        >\n          {title}\n        </BaseToast.Title>\n      )\n    }\n\n    return <BaseToast.Title className={hasDescription ? 'text-headline-2' : 'text-body-1'} />\n  }\n\n  const renderDescription = () => {\n    // Check ToastData first for JSX, then fallback to toast.description (string)\n    const description = toast.data?.description ?? toast.description\n\n    if (!description) return null\n\n    if (typeof description !== 'string') {\n      return (\n        <BaseToast.Description className=\"text-body-1\" render={<div />}>\n          {description}\n        </BaseToast.Description>\n      )\n    }\n\n    return <BaseToast.Description className=\"text-body-1\" />\n  }\n\n  return (\n    <BaseToast.Root key={toast.id} {...rootProps}>\n      <div className={cx('flex', compact ? 'gap-lg items-center' : 'gap-md flex-col')}>\n        <div className=\"gap-lg p-md flex grow items-center\">\n          {/* Icon */}\n          <Icon size=\"md\">{icon}</Icon>\n          {/* Title and description */}\n          <div\n            className={cx(\n              'gap-sm flex flex-col',\n              compact && 'flex-1',\n              !compact && isClosable && 'pr-3xl'\n            )}\n          >\n            {renderTitle()}\n            {renderDescription()}\n          </div>\n        </div>\n\n        <div className={cx('flex')}>\n          {/* Action button */}\n          {action && (\n            <ActionButton render={<Button {...actionProps} />}>{action.label}</ActionButton>\n          )}\n          {/* Close button - compact layout only */}\n          {compact && getCloseButton()}\n        </div>\n\n        {/* Close button - default layout only */}\n        {!compact && getCloseButton('top-md right-md absolute')}\n      </div>\n    </BaseToast.Root>\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport * as React from 'react'\n\nimport type { UseToastManagerReturnValue } from './types'\n\nexport function useToastManager(): UseToastManagerReturnValue {\n  const manager = BaseToast.useToastManager()\n  const managerRef = React.useRef(manager)\n  managerRef.current = manager\n\n  return React.useMemo(\n    () => ({\n      get toasts() {\n        return managerRef.current.toasts\n      },\n      add: options => managerRef.current.add(options),\n      update: (id, options) => managerRef.current.update(id, options),\n      close: id => managerRef.current.close(id),\n      promise: (p, options) => managerRef.current.promise(p, options),\n      closeAll: () => managerRef.current.toasts.forEach(({ id }) => managerRef.current.close(id)),\n    }),\n    []\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Slot } from '@spark-ui/components/slot'\nimport { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Toast } from './Toast'\nimport type { ToastData, ToastObject } from './types'\nimport { useToastManager } from './useToastManager'\n\nexport * from './types'\n\nfunction ToastList() {\n  const { toasts } = useToastManager()\n\n  return toasts.map(toast => <Toast key={toast.id} toast={toast} />)\n}\n\ninterface ToastProviderProps extends React.ComponentProps<typeof BaseToast.Provider> {\n  children: React.ReactNode\n}\n\n/**\n * A provider component that manages and displays temporary notification messages to users.\n */\nexport function ToastProvider({ children, limit = 3, ...props }: ToastProviderProps) {\n  return (\n    <BaseToast.Provider limit={limit} {...props}>\n      <BaseToast.Portal>\n        <BaseToast.Viewport\n          className={cx(\n            'z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end'\n          )}\n        >\n          <ToastList />\n        </BaseToast.Viewport>\n      </BaseToast.Portal>\n      {children}\n    </BaseToast.Provider>\n  )\n}\n\ninterface ToastTriggerProps\n  extends\n    Omit<React.ComponentPropsWithRef<'button'>, 'title'>,\n    Pick<ToastObject, 'priority'>,\n    Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {\n  children: React.ReactNode\n  asChild?: boolean\n  title: string | React.ReactNode\n  description?: string | React.ReactNode\n  timeout?: number\n}\n\nexport function ToastTrigger({\n  children,\n  onClick,\n  asChild = false,\n  title,\n  description,\n  timeout = 5000,\n  design = 'filled',\n  intent = 'neutral',\n  isClosable = true,\n  icon,\n  action,\n  compact,\n  priority = 'low',\n}: ToastTriggerProps) {\n  const toastManager = useToastManager()\n\n  const Component = asChild ? Slot : 'button'\n\n  function createToast(e: React.MouseEvent<HTMLButtonElement>) {\n    onClick?.(e)\n    toastManager.add({\n      title,\n      description,\n      timeout,\n      priority,\n      data: {\n        design,\n        intent,\n        isClosable,\n        ...(icon && { icon }),\n        action,\n        ...(compact !== undefined && { compact }),\n      },\n    })\n  }\n\n  return (\n    <Component {...(!asChild && { type: 'button' })} onClick={createToast}>\n      {children}\n    </Component>\n  )\n}\n\nexport type ToastManager = ReturnType<typeof BaseToast.createToastManager>\n\nexport const createToastManager: () => ToastManager = BaseToast.createToastManager\n\nexport { useToastManager }\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toast/Toast.styles.ts","../../src/toast/Toast.tsx","../../src/toast/useToastManager.ts","../../src/toast/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const toastStyles = cva(\n  [\n    'gap-lg p-md flex w-max w-[min(400px,calc(100vw-var(--spacing-sz-32)))]! flex-col rounded-lg border-md',\n    'absolute right-0 bottom-0 left-auto mr-0',\n    'bg-clip-padding shadow-md select-none',\n    'focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none',\n    'z-[calc(1000-var(--toast-index))]',\n    \"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n    // Stack effect while not focused\n    '[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-16px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]',\n    // Scale and translate\n    'ease-standard [transition-property:opacity,transform]',\n    'duration-400',\n    // Present when the toast is animating in.\n    'data-[starting-style]:[transform:translateY(150%)]',\n    // Expanded: Present when the toast is expanded in the viewport.\n    'data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]',\n    // Present when the toast is animating out.\n    'data-[ending-style]:duration-250',\n    'data-[ending-style]:opacity-0',\n    'data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',\n    'data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    // Limited: Present when the toast was removed due to exceeding the limit.\n    'data-[limited]:opacity-0',\n  ],\n  {\n    variants: {\n      design: {\n        filled: '',\n        tinted: '',\n      },\n      intent: {\n        success: '',\n        alert: '',\n        error: '',\n        info: '',\n        neutral: '',\n        main: '',\n        support: '',\n        accent: '',\n        surface: '',\n        surfaceInverse: '',\n      },\n    },\n    compoundVariants: [\n      // Filled variants\n      {\n        design: 'filled',\n        intent: 'success',\n        class: ['bg-success text-on-success border-success'],\n      },\n      {\n        design: 'filled',\n        intent: 'alert',\n        class: ['bg-alert text-on-alert border-alert'],\n      },\n      {\n        design: 'filled',\n        intent: 'error',\n        class: ['bg-error text-on-error border-error'],\n      },\n      {\n        design: 'filled',\n        intent: 'info',\n        class: ['bg-info text-on-info border-info'],\n      },\n      {\n        design: 'filled',\n        intent: 'neutral',\n        class: ['bg-neutral text-on-neutral border-neutral'],\n      },\n      {\n        design: 'filled',\n        intent: 'main',\n        class: ['bg-main text-on-main border-main'],\n      },\n      {\n        design: 'filled',\n        intent: 'support',\n        class: ['bg-support text-on-support border-support'],\n      },\n      {\n        design: 'filled',\n        intent: 'accent',\n        class: ['bg-accent text-on-accent border-accent'],\n      },\n      {\n        design: 'filled',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'filled',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n\n      // Tinted variants\n      {\n        design: 'tinted',\n        intent: 'success',\n        class: ['bg-success-container text-on-success-container border-success'],\n      },\n      {\n        design: 'tinted',\n        intent: 'alert',\n        class: ['bg-alert-container text-on-alert-container border-alert'],\n      },\n      {\n        design: 'tinted',\n        intent: 'error',\n        class: ['bg-error-container text-on-error-container border-error'],\n      },\n      {\n        design: 'tinted',\n        intent: 'info',\n        class: ['bg-info-container text-on-info-container border-info'],\n      },\n      {\n        design: 'tinted',\n        intent: 'neutral',\n        class: ['bg-neutral-container text-on-neutral-container border-neutral'],\n      },\n      {\n        design: 'tinted',\n        intent: 'main',\n        class: ['bg-main-container text-on-main-container border-main'],\n      },\n      {\n        design: 'tinted',\n        intent: 'support',\n        class: ['bg-support-container text-on-support-container border-support'],\n      },\n      {\n        design: 'tinted',\n        intent: 'accent',\n        class: ['bg-accent-container text-on-accent-container border-accent'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type ToastVariantProps = VariantProps<typeof toastStyles>\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Button, ButtonProps } from '@spark-ui/components/button'\nimport { Icon } from '@spark-ui/components/icon'\nimport { IconButton } from '@spark-ui/components/icon-button'\nimport { AlertFill } from '@spark-ui/icons/AlertFill'\nimport { Close } from '@spark-ui/icons/Close'\nimport { InfoFill } from '@spark-ui/icons/InfoFill'\nimport { ValidFill } from '@spark-ui/icons/ValidFill'\nimport { WarningFill } from '@spark-ui/icons/WarningFill'\nimport { cx } from 'class-variance-authority'\n\nimport { toastStyles } from './Toast.styles'\nimport type { ToastData, ToastDesign, ToastIntent, ToastObject } from './types'\n\nfunction getButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surface'\n  if (intent === 'surface') return 'surfaceInverse'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nfunction getCloseButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surfaceInverse'\n  if (intent === 'surface') return 'surface'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nconst getActionProps = (\n  action: ToastData['action'],\n  { toastDesign, toastIntent }: { toastDesign?: ToastDesign; toastIntent?: ToastIntent }\n): ButtonProps => {\n  if (!action) return {}\n\n  const { design, intent, className, onClick, ...rest } = action\n\n  return {\n    design: design ?? toastDesign,\n    intent: intent ?? getButtonIntent(toastIntent),\n    className: cx('ml-auto', className),\n    onClick,\n    ...rest,\n  }\n}\n\nconst getToastRootProps = (toast: ToastObject, design: ToastDesign, intent: ToastIntent) => ({\n  swipeDirection: ['down', 'right'] as ['down', 'right'],\n  toast,\n  className: cx(toastStyles({ design, intent })),\n  style: {\n    ['--gap' as string]: 'var(--spacing-md)',\n    ['--offset-y' as string]:\n      'calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))',\n  },\n})\n\nfunction getDefaultIcon(intent: ToastIntent): React.ReactNode {\n  switch (intent) {\n    case 'info':\n      return <InfoFill />\n    case 'success':\n      return <ValidFill />\n    case 'alert':\n      return <WarningFill />\n    case 'error':\n      return <AlertFill />\n    case 'main':\n    case 'support':\n    case 'accent':\n    case 'neutral':\n    case 'surface':\n    case 'surfaceInverse':\n    default:\n      return <InfoFill />\n  }\n}\n\nexport function Toast({ toast }: { toast: ToastObject }) {\n  const {\n    icon: ToastIcon,\n    intent = 'info',\n    design: _design, // deprecated prop, ignored\n    action,\n    isClosable,\n    closeLabel = 'Close',\n    compact = false,\n  } = toast.data ?? {}\n\n  // Always use 'tinted' design regardless of prop value\n  const design = 'tinted' as const\n\n  const ActionButton = action?.close ? BaseToast.Close : BaseToast.Action\n  const actionProps = getActionProps(action, { toastDesign: design, toastIntent: intent })\n  const rootProps = getToastRootProps(toast, design, intent)\n\n  // Use provided icon or default icon based on intent\n  const icon = ToastIcon ?? getDefaultIcon(intent)\n\n  const getCloseButton = (className?: string) => {\n    if (!isClosable) return null\n\n    return (\n      <BaseToast.Close\n        className={className}\n        render={\n          <IconButton\n            aria-label={closeLabel}\n            design={design}\n            intent={getCloseButtonIntent(intent)}\n            size=\"md\"\n          />\n        }\n      >\n        <Icon>\n          <Close />\n        </Icon>\n      </BaseToast.Close>\n    )\n  }\n\n  const renderTitle = () => {\n    // Check ToastData first for JSX, then fallback to toast.title (string)\n    const title = toast.data?.title ?? toast.title\n    const hasDescription = !!(toast.data?.description ?? toast.description)\n\n    if (typeof title !== 'string' && title !== undefined) {\n      return (\n        <BaseToast.Title\n          className={hasDescription ? 'text-headline-2' : 'text-body-1'}\n          render={<div />}\n        >\n          {title}\n        </BaseToast.Title>\n      )\n    }\n\n    return <BaseToast.Title className={hasDescription ? 'text-headline-2' : 'text-body-1'} />\n  }\n\n  const renderDescription = () => {\n    // Check ToastData first for JSX, then fallback to toast.description (string)\n    const description = toast.data?.description ?? toast.description\n\n    if (!description) return null\n\n    if (typeof description !== 'string') {\n      return (\n        <BaseToast.Description className=\"text-body-1\" render={<div />}>\n          {description}\n        </BaseToast.Description>\n      )\n    }\n\n    return <BaseToast.Description className=\"text-body-1\" />\n  }\n\n  return (\n    <BaseToast.Root key={toast.id} {...rootProps}>\n      <div className={cx('flex', compact ? 'gap-lg items-center' : 'gap-md flex-col')}>\n        <div className=\"gap-lg p-md flex grow items-center\">\n          {/* Icon */}\n          <Icon size=\"md\">{icon}</Icon>\n          {/* Title and description */}\n          <div\n            className={cx(\n              'gap-sm flex flex-col',\n              compact && 'flex-1',\n              !compact && isClosable && 'pr-3xl'\n            )}\n          >\n            {renderTitle()}\n            {renderDescription()}\n          </div>\n        </div>\n\n        <div className={cx('flex')}>\n          {/* Action button */}\n          {action && (\n            <ActionButton render={<Button {...actionProps} />}>{action.label}</ActionButton>\n          )}\n          {/* Close button - compact layout only */}\n          {compact && getCloseButton()}\n        </div>\n\n        {/* Close button - default layout only */}\n        {!compact && getCloseButton('top-md right-md absolute')}\n      </div>\n    </BaseToast.Root>\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport * as React from 'react'\n\nimport type { UseToastManagerReturnValue } from './types'\n\nexport function useToastManager(): UseToastManagerReturnValue {\n  const manager = BaseToast.useToastManager()\n  const managerRef = React.useRef(manager)\n  managerRef.current = manager\n\n  return React.useMemo(\n    () => ({\n      get toasts() {\n        return managerRef.current.toasts\n      },\n      add: options => managerRef.current.add(options),\n      update: (id, options) => managerRef.current.update(id, options),\n      close: id => managerRef.current.close(id),\n      promise: (p, options) => managerRef.current.promise(p, options),\n      closeAll: () => managerRef.current.toasts.forEach(({ id }) => managerRef.current.close(id)),\n    }),\n    []\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Slot } from '@spark-ui/components/slot'\nimport { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Toast } from './Toast'\nimport type { ToastData, ToastObject } from './types'\nimport { useToastManager } from './useToastManager'\n\nexport * from './types'\n\nfunction ToastList() {\n  const { toasts } = useToastManager()\n\n  return toasts.map(toast => <Toast key={toast.id} toast={toast} />)\n}\n\ninterface ToastProviderProps extends React.ComponentProps<typeof BaseToast.Provider> {\n  children: React.ReactNode\n}\n\n/**\n * A provider component that manages and displays temporary notification messages to users.\n */\nexport function ToastProvider({ children, limit = 3, ...props }: ToastProviderProps) {\n  return (\n    <BaseToast.Provider limit={limit} {...props}>\n      <BaseToast.Portal>\n        <BaseToast.Viewport\n          className={cx(\n            'z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end'\n          )}\n        >\n          <ToastList />\n        </BaseToast.Viewport>\n      </BaseToast.Portal>\n      {children}\n    </BaseToast.Provider>\n  )\n}\n\ninterface ToastTriggerProps\n  extends\n    Omit<React.ComponentPropsWithRef<'button'>, 'title'>,\n    Pick<ToastObject, 'priority'>,\n    Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {\n  children: React.ReactNode\n  asChild?: boolean\n  title: string | React.ReactNode\n  description?: string | React.ReactNode\n  timeout?: number\n}\n\nexport function ToastTrigger({\n  children,\n  onClick,\n  asChild = false,\n  title,\n  description,\n  timeout = 5000,\n  design = 'filled',\n  intent = 'neutral',\n  isClosable = true,\n  icon,\n  action,\n  compact,\n  priority = 'low',\n}: ToastTriggerProps) {\n  const toastManager = useToastManager()\n\n  const Component = asChild ? Slot : 'button'\n\n  function createToast(e: React.MouseEvent<HTMLButtonElement>) {\n    onClick?.(e)\n    toastManager.add({\n      title,\n      description,\n      timeout,\n      priority,\n      data: {\n        design,\n        intent,\n        isClosable,\n        ...(icon && { icon }),\n        action,\n        ...(compact !== undefined && { compact }),\n      },\n    })\n  }\n\n  return (\n    <Component {...(!asChild && { type: 'button' })} onClick={createToast}>\n      {children}\n    </Component>\n  )\n}\n\nexport type ToastManager = ReturnType<typeof BaseToast.createToastManager>\n\nexport const createToastManager: () => ToastManager = BaseToast.createToastManager\n\nexport { useToastManager }\n"],"mappings":"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"}

package/dist/toggle-group/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js");let t=require("class-variance-authority"),n=require("react/jsx-runtime"),r=require("@base-ui/react/toggle-group"),i=require("@base-ui/react/toggle");function a(t){return t?({...t})=>(0,n.jsx)(e.Slot,{...t}):void 0}var o=({asChild:e=!1,multiple:i=!1,children:o,className:s,ref:c,...l})=>{let u=a(e);return(0,n.jsx)(r.ToggleGroup,{...l,ref:c,multiple:i,className:(0,t.cx)(`gap-none inline-flex`,s),"data-spark-component":`toggle-group`,...e&&{render:u},children:o})};o.displayName=`ToggleGroup`;var s=({asChild:e=!1,value:r,disabled:o=!1,children:s,className:c,ref:l,...u})=>{let d=a(e);return(0,n.jsx)(i.Toggle,{"data-spark-component":`toggle-group-toggle`,ref:l,className:(0,t.cx)(`focus-visible:u-outline-inset`,`disabled:cursor-not-allowed disabled:opacity-dim-3`,c),...e&&{render:d},disabled:o,value:r,...u,children:s})};s.displayName=`ToggleGroup.Toggle`;var c=Object.assign(o,{Toggle:s});c.displayName=`ToggleGroup`,s.displayName=`ToggleGroup.Toggle`,exports.ToggleGroup=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@spark-ui/internal-utils"),t=require("class-variance-authority"),n=require("react/jsx-runtime"),r=require("@base-ui/react/toggle-group"),i=require("@base-ui/react/toggle");var a=({asChild:i=!1,multiple:a=!1,children:o,className:s,ref:c,...l})=>{let{renderProp:u,innerChildren:d}=(0,e.createRenderSlot)(i,o);return(0,n.jsx)(r.ToggleGroup,{...l,ref:c,multiple:a,className:(0,t.cx)(`gap-none inline-flex`,s),"data-spark-component":`toggle-group`,...i&&{render:u},children:d})};a.displayName=`ToggleGroup`;var o=({asChild:r=!1,value:a,disabled:o=!1,children:s,className:c,ref:l,...u})=>{let{renderProp:d,innerChildren:f}=(0,e.createRenderSlot)(r,s);return(0,n.jsx)(i.Toggle,{"data-spark-component":`toggle-group-toggle`,ref:l,className:(0,t.cx)(`focus-visible:u-outline-inset`,`disabled:cursor-not-allowed disabled:opacity-dim-3`,c),...r&&{render:d},disabled:o,value:a,...u,children:f})};o.displayName=`ToggleGroup.Toggle`;var s=Object.assign(a,{Toggle:o});s.displayName=`ToggleGroup`,o.displayName=`ToggleGroup.Toggle`,exports.ToggleGroup=s;
 //# sourceMappingURL=index.js.map

package/dist/toggle-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/toggle-group/useRenderSlot.tsx","../../src/toggle-group/ToggleGroup.tsx","../../src/toggle-group/ToggleGroupToggle.tsx","../../src/toggle-group/index.ts"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean) {\n  return asChild ? ({ ...props }: object) => <Slot {...props} /> : undefined\n}\n","import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface ToggleGroupProps extends PropsWithChildren, ComponentPropsWithoutRef<'div'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Whether multiple toggles can be pressed at the same time.\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * The default value(s) of the toggle group when it is initially rendered.\n   * Use when you do not need to control its value(s).\n   * Must be an array even for single selection mode.\n   */\n  defaultValue?: readonly any[]\n  /**\n   * The controlled value(s) of the toggle group.\n   * Must be used in conjunction with `onValueChange`.\n   * Must be an array even for single selection mode.\n   */\n  value?: readonly any[]\n  /**\n   * Event handler called when the value changes.\n   * Always receives an array, even for single selection mode.\n   */\n  onValueChange?: (value: readonly any[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const ToggleGroup = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/toggle-group\n   */\n  asChild = false,\n  multiple = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: ToggleGroupProps) => {\n  const renderSlot = useRenderSlot(asChild)\n\n  return (\n    <BaseToggleGroup\n      {...rest}\n      ref={ref}\n      multiple={multiple}\n      className={cx('gap-none inline-flex', className)}\n      data-spark-component=\"toggle-group\"\n      {...(asChild && { render: renderSlot })}\n    >\n      {children}\n    </BaseToggleGroup>\n  )\n}\n\nToggleGroup.displayName = 'ToggleGroup'\n","import { Toggle } from '@base-ui/react/toggle'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface ToggleGroupToggleProps extends ComponentPropsWithoutRef<'button'> {\n  /**\n   * A unique value that identifies the toggle within the group.\n   */\n  value: any\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, prevents the user from interacting with the toggle.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A toggle button within a toggle group. Renders a <button> element. */\nexport const ToggleGroupToggle = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/toggle\n   */\n  asChild = false,\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: ToggleGroupToggleProps) => {\n  const renderSlot = useRenderSlot(asChild)\n\n  return (\n    <Toggle\n      data-spark-component=\"toggle-group-toggle\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline-inset',\n        'disabled:cursor-not-allowed disabled:opacity-dim-3',\n        className\n      )}\n      {...(asChild && { render: renderSlot })}\n      disabled={disabled}\n      value={value}\n      {...rest}\n    >\n      {children}\n    </Toggle>\n  )\n}\n\nToggleGroupToggle.displayName = 'ToggleGroup.Toggle'\n","import { ToggleGroup as Root } from './ToggleGroup'\nimport { ToggleGroupToggle as Toggle } from './ToggleGroupToggle'\n\n/**\n * A set of two-state buttons that can be toggled on or off within a group context.\n */\nexport const ToggleGroup: typeof Root & {\n  Toggle: typeof Toggle\n} = Object.assign(Root, {\n  Toggle,\n})\n\nToggleGroup.displayName = 'ToggleGroup'\nToggle.displayName = 'ToggleGroup.Toggle'\n\nexport { type ToggleGroupProps } from './ToggleGroup'\nexport { type ToggleGroupToggleProps } from './ToggleGroupToggle'\n"],"mappings":"4PAEA,SAAgB,EAAc,EAAkB,CAC9C,OAAO,GAAW,CAAE,GAAG,MAAoB,EAAA,EAAA,IAAA,CAAC,EAAA,KAAD,CAAM,GAAI,CAAQ,CAAA,EAAI,IAAA,EACnE,CCiCA,IAAa,GAAe,CAK1B,UAAU,GACV,WAAW,GACX,WACA,YACA,MACA,GAAG,KACmB,CACtB,IAAM,EAAa,EAAc,CAAO,EAExC,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,YAAD,CACE,GAAI,EACC,MACK,WACV,WAAA,EAAA,EAAA,GAAA,CAAc,uBAAwB,CAAS,EAC/C,uBAAqB,eACrB,GAAK,GAAW,CAAE,OAAQ,CAAW,EAEpC,UACc,CAAA,CAErB,EAEA,EAAY,YAAc,cCxC1B,IAAa,GAAqB,CAKhC,UAAU,GACV,QACA,WAAW,GACX,WACA,YACA,MACA,GAAG,KACyB,CAC5B,IAAM,EAAa,EAAc,CAAO,EAExC,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CACE,uBAAqB,sBAChB,MACL,WAAA,EAAA,EAAA,GAAA,CACE,gCACA,qDACA,CACF,EACA,GAAK,GAAW,CAAE,OAAQ,CAAW,EAC3B,WACH,QACP,GAAI,EAEH,UACK,CAAA,CAEZ,EAEA,EAAkB,YAAc,qBCrDhC,IAAa,EAET,OAAO,OAAO,EAAM,CACtB,OAAA,CACF,CAAC,EAED,EAAY,YAAc,cAC1B,EAAO,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/toggle-group/ToggleGroup.tsx","../../src/toggle-group/ToggleGroupToggle.tsx","../../src/toggle-group/index.ts"],"sourcesContent":["import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'\nimport { createRenderSlot } from '@spark-ui/internal-utils'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nexport interface ToggleGroupProps extends PropsWithChildren, ComponentPropsWithoutRef<'div'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Whether multiple toggles can be pressed at the same time.\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * The default value(s) of the toggle group when it is initially rendered.\n   * Use when you do not need to control its value(s).\n   * Must be an array even for single selection mode.\n   */\n  defaultValue?: readonly any[]\n  /**\n   * The controlled value(s) of the toggle group.\n   * Must be used in conjunction with `onValueChange`.\n   * Must be an array even for single selection mode.\n   */\n  value?: readonly any[]\n  /**\n   * Event handler called when the value changes.\n   * Always receives an array, even for single selection mode.\n   */\n  onValueChange?: (value: readonly any[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const ToggleGroup = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/toggle-group\n   */\n  asChild = false,\n  multiple = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: ToggleGroupProps) => {\n  const { renderProp, innerChildren } = createRenderSlot(asChild, children)\n\n  return (\n    <BaseToggleGroup\n      {...rest}\n      ref={ref}\n      multiple={multiple}\n      className={cx('gap-none inline-flex', className)}\n      data-spark-component=\"toggle-group\"\n      {...(asChild && { render: renderProp })}\n    >\n      {innerChildren}\n    </BaseToggleGroup>\n  )\n}\n\nToggleGroup.displayName = 'ToggleGroup'\n","import { Toggle } from '@base-ui/react/toggle'\nimport { createRenderSlot } from '@spark-ui/internal-utils'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ToggleGroupToggleProps extends ComponentPropsWithoutRef<'button'> {\n  /**\n   * A unique value that identifies the toggle within the group.\n   */\n  value: any\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, prevents the user from interacting with the toggle.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A toggle button within a toggle group. Renders a <button> element. */\nexport const ToggleGroupToggle = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/toggle\n   */\n  asChild = false,\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: ToggleGroupToggleProps) => {\n  const { renderProp, innerChildren } = createRenderSlot(asChild, children)\n\n  return (\n    <Toggle\n      data-spark-component=\"toggle-group-toggle\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline-inset',\n        'disabled:cursor-not-allowed disabled:opacity-dim-3',\n        className\n      )}\n      {...(asChild && { render: renderProp })}\n      disabled={disabled}\n      value={value}\n      {...rest}\n    >\n      {innerChildren}\n    </Toggle>\n  )\n}\n\nToggleGroupToggle.displayName = 'ToggleGroup.Toggle'\n","import { ToggleGroup as Root } from './ToggleGroup'\nimport { ToggleGroupToggle as Toggle } from './ToggleGroupToggle'\n\n/**\n * A set of two-state buttons that can be toggled on or off within a group context.\n */\nexport const ToggleGroup: typeof Root & {\n  Toggle: typeof Toggle\n} = Object.assign(Root, {\n  Toggle,\n})\n\nToggleGroup.displayName = 'ToggleGroup'\nToggle.displayName = 'ToggleGroup.Toggle'\n\nexport { type ToggleGroupProps } from './ToggleGroup'\nexport { type ToggleGroupToggleProps } from './ToggleGroupToggle'\n"],"mappings":"8PAoCA,IAAa,GAAe,CAK1B,UAAU,GACV,WAAW,GACX,WACA,YACA,MACA,GAAG,KACmB,CACtB,GAAM,CAAE,aAAY,kBAAA,EAAA,EAAA,iBAAA,CAAmC,EAAS,CAAQ,EAExE,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,YAAD,CACE,GAAI,EACC,MACK,WACV,WAAA,EAAA,EAAA,GAAA,CAAc,uBAAwB,CAAS,EAC/C,uBAAqB,eACrB,GAAK,GAAW,CAAE,OAAQ,CAAW,WAEpC,CACc,CAAA,CAErB,EAEA,EAAY,YAAc,cCxC1B,IAAa,GAAqB,CAKhC,UAAU,GACV,QACA,WAAW,GACX,WACA,YACA,MACA,GAAG,KACyB,CAC5B,GAAM,CAAE,aAAY,kBAAA,EAAA,EAAA,iBAAA,CAAmC,EAAS,CAAQ,EAExE,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CACE,uBAAqB,sBAChB,MACL,WAAA,EAAA,EAAA,GAAA,CACE,gCACA,qDACA,CACF,EACA,GAAK,GAAW,CAAE,OAAQ,CAAW,EAC3B,WACH,QACP,GAAI,WAEH,CACK,CAAA,CAEZ,EAEA,EAAkB,YAAc,qBCpDhC,IAAa,EAET,OAAO,OAAO,EAAM,CACtB,OAAA,CACF,CAAC,EAED,EAAY,YAAc,cAC1B,EAAO,YAAc"}

package/dist/toggle-group/index.mjs

@@ -1,48 +1,43 @@
-import { Slot as e } from "../slot/index.mjs";
+import { createRenderSlot as e } from "@spark-ui/internal-utils";
 import { cx as t } from "class-variance-authority";
 import { jsx as n } from "react/jsx-runtime";
 import { ToggleGroup as r } from "@base-ui/react/toggle-group";
 import { Toggle as i } from "@base-ui/react/toggle";
-//#region src/toggle-group/useRenderSlot.tsx
-function a(t) {
-	return t ? ({ ...t }) => /* @__PURE__ */ n(e, { ...t }) : void 0;
-}
-//#endregion
 //#region src/toggle-group/ToggleGroup.tsx
-var o = ({ asChild: e = !1, multiple: i = !1, children: o, className: s, ref: c, ...l }) => {
-	let u = a(e);
+var a = ({ asChild: i = !1, multiple: a = !1, children: o, className: s, ref: c, ...l }) => {
+	let { renderProp: u, innerChildren: d } = e(i, o);
 	return /* @__PURE__ */ n(r, {
 		...l,
 		ref: c,
-		multiple: i,
+		multiple: a,
 		className: t("gap-none inline-flex", s),
 		"data-spark-component": "toggle-group",
-		...e && { render: u },
-		children: o
+		...i && { render: u },
+		children: d
 	});
 };
-o.displayName = "ToggleGroup";
+a.displayName = "ToggleGroup";
 //#endregion
 //#region src/toggle-group/ToggleGroupToggle.tsx
-var s = ({ asChild: e = !1, value: r, disabled: o = !1, children: s, className: c, ref: l, ...u }) => {
-	let d = a(e);
+var o = ({ asChild: r = !1, value: a, disabled: o = !1, children: s, className: c, ref: l, ...u }) => {
+	let { renderProp: d, innerChildren: f } = e(r, s);
 	return /* @__PURE__ */ n(i, {
 		"data-spark-component": "toggle-group-toggle",
 		ref: l,
 		className: t("focus-visible:u-outline-inset", "disabled:cursor-not-allowed disabled:opacity-dim-3", c),
-		...e && { render: d },
+		...r && { render: d },
 		disabled: o,
-		value: r,
+		value: a,
 		...u,
-		children: s
+		children: f
 	});
 };
-s.displayName = "ToggleGroup.Toggle";
+o.displayName = "ToggleGroup.Toggle";
 //#endregion
 //#region src/toggle-group/index.ts
-var c = Object.assign(o, { Toggle: s });
-c.displayName = "ToggleGroup", s.displayName = "ToggleGroup.Toggle";
+var s = Object.assign(a, { Toggle: o });
+s.displayName = "ToggleGroup", o.displayName = "ToggleGroup.Toggle";
 //#endregion
-export { c as ToggleGroup };
+export { s as ToggleGroup };
 
 //# sourceMappingURL=index.mjs.map

package/dist/toggle-group/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toggle-group/useRenderSlot.tsx","../../src/toggle-group/ToggleGroup.tsx","../../src/toggle-group/ToggleGroupToggle.tsx","../../src/toggle-group/index.ts"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean) {\n  return asChild ? ({ ...props }: object) => <Slot {...props} /> : undefined\n}\n","import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface ToggleGroupProps extends PropsWithChildren, ComponentPropsWithoutRef<'div'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Whether multiple toggles can be pressed at the same time.\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * The default value(s) of the toggle group when it is initially rendered.\n   * Use when you do not need to control its value(s).\n   * Must be an array even for single selection mode.\n   */\n  defaultValue?: readonly any[]\n  /**\n   * The controlled value(s) of the toggle group.\n   * Must be used in conjunction with `onValueChange`.\n   * Must be an array even for single selection mode.\n   */\n  value?: readonly any[]\n  /**\n   * Event handler called when the value changes.\n   * Always receives an array, even for single selection mode.\n   */\n  onValueChange?: (value: readonly any[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const ToggleGroup = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/toggle-group\n   */\n  asChild = false,\n  multiple = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: ToggleGroupProps) => {\n  const renderSlot = useRenderSlot(asChild)\n\n  return (\n    <BaseToggleGroup\n      {...rest}\n      ref={ref}\n      multiple={multiple}\n      className={cx('gap-none inline-flex', className)}\n      data-spark-component=\"toggle-group\"\n      {...(asChild && { render: renderSlot })}\n    >\n      {children}\n    </BaseToggleGroup>\n  )\n}\n\nToggleGroup.displayName = 'ToggleGroup'\n","import { Toggle } from '@base-ui/react/toggle'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface ToggleGroupToggleProps extends ComponentPropsWithoutRef<'button'> {\n  /**\n   * A unique value that identifies the toggle within the group.\n   */\n  value: any\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, prevents the user from interacting with the toggle.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A toggle button within a toggle group. Renders a <button> element. */\nexport const ToggleGroupToggle = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/toggle\n   */\n  asChild = false,\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: ToggleGroupToggleProps) => {\n  const renderSlot = useRenderSlot(asChild)\n\n  return (\n    <Toggle\n      data-spark-component=\"toggle-group-toggle\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline-inset',\n        'disabled:cursor-not-allowed disabled:opacity-dim-3',\n        className\n      )}\n      {...(asChild && { render: renderSlot })}\n      disabled={disabled}\n      value={value}\n      {...rest}\n    >\n      {children}\n    </Toggle>\n  )\n}\n\nToggleGroupToggle.displayName = 'ToggleGroup.Toggle'\n","import { ToggleGroup as Root } from './ToggleGroup'\nimport { ToggleGroupToggle as Toggle } from './ToggleGroupToggle'\n\n/**\n * A set of two-state buttons that can be toggled on or off within a group context.\n */\nexport const ToggleGroup: typeof Root & {\n  Toggle: typeof Toggle\n} = Object.assign(Root, {\n  Toggle,\n})\n\nToggleGroup.displayName = 'ToggleGroup'\nToggle.displayName = 'ToggleGroup.Toggle'\n\nexport { type ToggleGroupProps } from './ToggleGroup'\nexport { type ToggleGroupToggleProps } from './ToggleGroupToggle'\n"],"mappings":";;;;;;AAEA,SAAgB,EAAc,GAAkB;CAC9C,OAAO,KAAW,EAAE,GAAG,QAAoB,kBAAC,GAAD,EAAM,GAAI,EAAQ,CAAA,IAAI,KAAA;AACnE;;;ACiCA,IAAa,KAAe,EAK1B,aAAU,IACV,cAAW,IACX,aACA,cACA,QACA,GAAG,QACmB;CACtB,IAAM,IAAa,EAAc,CAAO;CAExC,OACE,kBAAC,GAAD;EACE,GAAI;EACC;EACK;EACV,WAAW,EAAG,wBAAwB,CAAS;EAC/C,wBAAqB;EACrB,GAAK,KAAW,EAAE,QAAQ,EAAW;EAEpC;CACc,CAAA;AAErB;AAEA,EAAY,cAAc;;;ACxC1B,IAAa,KAAqB,EAKhC,aAAU,IACV,UACA,cAAW,IACX,aACA,cACA,QACA,GAAG,QACyB;CAC5B,IAAM,IAAa,EAAc,CAAO;CAExC,OACE,kBAAC,GAAD;EACE,wBAAqB;EAChB;EACL,WAAW,EACT,iCACA,sDACA,CACF;EACA,GAAK,KAAW,EAAE,QAAQ,EAAW;EAC3B;EACH;EACP,GAAI;EAEH;CACK,CAAA;AAEZ;AAEA,EAAkB,cAAc;;;ACrDhC,IAAa,IAET,OAAO,OAAO,GAAM,EACtB,QAAA,EACF,CAAC;AAED,EAAY,cAAc,eAC1B,EAAO,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toggle-group/ToggleGroup.tsx","../../src/toggle-group/ToggleGroupToggle.tsx","../../src/toggle-group/index.ts"],"sourcesContent":["import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'\nimport { createRenderSlot } from '@spark-ui/internal-utils'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nexport interface ToggleGroupProps extends PropsWithChildren, ComponentPropsWithoutRef<'div'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Whether multiple toggles can be pressed at the same time.\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * The default value(s) of the toggle group when it is initially rendered.\n   * Use when you do not need to control its value(s).\n   * Must be an array even for single selection mode.\n   */\n  defaultValue?: readonly any[]\n  /**\n   * The controlled value(s) of the toggle group.\n   * Must be used in conjunction with `onValueChange`.\n   * Must be an array even for single selection mode.\n   */\n  value?: readonly any[]\n  /**\n   * Event handler called when the value changes.\n   * Always receives an array, even for single selection mode.\n   */\n  onValueChange?: (value: readonly any[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const ToggleGroup = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/toggle-group\n   */\n  asChild = false,\n  multiple = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: ToggleGroupProps) => {\n  const { renderProp, innerChildren } = createRenderSlot(asChild, children)\n\n  return (\n    <BaseToggleGroup\n      {...rest}\n      ref={ref}\n      multiple={multiple}\n      className={cx('gap-none inline-flex', className)}\n      data-spark-component=\"toggle-group\"\n      {...(asChild && { render: renderProp })}\n    >\n      {innerChildren}\n    </BaseToggleGroup>\n  )\n}\n\nToggleGroup.displayName = 'ToggleGroup'\n","import { Toggle } from '@base-ui/react/toggle'\nimport { createRenderSlot } from '@spark-ui/internal-utils'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ToggleGroupToggleProps extends ComponentPropsWithoutRef<'button'> {\n  /**\n   * A unique value that identifies the toggle within the group.\n   */\n  value: any\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, prevents the user from interacting with the toggle.\n   * @default false\n   */\n  disabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A toggle button within a toggle group. Renders a <button> element. */\nexport const ToggleGroupToggle = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/toggle\n   */\n  asChild = false,\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: ToggleGroupToggleProps) => {\n  const { renderProp, innerChildren } = createRenderSlot(asChild, children)\n\n  return (\n    <Toggle\n      data-spark-component=\"toggle-group-toggle\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline-inset',\n        'disabled:cursor-not-allowed disabled:opacity-dim-3',\n        className\n      )}\n      {...(asChild && { render: renderProp })}\n      disabled={disabled}\n      value={value}\n      {...rest}\n    >\n      {innerChildren}\n    </Toggle>\n  )\n}\n\nToggleGroupToggle.displayName = 'ToggleGroup.Toggle'\n","import { ToggleGroup as Root } from './ToggleGroup'\nimport { ToggleGroupToggle as Toggle } from './ToggleGroupToggle'\n\n/**\n * A set of two-state buttons that can be toggled on or off within a group context.\n */\nexport const ToggleGroup: typeof Root & {\n  Toggle: typeof Toggle\n} = Object.assign(Root, {\n  Toggle,\n})\n\nToggleGroup.displayName = 'ToggleGroup'\nToggle.displayName = 'ToggleGroup.Toggle'\n\nexport { type ToggleGroupProps } from './ToggleGroup'\nexport { type ToggleGroupToggleProps } from './ToggleGroupToggle'\n"],"mappings":";;;;;;AAoCA,IAAa,KAAe,EAK1B,aAAU,IACV,cAAW,IACX,aACA,cACA,QACA,GAAG,QACmB;CACtB,IAAM,EAAE,eAAY,qBAAkB,EAAiB,GAAS,CAAQ;CAExE,OACE,kBAAC,GAAD;EACE,GAAI;EACC;EACK;EACV,WAAW,EAAG,wBAAwB,CAAS;EAC/C,wBAAqB;EACrB,GAAK,KAAW,EAAE,QAAQ,EAAW;YAEpC;CACc,CAAA;AAErB;AAEA,EAAY,cAAc;;;ACxC1B,IAAa,KAAqB,EAKhC,aAAU,IACV,UACA,cAAW,IACX,aACA,cACA,QACA,GAAG,QACyB;CAC5B,IAAM,EAAE,eAAY,qBAAkB,EAAiB,GAAS,CAAQ;CAExE,OACE,kBAAC,GAAD;EACE,wBAAqB;EAChB;EACL,WAAW,EACT,iCACA,sDACA,CACF;EACA,GAAK,KAAW,EAAE,QAAQ,EAAW;EAC3B;EACH;EACP,GAAI;YAEH;CACK,CAAA;AAEZ;AAEA,EAAkB,cAAc;;;ACpDhC,IAAa,IAET,OAAO,OAAO,GAAM,EACtB,QAAA,EACF,CAAC;AAED,EAAY,cAAc,eAC1B,EAAO,cAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "18.1.1",
+  "version": "18.1.3",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -53,9 +53,9 @@
     "@react-types/checkbox": "^3.11.0",
     "@react-types/grid": "^3.4.0",
     "@react-types/shared": "^3.36.0",
-    "@spark-ui/hooks": "18.1.1",
-    "@spark-ui/icons": "18.1.1",
-    "@spark-ui/internal-utils": "18.1.1",
+    "@spark-ui/hooks": "18.1.3",
+    "@spark-ui/icons": "18.1.3",
+    "@spark-ui/internal-utils": "18.1.3",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",
@@ -67,7 +67,7 @@
     "react-snap-carousel": "0.5.1"
   },
   "peerDependencies": {
-    "@spark-ui/theme-utils": "18.1.1",
+    "@spark-ui/theme-utils": "18.1.3",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"

package/dist/accordion/useRenderSlot.d.ts

@@ -1,3 +0,0 @@
-export declare function useRenderSlot(asChild: boolean, defaultTag: string): (({ ...props }: {
-    [x: string]: any;
-}) => import("react").JSX.Element) | undefined;

package/dist/alert-dialog/useRenderSlot.d.ts

@@ -1,3 +0,0 @@
-export declare function useRenderSlot(asChild: boolean, defaultTag: string): (({ ...props }: {
-    [x: string]: any;
-}) => import("react").JSX.Element) | undefined;

package/dist/collapsible/useRenderSlot.d.ts

@@ -1,3 +0,0 @@
-export declare function useRenderSlot(asChild: boolean, defaultTag: string): (({ ...props }: {
-    [x: string]: any;
-}) => import("react").JSX.Element) | undefined;

package/dist/drawer/useRenderSlot.d.ts

@@ -1,3 +0,0 @@
-export declare function useRenderSlot(asChild: boolean, defaultTag: string): (({ ...props }: {
-    [x: string]: any;
-}) => import("react").JSX.Element) | undefined;

package/dist/icon-DY4l9nsc.js

@@ -1,2 +0,0 @@
-const e=require("./visually-hidden/index.js");let t=require("class-variance-authority"),n=require("react"),r=require("react/jsx-runtime"),i=require("@spark-ui/internal-utils");var a=(0,t.cva)([`fill-current shrink-0`],{variants:{intent:(0,i.makeVariants)({current:[`text-current`],main:[`text-main`],support:[`text-support`],accent:[`text-accent`],success:[`text-success`],alert:[`text-alert`],error:[`text-error`],info:[`text-info`],neutral:[`text-neutral`]}),size:(0,i.makeVariants)({current:[`u-current-font-size`],sm:[`w-sz-16`,`h-sz-16`],md:[`w-sz-24`,`h-sz-24`],lg:[`w-sz-32`,`h-sz-32`],xl:[`w-sz-40`,`h-sz-40`]})}}),o=({label:t,className:i,size:o=`current`,intent:s=`current`,children:c,...l})=>(0,r.jsxs)(r.Fragment,{children:[(0,n.cloneElement)(n.Children.only(c),{className:a({className:i,size:o,intent:s}),"data-spark-component":`icon`,"aria-hidden":`true`,focusable:`false`,...l}),t&&(0,r.jsx)(e.VisuallyHidden,{children:t})]});o.displayName=`Icon`,Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});
-//# sourceMappingURL=icon-DY4l9nsc.js.map

package/dist/icon-button-C1ThqdK1.mjs

@@ -1,29 +0,0 @@
-import { t as e } from "./button-DwLTXeJX.mjs";
-import { cva as t } from "class-variance-authority";
-import { jsx as n } from "react/jsx-runtime";
-import { makeVariants as r } from "@spark-ui/internal-utils";
-//#region src/icon-button/IconButton.styles.tsx
-var i = t(["pl-0 pr-0"], { variants: { size: r({
-	sm: ["text-body-1"],
-	md: ["text-body-1"],
-	lg: ["text-display-3"]
-}) } }), a = ({ appearance: t, design: r = "filled", disabled: a = !1, intent: o = "main", shape: s = "pill", size: c = "md", className: l, ref: u, ...d }) => /* @__PURE__ */ n(e, {
-	"data-spark-component": "icon-button",
-	ref: u,
-	className: i({
-		size: c,
-		className: l
-	}),
-	appearance: t,
-	design: r,
-	disabled: a,
-	intent: o,
-	shape: s,
-	size: c,
-	...d
-});
-a.displayName = "IconButton";
-//#endregion
-export { a as t };
-
-//# sourceMappingURL=icon-button-C1ThqdK1.mjs.map

package/dist/icon-button-DRFf308H.js

@@ -1,2 +0,0 @@
-const e=require("./button-D0s-21qo.js");let t=require("class-variance-authority"),n=require("react/jsx-runtime"),r=require("@spark-ui/internal-utils");var i=(0,t.cva)([`pl-0 pr-0`],{variants:{size:(0,r.makeVariants)({sm:[`text-body-1`],md:[`text-body-1`],lg:[`text-display-3`]})}}),a=({appearance:t,design:r=`filled`,disabled:a=!1,intent:o=`main`,shape:s=`pill`,size:c=`md`,className:l,ref:u,...d})=>(0,n.jsx)(e.t,{"data-spark-component":`icon-button`,ref:u,className:i({size:c,className:l}),appearance:t,design:r,disabled:a,intent:o,shape:s,size:c,...d});a.displayName=`IconButton`,Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});
-//# sourceMappingURL=icon-button-DRFf308H.js.map

package/dist/menu/useRenderSlot.d.ts

@@ -1 +0,0 @@
-export declare function useRenderSlot(asChild: boolean): (({ ...props }: object) => import("react").JSX.Element) | undefined;

package/dist/tabs/useRenderSlot.d.ts

@@ -1 +0,0 @@
-export declare function useRenderSlot(asChild: boolean): (({ ...props }: object) => import("react").JSX.Element) | undefined;

package/dist/toast/useRenderSlot.d.ts

@@ -1,3 +0,0 @@
-export declare function useRenderSlot(asChild: boolean, defaultTag: string): (({ ...props }: {
-    [x: string]: any;
-}) => import("react").JSX.Element) | undefined;

package/dist/toggle-group/useRenderSlot.d.ts

@@ -1 +0,0 @@
-export declare function useRenderSlot(asChild: boolean): (({ ...props }: object) => import("react").JSX.Element) | undefined;

package/dist/useRenderSlot-5CPC9Lkj.mjs

@@ -1,11 +0,0 @@
-import { Slot as e } from "./slot/index.mjs";
-import { jsx as t } from "react/jsx-runtime";
-//#region src/drawer/useRenderSlot.tsx
-function n(n, r) {
-	let i = n ? e : r;
-	return n ? ({ ...e }) => /* @__PURE__ */ t(i, { ...e }) : void 0;
-}
-//#endregion
-export { n as t };
-
-//# sourceMappingURL=useRenderSlot-5CPC9Lkj.mjs.map

package/dist/useRenderSlot-5CPC9Lkj.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRenderSlot-5CPC9Lkj.mjs","names":[],"sources":["../src/drawer/useRenderSlot.tsx"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n"],"mappings":";;;AAEA,SAAgB,EAAc,GAAkB,GAAoB;CAClE,IAAM,IAAY,IAAU,IAAO;CAEnC,OAAO,KAAW,EAAE,GAAG,QAAY,kBAAC,GAAD,EAAW,GAAI,EAAQ,CAAA,IAAI,KAAA;AAChE"}

package/dist/useRenderSlot-DHV0CegV.js

@@ -1,2 +0,0 @@
-const e=require("./slot/index.js");let t=require("react/jsx-runtime");function n(n,r){let i=n?e.Slot:r;return n?({...e})=>(0,t.jsx)(i,{...e}):void 0}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return n}});
-//# sourceMappingURL=useRenderSlot-DHV0CegV.js.map

package/dist/useRenderSlot-DHV0CegV.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRenderSlot-DHV0CegV.js","names":[],"sources":["../src/drawer/useRenderSlot.tsx"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n"],"mappings":"sEAEA,SAAgB,EAAc,EAAkB,EAAoB,CAClE,IAAM,EAAY,EAAU,EAAA,KAAO,EAEnC,OAAO,GAAW,CAAE,GAAG,MAAY,EAAA,EAAA,IAAA,CAAC,EAAD,CAAW,GAAI,CAAQ,CAAA,EAAI,IAAA,EAChE"}