@spark-ui/components/dist/drawer/index.mjs

Spark (Leboncoin design system) components.

import {
  IconButton
} from "../chunk-MKN2Y3W6.mjs";
import "../chunk-3PTXYZYN.mjs";
import "../chunk-GAK4SC2F.mjs";
import {
  Icon
} from "../chunk-UMUMFMFB.mjs";
import "../chunk-KEGAAGJW.mjs";
import "../chunk-6QCEPQ3U.mjs";

// src/drawer/Drawer.tsx
import { Dialog as RadixDrawer } from "radix-ui";

// src/drawer/DrawerContext.tsx
import { createContext, useContext } from "react";
import { jsx } from "react/jsx-runtime";
var DrawerContext = createContext(null);
var DrawerProvider = ({
  children: childrenProp,
  withFade = false
}) => {
  return /* @__PURE__ */ jsx(
    DrawerContext.Provider,
    {
      value: {
        withFade
      },
      children: childrenProp
    }
  );
};
var useDrawer = () => {
  const context = useContext(DrawerContext);
  if (!context) {
    throw Error("useDrawer must be used within a Drawer provider");
  }
  return context;
};

// src/drawer/Drawer.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var Drawer = ({ children, withFade = false, ...rest }) => /* @__PURE__ */ jsx2(DrawerProvider, { withFade, children: /* @__PURE__ */ jsx2(RadixDrawer.Root, { ...rest, children }) });
Drawer.displayName = "Drawer.Root";

// src/drawer/DrawerBody.tsx
import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
import { useScrollOverflow } from "@spark-ui/hooks/use-scroll-overflow";
import { useRef } from "react";

// src/drawer/DrawerBody.styles.ts
import { cva } from "class-variance-authority";
var drawerBodyStyles = cva(
  ["grow", "overflow-y-auto", "outline-hidden", "focus-visible:u-outline"],
  {
    variants: {
      inset: {
        true: "",
        false: "px-xl py-lg"
      }
    },
    defaultVariants: {
      inset: false
    }
  }
);

// src/drawer/DrawerBody.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var DrawerBody = ({
  children,
  inset = false,
  className,
  ref: forwardedRef,
  ...rest
}) => {
  const scrollAreaRef = useRef(null);
  const ref = useMergeRefs(forwardedRef, scrollAreaRef);
  const { withFade } = useDrawer();
  const overflow = useScrollOverflow(scrollAreaRef);
  return /* @__PURE__ */ jsx3(
    "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
import { Close as CloseSVG } from "@spark-ui/icons/Close";
import { cx } from "class-variance-authority";

// src/drawer/DrawerClose.tsx
import { Dialog as RadixDrawer2 } from "radix-ui";
import { jsx as jsx4 } from "react/jsx-runtime";
var DrawerClose = (props) => /* @__PURE__ */ jsx4(RadixDrawer2.Close, { "data-spark-component": "drawer-close", ...props });
DrawerClose.displayName = "Drawer.Close";

// src/drawer/DrawerCloseButton.tsx
import { jsx as jsx5 } from "react/jsx-runtime";
var DrawerCloseButton = ({
  "aria-label": ariaLabel,
  className,
  size = "md",
  intent = "neutral",
  design = "ghost",
  children = /* @__PURE__ */ jsx5(CloseSVG, {}),
  ref,
  ...rest
}) => /* @__PURE__ */ jsx5(
  DrawerClose,
  {
    "data-spark-component": "drawer-close-button",
    ref,
    className: cx(["absolute", "top-sm", "right-xl"], className),
    asChild: true,
    ...rest,
    children: /* @__PURE__ */ jsx5(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx5(Icon, { children }) })
  }
);
DrawerCloseButton.displayName = "Drawer.CloseButton";

// src/drawer/DrawerContent.tsx
import { Dialog as RadixDrawer3 } from "radix-ui";

// src/drawer/DrawerContent.styles.tsx
import { cva as cva2 } from "class-variance-authority";
var drawerContentStyles = cva2(
  [
    ["fixed", "z-modal", "flex", "flex-col"],
    ["bg-surface", "shadow-md"]
  ],
  {
    variants: {
      size: {
        sm: "",
        md: "",
        lg: "",
        fluid: "",
        fullscreen: "h-screen w-screen"
      },
      side: {
        right: [
          "inset-y-0 right-0",
          "data-[state=open]:animate-slide-in-right",
          "data-[state=closed]:animate-slide-out-right"
        ],
        left: [
          "inset-y-0 left-0",
          "data-[state=open]:animate-slide-in-left",
          "data-[state=closed]:animate-slide-out-left"
        ],
        top: [
          "top-0 left-0",
          "w-screen",
          "data-[state=open]:animate-slide-in-top",
          "data-[state=closed]:animate-slide-out-top"
        ],
        bottom: [
          "bottom-0 left-0",
          "w-screen",
          "data-[state=open]:animate-slide-in-bottom",
          "data-[state=closed]:animate-slide-out-bottom"
        ]
      }
    },
    compoundVariants: [
      {
        side: ["right", "left"],
        size: "sm",
        class: ["w-sz-480", "max-w-full"]
      },
      {
        side: ["right", "left"],
        size: "md",
        class: ["w-sz-672", "max-w-full"]
      },
      {
        side: ["right", "left"],
        size: "lg",
        class: ["w-sz-864", "max-w-full"]
      },
      {
        side: ["left", "right"],
        size: "fluid",
        class: ["w-auto", "max-w-full"]
      },
      {
        side: ["top", "bottom"],
        size: "sm",
        class: ["h-sz-480", "max-h-full"]
      },
      {
        side: ["top", "bottom"],
        size: "md",
        class: ["h-sz-672", "max-h-full"]
      },
      {
        side: ["top", "bottom"],
        size: "lg",
        class: ["h-sz-864", "max-h-full"]
      },
      {
        side: ["top", "bottom"],
        size: "fluid",
        class: ["h-auto", "max-h-full"]
      }
    ],
    defaultVariants: {
      side: "right",
      size: "md"
    }
  }
);

// src/drawer/DrawerContent.tsx
import { jsx as jsx6 } from "react/jsx-runtime";
var DrawerContent = ({
  className,
  size = "md",
  side = "right",
  onInteractOutside,
  ref,
  ...rest
}) => /* @__PURE__ */ jsx6(
  RadixDrawer3.Content,
  {
    "data-spark-component": "drawer-content",
    ref,
    className: drawerContentStyles({
      size,
      side,
      className
    }),
    onInteractOutside: (e) => {
      const isForegroundElement = e.target.closest(".z-toast, .z-popover");
      if (isForegroundElement) {
        e.preventDefault();
      }
      onInteractOutside?.(e);
    },
    ...rest
  }
);
DrawerContent.displayName = "Drawer.Content";

// src/drawer/DrawerDescription.tsx
import { Dialog as RadixDrawer4 } from "radix-ui";
import { jsx as jsx7 } from "react/jsx-runtime";
var DrawerDescription = (props) => /* @__PURE__ */ jsx7(RadixDrawer4.Description, { "data-spark-component": "drawer-description", ...props });
DrawerDescription.displayName = "Drawer.Description";

// src/drawer/DrawerFooter.tsx
import { cx as cx2 } from "class-variance-authority";
import { jsx as jsx8 } from "react/jsx-runtime";
var DrawerFooter = ({ className, ref, ...rest }) => /* @__PURE__ */ jsx8(
  "footer",
  {
    "data-spark-component": "drawer-footer",
    ref,
    className: cx2(["px-xl", "py-lg"], className),
    ...rest
  }
);
DrawerFooter.displayName = "Drawer.Footer";

// src/drawer/DrawerHeader.tsx
import { cx as cx3 } from "class-variance-authority";
import { jsx as jsx9 } from "react/jsx-runtime";
var DrawerHeader = ({
  children,
  className,
  ref,
  ...rest
}) => /* @__PURE__ */ jsx9(
  "header",
  {
    "data-spark-component": "drawer-header",
    ref,
    className: cx3(["px-xl", "py-lg"], className),
    ...rest,
    children
  }
);
DrawerHeader.displayName = "Dialog.Header";

// src/drawer/DrawerOverlay.tsx
import { cx as cx4 } from "class-variance-authority";
import { Dialog as RadixDrawer5 } from "radix-ui";
import { jsx as jsx10 } from "react/jsx-runtime";
var DrawerOverlay = ({ className, ref, ...rest }) => /* @__PURE__ */ jsx10(
  RadixDrawer5.Overlay,
  {
    "data-spark-component": "drawer-overlay",
    ref,
    className: cx4(
      ["fixed", "top-0", "left-0", "w-screen", "h-screen", "z-overlay"],
      ["bg-overlay/dim-1"],
      ["data-[state=open]:animate-fade-in"],
      ["data-[state=closed]:animate-fade-out"],
      className
    ),
    ...rest
  }
);
DrawerOverlay.displayName = "Drawer.Overlay";

// src/drawer/DrawerPortal.tsx
import { Dialog as RadixDrawer6 } from "radix-ui";
import { jsx as jsx11 } from "react/jsx-runtime";
var DrawerPortal = ({ children, ...rest }) => /* @__PURE__ */ jsx11(RadixDrawer6.Portal, { ...rest, children });
DrawerPortal.displayName = "Drawer.Portal";

// src/drawer/DrawerTitle.tsx
import { cx as cx5 } from "class-variance-authority";
import { Dialog as RadixDrawer7 } from "radix-ui";
import { jsx as jsx12 } from "react/jsx-runtime";
var DrawerTitle = ({ className, ref, ...others }) => /* @__PURE__ */ jsx12(
  RadixDrawer7.Title,
  {
    "data-spark-component": "drawer-title",
    ref,
    className: cx5("text-headline-2 text-on-surface", className),
    ...others
  }
);
DrawerTitle.displayName = "Drawer.Title";

// src/drawer/DrawerTrigger.tsx
import { Dialog as RadixDrawer8 } from "radix-ui";
import { jsx as jsx13 } from "react/jsx-runtime";
var DrawerTrigger = (props) => /* @__PURE__ */ jsx13(RadixDrawer8.Trigger, { "data-spark-component": "drawer-trigger", ...props });
DrawerTrigger.displayName = "Drawer.Trigger";

// src/drawer/index.ts
var Drawer2 = Object.assign(Drawer, {
  Trigger: DrawerTrigger,
  Portal: DrawerPortal,
  Overlay: DrawerOverlay,
  Content: DrawerContent,
  Header: DrawerHeader,
  Body: DrawerBody,
  Footer: DrawerFooter,
  CloseButton: DrawerCloseButton,
  Title: DrawerTitle,
  Description: DrawerDescription
});
Drawer2.displayName = "Drawer";
DrawerTrigger.displayName = "Drawer.Trigger";
DrawerPortal.displayName = "Drawer.Portal";
DrawerOverlay.displayName = "Drawer.Overlay";
DrawerContent.displayName = "Drawer.Content";
DrawerHeader.displayName = "Drawer.Header";
DrawerBody.displayName = "Drawer.Body";
DrawerFooter.displayName = "Drawer.Footer";
DrawerCloseButton.displayName = "Drawer.CloseButton";
DrawerTitle.displayName = "Drawer.Title";
DrawerDescription.displayName = "Drawer.Description";
export {
  Drawer2 as Drawer
};
//# sourceMappingURL=index.mjs.map