@stacksjs/components 0.2.92 → 0.2.94

package/src/ui/dialog/README.md

@@ -1,121 +0,0 @@
-# Dialog Component
-
-A modal dialog component for overlays, alerts, and confirmations. Built with STX and headwind.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<script server>
-let isOpen = false
-
-function closeModal() {
-  isOpen = false
-}
-
-function openModal() {
-  isOpen = true
-}
-</script>
-
-<Dialog :open="isOpen" :onClose="closeModal">
-  <DialogBackdrop />
-
-  <DialogPanel className="max-w-md">
-    <DialogTitle>Payment successful</DialogTitle>
-
-    <DialogDescription>
-      Your payment has been successfully submitted.
-    </DialogDescription>
-
-    <div class="mt-4">
-      <Button :onClick="closeModal">Got it, thanks!</Button>
-    </div>
-  </DialogPanel>
-</Dialog>
-```
-
-## Props
-
-### Dialog
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `open` | `boolean` | `false` | Whether dialog is open |
-| `onClose` | `(value: boolean) => void` | - | Close handler |
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'div'` | HTML element to render |
-
-### DialogBackdrop
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'div'` | HTML element to render |
-
-### DialogPanel
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'div'` | HTML element to render |
-
-### DialogTitle
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'h3'` | HTML element to render |
-
-### DialogDescription
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'p'` | HTML element to render |
-
-## Examples
-
-### Confirmation Dialog
-
-```stx
-<Dialog :open="isOpen" :onClose="closeModal">
-  <DialogBackdrop />
-
-  <DialogPanel className="max-w-md">
-    <DialogTitle>Delete account</DialogTitle>
-
-    <DialogDescription>
-      Are you sure you want to delete your account? This action cannot be undone.
-    </DialogDescription>
-
-    <div class="mt-4 flex gap-2">
-      <Button variant="danger" :onClick="handleDelete">Delete</Button>
-      <Button variant="secondary" :onClick="closeModal">Cancel</Button>
-    </div>
-  </DialogPanel>
-</Dialog>
-```
-
-### Large Dialog
-
-```stx
-<DialogPanel className="max-w-4xl">
-  <DialogTitle>Terms and Conditions</DialogTitle>
-
-  <div class="mt-4 max-h-96 overflow-y-auto">
-    <!-- Long content -->
-  </div>
-</DialogPanel>
-```
-
-## Features
-
-- Focus trap
-- Backdrop overlay
-- Keyboard support (ESC to close)
-- Dark mode support
-- Accessible (WAI-ARIA)
-- Customizable with headwind classes
-- Multiple sizes
-- Scrollable content support

package/src/ui/dialog/index.ts

@@ -1,32 +0,0 @@
-export { default as Dialog } from './Dialog.stx'
-export { default as DialogBackdrop } from './DialogBackdrop.stx'
-export { default as DialogDescription } from './DialogDescription.stx'
-export { default as DialogPanel } from './DialogPanel.stx'
-export { default as DialogTitle } from './DialogTitle.stx'
-
-export interface DialogProps {
-  open?: boolean
-  onClose?: (value: boolean) => void
-  className?: string
-  as?: string
-}
-
-export interface DialogBackdropProps {
-  className?: string
-  as?: string
-}
-
-export interface DialogPanelProps {
-  className?: string
-  as?: string
-}
-
-export interface DialogTitleProps {
-  className?: string
-  as?: string
-}
-
-export interface DialogDescriptionProps {
-  className?: string
-  as?: string
-}

package/src/ui/drawer/Drawer.stx

@@ -1,120 +0,0 @@
-<script server>
-export const open = $props.open ?? false
-export const position = $props.position || 'right'
-export const title = $props.title || ''
-export const className = $props.className || ''
-
-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',
-}
-
-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',
-}
-
-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 closeButtonClasses = `absolute top-0 ${closeButtonPosition[position]} flex pt-4 pr-2 sm:pr-4`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-// useReactiveProp lets the parent drive `open` via signals
-// (`:open="drawerOpen()"`) instead of the prop being captured once.
-// See stacksjs/stx#1704.
-const isOpen = useReactiveProp('open', {{ open }})
-
-function close() {
-  isOpen.set(false)
-  emit('close')
-}
-
-function onBackdropClick() {
-  close()
-}
-
-function onPanelKey(event) {
-  if (event.key === 'Escape') close()
-}
-
-defineExpose({
-  open: () => isOpen.set(true),
-  close,
-  isOpen,
-})
-</script>
-
-<div :show="isOpen()">
-  <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"
-    @click="onBackdropClick()"
-  ></div>
-
-  <div class="fixed inset-0 z-50 overflow-hidden" @keydown="onPanelKey($event)">
-    <div class="absolute inset-0 overflow-hidden">
-      <div class="{{ containerClasses }}">
-        <div
-          class="{{ panelClasses }}"
-          style="animation: slideIn 0.5s ease-in-out"
-        >
-          <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"
-              @click="close()"
-            >
-              <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>
-
-          <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>
-</div>
-
-<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>

package/src/ui/drawer/README.md

@@ -1,90 +0,0 @@
-# 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 server>
-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>
-
-<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>
-</Drawer>
-```
-
-## 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
-<Drawer open position="right">Content</Drawer>
-```
-
-### Left
-```stx
-<Drawer open position="left">Content</Drawer>
-```
-
-### Top
-```stx
-<Drawer open position="top">Content</Drawer>
-```
-
-### Bottom
-```stx
-<Drawer open position="bottom">Content</Drawer>
-```
-
-## 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

@@ -1,9 +0,0 @@
-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

@@ -1,82 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-
-const baseClasses = 'relative inline-block text-left'
-export const dropdownClasses = `${baseClasses} ${className}`.trim()
-export const dropdownInstanceId = `stx-dd-${Math.random().toString(36).slice(2, 11)}`
-</script>
-
-<script client>
-const emit = defineEmits()
-const dropdownInstanceId = {{ dropdownInstanceId }}
-const isOpen = state(false)
-let rootEl = null
-let outsideHandler = null
-
-function toggle() {
-  isOpen.set(!isOpen())
-  emit('change', isOpen())
-}
-
-function open() {
-  if (isOpen()) return
-  isOpen.set(true)
-  emit('change', true)
-}
-
-function close() {
-  if (!isOpen()) return
-  isOpen.set(false)
-  emit('change', false)
-}
-
-function onItemSelect(event) {
-  event.stopPropagation()
-  emit('select', event.detail)
-  close()
-}
-
-function onToggle(event) { event.stopPropagation(); toggle() }
-function onOpen(event) { event.stopPropagation(); open() }
-function onClose(event) { event.stopPropagation(); close() }
-
-onMount(() => {
-  rootEl = document.querySelector(`[data-dropdown-id="${dropdownInstanceId}"]`)
-  outsideHandler = (event) => {
-    if (!isOpen()) return
-    if (rootEl && !rootEl.contains(event.target)) close()
-  }
-  document.addEventListener('click', outsideHandler, true)
-})
-
-onDestroy(() => {
-  if (outsideHandler) document.removeEventListener('click', outsideHandler, true)
-})
-
-const dataState = derived(() => isOpen() ? 'open' : 'closed')
-const dataExpanded = derived(() => isOpen() ? 'true' : 'false')
-
-defineExpose({ isOpen, toggle, open, close })
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ dropdownClasses }}"
-  data-stx-dropdown
-  data-dropdown-id="{{ dropdownInstanceId }}"
-  :data-state="dataState()"
-  :data-expanded="dataExpanded()"
-  @stx:dropdown-toggle="onToggle($event)"
-  @stx:dropdown-open="onOpen($event)"
-  @stx:dropdown-close="onClose($event)"
-  @stx:dropdown-select="onItemSelect($event)"
->
-  <slot />
-</component>
-
-<style>
-[data-stx-dropdown][data-state="closed"] [data-stx-dropdown-items] {
-  display: none;
-}
-</style>

package/src/ui/dropdown/DropdownButton.stx

@@ -1,29 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const as = $props.as || 'button'
-export const disabled = $props.disabled || false
-
-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'
-export const buttonClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const isDisabled = {{ disabled }}
-
-function onClick(event) {
-  if (isDisabled) return
-  emit('click', event)
-  event.currentTarget.dispatchEvent(new CustomEvent('stx:dropdown-toggle', { bubbles: true }))
-}
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ buttonClasses }}"
-  data-stx-dropdown-button
-  @if(disabled)disabled aria-disabled="true"@endif
-  @click="onClick($event)"
->
-  <slot />
-</component>

package/src/ui/dropdown/DropdownItem.stx

@@ -1,35 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-export const disabled = $props.disabled || false
-export const value = $props.value
-
-const baseClasses = 'group flex w-full items-center px-2 py-2 text-sm transition-colors text-neutral-900 dark:text-neutral-100 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600'
-const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
-export const itemClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const isDisabled = {{ disabled }}
-const itemValue = {{ value === undefined ? 'null' : value }}
-
-function onClick(event) {
-  if (isDisabled) return
-  emit('click', event)
-  event.currentTarget.dispatchEvent(
-    new CustomEvent('stx:dropdown-select', { bubbles: true, detail: itemValue }),
-  )
-}
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ itemClasses }}"
-  data-stx-dropdown-item
-  role="menuitem"
-  @if(disabled)aria-disabled="true"@endif
-  @click="onClick($event)"
->
-  <slot :disabled="disabled" />
-</component>

package/src/ui/dropdown/DropdownItems.stx

@@ -1,18 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-
-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'
-export const itemsClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ itemsClasses }}"
-  data-stx-dropdown-items
-  role="menu"
-  aria-orientation="vertical"
-  tabindex="-1"
->
-  <slot />
-</component>

package/src/ui/dropdown/README.md

@@ -1,114 +0,0 @@
-# Dropdown Component
-
-A flexible dropdown menu component inspired by Headless UI, built with STX and headwind.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<Dropdown>
-  <DropdownButton className="btn-primary">Options</DropdownButton>
-
-  <DropdownItems>
-    <DropdownItem>Edit</DropdownItem>
-    <DropdownItem>Delete</DropdownItem>
-  </DropdownItems>
-</Dropdown>
-```
-
-## 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
-<Dropdown>
-  <DropdownButton className="px-4 py-2 bg-blue-500 text-white rounded-md">
-    Actions
-  </DropdownButton>
-
-  <DropdownItems className="w-56">
-    <DropdownItem>Edit</DropdownItem>
-    <DropdownItem>Duplicate</DropdownItem>
-    <DropdownItem disabled>Archive (coming soon)</DropdownItem>
-    <DropdownItem>Delete</DropdownItem>
-  </DropdownItems>
-</Dropdown>
-```
-
-### With Icons
-
-```stx
-<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
-</DropdownItem>
-```
-
-### Grouped Items
-
-```stx
-<DropdownItems>
-  <div class="px-1 py-1">
-    <DropdownItem>Edit</DropdownItem>
-    <DropdownItem>Duplicate</DropdownItem>
-  </div>
-
-  <div class="px-1 py-1">
-    <DropdownItem>Archive</DropdownItem>
-    <DropdownItem>Move</DropdownItem>
-  </div>
-
-  <div class="px-1 py-1">
-    <DropdownItem>Delete</DropdownItem>
-  </div>
-</DropdownItems>
-```
-
-## 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

@@ -1,29 +0,0 @@
-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
-}