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

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsxs as w, jsx as y } from "react/jsx-runtime";
import { useTheme as S } from "../../../theme/context.js";
import { getColorVariant as i } from "../../../theme/styled.js";
import { css as o } from "@emotion/react";
import g from "@emotion/styled";
import z from "react";
const R = (t) => {
  const { theme: r, variant: s = "solid", color: e = "primary", isDisabled: d } = t, n = i(r, e, 500), l = i(r, e, 600), c = i(r, e, 50), p = i(r, e, 700), a = o`
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  `;
  switch (s) {
    case "solid":
      return o`
        background-color: ${n};
        color: ${r.colors.text.inverse};
        border: 2px solid ${n};

        &:hover:not(:disabled) {
          background-color: ${l};
          border-color: ${l};
        }

        &:active:not(:disabled) {
          background-color: ${p};
          border-color: ${p};
        }

        ${d && a}
      `;
    case "outlined":
      return o`
        background-color: transparent;
        color: ${n};
        border: 2px solid ${n};

        &:hover:not(:disabled) {
          background-color: ${c};
        }

        &:active:not(:disabled) {
          background-color: ${i(r, e, 100)};
        }

        ${d && a}
      `;
    case "light":
      return o`
        background-color: ${c};
        color: ${p};
        border: 2px solid transparent;

        &:hover:not(:disabled) {
          background-color: ${i(r, e, 100)};
        }

        &:active:not(:disabled) {
          background-color: ${i(r, e, 200)};
        }

        ${d && a}
      `;
    case "flat":
      return o`
        background-color: ${i(r, e, 100)};
        color: ${n};
        border: 2px solid transparent;

        &:hover:not(:disabled) {
          background-color: ${i(r, e, 200)};
        }

        &:active:not(:disabled) {
          background-color: ${i(r, e, 300)};
        }

        ${d && a}
      `;
    case "ghost":
      return o`
        background-color: transparent;
        color: ${n};
        border: 2px solid transparent;

        &:hover:not(:disabled) {
          background-color: ${c};
        }

        &:active:not(:disabled) {
          background-color: ${i(r, e, 100)};
        }

        ${d && a}
      `;
    default:
      return o`
        background-color: transparent;
        color: ${n};
        border: 2px solid ${n};

        &:hover:not(:disabled) {
          background-color: ${c};
        }

        &:active:not(:disabled) {
          background-color: ${i(r, e, 100)};
        }

        ${d && a}
			`;
  }
}, C = (t) => {
  const { theme: r, size: s = "md", isIconOnly: e } = t;
  if (e)
    switch (s) {
      case "sm":
        return o`
          min-width: ${r.spacing[8]} !important;
          height: ${r.spacing[8]} !important;
          padding: 0 !important;
        `;
      case "md":
        return o`
          min-width: ${r.spacing[10]} !important;
          height: ${r.spacing[10]} !important;
          padding: 0 !important;
        `;
      case "lg":
        return o`
          min-width: ${r.spacing[12]} !important;
          height: ${r.spacing[12]} !important;
          padding: 0 !important;
        `;
      default:
        return o``;
    }
  switch (s) {
    case "sm":
      return o`
        height: ${r.spacing[8]} !important;
        padding: 0 ${r.spacing[3]} !important;
        font-size: ${r.fontSizes.sm} !important;
        min-width: ${r.spacing[16]} !important;
      `;
    case "md":
      return o`
        height: ${r.spacing[10]} !important;
        padding: 0 ${r.spacing[4]} !important;
        font-size: ${r.fontSizes.base} !important;
        min-width: ${r.spacing[20]} !important;
      `;
    case "lg":
      return o`
        height: ${r.spacing[12]} !important;
        padding: 0 ${r.spacing[6]} !important;
        font-size: ${r.fontSizes.lg} !important;
        min-width: ${r.spacing[24]} !important;
      `;
    default:
      return o``;
  }
}, B = (t) => {
  const { theme: r, radius: s = "md" } = t;
  switch (s) {
    case "none":
      return o`border-radius: ${r.borderRadius.none} !important;`;
    case "sm":
      return o`border-radius: ${r.borderRadius.sm} !important;`;
    case "md":
      return o`border-radius: ${r.borderRadius.md} !important;`;
    case "lg":
      return o`border-radius: ${r.borderRadius.lg} !important;`;
    case "full":
      return o`border-radius: ${r.borderRadius.full} !important;`;
    default:
      return o`border-radius: ${r.borderRadius.md} !important;`;
  }
}, j = g.button`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: ${(t) => t.theme.spacing[2]};
  font-family: inherit;
  font-weight: ${(t) => t.theme.fontWeights.medium};
  line-height: ${(t) => t.theme.lineHeights.tight};
  text-decoration: none;
  cursor: pointer;
  transition: all ${(t) => t.theme.transitions.normal};
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  outline: none;

  /* Apply base styles first */
  ${R}
  ${C}

    /* Apply radius styles last to ensure they take precedence */
  ${B}

  ${(t) => t.fullWidth && o`
      width: 100%;
    `}

  &:focus-visible {
    outline: 2px solid ${(t) => t.theme.colors.border.focus};
    outline-offset: 2px;
  }

  /* Custom CSS prop - applied last */
  ${(t) => t.css}
`, A = g.div`
  width: ${(t) => {
  switch (t.size) {
    case "sm":
      return "12px";
    case "lg":
      return "20px";
    default:
      return "16px";
  }
}};
  height: ${(t) => {
  switch (t.size) {
    case "sm":
      return "12px";
    case "lg":
      return "20px";
    default:
      return "16px";
  }
}};
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
`, V = z.forwardRef(
  ({
    children: t,
    variant: r = "solid",
    color: s = "primary",
    size: e = "md",
    radius: d = "md",
    isLoading: n = !1,
    isDisabled: l = !1,
    fullWidth: c = !1,
    isIconOnly: p = !1,
    startContent: a,
    endContent: u,
    className: b,
    css: h,
    onPress: m,
    ...f
  }, k) => {
    const { theme: x } = S(), $ = {};
    m && ($.onClick = m);
    const v = {
      ...$,
      ...f,
      variant: r,
      color: s,
      size: e,
      radius: d,
      // Make sure radius is explicitly passed
      isDisabled: l || n,
      fullWidth: c,
      isIconOnly: p,
      className: b,
      disabled: l || n,
      css: h
    };
    return /* @__PURE__ */ w(j, { theme: x, ref: k, ...v, children: [
      n && /* @__PURE__ */ y(A, { size: e }),
      !n && a && a,
      t,
      !n && u && u
    ] });
  }
);
V.displayName = "Button";
export {
  V as Button
};
//# sourceMappingURL=button.js.map