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

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsxs as v, jsx as s } from "react/jsx-runtime";
import { useTheme as K } from "../../../theme/context.js";
import { getColorVariant as ee } from "../../../theme/styled.js";
import { css as o } from "@emotion/react";
import n from "@emotion/styled";
import re, { useState as C, useRef as F, useImperativeHandle as oe, useEffect as te } from "react";
const ne = (e) => {
  const {
    theme: r,
    variant: c = "flat",
    color: b = "primary",
    isInvalid: a,
    isFocused: h,
    isDisabled: u,
    isOpen: l
  } = e, w = ee(r, b, 500), d = r.colors.danger[500], $ = a ? d : w;
  switch (c) {
    case "flat":
      return o`
        background-color: ${r.colors.background.secondary};
        border: 2px solid transparent;

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

        ${(h || l) && o`
          background-color: ${r.colors.background.primary};
          border-color: ${$};
        `}

        ${a && o`
          border-color: ${d};
        `}

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

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

        ${(h || l) && o`
          border-color: ${$};
        `}

        ${a && o`
          border-color: ${d};
        `}

        ${u && o`
          opacity: 0.5;
          cursor: not-allowed;
          background-color: ${r.colors.background.secondary};
        `}
      `;
    case "underlined":
      return o`
        background-color: transparent;
        border: none;
        border-bottom: 2px solid ${r.colors.border.primary};
        border-radius: 0;

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

        ${(h || l) && o`
          border-bottom-color: ${$};
        `}

        ${a && o`
          border-bottom-color: ${d};
        `}

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

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

        ${(h || l) && o`
          background-color: ${r.colors.background.primary};
          border-color: ${$};
        `}

        ${a && o`
          border-color: ${d};
        `}

        ${u && o`
          opacity: 0.5;
          cursor: not-allowed;
        `}
      `;
    default:
      return o``;
  }
}, se = (e) => {
  const { theme: r, size: c = "md" } = e;
  switch (c) {
    case "sm":
      return o`
        height: ${r.spacing[8]};
        padding: 0 ${r.spacing[3]};
        font-size: ${r.fontSizes.sm};
      `;
    case "md":
      return o`
        height: ${r.spacing[10]};
        padding: 0 ${r.spacing[4]};
        font-size: ${r.fontSizes.base};
      `;
    case "lg":
      return o`
        height: ${r.spacing[12]};
        padding: 0 ${r.spacing[6]};
        font-size: ${r.fontSizes.lg};
      `;
    default:
      return o``;
  }
}, ie = (e) => {
  const { theme: r, radius: c = "md", variant: b } = e;
  if (b === "underlined") return o``;
  switch (c) {
    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.md};`;
  }
}, ce = n.div`
  display: flex;
  flex-direction: column;
  gap: ${(e) => e.theme.spacing[2]};
  width: ${(e) => e.fullWidth ? "100%" : "auto"};
  position: relative;
`, le = n.div`
  position: relative;
  display: flex;
  align-items: center;
  transition: all ${(e) => e.theme.transitions.normal};
  width: ${(e) => e.fullWidth ? "100%" : "auto"};
  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};

  ${ne}
  ${se}
  ${ie}

  ${(e) => e.css}
`, ae = n.select`
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
`, de = n.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: ${(e) => e.theme.colors.text.primary};
  cursor: inherit;
`, me = n.div`
  flex: 1;
  text-align: left;
  color: ${(e) => e.hasPlaceholder ? e.theme.colors.text.tertiary : e.theme.colors.text.primary};
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`, ue = n.div`
  display: flex;
  align-items: center;
  margin-left: ${(e) => e.theme.spacing[2]};
  transform: ${(e) => e.isOpen ? "rotate(180deg)" : "rotate(0deg)"};
  transition: transform ${(e) => e.theme.transitions.fast};
  color: ${(e) => e.theme.colors.text.secondary};
`, he = n.div`
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: ${(e) => e.theme.zIndex.dropdown};
  background-color: ${(e) => e.theme.colors.background.primary};
  border: 1px solid ${(e) => e.theme.colors.border.primary};
  border-radius: ${(e) => e.theme.borderRadius.md};
  box-shadow: ${(e) => e.theme.shadows.lg};
  max-height: 200px;
  overflow-y: auto;
  margin-top: ${(e) => e.theme.spacing[1]};
  display: ${(e) => e.isOpen ? "block" : "none"};
`, $e = n.div`
  display: flex;
  align-items: center;
  gap: ${(e) => e.theme.spacing[2]};
  padding: ${(e) => {
  switch (e.size) {
    case "sm":
      return `${e.theme.spacing[2]} ${e.theme.spacing[3]}`;
    case "lg":
      return `${e.theme.spacing[4]} ${e.theme.spacing[6]}`;
    default:
      return `${e.theme.spacing[3]} ${e.theme.spacing[4]}`;
  }
}};
  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
  transition: background-color ${(e) => e.theme.transitions.fast};
  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;
  }
}};

  ${(e) => e.isSelected && o`
    background-color: ${e.theme.colors.primary[50]};
    color: ${e.theme.colors.primary[700]};
  `}

  ${(e) => e.isDisabled && o`
    opacity: 0.5;
    pointer-events: none;
  `}

  &:hover:not(:disabled) {
    background-color: ${(e) => e.isSelected ? e.theme.colors.primary[100] : e.theme.colors.background.secondary};
  }
`, fe = n.div`
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
`, ge = n.div`
  font-weight: ${(e) => e.theme.fontWeights.medium};
`, be = n.div`
  font-size: ${(e) => e.theme.fontSizes.sm};
  color: ${(e) => e.theme.colors.text.secondary};
  margin-top: ${(e) => e.theme.spacing[1]};
`, pe = n.label`
  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};

  ${(e) => e.isRequired && o`
    &::after {
      content: ' *';
      color: ${e.theme.colors.danger[500]};
    }
  `}
`, ve = n.div`
  font-size: ${(e) => e.theme.fontSizes.sm};
  color: ${(e) => e.isError ? e.theme.colors.danger[500] : e.theme.colors.text.secondary};
`, ye = n.div`
  display: flex;
  align-items: center;
  color: ${(e) => e.theme.colors.text.tertiary};
  ${(e) => e.position === "start" ? o`margin-right: ${e.theme.spacing[2]};` : o`margin-left: ${e.theme.spacing[2]};`}
`, we = () => (
  // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
  /* @__PURE__ */ s(
    "svg",
    {
      width: "16",
      height: "16",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "2",
      children: /* @__PURE__ */ s("polyline", { points: "6,9 12,15 18,9" })
    }
  )
), xe = re.forwardRef(
  ({
    variant: e = "flat",
    color: r = "primary",
    size: c = "md",
    radius: b = "md",
    label: a,
    placeholder: h = "Select an option",
    description: u,
    errorMessage: l,
    isInvalid: w = !1,
    isDisabled: d = !1,
    isRequired: $ = !1,
    fullWidth: R = !1,
    isMultiple: x = !1,
    options: S = [],
    selectedKeys: f,
    defaultSelectedKeys: p,
    onSelectionChange: T,
    startContent: O,
    endContent: L,
    className: j,
    css: B,
    labelPlacement: H = "outside",
    onChange: P,
    onFocus: A,
    onBlur: q,
    ...N
  }, G) => {
    const { theme: i } = K(), [J, D] = C(!1), [y, k] = C(!1), [Q, U] = C(
      new Set(
        p ? typeof p == "string" || typeof p == "number" ? [p] : Array.from(p) : []
      )
    ), I = F(null), z = F(null);
    oe(G, () => I.current);
    const g = f !== void 0 ? typeof f == "string" || typeof f == "number" ? /* @__PURE__ */ new Set([f]) : f : Q, V = () => {
      d || k(!y);
    }, X = (t) => {
      let m;
      x ? (m = new Set(g), m.has(t) ? m.delete(t) : m.add(t)) : (m = /* @__PURE__ */ new Set([t]), k(!1)), f === void 0 && U(m), T?.(m);
    }, Y = (t) => {
      D(!0), A?.(t);
    }, Z = (t) => {
      D(!1), q?.(t);
    };
    te(() => {
      const t = (m) => {
        z.current && !z.current.contains(m.target) && k(!1);
      };
      return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
    }, []);
    const _ = {
      variant: e,
      color: r,
      size: c,
      radius: b,
      isInvalid: w || !!l,
      isDisabled: d,
      fullWidth: R,
      isFocused: J,
      isOpen: y,
      className: j,
      css: B
    }, M = S.find(
      (t) => g.has(t.value)
    ), E = x && g.size > 1 ? `${g.size} items selected` : M?.label || "", W = /* @__PURE__ */ v(le, { theme: i, ..._, ref: z, children: [
      O && /* @__PURE__ */ s(ye, { theme: i, position: "start", children: O }),
      /* @__PURE__ */ v(de, { theme: i, onClick: V, children: [
        /* @__PURE__ */ s(me, { theme: i, hasPlaceholder: !E, children: E || h }),
        /* @__PURE__ */ s(ue, { theme: i, isOpen: y, children: L || /* @__PURE__ */ s(we, {}) })
      ] }),
      /* @__PURE__ */ s(he, { theme: i, isOpen: y, size: c, children: S.map((t) => /* @__PURE__ */ v(
        $e,
        {
          theme: i,
          isSelected: g.has(t.value),
          isDisabled: t.isDisabled,
          size: c,
          onClick: () => !t.isDisabled && X(t.value),
          children: [
            t.startContent,
            /* @__PURE__ */ v(fe, { children: [
              /* @__PURE__ */ s(ge, { theme: i, children: t.label }),
              t.description && /* @__PURE__ */ s(be, { theme: i, children: t.description })
            ] }),
            t.endContent
          ]
        },
        t.value
      )) }),
      /* @__PURE__ */ s(
        ae,
        {
          ref: I,
          multiple: x,
          disabled: d,
          value: Array.from(g),
          onChange: P,
          onFocus: Y,
          onBlur: Z,
          ...N,
          children: S.map((t) => /* @__PURE__ */ s(
            "option",
            {
              value: t.value,
              disabled: t.isDisabled,
              children: t.label
            },
            t.value
          ))
        }
      )
    ] });
    return !a && !u && !l ? W : /* @__PURE__ */ v(ce, { theme: i, fullWidth: R, children: [
      a && H === "outside" && /* @__PURE__ */ s(pe, { theme: i, isRequired: $, size: c, children: a }),
      W,
      (u || l) && /* @__PURE__ */ s(ve, { theme: i, isError: !!l, children: l || u })
    ] });
  }
);
xe.displayName = "Select";
export {
  xe as Select
};
//# sourceMappingURL=select.js.map