@stacksjs/components 0.2.93 → 0.2.94

package/src/ui/dropdown/README.md

@@ -1,114 +0,0 @@
-# Dropdown Component
-
-A flexible dropdown menu component inspired by Headless UI, built with STX and headwind.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<Dropdown>
-  <DropdownButton className="btn-primary">Options</DropdownButton>
-
-  <DropdownItems>
-    <DropdownItem>Edit</DropdownItem>
-    <DropdownItem>Delete</DropdownItem>
-  </DropdownItems>
-</Dropdown>
-```
-
-## Props
-
-### Dropdown
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'div'` | HTML element to render |
-
-### DropdownButton
-| 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 |
-
-### DropdownItems
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'div'` | HTML element to render |
-| `static` | `boolean` | `false` | Keep visible regardless of state |
-
-### DropdownItem
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | `''` | Additional CSS classes |
-| `as` | `string` | `'div'` | HTML element to render |
-| `disabled` | `boolean` | `false` | Disable the item |
-| `onClick` | `(e: Event) => void` | - | Click handler |
-
-## Examples
-
-### Basic Dropdown
-
-```stx
-<Dropdown>
-  <DropdownButton className="px-4 py-2 bg-blue-500 text-white rounded-md">
-    Actions
-  </DropdownButton>
-
-  <DropdownItems className="w-56">
-    <DropdownItem>Edit</DropdownItem>
-    <DropdownItem>Duplicate</DropdownItem>
-    <DropdownItem disabled>Archive (coming soon)</DropdownItem>
-    <DropdownItem>Delete</DropdownItem>
-  </DropdownItems>
-</Dropdown>
-```
-
-### With Icons
-
-```stx
-<DropdownItem>
-  <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-  </svg>
-  Edit
-</DropdownItem>
-```
-
-### Grouped Items
-
-```stx
-<DropdownItems>
-  <div class="px-1 py-1">
-    <DropdownItem>Edit</DropdownItem>
-    <DropdownItem>Duplicate</DropdownItem>
-  </div>
-
-  <div class="px-1 py-1">
-    <DropdownItem>Archive</DropdownItem>
-    <DropdownItem>Move</DropdownItem>
-  </div>
-
-  <div class="px-1 py-1">
-    <DropdownItem>Delete</DropdownItem>
-  </div>
-</DropdownItems>
-```
-
-## Features
-
-- Automatic positioning
-- Keyboard navigation
-- Focus management
-- Dark mode support
-- Accessible (WAI-ARIA)
-- Customizable styling with headwind
-- Disabled state support
-- Active state on hover

package/src/ui/dropdown/index.ts

@@ -1,29 +0,0 @@
-export { default as Dropdown } from './Dropdown.stx'
-export { default as DropdownButton } from './DropdownButton.stx'
-export { default as DropdownItem } from './DropdownItem.stx'
-export { default as DropdownItems } from './DropdownItems.stx'
-
-export interface DropdownProps {
-  className?: string
-  as?: string
-}
-
-export interface DropdownButtonProps {
-  className?: string
-  as?: string
-  disabled?: boolean
-  onClick?: (e: Event) => void
-}
-
-export interface DropdownItemsProps {
-  className?: string
-  as?: string
-  static?: boolean
-}
-
-export interface DropdownItemProps {
-  className?: string
-  as?: string
-  disabled?: boolean
-  onClick?: (e: Event) => void
-}

package/src/ui/form/Form.stx

@@ -1,95 +0,0 @@
-<script server>
-export const action = $props.action || ''
-export const method = $props.method || 'POST'
-export const validationSchema = $props.validationSchema || {}
-export const className = $props.className || ''
-
-export const formClasses = `space-y-6 ${className}`.trim()
-export const errorClasses = `mt-1 text-sm text-red-600 dark:text-red-400`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const validationSchema = {{ validationSchema }}
-
-const errors = state({})
-const isSubmitting = state(false)
-const submitCount = state(0)
-
-function validateField(name, value, allValues) {
-  const schema = validationSchema[name]
-  if (!schema) return null
-  if (schema.required && !value) {
-    return schema.requiredMessage || `${name} is required`
-  }
-  if (schema.minLength && String(value).length < schema.minLength) {
-    return schema.minLengthMessage || `${name} must be at least ${schema.minLength} characters`
-  }
-  if (schema.maxLength && String(value).length > schema.maxLength) {
-    return schema.maxLengthMessage || `${name} must be at most ${schema.maxLength} characters`
-  }
-  if (schema.pattern && !new RegExp(schema.pattern).test(value)) {
-    return schema.patternMessage || `${name} is invalid`
-  }
-  return null
-}
-
-function validateForm(values) {
-  const next = {}
-  let valid = true
-  for (const name of Object.keys(validationSchema)) {
-    const err = validateField(name, values[name], values)
-    if (err) {
-      next[name] = err
-      valid = false
-    }
-  }
-  errors.set(next)
-  return valid
-}
-
-async function onSubmit(event) {
-  event.preventDefault()
-  submitCount.set(submitCount() + 1)
-
-  const formData = new FormData(event.target)
-  const values = {}
-  for (const [k, v] of formData.entries()) values[k] = v
-
-  if (!validateForm(values)) {
-    emit('error', errors())
-    return
-  }
-
-  isSubmitting.set(true)
-  try {
-    emit('submit', values)
-  }
-  finally {
-    isSubmitting.set(false)
-  }
-}
-
-function setErrors(next) {
-  errors.set({ ...errors(), ...next })
-}
-
-function reset(form) {
-  errors.set({})
-  isSubmitting.set(false)
-  submitCount.set(0)
-  if (form?.reset) form.reset()
-}
-
-defineExpose({ errors, isSubmitting, submitCount, setErrors, reset, validateForm })
-</script>
-
-<form
-  class="{{ formClasses }}"
-  @if(action)action="{{ action }}"@endif
-  method="{{ method }}"
-  @submit="onSubmit($event)"
-  novalidate
->
-  <slot />
-</form>

package/src/ui/form/index.ts

@@ -1,67 +0,0 @@
-import type { PropSchema, ValidationResult } from '../../utils/prop-validation'
-import { createPropValidator, PropTypes } from '../../utils/prop-validation'
-
-export { default as Form } from './Form.stx'
-
-export interface FieldSchema {
-  required?: boolean
-  requiredMessage?: string
-  minLength?: number
-  minLengthMessage?: string
-  maxLength?: number
-  maxLengthMessage?: string
-  pattern?: RegExp
-  patternMessage?: string
-  validate?: (value: any, values: Record<string, any>) => string | null | undefined
-}
-
-export interface ValidationSchema {
-  [fieldName: string]: FieldSchema
-}
-
-export interface FormHelpers {
-  setErrors: (errors: Record<string, string>) => void
-  setValues: (values: Record<string, any>) => void
-  resetForm: () => void
-}
-
-export interface FormProps {
-  action?: string
-  method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
-  validationSchema?: ValidationSchema
-  initialValues?: Record<string, any>
-  validateOnChange?: boolean
-  validateOnBlur?: boolean
-  onSubmit?: (values: Record<string, any>, helpers: FormHelpers) => void | Promise<void>
-  onError?: (errors: Record<string, string> | Error) => void
-  className?: string
-}
-
-export interface FieldProps {
-  name: string
-  value: any
-  error?: string
-  touched?: boolean
-  onChange: (event: Event) => void
-  onBlur: (event: Event) => void
-}
-
-/**
- * Form prop validation schema
- */
-export const formPropSchema: PropSchema = {
-  action: PropTypes.string,
-  method: PropTypes.oneOf(['GET', 'POST', 'PUT', 'DELETE', 'PATCH']),
-  validationSchema: PropTypes.object,
-  initialValues: PropTypes.object,
-  validateOnChange: PropTypes.boolean,
-  validateOnBlur: PropTypes.boolean,
-  onSubmit: PropTypes.func,
-  onError: PropTypes.func,
-  className: PropTypes.string,
-}
-
-/**
- * Validate Form component props
- */
-export const validateFormProps: (props: Record<string, any>) => ValidationResult = createPropValidator('Form', formPropSchema)

package/src/ui/heatmap/Heatmap.stx

@@ -1,294 +0,0 @@
-<script server>
-export const id = $props.id || `stx-heatmap-${Math.random().toString(36).slice(2, 8)}`
-export const mode = $props.mode || 'overlay'
-export const width = $props.width || null
-export const height = $props.height || null
-export const radius = $props.radius || 20
-export const blur = $props.blur || 15
-export const opacity = $props.opacity || 0.6
-export const showLegend = $props.showLegend !== false
-export const interactive = $props.interactive || false
-export const dataSource = $props.dataSource || 'auto'
-export const endpoint = $props.endpoint || ''
-export const colorScheme = $props.colorScheme || 'default'
-
-const colorSchemes = {
-  default: ['#0000ff', '#00ffff', '#00ff00', '#ffff00', '#ff0000'],
-  fire: ['#000000', '#ff0000', '#ffff00', '#ffffff'],
-  cool: ['#000033', '#0066ff', '#00ccff', '#ffffff'],
-  grayscale: ['#000000', '#444444', '#888888', '#cccccc', '#ffffff'],
-}
-
-export const colors = colorSchemes[colorScheme] || colorSchemes.default
-</script>
-
-<div
-  id="{{ id }}"
-  class="stx-heatmap stx-heatmap--{{ mode }}"
-  data-heatmap-radius="{{ radius }}"
-  data-heatmap-blur="{{ blur }}"
-  data-heatmap-opacity="{{ opacity }}"
-  data-heatmap-colors="{{ JSON.stringify(colors) }}"
-  data-heatmap-source="{{ dataSource }}"
-  @if(endpoint)
-  data-heatmap-endpoint="{{ endpoint }}"
-  @endif
-  @if(width)
-  style="width: {{ width }}px; {{ height ? 'height: ' + height + 'px;' : '' }}"
-  @endif
->
-  <canvas class="stx-heatmap__canvas"></canvas>
-
-  @if(showLegend)
-  <div class="stx-heatmap__legend">
-    <span class="stx-heatmap__legend-label">Low</span>
-    <div class="stx-heatmap__legend-gradient" style="background: linear-gradient(to right, {{ colors.join(', ') }})"></div>
-    <span class="stx-heatmap__legend-label">High</span>
-  </div>
-  @endif
-
-  @if(interactive)
-  <div class="stx-heatmap__controls">
-    <button type="button" class="stx-heatmap__control" data-action="zoom-in" aria-label="Zoom in">+</button>
-    <button type="button" class="stx-heatmap__control" data-action="zoom-out" aria-label="Zoom out">-</button>
-    <button type="button" class="stx-heatmap__control" data-action="reset" aria-label="Reset view">Reset</button>
-  </div>
-  @endif
-
-  {{ slot }}
-</div>
-
-<style>
-.stx-heatmap {
-  position: relative;
-  overflow: hidden;
-}
-
-.stx-heatmap--overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 9999;
-}
-
-.stx-heatmap--standalone {
-  display: block;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  background: #f9f9f9;
-}
-
-.stx-heatmap--thumbnail {
-  display: inline-block;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  background: #f9f9f9;
-}
-
-.stx-heatmap__canvas {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.stx-heatmap__legend {
-  position: absolute;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  font-size: 12px;
-  pointer-events: auto;
-}
-
-.stx-heatmap__legend-gradient {
-  width: 100px;
-  height: 12px;
-  border-radius: 2px;
-}
-
-.stx-heatmap__legend-label {
-  color: #666;
-}
-
-.stx-heatmap__controls {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  pointer-events: auto;
-}
-
-.stx-heatmap__control {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.9);
-  cursor: pointer;
-  font-size: 16px;
-  transition: background-color 0.2s;
-}
-
-.stx-heatmap__control:hover {
-  background: #f0f0f0;
-}
-
-.stx-heatmap__control:active {
-  background: #e0e0e0;
-}
-</style>
-
-<script client>
-(function() {
-  const container = document.getElementById('{{ id }}');
-  if (!container) return;
-
-  const canvas = container.querySelector('.stx-heatmap__canvas');
-  const ctx = canvas.getContext('2d');
-
-  const config = {
-    radius: parseInt(container.dataset.heatmapRadius) || 20,
-    blur: parseInt(container.dataset.heatmapBlur) || 15,
-    opacity: parseFloat(container.dataset.heatmapOpacity) || 0.6,
-    colors: JSON.parse(container.dataset.heatmapColors || '[]'),
-    source: container.dataset.heatmapSource || 'auto',
-    endpoint: container.dataset.heatmapEndpoint || ''
-  };
-
-  // Resize canvas to match container
-  function resizeCanvas() {
-    const rect = container.getBoundingClientRect();
-    canvas.width = rect.width || window.innerWidth;
-    canvas.height = rect.height || window.innerHeight;
-  }
-
-  // Create color gradient for heatmap
-  function createGradient(colors) {
-    const gradientCanvas = document.createElement('canvas');
-    gradientCanvas.width = 256;
-    gradientCanvas.height = 1;
-    const gradientCtx = gradientCanvas.getContext('2d');
-    const gradient = gradientCtx.createLinearGradient(0, 0, 256, 0);
-
-    colors.forEach((color, i) => {
-      gradient.addColorStop(i / (colors.length - 1), color);
-    });
-
-    gradientCtx.fillStyle = gradient;
-    gradientCtx.fillRect(0, 0, 256, 1);
-    return gradientCtx.getImageData(0, 0, 256, 1).data;
-  }
-
-  // Render heatmap from data points
-  function render(points) {
-    resizeCanvas();
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    // Draw heat points
-    points.forEach(function(p) {
-      const x = (p.x / 100) * canvas.width;
-      const y = (p.y / 100) * canvas.height;
-      const intensity = p.type === 'click' ? 1 : 0.3;
-
-      const gradient = ctx.createRadialGradient(x, y, 0, x, y, config.radius);
-      gradient.addColorStop(0, 'rgba(0,0,0,' + intensity + ')');
-      gradient.addColorStop(1, 'rgba(0,0,0,0)');
-      ctx.fillStyle = gradient;
-      ctx.fillRect(x - config.radius, y - config.radius, config.radius * 2, config.radius * 2);
-    });
-
-    // Apply blur
-    if (config.blur > 0) {
-      ctx.filter = 'blur(' + config.blur + 'px)';
-      ctx.drawImage(canvas, 0, 0);
-      ctx.filter = 'none';
-    }
-
-    // Colorize
-    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    const pixels = imageData.data;
-    const gradientColors = createGradient(config.colors);
-
-    for (let i = 0; i < pixels.length; i += 4) {
-      const alpha = pixels[i + 3];
-      if (alpha > 0) {
-        const colorIndex = Math.min(alpha, 255) * 4;
-        pixels[i] = gradientColors[colorIndex];
-        pixels[i + 1] = gradientColors[colorIndex + 1];
-        pixels[i + 2] = gradientColors[colorIndex + 2];
-        pixels[i + 3] = Math.round(alpha * config.opacity);
-      }
-    }
-
-    ctx.putImageData(imageData, 0, 0);
-  }
-
-  // Load data based on source
-  function loadData() {
-    if (config.source === 'auto' && window.stxHeatmap) {
-      render(window.stxHeatmap.getData().points);
-    } else if (config.source === 'endpoint' && config.endpoint) {
-      fetch(config.endpoint)
-        .then(r => r.json())
-        .then(data => render(data.points || data))
-        .catch(console.error);
-    }
-  }
-
-  // Initialize
-  resizeCanvas();
-  loadData();
-
-  // Handle resize
-  window.addEventListener('resize', function() {
-    resizeCanvas();
-    loadData();
-  });
-
-  // Handle interactive controls
-  const controls = container.querySelectorAll('.stx-heatmap__control');
-  let zoom = 1;
-  let panX = 0;
-  let panY = 0;
-
-  controls.forEach(function(btn) {
-    btn.addEventListener('click', function() {
-      const action = btn.dataset.action;
-      if (action === 'zoom-in') {
-        zoom = Math.min(zoom * 1.2, 5);
-      } else if (action === 'zoom-out') {
-        zoom = Math.max(zoom / 1.2, 0.5);
-      } else if (action === 'reset') {
-        zoom = 1;
-        panX = 0;
-        panY = 0;
-      }
-      canvas.style.transform = 'scale(' + zoom + ') translate(' + panX + 'px, ' + panY + 'px)';
-    });
-  });
-
-  // Expose API
-  container.stxHeatmap = {
-    render: render,
-    refresh: loadData,
-    setData: function(points) { render(points); },
-    getCanvas: function() { return canvas; },
-    toDataURL: function() { return canvas.toDataURL(); }
-  };
-})();
-</script>