@stacksjs/components 0.2.93 → 0.2.94

package/src/ui/input/SearchInput.stx

@@ -1,44 +0,0 @@
-<script server>
-export const value = $props.value || ''
-export const placeholder = $props.placeholder || 'Search...'
-export const disabled = $props.disabled || false
-export const size = $props.size || 'md'
-export const error = $props.error || false
-export const label = $props.label || ''
-export const helperText = $props.helperText || ''
-export const loading = $props.loading || false
-export const className = $props.className || ''
-
-export const searchIcon = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>'
-export const spinnerIcon = '<svg class="animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>'
-export const rightIcon = loading ? spinnerIcon : ''
-</script>
-
-<script client>
-const emit = defineEmits()
-let searchTimeout = null
-
-function onSearchInput(event) {
-  const target = event.target
-  const value = target?.value ?? event.detail
-  if (searchTimeout) clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => emit('search', value), 300)
-}
-</script>
-
-<div @input="onSearchInput($event)">
-  <TextInput
-    :value="value"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    :size="size"
-    :error="error"
-    :label="label"
-    :helperText="helperText"
-    :leftIcon="searchIcon"
-    :rightIcon="rightIcon"
-    :clearable="!loading"
-    :className="className"
-    inputClassName="pr-20"
-  />
-</div>

package/src/ui/input/TextInput.stx

@@ -1,132 +0,0 @@
-<script server>
-export const value = $props.value || ''
-export const placeholder = $props.placeholder || ''
-export const disabled = $props.disabled || false
-export const readonly = $props.readonly || false
-export const size = $props.size || 'md'
-export const error = $props.error || false
-export const label = $props.label || ''
-export const helperText = $props.helperText || ''
-export const required = $props.required || false
-export const leftIcon = $props.leftIcon || ''
-export const rightIcon = $props.rightIcon || ''
-export const clearable = $props.clearable || false
-export const maxLength = $props.maxLength
-export const showCount = $props.showCount || false
-export const className = $props.className || ''
-export const inputClassName = $props.inputClassName || ''
-
-const sizeClasses = { sm: 'px-3 py-1.5 text-sm h-8', md: 'px-4 py-2 text-base h-10', lg: 'px-5 py-3 text-lg h-12' }
-const iconSizeClasses = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' }
-
-const baseClasses = 'block w-full border-0 rounded-md shadow-sm ring-1 ring-inset transition-colors duration-200 focus:ring-2 focus:ring-inset dark:bg-blue-gray-700 dark:text-gray-100'
-const stateClasses = error
-  ? 'ring-red-300 dark:ring-red-600 text-red-900 dark:text-red-300 placeholder-red-300 dark:placeholder-red-500 focus:ring-red-500 dark:focus:ring-red-400'
-  : 'ring-gray-300 dark:ring-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-indigo-600 dark:focus:ring-indigo-400'
-const disabledClasses = disabled
-  ? 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-800'
-  : readonly
-    ? 'bg-gray-50 dark:bg-gray-800 cursor-default'
-    : 'bg-white dark:bg-blue-gray-700'
-const paddingClasses = leftIcon ? 'pl-10' : rightIcon || clearable ? 'pr-10' : ''
-
-export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${paddingClasses} ${inputClassName}`.trim()
-export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'}`.trim()
-export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
-export const iconClasses = iconSizeClasses[size]
-export const inputId = `input-${label}`
-</script>
-
-<script client>
-const emit = defineEmits()
-// Reactive prop binding so the parent can drive `value` via signals.
-// Parent listens to @input to push user changes back into its signal.
-// See stacksjs/stx#1704.
-const inputValue = useReactiveProp('value', {{ value }}, { parse: (v) => v == null ? '' : String(v) })
-
-function onInput(event) {
-  inputValue.set(event.target.value)
-  emit('input', inputValue())
-}
-
-function onClear() {
-  inputValue.set('')
-  emit('input', '')
-  emit('clear')
-}
-
-const hasValue = derived(() => inputValue().length > 0)
-const charCount = derived(() => `${inputValue().length} / {{ maxLength || 0 }}`)
-
-defineExpose({ value: inputValue, clear: onClear })
-</script>
-
-<div class="w-full {{ className }}">
-  @if(label)
-    <label for="{{ inputId }}" class="{{ labelClasses }}">
-      {{ label }}
-      @if(required)
-        <span class="text-red-500 ml-1">*</span>
-      @endif
-    </label>
-  @endif
-
-  <div class="relative">
-    @if(leftIcon)
-      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-        <span class="{{ iconClasses }} text-gray-400 dark:text-gray-500">{!! leftIcon !!}</span>
-      </div>
-    @endif
-
-    <input
-      type="text"
-      id="{{ inputId }}"
-      class="{{ inputClasses }}"
-      :value="inputValue()"
-      placeholder="{{ placeholder }}"
-      @if(disabled)disabled@endif
-      @if(readonly)readonly@endif
-      @if(required)required@endif
-      @if(maxLength)maxlength="{{ maxLength }}"@endif
-      @input="onInput($event)"
-      :aria-invalid="{{ error ? 'true' : 'false' }}"
-      @if(helperText)aria-describedby="helper-text"@endif
-    />
-
-    @if(clearable)
-      <div :show="hasValue() && !{{ disabled }} && !{{ readonly }}" class="absolute inset-y-0 right-0 flex items-center pr-3">
-        <button
-          type="button"
-          @click="onClear()"
-          class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
-          aria-label="Clear input"
-        >
-          <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
-    @endif
-    @if(rightIcon && !clearable)
-      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-        <span class="{{ iconClasses }} text-gray-400 dark:text-gray-500">{!! rightIcon !!}</span>
-      </div>
-    @endif
-  </div>
-
-  @if(helperText || (showCount && maxLength))
-    <div class="flex items-center justify-between mt-2">
-      @if(helperText)
-        <p id="helper-text" class="{{ helperClasses }}">
-          {{ helperText }}
-        </p>
-      @else
-        <span></span>
-      @endif
-
-      @if(showCount && maxLength)
-        <p class="text-sm text-gray-500 dark:text-gray-400" x-text="charCount()"></p>
-      @endif
-    </div>
-  @endif
-</div>

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>