@stacksjs/components 0.2.3

package/src/ui/combobox/Combobox.stx

@@ -0,0 +1,13 @@
+<script>
+export const value = $props.value
+export const onChange = $props.onChange
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const baseClasses = 'relative'
+const comboboxClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ comboboxClasses }}">
+  <slot :value="value" :onChange="onChange" />
+</component>

package/src/ui/combobox/ComboboxButton.stx

@@ -0,0 +1,13 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'button'
+
+const baseClasses = 'absolute inset-y-0 right-0 flex items-center pr-2'
+const buttonClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ buttonClasses }}" tabindex="-1">
+  <svg class="h-5 w-5 text-neutral-400" viewBox="0 0 20 20" fill="none" stroke="currentColor">
+    <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+</component>

package/src/ui/combobox/ComboboxInput.stx

@@ -0,0 +1,25 @@
+<script>
+export const displayValue = $props.displayValue
+export const onChange = $props.onChange
+export const className = $props.className || ''
+export const placeholder = $props.placeholder || ''
+export const disabled = $props.disabled || false
+
+const baseClasses = 'w-full rounded-lg border-none bg-white dark:bg-neutral-800 py-2 pl-3 pr-10 text-sm leading-5 text-neutral-900 dark:text-white focus:ring-0 focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2'
+const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
+const inputClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
+
+export function handleChange(e) {
+  onChange?.(e.target.value)
+}
+</script>
+
+<input
+  type="text"
+  class="{{ inputClasses }}"
+  placeholder="{{ placeholder }}"
+  value="{{ displayValue }}"
+  @if(disabled)disabled@endif
+  @input="handleChange"
+  autocomplete="off"
+/>

package/src/ui/combobox/ComboboxOption.stx

@@ -0,0 +1,52 @@
+<script>
+export const value = $props.value
+export const disabled = $props.disabled || false
+export const className = $props.className || ''
+export const as = $props.as || 'li'
+export const currentValue = $props.currentValue
+export const onChange = $props.onChange
+
+export let active = false
+export const selected = currentValue === value
+
+const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4'
+const stateClasses = active
+  ? 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100'
+  : 'text-neutral-900 dark:text-neutral-100'
+const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
+const optionClasses = `${baseClasses} ${stateClasses} ${disabledClasses} ${className}`.trim()
+
+export function handleClick() {
+  if (disabled) return
+  onChange?.(value)
+}
+
+export function handleMouseEnter() {
+  if (!disabled) active = true
+}
+
+export function handleMouseLeave() {
+  active = false
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ optionClasses }}"
+  role="option"
+  aria-selected="{{ selected ? 'true' : 'false' }}"
+  @if(disabled)aria-disabled="true"@endif
+  @click="handleClick"
+  @mouseenter="handleMouseEnter"
+  @mouseleave="handleMouseLeave"
+>
+  @if(selected)
+    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400">
+      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+      </svg>
+    </span>
+  @endif
+
+  <slot :active="active" :selected="selected" :disabled="disabled" />
+</component>

package/src/ui/combobox/ComboboxOptions.stx

@@ -0,0 +1,12 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'ul'
+export const static_ = $props.static || false
+
+const baseClasses = 'absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-neutral-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
+const optionsClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ optionsClasses }}" role="listbox">
+  <slot />
+</component>

package/src/ui/combobox/README.md

@@ -0,0 +1,154 @@
+# Combobox Component
+
+A searchable select component that combines an input with a listbox.
+
+## Installation
+
+```bash
+bun add @stacksjs/components
+```
+
+## Usage
+
+```stx
+<script>
+export const people = [
+  { id: 1, name: 'Wade Cooper' },
+  { id: 2, name: 'Arlene Mccoy' },
+  { id: 3, name: 'Devon Webb' }
+]
+
+export let selected = people[0]
+export let query = ''
+
+export const filtered = query === ''
+  ? people
+  : people.filter(person =>
+      person.name.toLowerCase().includes(query.toLowerCase())
+    )
+
+export function handleChange(person) {
+  selected = person
+  query = ''
+}
+
+export function handleQueryChange(value) {
+  query = value
+}
+</script>
+
+@component('Combobox', { value: selected, onChange: handleChange })
+  <div class="relative mt-1">
+    @component('ComboboxInput', {
+      displayValue: selected.name,
+      onChange: handleQueryChange,
+      placeholder: 'Search people...'
+    })
+
+    @component('ComboboxButton')
+
+    @component('ComboboxOptions')
+      @if(filtered.length === 0 && query !== '')
+        <div class="relative cursor-default select-none py-2 px-4 text-neutral-700 dark:text-neutral-300">
+          Nothing found.
+        </div>
+      @else
+        @foreach(person in filtered)
+          @component('ComboboxOption', {
+            value: person,
+            currentValue: selected,
+            onChange: handleChange
+          })
+            {{ person.name }}
+          @endcomponent
+        @endforeach
+      @endif
+    @endcomponent
+  </div>
+@endcomponent
+```
+
+## Props
+
+### Combobox
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `any` | - | Currently selected value |
+| `onChange` | `(value: any) => void` | - | Change handler |
+| `className` | `string` | `''` | Additional CSS classes |
+| `as` | `string` | `'div'` | HTML element to render |
+
+### ComboboxInput
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `displayValue` | `any` | - | Value to display in input |
+| `onChange` | `(value: string) => void` | - | Input change handler |
+| `className` | `string` | `''` | Additional CSS classes |
+| `placeholder` | `string` | `''` | Input placeholder |
+| `disabled` | `boolean` | `false` | Disable the input |
+
+### ComboboxButton
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | Additional CSS classes |
+| `as` | `string` | `'button'` | HTML element to render |
+
+### ComboboxOptions
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | Additional CSS classes |
+| `as` | `string` | `'ul'` | HTML element to render |
+| `static` | `boolean` | `false` | Keep visible regardless of state |
+
+### ComboboxOption
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `any` | - | Option value |
+| `disabled` | `boolean` | `false` | Disable the option |
+| `className` | `string` | `''` | Additional CSS classes |
+| `as` | `string` | `'li'` | HTML element to render |
+| `currentValue` | `any` | - | Current selected value |
+| `onChange` | `(value: any) => void` | - | Change handler |
+
+## Examples
+
+### With Empty State
+
+```stx
+@component('ComboboxOptions')
+  @if(filtered.length === 0)
+    <div class="py-2 px-4 text-neutral-500 dark:text-neutral-400">
+      No results found for "{{ query }}"
+    </div>
+  @else
+    @foreach(item in filtered)
+      @component('ComboboxOption', { value: item })
+        {{ item.name }}
+      @endcomponent
+    @endforeach
+  @endif
+@endcomponent
+```
+
+### With Avatars
+
+```stx
+@component('ComboboxOption', { value: person })
+  <div class="flex items-center gap-2">
+    <img src="{{ person.avatar }}" alt="" class="h-6 w-6 rounded-full" />
+    <span>{{ person.name }}</span>
+  </div>
+@endcomponent
+```
+
+## Features
+
+- Searchable/filterable
+- Keyboard navigation
+- Empty state support
+- Dark mode support
+- Accessible (WAI-ARIA)
+- Disabled state
+- Active state on hover
+- Check icon for selected item
+- Customizable styling

package/src/ui/combobox/index.ts

@@ -0,0 +1,40 @@
+export { default as Combobox } from './Combobox.stx'
+export { default as ComboboxButton } from './ComboboxButton.stx'
+export { default as ComboboxInput } from './ComboboxInput.stx'
+export { default as ComboboxOption } from './ComboboxOption.stx'
+export { default as ComboboxOptions } from './ComboboxOptions.stx'
+
+export interface ComboboxProps {
+  value?: any
+  onChange?: (value: any) => void
+  className?: string
+  as?: string
+}
+
+export interface ComboboxInputProps {
+  displayValue?: any
+  onChange?: (value: string) => void
+  className?: string
+  placeholder?: string
+  disabled?: boolean
+}
+
+export interface ComboboxButtonProps {
+  className?: string
+  as?: string
+}
+
+export interface ComboboxOptionsProps {
+  className?: string
+  as?: string
+  static?: boolean
+}
+
+export interface ComboboxOptionProps {
+  value: any
+  disabled?: boolean
+  className?: string
+  as?: string
+  currentValue?: any
+  onChange?: (value: any) => void
+}

package/src/ui/command-palette/CommandPalette.stx

@@ -0,0 +1,39 @@
+<script>
+export const open = $props.open || false
+export const onClose = $props.onClose
+export const query = $props.query || ''
+export const onQueryChange = $props.onQueryChange
+export const className = $props.className || ''
+
+const baseClasses = 'fixed inset-0 z-50 overflow-y-auto p-4 sm:p-6 md:p-20'
+const paletteClasses = `${baseClasses} ${className}`.trim()
+
+export function handleClose() {
+  onClose?.()
+}
+</script>
+
+@if(open)
+  <div class="{{ paletteClasses }}">
+    <div class="fixed inset-0 bg-neutral-500 bg-opacity-25 dark:bg-opacity-50 transition-opacity" @click="handleClose" />
+
+    <div class="mx-auto max-w-xl transform divide-y divide-neutral-100 dark:divide-neutral-800 overflow-hidden rounded-xl bg-white dark:bg-neutral-900 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+      <div class="relative">
+        <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-neutral-400" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+        </svg>
+        <input
+          type="text"
+          class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-neutral-900 dark:text-white placeholder-neutral-400 focus:ring-0 sm:text-sm"
+          placeholder="Search..."
+          value="{{ query }}"
+          @input="(e) => onQueryChange?.(e.target.value)"
+        />
+      </div>
+
+      <div class="max-h-96 overflow-y-auto py-2">
+        <slot :query="query" />
+      </div>
+    </div>
+  </div>
+@endif

package/src/ui/command-palette/CommandPaletteItem.stx

@@ -0,0 +1,32 @@
+<script>
+export const className = $props.className || ''
+export const onClick = $props.onClick
+export let active = false
+
+const baseClasses = 'flex cursor-pointer select-none items-center px-4 py-2'
+const activeClasses = active
+  ? 'bg-blue-600 text-white'
+  : 'text-neutral-900 dark:text-neutral-100'
+const itemClasses = `${baseClasses} ${activeClasses} ${className}`.trim()
+
+export function handleClick() {
+  onClick?.()
+}
+
+export function handleMouseEnter() {
+  active = true
+}
+
+export function handleMouseLeave() {
+  active = false
+}
+</script>
+
+<div
+  class="{{ itemClasses }}"
+  @click="handleClick"
+  @mouseenter="handleMouseEnter"
+  @mouseleave="handleMouseLeave"
+>
+  <slot :active="active" />
+</div>

package/src/ui/command-palette/README.md

@@ -0,0 +1,42 @@
+# Command Palette Component
+
+A searchable command menu for quick actions and navigation.
+
+## Installation
+
+```bash
+bun add @stacksjs/components
+```
+
+## Usage
+
+```stx
+<script>
+export let open = false
+export let query = ''
+
+const commands = [
+  { name: 'Create new file', action: () => console.log('create') },
+  { name: 'Open settings', action: () => console.log('settings') }
+]
+
+export const filtered = query === ''
+  ? commands
+  : commands.filter(cmd => cmd.name.toLowerCase().includes(query.toLowerCase()))
+</script>
+
+@component('CommandPalette', { open, onClose: () => open = false, query, onQueryChange: (q) => query = q })
+  @foreach(command in filtered)
+    @component('CommandPaletteItem', { onClick: command.action })
+      {{ command.name }}
+    @endcomponent
+  @endforeach
+@endcomponent
+```
+
+## Features
+
+- Searchable
+- Keyboard navigation
+- Dark mode support
+- Accessible

package/src/ui/command-palette/index.ts

@@ -0,0 +1,15 @@
+export { default as CommandPalette } from './CommandPalette.stx'
+export { default as CommandPaletteItem } from './CommandPaletteItem.stx'
+
+export interface CommandPaletteProps {
+  open?: boolean
+  onClose?: () => void
+  query?: string
+  onQueryChange?: (query: string) => void
+  className?: string
+}
+
+export interface CommandPaletteItemProps {
+  className?: string
+  onClick?: () => void
+}

package/src/ui/dialog/Dialog.stx

@@ -0,0 +1,19 @@
+<script>
+export const open = $props.open || false
+export const onClose = $props.onClose
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const baseClasses = 'relative z-50'
+const dialogClasses = `${baseClasses} ${className}`.trim()
+
+export function handleClose() {
+  onClose?.(false)
+}
+</script>
+
+@if(open)
+  <div class="{{ dialogClasses }}" role="dialog" aria-modal="true">
+    <slot />
+  </div>
+@endif

package/src/ui/dialog/DialogBackdrop.stx

@@ -0,0 +1,9 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const baseClasses = 'fixed inset-0 bg-black bg-opacity-25 dark:bg-opacity-50 transition-opacity'
+const backdropClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ backdropClasses }}" aria-hidden="true" />

package/src/ui/dialog/DialogDescription.stx

@@ -0,0 +1,11 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'p'
+
+const baseClasses = 'mt-2 text-sm text-neutral-500 dark:text-neutral-400'
+const descriptionClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ descriptionClasses }}">
+  <slot />
+</component>

package/src/ui/dialog/DialogPanel.stx

@@ -0,0 +1,16 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const baseClasses = 'fixed inset-0 overflow-y-auto'
+const panelWrapperClasses = 'flex min-h-full items-center justify-center p-4 text-center'
+const panelClasses = `transform overflow-hidden rounded-lg bg-white dark:bg-neutral-800 p-6 text-left align-middle shadow-xl transition-all ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ baseClasses }}">
+  <div class="{{ panelWrapperClasses }}">
+    <div class="{{ panelClasses }}">
+      <slot />
+    </div>
+  </div>
+</component>

package/src/ui/dialog/DialogTitle.stx

@@ -0,0 +1,11 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'h3'
+
+const baseClasses = 'text-lg font-medium leading-6 text-neutral-900 dark:text-white'
+const titleClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ titleClasses }}">
+  <slot />
+</component>

package/src/ui/dialog/README.md

@@ -0,0 +1,133 @@
+# 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>
+export let isOpen = false
+
+export function closeModal() {
+  isOpen = false
+}
+
+export function openModal() {
+  isOpen = true
+}
+</script>
+
+@component('Dialog', { open: isOpen, onClose: closeModal })
+  @component('DialogBackdrop')
+
+  @component('DialogPanel', { className: 'max-w-md' })
+    @component('DialogTitle')
+      Payment successful
+    @endcomponent
+
+    @component('DialogDescription')
+      Your payment has been successfully submitted.
+    @endcomponent
+
+    <div class="mt-4">
+      @component('Button', { onClick: closeModal })
+        Got it, thanks!
+      @endcomponent
+    </div>
+  @endcomponent
+@endcomponent
+```
+
+## 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
+@component('Dialog', { open: isOpen, onClose: closeModal })
+  @component('DialogBackdrop')
+
+  @component('DialogPanel', { className: 'max-w-md' })
+    @component('DialogTitle')
+      Delete account
+    @endcomponent
+
+    @component('DialogDescription')
+      Are you sure you want to delete your account? This action cannot be undone.
+    @endcomponent
+
+    <div class="mt-4 flex gap-2">
+      @component('Button', { variant: 'danger', onClick: handleDelete })
+        Delete
+      @endcomponent
+      @component('Button', { variant: 'secondary', onClick: closeModal })
+        Cancel
+      @endcomponent
+    </div>
+  @endcomponent
+@endcomponent
+```
+
+### Large Dialog
+
+```stx
+@component('DialogPanel', { className: 'max-w-4xl' })
+  @component('DialogTitle')
+    Terms and Conditions
+  @endcomponent
+
+  <div class="mt-4 max-h-96 overflow-y-auto">
+    <!-- Long content -->
+  </div>
+@endcomponent
+```
+
+## 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

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