@stacksjs/components 0.2.92 → 0.2.94

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
-}

package/src/ui/accordion/Accordion.stx

@@ -1,146 +0,0 @@
-<script server>
-// Two modes (see stacksjs/stx#1703):
-//   1. Legacy prop API — pass `items={[{title, content}, …]}` for simple
-//      string-content accordions (kept for backward compatibility with
-//      existing visual snapshots and consumers).
-//   2. Slot API — drop `<AccordionItem title="…">` children for arbitrary
-//      content. Each AccordionItem renders its own header + content panel;
-//      this parent attaches click handlers and toggles content visibility.
-export const items = $props.items || []
-export const allowMultiple = $props.allowMultiple || false
-export const defaultOpen = $props.defaultOpen || []
-export const className = $props.className || ''
-
-export const accordionClasses = `divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg ${className}`.trim()
-export const headerClasses = `w-full flex items-center justify-between px-4 py-3 text-left font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
-export const iconClasses = `w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200`.trim()
-export const contentClasses = `px-4 py-3 text-gray-700 dark:text-gray-300`.trim()
-export const hasPropItems = Array.isArray(items) && items.length > 0
-</script>
-
-<script client>
-const emit = defineEmits()
-const allowMultiple = {{ allowMultiple }}
-const hasPropItems = {{ hasPropItems }}
-const containerRef = useRef()
-const openItems = state({{ defaultOpen }})
-
-function findOwnItems() {
-  const root = containerRef.value
-  if (!root) return []
-  return Array.from(root.querySelectorAll('[data-stx-accordion-item]'))
-    .filter(item => item.closest('[data-stx-accordion]') === root)
-}
-
-onMount(() => {
-  if (hasPropItems) return  // legacy mode: server-rendered, no wiring needed
-  const items = findOwnItems()
-  items.forEach((item, idx) => {
-    const header = item.querySelector(':scope > [data-stx-accordion-header]')
-    if (header && !header.__stx_wired) {
-      header.__stx_wired = true
-      header.addEventListener('click', () => toggleItem(idx))
-      header.addEventListener('keydown', (e) => onHeaderKey(e, idx))
-    }
-  })
-})
-
-// Sync the open state into the DOM: show/hide content panels, update
-// aria-expanded on headers, rotate chevrons.
-effect(() => {
-  if (hasPropItems) return
-  const items = findOwnItems()
-  const open = openItems()
-  items.forEach((item, idx) => {
-    const isOpenItem = open.includes(idx)
-    const header = item.querySelector(':scope > [data-stx-accordion-header]')
-    const content = item.querySelector(':scope > [data-stx-accordion-content]')
-    const chevron = item.querySelector(':scope > [data-stx-accordion-header] [data-stx-accordion-chevron]')
-    if (header) header.setAttribute('aria-expanded', isOpenItem ? 'true' : 'false')
-    if (content) {
-      if (isOpenItem) content.removeAttribute('hidden')
-      else content.setAttribute('hidden', '')
-    }
-    if (chevron) chevron.style.transform = `rotate(${isOpenItem ? 180 : 0}deg)`
-  })
-})
-
-function toggleItem(index) {
-  const cur = openItems()
-  if (allowMultiple) {
-    openItems.set(cur.includes(index) ? cur.filter(i => i !== index) : [...cur, index])
-  }
-  else {
-    openItems.set(cur.includes(index) ? [] : [index])
-  }
-  emit('change', openItems())
-}
-
-function isOpen(index) {
-  return openItems().includes(index)
-}
-
-function onHeaderKey(event, index) {
-  const root = containerRef.value
-  if (!root) return
-  const buttons = root.querySelectorAll('button[data-stx-accordion-header], button[data-accordion-header]')
-  if (event.key === 'ArrowDown') {
-    event.preventDefault()
-    buttons[index + 1]?.focus()
-  }
-  else if (event.key === 'ArrowUp') {
-    event.preventDefault()
-    buttons[index - 1]?.focus()
-  }
-  else if (event.key === 'Home') {
-    event.preventDefault()
-    buttons[0]?.focus()
-  }
-  else if (event.key === 'End') {
-    event.preventDefault()
-    buttons[buttons.length - 1]?.focus()
-  }
-}
-
-defineExpose({ openItems, toggleItem })
-</script>
-
-<div x-ref="containerRef" data-stx-accordion class="{{ accordionClasses }}" role="region">
-  @if(hasPropItems)
-    @foreach(item in items)
-      <div>
-        <button
-          type="button"
-          data-accordion-header
-          class="{{ headerClasses }}"
-          @click="toggleItem({{ $loop.index }})"
-          @keydown="onHeaderKey($event, {{ $loop.index }})"
-          :aria-expanded="isOpen({{ $loop.index }}) ? 'true' : 'false'"
-          aria-controls="accordion-content-{{ $loop.index }}"
-        >
-          <span>{{ item.title }}</span>
-          <svg
-            class="{{ iconClasses }}"
-            :style="`transform: rotate(${isOpen({{ $loop.index }}) ? 180 : 0}deg)`"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
-
-        <div
-          :show="isOpen({{ $loop.index }})"
-          id="accordion-content-{{ $loop.index }}"
-          class="{{ contentClasses }}"
-          role="region"
-        >
-          {!! item.content !!}
-        </div>
-      </div>
-    @endforeach
-  @else
-    <slot />
-  @endif
-</div>

package/src/ui/accordion/AccordionItem.stx

@@ -1,37 +0,0 @@
-<script server>
-// Slot wrapper that the parent <Accordion> discovers and wires up on mount.
-// Renders its own header button + content panel; the parent attaches click
-// handlers and toggles the content panel's `hidden` attribute as openItems
-// changes. Hard-coded styling here matches the legacy prop-mode markup so
-// snapshots compare cleanly in both modes. See stacksjs/stx#1703.
-export const title = $props.title || ''
-export const className = $props.className || ''
-
-const headerClasses = 'w-full flex items-center justify-between px-4 py-3 text-left font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900'
-const iconClasses = 'w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200'
-const contentClasses = 'px-4 py-3 text-gray-700 dark:text-gray-300'
-</script>
-
-<div data-stx-accordion-item data-title="{{ title }}" class="{{ className }}">
-  <button
-    type="button"
-    data-stx-accordion-header
-    data-accordion-header
-    class="{{ headerClasses }}"
-    aria-expanded="false"
-  >
-    <span>{{ title }}</span>
-    <svg
-      data-stx-accordion-chevron
-      class="{{ iconClasses }}"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-    </svg>
-  </button>
-  <div data-stx-accordion-content class="{{ contentClasses }}" role="region" hidden>
-    <slot />
-  </div>
-</div>

package/src/ui/accordion/index.ts

@@ -1,47 +0,0 @@
-export { default as Accordion } from './Accordion.stx'
-export { default as AccordionItem } from './AccordionItem.stx'
-
-/**
- * Legacy prop API — pass `items` as an array of `{ title, content }` where
- * `content` is a HTML string. Kept for backward compatibility; prefer the
- * slot API below for any accordion whose content needs to be a component tree.
- *
- * See stacksjs/stx#1703.
- */
-export interface AccordionLegacyItem {
-  title: string
-  content: string
-}
-
-export type AccordionItemDefinition = AccordionLegacyItem
-
-export interface AccordionProps {
-  /** Legacy: array of item definitions with string content. */
-  items?: AccordionItemDefinition[]
-  allowMultiple?: boolean
-  defaultOpen?: number[]
-  onChange?: (openItems: number[]) => void
-  className?: string
-}
-
-/**
- * Slot API — wrap each section's content in `<AccordionItem title="…">`.
- * Each `<AccordionItem>` renders its own header + content panel; the parent
- * `<Accordion>` attaches click handlers and toggles the content visibility.
- *
- * @example
- * ```html
- * <Accordion allowMultiple>
- *   <AccordionItem title="Profile">
- *     <ProfileEditor :user="user()" />
- *   </AccordionItem>
- *   <AccordionItem title="Zones">
- *     <ZonesEditor />
- *   </AccordionItem>
- * </Accordion>
- * ```
- */
-export interface AccordionItemProps {
-  title: string
-  className?: string
-}

package/src/ui/audio/Audio.stx

@@ -1,50 +0,0 @@
-<script server>
-export const src = $props.src || ''
-export const autoplay = $props.autoplay || false
-export const loop = $props.loop || false
-export const muted = $props.muted || false
-export const controls = $props.controls ?? true
-export const preload = $props.preload || 'metadata'
-export const className = $props.className || ''
-export const showWaveform = $props.showWaveform || false
-export const title = $props.title || ''
-
-export const containerClasses = `relative w-full ${className}`.trim()
-export const audioClasses = 'w-full rounded-md bg-gray-100 dark:bg-gray-800'
-</script>
-
-<div class="{{ containerClasses }}">
-  @if(title)
-    <div class="mb-2 px-1">
-      <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
-        {{ title }}
-      </h3>
-    </div>
-  @endif
-
-  <audio
-    class="{{ audioClasses }}"
-    src="{{ src }}"
-    @if(controls)controls@endif
-    @if(autoplay)autoplay@endif
-    @if(loop)loop@endif
-    @if(muted)muted@endif
-    preload="{{ preload }}"
-  >
-    Your browser does not support the audio element.
-  </audio>
-
-  @if(showWaveform)
-    <div class="mt-2 h-16 bg-gray-100 dark:bg-gray-800 rounded-md flex items-center justify-center">
-      <svg class="w-full h-full px-4" viewBox="0 0 100 40" preserveAspectRatio="none">
-        <path
-          d="M 0,20 L 10,15 L 20,10 L 30,5 L 40,15 L 50,20 L 60,25 L 70,30 L 80,20 L 90,15 L 100,20"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          class="text-indigo-500 dark:text-indigo-400"
-        />
-      </svg>
-    </div>
-  @endif
-</div>

package/src/ui/audio/README.md

@@ -1,41 +0,0 @@
-# Audio Component
-
-A styled audio player with optional waveform visualization.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<Audio
-  src="/audio/podcast.mp3"
-  title="Episode 42: Building with STX"
-  controls
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `src` | `string` | - | Audio file URL (required) |
-| `autoplay` | `boolean` | `false` | Auto-play on load |
-| `loop` | `boolean` | `false` | Loop playback |
-| `muted` | `boolean` | `false` | Start muted |
-| `controls` | `boolean` | `true` | Show native controls |
-| `preload` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | Preload strategy |
-| `className` | `string` | `''` | Additional CSS classes |
-| `showWaveform` | `boolean` | `false` | Show waveform visualization |
-| `title` | `string` | `''` | Optional title above player |
-
-## Features
-
-- **Native controls** - Uses browser's native audio controls
-- **Dark mode** - Styled for dark mode
-- **Waveform** - Optional visual waveform display
-- **Accessible** - Proper fallback text
-- **Responsive** - Full-width design

package/src/ui/audio/index.ts

@@ -1,13 +0,0 @@
-export { default as Audio } from './Audio.stx'
-
-export interface AudioProps {
-  src: string
-  autoplay?: boolean
-  loop?: boolean
-  muted?: boolean
-  controls?: boolean
-  preload?: 'none' | 'metadata' | 'auto'
-  className?: string
-  showWaveform?: boolean
-  title?: string
-}