@frank-auth/react/dist/cjs/components/ui/select/select.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),K=require("../../../theme/context.cjs"),ee=require("../../../theme/styled.cjs"),r=require("@emotion/react"),te=require("@emotion/styled"),h=require("react"),q=e=>e&&e.__esModule?e:{default:e},n=q(te),re=q(h),oe=e=>{const{theme:t,variant:i="flat",color:x="primary",isInvalid:a,isFocused:f,isDisabled:m,isOpen:l}=e,v=ee.getColorVariant(t,x,500),d=t.colors.danger[500],$=a?d:v;switch(i){case"flat":return r.css`
        background-color: ${t.colors.background.secondary};
        border: 2px solid transparent;

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

        ${(f||l)&&r.css`
          background-color: ${t.colors.background.primary};
          border-color: ${$};
        `}

        ${a&&r.css`
          border-color: ${d};
        `}

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

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

        ${(f||l)&&r.css`
          border-color: ${$};
        `}

        ${a&&r.css`
          border-color: ${d};
        `}

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

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

        ${(f||l)&&r.css`
          border-bottom-color: ${$};
        `}

        ${a&&r.css`
          border-bottom-color: ${d};
        `}

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

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

        ${(f||l)&&r.css`
          background-color: ${t.colors.background.primary};
          border-color: ${$};
        `}

        ${a&&r.css`
          border-color: ${d};
        `}

        ${m&&r.css`
          opacity: 0.5;
          cursor: not-allowed;
        `}
      `;default:return r.css``}},se=e=>{const{theme:t,size:i="md"}=e;switch(i){case"sm":return r.css`
        height: ${t.spacing[8]};
        padding: 0 ${t.spacing[3]};
        font-size: ${t.fontSizes.sm};
      `;case"md":return r.css`
        height: ${t.spacing[10]};
        padding: 0 ${t.spacing[4]};
        font-size: ${t.fontSizes.base};
      `;case"lg":return r.css`
        height: ${t.spacing[12]};
        padding: 0 ${t.spacing[6]};
        font-size: ${t.fontSizes.lg};
      `;default:return r.css``}},ne=e=>{const{theme:t,radius:i="md",variant:x}=e;if(x==="underlined")return r.css``;switch(i){case"none":return r.css`border-radius: ${t.borderRadius.none};`;case"sm":return r.css`border-radius: ${t.borderRadius.sm};`;case"md":return r.css`border-radius: ${t.borderRadius.md};`;case"lg":return r.css`border-radius: ${t.borderRadius.lg};`;case"full":return r.css`border-radius: ${t.borderRadius.full};`;default:return r.css`border-radius: ${t.borderRadius.md};`}},ce=n.default.div`
  display: flex;
  flex-direction: column;
  gap: ${e=>e.theme.spacing[2]};
  width: ${e=>e.fullWidth?"100%":"auto"};
  position: relative;
`,ie=n.default.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"};

  ${oe}
  ${se}
  ${ne}

  ${e=>e.css}
`,le=n.default.select`
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
`,ae=n.default.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: ${e=>e.theme.colors.text.primary};
  cursor: inherit;
`,de=n.default.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.default.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};
`,me=n.default.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"};
`,he=n.default.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&&r.css`
    background-color: ${e.theme.colors.primary[50]};
    color: ${e.theme.colors.primary[700]};
  `}

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