@stacksjs/components 0.2.21 → 0.2.24

package/dist/utils/i18n.d.ts

@@ -69,6 +69,29 @@ 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
  */
@@ -83,17 +106,16 @@ export declare const pluralRules: {
   pl: (count) => unknown;
   cs: (count) => unknown;
   ar: (count) => unknown;
-  ja: () => unknown;
-  ko: () => unknown;
-  zh: () => unknown;
-  th: () => unknown;
-  vi: () => unknown;
-  }
-
+  ja: () => 0;
+  ko: () => 0;
+  zh: () => 0;
+  th: () => 0;
+  vi: () => 0
+};
 /**
  * Common date/time format presets
  */
-export const dateTimeFormats: Record<string, Intl.DateTimeFormatOptions> = {
+export declare const dateTimeFormats: {
   short: {
   year: 'numeric';
   month: 'numeric';
@@ -120,13 +142,12 @@ export const dateTimeFormats: Record<string, Intl.DateTimeFormatOptions> = {
   day: 'numeric';
   hour: 'numeric';
   minute: 'numeric'
+}
 };
-  }
-
 /**
  * Common number format presets
  */
-export const numberFormats: Record<string, Intl.NumberFormatOptions> = {
+export declare const numberFormats: {
   decimal: {
   style: 'decimal';
   minimumFractionDigits: 2;
@@ -143,85 +164,14 @@ export const numberFormats: Record<string, Intl.NumberFormatOptions> = {
 };
   compact: {
   notation: 'compact'
+}
 };
-  }
-
 /**
- * RTL (Right-to-Left) language detection
+ * Component-specific i18n messages
  *
- * @param locale - Locale code
- * @returns Whether locale is RTL
+ * Provides default translations for component library
  */
-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}'
-}
-}
-};
+export declare const componentMessages: LocaleMessages;
 /**
  * I18n configuration
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/components",
   "type": "module",
-  "version": "0.2.21",
+  "version": "0.2.24",
   "description": "A modern component library built with STX, featuring headwind utility classes and TypeScript syntax highlighting.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -28,10 +28,12 @@
   ],
   "exports": {
     ".": {
+      "bun": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
     "./*": {
+      "bun": "./src/*/index.ts",
       "types": "./dist/*/index.d.ts",
       "import": "./dist/*/index.js"
     }
@@ -56,8 +58,8 @@
   },
   "dependencies": {
     "@cwcss/crosswind": "^0.2.0",
-    "@stacksjs/stx": "0.2.21",
-    "bun-plugin-stx": "0.2.21",
+    "@stacksjs/stx": "0.2.24",
+    "bun-plugin-stx": "0.2.24",
     "ts-syntax-highlighter": "^0.2.1"
   },
   "devDependencies": {

package/src/ui/accordion/Accordion.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const items = $props.items || []
 export const allowMultiple = $props.allowMultiple || false
 export const defaultOpen = $props.defaultOpen || []
@@ -49,7 +49,7 @@ export const contentClasses = `px-4 py-3 text-gray-700 dark:text-gray-300`.trim(
       <button
         type="button"
         class="{{ headerClasses }}"
-        onclick="toggleItem({{ $loop.index }})"
+        @click="toggleItem({{ $loop.index }})"
         aria-expanded="{{ isOpen($loop.index) ? 'true' : 'false' }}"
         aria-controls="accordion-content-{{ $loop.index }}"
       >

package/src/ui/audio/Audio.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const src = $props.src || ''
 export const autoplay = $props.autoplay || false
 export const loop = $props.loop || false

package/src/ui/audio/README.md

@@ -11,12 +11,11 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-@component('Audio', {
-  src: '/audio/podcast.mp3',
-  title: 'Episode 42: Building with STX',
-  controls: true
-})
-@endcomponent
+<Audio
+  src="/audio/podcast.mp3"
+  title="Episode 42: Building with STX"
+  controls
+/>
 ```
 
 ## Props

package/src/ui/auth/Login.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const showLogo = $props.showLogo ?? true
 export const headingText = $props.headingText || 'Sign in to your account'
 export const showSocialLogin = $props.showSocialLogin ?? true

package/src/ui/auth/README.md

@@ -24,64 +24,61 @@ bun add @stacksjs/components
 ### Login Component
 
 ```stx
-<script>
-export const handleLogin = (data) => {
+<script server>
+const handleLogin = (data) => {
   console.log('Login:', data.email, data.password)
 }
 </script>
 
-@component('Login', {
-  showLogo: true,
-  headingText: 'Sign in to your account',
-  showSocialLogin: true,
-  showRememberMe: true,
-  showForgotPassword: true,
-  showSignup: true,
-  signupText: 'Start a 14 day free trial',
-  onSubmit: handleLogin
-})
-@endcomponent
+<Login
+  showLogo
+  headingText="Sign in to your account"
+  showSocialLogin
+  showRememberMe
+  showForgotPassword
+  showSignup
+  signupText="Start a 14 day free trial"
+  :onSubmit="handleLogin"
+/>
 ```
 
 ### Signup Component
 
 ```stx
-<script>
-export const handleSignup = (data) => {
+<script server>
+const handleSignup = (data) => {
   console.log('Signup:', data.name, data.email, data.password)
 }
 </script>
 
-@component('Signup', {
-  headingText: 'Sign up for Stacks',
-  showSocialSignup: true,
-  onSubmit: handleSignup
-})
-@endcomponent
+<Signup
+  headingText="Sign up for Stacks"
+  showSocialSignup
+  :onSubmit="handleSignup"
+/>
 ```
 
 ### TwoFactorChallenge Component
 
 ```stx
-<script>
-export const handleVerify = (code) => {
+<script server>
+const handleVerify = (code) => {
   console.log('2FA Code:', code)
 }
 
-export const handleRecoveryCode = () => {
+const handleRecoveryCode = () => {
   console.log('Using recovery code')
 }
 </script>
 
-@component('TwoFactorChallenge', {
-  headingText: 'Two Factor Authentication',
-  labelText: 'Authentication code',
-  instructionText: 'Open your 2FA app to view your authentication code.',
-  codeLength: 6,
-  onSubmit: handleVerify,
-  onUseRecoveryCode: handleRecoveryCode
-})
-@endcomponent
+<TwoFactorChallenge
+  headingText="Two Factor Authentication"
+  labelText="Authentication code"
+  instructionText="Open your 2FA app to view your authentication code."
+  :codeLength="6"
+  :onSubmit="handleVerify"
+  :onUseRecoveryCode="handleRecoveryCode"
+/>
 ```
 
 ## Props

package/src/ui/auth/Signup.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const headingText = $props.headingText || 'Sign up for Stacks'
 export const showSocialSignup = $props.showSocialSignup ?? true
 export const onSubmit = $props.onSubmit || (() => {})

package/src/ui/auth/TwoFactorChallenge.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 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.'
@@ -57,7 +57,7 @@ export const codes = Array(codeLength).fill('')
             </p>
             <a
               href="#"
-              onclick="event.preventDefault(); handleRecoveryCode()"
+              @click="event.preventDefault(); handleRecoveryCode()"
               class="text-xs text-blue-500 hover:underline"
             >
               Use recovery code instead

package/src/ui/avatar/Avatar.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const src = $props.src || ''
 export const alt = $props.alt || ''
 export const initials = $props.initials || ''

package/src/ui/badge/Badge.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const variant = $props.variant || 'default'
 export const size = $props.size || 'md'
 export const dot = $props.dot || false
@@ -50,7 +50,7 @@ export const removeButtonClasses = `ml-0.5 -mr-1 text-current hover:bg-black hov
   @if(removable && onRemove)
     <button
       type="button"
-      onclick="handleRemove()"
+      @click="handleRemove()"
       class="{{ removeButtonClasses }}"
       aria-label="Remove"
     >

package/src/ui/breadcrumb/Breadcrumb.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const items = $props.items || []
 export const separator = $props.separator || '/'
 export const maxItems = $props.maxItems || 0

package/src/ui/button/Button.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const variant = $props.variant || 'primary'
 export const size = $props.size || 'md'
 export const disabled = $props.disabled || false
@@ -56,7 +56,7 @@ export const spinnerClasses = `animate-spin ${iconClasses}`.trim()
   type="{{ type }}"
   class="{{ buttonClasses }}"
   @if(isDisabled)disabled@endif
-  @if(onClick)onclick="handleClick(event)"@endif
+  @if(onClick)@click="handleClick(event)"@endif
   aria-busy="{{ loading ? 'true' : 'false' }}"
 >
   @if(loading)

package/src/ui/button/README.md

@@ -11,9 +11,7 @@ bun add @stacksjs/components
 ## Usage
 
 ```stx
-@component('Button', { variant: 'primary', size: 'md' })
-  Click me
-@endcomponent
+<Button variant="primary" size="md">Click me</Button>
 ```
 
 ## Props
@@ -32,60 +30,42 @@ bun add @stacksjs/components
 ### Variants
 
 ```stx
-@component('Button', { variant: 'primary' })
-  Primary Button
-@endcomponent
+<Button variant="primary">Primary Button</Button>
 
-@component('Button', { variant: 'secondary' })
-  Secondary Button
-@endcomponent
+<Button variant="secondary">Secondary Button</Button>
 
-@component('Button', { variant: 'outline' })
-  Outline Button
-@endcomponent
+<Button variant="outline">Outline Button</Button>
 
-@component('Button', { variant: 'ghost' })
-  Ghost Button
-@endcomponent
+<Button variant="ghost">Ghost Button</Button>
 
-@component('Button', { variant: 'danger' })
-  Danger Button
-@endcomponent
+<Button variant="danger">Danger Button</Button>
 ```
 
 ### Sizes
 
 ```stx
-@component('Button', { size: 'sm' })
-  Small Button
-@endcomponent
+<Button size="sm">Small Button</Button>
 
-@component('Button', { size: 'md' })
-  Medium Button
-@endcomponent
+<Button size="md">Medium Button</Button>
 
-@component('Button', { size: 'lg' })
-  Large Button
-@endcomponent
+<Button size="lg">Large Button</Button>
 ```
 
 ### Disabled State
 
 ```stx
-@component('Button', { disabled: true })
-  Disabled Button
-@endcomponent
+<Button disabled>Disabled Button</Button>
 ```
 
 ### With Icon
 
 ```stx
-@component('Button', { variant: 'primary' })
+<Button variant="primary">
   <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
   </svg>
   Add Item
-@endcomponent
+</Button>
 ```
 
 ## Features

package/src/ui/calendar/Calendar.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 // Calendar Component Props
 export const value = $props.value || new Date()
 export const onChange = $props.onChange
@@ -170,7 +170,7 @@ const calendarDays = getCalendarDays()
     <button
       type="button"
       class="{{ buttonClasses }}"
-      onclick="previousMonth()"
+      @click="previousMonth()"
       aria-label="Previous month"
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -185,7 +185,7 @@ const calendarDays = getCalendarDays()
     <button
       type="button"
       class="{{ buttonClasses }}"
-      onclick="nextMonth()"
+      @click="nextMonth()"
       aria-label="Next month"
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -207,7 +207,7 @@ const calendarDays = getCalendarDays()
       <button
         type="button"
         class="{{ getDayClasses(day) }}"
-        onclick="selectDate(day.date)"
+        @click="selectDate(day.date)"
         aria-label="{{ day.date.toLocaleDateString(locale) }}"
         @if(isDisabled(day.date))
           disabled
@@ -223,7 +223,7 @@ const calendarDays = getCalendarDays()
       <button
         type="button"
         class="px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-gray-700 rounded-md transition-colors"
-        onclick="goToToday()"
+        @click="goToToday()"
       >
         Today
       </button>

package/src/ui/card/Card.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const variant = $props.variant || 'default'
 export const padding = $props.padding || 'default'
 export const hover = $props.hover || false
@@ -37,7 +37,7 @@ export const contentClasses = `${image ? paddingClasses[padding] : ''}`.trim()
 </script>
 
 @if(onClick)
-  <div class="{{ cardClasses }}" onclick="handleClick(event)" role="button" tabindex="0" onkeydown="handleKeyDown(event)">
+  <div class="{{ cardClasses }}" @click="handleClick(event)" role="button" tabindex="0" onkeydown="handleKeyDown(event)">
     @if(image)
       <img src="{{ image }}" alt="{{ imageAlt }}" class="{{ imageClasses }}" />
     @endif

package/src/ui/checkbox/Checkbox.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const checked = $props.checked || false
 export const onChange = $props.onChange || (() => {})
 export const disabled = $props.disabled || false

package/src/ui/combobox/Combobox.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const value = $props.value
 export const onChange = $props.onChange
 export const className = $props.className || ''

package/src/ui/combobox/ComboboxButton.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const className = $props.className || ''
 export const as = $props.as || 'button'
 

package/src/ui/combobox/ComboboxInput.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const displayValue = $props.displayValue
 export const onChange = $props.onChange
 export const className = $props.className || ''

package/src/ui/combobox/ComboboxOption.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const value = $props.value
 export const disabled = $props.disabled || false
 export const className = $props.className || ''

package/src/ui/combobox/ComboboxOptions.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const className = $props.className || ''
 export const as = $props.as || 'ul'
 export const static_ = $props.static || false