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

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsxs as k, jsx as p } from "react/jsx-runtime";
import { useTheme as E } from "../../../theme/context.js";
import { getColorVariant as j } from "../../../theme/styled.js";
import { css as e } from "@emotion/react";
import u from "@emotion/styled";
import A, { useState as H, useRef as P, useImperativeHandle as T } from "react";
const V = (r) => {
  const {
    theme: o,
    variant: t = "flat",
    color: m = "primary",
    isInvalid: n,
    isFocused: c,
    isDisabled: s
  } = r, a = j(o, m, 500), i = o.colors.danger[500], d = n ? i : a;
  switch (t) {
    case "flat":
      return e`
        background-color: ${o.colors.background.secondary};
        border: 2px solid transparent;

        &:hover:not(:disabled) {
          background-color: ${o.colors.background.tertiary};
        }

        ${c && e`
            background-color: ${o.colors.background.primary};
            border-color: ${d};
          `}

        ${n && e`
            border-color: ${i};
          `}

        ${s && e`
            opacity: 0.5;
            cursor: not-allowed;
          `}
      `;
    case "bordered":
      return e`
        background-color: ${o.colors.background.primary};
        border: 2px solid ${o.colors.border.primary};

        &:hover:not(:disabled) {
          border-color: ${o.colors.border.secondary};
        }

        ${c && e`
            border-color: ${d};
          `}

        ${n && e`
            border-color: ${i};
          `}

        ${s && e`
            opacity: 0.5;
            cursor: not-allowed;
            background-color: ${o.colors.background.secondary};
          `}
      `;
    case "underlined":
      return e`
        background-color: transparent;
        border: none;
        border-bottom: 2px solid ${o.colors.border.primary};
        /* Fixed: Don't override border-radius here, let the radius function handle it */

        &:hover:not(:disabled) {
          border-bottom-color: ${o.colors.border.secondary};
        }

        ${c && e`
            border-bottom-color: ${d};
          `}

        ${n && e`
            border-bottom-color: ${i};
          `}

        ${s && e`
            opacity: 0.5;
            cursor: not-allowed;
          `}
      `;
    case "faded":
      return e`
        background-color: ${o.colors.neutral[100]};
        border: 2px solid ${o.colors.neutral[200]};

        &:hover:not(:disabled) {
          background-color: ${o.colors.neutral[50]};
          border-color: ${o.colors.neutral[300]};
        }

        ${c && e`
            background-color: ${o.colors.background.primary};
            border-color: ${d};
          `}

        ${n && e`
            border-color: ${i};
          `}

        ${s && e`
            opacity: 0.5;
            cursor: not-allowed;
          `}
      `;
    default:
      return e``;
  }
}, q = (r) => {
  const { theme: o, size: t = "md" } = r;
  switch (t) {
    case "sm":
      return e`
        height: ${o.spacing[8]} !important;
        padding: 0 ${o.spacing[3]} !important;
        font-size: ${o.fontSizes.sm} !important;
      `;
    case "md":
      return e`
        height: ${o.spacing[10]} !important;
        padding: 0 ${o.spacing[4]} !important;
        font-size: ${o.fontSizes.base} !important;
      `;
    case "lg":
      return e`
        height: ${o.spacing[12]} !important;
        padding: 0 ${o.spacing[6]} !important;
        font-size: ${o.fontSizes.lg} !important;
      `;
    default:
      return e``;
  }
}, D = (r) => {
  const { theme: o, radius: t = "md", variant: m } = r;
  if (m === "underlined" && t === "md")
    return e`border-radius: 0 !important;`;
  switch (t) {
    case "none":
      return e`border-radius: ${o.borderRadius.none} !important;`;
    case "sm":
      return e`border-radius: ${o.borderRadius.sm} !important;`;
    case "md":
      return e`border-radius: ${o.borderRadius.md} !important;`;
    case "lg":
      return e`border-radius: ${o.borderRadius.lg} !important;`;
    case "full":
      return e`border-radius: ${o.borderRadius.full} !important;`;
    default:
      return e`border-radius: ${o.borderRadius.md} !important;`;
  }
}, L = u.div`
  position: relative;
  display: flex;
  align-items: center;
  transition: all ${(r) => r.theme.transitions.normal};
  width: ${(r) => r.fullWidth ? "100%" : "auto"};

  /* Apply base styles first */
  ${V}
  ${q}

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

    /* Custom CSS prop - applied last */
  ${(r) => r.css}
`, N = u.input`
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: ${(r) => r.theme.colors.text.primary};
  font-family: inherit;
  font-size: inherit;
  padding: 0;

  &::placeholder {
    color: ${(r) => r.theme.colors.text.tertiary};
  }

  &:disabled {
    cursor: not-allowed;
  }
`, G = u.div`
  display: flex;
  flex-direction: column;
  gap: ${(r) => r.theme.spacing[2]};
  width: ${(r) => r.fullWidth ? "100%" : "auto"};
`, J = u.label`
  color: ${(r) => r.theme.colors.text.primary};
  font-size: ${(r) => {
  switch (r.size) {
    case "sm":
      return r.theme.fontSizes.sm;
    case "lg":
      return r.theme.fontSizes.lg;
    default:
      return r.theme.fontSizes.base;
  }
}};
  font-weight: ${(r) => r.theme.fontWeights.medium};

  ${(r) => r.isRequired && e`
      &::after {
        content: ' *';
        color: ${r.theme.colors.danger[500]};
      }
    `}
`, K = u.div`
  font-size: ${(r) => r.theme.fontSizes.sm};
  color: ${(r) => r.isError ? r.theme.colors.danger[500] : r.theme.colors.text.secondary};
`, v = u.div`
  display: flex;
  align-items: center;
  color: ${(r) => r.theme.colors.text.tertiary};
  ${(r) => r.position === "start" ? e`margin-right: ${r.theme.spacing[2]};` : e`margin-left: ${r.theme.spacing[2]};`}
`, O = A.forwardRef(
  ({
    variant: r = "flat",
    color: o = "primary",
    size: t = "md",
    radius: m = "md",
    label: n,
    placeholder: c,
    description: s,
    errorMessage: a,
    isInvalid: i = !1,
    isDisabled: d = !1,
    isRequired: z = !1,
    fullWidth: b = !1,
    startContent: h,
    endContent: f,
    className: S,
    css: w,
    labelPlacement: I = "outside",
    onFocus: R,
    onBlur: F,
    ...C
  }, W) => {
    const { theme: l } = E(), [B, g] = H(!1), y = P(null);
    T(W, () => y.current);
    const x = /* @__PURE__ */ k(L, { theme: l, ...{
      variant: r,
      color: o,
      size: t,
      radius: m,
      // Make sure radius is explicitly passed
      isInvalid: i || !!a,
      isDisabled: d,
      fullWidth: b,
      isFocused: B,
      className: S,
      css: w
    }, children: [
      h && /* @__PURE__ */ p(v, { theme: l, position: "start", children: h }),
      /* @__PURE__ */ p(
        N,
        {
          theme: l,
          ref: y,
          placeholder: c,
          disabled: d,
          onFocus: ($) => {
            g(!0), R?.($);
          },
          onBlur: ($) => {
            g(!1), F?.($);
          },
          ...C
        }
      ),
      f && /* @__PURE__ */ p(v, { theme: l, position: "end", children: f })
    ] });
    return !n && !s && !a ? x : /* @__PURE__ */ k(G, { theme: l, fullWidth: b, children: [
      n && I === "outside" && /* @__PURE__ */ p(J, { theme: l, isRequired: z, size: t, children: n }),
      x,
      (s || a) && /* @__PURE__ */ p(K, { theme: l, isError: !!a, children: a || s })
    ] });
  }
);
O.displayName = "Input";
export {
  K as HelperText,
  O as Input
};
//# sourceMappingURL=input.js.map