@spark-ui/components 11.1.6 → 11.2.1

package/dist/toast/index.mjs

@@ -26,7 +26,7 @@ import { cx } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 var toastStyles = cva(
   [
-    "gap-lg p-lg flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg",
+    "gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg",
     "absolute right-0 bottom-0 left-auto mr-0",
     "bg-clip-padding shadow-md select-none",
     "focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none",
@@ -239,13 +239,23 @@ var getActionProps = (action, { toastDesign, toastIntent }) => {
   if (!action) return {};
   const { design, intent, className, onClick, ...rest } = action;
   return {
-    design: design ?? (toastDesign === "filled" ? "tinted" : "filled"),
+    design: design ?? toastDesign,
     intent: intent ?? getButtonIntent(toastIntent),
-    className: cx("mt-md self-end", className),
+    className: cx("ml-auto", className),
     onClick,
     ...rest
   };
 };
+var getToastRootProps = (toast, design, intent) => ({
+  key: toast.id,
+  swipeDirection: ["down", "right"],
+  toast,
+  className: cx(toastStyles({ design, intent })),
+  style: {
+    ["--gap"]: "var(--spacing-md)",
+    ["--offset-y"]: "calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))"
+  }
+});
 function Toast({ toast }) {
   const {
     icon: ToastIcon,
@@ -253,59 +263,55 @@ function Toast({ toast }) {
     design = "filled",
     action,
     isClosable,
-    closeLabel = "Close"
+    closeLabel = "Close",
+    compact = false
   } = toast.data ?? {};
   const ActionButton = action?.close ? BaseToast.Close : BaseToast.Action;
-  const actionProps = getActionProps(action, {
-    toastDesign: design,
-    toastIntent: intent
-  });
-  return /* @__PURE__ */ jsxs(
-    BaseToast.Root,
-    {
-      swipeDirection: ["down", "right"],
-      toast,
-      className: cx(
-        toastStyles({
-          design,
-          intent
-        })
-      ),
-      style: {
-        ["--gap"]: "var(--spacing-md)",
-        ["--offset-y"]: "calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))"
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "gap-sm flex flex-col", children: [
-          /* @__PURE__ */ jsxs("div", { className: "gap-lg flex items-center", children: [
-            ToastIcon && /* @__PURE__ */ jsx(Icon, { size: "md", children: ToastIcon }),
-            /* @__PURE__ */ jsxs("div", { className: "gap-sm flex flex-col", children: [
-              /* @__PURE__ */ jsx(BaseToast.Title, { className: toast.description ? "text-headline-2" : "text-body-1" }),
-              /* @__PURE__ */ jsx(BaseToast.Description, { className: "text-body-1" })
-            ] })
-          ] }),
-          action && /* @__PURE__ */ jsx(ActionButton, { render: /* @__PURE__ */ jsx(Button, { ...actionProps }), children: action.label })
-        ] }),
-        isClosable && /* @__PURE__ */ jsx(
-          BaseToast.Close,
+  const actionProps = getActionProps(action, { toastDesign: design, toastIntent: intent });
+  const rootProps = getToastRootProps(toast, design, intent);
+  const getCloseButton = (className) => {
+    if (!isClosable) return null;
+    return /* @__PURE__ */ jsx(
+      BaseToast.Close,
+      {
+        className,
+        render: /* @__PURE__ */ jsx(
+          IconButton,
           {
-            className: "top-sm right-sm absolute",
-            render: /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                "aria-label": closeLabel,
-                design,
-                intent: getCloseButtonIntent(intent),
-                size: "sm"
-              }
-            ),
-            children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Close, {}) })
+            "aria-label": closeLabel,
+            design,
+            intent: getCloseButtonIntent(intent),
+            size: "md"
           }
-        )
-      ]
-    },
-    toast.id
-  );
+        ),
+        children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Close, {}) })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(BaseToast.Root, { ...rootProps, children: /* @__PURE__ */ jsxs("div", { className: cx("flex", compact ? "gap-lg items-center" : "gap-md flex-col"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "gap-lg p-md flex grow items-center", children: [
+      ToastIcon && /* @__PURE__ */ jsx(Icon, { size: "md", children: ToastIcon }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cx(
+            "gap-sm flex flex-col",
+            compact && "flex-1",
+            !compact && isClosable && "pr-3xl"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(BaseToast.Title, { className: toast.description ? "text-headline-2" : "text-body-1" }),
+            /* @__PURE__ */ jsx(BaseToast.Description, { className: "text-body-1" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cx("flex"), children: [
+      action && /* @__PURE__ */ jsx(ActionButton, { render: /* @__PURE__ */ jsx(Button, { ...actionProps }), children: action.label }),
+      compact && getCloseButton()
+    ] }),
+    !compact && getCloseButton("top-md right-md absolute")
+  ] }) });
 }
 
 // src/toast/useToastManager.ts
@@ -354,6 +360,7 @@ function ToastTrigger({
   isClosable = true,
   icon,
   action,
+  compact,
   priority = "low"
 }) {
   const toastManager = BaseToast3.useToastManager();
@@ -370,7 +377,8 @@ function ToastTrigger({
         intent,
         isClosable,
         ...icon && { icon },
-        action
+        action,
+        ...compact !== void 0 && { compact }
       }
     });
   }

package/dist/toast/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/toast/index.tsx","../../src/toast/Toast.tsx","../../src/toast/Toast.styles.ts","../../src/toast/useToastManager.ts"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui-components/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 }: ToastProviderProps) {\n  return (\n    <BaseToast.Provider limit={limit}>\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 React.ComponentPropsWithRef<'button'>,\n    Pick<ToastObject, 'priority'>,\n    Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action'> {\n  children: React.ReactNode\n  asChild?: boolean\n  title: string\n  description?: string\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  priority = 'low',\n}: ToastTriggerProps) {\n  const toastManager = BaseToast.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      },\n    })\n  }\n\n  return (\n    <Component {...(!asChild && { type: 'button' })} onClick={createToast}>\n      {children}\n    </Component>\n  )\n}\n\nexport { useToastManager }\n","import { Toast as BaseToast } from '@base-ui-components/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 { Close } from '@spark-ui/icons/Close'\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 === 'filled' ? 'tinted' : 'filled'),\n    intent: intent ?? getButtonIntent(toastIntent),\n    className: cx('mt-md self-end', className),\n    onClick,\n    ...rest,\n  }\n}\n\nexport function Toast({ toast }: { toast: ToastObject }) {\n  const {\n    icon: ToastIcon,\n    intent = 'neutral',\n    design = 'filled',\n    action,\n    isClosable,\n    closeLabel = 'Close',\n  } = toast.data ?? {}\n\n  const ActionButton = action?.close ? BaseToast.Close : BaseToast.Action\n\n  const actionProps = getActionProps(action, {\n    toastDesign: design,\n    toastIntent: intent,\n  })\n\n  return (\n    <BaseToast.Root\n      key={toast.id}\n      swipeDirection={['down', 'right']}\n      toast={toast}\n      className={cx(\n        toastStyles({\n          design,\n          intent,\n        })\n      )}\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      <div className=\"gap-sm flex flex-col\">\n        <div className=\"gap-lg flex items-center\">\n          {ToastIcon && <Icon size=\"md\">{ToastIcon}</Icon>}\n          <div className=\"gap-sm flex flex-col\">\n            <BaseToast.Title className={toast.description ? 'text-headline-2' : 'text-body-1'} />\n            <BaseToast.Description className=\"text-body-1\" />\n          </div>\n        </div>\n        {action && <ActionButton render={<Button {...actionProps} />}>{action.label}</ActionButton>}\n      </div>\n\n      {isClosable && (\n        <BaseToast.Close\n          className=\"top-sm right-sm absolute\"\n          render={\n            <IconButton\n              aria-label={closeLabel}\n              design={design}\n              intent={getCloseButtonIntent(intent)}\n              size=\"sm\"\n            />\n          }\n        >\n          <Icon>\n            <Close />\n          </Icon>\n        </BaseToast.Close>\n      )}\n    </BaseToast.Root>\n  )\n}\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const toastStyles = cva(\n  [\n    'gap-lg p-lg flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg',\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        basic: '',\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'],\n      },\n      {\n        design: 'filled',\n        intent: 'alert',\n        class: ['bg-alert text-on-alert'],\n      },\n      {\n        design: 'filled',\n        intent: 'error',\n        class: ['bg-error text-on-error'],\n      },\n      {\n        design: 'filled',\n        intent: 'info',\n        class: ['bg-info text-on-info'],\n      },\n      {\n        design: 'filled',\n        intent: 'neutral',\n        class: ['bg-neutral text-on-neutral'],\n      },\n      {\n        design: 'filled',\n        intent: 'main',\n        class: ['bg-main text-on-main'],\n      },\n      {\n        design: 'filled',\n        intent: 'basic',\n        class: ['bg-basic text-on-basic'],\n      },\n      {\n        design: 'filled',\n        intent: 'support',\n        class: ['bg-support text-on-support'],\n      },\n      {\n        design: 'filled',\n        intent: 'accent',\n        class: ['bg-accent text-on-accent'],\n      },\n      {\n        design: 'filled',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface'],\n      },\n      {\n        design: 'filled',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse'],\n      },\n\n      // Tinted variants\n      {\n        design: 'tinted',\n        intent: 'success',\n        class: ['bg-success-container text-on-success-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'alert',\n        class: ['bg-alert-container text-on-alert-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'error',\n        class: ['bg-error-container text-on-error-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'info',\n        class: ['bg-info-container text-on-info-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'neutral',\n        class: ['bg-neutral-container text-on-neutral-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'main',\n        class: ['bg-main-container text-on-main-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'basic',\n        class: ['bg-basic-container text-on-basic-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'support',\n        class: ['bg-support-container text-on-support-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'accent',\n        class: ['bg-accent-container text-on-accent-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse'],\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'neutral',\n    },\n  }\n)\n\nexport const snackbarItemVariantContent = cva(\n  [\n    'inline-grid items-center',\n    'col-start-1 row-start-1',\n    'pl-md pr-lg', // applying padding on the parent prevents VoiceOver on Safari from reading snackbar content 🤷\n  ],\n  {\n    variants: {\n      /**\n       * Force action button displaying on a new line\n       * @default false\n       */\n      actionOnNewline: {\n        true: [\n          'grid-rows-[52px_1fr_52px]',\n          'grid-cols-[min-content_1fr_min-content]',\n          \"[grid-template-areas:'icon_message_close'_'._message_.'_'action_action_action']\",\n        ],\n        false: [\n          'grid-cols-[min-content_1fr_min-content_min-content]',\n          \"[grid-template-areas:'icon_message_action_close']\",\n        ],\n      },\n    },\n    defaultVariants: {\n      actionOnNewline: false,\n    },\n  }\n)\n\nexport type ToastVariantProps = VariantProps<typeof toastStyles>\nexport type SnackbarItemVariantContentProps = VariantProps<typeof snackbarItemVariantContent>\n","import { Toast as BaseToast } from '@base-ui-components/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  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,SAASA,kBAAiB;AAEnC,SAAS,MAAAC,WAAU;;;ACFnB,SAAS,SAAS,iBAAiB;AAInC,SAAS,aAAa;AACtB,SAAS,UAAU;;;ACLnB,SAAS,WAAyB;AAE3B,IAAM,cAAc;AAAA,EACzB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,4BAA4B;AAAA,MACtC;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,wBAAwB;AAAA,MAClC;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,wBAAwB;AAAA,MAClC;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,sBAAsB;AAAA,MAChC;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,4BAA4B;AAAA,MACtC;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,sBAAsB;AAAA,MAChC;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,wBAAwB;AAAA,MAClC;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,4BAA4B;AAAA,MACtC;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,0BAA0B;AAAA,MACpC;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,4BAA4B;AAAA,MACtC;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,4CAA4C;AAAA,MACtD;AAAA;AAAA,MAGA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,gDAAgD;AAAA,MAC1D;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,4CAA4C;AAAA,MACtD;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,4CAA4C;AAAA,MACtD;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,0CAA0C;AAAA,MACpD;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,gDAAgD;AAAA,MAC1D;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,0CAA0C;AAAA,MACpD;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,4CAA4C;AAAA,MACtD;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,gDAAgD;AAAA,MAC1D;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,8CAA8C;AAAA,MACxD;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,4BAA4B;AAAA,MACtC;AAAA,MACA;AAAA,QACE,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,OAAO,CAAC,4CAA4C;AAAA,MACtD;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAEO,IAAM,6BAA6B;AAAA,EACxC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,MAKR,iBAAiB;AAAA,QACf,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,iBAAiB;AAAA,IACnB;AAAA,EACF;AACF;;;ADvHwB,cACd,YADc;AArExB,SAAS,gBAAgB,QAA6C;AACpE,MAAI,WAAW,iBAAkB,QAAO;AACxC,MAAI,WAAW,UAAW,QAAO;AACjC,MAAI,WAAW,QAAS,QAAO;AAE/B,SAAO;AACT;AAEA,SAAS,qBAAqB,QAA6C;AACzE,MAAI,WAAW,iBAAkB,QAAO;AACxC,MAAI,WAAW,UAAW,QAAO;AACjC,MAAI,WAAW,QAAS,QAAO;AAE/B,SAAO;AACT;AAEA,IAAM,iBAAiB,CACrB,QACA,EAAE,aAAa,YAAY,MACX;AAChB,MAAI,CAAC,OAAQ,QAAO,CAAC;AAErB,QAAM,EAAE,QAAQ,QAAQ,WAAW,SAAS,GAAG,KAAK,IAAI;AAExD,SAAO;AAAA,IACL,QAAQ,WAAW,gBAAgB,WAAW,WAAW;AAAA,IACzD,QAAQ,UAAU,gBAAgB,WAAW;AAAA,IAC7C,WAAW,GAAG,kBAAkB,SAAS;AAAA,IACzC;AAAA,IACA,GAAG;AAAA,EACL;AACF;AAEO,SAAS,MAAM,EAAE,MAAM,GAA2B;AACvD,QAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,aAAa;AAAA,EACf,IAAI,MAAM,QAAQ,CAAC;AAEnB,QAAM,eAAe,QAAQ,QAAQ,UAAU,QAAQ,UAAU;AAEjE,QAAM,cAAc,eAAe,QAAQ;AAAA,IACzC,aAAa;AAAA,IACb,aAAa;AAAA,EACf,CAAC;AAED,SACE;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MAEC,gBAAgB,CAAC,QAAQ,OAAO;AAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACT,YAAY;AAAA,UACV;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,OAAO;AAAA,QACL,CAAC,OAAiB,GAAG;AAAA,QACrB,CAAC,YAAsB,GACrB;AAAA,MACJ;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,wBACb;AAAA,+BAAC,SAAI,WAAU,4BACZ;AAAA,yBAAa,oBAAC,QAAK,MAAK,MAAM,qBAAU;AAAA,YACzC,qBAAC,SAAI,WAAU,wBACb;AAAA,kCAAC,UAAU,OAAV,EAAgB,WAAW,MAAM,cAAc,oBAAoB,eAAe;AAAA,cACnF,oBAAC,UAAU,aAAV,EAAsB,WAAU,eAAc;AAAA,eACjD;AAAA,aACF;AAAA,UACC,UAAU,oBAAC,gBAAa,QAAQ,oBAAC,UAAQ,GAAG,aAAa,GAAK,iBAAO,OAAM;AAAA,WAC9E;AAAA,QAEC,cACC;AAAA,UAAC,UAAU;AAAA,UAAV;AAAA,YACC,WAAU;AAAA,YACV,QACE;AAAA,cAAC;AAAA;AAAA,gBACC,cAAY;AAAA,gBACZ;AAAA,gBACA,QAAQ,qBAAqB,MAAM;AAAA,gBACnC,MAAK;AAAA;AAAA,YACP;AAAA,YAGF,8BAAC,QACC,8BAAC,SAAM,GACT;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,IAzCG,MAAM;AAAA,EA2Cb;AAEJ;;;AE3GA,SAAS,SAASC,kBAAiB;AACnC,YAAY,WAAW;AAIhB,SAAS,kBAA8C;AAC5D,QAAM,mBAAmBA,WAAU,gBAAgB;AAEnD,QAAM,WAAiB,kBAAY,MAAY;AAC7C,qBAAiB,OAAO,QAAQ,CAAC,EAAE,GAAG,MAAM,iBAAiB,MAAM,EAAE,CAAC;AAAA,EACxE,GAAG,CAAC,gBAAgB,CAAC;AAErB,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EACF;AACF;;;AHF6B,gBAAAC,MASzB,QAAAC,aATyB;AAH7B,SAAS,YAAY;AACnB,QAAM,EAAE,OAAO,IAAI,gBAAgB;AAEnC,SAAO,OAAO,IAAI,WAAS,gBAAAD,KAAC,SAAqB,SAAV,MAAM,EAAkB,CAAE;AACnE;AAMO,SAAS,cAAc,EAAE,UAAU,QAAQ,EAAE,GAAuB;AACzE,SACE,gBAAAC,MAACC,WAAU,UAAV,EAAmB,OAClB;AAAA,oBAAAF,KAACE,WAAU,QAAV,EACC,0BAAAF;AAAA,MAACE,WAAU;AAAA,MAAV;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,QACF;AAAA,QAEA,0BAAAH,KAAC,aAAU;AAAA;AAAA,IACb,GACF;AAAA,IACC;AAAA,KACH;AAEJ;AAaO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAsB;AACpB,QAAM,eAAeE,WAAU,gBAAgB;AAE/C,QAAM,YAAY,UAAU,OAAO;AAEnC,WAAS,YAAY,GAAwC;AAC3D,cAAU,CAAC;AACX,iBAAa,IAAI;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAI,QAAQ,EAAE,KAAK;AAAA,QACnB;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SACE,gBAAAF,KAAC,aAAW,GAAI,CAAC,WAAW,EAAE,MAAM,SAAS,GAAI,SAAS,aACvD,UACH;AAEJ;","names":["BaseToast","cx","BaseToast","jsx","jsxs","BaseToast","cx"]}
+{"version":3,"sources":["../../src/toast/index.tsx","../../src/toast/Toast.tsx","../../src/toast/Toast.styles.ts","../../src/toast/useToastManager.ts"],"sourcesContent":["import { Toast as BaseToast } from '@base-ui-components/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 }: ToastProviderProps) {\n  return (\n    <BaseToast.Provider limit={limit}>\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 React.ComponentPropsWithRef<'button'>,\n    Pick<ToastObject, 'priority'>,\n    Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {\n  children: React.ReactNode\n  asChild?: boolean\n  title: string\n  description?: string\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 = BaseToast.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 { useToastManager }\n","import { Toast as BaseToast } from '@base-ui-components/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 { Close } from '@spark-ui/icons/Close'\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  key: toast.id,\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\nexport function Toast({ toast }: { toast: ToastObject }) {\n  const {\n    icon: ToastIcon,\n    intent = 'neutral',\n    design = 'filled',\n    action,\n    isClosable,\n    closeLabel = 'Close',\n    compact = false,\n  } = toast.data ?? {}\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  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  return (\n    <BaseToast.Root {...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          {ToastIcon && <Icon size=\"md\">{ToastIcon}</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            <BaseToast.Title className={toast.description ? 'text-headline-2' : 'text-body-1'} />\n            <BaseToast.Description className=\"text-body-1\" />\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 { 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',\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        basic: '',\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'],\n      },\n      {\n        design: 'filled',\n        intent: 'alert',\n        class: ['bg-alert text-on-alert'],\n      },\n      {\n        design: 'filled',\n        intent: 'error',\n        class: ['bg-error text-on-error'],\n      },\n      {\n        design: 'filled',\n        intent: 'info',\n        class: ['bg-info text-on-info'],\n      },\n      {\n        design: 'filled',\n        intent: 'neutral',\n        class: ['bg-neutral text-on-neutral'],\n      },\n      {\n        design: 'filled',\n        intent: 'main',\n        class: ['bg-main text-on-main'],\n      },\n      {\n        design: 'filled',\n        intent: 'basic',\n        class: ['bg-basic text-on-basic'],\n      },\n      {\n        design: 'filled',\n        intent: 'support',\n        class: ['bg-support text-on-support'],\n      },\n      {\n        design: 'filled',\n        intent: 'accent',\n        class: ['bg-accent text-on-accent'],\n      },\n      {\n        design: 'filled',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface'],\n      },\n      {\n        design: 'filled',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse'],\n      },\n\n      // Tinted variants\n      {\n        design: 'tinted',\n        intent: 'success',\n        class: ['bg-success-container text-on-success-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'alert',\n        class: ['bg-alert-container text-on-alert-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'error',\n        class: ['bg-error-container text-on-error-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'info',\n        class: ['bg-info-container text-on-info-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'neutral',\n        class: ['bg-neutral-container text-on-neutral-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'main',\n        class: ['bg-main-container text-on-main-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'basic',\n        class: ['bg-basic-container text-on-basic-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'support',\n        class: ['bg-support-container text-on-support-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'accent',\n        class: ['bg-accent-container text-on-accent-container'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse'],\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'neutral',\n    },\n  }\n)\n\nexport const snackbarItemVariantContent = cva(\n  [\n    'inline-grid items-center',\n    'col-start-1 row-start-1',\n    'pl-md pr-lg', // applying padding on the parent prevents VoiceOver on Safari from reading snackbar content 🤷\n  ],\n  {\n    variants: {\n      /**\n       * Force action button displaying on a new line\n       * @default false\n       */\n      actionOnNewline: {\n        true: [\n          'grid-rows-[52px_1fr_52px]',\n          'grid-cols-[min-content_1fr_min-content]',\n          \"[grid-template-areas:'icon_message_close'_'._message_.'_'action_action_action']\",\n        ],\n        false: [\n          'grid-cols-[min-content_1fr_min-content_min-content]',\n          \"[grid-template-areas:'icon_message_action_close']\",\n        ],\n      },\n    },\n    defaultVariants: {\n      actionOnNewline: false,\n    },\n  }\n)\n\nexport type ToastVariantProps = VariantProps<typeof toastStyles>\nexport type SnackbarItemVariantContentProps = VariantProps<typeof snackbarItemVariantContent>\n","import { Toast as BaseToast } from '@base-ui-components/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  }\n}\n"],"mappings":"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","names":["BaseToast","cx","BaseToast","jsx","jsxs","BaseToast","cx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "11.1.6",
+  "version": "11.2.1",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -53,9 +53,9 @@
     "@react-aria/toast": "^3.0.0-beta.18",
     "@react-stately/numberfield": "3.9.11",
     "@react-stately/toast": "^3.0.0-beta.7",
-    "@spark-ui/hooks": "^11.1.6",
-    "@spark-ui/icons": "^11.1.6",
-    "@spark-ui/internal-utils": "^11.1.6",
+    "@spark-ui/hooks": "^11.2.1",
+    "@spark-ui/icons": "^11.2.1",
+    "@spark-ui/internal-utils": "^11.2.1",
     "@zag-js/pagination": "1.25.0",
     "@zag-js/react": "1.25.0",
     "class-variance-authority": "0.7.1",
@@ -82,5 +82,5 @@
     "url": "https://github.com/leboncoin/spark-web/issues?q=is%3Aopen+label%3A%22Component%3A+button%22"
   },
   "homepage": "https://sparkui.vercel.app",
-  "gitHead": "a6b9682bd6b7b9d01067fb0c6686368543b80bd4"
+  "gitHead": "a92cb7950a5637402c5f13ab9cd16f6d2d6726bc"
 }

package/dist/chunk-WA56YHV3.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/dialog/Dialog.tsx","../src/dialog/DialogContext.tsx","../src/dialog/DialogBody.tsx","../src/dialog/DialogClose.tsx","../src/dialog/DialogCloseButton.tsx","../src/dialog/DialogContent.tsx","../src/dialog/DialogContent.styles.tsx","../src/dialog/DialogDescription.tsx","../src/dialog/DialogFooter.tsx","../src/dialog/DialogHeader.tsx","../src/dialog/DialogOverlay.tsx","../src/dialog/DialogPortal.tsx","../src/dialog/DialogTitle.tsx","../src/dialog/DialogTrigger.tsx","../src/dialog/index.ts"],"sourcesContent":["import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, useEffect, useRef } from 'react'\n\nimport { DialogProvider } from './DialogContext'\n\nexport interface DialogProps {\n  /**\n   * Children of the component.\n   */\n  children?: RadixDialog.DialogProps['children']\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: RadixDialog.DialogProps['open']\n  /**\n   * Default open state.\n   */\n  defaultOpen?: RadixDialog.DialogProps['defaultOpen']\n  /**\n   * Handler executen on every dialog open state change.\n   */\n  onOpenChange?: RadixDialog.DialogProps['onOpenChange']\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: RadixDialog.DialogProps['modal']\n  /**\n   * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n}\n\nexport const Dialog = ({ children, withFade = false, ...rest }: DialogProps): ReactElement => {\n  const open = rest.open\n  const activeElementRef = useRef<Element>(null)\n\n  /**\n   * This function captures the active element when the Dialog is opened\n   * and sets focus back to it when the Dialog is closed.\n   */\n  function handleActiveElementFocus() {\n    if (open && document.activeElement) {\n      activeElementRef.current = document.activeElement\n    }\n\n    if (!open) {\n      setTimeout(() => {\n        if (!(activeElementRef.current instanceof HTMLElement)) return\n        activeElementRef.current.focus()\n      }, 0)\n    }\n  }\n\n  useEffect(handleActiveElementFocus, [open])\n\n  return (\n    <DialogProvider withFade={withFade}>\n      <RadixDialog.Root {...rest}>{children}</RadixDialog.Root>\n    </DialogProvider>\n  )\n}\n\nDialog.displayName = 'Dialog.Root'\n","import { createContext, type ReactNode, useContext, useState } from 'react'\n\nexport interface DialogContextState {\n  isFullScreen: boolean\n  setIsFullScreen: (value: boolean) => void\n  withFade: boolean\n}\n\nconst DialogContext = createContext<DialogContextState | null>(null)\n\nexport const DialogProvider = ({\n  children: childrenProp,\n  withFade = false,\n}: {\n  children: ReactNode\n  withFade?: boolean\n}) => {\n  const [isFullScreen, setIsFullScreen] = useState(false)\n\n  return (\n    <DialogContext.Provider\n      value={{\n        isFullScreen,\n        setIsFullScreen,\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DialogContext.Provider>\n  )\n}\n\nexport const useDialog = () => {\n  const context = useContext(DialogContext)\n\n  if (!context) {\n    throw Error('useDialog must be used within a Dialog provider')\n  }\n\n  return context\n}\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport interface BodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\nexport const Body = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: BodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useDialog()\n\n  const overflow = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\n      style={{\n        ...(withFade && {\n          maskImage:\n            'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n          maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n          maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n        }),\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nBody.displayName = 'Dialog.Body'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type CloseProps = RadixDialog.DialogCloseProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const Close = (props: CloseProps) => <RadixDialog.Close {...props} />\n\nClose.displayName = 'Dialog.Close'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { Close, CloseProps } from './DialogClose'\n\nexport type CloseButtonProps = CloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\nconst Root = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <Close\n      data-spark-component=\"dialog-close-button\"\n      data-part=\"close\"\n      ref={ref}\n      className={cx(['absolute', 'top-md', 'right-xl'], className)}\n      asChild\n      {...rest}\n    >\n      <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n        <Icon>{children}</Icon>\n      </IconButton>\n    </Close>\n  )\n}\n\nexport const CloseButton = Object.assign(Root, {\n  id: 'CloseButton',\n})\n\nRoot.displayName = 'Dialog.CloseButton'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, Ref, useEffect } from 'react'\n\nimport { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'\nimport { useDialog } from './DialogContext'\n\nexport interface ContentProps extends RadixDialog.DialogContentProps, DialogContentStylesProps {\n  /**\n   * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.\n   */\n  isNarrow?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Content = ({\n  children,\n  className,\n  isNarrow = false,\n  size = 'md',\n  onInteractOutside,\n  ref,\n  ...rest\n}: ContentProps): ReactElement => {\n  const { setIsFullScreen } = useDialog()\n\n  useEffect(() => {\n    if (size === 'fullscreen') setIsFullScreen(true)\n\n    return () => setIsFullScreen(false)\n  }, [setIsFullScreen, size])\n\n  return (\n    <RadixDialog.Content\n      data-spark-component=\"dialog-content\"\n      ref={ref}\n      className={dialogContentStyles({\n        className,\n        isNarrow,\n        size,\n      })}\n      onInteractOutside={e => {\n        const isForegroundElement = (e.target as HTMLElement).closest('.z-toast, .z-popover')\n\n        /**\n         * The focus trap of the dialog applies `pointer-events-none` on the body of the page in the background, but\n         * some components with an higher z-index have `pointer-events-auto` applied on them to remain interactive and ignore the focust trap (ex: a Snackbar with actions).\n         *\n         * Clicking on the snackbar will be considered as an \"outside click\" and close the dialog. We want to prevent this.\n         */\n        if (isForegroundElement) {\n          e.preventDefault()\n        }\n\n        onInteractOutside?.(e)\n      }}\n      {...rest}\n    >\n      {children}\n    </RadixDialog.Content>\n  )\n}\n\nContent.displayName = 'Dialog.Content'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const dialogContentStyles = cva(\n  [\n    'z-modal flex flex-col bg-surface group',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    '[&:not(:has(footer))]:pb-lg',\n    '[&:not(:has(header))]:pt-lg',\n  ],\n  {\n    variants: {\n      size: {\n        fullscreen: 'fixed size-full top-0 left-0',\n        sm: 'max-w-sz-480',\n        md: 'max-w-sz-672',\n        lg: 'max-w-sz-864',\n      },\n      isNarrow: {\n        true: [],\n        false: [],\n      },\n    },\n    compoundVariants: [\n      {\n        size: ['sm', 'md', 'lg'],\n        class: [\n          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n          'max-h-[80%]',\n          'shadow-md rounded-lg',\n          'data-[state=open]:animate-fade-in',\n          'data-[state=closed]:animate-fade-out',\n        ],\n      },\n      {\n        size: ['sm', 'md', 'lg'],\n        isNarrow: false,\n        class: ['w-full'],\n      },\n    ],\n    defaultVariants: {\n      size: 'md',\n      isNarrow: false,\n    },\n  }\n)\n\nexport type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DescriptionProps = RadixDialog.DialogDescriptionProps & {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const Description = (props: DescriptionProps) => (\n  <RadixDialog.Description data-spark-component=\"dialog-description\" {...props} />\n)\n\nDescription.displayName = 'Dialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface FooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Footer = ({ children, className, ref, ...rest }: FooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nFooter.displayName = 'Dialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nHeader.displayName = 'Dialog.Header'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, Ref } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport type OverlayProps = RadixDialog.DialogOverlayProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Overlay = ({ className, ref, ...rest }: OverlayProps): ReactElement | null => {\n  const { isFullScreen } = useDialog()\n\n  return (\n    <RadixDialog.Overlay\n      data-spark-component=\"dialog-overlay\"\n      ref={ref}\n      className={cx(\n        isFullScreen ? 'hidden' : 'fixed',\n        ['top-0', 'left-0', 'w-screen', 'h-screen', 'z-overlay'],\n        ['bg-overlay/dim-1'],\n        ['data-[state=open]:animate-fade-in'],\n        ['data-[state=closed]:animate-fade-out'],\n        className\n      )}\n      {...rest}\n    />\n  )\n}\n\nOverlay.displayName = 'Dialog.Overlay'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement } from 'react'\n\nexport type PortalProps = RadixDialog.DialogPortalProps\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n  <RadixDialog.Portal {...rest}>{children}</RadixDialog.Portal>\n)\n\nPortal.displayName = 'Dialog.Portal'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TitleProps = RadixDialog.DialogTitleProps & {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const Title = ({ className, ref, ...others }: TitleProps) => {\n  return (\n    <RadixDialog.Title\n      data-spark-component=\"dialog-title\"\n      ref={ref}\n      className={cx(\n        'text-headline-1 text-on-surface',\n        'group-has-data-[part=close]:pr-3xl',\n        className\n      )}\n      {...others}\n    />\n  )\n}\n\nTitle.displayName = 'Dialog.Title'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, ReactNode, Ref } from 'react'\n\nexport interface TriggerProps {\n  /**\n   * Children of the component.\n   */\n  children?: ReactNode\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: RadixDialog.DialogTriggerProps['asChild']\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = (props: TriggerProps): ReactElement => (\n  <RadixDialog.Trigger data-spark-component=\"dialog-trigger\" {...props} />\n)\n\nTrigger.displayName = 'Dialog.Trigger'\n","import { Dialog as Root } from './Dialog'\nimport { Body } from './DialogBody'\nimport { Close } from './DialogClose'\nimport { CloseButton } from './DialogCloseButton'\nimport { Content } from './DialogContent'\nimport { Description } from './DialogDescription' // aria-describedby\nimport { Footer } from './DialogFooter'\nimport { Header } from './DialogHeader'\nimport { Overlay } from './DialogOverlay'\nimport { Portal } from './DialogPortal'\nimport { Title } from './DialogTitle' // aria-labelledby\nimport { Trigger } from './DialogTrigger'\n\nexport const Dialog: typeof Root & {\n  Trigger: typeof Trigger\n  Portal: typeof Portal\n  Overlay: typeof Overlay\n  Content: typeof Content\n  Header: typeof Header\n  Body: typeof Body\n  Footer: typeof Footer\n  Close: typeof Close\n  CloseButton: typeof CloseButton\n  Title: typeof Title\n  Description: typeof Description\n} = Object.assign(Root, {\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Header,\n  Body,\n  Footer,\n  Close,\n  CloseButton,\n  Title,\n  Description,\n})\n\nDialog.displayName = 'Dialog'\nDialog.Trigger.displayName = 'Dialog.Trigger'\nTrigger.displayName = 'Dialog.Trigger'\nPortal.displayName = 'Dialog.Portal'\nOverlay.displayName = 'Dialog.Overlay'\nContent.displayName = 'Dialog.Content'\nHeader.displayName = 'Dialog.Header'\nBody.displayName = 'Dialog.Body'\nFooter.displayName = 'Dialog.Footer'\nCloseButton.displayName = 'Dialog.CloseButton'\nTitle.displayName = 'Dialog.Title'\nDescription.displayName = 'Dialog.Description'\n\nexport { type DialogProps } from './Dialog'\nexport { type ContentProps as DialogContentProps } from './DialogContent'\nexport { type HeaderProps as DialogHeaderProps } from './DialogHeader'\nexport { type BodyProps as DialogBodyProps } from './DialogBody'\nexport { type FooterProps as DialogFooterProps } from './DialogFooter'\nexport { type TriggerProps as DialogTriggerProps } from './DialogTrigger'\nexport { type OverlayProps as DialogOverlayProps } from './DialogOverlay'\nexport { type PortalProps as DialogPortalProps } from './DialogPortal'\nexport { type TitleProps as DialogTitleProps } from './DialogTitle'\nexport { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'\nexport { type CloseProps as DialogCloseProps } from './DialogClose'\nexport { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'\n"],"mappings":"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","names":["jsx","useRef","jsx","useRef","RadixDialog","jsx","cx","jsx","cx","RadixDialog","useEffect","jsx","useEffect","RadixDialog","RadixDialog","jsx","cx","jsx","cx","jsx","cx","RadixDialog","jsx","RadixDialog","cx","RadixDialog","jsx","cx","RadixDialog","jsx","RadixDialog","jsx","Dialog"]}