@newthink/ui 0.2.0 → 0.4.0

package/dist/headless/accordion.d.ts

@@ -1,6 +1,6 @@
-import { HeadlessComponent } from './headless';
-export declare const accordionGroup: HeadlessComponent;
-export declare const accordion: HeadlessComponent;
-declare const accordions: HeadlessComponent;
+import { AlpinePlugin } from '../types';
+export declare const accordionGroup: AlpinePlugin;
+export declare const accordion: AlpinePlugin;
+export declare const accordions: AlpinePlugin;
 export default accordions;
 //# sourceMappingURL=accordion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/headless/accordion.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,iBAAiB,EAIlB,MAAM,YAAY,CAAC;AAgDpB,eAAO,MAAM,cAAc,EAAE,iBAC8B,CAAC;AAqD5D,eAAO,MAAM,SAAS,mBAIrB,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,iBAGjB,CAAC;AACF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/headless/accordion.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAiDxC,eAAO,MAAM,cAAc,EAAE,YAC8B,CAAC;AAqD5D,eAAO,MAAM,SAAS,cAIrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,YAGxB,CAAC;AACF,eAAe,UAAU,CAAC"}

package/dist/headless/accordion.js

@@ -1,4 +1,4 @@
-import { headless, } from './headless';
+import { headless } from './headless';
 const groupMap = new WeakMap();
 const getGroup = (el, Alpine) => {
     const root = Alpine.findClosest(el, groupMap.has.bind(groupMap));
@@ -64,7 +64,7 @@ const accordionHandlers = {
     container: handleAccordionContainer,
 };
 export const accordion = headless('accordion', handleAccordionRoot, accordionHandlers);
-const accordions = (Alpine) => {
+export const accordions = (Alpine) => {
     accordionGroup(Alpine);
     accordion(Alpine);
 };

package/dist/headless/accordion.js.map

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

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;AAgBxC,eAAO,MAAM,UAAU,EAAE,YAcrB,CAAC"}

package/dist/headless/dragScroll.js

@@ -0,0 +1,62 @@
+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;
+};
+export const dragScroll = (Alpine) => Alpine.directive('dragscroll', (el, { modifiers }, { cleanup }) => {
+    const autoCenter = modifiers.includes('center');
+    registerDragScroll(el);
+    if (autoCenter)
+        Array.prototype.forEach.call(el.children, (el) => resizeCenterer.observe(el));
+    el.classList.add('overscroll-contain', 'cursor-grab');
+    cleanup(() => Array.prototype.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.map((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.map((event) => document.addEventListener(event, upHandler, {
+            capture: true,
+        }));
+        document.addEventListener('click', preventStop, { capture: true });
+    };
+    el.addEventListener('pointerdown', downHandler);
+};
+const nextTick = () => new Promise((res) => queueMicrotask(() => setTimeout(res, 0)));
+const isTouch = (e) => e instanceof TouchEvent;
+//# 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":"AAEA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;IACpD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;QAC3B,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,CAAC,EAAE,YAAY,WAAW,CAAC;YAAE,SAAS;QAC3C,MAAM,CAAC,EAAE,CAAC,CAAC;KACZ;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,KAAK,EAAE,EAAe,EAAE,EAAE;IACvC,MAAM,QAAQ,EAAE,CAAC;IACjB,EAAE,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACtD,EAAE,CAAC,SAAS,GAAG,CAAC,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;AACzD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAiB,CAAC,MAAM,EAAE,EAAE,CACjD,MAAM,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;IAChE,MAAM,UAAU,GAAG,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAChD,kBAAkB,CAAC,EAAE,CAAC,CAAC;IACvB,IAAI,UAAU;QACZ,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAW,EAAE,EAAE,CACxD,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,CAC3B,CAAC;IACJ,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,EAAE,aAAa,CAAC,CAAC;IACtD,OAAO,CAAC,GAAG,EAAE,CACX,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAW,EAAE,EAAE,CACxD,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,CAC7B,CACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL,MAAM,WAAW,GAAG,CAAC,CAAQ,EAAE,EAAE;IAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,CAAC,CAAC,eAAe,EAAE,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,WAAW,EAAE,SAAS,EAAE,UAAU,CAAU,CAAC;AAEnE,MAAM,kBAAkB,GAAG,CAAC,EAAe,EAAE,EAAE;IAC7C,MAAM,WAAW,GAAG,CAAC,CAAe,EAAE,EAAE;QACtC,WAAW,CAAC,CAAC,CAAC,CAAC;QACf,EAAE,CAAC,UAAU,IAAI,CAAC,CAAC,SAAS,CAAC;QAC7B,EAAE,CAAC,SAAS,IAAI,CAAC,CAAC,SAAS,CAAC;IAC9B,CAAC,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,EAAE,CAAyC,EAAE,EAAE;QACpE,WAAW,CAAC,CAAC,CAAC,CAAC;QACf,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;QAC/D,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAC5B,kBAAkB,EAClB,2BAA2B,CAC5B,CAAC;QACF,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAChC,MAAM,QAAQ,EAAE,CAAC;QACjB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;QACzD,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACzB,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,SAAS,EAAE;YAC7C,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;IACJ,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,CAAC,CAAyC,EAAE,EAAE;QAChE,IAAI,OAAO,CAAC,CAAC,CAAC;YAAE,OAAO,CAAC,6CAA6C;QACrE,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,CAAC,mBAAmB;QAC/C,WAAW,CAAC,CAAC,CAAC,CAAC;QACf,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QACnC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CACzB,kBAAkB,EAClB,2BAA2B,CAC5B,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzE,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACzB,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,EAAE;YAC1C,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACrE,CAAC,CAAC;IACF,EAAE,CAAC,gBAAgB,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,IAAI,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAEjE,MAAM,OAAO,GAAG,CAAC,CAAyC,EAAmB,EAAE,CAC7E,CAAC,YAAY,UAAU,CAAC"}

package/dist/headless/headless.d.ts

@@ -1,9 +1,8 @@
-import type { Alpine } from 'alpinejs';
 import type { DirectiveData, ElementWithXAttributes, Utilities } from 'alpinejs/dist/types';
-export declare const headless: <T extends Record<string, unknown>>(name: string, rootHandler: RootHandler<T>, handlers?: HeadlessHandlers<T> | undefined) => HeadlessComponent;
+import { AlpinePlugin } from '../types';
+export declare const headless: <T extends Record<string, unknown>>(name: string, rootHandler: RootHandler<T>, handlers?: HeadlessHandlers<T> | undefined) => AlpinePlugin;
 type HeadlessHandlers<T extends Record<string, unknown>> = Record<string, HeadlessHandler<T>>;
 export type RootHandler<T> = (el: ElementWithXAttributes, directive: DirectiveData, utilities: Utilities) => T;
 export type HeadlessHandler<T> = (state: T, el: ElementWithXAttributes, directive: DirectiveData, utilities: Utilities) => void;
-export type HeadlessComponent = (Alpine: Alpine) => void;
 export {};
 //# sourceMappingURL=headless.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"headless.d.ts","sourceRoot":"","sources":["../../src/headless/headless.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EACV,aAAa,EACb,sBAAsB,EACtB,SAAS,EACV,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,QAAQ,4CACb,MAAM,8EAGX,iBA2BF,CAAC;AAeF,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,MAAM,CAC/D,MAAM,EACN,eAAe,CAAC,CAAC,CAAC,CACnB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAC3B,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,SAAS,KACjB,CAAC,CAAC;AAEP,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAC/B,KAAK,EAAE,CAAC,EACR,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,SAAS,KACjB,IAAI,CAAC;AAEV,MAAM,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC"}
+{"version":3,"file":"headless.d.ts","sourceRoot":"","sources":["../../src/headless/headless.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,sBAAsB,EACtB,SAAS,EACV,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,eAAO,MAAM,QAAQ,4CACb,MAAM,8EAGX,YA2BF,CAAC;AAeF,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,MAAM,CAC/D,MAAM,EACN,eAAe,CAAC,CAAC,CAAC,CACnB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAC3B,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,SAAS,KACjB,CAAC,CAAC;AAEP,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAC/B,KAAK,EAAE,CAAC,EACR,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,SAAS,KACjB,IAAI,CAAC"}

package/dist/headless/headless.js.map

@@ -1 +1 @@
-{"version":3,"file":"headless.js","sourceRoot":"","sources":["../../src/headless/headless.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,IAAY,EACZ,WAA2B,EAC3B,QAA8B,EACX,EAAE;IACrB,MAAM,WAAW,GAAG,IAAI,OAAO,EAA6B,CAAC;IAC7D,OAAO,CAAC,MAAc,EAAE,EAAE;QACxB,MAAM,yBAAyB,GAAG,CAChC,EAA0B,EAChB,EAAE;YACZ,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;YACvE,IAAI,CAAC,IAAI;gBACP,OAAO,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC;YACxE,OAAO,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEF,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC,CAAC;QAE1D,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;YAC9C,IAAI,CAAC,SAAS,CAAC,KAAK;gBAClB,OAAO,WAAW,CAAC,GAAG,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;YAChE,MAAM,aAAa,GAAG,yBAAyB,CAAC,EAAE,CAAC,CAAC;YACpD,IAAI,CAAC,aAAa;gBAAE,OAAO,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAClD,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,CAC7C,aAAa,EACb,EAAE,EACF,SAAS,EACT,KAAK,CACN,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GACZ,CAAC,IAAY,EAAE,EAAE,CACjB,CAAC,CAAU,EAAE,EAA0B,EAAE,SAAwB,EAAE,EAAE;IACnE,OAAO,CAAC,KAAK,CACX,UAAU,IAAI,2BAA2B,EACzC,EAAE,EACF,SAAS,CAAC,QAAQ,CACnB,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,EAA0B,EAAE,EAAE,CAChE,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC"}
+{"version":3,"file":"headless.js","sourceRoot":"","sources":["../../src/headless/headless.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,IAAY,EACZ,WAA2B,EAC3B,QAA8B,EAChB,EAAE;IAChB,MAAM,WAAW,GAAG,IAAI,OAAO,EAA6B,CAAC;IAC7D,OAAO,CAAC,MAAc,EAAE,EAAE;QACxB,MAAM,yBAAyB,GAAG,CAChC,EAA0B,EAChB,EAAE;YACZ,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;YACvE,IAAI,CAAC,IAAI;gBACP,OAAO,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC;YACxE,OAAO,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEF,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC,CAAC;QAE1D,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;YAC9C,IAAI,CAAC,SAAS,CAAC,KAAK;gBAClB,OAAO,WAAW,CAAC,GAAG,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;YAChE,MAAM,aAAa,GAAG,yBAAyB,CAAC,EAAE,CAAC,CAAC;YACpD,IAAI,CAAC,aAAa;gBAAE,OAAO,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAClD,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,CAC7C,aAAa,EACb,EAAE,EACF,SAAS,EACT,KAAK,CACN,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GACZ,CAAC,IAAY,EAAE,EAAE,CACjB,CAAC,CAAU,EAAE,EAA0B,EAAE,SAAwB,EAAE,EAAE;IACnE,OAAO,CAAC,KAAK,CACX,UAAU,IAAI,2BAA2B,EACzC,EAAE,EACF,SAAS,CAAC,QAAQ,CACnB,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,EAA0B,EAAE,EAAE,CAChE,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC"}

package/dist/headless/index.d.ts

@@ -0,0 +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

@@ -0,0 +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,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

@@ -0,0 +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

@@ -0,0 +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,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/panel.d.ts

@@ -1,2 +1,2 @@
-export declare const panel: import("./headless").HeadlessComponent;
+export declare const panel: import("..").AlpinePlugin;
 //# sourceMappingURL=panel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/headless/panel.ts"],"names":[],"mappings":"AA8BA,eAAO,MAAM,KAAK,wCAYhB,CAAC"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/headless/panel.ts"],"names":[],"mappings":"AA8BA,eAAO,MAAM,KAAK,2BAYhB,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,76 @@
+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);
+};
+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) < 25))
+        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/headless/tabs.d.ts

@@ -1,2 +1,2 @@
-export declare const tabs: import("./headless").HeadlessComponent;
+export declare const tabs: import("..").AlpinePlugin;
 //# sourceMappingURL=tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/headless/tabs.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,wCAkDhB,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/headless/tabs.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,2BAkDhB,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,8 @@
-import { HeadlessComponent } from './headless/headless';
-export declare const UI: HeadlessComponent;
+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, 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":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAIxD,eAAO,MAAM,EAAE,EAAE,iBACyB,CAAC;AAE3C,eAAe,EAAE,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,6 +1,7 @@
-import accordions from './headless/accordion';
-import { panel } from './headless/panel';
-import { tabs } from './headless/tabs';
-export const UI = (Alpine) => Alpine.plugin([accordions, panel, tabs]);
+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, dragScroll, panel, swipeDetect, tabs, NTMagics]);
 export default UI;
+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,UAAU,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,MAAM,CAAC,MAAM,EAAE,GAAsB,CAAC,MAAM,EAAE,EAAE,CAC9C,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;AAE3C,eAAe,EAAE,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/index.d.ts

@@ -0,0 +1,2 @@
+export { screen } from './screen';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/magics/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/magics/index.js

@@ -0,0 +1,2 @@
+export { screen } from './screen';
+//# sourceMappingURL=index.js.map

package/dist/magics/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/magics/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/magics/screen.d.ts

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

package/dist/magics/screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen.d.ts","sourceRoot":"","sources":["../../src/magics/screen.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,YAepB,CAAC"}

package/dist/magics/screen.js

@@ -0,0 +1,39 @@
+export const screen = (Alpine) => {
+    Alpine.magic('screen', () => (breakpoint) => {
+        const breakSize = typeof breakpoint === 'number'
+            ? breakpoint
+            : breakpoints[breakpoint] ?? Number(breakpoint);
+        if (!breakSize) {
+            console.error(`Invalid breakpoint: $screen(${JSON.stringify(breakpoint)})`);
+            return false;
+        }
+        const signal = getMediaSignal(breakSize, Alpine);
+        return signal.value;
+    });
+};
+// Configuration
+const defaultBreakpoints = {
+    xs: 320,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+};
+const breakpoints = defaultBreakpoints;
+const mediaSignals = {};
+const getMediaSignal = (breakpoint, Alpine) => {
+    return mediaSignals[breakpoint] ?? createMediaSignal(breakpoint, Alpine);
+};
+const createMediaSignal = (breakpoint, Alpine) => {
+    const mediaMatch = window.matchMedia(`(min-width: ${breakpoint}px)`);
+    const signal = Alpine.reactive({
+        value: mediaMatch.matches,
+    });
+    mediaSignals[breakpoint] = signal;
+    mediaMatch.addEventListener('change', (e) => {
+        signal.value = e.matches;
+    });
+    return signal;
+};
+//# sourceMappingURL=screen.js.map

package/dist/magics/screen.js.map

@@ -0,0 +1 @@
+{"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,7 +1,20 @@
 {
   "name": "@newthink/ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Simple Alpine Headless UI Components",
+  "author": {
+    "name": "Eric Kwoka",
+    "email": "ninjatheory@gmail.com",
+    "url": "https://thekwoka.net/"
+  },
+  "repository": "github:ekwoka/newthink-ui",
+  "keywords": [
+    "alpinejs",
+    "headless",
+    "components",
+    "plugins"
+  ],
+  "license": "ISC",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,27 +30,25 @@
     "src"
   ],
   "type": "module",
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
+  "sideeffects": false,
   "devDependencies": {
-    "@trivago/prettier-plugin-sort-imports": "4.1.1",
-    "@types/node": "20.3.1",
-    "@typescript-eslint/eslint-plugin": "5.59.11",
-    "@typescript-eslint/parser": "5.59.11",
+    "@trivago/prettier-plugin-sort-imports": "4.2.0",
+    "@types/node": "20.5.0",
+    "@typescript-eslint/eslint-plugin": "6.3.0",
+    "@typescript-eslint/parser": "6.3.0",
     "@vitest/coverage-c8": "0.32.1",
     "alpinejs": "npm:@ekwoka/alpinets@0.0.1-alpha",
-    "esbuild": "0.18.3",
-    "eslint": "8.42.0",
+    "esbuild": "0.19.2",
+    "eslint": "8.47.0",
     "eslint-plugin-filename-export": "1.0.4",
     "husky": "8.0.3",
-    "lint-staged": "13.2.2",
-    "prettier": "2.8.8",
-    "pretty-bytes": "^6.1.0",
-    "typescript": "5.1.3",
-    "vite": "4.3.9",
+    "lint-staged": "14.0.0",
+    "prettier": "3.0.1",
+    "pretty-bytes": "6.1.1",
+    "typescript": "5.1.6",
+    "vite": "4.4.9",
     "vite-tsconfig-paths": "4.2.0",
-    "vitest": "0.32.1"
+    "vitest": "0.34.1"
   },
   "peerDependencies": {
     "alpinejs": "^3.10.0",

package/src/headless/accordion.ts

@@ -1,11 +1,7 @@
-import { Alpine } from 'alpinejs';
+import type { Alpine } from 'alpinejs';
 
-import {
-  HeadlessComponent,
-  HeadlessHandler,
-  RootHandler,
-  headless,
-} from './headless';
+import { AlpinePlugin } from '../types';
+import { HeadlessHandler, RootHandler, headless } from './headless';
 
 type GroupData = {
   active: number | null;
@@ -22,7 +18,7 @@ const getGroup = (el: HTMLElement, Alpine: Alpine) => {
 const handleAccordionGroup: RootHandler<GroupData> = (
   el,
   _,
-  { Alpine, effect }
+  { Alpine, effect },
 ) => {
   const groupData = Alpine.reactive({
     active: null as number | null,
@@ -53,7 +49,7 @@ const handleAccordionGroup: RootHandler<GroupData> = (
   return groupData;
 };
 
-export const accordionGroup: HeadlessComponent = (Alpine) =>
+export const accordionGroup: AlpinePlugin = (Alpine) =>
   Alpine.directive('accordion-group', handleAccordionGroup);
 
 type AccordionData = {
@@ -62,7 +58,7 @@ type AccordionData = {
 const handleAccordionRoot: RootHandler<AccordionData> = (
   el,
   { modifiers: [initialState = 'closed'] },
-  { Alpine }
+  { Alpine },
 ) =>
   getGroup(el, Alpine)?.addAccordion(initialState === 'open') ??
   Alpine.reactive({
@@ -81,7 +77,7 @@ const handleAccordionControl: HeadlessHandler<AccordionData> = (
   accordionData,
   el,
   { modifiers: [force = 'toggle'] },
-  { Alpine }
+  { Alpine },
 ) => {
   Alpine.bind(el, {
     'x-on:click': () => {
@@ -95,7 +91,7 @@ const handleAccordionContainer: HeadlessHandler<AccordionData> = (
   accordionData,
   el,
   _,
-  { Alpine }
+  { Alpine },
 ) => {
   Alpine.bind(el, {
     'x-show': () => accordionData.active,
@@ -110,10 +106,10 @@ const accordionHandlers = {
 export const accordion = headless(
   'accordion',
   handleAccordionRoot,
-  accordionHandlers
+  accordionHandlers,
 );
 
-const accordions: HeadlessComponent = (Alpine) => {
+export const accordions: AlpinePlugin = (Alpine) => {
   accordionGroup(Alpine);
   accordion(Alpine);
 };

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;
+};
+
+export const dragScroll: AlpinePlugin = (Alpine) =>
+  Alpine.directive('dragscroll', (el, { modifiers }, { cleanup }) => {
+    const autoCenter = modifiers.includes('center');
+    registerDragScroll(el);
+    if (autoCenter)
+      Array.prototype.forEach.call(el.children, (el: Element) =>
+        resizeCenterer.observe(el),
+      );
+    el.classList.add('overscroll-contain', 'cursor-grab');
+    cleanup(() =>
+      Array.prototype.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.map((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.map((event) =>
+      document.addEventListener(event, upHandler, {
+        capture: true,
+      }),
+    );
+    document.addEventListener('click', preventStop, { capture: true });
+  };
+  el.addEventListener('pointerdown', downHandler);
+};
+
+const nextTick = () =>
+  new Promise((res) => queueMicrotask(() => setTimeout(res, 0)));
+
+const isTouch = (e: PointerEvent | MouseEvent | TouchEvent): e is TouchEvent =>
+  e instanceof TouchEvent;

package/src/headless/headless.ts

@@ -5,15 +5,17 @@ import type {
   Utilities,
 } from 'alpinejs/dist/types';
 
+import { AlpinePlugin } from '../types';
+
 export const headless = <T extends Record<string, unknown>>(
   name: string,
   rootHandler: RootHandler<T>,
-  handlers?: HeadlessHandlers<T>
-): HeadlessComponent => {
+  handlers?: HeadlessHandlers<T>,
+): AlpinePlugin => {
   const headlessMap = new WeakMap<ElementWithXAttributes, T>();
   return (Alpine: Alpine) => {
     const getHeadlessComponentState = (
-      el: ElementWithXAttributes
+      el: ElementWithXAttributes,
     ): T | void => {
       const root = Alpine.findClosest(el, headlessMap.has.bind(headlessMap));
       if (!root)
@@ -32,7 +34,7 @@ export const headless = <T extends Record<string, unknown>>(
         headlessState,
         el,
         directive,
-        utils
+        utils,
       );
     });
   };
@@ -44,7 +46,7 @@ const failback =
     console.error(
       `Alpine ${name}: Invalid directive value`,
       el,
-      directive.original
+      directive.original,
     );
   };
 
@@ -59,14 +61,12 @@ type HeadlessHandlers<T extends Record<string, unknown>> = Record<
 export type RootHandler<T> = (
   el: ElementWithXAttributes,
   directive: DirectiveData,
-  utilities: Utilities
+  utilities: Utilities,
 ) => T;
 
 export type HeadlessHandler<T> = (
   state: T,
   el: ElementWithXAttributes,
   directive: DirectiveData,
-  utilities: Utilities
+  utilities: Utilities,
 ) => void;
-
-export type HeadlessComponent = (Alpine: Alpine) => void;

package/src/headless/index.ts

@@ -0,0 +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,96 @@
+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);
+};
+
+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) < 25)) 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/headless/tabs.ts

@@ -49,7 +49,7 @@ export const tabs = headless(
         ':aria-hidden': () => panelIndex !== tabGroup.activeTab,
       });
     },
-  }
+  },
 );
 
 type FocusMagic = {

package/src/index.ts

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

package/src/magics/index.ts

@@ -0,0 +1 @@
+export { screen } from './screen';

package/src/magics/screen.ts

@@ -0,0 +1,49 @@
+import type { Alpine } from 'alpinejs';
+
+import { AlpinePlugin } from '../types';
+
+export const screen: AlpinePlugin = (Alpine) => {
+  Alpine.magic('screen', () => (breakpoint: string | number) => {
+    const breakSize =
+      typeof breakpoint === 'number'
+        ? breakpoint
+        : breakpoints[breakpoint] ?? Number(breakpoint);
+    if (!breakSize) {
+      console.error(
+        `Invalid breakpoint: $screen(${JSON.stringify(breakpoint)})`,
+      );
+      return false;
+    }
+    const signal = getMediaSignal(breakSize, Alpine);
+    return signal.value;
+  });
+};
+
+// Configuration
+const defaultBreakpoints: Record<string, number> = {
+  xs: 320,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+};
+
+const breakpoints = defaultBreakpoints;
+const mediaSignals: Record<number, { value: boolean }> = {};
+
+const getMediaSignal = (breakpoint: number, Alpine: Alpine) => {
+  return mediaSignals[breakpoint] ?? createMediaSignal(breakpoint, Alpine);
+};
+
+const createMediaSignal = (breakpoint: number, Alpine: Alpine) => {
+  const mediaMatch = window.matchMedia(`(min-width: ${breakpoint}px)`);
+  const signal = Alpine.reactive({
+    value: mediaMatch.matches,
+  });
+  mediaSignals[breakpoint] = signal;
+  mediaMatch.addEventListener('change', (e) => {
+    signal.value = e.matches;
+  });
+  return signal;
+};

package/src/types.d.ts

@@ -0,0 +1,3 @@
+import { Alpine } from 'alpinejs';
+
+export type AlpinePlugin = (Alpine: Alpine) => void;