@tempots/beatui 0.2.0 → 0.4.0

package/dist/types/i18n/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @fileoverview BeatUI Internationalization (i18n) Module
+ *
+ * Provides reactive internationalization support with:
+ * - Locale management with persistent storage
+ * - Dynamic translation loading with type safety
+ * - Reactive updates throughout the application
+ *
+ * @example
+ * ```typescript
+ * import { html, prop, Provide, Use } from '@tempots/dom'
+ * import { Locale, makeMessages } from '@tempots/beatui'
+ *
+ * // Set up locale provider
+ * const app = Provide(Locale, {}, () => Use(Locale, ({ locale, setLocale }) => {
+ *   // Create translation system
+ *   const { t } = makeMessages({
+ *     locale,
+ *     defaultMessages: {
+ *       welcome: () => 'Welcome!',
+ *       greeting: (name: string) => `Hello, ${name}!`
+ *     },
+ *     localeLoader: locale => import(`./locales/${locale}.js`)
+ *   })
+ *   return html.div(
+ *     html.h1(t.welcome()),
+ *     html.p(t.userGreeting(prop('User')))
+ *   )
+ * })
+ * ```
+ */
+export * from './translate';
+export * from './locale';

package/dist/types/i18n/locale.d.ts

@@ -0,0 +1,29 @@
+import { Signal, Provider } from '@tempots/dom';
+/**
+ * Value provided by the Locale provider containing locale state and setter.
+ */
+export type LocaleValue = {
+    /** Reactive signal containing the current locale string (e.g., 'en-US', 'es-ES') */
+    locale: Signal<string>;
+    /** Function to update the current locale */
+    setLocale: (locale: string) => void;
+};
+/**
+ * Locale provider that manages the current application locale with persistent storage.
+ *
+ * Features:
+ * - Automatically detects browser language as default
+ * - Persists locale selection to localStorage with key 'beatui-locale'
+ * - Provides reactive updates when locale changes
+ * - Includes proper cleanup for memory management
+ *
+ * @example
+ * ```typescript
+ * import { Use } from '@tempots/dom'
+ * import { Locale } from '@tempots/beatui'
+ *
+ * // Use in component
+ * Use(Locale, ({ locale, setLocale }) => html.div(locale))
+ * ```
+ */
+export declare const Locale: Provider<LocaleValue, object>;

package/dist/types/i18n/translate.d.ts

@@ -0,0 +1,82 @@
+import { Signal, Value } from '@tempots/dom';
+/**
+ * Utility type that wraps each element of a tuple in a Value<T>.
+ * Used to convert function parameters to reactive values.
+ */
+type WrapInValue<T extends unknown[]> = {
+    [K in keyof T]: Value<T[K]>;
+};
+/**
+ * Transforms a messages object into a computed version where each message function
+ * returns a reactive Signal instead of a direct value.
+ */
+type MessagesToComputed<M extends object> = {
+    [K in keyof M]: M[K] extends (...args: infer Args) => infer R ? (...args: WrapInValue<Args>) => Signal<R> : never;
+};
+/**
+ * Creates a reactive translation system that dynamically loads locale-specific messages.
+ *
+ * Features:
+ * - Type-safe translation functions with parameter validation
+ * - Dynamic loading of locale-specific message bundles
+ * - Reactive translations that update when locale changes
+ * - Automatic fallback to default locale on loading errors
+ * - Proper cleanup and memory management
+ *
+ * @param config Configuration object for the translation system
+ * @param config.locale Reactive signal containing the current locale
+ * @param config.defaultLocale Default locale to fall back to (default: 'en-US')
+ * @param config.defaultMessages Default message functions used as fallback
+ * @param config.localeLoader Async function to load locale-specific messages
+ *
+ * @returns Object containing translation functions (`t`) and cleanup (`dispose`)
+ *
+ * @example
+ * ```typescript
+ * import { prop, Use } from '@tempots/dom'
+ * import { Locale, makeMessages } from '@tempots/beatui'
+ *
+ * const defaultMessages = {
+ *   welcome: () => 'Welcome!',
+ *   userGreeting: (name: string) => `Hello, ${name}!`,
+ *   itemCount: (count: number) => `${count} item${count !== 1 ? 's' : ''}`
+ * }
+ *
+ * const { locale } = Use(Locale, ({ locale }) => {
+ *   // Create translation system
+ *   const { t, dispose } = makeMessages({
+ *     locale,
+ *     defaultMessages,
+ *     localeLoader: locale => import(`./locales/${locale}.js`)
+ *   })
+ *
+ *   return html.div(
+ *     html.h1(t.welcome()),
+ *     html.p(t.userGreeting(prop('User')))
+ *   )
+ * })
+ *
+ * // Use reactive translations
+ * const greeting = t.greeting(prop('John')) // Signal<string>
+ * const count = t.itemCount(prop(5)) // Signal<string>
+ *
+ * // Clean up when done
+ * dispose()
+ * ```
+ */
+export declare function makeMessages<M extends object>({ locale, defaultLocale, defaultMessages, localeLoader, }: {
+    /** Reactive signal containing the current locale string */
+    locale: Signal<string>;
+    /** Default locale to use as fallback (default: 'en-US') */
+    defaultLocale: string;
+    /** Default message functions used as fallback and type reference */
+    defaultMessages: M;
+    /** Async function that loads locale-specific message bundles */
+    localeLoader: (locale: string) => Promise<M>;
+}): {
+    /** Clean up all resources and event listeners */
+    dispose: () => void;
+    /** Translation functions that return reactive signals */
+    t: MessagesToComputed<M>;
+};
+export {};

package/dist/types/index.d.ts

@@ -8,5 +8,6 @@ export * from './components/navigation';
 export * from './components/overlay';
 export * from './components/theme';
 export * from './components/typography';
+export * from './i18n';
 export * from './tokens';
 export * from './utils';

package/dist/types/utils/focus-trap.d.ts

@@ -0,0 +1,32 @@
+import { TNode } from '@tempots/dom';
+/**
+ * Focus trap options
+ */
+export interface FocusTrapOptions {
+    /** Whether the focus trap is active */
+    active?: boolean;
+    /** Whether to handle escape key */
+    escapeDeactivates?: boolean;
+    /** Callback when escape key is pressed */
+    onEscape?: () => void;
+    /** Element to focus initially (if not provided, focuses first focusable element) */
+    initialFocus?: HTMLElement | (() => HTMLElement | null);
+    /** Element to return focus to when trap is deactivated */
+    returnFocus?: HTMLElement | (() => HTMLElement | null);
+    /** Whether to prevent outside clicks */
+    clickOutsideDeactivates?: boolean;
+    /** Callback when clicking outside */
+    onClickOutside?: () => void;
+}
+/**
+ * Creates a focus trap within an element
+ * Returns a TNode that should be added to the container element
+ */
+export declare function FocusTrap(options?: FocusTrapOptions): TNode;
+/**
+ * Hook for managing focus trap state
+ */
+export declare function useFocusTrap(options?: FocusTrapOptions): {
+    activate: () => TNode;
+    deactivate: () => TNode;
+};

package/dist/types/utils/index.d.ts

@@ -1,2 +1,4 @@
 export * from './delay-signal';
+export * from './focus-trap';
+export * from './session-id';
 export * from './use-animated-toggle';

package/dist/types/utils/session-id.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Generates a unique session ID for the given prefix
+ * @param prefix The prefix to use for the session ID
+ * @returns The generated session ID
+ */
+export declare function sessionId(prefix: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/beatui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -54,9 +54,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
-    "@tempots/dom": "28.2.0",
-    "@tempots/std": "0.22.0",
-    "@tempots/ui": "5.2.0"
+    "@tempots/dom": "28.2.2",
+    "@tempots/std": "0.22.1",
+    "@tempots/ui": "6.0.0"
   },
   "peerDependenciesMeta": {
     "@tempots/dom": {