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

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsxs as k, jsx as t } from "react/jsx-runtime";
import { useTheme as T } from "../../../theme/context.js";
import { getColorVariant as z } from "../../../theme/styled.js";
import { css as o } from "@emotion/react";
import c from "@emotion/styled";
import q, { useState as R, useRef as A, useImperativeHandle as D } from "react";
const N = (e) => {
  const { size: r = "md" } = e;
  switch (r) {
    case "sm":
      return o`
        width: 16px;
        height: 16px;
      `;
    case "md":
      return o`
        width: 20px;
        height: 20px;
      `;
    case "lg":
      return o`
        width: 24px;
        height: 24px;
      `;
    default:
      return o`
        width: 20px;
        height: 20px;
      `;
  }
}, E = (e) => {
  const { theme: r, radius: s = "sm" } = e;
  switch (s) {
    case "none":
      return o`
        border-radius: ${r.borderRadius.none};
      `;
    case "sm":
      return o`
        border-radius: ${r.borderRadius.sm};
      `;
    case "md":
      return o`
        border-radius: ${r.borderRadius.md};
      `;
    case "lg":
      return o`
        border-radius: ${r.borderRadius.lg};
      `;
    case "full":
      return o`
        border-radius: ${r.borderRadius.full};
      `;
    default:
      return o`
        border-radius: ${r.borderRadius.sm};
      `;
  }
}, G = (e) => {
  const {
    theme: r,
    color: s = "primary",
    isInvalid: n,
    isDisabled: d,
    isChecked: u,
    isIndeterminate: f,
    isFocused: h
  } = e, g = z(r, s, 500), p = z(r, s, 600), i = r.colors.danger[500], a = n ? i : g;
  return d ? o`
      opacity: 0.5;
      cursor: not-allowed;
      background-color: ${r.colors.neutral[200]};
      border-color: ${r.colors.neutral[300]};
    ` : u || f ? o`
      background-color: ${a};
      border-color: ${a};
      color: ${r.colors.text.inverse};

      &:hover {
        background-color: ${n ? i : p};
        border-color: ${n ? i : p};
      }
    ` : o`
    background-color: ${r.colors.background.primary};
    border-color: ${n ? i : r.colors.border.primary};
    color: transparent;

    &:hover {
      border-color: ${n ? i : r.colors.border.secondary};
    }

    ${h && o`
      border-color: ${a};
      box-shadow: 0 0 0 2px ${a}20;
    `}
  `;
}, J = c.label`
  display: inline-flex;
  align-items: flex-start;
  gap: ${(e) => e.theme.spacing[2]};
  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
  user-select: none;
  line-height: 1;
`, K = c.input`
  position: absolute;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  width: 0;
  height: 0;
  top: 1px;
`, M = c.div`
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid;
  transition: all ${(e) => e.theme.transitions.normal};
  flex-shrink: 0;

  /* Improved alignment with text baseline */
  margin-top: ${(e) => {
  switch (e.size) {
    case "sm":
      return "1px";
    // Small offset for sm size
    case "md":
      return "2px";
    // Medium offset for md size
    case "lg":
      return "3px";
    // Larger offset for lg size
    default:
      return "2px";
  }
}};

  ${N}
  ${E}
  ${G}

    /* Custom CSS prop */
  ${(e) => e.css}
`, O = () => /* @__PURE__ */ t(
  "svg",
  {
    width: "100%",
    height: "100%",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "3",
    strokeLinecap: "round",
    strokeLinejoin: "round",
    "aria-hidden": "true",
    children: /* @__PURE__ */ t("polyline", { points: "20,6 9,17 4,12" })
  }
), Q = () => /* @__PURE__ */ t(
  "svg",
  {
    width: "100%",
    height: "100%",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "3",
    strokeLinecap: "round",
    strokeLinejoin: "round",
    "aria-hidden": "true",
    children: /* @__PURE__ */ t("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
  }
), U = c.div`
  width: ${(e) => {
  switch (e.size) {
    case "sm":
      return "10px";
    case "lg":
      return "16px";
    default:
      return "12px";
  }
}};
  height: ${(e) => {
  switch (e.size) {
    case "sm":
      return "10px";
    case "lg":
      return "16px";
    default:
      return "12px";
  }
}};
`, V = c.div`
  display: flex;
  flex-direction: column;
  gap: ${(e) => e.theme.spacing[1]};
  min-height: 0; /* Allows proper flex behavior */
`, X = c.span`
  color: ${(e) => e.theme.colors.text.primary};
  font-size: ${(e) => {
  switch (e.size) {
    case "sm":
      return e.theme.fontSizes.sm;
    case "lg":
      return e.theme.fontSizes.lg;
    default:
      return e.theme.fontSizes.base;
  }
}};
  font-weight: ${(e) => e.theme.fontWeights.medium};
  line-height: ${(e) => {
  switch (e.size) {
    case "sm":
      return "1.25";
    // Tighter line height for small
    case "lg":
      return "1.4";
    // More relaxed for large
    default:
      return "1.5";
  }
}};
  margin: 0; /* Remove default margins */

  ${(e) => e.isRequired && o`
      &::after {
        content: " *";
        color: ${e.theme.colors.danger[500]};
      }
    `}
`, Y = c.span`
  color: ${(e) => e.theme.colors.text.secondary};
  font-size: ${(e) => {
  switch (e.size) {
    case "sm":
      return e.theme.fontSizes.xs;
    case "lg":
      return e.theme.fontSizes.sm;
    default:
      return e.theme.fontSizes.sm;
  }
}};
  line-height: ${(e) => {
  switch (e.size) {
    case "sm":
      return "1.3";
    case "lg":
      return "1.4";
    default:
      return "1.4";
  }
}};
  margin: 0; /* Remove default margins */
`, Z = q.forwardRef(
  ({
    children: e,
    color: r = "primary",
    size: s = "md",
    radius: n = "sm",
    description: d,
    isIndeterminate: u = !1,
    isInvalid: f = !1,
    isDisabled: h = !1,
    isRequired: g = !1,
    className: p,
    css: i,
    icon: a,
    checked: x,
    defaultChecked: S,
    onChange: I,
    onFocus: F,
    onBlur: L,
    isSelected: b,
    onValueChange: C,
    ...j
  }, B) => {
    const { theme: m } = T(), [W, H] = R(S || !1), [P, w] = R(!1), v = A(null);
    D(B, () => v.current);
    const $ = b !== void 0 ? b : x !== void 0 ? x : W;
    return /* @__PURE__ */ k(J, { theme: m, isDisabled: h, children: [
      /* @__PURE__ */ k(M, { theme: m, ...{
        color: r,
        size: s,
        radius: n,
        isInvalid: f,
        isDisabled: h,
        isChecked: $,
        isIndeterminate: u,
        isFocused: P,
        className: p,
        css: i
      }, children: [
        /* @__PURE__ */ t(
          K,
          {
            ref: v,
            type: "checkbox",
            checked: $,
            disabled: h,
            onChange: (l) => {
              const y = l.target.checked;
              x === void 0 && b === void 0 && H(y), C && C(y), I?.(l);
            },
            onFocus: (l) => {
              w(!0), F?.(l);
            },
            onBlur: (l) => {
              w(!1), L?.(l);
            },
            ...j
          }
        ),
        ($ || u) && /* @__PURE__ */ t(U, { size: s, children: a || (u ? /* @__PURE__ */ t(Q, {}) : /* @__PURE__ */ t(O, {})) })
      ] }),
      (e || d) && /* @__PURE__ */ k(V, { theme: m, children: [
        e && /* @__PURE__ */ t(X, { theme: m, size: s, isRequired: g, children: e }),
        d && /* @__PURE__ */ t(Y, { theme: m, size: s, children: d })
      ] })
    ] });
  }
);
Z.displayName = "Checkbox";
export {
  Z as Checkbox
};
//# sourceMappingURL=checkbox.js.map