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

Spark (Leboncoin design system) components.

// src/divider/Divider.tsx
import { cx } from "class-variance-authority";
import { Separator } from "radix-ui";

// src/divider/Divider.styles.ts
import { tw as tw2 } from "@spark-ui/internal-utils";
import { cva } from "class-variance-authority";

// src/divider/variants/intents.tsx
import { tw } from "@spark-ui/internal-utils";
var intentVariants = [
  // current
  {
    intent: "current",
    isEmpty: true,
    class: tw(["border-current"])
  },
  {
    intent: "current",
    isEmpty: false,
    class: tw(["before:border-current after:border-current"])
  },
  // outline
  {
    intent: "outline",
    isEmpty: true,
    class: tw(["border-outline"])
  },
  {
    intent: "outline",
    isEmpty: false,
    class: tw(["before:border-outline after:border-outline"])
  }
];

// src/divider/Divider.styles.ts
var dividerStyles = cva(["overflow-hidden group"], {
  variants: {
    isEmpty: {
      true: ["border-solid"],
      false: ["inline-flex items-center", "after:border-solid before:border-solid"]
    },
    orientation: {
      vertical: ["w-fit inline-flex"],
      horizontal: ["w-full"]
    },
    writingMode: {
      "horizontal-tb": [],
      "vertical-lr": []
    },
    alignment: {
      start: [],
      end: [],
      center: []
    },
    intent: {
      current: [],
      outline: []
    }
  },
  defaultVariants: {
    orientation: "horizontal",
    writingMode: "horizontal-tb",
    alignment: "center",
    intent: "outline"
  },
  compoundVariants: [
    {
      isEmpty: true,
      orientation: "horizontal",
      class: tw2(["my-lg border-t-sm"])
    },
    {
      isEmpty: true,
      orientation: "vertical",
      class: tw2(["mx-lg min-h-sz-24 border-l-sm"])
    },
    {
      isEmpty: false,
      orientation: "horizontal",
      writingMode: "horizontal-tb",
      class: tw2(["flex-row my-sm grow-0", "before:border-t-sm", "after:border-t-sm", "*:px-lg"])
    },
    {
      isEmpty: false,
      orientation: "vertical",
      writingMode: "horizontal-tb",
      class: tw2(["flex-col mx-sm", "before:border-l-sm", "after:border-l-sm", "*:py-lg"])
    },
    {
      isEmpty: false,
      orientation: "vertical",
      writingMode: "vertical-lr",
      class: tw2(["flex-col mx-sm", "before:border-l-sm", "after:border-l-sm", "*:px-lg"])
    },
    {
      isEmpty: false,
      orientation: "horizontal",
      alignment: "end",
      class: tw2(["after:w-sz-40 before:grow after:grow-0"])
    },
    {
      isEmpty: false,
      orientation: "horizontal",
      alignment: "start",
      class: tw2(["before:w-sz-40 before:grow-0 after:grow"])
    },
    {
      isEmpty: false,
      orientation: "horizontal",
      alignment: "center",
      class: tw2(["justify-center before:grow after:grow"])
    },
    {
      isEmpty: false,
      orientation: "vertical",
      alignment: "end",
      class: tw2(["after:h-sz-40 before:grow after:grow-0 before:min-h-sz-40"])
    },
    {
      isEmpty: false,
      orientation: "vertical",
      alignment: "start",
      class: tw2(["before:h-sz-40 before:grow-0 after:grow after:min-h-sz-40"])
    },
    {
      isEmpty: false,
      orientation: "vertical",
      alignment: "center",
      class: tw2(["justify-center before:grow after:grow before:min-h-sz-40 after:min-h-sz-40"])
    },
    ...intentVariants
  ]
});

// src/divider/Divider.tsx
import { jsx } from "react/jsx-runtime";
var Divider = ({
  asChild,
  className,
  isDecorative = false,
  children,
  orientation = "horizontal",
  writingMode = "horizontal-tb",
  alignment = "center",
  intent = "outline",
  ref,
  ...props
}) => {
  const isEmpty = asChild ? !children?.props?.children : !children;
  return /* @__PURE__ */ jsx(
    Separator.Root,
    {
      "data-spark-component": "divider",
      asChild,
      className: cx(
        dividerStyles({ isEmpty, orientation, alignment, intent, writingMode }),
        className
      ),
      orientation,
      ref,
      decorative: isDecorative,
      ...props,
      "data-writing-mode": writingMode,
      children
    }
  );
};
Divider.displayName = "Divider";

// src/divider/DividerContent.tsx
import { cx as cx2 } from "class-variance-authority";
import { jsx as jsx2 } from "react/jsx-runtime";
var DividerContent = ({ children, ref, className, ...props }) => {
  return children ? /* @__PURE__ */ jsx2(
    "span",
    {
      ref,
      ...props,
      className: cx2("group-data-[writing-mode=vertical-lr]:[writing-mode:vertical-lr]", className),
      children
    }
  ) : null;
};
DividerContent.displayName = "Divider.Content";

// src/divider/index.ts
var Divider2 = Object.assign(Divider, {
  Content: DividerContent
});
Divider2.displayName = "Divider";
Divider2.Content.displayName = "Divider.Content";
export {
  Divider2 as Divider
};
//# sourceMappingURL=index.mjs.map