@eightshift/ui-components 3.0.1 → 5.0.0

package/dist/components/spacer/spacer.js

@@ -1,97 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { RichLabel } from "../rich-label/rich-label.js";
-/**
- * A simple spacer/divider component, with optional text or icon.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {SpacerSize} [props.size='m'] - The size of the spacer. Can be 's' or 'm'.
- * @param {boolean} [props.border=false] - Whether to show a border in the middle.
- * @param {string} [props.className] - Additional classes to add.
- * @param {string} [props.text] - Text to display.
- * @param {string} [props.subtitle] - Subtitle to display.
- * @param {JSX.Element} [props.icon] - Icon to display.
- * @param {boolean} [props.vertical=false] - Whether the spacer is vertical.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The Spacer component.
- *
- * @typedef {'px' | 'xs' | 's' | 'm'} SpacerSize
- *
- * @example
- * <Spacer />
- *
- * <Spacer border />
- *
- * <Spacer vertical />
- * <Spacer vertical border />
- *
- * <Spacer text='My divider' icon={icons.myIcon} />
- *
- * @preserve
- */
-const Spacer = (props) => {
-  const { size = "px", border, className, text, subtitle, icon, vertical = false, hidden } = props;
-  if (hidden) {
-    return null;
-  }
-  const sizes = {
-    px: {
-      sizeHorizontal: "es:h-px",
-      sizeHorizontalBorder: "es:h-px",
-      sizeVertical: "es:w-px",
-      sizeVerticalBorder: "es:w-px"
-    },
-    xs: {
-      sizeHorizontal: "es:h-1",
-      sizeHorizontalBorder: "es:h-0.5",
-      sizeVertical: "es:w-1",
-      sizeVerticalBorder: "es:w-0.5"
-    },
-    s: {
-      sizeHorizontal: "es:h-2.5",
-      sizeHorizontalBorder: "es:h-1",
-      sizeVertical: "es:w-2.5",
-      sizeVerticalBorder: "es:w-1"
-    },
-    m: {
-      sizeHorizontal: "es:h-5",
-      sizeHorizontalBorder: "es:h-2",
-      sizeVertical: "es:w-5",
-      sizeVerticalBorder: "es:w-2"
-    }
-  };
-  const spaceClass = clsx(
-    vertical ? "es:h-full" : "es:w-full",
-    !vertical && !border && sizes[size].sizeHorizontal,
-    !vertical && border && sizes[size].sizeHorizontalBorder,
-    vertical && !border && sizes[size].sizeVertical,
-    vertical && border && sizes[size].sizeVerticalBorder
-  );
-  if (text || icon) {
-    return /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:items-center es:gap-1.5", className), children: [
-      /* @__PURE__ */ jsx(
-        RichLabel,
-        {
-          icon,
-          label: text,
-          subtitle,
-          className: "es:shrink-0 es:text-secondary-500"
-        }
-      ),
-      border && /* @__PURE__ */ jsx("div", { className: "es:h-px es:w-full es:bg-secondary-300 es:leading-3" })
-    ] });
-  }
-  if (border) {
-    return /* @__PURE__ */ jsxs("div", { className, children: [
-      size !== "px" && /* @__PURE__ */ jsx("div", { className: spaceClass }),
-      /* @__PURE__ */ jsx("div", { className: clsx("es:bg-secondary-300", vertical ? "es:h-full es:w-px" : "es:h-px es:w-full") }),
-      size !== "px" && /* @__PURE__ */ jsx("div", { className: spaceClass })
-    ] });
-  }
-  return /* @__PURE__ */ jsx("div", { className: clsx(spaceClass, className) });
-};
-export {
-  Spacer
-};