@womp/kookie-ui 0.15.0 → 0.16.0

package/dist/cjs/hooks/use-thumb-sync.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+/**
+ * Keeps a Radix ScrollArea's thumbs on the scroll position on every scroll.
+ *
+ * Radix moves a thumb from a requestAnimationFrame loop it starts on the first scroll event of a
+ * burst. Next's production minifier compiles that self-calling loop away, so in a production
+ * build the thumb moves once, sits while the content scrolls, and jumps when the next burst
+ * starts. This writes the transform Radix would, at most once per frame. Nothing re-renders.
+ *
+ * Pass the hook's setter as a ref on `ScrollArea.Viewport`; the scrollbars are its siblings.
+ */
+export declare function useThumbSync<T extends HTMLElement>(): React.Dispatch<React.SetStateAction<T | null>>;
+//# sourceMappingURL=use-thumb-sync.d.ts.map

package/dist/cjs/hooks/use-thumb-sync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-thumb-sync.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-thumb-sync.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,oDAkCjD"}

package/dist/cjs/hooks/use-thumb-sync.js

@@ -0,0 +1,2 @@
+"use strict";var h=Object.create;var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var H=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},p=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of T(e))!g.call(t,n)&&n!==o&&c(t,n,{get:()=>e[n],enumerable:!(r=b(e,n))||r.enumerable});return t};var L=(t,e,o)=>(o=t!=null?h(E(t)):{},p(e||!t||!t.__esModule?c(o,"default",{value:t,enumerable:!0}):o,t)),S=t=>p(c({},"__esModule",{value:!0}),t);var F={};H(F,{useThumbSync:()=>y});module.exports=S(F);var i=L(require("react"));function y(){let[t,e]=i.useState(null);return i.useEffect(()=>{let o=t?.parentElement;if(!t||!o)return;let r=0,n=()=>{r=0;for(let s of o.querySelectorAll(":scope > .rt-ScrollAreaScrollbar > .rt-ScrollAreaThumb")){let l=s.parentElement,a=getComputedStyle(l);if(l.dataset.orientation==="horizontal"){let f=l.clientWidth-parseFloat(a.paddingLeft)-parseFloat(a.paddingRight),m=d(t.scrollLeft,t.scrollWidth-t.offsetWidth,f-s.offsetWidth);s.style.transform=`translate3d(${m}px, 0, 0)`}else{let f=l.clientHeight-parseFloat(a.paddingTop)-parseFloat(a.paddingBottom),m=d(t.scrollTop,t.scrollHeight-t.offsetHeight,f-s.offsetHeight);s.style.transform=`translate3d(0, ${m}px, 0)`}}},u=()=>{r||(r=requestAnimationFrame(n))};return t.addEventListener("scroll",u,{passive:!0}),()=>{r&&cancelAnimationFrame(r),t.removeEventListener("scroll",u)}},[t]),e}function d(t,e,o){return e<=0||o<=0?0:Math.min(Math.max(t,-e),e)/e*o}
+//# sourceMappingURL=use-thumb-sync.js.map

package/dist/cjs/hooks/use-thumb-sync.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-thumb-sync.ts"],
+  "sourcesContent": ["import * as React from 'react';\n\n/**\n * Keeps a Radix ScrollArea's thumbs on the scroll position on every scroll.\n *\n * Radix moves a thumb from a requestAnimationFrame loop it starts on the first scroll event of a\n * burst. Next's production minifier compiles that self-calling loop away, so in a production\n * build the thumb moves once, sits while the content scrolls, and jumps when the next burst\n * starts. This writes the transform Radix would, at most once per frame. Nothing re-renders.\n *\n * Pass the hook's setter as a ref on `ScrollArea.Viewport`; the scrollbars are its siblings.\n */\nexport function useThumbSync<T extends HTMLElement>() {\n  const [viewport, setViewport] = React.useState<T | null>(null);\n\n  React.useEffect(() => {\n    const root = viewport?.parentElement;\n    if (!viewport || !root) return;\n    let frame = 0;\n    const write = () => {\n      frame = 0;\n      for (const thumb of root.querySelectorAll<HTMLElement>(':scope > .rt-ScrollAreaScrollbar > .rt-ScrollAreaThumb')) {\n        const scrollbar = thumb.parentElement as HTMLElement;\n        const style = getComputedStyle(scrollbar);\n        if (scrollbar.dataset.orientation === 'horizontal') {\n          const track = scrollbar.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);\n          const offset = thumbOffset(viewport.scrollLeft, viewport.scrollWidth - viewport.offsetWidth, track - thumb.offsetWidth);\n          thumb.style.transform = `translate3d(${offset}px, 0, 0)`;\n        } else {\n          const track = scrollbar.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);\n          const offset = thumbOffset(viewport.scrollTop, viewport.scrollHeight - viewport.offsetHeight, track - thumb.offsetHeight);\n          thumb.style.transform = `translate3d(0, ${offset}px, 0)`;\n        }\n      }\n    };\n    const schedule = () => {\n      if (!frame) frame = requestAnimationFrame(write);\n    };\n    viewport.addEventListener('scroll', schedule, { passive: true });\n    return () => {\n      if (frame) cancelAnimationFrame(frame);\n      viewport.removeEventListener('scroll', schedule);\n    };\n  }, [viewport]);\n\n  return setViewport;\n}\n\n/** Radix's mapping: scroll position over its range, onto the room the thumb has to travel. */\nfunction thumbOffset(position: number, range: number, travel: number) {\n  if (range <= 0 || travel <= 0) return 0;\n  // Right-to-left scrolls run from -range to 0; the thumb then travels from -travel to 0.\n  const clamped = Math.min(Math.max(position, -range), range);\n  return (clamped / range) * travel;\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBAYhB,SAASF,GAAsC,CACpD,GAAM,CAACG,EAAUC,CAAW,EAAU,WAAmB,IAAI,EAE7D,OAAM,YAAU,IAAM,CACpB,IAAMC,EAAOF,GAAU,cACvB,GAAI,CAACA,GAAY,CAACE,EAAM,OACxB,IAAIC,EAAQ,EACNC,EAAQ,IAAM,CAClBD,EAAQ,EACR,QAAWE,KAASH,EAAK,iBAA8B,wDAAwD,EAAG,CAChH,IAAMI,EAAYD,EAAM,cAClBE,EAAQ,iBAAiBD,CAAS,EACxC,GAAIA,EAAU,QAAQ,cAAgB,aAAc,CAClD,IAAME,EAAQF,EAAU,YAAc,WAAWC,EAAM,WAAW,EAAI,WAAWA,EAAM,YAAY,EAC7FE,EAASC,EAAYV,EAAS,WAAYA,EAAS,YAAcA,EAAS,YAAaQ,EAAQH,EAAM,WAAW,EACtHA,EAAM,MAAM,UAAY,eAAeI,CAAM,WAC/C,KAAO,CACL,IAAMD,EAAQF,EAAU,aAAe,WAAWC,EAAM,UAAU,EAAI,WAAWA,EAAM,aAAa,EAC9FE,EAASC,EAAYV,EAAS,UAAWA,EAAS,aAAeA,EAAS,aAAcQ,EAAQH,EAAM,YAAY,EACxHA,EAAM,MAAM,UAAY,kBAAkBI,CAAM,QAClD,CACF,CACF,EACME,EAAW,IAAM,CAChBR,IAAOA,EAAQ,sBAAsBC,CAAK,EACjD,EACA,OAAAJ,EAAS,iBAAiB,SAAUW,EAAU,CAAE,QAAS,EAAK,CAAC,EACxD,IAAM,CACPR,GAAO,qBAAqBA,CAAK,EACrCH,EAAS,oBAAoB,SAAUW,CAAQ,CACjD,CACF,EAAG,CAACX,CAAQ,CAAC,EAENC,CACT,CAGA,SAASS,EAAYE,EAAkBC,EAAeC,EAAgB,CACpE,OAAID,GAAS,GAAKC,GAAU,EAAU,EAEtB,KAAK,IAAI,KAAK,IAAIF,EAAU,CAACC,CAAK,EAAGA,CAAK,EACxCA,EAASC,CAC7B",
+  "names": ["use_thumb_sync_exports", "__export", "useThumbSync", "__toCommonJS", "React", "viewport", "setViewport", "root", "frame", "write", "thumb", "scrollbar", "style", "track", "offset", "thumbOffset", "schedule", "position", "range", "travel"]
+}