@stacksjs/components 0.2.3

package/src/ui/drawer/Drawer.stx

@@ -0,0 +1,137 @@
+<script>
+export const open = $props.open ?? false
+export const onClose = $props.onClose || (() => {})
+export const position = $props.position || 'right'
+export const title = $props.title || ''
+export const className = $props.className || ''
+
+// Position classes
+const positionClasses = {
+  right: 'inset-y-0 right-0 pl-10 sm:pl-16',
+  left: 'inset-y-0 left-0 pr-10 sm:pr-16',
+  top: 'inset-x-0 top-0 pb-10',
+  bottom: 'inset-x-0 bottom-0 pt-10',
+}
+
+// Slide animation classes
+const slideClasses = {
+  right: {
+    enter: 'translate-x-full',
+    leave: 'translate-x-0',
+  },
+  left: {
+    enter: '-translate-x-full',
+    leave: 'translate-x-0',
+  },
+  top: {
+    enter: '-translate-y-full',
+    leave: 'translate-y-0',
+  },
+  bottom: {
+    enter: 'translate-y-full',
+    leave: 'translate-y-0',
+  },
+}
+
+// Size classes based on position
+const sizeClasses = {
+  right: 'max-w-md w-screen',
+  left: 'max-w-md w-screen',
+  top: 'max-h-[90vh] w-full',
+  bottom: 'max-h-[90vh] w-full',
+}
+
+// Close button position
+const closeButtonPosition = {
+  right: 'left-0 -ml-8 sm:-ml-10',
+  left: 'right-0 -mr-8 sm:-mr-10',
+  top: 'right-0 -mr-8',
+  bottom: 'right-0 -mr-8',
+}
+
+export const containerClasses = `pointer-events-none fixed ${positionClasses[position]} flex max-w-full`.trim()
+export const panelClasses = `pointer-events-auto relative ${sizeClasses[position]} ${className}`.trim()
+export const slideAnimation = slideClasses[position]
+export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position]} flex pt-4 pr-2 sm:pr-4`.trim()
+</script>
+
+@if(open)
+  <!-- Backdrop -->
+  <div
+    class="fixed inset-0 z-50 bg-gray-500/75 dark:bg-gray-900/75 transition-opacity duration-500"
+    style="animation: fadeIn 0.5s ease-in-out"
+    onclick="handleBackdropClick()"
+  ></div>
+
+  <!-- Drawer Container -->
+  <div class="fixed inset-0 z-50 overflow-hidden">
+    <div class="absolute inset-0 overflow-hidden">
+      <div class="{{ containerClasses }}">
+        <!-- Drawer Panel -->
+        <div
+          class="{{ panelClasses }}"
+          style="animation: slideIn 0.5s ease-in-out"
+        >
+          <!-- Close Button -->
+          <div class="{{ closeButtonClasses }}">
+            <button
+              type="button"
+              class="relative rounded-md text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+              onclick="handleClose()"
+            >
+              <span class="absolute -inset-2.5"></span>
+              <span class="sr-only">Close panel</span>
+              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Drawer Content -->
+          <div class="relative flex h-full flex-col overflow-y-auto bg-white dark:bg-blue-gray-800 py-6 shadow-xl">
+            @if(title)
+              <div class="px-4 sm:px-6">
+                <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                  {{ title }}
+                </h2>
+              </div>
+            @endif
+            <div class="relative mt-6 flex-1 px-4 sm:px-6">
+              <slot />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+@endif
+
+<style>
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideIn {
+  from {
+    transform: {{ position === 'right' ? 'translateX(100%)' : position === 'left' ? 'translateX(-100%)' : position === 'top' ? 'translateY(-100%)' : 'translateY(100%)' }};
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+</style>
+
+<script>
+function handleClose() {
+  if (onClose) {
+    onClose()
+  }
+}
+
+function handleBackdropClick() {
+  if (onClose) {
+    onClose()
+  }
+}
+</script>

package/src/ui/drawer/README.md

@@ -0,0 +1,110 @@
+# Drawer Component
+
+A slide-out panel component that can appear from any side of the screen.
+
+## Installation
+
+```bash
+bun add @stacksjs/components
+```
+
+## Usage
+
+```stx
+<script>
+export let drawerOpen = false
+</script>
+
+<button
+  class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
+  onclick="drawerOpen = true"
+>
+  Open drawer
+</button>
+
+@component('Drawer', {
+  open: drawerOpen,
+  onClose: () => drawerOpen = false,
+  position: 'right',
+  title: 'Panel title'
+})
+  <p class="text-sm text-gray-500 dark:text-gray-400">
+    Your drawer content goes here.
+  </p>
+@endcomponent
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | `false` | Controls drawer visibility |
+| `onClose` | `function` | - | Callback when drawer should close |
+| `position` | `'right' \| 'left' \| 'top' \| 'bottom'` | `'right'` | Position of the drawer |
+| `title` | `string` | `''` | Optional title for the drawer |
+| `className` | `string` | `''` | Additional CSS classes |
+
+## Positions
+
+### Right (default)
+```stx
+@component('Drawer', {
+  open: true,
+  position: 'right'
+})
+  Content
+@endcomponent
+```
+
+### Left
+```stx
+@component('Drawer', {
+  open: true,
+  position: 'left'
+})
+  Content
+@endcomponent
+```
+
+### Top
+```stx
+@component('Drawer', {
+  open: true,
+  position: 'top'
+})
+  Content
+@endcomponent
+```
+
+### Bottom
+```stx
+@component('Drawer', {
+  open: true,
+  position: 'bottom'
+})
+  Content
+@endcomponent
+```
+
+## Features
+
+- **4 positions** - Slide from right, left, top, or bottom
+- **Smooth animations** - CSS transitions for slide and fade effects
+- **Backdrop click** - Closes drawer when clicking outside
+- **Close button** - Positioned appropriately for each direction
+- **Dark mode** - Full dark mode support
+- **Accessible** - Screen reader support and focus management
+- **Responsive** - Mobile-friendly with adjusted spacing
+- **Modern ES modules** - Clean export syntax
+- **Headwind styling** - Utility-first CSS classes
+
+## Accessibility
+
+- Close button includes `sr-only` text for screen readers
+- Backdrop and close button have proper ARIA labels
+- Keyboard accessible (ESC key closes drawer - handled by parent)
+- Focus management for modal behavior
+
+## Customization
+
+The drawer accepts a `className` prop for additional styling and supports slot content for complete customization of the drawer body.

package/src/ui/drawer/index.ts

@@ -0,0 +1,9 @@
+export { default as Drawer } from './Drawer.stx'
+
+export interface DrawerProps {
+  open?: boolean
+  onClose?: () => void
+  position?: 'right' | 'left' | 'top' | 'bottom'
+  title?: string
+  className?: string
+}

package/src/ui/dropdown/Dropdown.stx

@@ -0,0 +1,24 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+export let isOpen = false
+
+export function toggle() {
+  isOpen = !isOpen
+}
+
+export function close() {
+  isOpen = false
+}
+
+export function open() {
+  isOpen = true
+}
+
+const baseClasses = 'relative inline-block text-left'
+const dropdownClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ dropdownClasses }}">
+  <slot :isOpen="isOpen" :toggle="toggle" :close="close" :open="open" />
+</component>

package/src/ui/dropdown/DropdownButton.stx

@@ -0,0 +1,23 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'button'
+export const disabled = $props.disabled || false
+export const onClick = $props.onClick
+
+const baseClasses = 'inline-flex justify-center items-center rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75'
+const buttonClasses = `${baseClasses} ${className}`.trim()
+
+export function handleClick(e) {
+  if (disabled) return
+  onClick?.(e)
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ buttonClasses }}"
+  @if(disabled)disabled aria-disabled="true"@endif
+  @click="handleClick"
+>
+  <slot />
+</component>

package/src/ui/dropdown/DropdownItem.stx

@@ -0,0 +1,43 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+export const disabled = $props.disabled || false
+export const onClick = $props.onClick
+
+export let active = false
+
+const baseClasses = 'group flex w-full items-center px-2 py-2 text-sm transition-colors'
+const stateClasses = active
+  ? 'bg-blue-500 text-white dark:bg-blue-600'
+  : 'text-neutral-900 dark:text-neutral-100'
+const disabledClasses = disabled
+  ? 'opacity-50 cursor-not-allowed'
+  : 'cursor-pointer'
+
+const itemClasses = `${baseClasses} ${stateClasses} ${disabledClasses} ${className}`.trim()
+
+export function handleClick(e) {
+  if (disabled) return
+  onClick?.(e)
+}
+
+export function handleMouseEnter() {
+  if (!disabled) active = true
+}
+
+export function handleMouseLeave() {
+  active = false
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ itemClasses }}"
+  role="menuitem"
+  @if(disabled)aria-disabled="true"@endif
+  @click="handleClick"
+  @mouseenter="handleMouseEnter"
+  @mouseleave="handleMouseLeave"
+>
+  <slot :active="active" :disabled="disabled" />
+</component>

package/src/ui/dropdown/DropdownItems.stx

@@ -0,0 +1,18 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+export const static_ = $props.static || false
+
+const baseClasses = 'absolute z-10 mt-2 origin-top-right divide-y divide-neutral-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-neutral-800 dark:divide-neutral-700 dark:ring-neutral-600'
+const itemsClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ itemsClasses }}"
+  role="menu"
+  aria-orientation="vertical"
+  tabindex="-1"
+>
+  <slot />
+</component>

package/src/ui/dropdown/README.md

@@ -0,0 +1,142 @@
+# Dropdown Component
+
+A flexible dropdown menu component inspired by Headless UI, built with STX and headwind.
+
+## Installation
+
+```bash
+bun add @stacksjs/components
+```
+
+## Usage
+
+```stx
+@component('Dropdown')
+  @component('DropdownButton', { className: 'btn-primary' })
+    Options
+  @endcomponent
+
+  @component('DropdownItems')
+    @component('DropdownItem')
+      Edit
+    @endcomponent
+    @component('DropdownItem')
+      Delete
+    @endcomponent
+  @endcomponent
+@endcomponent
+```
+
+## Props
+
+### Dropdown
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | Additional CSS classes |
+| `as` | `string` | `'div'` | HTML element to render |
+
+### DropdownButton
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | Additional CSS classes |
+| `as` | `string` | `'button'` | HTML element to render |
+| `disabled` | `boolean` | `false` | Disable the button |
+| `onClick` | `(e: Event) => void` | - | Click handler |
+
+### DropdownItems
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | Additional CSS classes |
+| `as` | `string` | `'div'` | HTML element to render |
+| `static` | `boolean` | `false` | Keep visible regardless of state |
+
+### DropdownItem
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | Additional CSS classes |
+| `as` | `string` | `'div'` | HTML element to render |
+| `disabled` | `boolean` | `false` | Disable the item |
+| `onClick` | `(e: Event) => void` | - | Click handler |
+
+## Examples
+
+### Basic Dropdown
+
+```stx
+@component('Dropdown')
+  @component('DropdownButton', {
+    className: 'px-4 py-2 bg-blue-500 text-white rounded-md'
+  })
+    Actions
+  @endcomponent
+
+  @component('DropdownItems', {
+    className: 'w-56'
+  })
+    @component('DropdownItem')
+      Edit
+    @endcomponent
+    @component('DropdownItem')
+      Duplicate
+    @endcomponent
+    @component('DropdownItem', { disabled: true })
+      Archive (coming soon)
+    @endcomponent
+    @component('DropdownItem')
+      Delete
+    @endcomponent
+  @endcomponent
+@endcomponent
+```
+
+### With Icons
+
+```stx
+@component('DropdownItem')
+  <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+  </svg>
+  Edit
+@endcomponent
+```
+
+### Grouped Items
+
+```stx
+@component('DropdownItems')
+  <div class="px-1 py-1">
+    @component('DropdownItem')
+      Edit
+    @endcomponent
+    @component('DropdownItem')
+      Duplicate
+    @endcomponent
+  </div>
+
+  <div class="px-1 py-1">
+    @component('DropdownItem')
+      Archive
+    @endcomponent
+    @component('DropdownItem')
+      Move
+    @endcomponent
+  </div>
+
+  <div class="px-1 py-1">
+    @component('DropdownItem')
+      Delete
+    @endcomponent
+  </div>
+@endcomponent
+```
+
+## Features
+
+- Automatic positioning
+- Keyboard navigation
+- Focus management
+- Dark mode support
+- Accessible (WAI-ARIA)
+- Customizable styling with headwind
+- Disabled state support
+- Active state on hover

package/src/ui/dropdown/index.ts

@@ -0,0 +1,29 @@
+export { default as Dropdown } from './Dropdown.stx'
+export { default as DropdownButton } from './DropdownButton.stx'
+export { default as DropdownItem } from './DropdownItem.stx'
+export { default as DropdownItems } from './DropdownItems.stx'
+
+export interface DropdownProps {
+  className?: string
+  as?: string
+}
+
+export interface DropdownButtonProps {
+  className?: string
+  as?: string
+  disabled?: boolean
+  onClick?: (e: Event) => void
+}
+
+export interface DropdownItemsProps {
+  className?: string
+  as?: string
+  static?: boolean
+}
+
+export interface DropdownItemProps {
+  className?: string
+  as?: string
+  disabled?: boolean
+  onClick?: (e: Event) => void
+}