@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
207 lines (202 loc) • 6.08 kB
JavaScript
'use client';
import { jsxs as u, jsx as r } from "react/jsx-runtime";
import { useTheme as z } from "../../../theme/context.js";
import { getColorVariant as d } from "../../../theme/styled.js";
import { css as o } from "@emotion/react";
import l from "@emotion/styled";
import k from "react";
const S = (e) => {
const { theme: t, variant: s = "flat", color: i = "primary" } = e, n = d(t, i, 500), a = d(t, i, 50), h = d(t, i, 200);
switch (s) {
case "solid":
return o`
background-color: ${n};
color: ${t.colors.text.inverse};
border: 1px solid ${n};
`;
case "bordered":
return o`
background-color: ${t.colors.background.primary};
color: ${n};
border: 1px solid ${n};
`;
case "light":
return o`
background-color: ${a};
color: ${d(t, i, 700)};
border: 1px solid transparent;
`;
case "flat":
return o`
background-color: ${d(t, i, 100)};
color: ${n};
border: 1px solid ${h};
`;
default:
return o``;
}
}, I = (e) => {
const { theme: t, radius: s = "md" } = e;
switch (s) {
case "none":
return o`border-radius: ${t.borderRadius.none};`;
case "sm":
return o`border-radius: ${t.borderRadius.sm};`;
case "md":
return o`border-radius: ${t.borderRadius.md};`;
case "lg":
return o`border-radius: ${t.borderRadius.lg};`;
case "xl":
return o`border-radius: ${t.borderRadius.xl};`;
default:
return o`border-radius: ${t.borderRadius.md};`;
}
}, R = l.div`
display: ${(e) => e.isVisible === !1 ? "none" : "flex"};
align-items: flex-start;
gap: ${(e) => e.theme.spacing[3]};
padding: ${(e) => e.theme.spacing[4]};
position: relative;
transition: all ${(e) => e.theme.transitions.normal};
${S}
${I}
/* Custom CSS prop */
${(e) => e.css}
`, B = l.div`
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 2px;
`, A = l.div`
display: flex;
flex-direction: column;
gap: ${(e) => e.theme.spacing[1]};
flex: 1;
min-width: 0;
`, W = l.div`
font-weight: ${(e) => e.theme.fontWeights.semibold};
font-size: ${(e) => e.theme.fontSizes.base};
line-height: ${(e) => e.theme.lineHeights.tight};
`, j = l.div`
font-size: ${(e) => e.theme.fontSizes.sm};
line-height: ${(e) => e.theme.lineHeights.normal};
opacity: 0.9;
`, L = l.button`
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
padding: 0;
margin: 0;
color: inherit;
opacity: 0.7;
transition: opacity ${(e) => e.theme.transitions.fast};
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 1px;
&:hover {
opacity: 1;
}
&:focus {
outline: none;
}
`, M = () => (
// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
/* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ r("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) })
), V = () => (
// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
/* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ r("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) })
), D = () => (
// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
/* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ r("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) })
), H = () => (
// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
/* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ r("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" }) })
), T = () => (
// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
/* @__PURE__ */ u(
"svg",
{
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
width: "18",
height: "18",
children: [
/* @__PURE__ */ r("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
/* @__PURE__ */ r("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
]
}
)
), E = (e) => {
switch (e) {
case "success":
return /* @__PURE__ */ r(M, {});
case "warning":
return /* @__PURE__ */ r(D, {});
case "danger":
return /* @__PURE__ */ r(H, {});
// case "primary":
// case "secondary":
default:
return /* @__PURE__ */ r(V, {});
}
}, N = k.forwardRef(
({
children: e,
variant: t = "flat",
color: s = "primary",
radius: i = "md",
title: n,
description: a,
icon: h,
hideIcon: m = !1,
isClosable: p = !1,
onClose: g,
isVisible: f = !0,
className: x,
css: b,
...$
}, v) => {
const { theme: c } = z(), C = {
...$,
variant: t,
color: s,
radius: i,
isVisible: f,
className: x,
css: b
}, y = () => {
g?.();
}, w = h || E(s);
return /* @__PURE__ */ u(R, { theme: c, ref: v, ...C, children: [
!m && /* @__PURE__ */ r(B, { children: w }),
(n || a || e) && /* @__PURE__ */ u(A, { theme: c, children: [
n && /* @__PURE__ */ r(W, { theme: c, children: n }),
a && /* @__PURE__ */ r(j, { theme: c, children: a }),
e
] }),
p && /* @__PURE__ */ r(
L,
{
theme: c,
onClick: y,
"aria-label": "Close alert",
children: /* @__PURE__ */ r(T, {})
}
)
] });
}
);
N.displayName = "Alert";
export {
N as Alert
};
//# sourceMappingURL=alert.js.map