@stacksjs/components 0.2.5 → 0.2.8

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

@@ -39,23 +39,6 @@ export declare function handleError(error: Error, options?: {
     /** Whether to log the error to console */
     logError?: boolean
   }): void;
-/**
- * Create a wrapped function that catches and handles errors
- *
- * @param fn - Function to wrap
- * @param component - Component name for error context
- * @param eventName - Event name for error context
- * @returns Wrapped function
- *
- * @example
- * ```ts
- * const safeHandler = wrapErrorHandler(
- *   () => { /* ... * / },
- *   'Button',
- *   'onClick'
- * )
- * ```
- */
 /* ... * / },
  *   'Button',
  *   'onClick'
@@ -124,40 +107,53 @@ 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) => unknown,
+ *   requiredProp: (component: string, prop: string) => unknown,
+ *   invalidType: (component: string, prop: string, received: any, expected: string) => unknown,
+ *   componentNotFound: (componentName: string) => unknown,
+ *   invalidChildren: (component: string, received: any, expected: string) => unknown,
+ *   stateUpdate: (component: string, stateName: string, error: Error) => unknown,
+ *   eventHandler: (component: string, eventName: string, error: Error) => unknown,
+ *   render: (component: string, error: Error) => unknown
+ * }
+ * ```
  */
 export declare const ErrorTypes: {
   /**
    * Invalid prop value error
    */
-  invalidProp(component: string, prop: string, received: any, expected: any): unknown;
+  invalidProp: (component: string, prop: string, received: any, expected: any) => unknown;
   /**
    * Required prop missing error
    */
-  requiredProp(component: string, prop: string): unknown;
+  requiredProp: (component: string, prop: string) => unknown;
   /**
    * Invalid prop type error
    */
-  invalidType(component: string, prop: string, received: any, expected: string): unknown;
+  invalidType: (component: string, prop: string, received: any, expected: string) => unknown;
   /**
    * Component not found error
    */
-  componentNotFound(componentName: string): unknown;
+  componentNotFound: (componentName: string) => unknown;
   /**
    * Invalid children error
    */
-  invalidChildren(component: string, received: any, expected: string): unknown;
+  invalidChildren: (component: string, received: any, expected: string) => unknown;
   /**
    * State update error
    */
-  stateUpdate(component: string, stateName: string, error: Error): unknown;
+  stateUpdate: (component: string, stateName: string, error: Error) => unknown;
   /**
    * Event handler error
    */
-  eventHandler(component: string, eventName: string, error: Error): unknown;
+  eventHandler: (component: string, eventName: string, error: Error) => unknown;
   /**
    * Render error
    */
-  render(component: string, error: Error): unknown
+  render: (component: string, error: Error) => unknown
 };
 /**
  * Error context information
@@ -179,4 +175,4 @@ export declare class ComponentError extends Error {
   constructor(component: string, message: string, context?: ErrorContext);
   static formatMessage(component: string, message: string, context: ErrorContext): string;
   toJSON(): { name: string, message: string, component: string, context: ErrorContext | undefined, stack: string | undefined };
-}
+}

package/dist/utils/highlighter.d.ts

@@ -1,3 +1,4 @@
+import type { Highlighter as TSHighlighter } from 'ts-syntax-highlighter';
 /**
  * Initialize or get the syntax highlighter instance
  */
@@ -24,4 +25,4 @@ export declare interface HighlightResult {
   html: string
   language: string
   theme: string
-}
+}

package/dist/utils/i18n.d.ts

@@ -69,60 +69,31 @@ export declare function d(date: Date | number, format?: string): string;
  * @returns Formatted number string
  */
 export declare function n(value: number, format?: string): string;
-/**
- * RTL (Right-to-Left) language detection
- *
- * @param locale - Locale code
- * @returns Whether locale is RTL
- */
-export declare function isRTL(locale: string): boolean;
-/**
- * Load locale messages dynamically
- *
- * @param locale - Locale code
- * @param loadFn - Function to load messages
- * @returns Promise of messages
- *
- * @example
- * ```ts
- * const messages = await loadLocaleMessages('es', async () => {
- *   const module = await import('./locales/es.json')
- *   return module.default
- * })
- * ```
- */
-export declare function loadLocaleMessages(locale: string, loadFn: () => Promise<Messages>): Promise<Messages>;
 /**
  * Predefined pluralization rules for common languages
  */
 export declare const pluralRules: {
-  Finnish
-  en: unknown;
-  de: unknown;
-  nl: unknown;
-  sv: unknown;
-  Brazilian Portuguese
-  fr: unknown;
-  pt_BR: unknown;
-  Croatian
+  en: (count) => unknown;
+  de: (count) => unknown;
+  nl: (count) => unknown;
+  sv: (count) => unknown;
+  fr: (count) => unknown;
+  pt_BR: (count) => unknown;
   ru: (count) => unknown;
-  // Polish
   pl: (count) => unknown;
-  Slovak
   cs: (count) => unknown;
-  // Arabic
   ar: (count) => unknown;
-  Vietnamese
   ja: () => unknown;
   ko: () => unknown;
   zh: () => unknown;
   th: () => unknown;
-  vi: () => unknown
-};
+  vi: () => unknown;
+  }
+
 /**
  * Common date/time format presets
  */
-export declare const dateTimeFormats: {
+export const dateTimeFormats: Record<string, Intl.DateTimeFormatOptions> = {
   short: {
   year: 'numeric';
   month: 'numeric';
@@ -149,12 +120,13 @@ export declare const dateTimeFormats: {
   day: 'numeric';
   hour: 'numeric';
   minute: 'numeric'
-}
 };
+  }
+
 /**
  * Common number format presets
  */
-export declare const numberFormats: {
+export const numberFormats: Record<string, Intl.NumberFormatOptions> = {
   decimal: {
   style: 'decimal';
   minimumFractionDigits: 2;
@@ -171,14 +143,85 @@ export declare const numberFormats: {
 };
   compact: {
   notation: 'compact'
-}
 };
+  }
+
 /**
- * Component-specific i18n messages
+ * RTL (Right-to-Left) language detection
  *
- * Provides default translations for component library
+ * @param locale - Locale code
+ * @returns Whether locale is RTL
  */
-export declare const componentMessages: LocaleMessages;
+export function isRTL(locale: () => unknown;
+  loadFn: () => unknown;
+  ): Promise<Messages> {
+  try {
+    return await loadFn()
+  }
+  catch: (error) => unknown;
+  es: {
+  common: {
+  loading: 'Cargando...';
+  error: 'Error';
+  retry: 'Reintentar';
+  cancel: 'Cancelar';
+  confirm: 'Confirmar';
+  close: 'Cerrar';
+  save: 'Guardar';
+  delete: 'Eliminar';
+  edit: 'Editar';
+  search: 'Buscar';
+  clear: 'Limpiar';
+  submit: 'Enviar';
+  reset: 'Restablecer'
+};
+  form: {
+  required: 'Este campo es obligatorio';
+  invalid: 'Valor inválido';
+  tooShort: 'El valor es demasiado corto (mínimo {min} caracteres)';
+  tooLong: 'El valor es demasiado largo (máximo {max} caracteres)';
+  invalidEmail: 'Dirección de correo electrónico inválida';
+  invalidUrl: 'URL inválida'
+};
+  pagination: {
+  previous: 'Anterior';
+  next: 'Siguiente';
+  page: 'Página {page}';
+  of: 'de {total}'
+}
+};
+  fr: {
+  common: {
+  loading: 'Chargement...';
+  error: 'Erreur';
+  retry: 'Réessayer';
+  cancel: 'Annuler';
+  confirm: 'Confirmer';
+  close: 'Fermer';
+  save: 'Enregistrer';
+  delete: 'Supprimer';
+  edit: 'Modifier';
+  search: 'Rechercher';
+  clear: 'Effacer';
+  submit: 'Soumettre';
+  reset: 'Réinitialiser'
+};
+  form: {
+  required: 'Ce champ est obligatoire';
+  invalid: 'Valeur invalide';
+  tooShort: 'La valeur est trop courte (minimum {min} caractères)';
+  tooLong: 'La valeur est trop longue (maximum {max} caractères)';
+  invalidEmail: 'Adresse e-mail invalide';
+  invalidUrl: 'URL invalide'
+};
+  pagination: {
+  previous: 'Précédent';
+  next: 'Suivant';
+  page: 'Page {page}';
+  of: 'sur {total}'
+}
+}
+};
 /**
  * I18n configuration
  */
@@ -234,12 +277,12 @@ export declare interface I18n {
  * Translation messages structure
  */
 export type MessageValue = string | { [key: string]: MessageValue }
-export type Messages = Record<string, MessageValue>
+export type Messages = Record<string, MessageValue>;
 /**
  * Locale messages
  */
-export type LocaleMessages = Record<string, Messages>
+export type LocaleMessages = Record<string, Messages>;
 /**
  * Pluralization rules
  */
-export type PluralRule = (count: number, locale: string) => number
+export type PluralRule = (_count: number, _locale: string) => number;

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

@@ -168,4 +168,4 @@ export declare interface KeepAlive {
   getStats: () => CacheStats
   keys: () => string[]
   size: () => number
-}
+}

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

@@ -54,7 +54,7 @@ export declare function lazyLoad<T = any>(element: Element | null, importFn: ()
  * @param options - Lazy load options
  * @returns Cleanup function
  */
-export declare function lazyLoadAll<T = any>(elements: Element[] | NodeListOf<Element>, importFn: ((element: Element) => Promise<T>) | (() => Promise<T>), options?: LazyLoadOptions): () => void;
+export declare function lazyLoadAll<T = any>(elements: Element[] | NodeListOf<Element>, importFn: ((_element: Element) => Promise<T>) | (() => Promise<T>), options?: LazyLoadOptions): () => void;
 /**
  * Preload a module without executing it
  *
@@ -171,4 +171,4 @@ export declare interface LazyComponent<T = any> {
 /**
  * Lazy load state
  */
-export type LazyLoadState = 'idle' | 'loading' | 'loaded' | 'error'
+export type LazyLoadState = 'idle' | 'loading' | 'loaded' | 'error';

package/dist/utils/prop-validation.d.ts

@@ -43,7 +43,7 @@ export declare function createPropValidator(componentName: string, schema: PropS
  * @param name - Name for error messages
  * @throws Error if validation fails
  */
-export declare function assertProp<T>(value: any, validator: Validator<T>, name?: any): asserts value is T;
+export declare function assertProp<T>(value: any, validator: Validator<T>, name?: string): asserts value is T;
 /**
  * Warn if prop doesn't match validator (non-throwing)
  *
@@ -51,7 +51,7 @@ export declare function assertProp<T>(value: any, validator: Validator<T>, name?
  * @param validator - Validator to use
  * @param name - Name for warning messages
  */
-export declare function warnProp(value: any, validator: Validator, name?: any): void;
+export declare function warnProp(value: any, validator: Validator, name?: string): void;
 /**
  * PropTypes - collection of common validators
  */
@@ -94,13 +94,14 @@ export declare interface ValidationResult {
 /**
  * Prop schema definition
  */
-export type PropSchema = Record<string, Validator>
+export type PropSchema = Record<string, Validator>;
 /**
  * Base validator class
  */
 declare class Validator<T = any> implements PropValidator<T> {
   public validate: (value: any, propName: string, componentName: string) => boolean;
   public message: (value: any, propName: string, componentName: string) => string;
-  public isRequired?: any;
-  constructor(validate: (value: any, propName: string, componentName: string) => boolean, message: (value: any, propName: string, componentName: string) => string, isRequired?: any);
-}
+  public isRequired?: boolean;
+  constructor(validate: (value: any, propName: string, componentName: string) => boolean, message: (value: any, propName: string, componentName: string) => string, isRequired?: boolean);
+  get required(): Validator<T>;
+}

package/dist/utils/theme.d.ts

@@ -231,4 +231,4 @@ export declare interface Theme {
   borderRadius: BorderRadius
   shadows: Shadows
   components?: ComponentOverrides
-}
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/components",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.2.8",
   "description": "A modern component library built with STX, featuring headwind utility classes and TypeScript syntax highlighting.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -55,15 +55,15 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@stacksjs/headwind": "^0.1.3",
-    "@stacksjs/stx": "0.2.5",
-    "bun-plugin-stx": "0.2.5",
+    "@cwcss/crosswind": "^0.1.3",
+    "@stacksjs/stx": "0.2.8",
+    "bun-plugin-stx": "0.2.8",
     "ts-syntax-highlighter": "^0.2.1"
   },
   "devDependencies": {
-    "@types/bun": "^1.3.4",
+    "@types/bun": "^1.3.9",
     "bun-plugin-dtsx": "^0.9.9",
-    "pickier": "^0.1.10",
+    "pickier": "^0.1.20",
     "typescript": "^5.9.3"
   }
 }

package/src/composables/utilities/useLocalStorage.ts

@@ -15,9 +15,9 @@
  * Options for useLocalStorage hook
  */
 export interface UseLocalStorageOptions<T> {
-  /** Custom serializer function (defaults to JSON.stringify) */
+  /** Custom serializer function - defaults to JSON.stringify */
   serializer?: (value: T) => string
-  /** Custom deserializer function (defaults to JSON.parse) */
+  /** Custom deserializer function - defaults to JSON.parse */
   deserializer?: (value: string) => T
   /** Error handler function */
   onError?: (error: Error) => void
@@ -37,7 +37,7 @@ export function useLocalStorage<T>(
   options: UseLocalStorageOptions<T> = {},
 ): {
     value: T
-    setValue: (newValue: T | ((prev: T) => T)) => void
+    setValue: (newValue: T | ((_prev: T) => T)) => void
     removeValue: () => void
   } {
   const {
@@ -68,7 +68,7 @@ export function useLocalStorage<T>(
   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
+      const valueToStore = typeof newValue === 'function' ? (newValue as (_prev: T) => T)(value) : newValue
 
       value = valueToStore
 

package/src/ui/storage/index.ts

@@ -7,7 +7,7 @@ export interface StorageOptions {
   compress?: boolean // Compress large objects
 }
 
-type StorageWatchCallback = (newValue: any, oldValue: any, key: string) => void
+type StorageWatchCallback = (_newValue: any, _oldValue: any, _key: string) => void
 
 export class StorageManager {
   private storage: globalThis.Storage

package/src/utils/accessibility.ts

@@ -112,7 +112,7 @@ export interface FocusTrapOptions {
   /** Click outside deactivates trap */
   clickOutsideDeactivates?: boolean
   /** Allow outside click without deactivating */
-  allowOutsideClick?: boolean | ((event: MouseEvent) => boolean)
+  allowOutsideClick?: boolean | ((_event: MouseEvent) => boolean)
   /** Callback when activated */
   onActivate?: () => void
   /** Callback when deactivated */

package/src/utils/animation/easing.ts

@@ -19,7 +19,7 @@
 /**
  * Easing function type signature
  */
-export type EasingFunction = (t: number, b: number, c: number, d: number) => number
+export type EasingFunction = (_t: number, _b: number, _c: number, _d: number) => number
 
 /**
  * Linear easing - no acceleration

package/src/utils/animation/helpers.ts

@@ -19,7 +19,7 @@
 export interface CSSAnimationOptions {
   /** Animation duration (e.g., '300ms', '1s') */
   duration?: string
-  /** Timing function (e.g., 'ease', 'linear', 'cubic-bezier(...)') */
+  /** Timing function, e.g. 'ease', 'linear', 'cubic-bezier(...)' */
   timing?: string
   /** Delay before animation (e.g., '100ms') */
   delay?: string

package/src/utils/animation/keyframes.ts

@@ -32,7 +32,7 @@ export interface Keyframe {
 export interface AnimationOptions {
   /** Animation duration in milliseconds */
   duration?: number
-  /** Easing function (CSS easing string) */
+  /** Easing function, CSS easing string */
   easing?: string
   /** Delay before animation starts in milliseconds */
   delay?: number

package/src/utils/error-handling.ts

@@ -233,7 +233,7 @@ export const ErrorTypes = {
 /**
  * Global error handler
  */
-let errorHandler: ((error: Error) => void) | null = null
+let errorHandler: ((_error: Error) => void) | null = null
 
 /**
  * Set global error handler

package/src/utils/i18n.ts

@@ -36,7 +36,7 @@ export type LocaleMessages = Record<string, Messages>
 /**
  * Pluralization rules
  */
-export type PluralRule = (count: number, locale: string) => number
+export type PluralRule = (_count: number, _locale: string) => number
 
 /**
  * I18n configuration

package/src/utils/lazy-loading.ts

@@ -311,7 +311,7 @@ export function lazyLoad<T = any>(
  */
 export function lazyLoadAll<T = any>(
   elements: Element[] | NodeListOf<Element>,
-  importFn: ((element: Element) => Promise<T>) | (() => Promise<T>),
+  importFn: ((_element: Element) => Promise<T>) | (() => Promise<T>),
   options: LazyLoadOptions = {},
 ): () => void {
   const cleanupFunctions: Array<() => void> = []

package/src/utils/prop-validation.ts

@@ -169,7 +169,7 @@ export const PropTypes: {
     return new Validator(
       (value, propName, componentName) =>
         validators.some(v => v.validate(value, propName, componentName)),
-      (value, propName, componentName) =>
+      (_value, propName, componentName) =>
         `Invalid prop \`${propName}\` supplied to \`${componentName}\`, expected one of the specified types.`,
     )
   },
@@ -186,7 +186,7 @@ export const PropTypes: {
           return false
         return value.every((item, index) => validator.validate(item, `${propName}[${index}]`, componentName))
       },
-      (value, propName, componentName) =>
+      (_value, propName, componentName) =>
         `Invalid prop \`${propName}\` supplied to \`${componentName}\`, expected array of specified type.`,
     )
   },
@@ -213,7 +213,7 @@ export const PropTypes: {
 
         return true
       },
-      (value, propName, componentName) =>
+      (_value, propName, componentName) =>
         `Invalid prop \`${propName}\` supplied to \`${componentName}\`, expected object matching specified shape.`,
     )
   },
@@ -226,7 +226,7 @@ export const PropTypes: {
   instanceOf<T>(expectedClass: new (...args: any[]) => T): Validator<T> {
     return new Validator(
       value => value instanceof expectedClass,
-      (value, propName, componentName) =>
+      (_value, propName, componentName) =>
         `Invalid prop \`${propName}\` supplied to \`${componentName}\`, expected instance of \`${expectedClass.name}\`.`,
     )
   },
@@ -239,7 +239,7 @@ export const PropTypes: {
    */
   custom(
     validatorFn: (value: any, propName: string, componentName: string) => boolean,
-    errorMessage: string | ((value: any, propName: string, componentName: string) => string),
+    errorMessage: string | ((_value: any, _propName: string, _componentName: string) => string),
   ): Validator {
     const messageGenerator = typeof errorMessage === 'string'
       ? () => errorMessage

package/dist/CodeBlock-mwex82cm.stx

@@ -1,57 +0,0 @@
-<script>
-import { highlight, applyHeadwindClasses } from '../utils/highlighter'
-
-export const code = $props.code || ''
-export const language = $props.language || 'typescript'
-export const theme = $props.theme || 'auto'
-export const lineNumbers = $props.lineNumbers !== false
-export const copyable = $props.copyable !== false
-export const className = $props.className || ''
-
-export let highlightedCode = ''
-export let copied = false
-
-// Highlight the code
-const result = await highlight(code, { language, theme, lineNumbers })
-highlightedCode = applyHeadwindClasses(result.html, className)
-
-export async function copyToClipboard() {
-  try {
-    await navigator.clipboard.writeText(code)
-    copied = true
-    setTimeout(() => {
-      copied = false
-    }, 2000)
-  } catch (err) {
-    console.error('Failed to copy code:', err)
-  }
-}
-</script>
-
-<div class="relative group">
-  {!! highlightedCode !!}
-
-  @if(copyable)
-    <button
-      @click="copyToClipboard"
-      class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 px-3 py-1.5 bg-neutral-800 hover:bg-neutral-700 text-white text-xs rounded-md font-medium"
-      aria-label="Copy code"
-    >
-      @if(copied)
-        <span class="flex items-center gap-1.5">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg>
-          Copied!
-        </span>
-      @else
-        <span class="flex items-center gap-1.5">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-          </svg>
-          Copy
-        </span>
-      @endif
-    </button>
-  @endif
-</div>