@stacksjs/components 0.2.92 → 0.2.94

package/src/ui/radio-group/README.md

@@ -1,139 +0,0 @@
-# Radio Group Component
-
-A set of checkable buttons (radio buttons) where only one can be checked at a time.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<script server>
-let selected = 'option1'
-
-function handleChange(value) {
-  selected = value
-}
-</script>
-
-<RadioGroup :value="selected" :onChange="handleChange">
-  <RadioGroupLabel>Choose an option</RadioGroupLabel>
-
-  <RadioGroupOption value="option1" :currentValue="selected" :onChange="handleChange">
-    Option 1
-  </RadioGroupOption>
-
-  <RadioGroupOption value="option2" :currentValue="selected" :onChange="handleChange">
-    Option 2
-  </RadioGroupOption>
-</RadioGroup>
-```
-
-## Props
-
-### RadioGroup
-| 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 |
-
-### RadioGroupLabel
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'label'` | HTML element to render |
-
-### RadioGroupOption
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `any` | - | Option value |
-| `disabled` | `boolean` | `false` | Disable the option |
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'div'` | HTML element to render |
-| `currentValue` | `any` | - | Current selected value |
-| `onChange` | `(value: any) => void` | - | Change handler |
-
-### RadioGroupDescription
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'span'` | HTML element to render |
-
-## Examples
-
-### Server Plans
-
-```stx
-<script server>
-const plans = [
-  { name: 'Startup', ram: '12GB', cpus: '6 CPUs', disk: '160 GB SSD' },
-  { name: 'Business', ram: '16GB', cpus: '8 CPUs', disk: '512 GB SSD' },
-  { name: 'Enterprise', ram: '32GB', cpus: '12 CPUs', disk: '1024 GB SSD' }
-]
-
-let selected = plans[0]
-
-function handleChange(plan) {
-  selected = plan
-}
-</script>
-
-<RadioGroup :value="selected" :onChange="handleChange">
-  <RadioGroupLabel className="sr-only">Server size</RadioGroupLabel>
-
-  <div class="space-y-2">
-    @foreach(plan in plans)
-      <RadioGroupOption
-        :value="plan"
-        :currentValue="selected"
-        :onChange="handleChange"
-      >
-        <div class="w-full flex items-center justify-between">
-          <div class="flex items-center">
-            <div class="text-sm">
-              <RadioGroupLabel className="font-medium">
-                {{ plan.name }}
-              </RadioGroupLabel>
-
-              <RadioGroupDescription>
-                {{ plan.ram }}/{{ plan.cpus }} · {{ plan.disk }}
-              </RadioGroupDescription>
-            </div>
-          </div>
-
-          @if(selected === plan)
-            <svg class="h-6 w-6 shrink-0 text-white" viewBox="0 0 24 24" fill="none">
-              <circle cx="12" cy="12" r="12" fill="#fff" fill-opacity="0.2" />
-              <path d="M7 13l3 3 7-7" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            </svg>
-          @endif
-        </div>
-      </RadioGroupOption>
-    @endforeach
-  </div>
-</RadioGroup>
-```
-
-### With Disabled Option
-
-```stx
-<RadioGroupOption value="disabled" disabled>
-  This option is disabled
-</RadioGroupOption>
-```
-
-## Features
-
-- Single selection from multiple options
-- Keyboard navigation
-- Focus management
-- Dark mode support
-- Accessible (WAI-ARIA)
-- Disabled state support
-- Active state on focus
-- Customizable styling

package/src/ui/radio-group/RadioGroup.stx

@@ -1,60 +0,0 @@
-<script server>
-export const value = $props.value
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-
-const baseClasses = 'w-full'
-export const groupClasses = `${baseClasses} ${className}`.trim()
-export const radioGroupInstanceId = `stx-rg-${Math.random().toString(36).slice(2, 11)}`
-</script>
-
-<script client>
-const emit = defineEmits()
-const radioGroupInstanceId = {{ radioGroupInstanceId }}
-const initialValue = {{ value === undefined ? 'null' : value }}
-const selected = state(initialValue)
-let rootEl = null
-
-function selectValue(v) {
-  selected.set(v)
-  syncOptionStates()
-  emit('change', v)
-}
-
-function syncOptionStates() {
-  if (!rootEl) return
-  const options = rootEl.querySelectorAll('[data-stx-radio-option]')
-  for (const opt of options) {
-    const raw = opt.dataset.optionValue
-    let v
-    try { v = JSON.parse(raw ?? 'null') }
-    catch { v = raw }
-    const checked = selected() === v
-    opt.setAttribute('aria-checked', checked ? 'true' : 'false')
-    opt.setAttribute('data-checked', checked ? 'true' : 'false')
-  }
-}
-
-function onSelect(event) {
-  event.stopPropagation()
-  selectValue(event.detail)
-}
-
-onMount(() => {
-  rootEl = document.querySelector(`[data-radio-group-id="${radioGroupInstanceId}"]`)
-  syncOptionStates()
-})
-
-defineExpose({ selected, selectValue })
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ groupClasses }}"
-  data-stx-radio-group
-  data-radio-group-id="{{ radioGroupInstanceId }}"
-  role="radiogroup"
-  @stx:radio-select="onSelect($event)"
->
-  <slot />
-</component>

package/src/ui/radio-group/RadioGroupDescription.stx

@@ -1,11 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const as = $props.as || 'span'
-
-const baseClasses = 'inline 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/radio-group/RadioGroupLabel.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/radio-group/RadioGroupOption.stx

@@ -1,58 +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 || 'div'
-
-const baseClasses = 'relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none transition-all bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-60 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 dark:focus-visible:ring-offset-blue-700'
-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:radio-select', { bubbles: true, detail: optionValue }),
-  )
-}
-
-function onKey(event) {
-  if (isDisabled) return
-  if (event.key === ' ' || event.key === 'Enter') {
-    event.preventDefault()
-    event.currentTarget.dispatchEvent(
-      new CustomEvent('stx:radio-select', { bubbles: true, detail: optionValue }),
-    )
-  }
-}
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ optionClasses }}"
-  data-stx-radio-option
-  data-option-value="{{ valueJson }}"
-  role="radio"
-  aria-checked="false"
-  @if(disabled)aria-disabled="true"@endif
-  tabindex="{{ disabled ? '-1' : '0' }}"
-  @click="onClick($event)"
-  @keydown="onKey($event)"
->
-  <slot :disabled="disabled" />
-</component>
-
-<style>
-[data-stx-radio-option][data-checked="true"] {
-  background-color: rgb(30 58 138 / 0.75);
-  color: white;
-}
-.dark [data-stx-radio-option][data-checked="true"] {
-  background-color: rgb(30 64 175 / 1);
-}
-</style>

package/src/ui/radio-group/index.ts

@@ -1,30 +0,0 @@
-export { default as RadioGroup } from './RadioGroup.stx'
-export { default as RadioGroupDescription } from './RadioGroupDescription.stx'
-export { default as RadioGroupLabel } from './RadioGroupLabel.stx'
-export { default as RadioGroupOption } from './RadioGroupOption.stx'
-
-export interface RadioGroupProps {
-  value?: any
-  onChange?: (value: any) => void
-  className?: string
-  as?: string
-}
-
-export interface RadioGroupLabelProps {
-  className?: string
-  as?: string
-}
-
-export interface RadioGroupOptionProps {
-  value: any
-  disabled?: boolean
-  className?: string
-  as?: string
-  currentValue?: any
-  onChange?: (value: any) => void
-}
-
-export interface RadioGroupDescriptionProps {
-  className?: string
-  as?: string
-}

package/src/ui/select/README.md

@@ -1,180 +0,0 @@
-# Select Component
-
-A styled native select dropdown with support for labels, validation, and dark mode.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-### Basic Select
-
-```stx
-<script server>
-const options = [
-  { value: 'option1', label: 'Option 1' },
-  { value: 'option2', label: 'Option 2' },
-  { value: 'option3', label: 'Option 3' },
-]
-
-const selected = 'option1'
-
-const handleChange = (value) => {
-  console.log('Selected:', value)
-  selected = value
-}
-</script>
-
-<Select
-  :value="selected"
-  :onChange="handleChange"
-  :options="options"
-  placeholder="Choose an option"
-/>
-```
-
-### With Label and Helper Text
-
-```stx
-<Select
-  label="Country"
-  helperText="Select your country of residence"
-  :value="country"
-  :onChange="(val) => country = val"
-  :options="countries"
-  required
-/>
-```
-
-### With Error State
-
-```stx
-<Select
-  label="Category"
-  :value="category"
-  :onChange="(val) => category = val"
-  :options="categories"
-  error
-  helperText="Please select a valid category"
-  required
-/>
-```
-
-### Different Sizes
-
-```stx
-<!-- Small -->
-<Select size="sm" :options="options" />
-
-<!-- Medium (default) -->
-<Select size="md" :options="options" />
-
-<!-- Large -->
-<Select size="lg" :options="options" />
-```
-
-### Disabled State
-
-```stx
-<Select disabled value="locked" :options="options" />
-```
-
-### With Disabled Options
-
-```stx
-<script server>
-const options = [
-  { value: '1', label: 'Available Option' },
-  { value: '2', label: 'Disabled Option', disabled: true },
-  { value: '3', label: 'Another Available' },
-]
-</script>
-
-<Select :options="options" />
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `string \| number` | `''` | Selected value |
-| `onChange` | `function` | - | Callback when selection changes |
-| `options` | `SelectOption[]` | `[]` | Array of options |
-| `placeholder` | `string` | `'Select an option'` | Placeholder text |
-| `disabled` | `boolean` | `false` | Disable the select |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Select size |
-| `error` | `boolean` | `false` | Show error state |
-| `label` | `string` | `''` | Label text |
-| `helperText` | `string` | `''` | Helper/error text below select |
-| `required` | `boolean` | `false` | Mark as required |
-| `className` | `string` | `''` | Additional CSS classes |
-
-## SelectOption Interface
-
-```typescript
-interface SelectOption {
-  value: string | number
-  label: string
-  disabled?: boolean
-}
-```
-
-## Features
-
-- **Native select** - Uses native `<select>` element for best UX
-- **3 sizes** - Small, medium, and large
-- **Dark mode** - Full dark mode support
-- **Validation states** - Error and required states
-- **Disabled options** - Individual options can be disabled
-- **Labels and helpers** - Support for labels and helper text
-- **Accessible** - Proper ARIA attributes and labels
-- **Keyboard navigation** - Full keyboard support
-- **Modern ES modules** - Clean export syntax
-- **Headwind styling** - Utility-first CSS classes
-
-## Accessibility
-
-- Proper `label` associations with `for` attribute
-- `aria-invalid` for error states
-- `aria-describedby` for helper text
-- Required field indicator
-- Disabled state properly communicated
-- Keyboard navigable
-
-## Example: Form Select
-
-```stx
-<script server>
-const countries = [
-  { value: 'us', label: 'United States' },
-  { value: 'ca', label: 'Canada' },
-  { value: 'mx', label: 'Mexico' },
-  { value: 'uk', label: 'United Kingdom' },
-  { value: 'de', label: 'Germany' },
-]
-
-let selectedCountry = ''
-let hasError = false
-
-const handleCountryChange = (value) => {
-  selectedCountry = value
-  hasError = !value
-}
-</script>
-
-<form>
-  <Select
-    label="Country"
-    :value="selectedCountry"
-    :onChange="handleCountryChange"
-    :options="countries"
-    placeholder="Select your country"
-    required
-    :error="hasError"
-    :helperText="hasError ? 'Country is required' : 'Choose your country'"
-  />
-</form>
-```

package/src/ui/select/Select.stx

@@ -1,82 +0,0 @@
-<script server>
-export const value = $props.value || ''
-export const options = $props.options || []
-export const placeholder = $props.placeholder || 'Select an option'
-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 required = $props.required || false
-export const className = $props.className || ''
-
-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 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'
-  : 'bg-white dark:bg-blue-gray-700 cursor-pointer hover:ring-gray-400 dark:hover:ring-gray-500'
-
-export const selectClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${className}`.trim()
-export const labelClasses = `block text-sm font-medium leading-6 ${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 selectId = `select-${value}`
-</script>
-
-<script client>
-const emit = defineEmits()
-// Reactive prop binding — parent can drive `value` via signals. See #1704.
-const selectedValue = useReactiveProp('value', {{ value }}, { parse: (v) => v == null ? '' : String(v) })
-
-function onChange(event) {
-  selectedValue.set(event.target.value)
-  emit('change', selectedValue())
-}
-
-defineExpose({ value: selectedValue })
-</script>
-
-<div class="w-full">
-  @if(label)
-    <label for="{{ selectId }}" class="{{ labelClasses }}">
-      {{ label }}
-      @if(required)
-        <span class="text-red-500 ml-1">*</span>
-      @endif
-    </label>
-  @endif
-
-  <div class="{{ label ? 'mt-2' : '' }}">
-    <select
-      id="{{ selectId }}"
-      class="{{ selectClasses }}"
-      :value="selectedValue()"
-      @if(disabled)disabled@endif
-      @if(required)required@endif
-      @change="onChange($event)"
-      :aria-invalid="{{ error ? 'true' : 'false' }}"
-      aria-describedby="{{ helperText ? 'helper-text' : '' }}"
-    >
-      @if(placeholder)
-        <option value="" disabled>{{ placeholder }}</option>
-      @endif
-
-      @foreach(option in options)
-        <option
-          value="{{ option.value }}"
-          @if(option.disabled)disabled@endif
-        >
-          {{ option.label }}
-        </option>
-      @endforeach
-    </select>
-  </div>
-
-  @if(helperText)
-    <p id="helper-text" class="{{ helperClasses }}">
-      {{ helperText }}
-    </p>
-  @endif
-</div>

package/src/ui/select/index.ts

@@ -1,21 +0,0 @@
-export { default as Select } from './Select.stx'
-
-export interface SelectOption {
-  value: string | number
-  label: string
-  disabled?: boolean
-}
-
-export interface SelectProps {
-  value?: string | number
-  onChange?: (value: string | number) => void
-  options?: SelectOption[]
-  placeholder?: string
-  disabled?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  error?: boolean
-  label?: string
-  helperText?: string
-  required?: boolean
-  className?: string
-}