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

Useful react components and hooks

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