@spark-ui/components 10.8.2 → 10.9.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [10.9.0](https://github.com/leboncoin/spark-web/compare/v10.8.2...v10.9.0) (2025-07-01)
+
+### Features
+
+- **components:** added fade scroll indicator on Drawer ([4bc8f20](https://github.com/leboncoin/spark-web/commit/4bc8f2008a4daa12c13060b91929b5dc73eaaf2c))
+- **components:** fade scroll effect on Dialog ([4b5d171](https://github.com/leboncoin/spark-web/commit/4b5d171a20e6433a61bbd6ccf7b680aa1e74c0ed))
+
 ## [10.8.2](https://github.com/leboncoin/spark-web/compare/v10.8.1...v10.8.2) (2025-07-01)
 
 **Note:** Version bump only for package @spark-ui/components

package/dist/{DialogTrigger-5SI4dvpK.d.mts → DialogTrigger-woU7vsJi.d.mts}

@@ -1,8 +1,8 @@
 import { Dialog as Dialog$1 } from 'radix-ui';
 import { ReactElement, ReactNode, Ref } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface DialogProps {
     /**
@@ -25,25 +25,25 @@ interface DialogProps {
      * Specifies if the dialog is a modal.
      */
     modal?: Dialog$1.DialogProps['modal'];
+    /**
+     * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).
+     */
+    withFade?: boolean;
 }
 declare const Dialog: {
-    ({ children, ...rest }: DialogProps): ReactElement;
+    ({ children, withFade, ...rest }: DialogProps): ReactElement;
     displayName: string;
 };
 
-declare const dialogBodyStyles: (props?: ({
-    inset?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type DialogBodyStylesProps = VariantProps<typeof dialogBodyStyles>;
-
-interface BodyProps extends DialogBodyStylesProps {
+interface BodyProps {
     children: ReactNode;
     className?: string;
     tabIndex?: number;
     ref?: Ref<HTMLDivElement>;
+    inset?: boolean;
 }
 declare const Body: {
-    ({ children, className, inset, ref, ...rest }: BodyProps): ReactElement;
+    ({ children, className, inset, ref: forwardedRef, ...rest }: BodyProps): ReactElement;
     displayName: string;
 };
 

package/dist/{DialogTrigger-5SI4dvpK.d.ts → DialogTrigger-woU7vsJi.d.ts}

@@ -1,8 +1,8 @@
 import { Dialog as Dialog$1 } from 'radix-ui';
 import { ReactElement, ReactNode, Ref } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface DialogProps {
     /**
@@ -25,25 +25,25 @@ interface DialogProps {
      * Specifies if the dialog is a modal.
      */
     modal?: Dialog$1.DialogProps['modal'];
+    /**
+     * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).
+     */
+    withFade?: boolean;
 }
 declare const Dialog: {
-    ({ children, ...rest }: DialogProps): ReactElement;
+    ({ children, withFade, ...rest }: DialogProps): ReactElement;
     displayName: string;
 };
 
-declare const dialogBodyStyles: (props?: ({
-    inset?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type DialogBodyStylesProps = VariantProps<typeof dialogBodyStyles>;
-
-interface BodyProps extends DialogBodyStylesProps {
+interface BodyProps {
     children: ReactNode;
     className?: string;
     tabIndex?: number;
     ref?: Ref<HTMLDivElement>;
+    inset?: boolean;
 }
 declare const Body: {
-    ({ children, className, inset, ref, ...rest }: BodyProps): ReactElement;
+    ({ children, className, inset, ref: forwardedRef, ...rest }: BodyProps): ReactElement;
     displayName: string;
 };
 

package/dist/alert-dialog/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { e as DialogProps, C as CloseProps, h as BodyProps, f as ContentProps, n as DescriptionProps, i as FooterProps, g as HeaderProps, k as OverlayProps, l as PortalProps, m as TitleProps, j as TriggerProps } from '../DialogTrigger-5SI4dvpK.mjs';
+import { e as DialogProps, C as CloseProps, h as BodyProps, f as ContentProps, n as DescriptionProps, i as FooterProps, g as HeaderProps, k as OverlayProps, l as PortalProps, m as TitleProps, j as TriggerProps } from '../DialogTrigger-woU7vsJi.mjs';
 import { Ref, MutableRefObject } from 'react';
 import 'radix-ui';
 import 'class-variance-authority/types';

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { e as DialogProps, C as CloseProps, h as BodyProps, f as ContentProps, n as DescriptionProps, i as FooterProps, g as HeaderProps, k as OverlayProps, l as PortalProps, m as TitleProps, j as TriggerProps } from '../DialogTrigger-5SI4dvpK.js';
+import { e as DialogProps, C as CloseProps, h as BodyProps, f as ContentProps, n as DescriptionProps, i as FooterProps, g as HeaderProps, k as OverlayProps, l as PortalProps, m as TitleProps, j as TriggerProps } from '../DialogTrigger-woU7vsJi.js';
 import { Ref, MutableRefObject } from 'react';
 import 'radix-ui';
 import 'class-variance-authority/types';

package/dist/alert-dialog/index.js

@@ -33,14 +33,18 @@ var import_react2 = require("react");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var DialogContext = (0, import_react.createContext)(null);
-var DialogProvider = ({ children: childrenProp }) => {
+var DialogProvider = ({
+  children: childrenProp,
+  withFade = false
+}) => {
   const [isFullScreen, setIsFullScreen] = (0, import_react.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     DialogContext.Provider,
     {
       value: {
         isFullScreen,
-        setIsFullScreen
+        setIsFullScreen,
+        withFade
       },
       children: childrenProp
     }
@@ -56,7 +60,7 @@ var useDialog = () => {
 
 // src/dialog/Dialog.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Dialog = ({ children, ...rest }) => {
+var Dialog = ({ children, withFade = false, ...rest }) => {
   const open = rest.open;
   const activeElementRef = (0, import_react2.useRef)(null);
   function handleActiveElementFocus() {
@@ -71,42 +75,52 @@ var Dialog = ({ children, ...rest }) => {
     }
   }
   (0, import_react2.useEffect)(handleActiveElementFocus, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DialogProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Dialog.Root, { ...rest, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DialogProvider, { withFade, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Dialog.Root, { ...rest, children }) });
 };
 Dialog.displayName = "Dialog.Root";
 
-// src/dialog/DialogBody.styles.ts
-var import_class_variance_authority = require("class-variance-authority");
-var dialogBodyStyles = (0, import_class_variance_authority.cva)(
-  ["grow", "overflow-y-auto", "outline-hidden", "focus-visible:u-outline"],
-  {
-    variants: {
-      inset: {
-        true: "",
-        false: "px-xl py-lg"
-      }
-    }
-  }
-);
-
 // src/dialog/DialogBody.tsx
+var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
+var import_use_scroll_overflow = require("@spark-ui/hooks/use-scroll-overflow");
+var import_class_variance_authority = require("class-variance-authority");
+var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Body = ({
   children,
   className,
   inset = false,
-  ref,
+  ref: forwardedRef,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-  "div",
-  {
-    "data-spark-component": "dialog-body",
-    ref,
-    className: dialogBodyStyles({ inset, className }),
-    ...rest,
-    children
-  }
-);
+}) => {
+  const scrollAreaRef = (0, import_react3.useRef)(null);
+  const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, scrollAreaRef);
+  const { withFade } = useDialog();
+  const overflow = (0, import_use_scroll_overflow.useScrollOverflow)(scrollAreaRef);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-spark-component": "dialog-body",
+      ref,
+      className: (0, import_class_variance_authority.cx)(
+        "focus-visible:u-outline relative grow overflow-y-auto outline-hidden",
+        "transition-all duration-300",
+        {
+          ["px-xl py-lg"]: !inset
+        },
+        className
+      ),
+      style: {
+        ...withFade && {
+          maskImage: "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))",
+          maskSize: `100% calc(100% + ${overflow.top ? "0px" : "44px"} + ${overflow.bottom ? "0px" : "44px"})`,
+          maskPosition: `0 ${overflow.top ? "0px" : "-44px"}`
+        }
+      },
+      ...rest,
+      children
+    }
+  );
+};
 Body.displayName = "Dialog.Body";
 
 // src/dialog/DialogClose.tsx
@@ -120,11 +134,11 @@ var import_Close = require("@spark-ui/icons/Close");
 var import_class_variance_authority7 = require("class-variance-authority");
 
 // src/icon/Icon.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/slot/Slot.tsx
 var import_radix_ui3 = require("radix-ui");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Slottable = import_radix_ui3.Slot.Slottable;
 var Slot = ({ ref, ...props }) => {
@@ -132,7 +146,7 @@ var Slot = ({ ref, ...props }) => {
 };
 var wrapPolymorphicSlot = (asChild, children, callback) => {
   if (!asChild) return callback(children);
-  return (0, import_react3.isValidElement)(children) ? (0, import_react3.cloneElement)(
+  return (0, import_react4.isValidElement)(children) ? (0, import_react4.cloneElement)(
     children,
     void 0,
     callback(children.props.children)
@@ -210,9 +224,9 @@ var Icon = ({
   children,
   ...others
 }) => {
-  const child = import_react4.Children.only(children);
+  const child = import_react5.Children.only(children);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    (0, import_react4.cloneElement)(child, {
+    (0, import_react5.cloneElement)(child, {
       className: iconStyles({ className, size, intent }),
       "data-spark-component": "icon",
       "aria-hidden": "true",
@@ -226,7 +240,7 @@ Icon.displayName = "Icon";
 
 // src/button/Button.tsx
 var import_class_variance_authority5 = require("class-variance-authority");
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/spinner/Spinner.styles.tsx
 var import_internal_utils2 = require("@spark-ui/internal-utils");
@@ -978,7 +992,7 @@ var Button = ({
 }) => {
   const Component = asChild ? Slot : "button";
   const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react5.useMemo)(() => {
+  const disabledEventHandlers = (0, import_react6.useMemo)(() => {
     const result = {};
     if (shouldNotInteract) {
       blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
@@ -1108,7 +1122,7 @@ Root.displayName = "Dialog.CloseButton";
 
 // src/dialog/DialogContent.tsx
 var import_radix_ui4 = require("radix-ui");
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/dialog/DialogContent.styles.tsx
 var import_class_variance_authority8 = require("class-variance-authority");
@@ -1168,7 +1182,7 @@ var Content = ({
   ...rest
 }) => {
   const { setIsFullScreen } = useDialog();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (size === "fullscreen") setIsFullScreen(true);
     return () => setIsFullScreen(false);
   }, [setIsFullScreen, size]);
@@ -1339,13 +1353,13 @@ var AlertDialogBody = (props) => {
 AlertDialogBody.displayName = "AlertDialog.Body";
 
 // src/alert-dialog/AlertDialogCancel.tsx
-var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
+var import_use_merge_refs2 = require("@spark-ui/hooks/use-merge-refs");
 
 // src/alert-dialog/AlertDialogContext.ts
-var import_react7 = require("react");
-var AlertDialogContext = (0, import_react7.createContext)(null);
+var import_react8 = require("react");
+var AlertDialogContext = (0, import_react8.createContext)(null);
 var useAlertDialog = () => {
-  const context = (0, import_react7.useContext)(AlertDialogContext);
+  const context = (0, import_react8.useContext)(AlertDialogContext);
   if (!context) {
     throw Error("useAlertDialog must be used within a RadioGroup provider");
   }
@@ -1356,7 +1370,7 @@ var useAlertDialog = () => {
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var AlertDialogCancel = ({ ref: forwardedRef, ...props }) => {
   const { cancelRef } = useAlertDialog();
-  const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, cancelRef);
+  const ref = (0, import_use_merge_refs2.useMergeRefs)(forwardedRef, cancelRef);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Dialog2.Close, { ref, "data-spark-component": "alert-dialog-cancel", ...props });
 };
 AlertDialogCancel.displayName = "AlertDialog.Cancel";
@@ -1364,7 +1378,7 @@ AlertDialogCancel.displayName = "AlertDialog.Cancel";
 // src/alert-dialog/AlertDialogContent.tsx
 var import_class_variance_authority13 = require("class-variance-authority");
 var import_internal = require("radix-ui/internal");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var AlertDialogContent = ({
   className,
@@ -1372,8 +1386,8 @@ var AlertDialogContent = ({
   ref,
   ...others
 }) => {
-  const cancelRef = (0, import_react8.useRef)(null);
-  const value = (0, import_react8.useMemo)(() => {
+  const cancelRef = (0, import_react9.useRef)(null);
+  const value = (0, import_react9.useMemo)(() => {
     return { cancelRef };
   }, []);
   const handleOpenAutoFocus = (event) => {