@snowball-tech/fractal
Version:
Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS
3 lines • 5.84 kB
JavaScript
'use client';
import{a as G}from"./chunk-YWWK6PZ5.js";import{a as r}from"./chunk-JVVBSAPQ.js";import{c as z}from"./chunk-LYTTDLE2.js";import{a as h}from"./chunk-AOLTZ2WJ.js";import{b as e}from"./chunk-CMFNILWJ.js";import{a as n,b as S,c as j}from"./chunk-XYM7TA65.js";import{Label as me}from"@radix-ui/react-label";import*as i from"@radix-ui/react-scroll-area";import*as t from"@radix-ui/react-select";import{UilAngleDown as ue}from"@tooni/iconscout-unicons-react";import{forwardRef as fe,useEffect as pe,useId as he,useImperativeHandle as ge,useRef as X,useState as Y}from"react";import v from"lodash/fp/isEmpty";import g from"lodash/fp/isFunction";import P from"lodash/fp/isNil";import J from"lodash/fp/isString";import K from"lodash/fp/omit";import{jsx as o,jsxs as _}from"react/jsx-runtime";var Q=fe(({autoFocus:W=!1,children:Z,defaultValue:N,description:C,disabled:u=!1,displayedValue:A,dropdown:l={},fullWidth:ee=!1,id:re,label:c,labelElement:oe,name:te,onClose:D,onOpen:B,onSelect:T,open:x,placeholder:L,portalled:I,rainbow:E=!0,readOnly:b=!1,required:y=!1,value:k,...s},le)=>{let F=he(),w=(re??F)||F,[f,ae]=Y(null),O=X(null),R=X(null);ge(le,()=>({get container(){return f??null},get dropdown(){return R?.current??null},get trigger(){return O?.current??null}}));let d=!u&&!b,[m,V]=Y(x===!0);pe(()=>{V(x===!0)},[x]);let ne=a=>{g(T)&&T(a)},q=a=>{d&&(V(a),a&&g(B)&&B(),!a&&g(D)&&D())},ie=()=>{q(!m)},se=a=>{g(l.onPointerDownOutside)&&l.onPointerDownOutside(a);let{target:p}=a;p===window||p===null||p===void 0||(f?.contains(p)||R?.current?.contains(p))&&a.preventDefault()},ce='min-w-[var(--radix-popper-anchor-width,"100%")] w-[var(--radix-popper-anchor-width,"100%")]',$=!P(f?.closest(`.${e}-dialog__content`)),H=!P(f?.closest(`.${e}-input-phone__fields__phone-prefix`)),M=o(t.Content,{ref:R,align:"center",asChild:!0,className:S(`${e}-${r}__dropdown`,"pointer-events-auto relative z-50 mt-1 overflow-hidden rounded-sm border-1 border-normal bg-white p-1",ce,l?.className),collisionBoundary:$?[f?.closest(`.${e}-dialog__content`)??null,...Array.isArray(l.collisionBoundary)?l.collisionBoundary:v(l.collisionBoundary)?[]:[l.collisionBoundary]].filter(Boolean):Array.isArray(l.collisionBoundary)?l.collisionBoundary:v(l.collisionBoundary)?[]:[l.collisionBoundary],collisionPadding:l.collisionPadding??$?{bottom:H?64:56,left:16,right:16,top:H?64:56}:0,position:"popper",side:"bottom",style:{display:void 0,...s.style},onPointerDownOutside:se,...K(["className","onPointerDownOutside","collisionBoundary","collisionPadding"],l),children:_(i.Root,{className:`${e}-${r}__dropdown__scrollarea`,...s.dir===void 0?{}:{dir:s.dir},type:"hover",children:[o(t.Viewport,{asChild:!0,children:o(i.Viewport,{className:n(`${e}-${r}__dropdown__scrollarea__viewport`,`relative h-full max-h-[calc(var(--radix-popper-available-height)-theme(spacing.4))] w-full overflow-auto [&:has(+_.${e}-${r}__dropdown__scrollarea__scrollbar--y)]:w-[calc(100%-theme(spacing.1)+theme(spacing.quarter))]`),style:{overflowY:void 0},children:o(h,{className:E?j:"",element:"div",variant:"body-1",children:o(G.Provider,{value:{disabled:u,rainbow:E},children:Z})})})}),o(i.Scrollbar,{className:n(`${e}-${r}__dropdown__scrollarea__scrollbar--y`,'[data-orientation="vertical"]:w-1 flex touch-none select-none rounded-r-sm bg-grey-90 p-quarter transition-background-color duration-300 ease-out hover:bg-grey-70'),orientation:"vertical",children:o(i.Thumb,{className:n(`${e}-${r}__dropdown__scrollarea__scrollbar--y__thumb`,"before:l-1/2 relative !w-half flex-1 rounded-sm bg-grey-30 before:absolute before:top-1/2 before:h-full before:min-h-[44px] before:w-full before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-empty")})})]})}),de=P(I)?!$:I,U=J(c)?c:z(c);return _("div",{ref:a=>ae(a),className:S(`${e}-${r}`,"flex w-full max-w-full flex-col gap-1",`${e}-${r}--${d?"":"not-"}writable`,`${e}-${r}--${m?"opened":"closed"}`,u?`${e}-${r}--disabled`:"",ee?`${e}-${r}--full-width`:"sm:w-fit",b?`${e}-${r}--readonly`:"",y?`${e}-${r}--required`:"","",s.className),children:[c?o(me,{asChild:!0,className:n(`${e}-${r}__label`,"block",d?"cursor-pointer":"cursor-default",y?`${e}-${r}__label--required after:text-feedback-danger-50 after:content-required`:""),htmlFor:w,onClick:ie,children:o(h,{element:oe||(J(c)?"label":"div"),children:c})}):!1,_(t.Root,{defaultOpen:W,disabled:!d,name:te||w,open:m,required:y,...s.dir===void 0?{}:{dir:s.dir},...k===void 0?{}:{value:k},...N===void 0?{}:{defaultValue:N},onOpenChange:q,onValueChange:ne,...K(["autoComplete","className","dir"],s),children:[o(t.Trigger,{id:w,ref:O,"aria-label":U,asChild:!0,className:n(`${e}-${r}__trigger`,"flex h-6 max-h-6 w-full min-w-0 items-center justify-between truncate rounded-sm border-1 border-normal px-2 py-unset text-left outline-none transition-border-color duration-300 ease-out data-with-placeholder:text-placeholder",d?"cursor-pointer border-normal bg-white":"border-disabled bg-disabled-light",u?`${e}-${r}__trigger--disabled cursor-not-allowed`:"hover:border-1 hover:shadow-hover",!u&&m?"hover:shadow-over border-primary shadow-primary":"",b?"cursor-default":""),title:U,children:_(h,{element:"div",children:[o("div",{className:n(`${e}-${r}__trigger__value`,"min-w-0 flex-1 [&>span>*]:truncate [&>span]:block"),children:v(A)?o(t.Value,{placeholder:L}):o(t.Value,{placeholder:L,children:A})}),o(t.Icon,{className:n(`${e}-${r}__trigger__indicator`,"h-full shrink-0 transition-transform duration-300 ease-out",d?"text-dark":"text-disabled",m?"translate-x-0 translate-y-0 rotate-180":""),children:o(ue,{className:"h-full"})})]})}),de?o(t.Portal,{children:M}):M]}),C&&o(h,{className:n(`${e}-${r}__description`,"cursor-default"),element:"div",variant:"caption-median",children:C})]})});Q.displayName="Select";var Be=Q;export{Q as a,Be as b};
//# sourceMappingURL=chunk-A5PA34K3.js.map