@kiwicom/orbit-components/lib/Separator/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _tailwind = require("../common/tailwind");
const BORDER_TYPE_CLASSES = {
  none: "border-none",
  solid: "border-solid",
  dashed: "border-dashed",
  dotted: "border-dotted",
  double: "border-double"
};
var Indent = /*#__PURE__*/function (Indent) {
  Indent["none"] = "none";
  Indent["small"] = "small";
  Indent["medium"] = "medium";
  Indent["large"] = "large";
  Indent["XLarge"] = "XLarge";
  Indent["XXLarge"] = "XXLarge";
  Indent["THREE_HUNDRED"] = "300";
  Indent["FOUR_HUNDRED"] = "400";
  Indent["SIX_HUNDRED"] = "600";
  Indent["EIGHT_HUNDRED"] = "800";
  Indent["ONE_THOUSAND"] = "1000";
  return Indent;
}(Indent || {});
function getSideOffsetAmount(indent, align) {
  const classes = {
    left: {
      [Indent.none]: "w-full",
      [Indent.THREE_HUNDRED]: "w-[calc(100%_-_theme(spacing.300))]",
      [Indent.FOUR_HUNDRED]: "w-[calc(100%_-_theme(spacing.400))]",
      [Indent.SIX_HUNDRED]: "w-[calc(100%_-_theme(spacing.600))]",
      [Indent.EIGHT_HUNDRED]: "w-[calc(100%_-_theme(spacing.800))]",
      [Indent.ONE_THOUSAND]: "w-[calc(100%_-_theme(spacing.1000))]"
    },
    right: {
      [Indent.none]: "w-full",
      [Indent.THREE_HUNDRED]: "ms-300 w-[calc(100%_-_theme(spacing.300))]",
      [Indent.FOUR_HUNDRED]: "ms-400 w-[calc(100%_-_theme(spacing.400))]",
      [Indent.SIX_HUNDRED]: "ms-600 w-[calc(100%_-_theme(spacing.600))]",
      [Indent.EIGHT_HUNDRED]: "ms-800 w-[calc(100%_-_theme(spacing.800))]",
      [Indent.ONE_THOUSAND]: "ms-1000 w-[calc(100%_-_theme(spacing.1000))]"
    },
    center: {
      [Indent.none]: "w-full",
      [Indent.THREE_HUNDRED]: "ms-300 w-[calc(100%_-_theme(spacing.300)*2)]",
      [Indent.FOUR_HUNDRED]: "ms-400 w-[calc(100%_-_theme(spacing.400)*2)]",
      [Indent.SIX_HUNDRED]: "ms-600 w-[calc(100%_-_theme(spacing.600)*2)]",
      [Indent.EIGHT_HUNDRED]: "ms-800 w-[calc(100%_-_theme(spacing.800)*2)]",
      [Indent.ONE_THOUSAND]: "ms-1000 w-[calc(100%_-_theme(spacing.1000)*2)]"
    }
  };
  return classes[align][indent];
}
const Separator = ({
  align = "left",
  sideOffset = "none",
  spaceAfter,
  type = "solid",
  color,
  label,
  ariaHidden
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("relative min-h-px w-full", spaceAfter && (0, _tailwind.getSpaceAfterClasses)(spaceAfter))
  }, /*#__PURE__*/React.createElement("hr", {
    className: (0, _clsx.default)("orbit-separator", "absolute start-0 top-1/2 mt-0 box-border -translate-y-1/2 border-t", color || "border-elevation-flat-border-color", getSideOffsetAmount(sideOffset, align), BORDER_TYPE_CLASSES[type]),
    "aria-hidden": ariaHidden
  }), label && /*#__PURE__*/React.createElement("span", {
    className: "bg-white-normal px-100 absolute left-1/2 top-1/2 flex min-w-max -translate-x-1/2 -translate-y-1/2 items-center justify-center"
  }, label));
};
var _default = exports.default = Separator;