@apex-stack/core 0.2.2 → 0.3.1

package/components/Accordion.alpine

@@ -0,0 +1,22 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template x-data="{ isExpanded: false }">
+  <div class="w-full overflow-hidden rounded-radius border border-outline bg-surface-alt/40 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark">
+    <button id="accordionControl" type="button"
+      class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
+      aria-controls="accordionPanel" x-on:click="isExpanded = ! isExpanded"
+      x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
+      x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
+      <slot name="title">Accordion title</slot>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
+        stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
+        x-bind:class="isExpanded ? 'rotate-180' : ''">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+      </svg>
+    </button>
+    <div x-cloak x-show="isExpanded" id="accordionPanel" role="region" aria-labelledby="accordionControl" x-collapse>
+      <div class="p-4 text-sm sm:text-base text-pretty">
+        <slot>Accordion panel content</slot>
+      </div>
+    </div>
+  </div>
+</template>

package/components/Alert.alpine

@@ -0,0 +1,27 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template x-data="{ alertIsVisible: true }">
+    <div x-show="alertIsVisible"
+        class="relative w-full overflow-hidden rounded-radius border border-info bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
+        role="alert" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100"
+        x-transition:leave-end="opacity-0 scale-90">
+        <div class="flex w-full items-center gap-2 bg-info/10 p-4">
+            <div class="bg-info/15 text-info rounded-full p-1" aria-hidden="true">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
+                    aria-hidden="true">
+                    <path fill-rule="evenodd"
+                        d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
+                        clip-rule="evenodd" />
+                </svg>
+            </div>
+            <div class="ml-2 text-xs font-medium sm:text-sm">
+                <slot></slot>
+            </div>
+            <button type="button" @click="alertIsVisible = false" class="ml-auto" aria-label="dismiss alert">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor"
+                    fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        </div>
+    </div>
+</template>

package/components/Avatar.alpine

@@ -0,0 +1,4 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template>
+    <span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-outline bg-surface-alt text-2xl font-bold tracking-wider text-on-surface/80 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark/80"><slot>JS</slot></span>
+</template>

package/components/Badge.alpine

@@ -0,0 +1,6 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template x-data>
+  <span class="inline-flex items-center gap-1 rounded-radius border border-outline bg-surface-alt px-2 py-0.5 text-xs font-medium text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
+    <slot>Badge</slot>
+  </span>
+</template>

package/components/Banner.alpine

@@ -0,0 +1,11 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template x-data="{ bannerIsVisible: true }">
+    <div x-show="bannerIsVisible" class="relative flex border-outline bg-surface-alt p-4 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark border-b">
+        <p class="px-6 text-xs sm:text-sm text-pretty mx-auto"><slot></slot></p>
+        <button type="button" @click="bannerIsVisible = false" class="absolute top-1/2 -translate-y-1/2 right-4" aria-label="dismiss banner">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="size-4 shrink-0">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+            </svg>
+        </button>
+    </div>
+</template>

package/components/Breadcrumbs.alpine

@@ -0,0 +1,20 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template>
+    <nav class="text-sm font-medium text-on-surface dark:text-on-surface-dark" aria-label="breadcrumb">
+        <ol class="flex flex-wrap items-center gap-1">
+            <li class="flex items-center gap-1">
+                <a href="#" class="hover:text-on-surface-strong dark:hover:text-on-surface-dark-strong">Home</a>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" stroke-width="2" stroke="currentColor" class="size-4">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                </svg>
+            </li>
+            <li class="flex items-center gap-1">
+                <a href="#" class="hover:text-on-surface-strong dark:hover:text-on-surface-dark-strong">Components</a>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" stroke-width="2" stroke="currentColor" class="size-4">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                </svg>
+            </li>
+            <li class="flex items-center text-on-surface-strong gap-1 font-bold dark:text-on-surface-dark-strong" aria-current="page">Breadcrumb</li>
+        </ol>
+    </nav>
+</template>

package/components/Button.alpine

@@ -0,0 +1,10 @@
+<!-- Apex component adapted from Penguin UI (MIT). Styles via theme tokens
+     (bg-primary / rounded-radius / …) — needs Tailwind + @apex-stack/theme. -->
+<template x-data>
+  <button
+    type="button"
+    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-radius bg-primary border border-primary px-4 py-2 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-primary-dark dark:border-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark"
+  >
+    <slot>Button</slot>
+  </button>
+</template>

package/components/Card.alpine

@@ -0,0 +1,6 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template>
+  <div class="flex flex-col gap-4 rounded-radius border border-outline bg-surface-alt p-6 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
+    <slot></slot>
+  </div>
+</template>

package/components/Checkbox.alpine

@@ -0,0 +1,12 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template>
+  <label for="checkboxDefault" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:cursor-not-allowed has-disabled:opacity-75">
+    <span class="relative flex items-center">
+      <input id="checkboxDefault" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" />
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+      </svg>
+    </span>
+    <span><slot>Notifications</slot></span>
+  </label>
+</template>

package/components/Dropdown.alpine

@@ -0,0 +1,18 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template x-data="{ isOpen: false, openedWithKeyboard: false }">
+  <div class="relative w-fit" x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false">
+    <button type="button" x-on:click="isOpen = ! isOpen" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius border border-outline bg-surface-alt px-4 py-2 text-sm font-medium tracking-wide transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-outline-strong dark:border-outline-dark dark:bg-surface-dark-alt dark:focus-visible:outline-outline-dark-strong" aria-haspopup="true" x-on:keydown.space.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.down.prevent="openedWithKeyboard = true" x-bind:class="isOpen || openedWithKeyboard ? 'text-on-surface-strong dark:text-on-surface-dark-strong' : 'text-on-surface dark:text-on-surface-dark'" x-bind:aria-expanded="isOpen || openedWithKeyboard">
+      Actions Menu
+      <svg aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4 rotate-0">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
+      </svg>
+    </button>
+    <div x-cloak x-show="isOpen || openedWithKeyboard" x-transition x-trap="openedWithKeyboard" x-on:click.outside="isOpen = false, openedWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" class="absolute top-11 left-0 flex w-fit min-w-48 flex-col overflow-hidden rounded-radius border border-outline bg-surface-alt dark:border-outline-dark dark:bg-surface-dark-alt" role="menu">
+      <slot>
+        <a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Dashboard</a>
+        <a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Settings</a>
+        <a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Sign Out</a>
+      </slot>
+    </div>
+  </div>
+</template>

package/components/Kbd.alpine

@@ -0,0 +1,4 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template>
+    <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark"><slot>Ctrl</slot></kbd>
+</template>

package/components/Link.alpine

@@ -0,0 +1,4 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template>
+    <a href="#" class="font-medium text-primary underline-offset-2 hover:underline focus:underline focus:outline-hidden dark:text-primary-dark"><slot>Read if bored</slot></a>
+</template>

package/components/Modal.alpine

@@ -0,0 +1,25 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template x-data="{ modalIsOpen: false }">
+  <div>
+    <button x-on:click="modalIsOpen = true" type="button" class="whitespace-nowrap rounded-radius border border-primary dark:border-primary-dark bg-primary px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">Open Modal</button>
+    <div x-cloak x-show="modalIsOpen" x-transition.opacity.duration.200ms x-trap.inert.noscroll="modalIsOpen" x-on:keydown.esc.window="modalIsOpen = false" x-on:click.self="modalIsOpen = false" class="fixed inset-0 z-30 flex items-end justify-center bg-black/20 p-4 pb-8 backdrop-blur-md sm:items-center lg:p-8" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
+      <div x-show="modalIsOpen" x-transition:enter="transition ease-out duration-200 delay-100 motion-reduce:transition-opacity" x-transition:enter-start="opacity-0 scale-50" x-transition:enter-end="opacity-100 scale-100" class="flex max-w-lg flex-col gap-4 overflow-hidden rounded-radius border border-outline bg-surface text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
+        <div class="flex items-center justify-between border-b border-outline bg-surface-alt/60 p-4 dark:border-outline-dark dark:bg-surface-dark/20">
+          <h3 id="modalTitle" class="font-semibold tracking-wide text-on-surface-strong dark:text-on-surface-dark-strong"><slot name="title">Modal Title</slot></h3>
+          <button x-on:click="modalIsOpen = false" aria-label="close modal">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="1.4" class="w-5 h-5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+            </svg>
+          </button>
+        </div>
+        <div class="px-4 py-8">
+          <slot>Modal body content.</slot>
+        </div>
+        <div class="flex flex-col-reverse justify-between gap-2 border-t border-outline bg-surface-alt/60 p-4 dark:border-outline-dark dark:bg-surface-dark/20 sm:flex-row sm:items-center md:justify-end">
+          <button x-on:click="modalIsOpen = false" type="button" class="whitespace-nowrap rounded-radius px-4 py-2 text-center text-sm font-medium tracking-wide text-on-surface transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark">Cancel</button>
+          <button x-on:click="modalIsOpen = false" type="button" class="whitespace-nowrap rounded-radius bg-primary border border-primary dark:border-primary-dark px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">Confirm</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/Progress.alpine

@@ -0,0 +1,6 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template x-data="{ currentVal: 20 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }">
+    <div class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+        <div class="h-full rounded-radius bg-primary dark:bg-primary-dark" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
+    </div>
+</template>

package/components/Radio.alpine

@@ -0,0 +1,7 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template>
+  <div class="flex items-center justify-start gap-2 font-medium text-on-surface has-disabled:opacity-75 dark:text-on-surface-dark">
+    <input id="radioDefault" type="radio" class="before:content[''] relative h-4 w-4 appearance-none rounded-full border border-outline bg-surface-alt before:invisible before:absolute before:left-1/2 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-on-primary checked:border-primary checked:bg-primary checked:before:visible focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:before:bg-on-primary-dark dark:checked:border-primary-dark dark:checked:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" name="radioDefault" value="" />
+    <label for="radioDefault" class="text-sm"><slot>Option</slot></label>
+  </div>
+</template>

package/components/Select.alpine

@@ -0,0 +1,15 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template>
+  <div class="relative flex w-full max-w-xs flex-col gap-1 text-on-surface dark:text-on-surface-dark">
+    <label for="os" class="w-fit pl-0.5 text-sm"><slot>Operating System</slot></label>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="absolute pointer-events-none right-4 top-8 size-5">
+      <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+    </svg>
+    <select id="os" name="os" class="w-full appearance-none rounded-radius border border-outline bg-surface-alt px-4 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:focus-visible:outline-primary-dark">
+      <option selected>Please Select</option>
+      <option value="mac">Mac</option>
+      <option value="windows">Windows</option>
+      <option value="linux">Linux</option>
+    </select>
+  </div>
+</template>

package/components/Skeleton.alpine

@@ -0,0 +1,10 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template>
+    <div class="flex w-full flex-col gap-2">
+        <div class="h-3.5 w-full animate-pulse rounded-radius bg-on-surface/30 dark:bg-on-surface-dark/30" aria-hidden="true"></div>
+        <div class="h-3.5 w-full animate-pulse rounded-radius bg-on-surface/30 dark:bg-on-surface-dark/30" aria-hidden="true"></div>
+        <div class="h-3.5 w-full animate-pulse rounded-radius bg-on-surface/30 dark:bg-on-surface-dark/30" aria-hidden="true"></div>
+        <div class="h-3.5 w-1/2 animate-pulse rounded-radius bg-on-surface/30 dark:bg-on-surface-dark/30" aria-hidden="true"></div>
+        <span class="sr-only">loading</span>
+    </div>
+</template>

package/components/Spinner.alpine

@@ -0,0 +1,7 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="size-5 fill-on-surface motion-safe:animate-spin dark:fill-on-surface-dark">
+        <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
+        <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
+    </svg>
+</template>

package/components/Tabs.alpine

@@ -0,0 +1,17 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template x-data="{ selectedTab: 'groups' }">
+  <div class="w-full">
+    <div x-on:keydown.right.prevent="$focus.wrap().next()" x-on:keydown.left.prevent="$focus.wrap().previous()" class="flex gap-2 overflow-x-auto border-b border-outline dark:border-outline-dark" role="tablist" aria-label="tab options">
+      <button x-on:click="selectedTab = 'groups'" x-bind:aria-selected="selectedTab === 'groups'" x-bind:tabindex="selectedTab === 'groups' ? '0' : '-1'" x-bind:class="selectedTab === 'groups' ? 'font-bold text-primary border-b-2 border-primary dark:border-primary-dark dark:text-primary-dark' : 'text-on-surface font-medium dark:text-on-surface-dark dark:hover:border-b-outline-dark-strong dark:hover:text-on-surface-dark-strong hover:border-b-2 hover:border-b-outline-strong hover:text-on-surface-strong'" class="h-min px-4 py-2 text-sm" type="button" role="tab" aria-controls="tabpanelGroups">Groups</button>
+      <button x-on:click="selectedTab = 'likes'" x-bind:aria-selected="selectedTab === 'likes'" x-bind:tabindex="selectedTab === 'likes' ? '0' : '-1'" x-bind:class="selectedTab === 'likes' ? 'font-bold text-primary border-b-2 border-primary dark:border-primary-dark dark:text-primary-dark' : 'text-on-surface font-medium dark:text-on-surface-dark dark:hover:border-b-outline-dark-strong dark:hover:text-on-surface-dark-strong hover:border-b-2 hover:border-b-outline-strong hover:text-on-surface-strong'" class="h-min px-4 py-2 text-sm" type="button" role="tab" aria-controls="tabpanelLikes">Likes</button>
+      <button x-on:click="selectedTab = 'comments'" x-bind:aria-selected="selectedTab === 'comments'" x-bind:tabindex="selectedTab === 'comments' ? '0' : '-1'" x-bind:class="selectedTab === 'comments' ? 'font-bold text-primary border-b-2 border-primary dark:border-primary-dark dark:text-primary-dark' : 'text-on-surface font-medium dark:text-on-surface-dark dark:hover:border-b-outline-dark-strong dark:hover:text-on-surface-dark-strong hover:border-b-2 hover:border-b-outline-strong hover:text-on-surface-strong'" class="h-min px-4 py-2 text-sm" type="button" role="tab" aria-controls="tabpanelComments">Comments</button>
+      <button x-on:click="selectedTab = 'saved'" x-bind:aria-selected="selectedTab === 'saved'" x-bind:tabindex="selectedTab === 'saved' ? '0' : '-1'" x-bind:class="selectedTab === 'saved' ? 'font-bold text-primary border-b-2 border-primary dark:border-primary-dark dark:text-primary-dark' : 'text-on-surface font-medium dark:text-on-surface-dark dark:hover:border-b-outline-dark-strong dark:hover:text-on-surface-dark-strong hover:border-b-2 hover:border-b-outline-strong hover:text-on-surface-strong'" class="h-min px-4 py-2 text-sm" type="button" role="tab" aria-controls="tabpanelSaved">Saved</button>
+    </div>
+    <div class="px-2 py-4 text-on-surface dark:text-on-surface-dark">
+      <div x-cloak x-show="selectedTab === 'groups'" id="tabpanelGroups" role="tabpanel" aria-label="groups"><slot name="groups">Groups tab content</slot></div>
+      <div x-cloak x-show="selectedTab === 'likes'" id="tabpanelLikes" role="tabpanel" aria-label="likes"><slot name="likes">Likes tab content</slot></div>
+      <div x-cloak x-show="selectedTab === 'comments'" id="tabpanelComments" role="tabpanel" aria-label="comments"><slot name="comments">Comments tab content</slot></div>
+      <div x-cloak x-show="selectedTab === 'saved'" id="tabpanelSaved" role="tabpanel" aria-label="saved"><slot name="saved">Saved tab content</slot></div>
+    </div>
+  </div>
+</template>

package/components/TextInput.alpine

@@ -0,0 +1,7 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template>
+  <div class="flex w-full max-w-xs flex-col gap-1 text-on-surface dark:text-on-surface-dark">
+    <label for="textInputDefault" class="w-fit pl-0.5 text-sm"><slot>Name</slot></label>
+    <input id="textInputDefault" type="text" class="w-full rounded-radius border border-outline bg-surface-alt px-2 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:focus-visible:outline-primary-dark" name="name" placeholder="Enter your name" autocomplete="name" />
+  </div>
+</template>

package/components/Textarea.alpine

@@ -0,0 +1,7 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template>
+  <div class="flex w-full max-w-md flex-col gap-1 text-on-surface dark:text-on-surface-dark">
+    <label for="textArea" class="w-fit pl-0.5 text-sm"><slot>Comment</slot></label>
+    <textarea id="textArea" class="w-full rounded-radius border border-outline bg-surface-alt px-2.5 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:focus-visible:outline-primary-dark" rows="3" placeholder="We'd love to hear from you..."></textarea>
+  </div>
+</template>

package/components/Toggle.alpine

@@ -0,0 +1,8 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template x-data="{ on: true }">
+    <label for="apexToggle" class="inline-flex items-center gap-3">
+        <input id="apexToggle" type="checkbox" class="peer sr-only" role="switch" x-model="on" />
+        <span class="trancking-wide text-sm font-medium text-on-surface peer-checked:text-on-surface-strong peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-on-surface-dark dark:peer-checked:text-on-surface-dark-strong"><slot>Toggle</slot></span>
+        <div class="relative h-6 w-11 after:h-5 after:w-5 peer-checked:after:translate-x-5 rounded-full border border-outline bg-surface-alt after:absolute after:bottom-0 after:left-[0.0625rem] after:top-0 after:my-auto after:rounded-full after:bg-on-surface after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:bg-on-primary peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-outline-strong peer-focus:peer-checked:outline-primary peer-active:outline-offset-0 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:border-outline-dark dark:bg-surface-dark-alt dark:after:bg-on-surface-dark dark:peer-checked:bg-primary-dark dark:peer-checked:after:bg-on-primary-dark dark:peer-focus:outline-outline-dark-strong dark:peer-focus:peer-checked:outline-primary-dark" aria-hidden="true"></div>
+    </label>
+</template>

package/components/Tooltip.alpine

@@ -0,0 +1,7 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template x-data>
+  <div class="relative w-fit">
+    <button type="button" class="peer rounded-radius bg-surface-alt border border-surface-alt px-4 py-2 font-medium tracking-wide text-on-surface focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:bg-surface-dark-alt dark:border-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" aria-describedby="tooltipContent">Hover Me</button>
+    <div id="tooltipContent" class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 whitespace-nowrap rounded-sm bg-surface-dark px-2 py-1 text-center text-sm text-on-surface-dark-strong opacity-0 transition-all ease-out peer-hover:opacity-100 peer-focus:opacity-100 dark:bg-surface dark:text-on-surface-strong" role="tooltip"><slot>Tooltip top</slot></div>
+  </div>
+</template>

package/components/registry.json

@@ -0,0 +1,113 @@
+{
+  "button": {
+    "name": "Button",
+    "file": "Button.alpine",
+    "description": "Primary button; edit classes for secondary/outline/ghost."
+  },
+  "card": {
+    "name": "Card",
+    "file": "Card.alpine",
+    "description": "A surface container that inherits the theme."
+  },
+  "badge": { "name": "Badge", "file": "Badge.alpine", "description": "A small status/label pill." },
+  "alert": {
+    "name": "Alert",
+    "file": "Alert.alpine",
+    "description": "Dismissible info alert with icon, message slot, and close button."
+  },
+  "avatar": {
+    "name": "Avatar",
+    "file": "Avatar.alpine",
+    "description": "Circular initials avatar; content via slot."
+  },
+  "banner": {
+    "name": "Banner",
+    "file": "Banner.alpine",
+    "description": "Full-width dismissible top banner with a text slot."
+  },
+  "breadcrumbs": {
+    "name": "Breadcrumbs",
+    "file": "Breadcrumbs.alpine",
+    "description": "Chevron-separated breadcrumb navigation."
+  },
+  "kbd": {
+    "name": "Kbd",
+    "file": "Kbd.alpine",
+    "description": "Keyboard key indicator; key label via slot."
+  },
+  "checkbox": {
+    "name": "Checkbox",
+    "file": "Checkbox.alpine",
+    "description": "Checkbox with label and animated check."
+  },
+  "radio": {
+    "name": "Radio",
+    "file": "Radio.alpine",
+    "description": "Radio button with slotted label."
+  },
+  "select": {
+    "name": "Select",
+    "file": "Select.alpine",
+    "description": "Native select with floating label + chevron."
+  },
+  "text-input": {
+    "name": "TextInput",
+    "file": "TextInput.alpine",
+    "description": "Labeled text input with focus/disabled states."
+  },
+  "textarea": {
+    "name": "Textarea",
+    "file": "Textarea.alpine",
+    "description": "Labeled textarea with focus/disabled states."
+  },
+  "toggle": {
+    "name": "Toggle",
+    "file": "Toggle.alpine",
+    "description": "Accessible on/off switch with animated knob."
+  },
+  "spinner": {
+    "name": "Spinner",
+    "file": "Spinner.alpine",
+    "description": "SVG loading spinner (motion-safe)."
+  },
+  "progress": {
+    "name": "Progress",
+    "file": "Progress.alpine",
+    "description": "Progress bar with ARIA value bindings."
+  },
+  "skeleton": {
+    "name": "Skeleton",
+    "file": "Skeleton.alpine",
+    "description": "Pulsing placeholder skeleton loader."
+  },
+  "link": {
+    "name": "Link",
+    "file": "Link.alpine",
+    "description": "Styled inline anchor with slotted label."
+  },
+  "tooltip": {
+    "name": "Tooltip",
+    "file": "Tooltip.alpine",
+    "description": "Hover/focus tooltip; content via slot."
+  },
+  "tabs": {
+    "name": "Tabs",
+    "file": "Tabs.alpine",
+    "description": "Tablist with arrow-key focus + panel slots."
+  },
+  "accordion": {
+    "name": "Accordion",
+    "file": "Accordion.alpine",
+    "description": "Collapsible item with title + body slots."
+  },
+  "modal": {
+    "name": "Modal",
+    "file": "Modal.alpine",
+    "description": "Dialog with focus-trap, esc/click-outside close."
+  },
+  "dropdown": {
+    "name": "Dropdown",
+    "file": "Dropdown.alpine",
+    "description": "Menu with keyboard nav + click-outside close."
+  }
+}

package/dist/add-2SBHPLEH.js

@@ -0,0 +1,81 @@
+import {
+  banner,
+  color
+} from "./chunk-QIXJSQLW.js";
+
+// src/commands/add.ts
+import { cpSync, existsSync, mkdirSync, readFileSync } from "fs";
+import { dirname, join, resolve } from "path";
+import { fileURLToPath } from "url";
+import { defineCommand } from "citty";
+var REGISTRY_DIR = fileURLToPath(new URL("../components", import.meta.url));
+function loadRegistry() {
+  const p = join(REGISTRY_DIR, "registry.json");
+  if (!existsSync(p)) return {};
+  try {
+    return JSON.parse(readFileSync(p, "utf8"));
+  } catch {
+    return {};
+  }
+}
+var addCommand = defineCommand({
+  meta: {
+    name: "add",
+    description: "Add a themeable component into your project (copies the .alpine source)"
+  },
+  args: {
+    name: { type: "positional", required: false, description: "Component to add (e.g. button)" },
+    root: { type: "string", description: "Project root", default: "." },
+    force: { type: "boolean", default: false, description: "Overwrite an existing component file" }
+  },
+  run({ args }) {
+    const registry = loadRegistry();
+    const log = console.log;
+    process.stdout.write(banner());
+    const keys = Object.keys(registry);
+    if (!keys.length) {
+      console.error(`  ${color.red("\u2717")} No component registry bundled in this build.
+`);
+      process.exit(1);
+    }
+    const name = args.name ? String(args.name).toLowerCase() : "";
+    if (!name) {
+      log(`  ${color.bold("Available components")}  ${color.gray("\u2014 apex add <name>")}
+`);
+      for (const k of keys) {
+        log(`    ${color.cyan(k.padEnd(12))} ${color.gray(registry[k]?.description ?? "")}`);
+      }
+      log("");
+      return;
+    }
+    const entry = registry[name];
+    if (!entry) {
+      console.error(
+        `  ${color.red("\u2717")} Unknown component "${name}". Available: ${keys.join(", ")}
+`
+      );
+      process.exit(1);
+    }
+    const root = resolve(process.cwd(), String(args.root));
+    const dest = join(root, "components", `${entry.name}.alpine`);
+    if (existsSync(dest) && !args.force) {
+      log(
+        `  ${color.gray("\u2022")} ${entry.name} already exists at components/${entry.name}.alpine ${color.gray("(use --force to overwrite)")}
+`
+      );
+      return;
+    }
+    mkdirSync(dirname(dest), { recursive: true });
+    cpSync(join(REGISTRY_DIR, entry.file), dest);
+    log(`  ${color.green("+")} Added ${color.bold(`components/${entry.name}.alpine`)}`);
+    log(`
+  Use it:  ${color.cyan(`<${entry.name} />`)}  ${color.gray("in any page/component.")}`);
+    log(
+      `  ${color.gray("It inherits your theme via --ax-* tokens (see")} ${color.cyan("@apex-stack/theme")}${color.gray(").")}
+`
+    );
+  }
+});
+export {
+  addCommand
+};

package/dist/cli.js

@@ -133,6 +133,7 @@ var COMMANDS = [
   ["build", "Build for production (static, islands, or server)"],
   ["start", "Run a production server build"],
   ["make", "Generate a page, component, route, store, middleware\u2026"],
+  ["add", "Add a themeable component (button, card, badge\u2026)"],
   ["upgrade", "Adopt new scaffold defaults (non-destructive)"],
   ["migrate", "Apply pending database migrations"],
   ["mcp", "Inspect the MCP server \u2014 list or call tools"]
@@ -149,6 +150,7 @@ var main = defineCommand2({
     build: () => import("./build-VHS6KZBK.js").then((m) => m.buildCommand),
     start: () => import("./start-3O3E43PT.js").then((m) => m.startCommand),
     make: () => import("./make-VAYO5GWA.js").then((m) => m.makeCommand),
+    add: () => import("./add-2SBHPLEH.js").then((m) => m.addCommand),
     upgrade: () => import("./upgrade-WC5F5FKY.js").then((m) => m.upgradeCommand),
     migrate: () => import("./migrate-X6LIHMIE.js").then((m) => m.migrateCommand),
     mcp: () => import("./mcp-CH7L4GF3.js").then((m) => m.mcpCommand)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apex-stack/core",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "The full-stack meta-framework for Alpine.js — CLI and runtime",
   "type": "module",
   "license": "MIT",
@@ -38,7 +38,8 @@
   "files": [
     "dist",
     "templates",
-    "vscode"
+    "vscode",
+    "components"
   ],
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",