V 3/tabs

packages/scaffold/package.json

@@ -17,8 +17,7 @@
   "dependencies": {
     "@web3modal/core": "3.0.0-alpha.5",
     "@web3modal/ui": "3.0.0-alpha.5",
-    "lit": "2.8.0",
-    "motion": "10.16.2"
+    "lit": "2.8.0"
   },
   "keywords": [
     "web3",

packages/ui/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "lit": "2.8.0",
+    "motion": "10.16.2",
     "qrcode": "1.5.3"
   },
   "devDependencies": {

packages/ui/src/composites/wui-tabs/index.ts

@@ -3,6 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
 import type { IconType } from '../../utils/TypesUtil.js'
 import styles from './styles.js'
+import { animate } from 'motion'
 
 @customElement('wui-tabs')
 export class WuiTabs extends LitElement {
@@ -13,36 +14,88 @@ export class WuiTabs extends LitElement {
 
   @property() public onTabChange: (index: number) => void = () => null
 
+  @property({ type: Array }) public buttons: HTMLButtonElement[] = []
+
   @state() public activeTab = 0
 
+  @state() public localTabWidth = '100px'
+
+  @state() public isDense = false
+
   // -- Render -------------------------------------------- //
   public override render() {
-    const isDense = this.tabs.length > 3
+    this.isDense = this.tabs.length > 3
 
     this.style.cssText = `
       --local-tab: ${this.activeTab};
-      --local-tab-width: ${isDense ? '80px' : '100px'}
+      --local-tab-width: ${this.localTabWidth};
     `
 
+    this.dataset['type'] = this.isDense ? 'flex' : 'block'
+
     return this.tabs.map((tab, index) => {
       const isActive = index === this.activeTab
 
       return html`
         <button @click=${() => this.onTabClick(index)} data-active=${isActive}>
           <wui-icon size="sm" color="inherit" name=${tab.icon}></wui-icon>
-          <wui-text variant=${isDense ? 'tiny-600' : 'small-600'} color="inherit">
-            ${tab.label}
-          </wui-text>
+          <wui-text variant="small-600" color="inherit">${tab.label}</wui-text>
         </button>
       `
     })
   }
 
+  override firstUpdated() {
+    if (this.shadowRoot && this.isDense) {
+      this.buttons = [...this.shadowRoot.querySelectorAll('button')]
+      setTimeout(() => {
+        this.animateTabs(0, true)
+      }, 0.1)
+    }
+  }
+
   // -- Private ------------------------------------------- //
   private onTabClick(index: number) {
+    if (this.buttons) {
+      this.animateTabs(index, false)
+    }
     this.activeTab = index
     this.onTabChange(index)
   }
+
+  private animateTabs(index: number, initialAnimation: boolean) {
+    const passiveBtn = this.buttons[this.activeTab]
+    const activeBtn = this.buttons[index]
+
+    const passiveBtnText = passiveBtn?.querySelector('wui-text')
+    const activeBtnText = activeBtn?.querySelector('wui-text')
+
+    const activeBtnBounds = activeBtn?.getBoundingClientRect()
+    const activeBtnTextBounds = activeBtnText?.getBoundingClientRect()
+
+    if (passiveBtn && passiveBtnText && !initialAnimation) {
+      animate(passiveBtnText, { opacity: 0 }, { duration: 0.25 })
+      animate(passiveBtn, { width: `20px` }, { duration: 0.25, delay: 0.05 })
+    }
+
+    if (activeBtn && activeBtnBounds && activeBtnTextBounds && activeBtnText) {
+      this.localTabWidth = `${Math.round(
+        activeBtnBounds.width + activeBtnTextBounds.width + 6 + 12
+      )}px`
+
+      animate(
+        activeBtn,
+        { width: `${activeBtnBounds.width + activeBtnTextBounds.width + 6}px` },
+        { duration: initialAnimation ? 0 : 0.5, delay: initialAnimation ? 0 : 0.1 }
+      )
+
+      animate(
+        activeBtnText,
+        { opacity: 1 },
+        { duration: initialAnimation ? 0 : 0.25, delay: initialAnimation ? 0 : 0.15 }
+      )
+    }
+  }
 }
 
 declare global {

packages/ui/src/composites/wui-tabs/styles.ts

@@ -27,6 +27,22 @@ export default css`
     transition: transform var(--wui-ease-out-power-2) var(--wui-duration-lg);
   }
 
+  :host([data-type='flex'])::before {
+    transform: translateX(calc(var(--local-tab) * var(--local-tab-width) / 1.85));
+  }
+
+  :host([data-type='flex']) {
+    display: flex;
+    padding: 0px 12px;
+    gap: 28px;
+  }
+
+  :host([data-type='flex']) > button > wui-text {
+    position: absolute;
+    left: 18px;
+    opacity: 0;
+  }
+
   button[data-active='true'] > wui-icon,
   button[data-active='true'] > wui-text {
     color: var(--wui-color-fg-100);
@@ -39,13 +55,21 @@ export default css`
 
   button > wui-icon,
   button > wui-text {
+    pointer-events: none;
     transition: all var(--wui-ease-out-power-2) var(--wui-duration-lg);
   }
 
   button {
     width: var(--local-tab-width);
   }
 
+  :host([data-type='flex']) > button {
+    width: 20px;
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+  }
+
   button:hover:enabled,
   button:active:enabled {
     background-color: transparent !important;