@newthink/ui 0.1.3 → 0.3.0

package/dist/headless/accordion.d.ts

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

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

@@ -0,0 +1,72 @@
+import { headless } from './headless';
+const groupMap = new WeakMap();
+const getGroup = (el, Alpine) => {
+    const root = Alpine.findClosest(el, groupMap.has.bind(groupMap));
+    return groupMap.get(root);
+};
+const handleAccordionGroup = (el, _, { Alpine, effect }) => {
+    const groupData = Alpine.reactive({
+        active: null,
+        id: 0,
+        addAccordion(initial) {
+            const thisId = this.id++;
+            const accordionInstance = Alpine.reactive({
+                active: initial,
+            });
+            effect(() => {
+                if (accordionInstance.active) {
+                    this.active = thisId;
+                }
+                else if (this.active === thisId) {
+                    this.active = null;
+                }
+            });
+            effect(() => {
+                if (this.active === thisId) {
+                    accordionInstance.active = true;
+                }
+                else {
+                    accordionInstance.active = false;
+                }
+            });
+            return accordionInstance;
+        },
+    });
+    groupMap.set(el, groupData);
+    return groupData;
+};
+export const accordionGroup = (Alpine) => Alpine.directive('accordion-group', handleAccordionGroup);
+const handleAccordionRoot = (el, { modifiers: [initialState = 'closed'] }, { Alpine }) => getGroup(el, Alpine)?.addAccordion(initialState === 'open') ??
+    Alpine.reactive({
+        active: initialState === 'open',
+    });
+const controlForce = {
+    open: true,
+    close: false,
+    toggle: null,
+};
+const handleAccordionControl = (accordionData, el, { modifiers: [force = 'toggle'] }, { Alpine }) => {
+    Alpine.bind(el, {
+        'x-on:click': () => {
+            accordionData.active =
+                controlForce[force] ?? !accordionData.active;
+        },
+        ':aria-expanded': () => accordionData.active,
+    });
+};
+const handleAccordionContainer = (accordionData, el, _, { Alpine }) => {
+    Alpine.bind(el, {
+        'x-show': () => accordionData.active,
+    });
+};
+const accordionHandlers = {
+    control: handleAccordionControl,
+    container: handleAccordionContainer,
+};
+export const accordion = headless('accordion', handleAccordionRoot, accordionHandlers);
+export const accordions = (Alpine) => {
+    accordionGroup(Alpine);
+    accordion(Alpine);
+};
+export default accordions;
+//# sourceMappingURL=accordion.js.map

package/dist/headless/accordion.js.map

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

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,6 @@
+export { accordionGroup, accordion, accordions } from './accordion';
+export { headless } from './headless';
+export { panel } from './panel';
+export { tabs } from './tabs';
+export type { RootHandler, HeadlessHandler } from './headless';
+//# 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,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"}

package/dist/headless/index.js

@@ -0,0 +1,5 @@
+export { accordionGroup, accordion, accordions } from './accordion';
+export { headless } from './headless';
+export { panel } from './panel';
+export { tabs } from './tabs';
+//# 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,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,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/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, 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, };
 //# 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,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAIxD,eAAO,MAAM,EAAE,EAAE,iBAA4D,CAAC;AAE9E,eAAe,EAAE,CAAC"}
+{"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"}

package/dist/index.js

@@ -1,5 +1,7 @@
-import { panel } from './headless/panel';
-import { tabs } from './headless/tabs';
-export const UI = (Alpine) => Alpine.plugin([panel, tabs]);
+import { accordion, accordionGroup, accordions, panel, 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 default UI;
+export { accordion, accordionGroup, accordions, 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":"AACA,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,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;AAE9E,eAAe,EAAE,CAAC"}
+{"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"}

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,40 @@
+import Alpine from 'alpinejs';
+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);
+        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) => {
+    return mediaSignals[breakpoint] ?? createMediaSignal(breakpoint);
+};
+const createMediaSignal = (breakpoint) => {
+    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":"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"}

package/package.json

@@ -1,7 +1,20 @@
 {
   "name": "@newthink/ui",
-  "version": "0.1.3",
+  "version": "0.3.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.2.5",
-    "@typescript-eslint/eslint-plugin": "5.59.9",
-    "@typescript-eslint/parser": "5.59.9",
-    "@vitest/coverage-c8": "0.32.0",
+    "@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.17.19",
-    "eslint": "8.42.0",
-    "eslint-plugin-filename-export": "1.0.3",
+    "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.0"
+    "vitest": "0.34.1"
   },
   "peerDependencies": {
     "alpinejs": "^3.10.0",

package/src/headless/accordion.ts

@@ -0,0 +1,116 @@
+import { Alpine } from 'alpinejs';
+
+import { AlpinePlugin } from '../types';
+import { HeadlessHandler, RootHandler, headless } from './headless';
+
+type GroupData = {
+  active: number | null;
+  id: number;
+  addAccordion: (initial: boolean) => AccordionData;
+};
+const groupMap = new WeakMap<HTMLElement, GroupData>();
+
+const getGroup = (el: HTMLElement, Alpine: Alpine) => {
+  const root = Alpine.findClosest(el, groupMap.has.bind(groupMap));
+  return groupMap.get(root);
+};
+
+const handleAccordionGroup: RootHandler<GroupData> = (
+  el,
+  _,
+  { Alpine, effect },
+) => {
+  const groupData = Alpine.reactive({
+    active: null as number | null,
+    id: 0,
+    addAccordion(initial: boolean) {
+      const thisId = this.id++;
+      const accordionInstance = Alpine.reactive({
+        active: initial,
+      });
+      effect(() => {
+        if (accordionInstance.active) {
+          this.active = thisId;
+        } else if (this.active === thisId) {
+          this.active = null;
+        }
+      });
+      effect(() => {
+        if (this.active === thisId) {
+          accordionInstance.active = true;
+        } else {
+          accordionInstance.active = false;
+        }
+      });
+      return accordionInstance;
+    },
+  });
+  groupMap.set(el, groupData);
+  return groupData;
+};
+
+export const accordionGroup: AlpinePlugin = (Alpine) =>
+  Alpine.directive('accordion-group', handleAccordionGroup);
+
+type AccordionData = {
+  active: boolean;
+};
+const handleAccordionRoot: RootHandler<AccordionData> = (
+  el,
+  { modifiers: [initialState = 'closed'] },
+  { Alpine },
+) =>
+  getGroup(el, Alpine)?.addAccordion(initialState === 'open') ??
+  Alpine.reactive({
+    active: initialState === 'open',
+  });
+
+const controlForce = {
+  open: true,
+  close: false,
+  toggle: null,
+};
+
+type controlType = keyof typeof controlForce;
+
+const handleAccordionControl: HeadlessHandler<AccordionData> = (
+  accordionData,
+  el,
+  { modifiers: [force = 'toggle'] },
+  { Alpine },
+) => {
+  Alpine.bind(el, {
+    'x-on:click': () => {
+      accordionData.active =
+        controlForce[force as controlType] ?? !accordionData.active;
+    },
+    ':aria-expanded': () => accordionData.active,
+  });
+};
+const handleAccordionContainer: HeadlessHandler<AccordionData> = (
+  accordionData,
+  el,
+  _,
+  { Alpine },
+) => {
+  Alpine.bind(el, {
+    'x-show': () => accordionData.active,
+  });
+};
+
+const accordionHandlers = {
+  control: handleAccordionControl,
+  container: handleAccordionContainer,
+};
+
+export const accordion = headless(
+  'accordion',
+  handleAccordionRoot,
+  accordionHandlers,
+);
+
+export const accordions: AlpinePlugin = (Alpine) => {
+  accordionGroup(Alpine);
+  accordion(Alpine);
+};
+export default accordions;

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,5 @@
+export { accordionGroup, accordion, accordions } from './accordion';
+export { headless } from './headless';
+export { panel } from './panel';
+export { tabs } from './tabs';
+export type { RootHandler, HeadlessHandler } from './headless';

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,7 +1,20 @@
-import { HeadlessComponent } from './headless/headless';
-import { panel } from './headless/panel';
-import { tabs } from './headless/tabs';
+import { accordion, accordionGroup, accordions, panel, tabs } from './headless';
+import { screen } from './magics';
+import type { AlpinePlugin } from './types';
 
-export const UI: HeadlessComponent = (Alpine) => Alpine.plugin([panel, tabs]);
+export const NTMagics: AlpinePlugin = (Alpine) => Alpine.plugin([screen]);
+
+export const UI: AlpinePlugin = (Alpine) =>
+  Alpine.plugin([accordions, panel, tabs, NTMagics]);
 
 export default UI;
+
+export {
+  accordion,
+  accordionGroup,
+  accordions,
+  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 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);
+    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) => {
+  return mediaSignals[breakpoint] ?? createMediaSignal(breakpoint);
+};
+
+const createMediaSignal = (breakpoint: number) => {
+  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;