@stacksjs/components 0.2.3

package/src/ui/progress/Progress.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/src/ui/progress/index.ts

@@ -0,0 +1,12 @@
+export { default as Progress } from './Progress.stx'
+
+export interface ProgressProps {
+  value?: number
+  max?: number
+  variant?: 'linear' | 'circular'
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'
+  showLabel?: boolean
+  indeterminate?: boolean
+  className?: string
+}

package/src/ui/radio/Radio.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/src/ui/radio/index.ts

@@ -0,0 +1,15 @@
+export { default as Radio } from './Radio.stx'
+
+export interface RadioProps {
+  checked?: boolean
+  onChange?: (value: string, checked: boolean) => void
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  label?: string
+  description?: string
+  error?: boolean
+  required?: boolean
+  value?: string
+  name?: string
+  className?: string
+}

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

@@ -0,0 +1,145 @@
+# 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>
+export let selected = 'option1'
+
+export function handleChange(value) {
+  selected = value
+}
+</script>
+
+@component('RadioGroup', { value: selected, onChange: handleChange })
+  @component('RadioGroupLabel')
+    Choose an option
+  @endcomponent
+
+  @component('RadioGroupOption', { value: 'option1', currentValue: selected, onChange: handleChange })
+    Option 1
+  @endcomponent
+
+  @component('RadioGroupOption', { value: 'option2', currentValue: selected, onChange: handleChange })
+    Option 2
+  @endcomponent
+@endcomponent
+```
+
+## 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>
+export 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' }
+]
+
+export let selected = plans[0]
+
+export function handleChange(plan) {
+  selected = plan
+}
+</script>
+
+@component('RadioGroup', { value: selected, onChange: handleChange })
+  @component('RadioGroupLabel', { className: 'sr-only' })
+    Server size
+  @endcomponent
+
+  <div class="space-y-2">
+    @foreach(plan in plans)
+      @component('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">
+              @component('RadioGroupLabel', {
+                className: 'font-medium'
+              })
+                {{ plan.name }}
+              @endcomponent
+
+              @component('RadioGroupDescription')
+                {{ plan.ram }}/{{ plan.cpus }} · {{ plan.disk }}
+              @endcomponent
+            </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>
+      @endcomponent
+    @endforeach
+  </div>
+@endcomponent
+```
+
+### With Disabled Option
+
+```stx
+@component('RadioGroupOption', { value: 'disabled', disabled: true })
+  This option is disabled
+@endcomponent
+```
+
+## 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

@@ -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/src/ui/radio-group/RadioGroupDescription.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/src/ui/radio-group/RadioGroupLabel.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/src/ui/radio-group/RadioGroupOption.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/src/ui/radio-group/index.ts

@@ -0,0 +1,30 @@
+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
+}