@stacksjs/components 0.2.3

package/dist/ui/tooltip/index.d.ts

@@ -0,0 +1,9 @@
+export declare interface TooltipProps {
+  content: string
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  delay?: number
+  show?: boolean
+  disabled?: boolean
+  className?: string
+}
+export { default as Tooltip } from './Tooltip.stx';

package/dist/ui/transition/index.d.ts

@@ -0,0 +1,24 @@
+export declare interface TransitionProps {
+  show?: boolean
+  enter?: string
+  enterFrom?: string
+  enterTo?: string
+  leave?: string
+  leaveFrom?: string
+  leaveTo?: string
+  appear?: boolean
+  appearFrom?: string
+  appearTo?: string
+  mode?: 'in-out' | 'out-in' | 'default'
+  duration?: number
+  delay?: number
+  preset?: 'fade' | 'slide' | 'slideLeft' | 'slideRight' | 'scale' | 'rotate' | 'zoom' | ''
+  onBeforeEnter?: () => void
+  onEnter?: () => void
+  onAfterEnter?: () => void
+  onBeforeLeave?: () => void
+  onLeave?: () => void
+  onAfterLeave?: () => void
+  className?: string
+}
+export { default as Transition } from './Transition.stx';

package/dist/ui/video/index.d.ts

@@ -0,0 +1,15 @@
+export declare interface VideoProps {
+  src: string
+  poster?: string
+  autoplay?: boolean
+  loop?: boolean
+  muted?: boolean
+  controls?: boolean
+  preload?: 'none' | 'metadata' | 'auto'
+  width?: number | string
+  height?: number | string
+  aspectRatio?: '16/9' | '4/3' | '1/1' | string
+  className?: string
+  title?: string
+}
+export { default as Video } from './Video.stx';

package/dist/ui/virtual-list/index.d.ts

@@ -0,0 +1,9 @@
+export declare interface VirtualListProps<T = any> {
+  items: T[]
+  itemHeight: number
+  height: number
+  overscan?: number
+  renderItem?: (item: T, index: number) => string
+  className?: string
+}
+export { default as VirtualList } from './VirtualList.stx';

package/dist/ui/virtual-table/index.d.ts

@@ -0,0 +1,19 @@
+export declare interface VirtualTableColumn<T = any> {
+  key: string
+  label?: string
+  width?: number
+  minWidth?: string
+  render?: (value: any, row: T) => string
+}
+export declare interface VirtualTableProps<T = any> {
+  columns: VirtualTableColumn<T>[]
+  data: T[]
+  rowHeight?: number
+  height?: number
+  headerHeight?: number
+  overscan?: number
+  striped?: boolean
+  hoverable?: boolean
+  className?: string
+}
+export { default as VirtualTable } from './VirtualTable.stx';

package/dist/utils/accessibility.d.ts

@@ -0,0 +1,285 @@
+export declare function generateId(prefix?: any): string;
+/**
+ * Create accessible label and associate with element
+ *
+ * @param text - Label text
+ * @param element - Element to associate with
+ * @param options - Label options
+ * @param options.visible - Whether the label should be visible
+ * @param options.id - Custom ID for the label
+ * @returns Generated label ID
+ */
+export declare function createAriaLabel(text: string, element?: HTMLElement | null, options?: { visible?: boolean, id?: string }): string;
+/**
+ * Create accessible description and associate with element
+ *
+ * @param text - Description text
+ * @param element - Element to associate with
+ * @returns Generated description ID
+ */
+export declare function createAriaDescription(text: string, element?: HTMLElement | null): string;
+/**
+ * Announce message to screen readers
+ *
+ * Creates a live region and announces the message
+ *
+ * @param message - Message to announce
+ * @param priority - Announcement priority
+ */
+export declare function announceToScreenReader(message: string, priority?: AriaLive): void;
+/**
+ * Get all focusable elements within a container
+ *
+ * @param container - Container element
+ * @returns Array of focusable elements
+ */
+export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
+/**
+ * Create a focus trap for modal dialogs and overlays
+ *
+ * Traps keyboard focus within a container element
+ *
+ * @param container - Container element to trap focus within
+ * @param options - Focus trap options
+ * @returns Focus trap instance
+ */
+export declare function createFocusTrap(container: HTMLElement, options?: FocusTrapOptions): FocusTrap;
+export declare function createRovingTabindex(container: HTMLElement, options?: RovingTabindexOptions): () => void;
+/**
+ * Check if element has keyboard focus
+ */
+export declare function hasFocus(element: HTMLElement): boolean;
+/**
+ * Move focus to next/previous element
+ */
+export declare function moveFocus(direction: 'next' | 'previous', from?: HTMLElement): void;
+/**
+ * Check if element is visible to screen readers
+ */
+export declare function isVisibleToScreenReader(element: HTMLElement): boolean;
+/**
+ * Screen reader only text
+ *
+ * Creates visually hidden text that's accessible to screen readers
+ */
+export declare function createScreenReaderText(text: string): HTMLSpanElement;
+/**
+ * Check if reduced motion is preferred
+ */
+export declare function prefersReducedMotion(): boolean;
+/**
+ * Check if high contrast mode is enabled
+ */
+export declare function prefersHighContrast(): boolean;
+/**
+ * Get color scheme preference
+ */
+export declare function getColorSchemePreference(): 'light' | 'dark' | null;
+/**
+ * Skip link helper for keyboard navigation
+ *
+ * Creates a skip link that appears on focus
+ */
+export declare function createSkipLink(targetId: string, text?: any): HTMLAnchorElement;
+/**
+ * Validate ARIA relationships
+ *
+ * Ensures aria-labelledby, aria-describedby, etc. reference valid IDs
+ */
+export declare function validateAriaRelationships(element: HTMLElement): string[];
+/**
+ * Keyboard navigation helpers
+ */
+export declare const KeyboardKeys: {
+  Enter: 'Enter';
+  Space: ' ';
+  Escape: 'Escape';
+  ArrowUp: 'ArrowUp';
+  ArrowDown: 'ArrowDown';
+  ArrowLeft: 'ArrowLeft';
+  ArrowRight: 'ArrowRight';
+  Tab: 'Tab';
+  Home: 'Home';
+  End: 'End';
+  PageUp: 'PageUp';
+  PageDown: 'PageDown'
+};
+/**
+ * ARIA attribute helpers
+ */
+export declare const aria: {
+  /**
+   * Set aria-expanded attribute
+   */
+  setExpanded(element: HTMLElement, expanded: boolean): unknown;
+  /**
+   * Set aria-selected attribute
+   */
+  setSelected(element: HTMLElement, selected: boolean): unknown;
+  /**
+   * Set aria-checked attribute
+   */
+  setChecked(element: HTMLElement, checked: boolean | 'mixed'): unknown;
+  /**
+   * Set aria-disabled attribute
+   */
+  setDisabled(element: HTMLElement, disabled: boolean): unknown;
+  /**
+   * Set aria-hidden attribute
+   */
+  setHidden(element: HTMLElement, hidden: boolean): unknown;
+  /**
+   * Set aria-pressed attribute (for toggle buttons)
+   */
+  setPressed(element: HTMLElement, pressed: boolean): unknown;
+  /**
+   * Set aria-invalid attribute
+   */
+  setInvalid(element: HTMLElement, invalid: boolean): unknown;
+  /**
+   * Set aria-required attribute
+   */
+  setRequired(element: HTMLElement, required: boolean): unknown;
+  /**
+   * Set aria-live region
+   */
+  setLive(element: HTMLElement, live: AriaLive): unknown;
+  /**
+   * Set aria-busy attribute
+   */
+  setBusy(element: HTMLElement, busy: boolean): unknown
+};
+/**
+ * Focus trap options
+ */
+export declare interface FocusTrapOptions {
+  initialFocus?: HTMLElement | null
+  returnFocus?: HTMLElement | null
+  escapeDeactivates?: boolean
+  clickOutsideDeactivates?: boolean
+  allowOutsideClick?: boolean | ((event: MouseEvent) => boolean)
+  onActivate?: () => void
+  onDeactivate?: () => void
+}
+/**
+ * Focus trap instance
+ */
+export declare interface FocusTrap {
+  activate: () => void
+  deactivate: () => void
+  pause: () => void
+  unpause: () => void
+}
+/**
+ * Manage focus order with roving tabindex
+ *
+ * Useful for toolbars, menus, and other composite widgets
+ *
+ * @param container - Container element
+ * @param options - Options
+ * @returns Cleanup function
+ */
+export declare interface RovingTabindexOptions {
+  selector?: string
+  initialIndex?: number
+  orientation?: 'horizontal' | 'vertical' | 'both'
+  loop?: boolean
+  onFocusChange?: (index: number, element: HTMLElement) => void
+}
+/**
+ * Accessibility utilities for @stacksjs/components
+ *
+ * Provides comprehensive ARIA helpers, focus management, keyboard navigation,
+ * and screen reader utilities for building accessible components
+ *
+ * @example
+ * ```ts
+ * import { createAriaLabel, manageFocus, announceToScreenReader } from '@stacksjs/components'
+ *
+ * // Create accessible label
+ * const labelId = createAriaLabel('Search', element)
+ *
+ * // Manage focus
+ * const trap = createFocusTrap(dialogElement)
+ * trap.activate()
+ *
+ * // Announce to screen readers
+ * announceToScreenReader('Form submitted successfully')
+ * ```
+ */
+/**
+ * ARIA live region types
+ */
+export type AriaLive = 'off' | 'polite' | 'assertive'
+/**
+ * ARIA role types
+ */
+export type AriaRole = | 'alert'
+  | 'alertdialog'
+  | 'application'
+  | 'article'
+  | 'banner'
+  | 'button'
+  | 'cell'
+  | 'checkbox'
+  | 'columnheader'
+  | 'combobox'
+  | 'complementary'
+  | 'contentinfo'
+  | 'definition'
+  | 'dialog'
+  | 'directory'
+  | 'document'
+  | 'feed'
+  | 'figure'
+  | 'form'
+  | 'grid'
+  | 'gridcell'
+  | 'group'
+  | 'heading'
+  | 'img'
+  | 'link'
+  | 'list'
+  | 'listbox'
+  | 'listitem'
+  | 'log'
+  | 'main'
+  | 'marquee'
+  | 'math'
+  | 'menu'
+  | 'menubar'
+  | 'menuitem'
+  | 'menuitemcheckbox'
+  | 'menuitemradio'
+  | 'navigation'
+  | 'none'
+  | 'note'
+  | 'option'
+  | 'presentation'
+  | 'progressbar'
+  | 'radio'
+  | 'radiogroup'
+  | 'region'
+  | 'row'
+  | 'rowgroup'
+  | 'rowheader'
+  | 'scrollbar'
+  | 'search'
+  | 'searchbox'
+  | 'separator'
+  | 'slider'
+  | 'spinbutton'
+  | 'status'
+  | 'switch'
+  | 'tab'
+  | 'table'
+  | 'tablist'
+  | 'tabpanel'
+  | 'term'
+  | 'textbox'
+  | 'timer'
+  | 'toolbar'
+  | 'tooltip'
+  | 'tree'
+  | 'treegrid'
+  | 'treeitem'

package/dist/utils/animation/easing.d.ts

@@ -0,0 +1,112 @@
+/**
+ * Linear easing - no acceleration
+ */
+export declare const linear: EasingFunction;
+/**
+ * Quadratic ease-in - accelerating from zero velocity
+ */
+export declare const easeInQuad: EasingFunction;
+/**
+ * Quadratic ease-out - decelerating to zero velocity
+ */
+export declare const easeOutQuad: EasingFunction;
+/**
+ * Quadratic ease-in-out - acceleration until halfway, then deceleration
+ */
+export declare const easeInOutQuad: EasingFunction;
+// Cubic
+export declare const easeInCubic: EasingFunction;
+export declare const easeOutCubic: EasingFunction;
+export declare const easeInOutCubic: EasingFunction;
+// Quartic
+export declare const easeInQuart: EasingFunction;
+export declare const easeOutQuart: EasingFunction;
+export declare const easeInOutQuart: EasingFunction;
+// Quintic
+export declare const easeInQuint: EasingFunction;
+export declare const easeOutQuint: EasingFunction;
+export declare const easeInOutQuint: EasingFunction;
+// Sinusoidal
+export declare const easeInSine: EasingFunction;
+export declare const easeOutSine: EasingFunction;
+export declare const easeInOutSine: EasingFunction;
+// Exponential
+export declare const easeInExpo: EasingFunction;
+export declare const easeOutExpo: EasingFunction;
+export declare const easeInOutExpo: EasingFunction;
+// Circular
+export declare const easeInCirc: EasingFunction;
+export declare const easeOutCirc: EasingFunction;
+export declare const easeInOutCirc: EasingFunction;
+// Elastic
+export declare const easeInElastic: EasingFunction;
+export declare const easeOutElastic: EasingFunction;
+export declare const easeInOutElastic: EasingFunction;
+// Back
+export declare const easeInBack: EasingFunction;
+export declare const easeOutBack: EasingFunction;
+export declare const easeInOutBack: EasingFunction;
+// Bounce
+export declare const easeOutBounce: EasingFunction;
+export declare const easeInBounce: EasingFunction;
+export declare const easeInOutBounce: EasingFunction;
+/**
+ * Object containing all easing functions
+ *
+ * Available easings: Linear, Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Elastic, Back, Bounce
+ * Each with In, Out, InOut variants (except Linear)
+ */
+export declare const Easing: {
+  linear: EasingFunction
+  easeInQuad: EasingFunction
+  easeOutQuad: EasingFunction
+  easeInOutQuad: EasingFunction
+  easeInCubic: EasingFunction
+  easeOutCubic: EasingFunction
+  easeInOutCubic: EasingFunction
+  easeInQuart: EasingFunction
+  easeOutQuart: EasingFunction
+  easeInOutQuart: EasingFunction
+  easeInQuint: EasingFunction
+  easeOutQuint: EasingFunction
+  easeInOutQuint: EasingFunction
+  easeInSine: EasingFunction
+  easeOutSine: EasingFunction
+  easeInOutSine: EasingFunction
+  easeInExpo: EasingFunction
+  easeOutExpo: EasingFunction
+  easeInOutExpo: EasingFunction
+  easeInCirc: EasingFunction
+  easeOutCirc: EasingFunction
+  easeInOutCirc: EasingFunction
+  easeInElastic: EasingFunction
+  easeOutElastic: EasingFunction
+  easeInOutElastic: EasingFunction
+  easeInBack: EasingFunction
+  easeOutBack: EasingFunction
+  easeInOutBack: EasingFunction
+  easeInBounce: EasingFunction
+  easeOutBounce: EasingFunction
+  easeInOutBounce: EasingFunction
+};
+/**
+ * Easing functions for smooth animations
+ *
+ * All easing functions follow the signature:
+ * @param t - Current time (0 to duration)
+ * @param b - Start value
+ * @param c - Change in value (end - start)
+ * @param d - Duration
+ * @returns Current value at time t
+ *
+ * @example
+ * ```ts
+ * import { Easing } from '@stacksjs/components'
+ *
+ * const value = Easing.easeInOutCubic(currentTime, startValue, changeInValue, duration)
+ * ```
+ */
+/**
+ * Easing function type signature
+ */
+export type EasingFunction = (t: number, b: number, c: number, d: number) => number

package/dist/utils/animation/helpers.d.ts

@@ -0,0 +1,119 @@
+/**
+ * Generate CSS animation string
+ *
+ * @param name - Animation name
+ * @param options - Animation options
+ * @returns CSS animation string
+ */
+export declare function cssAnimation(name: string, options?: CSSAnimationOptions): string;
+/**
+ * Apply CSS animation to an element
+ *
+ * @param element - Target element
+ * @param animationName - Name of CSS animation
+ * @param options - Animation options
+ */
+export declare function applyAnimation(element: HTMLElement, animationName: string, options?: CSSAnimationOptions): void;
+/**
+ * Remove animation from an element
+ *
+ * @param element - Target element
+ */
+export declare function removeAnimation(element: HTMLElement): void;
+/**
+ * Wait for animation to complete
+ *
+ * @param element - Target element
+ * @returns Promise that resolves when animation ends
+ */
+export declare function waitForAnimation(element: HTMLElement): Promise<void>;
+/**
+ * Stagger animations across multiple elements
+ *
+ * @param elements - Array of elements to animate
+ * @param animationName - Name of CSS animation
+ * @param options - Animation options with stagger delay in ms
+ */
+export declare function staggerAnimation(elements: HTMLElement[], animationName: string, options?: CSSAnimationOptions & { stagger?: number }): void;
+/**
+ * Run animations in sequence
+ *
+ * @param element - Target element
+ * @param animations - Array of animations to run in order
+ * @returns Promise that resolves when all animations complete
+ */
+export declare function sequenceAnimations(element: HTMLElement, animations: Array<{ name: string, options?: CSSAnimationOptions }>): Promise<void>;
+/**
+ * Add animation class with automatic removal
+ *
+ * @param element - Target element
+ * @param animationClass - CSS class name
+ * @param duration - Duration in milliseconds before removing class
+ * @returns Promise that resolves when animation completes
+ */
+export declare function animateWithClass(element: HTMLElement, animationClass: string, duration?: any): Promise<void>;
+/**
+ * Create custom CSS @keyframes rule dynamically
+ *
+ * @param name - Animation name
+ * @param frames - Keyframe definitions (percentage -> styles)
+ *
+ * @example
+ * ```ts
+ * createKeyframes('custom-fade', {
+ *   '0%': { opacity: '0' },
+ *   '100%': { opacity: '1' }
+ * })
+ * ```
+ */
+export declare function createKeyframes(name: string, frames: Record<string, Record<string, string>>): void;
+/**
+ * Predefined CSS animation class names (compatible with Tailwind/headwind)
+ */
+export declare const AnimationClasses: {
+  // Fade
+  fadeIn: 'animate-fade-in';
+  fadeOut: 'animate-fade-out';
+  // Slide
+  slideInUp: 'animate-slide-in-up';
+  slideInDown: 'animate-slide-in-down';
+  slideInLeft: 'animate-slide-in-left';
+  slideInRight: 'animate-slide-in-right';
+  // Zoom
+  zoomIn: 'animate-zoom-in';
+  zoomOut: 'animate-zoom-out';
+  // Bounce
+  bounce: 'animate-bounce';
+  // Spin
+  spin: 'animate-spin';
+  // Ping
+  ping: 'animate-ping';
+  // Pulse
+  pulse: 'animate-pulse'
+};
+/**
+ * CSS Animation helper utilities
+ *
+ * @example
+ * ```ts
+ * import { applyAnimation, staggerAnimation } from '@stacksjs/components'
+ *
+ * // Apply animation
+ * applyAnimation(element, 'fade-in', { duration: '300ms' })
+ *
+ * // Stagger multiple elements
+ * staggerAnimation(elements, 'slide-in', { stagger: 100 })
+ * ```
+ */
+/**
+ * CSS animation configuration options
+ */
+export declare interface CSSAnimationOptions {
+  duration?: string
+  timing?: string
+  delay?: string
+  iteration?: string
+  direction?: string
+  fill?: string
+  playState?: string
+}

package/dist/utils/animation/index.d.ts

@@ -0,0 +1,3 @@
+export * from './easing';
+export * from './helpers';
+export * from './keyframes';