@buoy-gg/bottom-sheet 7.0.39 → 7.0.41

package/lib/web/index.mjs

@@ -0,0 +1,2 @@
+"use client";
+typeof window<"u"&&typeof globalThis.global>"u"&&(globalThis.global=globalThis);import{useState as T,useRef as I,useEffect as X}from"react";import{ToolBackground as de}from"@buoy-gg/shared-ui/web";function j(t){return t*.25}function q(t,e,n,o,r,l,c,d=80){let h=Math.max(0,l.left||0),m=r.width-Math.max(0,l.right||0),u=Math.max(0,l.top||0),x=r.height-Math.max(0,l.bottom||0),a=e.left+e.width,p=e.top+e.height,b=e.left,g=e.top,y=a,v=p;switch(t){case"topLeft":{b=Math.max(h,Math.min(e.left+n,a-c)),g=Math.max(u,Math.min(e.top+o,p-d));break}case"topRight":{y=Math.min(m,Math.max(a+n,e.left+c)),g=Math.max(u,Math.min(e.top+o,p-d));break}case"bottomLeft":{b=Math.max(h,Math.min(e.left+n,a-c)),v=Math.min(x,Math.max(p+o,e.top+d));break}case"bottomRight":{y=Math.min(m,Math.max(a+n,e.left+c)),v=Math.min(x,Math.max(p+o,e.top+d));break}}return{left:b,top:g,width:Math.max(c,y-b),height:Math.max(d,v-g)}}function J(t,e,n,o){return t>.8&&e>50||e>150&&n<=o}import{useEffect as se,useRef as z}from"react";function K(t,e){let n=z(0),o=z(0),r=z(null),l=z({onDouble:t,onTriple:e});return l.current={onDouble:t,onTriple:e},se(()=>()=>{r.current&&clearTimeout(r.current)},[]),z(()=>{let d=Date.now();d-n.current>500&&(o.current=0),o.current++,n.current=d,r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{o.current===2?l.current.onDouble():o.current>=3&&l.current.onTriple(),o.current=0},300)}).current}import{jsx as s,jsxs as B}from"react/jsx-runtime";var ue={background:"rgba(8, 12, 21, 0.98)",panel:"rgba(16, 22, 35, 0.98)",border:"#00B8E666",primary:"#FFFFFF",secondary:"#B8BFC9",muted:"#7A8599",success:"#4AFF9F",error:"#FF5252",info:"#00B8E6"};function pe(t){return window.addEventListener("resize",t),window.visualViewport?.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),window.visualViewport?.removeEventListener("resize",t)}}function ee(){return{width:window.innerWidth,height:window.innerHeight}}function te(){let t=document.createElement("div");t.style.cssText="position:fixed;visibility:hidden;pointer-events:none;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);right:env(safe-area-inset-right)",document.body.appendChild(t);let e=getComputedStyle(t),n={top:parseFloat(e.top)||0,bottom:parseFloat(e.bottom)||0,left:parseFloat(e.left)||0,right:parseFloat(e.right)||0};return document.body.removeChild(t),n}function fe(){let[t,e]=T(()=>({viewport:ee(),insets:te()}));return X(()=>pe(()=>{e({viewport:ee(),insets:te()})}),[]),t}function W(t,e){if(!t.isPrimary)return;let n=t.currentTarget,o=t.clientX,r=t.clientY,l=t.clientY,c=performance.now(),d=0,h=0;e.onStart?.(t),n.setPointerCapture(t.pointerId);let m=a=>{if(a.pointerId!==t.pointerId)return;let p=a.clientX-o,b=a.clientY-r;h=Math.max(h,Math.abs(p)+Math.abs(b));let g=performance.now(),y=g-c;y>0&&(d=(a.clientY-l)/y,l=a.clientY,c=g),e.onMove(a,{dx:p,dy:b})},u=a=>{a.pointerId===t.pointerId&&(x(),e.onEnd(a,{dx:a.clientX-o,dy:a.clientY-r,vy:d,wasTap:h<=5}))},x=()=>{n.removeEventListener("pointermove",m),n.removeEventListener("pointerup",u),n.removeEventListener("pointercancel",u)};n.addEventListener("pointermove",m),n.addEventListener("pointerup",u),n.addEventListener("pointercancel",u)}function oe({isResizing:t,mode:e,hasCustomContent:n=!1,theme:o}){return B("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",padding:n?"6px 0 2px":"8px 0",position:"relative"},children:[s("div",{style:{width:t?40:e==="floating"?50:40,height:e==="floating"?5:3,backgroundColor:t?o.success:e==="floating"?o.muted:o.info+"99",borderRadius:2,boxShadow:`0 0 4px ${o.info}CC`}}),t&&e==="bottomSheet"&&s("div",{style:{position:"absolute",display:"flex",flexDirection:"row",gap:2,marginTop:12},children:[0,1,2].map(r=>s("div",{style:{width:12,height:1,backgroundColor:o.success,opacity:.6}},r))})]})}function re({header:t,isResizing:e,mode:n,theme:o}){return t?.customContent?B("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center"},children:[s(oe,{isResizing:e,mode:n,hasCustomContent:!0,theme:o}),t.customContent]}):B("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",position:"relative"},children:[s(oe,{isResizing:e,mode:n,theme:o}),B("div",{style:{padding:"0 16px",display:"flex",flexDirection:"column",alignItems:"center"},children:[t?.title&&s("span",{style:{fontSize:16,fontWeight:600,color:o.primary},children:t.title}),t?.subtitle&&s("span",{style:{fontSize:12,color:o.secondary,paddingTop:4},children:t.subtitle})]}),s("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"},children:s("span",{style:{fontSize:10,color:o.muted,fontStyle:"italic"},children:"Double tap: Toggle \u2022 Triple tap: Close"})})]})}function ie({children:t,footer:e,footerHeight:n,disableScrollWrapper:o,contentStyle:r,theme:l,background:c}){return B("div",{style:{flex:1,minHeight:0,display:"flex",flexDirection:"column",backgroundColor:l.background,borderBottomLeftRadius:16,borderBottomRightRadius:16,overflow:"hidden",position:"relative",...r},children:[c?s(de,{}):null,o?t:s("div",{style:{flex:1,minHeight:0,overflowY:"auto",WebkitOverflowScrolling:"touch",paddingBottom:n},children:t}),e?s("div",{style:{position:"absolute",left:0,right:0,bottom:0,backgroundColor:l.background,borderBottomLeftRadius:16,borderBottomRightRadius:16},children:e}):null]})}var ne="transform 320ms cubic-bezier(0.16, 1, 0.3, 1)",V="opacity 200ms ease";function he({props:t,theme:e,viewport:n,effectiveMaxHeight:o,panelHeight:r,setPanelHeight:l,onHeaderTap:c}){let{onClose:d,children:h,header:m,styles:u={},minHeight:x=100,footer:a,footerHeight:p=0,disableScrollWrapper:b,zIndex:g=1e3,background:y=!0}=t,v=I(null),L=I(null),[M,C]=T(!1),[F,$]=T(!1),A=I(!1),H=I(r);X(()=>{let w=requestAnimationFrame(()=>$(!0));return()=>cancelAnimationFrame(w)},[]);let P=w=>{if(A.current)return;let G=w.currentTarget.getBoundingClientRect().top,Y=w.clientY-G;W(w,{onStart:()=>C(!0),onMove:E=>{let k=E.clientY-Y,i=Math.max(x,Math.min(n.height-k,o));H.current=i,v.current&&(v.current.style.height=`${i}px`)},onEnd:(E,{dy:k,vy:i,wasTap:f})=>{if(C(!1),f){c();return}if(J(i,k,H.current,x)){A.current=!0;let S=L.current;S&&(S.style.transition=`${ne}, ${V}`,S.style.transform="translateY(100%)",S.style.opacity="0"),setTimeout(d,220);return}l(H.current)}})};return s("div",{style:{position:"fixed",inset:0,zIndex:g,pointerEvents:"none"},children:s("div",{ref:L,style:{position:"absolute",bottom:0,left:0,right:0,pointerEvents:"auto",transform:F?"translateY(0)":"translateY(100%)",opacity:F?1:0,transition:`${ne}, ${V}`},children:B("div",{ref:v,style:{display:"flex",flexDirection:"column",height:r,backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,border:`1px solid ${e.border}`,boxShadow:`0 -4px 12px ${e.info}4D, 0 -2px 24px rgba(0,0,0,0.4)`,...u.container},children:[s("div",{onPointerDown:P,style:{minHeight:56,display:"flex",backgroundColor:e.panel,borderTopLeftRadius:16,borderTopRightRadius:16,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:M?"ns-resize":"grab",touchAction:"none",userSelect:"none"},children:s(re,{header:m,isResizing:M,mode:"bottomSheet",theme:e})}),s(ie,{footer:a,footerHeight:p,disableScrollWrapper:b,contentStyle:u.content,theme:e,background:y,children:h})]})})})}function me({isActive:t,theme:e}){return s("div",{style:{width:20,height:20,borderRadius:10,margin:5,backgroundColor:t?e.success+"1A":"transparent",border:t?`2px solid ${e.success}`:"2px solid transparent",boxShadow:t?`0 0 8px ${e.success}99`:"none"}})}function be({props:t,theme:e,viewport:n,insets:o,rect:r,setRect:l,onHeaderTap:c}){let{onClose:d,children:h,header:m,styles:u={},footer:x,footerHeight:a=0,onBack:p,disableScrollWrapper:b,zIndex:g=1e3,background:y=!0}=t,v=I(null),[L,M]=T(!1),[C,F]=T(!1),[$,A]=T(!1),H=I(r);H.current=r;let P=I(r);X(()=>{let i=requestAnimationFrame(()=>A(!0));return()=>cancelAnimationFrame(i)},[]);let w=i=>{P.current=i;let f=v.current;f&&(f.style.transform=`translate(${i.left}px, ${i.top}px)`,f.style.width=`${i.width}px`,f.style.height=`${i.height}px`)},G=i=>{let f=H.current,S=i.clientX-f.left,N=i.clientY-f.top;W(i,{onMove:(_,{dx:D,dy:R})=>{Math.abs(D)+Math.abs(R)>5&&M(!0),w({...P.current,left:_.clientX-S,top:_.clientY-N})},onEnd:(_,{wasTap:D})=>{if(M(!1),D){c();return}let R=P.current,U={...R,left:Math.max(o.left,Math.min(R.left,n.width-o.right-R.width)),top:Math.max(o.top,Math.min(R.top,n.height-o.bottom-R.height))};w(U),l(U)}})},Y=i=>f=>{f.stopPropagation();let S={...H.current},N=!1;W(f,{onStart:()=>F(!0),onMove:(_,{dx:D,dy:R})=>{Math.abs(D)<.5&&Math.abs(R)<.5||(N=!0,w(q(i,S,D,R,n,o,j(n.width),80)))},onEnd:()=>{if(F(!1),!N){if(i==="topRight"){d();return}if(i==="topLeft"&&p){p();return}}l(P.current)}})},E=L||C,k=[{corner:"topLeft",style:{top:4,left:4}},{corner:"topRight",style:{top:4,right:4}},{corner:"bottomLeft",style:{bottom:4,left:4}},{corner:"bottomRight",style:{bottom:4,right:4}}];return B("div",{ref:v,style:{position:"fixed",top:0,left:0,transform:`translate(${r.left}px, ${r.top}px)`,width:r.width,height:r.height,display:"flex",flexDirection:"column",backgroundColor:e.panel,borderRadius:16,border:E?`2px solid ${e.success}`:`1px solid ${e.border}`,boxShadow:E?`0 0 12px ${e.success}99`:`0 0 20px ${e.info}80, 0 8px 32px rgba(0,0,0,0.5)`,zIndex:g,opacity:$?1:0,transition:V,...u.container},children:[s("div",{onPointerDown:G,style:{minHeight:56,display:"flex",backgroundColor:e.panel,borderTopLeftRadius:14,borderTopRightRadius:14,borderBottom:"1px solid rgba(255, 255, 255, 0.1)",cursor:L?"grabbing":"grab",touchAction:"none",userSelect:"none"},children:s(re,{header:m,isResizing:E,mode:"floating",theme:e})}),s(ie,{footer:x,footerHeight:a,disableScrollWrapper:b,contentStyle:u.content,theme:e,background:y,children:h}),k.map(({corner:i,style:f})=>s("div",{onPointerDown:Y(i),style:{position:"absolute",width:30,height:30,zIndex:10,touchAction:"none",cursor:i==="topLeft"||i==="bottomRight"?"nwse-resize":"nesw-resize",...f},children:s(me,{isActive:E,theme:e})},i))]})}var ge=t=>{let{visible:e,onClose:n,maxHeight:o,initialHeight:r=400,initialMode:l="bottomSheet",onModeChange:c,theme:d}=t,h={...ue,...d},{viewport:m,insets:u}=fe(),[x,a]=T(l),[p,b]=T(r),[g,y]=T(()=>({width:380,height:500,left:(window.innerWidth-380)/2,top:(window.innerHeight-500)/2})),v=o||m.height-u.top,M=K(()=>{let C=x==="bottomSheet"?"floating":"bottomSheet";a(C),c?.(C)},n);return e?x==="floating"?s(be,{props:t,theme:h,viewport:m,insets:u,rect:g,setRect:y,onHeaderTap:M}):s(he,{props:t,theme:h,viewport:m,effectiveMaxHeight:v,panelHeight:Math.min(p,v),setPanelHeight:b,onHeaderTap:M}):null};export{ge as BottomSheet};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/bottom-sheet",
-  "version": "7.0.39",
+  "version": "7.0.41",
   "description": "Bottom sheet and floating window components for React Native, with configurable presentation and native-driver animations.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -10,27 +10,37 @@
   "exports": {
     ".": {
       "react-native": "./lib/module/index.js",
+      "browser": {
+        "types": "./lib/typescript/index.web.d.ts",
+        "default": "./lib/web/index.mjs"
+      },
       "import": {
-        "default": "./lib/module/index.js",
-        "types": "./lib/typescript/index.d.ts"
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/module/index.js"
       },
       "require": {
-        "default": "./lib/commonjs/index.js",
-        "types": "./lib/typescript/index.d.ts"
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/commonjs/index.js"
       }
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./web": {
+      "types": "./lib/typescript/index.web.d.ts",
+      "default": "./lib/web/index.mjs"
+    }
   },
   "files": [
     "lib"
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.39"
+    "@buoy-gg/shared-ui": "^7.0.41"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-web": "^0.21.0",
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
@@ -85,11 +95,23 @@
     "modal",
     "ui-components"
   ],
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-native-web": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "scripts": {
-    "build": "bob build",
+    "build": "bob build && pnpm run build:web",
     "typecheck": "tsc --noEmit",
     "clean": "rimraf lib",
     "test": "pnpm run typecheck",
-    "postinstall": "echo \"Run pnpm build to compile this package\""
+    "postinstall": "echo \"Run pnpm build to compile this package\"",
+    "build:web": "node ../../scripts/build-web.mjs bottom-sheet"
   }
 }