@fewings/react/dist/components/index.mjs

Useful react components and hooks

import ne,{useContext as L,cloneElement as re,Children as ie}from"react";import{useControlledState as ae}from"@fewings/react/hooks";import{createContext as oe}from"react";var y=oe({open:!1,setOpen:()=>{}});import{jsx as A}from"react/jsx-runtime";var I=({children:t,initialOpen:n=!1,open:e,onChangeOpen:r,disabled:p})=>{let[l=!1,o]=ae({value:e,defaultValue:n,onChange:r});return A(y.Provider,{value:{open:l,setOpen:p?()=>{}:o},children:t})};I.displayName="AccordionRoot";var N=({children:t})=>{let{open:n,setOpen:e}=L(y);return ie.map(t,r=>re(r,{onClick:p=>{t.props.onClick&&t.props.onClick(p),e(!n)}}))};N.displayName="AccordionTrigger";var M=({children:t,wrapper:n})=>{let e=n||ne.Fragment,{open:r}=L(y);return A(e,{children:r&&t})};M.displayName="AccordionPanel";var se={Root:I,Trigger:N,Panel:M,Consumer:y.Consumer};import{jsx as le}from"react/jsx-runtime";var pe={light:{background:"rgba(0, 0, 0, 0.2)",color:"rgba(0, 0, 0, 0.8)"},dark:{background:"rgba(255, 255, 255, 0.2)",color:"rgba(255, 255, 255, 0.8)"}};function Je({width:t="100%",height:n="100%",theme:e="light",children:r,style:p,...l}){let{background:o,color:c}=pe[e];return le("div",{...l,style:{width:t,height:n,borderRadius:"2px",border:"1px solid #ccc",backgroundImage:`repeating-linear-gradient(
          135deg,
          ${o} 0px,
          ${o} 1px,
          transparent 1px,
          transparent 6px
        )`,backgroundSize:"8px 8px",backgroundPosition:"top left",color:c,fontWeight:"bold",display:"flex",justifyContent:"center",alignItems:"center",...p},children:r})}import{useClickOutside as me,useControlledState as fe,useElementPositionObserver as H}from"@fewings/react/hooks";import de,{useContext as _,useRef as W,cloneElement as ue,Children as ge,useCallback as G,useMemo as be,useLayoutEffect as xe}from"react";import{createPortal as he}from"react-dom";import{createContext as ce}from"react";var T=ce({open:!1,setOpen:()=>{},triggerRef:{current:null},panelRef:{current:null},closeOnClickOutSide:!0,type:"click",controlled:!1});import{jsx as v}from"react/jsx-runtime";var X=({children:t,closeOnClickOutSide:n=!0,type:e="click",initialOpen:r,open:p,onChangeOpen:l,disabled:o})=>{let c=W(null),m=W(null),[a=!1,g]=fe({value:p,defaultValue:r,onChange:l}),b=p!==void 0;return v(T.Provider,{value:{open:a,setOpen:o?()=>{}:g,triggerRef:c,panelRef:m,closeOnClickOutSide:n,type:e,controlled:b},children:t})};X.displayName="PopoverRoot";var z=({children:t})=>{let{open:n,setOpen:e,triggerRef:r,panelRef:p,closeOnClickOutSide:l,type:o}=_(T),c=me(()=>{l&&e(!1)},p);return ge.map(t,m=>ue(m,{onClick:a=>{m.props.onClick?.(a),o==="click"&&e(!n)},onPointerEnter:a=>{m.props.onPointerEnter?.(a),o==="hover"&&e(!0)},onPointerLeave:a=>{m.props.onPointerLeave?.(a);let g=document.elementFromPoint(a.clientX,a.clientY),b=p.current?.contains(g);o==="hover"&&!b&&e(!1)},ref:a=>{typeof m.props.ref=="function"?m.props.ref(a):m.props.ref&&(m.props.ref.current=a),r.current=a,c.current=a}}))};z.displayName="PopoverTrigger";var F=({children:t,anchor:n="bottom-left",wrapper:e,zIndex:r=99,portal:p=!0,fitOnTriggerWidth:l=!1})=>{let o=be(()=>e||de.Fragment,[e]),{open:c,triggerRef:m,panelRef:a,type:g,setOpen:b}=_(T),h=G(i=>{a.current&&l&&(a.current.style.width=`${i.width}px`);let x=a.current?.getBoundingClientRect();if(!i||!a.current)return;let f=a.current.style;switch(n){case"bottom-right":f.top=`${i.bottom}px`,f.right=`${window.innerWidth-i.right}px`;break;case"bottom-left":f.top=`${i.bottom}px`,f.left=`${i.left}px`;break;case"bottom-center":f.top=`${i.bottom}px`,f.left=`${i.left+i.width/2-(x?.width||0)/2}px`;break;case"top-right":f.bottom=`${window.innerHeight-i.top}px`,f.right=`${window.innerWidth-i.right}px`;break;case"top-left":f.bottom=`${window.innerHeight-i.top}px`,f.left=`${i.left}px`;break;case"top-center":f.bottom=`${window.innerHeight-i.top}px`,f.left=`${i.left+i.width/2-(x?.width||0)/2}px`;break;case"left-top":f.top=`${i.top}px`,f.right=`${window.innerWidth-i.left}px`;break;case"left-center":f.top=`${i.top+i.height/2-(x?.height||0)/2}px`,f.right=`${window.innerWidth-i.left}px`;break;case"left-bottom":f.bottom=`${window.innerHeight-i.bottom}px`,f.right=`${window.innerWidth-i.left}px`;break;case"right-top":f.top=`${i.top}px`,f.left=`${i.right}px`;break;case"right-center":f.top=`${i.top+i.height/2-(x?.height||0)/2}px`,f.left=`${i.right}px`;break;case"right-bottom":f.bottom=`${window.innerHeight-i.bottom}px`,f.left=`${i.right}px`;break;default:throw new Error("Invalid anchor")}},[n,l]);H(m,h,c),H(a,()=>{let i=m.current?.getBoundingClientRect();i&&h(i)},c),xe(()=>{if(c){let i=m.current?.getBoundingClientRect();i&&h(i)}},[c,h]);let S=G(({children:i})=>v("div",{ref:x=>{a.current=x},style:{position:"fixed",zIndex:r,width:"fit-content",height:"fit-content"},onPointerLeave:()=>{g==="hover"&&b(!1)},children:i}),[c,r,g]);return p?he(v(o,{children:c&&v(S,{children:t})}),document.body):v(o,{children:c&&v(S,{children:t})})};F.displayName="PopoverPanel";var P={Root:X,Trigger:z,Panel:F,Consumer:T.Consumer};import{cloneElement as q,useEffect as ve,useMemo as Z,useRef as J,useState as ye}from"react";import{useContextSelector as u}from"@fewings/react/contextSelector";import{map as C,snap as V}from"@fewings/core/math";import{useDragPosition as Pe}from"@fewings/react/hooks";import{percentToRatio as B,ratioToPercent as Y}from"@fewings/core/converter";import{createContext as Te}from"@fewings/react/contextSelector";var d=Te(null);import{jsx as U}from"react/jsx-runtime";var Ce=({children:t,dir:n,...e})=>{let r=Z(()=>C(e.value,e.min,e.max,0,1),[e.value,e.min,e.max]),p=J(null),l=J(null),[o,c]=ye(!1);return U(d.Provider,{value:{...e,ratio:r,dir:n,thumbRef:l,trackRef:p,isDragging:o,setIsDragging:c},children:U("div",{style:{position:"relative",width:"fit-content",height:"fit-content"},children:t})})},Re=({children:t})=>{let n=u(d,s=>s.value),e=u(d,s=>s.setValue),r=u(d,s=>s.min),p=u(d,s=>s.max),l=u(d,s=>s.step),o=u(d,s=>s.ratio),c=u(d,s=>s.trackRef),m=u(d,s=>s.thumbRef),a=u(d,s=>s.dir),g=u(d,s=>s.isDragging),b=u(d,s=>s.setIsDragging),h=Z(()=>({position:"absolute",top:a==="horizontal"?0:Y(o),left:a==="horizontal"?Y(o):0}),[a,o]),S=s=>{let $=typeof s=="string"?B(s):C(s,k.minLeft,k.maxLeft,0,1);e(V(C($,0,1,r,p),l))},i=s=>{let $=typeof s=="string"?B(s):C(s,k.minTop,k.maxTop,0,1);e(V(C($,0,1,r,p),l))},{handleRef:x,boundRef:f,bounds:k}=Pe({dir:a==="horizontal"?"x":"y",isDragging:g,onChangeDragging:b,style:h,onChangeStyle:s=>{a==="horizontal"?S(s.left):i(s.top)}});ve(()=>{f.current=c.current,m.current=x.current});let E=t({value:n,ratio:o,isDragging:g});return q(E,{ref:s=>{s&&(x.current=s),E.props.ref?.(s)},style:{...E.props.style,...h}})},Se=({children:t})=>{let n=u(d,o=>o.value),e=u(d,o=>o.ratio),r=u(d,o=>o.trackRef),p=u(d,o=>o.isDragging),l=t({value:n,ratio:e,isDragging:p});return q(l,{ref:o=>{o&&(r.current=o),l.props.ref?.(o)}})},ke={Root:Ce,Thumb:Re,Track:Se};import{useMemo as R}from"react";var j={dir:"bottom",gap:8,arrowColor:"#262626"};var K={top:180,bottom:0,left:90,right:270};function Q(t={}){let n=R(()=>{let a=Object.fromEntries(Object.entries(t).filter(([g,b])=>b!=null));return{...j,...a}},[t]),{dir:e,gap:r,arrowColor:p}=n,l=R(()=>({top:{marginBottom:`${r}px`},bottom:{marginTop:`${r}px`},left:{marginRight:`${r}px`},right:{marginLeft:`${r}px`}}),[r]),o=R(()=>({top:{position:"absolute",top:"100%",left:"50%",transform:"translateX(-50%)"},bottom:{position:"absolute",bottom:"100%",left:"50%",transform:"translateX(-50%)"},left:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)"},right:{position:"absolute",right:"100%",top:"50%",transform:"translateY(-50%)"}}),[]),c=R(()=>l[e],[l,e]),m=R(()=>{let a=o[e],g={transform:`${a.transform} rotate(${K[e]}deg)`};return{style:{...a,...g},fill:p}},[o,K,e,p]);return{marginStyle:c,arrowProps:m,options:n,dir:e}}import{jsx as O,jsxs as ee}from"react/jsx-runtime";function Et({children:t,content:n,open:e,dir:r,gap:p,arrowColor:l}){let{marginStyle:o,arrowProps:c,dir:m}=Q({dir:r,gap:p,arrowColor:l});return ee(P.Root,{type:"hover",open:e,children:[O(P.Trigger,{children:t}),O(P.Panel,{anchor:`${m}-center`,portal:!0,children:ee("div",{style:{position:"relative",...o},children:[O("svg",{width:"8",height:"8",fill:"none",style:c.style,children:O("path",{d:"M3.99996 0L8 8H4H0L3.99996 0Z",fill:c.fill})}),n]})})]},m)}import{jsx as Oe}from"react/jsx-runtime";function Nt({x:t,y:n}){return Oe("div",{style:{width:t,height:n,minWidth:t,minHeight:n,maxWidth:t,maxHeight:n}})}import{jsx as we}from"react/jsx-runtime";function Ht({children:t,position:n="absolute",top:e,right:r,bottom:p,left:l,zIndex:o,style:c={},as:m="div",...a}){return we(m,{style:{position:n,top:e,right:r,bottom:p,left:l,zIndex:o,...c},...a,children:t})}import{jsx as Ee}from"react/jsx-runtime";function _t({inline:t,children:n,gap:e=0,align:r="stretch",justify:p="start",padding:l,style:o={},as:c="div",...m}){return Ee(c,{style:{display:t?"inline-flex":"flex",flexDirection:"column",gap:e,alignItems:r,justifyContent:p,padding:l,...o},...m,children:n})}import{jsx as $e}from"react/jsx-runtime";function Ft({inline:t,children:n,gap:e=0,align:r="stretch",justify:p="start",padding:l,style:o={},as:c="div",...m}){return $e(c,{style:{display:t?"inline-flex":"flex",flexDirection:"row",gap:e,alignItems:r,justifyContent:p,padding:l,...o},...m,children:n})}import{createContext as De,useContext as Le}from"react";import{jsx as w}from"react/jsx-runtime";var te=De({rowGap:0,colGap:0});function D({children:t,className:n,style:e,rowGap:r,colGap:p,gap:l}){return w(te.Provider,{value:{rowGap:r??l,colGap:p??l},children:w("div",{className:n,style:{display:"flex",flexDirection:"column",rowGap:r??l,...e},children:t})})}function Ie({children:t,className:n,style:e,gap:r}){let{colGap:p}=Le(te);return w("div",{className:n,style:{display:"flex",flex:1,...e,columnGap:r??p},children:t})}function Ne({children:t,className:n,style:e}){return w("div",{className:n,style:{flex:1,...e},children:t})}D.Row=Ie;D.Col=Ne;D.displayName="Grid";export{se as Accordion,Je as DummyArea,Ht as Float,D as Grid,Ft as HStack,P as Popover,T as PopoverContext,ke as Slider,Nt as Space,Et as ToolTip,_t as VStack};