docs: migrate to alpine

docs/src/components/component-preview/ComponentPreview.astro

@@ -53,12 +53,20 @@ const components = await Promise.all(
   <Tabs class="relative mr-auto w-full">
     <div class="flex items-center justify-between pb-3">
       <TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
-        <TabsTrigger value="Preview">Preview</TabsTrigger>
-        <TabsTrigger value="Code">Code</TabsTrigger>
+        <TabsTrigger
+          class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+        >
+          Preview
+        </TabsTrigger>
+        <TabsTrigger
+          class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+        >
+          Code
+        </TabsTrigger>
       </TabsList>
     </div>
 
-    <TabsContent value="Preview" class="relative rounded-md border">
+    <TabsContent class="relative rounded-md border">
       <div class="flex items-center justify-between p-4">
         <StyleSwitcher />
       </div>
@@ -90,7 +98,7 @@ const components = await Promise.all(
       </div>
     </TabsContent>
 
-    <TabsContent value="Code">
+    <TabsContent>
       <div class="flex flex-col space-y-4">
         <div class="w-full rounded-md [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
           <ComponentSource>

docs/src/components/mdx/Tabs.astro

@@ -0,0 +1,10 @@
+---
+import { cn } from '@/lib/utils'
+import { Tabs as TabsComponent } from '../tabs'
+
+const { class: className, ...rest } = Astro.props
+---
+
+<TabsComponent class={cn('relative mt-6 w-full', className)} {...rest}>
+  <slot />
+</TabsComponent>

docs/src/components/mdx/TabsContent.astro

@@ -0,0 +1,13 @@
+---
+import { cn } from '@/lib/utils'
+import { TabsContent as TabsComponent } from '../tabs'
+
+const { class: className, ...rest } = Astro.props
+---
+
+<TabsComponent
+  class={cn('relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold', className)}
+  {...rest}
+>
+  <slot />
+</TabsComponent>

docs/src/components/mdx/TabsList.astro

@@ -0,0 +1,10 @@
+---
+import { cn } from '@/lib/utils'
+import { TabsList as TabsComponent } from '../tabs'
+
+const { class: className, ...rest } = Astro.props
+---
+
+<TabsComponent class={cn('w-full justify-start rounded-none border-b bg-transparent p-0', className)} {...rest}>
+  <slot />
+</TabsComponent>

docs/src/components/mdx/TabsTrigger.astro

@@ -0,0 +1,16 @@
+---
+import { cn } from '@/lib/utils'
+import { TabsTrigger as TabsComponent } from '../tabs'
+
+const { class: className, ...rest } = Astro.props
+---
+
+<TabsComponent
+  class={cn(
+    'relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none',
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</TabsComponent>

docs/src/components/mdx/index.ts

@@ -1,6 +1,5 @@
 import ComponentPreview from '../component-preview/ComponentPreview.astro'
 import ComponentSource from '../component-preview/ComponentSource.astro'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../tabs'
 import a from './a.astro'
 import blockquote from './blockquote.astro'
 import Callout from './Callout.astro'
@@ -20,6 +19,10 @@ import p from './p.astro'
 import pre from './pre.astro'
 import Step from './Step.astro'
 import Steps from './Steps.astro'
+import Tabs from './Tabs.astro'
+import TabsContent from './TabsContent.astro'
+import TabsList from './TabsList.astro'
+import TabsTrigger from './TabsTrigger.astro'
 import ul from './ul.astro'
 
 export const components = {

docs/src/components/tabs/Tabs.astro

@@ -2,91 +2,25 @@
 import { cn } from '@/lib/utils'
 
 export interface Props {
-  defaultValue?: string
   class?: string
 }
-const { defaultValue } = Astro.props
 ---
 
-<ub-tabs {defaultValue}>
-  <div class={cn('relative mt-6 w-full', Astro.props.class)}>
-    <slot />
-  </div>
-</ub-tabs>
-
-<script>
-  class UbTabs extends HTMLElement {
-    defaultValue!: string | null
-    triggers!: NodeListOf<HTMLElement>
-    contents!: NodeListOf<HTMLElement>
-    activeTab!: string
-
-    constructor() {
-      super()
-      this.attachShadow({ mode: 'open' })
-      this.shadowRoot!.innerHTML = `<slot></slot>`
-    }
-
-    connectedCallback(): void {
-      this.defaultValue = this.getAttribute('defaultValue')
-      this.triggers = this.querySelectorAll('ub-tabs-trigger')
-      this.contents = this.querySelectorAll('ub-tabs-content')
-      this.activeTab = this.defaultValue || this.triggers[0].getAttribute('value')!
-      this.updateTabs()
-      this.triggers.forEach((trigger) => {
-        trigger.addEventListener('click', () => {
-          this.activeTab = trigger.getAttribute('value')!
-          this.updateTabs()
-        })
-      })
+<div
+  class={cn(Astro.props.class)}
+  x-data="{
+    tabSelected: 1,
+    tabId: $id('tabs'),
+    tabButtonClicked(tabButton){
+      this.tabSelected = tabButton.id.replace(this.tabId + '-', '');
+    },
+    tabButtonActive(tabButton) {
+      return this.tabSelected == tabButton.id.replace(this.tabId + '-', '');
+    },
+    tabContentActive(tabContent){
+      return this.tabSelected == tabContent.id.replace(this.tabId + '-content-', '');
     }
-
-    updateTabs(): void {
-      this.triggers.forEach((trigger) => {
-        if (trigger.getAttribute('value') === this.activeTab) {
-          trigger.setAttribute('data-state', 'active')
-          return
-        }
-        trigger.removeAttribute('data-state')
-      })
-      this.contents.forEach((content) => {
-        if (content.getAttribute('value') === this.activeTab) {
-          content.setAttribute('data-state', 'active')
-          content.style.display = 'block'
-          return
-        }
-        content.removeAttribute('data-state')
-        content.style.display = 'none'
-      })
-    }
-  }
-
-  class UbTabsList extends HTMLElement {
-    constructor() {
-      super()
-      this.attachShadow({ mode: 'open' })
-      this.shadowRoot!.innerHTML = `<slot></slot>`
-    }
-  }
-
-  class UbTabsTrigger extends HTMLElement {
-    constructor() {
-      super()
-      this.attachShadow({ mode: 'open' })
-      this.shadowRoot!.innerHTML = `<slot></slot>`
-    }
-  }
-
-  class UbTabsContent extends HTMLElement {
-    constructor() {
-      super()
-      this.attachShadow({ mode: 'open' })
-      this.shadowRoot!.innerHTML = `<slot></slot>`
-    }
-  }
-
-  customElements.define('ub-tabs', UbTabs)
-  customElements.define('ub-tabs-list', UbTabsList)
-  customElements.define('ub-tabs-trigger', UbTabsTrigger)
-  customElements.define('ub-tabs-content', UbTabsContent)
-</script>
+  }"
+>
+  <slot />
+</div>

docs/src/components/tabs/TabsContent.astro

@@ -2,20 +2,17 @@
 import { cn } from '@/lib/utils'
 
 export interface Props {
-  value: string
   class?: string
 }
-
-const { value } = Astro.props
 ---
 
-<ub-tabs-content
-  {value}
+<div
+  :id="$id(tabId + '-content')"
+  x-show="tabContentActive($el)"
   class={cn(
     'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-    'relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold',
     Astro.props.class,
   )}
 >
   <slot />
-</ub-tabs-content>
+</div>

docs/src/components/tabs/TabsList.astro

@@ -1,11 +1,15 @@
 ---
 import { cn } from '@/lib/utils'
+
+export interface Props {
+  class?: string
+}
 ---
 
 <div
+  x-ref="tabButtons"
   class={cn(
     'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
-    'w-full justify-start rounded-none border-b bg-transparent p-0',
     Astro.props.class,
   )}
 >

docs/src/components/tabs/TabsTrigger.astro

@@ -2,19 +2,18 @@
 import { cn } from '@/lib/utils'
 
 export interface Props {
-  value: string
   class?: string
 }
-const { value } = Astro.props
 ---
 
-<ub-tabs-trigger
-  {value}
+<button
+  :id="$id(tabId)"
+  @click="tabButtonClicked($el);"
+  :data-state="tabButtonActive($el) ? 'active' : 'inactive'"
   class={cn(
     'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
-    'relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none cursor-pointer',
     Astro.props.class,
   )}
 >
   <slot />
-</ub-tabs-trigger>
+</button>

docs/src/content/docs/components/accordion.mdx

@@ -7,6 +7,7 @@ links:
 
 <ComponentPreview
   name="accordion-demo"
+  class="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
 />
 
 ## Installation