@stacksjs/components 0.2.92 → 0.2.94

package/src/ui/payment/index.ts

@@ -1,59 +0,0 @@
-export { default as Checkout } from './Checkout.stx'
-export { default as DefaultPaymentMethod } from './DefaultPaymentMethod.stx'
-export { default as PaymentMethods } from './PaymentMethods.stx'
-export { default as SubscriptionCheckout } from './SubscriptionCheckout.stx'
-
-export interface PaymentMethod {
-  id: string | number
-  brand: string
-  last_four: string
-  exp_month: number
-  exp_year: number
-  is_default?: boolean
-}
-
-export interface PaymentMethodsProps {
-  paymentMethods: PaymentMethod[]
-  onDeletePaymentMethod?: (id: string | number) => void
-  onMakeDefault?: (id: string | number) => void
-  isLoading?: boolean
-  className?: string
-}
-
-export interface DefaultPaymentMethodProps {
-  paymentMethod: PaymentMethod | null
-  isLoading?: boolean
-  className?: string
-}
-
-export interface Product {
-  id: string | number
-  name: string
-  price: number // in cents
-  images?: string
-  quantity?: number
-}
-
-export interface SubscriptionCheckoutProps {
-  products: Product[]
-  stripePublicKey: string
-  apiUrl: string
-  onSubmit?: (result: { success: boolean }) => void
-  onRemoveProduct?: (id: string | number) => void
-  shipping?: number
-  taxes?: number
-  className?: string
-}
-
-export interface CheckoutProps {
-  products: Product[]
-  redirectUrl: string
-  mode: 'one-time' | 'subscription'
-  stripePublicKey: string
-  apiUrl: string
-  onSubmit?: (result: { success: boolean }) => void
-  onRemoveProduct?: (id: string | number) => void
-  shipping?: number
-  taxes?: number
-  className?: string
-}

package/src/ui/popover/Popover.stx

@@ -1,60 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-
-const baseClasses = 'relative'
-export const popoverClasses = `${baseClasses} ${className}`.trim()
-export const popoverInstanceId = `stx-pop-${Math.random().toString(36).slice(2, 11)}`
-</script>
-
-<script client>
-const emit = defineEmits()
-const popoverInstanceId = {{ popoverInstanceId }}
-const isOpen = state(false)
-let rootEl = null
-let outsideHandler = null
-
-function open() { if (!isOpen()) { isOpen.set(true); emit('change', true) } }
-function close() { if (isOpen()) { isOpen.set(false); emit('change', false) } }
-function toggle() { isOpen() ? close() : open() }
-
-function onToggle(event) { event.stopPropagation(); toggle() }
-function onClose(event) { event.stopPropagation(); close() }
-function onOpen(event) { event.stopPropagation(); open() }
-
-onMount(() => {
-  rootEl = document.querySelector(`[data-popover-id="${popoverInstanceId}"]`)
-  outsideHandler = (event) => {
-    if (!isOpen()) return
-    if (rootEl && !rootEl.contains(event.target)) close()
-  }
-  document.addEventListener('click', outsideHandler, true)
-})
-
-onDestroy(() => {
-  if (outsideHandler) document.removeEventListener('click', outsideHandler, true)
-})
-
-const dataState = derived(() => isOpen() ? 'open' : 'closed')
-
-defineExpose({ isOpen, toggle, open, close })
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ popoverClasses }}"
-  data-stx-popover
-  data-popover-id="{{ popoverInstanceId }}"
-  :data-state="dataState()"
-  @stx:popover-toggle="onToggle($event)"
-  @stx:popover-open="onOpen($event)"
-  @stx:popover-close="onClose($event)"
->
-  <slot />
-</component>
-
-<style>
-[data-stx-popover][data-state="closed"] [data-stx-popover-panel] {
-  display: none;
-}
-</style>

package/src/ui/popover/PopoverButton.stx

@@ -1,29 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const as = $props.as || 'button'
-export const disabled = $props.disabled || false
-
-const baseClasses = 'inline-flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75'
-export const buttonClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const isDisabled = {{ disabled }}
-
-function onClick(event) {
-  if (isDisabled) return
-  emit('click', event)
-  event.currentTarget.dispatchEvent(new CustomEvent('stx:popover-toggle', { bubbles: true }))
-}
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ buttonClasses }}"
-  data-stx-popover-button
-  @if(disabled)disabled aria-disabled="true"@endif
-  @click="onClick($event)"
->
-  <slot />
-</component>

package/src/ui/popover/PopoverPanel.stx

@@ -1,23 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-export const position = $props.position || 'bottom'
-
-const positionClasses = {
-  top: 'bottom-full mb-2',
-  bottom: 'top-full mt-2',
-  left: 'right-full mr-2',
-  right: 'left-full ml-2',
-}
-
-const baseClasses = 'absolute z-10 rounded-lg bg-white dark:bg-neutral-800 p-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
-export const panelClasses = `${baseClasses} ${positionClasses[position]} ${className}`.trim()
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ panelClasses }}"
-  data-stx-popover-panel
->
-  <slot />
-</component>

package/src/ui/popover/README.md

@@ -1,91 +0,0 @@
-# Popover Component
-
-A floating panel that displays rich content anchored to a button or element.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<Popover>
-  <PopoverButton className="px-4 py-2 bg-blue-500 text-white rounded">
-    Solutions
-  </PopoverButton>
-
-  <PopoverPanel className="w-64">
-    <div class="grid gap-4">
-      <a href="/analytics">Analytics</a>
-      <a href="/engagement">Engagement</a>
-      <a href="/security">Security</a>
-    </div>
-  </PopoverPanel>
-</Popover>
-```
-
-## Props
-
-### Popover
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'div'` | HTML element to render |
-
-### PopoverButton
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'button'` | HTML element to render |
-| `disabled` | `boolean` | `false` | Disable the button |
-| `onClick` | `(e: Event) => void` | - | Click handler |
-
-### PopoverPanel
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'div'` | HTML element to render |
-| `static` | `boolean` | `false` | Keep visible regardless of state |
-| `position` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Panel position |
-
-## Examples
-
-### Solutions Menu
-
-```stx
-<PopoverPanel className="w-80">
-  <div class="grid gap-8">
-    <a href="/analytics" class="flex items-start gap-4 group">
-      <div class="shrink-0 text-blue-500">
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-        </svg>
-      </div>
-      <div>
-        <p class="font-semibold text-neutral-900 dark:text-white group-hover:text-blue-500">Analytics</p>
-        <p class="text-sm text-neutral-500 dark:text-neutral-400">Get a better understanding of your traffic</p>
-      </div>
-    </a>
-  </div>
-</PopoverPanel>
-```
-
-### Different Positions
-
-```stx
-<PopoverPanel position="top">Content appears above</PopoverPanel>
-
-<PopoverPanel position="left">Content appears to the left</PopoverPanel>
-```
-
-## Features
-
-- Multiple positioning options
-- Auto-positioning
-- Dark mode support
-- Accessible (WAI-ARIA)
-- Keyboard support
-- Focus management
-- Customizable styling

package/src/ui/popover/index.ts

@@ -1,22 +0,0 @@
-export { default as Popover } from './Popover.stx'
-export { default as PopoverButton } from './PopoverButton.stx'
-export { default as PopoverPanel } from './PopoverPanel.stx'
-
-export interface PopoverProps {
-  className?: string
-  as?: string
-}
-
-export interface PopoverButtonProps {
-  className?: string
-  as?: string
-  disabled?: boolean
-  onClick?: (e: Event) => void
-}
-
-export interface PopoverPanelProps {
-  className?: string
-  as?: string
-  static?: boolean
-  position?: 'top' | 'bottom' | 'left' | 'right'
-}

package/src/ui/portal/Portal.stx

@@ -1,57 +0,0 @@
-<script server>
-export const target = $props.target || 'body'
-export const disabled = $props.disabled || false
-
-export const portalId = `portal-content-${Math.random().toString(36).slice(2, 11)}`
-</script>
-
-<script client>
-const target = {{ target }}
-const isDisabled = {{ disabled }}
-const portalId = {{ portalId }}
-
-let portalContainer = null
-
-function createPortal() {
-  if (isDisabled) return
-  const targetElement = typeof target === 'string' ? document.querySelector(target) : target
-  if (!targetElement) {
-    console.warn(`Portal target "${target}" not found`)
-    return
-  }
-  portalContainer = document.createElement('div')
-  portalContainer.setAttribute('data-portal', 'true')
-  const portalContent = document.getElementById(portalId)
-  if (portalContent) {
-    while (portalContent.firstChild) {
-      portalContainer.appendChild(portalContent.firstChild)
-    }
-  }
-  targetElement.appendChild(portalContainer)
-}
-
-function cleanupPortal() {
-  if (portalContainer && portalContainer.parentNode) {
-    portalContainer.parentNode.removeChild(portalContainer)
-    portalContainer = null
-  }
-}
-
-onMount(() => {
-  setTimeout(createPortal, 0)
-  window.addEventListener('beforeunload', cleanupPortal)
-})
-
-onDestroy(() => {
-  cleanupPortal()
-  window.removeEventListener('beforeunload', cleanupPortal)
-})
-</script>
-
-@if(disabled)
-  <slot />
-@else
-  <div id="{{ portalId }}" style="display: none;">
-    <slot />
-  </div>
-@endif

package/src/ui/portal/index.ts

@@ -1,6 +0,0 @@
-export { default as Portal } from './Portal.stx'
-
-export interface PortalProps {
-  target?: string | HTMLElement
-  disabled?: boolean
-}

package/src/ui/progress/Progress.stx

@@ -1,131 +0,0 @@
-<script server>
-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 || ''
-
-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',
-  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',
-}
-
-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()
-  : `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 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'
-</script>
-
-<script client>
-const max = {{ max }}
-const indeterminate = {{ indeterminate }}
-const circumference = {{ circumference }}
-// Reactive prop binding — parent can drive `value` via signals. See #1704.
-const value = useReactiveProp('value', {{ 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 }}" x-text="percentLabel()"></span>
-      </div>
-    @endif
-
-    <div
-      class="{{ linearTrackClasses }}"
-      role="progressbar"
-      :aria-valuenow="value()"
-      aria-valuemin="0"
-      aria-valuemax="{{ max }}"
-    >
-      <div
-        class="{{ linearBarClasses }}"
-        :style="`width: ${linearWidth()}`"
-      ></div>
-    </div>
-  </div>
-@else
-  <div class="{{ containerClasses }}">
-    <div class="{{ circularSizeClass }} relative">
-      <svg
-        class="transform -rotate-90"
-        width="{{ circularSize }}"
-        height="{{ circularSize }}"
-        role="progressbar"
-        :aria-valuenow="value()"
-        aria-valuemin="0"
-        aria-valuemax="{{ max }}"
-      >
-        <circle
-          class="{{ circularTrackColor }}"
-          cx="{{ circularSize / 2 }}"
-          cy="{{ circularSize / 2 }}"
-          r="{{ radius }}"
-          stroke-width="{{ strokeWidth }}"
-          fill="none"
-        />
-        <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="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" x-text="percentLabel()"></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

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

@@ -1,77 +0,0 @@
-<script server>
-export const checked = $props.checked || false
-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 || ''
-
-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'
-
-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 }}
-// Reactive prop binding — parent can drive `checked` via signals. See #1704.
-const isChecked = useReactiveProp('checked', {{ 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="{{ inputId }}"
-      type="radio"
-      name="{{ name }}"
-      value="{{ value }}"
-      :checked="isChecked()"
-      @if(disabled)disabled@endif
-      @if(required)required@endif
-      class="{{ radioClasses }}"
-      @change="onInputChange($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="{{ inputId }}" 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>

package/src/ui/radio/index.ts

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