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

Spark (Leboncoin design system) components.

import {
  IconButton
} from "../chunk-QLOIAU3C.mjs";
import "../chunk-USSL4UZ5.mjs";
import "../chunk-MUNDKRAE.mjs";
import {
  Icon
} from "../chunk-AESXFMCC.mjs";
import "../chunk-NBZKMCHF.mjs";
import "../chunk-4F5DOL57.mjs";

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

// 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 jsx2 } from "react/jsx-runtime";
var DrawerBody = ({
  children,
  inset = false,
  className,
  ref,
  ...rest
}) => /* @__PURE__ */ jsx2("div", { ref, className: drawerBodyStyles({ inset, className }), ...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 jsx3 } from "react/jsx-runtime";
var DrawerClose = (props) => /* @__PURE__ */ jsx3(RadixDrawer2.Close, { ...props });
DrawerClose.displayName = "Drawer.Close";

// src/drawer/DrawerCloseButton.tsx
import { jsx as jsx4 } from "react/jsx-runtime";
var DrawerCloseButton = ({
  "aria-label": ariaLabel,
  className,
  size = "md",
  intent = "neutral",
  design = "ghost",
  children = /* @__PURE__ */ jsx4(CloseSVG, {}),
  ref,
  ...rest
}) => /* @__PURE__ */ jsx4(
  DrawerClose,
  {
    ref,
    className: cx(["absolute", "top-sm", "right-xl"], className),
    asChild: true,
    ...rest,
    children: /* @__PURE__ */ jsx4(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx4(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 jsx5 } from "react/jsx-runtime";
var DrawerContent = ({
  className,
  size = "md",
  side = "right",
  onInteractOutside,
  ref,
  ...rest
}) => /* @__PURE__ */ jsx5(
  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 jsx6 } from "react/jsx-runtime";
var DrawerDescription = (props) => /* @__PURE__ */ jsx6(RadixDrawer4.Description, { ...props });
DrawerDescription.displayName = "Drawer.Description";

// src/drawer/DrawerFooter.tsx
import { cx as cx2 } from "class-variance-authority";
import { jsx as jsx7 } from "react/jsx-runtime";
var DrawerFooter = ({ className, ref, ...rest }) => /* @__PURE__ */ jsx7("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 jsx8 } from "react/jsx-runtime";
var DrawerHeader = ({
  children,
  className,
  ref,
  ...rest
}) => /* @__PURE__ */ jsx8("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 jsx9 } from "react/jsx-runtime";
var DrawerOverlay = ({ className, ref, ...rest }) => /* @__PURE__ */ jsx9(
  RadixDrawer5.Overlay,
  {
    ref,
    className: cx4(
      ["fixed", "top-0", "left-0", "w-screen", "h-screen", "z-overlay"],
      ["bg-overlay/dim-3"],
      ["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 jsx10 } from "react/jsx-runtime";
var DrawerPortal = ({ children, ...rest }) => /* @__PURE__ */ jsx10(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 jsx11 } from "react/jsx-runtime";
var DrawerTitle = ({ className, ref, ...others }) => /* @__PURE__ */ jsx11(
  RadixDrawer7.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 jsx12 } from "react/jsx-runtime";
var DrawerTrigger = (props) => /* @__PURE__ */ jsx12(RadixDrawer8.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