@frank-auth/react/dist/esm/components/forms/field-error.js

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsx as i, jsxs as $ } from "react/jsx-runtime";
import { HelperText as y } from "../ui/input/input.js";
import { useTheme as E } from "../../theme/context.js";
import l from "@emotion/styled";
import { AnimatePresence as k, motion as v } from "framer-motion";
import t from "react";
const b = l(v.div)`
	display: flex;
	align-items: flex-start;
	gap: ${(e) => e.theme.spacing[1]};
	color: ${(e) => e.theme.colors.danger[600]};

	font-size: ${(e) => {
  switch (e.size) {
    case "sm":
      return e.theme.fontSizes.xs;
    case "lg":
      return e.theme.fontSizes.base;
    default:
      return e.theme.fontSizes.sm;
  }
}};

	${(e) => {
  switch (e.variant) {
    case "inline":
      return `
					margin-left: ${e.theme.spacing[2]};
					display: inline-flex;
				`;
    case "tooltip":
      return `
					position: absolute;
					z-index: ${e.theme.zIndex.tooltip};
					margin-top: ${e.theme.spacing[1]};
				`;
    default:
      return "";
  }
}}
`, w = l.span`
	color: ${(e) => e.theme.colors.danger[500]};
	margin-top: ${(e) => e.theme.spacing[0.5] || "0.125rem"};
	flex-shrink: 0;

	svg {
		width: ${(e) => e.theme.spacing[4]};
		height: ${(e) => e.theme.spacing[4]};
	}
`, z = l.div`
	flex: 1;
	min-width: 0;
`, C = l.div`
	${(e) => e.hasMargin && `margin-top: ${e.theme.spacing[1]};`}
`;
l.span`
	display: block;
	color: inherit;
	word-break: break-words;
`;
function I({
  error: e,
  fieldName: n,
  immediate: a = !1,
  className: o = "",
  icon: c,
  showMultiple: u = !1,
  variant: h = "default",
  size: d = "md"
}) {
  const { theme: r } = E(), s = t.useMemo(() => e ? Array.isArray(e) ? e.filter(Boolean) : [e] : [], [e]);
  if (s.length === 0) return null;
  const m = u ? s : s.slice(0, 1), x = {
    initial: { opacity: 0, y: -10, height: 0 },
    animate: {
      opacity: 1,
      y: 0,
      height: "auto",
      transition: { duration: 0.2, ease: "easeOut" }
    },
    exit: {
      opacity: 0,
      y: -10,
      height: 0,
      transition: { duration: 0.15, ease: "easeIn" }
    }
  }, f = c || /* @__PURE__ */ i(
    "svg",
    {
      fill: "none",
      stroke: "currentColor",
      viewBox: "0 0 24 24",
      "aria-hidden": "true",
      children: /* @__PURE__ */ i(
        "path",
        {
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: 2,
          d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        }
      )
    }
  );
  return /* @__PURE__ */ i(k, { mode: "wait", children: m.length > 0 && /* @__PURE__ */ $(
    b,
    {
      theme: r,
      size: d,
      variant: h,
      className: o,
      initial: a ? "animate" : "initial",
      animate: "animate",
      exit: "exit",
      variants: x,
      role: "alert",
      "aria-live": "polite",
      "aria-relevant": "all",
      children: [
        f && /* @__PURE__ */ i(w, { theme: r, children: f }),
        /* @__PURE__ */ i(z, { theme: r, children: m.map((g, p) => /* @__PURE__ */ i(
          C,
          {
            theme: r,
            hasMargin: p > 0,
            children: /* @__PURE__ */ i(y, { theme: r, isError: !!g, children: g })
          },
          `${n}-error-${p}`
        )) })
      ]
    }
  ) });
}
function L(e) {
  const [n, a] = t.useState(null), [o, c] = t.useState(!1), u = t.useMemo(() => o && !!n, [o, n]), h = t.useCallback(() => {
    a(null);
  }, []), d = t.useCallback(
    (m) => {
      a(m);
    },
    []
  ), r = t.useCallback(() => {
    c(!0);
  }, []), s = t.useCallback(() => {
    a(null), c(!1);
  }, []);
  return {
    error: n,
    showError: u,
    touched: o,
    setError: d,
    clearError: h,
    touch: r,
    reset: s,
    fieldName: e
  };
}
var _ = I;
export {
  I as FieldError,
  _ as default,
  L as useFieldError
};
//# sourceMappingURL=field-error.js.map