@stacksjs/components 0.2.93 → 0.2.94

package/src/composables/utilities/useClickOutside.ts

@@ -1,72 +0,0 @@
-/**
- * Detects clicks outside a specified element
- *
- * @example
- * ```ts
- * const cleanup = useClickOutside(
- *   modalRef,
- *   () => closeModal(),
- *   { enabled: isOpen, ignore: ['.tooltip'] }
- * )
- * ```
- */
-
-/**
- * Options for useClickOutside hook
- */
-export interface UseClickOutsideOptions {
-  /** Whether the hook is enabled */
-  enabled?: boolean
-  /** CSS selectors to ignore (clicks on these elements won't trigger callback) */
-  ignore?: string[]
-}
-
-/**
- * Hook to detect clicks outside an element
- *
- * @param elementRef - The element to detect clicks outside of
- * @param callback - Function to call when click occurs outside element
- * @param options - Configuration options
- * @returns Cleanup function to remove event listeners
- */
-export function useClickOutside(
-  elementRef: HTMLElement | null,
-  callback: (event: MouseEvent | TouchEvent) => void,
-  options: UseClickOutsideOptions = {},
-): () => void {
-  const { enabled = true, ignore = [] } = options
-
-  const handleClick = (event: MouseEvent | TouchEvent) => {
-    if (!enabled || !elementRef)
-      return
-
-    const target = event.target as Node
-
-    // Check if click is outside element
-    if (!elementRef.contains(target)) {
-      // Check if target matches any ignore selectors
-      const shouldIgnore = ignore.some((selector) => {
-        const elements = document.querySelectorAll(selector)
-        return Array.from(elements).some(el => el.contains(target))
-      })
-
-      if (!shouldIgnore) {
-        callback(event)
-      }
-    }
-  }
-
-  // Add event listeners
-  if (typeof document !== 'undefined') {
-    document.addEventListener('mousedown', handleClick)
-    document.addEventListener('touchstart', handleClick)
-  }
-
-  // Return cleanup function
-  return () => {
-    if (typeof document !== 'undefined') {
-      document.removeEventListener('mousedown', handleClick)
-      document.removeEventListener('touchstart', handleClick)
-    }
-  }
-}

package/src/composables/utilities/useFocusTrap.ts

@@ -1,159 +0,0 @@
-/**
- * Traps focus within a container element (useful for modals, dialogs, dropdowns)
- *
- * @example
- * ```ts
- * const { activate, deactivate } = useFocusTrap(modalRef, {
- *   initialFocus: firstInputRef,
- *   returnFocus: true
- * })
- *
- * // When modal opens
- * activate()
- *
- * // When modal closes
- * deactivate()
- * ```
- */
-
-/**
- * Options for useFocusTrap hook
- */
-export interface UseFocusTrapOptions {
-  /** Whether the focus trap is enabled */
-  enabled?: boolean
-  /** Element to focus initially (defaults to first focusable element) */
-  initialFocus?: HTMLElement | null
-  /** Whether to return focus to previously focused element on deactivate */
-  returnFocus?: boolean
-  /** Fallback element to focus if no focusable elements found */
-  fallbackFocus?: HTMLElement | null
-}
-
-/**
- * Hook to trap focus within an element
- *
- * @param containerRef - The container element to trap focus within
- * @param options - Configuration options
- * @returns Object with activate and deactivate functions
- */
-export function useFocusTrap(
-  containerRef: HTMLElement | null,
-  options: UseFocusTrapOptions = {},
-): { activate: () => void, deactivate: () => void } {
-  const {
-    enabled = true,
-    initialFocus = null,
-    returnFocus = true,
-    fallbackFocus = null,
-  } = options
-
-  let previouslyFocusedElement: HTMLElement | null = null
-  let isActive = false
-
-  // Get all focusable elements within container
-  function getFocusableElements(): HTMLElement[] {
-    if (!containerRef)
-      return []
-
-    const focusableSelectors = [
-      'a[href]',
-      'button:not([disabled])',
-      'textarea:not([disabled])',
-      'input:not([disabled])',
-      'select:not([disabled])',
-      '[tabindex]:not([tabindex="-1"])',
-    ].join(',')
-
-    return Array.from(containerRef.querySelectorAll(focusableSelectors))
-  }
-
-  // Handle tab key
-  function handleTab(event: KeyboardEvent) {
-    if (!enabled || !isActive || !containerRef)
-      return
-
-    const focusableElements = getFocusableElements()
-
-    if (focusableElements.length === 0) {
-      event.preventDefault()
-      return
-    }
-
-    const firstElement = focusableElements[0]
-    const lastElement = focusableElements[focusableElements.length - 1]
-
-    if (event.shiftKey) {
-      // Shift + Tab
-      if (document.activeElement === firstElement || document.activeElement === containerRef) {
-        event.preventDefault()
-        lastElement.focus()
-      }
-    }
-    else {
-      // Tab
-      if (document.activeElement === lastElement) {
-        event.preventDefault()
-        firstElement.focus()
-      }
-    }
-  }
-
-  // Handle escape key
-  function handleEscape(event: KeyboardEvent) {
-    if (event.key === 'Escape' && enabled && isActive) {
-      deactivate()
-    }
-  }
-
-  // Activate focus trap
-  function activate() {
-    if (!enabled || !containerRef || isActive)
-      return
-
-    // Store previously focused element
-    previouslyFocusedElement = document.activeElement as HTMLElement
-
-    // Focus initial element
-    if (initialFocus) {
-      initialFocus.focus()
-    }
-    else {
-      const focusableElements = getFocusableElements()
-      if (focusableElements.length > 0) {
-        focusableElements[0].focus()
-      }
-      else if (fallbackFocus) {
-        fallbackFocus.focus()
-      }
-      else {
-        containerRef.focus()
-      }
-    }
-
-    // Add event listeners
-    document.addEventListener('keydown', handleTab)
-    document.addEventListener('keydown', handleEscape)
-
-    isActive = true
-  }
-
-  // Deactivate focus trap
-  function deactivate() {
-    if (!isActive)
-      return
-
-    // Remove event listeners
-    document.removeEventListener('keydown', handleTab)
-    document.removeEventListener('keydown', handleEscape)
-
-    // Return focus
-    if (returnFocus && previouslyFocusedElement) {
-      previouslyFocusedElement.focus()
-    }
-
-    isActive = false
-  }
-
-  return { activate, deactivate }
-}

package/src/composables/utilities/useKeyboard.ts

@@ -1,124 +0,0 @@
-/**
- * Hook for keyboard event handling with support for shortcuts and modifiers
- *
- * @example
- * ```ts
- * useKeyboard([
- *   { key: 'Escape', handler: () => closeModal() },
- *   { key: 's', ctrl: true, handler: () => save() },
- *   { key: ['ArrowUp', 'ArrowDown'], handler: (e) => navigate(e.key) }
- * ])
- * ```
- */
-
-/**
- * Options for useKeyboard hook
- */
-export interface UseKeyboardOptions {
-  /** Whether the hook is enabled */
-  enabled?: boolean
-  /** Whether to prevent default browser behavior */
-  preventDefault?: boolean
-  /** Whether to stop event propagation */
-  stopPropagation?: boolean
-  /** Target element for event listener (defaults to document) */
-  target?: HTMLElement | Document | Window | null
-}
-
-/**
- * Keyboard event handler configuration
- */
-export interface KeyboardHandler {
-  /** Key or keys to listen for */
-  key: string | string[]
-  /** Handler function to execute */
-  handler: (event: KeyboardEvent) => void
-  /** Whether Ctrl key must be pressed */
-  ctrl?: boolean
-  /** Whether Shift key must be pressed */
-  shift?: boolean
-  /** Whether Alt key must be pressed */
-  alt?: boolean
-  /** Whether Meta (Command on Mac) key must be pressed */
-  meta?: boolean
-}
-
-/**
- * Hook for keyboard event handling
- *
- * @param handlers - Single handler or array of keyboard handlers
- * @param options - Configuration options
- * @returns Cleanup function to remove event listeners
- */
-export function useKeyboard(
-  handlers: KeyboardHandler | KeyboardHandler[],
-  options: UseKeyboardOptions = {},
-): () => void {
-  const {
-    enabled = true,
-    preventDefault = true,
-    stopPropagation = false,
-    target = typeof document !== 'undefined' ? document : null,
-  } = options
-
-  const handlerArray = Array.isArray(handlers) ? handlers : [handlers]
-
-  const handleKeydown = (event: KeyboardEvent) => {
-    if (!enabled)
-      return
-
-    handlerArray.forEach((handler) => {
-      const keys = Array.isArray(handler.key) ? handler.key : [handler.key]
-      const keyMatches = keys.some(k => k.toLowerCase() === event.key.toLowerCase())
-
-      if (!keyMatches)
-        return
-
-      // Check modifier keys
-      if (handler.ctrl !== undefined && handler.ctrl !== event.ctrlKey)
-        return
-      if (handler.shift !== undefined && handler.shift !== event.shiftKey)
-        return
-      if (handler.alt !== undefined && handler.alt !== event.altKey)
-        return
-      if (handler.meta !== undefined && handler.meta !== event.metaKey)
-        return
-
-      // Execute handler
-      if (preventDefault)
-        event.preventDefault()
-      if (stopPropagation)
-        event.stopPropagation()
-
-      handler.handler(event)
-    })
-  }
-
-  // Add event listener
-  if (target) {
-    target.addEventListener('keydown', handleKeydown as EventListener)
-  }
-
-  // Return cleanup function
-  return () => {
-    if (target) {
-      target.removeEventListener('keydown', handleKeydown as EventListener)
-    }
-  }
-}
-
-// Common keyboard shortcuts
-export const KeyboardShortcuts = {
-  ESCAPE: 'Escape',
-  ENTER: 'Enter',
-  SPACE: ' ',
-  TAB: 'Tab',
-  ARROW_UP: 'ArrowUp',
-  ARROW_DOWN: 'ArrowDown',
-  ARROW_LEFT: 'ArrowLeft',
-  ARROW_RIGHT: 'ArrowRight',
-  HOME: 'Home',
-  END: 'End',
-  PAGE_UP: 'PageUp',
-  PAGE_DOWN: 'PageDown',
-} as const

package/src/composables/utilities/useLocalStorage.ts

@@ -1,132 +0,0 @@
-/**
- * Reactive localStorage hook with cross-tab synchronization
- *
- * @example
- * ```ts
- * const { value, setValue, removeValue } = useLocalStorage('user', { name: 'John' })
- *
- * setValue({ name: 'Jane' })
- * setValue(prev => ({ ...prev, age: 30 }))
- * removeValue()
- * ```
- */
-
-/**
- * Options for useLocalStorage hook
- */
-export interface UseLocalStorageOptions<T> {
-  /** Custom serializer function - defaults to JSON.stringify */
-  serializer?: (value: T) => string
-  /** Custom deserializer function - defaults to JSON.parse */
-  deserializer?: (value: string) => T
-  /** Error handler function */
-  onError?: (error: Error) => void
-}
-
-/**
- * Hook for reactive localStorage with cross-tab sync
- *
- * @param key - Storage key
- * @param initialValue - Initial value if key doesn't exist
- * @param options - Configuration options
- * @returns Object with value, setValue, and removeValue
- */
-export function useLocalStorage<T>(
-  key: string,
-  initialValue: T,
-  options: UseLocalStorageOptions<T> = {},
-): {
-  value: T
-  setValue: (newValue: T | ((_prev: T) => T)) => void
-  removeValue: () => void
-} {
-  const {
-    serializer = JSON.stringify,
-    deserializer = JSON.parse,
-    onError = console.error,
-  } = options
-
-  // Get initial value from storage
-  let storedValue: T = initialValue
-
-  try {
-    if (typeof window !== 'undefined') {
-      const item = window.localStorage.getItem(key)
-      if (item !== null) {
-        storedValue = deserializer(item)
-      }
-    }
-  }
-  catch (error) {
-    onError(error as Error)
-  }
-
-  let value = storedValue
-  const listeners = new Set<(newValue: T) => void>()
-
-  // Set value
-  function setValue(newValue: T | ((prev: T) => T)) {
-    try {
-      // Allow value to be a function for same API as useState
-      const valueToStore = typeof newValue === 'function' ? (newValue as (_prev: T) => T)(value) : newValue
-
-      value = valueToStore
-
-      // Save to localStorage
-      if (typeof window !== 'undefined') {
-        window.localStorage.setItem(key, serializer(valueToStore))
-      }
-
-      // Notify listeners
-      listeners.forEach(listener => listener(valueToStore))
-    }
-    catch (error) {
-      onError(error as Error)
-    }
-  }
-
-  // Remove value
-  function removeValue() {
-    try {
-      value = initialValue
-
-      if (typeof window !== 'undefined') {
-        window.localStorage.removeItem(key)
-      }
-
-      // Notify listeners
-      listeners.forEach(listener => listener(initialValue))
-    }
-    catch (error) {
-      onError(error as Error)
-    }
-  }
-
-  // Listen for storage events (changes from other tabs/windows)
-  if (typeof window !== 'undefined') {
-    const handleStorageChange = (event: StorageEvent) => {
-      if (event.key === key && event.newValue !== null) {
-        try {
-          const newValue = deserializer(event.newValue)
-          value = newValue
-          listeners.forEach(listener => listener(newValue))
-        }
-        catch (error) {
-          onError(error as Error)
-        }
-      }
-      else if (event.key === key && event.newValue === null) {
-        value = initialValue
-        listeners.forEach(listener => listener(initialValue))
-      }
-    }
-
-    window.addEventListener('storage', handleStorageChange)
-  }
-
-  return {
-    value,
-    setValue,
-    removeValue,
-  }
-}

package/src/composables/utilities/useMediaQuery.ts

@@ -1,118 +0,0 @@
-/**
- * Hook for responsive media queries
- *
- * @example
- * ```ts
- * const { matches } = useMediaQuery('(min-width: 768px)')
- * const { matches: isDark } = useIsDarkMode()
- * const { matches: isMobile } = useIsMobile()
- * ```
- */
-
-/**
- * Options for useMediaQuery hook
- */
-export interface UseMediaQueryOptions {
-  /** Default value when window.matchMedia is not available */
-  defaultValue?: boolean
-}
-
-/**
- * Hook for responsive media queries
- *
- * @param query - Media query string
- * @param options - Configuration options
- * @returns Object with matches boolean and updateMatches function
- */
-export function useMediaQuery(
-  query: string,
-  options: UseMediaQueryOptions = {},
-): { matches: boolean, updateMatches: () => void } {
-  const { defaultValue = false } = options
-
-  let matches = defaultValue
-  let mediaQueryList: MediaQueryList | null = null
-
-  // Initialize
-  if (typeof window !== 'undefined' && 'matchMedia' in window) {
-    mediaQueryList = window.matchMedia(query)
-    matches = mediaQueryList.matches
-
-    // Listen for changes
-    const handleChange = (event: MediaQueryListEvent) => {
-      matches = event.matches
-    }
-
-    if (mediaQueryList.addEventListener) {
-      mediaQueryList.addEventListener('change', handleChange)
-    }
-    else {
-      // Fallback for older browsers
-      mediaQueryList.addListener(handleChange)
-    }
-  }
-
-  function updateMatches() {
-    if (mediaQueryList) {
-      matches = mediaQueryList.matches
-    }
-  }
-
-  return { matches, updateMatches }
-}
-
-/**
- * Common responsive breakpoints
- */
-export const Breakpoints = {
-  'xs': '(min-width: 320px)',
-  'sm': '(min-width: 640px)',
-  'md': '(min-width: 768px)',
-  'lg': '(min-width: 1024px)',
-  'xl': '(min-width: 1280px)',
-  '2xl': '(min-width: 1536px)',
-  'mobile': '(max-width: 767px)',
-  'tablet': '(min-width: 768px) and (max-width: 1023px)',
-  'desktop': '(min-width: 1024px)',
-  'dark': '(prefers-color-scheme: dark)',
-  'light': '(prefers-color-scheme: light)',
-  'reducedMotion': '(prefers-reduced-motion: reduce)',
-  'portrait': '(orientation: portrait)',
-  'landscape': '(orientation: landscape)',
-} as const
-
-/**
- * Use a predefined breakpoint
- * @param breakpoint - Breakpoint name from Breakpoints constant
- */
-export function useBreakpoint(breakpoint: keyof typeof Breakpoints): { matches: boolean, updateMatches: () => void } {
-  return useMediaQuery(Breakpoints[breakpoint])
-}
-
-/**
- * Check if viewport is mobile (max-width: 767px)
- */
-export function useIsMobile(): { matches: boolean, updateMatches: () => void } {
-  return useMediaQuery(Breakpoints.mobile)
-}
-
-/**
- * Check if viewport is desktop (min-width: 1024px)
- */
-export function useIsDesktop(): { matches: boolean, updateMatches: () => void } {
-  return useMediaQuery(Breakpoints.desktop)
-}
-
-/**
- * Check if user prefers dark color scheme
- */
-export function useIsDarkMode(): { matches: boolean, updateMatches: () => void } {
-  return useMediaQuery(Breakpoints.dark)
-}
-
-/**
- * Check if user prefers reduced motion
- */
-export function usePrefersReducedMotion(): { matches: boolean, updateMatches: () => void } {
-  return useMediaQuery(Breakpoints.reducedMotion)
-}

package/src/index.ts

@@ -1,99 +0,0 @@
-// Export shared components (these will be imported as .stx files)
-export { default as CodeBlock } from './components/CodeBlock.stx'
-
-export { default as Footer } from './components/Footer.stx'
-export { default as Hero } from './components/Hero.stx'
-export { default as Installation } from './components/Installation.stx'
-// Export composables
-export * from './composables'
-// Export UI components
-export * from './ui/accordion'
-export * from './ui/audio'
-export * from './ui/auth'
-export * from './ui/avatar'
-export * from './ui/badge'
-
-export * from './ui/breadcrumb'
-export * from './ui/button'
-export * from './ui/calendar'
-export * from './ui/card'
-
-export * from './ui/checkbox'
-export * from './ui/combobox'
-export * from './ui/command-palette'
-export * from './ui/dialog'
-export * from './ui/drawer'
-export * from './ui/dropdown'
-export * from './ui/form'
-export * from './ui/image'
-export * from './ui/input'
-export * from './ui/listbox'
-export * from './ui/navigator'
-export * from './ui/notification'
-export * from './ui/pagination'
-export * from './ui/payment'
-export * from './ui/popover'
-export * from './ui/portal'
-export * from './ui/progress'
-export * from './ui/radio'
-export * from './ui/radio-group'
-export * from './ui/select'
-export * from './ui/sidebar'
-export * from './ui/skeleton'
-export * from './ui/spinner'
-export * from './ui/stepper'
-export * from './ui/storage'
-export * from './ui/switch'
-export * from './ui/table'
-export * from './ui/tabs'
-export * from './ui/teleport'
-export * from './ui/textarea'
-export * from './ui/tooltip'
-export * from './ui/transition'
-export * from './ui/video'
-export * from './ui/virtual-list'
-export * from './ui/virtual-table'
-export * from './utils/accessibility'
-export * from './utils/animation'
-export * from './utils/error-handling'
-// Export utilities
-export * from './utils/highlighter'
-export * from './utils/i18n'
-export * from './utils/keep-alive'
-export * from './utils/lazy-loading'
-export * from './utils/prop-validation'
-export * from './utils/theme'
-
-// Types
-export interface ComponentProps {
-  className?: string
-  [key: string]: any
-}
-
-export interface CodeBlockProps extends ComponentProps {
-  code: string
-  language?: string
-  theme?: 'light' | 'dark' | 'auto'
-  lineNumbers?: boolean
-  copyable?: boolean
-}
-
-export interface HeroProps extends ComponentProps {
-  title?: string
-  description?: string
-  githubUrl?: string
-}
-
-export interface FooterProps extends ComponentProps {
-  author?: string
-  authorUrl?: string
-  project?: string
-  projectUrl?: string
-  twitterUrl?: string
-  sponsorUrl?: string
-  coffeeUrl?: string
-}
-
-export interface InstallationProps extends ComponentProps {
-  packageName?: string
-}

package/src/stx.d.ts

@@ -1,4 +0,0 @@
-declare module '*.stx' {
-  const component: any
-  export default component
-}