@newthink/ui 0.3.0 → 0.4.1

package/dist/headless/dragScroll.d.ts

@@ -0,0 +1,3 @@
+import { AlpinePlugin } from '../types';
+export declare const dragScroll: AlpinePlugin;
+//# sourceMappingURL=dragScroll.d.ts.map

package/dist/headless/dragScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragScroll.d.ts","sourceRoot":"","sources":["../../src/headless/dragScroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAkBxC,eAAO,MAAM,UAAU,EAAE,YAUrB,CAAC"}

package/dist/headless/dragScroll.js

@@ -0,0 +1,66 @@
+const resizeCenterer = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+        const el = entry.target;
+        if (!(el instanceof HTMLElement))
+            continue;
+        center(el);
+    }
+});
+const center = async (el) => {
+    await nextTick();
+    el.scrollLeft = (el.scrollWidth - el.clientWidth) / 2;
+    el.scrollTop = (el.scrollHeight - el.clientHeight) / 2;
+};
+const forEach = Array.prototype.forEach;
+export const dragScroll = (Alpine) => Alpine.directive('dragscroll', (el, { modifiers }, { cleanup }) => {
+    const autoCenter = modifiers.includes('center');
+    cleanup(registerDragScroll(el));
+    el.classList.add('overscroll-contain', 'cursor-grab');
+    if (!autoCenter)
+        return;
+    forEach.call(el.children, (el) => resizeCenterer.observe(el));
+    cleanup(() => forEach.call(el.children, (el) => resizeCenterer.unobserve(el)));
+});
+const preventStop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+};
+const cancelEvents = ['pointerup', 'mouseup', 'touchend'];
+const registerDragScroll = (el) => {
+    const moveHandler = (e) => {
+        preventStop(e);
+        el.scrollLeft -= e.movementX;
+        el.scrollTop -= e.movementY;
+    };
+    const upHandler = async (e) => {
+        preventStop(e);
+        document.removeEventListener('pointermove', moveHandler, true);
+        document.body.classList.remove('!cursor-grabbing', '[&>*]:pointer-events-none');
+        el.classList.add('cursor-grab');
+        await nextTick();
+        document.removeEventListener('click', preventStop, true);
+        cancelEvents.forEach((event) => document.removeEventListener(event, upHandler, {
+            capture: true,
+        }));
+    };
+    const downHandler = (e) => {
+        if (isTouch(e))
+            return; // skip touch inputs (allow native scrolling)
+        if (e.button === 2)
+            return; // skip right-click
+        preventStop(e);
+        el.classList.remove('cursor-grab');
+        document.body.classList.add('!cursor-grabbing', '[&>*]:pointer-events-none');
+        document.addEventListener('pointermove', moveHandler, { capture: true });
+        cancelEvents.forEach((event) => document.addEventListener(event, upHandler, {
+            capture: true,
+        }));
+        document.addEventListener('click', preventStop, { capture: true });
+    };
+    el.addEventListener('pointerdown', downHandler);
+    return () => el.removeEventListener('pointerdown', downHandler);
+};
+const nextTick = () => new Promise((res) => queueMicrotask(() => setTimeout(res, 0)));
+const isTouch = (e) => e instanceof TouchEvent ||
+    (e instanceof PointerEvent && e.pointerType === 'touch');
+//# sourceMappingURL=dragScroll.js.map

package/dist/headless/dragScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragScroll.js","sourceRoot":"","sources":["../../src/headless/dragScroll.ts"],"names":[],"mappings":"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"}

package/dist/headless/index.d.ts

@@ -1,6 +1,8 @@
 export { accordionGroup, accordion, accordions } from './accordion';
+export { dragScroll } from './dragScroll';
 export { headless } from './headless';
 export { panel } from './panel';
 export { tabs } from './tabs';
 export type { RootHandler, HeadlessHandler } from './headless';
+export { swipeDetect } from './swipeDetect';
 //# sourceMappingURL=index.d.ts.map

package/dist/headless/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/headless/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/headless/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/headless/index.js

@@ -1,5 +1,7 @@
 export { accordionGroup, accordion, accordions } from './accordion';
+export { dragScroll } from './dragScroll';
 export { headless } from './headless';
 export { panel } from './panel';
 export { tabs } from './tabs';
+export { swipeDetect } from './swipeDetect';
 //# sourceMappingURL=index.js.map

package/dist/headless/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/headless/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/headless/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/headless/swipeDetect.d.ts

@@ -0,0 +1,3 @@
+import type { AlpinePlugin } from '../types';
+export declare const swipeDetect: AlpinePlugin;
+//# sourceMappingURL=swipeDetect.d.ts.map

package/dist/headless/swipeDetect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipeDetect.d.ts","sourceRoot":"","sources":["../../src/headless/swipeDetect.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAsB7C,eAAO,MAAM,WAAW,EAAE,YAsBtB,CAAC"}

package/dist/headless/swipeDetect.js

@@ -0,0 +1,77 @@
+var SwipeDirection;
+(function (SwipeDirection) {
+    SwipeDirection[SwipeDirection["None"] = 0] = "None";
+    SwipeDirection[SwipeDirection["Left"] = 1] = "Left";
+    SwipeDirection[SwipeDirection["Right"] = 2] = "Right";
+    SwipeDirection[SwipeDirection["Up"] = 4] = "Up";
+    SwipeDirection[SwipeDirection["Down"] = 8] = "Down";
+})(SwipeDirection || (SwipeDirection = {}));
+const swipableMap = new WeakMap();
+const hasSwipe = swipableMap.has.bind(swipableMap);
+export const swipeDetect = (Alpine) => Alpine.directive('swipe', (el, _, { cleanup }) => {
+    const swipeData = {
+        dispatch: (dir) => {
+            const direction = Object.entries(SwipeDirection)
+                .filter(([, v]) => typeof v === 'number' && v && (dir & v) === v)
+                .map(([k]) => k.toLowerCase());
+            el.dispatchEvent(new CustomEvent('swipe', {
+                detail: direction.join('-'),
+            }));
+            el.dispatchEvent(new CustomEvent(`swipe${direction.join('')}`, {
+                detail: direction.join('-'),
+            }));
+        },
+    };
+    swipableMap.set(el, swipeData);
+    el.addEventListener('touchstart', touchDown);
+    cleanup(() => el.removeEventListener('touchstart', touchDown));
+});
+const touchDown = (ev) => {
+    const swipeData = swipableMap.get(ev.currentTarget);
+    if (!swipeData)
+        return;
+    const touch = ev.touches[0];
+    const { clientX, clientY } = touch;
+    swipeData.start ??= { x: clientX, y: clientY };
+    document.addEventListener('touchend', touchUp, { once: true });
+};
+const touchUp = (ev) => {
+    const target = ev.target;
+    if (!target)
+        return;
+    const swipeData = swipableMap.get(findNearest(target, hasSwipe));
+    if (!swipeData?.start)
+        return;
+    const touch = ev.changedTouches[0];
+    const { clientX, clientY } = touch;
+    const direction = getDirection(swipeData.start, { x: clientX, y: clientY });
+    if (direction === SwipeDirection.None)
+        return;
+    swipeData.dispatch(direction);
+    delete swipeData.start;
+};
+const findNearest = (el, predicate) => {
+    if (predicate(el))
+        return el;
+    if (!el.parentElement)
+        return null;
+    return findNearest(el.parentElement, predicate);
+};
+const getDirection = (start, end) => {
+    const vector = [end.x - start.x, end.y - start.y];
+    if (vector.every((v) => Math.abs(v) < 50))
+        return SwipeDirection.None;
+    // normalize vector
+    const magnitude = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
+    const [x, y] = vector.map((v) => v / magnitude);
+    const direction = getDirectionSign(x) | (getDirectionSign(y) << 2);
+    return direction;
+};
+const getDirectionSign = (offset) => {
+    if (offset > 0.5)
+        return 2;
+    if (offset < -0.5)
+        return 1;
+    return 0;
+};
+//# sourceMappingURL=swipeDetect.js.map

package/dist/headless/swipeDetect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipeDetect.js","sourceRoot":"","sources":["../../src/headless/swipeDetect.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import { accordion, accordionGroup, accordions, panel, tabs } from './headless';
+import { accordion, accordionGroup, accordions, dragScroll, panel, tabs } from './headless';
 import { screen } from './magics';
 import type { AlpinePlugin } from './types';
 export declare const NTMagics: AlpinePlugin;
 export declare const UI: AlpinePlugin;
 export default UI;
-export { accordion, accordionGroup, accordions, panel, tabs, screen, AlpinePlugin, };
+export { accordion, accordionGroup, accordions, dragScroll, panel, tabs, screen, AlpinePlugin, };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,QAAQ,EAAE,YAAkD,CAAC;AAE1E,eAAO,MAAM,EAAE,EAAE,YACmC,CAAC;AAErD,eAAe,EAAE,CAAC;AAElB,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,KAAK,EACL,IAAI,EACJ,MAAM,EACN,YAAY,GACb,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,UAAU,EACV,KAAK,EAEL,IAAI,EACL,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,QAAQ,EAAE,YAAkD,CAAC;AAE1E,eAAO,MAAM,EAAE,EAAE,YAC4D,CAAC;AAE9E,eAAe,EAAE,CAAC;AAElB,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,UAAU,EACV,KAAK,EACL,IAAI,EACJ,MAAM,EACN,YAAY,GACb,CAAC"}

package/dist/index.js

@@ -1,7 +1,7 @@
-import { accordion, accordionGroup, accordions, panel, tabs } from './headless';
+import { accordion, accordionGroup, accordions, dragScroll, panel, swipeDetect, tabs, } from './headless';
 import { screen } from './magics';
 export const NTMagics = (Alpine) => Alpine.plugin([screen]);
-export const UI = (Alpine) => Alpine.plugin([accordions, panel, tabs, NTMagics]);
+export const UI = (Alpine) => Alpine.plugin([accordions, dragScroll, panel, swipeDetect, tabs, NTMagics]);
 export default UI;
-export { accordion, accordionGroup, accordions, panel, tabs, screen, };
+export { accordion, accordionGroup, accordions, dragScroll, panel, tabs, screen, };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,MAAM,CAAC,MAAM,QAAQ,GAAiB,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAE1E,MAAM,CAAC,MAAM,EAAE,GAAiB,CAAC,MAAM,EAAE,EAAE,CACzC,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;AAErD,eAAe,EAAE,CAAC;AAElB,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,KAAK,EACL,IAAI,EACJ,MAAM,GAEP,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,UAAU,EACV,KAAK,EACL,WAAW,EACX,IAAI,GACL,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,MAAM,CAAC,MAAM,QAAQ,GAAiB,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAE1E,MAAM,CAAC,MAAM,EAAE,GAAiB,CAAC,MAAM,EAAE,EAAE,CACzC,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;AAE9E,eAAe,EAAE,CAAC;AAElB,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,UAAU,EACV,KAAK,EACL,IAAI,EACJ,MAAM,GAEP,CAAC"}

package/dist/magics/screen.js

@@ -1,4 +1,3 @@
-import Alpine from 'alpinejs';
 export const screen = (Alpine) => {
     Alpine.magic('screen', () => (breakpoint) => {
         const breakSize = typeof breakpoint === 'number'
@@ -8,7 +7,7 @@ export const screen = (Alpine) => {
             console.error(`Invalid breakpoint: $screen(${JSON.stringify(breakpoint)})`);
             return false;
         }
-        const signal = getMediaSignal(breakSize);
+        const signal = getMediaSignal(breakSize, Alpine);
         return signal.value;
     });
 };
@@ -23,10 +22,10 @@ const defaultBreakpoints = {
 };
 const breakpoints = defaultBreakpoints;
 const mediaSignals = {};
-const getMediaSignal = (breakpoint) => {
-    return mediaSignals[breakpoint] ?? createMediaSignal(breakpoint);
+const getMediaSignal = (breakpoint, Alpine) => {
+    return mediaSignals[breakpoint] ?? createMediaSignal(breakpoint, Alpine);
 };
-const createMediaSignal = (breakpoint) => {
+const createMediaSignal = (breakpoint, Alpine) => {
     const mediaMatch = window.matchMedia(`(min-width: ${breakpoint}px)`);
     const signal = Alpine.reactive({
         value: mediaMatch.matches,

package/dist/magics/screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"screen.js","sourceRoot":"","sources":["../../src/magics/screen.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAI9B,MAAM,CAAC,MAAM,MAAM,GAAiB,CAAC,MAAM,EAAE,EAAE;IAC7C,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,UAA2B,EAAE,EAAE;QAC3D,MAAM,SAAS,GACb,OAAO,UAAU,KAAK,QAAQ;YAC5B,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,CAAC,SAAS,EAAE;YACd,OAAO,CAAC,KAAK,CACX,+BAA+B,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,CAC7D,CAAC;YACF,OAAO,KAAK,CAAC;SACd;QACD,MAAM,MAAM,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,MAAM,CAAC,KAAK,CAAC;IACtB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,gBAAgB;AAChB,MAAM,kBAAkB,GAA2B;IACjD,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,MAAM,WAAW,GAAG,kBAAkB,CAAC;AACvC,MAAM,YAAY,GAAuC,EAAE,CAAC;AAE5D,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,EAAE;IAC5C,OAAO,YAAY,CAAC,UAAU,CAAC,IAAI,iBAAiB,CAAC,UAAU,CAAC,CAAC;AACnE,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,UAAkB,EAAE,EAAE;IAC/C,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,UAAU,KAAK,CAAC,CAAC;IACrE,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;QAC7B,KAAK,EAAE,UAAU,CAAC,OAAO;KAC1B,CAAC,CAAC;IACH,YAAY,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QAC1C,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,OAAO,CAAC;IAC3B,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
+{"version":3,"file":"screen.js","sourceRoot":"","sources":["../../src/magics/screen.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,MAAM,GAAiB,CAAC,MAAM,EAAE,EAAE;IAC7C,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,UAA2B,EAAE,EAAE;QAC3D,MAAM,SAAS,GACb,OAAO,UAAU,KAAK,QAAQ;YAC5B,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,CAAC,SAAS,EAAE;YACd,OAAO,CAAC,KAAK,CACX,+BAA+B,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,CAC7D,CAAC;YACF,OAAO,KAAK,CAAC;SACd;QACD,MAAM,MAAM,GAAG,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QACjD,OAAO,MAAM,CAAC,KAAK,CAAC;IACtB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,gBAAgB;AAChB,MAAM,kBAAkB,GAA2B;IACjD,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,MAAM,WAAW,GAAG,kBAAkB,CAAC;AACvC,MAAM,YAAY,GAAuC,EAAE,CAAC;AAE5D,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,MAAc,EAAE,EAAE;IAC5D,OAAO,YAAY,CAAC,UAAU,CAAC,IAAI,iBAAiB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,UAAkB,EAAE,MAAc,EAAE,EAAE;IAC/D,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,UAAU,KAAK,CAAC,CAAC;IACrE,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;QAC7B,KAAK,EAAE,UAAU,CAAC,OAAO;KAC1B,CAAC,CAAC;IACH,YAAY,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QAC1C,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,OAAO,CAAC;IAC3B,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newthink/ui",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Simple Alpine Headless UI Components",
   "author": {
     "name": "Eric Kwoka",

package/src/headless/accordion.ts

@@ -1,4 +1,4 @@
-import { Alpine } from 'alpinejs';
+import type { Alpine } from 'alpinejs';
 
 import { AlpinePlugin } from '../types';
 import { HeadlessHandler, RootHandler, headless } from './headless';

package/src/headless/dragScroll.ts

@@ -0,0 +1,86 @@
+import { AlpinePlugin } from '../types';
+
+const resizeCenterer = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    const el = entry.target;
+    if (!(el instanceof HTMLElement)) continue;
+    center(el);
+  }
+});
+
+const center = async (el: HTMLElement) => {
+  await nextTick();
+  el.scrollLeft = (el.scrollWidth - el.clientWidth) / 2;
+  el.scrollTop = (el.scrollHeight - el.clientHeight) / 2;
+};
+
+const forEach = Array.prototype.forEach;
+
+export const dragScroll: AlpinePlugin = (Alpine) =>
+  Alpine.directive('dragscroll', (el, { modifiers }, { cleanup }) => {
+    const autoCenter = modifiers.includes('center');
+    cleanup(registerDragScroll(el));
+    el.classList.add('overscroll-contain', 'cursor-grab');
+    if (!autoCenter) return;
+    forEach.call(el.children, (el: Element) => resizeCenterer.observe(el));
+    cleanup(() =>
+      forEach.call(el.children, (el: Element) => resizeCenterer.unobserve(el)),
+    );
+  });
+
+const preventStop = (e: Event) => {
+  e.preventDefault();
+  e.stopPropagation();
+};
+
+const cancelEvents = ['pointerup', 'mouseup', 'touchend'] as const;
+
+const registerDragScroll = (el: HTMLElement) => {
+  const moveHandler = (e: PointerEvent) => {
+    preventStop(e);
+    el.scrollLeft -= e.movementX;
+    el.scrollTop -= e.movementY;
+  };
+  const upHandler = async (e: PointerEvent | MouseEvent | TouchEvent) => {
+    preventStop(e);
+    document.removeEventListener('pointermove', moveHandler, true);
+    document.body.classList.remove(
+      '!cursor-grabbing',
+      '[&>*]:pointer-events-none',
+    );
+    el.classList.add('cursor-grab');
+    await nextTick();
+    document.removeEventListener('click', preventStop, true);
+    cancelEvents.forEach((event) =>
+      document.removeEventListener(event, upHandler, {
+        capture: true,
+      }),
+    );
+  };
+  const downHandler = (e: PointerEvent | MouseEvent | TouchEvent) => {
+    if (isTouch(e)) return; // skip touch inputs (allow native scrolling)
+    if (e.button === 2) return; // skip right-click
+    preventStop(e);
+    el.classList.remove('cursor-grab');
+    document.body.classList.add(
+      '!cursor-grabbing',
+      '[&>*]:pointer-events-none',
+    );
+    document.addEventListener('pointermove', moveHandler, { capture: true });
+    cancelEvents.forEach((event) =>
+      document.addEventListener(event, upHandler, {
+        capture: true,
+      }),
+    );
+    document.addEventListener('click', preventStop, { capture: true });
+  };
+  el.addEventListener('pointerdown', downHandler);
+  return () => el.removeEventListener('pointerdown', downHandler);
+};
+
+const nextTick = () =>
+  new Promise((res) => queueMicrotask(() => setTimeout(res, 0)));
+
+const isTouch = (e: PointerEvent | MouseEvent | TouchEvent): e is TouchEvent =>
+  e instanceof TouchEvent ||
+  (e instanceof PointerEvent && e.pointerType === 'touch');

package/src/headless/index.ts

@@ -1,5 +1,7 @@
 export { accordionGroup, accordion, accordions } from './accordion';
+export { dragScroll } from './dragScroll';
 export { headless } from './headless';
 export { panel } from './panel';
 export { tabs } from './tabs';
 export type { RootHandler, HeadlessHandler } from './headless';
+export { swipeDetect } from './swipeDetect';

package/src/headless/swipeDetect.ts

@@ -0,0 +1,97 @@
+import type { ElementWithXAttributes } from 'alpinejs/dist/types';
+
+import type { AlpinePlugin } from '../types';
+
+type TouchPosition = {
+  x: number;
+  y: number;
+};
+
+type SwipableData = {
+  start?: TouchPosition;
+
+  dispatch: (dir: SwipeDirection) => void;
+};
+enum SwipeDirection {
+  None = 0,
+  Left = 1 << 0,
+  Right = 1 << 1,
+  Up = 1 << 2,
+  Down = 1 << 3,
+}
+
+const swipableMap = new WeakMap<ElementWithXAttributes, SwipableData>();
+const hasSwipe = swipableMap.has.bind(swipableMap);
+export const swipeDetect: AlpinePlugin = (Alpine) =>
+  Alpine.directive('swipe', (el, _, { cleanup }) => {
+    const swipeData: SwipableData = {
+      dispatch: (dir) => {
+        const direction = Object.entries(SwipeDirection)
+          .filter(([, v]) => typeof v === 'number' && v && (dir & v) === v)
+          .map(([k]) => k.toLowerCase());
+        el.dispatchEvent(
+          new CustomEvent('swipe', {
+            detail: direction.join('-'),
+          }),
+        );
+        el.dispatchEvent(
+          new CustomEvent(`swipe${direction.join('')}`, {
+            detail: direction.join('-'),
+          }),
+        );
+      },
+    };
+    swipableMap.set(el, swipeData);
+    el.addEventListener('touchstart', touchDown);
+    cleanup(() => el.removeEventListener('touchstart', touchDown));
+  });
+
+const touchDown = (ev: TouchEvent) => {
+  const swipeData = swipableMap.get(ev.currentTarget as ElementWithXAttributes);
+  if (!swipeData) return;
+  const touch = ev.touches[0];
+  const { clientX, clientY } = touch;
+  swipeData.start ??= { x: clientX, y: clientY };
+  document.addEventListener('touchend', touchUp, { once: true });
+};
+
+const touchUp = (ev: TouchEvent) => {
+  const target = ev.target as ElementWithXAttributes;
+  if (!target) return;
+  const swipeData = swipableMap.get(
+    findNearest(target, hasSwipe) as ElementWithXAttributes,
+  );
+  if (!swipeData?.start) return;
+  const touch = ev.changedTouches[0];
+  const { clientX, clientY } = touch;
+  const direction = getDirection(swipeData.start, { x: clientX, y: clientY });
+  if (direction === SwipeDirection.None) return;
+  swipeData.dispatch(direction);
+  delete swipeData.start;
+};
+
+const findNearest = <T extends HTMLElement>(
+  el: T,
+  predicate: (el: T) => boolean,
+): HTMLElement | null => {
+  if (predicate(el)) return el;
+  if (!el.parentElement) return null;
+  return findNearest(el.parentElement as T, predicate);
+};
+
+const getDirection = (start: TouchPosition, end: TouchPosition) => {
+  const vector = [end.x - start.x, end.y - start.y];
+  if (vector.every((v) => Math.abs(v) < 50)) return SwipeDirection.None;
+  // normalize vector
+  const magnitude = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
+  const [x, y] = vector.map((v) => v / magnitude);
+
+  const direction = getDirectionSign(x) | (getDirectionSign(y) << 2);
+  return direction;
+};
+
+const getDirectionSign = (offset: number) => {
+  if (offset > 0.5) return 2;
+  if (offset < -0.5) return 1;
+  return 0;
+};

package/src/index.ts

@@ -1,11 +1,19 @@
-import { accordion, accordionGroup, accordions, panel, tabs } from './headless';
+import {
+  accordion,
+  accordionGroup,
+  accordions,
+  dragScroll,
+  panel,
+  swipeDetect,
+  tabs,
+} from './headless';
 import { screen } from './magics';
 import type { AlpinePlugin } from './types';
 
 export const NTMagics: AlpinePlugin = (Alpine) => Alpine.plugin([screen]);
 
 export const UI: AlpinePlugin = (Alpine) =>
-  Alpine.plugin([accordions, panel, tabs, NTMagics]);
+  Alpine.plugin([accordions, dragScroll, panel, swipeDetect, tabs, NTMagics]);
 
 export default UI;
 
@@ -13,6 +21,7 @@ export {
   accordion,
   accordionGroup,
   accordions,
+  dragScroll,
   panel,
   tabs,
   screen,

package/src/magics/screen.ts

@@ -1,4 +1,4 @@
-import Alpine from 'alpinejs';
+import type { Alpine } from 'alpinejs';
 
 import { AlpinePlugin } from '../types';
 
@@ -14,7 +14,7 @@ export const screen: AlpinePlugin = (Alpine) => {
       );
       return false;
     }
-    const signal = getMediaSignal(breakSize);
+    const signal = getMediaSignal(breakSize, Alpine);
     return signal.value;
   });
 };
@@ -32,11 +32,11 @@ const defaultBreakpoints: Record<string, number> = {
 const breakpoints = defaultBreakpoints;
 const mediaSignals: Record<number, { value: boolean }> = {};
 
-const getMediaSignal = (breakpoint: number) => {
-  return mediaSignals[breakpoint] ?? createMediaSignal(breakpoint);
+const getMediaSignal = (breakpoint: number, Alpine: Alpine) => {
+  return mediaSignals[breakpoint] ?? createMediaSignal(breakpoint, Alpine);
 };
 
-const createMediaSignal = (breakpoint: number) => {
+const createMediaSignal = (breakpoint: number, Alpine: Alpine) => {
   const mediaMatch = window.matchMedia(`(min-width: ${breakpoint}px)`);
   const signal = Alpine.reactive({
     value: mediaMatch.matches,