@snowball-tech/fractal
Version:
Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS
253 lines (218 loc) • 19.1 kB
JavaScript
'use client';
import{a as he}from"./chunk-6IN3B53B.js";import{a as tr}from"./chunk-UR4J4HJG.js";import{a as ye}from"./chunk-E3QGM2SJ.js";import{a as rr}from"./chunk-DZJSJNZD.js";import{a as We}from"./chunk-I4SBEDGF.js";import{a as e,c as Pe,e as er}from"./chunk-4PW6ALEL.js";import{a as Ve}from"./chunk-FA4DQLON.js";import{e as j}from"./chunk-WJB4GYBF.js";import{a as Ze}from"./chunk-6S7RPWAM.js";import{a as $}from"./chunk-AOLTZ2WJ.js";import{b as r}from"./chunk-CMFNILWJ.js";import{a as l,b as ve}from"./chunk-XYM7TA65.js";import{Label as ar}from"@radix-ui/react-label";import{UilCalendarAlt as Rr,UilAngleLeftB as Nr,UilAngleRightB as Lr,UilClock as Cr}from"@tooni/iconscout-unicons-react";import{forwardRef as Ir,useEffect as Mr,useId as Tr,useImperativeHandle as Ar,useMemo as $e,useRef as xe,useState as or}from"react";import Br from"react-calendar";import q from"react-timekeeper";import i from"lodash/fp/isDate";import x from"lodash/fp/isEmpty";import we from"lodash/fp/isError";import p from"lodash/fp/isFunction";import nr from"lodash/fp/isString";import ze from"lodash/fp/omit";import Se from"lodash/fp/pick";import{Fragment as K,jsx as o,jsxs as s}from"react/jsx-runtime";var Dr=p(q)?q:p(q.default)&&q.default,ir=Ir(({amPm:L=!1,clearable:Y=!0,defaultOpen:G,defaultValue:w,description:ke,disabled:g=!1,error:z,fullWidth:m=!1,i18n:f,id:lr,label:I,labelElement:Re,maxDate:X,maxDateTime:S,maxTime:J,minDate:Q,minDateTime:k,minTime:Z,modal:n,name:sr,onChange:M,onClear:Ne,onClose:Le,onDateChange:V,onDismiss:W,onFieldChange:P,onNow:Ce,onOpen:Ie,onOpenChange:Me,onTimeChange:ee,onToday:Te,open:re,orientation:a="responsive",pickerVariant:C=Pe,placeholder:cr,popover:te,readOnly:_=!1,required:ae=!1,staticPicker:u=!1,success:E,theme:dr,timeVariant:oe=er,value:b,withClose:ne=!0,withDatePicker:d=!0,withNow:ie=!0,withPicker:pr=!0,withTimePicker:c=!0,withToday:le=!0,...Ae},gr)=>{let v=Ze(dr),Be=Tr(),De=(lr??Be)||Be,He=xe(null),se=xe(null),je=xe(null);Ar(gr,()=>({get calendar(){return je?.current??null},get input(){return He?.current??null},get picker(){return se?.current??null}}));let fr=we(z)?z.message:z,ce=z!==!0&&!!fr,de=E!==!0&&!!E,T=ce||z===!0||we(z),pe=(de||E===!0)&&!T,N=!g&&!_,[ge,ur]=or(G||re),D=t=>{if(!N)return;let h=ge;ur(t),p(Me)&&h!==t&&Me(t),!h&&t&&p(Ie)&&Ie(),h&&!t&&p(Le)&&Le()},br=()=>{D(!1),p(W)&&W()},mr=()=>{!N||!p(M)||(p(Ne)&&Ne(),V?.(null,null),ee?.(null,null),M?.(null))};Mr(()=>{D(!!(G||re))},[G,re]);let[_r,vr]=or("date"),yr=t=>{vr(t)},Ee=t=>{if(!N||!p(M)&&!p(V)||!i(t))return;let h=i(b)?b:w,R=new Date(t.toISOString());R.setHours(i(h)?h.getHours():0),R.setMinutes(i(h)?h.getMinutes():0),V?.(t,R),M?.(R)},Oe=t=>{if(!N||!p(M)&&!p(ee)||x(t)||!t.isValid)return;let h=i(b)?b:w,R=i(h)?new Date(h):new Date;R.setHours(t.hour),R.setMinutes(t.minute),ee?.(t,R),M?.(R)},hr=()=>{N&&(p(Te)&&Te(),Ee(new Date))},$r=()=>{if(!N)return;p(Ce)&&Ce();let t=new Date;Oe({formatted12:t.toLocaleTimeString(void 0,{hour:"numeric",hour12:!0,minute:"numeric"}).toLocaleLowerCase(),formatted24:t.toLocaleTimeString(void 0,{hour:"numeric",hourCycle:"h23",minute:"numeric"}),formattedSimple:t.toLocaleTimeString(void 0,{hour:"numeric",hourCycle:L?"h12":"h23",minute:"numeric"}),hour:t.getHours(),hour12:t.getHours()%12,isValid:!0,meridiem:t.getHours()<12?"am":"pm",minute:t.getMinutes()})},H={day:"2-digit",hour:"2-digit",hourCycle:L?"h12":"h23",minute:"2-digit",month:"2-digit",year:"numeric"},Fe=Se(["day","month","year"],H),Ue=Se(["hour","hourCycle","minute"],H),y=i(b)?b:w,xr=i(y)?y.toLocaleTimeString(void 0,Se(["hour","hourCycle","minute"],H)):"00:00",fe=null;k?fe=k==="now"?new Date:k:Q&&(fe=Q==="today"?new Date:Q);let ue=null;S?ue=S==="now"?new Date:S:X&&(ue=X==="today"?new Date:X);let A=null;k?A=k==="now"?new Date:k:Z&&(A=Z==="now"?new Date:Z);let B=null;S?B=S==="now"?new Date:S:J&&(B=J==="now"?new Date:J);let wr=g||_?{from:"00:00",to:"23:59"}:i(A)||i(B)?{from:i(B)?`${B.getHours()}:${B.getMinutes()}`:"00:00",to:i(A)?`${A.getHours()}:${A.getMinutes()}`:"00:00"}:void 0,O=`
--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);
`,F=`
--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);
`,U=$e(()=>`
background-color: ${u?"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: ${m?"100%":"calc((var(--size-spacing-5) * 7) + var(--size-spacing-1))"};
margin: 0 auto;
`,[m,u]),zr=$e(()=>`
.fractal-${e}__picker__date--light {
${O}
}
.fractal-${e}__picker__date--dark {
${F}
}
.react-calendar {
${U}
}
.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);
${m?"":`
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);
}
`,[F,m,O,U]),Sr=$e(()=>`
.fractal-${e}__picker__time--light {
${O}
}
.fractal-${e}__picker__time--dark {
${F}
}
div.react-timekeeper {
${U}
--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;
}
`,[F,O,U]),qe="--/--/----",Ke=`--:--${L?" --":""}`,kr=d&&c?`${qe} ${Ke}`:d?qe:c&&Ke||void 0,be=o(Ve,{id:De,ref:He,className:l(`${r}-${e}__input`,N?"[&_input]:cursor-pointer":""),defaultValue:i(w)?d&&c?w.toLocaleString(void 0,H):d?w.toLocaleDateString(void 0,Fe):c&&w.toLocaleTimeString(void 0,Ue)||void 0:w===null?"":void 0,disabled:g,error:T,fullWidth:m,max:S==="now"?new Date().toISOString():i(S)?S.toISOString():void 0,min:k==="now"?new Date().toISOString():i(k)?k.toISOString():void 0,name:sr,placeholder:cr||kr,readOnly:_,required:ae,success:pe,value:i(b)?d&&c?b.toLocaleString(void 0,H):d?b.toLocaleDateString(void 0,Fe):c&&b.toLocaleTimeString(void 0,Ue)||void 0:b===null?"":void 0,withSpinButton:!1}),Ye={asChild:!0,className:l(`${r}-${e}__label`,v==="light"?"text-dark":"text-light",g?`${r}-${e}__label--disabled cursor-default`:"cursor-pointer",ae?`${r}-${e}__label--required after:text-feedback-danger-50 after:content-required`:""),htmlFor:De},Ge=s(K,{children:[ke&&!ce&&!de&&o($,{className:l(`${r}-${e}__description`,"cursor-default text-dark"),element:"div",variant:"caption-median",children:ke}),(ce||de)&&o($,{className:l(`${r}-${e}__message ${r}-${e}__message--${T?"error":"success"}`,u&&(T?"text-error":pe&&"text-success")||"text-dark","cursor-default"),element:"div",variant:"caption-median",children:T?we(z)?z.message:z:E})]}),Xe=s("div",{className:l(`${r}-${e}__static-display`,(x(a)||a==="responsive")&&!n?"":`${r}-${e}__static-display--${n?"vertical":a}`,"flex flex-col gap-1",(x(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",C==="side-by-side"&&((x(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(ar,{...Ye,children:o($,{element:Re||(nr(I)?"label":"div"),children:I})}),Ge]}),s("div",{className:l("flex",(x(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:[d&&s("div",{className:l("flex flex-col",(x(a)||a==="responsive")&&!n?"gap-1 md:gap-0":a==="horizontal"&&!n?"flex-col":"gap-1"),children:[o($,{element:"div",variant:"heading-3",children:i(y)?y.getFullYear():"----"}),o($,{element:"div",variant:"heading-1",children:i(y)?y.toLocaleDateString(void 0,{day:"2-digit",month:"short"}):"--- --"})]}),c&&s("div",{className:"flex flex-row items-start gap-half",children:[o($,{element:"div",variant:"heading-1",children:i(y)?y.toLocaleTimeString(void 0,{hour:L?"numeric":"2-digit",hourCycle:L?"h12":"h23",minute:"2-digit"}).replace(/AM|PM/,""):"--:--"}),L&&o($,{className:"pt-1",element:"div",variant:"body-1-bold",children:i(y)?(y.getHours()??0)>=12?"PM":"AM":"--"})]})]})]}),Je=s($,{className:l(`${r}-${e}__picker__date-wrapper pb-2`,c&&C==="side-by-side"&&(x(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&&C==="side-by-side"&&a==="horizontal"&&!n?"border-r-1 border-normal pl-2 pr-3":"",c&&C==="side-by-side"&&(a==="vertical"||n)?"border-b-1 border-normal pb-2":"",m||!u?"w-full":""),element:"div",children:[o("style",{children:zr}),o(Br,{className:l(`${r}-${e}__picker__date`,`${r}-${e}__picker__date--${v}`,`${r}-${e}__picker__calendar`,`${r}-${e}__picker__calendar--${v}`),defaultValue:w,inputRef:je,maxDate:ue??void 0,minDate:fe??void 0,next2AriaLabel:f?.calendar?.fastNext,nextAriaLabel:f?.calendar?.next,nextLabel:o(Lr,{}),prev2AriaLabel:f?.calendar?.fastPrevious,prevAriaLabel:f?.calendar?.previous,prevLabel:o(Nr,{}),tileDisabled:({view:t})=>t==="month"&&(g||_),value:b,onChange:Ee,onClickDay:t=>P?.("day",t),onClickMonth:t=>P?.("month",t),onClickYear:t=>P?.("year",t)})]}),Qe=o($,{className:l(`${r}-${e}__picker__time-wrapper`,`${r}-${e}__picker__time`,`${r}-${e}__picker__time--${v}`,`${r}-${e}__picker__${oe}`,`${r}-${e}__picker__${oe}--${v}`,"pb-2"),element:"div",children:oe==="clock"&&s(K,{children:[o("style",{children:Sr}),o(Dr,{disabledTimeRange:wr,hour24Mode:!L,switchToMinuteOnHourSelect:!0,time:xr,onChange:Oe})]})}),me=(d||c)&&s("div",{className:l(`${r}-${e}__picker`,`${r}-${e}__picker--${v}`,(x(a)||a==="responsive")&&!n?`${r}-${e}__picker--responsive`:`${r}-${e}__picker--${n?"vertical":a}`,"flex",(x(a)||a==="responsive")&&!n?"flex-col md:flex-row md:gap-2":a==="horizontal"&&!n?"flex-row gap-2":"flex-col",m||!u?"w-full":""),children:[d&&c&&C==="tabs"&&s(tr,{className:l("[&>div]:bg-transparent",m||!u?"w-full":""),defaultTab:"date",label:f?.tabs?.bar,tab:_r,tabs:s(K,{children:[o(ye,{icon:o(Rr,{}),iconOnly:!0,label:f?.tabs?.date,name:"date"}),o(ye,{icon:o(Cr,{}),iconOnly:!0,label:f?.tabs?.time,name:"time"})]}),onTabChange:yr,children:[o(he,{name:"date",children:Je}),o(he,{name:"time",children:Qe})]}),d&&(!c||C==="side-by-side")&&Je,c&&(!d||C==="side-by-side")&&Qe]}),_e=d&&le||c&&ie||Y||!u&&ne?s("div",{className:l(`${r}-${e}__actions`,"flex justify-between gap-3 border-t-1 border-normal pt-2"),children:[(d&&le||c&&ie)&&s("div",{className:"flex gap-1",children:[d&&le&&o(j,{className:l(`${r}-${e}__actions__today`),disabled:g||_,label:f?.buttons?.today,theme:v,variant:"text",onClick:hr}),c&&ie&&o(j,{className:l(`${r}-${e}__actions__now`),disabled:g||_,label:f?.buttons?.now,theme:v,variant:"text",onClick:$r})]}),(Y||!u&&ne)&&s("div",{className:"flex flex-1 justify-end gap-1",children:[Y&&o(j,{className:l(`${r}-${e}__actions__clear`),disabled:g||_||!i(y),label:f?.buttons?.clear,theme:v,variant:"secondary",onClick:mr}),!u&&ne&&o(j,{className:l(`${r}-${e}__actions__close`),label:f?.buttons?.close,theme:v,onClick:br})]})]}):!1;return s("div",{className:ve(`${r}-${e}`,`${r}-${e}--${v}`,"w-fit max-w-full",`${r}-${e}--${N?"":"not-"}writable`,g?`${r}-${e}--disabled`:"",T?`${r}-${e}--with-error`:"",_?`${r}-${e}--readonly`:"",ae?`${r}-${e}--required`:"",pe?`${r}-${e}--with-success`:"",_&&!g?"cursor-default":"",m?`${r}-${e}--full-width w-full`:"sm:w-fit",Ae.className),...ze(["className"],Ae),children:[!I||u?!1:o(ar,{...Ye,children:o($,{element:Re||(nr(I)?"label":"div"),children:I})}),u?s(K,{children:[s("div",{className:l(`${r}-${e}__static-wrapper`,(x(a)||a==="responsive")&&!n?"":`${r}-${e}__static-wrapper--${n?"vertical":a}`,"flex gap-2",(x(a)||a==="responsive")&&!n?"flex-col md:flex-row":a==="horizontal"&&!n?"flex-row":"flex-col"),children:[Xe,me]}),_e]}):pr?n?s(We,{ref:se,closeButtonLabel:f?.buttons?.close,disabled:g||_,modal:!0,open:ge,root:{className:"min-w-6"},title:I,trigger:be,onDismiss:W,onToggle:D,...ze(["className","defaultopen","disabled","open","trigger","onDismiss","onToggle"],te),children:[Xe,me,_e]}):s(rr,{ref:se,align:"start",className:ve(`${r}-${e}__popover`,te?.className),disabled:g||_,fullWidth:m,open:ge,trigger:be,width:m?"full":"auto",withArrow:!1,withScroll:!1,onOpenChange:D,...ze(["className","disabled","open","toggleOnTriggerClick","trigger","triggerAsButton","withArrow","onOpenChange"],te),children:[me,_e]}):be,!u&&Ge]})});ir.displayName="DateTimePicker";var pt=ir;export{ir as a,pt as b};
//# sourceMappingURL=chunk-NWCUHG7E.js.map