@tempots/beatui 0.7.0 → 0.9.0

package/dist/types/components/navigation/sidebar/index.d.ts

@@ -1,3 +1,4 @@
+export * from './sidebar';
 export * from './collapsible-sidebar-group';
 export * from './sidebar-link';
 export * from './sidebar-group';

package/dist/types/components/navigation/sidebar/sidebar.d.ts

@@ -0,0 +1,10 @@
+import { Provider, TNode, Value } from '@tempots/dom';
+export type SidebarBackgroundMode = 'light' | 'dark';
+export type SidebarOptions = {
+    backgroundMode?: Value<SidebarBackgroundMode>;
+};
+export type SidebarContextValue = {
+    backgroundMode: SidebarBackgroundMode;
+};
+export declare const SidebarContext: Provider<SidebarContextValue, object>;
+export declare function Sidebar({ backgroundMode }: SidebarOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/overlay/drawer.d.ts

@@ -4,7 +4,7 @@ export interface DrawerOptions {
     /** Size of the drawer */
     size?: Value<'sm' | 'md' | 'lg' | 'xl'>;
     /** Side of the viewport/element to anchor the drawer to */
-    side?: Value<'top' | 'right' | 'bottom' | 'left'>;
+    side?: Value<'top' | 'right' | 'bottom' | 'left' | 'inline-start' | 'inline-end'>;
     /** Whether the drawer can be closed by clicking outside or pressing escape */
     dismissable?: Value<boolean>;
     /** Whether to show the close button in header (only applies if header is provided) */

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

@@ -0,0 +1,117 @@
+/**
+ * @fileoverview Direction utilities for RTL/LTR support
+ *
+ * Provides utilities for detecting and managing text directionality
+ * based on locale and user preferences.
+ */
+/**
+ * Text direction values
+ */
+export type DirectionValue = 'ltr' | 'rtl';
+/**
+ * Direction preference options
+ * - 'auto': Automatically detect from locale
+ * - 'ltr': Force left-to-right
+ * - 'rtl': Force right-to-left
+ */
+export type DirectionPreference = 'auto' | 'ltr' | 'rtl';
+/**
+ * Detects text direction from a locale string
+ *
+ * @param locale - Locale string (e.g., 'en-US', 'ar-SA', 'he-IL')
+ * @returns Direction value ('ltr' or 'rtl')
+ *
+ * @example
+ * ```typescript
+ * getDirectionFromLocale('en-US') // 'ltr'
+ * getDirectionFromLocale('ar-SA') // 'rtl'
+ * getDirectionFromLocale('he') // 'rtl'
+ * ```
+ */
+export declare function getDirectionFromLocale(locale: string): DirectionValue;
+/**
+ * Resolves the final direction based on preference and locale
+ *
+ * @param preference - User's direction preference
+ * @param locale - Current locale string
+ * @returns Final direction value
+ *
+ * @example
+ * ```typescript
+ * resolveDirection('auto', 'ar-SA') // 'rtl'
+ * resolveDirection('ltr', 'ar-SA') // 'ltr' (forced)
+ * resolveDirection('rtl', 'en-US') // 'rtl' (forced)
+ * ```
+ */
+export declare function resolveDirection(preference: DirectionPreference, locale: string): DirectionValue;
+/**
+ * Generates CSS class name for direction
+ *
+ * @param direction - Direction value
+ * @returns CSS class name
+ *
+ * @example
+ * ```typescript
+ * getDirectionClassName('ltr') // 'b-ltr'
+ * getDirectionClassName('rtl') // 'b-rtl'
+ * ```
+ */
+export declare function getDirectionClassName(direction: DirectionValue): string;
+/**
+ * Checks if a locale is RTL
+ *
+ * @param locale - Locale string to check
+ * @returns True if the locale is RTL
+ *
+ * @example
+ * ```typescript
+ * isRTLLocale('ar-SA') // true
+ * isRTLLocale('en-US') // false
+ * ```
+ */
+export declare function isRTLLocale(locale: string): boolean;
+/**
+ * Gets the opposite direction
+ *
+ * @param direction - Current direction
+ * @returns Opposite direction
+ *
+ * @example
+ * ```typescript
+ * getOppositeDirection('ltr') // 'rtl'
+ * getOppositeDirection('rtl') // 'ltr'
+ * ```
+ */
+export declare function getOppositeDirection(direction: DirectionValue): DirectionValue;
+/**
+ * Direction-aware logical property mappings
+ * Maps logical properties to physical properties based on direction
+ */
+export declare const LOGICAL_PROPERTY_MAP: {
+    readonly ltr: {
+        readonly 'inline-start': "left";
+        readonly 'inline-end': "right";
+        readonly 'block-start': "top";
+        readonly 'block-end': "bottom";
+    };
+    readonly rtl: {
+        readonly 'inline-start': "right";
+        readonly 'inline-end': "left";
+        readonly 'block-start': "top";
+        readonly 'block-end': "bottom";
+    };
+};
+/**
+ * Gets physical property name from logical property based on direction
+ *
+ * @param logicalProperty - Logical property name
+ * @param direction - Text direction
+ * @returns Physical property name
+ *
+ * @example
+ * ```typescript
+ * getPhysicalProperty('inline-start', 'ltr') // 'left'
+ * getPhysicalProperty('inline-start', 'rtl') // 'right'
+ * ```
+ */
+export declare function getPhysicalProperty(logicalProperty: keyof typeof LOGICAL_PROPERTY_MAP.ltr, direction: DirectionValue): string;

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

@@ -3,6 +3,7 @@
  *
  * Provides reactive internationalization support with:
  * - Locale management with persistent storage
+ * - Text direction (RTL/LTR) support with automatic detection
  * - Dynamic translation loading with type safety
  * - Reactive updates throughout the application
  *
@@ -11,8 +12,10 @@
  * 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 }) => {
+ * // Set up locale provider with direction support
+ * const app = Provide(Locale, {}, () => Use(Locale, ({
+ *   locale, setLocale, direction, setDirectionPreference
+ * }) => {
  *   // Create translation system
  *   const { t } = makeMessages({
  *     locale,
@@ -30,4 +33,4 @@
  * ```
  */
 export * from './translate';
-export * from './locale';
+export * from './direction';

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

@@ -10,7 +10,7 @@ type WrapInValue<T extends unknown[]> = {
  * 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> = {
+export type ReactiveMessages<M extends object> = {
     [K in keyof M]: M[K] extends (...args: infer Args) => infer R ? (...args: WrapInValue<Args>) => Signal<R> : never;
 };
 /**
@@ -77,6 +77,6 @@ export declare function makeMessages<M extends object>({ locale, defaultLocale,
     /** Clean up all resources and event listeners */
     dispose: () => void;
     /** Translation functions that return reactive signals */
-    t: MessagesToComputed<M>;
+    t: ReactiveMessages<M>;
 };
 export {};

package/dist/types/index.d.ts

@@ -1,8 +1,11 @@
 export { Use } from '@tempots/dom';
+export * from './beatui-i18n';
 export * from './components/beatui';
 export * from './components/button';
+export * from './components/content';
 export * from './components/data';
 export * from './components/form';
+export * from './components/i18n';
 export * from './components/layout';
 export * from './components/misc';
 export * from './components/navigation';

package/dist/types/tokens/colors.d.ts

@@ -5,7 +5,7 @@ export declare const colorShades: ColorShade[];
 export type SemanticColorName = 'primary' | 'secondary' | 'base' | 'success' | 'warning' | 'error' | 'info';
 export type ThemeColorName = ColorName | SemanticColorName;
 export declare const semanticColorNames: readonly ["primary", "secondary", "base", "success", "warning", "error", "info"];
-export declare const themeColorNames: ("primary" | "secondary" | "base" | "success" | "warning" | "error" | "info" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "slate" | "gray" | "zinc" | "neutral" | "stone")[];
+export declare const themeColorNames: ("error" | "base" | "success" | "primary" | "secondary" | "warning" | "info" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "slate" | "gray" | "zinc" | "neutral" | "stone")[];
 export declare const semanticColors: Record<SemanticColorName, ColorName>;
 export type BackgroundColorName = 'background' | 'surface' | 'subtle' | 'elevated' | 'raised' | 'overlay';
 export declare const bgColors: {

package/dist/ur-B7AcyGH1.js

@@ -0,0 +1,44 @@
+const e = {
+  loadingExtended: () => "لوڈ ہو رہا ہے، براہ کرم انتظار کریں",
+  loadingShort: () => "لوڈ ہو رہا ہے...",
+  locale: () => "زبان",
+  iconDescription: () => "آئیکن",
+  loadingIcon: () => "لوڈنگ آئیکن",
+  failedToLoadIcon: () => "آئیکن لوڈ کرنے میں ناکام",
+  editLabel: () => "ترمیم",
+  selectOne: () => "ایک منتخب کریں",
+  passwordPlaceholderText: () => "خفیہ پاس ورڈ",
+  togglePasswordVisibility: () => "پاس ورڈ کی مرئیت تبدیل کریں",
+  toggleMenu: () => "مینو ٹوگل کریں",
+  toggleAside: () => "سائیڈ پینل ٹوگل کریں",
+  mainNavigation: () => "بنیادی نیویگیشن",
+  sidebar: () => "سائیڈ بار",
+  closeDrawer: () => "دراز بند کریں",
+  closeModal: () => "ماڈل بند کریں",
+  confirm: () => "تصدیق",
+  cancel: () => "منسوخ",
+  // languages
+  currentLocale: () => "اردو",
+  ar: () => "عربی",
+  de: () => "جرمن",
+  en: () => "انگریزی",
+  es: () => "ہسپانوی",
+  fr: () => "فرانسیسی",
+  he: () => "عبرانی",
+  hi: () => "ہندی",
+  it: () => "اطالوی",
+  ja: () => "جاپانی",
+  ko: () => "کوریائی",
+  nl: () => "ڈچ",
+  pl: () => "پولش",
+  pt: () => "پرتگالی",
+  ru: () => "روسی",
+  tr: () => "ترکی",
+  vi: () => "ویتنامی",
+  zh: () => "چینی",
+  fa: () => "فارسی",
+  ur: () => "اردو"
+};
+export {
+  e as default
+};

package/dist/vi-CaJ4-itr.js

@@ -0,0 +1,44 @@
+const n = {
+  loadingExtended: () => "Đang tải, vui lòng đợi",
+  loadingShort: () => "Đang tải...",
+  locale: () => "Ngôn ngữ",
+  iconDescription: () => "Biểu tượng",
+  loadingIcon: () => "Biểu tượng tải",
+  failedToLoadIcon: () => "Không thể tải biểu tượng",
+  editLabel: () => "Chỉnh sửa",
+  selectOne: () => "Chọn một",
+  passwordPlaceholderText: () => "Mật khẩu bí mật",
+  togglePasswordVisibility: () => "Chuyển đổi hiển thị mật khẩu",
+  toggleMenu: () => "Chuyển đổi menu",
+  toggleAside: () => "Chuyển đổi bảng bên",
+  mainNavigation: () => "Điều hướng chính",
+  sidebar: () => "Thanh bên",
+  closeDrawer: () => "Đóng ngăn kéo",
+  closeModal: () => "Đóng modal",
+  confirm: () => "Xác nhận",
+  cancel: () => "Hủy",
+  // languages
+  currentLocale: () => "Tiếng Việt",
+  ar: () => "Tiếng Ả Rập",
+  de: () => "Tiếng Đức",
+  en: () => "Tiếng Anh",
+  es: () => "Tiếng Tây Ban Nha",
+  fr: () => "Tiếng Pháp",
+  hi: () => "Tiếng Hindi",
+  it: () => "Tiếng Ý",
+  ja: () => "Tiếng Nhật",
+  ko: () => "Tiếng Hàn",
+  nl: () => "Tiếng Hà Lan",
+  pl: () => "Tiếng Ba Lan",
+  pt: () => "Tiếng Bồ Đào Nha",
+  ru: () => "Tiếng Nga",
+  tr: () => "Tiếng Thổ Nhĩ Kỳ",
+  vi: () => "Tiếng Việt",
+  zh: () => "Tiếng Trung",
+  he: () => "Tiếng Do Thái",
+  fa: () => "Tiếng Ba Tư",
+  ur: () => "Tiếng Urdu"
+};
+export {
+  n as default
+};

package/dist/zh-cAmOB1FQ.js

@@ -0,0 +1,44 @@
+const e = {
+  loadingExtended: () => "正在加载，请稍候",
+  loadingShort: () => "加载中...",
+  locale: () => "语言",
+  iconDescription: () => "图标",
+  loadingIcon: () => "加载图标",
+  failedToLoadIcon: () => "图标加载失败",
+  editLabel: () => "编辑",
+  selectOne: () => "选择一个",
+  passwordPlaceholderText: () => "密码",
+  togglePasswordVisibility: () => "切换密码可见性",
+  toggleMenu: () => "切换菜单",
+  toggleAside: () => "切换侧边栏",
+  mainNavigation: () => "主导航",
+  sidebar: () => "侧边栏",
+  closeDrawer: () => "关闭抽屉",
+  closeModal: () => "关闭模态框",
+  confirm: () => "确认",
+  cancel: () => "取消",
+  // languages
+  currentLocale: () => "简体中文",
+  ar: () => "阿拉伯语",
+  de: () => "德语",
+  en: () => "英语",
+  es: () => "西班牙语",
+  fr: () => "法语",
+  hi: () => " Hindi",
+  it: () => "意大利语",
+  ja: () => "日语",
+  ko: () => "韩语",
+  nl: () => "荷兰语",
+  pl: () => "波兰语",
+  pt: () => "葡萄牙语",
+  ru: () => "俄语",
+  tr: () => "土耳其语",
+  vi: () => "越南语",
+  zh: () => "简体中文",
+  he: () => "希伯来语",
+  fa: () => "波斯语",
+  ur: () => "乌尔都语"
+};
+export {
+  e as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/beatui",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -56,7 +56,7 @@
   "peerDependencies": {
     "@tempots/dom": "28.2.2",
     "@tempots/std": "0.22.1",
-    "@tempots/ui": "6.0.1"
+    "@tempots/ui": "6.1.0"
   },
   "peerDependenciesMeta": {
     "@tempots/dom": {

package/dist/types/components/navigation/menu/menu.d.ts

@@ -1,6 +0,0 @@
-import { TNode } from '@tempots/dom';
-export type MenuOptions = {
-    anchor?: string | HTMLElement;
-    position?: 'top' | 'bottom' | 'left' | 'right';
-};
-export declare function Menu(fn: (open: (options: MenuOptions) => void) => TNode, _close: () => void): TNode;