@spark-ui/components/dist/chunk-QS2FHLSL.mjs

Spark (Leboncoin design system) components.

import {
  IconButton
} from "./chunk-QLOIAU3C.mjs";
import {
  Icon
} from "./chunk-AESXFMCC.mjs";

// src/popover/Popover.tsx
import { Popover as RadixPopover } from "radix-ui";

// src/popover/PopoverContext.tsx
import { createContext, useContext, useState } from "react";
import { jsx } from "react/jsx-runtime";
var PopoverContext = createContext(null);
var ID_PREFIX = ":popover";
var PopoverProvider = ({
  children,
  intent
}) => {
  const [headerId, setHeaderId] = useState(null);
  return /* @__PURE__ */ jsx(
    PopoverContext.Provider,
    {
      value: {
        headerId,
        setHeaderId,
        intent
      },
      children
    }
  );
};
var usePopover = () => {
  const context = useContext(PopoverContext);
  if (!context) {
    throw Error("usePopover must be used within a Popover provider");
  }
  return context;
};

// src/popover/Popover.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var Popover = ({ children, intent = "surface", modal = false, ...rest }) => {
  return /* @__PURE__ */ jsx2(PopoverProvider, { intent, children: /* @__PURE__ */ jsx2(RadixPopover.Root, { "data-spark-component": "popover", modal, ...rest, children }) });
};
Popover.displayName = "Popover";

// src/popover/PopoverAnchor.tsx
import { Popover as RadixPopover2 } from "radix-ui";
import { jsx as jsx3 } from "react/jsx-runtime";
var Anchor = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ jsx3(RadixPopover2.Anchor, { "data-spark-component": "popover-anchor", ref, asChild, ...rest, children });
Anchor.displayName = "Popover.Anchor";

// src/popover/PopoverArrow.tsx
import { cva } from "class-variance-authority";
import { Popover as RadixPopover3 } from "radix-ui";
import { jsx as jsx4 } from "react/jsx-runtime";
var Arrow = ({
  asChild = false,
  width = 16,
  height = 8,
  className,
  ref,
  ...rest
}) => {
  const { intent } = usePopover();
  const styles2 = cva("visible", {
    variants: {
      intent: {
        surface: "fill-surface",
        main: "fill-main-container",
        support: "fill-support-container",
        accent: "fill-accent-container",
        basic: "fill-basic-container",
        success: "fill-success-container",
        alert: "fill-alert-container",
        danger: "fill-error-container",
        info: "fill-info-container",
        neutral: "fill-neutral-container"
      }
    },
    defaultVariants: {
      intent: "surface"
    }
  });
  return /* @__PURE__ */ jsx4(
    RadixPopover3.Arrow,
    {
      "data-spark-component": "popover-arrow",
      ref,
      className: styles2({ intent, className }),
      asChild,
      width,
      height,
      ...rest
    }
  );
};
Arrow.displayName = "Popover.Arrow";

// src/popover/PopoverCloseButton.tsx
import { Close as CloseSVG } from "@spark-ui/icons/Close";
import { cx } from "class-variance-authority";
import { Popover as RadixPopover4 } from "radix-ui";
import { jsx as jsx5 } from "react/jsx-runtime";
var CloseButton = ({
  "aria-label": ariaLabel,
  className,
  ref,
  ...rest
}) => {
  return /* @__PURE__ */ jsx5(
    RadixPopover4.Close,
    {
      "data-spark-component": "popover-close-button",
      ref,
      className: cx("right-md top-md absolute", className),
      asChild: true,
      ...rest,
      children: /* @__PURE__ */ jsx5(IconButton, { size: "sm", intent: "neutral", design: "ghost", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx5(Icon, { children: /* @__PURE__ */ jsx5(CloseSVG, {}) }) })
    }
  );
};
CloseButton.displayName = "Popover.CloseButton";

// src/popover/PopoverContent.tsx
import { Popover as RadixPopover5 } from "radix-ui";

// src/popover/PopoverContent.styles.ts
import { cva as cva2 } from "class-variance-authority";
var styles = cva2(
  [
    "rounded-md",
    "shadow-sm",
    "focus-visible:outline-hidden focus-visible:u-outline",
    "max-h-(--radix-popper-available-height) overflow-y-auto"
  ],
  {
    variants: {
      intent: {
        surface: "bg-surface text-on-surface",
        main: "bg-main-container text-on-main-container",
        support: "bg-support-container text-on-support-container",
        accent: "bg-accent-container text-on-accent-container",
        basic: "bg-basic-container text-on-basic-container",
        success: "bg-success-container text-on-success-container",
        alert: "bg-alert-container text-on-alert-container",
        danger: "bg-error-container text-on-error-container",
        info: "bg-info-container text-on-info-container",
        neutral: "bg-neutral-container text-on-neutral-container"
      },
      matchTriggerWidth: {
        true: "w-(--radix-popper-anchor-width)"
      },
      enforceBoundaries: {
        true: ["max-w-(--radix-popper-available-width)"]
      },
      inset: {
        true: "overflow-hidden",
        false: "p-lg"
      },
      elevation: {
        dropdown: "z-dropdown",
        popover: "z-popover"
      }
    },
    compoundVariants: [
      {
        inset: false,
        /**
         * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.
         */
        class: "has-data-[spark-component=popover-close-button]:pr-3xl"
      },
      {
        enforceBoundaries: false,
        matchTriggerWidth: false,
        class: "max-w-[min(var(--spacing-sz-384),100vw)]"
      }
    ],
    defaultVariants: {
      matchTriggerWidth: false,
      enforceBoundaries: false,
      inset: false,
      intent: "surface",
      elevation: "popover"
    }
  }
);

// src/popover/PopoverContent.tsx
import { jsx as jsx6 } from "react/jsx-runtime";
var Content = ({
  // Spark props
  className,
  children,
  matchTriggerWidth = false,
  // Radix props
  align = "center",
  arrowPadding = 16,
  // In order not to overlap the arrow on the rounded corners of the popover.
  asChild = false,
  avoidCollisions = true,
  "aria-labelledby": ariaLabelledBy,
  collisionBoundary,
  collisionPadding = 0,
  hideWhenDetached = false,
  side = "bottom",
  sideOffset = 8,
  sticky = "partial",
  inset = false,
  elevation = "popover",
  ref,
  ...rest
}) => {
  const { headerId, intent } = usePopover();
  return /* @__PURE__ */ jsx6(
    RadixPopover5.Content,
    {
      "aria-labelledby": headerId || ariaLabelledBy,
      className: styles({
        enforceBoundaries: !!collisionBoundary,
        matchTriggerWidth,
        inset,
        elevation,
        intent,
        className
      }),
      "data-spark-component": "popover-content",
      ref,
      ...{
        align,
        arrowPadding,
        asChild,
        avoidCollisions,
        collisionBoundary,
        collisionPadding,
        hideWhenDetached,
        side,
        sideOffset,
        sticky
      },
      ...rest,
      children
    }
  );
};
Content.displayName = "Popover.Content";

// src/popover/PopoverHeader.tsx
import { cx as cx2 } from "class-variance-authority";
import { useId, useLayoutEffect } from "react";
import { jsx as jsx7 } from "react/jsx-runtime";
var Header = ({ children, className, ref, ...rest }) => {
  const id = `${ID_PREFIX}-header-${useId()}`;
  const { setHeaderId } = usePopover();
  useLayoutEffect(() => {
    setHeaderId(id);
    return () => setHeaderId(null);
  }, [id, setHeaderId]);
  return /* @__PURE__ */ jsx7("header", { id, ref, className: cx2("mb-md text-headline-2", className), ...rest, children });
};
Header.displayName = "Popover.Header";

// src/popover/PopoverPortal.tsx
import { Popover as RadixPopover6 } from "radix-ui";
import { jsx as jsx8 } from "react/jsx-runtime";
var Portal = ({ children, ...rest }) => /* @__PURE__ */ jsx8(RadixPopover6.Portal, { ...rest, children });
Portal.displayName = "Popover.Portal";

// src/popover/PopoverTrigger.tsx
import { Popover as RadixPopover7 } from "radix-ui";
import { jsx as jsx9 } from "react/jsx-runtime";
var Trigger = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ jsx9(
  RadixPopover7.Trigger,
  {
    "data-spark-component": "popover-trigger",
    ref,
    asChild,
    ...rest,
    children
  }
);
Trigger.displayName = "Popover.Trigger";

// src/popover/index.ts
var Popover2 = Object.assign(Popover, {
  Anchor,
  Arrow,
  CloseButton,
  Content,
  Header,
  Portal,
  Trigger
});
Popover2.displayName = "Popover";
Anchor.displayName = "Popover.Anchor";
Arrow.displayName = "Popover.Arrow";
CloseButton.displayName = "Popover.CloseButton";
Content.displayName = "Popover.Content";
Header.displayName = "Popover.Header";
Portal.displayName = "Popover.Portal";
Trigger.displayName = "Popover.Trigger";

export {
  Popover2 as Popover
};
//# sourceMappingURL=chunk-QS2FHLSL.mjs.map