@stacksjs/components 0.2.27 → 0.2.53

package/src/ui/progress/Progress.stx

@@ -8,24 +8,8 @@ export const showLabel = $props.showLabel ?? false
 export const indeterminate = $props.indeterminate || false
 export const className = $props.className || ''
 
-// Calculate percentage
-const percentage = Math.min(Math.max((value / max) * 100, 0), 100)
-
-// Size classes for linear
-const linearSizeClasses = {
-  sm: 'h-1',
-  md: 'h-2',
-  lg: 'h-3',
-}
-
-// Size classes for circular
-const circularSizeClasses = {
-  sm: 'w-12 h-12',
-  md: 'w-16 h-16',
-  lg: 'w-24 h-24',
-}
-
-// Color classes
+const linearSizeClasses = { sm: 'h-1', md: 'h-2', lg: 'h-3' }
+const circularSizeClasses = { sm: 'w-12 h-12', md: 'w-16 h-16', lg: 'w-24 h-24' }
 const colorClasses = {
   primary: 'bg-blue-600 dark:bg-blue-500',
   secondary: 'bg-purple-600 dark:bg-purple-500',
@@ -35,12 +19,10 @@ const colorClasses = {
   info: 'bg-cyan-600 dark:bg-cyan-500',
 }
 
-// Circular SVG values
-const circularSize = size === 'sm' ? 48 : size === 'md' ? 64 : 96
-const strokeWidth = size === 'sm' ? 4 : size === 'md' ? 6 : 8
-const radius = (circularSize - strokeWidth) / 2
-const circumference = 2 * Math.PI * radius
-const strokeDashoffset = indeterminate ? 0 : circumference - (percentage / 100) * circumference
+export const circularSize = size === 'sm' ? 48 : size === 'md' ? 64 : 96
+export const strokeWidth = size === 'sm' ? 4 : size === 'md' ? 6 : 8
+export const radius = (circularSize - strokeWidth) / 2
+export const circumference = 2 * Math.PI * radius
 
 export const containerClasses = variant === 'linear'
   ? `w-full ${className}`.trim()
@@ -48,51 +30,64 @@ export const containerClasses = variant === 'linear'
 
 export const linearTrackClasses = `w-full ${linearSizeClasses[size]} bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden`.trim()
 export const linearBarClasses = `h-full ${colorClasses[color]} transition-all duration-300 ease-in-out ${indeterminate ? 'animate-progress-indeterminate' : ''}`.trim()
+export const circularSizeClass = circularSizeClasses[size]
 export const labelClasses = `text-sm font-medium text-gray-700 dark:text-gray-300 mb-2`.trim()
 export const circularTrackColor = 'stroke-gray-200 dark:stroke-gray-700'
-export const circularBarColor = color === 'primary' ? 'stroke-blue-600 dark:stroke-blue-500' :
-  color === 'secondary' ? 'stroke-purple-600 dark:stroke-purple-500' :
-  color === 'success' ? 'stroke-green-600 dark:stroke-green-500' :
-  color === 'warning' ? 'stroke-yellow-600 dark:stroke-yellow-500' :
-  color === 'danger' ? 'stroke-red-600 dark:stroke-red-500' :
-  'stroke-cyan-600 dark:stroke-cyan-500'
+export const circularBarColor = color === 'primary' ? 'stroke-blue-600 dark:stroke-blue-500'
+  : color === 'secondary' ? 'stroke-purple-600 dark:stroke-purple-500'
+  : color === 'success' ? 'stroke-green-600 dark:stroke-green-500'
+  : color === 'warning' ? 'stroke-yellow-600 dark:stroke-yellow-500'
+  : color === 'danger' ? 'stroke-red-600 dark:stroke-red-500'
+  : 'stroke-cyan-600 dark:stroke-cyan-500'
+</script>
+
+<script client>
+const max = {{ max }}
+const indeterminate = {{ indeterminate }}
+const circumference = {{ circumference }}
+const value = state({{ value }})
+
+const percentage = derived(() => Math.min(Math.max((value() / max) * 100, 0), 100))
+const percentLabel = derived(() => `${Math.round(percentage())}%`)
+const linearWidth = derived(() => indeterminate ? '30%' : `${percentage()}%`)
+const dashOffset = derived(() => indeterminate ? 0 : circumference - (percentage() / 100) * circumference)
+
+defineExpose({ value, setValue: (v) => value.set(v) })
 </script>
 
 @if(variant === 'linear')
   <div class="{{ containerClasses }}">
     @if(showLabel)
       <div class="flex items-center justify-between mb-2">
-        <span class="{{ labelClasses }}">{{ Math.round(percentage) }}%</span>
+        <span class="{{ labelClasses }}" x-text="percentLabel()"></span>
       </div>
     @endif
 
     <div
       class="{{ linearTrackClasses }}"
       role="progressbar"
-      aria-valuenow="{{ value }}"
+      :aria-valuenow="value()"
       aria-valuemin="0"
       aria-valuemax="{{ max }}"
     >
       <div
         class="{{ linearBarClasses }}"
-        style="width: {{ indeterminate ? '30%' : percentage + '%' }}"
+        :style="`width: ${linearWidth()}`"
       ></div>
     </div>
   </div>
 @else
-  <!-- Circular Progress -->
   <div class="{{ containerClasses }}">
-    <div class="{{ circularSizeClasses[size] }} relative">
+    <div class="{{ circularSizeClass }} relative">
       <svg
         class="transform -rotate-90"
         width="{{ circularSize }}"
         height="{{ circularSize }}"
         role="progressbar"
-        aria-valuenow="{{ value }}"
+        :aria-valuenow="value()"
         aria-valuemin="0"
         aria-valuemax="{{ max }}"
       >
-        <!-- Background circle -->
         <circle
           class="{{ circularTrackColor }}"
           cx="{{ circularSize / 2 }}"
@@ -101,7 +96,6 @@ export const circularBarColor = color === 'primary' ? 'stroke-blue-600 dark:stro
           stroke-width="{{ strokeWidth }}"
           fill="none"
         />
-        <!-- Progress circle -->
         <circle
           class="{{ circularBarColor }} transition-all duration-300 ease-in-out {{ indeterminate ? 'animate-spin' : '' }}"
           cx="{{ circularSize / 2 }}"
@@ -110,16 +104,14 @@ export const circularBarColor = color === 'primary' ? 'stroke-blue-600 dark:stro
           stroke-width="{{ strokeWidth }}"
           fill="none"
           stroke-dasharray="{{ circumference }}"
-          stroke-dashoffset="{{ strokeDashoffset }}"
+          :stroke-dashoffset="dashOffset()"
           stroke-linecap="round"
         />
       </svg>
 
       @if(showLabel)
         <div class="absolute inset-0 flex items-center justify-center">
-          <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">
-            {{ Math.round(percentage) }}%
-          </span>
+          <span class="text-sm font-semibold text-gray-700 dark:text-gray-300" x-text="percentLabel()"></span>
         </div>
       @endif
     </div>
@@ -128,12 +120,8 @@ export const circularBarColor = color === 'primary' ? 'stroke-blue-600 dark:stro
 
 <style>
 @keyframes progress-indeterminate {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(400%);
-  }
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(400%); }
 }
 
 .animate-progress-indeterminate {

package/src/ui/radio/Radio.stx

@@ -1,6 +1,5 @@
 <script server>
 export const checked = $props.checked || false
-export const onChange = $props.onChange || (() => {})
 export const disabled = $props.disabled || false
 export const size = $props.size || 'md'
 export const label = $props.label || ''
@@ -11,42 +10,48 @@ export const value = $props.value || ''
 export const name = $props.name || ''
 export const className = $props.className || ''
 
-// Size classes
-const sizeClasses = {
-  sm: 'h-4 w-4',
-  md: 'h-5 w-5',
-  lg: 'h-6 w-6',
-}
-
-// Base classes for radio
+const sizeClasses = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' }
 const baseClasses = 'border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-500 focus:ring-indigo-600 dark:focus:ring-indigo-500 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors'
-
-const stateClasses = error
-  ? 'border-red-300 dark:border-red-600 text-red-600 dark:text-red-500 focus:ring-red-500 dark:focus:ring-red-400'
-  : ''
-
-const disabledClasses = disabled
-  ? 'opacity-50 cursor-not-allowed'
-  : 'cursor-pointer'
+const stateClasses = error ? 'border-red-300 dark:border-red-600 text-red-600 dark:text-red-500 focus:ring-red-500 dark:focus:ring-red-400' : ''
+const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
 
 export const radioClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses}`.trim()
 export const labelClasses = `text-sm font-medium ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`.trim()
 export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+export const inputId = `radio-${value || label}`
+</script>
+
+<script client>
+const emit = defineEmits()
+const isDisabled = {{ disabled }}
+const radioValue = {{ value }}
+const isChecked = state({{ checked }})
+
+function onInputChange(event) {
+  if (isDisabled) {
+    event.target.checked = isChecked()
+    return
+  }
+  isChecked.set(event.target.checked)
+  emit('change', { value: radioValue, checked: isChecked() })
+}
+
+defineExpose({ isChecked })
 </script>
 
 <div class="relative flex items-start {{ className }}">
   <div class="flex h-6 items-center">
     <input
-      id="radio-{{ value || label }}"
+      id="{{ inputId }}"
       type="radio"
       name="{{ name }}"
       value="{{ value }}"
-      checked="{{ checked }}"
-      disabled="{{ disabled }}"
-      required="{{ required }}"
+      :checked="isChecked()"
+      @if(disabled)disabled@endif
+      @if(required)required@endif
       class="{{ radioClasses }}"
-      onchange="handleChange(event)"
-      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @change="onInputChange($event)"
+      :aria-invalid="{{ error ? 'true' : 'false' }}"
       @if(description)aria-describedby="radio-description"@endif
     />
   </div>
@@ -54,7 +59,7 @@ export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red
   @if(label || description)
     <div class="ml-3 text-sm leading-6">
       @if(label)
-        <label for="radio-{{ value || label }}" class="{{ labelClasses }}">
+        <label for="{{ inputId }}" class="{{ labelClasses }}">
           {{ label }}
           @if(required)
             <span class="text-red-500 ml-1">*</span>
@@ -69,13 +74,3 @@ export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red
     </div>
   @endif
 </div>
-
-<script>
-function handleChange(event) {
-  const isChecked = event.target.checked
-
-  if (!disabled && onChange) {
-    onChange(value, isChecked)
-  }
-}
-</script>

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

@@ -1,13 +1,60 @@
 <script server>
 export const value = $props.value
-export const onChange = $props.onChange
 export const className = $props.className || ''
 export const as = $props.as || 'div'
 
 const baseClasses = 'w-full'
-const groupClasses = `${baseClasses} ${className}`.trim()
+export const groupClasses = `${baseClasses} ${className}`.trim()
+export const radioGroupInstanceId = `stx-rg-${Math.random().toString(36).slice(2, 11)}`
 </script>
 
-<component :is="{{ as }}" class="{{ groupClasses }}" role="radiogroup">
-  <slot :value="value" :onChange="onChange" />
+<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/RadioGroupOption.stx

@@ -3,49 +3,56 @@ export const value = $props.value
 export const disabled = $props.disabled || false
 export const className = $props.className || ''
 export const as = $props.as || 'div'
-export const currentValue = $props.currentValue
-export const onChange = $props.onChange
 
-export let active = false
-export const checked = currentValue === value
-
-const baseClasses = 'relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none transition-all'
-const stateClasses = checked
-  ? 'bg-blue-900 bg-opacity-75 text-white dark:bg-blue-800'
-  : 'bg-white dark:bg-neutral-800'
-const activeClasses = active
-  ? 'ring-2 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-300 dark:ring-offset-blue-700'
-  : ''
-const disabledClasses = disabled
-  ? 'opacity-50 cursor-not-allowed'
-  : ''
-
-const optionClasses = `${baseClasses} ${stateClasses} ${activeClasses} ${disabledClasses} ${className}`.trim()
+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>
 
-export function handleClick() {
-  if (disabled) return
-  onChange?.(value)
-}
+<script client>
+const isDisabled = {{ disabled }}
+const optionValue = {{ value === undefined ? 'null' : value }}
 
-export function handleFocus() {
-  if (!disabled) active = true
+function onClick(event) {
+  if (isDisabled) return
+  event.currentTarget.dispatchEvent(
+    new CustomEvent('stx:radio-select', { bubbles: true, detail: optionValue }),
+  )
 }
 
-export function handleBlur() {
-  active = false
+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="{{ checked ? 'true' : 'false' }}"
+  aria-checked="false"
   @if(disabled)aria-disabled="true"@endif
   tabindex="{{ disabled ? '-1' : '0' }}"
-  @click="handleClick"
-  @focus="handleFocus"
-  @blur="handleBlur"
+  @click="onClick($event)"
+  @keydown="onKey($event)"
 >
-  <slot :active="active" :checked="checked" :disabled="disabled" />
+  <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/select/Select.stx

@@ -1,6 +1,5 @@
 <script server>
 export const value = $props.value || ''
-export const onChange = $props.onChange || (() => {})
 export const options = $props.options || []
 export const placeholder = $props.placeholder || 'Select an option'
 export const disabled = $props.disabled || false
@@ -11,20 +10,11 @@ export const helperText = $props.helperText || ''
 export const required = $props.required || false
 export const className = $props.className || ''
 
-// Size classes
-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',
-}
-
-// Base and state classes
+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'
@@ -32,11 +22,24 @@ const disabledClasses = disabled
 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()
+const selectedValue = state({{ value }})
+
+function onChange(event) {
+  selectedValue.set(event.target.value)
+  emit('change', selectedValue())
+}
+
+defineExpose({ value: selectedValue })
 </script>
 
 <div class="w-full">
   @if(label)
-    <label for="select-{{ value }}" class="{{ labelClasses }}">
+    <label for="{{ selectId }}" class="{{ labelClasses }}">
       {{ label }}
       @if(required)
         <span class="text-red-500 ml-1">*</span>
@@ -46,24 +49,23 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
 
   <div class="{{ label ? 'mt-2' : '' }}">
     <select
-      id="select-{{ value }}"
+      id="{{ selectId }}"
       class="{{ selectClasses }}"
-      value="{{ value }}"
-      disabled="{{ disabled }}"
-      required="{{ required }}"
-      onchange="handleChange(event)"
-      aria-invalid="{{ error ? 'true' : 'false' }}"
+      :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 selected>{{ placeholder }}</option>
+        <option value="" disabled>{{ placeholder }}</option>
       @endif
 
       @foreach(option in options)
         <option
           value="{{ option.value }}"
-          selected="{{ option.value === value }}"
-          disabled="{{ option.disabled }}"
+          @if(option.disabled)disabled@endif
         >
           {{ option.label }}
         </option>
@@ -77,13 +79,3 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
     </p>
   @endif
 </div>
-
-<script>
-function handleChange(event) {
-  const newValue = event.target.value
-
-  if (onChange) {
-    onChange(newValue)
-  }
-}
-</script>