@stacksjs/components 0.2.571 → 0.2.573

package/dist/ui/theme-toggle/ThemeToggle.d.ts

@@ -0,0 +1,53 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare function choose(next: unknown): void;
+/*
+ * The cycle for the single-button variant: light to dark to system and round.
+ * `auto` is the stored spelling and `system` the one people say, and
+ * `useColorMode().set` accepts either.
+ */
+declare function cycle(): void;
+declare function isActive(option: unknown): boolean;
+declare const __dtsx_component__: __DtsxStxComponentType;
+/*
+ * The control four of six apps hand-rolled (stacksjs/stx#1981).
+ *
+ * `<Sidebar>` already has `followSystemAppearance` and a `theme` prop, so the
+ * library had a theme concept and no standalone control to drive it. Every
+ * hand-rolled version is the same three states, the same persistence, and the
+ * same pre-paint flash to avoid.
+ *
+ * That last part is why it belongs here, and it is also the part this component
+ * does NOT reimplement: `useColorMode()` reads the options the pre-paint boot
+ * script published on `window.__STX_COLOR_MODE__` (stacksjs/stx#1794), so the
+ * class already on <html> before first paint and the storage key this reads are
+ * the same ones. A toggle that picked its own key would undo the theme on
+ * hydration - which is the flash, arriving later instead of sooner.
+ */
+export declare const variant: boolean;
+export declare const className: unknown;
+export declare const lightLabel: unknown;
+export declare const darkLabel: unknown;
+export declare const systemLabel: unknown;
+/** Labels are read by assistive tech in `button` variant, where only an icon shows. */
+export declare const showLabels: unknown;
+export declare const groupClasses: unknown;
+export declare const buttonClasses: unknown;
+export declare const optionClasses: 'inline-flex items-center justify-center gap-1.5 px-2.5 py-1.5 text-sm text-fg-soft rounded-control hover:text-fg-strong focus:outline-none focus:ring-2 focus:ring-accent transition-colors';
+export declare const optionActiveClasses: 'inline-flex items-center justify-center gap-1.5 px-2.5 py-1.5 text-sm font-medium text-fg bg-panel shadow-sm rounded-control focus:outline-none focus:ring-2 focus:ring-accent transition-colors';
+declare const labels: {
+  light: {};
+  dark: {};
+  system: {}
+};
+/*
+ * `useColorMode()` owns the class on <html>, the storage key and the system
+ * media query. This component owns none of that - it is a control, and the
+ * preference below is a mirror so the template can react to it.
+ */
+declare const colorMode: unknown;
+declare const preference: ReturnType<typeof state>;
+declare const resolved: ReturnType<typeof state>;
+/** What the single button says it will do, for a screen reader. */
+declare const triggerLabel: ReturnType<typeof derived>;
+declare type __DtsxStxComponentType = DefineComponent<{ variant?: unknown, className?: string, lightLabel?: string, darkLabel?: string, systemLabel?: string, showLabels?: unknown }> & { readonly __stxExposed?: { preference: typeof preference, resolved: typeof resolved, choose: typeof choose, cycle: typeof cycle, isActive: typeof isActive, triggerLabel: typeof triggerLabel } }
+export default __dtsx_component__;

package/dist/ui/theme-toggle/index.d.ts

@@ -7,4 +7,4 @@ export declare interface ThemeToggleProps {
   className?: string
   onChange?: (state: { preference: 'light' | 'dark' | 'auto', mode: 'light' | 'dark' }) => void
 }
-export { default as ThemeToggle } from './ThemeToggle.stx';
+export { default as ThemeToggle } from './ThemeToggle';

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

@@ -0,0 +1,39 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare const __dtsx_component__: __DtsxStxComponentType;
+export declare const content: unknown;
+export declare const position: unknown;
+export declare const delay: unknown;
+export declare const className: unknown;
+export declare const show: ReturnType<typeof $bool>;
+export declare const disabled: ReturnType<typeof $bool>;
+/*
+ * The id that makes the tooltip reachable from its trigger.
+ *
+ * `role="tooltip"` names what the element IS; it does not attach it to
+ * anything. Without `aria-describedby` on the trigger pointing here, a screen
+ * reader never reaches this element at all and the role announces nothing --
+ * so the component was a DOWNGRADE from the native `title=` it replaces, which
+ * at least is announced.
+ */
+export declare const tooltipId: string;
+/*
+ * Whether the text may wrap. It may, by default.
+ *
+ * `whitespace-nowrap` keeps a two-word hint on one line, which is what a
+ * tooltip usually is -- but a sentence-length one then grows past the viewport
+ * instead of wrapping, and on a phone the end of it is simply unreachable.
+ * Wrapping with a sensible max width is right for both; `nowrap` is there for
+ * a caller who knows the content is short.
+ */
+export declare const nowrap: ReturnType<typeof $bool>;
+/*
+ * No `pointer-events-none`: WCAG 2.1 SC 1.4.13 requires content shown on hover
+ * to stay visible while the pointer is over it. With the pointer locked out,
+ * moving toward the tooltip to read it dismissed it -- worst for exactly the
+ * long tooltips that are hardest to read quickly. The panel takes its own
+ * mouseenter/mouseleave below so entering it keeps it open.
+ */
+export declare const tooltipClasses: unknown;
+export declare const arrowClass: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ content?: string, position?: string, delay?: unknown, className?: string, show?: unknown, disabled?: unknown, nowrap?: unknown }>;
+export default __dtsx_component__;

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

@@ -6,4 +6,4 @@ export declare interface TooltipProps {
   disabled?: boolean
   className?: string
 }
-export { default as Tooltip } from './Tooltip.stx';
+export { default as Tooltip } from './Tooltip';

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

@@ -0,0 +1,191 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare function setShow(next: unknown): undefined;
+declare const __dtsx_component__: __DtsxStxComponentType;
+export declare const show: unknown;
+export declare const enter: unknown;
+export declare const enterFrom: unknown;
+export declare const enterTo: unknown;
+export declare const leave: unknown;
+export declare const leaveFrom: unknown;
+export declare const leaveTo: unknown;
+export declare const appear: ReturnType<typeof $bool>;
+export declare const duration: unknown;
+export declare const delay: unknown;
+export declare const preset: unknown;
+export declare const className: unknown;
+/**
+ * @defaultValue
+ * ```ts
+ * {
+ *   fade: {
+ *     enter: 'transition-opacity',
+ *     enterFrom: 'opacity-0',
+ *     enterTo: 'opacity-100',
+ *     leave: 'transition-opacity',
+ *     leaveFrom: 'opacity-100',
+ *     leaveTo: 'opacity-0'
+ *   },
+ *   slide: {
+ *     enter: 'transition-transform',
+ *     enterFrom: 'translate-y-2',
+ *     enterTo: 'translate-y-0',
+ *     leave: 'transition-transform',
+ *     leaveFrom: 'translate-y-0',
+ *     leaveTo: 'translate-y-2'
+ *   },
+ *   slideLeft: {
+ *     enter: 'transition-transform',
+ *     enterFrom: 'translate-x-full',
+ *     enterTo: 'translate-x-0',
+ *     leave: 'transition-transform',
+ *     leaveFrom: 'translate-x-0',
+ *     leaveTo: '-translate-x-full'
+ *   },
+ *   slideRight: {
+ *     enter: 'transition-transform',
+ *     enterFrom: '-translate-x-full',
+ *     enterTo: 'translate-x-0',
+ *     leave: 'transition-transform',
+ *     leaveFrom: 'translate-x-0',
+ *     leaveTo: 'translate-x-full'
+ *   },
+ *   scale: {
+ *     enter: 'transition-transform',
+ *     enterFrom: 'scale-95',
+ *     enterTo: 'scale-100',
+ *     leave: 'transition-transform',
+ *     leaveFrom: 'scale-100',
+ *     leaveTo: 'scale-95'
+ *   },
+ *   rotate: {
+ *     enter: 'transition-transform',
+ *     enterFrom: 'rotate-12 scale-95',
+ *     enterTo: 'rotate-0 scale-100',
+ *     leave: 'transition-transform',
+ *     leaveFrom: 'rotate-0 scale-100',
+ *     leaveTo: '-rotate-12 scale-95'
+ *   },
+ *   zoom: {
+ *     enter: 'transition-all',
+ *     enterFrom: 'scale-0 opacity-0',
+ *     enterTo: 'scale-100 opacity-100',
+ *     leave: 'transition-all',
+ *     leaveFrom: 'scale-100 opacity-100',
+ *     leaveTo: 'scale-0 opacity-0'
+ *   }
+ * }
+ * ```
+ */
+declare const presets: {
+  fade: {
+  /** @defaultValue 'transition-opacity' */
+  enter: string;
+  /** @defaultValue 'opacity-0' */
+  enterFrom: string;
+  /** @defaultValue 'opacity-100' */
+  enterTo: string;
+  /** @defaultValue 'transition-opacity' */
+  leave: string;
+  /** @defaultValue 'opacity-100' */
+  leaveFrom: string;
+  /** @defaultValue 'opacity-0' */
+  leaveTo: string
+};
+  slide: {
+  /** @defaultValue 'transition-transform' */
+  enter: string;
+  /** @defaultValue 'translate-y-2' */
+  enterFrom: string;
+  /** @defaultValue 'translate-y-0' */
+  enterTo: string;
+  /** @defaultValue 'transition-transform' */
+  leave: string;
+  /** @defaultValue 'translate-y-0' */
+  leaveFrom: string;
+  /** @defaultValue 'translate-y-2' */
+  leaveTo: string
+};
+  slideLeft: {
+  /** @defaultValue 'transition-transform' */
+  enter: string;
+  /** @defaultValue 'translate-x-full' */
+  enterFrom: string;
+  /** @defaultValue 'translate-x-0' */
+  enterTo: string;
+  /** @defaultValue 'transition-transform' */
+  leave: string;
+  /** @defaultValue 'translate-x-0' */
+  leaveFrom: string;
+  /** @defaultValue '-translate-x-full' */
+  leaveTo: string
+};
+  slideRight: {
+  /** @defaultValue 'transition-transform' */
+  enter: string;
+  /** @defaultValue '-translate-x-full' */
+  enterFrom: string;
+  /** @defaultValue 'translate-x-0' */
+  enterTo: string;
+  /** @defaultValue 'transition-transform' */
+  leave: string;
+  /** @defaultValue 'translate-x-0' */
+  leaveFrom: string;
+  /** @defaultValue 'translate-x-full' */
+  leaveTo: string
+};
+  scale: {
+  /** @defaultValue 'transition-transform' */
+  enter: string;
+  /** @defaultValue 'scale-95' */
+  enterFrom: string;
+  /** @defaultValue 'scale-100' */
+  enterTo: string;
+  /** @defaultValue 'transition-transform' */
+  leave: string;
+  /** @defaultValue 'scale-100' */
+  leaveFrom: string;
+  /** @defaultValue 'scale-95' */
+  leaveTo: string
+};
+  rotate: {
+  /** @defaultValue 'transition-transform' */
+  enter: string;
+  /** @defaultValue 'rotate-12 scale-95' */
+  enterFrom: string;
+  /** @defaultValue 'rotate-0 scale-100' */
+  enterTo: string;
+  /** @defaultValue 'transition-transform' */
+  leave: string;
+  /** @defaultValue 'rotate-0 scale-100' */
+  leaveFrom: string;
+  /** @defaultValue '-rotate-12 scale-95' */
+  leaveTo: string
+};
+  zoom: {
+  /** @defaultValue 'transition-all' */
+  enter: string;
+  /** @defaultValue 'scale-0 opacity-0' */
+  enterFrom: string;
+  /** @defaultValue 'scale-100 opacity-100' */
+  enterTo: string;
+  /** @defaultValue 'transition-all' */
+  leave: string;
+  /** @defaultValue 'scale-100 opacity-100' */
+  leaveFrom: string;
+  /** @defaultValue 'scale-0 opacity-0' */
+  leaveTo: string
+}
+};
+declare const p: unknown;
+export declare const enterClass: unknown;
+export declare const enterFromClass: unknown;
+export declare const enterToClass: unknown;
+export declare const leaveClass: unknown;
+export declare const leaveFromClass: unknown;
+export declare const leaveToClass: unknown;
+export declare const durationStyle: string;
+export declare const extraClass: unknown;
+declare const showProp: {};
+declare const visible: ReturnType<typeof state>;
+declare type __DtsxStxComponentType = DefineComponent<{ show?: unknown, enter?: string, enterFrom?: string, enterTo?: string, leave?: string, leaveFrom?: string, leaveTo?: string, appear?: unknown, duration?: unknown, delay?: unknown, preset?: string, className?: string }> & { readonly __stxExposed?: { visible: typeof visible, setShow: typeof setShow } }
+export default __dtsx_component__;

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

@@ -21,4 +21,4 @@ export declare interface TransitionProps {
   onAfterLeave?: () => void
   className?: string
 }
-export { default as Transition } from './Transition.stx';
+export { default as Transition } from './Transition';

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

@@ -0,0 +1,61 @@
+import type { DefineComponent } from '@stacksjs/stx';
+/** Width over height as CSS takes it: "16/9", "4/3", 0.5625. */
+declare function ratio(value: unknown): string | unknown | unknown | string;
+declare const __dtsx_component__: __DtsxStxComponentType;
+/*
+ * A video player: ts-video-player's <video-player>, with its own controls,
+ * for a file, an HLS or DASH stream, a YouTube link (played from
+ * youtube-nocookie.com) or a Vimeo link (with Do Not Track). The player draws
+ * its controls over a YouTube or Vimeo embed, so the provider's title bar and
+ * "Watch on YouTube" are not a way out of the page: the video plays here.
+ *
+ *   <Video src="/videos/demo.mp4" poster="/demo.jpg" label="Product demo" />
+ *
+ * One player can play whichever video is chosen. `src`, `poster`,
+ * `aspectRatio` and `label` follow a parent's binding:
+ *
+ *   <Video :src="current.url" :aspectRatio="current.aspect" autoplay />
+ *
+ * An empty `src` pauses it, which is what closing the dialog or sheet it sits
+ * in should do. With `autoplay`, each video chosen starts by itself (the
+ * person just asked for it).
+ *
+ * The controls speak the page's language (`<html lang>`): ts-video-player
+ * names its buttons and announces playback in it.
+ */
+export declare const src: unknown;
+export declare const poster: unknown;
+/** The accessible name of the player. Follows a binding. */
+export declare const label: unknown;
+/** A heading shown above the player. */
+export declare const title: unknown;
+export declare const autoplay: ReturnType<typeof $bool>;
+export declare const loop: ReturnType<typeof $bool>;
+export declare const muted: ReturnType<typeof $bool>;
+export declare const controls: unknown;
+export declare const playsinline: unknown;
+export declare const disablePictureInPicture: ReturnType<typeof $bool>;
+/** Focus the player when it is drawn (a dialog's first focus): its keys then work at once. */
+export declare const autofocus: ReturnType<typeof $bool>;
+export declare const preload: unknown;
+export declare const crossorigin: unknown;
+export declare const controlslist: unknown;
+export declare const width: unknown;
+export declare const height: unknown;
+export declare const className: unknown;
+export declare const aspectRatio: ReturnType<typeof ratio>;
+declare const sources: unknown;
+declare const tracks: unknown;
+declare const drm: unknown;
+declare const playerSources: unknown;
+declare const playerTracks: ReturnType<typeof tracks.map>;
+export declare const playerConfig: unknown;
+/*
+ * A YouTube or Vimeo link is a web page, not a media file. Before the player
+ * is defined (or without JavaScript) the native <video> beneath it can play
+ * only a file, so for a page it stays empty rather than offering the link.
+ */
+export declare const isPage: unknown;
+export declare const containerClasses: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ src?: string, poster?: string, label?: unknown, title?: string, autoplay?: unknown, loop?: unknown, muted?: unknown, controls?: unknown, playsinline?: unknown, disablePictureInPicture?: unknown, autofocus?: unknown, preload?: string, crossorigin?: string, controlslist?: string, width?: string, height?: string, className?: unknown, class?: string, aspectRatio?: unknown, sources?: unknown, tracks?: unknown, drm?: unknown }>;
+export default __dtsx_component__;

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

@@ -26,4 +26,4 @@ export declare interface VideoProps {
   className?: string
   title?: string
 }
-export { default as Video } from './Video.stx';
+export { default as Video } from './Video';

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

@@ -0,0 +1,12 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare const __dtsx_component__: __DtsxStxComponentType;
+export declare const items: unknown;
+export declare const itemHeight: unknown;
+export declare const height: unknown;
+export declare const overscan: unknown;
+export declare const className: unknown;
+export declare const totalHeight: unknown;
+export declare const containerClasses: unknown;
+declare const scrollTop: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ items?: unknown[], itemHeight?: number, height?: number, overscan?: number, className?: string }> & { readonly __stxExposed?: { scrollTop: typeof scrollTop, scrollTo: (...args: any[]) => any } }
+export default __dtsx_component__;

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

@@ -6,4 +6,4 @@ export declare interface VirtualListProps<T = any> {
   renderItem?: (item: T, index: number) => string
   className?: string
 }
-export { default as VirtualList } from './VirtualList.stx';
+export { default as VirtualList } from './VirtualList';

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

@@ -0,0 +1,21 @@
+import type { DefineComponent } from '@stacksjs/stx';
+declare const __dtsx_component__: __DtsxStxComponentType;
+export declare const columns: unknown;
+export declare const data: unknown;
+export declare const rowHeight: unknown;
+export declare const height: unknown;
+export declare const headerHeight: unknown;
+export declare const overscan: unknown;
+export declare const striped: ReturnType<typeof $bool>;
+export declare const hoverable: unknown;
+export declare const className: unknown;
+export declare const totalHeight: unknown;
+export declare const containerClasses: unknown;
+export declare const headerClasses: unknown;
+export declare const headerCellClasses: unknown;
+export declare const bodyClasses: unknown;
+export declare const rowClasses: unknown;
+export declare const cellClasses: unknown;
+declare const scrollTop: unknown;
+declare type __DtsxStxComponentType = DefineComponent<{ columns?: unknown[], data?: unknown[], rowHeight?: number, height?: number, headerHeight?: number, overscan?: number, striped?: unknown, hoverable?: unknown, className?: string }> & { readonly __stxExposed?: { scrollTop: typeof scrollTop } }
+export default __dtsx_component__;

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

@@ -16,4 +16,4 @@ export declare interface VirtualTableProps<T = any> {
   hoverable?: boolean
   className?: string
 }
-export { default as VirtualTable } from './VirtualTable.stx';
+export { default as VirtualTable } from './VirtualTable';

package/dist/utils/accessibility.d.ts

@@ -106,6 +106,21 @@ export declare const KeyboardKeys: {
 };
 /**
  * ARIA attribute helpers
+ * @defaultValue
+ * ```ts
+ * {
+ *   setExpanded: (element: HTMLElement, expanded: boolean) => void,
+ *   setSelected: (element: HTMLElement, selected: boolean) => void,
+ *   setChecked: (element: HTMLElement, checked: boolean | 'mixed') => void,
+ *   setDisabled: (element: HTMLElement, disabled: boolean) => void,
+ *   setHidden: (element: HTMLElement, hidden: boolean) => void,
+ *   setPressed: (element: HTMLElement, pressed: boolean) => void,
+ *   setInvalid: (element: HTMLElement, invalid: boolean) => void,
+ *   setRequired: (element: HTMLElement, required: boolean) => void,
+ *   setLive: (element: HTMLElement, live: AriaLive) => void,
+ *   setBusy: (element: HTMLElement, busy: boolean) => void
+ * }
+ * ```
  */
 export declare const aria: {
   /**

package/dist/utils/error-handling.d.ts

@@ -35,9 +35,9 @@ catch (error) {
  * ```
  */
 export declare function handleError(error: Error, options?: {
-    /** Whether to re-throw the error after handling */
+     
     throwError?: boolean
-    /** Whether to log the error to console */
+     
     logError?: boolean
   }): void;
 /* ... * / },
@@ -108,6 +108,19 @@ export declare function createDebugger(component: string): {
 export declare function errorBoundary<T>(component: string, renderFn: () => T, fallback: T): T;
 /**
  * Error types for common scenarios
+ * @defaultValue
+ * ```ts
+ * {
+ *   invalidProp: (component: string, prop: string, received: any, expected: any) => ComponentError,
+ *   requiredProp: (component: string, prop: string) => ComponentError,
+ *   invalidType: (component: string, prop: string, received: any, expected: string) => ComponentError,
+ *   componentNotFound: (componentName: string) => ComponentError,
+ *   invalidChildren: (component: string, received: any, expected: string) => ComponentError,
+ *   stateUpdate: (component: string, stateName: string, error: Error) => ComponentError,
+ *   eventHandler: (component: string, eventName: string, error: Error) => ComponentError,
+ *   render: (component: string, error: Error) => ComponentError
+ * }
+ * ```
  */
 export declare const ErrorTypes: {
   /**

package/dist/utils/i18n.d.ts

@@ -94,78 +94,61 @@ export declare function isRTL(locale: string): boolean;
 export declare function loadLocaleMessages(locale: string, loadFn: () => Promise<Messages>): Promise<Messages>;
 /**
  * Predefined pluralization rules for common languages
+ * @defaultValue
+ * ```ts
+ * {
+ *   en: (count) => number,
+ *   de: (count) => number,
+ *   nl: (count) => number,
+ *   sv: (count) => number,
+ *   fr: (count) => number,
+ *   pt_BR: (count) => number,
+ *   ru: (count) => unknown,
+ *   pl: (count) => unknown,
+ *   cs: (count) => unknown,
+ *   ar: (count) => unknown,
+ *   ja: () => number,
+ *   ko: () => number,
+ *   zh: () => number,
+ *   th: () => number,
+ *   vi: () => number
+ * }
+ * ```
  */
-export declare const pluralRules: {
-  en: (count) => unknown;
-  de: (count) => unknown;
-  nl: (count) => unknown;
-  sv: (count) => unknown;
-  fr: (count) => unknown;
-  pt_BR: (count) => unknown;
-  ru: (count) => unknown;
-  pl: (count) => unknown;
-  cs: (count) => unknown;
-  ar: (count) => unknown;
-  ja: () => 0;
-  ko: () => 0;
-  zh: () => 0;
-  th: () => 0;
-  vi: () => 0
-};
+export declare const pluralRules: Record<string, PluralRule>;
 /**
  * Common date/time format presets
+ * @defaultValue
+ * ```ts
+ * {
+ *   short: { year: 'numeric', month: 'numeric', day: 'numeric' },
+ *   long: { year: 'numeric', month: 'long', day: 'numeric' },
+ *   full: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
+ *   time: { hour: 'numeric', minute: 'numeric' },
+ *   datetime: {
+ *     year: 'numeric',
+ *     month: 'numeric',
+ *     day: 'numeric',
+ *     hour: 'numeric',
+ *     minute: 'numeric'
+ *   }
+ * }
+ * ```
  */
-export declare const dateTimeFormats: {
-  short: {
-  year: 'numeric';
-  month: 'numeric';
-  day: 'numeric'
-};
-  long: {
-  year: 'numeric';
-  month: 'long';
-  day: 'numeric'
-};
-  full: {
-  weekday: 'long';
-  year: 'numeric';
-  month: 'long';
-  day: 'numeric'
-};
-  time: {
-  hour: 'numeric';
-  minute: 'numeric'
-};
-  datetime: {
-  year: 'numeric';
-  month: 'numeric';
-  day: 'numeric';
-  hour: 'numeric';
-  minute: 'numeric'
-}
-};
+export declare const dateTimeFormats: Record<string, Intl.DateTimeFormatOptions>;
 /**
  * Common number format presets
+ * @defaultValue
+ * ```ts
+ * {
+ *   decimal: { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 },
+ *   currency: { style: 'currency', currency: 'USD' },
+ *   percent: { style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 2 },
+ *   compact: { notation: 'compact' }
+ * }
+ * ```
  */
-export declare const numberFormats: {
-  decimal: {
-  style: 'decimal';
-  minimumFractionDigits: 2;
-  maximumFractionDigits: 2
-};
-  currency: {
-  style: 'currency';
-  currency: 'USD'
-};
-  percent: {
-  style: 'percent';
-  minimumFractionDigits: 0;
-  maximumFractionDigits: 2
-};
-  compact: {
-  notation: 'compact'
-}
-};
+export declare const numberFormats: Record<string, Intl.NumberFormatOptions>;
 /**
  * Component-specific i18n messages
  *

package/dist/utils/keep-alive.d.ts

@@ -37,7 +37,17 @@ export declare function createKeepAlive(options?: KeepAliveOptions): KeepAlive;
  * cache.has('key1') // true
  * ```
  */
-export declare function createLRUCache<T = any>(maxSize: number): void;
+export declare function createLRUCache<T = any>(maxSize: number): {
+  set: (key: string, value: T) => void;
+  get: (key: string) => T | undefined;
+  has: (key: string) => boolean;
+  delete: (key: string) => boolean;
+  clear: () => void;
+  get size(): number;
+  keys: () => string[];
+  values: () => T[];
+  forEach: (callback: (value: T, key: string) => void) => void
+};
 /**
  * State manager for component state preservation
  *
@@ -55,7 +65,15 @@ export declare function createLRUCache<T = any>(maxSize: number): void;
  * console.log(state.count) // 5
  * ```
  */
-export declare function createStateManager(): void;
+export declare function createStateManager(): {
+  save: (key: string, state: Record<string, any>) => void;
+  restore: (key: string) => Record<string, any> | null;
+  has: (key: string) => boolean;
+  remove: (key: string) => boolean;
+  clear: () => void;
+  keys: () => string[];
+  get size(): number
+};
 /**
  * Create a component pool for object reuse
  *
@@ -79,7 +97,13 @@ export declare function createStateManager(): void;
  * pool.release(instance)
  * ```
  */
-export declare function createComponentPool<T>(factory: () => T, options?: { maxSize?: number, reset?: (instance: T) => void }): void;
+export declare function createComponentPool<T>(factory: () => T, options?: { maxSize?: number, reset?: (instance: T) => void }): {
+  acquire: () => T;
+  release: (instance: T) => void;
+  clear: () => void;
+  get size(): number;
+  get maxSize(): number
+};
 /**
  * KeepAlive utilities for @stacksjs/components
  *

package/dist/utils/lazy-loading.d.ts

@@ -102,7 +102,11 @@ export declare function getCacheStats(): { size: number, keys: string[] };
  * const component = await loader.load('/about')
  * ```
  */
-export declare function createRouteLoader(routes: Record<string, () => Promise<any>>): void;
+export declare function createRouteLoader(routes: Record<string, () => Promise<any>>): {
+  load: (path: string) => Promise<any>;
+  preload: (path: string) => Promise<any>;
+  preloadRoutes: (paths: string[]) => Promise<any[]>
+};
 /**
  * Image lazy loading helper
  *