@frank-auth/react/dist/esm/components/ui/divider/divider.js

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsx as i, jsxs as k } from "react/jsx-runtime";
import { css as o } from "@emotion/react";
import c from "@emotion/styled";
import { useTheme as w } from "../../../theme/context.js";
import S from "react";
const p = (e) => {
  const { theme: r, color: s = "default" } = e;
  switch (s) {
    case "primary":
      return o`
				background-color: ${r.colors.primary[500]};
			`;
    case "secondary":
      return o`
				background-color: ${r.colors.secondary[500]};
			`;
    case "success":
      return o`
				background-color: ${r.colors.success[500]};
			`;
    case "warning":
      return o`
				background-color: ${r.colors.warning[500]};
			`;
    case "danger":
      return o`
				background-color: ${r.colors.danger[500]};
			`;
    default:
      return o`
				background-color: ${r.colors.border.primary};
			`;
  }
}, g = (e) => {
  const { size: r = "md", orientation: s = "horizontal" } = e, t = {
    sm: "1px",
    md: "2px",
    lg: "3px"
  }[r];
  return s === "vertical" ? o`
			width: ${t};
			height: auto;
			min-height: 100%;
		` : o`
		height: ${t};
		width: 100%;
	`;
}, C = c.div`
	border: none;
	margin: 0;
	flex-shrink: 0;

	${p}
	${g}

		/* Custom CSS prop */
	${(e) => e.css}
`, D = c.div`
  display: flex;
  align-items: center;
  width: 100%;
  
  ${(e) => e.orientation === "vertical" && o`
    flex-direction: column;
    height: 100%;
    width: auto;
  `}

  ${(e) => {
  const r = {
    start: "flex-start",
    center: "center",
    end: "flex-end"
  }[e.contentAlign];
  return o`
      justify-content: ${r};
    `;
}}

  /* Custom CSS prop */
  ${(e) => e.css}
`, f = c.div`
  border: none;
  margin: 0;
  flex-shrink: 0;

  ${p}
  ${g}

  ${(e) => e.isFlexible && o`
    flex: 1;
  `}
`, z = c.div`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${(e) => e.orientation === "vertical" ? `${e.theme.spacing[2]} 0` : `0 ${e.theme.spacing[2]}`};
  background-color: ${(e) => e.theme.colors.background.primary};
  color: ${(e) => e.theme.colors.text.secondary};
  font-size: ${(e) => e.theme.fontSizes.sm};
  font-weight: ${(e) => e.theme.fontWeights.medium};
  white-space: nowrap;
  flex-shrink: 0;

  /* Add subtle styling for text content */
  ${(e) => typeof e.children == "string" && o`
    text-transform: uppercase;
    letter-spacing: 0.05em;
  `}
`, j = S.forwardRef(
  ({
    orientation: e = "horizontal",
    color: r = "default",
    size: s = "md",
    children: a,
    contentAlign: t = "center",
    className: d,
    css: l,
    ...m
  }, u) => {
    const { theme: n } = w();
    if (!a) {
      const v = {
        ...m,
        orientation: e,
        color: r,
        size: s,
        className: d,
        css: l,
        role: "separator",
        "aria-orientation": e
      };
      return /* @__PURE__ */ i(C, { theme: n, ref: u, ...v });
    }
    const $ = {
      ...m,
      orientation: e,
      color: r,
      size: s,
      contentAlign: t,
      className: d,
      css: l,
      role: "separator",
      "aria-orientation": e
    }, h = {
      orientation: e,
      color: r,
      size: s,
      theme: n
    }, x = {
      orientation: e,
      theme: n,
      children: a
    }, y = t === "center" || t === "end", b = t === "center" || t === "start";
    return /* @__PURE__ */ k(D, { theme: n, ref: u, ...$, children: [
      (t === "center" || t === "end") && /* @__PURE__ */ i(f, { ...h, isFlexible: y }),
      /* @__PURE__ */ i(z, { ...x }),
      (t === "center" || t === "start") && /* @__PURE__ */ i(f, { ...h, isFlexible: b })
    ] });
  }
);
j.displayName = "Divider";
export {
  j as Divider
};
//# sourceMappingURL=divider.js.map