@stacksjs/components 0.2.92 → 0.2.94

package/src/ui/combobox/Combobox.stx

@@ -1,96 +0,0 @@
-<script server>
-export const value = $props.value
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-
-const baseClasses = 'relative'
-export const comboboxClasses = `${baseClasses} ${className}`.trim()
-export const comboboxInstanceId = `stx-cb-${Math.random().toString(36).slice(2, 11)}`
-</script>
-
-<script client>
-const emit = defineEmits()
-const comboboxInstanceId = {{ comboboxInstanceId }}
-const initialValue = {{ value === undefined ? 'null' : value }}
-
-const isOpen = state(false)
-const selected = state(initialValue)
-const query = state('')
-let rootEl = null
-let outsideHandler = null
-
-function isSelectedValue(v) {
-  return selected() === v
-}
-
-function selectValue(v) {
-  selected.set(v)
-  isOpen.set(false)
-  syncOptionStates()
-  emit('change', v)
-}
-
-function syncOptionStates() {
-  if (!rootEl) return
-  const options = rootEl.querySelectorAll('[data-stx-combobox-option]')
-  for (const opt of options) {
-    const raw = opt.dataset.optionValue
-    let v
-    try { v = JSON.parse(raw ?? 'null') }
-    catch { v = raw }
-    const sel = isSelectedValue(v)
-    opt.setAttribute('aria-selected', sel ? 'true' : 'false')
-    opt.setAttribute('data-selected', sel ? 'true' : 'false')
-  }
-}
-
-function open() { if (!isOpen()) { isOpen.set(true) } }
-function close() { if (isOpen()) isOpen.set(false) }
-function toggle() { isOpen() ? close() : open() }
-
-function onToggle(event) { event.stopPropagation(); toggle() }
-function onSelect(event) { event.stopPropagation(); selectValue(event.detail) }
-function onQuery(event) {
-  event.stopPropagation()
-  query.set(event.detail)
-  if (!isOpen()) open()
-  emit('query', event.detail)
-}
-
-onMount(() => {
-  rootEl = document.querySelector(`[data-combobox-id="${comboboxInstanceId}"]`)
-  syncOptionStates()
-  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')
-
-defineExpose({ isOpen, selected, query, toggle, open, close, selectValue })
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ comboboxClasses }}"
-  data-stx-combobox
-  data-combobox-id="{{ comboboxInstanceId }}"
-  :data-state="dataState()"
-  @stx:combobox-toggle="onToggle($event)"
-  @stx:combobox-select="onSelect($event)"
-  @stx:combobox-query="onQuery($event)"
->
-  <slot />
-</component>
-
-<style>
-[data-stx-combobox][data-state="closed"] [data-stx-combobox-options] {
-  display: none;
-}
-</style>

package/src/ui/combobox/ComboboxButton.stx

@@ -1,25 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const as = $props.as || 'button'
-
-const baseClasses = 'absolute inset-y-0 right-0 flex items-center pr-2'
-export const buttonClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<script client>
-function onClick(event) {
-  event.currentTarget.dispatchEvent(new CustomEvent('stx:combobox-toggle', { bubbles: true }))
-}
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ buttonClasses }}"
-  data-stx-combobox-button
-  tabindex="-1"
-  @click="onClick($event)"
->
-  <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

@@ -1,32 +0,0 @@
-<script server>
-export const displayValue = $props.displayValue
-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' : ''
-export const inputClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
-</script>
-
-<script client>
-const isDisabled = {{ disabled }}
-
-function onInput(event) {
-  if (isDisabled) return
-  event.currentTarget.dispatchEvent(
-    new CustomEvent('stx:combobox-query', { bubbles: true, detail: event.target.value }),
-  )
-}
-</script>
-
-<input
-  type="text"
-  class="{{ inputClasses }}"
-  data-stx-combobox-input
-  placeholder="{{ placeholder }}"
-  value="{{ displayValue }}"
-  @if(disabled)disabled@endif
-  @input="onInput($event)"
-  autocomplete="off"
-/>

package/src/ui/combobox/ComboboxOption.stx

@@ -1,49 +0,0 @@
-<script server>
-export const value = $props.value
-export const disabled = $props.disabled || false
-export const className = $props.className || ''
-export const as = $props.as || 'li'
-
-const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4 text-neutral-900 dark:text-neutral-100 hover:bg-blue-100 dark:hover:bg-blue-900'
-const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
-export const optionClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
-export const valueJson = JSON.stringify(value === undefined ? null : value)
-</script>
-
-<script client>
-const isDisabled = {{ disabled }}
-const optionValue = {{ value === undefined ? 'null' : value }}
-
-function onClick(event) {
-  if (isDisabled) return
-  event.currentTarget.dispatchEvent(
-    new CustomEvent('stx:combobox-select', { bubbles: true, detail: optionValue }),
-  )
-}
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ optionClasses }}"
-  data-stx-combobox-option
-  data-option-value="{{ valueJson }}"
-  role="option"
-  aria-selected="false"
-  @if(disabled)aria-disabled="true"@endif
-  @click="onClick($event)"
->
-  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400" data-stx-combobox-check>
-    <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>
-
-  <slot :disabled="disabled" />
-</component>
-
-<style>
-[data-stx-combobox-option][data-selected="false"] [data-stx-combobox-check],
-[data-stx-combobox-option]:not([data-selected]) [data-stx-combobox-check] {
-  display: none;
-}
-</style>

package/src/ui/combobox/ComboboxOptions.stx

@@ -1,16 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const as = $props.as || 'ul'
-
-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'
-export const optionsClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ optionsClasses }}"
-  data-stx-combobox-options
-  role="listbox"
->
-  <slot />
-</component>

package/src/ui/combobox/README.md

@@ -1,150 +0,0 @@
-# Combobox Component
-
-A searchable select component that combines an input with a listbox.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<script server>
-const people = [
-  { id: 1, name: 'Wade Cooper' },
-  { id: 2, name: 'Arlene Mccoy' },
-  { id: 3, name: 'Devon Webb' }
-]
-
-let selected = people[0]
-let query = ''
-
-const filtered = query === ''
-  ? people
-  : people.filter(person =>
-      person.name.toLowerCase().includes(query.toLowerCase())
-    )
-
-function handleChange(person) {
-  selected = person
-  query = ''
-}
-
-function handleQueryChange(value) {
-  query = value
-}
-</script>
-
-<Combobox :value="selected" :onChange="handleChange">
-  <div class="relative mt-1">
-    <ComboboxInput
-      :displayValue="selected.name"
-      :onChange="handleQueryChange"
-      placeholder="Search people..."
-    />
-
-    <ComboboxButton />
-
-    <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)
-          <ComboboxOption :value="person" :currentValue="selected" :onChange="handleChange">
-            {{ person.name }}
-          </ComboboxOption>
-        @endforeach
-      @endif
-    </ComboboxOptions>
-  </div>
-</Combobox>
-```
-
-## 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
-<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)
-      <ComboboxOption :value="item">
-        {{ item.name }}
-      </ComboboxOption>
-    @endforeach
-  @endif
-</ComboboxOptions>
-```
-
-### With Avatars
-
-```stx
-<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>
-</ComboboxOption>
-```
-
-## 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

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

@@ -1,81 +0,0 @@
-<script server>
-export const open = $props.open || false
-export const initialQuery = $props.query || ''
-export const className = $props.className || ''
-
-const baseClasses = 'fixed inset-0 z-50 overflow-y-auto p-4 sm:p-6 md:p-20'
-export const paletteClasses = `${baseClasses} ${className}`.trim()
-export const paletteInstanceId = `stx-cmd-${Math.random().toString(36).slice(2, 11)}`
-</script>
-
-<script client>
-const emit = defineEmits()
-const paletteInstanceId = {{ paletteInstanceId }}
-const isOpen = state({{ open }})
-const query = state({{ initialQuery }})
-let escHandler = null
-
-function close() {
-  if (!isOpen()) return
-  isOpen.set(false)
-  emit('close')
-}
-
-function show() {
-  if (isOpen()) return
-  isOpen.set(true)
-}
-
-function onQueryInput(event) {
-  query.set(event.target.value)
-  emit('query', event.target.value)
-}
-
-function onItemSelect(event) {
-  event.stopPropagation()
-  emit('select', event.detail)
-  close()
-}
-
-onMount(() => {
-  escHandler = (event) => {
-    if (event.key === 'Escape' && isOpen()) close()
-  }
-  document.addEventListener('keydown', escHandler)
-})
-
-onDestroy(() => {
-  if (escHandler) document.removeEventListener('keydown', escHandler)
-})
-
-defineExpose({ isOpen, query, show, close })
-</script>
-
-<div
-  :show="isOpen()"
-  class="{{ paletteClasses }}"
-  data-stx-command-palette
-  data-palette-id="{{ paletteInstanceId }}"
-  @stx:command-select="onItemSelect($event)"
->
-  <div class="fixed inset-0 bg-neutral-500 bg-opacity-25 dark:bg-opacity-50 transition-opacity" @click="close()"></div>
-
-  <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 relative">
-    <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="onQueryInput($event)"
-      />
-    </div>
-
-    <div class="max-h-96 overflow-y-auto py-2">
-      <slot />
-    </div>
-  </div>
-</div>

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

@@ -1,27 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const value = $props.value
-
-const baseClasses = 'flex cursor-pointer select-none items-center px-4 py-2 text-neutral-900 dark:text-neutral-100 hover:bg-blue-600 hover:text-white'
-export const itemClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const itemValue = {{ value === undefined ? 'null' : value }}
-
-function onClick(event) {
-  emit('click', event)
-  event.currentTarget.dispatchEvent(
-    new CustomEvent('stx:command-select', { bubbles: true, detail: itemValue }),
-  )
-}
-</script>
-
-<div
-  class="{{ itemClasses }}"
-  data-stx-command-item
-  @click="onClick($event)"
->
-  <slot />
-</div>

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

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

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

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

@@ -1,41 +0,0 @@
-<script server>
-export const open = $props.open || false
-export const className = $props.className || ''
-
-const baseClasses = 'relative z-50'
-export const dialogClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-// useReactiveProp wires `:open="parentSignal()"` from the parent into our
-// local `isOpen` signal — when the parent's signal changes, bindAttr
-// updates the root's `open` attribute, our MutationObserver picks it up,
-// and isOpen flips. See stacksjs/stx#1704.
-const isOpen = useReactiveProp('open', {{ open }})
-
-function close() {
-  isOpen.set(false)
-  emit('close')
-}
-
-function onBackdropKey(event) {
-  if (event.key === 'Escape') close()
-}
-
-defineExpose({
-  open: () => isOpen.set(true),
-  close,
-  isOpen,
-})
-</script>
-
-<div
-  :show="isOpen()"
-  class="{{ dialogClasses }}"
-  role="dialog"
-  aria-modal="true"
-  @keydown="onBackdropKey($event)"
->
-  <slot />
-</div>

package/src/ui/dialog/DialogBackdrop.stx

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

@@ -1,11 +0,0 @@
-<script server>
-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

@@ -1,16 +0,0 @@
-<script server>
-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

@@ -1,11 +0,0 @@
-<script server>
-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>