@stacksjs/components 0.2.92 → 0.2.94

package/src/ui/input/index.ts

@@ -1,180 +0,0 @@
-import type { PropSchema, ValidationResult } from '../../utils/prop-validation'
-import { createPropValidator, PropTypes } from '../../utils/prop-validation'
-
-export { default as EmailInput } from './EmailInput.stx'
-export { default as NumberInput } from './NumberInput.stx'
-export { default as PasswordInput } from './PasswordInput.stx'
-export { default as SearchInput } from './SearchInput.stx'
-export { default as TextInput } from './TextInput.stx'
-
-export interface BaseInputProps {
-  value?: string
-  onChange?: (value: string) => void
-  placeholder?: string
-  disabled?: boolean
-  readonly?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  error?: boolean
-  label?: string
-  helperText?: string
-  required?: boolean
-  className?: string
-  inputClassName?: string
-}
-
-export interface TextInputProps extends BaseInputProps {
-  leftIcon?: string
-  rightIcon?: string
-  clearable?: boolean
-  maxLength?: number
-  showCount?: boolean
-}
-
-export interface EmailInputProps extends Omit<BaseInputProps, 'placeholder'> {
-  placeholder?: string
-}
-
-export interface PasswordInputProps extends Omit<BaseInputProps, 'placeholder'> {
-  placeholder?: string
-  showStrength?: boolean
-}
-
-export interface NumberInputProps extends BaseInputProps {
-  min?: number
-  max?: number
-  step?: number
-  showControls?: boolean
-}
-
-export interface SearchInputProps extends Omit<BaseInputProps, 'placeholder'> {
-  placeholder?: string
-  onSearch?: (value: string) => void
-  loading?: boolean
-}
-
-/**
- * Base input prop validation schema
- */
-const baseInputPropSchema: PropSchema = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  placeholder: PropTypes.string,
-  disabled: PropTypes.boolean,
-  readonly: PropTypes.boolean,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  error: PropTypes.boolean,
-  label: PropTypes.string,
-  helperText: PropTypes.string,
-  required: PropTypes.boolean,
-  className: PropTypes.string,
-  inputClassName: PropTypes.string,
-}
-
-/**
- * TextInput prop validation schema
- */
-export const textInputPropSchema: PropSchema = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  placeholder: PropTypes.string,
-  disabled: PropTypes.boolean,
-  readonly: PropTypes.boolean,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  error: PropTypes.boolean,
-  label: PropTypes.string,
-  helperText: PropTypes.string,
-  required: PropTypes.boolean,
-  className: PropTypes.string,
-  inputClassName: PropTypes.string,
-  leftIcon: PropTypes.string,
-  rightIcon: PropTypes.string,
-  clearable: PropTypes.boolean,
-  maxLength: PropTypes.number,
-  showCount: PropTypes.boolean,
-}
-
-/**
- * NumberInput prop validation schema
- */
-export const numberInputPropSchema: PropSchema = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  placeholder: PropTypes.string,
-  disabled: PropTypes.boolean,
-  readonly: PropTypes.boolean,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  error: PropTypes.boolean,
-  label: PropTypes.string,
-  helperText: PropTypes.string,
-  required: PropTypes.boolean,
-  className: PropTypes.string,
-  inputClassName: PropTypes.string,
-  min: PropTypes.number,
-  max: PropTypes.number,
-  step: PropTypes.number,
-  showControls: PropTypes.boolean,
-}
-
-/**
- * PasswordInput prop validation schema
- */
-const passwordInputPropSchema: PropSchema = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  placeholder: PropTypes.string,
-  disabled: PropTypes.boolean,
-  readonly: PropTypes.boolean,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  error: PropTypes.boolean,
-  label: PropTypes.string,
-  helperText: PropTypes.string,
-  required: PropTypes.boolean,
-  className: PropTypes.string,
-  inputClassName: PropTypes.string,
-  showStrength: PropTypes.boolean,
-}
-
-/**
- * SearchInput prop validation schema
- */
-const searchInputPropSchema: PropSchema = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  placeholder: PropTypes.string,
-  disabled: PropTypes.boolean,
-  readonly: PropTypes.boolean,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  error: PropTypes.boolean,
-  label: PropTypes.string,
-  helperText: PropTypes.string,
-  required: PropTypes.boolean,
-  className: PropTypes.string,
-  inputClassName: PropTypes.string,
-  onSearch: PropTypes.func,
-  loading: PropTypes.boolean,
-}
-
-/**
- * Validate TextInput component props
- */
-export const validateTextInputProps: (props: Record<string, any>) => ValidationResult = createPropValidator('TextInput', textInputPropSchema)
-
-/**
- * Validate EmailInput component props
- */
-export const validateEmailInputProps: (props: Record<string, any>) => ValidationResult = createPropValidator('EmailInput', baseInputPropSchema)
-
-/**
- * Validate PasswordInput component props
- */
-export const validatePasswordInputProps: (props: Record<string, any>) => ValidationResult = createPropValidator('PasswordInput', passwordInputPropSchema)
-
-/**
- * Validate NumberInput component props
- */
-export const validateNumberInputProps: (props: Record<string, any>) => ValidationResult = createPropValidator('NumberInput', numberInputPropSchema)
-
-/**
- * Validate SearchInput component props
- */
-export const validateSearchInputProps: (props: Record<string, any>) => ValidationResult = createPropValidator('SearchInput', searchInputPropSchema)

package/src/ui/listbox/Listbox.stx

@@ -1,101 +0,0 @@
-<script server>
-export const value = $props.value
-export const multiple = $props.multiple || false
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-
-const baseClasses = 'relative'
-export const listboxClasses = `${baseClasses} ${className}`.trim()
-export const listboxInstanceId = `stx-lb-${Math.random().toString(36).slice(2, 11)}`
-</script>
-
-<script client>
-const emit = defineEmits()
-const listboxInstanceId = {{ listboxInstanceId }}
-const multiple = {{ multiple }}
-const initialValue = {{ value === undefined ? 'null' : value }}
-
-const isOpen = state(false)
-const selected = state(initialValue)
-let rootEl = null
-let outsideHandler = null
-
-function isSelectedValue(v) {
-  const cur = selected()
-  if (multiple && Array.isArray(cur)) return cur.includes(v)
-  return cur === v
-}
-
-function selectValue(v) {
-  if (multiple) {
-    const cur = Array.isArray(selected()) ? selected() : []
-    selected.set(cur.includes(v) ? cur.filter(x => x !== v) : [...cur, v])
-  }
-  else {
-    selected.set(v)
-    isOpen.set(false)
-  }
-  syncOptionStates()
-  emit('change', selected())
-}
-
-function syncOptionStates() {
-  if (!rootEl) return
-  const options = rootEl.querySelectorAll('[data-stx-listbox-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); emit('change', selected()) } }
-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)
-}
-
-onMount(() => {
-  rootEl = document.querySelector(`[data-listbox-id="${listboxInstanceId}"]`)
-  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, toggle, open, close, selectValue })
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ listboxClasses }}"
-  data-stx-listbox
-  data-listbox-id="{{ listboxInstanceId }}"
-  :data-state="dataState()"
-  @stx:listbox-toggle="onToggle($event)"
-  @stx:listbox-select="onSelect($event)"
->
-  <slot />
-</component>
-
-<style>
-[data-stx-listbox][data-state="closed"] [data-stx-listbox-options] {
-  display: none;
-}
-</style>

package/src/ui/listbox/ListboxButton.stx

@@ -1,28 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const as = $props.as || 'button'
-export const disabled = $props.disabled || false
-
-const baseClasses = 'relative w-full cursor-pointer rounded-lg bg-white dark:bg-neutral-800 py-2 pl-3 pr-10 text-left shadow-md 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 focus-visible:ring-offset-blue-300'
-const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
-export const buttonClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
-</script>
-
-<script client>
-const isDisabled = {{ disabled }}
-
-function onClick(event) {
-  if (isDisabled) return
-  event.currentTarget.dispatchEvent(new CustomEvent('stx:listbox-toggle', { bubbles: true }))
-}
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ buttonClasses }}"
-  data-stx-listbox-button
-  @if(disabled)disabled aria-disabled="true"@endif
-  @click="onClick($event)"
->
-  <slot />
-</component>

package/src/ui/listbox/ListboxLabel.stx

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

package/src/ui/listbox/ListboxOption.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:listbox-select', { bubbles: true, detail: optionValue }),
-  )
-}
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ optionClasses }}"
-  data-stx-listbox-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-listbox-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-listbox-option][data-selected="false"] [data-stx-listbox-check],
-[data-stx-listbox-option]:not([data-selected]) [data-stx-listbox-check] {
-  display: none;
-}
-</style>

package/src/ui/listbox/ListboxOptions.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-listbox-options
-  role="listbox"
->
-  <slot />
-</component>

package/src/ui/listbox/README.md

@@ -1,135 +0,0 @@
-# Listbox Component
-
-A custom select component for choosing one or multiple values from a list.
-
-## 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]
-
-function handleChange(person) {
-  selected = person
-}
-</script>
-
-<Listbox :value="selected" :onChange="handleChange">
-  <ListboxLabel>Assign to</ListboxLabel>
-
-  <ListboxButton>{{ selected.name }}</ListboxButton>
-
-  <ListboxOptions>
-    @foreach(person in people)
-      <ListboxOption :value="person" :currentValue="selected" :onChange="handleChange">
-        {{ person.name }}
-      </ListboxOption>
-    @endforeach
-  </ListboxOptions>
-</Listbox>
-```
-
-## Props
-
-### Listbox
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `any` | - | Currently selected value(s) |
-| `onChange` | `(value: any) => void` | - | Change handler |
-| `multiple` | `boolean` | `false` | Allow multiple selection |
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'div'` | HTML element to render |
-
-### ListboxButton
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'button'` | HTML element to render |
-| `disabled` | `boolean` | `false` | Disable the button |
-
-### ListboxOptions
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'ul'` | HTML element to render |
-| `static` | `boolean` | `false` | Keep visible regardless of state |
-
-### ListboxOption
-| 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(s) |
-| `onChange` | `(value: any) => void` | - | Change handler |
-
-### ListboxLabel
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'label'` | HTML element to render |
-
-## Examples
-
-### Multiple Selection
-
-```stx
-<script server>
-let selectedPeople = [people[0], people[1]]
-
-function handleChange(person) {
-  if (selectedPeople.includes(person)) {
-    selectedPeople = selectedPeople.filter(p => p !== person)
-  } else {
-    selectedPeople = [...selectedPeople, person]
-  }
-}
-</script>
-
-<Listbox :value="selectedPeople" :onChange="handleChange" multiple>
-  <!-- ... -->
-</Listbox>
-```
-
-### With Avatars
-
-```stx
-<ListboxOption :value="person">
-  <div class="flex items-center">
-    <img src="{{ person.avatar }}" alt="" class="h-6 w-6 rounded-full mr-2" />
-    {{ person.name }}
-  </div>
-</ListboxOption>
-```
-
-### Disabled Option
-
-```stx
-<ListboxOption :value="person" disabled>
-  {{ person.name }} (unavailable)
-</ListboxOption>
-```
-
-## Features
-
-- Single or multiple selection
-- Keyboard navigation
-- Search/filter support
-- Dark mode support
-- Accessible (WAI-ARIA)
-- Disabled state
-- Active state on hover
-- Check icon for selected items
-- Customizable styling

package/src/ui/listbox/index.ts

@@ -1,39 +0,0 @@
-export { default as Listbox } from './Listbox.stx'
-export { default as ListboxButton } from './ListboxButton.stx'
-export { default as ListboxLabel } from './ListboxLabel.stx'
-export { default as ListboxOption } from './ListboxOption.stx'
-export { default as ListboxOptions } from './ListboxOptions.stx'
-
-export interface ListboxProps {
-  value?: any
-  onChange?: (value: any) => void
-  multiple?: boolean
-  className?: string
-  as?: string
-}
-
-export interface ListboxButtonProps {
-  className?: string
-  as?: string
-  disabled?: boolean
-}
-
-export interface ListboxOptionsProps {
-  className?: string
-  as?: string
-  static?: boolean
-}
-
-export interface ListboxOptionProps {
-  value: any
-  disabled?: boolean
-  className?: string
-  as?: string
-  currentValue?: any
-  onChange?: (value: any) => void
-}
-
-export interface ListboxLabelProps {
-  className?: string
-  as?: string
-}

package/src/ui/navigator/Navigator.stx

@@ -1,113 +0,0 @@
-<script server>
-export const items = $props.items || []
-export const active = $props.active || ''
-export const orientation = $props.orientation || 'horizontal'
-export const variant = $props.variant || 'default'
-export const size = $props.size || 'md'
-export const className = $props.className || ''
-
-const containerBaseClasses = orientation === 'horizontal' ? 'flex items-center' : 'flex flex-col'
-export const containerClasses = `${containerBaseClasses} ${className}`.trim()
-export const gapClasses = orientation === 'horizontal' ? 'gap-1' : 'gap-0.5'
-</script>
-
-<script client>
-const emit = defineEmits()
-const items = {{ items }}
-const variant = {{ variant }}
-const size = {{ size }}
-const initialActive = {{ active }}
-const activeKey = state(initialActive)
-
-function isActive(item) {
-  const a = activeKey()
-  if (typeof item.href === 'string' && typeof a === 'string') {
-    if (item.href === a) return true
-    if (a.startsWith(item.href)) return true
-  }
-  if (item.id && item.id === a) return true
-  return false
-}
-
-function getItemClasses(item) {
-  const isActiveItem = isActive(item)
-  const sizeClasses = { sm: 'px-2 py-1 text-sm', md: 'px-3 py-2 text-base', lg: 'px-4 py-3 text-lg' }
-  let cls = sizeClasses[size] || sizeClasses.md
-  if (variant === 'default') {
-    cls += isActiveItem
-      ? ' text-gray-900 dark:text-gray-100 font-medium'
-      : ' text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-  }
-  else if (variant === 'pills') {
-    cls += isActiveItem
-      ? ' bg-blue-600 text-white font-medium rounded-full'
-      : ' text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full'
-  }
-  else if (variant === 'underline') {
-    cls += isActiveItem
-      ? ' text-blue-600 dark:text-blue-400 font-medium border-b-2 border-blue-600 dark:border-blue-400'
-      : ' text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border-b-2 border-transparent'
-  }
-  else if (variant === 'sidebar') {
-    cls += isActiveItem
-      ? ' bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium border-l-4 border-blue-600 dark:border-blue-400'
-      : ' text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-l-4 border-transparent'
-  }
-  cls += ' transition-all duration-200 cursor-pointer flex items-center gap-2'
-  if (item.disabled) cls += ' opacity-50 cursor-not-allowed pointer-events-none'
-  return cls.trim()
-}
-
-function onClickItem(item, event) {
-  if (item.disabled) {
-    event.preventDefault()
-    return
-  }
-  event.preventDefault()
-  activeKey.set(item.href || item.id || activeKey())
-  emit('navigate', item)
-}
-
-defineExpose({ activeKey })
-</script>
-
-<nav class="{{ containerClasses }} {{ gapClasses }}" role="navigation" aria-label="Main navigation">
-  @foreach(item in items)
-    @if(item.href)
-      <a
-        href="{{ item.href }}"
-        :class="getItemClasses({{ JSON.stringify(item) }})"
-        @click="onClickItem({{ JSON.stringify(item) }}, $event)"
-        :aria-current="isActive({{ JSON.stringify(item) }}) ? 'page' : null"
-        @if(item.disabled)aria-disabled="true" tabindex="-1"@endif
-      >
-        @if(item.icon)
-          <span class="flex-shrink-0">{!! item.icon !!}</span>
-        @endif
-        <span>{{ item.label }}</span>
-        @if(item.badge)
-          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
-            {{ item.badge }}
-          </span>
-        @endif
-      </a>
-    @else
-      <button
-        type="button"
-        :class="getItemClasses({{ JSON.stringify(item) }})"
-        @click="onClickItem({{ JSON.stringify(item) }}, $event)"
-        @if(item.disabled)disabled aria-disabled="true"@endif
-      >
-        @if(item.icon)
-          <span class="flex-shrink-0">{!! item.icon !!}</span>
-        @endif
-        <span>{{ item.label }}</span>
-        @if(item.badge)
-          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
-            {{ item.badge }}
-          </span>
-        @endif
-      </button>
-    @endif
-  @endforeach
-</nav>