@stacksjs/components 0.2.3

package/dist/TwoFactorChallenge-2q4gg89m.stx

@@ -0,0 +1,125 @@
+<script>
+export const headingText = $props.headingText || 'Two Factor Authentication'
+export const labelText = $props.labelText || 'Authentication code'
+export const instructionText = $props.instructionText || 'Open your Symantec 2FA app to view your authentication code.'
+export const codeLength = $props.codeLength || 6
+export const onSubmit = $props.onSubmit || (() => {})
+export const onUseRecoveryCode = $props.onUseRecoveryCode
+export const className = $props.className || ''
+
+export const containerClasses = `py-32 dark:bg-blue-gray-900 ${className}`.trim()
+export const codes = Array(codeLength).fill('')
+</script>
+
+<div class="{{ containerClasses }}">
+  <div class="mx-auto max-w-sm rounded-md px-8 py-4 shadow-md bg-white dark:bg-blue-gray-800">
+    <div class="card-body">
+      <div>
+        <h3 class="text-center text-sm text-gray-900 dark:text-gray-100 font-semibold">
+          {{ headingText }}
+        </h3>
+        <label for="code-0" class="mt-4 block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+          {{ labelText }}
+        </label>
+        <form onsubmit="event.preventDefault(); handleSubmit(event)">
+          <div class="mt-2 flex rounded-md shadow-sm space-x-2">
+            @for(i in Array(codeLength).keys())
+              <input
+                id="code-{{ i }}"
+                type="text"
+                maxlength="1"
+                name="code-{{ i }}"
+                placeholder="-"
+                class="block w-full border-0 rounded-md px-2 py-2 text-center text-gray-900 dark:text-gray-100 ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
+                oninput="handleCodeInput(event, {{ i }})"
+                onkeydown="handleKeyDown(event, {{ i }})"
+              />
+            @endfor
+          </div>
+          <div class="py-4">
+            <button
+              type="submit"
+              class="relative h-8 w-full flex items-center justify-center rounded-full bg-teal-600 px-4 text-white font-semibold hover:bg-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-600 focus:ring-offset-2"
+            >
+              Verify
+            </button>
+          </div>
+        </form>
+        <div>
+          <p class="text-xs text-gray-700 dark:text-gray-300 font-semibold">
+            {{ instructionText }}
+          </p>
+        </div>
+        @if(onUseRecoveryCode)
+          <div class="mt-4">
+            <p class="text-xs text-gray-700 dark:text-gray-300 font-semibold">
+              Having Problems?
+            </p>
+            <a
+              href="#"
+              onclick="event.preventDefault(); handleRecoveryCode()"
+              class="text-xs text-blue-500 hover:underline"
+            >
+              Use recovery code instead
+            </a>
+          </div>
+        @endif
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function handleCodeInput(event, index) {
+  const input = event.target
+  const value = input.value
+
+  // Only allow digits
+  if (!/^\d*$/.test(value)) {
+    input.value = ''
+    return
+  }
+
+  // Auto-focus next input
+  if (value.length === 1 && index < codeLength - 1) {
+    const nextInput = document.getElementById(`code-${index + 1}`)
+    if (nextInput) {
+      nextInput.focus()
+    }
+  }
+}
+
+function handleKeyDown(event, index) {
+  // Handle backspace to move to previous input
+  if (event.key === 'Backspace' && !event.target.value && index > 0) {
+    const prevInput = document.getElementById(`code-${index - 1}`)
+    if (prevInput) {
+      prevInput.focus()
+    }
+  }
+}
+
+function handleSubmit(event) {
+  const code = []
+  for (let i = 0; i < codeLength; i++) {
+    const input = document.getElementById(`code-${i}`)
+    if (input && input.value) {
+      code.push(input.value)
+    }
+  }
+
+  if (code.length === codeLength) {
+    if (onSubmit) {
+      onSubmit(code.join(''))
+    }
+  } else {
+    alert('Please enter all digits')
+  }
+}
+
+function handleRecoveryCode() {
+  if (onUseRecoveryCode) {
+    onUseRecoveryCode()
+  }
+}
+</script>

package/dist/Video-6aq4shh4.stx

@@ -0,0 +1,45 @@
+<script>
+export const src = $props.src || ''
+export const poster = $props.poster || ''
+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 width = $props.width
+export const height = $props.height
+export const aspectRatio = $props.aspectRatio || '16/9'
+export const className = $props.className || ''
+export const title = $props.title || ''
+
+export const containerClasses = `relative w-full overflow-hidden rounded-lg ${className}`.trim()
+export const videoClasses = 'w-full h-full object-cover bg-gray-900 dark:bg-gray-950'
+export const aspectRatioClass = aspectRatio === '16/9' ? 'aspect-video' : aspectRatio === '4/3' ? 'aspect-[4/3]' : aspectRatio === '1/1' ? 'aspect-square' : ''
+</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
+
+  <div class="{{ aspectRatioClass }}">
+    <video
+      class="{{ videoClasses }}"
+      src="{{ src }}"
+      poster="{{ poster }}"
+      controls="{{ controls }}"
+      autoplay="{{ autoplay }}"
+      loop="{{ loop }}"
+      muted="{{ muted }}"
+      preload="{{ preload }}"
+      width="{{ width }}"
+      height="{{ height }}"
+    >
+      Your browser does not support the video element.
+    </video>
+  </div>
+</div>

package/dist/VirtualList-weh5qtm1.stx

@@ -0,0 +1,83 @@
+<script>
+export const items = $props.items || []
+export const itemHeight = $props.itemHeight || 50
+export const height = $props.height || 400
+export const overscan = $props.overscan || 3
+export const renderItem = $props.renderItem
+export const className = $props.className || ''
+
+// Calculate visible range
+let scrollTop = 0
+const visibleCount = Math.ceil(height / itemHeight)
+const totalHeight = items.length * itemHeight
+
+// Calculate start and end indices with overscan
+function getVisibleRange() {
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan)
+  const endIndex = Math.min(items.length - 1, Math.floor((scrollTop + height) / itemHeight) + overscan)
+  return { startIndex, endIndex }
+}
+
+const { startIndex, endIndex } = getVisibleRange()
+const visibleItems = items.slice(startIndex, endIndex + 1)
+const offsetY = startIndex * itemHeight
+
+// Handle scroll
+function handleScroll(event) {
+  const target = event.target
+  scrollTop = target.scrollTop
+}
+
+export const containerClasses = `overflow-auto ${className}`.trim()
+export const innerClasses = `relative`.trim()
+export const itemClasses = `absolute left-0 right-0`.trim()
+</script>
+
+<div
+  class="{{ containerClasses }}"
+  style="height: {{ height }}px"
+  onscroll="handleScroll(event)"
+>
+  <div
+    class="{{ innerClasses }}"
+    style="height: {{ totalHeight }}px"
+  >
+    @foreach(item in visibleItems)
+      <div
+        class="{{ itemClasses }}"
+        style="top: {{ (startIndex + $loop.index) * itemHeight }}px; height: {{ itemHeight }}px"
+        data-index="{{ startIndex + $loop.index }}"
+      >
+        @if(renderItem)
+          {!! renderItem(item, startIndex + $loop.index) !!}
+        @else
+          <slot item="{{ item }}" index="{{ startIndex + $loop.index }}" />
+        @endif
+      </div>
+    @endforeach
+  </div>
+</div>
+
+<script>
+// Re-render on scroll (simplified reactivity)
+if (typeof window !== 'undefined') {
+  let ticking = false
+
+  function updateVisibleItems() {
+    const range = getVisibleRange()
+    // Trigger re-render by updating visible range
+    // In a real implementation, this would update reactive state
+    ticking = false
+  }
+
+  const scrollContainer = document.querySelector('.overflow-auto')
+  if (scrollContainer) {
+    scrollContainer.addEventListener('scroll', () => {
+      if (!ticking) {
+        window.requestAnimationFrame(updateVisibleItems)
+        ticking = true
+      }
+    })
+  }
+}
+</script>

package/dist/VirtualTable-59a1eskc.stx

@@ -0,0 +1,113 @@
+<script>
+export const columns = $props.columns || []
+export const data = $props.data || []
+export const rowHeight = $props.rowHeight || 48
+export const height = $props.height || 600
+export const headerHeight = $props.headerHeight || 56
+export const overscan = $props.overscan || 5
+export const striped = $props.striped || false
+export const hoverable = $props.hoverable ?? true
+export const className = $props.className || ''
+
+// Calculate visible range
+let scrollTop = 0
+const visibleCount = Math.ceil((height - headerHeight) / rowHeight)
+const totalHeight = data.length * rowHeight
+
+function getVisibleRange() {
+  const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan)
+  const endIndex = Math.min(data.length - 1, Math.floor((scrollTop + height - headerHeight) / rowHeight) + overscan)
+  return { startIndex, endIndex }
+}
+
+const { startIndex, endIndex } = getVisibleRange()
+const visibleRows = data.slice(startIndex, endIndex + 1)
+const offsetY = startIndex * rowHeight
+
+function handleScroll(event) {
+  const target = event.target
+  scrollTop = target.scrollTop
+}
+
+// Get cell value
+function getCellValue(row, column) {
+  if (column.render) {
+    return column.render(row[column.key], row)
+  }
+  return row[column.key]
+}
+
+export const containerClasses = `border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden ${className}`.trim()
+export const headerClasses = `bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex`.trim()
+export const headerCellClasses = `px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider`.trim()
+export const bodyClasses = `overflow-auto bg-white dark:bg-gray-900`.trim()
+export const innerClasses = `relative`.trim()
+export const rowClasses = `absolute left-0 right-0 flex border-b border-gray-200 dark:border-gray-700 ${hoverable ? 'hover:bg-gray-50 dark:hover:bg-gray-800' : ''}`.trim()
+export const cellClasses = `px-6 py-4 text-sm text-gray-900 dark:text-gray-100`.trim()
+</script>
+
+<div class="{{ containerClasses }}">
+  <!-- Header -->
+  <div class="{{ headerClasses }}" style="height: {{ headerHeight }}px">
+    @foreach(column in columns)
+      <div
+        class="{{ headerCellClasses }}"
+        style="flex: {{ column.width || 1 }}; min-width: {{ column.minWidth || 'auto' }}"
+      >
+        {{ column.label || column.key }}
+      </div>
+    @endforeach
+  </div>
+
+  <!-- Body -->
+  <div
+    class="{{ bodyClasses }}"
+    style="height: {{ height - headerHeight }}px"
+    onscroll="handleScroll(event)"
+  >
+    <div
+      class="{{ innerClasses }}"
+      style="height: {{ totalHeight }}px"
+    >
+      @foreach(row in visibleRows)
+        <div
+          class="{{ rowClasses }} {{ striped && ($loop.index % 2 === 1) ? 'bg-gray-50 dark:bg-gray-800' : '' }}"
+          style="top: {{ (startIndex + $loop.index) * rowHeight }}px; height: {{ rowHeight }}px"
+          data-index="{{ startIndex + $loop.index }}"
+        >
+          @foreach(column in columns)
+            <div
+              class="{{ cellClasses }}"
+              style="flex: {{ column.width || 1 }}; min-width: {{ column.minWidth || 'auto' }}"
+            >
+              {!! getCellValue(row, column) !!}
+            </div>
+          @endforeach
+        </div>
+      @endforeach
+    </div>
+  </div>
+</div>
+
+<script>
+// Re-render on scroll (simplified reactivity)
+if (typeof window !== 'undefined') {
+  let ticking = false
+
+  function updateVisibleRows() {
+    const range = getVisibleRange()
+    // Trigger re-render
+    ticking = false
+  }
+
+  const bodyContainer = document.querySelector('.overflow-auto')
+  if (bodyContainer) {
+    bodyContainer.addEventListener('scroll', () => {
+      if (!ticking) {
+        window.requestAnimationFrame(updateVisibleRows)
+        ticking = true
+      }
+    })
+  }
+}
+</script>

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export { default as CodeBlock } from './CodeBlock.stx';
+export { default as Footer } from './Footer.stx';
+export { default as Hero } from './Hero.stx';
+export { default as Installation } from './Installation.stx';

package/dist/composables/index.d.ts

@@ -0,0 +1,4 @@
+export * from './useCopyCode';
+export * from './useDarkMode';
+export * from './useSEO';
+export * from './utilities';

package/dist/composables/index.js

@@ -0,0 +1,3 @@
+// @bun
+function I(j){let{code:x,onSuccess:O,onError:J,timeout:U=2000}=j,G=!1,Y=null;return{copied:G,copy:async()=>{try{if(!navigator.clipboard)throw Error("Clipboard API not available");await navigator.clipboard.writeText(x),G=!0,O?.(),Y=setTimeout(()=>{G=!1,Y=null},U)}catch(X){let z=X instanceof Error?X:Error("Failed to copy code");J?.(z),console.error("Failed to copy code:",z)}},reset:()=>{if(G=!1,Y)clearTimeout(Y),Y=null}}}async function R(j){try{return await navigator.clipboard.writeText(j),!0}catch(x){return console.error("Failed to copy to clipboard:",x),!1}}function Q(){if(typeof window>"u")return"light";return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function A(j){return j==="system"?Q():j}function M(j={}){let{storageKey:x="theme",defaultTheme:O="system"}=j,J=O;if(typeof window<"u"&&typeof localStorage<"u"){let N=localStorage.getItem(x);if(N)J=N}let U=A(J)==="dark",G=(N)=>{let X=A(N);if(typeof document<"u")if(X==="dark")document.documentElement.classList.add("dark");else document.documentElement.classList.remove("dark");if(typeof localStorage<"u")localStorage.setItem(x,N)},Y=(N)=>{J=N,G(N)},Z=()=>{let X=A(J)==="dark"?"light":"dark";Y(X)};if(G(J),typeof window<"u"&&J==="system")window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(N)=>{if(J==="system")G("system")});return{isDark:U,theme:J,toggle:Z,setTheme:Y}}function S(j,x){if(typeof document>"u")return;document.title=x?x.replace("%s",j):j}function D(j,x,O=!1){if(typeof document>"u")return;let J=O?"property":"name",U=document.querySelector(`meta[${J}="${j}"]`);if(!U)U=document.createElement("meta"),U.setAttribute(J,j),document.head.appendChild(U);U.setAttribute("content",x)}function C(j,x){if(typeof document>"u")return;let O=document.querySelector(`link[rel="${j}"]`);if(!O)O=document.createElement("link"),O.setAttribute("rel",j),document.head.appendChild(O);O.setAttribute("href",x)}function T(j){let{title:x,description:O,author:J,keywords:U,ogImage:G,ogImageWidth:Y,ogImageHeight:Z,twitterCard:N="summary_large_image",twitterSite:X,twitterCreator:z,canonical:_}=j;if(x)S(x),D("og:title",x,!0),D("twitter:title",x);if(O)D("description",O),D("og:description",O,!0),D("twitter:description",O);if(J)D("author",J);if(U&&U.length>0)D("keywords",U.join(", "));if(G)D("og:image",G,!0),D("twitter:image",G);if(Y)D("og:image:width",Y,!0);if(Z)D("og:image:height",Z,!0);if(D("twitter:card",N),X)D("twitter:site",X);if(z)D("twitter:creator",z);if(_)C("canonical",_);if(D("og:type","website",!0),typeof window<"u")D("og:url",window.location.href,!0)}function E(j){let x=[],{title:O,description:J,author:U,keywords:G,ogImage:Y,ogImageWidth:Z,ogImageHeight:N,twitterCard:X="summary_large_image",twitterSite:z,twitterCreator:_,canonical:q}=j;if(O)x.push(`<title>${P(O)}</title>`),x.push(`<meta property="og:title" content="${P(O)}" />`),x.push(`<meta name="twitter:title" content="${P(O)}" />`);if(J)x.push(`<meta name="description" content="${P(J)}" />`),x.push(`<meta property="og:description" content="${P(J)}" />`),x.push(`<meta name="twitter:description" content="${P(J)}" />`);if(U)x.push(`<meta name="author" content="${P(U)}" />`);if(G&&G.length>0)x.push(`<meta name="keywords" content="${P(G.join(", "))}" />`);if(Y)x.push(`<meta property="og:image" content="${P(Y)}" />`),x.push(`<meta name="twitter:image" content="${P(Y)}" />`);if(Z)x.push(`<meta property="og:image:width" content="${P(Z)}" />`);if(N)x.push(`<meta property="og:image:height" content="${P(N)}" />`);if(x.push(`<meta name="twitter:card" content="${P(X)}" />`),z)x.push(`<meta name="twitter:site" content="${P(z)}" />`);if(_)x.push(`<meta name="twitter:creator" content="${P(_)}" />`);if(q)x.push(`<link rel="canonical" href="${P(q)}" />`);return x.push('<meta property="og:type" content="website" />'),x.join(`
+`)}function P(j){return j.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function w(j,x,O={}){let{enabled:J=!0,ignore:U=[]}=O,G=(Y)=>{if(!J||!j)return;let Z=Y.target;if(!j.contains(Z)){if(!U.some((X)=>{let z=document.querySelectorAll(X);return Array.from(z).some((_)=>_.contains(Z))}))x(Y)}};if(typeof document<"u")document.addEventListener("mousedown",G),document.addEventListener("touchstart",G);return()=>{if(typeof document<"u")document.removeEventListener("mousedown",G),document.removeEventListener("touchstart",G)}}function f(j,x={}){let{enabled:O=!0,initialFocus:J=null,returnFocus:U=!0,fallbackFocus:G=null}=x,Y=null,Z=!1;function N(){if(!j)return[];let $=["a[href]","button:not([disabled])","textarea:not([disabled])","input:not([disabled])","select:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");return Array.from(j.querySelectorAll($))}function X($){if(!O||!Z||!j)return;let K=N();if(K.length===0){$.preventDefault();return}let F=K[0],L=K[K.length-1];if($.shiftKey){if(document.activeElement===F||document.activeElement===j)$.preventDefault(),L.focus()}else if(document.activeElement===L)$.preventDefault(),F.focus()}function z($){if($.key==="Escape"&&O&&Z)q()}function _(){if(!O||!j||Z)return;if(Y=document.activeElement,J)J.focus();else{let $=N();if($.length>0)$[0].focus();else if(G)G.focus();else j.focus()}document.addEventListener("keydown",X),document.addEventListener("keydown",z),Z=!0}function q(){if(!Z)return;if(document.removeEventListener("keydown",X),document.removeEventListener("keydown",z),U&&Y)Y.focus();Z=!1}return{activate:_,deactivate:q}}function v(j,x={}){let{enabled:O=!0,preventDefault:J=!0,stopPropagation:U=!1,target:G=typeof document<"u"?document:null}=x,Y=Array.isArray(j)?j:[j],Z=(N)=>{if(!O)return;Y.forEach((X)=>{if(!(Array.isArray(X.key)?X.key:[X.key]).some((q)=>q.toLowerCase()===N.key.toLowerCase()))return;if(X.ctrl!==void 0&&X.ctrl!==N.ctrlKey)return;if(X.shift!==void 0&&X.shift!==N.shiftKey)return;if(X.alt!==void 0&&X.alt!==N.altKey)return;if(X.meta!==void 0&&X.meta!==N.metaKey)return;if(J)N.preventDefault();if(U)N.stopPropagation();X.handler(N)})};if(G)G.addEventListener("keydown",Z);return()=>{if(G)G.removeEventListener("keydown",Z)}}var g={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"};function u(j,x,O={}){let{serializer:J=JSON.stringify,deserializer:U=JSON.parse,onError:G=console.error}=O,Y=x;try{if(typeof window<"u"){let _=window.localStorage.getItem(j);if(_!==null)Y=U(_)}}catch(_){G(_)}let Z=Y,N=new Set;function X(_){try{let q=typeof _==="function"?_(Z):_;if(Z=q,typeof window<"u")window.localStorage.setItem(j,J(q));N.forEach(($)=>$(q))}catch(q){G(q)}}function z(){try{if(Z=x,typeof window<"u")window.localStorage.removeItem(j);N.forEach((_)=>_(x))}catch(_){G(_)}}if(typeof window<"u"){let _=(q)=>{if(q.key===j&&q.newValue!==null)try{let $=U(q.newValue);Z=$,N.forEach((K)=>K($))}catch($){G($)}else if(q.key===j&&q.newValue===null)Z=x,N.forEach(($)=>$(x))};window.addEventListener("storage",_)}return{value:Z,setValue:X,removeValue:z}}function W(j,x={}){let{defaultValue:O=!1}=x,J=O,U=null;if(typeof window<"u"&&"matchMedia"in window){U=window.matchMedia(j),J=U.matches;let Y=(Z)=>{J=Z.matches};if(U.addEventListener)U.addEventListener("change",Y);else U.addListener(Y)}function G(){if(U)J=U.matches}return{matches:J,updateMatches:G}}var B={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)"};function d(j){return W(B[j])}function m(){return W(B.mobile)}function c(){return W(B.desktop)}function o(){return W(B.dark)}function l(){return W(B.reducedMotion)}export{T as useSEO,l as usePrefersReducedMotion,W as useMediaQuery,u as useLocalStorage,v as useKeyboard,m as useIsMobile,c as useIsDesktop,o as useIsDarkMode,f as useFocusTrap,M as useDarkMode,I as useCopyCode,w as useClickOutside,d as useBreakpoint,S as setTitle,D as setMeta,C as setLink,Q as getSystemTheme,A as getEffectiveTheme,E as generateSEOTags,R as copyToClipboard,g as KeyboardShortcuts,B as Breakpoints};

package/dist/composables/useCopyCode.d.ts

@@ -0,0 +1,19 @@
+export declare function useCopyCode(options: CopyCodeOptions): CopyCodeResult;
+/**
+ * Simple synchronous copy function for direct use
+ */
+export declare function copyToClipboard(text: string): Promise<boolean>;
+/**
+ * Copy code to clipboard with visual feedback
+ */
+export declare interface CopyCodeOptions {
+  code: string
+  onSuccess?: () => void
+  onError?: (error: Error) => void
+  timeout?: number
+}
+export declare interface CopyCodeResult {
+  copied: boolean
+  copy: () => Promise<void>
+  reset: () => void
+}

package/dist/composables/useDarkMode.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Check if system prefers dark mode
+ */
+export declare function getSystemTheme(): 'light' | 'dark';
+/**
+ * Get the effective theme (resolving 'system' to actual theme)
+ */
+export declare function getEffectiveTheme(theme: 'light' | 'dark' | 'system'): 'light' | 'dark';
+/**
+ * Use dark mode hook
+ */
+export declare function useDarkMode(options?: DarkModeOptions): DarkModeResult;
+/**
+ * Dark mode utilities for STX components
+ */
+export declare interface DarkModeOptions {
+  storageKey?: string
+  defaultTheme?: 'light' | 'dark' | 'system'
+}
+export declare interface DarkModeResult {
+  isDark: boolean
+  theme: 'light' | 'dark' | 'system'
+  toggle: () => void
+  setTheme: (theme: 'light' | 'dark' | 'system') => void
+}

package/dist/composables/useSEO.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Set document title
+ */
+export declare function setTitle(title: string, template?: string): void;
+/**
+ * Set meta tag
+ */
+export declare function setMeta(name: string, content: string, isProperty?: any): void;
+/**
+ * Set link tag
+ */
+export declare function setLink(rel: string, href: string): void;
+/**
+ * Use SEO meta tags
+ */
+export declare function useSEO(options: SEOMetaOptions): void;
+/**
+ * Generate SEO meta tags as HTML string for server-side rendering
+ */
+export declare function generateSEOTags(options: SEOMetaOptions): string;
+/**
+ * SEO and meta tag utilities for STX components
+ */
+export declare interface SEOMetaOptions {
+  title?: string
+  description?: string
+  author?: string
+  keywords?: string[]
+  ogImage?: string
+  ogImageWidth?: string
+  ogImageHeight?: string
+  twitterCard?: 'summary' | 'summary_large_image' | 'app' | 'player'
+  twitterSite?: string
+  twitterCreator?: string
+  canonical?: string
+}

package/dist/composables/utilities/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useClickOutside';
+export * from './useFocusTrap';
+export * from './useKeyboard';
+export * from './useLocalStorage';
+export * from './useMediaQuery';

package/dist/composables/utilities/useClickOutside.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 declare function useClickOutside(elementRef: HTMLElement | null, callback: (event: MouseEvent | TouchEvent) => void, options?: UseClickOutsideOptions): () => void;
+/**
+ * Detects clicks outside a specified element
+ *
+ * @example
+ * ```ts
+ * const cleanup = useClickOutside(
+ *   modalRef,
+ *   () => closeModal(),
+ *   { enabled: isOpen, ignore: ['.tooltip'] }
+ * )
+ * ```
+ */
+/**
+ * Options for useClickOutside hook
+ */
+export declare interface UseClickOutsideOptions {
+  enabled?: boolean
+  ignore?: string[]
+}

package/dist/composables/utilities/useFocusTrap.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 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 declare function useFocusTrap(containerRef: HTMLElement | null, options?: UseFocusTrapOptions): { activate: () => void, deactivate: () => void };
+/**
+ * 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 declare interface UseFocusTrapOptions {
+  enabled?: boolean
+  initialFocus?: HTMLElement | null
+  returnFocus?: boolean
+  fallbackFocus?: HTMLElement | null
+}

package/dist/composables/utilities/useKeyboard.d.ts

@@ -0,0 +1,55 @@
+/**
+ * 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 declare function useKeyboard(handlers: KeyboardHandler | KeyboardHandler[], options?: UseKeyboardOptions): () => void;
+// Common keyboard shortcuts
+export declare 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'
+};
+/**
+ * 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 declare interface UseKeyboardOptions {
+  enabled?: boolean
+  preventDefault?: boolean
+  stopPropagation?: boolean
+  target?: HTMLElement | Document | Window | null
+}
+/**
+ * Keyboard event handler configuration
+ */
+export declare interface KeyboardHandler {
+  key: string | string[]
+  handler: (event: KeyboardEvent) => void
+  ctrl?: boolean
+  shift?: boolean
+  alt?: boolean
+  meta?: boolean
+}

package/dist/composables/utilities/useLocalStorage.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 declare function useLocalStorage<T>(key: string, initialValue: T, options?: UseLocalStorageOptions<T>): {
+    value: T
+    setValue: (newValue: T | ((prev: T) => T)) => void
+    removeValue: () => void
+  };
+/**
+ * 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 declare interface UseLocalStorageOptions<T> {
+  serializer?: (value: T) => string
+  deserializer?: (value: string) => T
+  onError?: (error: Error) => void
+}