@spark-ui/components 17.4.2 → 17.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/alert-dialog/index.js.map +1 -1
- package/dist/alert-dialog/index.mjs.map +1 -1
- package/dist/avatar/index.js +1 -1
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs +8 -2
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs.map +1 -1
- package/dist/breadcrumb/index.js.map +1 -1
- package/dist/breadcrumb/index.mjs.map +1 -1
- package/dist/button-B-sMnDc_.js.map +1 -1
- package/dist/button-C6nlNPdv.mjs.map +1 -1
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/checkbox-DjwbAH09.js.map +1 -1
- package/dist/checkbox-xsURzANi.mjs.map +1 -1
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs.map +1 -1
- package/dist/circular-meter/index.js.map +1 -1
- package/dist/circular-meter/index.mjs.map +1 -1
- package/dist/collapsible/index.js.map +1 -1
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/dialog/index.js.map +1 -1
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/divider/index.js.map +1 -1
- package/dist/divider/index.mjs.map +1 -1
- package/dist/drawer/index.js.map +1 -1
- package/dist/drawer/index.mjs.map +1 -1
- package/dist/dropdown/index.js.map +1 -1
- package/dist/dropdown/index.mjs.map +1 -1
- package/dist/file-upload/index.js.map +1 -1
- package/dist/file-upload/index.mjs.map +1 -1
- package/dist/form-field-81wzFxM0.js.map +1 -1
- package/dist/form-field-GTAuK_nO.mjs.map +1 -1
- package/dist/icon-CRPcdgYp.js.map +1 -1
- package/dist/icon-D05Uqh8_.mjs.map +1 -1
- package/dist/icon-button-CYz_Fitz.js.map +1 -1
- package/dist/icon-button-DpucUC_L.mjs.map +1 -1
- package/dist/input-BUSYZ_VO.js.map +1 -1
- package/dist/input-CiWFuTs_.mjs.map +1 -1
- package/dist/input-otp/index.js.map +1 -1
- package/dist/input-otp/index.mjs.map +1 -1
- package/dist/kbd/index.js.map +1 -1
- package/dist/kbd/index.mjs.map +1 -1
- package/dist/label-BCSEss4U.js.map +1 -1
- package/dist/label-DDBRKLUX.mjs.map +1 -1
- package/dist/link-box/index.js.map +1 -1
- package/dist/link-box/index.mjs.map +1 -1
- package/dist/meter/index.js.map +1 -1
- package/dist/meter/index.mjs.map +1 -1
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/popover-CrKp_TKk.js.map +1 -1
- package/dist/popover-DsBY8eYl.mjs.map +1 -1
- package/dist/portal/index.js.map +1 -1
- package/dist/portal/index.mjs.map +1 -1
- package/dist/progress-BjqJSRnK.js.map +1 -1
- package/dist/progress-C3w4PmxY.mjs.map +1 -1
- package/dist/progress-tracker/index.js.map +1 -1
- package/dist/progress-tracker/index.mjs.map +1 -1
- package/dist/radio-group/index.js.map +1 -1
- package/dist/radio-group/index.mjs.map +1 -1
- package/dist/rating/index.js.map +1 -1
- package/dist/rating/index.mjs.map +1 -1
- package/dist/rating-display/index.js.map +1 -1
- package/dist/rating-display/index.mjs.map +1 -1
- package/dist/scrolling-list/index.js.map +1 -1
- package/dist/scrolling-list/index.mjs.map +1 -1
- package/dist/segmented-control/index.js.map +1 -1
- package/dist/segmented-control/index.mjs.map +1 -1
- package/dist/segmented-gauge/index.js.map +1 -1
- package/dist/segmented-gauge/index.mjs.map +1 -1
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs.map +1 -1
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs.map +1 -1
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs.map +1 -1
- package/dist/slot/index.js.map +1 -1
- package/dist/slot/index.mjs.map +1 -1
- package/dist/spinner-DFUoYvmm.js.map +1 -1
- package/dist/spinner-DULLiM6a.mjs.map +1 -1
- package/dist/src/accordion/index.d.mts +3 -0
- package/dist/src/accordion/index.d.ts +3 -0
- package/dist/src/alert-dialog/index.d.mts +3 -0
- package/dist/src/alert-dialog/index.d.ts +3 -0
- package/dist/src/avatar/index.d.mts +7 -5
- package/dist/src/avatar/index.d.ts +7 -5
- package/dist/src/badge/Badge.d.ts +3 -0
- package/dist/src/breadcrumb/index.d.mts +3 -0
- package/dist/src/breadcrumb/index.d.ts +3 -0
- package/dist/src/button/Button.d.ts +3 -0
- package/dist/src/card/index.d.mts +3 -0
- package/dist/src/card/index.d.ts +3 -0
- package/dist/src/carousel/index.d.mts +3 -0
- package/dist/src/carousel/index.d.ts +3 -0
- package/dist/src/checkbox/Checkbox.d.ts +3 -0
- package/dist/src/checkbox/CheckboxGroup.d.ts +4 -0
- package/dist/src/chip/index.d.mts +3 -0
- package/dist/src/chip/index.d.ts +3 -0
- package/dist/src/circular-meter/index.d.mts +3 -0
- package/dist/src/circular-meter/index.d.ts +3 -0
- package/dist/src/collapsible/index.d.mts +3 -0
- package/dist/src/collapsible/index.d.ts +3 -0
- package/dist/src/combobox/index.d.mts +3 -0
- package/dist/src/combobox/index.d.ts +3 -0
- package/dist/src/dialog/index.d.mts +3 -0
- package/dist/src/dialog/index.d.ts +3 -0
- package/dist/src/divider/index.d.mts +3 -0
- package/dist/src/divider/index.d.ts +3 -0
- package/dist/src/drawer/index.d.mts +3 -0
- package/dist/src/drawer/index.d.ts +3 -0
- package/dist/src/dropdown/index.d.mts +3 -0
- package/dist/src/dropdown/index.d.ts +3 -0
- package/dist/src/file-upload/index.d.mts +3 -0
- package/dist/src/file-upload/index.d.ts +3 -0
- package/dist/src/form-field/index.d.mts +3 -0
- package/dist/src/form-field/index.d.ts +3 -0
- package/dist/src/icon/Icon.d.ts +3 -0
- package/dist/src/icon-button/IconButton.d.ts +3 -0
- package/dist/src/input/Input.d.ts +3 -0
- package/dist/src/input/index.d.mts +4 -0
- package/dist/src/input/index.d.ts +4 -0
- package/dist/src/input-otp/index.d.mts +3 -0
- package/dist/src/input-otp/index.d.ts +3 -0
- package/dist/src/kbd/Kbd.d.ts +3 -0
- package/dist/src/label/index.d.mts +3 -0
- package/dist/src/label/index.d.ts +3 -0
- package/dist/src/link-box/index.d.mts +3 -0
- package/dist/src/link-box/index.d.ts +3 -0
- package/dist/src/meter/index.d.mts +3 -0
- package/dist/src/meter/index.d.ts +3 -0
- package/dist/src/pagination/index.d.mts +3 -0
- package/dist/src/pagination/index.d.ts +3 -0
- package/dist/src/popover/index.d.mts +3 -0
- package/dist/src/popover/index.d.ts +3 -0
- package/dist/src/portal/Portal.d.ts +3 -0
- package/dist/src/progress/index.d.mts +3 -0
- package/dist/src/progress/index.d.ts +3 -0
- package/dist/src/progress-tracker/index.d.mts +3 -0
- package/dist/src/progress-tracker/index.d.ts +3 -0
- package/dist/src/radio-group/index.d.mts +3 -0
- package/dist/src/radio-group/index.d.ts +3 -0
- package/dist/src/rating/Rating.d.ts +3 -0
- package/dist/src/rating-display/index.d.mts +3 -0
- package/dist/src/rating-display/index.d.ts +3 -0
- package/dist/src/scrolling-list/index.d.mts +3 -0
- package/dist/src/scrolling-list/index.d.ts +3 -0
- package/dist/src/segmented-control/index.d.mts +3 -0
- package/dist/src/segmented-control/index.d.ts +3 -0
- package/dist/src/segmented-gauge/index.d.mts +3 -0
- package/dist/src/segmented-gauge/index.d.ts +3 -0
- package/dist/src/select/index.d.mts +3 -0
- package/dist/src/select/index.d.ts +3 -0
- package/dist/src/skeleton/index.d.mts +3 -0
- package/dist/src/skeleton/index.d.ts +3 -0
- package/dist/src/slider/index.d.mts +3 -0
- package/dist/src/slider/index.d.ts +3 -0
- package/dist/src/slot/Slot.d.ts +4 -0
- package/dist/src/spinner/Spinner.d.ts +3 -0
- package/dist/src/stepper/index.d.mts +3 -0
- package/dist/src/stepper/index.d.ts +3 -0
- package/dist/src/switch/Switch.d.ts +3 -0
- package/dist/src/table/index.d.mts +6 -2
- package/dist/src/table/index.d.ts +6 -2
- package/dist/src/table/internal/TableRootWrapper.d.ts +3 -0
- package/dist/src/tabs/index.d.mts +3 -0
- package/dist/src/tabs/index.d.ts +3 -0
- package/dist/src/tag/Tag.d.ts +3 -0
- package/dist/src/text-link/TextLink.d.ts +3 -0
- package/dist/src/textarea/Textarea.d.ts +3 -0
- package/dist/src/textarea/index.d.mts +4 -0
- package/dist/src/textarea/index.d.ts +4 -0
- package/dist/src/toast/index.d.mts +3 -0
- package/dist/src/toast/index.d.ts +3 -0
- package/dist/src/visually-hidden/VisuallyHidden.d.ts +3 -0
- package/dist/stepper/index.js.map +1 -1
- package/dist/stepper/index.mjs.map +1 -1
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs.map +1 -1
- package/dist/table/index.js +1 -1
- package/dist/table/index.js.map +1 -1
- package/dist/table/index.mjs +1 -1
- package/dist/table/index.mjs.map +1 -1
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/tag/index.js.map +1 -1
- package/dist/tag/index.mjs.map +1 -1
- package/dist/text-link/index.js.map +1 -1
- package/dist/text-link/index.mjs.map +1 -1
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs.map +1 -1
- package/dist/visually-hidden/index.js.map +1 -1
- package/dist/visually-hidden/index.mjs.map +1 -1
- package/package.json +5 -5
package/dist/toast/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","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 baseToastManager = BaseToast.useToastManager()\n\n const closeAll = React.useCallback((): void => {\n baseToastManager.toasts.forEach(({ id }) => baseToastManager.close(id))\n }, [baseToastManager])\n\n return {\n ...baseToastManager,\n closeAll,\n } as UseToastManagerReturnValue\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\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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"}
|
|
1
|
+
{"version":3,"file":"index.js","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 baseToastManager = BaseToast.useToastManager()\n\n const closeAll = React.useCallback((): void => {\n baseToastManager.toasts.forEach(({ id }) => baseToastManager.close(id))\n }, [baseToastManager])\n\n return {\n ...baseToastManager,\n closeAll,\n } as UseToastManagerReturnValue\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":"gkBAEA,IAAa,GAAA,EAAA,EAAA,KACX,CACE,wFACA,2CACA,wCACA,2EACA,oCACA,+GAEA,8LAEA,wDACA,eAEA,qDAEA,wLAEA,mCACA,gCACA,mHACA,gJACA,gKAEA,2BACD,CACD,CACE,SAAU,CACR,OAAQ,CACN,OAAQ,GACR,OAAQ,GACT,CACD,OAAQ,CACN,QAAS,GACT,MAAO,GACP,MAAO,GACP,KAAM,GACN,QAAS,GACT,KAAM,GACN,QAAS,GACT,OAAQ,GACR,QAAS,GACT,eAAgB,GACjB,CACF,CACD,iBAAkB,CAEhB,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,4CAA4C,CACrD,CACD,CACE,OAAQ,SACR,OAAQ,QACR,MAAO,CAAC,sCAAsC,CAC/C,CACD,CACE,OAAQ,SACR,OAAQ,QACR,MAAO,CAAC,sCAAsC,CAC/C,CACD,CACE,OAAQ,SACR,OAAQ,OACR,MAAO,CAAC,mCAAmC,CAC5C,CACD,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,4CAA4C,CACrD,CACD,CACE,OAAQ,SACR,OAAQ,OACR,MAAO,CAAC,mCAAmC,CAC5C,CACD,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,4CAA4C,CACrD,CACD,CACE,OAAQ,SACR,OAAQ,SACR,MAAO,CAAC,yCAAyC,CAClD,CACD,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,4CAA4C,CACrD,CACD,CACE,OAAQ,SACR,OAAQ,iBACR,MAAO,CAAC,oEAAoE,CAC7E,CAGD,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,gEAAgE,CACzE,CACD,CACE,OAAQ,SACR,OAAQ,QACR,MAAO,CAAC,0DAA0D,CACnE,CACD,CACE,OAAQ,SACR,OAAQ,QACR,MAAO,CAAC,0DAA0D,CACnE,CACD,CACE,OAAQ,SACR,OAAQ,OACR,MAAO,CAAC,uDAAuD,CAChE,CACD,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,gEAAgE,CACzE,CACD,CACE,OAAQ,SACR,OAAQ,OACR,MAAO,CAAC,uDAAuD,CAChE,CACD,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,gEAAgE,CACzE,CACD,CACE,OAAQ,SACR,OAAQ,SACR,MAAO,CAAC,6DAA6D,CACtE,CACD,CACE,OAAQ,SACR,OAAQ,UACR,MAAO,CAAC,4CAA4C,CACrD,CACD,CACE,OAAQ,SACR,OAAQ,iBACR,MAAO,CAAC,oEAAoE,CAC7E,CACF,CACD,gBAAiB,CACf,OAAQ,SACR,OAAQ,UACT,CACF,CACF,CC/ID,SAAS,EAAgB,EAA6C,CAKpE,OAJI,IAAW,iBAAyB,UACpC,IAAW,UAAkB,iBAC7B,IAAW,QAAgB,SAExB,EAGT,SAAS,EAAqB,EAA6C,CAKzE,OAJI,IAAW,iBAAyB,iBACpC,IAAW,UAAkB,UAC7B,IAAW,QAAgB,SAExB,EAGT,IAAM,GACJ,EACA,CAAE,cAAa,iBACC,CAChB,GAAI,CAAC,EAAQ,MAAO,EAAE,CAEtB,GAAM,CAAE,SAAQ,SAAQ,YAAW,UAAS,GAAG,GAAS,EAExD,MAAO,CACL,OAAQ,GAAU,EAClB,OAAQ,GAAU,EAAgB,EAAY,CAC9C,WAAA,EAAA,EAAA,IAAc,UAAW,EAAU,CACnC,UACA,GAAG,EACJ,EAGG,GAAqB,EAAoB,EAAqB,KAAyB,CAC3F,eAAgB,CAAC,OAAQ,QAAQ,CACjC,QACA,WAAA,EAAA,EAAA,IAAc,EAAY,CAAE,SAAQ,SAAQ,CAAC,CAAC,CAC9C,MAAO,CACJ,QAAoB,oBACpB,aACC,4GACH,CACF,EAED,SAAS,EAAe,EAAsC,CAC5D,OAAQ,EAAR,CACE,IAAK,OACH,OAAO,EAAA,EAAA,KAAC,EAAA,SAAD,EAAY,CAAA,CACrB,IAAK,UACH,OAAO,EAAA,EAAA,KAAC,EAAA,UAAD,EAAa,CAAA,CACtB,IAAK,QACH,OAAO,EAAA,EAAA,KAAC,EAAA,YAAD,EAAe,CAAA,CACxB,IAAK,QACH,OAAO,EAAA,EAAA,KAAC,EAAA,UAAD,EAAa,CAAA,CAOtB,QACE,OAAO,EAAA,EAAA,KAAC,EAAA,SAAD,EAAY,CAAA,EAIzB,SAAgB,EAAM,CAAE,SAAiC,CACvD,GAAM,CACJ,KAAM,EACN,SAAS,OACT,OAAQ,EACR,SACA,aACA,aAAa,QACb,UAAU,IACR,EAAM,MAAQ,EAAE,CAGd,EAAS,SAET,EAAe,GAAQ,MAAQ,EAAA,MAAU,MAAQ,EAAA,MAAU,OAC3D,EAAc,EAAe,EAAQ,CAAE,YAAa,EAAQ,YAAa,EAAQ,CAAC,CAClF,EAAY,EAAkB,EAAO,EAAQ,EAAO,CAGpD,EAAO,GAAa,EAAe,EAAO,CAE1C,EAAkB,GACjB,GAGH,EAAA,EAAA,KAAC,EAAA,MAAU,MAAX,CACa,YACX,QACE,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,aAAY,EACJ,SACR,OAAQ,EAAqB,EAAO,CACpC,KAAK,KACL,CAAA,WAGJ,EAAA,EAAA,KAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,MAAD,EAAS,CAAA,CACJ,CAAA,CACS,CAAA,CAjBI,KAqBpB,MAAoB,CAExB,IAAM,EAAQ,EAAM,MAAM,OAAS,EAAM,MACnC,EAAiB,CAAC,EAAE,EAAM,MAAM,aAAe,EAAM,aAa3D,OAXI,OAAO,GAAU,UAAY,IAAU,IAAA,IAEvC,EAAA,EAAA,KAAC,EAAA,MAAU,MAAX,CACE,UAAW,EAAiB,kBAAoB,cAChD,QAAQ,EAAA,EAAA,KAAC,MAAD,EAAO,CAAA,UAEd,EACe,CAAA,EAIf,EAAA,EAAA,KAAC,EAAA,MAAU,MAAX,CAAiB,UAAW,EAAiB,kBAAoB,cAAiB,CAAA,EAGrF,MAA0B,CAE9B,IAAM,EAAc,EAAM,MAAM,aAAe,EAAM,YAYrD,OAVK,EAED,OAAO,GAAgB,UAQpB,EAAA,EAAA,KAAC,EAAA,MAAU,YAAX,CAAuB,UAAU,cAAgB,CAAA,EANpD,EAAA,EAAA,KAAC,EAAA,MAAU,YAAX,CAAuB,UAAU,cAAc,QAAQ,EAAA,EAAA,KAAC,MAAD,EAAO,CAAA,UAC3D,EACqB,CAAA,CANH,MAa3B,OACE,EAAA,EAAA,KAAC,EAAA,MAAU,KAAX,CAA+B,GAAI,YACjC,EAAA,EAAA,MAAC,MAAD,CAAK,WAAA,EAAA,EAAA,IAAc,OAAQ,EAAU,sBAAwB,kBAAkB,UAA/E,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,8CAAf,EAEE,EAAA,EAAA,KAAC,EAAA,EAAD,CAAM,KAAK,cAAM,EAAY,CAAA,EAE7B,EAAA,EAAA,MAAC,MAAD,CACE,WAAA,EAAA,EAAA,IACE,uBACA,GAAW,SACX,CAAC,GAAW,GAAc,SAC3B,UALH,CAOG,GAAa,CACb,GAAmB,CAChB,GACF,IAEN,EAAA,EAAA,MAAC,MAAD,CAAK,WAAA,EAAA,EAAA,IAAc,OAAO,UAA1B,CAEG,IACC,EAAA,EAAA,KAAC,EAAD,CAAc,QAAQ,EAAA,EAAA,KAAC,EAAA,EAAD,CAAQ,GAAI,EAAe,CAAA,UAAG,EAAO,MAAqB,CAAA,CAGjF,GAAW,GAAgB,CACxB,GAGL,CAAC,GAAW,EAAe,2BAA2B,CACnD,GACS,CA9BI,EAAM,GA8BV,CCxLrB,SAAgB,GAA8C,CAC5D,IAAM,EAAmB,EAAA,MAAU,iBAAiB,CAE9C,EAAW,EAAM,gBAAwB,CAC7C,EAAiB,OAAO,SAAS,CAAE,QAAS,EAAiB,MAAM,EAAG,CAAC,EACtE,CAAC,EAAiB,CAAC,CAEtB,MAAO,CACL,GAAG,EACH,WACD,CCJH,SAAS,GAAY,CACnB,GAAM,CAAE,UAAW,GAAiB,CAEpC,OAAO,EAAO,IAAI,IAAS,EAAA,EAAA,KAAC,EAAD,CAA6B,QAAS,CAA1B,EAAM,GAAoB,CAAC,CAUpE,SAAgB,EAAc,CAAE,WAAU,QAAQ,EAAG,GAAG,GAA6B,CACnF,OACE,EAAA,EAAA,MAAC,EAAA,MAAU,SAAX,CAA2B,QAAO,GAAI,WAAtC,EACE,EAAA,EAAA,KAAC,EAAA,MAAU,OAAX,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,MAAU,SAAX,CACE,WAAA,EAAA,EAAA,IACE,iGACD,WAED,EAAA,EAAA,KAAC,EAAD,EAAa,CAAA,CACM,CAAA,CACJ,CAAA,CAClB,EACkB,GAgBzB,SAAgB,EAAa,CAC3B,WACA,UACA,UAAU,GACV,QACA,cACA,UAAU,IACV,SAAS,SACT,SAAS,UACT,aAAa,GACb,OACA,SACA,UACA,WAAW,OACS,CACpB,IAAM,EAAe,GAAiB,CAEhC,EAAY,EAAU,EAAA,KAAO,SAEnC,SAAS,EAAY,EAAwC,CAC3D,IAAU,EAAE,CACZ,EAAa,IAAI,CACf,QACA,cACA,UACA,WACA,KAAM,CACJ,SACA,SACA,aACA,GAAI,GAAQ,CAAE,OAAM,CACpB,SACA,GAAI,IAAY,IAAA,IAAa,CAAE,UAAS,CACzC,CACF,CAAC,CAGJ,OACE,EAAA,EAAA,KAAC,EAAD,CAAW,GAAK,CAAC,GAAW,CAAE,KAAM,SAAU,CAAG,QAAS,EACvD,WACS,CAAA,CAMhB,IAAa,EAAyC,EAAA,MAAU"}
|
package/dist/toast/index.mjs.map
CHANGED
|
@@ -1 +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 baseToastManager = BaseToast.useToastManager()\n\n const closeAll = React.useCallback((): void => {\n baseToastManager.toasts.forEach(({ id }) => baseToastManager.close(id))\n }, [baseToastManager])\n\n return {\n ...baseToastManager,\n closeAll,\n } as UseToastManagerReturnValue\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\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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"}
|
|
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 baseToastManager = BaseToast.useToastManager()\n\n const closeAll = React.useCallback((): void => {\n baseToastManager.toasts.forEach(({ id }) => baseToastManager.close(id))\n }, [baseToastManager])\n\n return {\n ...baseToastManager,\n closeAll,\n } as UseToastManagerReturnValue\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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\n/**\n * A utility component that hides content visually while keeping it accessible to screen readers.\n */\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n"],"mappings":"0KAeA,IAAa,GAAkB,CAAE,UAAU,GAAO,MAAK,GAAG,MAItD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,OAGjC,CACE,GAAI,EACC,MACL,MAAO,CAEL,SAAU,WACV,OAAQ,EACR,MAAO,EACP,OAAQ,EACR,QAAS,EACT,OAAQ,GACR,SAAU,SACV,KAAM,mBACN,WAAY,SACZ,SAAU,SACV,GAAG,EAAM,MACV,CACD,CAAA,CAIN,EAAe,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\n/**\n * A utility component that hides content visually while keeping it accessible to screen readers.\n */\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n"],"mappings":";;;AAeA,IAAa,KAAkB,EAAE,aAAU,IAAO,QAAK,GAAG,QAItD,kBAHgB,IAAU,IAAO,QAGjC;CACE,GAAI;CACC;CACL,OAAO;EAEL,UAAU;EACV,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,SAAS;EACT,QAAQ;EACR,UAAU;EACV,MAAM;EACN,YAAY;EACZ,UAAU;EACV,GAAG,EAAM;EACV;CACD,CAAA;AAIN,EAAe,cAAc"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-ui/components",
|
|
3
|
-
"version": "17.
|
|
3
|
+
"version": "17.5.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Spark (Leboncoin design system) components.",
|
|
6
6
|
"exports": {
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
"@react-aria/button": "3.13.3",
|
|
52
52
|
"@react-aria/numberfield": "3.11.16",
|
|
53
53
|
"@react-stately/numberfield": "3.9.13",
|
|
54
|
-
"@spark-ui/hooks": "17.
|
|
55
|
-
"@spark-ui/icons": "17.
|
|
56
|
-
"@spark-ui/internal-utils": "17.
|
|
54
|
+
"@spark-ui/hooks": "17.5.0",
|
|
55
|
+
"@spark-ui/icons": "17.5.0",
|
|
56
|
+
"@spark-ui/internal-utils": "17.5.0",
|
|
57
57
|
"@zag-js/pagination": "1.30.0",
|
|
58
58
|
"@zag-js/react": "1.30.0",
|
|
59
59
|
"class-variance-authority": "0.7.1",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"react-snap-carousel": "0.5.1"
|
|
66
66
|
},
|
|
67
67
|
"peerDependencies": {
|
|
68
|
-
"@spark-ui/theme-utils": "17.
|
|
68
|
+
"@spark-ui/theme-utils": "17.5.0",
|
|
69
69
|
"react": "19.2.4",
|
|
70
70
|
"react-dom": "19.2.4",
|
|
71
71
|
"tailwindcss": "4.1.18"
|