@snowball-tech/fractal
Version:
Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS
253 lines (218 loc) • 18.9 kB
JavaScript
'use client';
import{b as ye}from"./chunk-I7LIEI4R.js";import{b as et}from"./chunk-JSYGW7VV.js";import{b as _e}from"./chunk-DKS2EEQE.js";import{b as Pe}from"./chunk-4R7MMREM.js";import{b as Ze}from"./chunk-4JTAHKAQ.js";import{a as e,c as Ve,e as We}from"./chunk-4PW6ALEL.js";import{b as Qe}from"./chunk-MUDLDFSH.js";import{f as j}from"./chunk-DUNUASY6.js";import{a as Je}from"./chunk-6S7RPWAM.js";import{a as x}from"./chunk-HTOKQYVM.js";import{b as t}from"./chunk-CMFNILWJ.js";import{a as i,b as me}from"./chunk-XYM7TA65.js";import{Label as tt}from"@radix-ui/react-label";import{UilCalendarAlt as wt,UilAngleLeftB as zt,UilAngleRightB as St,UilClock as kt}from"@tooni/iconscout-unicons-react";import{forwardRef as Rt,useEffect as Nt,useId as Lt,useImperativeHandle as Ct,useMemo as ve,useRef as he,useState as rt}from"react";import It from"react-calendar";import F from"react-timekeeper";import l from"lodash/fp/isDate";import d from"lodash/fp/isEmpty";import g from"lodash/fp/isFunction";import $e from"lodash/fp/omit";import xe from"lodash/fp/pick";import{Fragment as U,jsx as o,jsxs as s}from"react/jsx-runtime";var Mt=g(F)?F:g(F.default)&&F.default,at=Rt(({amPm:N=!1,clearable:q=!0,defaultOpen:K,defaultValue:w,description:we,disabled:f=!1,error:ze,fullWidth:_=!1,i18n:u,id:ot,label:E,maxDate:Y,maxDateTime:z,maxTime:G,minDate:X,minDateTime:S,minTime:J,modal:n,name:nt,onChange:C,onClear:Se,onClose:ke,onDateChange:Q,onDismiss:Z,onFieldChange:V,onNow:Re,onOpen:Ne,onOpenChange:Le,onTimeChange:W,onToday:Ce,open:P,orientation:a="responsive",pickerVariant:L=Ve,placeholder:lt,popover:ee,readOnly:y=!1,required:te=!1,staticPicker:b=!1,success:Ie,theme:it,timeVariant:re=We,value:m,withClose:ae=!0,withDatePicker:p=!0,withNow:oe=!0,withPicker:st=!0,withTimePicker:c=!0,withToday:ne=!0,...Me},ct)=>{let v=Je(it),Te=Lt(),Ae=(ot??Te)||Te,He=he(null),le=he(null),je=he(null);Ct(ct,()=>({get calendar(){return je?.current??null},get input(){return He?.current??null},get picker(){return le?.current??null}}));let ie=!d(ze),se=!d(Ie),I=ie,ce=se&&!I,R=!f&&!y,[de,dt]=rt(K||P),A=r=>{if(!R)return;let $=de;dt(r),g(Le)&&$!==r&&Le(r),!$&&r&&g(Ne)&&Ne(),$&&!r&&g(ke)&&ke()},pt=()=>{A(!1),g(Z)&&Z()},gt=()=>{!R||!g(C)||(g(Se)&&Se(),Q?.(null,null),W?.(null,null),C?.(null))};Nt(()=>{A(!!(K||P))},[K,P]);let[ft,ut]=rt("date"),bt=r=>{ut(r)},Ee=r=>{if(!R||!g(C)&&!g(Q)||!l(r))return;let $=l(m)?m:w,k=new Date(r.toISOString());k.setHours(l($)?$.getHours():0),k.setMinutes(l($)?$.getMinutes():0),Q?.(r,k),C?.(k)},Be=r=>{if(!R||!g(C)&&!g(W)||d(r)||!r.isValid)return;let $=l(m)?m:w,k=l($)?new Date($):new Date;k.setHours(r.hour),k.setMinutes(r.minute),W?.(r,k),C?.(k)},mt=()=>{R&&(g(Ce)&&Ce(),Ee(new Date))},_t=()=>{if(!R)return;g(Re)&&Re();let r=new Date;Be({formatted12:r.toLocaleTimeString(void 0,{hour:"numeric",hour12:!0,minute:"numeric"}).toLocaleLowerCase(),formatted24:r.toLocaleTimeString(void 0,{hour:"numeric",hourCycle:"h23",minute:"numeric"}),formattedSimple:r.toLocaleTimeString(void 0,{hour:"numeric",hourCycle:N?"h12":"h23",minute:"numeric"}),hour:r.getHours(),hour12:r.getHours()%12,isValid:!0,meridiem:r.getHours()<12?"am":"pm",minute:r.getMinutes()})},H={day:"2-digit",hour:"2-digit",hourCycle:N?"h12":"h23",minute:"2-digit",month:"2-digit",year:"numeric"},De=xe(["day","month","year"],H),Oe=xe(["hour","hourCycle","minute"],H),h=l(m)?m:w,yt=l(h)?h.toLocaleTimeString(void 0,xe(["hour","hourCycle","minute"],H)):"00:00",pe=null;S?pe=S==="now"?new Date:S:X&&(pe=X==="today"?new Date:X);let ge=null;z?ge=z==="now"?new Date:z:Y&&(ge=Y==="today"?new Date:Y);let M=null;S?M=S==="now"?new Date:S:J&&(M=J==="now"?new Date:J);let T=null;z?T=z==="now"?new Date:z:G&&(T=G==="now"?new Date:G);let vt=f||y?{from:"00:00",to:"23:59"}:l(M)||l(T)?{from:l(T)?`${T.getHours()}:${T.getMinutes()}`:"00:00",to:l(M)?`${M.getHours()}:${M.getMinutes()}`:"00:00"}:void 0,B=`
--rgb-accent: var(--color-brand-primary-light);
--rgb-background: var(--color-background-body-white);
--rgb-hover-background: var(--color-decorative-pink-90);
--rgb-color: var(--color-text-dark);
--rgb-hover-color: var(--color-text-dark);
`,D=`
--rgb-accent: var(--color-brand-primary-dark);
--rgb-background: var(--color-brand-body-dark);
--rgb-hover-background: var(--color-decorative-pink-90);
--rgb-color: var(--color-text-light);
--rgb-hover-color: var(--color-text-dark);
`,O=ve(()=>`
background-color: ${b?"transparent":"var(--rgb-background)"};
border: none;
box-sizing: border-box;
display: flex;
flex-direction: column;
font-family: var(--typography-body-2-font-family);
font-size: var(--typography-body-2-font-size);
gap: var(--size-spacing-1);
letter-spacing: 0;
line-height: var(--typography-body-2-line-height);
min-width: calc((var(--size-spacing-5) * 7) + var(--size-spacing-1));
max-width: calc((var(--size-spacing-5) * 7) + var(--size-spacing-1));
width: ${_?"100%":"calc((var(--size-spacing-5) * 7) + var(--size-spacing-1))"};
margin: 0 auto;
`,[_,b]),ht=ve(()=>`
.fractal-${e}__picker__date--light {
${B}
}
.fractal-${e}__picker__date--dark {
${D}
}
.react-calendar {
${O}
}
.react-calendar button {
background-color: transparent;
color: var(--rgb-color);
cursor: pointer;
padding-block: 0;
padding-inline: 0;
text-align: left;
}
.react-calendar__navigation {
align-items: center;
display: flex;
font-family: var(--typography-body-1-bold-font-family);
font-size: var(--typography-body-1-bold-font-size);
font-weight: var(--typography-body-1-bold-font-weight);
justify-content: space-between;
letter-spacing: 0;
line-height: var(--typography-body-1-bold-line-height);
padding-left: var(--size-spacing-1);
padding-top: var(--size-spacing-1);
}
.react-calendar__navigation button {
align-items: center;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
}
.react-calendar__navigation__label {
align-items: center;
display: flex;
gap: var(--size-spacing-1);
order: 0;
text-transform: capitalize;
}
.react-calendar__navigation__label::after {
content: '\u25BC';
font-size: xx-small;
}
button.react-calendar__navigation__arrow {
border-radius: var(--size-radius-rounded);
justify-content: center;
padding: var(--size-spacing-1);
}
button.react-calendar__navigation__arrow:hover {
background-color: var(--rgb-hover-background);
}
.react-calendar__navigation__prev2-button {
display: none;
order: 1;
}
.react-calendar__navigation__prev-button {
display: flex;
order: 2;
}
.react-calendar__navigation__next-button {
display: flex;
order: 3;
}
.react-calendar__navigation__next2-button {
display: none;
order: 4;
}
.react-calendar__month-view__weekdays {
margin-bottom: var(--size-spacing-1);
}
.react-calendar__month-view__weekdays__weekday,
button.react-calendar__tile {
text-align: center;
}
.react-calendar__month-view button.react-calendar__tile {
min-width: var(--size-spacing-5);
${_?"":`
max-width: var(--size-spacing-5);
width: var(--size-spacing-5);
`}
}
.react-calendar__month-view__weekdays abbr {
font-family: var(--typography-caption-bold-font-family);
font-size: var(--typography-caption-bold-font-size);
font-weight: var(--typography-caption-bold-font-weight);
letter-spacing: 0;
line-height: var(--typography-caption-bold-line-height);
text-decoration: none;
text-transform: uppercase;
}
button.react-calendar__month-view__days__day--neighboringMonth {
color: var(--color-text-placeholder);
}
button.react-calendar__tile {
align-items: center;
border-radius: var(--size-radius-rounded);
display: flex;
font-family: var(--typography-body-2-font-family);
font-size: var(--typography-body-2-font-size);
font-weight: var(--typography-body-2-font-weight);
height: var(--size-spacing-5);
justify-content: center;
letter-spacing: 0;
line-height: var(--typography-body-2-line-height);
max-height: var(--size-spacing-5);
min-height: var(--size-spacing-5);
text-transform: capitalize;
}
button.react-calendar__tile:disabled {
color: var(--color-text-disabled);
cursor: not-allowed;
}
button.react-calendar__tile:not(.react-calendar__tile--active, :disabled):hover {
color: var(--rgb-hover-color);
background-color: var(--rgb-hover-background);
}
button.react-calendar__tile--now {
font-family: var(--typography-body-2-bold-font-family);
font-size: var(--typography-body-2-bold-font-size);
font-weight: var(--typography-body-2-bold-font-weight);
letter-spacing: 0;
line-height: var(--typography-body-2-bold-line-height);
}
button.react-calendar__tile--active {
background-color: var(--rgb-accent);
}
`,[D,_,B,O]),$t=ve(()=>`
.fractal-${e}__picker__time--light {
${B}
}
.fractal-${e}__picker__time--dark {
${D}
}
div.react-timekeeper {
${O}
--main-bg: transparent;
--main-box-shadow: none;
--main-font-family: inherit;
--top-bg: transparent;
--top-colon-color: var(--rgb-color);
--top-text-color: var(--rgb-color);
--top-meridiem-color: var(--rgb-color);
--top-selected-color: var(--rgb-accent);
--clock-wrapper-bg: transparent;
--clock-bg: var(--color-base-grey-90);
--hand-line-color: var(--rgb-accent);
--hand-circle-center: var(--rgb-accent);
--hand-circle-outer: var(--rgb-accent);
--hand-minute-circle: var(--color-icon-dark);
--numbers-text-color: var(--rgb-color);
--numbers-text-color-disabled: var(--color-text-disabled);
--numbers-font-size-reg: var(--typography-body-2-font-size);
--numbers-font-size-inner: var(--typography-body-2-font-size);
--numbers-font-size-outer: var(--typography-body-2-font-size);
--meridiem-bg-color: transparent;
--meridiem-text-color: var(--rgb-color);
--meridiem-selected-bg-color: var(--rgb-accent);
--meridiem-selected-text-color: var(--color-text-light);
}
div.react-timekeeper__top-bar {
align-items: end;
display: flex;
font-family: var(--typography-display-1-font-family);
font-size: var(--typography-display-1-font-size-md);
font-weight: var(--typography-display-1-font-weight);
justify-content: center;
letter-spacing: 0;
line-height: var(--typography-display-1-line-height-md);
padding: 0;
}
div.react-timekeeper__top-bar > div {
width: fit-content;
}
span.react-timekeeper__tb-hour,
span.react-timekeeper__tb-colon,
span.react-timekeeper__tb-minute {
font-size: inherit;
line-height: inherit;
}
div.react-timekeeper__clock-wrapper {
padding: 0;
}
`,[D,B,O]),Fe="--/--/----",Ue=`--:--${N?" --":""}`,xt=p&&c?`${Fe} ${Ue}`:p?Fe:c&&Ue||void 0,fe=o(Qe,{id:Ae,ref:He,className:i(`${t}-${e}__input`,R?"[&_input]:cursor-pointer":""),defaultValue:l(w)?p&&c?w.toLocaleString(void 0,H):p?w.toLocaleDateString(void 0,De):c&&w.toLocaleTimeString(void 0,Oe)||void 0:w===null?"":void 0,disabled:f,error:I,fullWidth:_,max:z==="now"?new Date().toISOString():l(z)?z.toISOString():void 0,min:S==="now"?new Date().toISOString():l(S)?S.toISOString():void 0,name:nt,placeholder:lt||xt,readOnly:y,required:te,success:ce,value:l(m)?p&&c?m.toLocaleString(void 0,H):p?m.toLocaleDateString(void 0,De):c&&m.toLocaleTimeString(void 0,Oe)||void 0:m===null?"":void 0,withSpinButton:!1}),qe={asChild:!0,className:i(`${t}-${e}__label`,v==="light"?"text-dark":"text-light",f?`${t}-${e}__label--disabled cursor-default`:"cursor-pointer",te?`${t}-${e}__label--required after:text-feedback-danger-50 after:content-required`:""),htmlFor:Ae},Ke=s(U,{children:[!d(we)&&!ie&&!se&&o(x,{className:i(`${t}-${e}__description`,"cursor-default text-dark"),element:"div",variant:"caption-median",children:we}),(ie||se)&&o(x,{className:i(`${t}-${e}__message ${t}-${e}__message--${I?"error":"success"}`,b&&(I?"text-error":ce&&"text-success")||"text-dark","cursor-default"),element:"div",variant:"caption-median",children:I?ze:Ie})]}),Ye=s("div",{className:i(`${t}-${e}__static-display`,(d(a)||a==="responsive")&&!n?"":`${t}-${e}__static-display--${n?"vertical":a}`,"flex flex-col gap-1",(d(a)||a==="responsive")&&!n?"justify-start md:justify-between md:pb-2 md:pt-1":a==="horizontal"&&!n?"justify-between pb-2 pt-1":"justify-start",L==="side-by-side"&&((d(a)||a==="responsive")&&!n?"border-b-1 border-normal pb-2 md:border-b-0 md:border-r-1 md:pb-0 md:pr-2":a==="horizontal"&&!n?"border-r-1 border-normal pr-2":"border-b-1 border-normal pb-2")),children:[s("div",{className:"flex flex-col gap-1",children:[!n&&o(tt,{...qe,children:o(x,{element:"label",children:E})}),Ke]}),s("div",{className:i("flex",(d(a)||a==="responsive")&&!n?"flex-row items-end justify-between gap-2 md:flex-col md:items-start md:justify-start md:gap-0":a==="horizontal"&&!n?"flex-col":"flex-row items-end justify-between gap-2"),children:[p&&s("div",{className:i("flex flex-col",(d(a)||a==="responsive")&&!n?"gap-1 md:gap-0":a==="horizontal"&&!n?"flex-col":"gap-1"),children:[o(x,{element:"div",variant:"heading-3",children:l(h)?h.getFullYear():"----"}),o(x,{element:"div",variant:"heading-1",children:l(h)?h.toLocaleDateString(void 0,{day:"2-digit",month:"short"}):"--- --"})]}),c&&s("div",{className:"flex flex-row items-start gap-half",children:[o(x,{element:"div",variant:"heading-1",children:l(h)?h.toLocaleTimeString(void 0,{hour:N?"numeric":"2-digit",hourCycle:N?"h12":"h23",minute:"2-digit"}).replace(/AM|PM/,""):"--:--"}),N&&o(x,{className:"pt-1",element:"div",variant:"body-1-bold",children:l(h)?(h.getHours()??0)>=12?"PM":"AM":"--"})]})]})]}),Ge=s(x,{className:i(`${t}-${e}__picker__date-wrapper pb-2`,c&&L==="side-by-side"&&(d(a)||a==="responsive")&&!n?"border-b-1 border-normal pb-2 md:border-b-0 md:border-r-1 md:pb-0 md:pl-2 md:pr-3":"",c&&L==="side-by-side"&&a==="horizontal"&&!n?"border-r-1 border-normal pl-2 pr-3":"",c&&L==="side-by-side"&&(a==="vertical"||n)?"border-b-1 border-normal pb-2":"",_||!b?"w-full":""),element:"div",children:[o("style",{children:ht}),o(It,{className:i(`${t}-${e}__picker__date`,`${t}-${e}__picker__date--${v}`,`${t}-${e}__picker__calendar`,`${t}-${e}__picker__calendar--${v}`),defaultValue:w,inputRef:je,maxDate:ge??void 0,minDate:pe??void 0,next2AriaLabel:u?.calendar?.fastNext,nextAriaLabel:u?.calendar?.next,nextLabel:o(St,{}),prev2AriaLabel:u?.calendar?.fastPrevious,prevAriaLabel:u?.calendar?.previous,prevLabel:o(zt,{}),tileDisabled:({view:r})=>r==="month"&&(f||y),value:m,onChange:Ee,onClickDay:r=>V?.("day",r),onClickMonth:r=>V?.("month",r),onClickYear:r=>V?.("year",r)})]}),Xe=o(x,{className:i(`${t}-${e}__picker__time-wrapper`,`${t}-${e}__picker__time`,`${t}-${e}__picker__time--${v}`,`${t}-${e}__picker__${re}`,`${t}-${e}__picker__${re}--${v}`,"pb-2"),element:"div",children:re==="clock"&&s(U,{children:[o("style",{children:$t}),o(Mt,{disabledTimeRange:vt,hour24Mode:!N,switchToMinuteOnHourSelect:!0,time:yt,onChange:Be})]})}),ue=(p||c)&&s("div",{className:i(`${t}-${e}__picker`,`${t}-${e}__picker--${v}`,(d(a)||a==="responsive")&&!n?`${t}-${e}__picker--responsive`:`${t}-${e}__picker--${n?"vertical":a}`,"flex",(d(a)||a==="responsive")&&!n?"flex-col md:flex-row md:gap-2":a==="horizontal"&&!n?"flex-row gap-2":"flex-col",_||!b?"w-full":""),children:[p&&c&&L==="tabs"&&s(et,{className:i("[&>div]:bg-transparent",_||!b?"w-full":""),defaultTab:"date",label:u?.tabs?.bar,tab:ft,tabs:s(U,{children:[o(_e,{icon:o(wt,{}),iconOnly:!0,label:u?.tabs?.date,name:"date"}),o(_e,{icon:o(kt,{}),iconOnly:!0,label:u?.tabs?.time,name:"time"})]}),onTabChange:bt,children:[o(ye,{name:"date",children:Ge}),o(ye,{name:"time",children:Xe})]}),p&&(!c||L==="side-by-side")&&Ge,c&&(!p||L==="side-by-side")&&Xe]}),be=p&&ne||c&&oe||q||!b&&ae?s("div",{className:i(`${t}-${e}__actions`,"flex justify-between gap-3 border-t-1 border-normal pt-2"),children:[(p&&ne||c&&oe)&&s("div",{className:"flex gap-1",children:[p&&ne&&o(j,{className:i(`${t}-${e}__actions__today`),disabled:f||y,label:u?.buttons?.today,theme:v,variant:"text",onClick:mt}),c&&oe&&o(j,{className:i(`${t}-${e}__actions__now`),disabled:f||y,label:u?.buttons?.now,theme:v,variant:"text",onClick:_t})]}),(q||!b&&ae)&&s("div",{className:"flex flex-1 justify-end gap-1",children:[q&&o(j,{className:i(`${t}-${e}__actions__clear`),disabled:f||y||!l(h),label:u?.buttons?.clear,theme:v,variant:"secondary",onClick:gt}),!b&&ae&&o(j,{className:i(`${t}-${e}__actions__close`),label:u?.buttons?.close,theme:v,onClick:pt})]})]}):!1;return s("div",{className:me(`${t}-${e}`,`${t}-${e}--${v}`,"w-fit max-w-full",`${t}-${e}--${R?"":"not-"}writable`,f?`${t}-${e}--disabled`:"",I?`${t}-${e}--with-error`:"",y?`${t}-${e}--readonly`:"",te?`${t}-${e}--required`:"",ce?`${t}-${e}--with-success`:"",y&&!f?"cursor-default":"",_?`${t}-${e}--full-width w-full`:"sm:w-fit",Me.className),...$e(["className"],Me),children:[d(E)||b?!1:o(tt,{...qe,children:o(x,{element:"label",children:E})}),b?s(U,{children:[s("div",{className:i(`${t}-${e}__static-wrapper`,(d(a)||a==="responsive")&&!n?"":`${t}-${e}__static-wrapper--${n?"vertical":a}`,"flex gap-2",(d(a)||a==="responsive")&&!n?"flex-col md:flex-row":a==="horizontal"&&!n?"flex-row":"flex-col"),children:[Ye,ue]}),be]}):st?n?s(Ze,{ref:le,closeButtonLabel:u?.buttons?.close,disabled:f||y,modal:!0,open:de,root:{className:"min-w-6"},title:E,trigger:fe,onDismiss:Z,onToggle:A,...$e(["className","defaultopen","disabled","open","trigger","onDismiss","onTOggle"],ee),children:[Ye,ue,be]}):s(Pe,{ref:le,align:"start",className:me(`${t}-${e}__popover`,ee?.className),disabled:f||y,fullWidth:_,open:de,trigger:fe,width:_?"full":"auto",withArrow:!1,withScroll:!1,onOpenChange:A,...$e(["className","disabled","open","toggleOnTriggerClick","trigger","triggerAsButton","withArrow","onOpenChange"],ee),children:[ue,be]}):fe,!b&&Ke]})});at.displayName="DateTimePicker";var ar=at;export{at as a,ar as b};
//# sourceMappingURL=chunk-HXVO2APT.js.map