@newthink/ui 0.0.1 → 0.1.0

package/dist/headless/tabs.d.ts

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

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

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

package/dist/headless/tabs.js

@@ -0,0 +1,40 @@
+import { headless } from './headless';
+export const tabs = headless('tabs', (_el, _directive, { Alpine, evaluate }) => {
+    const tabGroup = Alpine.reactive({
+        activeTab: 0,
+        tabs: [],
+        panels: [],
+        $focus: evaluate('$focus'),
+    });
+    return tabGroup;
+}, {
+    list: (tabGroup, el, _directive, { Alpine }) => {
+        const focusNext = () => tabGroup.$focus.wrap().next();
+        const focusPrevious = () => tabGroup.$focus.wrap().previous();
+        Alpine.bind(el, {
+            ':role': () => 'tablist',
+            '@keydown.arrow-left.stop.prevent': focusPrevious,
+            '@keydown.arrow-right.stop.prevent': focusNext,
+            '@keydown.arrow-up.stop.prevent': focusPrevious,
+            '@keydown.arrow-down.stop.prevent': focusNext,
+        });
+    },
+    tab: (tabGroup, el, _directive, { Alpine }) => {
+        const tabIndex = tabGroup.tabs.push(el) - 1;
+        Alpine.bind(el, {
+            ':tabindex': () => Number(tabIndex === tabGroup.activeTab) - 1,
+            ':aria-selected': () => tabIndex === tabGroup.activeTab,
+            '@click': () => tabGroup.$focus.focus(el),
+            '@focus': () => (tabGroup.activeTab = tabIndex),
+        });
+    },
+    panel: (tabGroup, el, _directive, { Alpine }) => {
+        const panelIndex = tabGroup.panels.push(el) - 1;
+        Alpine.bind(el, {
+            'x-show': () => panelIndex === tabGroup.activeTab,
+            ':hidden': () => panelIndex !== tabGroup.activeTab,
+            ':aria-hidden': () => panelIndex !== tabGroup.activeTab,
+        });
+    },
+});
+//# sourceMappingURL=tabs.js.map

package/dist/headless/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/headless/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAC1B,MAAM,EACN,CAAC,GAAG,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxC,MAAM,QAAQ,GAKV,MAAM,CAAC,QAAQ,CAAC;QAClB,SAAS,EAAE,CAAC;QACZ,IAAI,EAAE,EAAmB;QACzB,MAAM,EAAE,EAAmB;QAC3B,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAe;KACzC,CAAC,CAAC;IACH,OAAO,QAAQ,CAAC;AAClB,CAAC,EACD;IACE,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QAC7C,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;QACtD,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,CAAC;QAE9D,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;YACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS;YACxB,kCAAkC,EAAE,aAAa;YACjD,mCAAmC,EAAE,SAAS;YAC9C,gCAAgC,EAAE,aAAa;YAC/C,kCAAkC,EAAE,SAAS;SAC9C,CAAC,CAAC;IACL,CAAC;IACD,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QAC5C,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;QAC5C,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;YACd,WAAW,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;YAC9D,gBAAgB,EAAE,GAAG,EAAE,CAAC,QAAQ,KAAK,QAAQ,CAAC,SAAS;YACvD,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;YACzC,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC;SAChD,CAAC,CAAC;IACL,CAAC;IACD,KAAK,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QAC9C,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;QAChD,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;YACd,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,KAAK,QAAQ,CAAC,SAAS;YACjD,SAAS,EAAE,GAAG,EAAE,CAAC,UAAU,KAAK,QAAQ,CAAC,SAAS;YAClD,cAAc,EAAE,GAAG,EAAE,CAAC,UAAU,KAAK,QAAQ,CAAC,SAAS;SACxD,CAAC,CAAC;IACL,CAAC;CACF,CACF,CAAC"}

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;AAGxD,eAAO,MAAM,EAAE,EAAE,iBAAsD,CAAC;AAExE,eAAe,EAAE,CAAC"}
+{"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"}

package/dist/index.js

@@ -1,4 +1,5 @@
 import { panel } from './headless/panel';
-export const UI = (Alpine) => Alpine.plugin([panel]);
+import { tabs } from './headless/tabs';
+export const UI = (Alpine) => Alpine.plugin([panel, tabs]);
 export default UI;
 //# 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;AAEzC,MAAM,CAAC,MAAM,EAAE,GAAsB,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;AAExE,eAAe,EAAE,CAAC"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newthink/ui",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Simple Alpine Headless UI Components",
   "exports": {
     ".": {
@@ -19,7 +19,7 @@
   "license": "ISC",
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "4.1.1",
-    "@types/node": "20.2.3",
+    "@types/node": "20.2.4",
     "@typescript-eslint/eslint-plugin": "5.59.7",
     "@typescript-eslint/parser": "5.59.7",
     "@vitest/coverage-c8": "0.31.1",
@@ -37,7 +37,8 @@
     "vitest": "0.31.1"
   },
   "peerDependencies": {
-    "alpinejs": "^3.10.0"
+    "alpinejs": "^3.10.0",
+    "@alpinejs/focus": "^3.10.0"
   },
   "prettier": {
     "singleQuote": true,

package/src/headless/tabs.ts

@@ -0,0 +1,76 @@
+import { headless } from './headless';
+
+export const tabs = headless(
+  'tabs',
+  (_el, _directive, { Alpine, evaluate }) => {
+    const tabGroup: {
+      activeTab: number;
+      tabs: HTMLElement[];
+      panels: HTMLElement[];
+      $focus: FocusMagic;
+    } = Alpine.reactive({
+      activeTab: 0,
+      tabs: [] as HTMLElement[],
+      panels: [] as HTMLElement[],
+      $focus: evaluate('$focus') as FocusMagic,
+    });
+    return tabGroup;
+  },
+  {
+    list: (tabGroup, el, _directive, { Alpine }) => {
+      const focusNext = () => tabGroup.$focus.wrap().next();
+      const focusPrevious = () => tabGroup.$focus.wrap().previous();
+
+      Alpine.bind(el, {
+        ':role': () => 'tablist',
+        '@keydown.arrow-left.stop.prevent': focusPrevious,
+        '@keydown.arrow-right.stop.prevent': focusNext,
+        '@keydown.arrow-up.stop.prevent': focusPrevious,
+        '@keydown.arrow-down.stop.prevent': focusNext,
+      });
+    },
+    tab: (tabGroup, el, _directive, { Alpine }) => {
+      const tabIndex = tabGroup.tabs.push(el) - 1;
+      Alpine.bind(el, {
+        ':tabindex': () => Number(tabIndex === tabGroup.activeTab) - 1,
+        ':aria-selected': () => tabIndex === tabGroup.activeTab,
+        '@click': () => tabGroup.$focus.focus(el),
+        '@focus': () => (tabGroup.activeTab = tabIndex),
+      });
+    },
+    panel: (tabGroup, el, _directive, { Alpine }) => {
+      const panelIndex = tabGroup.panels.push(el) - 1;
+      Alpine.bind(el, {
+        'x-show': () => panelIndex === tabGroup.activeTab,
+        ':hidden': () => panelIndex !== tabGroup.activeTab,
+        ':aria-hidden': () => panelIndex !== tabGroup.activeTab,
+      });
+    },
+  }
+);
+
+type FocusMagic = {
+  within(el: HTMLElement): FocusMagic;
+  withoutScrolling(): FocusMagic;
+  noscroll(): FocusMagic;
+  withWrapAround(): FocusMagic;
+  wrap(): FocusMagic;
+  focusable(el: HTMLElement): boolean;
+  previouslyFocused(): HTMLElement;
+  lastFocused(): HTMLElement;
+  focused(): HTMLElement;
+  focusables(): HTMLElement[];
+  all(): HTMLElement[];
+  isFirst(el: HTMLElement): boolean;
+  isLast(el: HTMLElement): boolean;
+  getFirst(): HTMLElement;
+  getLast(): HTMLElement;
+  getNext(): HTMLElement;
+  getPrevious(): HTMLElement;
+  first(): HTMLElement;
+  last(): HTMLElement;
+  next(): HTMLElement;
+  previous(): HTMLElement;
+  prev(): HTMLElement;
+  focus(el: HTMLElement): void;
+};

package/src/index.ts

@@ -1,6 +1,7 @@
 import { HeadlessComponent } from './headless/headless';
 import { panel } from './headless/panel';
+import { tabs } from './headless/tabs';
 
-export const UI: HeadlessComponent = (Alpine) => Alpine.plugin([panel]);
+export const UI: HeadlessComponent = (Alpine) => Alpine.plugin([panel, tabs]);
 
 export default UI;