@infinityfx/fluid 1.4.11 → 1.4.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/display/code.js +1 -1
- package/dist/components/display/combobox/content.js +1 -1
- package/dist/components/display/tooltip.js +1 -1
- package/dist/components/input/checkbox.js +1 -1
- package/dist/components/input/color-field.js +1 -1
- package/dist/components/input/color-picker.js +1 -1
- package/dist/components/input/field.js +1 -1
- package/dist/components/input/file-field.js +1 -1
- package/dist/components/input/number-field.js +1 -1
- package/dist/components/input/password-field.js +1 -1
- package/dist/components/input/radio.js +1 -1
- package/dist/components/input/radio.js.map +1 -1
- package/dist/components/input/segmented.js +1 -1
- package/dist/components/input/select.js +1 -1
- package/dist/components/input/switch.js +1 -1
- package/dist/components/layout/panel.js +1 -1
- package/dist/components/layout/sidebar/item.js +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useId as t,useState as o,Fragment as n}from"react";import a from"../layout/scrollarea.js";import c from"../input/toggle.js";import{createStyles as i}from"../../core/style.js";import{combineClasses as l,classes as d}from"../../core/utils.js";import{Icon as m}from"../../core/icons.js";const s=i("code",{".wrapper":{fontSize:"var(--f-font-size-sml)",borderRadius:"var(--f-radius-med)",overflow:"hidden",position:"relative",display:"flex",flexDirection:"column",color:"var(--f-clr-text-100)"},".header":{backgroundColor:"var(--f-clr-primary-400)",padding:".8em 1em",fontWeight:500},".body":{backgroundColor:"var(--f-clr-fg-100)",flexGrow:1},".code":{display:"flex",paddingInline:"1em",minHeight:"100%"},".numbers":{userSelect:"none",textAlign:"right",color:"var(--f-clr-grey-500)",paddingBlock:"1em",paddingRight:".5em",borderRight:"solid 1px var(--f-clr-fg-200)"},".tab":{display:"inline-block",minWidth:"2em"},".content":{width:"max-content",paddingBlock:"1em"},'.content[data-numbered="true"]':{paddingLeft:"1em"},".button__align":{position:"absolute",zIndex:"99",right:"1em",bottom:0,display:"flex",alignItems:"center",maxHeight:"100%"},".wrapper .toggle":{marginBlock:"1em"},'.wrapper .toggle[data-checked="false"]':{background:"var(--f-clr-bg-100)"}});function g({children:i,cc:g={},title:p,lineNumbers:h=!0,dangerouslyInject:f,...u}){const b=l(s,g),y=t(),[v,x]=o(!1);return e("div",{...u,className:d(b.wrapper,u.className),children:[p&&r("div",{className:b.header,children:p}),r(a,{className:b.body,children:e("code",{className:b.code,children:[h&&r("div",{className:b.numbers,children:i.split(/\n/).map(((t,o)=>e(n,{children:[o+1," ",r("br",{})]},o)))}),r(a,{horizontal:!0,behavior:"shift",children:r("pre",{id:y,className:b.content,"data-numbered":h,dangerouslySetInnerHTML:f?{__html:i}:void 0,children:f?void 0:i})})]})}),r("div",{className:b.button__align,children:r(c,{compact:!0,checkedContent:r(m,{type:"check"}),checked:v,cc:{toggle:b.toggle
|
|
2
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useId as t,useState as o,Fragment as n}from"react";import a from"../layout/scrollarea.js";import c from"../input/toggle.js";import{createStyles as i}from"../../core/style.js";import{combineClasses as l,classes as d}from"../../core/utils.js";import{Icon as m}from"../../core/icons.js";const s=i("code",{".wrapper":{fontSize:"var(--f-font-size-sml)",borderRadius:"var(--f-radius-med)",overflow:"hidden",position:"relative",display:"flex",flexDirection:"column",color:"var(--f-clr-text-100)"},".header":{backgroundColor:"var(--f-clr-primary-400)",padding:".8em 1em",fontWeight:500},".body":{backgroundColor:"var(--f-clr-fg-100)",flexGrow:1},".code":{display:"flex",paddingInline:"1em",minHeight:"100%"},".numbers":{userSelect:"none",textAlign:"right",color:"var(--f-clr-grey-500)",paddingBlock:"1em",paddingRight:".5em",borderRight:"solid 1px var(--f-clr-fg-200)"},".tab":{display:"inline-block",minWidth:"2em"},".content":{width:"max-content",paddingBlock:"1em"},'.content[data-numbered="true"]':{paddingLeft:"1em"},".button__align":{position:"absolute",zIndex:"99",right:"1em",bottom:0,display:"flex",alignItems:"center",maxHeight:"100%"},".wrapper .toggle":{marginBlock:"1em"},'.wrapper .toggle[data-checked="false"]':{background:"var(--f-clr-bg-100)"}});function g({children:i,cc:g={},title:p,lineNumbers:h=!0,dangerouslyInject:f,...u}){const b=l(s,g),y=t(),[v,x]=o(!1);return e("div",{...u,className:d(b.wrapper,u.className),children:[p&&r("div",{className:b.header,children:p}),r(a,{className:b.body,children:e("code",{className:b.code,children:[h&&r("div",{className:b.numbers,children:i.split(/\n/).map(((t,o)=>e(n,{children:[o+1," ",r("br",{})]},o)))}),r(a,{horizontal:!0,behavior:"shift",children:r("pre",{id:y,className:b.content,"data-numbered":h,dangerouslySetInnerHTML:f?{__html:i}:void 0,children:f?void 0:i})})]})}),r("div",{className:b.button__align,children:r(c,{compact:!0,checkedContent:r(m,{type:"check"}),checked:v,cc:{...g,toggle:b.toggle},"aria-label":"Copy code",onClick:()=>{const e=document.createRange(),r=document.getElementById(y);e.selectNodeContents(r),document.getSelection()?.addRange(e);try{navigator.clipboard.writeText(r.innerText)}catch(e){document.execCommand("copy")}x(!0),setTimeout((()=>x(!1)),2e3)},children:r(m,{type:"copy"})})})]})}export{g as default};
|
|
3
3
|
//# sourceMappingURL=code.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as o,useState as t,useLayoutEffect as n,useMemo as i,Children as a,isValidElement as s,cloneElement as c}from"react";import l from"../../layout/popover/index.js";import d from"../../layout/scrollarea.js";import m from"../../input/field.js";import{Animatable as u}from"@infinityfx/lively";import{combineClasses as f,combineRefs as p,classes as h,getFocusable as g}from"../../../core/utils.js";import{createStyles as x}from"../../../core/style.js";import{usePopover as v}from"../../layout/popover/root.js";import{Icon as y}from"../../../core/icons.js";import"../../../context/fluid.js";import b from"../../../hooks/use-debounce.js";const _=x("combobox.content",{".container:not(.modal)":{background:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"calc(.25em + var(--f-radius-sml))",boxShadow:"var(--f-shadow-med)",minWidth:"min(100vw, 10em)",width:"100%"},".container.round":{borderRadius:"1.4em"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".content":{maxHeight:"9.5em"},".modal .content":{maxHeight:"50vh"},".message":{position:"relative",padding:".5em",width:"100%",textAlign:"center",color:"var(--f-clr-grey-500)",lineHeight:1.25},".container .field":{margin:".25em",marginBottom:0},".container .field__content":{paddingBlock:".5em"}});function w({children:x,cc:w={},round:j,size:z="med",autoFocus:k=!0,searchable:M=!1,placeholder:S="Search..",emptyMessage:C="Nothing found",virtualItemHeight:F=0,...H}){const N=f(_,w),{opened:A,trigger:
|
|
2
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as o,useState as t,useLayoutEffect as n,useMemo as i,Children as a,isValidElement as s,cloneElement as c}from"react";import l from"../../layout/popover/index.js";import d from"../../layout/scrollarea.js";import m from"../../input/field.js";import{Animatable as u}from"@infinityfx/lively";import{combineClasses as f,combineRefs as p,classes as h,getFocusable as g}from"../../../core/utils.js";import{createStyles as x}from"../../../core/style.js";import{usePopover as v}from"../../layout/popover/root.js";import{Icon as y}from"../../../core/icons.js";import"../../../context/fluid.js";import b from"../../../hooks/use-debounce.js";const _=x("combobox.content",{".container:not(.modal)":{background:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"calc(.25em + var(--f-radius-sml))",boxShadow:"var(--f-shadow-med)",minWidth:"min(100vw, 10em)",width:"100%"},".container.round":{borderRadius:"1.4em"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".content":{maxHeight:"9.5em"},".modal .content":{maxHeight:"50vh"},".message":{position:"relative",padding:".5em",width:"100%",textAlign:"center",color:"var(--f-clr-grey-500)",lineHeight:1.25},".container .field":{margin:".25em",marginBottom:0},".container .field__content":{paddingBlock:".5em"}});function w({children:x,cc:w={},round:j,size:z="med",autoFocus:k=!0,searchable:M=!1,placeholder:S="Search..",emptyMessage:C="Nothing found",virtualItemHeight:F=0,...H}){const N=f(_,w),{opened:A,trigger:B,content:D,isModal:T}=v(),K=o(0),L=o({list:[],index:k?0:-1}),[R,U]=t(""),[I,V]=t({start:0,end:1/0}),W=b((e=>{$(0),U(e)}),200);function $(e){if(!F||!D.current)return V({start:0,end:1/0});const r=Math.ceil(D.current.offsetHeight/F),o=Math.floor(r/2),t=o+Math.floor(e/(F*o))*o,n=Math.max(0,t-r),i=n+2*r;I.end!==i&&V({start:n,end:i})}n((()=>{A&&$(0)}),[A]);const q=i((()=>(K.current=0,a.map(x,(e=>{const r=s(e)&&("value"in e.props?e:e.props.children);if(!s(r)||!("value"in r.props))return e;if(!((""+r.props.value).toLowerCase()||"").includes(R))return null;const o=K.current++,t=o+(M?1:0);return o<I.start||o>I.end?null:c(e,{round:j,ref:p((e=>{L.current.list[t]=e}),e.props.ref),onFocus:e=>{L.current.index=t,H.onFocus?.(e)},autoFocus:t==L.current.index})})))),[x,I,R]);return e(l.Content,{children:e(u,{id:"combobox-options-outer",animate:{opacity:[0,.2,1],scale:[.9,1],duration:.2},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r("div",{...H,role:"listbox",className:h(N.container,N[`s__${z}`],j&&N.round,T&&N.modal,H.className),onBlur:e=>{H.onBlur?.(e),L.current.index=-1},onKeyDown:e=>{if(H.onKeyDown?.(e),"Tab"!==e.key&&"ArrowDown"!==e.key&&"ArrowUp"!==e.key)return;const{index:r,list:o}=L.current,t="ArrowUp"===e.key||e.shiftKey?Math.max(r-1,-1):Math.min(r+1,o.length-1),n=t<0?g(B.current,!1):o[L.current.index=t];n?n.focus():L.current.index=0,(n||"Tab"!==e.key)&&e.preventDefault()},children:[M&&e(m,{round:j,size:z,variant:"minimal",placeholder:S,icon:e(y,{type:"search"}),inputRef:e=>L.current.list[0]=e,autoFocus:0==L.current.index,onFocus:()=>L.current.index=0,defaultValue:R,onChange:e=>W(e.target.value.toLowerCase()),cc:{...w,field:N.field,content:N.field__content}}),e(d,{className:N.content,onScroll:e=>$(e.currentTarget.scrollTop),children:r("div",{style:{padding:".25em",minHeight:F?F*K.current:void 0},children:[e("div",{style:{height:F*I.start}}),e(u,{id:"combobox-options-inner",inherit:!0,cachable:[],animate:{opacity:[0,1],scale:[.95,1],duration:.2},staggerLimit:4,stagger:.05,children:(!F||I.end!==1/0)&&q}),!K.current&&e("div",{className:N.message,children:C})]})})]})})})}w.displayName="Combobox.Content";export{w as default};
|
|
3
3
|
//# sourceMappingURL=content.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as t,Fragment as e,jsx as n}from"react/jsx-runtime";import{combineClasses as r,combineRefs as i}from"../../core/utils.js";import{useId as o,useRef as a,useState as s,useEffect as c,isValidElement as l,cloneElement as d}from"react";import{createPortal as u}from"react-dom";import{createStyles as f}from"../../core/style.js";const m=f("tooltip",{".anchor":{position:"absolute",pointerEvents:"none"},'.anchor[data-position="top"]':{bottom:"calc(100% + var(--f-spacing-sml))",left:"50%"},'.anchor[data-position="left"]':{right:"calc(100% + var(--f-spacing-sml))",top:"50%"},'.anchor[data-position="right"]':{left:"calc(100% + var(--f-spacing-sml))",top:"50%"},'.anchor[data-position="bottom"]':{top:"calc(100% + var(--f-spacing-sml))",left:"50%"},".tooltip":{position:"fixed",left:0,top:0,zIndex:999,backgroundColor:"var(--f-clr-
|
|
2
|
+
import{jsxs as t,Fragment as e,jsx as n}from"react/jsx-runtime";import{combineClasses as r,combineRefs as i}from"../../core/utils.js";import{useId as o,useRef as a,useState as s,useEffect as c,isValidElement as l,cloneElement as d}from"react";import{createPortal as u}from"react-dom";import{createStyles as f}from"../../core/style.js";const m=f("tooltip",{".anchor":{position:"absolute",pointerEvents:"none"},'.anchor[data-position="top"]':{bottom:"calc(100% + var(--f-spacing-sml))",left:"50%"},'.anchor[data-position="left"]':{right:"calc(100% + var(--f-spacing-sml))",top:"50%"},'.anchor[data-position="right"]':{left:"calc(100% + var(--f-spacing-sml))",top:"50%"},'.anchor[data-position="bottom"]':{top:"calc(100% + var(--f-spacing-sml))",left:"50%"},".tooltip":{position:"fixed",left:0,top:0,zIndex:999,backgroundColor:"var(--f-clr-grey-200)",color:"var(--f-clr-text-100)",fontSize:"var(--f-font-size-xsm)",fontWeight:600,textAlign:"center",padding:".3em .5em",borderRadius:"var(--f-radius-sml)",pointerEvents:"none",transition:"opacity .2s, translate .2s"},'.tooltip[aria-hidden="true"]':{opacity:0,translate:"0px 4px"}});function p({children:f,cc:p={},content:g,position:h="auto",visibility:v="interact",delay:b=.3,...x}){const y=r(m,p),w=o(),E=a(null),A=a(null),L=a(null),F=a(void 0),C=a(!1),[W,$]=s(!1),[j,k]=s(h),[z,B]=s("100vw"),R="auto"===h?j:h;function q(t,e=0){if(clearTimeout(F.current),null!==t){if(L.current){let{left:t,top:e,right:n,bottom:r,width:i}=L.current.getBoundingClientRect();n=window.innerWidth-n,r=window.innerHeight-r;const o="auto"!==h?h:{[t]:"left",[e]:"top",[n]:"right",[r]:"bottom"}[Math.max(t,e,n,r)];let a=t+i/2;switch(o){case"left":a=t;break;case"right":a=n;break;default:a=2*Math.min(window.innerWidth-a,a)}B(`calc(${a}px - var(--f-spacing-sml) * 2)`),k(o)}if(!t||"never"===v)return C.current=!1,$("always"===v);F.current=setTimeout((()=>{$(!0)}),1e3*e)}}let I;function M(){if(E.current&&A.current){const{x:t,y:e}=E.current.getBoundingClientRect(),n={top:"-50%, -100%",left:"-100%, -50%",right:"0%, -50%",bottom:"-50%, 0%"}[R];A.current.style.transform=`translate(${t}px, ${e}px) translate(${n})`}I=requestAnimationFrame(M)}return c((()=>{const t=L.current,e=new AbortController,n=e.signal;if(!t)return;cancelAnimationFrame(I),I=requestAnimationFrame(M),window.addEventListener("touchstart",(e=>{e.target===t||t.contains(e.target)?(C.current=!0,q(!0,b+.05)):q(!1)}),{signal:n});const r=t=>{C.current||t instanceof FocusEvent&&t.target instanceof Element&&!t.target.matches(":focus-visible")||q(!0,b)};return t.addEventListener("mouseenter",r,{signal:n}),t.addEventListener("focus",r,{signal:n}),t.addEventListener("mouseleave",(()=>q(!1)),{signal:n}),t.addEventListener("blur",(()=>q(!1)),{signal:n}),t.addEventListener("touchend",(()=>q(null)),{signal:n}),()=>{cancelAnimationFrame(I),e.abort()}}),[v,R,b]),c((()=>q("always"===v)),[v]),f=Array.isArray(f)?f[0]:f,l(f)?t(e,{children:[d(f,{...x,"aria-describedby":w,ref:i(L,x.ref,f.props.ref)}),L.current&&u(n("div",{ref:E,className:y.anchor,"data-position":R}),L.current),L.current&&u(n("div",{ref:A,id:w,role:"tooltip",className:y.tooltip,"aria-hidden":!W,style:{maxWidth:z},children:g}),document.getElementById("__fluid"))]}):f}export{p as default};
|
|
3
3
|
//# sourceMappingURL=tooltip.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as r,jsxs as e}from"react/jsx-runtime";import{combineClasses as o,classes as i}from"../../core/utils.js";import{Animatable as t}from"@infinityfx/lively";import{useLink as a}from"@infinityfx/lively/hooks";import{useState as c,useEffect as n}from"react";import s from"../feedback/halo.js";import l from"../../hooks/use-input-props.js";import{createStyles as d}from"../../core/style.js";const f=d("checkbox",{".wrapper":{position:"relative",width:"max-content"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".input":{position:"absolute",opacity:0,inset:0,width:"100%",height:"100%",zIndex:1},".checkbox":{width:"1.5em",height:"1.5em",borderRadius:"var(--f-radius-sml)",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",transition:"background-color .25s, border-color .25s",display:"flex",alignItems:"center",justifyContent:"center"},".input:enabled":{cursor:"pointer"},".checkmark":{width:"1em",stroke:"white",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"},".input:disabled + .checkbox":{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},".input:disabled + .checkbox .checkmark":{stroke:"var(--f-clr-grey-500)"},".input:disabled:checked + .checkbox":{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-200)"},'.wrapper[data-error="true"] .input:enabled + .checkbox':{borderColor:"var(--f-clr-error-200)"},".input:checked:enabled + .checkbox":{backgroundColor:"var(--color, var(--f-clr-primary-300))",borderColor:"var(--color, var(--f-clr-primary-300))"},'.wrapper[data-error="true"] .input:checked:enabled + .checkbox':{backgroundColor:"var(--f-clr-error-200)"},".wrapper .halo":{borderRadius:"var(--f-radius-sml)",inset:"-.5em"}});function h({cc:d={},error:h,size:m="med",color:p,intermediate:k,checked:u,defaultChecked:b,...v}){const g=o(f,d),x=a(b?1:0),[y,C]=l(v),[w,z]=void 0!==u?[u]:c(b||!1);return n((()=>x.set(w?1:0,{duration:.25})),[w]),r(s,{hover:!1,cc:{halo:g.halo
|
|
2
|
+
import{jsx as r,jsxs as e}from"react/jsx-runtime";import{combineClasses as o,classes as i}from"../../core/utils.js";import{Animatable as t}from"@infinityfx/lively";import{useLink as a}from"@infinityfx/lively/hooks";import{useState as c,useEffect as n}from"react";import s from"../feedback/halo.js";import l from"../../hooks/use-input-props.js";import{createStyles as d}from"../../core/style.js";const f=d("checkbox",{".wrapper":{position:"relative",width:"max-content"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".input":{position:"absolute",opacity:0,inset:0,width:"100%",height:"100%",zIndex:1},".checkbox":{width:"1.5em",height:"1.5em",borderRadius:"var(--f-radius-sml)",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",transition:"background-color .25s, border-color .25s",display:"flex",alignItems:"center",justifyContent:"center"},".input:enabled":{cursor:"pointer"},".checkmark":{width:"1em",stroke:"white",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"},".input:disabled + .checkbox":{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},".input:disabled + .checkbox .checkmark":{stroke:"var(--f-clr-grey-500)"},".input:disabled:checked + .checkbox":{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-200)"},'.wrapper[data-error="true"] .input:enabled + .checkbox':{borderColor:"var(--f-clr-error-200)"},".input:checked:enabled + .checkbox":{backgroundColor:"var(--color, var(--f-clr-primary-300))",borderColor:"var(--color, var(--f-clr-primary-300))"},'.wrapper[data-error="true"] .input:checked:enabled + .checkbox':{backgroundColor:"var(--f-clr-error-200)"},".wrapper .halo":{borderRadius:"var(--f-radius-sml)",inset:"-.5em"}});function h({cc:d={},error:h,size:m="med",color:p,intermediate:k,checked:u,defaultChecked:b,...v}){const g=o(f,d),x=a(b?1:0),[y,C]=l(v),[w,z]=void 0!==u?[u]:c(b||!1);return n((()=>x.set(w?1:0,{duration:.25})),[w]),r(s,{hover:!1,cc:{...d,halo:g.halo},children:e("div",{...C,className:i(g.wrapper,g[`s__${m}`],C.className),"data-error":!!h,children:[r("input",{...y,checked:w,type:"checkbox",className:g.input,"aria-invalid":!!h,onChange:r=>{z?.(r.target.checked),v.onChange?.(r)}}),r("div",{className:g.checkbox,style:{"--color":p},children:r("svg",{viewBox:"0 0 18 18",className:g.checkmark,children:r(t,k?{animate:{strokeLength:x},initial:{strokeDashoffset:w?0:1},children:r("path",{d:"M 3 9 L 15 9",fill:"none"})}:{animate:{strokeLength:x},initial:{strokeDashoffset:w?0:1},children:r("path",{d:"M 3 9 L 8 13 L 15 5",fill:"none"})})})})]})})}export{h as default};
|
|
3
3
|
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o}from"react";import a from"./field.js";import{Animatable as i}from"@infinityfx/lively";import l from"../layout/popover/index.js";import{createStyles as t}from"../../core/style.js";import{combineClasses as n,rgbToHex as d,hexToRgb as c}from"../../core/utils.js";import s from"./color-picker.js";import m from"../display/swatch.js";const p=t("color-field",(e=>({".picker":{padding:"var(--f-spacing-sml)"},".swatch":{marginLeft:".4em"},[`@media(min-width: ${e.breakpoints.mob+1}px)`]:{".picker":{boxShadow:"var(--f-shadow-med)",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"var(--f-radius-med)"}}})));function u({cc:t={},value:u,defaultValue:f,onChange:b,disabled:g,...h}){const v=n(p,t),[x,y]=void 0!==u?[u,b]:o(f||""),[j,w]=o(null);return e(l.Root,{position:"center",mobileContainer:"modal",children:[r(l.Trigger,{disabled:g,children:r(a,{...h,cc:t,inputMode:"none",left:r(m,{size:h.size,round:h.round,color:x,cc:{swatch:v.swatch
|
|
2
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o}from"react";import a from"./field.js";import{Animatable as i}from"@infinityfx/lively";import l from"../layout/popover/index.js";import{createStyles as t}from"../../core/style.js";import{combineClasses as n,rgbToHex as d,hexToRgb as c}from"../../core/utils.js";import s from"./color-picker.js";import m from"../display/swatch.js";const p=t("color-field",(e=>({".picker":{padding:"var(--f-spacing-sml)"},".swatch":{marginLeft:".4em"},[`@media(min-width: ${e.breakpoints.mob+1}px)`]:{".picker":{boxShadow:"var(--f-shadow-med)",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"var(--f-radius-med)"}}})));function u({cc:t={},value:u,defaultValue:f,onChange:b,disabled:g,...h}){const v=n(p,t),[x,y]=void 0!==u?[u,b]:o(f||""),[j,w]=o(null);return e(l.Root,{position:"center",mobileContainer:"modal",children:[r(l.Trigger,{disabled:g,children:r(a,{...h,cc:t,inputMode:"none",left:r(m,{size:h.size,round:h.round,color:x,cc:{...t,swatch:v.swatch}}),role:"combobox","aria-haspopup":"listbox",type:"text",disabled:g,"aria-disabled":h.readOnly||g,value:null!==j?j:x,onChange:e=>{const r=(o=e.target.value,`#${d(c(o.replace(/[^\da-f]/g,"").slice(0,6)))}`);var o;w(e.target.value),y?.(r)},onBlur:()=>w(null)})}),r(l.Content,{role:"listbox","aria-multiselectable":!1,children:r(i,{id:"date-field-calendar",animate:{opacity:[0,.2,1],scale:[.9,1],duration:.2},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r("div",{className:v.picker,children:r(s,{value:x,onChange:e=>y?.(`#${e}`),disabled:h.readOnly||g})})})})]})}export{u as default};
|
|
3
3
|
//# sourceMappingURL=color-field.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as a,useState as o,useEffect as i}from"react";import{combineClasses as t,hexToRgb as n,rgbToHsv as l,classes as s,rgbToHex as c,hsvToRgb as d}from"../../core/utils.js";import u from"../display/swatch.js";import{createStyles as f}from"../../core/style.js";import m from"./slider.js";import h from"./field.js";import p from"./number-field.js";import g from"../layout/group.js";const b=f("color-picker",(e=>({".wrapper":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".row":{display:"flex",gap:"var(--f-spacing-sml)"},".column, .fields":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".column":{flexGrow:1},".space":{position:"relative",minWidth:"12em",height:"12em",borderRadius:"var(--f-radius-sml)",backgroundBlendMode:"multiply",border:"solid 1px var(--f-clr-fg-200)",flexGrow:1,userSelect:"none",cursor:"pointer",touchAction:"none"},".selection":{position:"absolute",width:"1.2em",height:"1.2em",borderRadius:"var(--f-radius-sml)",backgroundColor:"var(--color)",border:"solid 1px white",boxShadow:"var(--f-shadow-sml)",translate:"-50% -50%",cursor:"pointer",WebkitBackfaceVisibility:"hidden"},'.selection[aria-disabled="true"]':{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-300)"},".wrapper .swatch":{width:"auto",height:"auto",flexGrow:1},".wrapper .hex":{minWidth:"4.2em"},".wrapper .rgb > * ":{minWidth:"4.2em",flexGrow:1},".wrapper .hue__progress":{backgroundColor:"transparent !important"},".hue__track":{background:"linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",height:"100%",borderRadius:"var(--f-radius-sml)"},".wrapper .hue__handle":{borderRadius:"var(--f-radius-med)"},".wrapper .hue__handle::after":{boxSizing:"border-box",border:"solid 1px white",borderRadius:"var(--f-radius-sml)"},'.hue__handle[aria-disabled="true"]::after':{borderColor:"var(--f-clr-grey-300)"},'.wrapper .hue__handle[aria-disabled="false"]::after':{backgroundColor:"var(--hue)"},[`@media (max-width: ${e.breakpoints.mob}px)`]:{".row":{flexDirection:"column"},".column":{flexDirection:"row-reverse"},".fields":{flexDirection:"column",flexGrow:1},".wrapper .swatch":{aspectRatio:1,maxHeight:"5.3em"}}})));function w({cc:f={},format:w,defaultValue:v,value:x,onChange:_,disabled:y,...k}){const C=t(b,f),j=a(!1),N=a(null),R=void 0===x?null:"string"==typeof x?n(x):x,D=void 0===v?[255,0,0]:"string"==typeof v?n(v):v,[E,G]=o(l(D)),[M,$]=o(null),[B,A]=R?[R]:o(D),L=function(e,r){const[a,o,i]=d(r);return a==e[0]&&o==e[1]&&i==e[2]}(B,E)?E:l(B),S=a(L);function W(e,r=!1){A?.(e),_?.("rgb"===w?e:c(e)),r&&(S.current=l(e)),G(S.current)}function z(e){if(!j.current||!N.current||y)return;const{clientX:r,clientY:a}="touches"in e?e.changedTouches[0]:e;let{x:o,y:i,width:t,height:n}=N.current.getBoundingClientRect();S.current[1]=100*Math.min(Math.max(r-o+.5,0)/t,1),S.current[2]=100*(1-Math.min(Math.max(a-i+.5,0)/n,1)),W(d(S.current))}return i((()=>{const e=new AbortController,r=e.signal,a=e=>{z(e),j.current=!1};return window.addEventListener("mouseup",a,{signal:r}),window.addEventListener("touchend",a,{signal:r}),window.addEventListener("mousemove",z,{signal:r}),window.addEventListener("touchmove",z,{signal:r}),()=>e.abort()}),[y]),e("div",{...k,style:{"--hue":`hsl(${L[0]}, 100%, 50%)`,"--color":`rgb(${B.join(",")})`},className:s(C.wrapper,k.className),children:[e("div",{className:C.row,children:[r("div",{ref:N,onMouseDown:e=>{j.current=!0,z(e.nativeEvent)},onTouchStart:e=>{j.current=!0,z(e.nativeEvent)},className:C.space,style:{background:`linear-gradient(90deg, transparent, hsl(${L[0]}, 100%, 50%)), linear-gradient(white, black)`},children:r("div",{"aria-disabled":y,className:C.selection,style:{left:`${L[1]}%`,top:100-L[2]+"%"}})}),e("div",{className:C.column,children:[r(u,{color:`rgb(${B.join(",")})`,cc:{swatch:C.swatch
|
|
2
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useRef as a,useState as o,useEffect as i}from"react";import{combineClasses as t,hexToRgb as n,rgbToHsv as l,classes as s,rgbToHex as c,hsvToRgb as d}from"../../core/utils.js";import u from"../display/swatch.js";import{createStyles as f}from"../../core/style.js";import m from"./slider.js";import h from"./field.js";import p from"./number-field.js";import g from"../layout/group.js";const b=f("color-picker",(e=>({".wrapper":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".row":{display:"flex",gap:"var(--f-spacing-sml)"},".column, .fields":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-sml)"},".column":{flexGrow:1},".space":{position:"relative",minWidth:"12em",height:"12em",borderRadius:"var(--f-radius-sml)",backgroundBlendMode:"multiply",border:"solid 1px var(--f-clr-fg-200)",flexGrow:1,userSelect:"none",cursor:"pointer",touchAction:"none"},".selection":{position:"absolute",width:"1.2em",height:"1.2em",borderRadius:"var(--f-radius-sml)",backgroundColor:"var(--color)",border:"solid 1px white",boxShadow:"var(--f-shadow-sml)",translate:"-50% -50%",cursor:"pointer",WebkitBackfaceVisibility:"hidden"},'.selection[aria-disabled="true"]':{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-300)"},".wrapper .swatch":{width:"auto",height:"auto",flexGrow:1},".wrapper .hex":{minWidth:"4.2em"},".wrapper .rgb > * ":{minWidth:"4.2em",flexGrow:1},".wrapper .hue__progress":{backgroundColor:"transparent !important"},".hue__track":{background:"linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",height:"100%",borderRadius:"var(--f-radius-sml)"},".wrapper .hue__handle":{borderRadius:"var(--f-radius-med)"},".wrapper .hue__handle::after":{boxSizing:"border-box",border:"solid 1px white",borderRadius:"var(--f-radius-sml)"},'.hue__handle[aria-disabled="true"]::after':{borderColor:"var(--f-clr-grey-300)"},'.wrapper .hue__handle[aria-disabled="false"]::after':{backgroundColor:"var(--hue)"},[`@media (max-width: ${e.breakpoints.mob}px)`]:{".row":{flexDirection:"column"},".column":{flexDirection:"row-reverse"},".fields":{flexDirection:"column",flexGrow:1},".wrapper .swatch":{aspectRatio:1,maxHeight:"5.3em"}}})));function w({cc:f={},format:w,defaultValue:v,value:x,onChange:_,disabled:y,...k}){const C=t(b,f),j=a(!1),N=a(null),R=void 0===x?null:"string"==typeof x?n(x):x,D=void 0===v?[255,0,0]:"string"==typeof v?n(v):v,[E,G]=o(l(D)),[M,$]=o(null),[B,A]=R?[R]:o(D),L=function(e,r){const[a,o,i]=d(r);return a==e[0]&&o==e[1]&&i==e[2]}(B,E)?E:l(B),S=a(L);function W(e,r=!1){A?.(e),_?.("rgb"===w?e:c(e)),r&&(S.current=l(e)),G(S.current)}function z(e){if(!j.current||!N.current||y)return;const{clientX:r,clientY:a}="touches"in e?e.changedTouches[0]:e;let{x:o,y:i,width:t,height:n}=N.current.getBoundingClientRect();S.current[1]=100*Math.min(Math.max(r-o+.5,0)/t,1),S.current[2]=100*(1-Math.min(Math.max(a-i+.5,0)/n,1)),W(d(S.current))}return i((()=>{const e=new AbortController,r=e.signal,a=e=>{z(e),j.current=!1};return window.addEventListener("mouseup",a,{signal:r}),window.addEventListener("touchend",a,{signal:r}),window.addEventListener("mousemove",z,{signal:r}),window.addEventListener("touchmove",z,{signal:r}),()=>e.abort()}),[y]),e("div",{...k,style:{"--hue":`hsl(${L[0]}, 100%, 50%)`,"--color":`rgb(${B.join(",")})`},className:s(C.wrapper,k.className),children:[e("div",{className:C.row,children:[r("div",{ref:N,onMouseDown:e=>{j.current=!0,z(e.nativeEvent)},onTouchStart:e=>{j.current=!0,z(e.nativeEvent)},className:C.space,style:{background:`linear-gradient(90deg, transparent, hsl(${L[0]}, 100%, 50%)), linear-gradient(white, black)`},children:r("div",{"aria-disabled":y,className:C.selection,style:{left:`${L[1]}%`,top:100-L[2]+"%"}})}),e("div",{className:C.column,children:[r(u,{color:`rgb(${B.join(",")})`,cc:{...f,swatch:C.swatch}}),e("div",{className:C.fields,children:[r(h,{disabled:y,size:"sml",icon:"#",className:C.hex,value:null!==M?M:c(B),onChange:e=>{const r=e.target.value.replace(/[^\da-fA-F]/g,"").slice(0,6);$(r),W(n(r),!0)},onBlur:()=>$(null)}),r(g,{className:C.rgb,children:B.map(((e,a)=>r(p,{cc:f,disabled:y,max:255,precision:0,controls:!1,size:"sml",icon:"RGB".charAt(a),value:e,onChange:e=>{const r=B.slice();r[a]=parseInt(e.target.value)||0,W(r,!0)}},a)))})]})]})]}),r(m,{max:360,step:.25,tooltips:"never",disabled:y,value:[L[0]],onChange:e=>{S.current[0]=e[0],W(d(S.current))},cc:{...f,progress:C.hue__progress,track:C.hue__track,handle:C.hue__handle}})]})}export{w as default};
|
|
3
3
|
//# sourceMappingURL=color-picker.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useState as o,useMemo as a}from"react";import{combineClasses as l,classes as t}from"../../core/utils.js";import i from"../../hooks/use-input-props.js";import{createStyles as n}from"../../core/style.js";const d=n("field",{".input":{border:"none",background:"none",outline:"none",color:"var(--f-clr-text-100)",width:0,flexGrow:1},".input::placeholder":{color:"var(--f-clr-grey-300)"},".field":{
|
|
2
|
+
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useState as o,useMemo as a}from"react";import{combineClasses as l,classes as t}from"../../core/utils.js";import i from"../../hooks/use-input-props.js";import{createStyles as n}from"../../core/style.js";const d=n("field",{".input":{border:"none",background:"none",outline:"none",color:"var(--f-clr-text-100)",width:0,flexGrow:1},".input::placeholder":{color:"var(--f-clr-grey-300)"},".field":{borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-grey-200)",transition:"background-color .2s, border-color .2s, color .2s, outline-color .2s",display:"flex",alignItems:"center",overflow:"hidden",outline:"solid 3px transparent",minWidth:"min(var(--width, 100vw), 12em)"},".v__default":{backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)"},".v__minimal":{backgroundColor:"var(--f-clr-fg-100)"},".content":{display:"flex",alignItems:"center",gap:"var(--f-spacing-xsm)",padding:".675em",flexGrow:1},".v__default:focus-within":{borderColor:"var(--f-clr-primary-100)",color:"var(--f-clr-primary-100)",outlineColor:"var(--f-clr-primary-500)"},".v__minimal:focus-within":{backgroundColor:"var(--f-clr-fg-200)"},'.field[data-error="true"]':{borderColor:"var(--f-clr-error-100)"},'.field[data-error="true"]:focus-within':{outlineColor:"var(--f-clr-error-400)"},'.field[data-error="true"] .content':{color:"var(--f-clr-error-200)"},'.field[data-error="true"] .input':{color:"var(--f-clr-error-200)"},'.field[data-disabled="true"]':{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},'.field[data-disabled="true"] .input':{color:"var(--f-clr-grey-500)"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".field.round":{borderRadius:"calc(1.4em + 1px)"}});function f({cc:n={},round:f=!1,size:s="med",variant:c="default",error:u,icon:v,left:m,right:p,onEnter:g,inputRef:b,shape:_,defaultValue:h,...x}){const y=l(d,n),[w,C]=i(x),[k,z]=void 0!==x.value?[x.value]:o(h||""),j=a((()=>_?.split("").map((r=>/0/.test(r)?/[0-9]/:/\*/.test(r)?/\w/:r))||[]),[_]);return r("div",{...C,className:t(y.field,y[`s__${s}`],y[`v__${c}`],f&&y.round,x.className),"data-error":!!u,"data-disabled":x.disabled,"data-fb":"default"===c?"true":void 0,children:[m,r("label",{className:y.content,children:[v,e("input",{...w,ref:b,value:k,onChange:r=>{let e=r.target.value.split(""),o="",a=0;for(let l=0,t=0;l<e.length;l++){const i=e[l],n=j[t];if(!n){0===t&&(o=r.target.value,a=o.length);break}if("string"==typeof n)o+=n,n===i&&l===t||l--;else{if(!n.test(i))break;o+=i,a=o.length}t++}r.target.value=o.slice(0,a),z?.(r.target.value),x.onChange?.(r)},className:y.input,"aria-invalid":!!u,onKeyDown:r=>{"Enter"===r.key&&g?.()}})]}),p]})}export{f as default};
|
|
3
3
|
//# sourceMappingURL=field.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useState as o,useRef as a}from"react";import l from"./button.js";import i from"../../hooks/use-input-props.js";import{combineClasses as t,classes as n,combineRefs as d}from"../../core/utils.js";import{createStyles as c}from"../../core/style.js";import{Icon as s}from"../../core/icons.js";const f=c("file-field",{".input":{position:"absolute",opacity:0},".placeholder":{color:"var(--f-clr-text-100)",userSelect:"none",flexGrow:1,background:"none",border:"none",width:0,pointerEvents:"none"},".field":{
|
|
2
|
+
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useState as o,useRef as a}from"react";import l from"./button.js";import i from"../../hooks/use-input-props.js";import{combineClasses as t,classes as n,combineRefs as d}from"../../core/utils.js";import{createStyles as c}from"../../core/style.js";import{Icon as s}from"../../core/icons.js";const f=c("file-field",{".input":{position:"absolute",opacity:0},".placeholder":{color:"var(--f-clr-text-100)",userSelect:"none",flexGrow:1,background:"none",border:"none",width:0,pointerEvents:"none"},".field":{borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-grey-200)",transition:"background-color .2s, border-color .2s, color .2s, outline-color .2s",display:"flex",alignItems:"center",overflow:"hidden",outline:"solid 3px transparent",minWidth:"min(var(--width, 100vw), 12em)"},".v__default":{backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)"},".v__minimal":{backgroundColor:"var(--f-clr-fg-100)"},".content":{display:"flex",alignItems:"center",gap:"var(--f-spacing-xsm)",padding:".675em",flexGrow:1},".v__default:focus-within":{borderColor:"var(--f-clr-primary-100)",color:"var(--f-clr-primary-100)",outlineColor:"var(--f-clr-primary-500)"},".v__minimal:focus-within":{backgroundColor:"var(--f-clr-fg-200)"},'.field[data-error="true"]':{borderColor:"var(--f-clr-error-100)"},'.field[data-error="true"]:focus-within':{outlineColor:"var(--f-clr-error-400)"},'.field[data-error="true"] .content':{color:"var(--f-clr-error-200)"},'.field[data-error="true"] .placeholder':{color:"var(--f-clr-error-200)"},'.field[data-disabled="true"]':{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},'.field[data-disabled="true"] .placeholder':{color:"var(--f-clr-grey-500)"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".field.round":{borderRadius:"calc(1.4em + 1px)"},".button":{marginRight:".25em"}});function u({cc:c={},size:u="med",variant:m="default",round:p,icon:b,error:v,loading:g=!1,inputRef:h,..._}){const y=t(f,c),[x,C]=o([]),z=a(null),[k,w]=i(_);return r("label",{...w,className:n(y.field,y[`s__${u}`],y[`v__${m}`],p&&y.round,_.className),"data-error":!!v,"data-disabled":_.disabled,"data-fb":"default"===m?"true":void 0,children:[r("div",{className:y.content,children:[b,e("input",{...k,ref:d(z,h),type:"file",className:y.input,disabled:_.disabled||g,"aria-invalid":!!v,onChange:r=>{C?.(Array.from(r.target.files||[])),_.onChange?.(r)}}),e("input",{readOnly:!0,role:"none",tabIndex:-1,className:y.placeholder,placeholder:k.placeholder,value:x.map((r=>r.name))})]}),e(l,{compact:!0,"aria-label":k["aria-label"],"aria-labelledby":k["aria-labelledby"],disabled:_.disabled,round:p,size:u,loading:g,cc:{...c,button:y.button},onClick:()=>z.current?.click(),children:e(s,{type:"upload"})})]})}export{u as default};
|
|
3
3
|
//# sourceMappingURL=file-field.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as t}from"react/jsx-runtime";import{useState as e,useRef as r,useCallback as n}from"react";import o from"./field.js";import i from"./button.js";import{combineClasses as a,toNumber as u,round as l,combineRefs as c,changeInputValue as m}from"../../core/utils.js";import{createStyles as d}from"../../core/style.js";import{Icon as p}from"../../core/icons.js";const f=d("number-field",{".field .button__start":{marginLeft:".25em",background:"var(--f-clr-bg-100)",color:"var(--f-clr-text-100)"},".field .button__end":{marginRight:".25em",background:"var(--f-clr-bg-100)",color:"var(--f-clr-text-100)"},".input":{MozAppearance:"textfield"},".input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button":{WebkitAppearance:"none",margin:0}});function s({cc:d={},precision:s=3,controls:b=!0,defaultValue:g,...v}){const _=a(f,d),[h,k]=void 0!==v.value?[v.value]:e(g||""),x=r(null),j=u(v.step,1),A=u(v.min,-Number.MAX_VALUE),C=u(v.max,Number.MAX_VALUE),M=n(((t,e)=>{let r=t?parseFloat(t.toString()):void 0;return void 0!==e&&(r=(r||0)+e),void 0!==r&&(r=Math.max(r,A),r=Math.min(r,C)),void 0===r?"":l(r,s).toString()}),[s,A,C]);function y(t){x.current&&m(x.current,M(h,t))}const z={compact:!0,size:v.size,disabled:v.disabled,round:v.round};return t(o,{...v,inputRef:c(x,v.inputRef),type:"number",value:h,onChange:t=>{k?.(t.target.value),v.onChange?.(t)},onBlur:t=>{t.target.value=M(t.target.value),k?.(t.target.value),v.onChange?.(t),v.onBlur?.(t)},cc:{field:_.field,input:_.input
|
|
2
|
+
import{jsx as t}from"react/jsx-runtime";import{useState as e,useRef as r,useCallback as n}from"react";import o from"./field.js";import i from"./button.js";import{combineClasses as a,toNumber as u,round as l,combineRefs as c,changeInputValue as m}from"../../core/utils.js";import{createStyles as d}from"../../core/style.js";import{Icon as p}from"../../core/icons.js";const f=d("number-field",{".field .button__start":{marginLeft:".25em",background:"var(--f-clr-bg-100)",color:"var(--f-clr-text-100)"},".field .button__end":{marginRight:".25em",background:"var(--f-clr-bg-100)",color:"var(--f-clr-text-100)"},".input":{MozAppearance:"textfield"},".input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button":{WebkitAppearance:"none",margin:0}});function s({cc:d={},precision:s=3,controls:b=!0,defaultValue:g,...v}){const _=a(f,d),[h,k]=void 0!==v.value?[v.value]:e(g||""),x=r(null),j=u(v.step,1),A=u(v.min,-Number.MAX_VALUE),C=u(v.max,Number.MAX_VALUE),M=n(((t,e)=>{let r=t?parseFloat(t.toString()):void 0;return void 0!==e&&(r=(r||0)+e),void 0!==r&&(r=Math.max(r,A),r=Math.min(r,C)),void 0===r?"":l(r,s).toString()}),[s,A,C]);function y(t){x.current&&m(x.current,M(h,t))}const z={compact:!0,size:v.size,disabled:v.disabled,round:v.round};return t(o,{...v,inputRef:c(x,v.inputRef),type:"number",value:h,onChange:t=>{k?.(t.target.value),v.onChange?.(t)},onBlur:t=>{t.target.value=M(t.target.value),k?.(t.target.value),v.onChange?.(t),v.onBlur?.(t)},cc:{...d,field:_.field,input:_.input},left:b?t(i,{...z,cc:{button:_.button__start},"aria-label":`-${j}`,onClick:()=>y(-j),children:t(p,{type:"remove"})}):null,right:b?t(i,{...z,cc:{button:_.button__end},"aria-label":`+${j}`,onClick:()=>y(j),children:t(p,{type:"add"})}):null})}export{s as default};
|
|
3
3
|
//# sourceMappingURL=number-field.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t,useMemo as o}from"react";import i from"./field.js";import a from"./toggle.js";import n from"../feedback/progress-bar.js";import s from"../../hooks/use-input-props.js";import{combineClasses as c,classes as l}from"../../core/utils.js";import{createStyles as m}from"../../core/style.js";import{Icon as d}from"../../core/icons.js";const f=["#eb2a1c","#eb2a1c","#e8831e","#f0d030","#fff952","#5aff54"],p=m("password-field",{".wrapper":{minWidth:"min(var(--width, 100vw), 12em)"},".field":{"--width":"100%"},".wrapper .track":{width:"100%",marginTop:"var(--f-spacing-xsm)"},".field .toggle":{marginRight:".25em"}});function g({cc:m={},strengthBar:g=!1,size:h="med",round:u,error:v,icon:w,left:b,right:j,defaultValue:k,onEnter:x,inputRef:y,ref:z,...C}){const R=c(p,m),[E,L]=void 0!==C.value?[C.value]:t(k||""),[N,T]=t(!1),W=o((()=>{let e=0;for(const r of[/[a-z]/,/[A-Z]/,/\d/,/\W|_/,new RegExp(`.{${C.minLength||10},}`)])r.test(E?.toString()||"")&&e++;return e}),[E,C.minLength]),[A,B]=s(C);return e("div",{ref:z,...B,className:l(R.wrapper,C.className),children:[r(i,{...A,inputRef:y,type:N?"text":"password",round:u,size:h,error:v,icon:w,left:b,value:E,onEnter:x,cc:{field:R.field
|
|
2
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t,useMemo as o}from"react";import i from"./field.js";import a from"./toggle.js";import n from"../feedback/progress-bar.js";import s from"../../hooks/use-input-props.js";import{combineClasses as c,classes as l}from"../../core/utils.js";import{createStyles as m}from"../../core/style.js";import{Icon as d}from"../../core/icons.js";const f=["#eb2a1c","#eb2a1c","#e8831e","#f0d030","#fff952","#5aff54"],p=m("password-field",{".wrapper":{minWidth:"min(var(--width, 100vw), 12em)"},".field":{"--width":"100%"},".wrapper .track":{width:"100%",marginTop:"var(--f-spacing-xsm)"},".field .toggle":{marginRight:".25em"}});function g({cc:m={},strengthBar:g=!1,size:h="med",round:u,error:v,icon:w,left:b,right:j,defaultValue:k,onEnter:x,inputRef:y,ref:z,...C}){const R=c(p,m),[E,L]=void 0!==C.value?[C.value]:t(k||""),[N,T]=t(!1),W=o((()=>{let e=0;for(const r of[/[a-z]/,/[A-Z]/,/\d/,/\W|_/,new RegExp(`.{${C.minLength||10},}`)])r.test(E?.toString()||"")&&e++;return e}),[E,C.minLength]),[A,B]=s(C);return e("div",{ref:z,...B,className:l(R.wrapper,C.className),children:[r(i,{...A,inputRef:y,type:N?"text":"password",round:u,size:h,error:v,icon:w,left:b,value:E,onEnter:x,cc:{...m,field:R.field},onChange:e=>{L?.(e.target.value),C.onChange?.(e)},right:r(a,{compact:!0,"aria-label":"Toggle visibility",round:u,size:h,variant:"minimal",disabled:C.disabled,checkedContent:r(d,{type:"hide"}),checked:N,onChange:e=>T(e.target.checked),cc:{toggle:R.toggle},children:r(d,{type:"show"})})}),g&&r(n,{size:"sml",value:W/5,color:f[W],cc:{track:R.track},"aria-label":"Password strength"})]})}export{g as default};
|
|
3
3
|
//# sourceMappingURL=password-field.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as r,jsxs as o}from"react/jsx-runtime";import{combineClasses as e,classes as i}from"../../core/utils.js";import a from"../feedback/halo.js";import t from"../../hooks/use-input-props.js";import{createStyles as s}from"../../core/style.js";const l=s("radio",{".wrapper":{position:"relative",width:"max-content"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".input":{position:"absolute",opacity:0,inset:0,width:"100%",height:"100%",zIndex:1,WebkitTapHighlightColor:"transparent"},".radio":{position:"relative",width:"1.5em",height:"1.5em",borderRadius:"999px",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",transition:"background-color .25s, border-color .25s"},".input:enabled:not(:checked)":{cursor:"pointer"},".input:checked:enabled + .radio":{backgroundColor:"var(--color, var(--f-clr-primary-300))",borderColor:"var(--color, var(--f-clr-primary-300))"},".selection":{position:"absolute",borderRadius:"999px",backgroundColor:"white",scale:0,transition:"scale .25s ease-out"},".s__xsm .selection":{inset:"4px"},".s__sml .selection":{inset:"5px"},".s__med .selection":{inset:"6px"},".s__lrg .selection":{inset:"7px"},".input:checked + .radio .selection":{scale:1},".input:disabled + .radio":{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},".input:disabled:checked + .radio":{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-200)"},".input:disabled + .radio .selection":{backgroundColor:"var(--f-clr-grey-100)"},'.wrapper[data-error="true"] .input:enabled + .radio':{borderColor:"var(--f-clr-error-200)"},'.wrapper[data-error="true"] .input:checked:enabled + .radio':{backgroundColor:"var(--f-clr-error-200)"},".wrapper .halo":{borderRadius:"999px",inset:"-.5em"}});function n({cc:s={},error:n,size:c="med",color:d,...p}){const u=e(l,s),[f,m]=t(p);return r(a,{hover:!1,cc:{halo:u.halo
|
|
1
|
+
import{jsx as r,jsxs as o}from"react/jsx-runtime";import{combineClasses as e,classes as i}from"../../core/utils.js";import a from"../feedback/halo.js";import t from"../../hooks/use-input-props.js";import{createStyles as s}from"../../core/style.js";const l=s("radio",{".wrapper":{position:"relative",width:"max-content"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".input":{position:"absolute",opacity:0,inset:0,width:"100%",height:"100%",zIndex:1,WebkitTapHighlightColor:"transparent"},".radio":{position:"relative",width:"1.5em",height:"1.5em",borderRadius:"999px",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",transition:"background-color .25s, border-color .25s"},".input:enabled:not(:checked)":{cursor:"pointer"},".input:checked:enabled + .radio":{backgroundColor:"var(--color, var(--f-clr-primary-300))",borderColor:"var(--color, var(--f-clr-primary-300))"},".selection":{position:"absolute",borderRadius:"999px",backgroundColor:"white",scale:0,transition:"scale .25s ease-out"},".s__xsm .selection":{inset:"4px"},".s__sml .selection":{inset:"5px"},".s__med .selection":{inset:"6px"},".s__lrg .selection":{inset:"7px"},".input:checked + .radio .selection":{scale:1},".input:disabled + .radio":{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},".input:disabled:checked + .radio":{backgroundColor:"var(--f-clr-grey-200)",borderColor:"var(--f-clr-grey-200)"},".input:disabled + .radio .selection":{backgroundColor:"var(--f-clr-grey-100)"},'.wrapper[data-error="true"] .input:enabled + .radio':{borderColor:"var(--f-clr-error-200)"},'.wrapper[data-error="true"] .input:checked:enabled + .radio':{backgroundColor:"var(--f-clr-error-200)"},".wrapper .halo":{borderRadius:"999px",inset:"-.5em"}});function n({cc:s={},error:n,size:c="med",color:d,...p}){const u=e(l,s),[f,m]=t(p);return r(a,{hover:!1,cc:{...s,halo:u.halo},children:o("div",{...m,className:i(u.wrapper,u[`s__${c}`],m.className),"data-error":!!n,children:[r("input",{...f,type:"radio",className:u.input,"aria-invalid":!!n}),r("div",{className:u.radio,style:{"--color":d},children:r("div",{className:u.selection})})]})})}export{n as default};
|
|
2
2
|
//# sourceMappingURL=radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","sources":["../../../../src/components/input/radio.tsx"],"sourcesContent":[null],"names":["styles","createStyles","position","width","fontSize","opacity","inset","height","zIndex","WebkitTapHighlightColor","borderRadius","backgroundColor","border","transition","cursor","borderColor","scale","Radio","cc","error","size","color","props","style","combineClasses","split","rest","useInputProps","_jsx","Halo","hover","halo","children","_jsxs","className","classes","wrapper","type","input","radio","selection"],"mappings":"wPAMA,MAAMA,EAASC,EAAa,QAAS,CACjC,WAAY,CACRC,SAAU,WACVC,MAAO,eAGX,UAAW,CACPC,SAAU,0BAGd,UAAW,CACPA,SAAU,0BAGd,UAAW,CACPA,SAAU,0BAGd,UAAW,CACPA,SAAU,0BAGd,SAAU,CACNF,SAAU,WACVG,QAAS,EACTC,MAAO,EACPH,MAAO,OACPI,OAAQ,OACRC,OAAQ,EACRC,wBAAyB,eAG7B,SAAU,CACNP,SAAU,WACVC,MAAO,QACPI,OAAQ,QACRG,aAAc,QACdC,gBAAiB,sBACjBC,OAAQ,gCACRC,WAAY,4CAGhB,+BAAgC,CAC5BC,OAAQ,WAGZ,kCAAmC,CAC/BH,gBAAiB,yCACjBI,YAAa,0CAGjB,aAAc,CACVb,SAAU,WACVQ,aAAc,QACdC,gBAAiB,QACjBK,MAAO,EACPH,WAAY,uBAGhB,qBAAsB,CAClBP,MAAO,OAGX,qBAAsB,CAClBA,MAAO,OAGX,qBAAsB,CAClBA,MAAO,OAGX,qBAAsB,CAClBA,MAAO,OAGX,qCAAsC,CAClCU,MAAO,GAGX,2BAA4B,CACxBL,gBAAiB,wBACjBI,YAAa,yBAGjB,mCAAoC,CAChCJ,gBAAiB,wBACjBI,YAAa,yBAGjB,sCAAuC,CACnCJ,gBAAiB,yBAGrB,sDAAuD,CACnDI,YAAa,0BAGjB,8DAA+D,CAC3DJ,gBAAiB,0BAGrB,iBAAkB,CACdD,aAAc,QACdJ,MAAO,WAWS,SAAAW,GAAMC,GAAEA,EAAK,CAAA,EAAEC,MAAEA,EAAKC,KAAEA,EAAO,MAAKC,MAAEA,KAAUC,IAQpE,MAAMC,EAAQC,EAAexB,EAAQkB,IAE9BO,EAAOC,GAAQC,EAAcL,GAEpC,OAAOM,EAACC,EAAI,CAACC,OAAO,EAAOZ,GAAI,
|
|
1
|
+
{"version":3,"file":"radio.js","sources":["../../../../src/components/input/radio.tsx"],"sourcesContent":[null],"names":["styles","createStyles","position","width","fontSize","opacity","inset","height","zIndex","WebkitTapHighlightColor","borderRadius","backgroundColor","border","transition","cursor","borderColor","scale","Radio","cc","error","size","color","props","style","combineClasses","split","rest","useInputProps","_jsx","Halo","hover","halo","children","_jsxs","className","classes","wrapper","type","input","radio","selection"],"mappings":"wPAMA,MAAMA,EAASC,EAAa,QAAS,CACjC,WAAY,CACRC,SAAU,WACVC,MAAO,eAGX,UAAW,CACPC,SAAU,0BAGd,UAAW,CACPA,SAAU,0BAGd,UAAW,CACPA,SAAU,0BAGd,UAAW,CACPA,SAAU,0BAGd,SAAU,CACNF,SAAU,WACVG,QAAS,EACTC,MAAO,EACPH,MAAO,OACPI,OAAQ,OACRC,OAAQ,EACRC,wBAAyB,eAG7B,SAAU,CACNP,SAAU,WACVC,MAAO,QACPI,OAAQ,QACRG,aAAc,QACdC,gBAAiB,sBACjBC,OAAQ,gCACRC,WAAY,4CAGhB,+BAAgC,CAC5BC,OAAQ,WAGZ,kCAAmC,CAC/BH,gBAAiB,yCACjBI,YAAa,0CAGjB,aAAc,CACVb,SAAU,WACVQ,aAAc,QACdC,gBAAiB,QACjBK,MAAO,EACPH,WAAY,uBAGhB,qBAAsB,CAClBP,MAAO,OAGX,qBAAsB,CAClBA,MAAO,OAGX,qBAAsB,CAClBA,MAAO,OAGX,qBAAsB,CAClBA,MAAO,OAGX,qCAAsC,CAClCU,MAAO,GAGX,2BAA4B,CACxBL,gBAAiB,wBACjBI,YAAa,yBAGjB,mCAAoC,CAChCJ,gBAAiB,wBACjBI,YAAa,yBAGjB,sCAAuC,CACnCJ,gBAAiB,yBAGrB,sDAAuD,CACnDI,YAAa,0BAGjB,8DAA+D,CAC3DJ,gBAAiB,0BAGrB,iBAAkB,CACdD,aAAc,QACdJ,MAAO,WAWS,SAAAW,GAAMC,GAAEA,EAAK,CAAA,EAAEC,MAAEA,EAAKC,KAAEA,EAAO,MAAKC,MAAEA,KAAUC,IAQpE,MAAMC,EAAQC,EAAexB,EAAQkB,IAE9BO,EAAOC,GAAQC,EAAcL,GAEpC,OAAOM,EAACC,EAAI,CAACC,OAAO,EAAOZ,GAAI,IAAKA,EAAIa,KAAMR,EAAMQ,MAChDC,SAAAC,EAAA,MAAA,IAASP,EACLQ,UAAWC,EACPZ,EAAMa,QACNb,EAAM,MAAMH,KACZM,EAAKQ,0BAEKf,EAAKa,SAAA,CAEnBJ,cAAWH,EAAOY,KAAK,QAAQH,UAAWX,EAAMe,uBAAuBnB,IAEvES,SAAKM,UAAWX,EAAMgB,MAAOhB,MAAO,CAAE,UAAWF,GAAcW,SAC3DJ,SAAKM,UAAWX,EAAMiB,kBAItC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as o,useId as a}from"react";import{Morph as n}from"@infinityfx/lively/layout";import{combineClasses as t,classes as i}from"../../core/utils.js";import l from"../feedback/halo.js";import{createStyles as d}from"../../core/style.js";const s=d("segmented",{".segmented":{position:"relative",display:"flex"},".v__default, .v__neutral":{borderRadius:"calc(var(--f-radius-sml) + .3em)",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",padding:".3em"},".s__sml":{fontSize:"var(--f-font-size-xxs)"},".s__med":{fontSize:"var(--f-font-size-xsm)"},".s__lrg":{fontSize:"var(--f-font-size-sml)"},".segmented.uniform":{display:"grid",gridAutoColumns:"1fr",gridAutoFlow:"column"},".segmented.vertical":{flexDirection:"column",gridAutoFlow:"row"},".segmented.round":{borderRadius:"calc(1.6em + 1px)"},".option":{position:"relative",border:"none",outline:"none",backgroundColor:"transparent",padding:".675em .8em",fontWeight:700,color:"var(--f-clr-text-100)",borderRadius:"var(--f-radius-sml)",flexGrow:1,transition:"color .4s",WebkitTapHighlightColor:"transparent"},".segmented.round .option":{borderRadius:"999px"},".option:enabled":{cursor:"pointer"},".option:disabled":{color:"var(--f-clr-grey-500)"},".content":{position:"relative",zIndex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:"var(--f-spacing-xsm)"},".selection":{position:"absolute",inset:"0",backgroundColor:"var(--f-clr-primary-200)",borderRadius:"var(--f-radius-sml)",boxShadow:"var(--f-shadow-sml)"},".v__neutral .selection":{backgroundColor:"var(--f-clr-text-100)"},'.v__neutral .option[aria-checked="true"]:enabled':{color:"var(--f-clr-text-200)"},".v__minimal .selection":{backgroundColor:"var(--f-clr-primary-400)"},".segmented.round .selection":{borderRadius:"999px"},'.segmented[data-error="true"]':{border:"solid 1px var(--f-clr-error-100)"},".segmented .halo":{zIndex:"0"},'.option[aria-checked="true"] .halo':{inset:"-.3em",borderRadius:"calc(var(--f-radius-sml) + .3em)"},'.segmented[data-error="true"] .ripple':{backgroundColor:"var(--f-clr-error-300)"},".segmented .container":{isolation:"unset"}});function c({cc:d={},variant:c="default",size:m="med",round:u=!1,uniform:f,vertical:p,options:v,name:g,value:b,defaultValue:x,onChange:h,error:_,...y}){const k=t(s,d),[C,z]=void 0!==b?[b]:o(x||v[0]?.value),R=a();return e("div",{...y,role:"radiogroup",className:i(k.segmented,k[`s__${m}`],k[`v__${c}`],u&&k.round,f&&k.uniform,p&&k.vertical,y.className),"data-error":!!_,"data-fb":"minimal"!==c?"true":void 0,children:v.map((({label:o,value:a,disabled:t=!1},i)=>e(l,{hover:!1,cc:{container:k.container,halo:k.halo,ring:k.ring
|
|
2
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as o,useId as a}from"react";import{Morph as n}from"@infinityfx/lively/layout";import{combineClasses as t,classes as i}from"../../core/utils.js";import l from"../feedback/halo.js";import{createStyles as d}from"../../core/style.js";const s=d("segmented",{".segmented":{position:"relative",display:"flex"},".v__default, .v__neutral":{borderRadius:"calc(var(--f-radius-sml) + .3em)",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",padding:".3em"},".s__sml":{fontSize:"var(--f-font-size-xxs)"},".s__med":{fontSize:"var(--f-font-size-xsm)"},".s__lrg":{fontSize:"var(--f-font-size-sml)"},".segmented.uniform":{display:"grid",gridAutoColumns:"1fr",gridAutoFlow:"column"},".segmented.vertical":{flexDirection:"column",gridAutoFlow:"row"},".segmented.round":{borderRadius:"calc(1.6em + 1px)"},".option":{position:"relative",border:"none",outline:"none",backgroundColor:"transparent",padding:".675em .8em",fontWeight:700,color:"var(--f-clr-text-100)",borderRadius:"var(--f-radius-sml)",flexGrow:1,transition:"color .4s",WebkitTapHighlightColor:"transparent"},".segmented.round .option":{borderRadius:"999px"},".option:enabled":{cursor:"pointer"},".option:disabled":{color:"var(--f-clr-grey-500)"},".content":{position:"relative",zIndex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:"var(--f-spacing-xsm)"},".selection":{position:"absolute",inset:"0",backgroundColor:"var(--f-clr-primary-200)",borderRadius:"var(--f-radius-sml)",boxShadow:"var(--f-shadow-sml)"},".v__neutral .selection":{backgroundColor:"var(--f-clr-text-100)"},'.v__neutral .option[aria-checked="true"]:enabled':{color:"var(--f-clr-text-200)"},".v__minimal .selection":{backgroundColor:"var(--f-clr-primary-400)"},".segmented.round .selection":{borderRadius:"999px"},'.segmented[data-error="true"]':{border:"solid 1px var(--f-clr-error-100)"},".segmented .halo":{zIndex:"0"},'.option[aria-checked="true"] .halo':{inset:"-.3em",borderRadius:"calc(var(--f-radius-sml) + .3em)"},'.segmented[data-error="true"] .ripple':{backgroundColor:"var(--f-clr-error-300)"},".segmented .container":{isolation:"unset"}});function c({cc:d={},variant:c="default",size:m="med",round:u=!1,uniform:f,vertical:p,options:v,name:g,value:b,defaultValue:x,onChange:h,error:_,...y}){const k=t(s,d),[C,z]=void 0!==b?[b]:o(x||v[0]?.value),R=a();return e("div",{...y,role:"radiogroup",className:i(k.segmented,k[`s__${m}`],k[`v__${c}`],u&&k.round,f&&k.uniform,p&&k.vertical,y.className),"data-error":!!_,"data-fb":"minimal"!==c?"true":void 0,children:v.map((({label:o,value:a,disabled:t=!1},i)=>e(l,{hover:!1,cc:{...d,container:k.container,halo:k.halo,ring:k.ring},children:r("button",{className:k.option,type:"button",role:"radio","aria-checked":C===a,disabled:t,onClick:()=>{z?.(a),h?.(a)},children:[e("input",{type:"radio",value:a,checked:C===a,hidden:!0,readOnly:!0,name:g}),e("span",{className:k.content,children:o}),C===a&&e(n,{group:`segmented-selection-${R}`,cachable:p?["y","sy"]:["x","sx"],deform:!1,transition:{duration:.4},children:e("div",{className:k.selection})})]})},i)))})}export{c as default};
|
|
3
3
|
//# sourceMappingURL=segmented.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as r,jsx as e,Fragment as a}from"react/jsx-runtime";import{useId as l,useRef as o,useState as i,useEffect as t}from"react";import n from"./button.js";import{combineClasses as d,classes as c,combineRefs as s}from"../../core/utils.js";import f from"../display/badge.js";import u from"../display/combobox/index.js";import m from"../../hooks/use-input-props.js";import{createStyles as p}from"../../core/style.js";import{Icon as b}from"../../core/icons.js";const g=p("select",{".field":{
|
|
2
|
+
import{jsxs as r,jsx as e,Fragment as a}from"react/jsx-runtime";import{useId as l,useRef as o,useState as i,useEffect as t}from"react";import n from"./button.js";import{combineClasses as d,classes as c,combineRefs as s}from"../../core/utils.js";import f from"../display/badge.js";import u from"../display/combobox/index.js";import m from"../../hooks/use-input-props.js";import{createStyles as p}from"../../core/style.js";import{Icon as b}from"../../core/icons.js";const g=p("select",{".field":{borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-grey-200)",transition:"background-color .2s, border-color .2s, color .2s, outline-color .2s",display:"flex",alignItems:"center",minWidth:"min(var(--width, 100vw), 12em)",outline:"solid 3px transparent"},".v__default":{backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)"},".v__minimal":{backgroundColor:"var(--f-clr-fg-100)"},".v__default:focus-within":{borderColor:"var(--f-clr-primary-100)",color:"var(--f-clr-primary-100)",outlineColor:"var(--f-clr-primary-500)"},".v__minimal:focus-within":{backgroundColor:"var(--f-clr-fg-200)"},'.field[data-error="true"]':{borderColor:"var(--f-clr-error-100)",color:"var(--f-clr-error-200)"},'.field[data-error="true"]:focus-within':{outlineColor:"var(--f-clr-error-400)"},'.field[data-error="true"] .content':{color:"var(--f-clr-error-200)"},'.field[data-disabled="true"]':{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},'.field[data-disabled="true"] .content':{color:"var(--f-clr-grey-500)"},".content__wrapper":{padding:".675em",display:"flex",alignItems:"center",gap:"var(--f-spacing-xsm)",overflow:"hidden",flexGrow:1},".content__wrapper > *:not(.content)":{flexShrink:0},".content":{position:"relative",display:"flex",alignItems:"center",gap:"var(--f-spacing-xsm)",flexGrow:1,overflow:"hidden",color:"var(--f-clr-text-100)",minHeight:"1.375em"},".content > *":{flexShrink:0},".placeholder":{color:"var(--f-clr-grey-300)"},".input":{position:"absolute",opacity:0,width:0},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".field.round":{borderRadius:"calc(1.4em + 1px)"},".field .badge":{backgroundColor:"var(--f-clr-fg-200)"},'.field[data-error="true"] .badge':{backgroundColor:"var(--f-clr-error-400)"},'.field[data-disabled="true"] .badge':{backgroundColor:"var(--f-clr-grey-200)"},".icon":{display:"flex",marginLeft:"auto"}});function v({cc:p={},options:v,multiple:h=!1,searchable:y,limit:_,emptyMessage:x="Nothing found",placeholder:C,value:k,defaultValue:w,onChange:z,readOnly:S,error:j,icon:N,size:I="med",variant:R="default",contentSize:O,round:H,inputRef:A,mobileContainer:G,virtualItemHeight:M,...$}){const L=d(g,p),T=l(),V=o(null),W=o(null),[q,B]=m($),[D,E]=void 0!==k?[k,z]:i(w||(h?[]:"")),F=Array.isArray(D);return t((()=>{h!==F&&E?.(h?D?[D]:[]:D[0])}),[h,F]),r(u.Root,{ref:W,stretch:!0,mobileContainer:G,children:[e(u.Trigger,{disabled:$.disabled||S,children:r("div",{...B,"aria-haspopup":"listbox",className:c(L.field,L[`s__${I}`],L[`v__${R}`],H&&L.round,$.className),"data-error":!!j,"data-disabled":$.disabled,"data-fb":"default"===R?"true":void 0,children:[r("div",{className:L.content__wrapper,children:[N,r("div",{className:L.content,children:[(F?!D.length:null==D||""===D)&&e("div",{className:L.placeholder,id:T,children:C}),F?D.length<3?D.map(((r,a)=>e(f,{round:H,cc:{badge:L.badge},children:r},a))):r(a,{children:[e(f,{round:H,cc:{badge:L.badge},children:D[0]}),r(f,{round:H,cc:{badge:L.badge},children:["+",D.length-1," more"]})]}):v.find((r=>r.value===D))?.label]}),e("input",{"aria-labelledby":C?T:void 0,...q,ref:s(A,V),readOnly:!0,className:L.input,value:D?.toString(),"aria-invalid":!!j})]}),e(n,{compact:!0,"aria-label":q["aria-label"],"aria-labelledby":q["aria-labelledby"],round:H,size:I,disabled:$.disabled||S,variant:"minimal",style:{marginRight:".2em"},children:e(b,{type:"expand"})})]})}),e(u.Content,{round:H,size:O,"aria-multiselectable":h,searchable:y,emptyMessage:x,virtualItemHeight:M,children:v.map((({label:a,value:l,key:o,disabled:i})=>{const t=F?D.includes(l):D===l;return r(u.Option,{value:o||""+a,disabled:i,"aria-selected":t,onSelect:()=>{if(F){const r=D.slice(),e=r.indexOf(l);e<0?(!_||r.length<_)&&r.push(l):r.splice(e,1),E?.(r)}else W.current?.close(),V.current?.focus(),E?.(l)},children:[a,t&&e("div",{className:L.icon,children:e(b,{type:"check"})})]},""+l)}))})]})}export{v as default};
|
|
3
3
|
//# sourceMappingURL=select.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{combineClasses as i,classes as a}from"../../core/utils.js";import{useState as o,useRef as t}from"react";import n from"../feedback/halo.js";import s from"../../hooks/use-input-props.js";import{createStyles as c}from"../../core/style.js";import{Animatable as d}from"@infinityfx/lively";const l=c("switch",{".wrapper":{position:"relative",width:"max-content"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".input":{position:"absolute",opacity:0,inset:0,width:"100%",height:"100%",zIndex:2,WebkitTapHighlightColor:"transparent"},".input:enabled":{cursor:"pointer"},".switch":{position:"relative",height:"1.5em",width:"calc(calc(1.5em - 6px) * 2 + 6px)",padding:"3px",aspectRatio:2,backgroundColor:"var(--f-clr-fg-200)",borderRadius:"var(--f-radius-sml)",transition:"background-color .35s"},".icons":{position:"absolute",inset:0,display:"flex"},".icon":{flexGrow:1,flexBasis:0,display:"flex",alignItems:"center",justifyContent:"center",fontSize:".75em"},".icon:first-child":{color:"white"},".icon:last-child":{color:"var(--f-clr-grey-400)"},".handle__wrapper":{position:"relative",borderRadius:"calc(var(--f-radius-sml) - 1px)",height:"100%",aspectRatio:1,zIndex:1},".handle":{width:"inherit",height:"inherit",borderRadius:"inherit",backgroundColor:"white",boxShadow:"var(--f-shadow-sml)"},".wrapper.round .switch":{borderRadius:"999px"},".wrapper.round .handle__wrapper":{borderRadius:"999px"},'.wrapper[data-error="true"] .input:enabled + .switch':{backgroundColor:"var(--f-clr-error-400)"},".input:checked:enabled + .switch":{backgroundColor:"var(--color, var(--f-clr-primary-300))"},'.wrapper[data-error="true"] .input:checked:enabled + .switch':{backgroundColor:"var(--f-clr-error-200)"},".input:disabled + .switch .handle":{backgroundColor:"var(--f-clr-grey-200)"},".wrapper .halo":{borderRadius:"var(--f-radius-sml)",inset:"-.5em"},".wrapper.round .halo":{borderRadius:"999px"}});function p({cc:c={},error:p,size:h="med",color:m,round:f=!0,iconOff:u,iconOn:v,checked:w,defaultChecked:b,...g}){const x=i(l,c),[k,_]=s(g),[y,z]=void 0!==w?[w]:o(b||!1),C=t(null);return r("div",{..._,className:a(x.wrapper,x[`s__${h}`],f&&x.round,_.className),"data-error":!!p,children:[e("input",{...k,ref:C,type:"checkbox",className:x.input,"aria-invalid":!!p,checked:y,onChange:r=>{z?.(r.target.checked),g.onChange?.(r)}}),r("div",{className:x.switch,style:{"--color":m},children:[r("div",{className:x.icons,children:[e("div",{className:x.icon,children:v}),e("div",{className:x.icon,children:u})]}),e(d,{order:-1,initial:{translate:y?"100% 0%":"0% 0%"},animate:{translate:["0% 0%","100% 0%"],duration:.35},triggers:[{on:y,immediate:!0},{on:!y,reverse:!0,immediate:!0}],children:e(n,{target:C,hover:!1,cc:{halo:x.halo
|
|
2
|
+
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{combineClasses as i,classes as a}from"../../core/utils.js";import{useState as o,useRef as t}from"react";import n from"../feedback/halo.js";import s from"../../hooks/use-input-props.js";import{createStyles as c}from"../../core/style.js";import{Animatable as d}from"@infinityfx/lively";const l=c("switch",{".wrapper":{position:"relative",width:"max-content"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".input":{position:"absolute",opacity:0,inset:0,width:"100%",height:"100%",zIndex:2,WebkitTapHighlightColor:"transparent"},".input:enabled":{cursor:"pointer"},".switch":{position:"relative",height:"1.5em",width:"calc(calc(1.5em - 6px) * 2 + 6px)",padding:"3px",aspectRatio:2,backgroundColor:"var(--f-clr-fg-200)",borderRadius:"var(--f-radius-sml)",transition:"background-color .35s"},".icons":{position:"absolute",inset:0,display:"flex"},".icon":{flexGrow:1,flexBasis:0,display:"flex",alignItems:"center",justifyContent:"center",fontSize:".75em"},".icon:first-child":{color:"white"},".icon:last-child":{color:"var(--f-clr-grey-400)"},".handle__wrapper":{position:"relative",borderRadius:"calc(var(--f-radius-sml) - 1px)",height:"100%",aspectRatio:1,zIndex:1},".handle":{width:"inherit",height:"inherit",borderRadius:"inherit",backgroundColor:"white",boxShadow:"var(--f-shadow-sml)"},".wrapper.round .switch":{borderRadius:"999px"},".wrapper.round .handle__wrapper":{borderRadius:"999px"},'.wrapper[data-error="true"] .input:enabled + .switch':{backgroundColor:"var(--f-clr-error-400)"},".input:checked:enabled + .switch":{backgroundColor:"var(--color, var(--f-clr-primary-300))"},'.wrapper[data-error="true"] .input:checked:enabled + .switch':{backgroundColor:"var(--f-clr-error-200)"},".input:disabled + .switch .handle":{backgroundColor:"var(--f-clr-grey-200)"},".wrapper .halo":{borderRadius:"var(--f-radius-sml)",inset:"-.5em"},".wrapper.round .halo":{borderRadius:"999px"}});function p({cc:c={},error:p,size:h="med",color:m,round:f=!0,iconOff:u,iconOn:v,checked:w,defaultChecked:b,...g}){const x=i(l,c),[k,_]=s(g),[y,z]=void 0!==w?[w]:o(b||!1),C=t(null);return r("div",{..._,className:a(x.wrapper,x[`s__${h}`],f&&x.round,_.className),"data-error":!!p,children:[e("input",{...k,ref:C,type:"checkbox",className:x.input,"aria-invalid":!!p,checked:y,onChange:r=>{z?.(r.target.checked),g.onChange?.(r)}}),r("div",{className:x.switch,style:{"--color":m},children:[r("div",{className:x.icons,children:[e("div",{className:x.icon,children:v}),e("div",{className:x.icon,children:u})]}),e(d,{order:-1,initial:{translate:y?"100% 0%":"0% 0%"},animate:{translate:["0% 0%","100% 0%"],duration:.35},triggers:[{on:y,immediate:!0},{on:!y,reverse:!0,immediate:!0}],children:e(n,{target:C,hover:!1,cc:{...c,halo:x.halo},children:e("div",{className:x.handle__wrapper,children:e(d,{inherit:!0,order:-1,deform:!1,initial:{},animate:{scale:[1,"1.6 1",1],duration:.35},children:e("div",{className:x.handle})})})})})]})]})}export{p as default};
|
|
3
3
|
//# sourceMappingURL=switch.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as i,Fragment as r}from"react/jsx-runtime";import{Children as t,useState as n,useRef as o,useEffect as d,isValidElement as a,cloneElement as l}from"react";import{combineClasses as c,classes as s,combineRefs as u}from"../../core/utils.js";import{createStyles as h}from"../../core/style.js";import"../feedback/progress-bar.js";import"../feedback/circular-progress.js";import"@infinityfx/lively";import p from"../feedback/halo.js";import"../feedback/indicator.js";import"../feedback/skeleton.js";const v=h("panel",{".panel":{position:"relative",display:"flex",flexShrink:0},".d__vertical":{flexDirection:"column"},".divider":{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",touchAction:"none"},".d__horizontal > .divider":{minHeight:"100%",height:"auto",cursor:"ew-resize"},".d__horizontal.v__default > .divider":{background:"var(--f-clr-fg-200)",width:"1px"},".d__horizontal.v__minimal > .divider":{paddingInline:"3px"},".d__vertical > .divider":{minWidth:"100%",width:"auto",cursor:"ns-resize"},".d__vertical.v__default > .divider":{background:"var(--f-clr-fg-200)",height:"1px"},".d__vertical.v__minimal > .divider":{paddingBlock:"3px"},".focus":{position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",zIndex:1},".d__horizontal.v__default > .divider .focus":{width:"3px",height:"100%"},".d__vertical.v__default > .divider .focus":{height:"3px",width:"100%"},".handle":{position:"relative",borderRadius:"3px",backgroundColor:"var(--f-clr-fg-200)",display:"grid",gap:"1px",zIndex:1,outline:"none"},".d__horizontal.v__minimal > .divider .handle":{width:"6px",height:"30px",backgroundColor:"var(--f-clr-grey-200)"},".d__vertical.v__minimal > .divider .handle":{height:"6px",width:"30px",backgroundColor:"var(--f-clr-grey-200)"},".d__horizontal > .divider .handle":{gridTemplateColumns:"1fr 1fr",padding:"5px 3px"},".d__vertical > .divider .handle":{gridTemplateColumns:"1fr 1fr 1fr",padding:"3px 5px"},".dot":{backgroundColor:"var(--f-clr-grey-200)",borderRadius:"99px",width:"2px",height:"2px"},".divider .halo":{inset:"-.5em"},".v__minimal .divider .halo":{borderRadius:"99px"}});function f({cc:h={},children:f,variant:m="default",direction:_="horizontal",handles:g=!0,defaultSizes:x,ref:w,...y}){const b=c(v,h),k=t.count(f),[z,j]=n(new Array(Math.max(k-1,0)).fill(0).map(((e,i)=>void 0!==x?.[i]?x[i]:(i+1)/k))),C=o(null),A=o(0);function I(e,i){const r=z[e-1]||0,t=z[e+1]||1,n=z.slice();n[e]=Math.min(Math.max(i,r),t),j(n)}return d((()=>{const e=new AbortController,i=e.signal;function r(e){if(!A.current||!C.current)return;const{x:i,y:r,width:t,height:n}=C.current.getBoundingClientRect(),{clientX:o,clientY:d}="touches"in e?e.touches[0]:e,a=(o-i)/t,l=(d-r)/n;I(A.current-1,"vertical"===_?l:a)}const t=()=>A.current=0;return window.addEventListener("mousemove",r,{signal:i}),window.addEventListener("mouseup",t,{signal:i}),window.addEventListener("touchmove",r,{signal:i}),window.addEventListener("touchend",t,{signal:i}),()=>e.abort()}),[z,_]),e("div",{...y,ref:u(C,w),className:s(b.panel,b[`v__${m}`],b[`d__${_}`],y.className),children:t.map(f,((t,n)=>{if(!a(t))return t;const o=(z[n]??1)-(z[n-1]??0);return i(r,{children:[0!==n&&i("div",{className:b.divider,onTouchStart:()=>A.current=n,onMouseDown:()=>A.current=n,children:[e("div",{className:b.focus}),g&&e(p,{hover:!1,color:"var(--f-clr-primary-400)",cc:{halo:b.halo
|
|
2
|
+
import{jsx as e,jsxs as i,Fragment as r}from"react/jsx-runtime";import{Children as t,useState as n,useRef as o,useEffect as d,isValidElement as a,cloneElement as l}from"react";import{combineClasses as c,classes as s,combineRefs as u}from"../../core/utils.js";import{createStyles as h}from"../../core/style.js";import"../feedback/progress-bar.js";import"../feedback/circular-progress.js";import"@infinityfx/lively";import p from"../feedback/halo.js";import"../feedback/indicator.js";import"../feedback/skeleton.js";const v=h("panel",{".panel":{position:"relative",display:"flex",flexShrink:0},".d__vertical":{flexDirection:"column"},".divider":{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",touchAction:"none"},".d__horizontal > .divider":{minHeight:"100%",height:"auto",cursor:"ew-resize"},".d__horizontal.v__default > .divider":{background:"var(--f-clr-fg-200)",width:"1px"},".d__horizontal.v__minimal > .divider":{paddingInline:"3px"},".d__vertical > .divider":{minWidth:"100%",width:"auto",cursor:"ns-resize"},".d__vertical.v__default > .divider":{background:"var(--f-clr-fg-200)",height:"1px"},".d__vertical.v__minimal > .divider":{paddingBlock:"3px"},".focus":{position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",zIndex:1},".d__horizontal.v__default > .divider .focus":{width:"3px",height:"100%"},".d__vertical.v__default > .divider .focus":{height:"3px",width:"100%"},".handle":{position:"relative",borderRadius:"3px",backgroundColor:"var(--f-clr-fg-200)",display:"grid",gap:"1px",zIndex:1,outline:"none"},".d__horizontal.v__minimal > .divider .handle":{width:"6px",height:"30px",backgroundColor:"var(--f-clr-grey-200)"},".d__vertical.v__minimal > .divider .handle":{height:"6px",width:"30px",backgroundColor:"var(--f-clr-grey-200)"},".d__horizontal > .divider .handle":{gridTemplateColumns:"1fr 1fr",padding:"5px 3px"},".d__vertical > .divider .handle":{gridTemplateColumns:"1fr 1fr 1fr",padding:"3px 5px"},".dot":{backgroundColor:"var(--f-clr-grey-200)",borderRadius:"99px",width:"2px",height:"2px"},".divider .halo":{inset:"-.5em"},".v__minimal .divider .halo":{borderRadius:"99px"}});function f({cc:h={},children:f,variant:m="default",direction:_="horizontal",handles:g=!0,defaultSizes:x,ref:w,...y}){const b=c(v,h),k=t.count(f),[z,j]=n(new Array(Math.max(k-1,0)).fill(0).map(((e,i)=>void 0!==x?.[i]?x[i]:(i+1)/k))),C=o(null),A=o(0);function I(e,i){const r=z[e-1]||0,t=z[e+1]||1,n=z.slice();n[e]=Math.min(Math.max(i,r),t),j(n)}return d((()=>{const e=new AbortController,i=e.signal;function r(e){if(!A.current||!C.current)return;const{x:i,y:r,width:t,height:n}=C.current.getBoundingClientRect(),{clientX:o,clientY:d}="touches"in e?e.touches[0]:e,a=(o-i)/t,l=(d-r)/n;I(A.current-1,"vertical"===_?l:a)}const t=()=>A.current=0;return window.addEventListener("mousemove",r,{signal:i}),window.addEventListener("mouseup",t,{signal:i}),window.addEventListener("touchmove",r,{signal:i}),window.addEventListener("touchend",t,{signal:i}),()=>e.abort()}),[z,_]),e("div",{...y,ref:u(C,w),className:s(b.panel,b[`v__${m}`],b[`d__${_}`],y.className),children:t.map(f,((t,n)=>{if(!a(t))return t;const o=(z[n]??1)-(z[n-1]??0);return i(r,{children:[0!==n&&i("div",{className:b.divider,onTouchStart:()=>A.current=n,onMouseDown:()=>A.current=n,children:[e("div",{className:b.focus}),g&&e(p,{hover:!1,color:"var(--f-clr-primary-400)",cc:{...h,halo:b.halo},children:e("div",{tabIndex:0,className:b.handle,onKeyDown:e=>{const i="ArrowRight"===e.key||"ArrowDown"===e.key;(i||"ArrowLeft"===e.key||"ArrowUp"===e.key)&&(I(n-1,z[n-1]+(i?.05:-.05)),e.preventDefault())},children:"default"===m&&[0,1,2,3,4,5].map((i=>e("div",{className:b.dot},i)))})})]}),l(t,{style:{...t.props.style,flexGrow:100*o,flexBasis:0}})]})}))})}export{f as default};
|
|
3
3
|
//# sourceMappingURL=panel.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{useState as o,Children as a}from"react";import r from"../../feedback/halo.js";import{combineClasses as n,classes as c}from"../../../core/utils.js";import l from"../../input/toggle.js";import d from"../collapsible.js";import{createStyles as s}from"../../../core/style.js";import{useSidebar as m}from"./root.js";import p from"../../../hooks/use-fluid.js";import f from"../../../hooks/use-media-query.js";import{Icon as g}from"../../../core/icons.js";const h=s("sidebar.item",{".item":{position:"relative",fontWeight:600,borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-text-100)",display:"flex",transition:"background-color .25s, color .25s",outline:"none",overflow:"hidden",WebkitTapHighlightColor:"transparent"},".item:not(.compact)":{height:"3em",flexShrink:0},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".icon":{height:"inherit",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},".item:not(.compact) .icon":{width:"3em"},'.item[data-disabled="false"]':{cursor:"pointer"},".item.round":{borderRadius:"999px"},'.item[data-active="true"]':{backgroundColor:"var(--f-clr-primary-100)",color:"var(--f-clr-text-200)"},'.v__light[data-active="true"]':{backgroundColor:"var(--f-clr-primary-600)",color:"var(--f-clr-primary-100)"},'.item[data-disabled="true"]':{color:"var(--f-clr-grey-500)"},".item .toggle":{marginRight:"-.3em"},".item.compact .toggle":{background:"transparent",color:"var(--f-clr-text-100)",pointerEvents:"none",marginRight:0},".item.compact .toggle__content":{padding:0},'.v__default[data-active="true"] .toggle':{color:"var(--f-clr-text-200)"},".content":{paddingRight:"1em",display:"flex",alignItems:"center",gap:"var(--f-spacing-sml)",justifyContent:"space-between",transition:"opacity .3s",flexGrow:1,flexShrink:0},".item.compact .icon":{padding:".6em",lineHeight:1},".item.compact .content":{paddingRight:".6em",paddingBlock:".6em",lineHeight:1},'.content[data-hasicon="false"]':{paddingLeft:"1em"},'.item.compact .content[data-hasicon="false"]':{paddingLeft:".6em"},".children":{paddingLeft:"1.5em",transition:"padding-left .3s",flexShrink:0},".children > *":{flexShrink:0},".item.collapsed .content":{opacity:0},'.children[data-collapsed="true"]':{paddingLeft:"0em"}});function u({children:s,cc:u={},size:v="med",label:b,icon:x,right:k,active:y=!1,round:_,compact:j,variant:S="default",disabled:w=!1,defaultOpen:C=!1,...z}){const R=n(h,u),[N,I]=o(C),L=a.count(s),{collapsed:H}=m(),$=p(),W=f(`(max-width: ${$.breakpoints.mob}px)`);return e(t,{children:[i(r,{color:y?void 0:"var(--f-clr-primary-300)",disabled:w,children:e("div",{...z,tabIndex:0,role:"button",className:c(R.item,R[`s__${v}`],R[`v__${S}`],_&&R.round,j&&R.compact,H&&R.collapsed,z.className),"data-disabled":w,"data-active":y,onClick:()=>I(!N),children:[void 0!==x&&i("div",{className:R.icon,children:x}),e("span",{className:R.content,"data-hasicon":void 0!==x,children:[b,L?i(l,{cc:{toggle:R.toggle,content:R.toggle__content
|
|
2
|
+
import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{useState as o,Children as a}from"react";import r from"../../feedback/halo.js";import{combineClasses as n,classes as c}from"../../../core/utils.js";import l from"../../input/toggle.js";import d from"../collapsible.js";import{createStyles as s}from"../../../core/style.js";import{useSidebar as m}from"./root.js";import p from"../../../hooks/use-fluid.js";import f from"../../../hooks/use-media-query.js";import{Icon as g}from"../../../core/icons.js";const h=s("sidebar.item",{".item":{position:"relative",fontWeight:600,borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-text-100)",display:"flex",transition:"background-color .25s, color .25s",outline:"none",overflow:"hidden",WebkitTapHighlightColor:"transparent"},".item:not(.compact)":{height:"3em",flexShrink:0},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".icon":{height:"inherit",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},".item:not(.compact) .icon":{width:"3em"},'.item[data-disabled="false"]':{cursor:"pointer"},".item.round":{borderRadius:"999px"},'.item[data-active="true"]':{backgroundColor:"var(--f-clr-primary-100)",color:"var(--f-clr-text-200)"},'.v__light[data-active="true"]':{backgroundColor:"var(--f-clr-primary-600)",color:"var(--f-clr-primary-100)"},'.item[data-disabled="true"]':{color:"var(--f-clr-grey-500)"},".item .toggle":{marginRight:"-.3em"},".item.compact .toggle":{background:"transparent",color:"var(--f-clr-text-100)",pointerEvents:"none",marginRight:0},".item.compact .toggle__content":{padding:0},'.v__default[data-active="true"] .toggle':{color:"var(--f-clr-text-200)"},".content":{paddingRight:"1em",display:"flex",alignItems:"center",gap:"var(--f-spacing-sml)",justifyContent:"space-between",transition:"opacity .3s",flexGrow:1,flexShrink:0},".item.compact .icon":{padding:".6em",lineHeight:1},".item.compact .content":{paddingRight:".6em",paddingBlock:".6em",lineHeight:1},'.content[data-hasicon="false"]':{paddingLeft:"1em"},'.item.compact .content[data-hasicon="false"]':{paddingLeft:".6em"},".children":{paddingLeft:"1.5em",transition:"padding-left .3s",flexShrink:0},".children > *":{flexShrink:0},".item.collapsed .content":{opacity:0},'.children[data-collapsed="true"]':{paddingLeft:"0em"}});function u({children:s,cc:u={},size:v="med",label:b,icon:x,right:k,active:y=!1,round:_,compact:j,variant:S="default",disabled:w=!1,defaultOpen:C=!1,...z}){const R=n(h,u),[N,I]=o(C),L=a.count(s),{collapsed:H}=m(),$=p(),W=f(`(max-width: ${$.breakpoints.mob}px)`);return e(t,{children:[i(r,{color:y?void 0:"var(--f-clr-primary-300)",disabled:w,children:e("div",{...z,tabIndex:0,role:"button",className:c(R.item,R[`s__${v}`],R[`v__${S}`],_&&R.round,j&&R.compact,H&&R.collapsed,z.className),"data-disabled":w,"data-active":y,onClick:()=>I(!N),children:[void 0!==x&&i("div",{className:R.icon,children:x}),e("span",{className:R.content,"data-hasicon":void 0!==x,children:[b,L?i(l,{cc:{...u,toggle:R.toggle,content:R.toggle__content},"aria-label":b,disabled:j,compact:!0,variant:"minimal",size:"med"===v?"sml":"xsm",round:_,checked:N,checkedContent:i(g,{type:"collapseUp"}),children:i(g,{type:"expandDown"})}):k]})]})}),L?i(d,{shown:N&&(W||!H),cc:{...u,content:R.children},"data-collapsed":H,children:s}):null]})}u.displayName="Sidebar.Item";export{u as default};
|
|
3
3
|
//# sourceMappingURL=item.js.map
|