@stacksjs/components 0.2.3

package/dist/Progress-gbmw3akr.stx

@@ -0,0 +1,142 @@
+<script>
+export const value = $props.value || 0
+export const max = $props.max || 100
+export const variant = $props.variant || 'linear'
+export const size = $props.size || 'md'
+export const color = $props.color || 'primary'
+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 colorClasses = {
+  primary: 'bg-blue-600 dark:bg-blue-500',
+  secondary: 'bg-purple-600 dark:bg-purple-500',
+  success: 'bg-green-600 dark:bg-green-500',
+  warning: 'bg-yellow-600 dark:bg-yellow-500',
+  danger: 'bg-red-600 dark:bg-red-500',
+  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 containerClasses = variant === 'linear'
+  ? `w-full ${className}`.trim()
+  : `inline-flex items-center justify-center ${className}`.trim()
+
+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 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'
+</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>
+      </div>
+    @endif
+
+    <div
+      class="{{ linearTrackClasses }}"
+      role="progressbar"
+      aria-valuenow="{{ value }}"
+      aria-valuemin="0"
+      aria-valuemax="{{ max }}"
+    >
+      <div
+        class="{{ linearBarClasses }}"
+        style="width: {{ indeterminate ? '30%' : percentage + '%' }}"
+      ></div>
+    </div>
+  </div>
+@else
+  <!-- Circular Progress -->
+  <div class="{{ containerClasses }}">
+    <div class="{{ circularSizeClasses[size] }} relative">
+      <svg
+        class="transform -rotate-90"
+        width="{{ circularSize }}"
+        height="{{ circularSize }}"
+        role="progressbar"
+        aria-valuenow="{{ value }}"
+        aria-valuemin="0"
+        aria-valuemax="{{ max }}"
+      >
+        <!-- Background circle -->
+        <circle
+          class="{{ circularTrackColor }}"
+          cx="{{ circularSize / 2 }}"
+          cy="{{ circularSize / 2 }}"
+          r="{{ radius }}"
+          stroke-width="{{ strokeWidth }}"
+          fill="none"
+        />
+        <!-- Progress circle -->
+        <circle
+          class="{{ circularBarColor }} transition-all duration-300 ease-in-out {{ indeterminate ? 'animate-spin' : '' }}"
+          cx="{{ circularSize / 2 }}"
+          cy="{{ circularSize / 2 }}"
+          r="{{ radius }}"
+          stroke-width="{{ strokeWidth }}"
+          fill="none"
+          stroke-dasharray="{{ circumference }}"
+          stroke-dashoffset="{{ strokeDashoffset }}"
+          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>
+        </div>
+      @endif
+    </div>
+  </div>
+@endif
+
+<style>
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
+.animate-progress-indeterminate {
+  animation: progress-indeterminate 1.5s ease-in-out infinite;
+}
+</style>

package/dist/Radio-1n9qamv1.stx

@@ -0,0 +1,81 @@
+<script>
+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 || ''
+export const description = $props.description || ''
+export const error = $props.error || false
+export const required = $props.required || false
+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 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'
+
+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()
+</script>
+
+<div class="relative flex items-start {{ className }}">
+  <div class="flex h-6 items-center">
+    <input
+      id="radio-{{ value || label }}"
+      type="radio"
+      name="{{ name }}"
+      value="{{ value }}"
+      checked="{{ checked }}"
+      disabled="{{ disabled }}"
+      required="{{ required }}"
+      class="{{ radioClasses }}"
+      onchange="handleChange(event)"
+      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @if(description)aria-describedby="radio-description"@endif
+    />
+  </div>
+
+  @if(label || description)
+    <div class="ml-3 text-sm leading-6">
+      @if(label)
+        <label for="radio-{{ value || label }}" class="{{ labelClasses }}">
+          {{ label }}
+          @if(required)
+            <span class="text-red-500 ml-1">*</span>
+          @endif
+        </label>
+      @endif
+      @if(description)
+        <p id="radio-description" class="{{ descriptionClasses }}">
+          {{ description }}
+        </p>
+      @endif
+    </div>
+  @endif
+</div>
+
+<script>
+function handleChange(event) {
+  const isChecked = event.target.checked
+
+  if (!disabled && onChange) {
+    onChange(value, isChecked)
+  }
+}
+</script>

package/dist/RadioGroup-12dw2vhk.stx

@@ -0,0 +1,13 @@
+<script>
+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()
+</script>
+
+<component :is="{{ as }}" class="{{ groupClasses }}" role="radiogroup">
+  <slot :value="value" :onChange="onChange" />
+</component>

package/dist/RadioGroupDescription-bjm3mdht.stx

@@ -0,0 +1,11 @@
+<script>
+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/dist/RadioGroupLabel-aky8a73n.stx

@@ -0,0 +1,11 @@
+<script>
+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/dist/RadioGroupOption-9pcxgwmd.stx

@@ -0,0 +1,51 @@
+<script>
+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()
+
+export function handleClick() {
+  if (disabled) return
+  onChange?.(value)
+}
+
+export function handleFocus() {
+  if (!disabled) active = true
+}
+
+export function handleBlur() {
+  active = false
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ optionClasses }}"
+  role="radio"
+  aria-checked="{{ checked ? 'true' : 'false' }}"
+  @if(disabled)aria-disabled="true"@endif
+  tabindex="{{ disabled ? '-1' : '0' }}"
+  @click="handleClick"
+  @focus="handleFocus"
+  @blur="handleBlur"
+>
+  <slot :active="active" :checked="checked" :disabled="disabled" />
+</component>

package/dist/SearchInput-g240e2nq.stx

@@ -0,0 +1,63 @@
+<script>
+export const value = $props.value || ''
+export const onChange = $props.onChange || (() => {})
+export const onSearch = $props.onSearch || (() => {})
+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 || ''
+
+// Search icon SVG
+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>'
+
+// Loading spinner SVG
+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 : undefined
+</script>
+
+@component('TextInput', {
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  size,
+  error,
+  label,
+  helperText,
+  leftIcon: searchIcon,
+  rightIcon,
+  clearable: !loading,
+  className,
+  inputClassName: 'pr-20'
+})
+@endcomponent
+
+<script>
+// Debounce search to avoid excessive calls
+let searchTimeout = null
+
+function handleSearchInput(newValue) {
+  if (onChange) {
+    onChange(newValue)
+  }
+
+  // Debounce the onSearch callback
+  if (searchTimeout) {
+    clearTimeout(searchTimeout)
+  }
+
+  searchTimeout = setTimeout(() => {
+    if (onSearch) {
+      onSearch(newValue)
+    }
+  }, 300) // 300ms debounce
+}
+
+// Expose enhanced onChange handler
+export const enhancedOnChange = handleSearchInput
+</script>

package/dist/Select-p9f94b20.stx

@@ -0,0 +1,89 @@
+<script>
+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
+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 || ''
+
+// 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 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()
+</script>
+
+<div class="w-full">
+  @if(label)
+    <label for="select-{{ value }}" class="{{ labelClasses }}">
+      {{ label }}
+      @if(required)
+        <span class="text-red-500 ml-1">*</span>
+      @endif
+    </label>
+  @endif
+
+  <div class="{{ label ? 'mt-2' : '' }}">
+    <select
+      id="select-{{ value }}"
+      class="{{ selectClasses }}"
+      value="{{ value }}"
+      disabled="{{ disabled }}"
+      required="{{ required }}"
+      onchange="handleChange(event)"
+      aria-invalid="{{ error ? 'true' : 'false' }}"
+      aria-describedby="{{ helperText ? 'helper-text' : '' }}"
+    >
+      @if(placeholder)
+        <option value="" disabled selected>{{ placeholder }}</option>
+      @endif
+
+      @foreach(option in options)
+        <option
+          value="{{ option.value }}"
+          selected="{{ option.value === value }}"
+          disabled="{{ option.disabled }}"
+        >
+          {{ option.label }}
+        </option>
+      @endforeach
+    </select>
+  </div>
+
+  @if(helperText)
+    <p id="helper-text" class="{{ helperClasses }}">
+      {{ helperText }}
+    </p>
+  @endif
+</div>
+
+<script>
+function handleChange(event) {
+  const newValue = event.target.value
+
+  if (onChange) {
+    onChange(newValue)
+  }
+}
+</script>