@spark-ui/components 10.8.2 → 10.9.0

package/dist/drawer/index.js

@@ -26,10 +26,43 @@ module.exports = __toCommonJS(drawer_exports);
 
 // src/drawer/Drawer.tsx
 var import_radix_ui = require("radix-ui");
+
+// src/drawer/DrawerContext.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Drawer = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Dialog.Root, { ...rest, children });
+var DrawerContext = (0, import_react.createContext)(null);
+var DrawerProvider = ({
+  children: childrenProp,
+  withFade = false
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DrawerContext.Provider,
+    {
+      value: {
+        withFade
+      },
+      children: childrenProp
+    }
+  );
+};
+var useDrawer = () => {
+  const context = (0, import_react.useContext)(DrawerContext);
+  if (!context) {
+    throw Error("useDrawer must be used within a Drawer provider");
+  }
+  return context;
+};
+
+// src/drawer/Drawer.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Drawer = ({ children, withFade = false, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DrawerProvider, { withFade, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Dialog.Root, { ...rest, children }) });
 Drawer.displayName = "Drawer.Root";
 
+// src/drawer/DrawerBody.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_react2 = require("react");
+
 // src/drawer/DrawerBody.styles.ts
 var import_class_variance_authority = require("class-variance-authority");
 var drawerBodyStyles = (0, import_class_variance_authority.cva)(
@@ -48,23 +81,36 @@ var drawerBodyStyles = (0, import_class_variance_authority.cva)(
 );
 
 // src/drawer/DrawerBody.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var DrawerBody = ({
   children,
   inset = false,
   className,
-  ref,
+  ref: forwardedRef,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  "div",
-  {
-    "data-spark-component": "drawer-body",
-    ref,
-    className: drawerBodyStyles({ inset, className }),
-    ...rest,
-    children
-  }
-);
+}) => {
+  const scrollAreaRef = (0, import_react2.useRef)(null);
+  const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, scrollAreaRef);
+  const { withFade } = useDrawer();
+  const overflow = (0, import_use_scroll_overflow.useScrollOverflow)(scrollAreaRef);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-spark-component": "drawer-body",
+      ref,
+      className: drawerBodyStyles({ 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
+    }
+  );
+};
 DrawerBody.displayName = "Drawer.Body";
 
 // src/drawer/DrawerCloseButton.tsx
@@ -72,19 +118,19 @@ var import_Close = require("@spark-ui/icons/Close");
 var import_class_variance_authority7 = require("class-variance-authority");
 
 // src/icon/Icon.tsx
-var import_react2 = require("react");
+var import_react4 = require("react");
 
 // src/slot/Slot.tsx
 var import_radix_ui2 = require("radix-ui");
-var import_react = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Slottable = import_radix_ui2.Slot.Slottable;
 var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Slot.Root, { ref, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Slot.Root, { ref, ...props });
 };
 var wrapPolymorphicSlot = (asChild, children, callback) => {
   if (!asChild) return callback(children);
-  return (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(
+  return (0, import_react3.isValidElement)(children) ? (0, import_react3.cloneElement)(
     children,
     void 0,
     callback(children.props.children)
@@ -92,10 +138,10 @@ var wrapPolymorphicSlot = (asChild, children, callback) => {
 };
 
 // src/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
   const Component = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Component,
     {
       ...props,
@@ -153,7 +199,7 @@ var iconStyles = (0, import_class_variance_authority2.cva)(["fill-current shrink
 });
 
 // src/icon/Icon.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Icon = ({
   label,
   className,
@@ -162,23 +208,23 @@ var Icon = ({
   children,
   ...others
 }) => {
-  const child = import_react2.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    (0, import_react2.cloneElement)(child, {
+  const child = import_react4.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    (0, import_react4.cloneElement)(child, {
       className: iconStyles({ className, size, intent }),
       "data-spark-component": "icon",
       "aria-hidden": "true",
       focusable: "false",
       ...others
     }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHidden, { children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VisuallyHidden, { children: label })
   ] });
 };
 Icon.displayName = "Icon";
 
 // src/button/Button.tsx
 var import_class_variance_authority5 = require("class-variance-authority");
-var import_react3 = require("react");
+var import_react5 = require("react");
 
 // src/spinner/Spinner.styles.tsx
 var import_internal_utils2 = require("@spark-ui/internal-utils");
@@ -229,7 +275,7 @@ var spinnerStyles = (0, import_class_variance_authority3.cva)(
 );
 
 // src/spinner/Spinner.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Spinner = ({
   className,
   size = "current",
@@ -239,7 +285,7 @@ var Spinner = ({
   ref,
   ...others
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "span",
     {
       role: "status",
@@ -247,7 +293,7 @@ var Spinner = ({
       ref,
       className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
       ...others,
-      children: label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VisuallyHidden, { children: label })
+      children: label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisuallyHidden, { children: label })
     }
   );
 };
@@ -898,7 +944,7 @@ var buttonStyles = (0, import_class_variance_authority4.cva)(
 );
 
 // src/button/Button.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var blockedEventHandlers = [
   "onClick",
   "onMouseDown",
@@ -930,7 +976,7 @@ var Button = ({
 }) => {
   const Component = asChild ? Slot : "button";
   const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react3.useMemo)(() => {
+  const disabledEventHandlers = (0, import_react5.useMemo)(() => {
     const result = {};
     if (shouldNotInteract) {
       blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
@@ -942,7 +988,7 @@ var Button = ({
     className: loadingText ? "inline-block" : "absolute",
     ...loadingLabel && { "aria-label": loadingLabel }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Component,
     {
       "data-spark-component": "button",
@@ -965,10 +1011,10 @@ var Button = ({
       children: wrapPolymorphicSlot(
         asChild,
         children,
-        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { ...spinnerProps }),
+        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner, { ...spinnerProps }),
           loadingText && loadingText,
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               "aria-hidden": true,
@@ -1000,7 +1046,7 @@ var iconButtonStyles = (0, import_class_variance_authority6.cva)(["pl-0 pr-0"],
 });
 
 // src/icon-button/IconButton.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var IconButton = ({
   design = "filled",
   disabled = false,
@@ -1011,7 +1057,7 @@ var IconButton = ({
   ref,
   ...others
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Button,
     {
       "data-spark-component": "icon-button",
@@ -1030,22 +1076,22 @@ IconButton.displayName = "IconButton";
 
 // src/drawer/DrawerClose.tsx
 var import_radix_ui3 = require("radix-ui");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var DrawerClose = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui3.Dialog.Close, { "data-spark-component": "drawer-close", ...props });
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var DrawerClose = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radix_ui3.Dialog.Close, { "data-spark-component": "drawer-close", ...props });
 DrawerClose.displayName = "Drawer.Close";
 
 // src/drawer/DrawerCloseButton.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var DrawerCloseButton = ({
   "aria-label": ariaLabel,
   className,
   size = "md",
   intent = "neutral",
   design = "ghost",
-  children = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_Close.Close, {}),
+  children = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Close.Close, {}),
   ref,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   DrawerClose,
   {
     "data-spark-component": "drawer-close-button",
@@ -1053,7 +1099,7 @@ var DrawerCloseButton = ({
     className: (0, import_class_variance_authority7.cx)(["absolute", "top-sm", "right-xl"], className),
     asChild: true,
     ...rest,
-    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { children }) })
+    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { children }) })
   }
 );
 DrawerCloseButton.displayName = "Drawer.CloseButton";
@@ -1152,7 +1198,7 @@ var drawerContentStyles = (0, import_class_variance_authority8.cva)(
 );
 
 // src/drawer/DrawerContent.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var DrawerContent = ({
   className,
   size = "md",
@@ -1160,7 +1206,7 @@ var DrawerContent = ({
   onInteractOutside,
   ref,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   import_radix_ui4.Dialog.Content,
   {
     "data-spark-component": "drawer-content",
@@ -1184,14 +1230,14 @@ DrawerContent.displayName = "Drawer.Content";
 
 // src/drawer/DrawerDescription.tsx
 var import_radix_ui5 = require("radix-ui");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var DrawerDescription = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui5.Dialog.Description, { "data-spark-component": "drawer-description", ...props });
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DrawerDescription = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui5.Dialog.Description, { "data-spark-component": "drawer-description", ...props });
 DrawerDescription.displayName = "Drawer.Description";
 
 // src/drawer/DrawerFooter.tsx
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var DrawerFooter = ({ className, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DrawerFooter = ({ className, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "footer",
   {
     "data-spark-component": "drawer-footer",
@@ -1204,13 +1250,13 @@ DrawerFooter.displayName = "Drawer.Footer";
 
 // src/drawer/DrawerHeader.tsx
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var DrawerHeader = ({
   children,
   className,
   ref,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   "header",
   {
     "data-spark-component": "drawer-header",
@@ -1225,8 +1271,8 @@ DrawerHeader.displayName = "Dialog.Header";
 // src/drawer/DrawerOverlay.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
 var import_radix_ui6 = require("radix-ui");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var DrawerOverlay = ({ className, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var DrawerOverlay = ({ className, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   import_radix_ui6.Dialog.Overlay,
   {
     "data-spark-component": "drawer-overlay",
@@ -1245,15 +1291,15 @@ DrawerOverlay.displayName = "Drawer.Overlay";
 
 // src/drawer/DrawerPortal.tsx
 var import_radix_ui7 = require("radix-ui");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var DrawerPortal = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_radix_ui7.Dialog.Portal, { ...rest, children });
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var DrawerPortal = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_radix_ui7.Dialog.Portal, { ...rest, children });
 DrawerPortal.displayName = "Drawer.Portal";
 
 // src/drawer/DrawerTitle.tsx
 var import_class_variance_authority12 = require("class-variance-authority");
 var import_radix_ui8 = require("radix-ui");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var DrawerTitle = ({ className, ref, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var DrawerTitle = ({ className, ref, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   import_radix_ui8.Dialog.Title,
   {
     "data-spark-component": "drawer-title",
@@ -1266,8 +1312,8 @@ DrawerTitle.displayName = "Drawer.Title";
 
 // src/drawer/DrawerTrigger.tsx
 var import_radix_ui9 = require("radix-ui");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var DrawerTrigger = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_radix_ui9.Dialog.Trigger, { "data-spark-component": "drawer-trigger", ...props });
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var DrawerTrigger = (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui9.Dialog.Trigger, { "data-spark-component": "drawer-trigger", ...props });
 DrawerTrigger.displayName = "Drawer.Trigger";
 
 // src/drawer/index.ts