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

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),E=require("../../../theme/context.cjs"),y=require("../../../theme/styled.cjs"),l=require("@emotion/react"),Z=require("@emotion/styled"),g=require("react"),P=e=>e&&e.__esModule?e:{default:e},h=P(Z),q=P(g),M=e=>{const{theme:s,variant:d="flat",color:a="primary"}=e,o=y.getColorVariant(s,a,500);switch(d){case"flat":return l.css`
        background-color: ${s.colors.background.secondary};
        border: 1px solid transparent;
      `;case"bordered":return l.css`
        background-color: ${s.colors.background.primary};
        border: 1px solid ${s.colors.border.primary};
      `;case"light":return l.css`
        background-color: ${y.getColorVariant(s,a,50)};
        border: 1px solid transparent;
      `;case"solid":return l.css`
        background-color: ${o};
        border: 1px solid ${o};
        color: ${s.colors.text.inverse};
      `;default:return l.css``}},ee=e=>{const{theme:s,itemHeight:d="md"}=e;switch(d){case"sm":return l.css`
        min-height: ${s.spacing[8]};
        padding: ${s.spacing[2]} ${s.spacing[3]};
        font-size: ${s.fontSizes.sm};
      `;case"md":return l.css`
        min-height: ${s.spacing[10]};
        padding: ${s.spacing[3]} ${s.spacing[4]};
        font-size: ${s.fontSizes.base};
      `;case"lg":return l.css`
        min-height: ${s.spacing[12]};
        padding: ${s.spacing[4]} ${s.spacing[6]};
        font-size: ${s.fontSizes.lg};
      `;default:return l.css``}},te=e=>{const{theme:s,isSelected:d,isFocused:a,isDisabled:o,color:c="primary"}=e,k=y.getColorVariant(s,c,500),w=y.getColorVariant(s,c,50);if(o)return l.css`
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    `;let u=l.css`
    cursor: pointer;
    transition: all ${s.transitions.fast};
    
    &:hover {
      background-color: ${s.colors.background.tertiary};
    }
  `;return d&&(u=l.css`
      ${u}
      background-color: ${w};
      color: ${y.getColorVariant(s,c,700)};
      
      &:hover {
        background-color: ${y.getColorVariant(s,c,100)};
      }
    `),a&&(u=l.css`
      ${u}
      outline: 2px solid ${k};
      outline-offset: -2px;
    `),u},se=h.default.div`
  position: relative;
  border-radius: ${e=>e.theme.borderRadius.lg};
  overflow: hidden;
  outline: none;
  
  ${M}

  ${e=>e.maxHeight&&l.css`
    max-height: ${typeof e.maxHeight=="number"?`${e.maxHeight}px`:e.maxHeight};
    overflow-y: auto;
  `}

  /* Custom scrollbar */
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: ${e=>e.theme.colors.neutral[100]};
  }

  &::-webkit-scrollbar-thumb {
    background: ${e=>e.theme.colors.neutral[300]};
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: ${e=>e.theme.colors.neutral[400]};
  }

  /* Custom CSS prop */
  ${e=>e.css}
`,ne=h.default.div`
  display: flex;
  align-items: center;
  gap: ${e=>e.theme.spacing[3]};
  position: relative;
  user-select: none;

  ${ee}
  ${te}

  ${e=>e.css}
`,re=h.default.div`
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: ${e=>e.theme.spacing[1]};
`,oe=h.default.div`
  font-weight: ${e=>e.theme.fontWeights.medium};
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`,ie=h.default.div`
  font-size: ${e=>e.theme.fontSizes.sm};
  color: ${e=>e.theme.colors.text.secondary};
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`,le=h.default.div`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${e=>e.theme.spacing[8]} ${e=>e.theme.spacing[4]};
  color: ${e=>e.theme.colors.text.secondary};
  font-size: ${e=>e.theme.fontSizes.sm};
  text-align: center;
`,ae=h.default.div`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${e=>e.theme.spacing[6]} ${e=>e.theme.spacing[4]};
  gap: ${e=>e.theme.spacing[2]};
  color: ${e=>e.theme.colors.text.secondary};
  font-size: ${e=>e.theme.fontSizes.sm};
`,ce=h.default.div`
  height: 1px;
  background-color: ${e=>e.theme.colors.border.primary};
  margin: ${e=>e.theme.spacing[1]} 0;
`,de=()=>r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("polyline",{points:"20,6 9,17 4,12"})}),ue=()=>r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",style:{animation:"spin 1s linear infinite"},children:r.jsx("path",{d:"M21 12a9 9 0 11-6.219-8.56"})}),R=({item:e,isSelected:s=!1,isFocused:d=!1,isDisabled:a=!1,selectionMode:o="single",hideSelectedIcon:c=!1,itemHeight:k="md",color:w="primary",className:u,css:j,onPress:v,...I})=>{const{theme:b}=E.useTheme(),m={item:e,isSelected:s,isFocused:d,isDisabled:a||e.isDisabled,selectionMode:o,hideSelectedIcon:c,itemHeight:k,color:w,className:u,theme:b,css:j},L=()=>{m.isDisabled||v?.()},S=x=>{(x.key==="Enter"||x.key===" ")&&!m.isDisabled&&(x.preventDefault(),v?.())};return r.jsxs(ne,{...m,...I,onClick:L,onKeyDown:S,tabIndex:d?0:-1,role:"option","aria-selected":s,"aria-disabled":m.isDisabled,children:[e.startContent,r.jsxs(re,{theme:b,children:[r.jsx(oe,{theme:b,children:e.label}),e.description&&r.jsx(ie,{theme:b,children:e.description})]}),e.endContent,!c&&o!=="none"&&s&&r.jsx(de,{})]})},N=q.default.forwardRef(({items:e=[],selectedKeys:s,defaultSelectedKeys:d,disabledKeys:a=new Set,selectionMode:o="single",selectionBehavior:c="toggle",emptyContent:k="No items found",isLoading:w=!1,loadingContent:u,variant:j="flat",color:v="primary",itemHeight:I="md",maxHeight:b,hideSelectedIcon:m=!1,showDividers:L=!1,shouldFocusWrap:S=!0,autoFocus:x=!1,className:T,css:O,onSelectionChange:V,onAction:z,...U},W)=>{const{theme:C}=E.useTheme(),[A,B]=g.useState(d||new Set),[$,_]=g.useState(null),F=g.useRef(null),K=s!==void 0,p=K?s:A;g.useEffect(()=>{if(x&&e.length>0){const t=e.find(n=>!n.isDisabled&&!a.has(n.key));t&&_(t.key)}},[x,e,a]);const f=g.useMemo(()=>e.filter(t=>!t.isDisabled&&!a.has(t.key)),[e,a]),D=g.useCallback(t=>{K||B(t),V?.(t)},[K,V]),H=g.useCallback(t=>{if(o==="none"){z?.(t);return}let n;o==="single"?c==="toggle"&&p!=="all"&&p.has(t)?n=new Set:n=new Set([t]):p==="all"?n=new Set(e.map(i=>i.key).filter(i=>i!==t)):(n=new Set(p),n.has(t)?c==="toggle"&&n.delete(t):n.add(t)),D(n),z?.(t)},[o,c,p,e,D,z]),G=g.useCallback(t=>{if(f.length===0)return;const n=$?f.findIndex(Y=>Y.key===$):-1;let i=n;switch(t.key){case"ArrowDown":t.preventDefault(),i=n+1,i>=f.length&&(i=S?0:f.length-1);break;case"ArrowUp":t.preventDefault(),i=n-1,i<0&&(i=S?f.length-1:0);break;case"Home":t.preventDefault(),i=0;break;case"End":t.preventDefault(),i=f.length-1;break;case"Enter":case" ":t.preventDefault(),$!==null&&H($);return;case"a":(t.ctrlKey||t.metaKey)&&(t.preventDefault(),o==="multiple"&&D("all"));return;default:return}i!==n&&f[i]&&_(f[i].key)},[f,$,S,H,o,D]),J={variant:j,color:v,maxHeight:b,className:T,css:O},Q=t=>p==="all"?!0:p.has(t),X=()=>w?r.jsxs(ae,{theme:C,children:[r.jsx(ue,{}),u||"Loading...",r.jsx("style",{children:"@keyframes spin { to { transform: rotate(360deg); } }"})]}):e.length===0?r.jsx(le,{theme:C,children:k}):e.map((t,n)=>r.jsxs(q.default.Fragment,{children:[L&&n>0&&r.jsx(ce,{theme:C}),r.jsx(R,{item:t,isSelected:Q(t.key),isFocused:$===t.key,isDisabled:t.isDisabled||a.has(t.key),selectionMode:o,hideSelectedIcon:m,itemHeight:I,color:v,onPress:()=>H(t.key)})]},t.key));return r.jsx(se,{ref:W||F,theme:C,...J,...U,role:"listbox","aria-multiselectable":o==="multiple",tabIndex:0,onKeyDown:G,children:X()})});N.displayName="Listbox";R.displayName="ListboxItem";exports.Listbox=N;exports.ListboxItem=R;
//# sourceMappingURL=listbox.cjs.map