@stacksjs/components 0.2.3

package/dist/Teleport-819cg9zm.stx

@@ -0,0 +1,101 @@
+<script>
+export const to = $props.to || 'body'
+export const disabled = $props.disabled || false
+export const defer = $props.defer || false
+
+let teleportContainer = null
+let teleportId = `teleport-${Math.random().toString(36).substr(2, 9)}`
+
+// Teleport content to target
+function teleport() {
+  if (typeof window === 'undefined' || disabled)
+    return
+
+  // Get target element
+  const targetElement = typeof to === 'string'
+    ? document.querySelector(to)
+    : to
+
+  if (!targetElement) {
+    console.warn(`Teleport target "${to}" not found`)
+    return
+  }
+
+  // Get source element
+  const sourceElement = document.getElementById(teleportId)
+  if (!sourceElement)
+    return
+
+  // Create teleport container if needed
+  if (!teleportContainer) {
+    teleportContainer = document.createElement('div')
+    teleportContainer.setAttribute('data-teleport-id', teleportId)
+  }
+
+  // Move all child nodes to container
+  while (sourceElement.firstChild) {
+    teleportContainer.appendChild(sourceElement.firstChild)
+  }
+
+  // Append to target
+  targetElement.appendChild(teleportContainer)
+}
+
+// Return content back to original location
+function returnContent() {
+  if (!teleportContainer || !teleportContainer.parentNode)
+    return
+
+  const sourceElement = document.getElementById(teleportId)
+  if (!sourceElement)
+    return
+
+  // Move content back
+  while (teleportContainer.firstChild) {
+    sourceElement.appendChild(teleportContainer.firstChild)
+  }
+
+  // Remove container
+  teleportContainer.parentNode.removeChild(teleportContainer)
+  teleportContainer = null
+}
+
+// Initialize teleport
+if (typeof window !== 'undefined') {
+  if (defer) {
+    // Defer until next tick
+    window.addEventListener('DOMContentLoaded', () => {
+      setTimeout(teleport, 0)
+    })
+  }
+  else {
+    // Immediate
+    window.addEventListener('DOMContentLoaded', teleport)
+  }
+
+  // Cleanup on page unload
+  window.addEventListener('beforeunload', returnContent)
+}
+</script>
+
+@if(disabled)
+  <!-- Render in place if disabled -->
+  <slot />
+@else
+  <!-- Source container -->
+  <div id="{{ teleportId }}" data-teleport-source="true">
+    <slot />
+  </div>
+@endif
+
+<script>
+// Trigger teleport after render
+if (typeof window !== 'undefined' && document.readyState === 'complete') {
+  if (defer) {
+    setTimeout(teleport, 0)
+  }
+  else {
+    teleport()
+  }
+}
+</script>

package/dist/TextInput-zx9kgr79.stx

@@ -0,0 +1,146 @@
+<script>
+export const value = $props.value || ''
+export const onChange = $props.onChange || (() => {})
+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 || ''
+
+// 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',
+}
+
+// Icon size classes
+const iconSizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+}
+
+// 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'
+  : 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 hasValue = value && value.length > 0
+</script>
+
+<div class="w-full {{ className }}">
+  @if(label)
+    <label for="input-{{ label }}" class="{{ labelClasses }}">
+      {{ label }}
+      @if(required)
+        <span class="text-red-500 ml-1">*</span>
+      @endif
+    </label>
+  @endif
+
+  <div class="relative">
+    @if(leftIcon)
+      <!-- Left icon -->
+      <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" innerHTML="{!! leftIcon !!}"></span>
+      </div>
+    @endif
+
+    <input
+      type="text"
+      id="input-{{ label }}"
+      class="{{ inputClasses }}"
+      value="{{ value }}"
+      placeholder="{{ placeholder }}"
+      disabled="{{ disabled }}"
+      readonly="{{ readonly }}"
+      required="{{ required }}"
+      @if(maxLength)maxlength="{{ maxLength }}"@endif
+      oninput="handleInput(event)"
+      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @if(helperText)aria-describedby="helper-text"@endif
+    />
+
+    @if(clearable && hasValue && !disabled && !readonly)
+      <!-- Clear button -->
+      <div class="absolute inset-y-0 right-0 flex items-center pr-3">
+        <button
+          type="button"
+          onclick="handleClear()"
+          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>
+    @else
+      @if(rightIcon && !clearable)
+        <!-- Right icon -->
+        <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" innerHTML="{!! rightIcon !!}"></span>
+        </div>
+      @endif
+    @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">
+          {{ value.length }} / {{ maxLength }}
+        </p>
+      @endif
+    </div>
+  @endif
+</div>
+
+<script>
+function handleInput(event) {
+  const newValue = event.target.value
+
+  if (onChange) {
+    onChange(newValue)
+  }
+}
+
+function handleClear() {
+  if (onChange) {
+    onChange('')
+  }
+}
+</script>

package/dist/Textarea-5xvmrb0z.stx

@@ -0,0 +1,119 @@
+<script>
+export const value = $props.value || ''
+export const onChange = $props.onChange || (() => {})
+export const placeholder = $props.placeholder || ''
+export const disabled = $props.disabled || false
+export const readonly = $props.readonly || false
+export const rows = $props.rows || 4
+export const autoResize = $props.autoResize || false
+export const maxRows = $props.maxRows || 10
+export const error = $props.error || false
+export const label = $props.label || ''
+export const helperText = $props.helperText || ''
+export const required = $props.required || false
+export const maxLength = $props.maxLength
+export const showCount = $props.showCount || false
+export const resize = $props.resize || 'vertical' // 'none' | 'vertical' | 'horizontal' | 'both'
+export const className = $props.className || ''
+
+// Resize classes
+const resizeClasses = {
+  none: 'resize-none',
+  vertical: 'resize-y',
+  horizontal: 'resize-x',
+  both: 'resize',
+}
+
+// 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 px-4 py-2 text-base 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'
+
+export const textareaClasses = `${baseClasses} ${stateClasses} ${disabledClasses} ${resizeClasses[resize]} ${className}`.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()
+</script>
+
+<div class="w-full">
+  @if(label)
+    <label for="textarea-input" class="{{ labelClasses }}">
+      {{ label }}
+      @if(required)
+        <span class="text-red-500 ml-1">*</span>
+      @endif
+    </label>
+  @endif
+
+  <textarea
+    id="textarea-input"
+    class="{{ textareaClasses }}"
+    rows="{{ rows }}"
+    placeholder="{{ placeholder }}"
+    disabled="{{ disabled }}"
+    readonly="{{ readonly }}"
+    required="{{ required }}"
+    @if(maxLength)maxlength="{{ maxLength }}"@endif
+    oninput="handleInput(event)"
+    aria-invalid="{{ error ? 'true' : 'false' }}"
+    @if(helperText)aria-describedby="helper-text"@endif
+  >{{ value }}</textarea>
+
+  @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">
+          {{ value.length }} / {{ maxLength }}
+        </p>
+      @endif
+    </div>
+  @endif
+</div>
+
+<script>
+function handleInput(event) {
+  const textarea = event.target
+  const newValue = textarea.value
+
+  if (autoResize && typeof window !== 'undefined') {
+    // Auto-resize functionality
+    textarea.style.height = 'auto'
+    const scrollHeight = textarea.scrollHeight
+    const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight)
+    const maxHeight = lineHeight * maxRows
+
+    textarea.style.height = Math.min(scrollHeight, maxHeight) + 'px'
+    textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden'
+  }
+
+  if (onChange) {
+    onChange(newValue)
+  }
+}
+
+// Initialize auto-resize on mount
+if (autoResize && typeof window !== 'undefined') {
+  window.addEventListener('DOMContentLoaded', () => {
+    const textarea = document.getElementById('textarea-input')
+    if (textarea && value) {
+      // Trigger initial resize
+      textarea.dispatchEvent(new Event('input'))
+    }
+  })
+}
+</script>

package/dist/Tooltip-5ehqsy49.stx

@@ -0,0 +1,76 @@
+<script>
+export const content = $props.content || ''
+export const position = $props.position || 'top'
+export const delay = $props.delay || 0
+export const className = $props.className || ''
+export const show = $props.show || false
+export const disabled = $props.disabled || false
+
+// Position classes
+const positionClasses = {
+  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+}
+
+// Arrow classes
+const arrowClasses = {
+  top: 'top-full left-1/2 -translate-x-1/2 border-t-gray-900 dark:border-t-gray-700',
+  bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-gray-900 dark:border-b-gray-700',
+  left: 'left-full top-1/2 -translate-y-1/2 border-l-gray-900 dark:border-l-gray-700',
+  right: 'right-full top-1/2 -translate-y-1/2 border-r-gray-900 dark:border-r-gray-700',
+}
+
+export const tooltipClasses = `absolute z-50 px-3 py-2 text-sm font-medium text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg whitespace-nowrap pointer-events-none opacity-0 transition-opacity duration-200 ${positionClasses[position]} ${className}`.trim()
+export const arrowClass = `absolute w-0 h-0 border-4 border-transparent ${arrowClasses[position]}`.trim()
+
+let isVisible = show
+let timeoutId = null
+</script>
+
+<div class="relative inline-block {{ disabled ? 'cursor-not-allowed' : '' }}">
+  <!-- Trigger element (slot) -->
+  <div
+    onmouseenter="handleMouseEnter()"
+    onmouseleave="handleMouseLeave()"
+    onfocus="handleMouseEnter()"
+    onblur="handleMouseLeave()"
+  >
+    <slot />
+  </div>
+
+  <!-- Tooltip -->
+  @if(isVisible && !disabled)
+    <div
+      class="{{ tooltipClasses }}"
+      role="tooltip"
+      style="opacity: 1"
+    >
+      {{ content }}
+      <div class="{{ arrowClass }}"></div>
+    </div>
+  @endif
+</div>
+
+<script>
+function handleMouseEnter() {
+  if (disabled) return
+
+  if (delay > 0) {
+    timeoutId = setTimeout(() => {
+      isVisible = true
+    }, delay)
+  } else {
+    isVisible = true
+  }
+}
+
+function handleMouseLeave() {
+  if (timeoutId) {
+    clearTimeout(timeoutId)
+    timeoutId = null
+  }
+  isVisible = false
+}
+</script>

package/dist/Transition-2j39s044.stx

@@ -0,0 +1,174 @@
+<script>
+export const show = $props.show !== false
+export const enter = $props.enter || 'transition-opacity duration-300'
+export const enterFrom = $props.enterFrom || 'opacity-0'
+export const enterTo = $props.enterTo || 'opacity-100'
+export const leave = $props.leave || 'transition-opacity duration-200'
+export const leaveFrom = $props.leaveFrom || 'opacity-100'
+export const leaveTo = $props.leaveTo || 'opacity-0'
+export const appear = $props.appear || false
+export const appearFrom = $props.appearFrom || enterFrom
+export const appearTo = $props.appearTo || enterTo
+export const mode = $props.mode || 'in-out' // 'in-out' | 'out-in' | 'default'
+export const duration = $props.duration || 300
+export const delay = $props.delay || 0
+export const preset = $props.preset || ''
+export const onBeforeEnter = $props.onBeforeEnter
+export const onEnter = $props.onEnter
+export const onAfterEnter = $props.onAfterEnter
+export const onBeforeLeave = $props.onBeforeLeave
+export const onLeave = $props.onLeave
+export const onAfterLeave = $props.onAfterLeave
+export const className = $props.className || ''
+
+// Preset transitions
+const presets = {
+  fade: {
+    enter: 'transition-opacity',
+    enterFrom: 'opacity-0',
+    enterTo: 'opacity-100',
+    leave: 'transition-opacity',
+    leaveFrom: 'opacity-100',
+    leaveTo: 'opacity-0',
+  },
+  slide: {
+    enter: 'transition-transform',
+    enterFrom: 'translate-y-2',
+    enterTo: 'translate-y-0',
+    leave: 'transition-transform',
+    leaveFrom: 'translate-y-0',
+    leaveTo: 'translate-y-2',
+  },
+  slideLeft: {
+    enter: 'transition-transform',
+    enterFrom: 'translate-x-full',
+    enterTo: 'translate-x-0',
+    leave: 'transition-transform',
+    leaveFrom: 'translate-x-0',
+    leaveTo: '-translate-x-full',
+  },
+  slideRight: {
+    enter: 'transition-transform',
+    enterFrom: '-translate-x-full',
+    enterTo: 'translate-x-0',
+    leave: 'transition-transform',
+    leaveFrom: 'translate-x-0',
+    leaveTo: 'translate-x-full',
+  },
+  scale: {
+    enter: 'transition-transform',
+    enterFrom: 'scale-95',
+    enterTo: 'scale-100',
+    leave: 'transition-transform',
+    leaveFrom: 'scale-100',
+    leaveTo: 'scale-95',
+  },
+  rotate: {
+    enter: 'transition-transform',
+    enterFrom: 'rotate-12 scale-95',
+    enterTo: 'rotate-0 scale-100',
+    leave: 'transition-transform',
+    leaveFrom: 'rotate-0 scale-100',
+    leaveTo: '-rotate-12 scale-95',
+  },
+  zoom: {
+    enter: 'transition-all',
+    enterFrom: 'scale-0 opacity-0',
+    enterTo: 'scale-100 opacity-100',
+    leave: 'transition-all',
+    leaveFrom: 'scale-100 opacity-100',
+    leaveTo: 'scale-0 opacity-0',
+  },
+}
+
+// Apply preset if specified
+const presetTransition = preset && presets[preset] ? presets[preset] : {}
+const finalEnter = presetTransition.enter || enter
+const finalEnterFrom = presetTransition.enterFrom || enterFrom
+const finalEnterTo = presetTransition.enterTo || enterTo
+const finalLeave = presetTransition.leave || leave
+const finalLeaveFrom = presetTransition.leaveFrom || leaveFrom
+const finalLeaveTo = presetTransition.leaveTo || leaveTo
+
+export let isEntering = false
+export let isLeaving = false
+export let shouldRender = show
+export let hasAppeared = false
+
+const transitionClasses = show
+  ? isEntering
+    ? `${finalEnter} ${finalEnterFrom}`
+    : `${finalEnterTo}`
+  : isLeaving
+    ? `${finalLeave} ${finalLeaveFrom}`
+    : `${finalLeaveTo}`
+
+const componentClasses = `${transitionClasses} ${className}`.trim()
+const durationStyle = `transition-duration: ${duration}ms; transition-delay: ${delay}ms;`
+</script>
+
+@if(shouldRender)
+  <div class="{{ componentClasses }}" style="{{ durationStyle }}">
+    <slot />
+  </div>
+@endif
+
+<script>
+// Handle transitions with lifecycle callbacks
+if (typeof window !== 'undefined') {
+  let previousShow = show
+
+  // Watch for show changes
+  function checkTransition() {
+    if (show !== previousShow) {
+      if (show && !shouldRender) {
+        // Entering
+        if (onBeforeEnter) onBeforeEnter()
+
+        shouldRender = true
+        isEntering = true
+
+        setTimeout(() => {
+          if (onEnter) onEnter()
+        }, delay)
+
+        setTimeout(() => {
+          isEntering = false
+          if (onAfterEnter) onAfterEnter()
+        }, duration + delay)
+
+      } else if (!show && shouldRender) {
+        // Leaving
+        if (onBeforeLeave) onBeforeLeave()
+
+        isLeaving = true
+
+        setTimeout(() => {
+          if (onLeave) onLeave()
+        }, delay)
+
+        setTimeout(() => {
+          isLeaving = false
+          shouldRender = false
+          if (onAfterLeave) onAfterLeave()
+        }, duration + delay)
+      }
+
+      previousShow = show
+    }
+
+    requestAnimationFrame(checkTransition)
+  }
+
+  requestAnimationFrame(checkTransition)
+
+  // Handle initial appear
+  if (appear && show && !hasAppeared) {
+    hasAppeared = true
+    isEntering = true
+    setTimeout(() => {
+      isEntering = false
+    }, duration + delay)
+  }
+}
+</script>