@tempots/beatui 0.13.0 → 0.15.0

package/dist/types/auth-i18n/locales/ur.d.ts

@@ -0,0 +1,29 @@
+declare const ur: {
+    signInTitle: () => string;
+    signInButton: () => string;
+    emailLabel: () => string;
+    passwordLabel: () => string;
+    rememberMeLabel: () => string;
+    forgotPasswordLink: () => string;
+    noAccountLink: () => string;
+    signUpTitle: () => string;
+    signUpButton: () => string;
+    nameLabel: () => string;
+    confirmPasswordLabel: () => string;
+    acceptTermsLabel: () => string;
+    hasAccountLink: () => string;
+    resetPasswordTitle: () => string;
+    resetPasswordButton: () => string;
+    resetPasswordDescription: () => string;
+    backToSignInLink: () => string;
+    continueWithProvider: (provider: string) => string;
+    passwordStrengthWeak: () => string;
+    passwordStrengthFair: () => string;
+    passwordStrengthGood: () => string;
+    passwordStrengthStrong: () => string;
+    orDivider: () => string;
+    error: () => string;
+    required: () => string;
+    authenticationTitle: () => string;
+};
+export default ur;

package/dist/types/auth-i18n/locales/vi.d.ts

@@ -0,0 +1,29 @@
+declare const vi: {
+    signInTitle: () => string;
+    signInButton: () => string;
+    emailLabel: () => string;
+    passwordLabel: () => string;
+    rememberMeLabel: () => string;
+    forgotPasswordLink: () => string;
+    noAccountLink: () => string;
+    signUpTitle: () => string;
+    signUpButton: () => string;
+    nameLabel: () => string;
+    confirmPasswordLabel: () => string;
+    acceptTermsLabel: () => string;
+    hasAccountLink: () => string;
+    resetPasswordTitle: () => string;
+    resetPasswordButton: () => string;
+    resetPasswordDescription: () => string;
+    backToSignInLink: () => string;
+    continueWithProvider: (provider: string) => string;
+    passwordStrengthWeak: () => string;
+    passwordStrengthFair: () => string;
+    passwordStrengthGood: () => string;
+    passwordStrengthStrong: () => string;
+    orDivider: () => string;
+    error: () => string;
+    required: () => string;
+    authenticationTitle: () => string;
+};
+export default vi;

package/dist/types/auth-i18n/locales/zh.d.ts

@@ -24,5 +24,6 @@ declare const zh: {
     orDivider: () => string;
     error: () => string;
     required: () => string;
+    authenticationTitle: () => string;
 };
 export default zh;

package/dist/types/auth-i18n/translations.d.ts

@@ -24,4 +24,5 @@ export declare const AuthI18n: import("@tempots/dom").Provider<import("..").Reac
     orDivider: () => string;
     error: () => string;
     required: () => string;
+    authenticationTitle: () => string;
 }>, object>;

package/dist/types/beatui-i18n/default.d.ts

@@ -37,6 +37,7 @@ export declare const defaultMessages: {
     he: () => string;
     fa: () => string;
     ur: () => string;
+    emailPlaceholderText: () => string;
 };
 export declare const defaultLocale = "en";
 export type BeatUIMessages = typeof defaultMessages;

package/dist/types/beatui-i18n/locales/en.d.ts

@@ -37,5 +37,6 @@ declare const en: {
     he: () => string;
     fa: () => string;
     ur: () => string;
+    emailPlaceholderText: () => string;
 };
 export default en;

package/dist/types/beatui-i18n/translations.d.ts

@@ -37,4 +37,5 @@ export declare const BeatUII18n: import("@tempots/dom").Provider<import("..").Re
     he: () => string;
     fa: () => string;
     ur: () => string;
+    emailPlaceholderText: () => string;
 }>, object>;

package/dist/types/components/auth/auth-container.d.ts

@@ -1,7 +1,6 @@
-import { TNode, Value } from '@tempots/dom';
+import { TNode } from '@tempots/dom';
 import { AuthContainerOptions } from './index';
-export declare function AuthContainer({ mode: initialMode, className, socialProviders, passwordRules, showRememberMe, showSocialDivider, showPasswordStrength, labels, onSignIn, onSignUp, onResetPassword, onModeChange, }: AuthContainerOptions): TNode;
-export declare function AuthModal({ isOpen, onClose, ...authOptions }: AuthContainerOptions & {
-    isOpen: Value<boolean>;
-    onClose?: () => void;
-}): TNode;
+export declare function AuthContainer({ mode: initialMode, socialProviders, passwordRules, showRememberMe, showSocialDivider, showPasswordStrength, labels, onSignIn, onSignUp, onResetPassword, onModeChange, showContainer, }: AuthContainerOptions, ...children: TNode[]): TNode;
+export declare function AuthModal(fn: (open: (options: AuthContainerOptions & {
+    modalTitle?: () => string;
+}) => void) => TNode): TNode;

package/dist/types/components/auth/types.d.ts

@@ -79,6 +79,7 @@ export interface AuthContainerOptions {
     showConfirmPassword?: boolean;
     showAcceptTermsAndConditions?: boolean;
     termsAndConditions?: TNode;
+    showContainer?: Value<boolean>;
 }
 export interface SocialProvidersOptions {
     providers: AuthProviderInfo[];

package/dist/types/components/form/controller/color-controller.d.ts

@@ -0,0 +1,75 @@
+import { Controller } from './controller';
+import { Signal } from '@tempots/dom';
+import { Path } from './path';
+import { ControllerValidation } from './controller-validation';
+/**
+ * Specialized controller for color values with validation and transformation utilities
+ */
+export declare class ColorController extends Controller<string> {
+    constructor(path: Path, change: (value: string) => void, value: Signal<string>, status: Signal<ControllerValidation>, parent: {
+        disabled: Signal<boolean>;
+    });
+    /**
+     * Validates that the current value is a valid color
+     */
+    readonly isValidColor: import("@tempots/dom").Computed<boolean>;
+    /**
+     * Validates that the current value is a valid hex color
+     */
+    readonly isValidHex: import("@tempots/dom").Computed<boolean>;
+    /**
+     * Gets the normalized hex color (always 6 characters with # prefix)
+     */
+    readonly normalizedHex: import("@tempots/dom").Computed<string>;
+    /**
+     * Sets the color value with automatic normalization for hex colors
+     * @param color - The color value to set
+     */
+    readonly setColor: (color: string) => void;
+    /**
+     * Sets a hex color value
+     * @param hex - The hex color value (with or without #)
+     */
+    readonly setHex: (hex: string) => void;
+    /**
+     * Sets an RGB color value
+     * @param r - Red value (0-255)
+     * @param g - Green value (0-255)
+     * @param b - Blue value (0-255)
+     */
+    readonly setRgb: (r: number, g: number, b: number) => void;
+    /**
+     * Gets RGB values from the current color
+     * @returns RGB values or null if not a valid hex color
+     */
+    readonly getRgb: () => {
+        r: number;
+        g: number;
+        b: number;
+    } | null;
+    /**
+     * Creates a controller that transforms between different color formats
+     * @param format - The target color format ('hex', 'rgb', 'hsl')
+     * @returns A new controller with format transformation
+     */
+    readonly withFormat: (format: "hex" | "rgb" | "hsl") => Controller<string>;
+}
+/**
+ * Creates a ColorController from a regular Controller<string>
+ * @param controller - The base string controller
+ * @returns A new ColorController with color-specific functionality
+ */
+export declare function createColorController(controller: Controller<string>): ColorController;
+/**
+ * Helper function to create color input options from a ColorController
+ * @param controller - The ColorController instance
+ * @returns Input options compatible with ColorInput component
+ */
+export declare function colorInputOptionsFromController(controller: ColorController): {
+    id: string;
+    disabled: Signal<boolean>;
+    value: import("@tempots/dom").Computed<string>;
+    hasError: Signal<boolean>;
+    onChange: (color: string) => void;
+    onInput: (color: string) => void;
+};

package/dist/types/components/form/controller/index.d.ts

@@ -3,3 +3,4 @@ export * from '../control/list-control';
 export * from './path';
 export * from './controller-validation';
 export * from './controller';
+export * from './color-controller';

package/dist/types/components/form/input/color-input.d.ts

@@ -0,0 +1,2 @@
+import { InputOptions } from './input-options';
+export declare const ColorInput: (options: InputOptions<string>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/index.d.ts

@@ -1,5 +1,6 @@
 export * from './appearance-selector';
 export * from './checkbox-input';
+export * from './color-input';
 export * from './combobox';
 export * from './date-input';
 export * from './date-time-input';

package/dist/types/components/form/input/input-options.d.ts

@@ -10,6 +10,7 @@ export type CommonInputOptions = {
     name?: Value<string>;
     placeholder?: Value<string>;
     id?: Value<string>;
+    required?: Value<boolean>;
 };
 export type InputOptions<V> = Merge<CommonInputOptions, {
     value: Value<V>;
@@ -19,7 +20,7 @@ export type InputOptions<V> = Merge<CommonInputOptions, {
     onInput?: (value: V) => void;
     onBlur?: () => void;
 }>;
-export declare const CommonInputAttributes: ({ autocomplete, autofocus, class: cls, disabled, name, placeholder, id, }: CommonInputOptions) => import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
+export declare const CommonInputAttributes: ({ autocomplete, autofocus, class: cls, disabled, name, placeholder, id, required, hasError, }: CommonInputOptions) => import("@tempots/dom").Renderable<import("@tempots/dom").DOMContext>;
 export declare const inputOptionsFromController: <T>(controller: Controller<T>) => {
     id: string;
     disabled: import("@tempots/dom").Signal<boolean>;

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

@@ -2,3 +2,4 @@ export * from './flyout';
 export * from './link';
 export * from './menu';
 export * from './sidebar/index';
+export * from './tabs';

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

@@ -0,0 +1 @@
+export * from './tabs';

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

@@ -0,0 +1,52 @@
+import { TNode, Value } from '@tempots/dom';
+import { ControlSize } from '../../theme';
+export interface TabItem {
+    /** Unique identifier for the tab */
+    key: string;
+    /** Tab label content */
+    label: TNode;
+    /** Tab content to display when active */
+    content: () => TNode;
+    /** Whether the tab is disabled */
+    disabled?: Value<boolean>;
+    /** ARIA label for accessibility */
+    ariaLabel?: Value<string>;
+}
+export type TabsDirection = 'horizontal' | 'vertical';
+export interface TabsOptions {
+    /** Array of tab items */
+    items: TabItem[];
+    /** Currently active tab key */
+    value: Value<string>;
+    /** Callback when tab changes */
+    onChange?: (key: string) => void;
+    /** Size of the tabs */
+    size?: Value<ControlSize>;
+    /** Whether tabs are disabled */
+    disabled?: Value<boolean>;
+    /** Orientation of the tabs */
+    orientation?: Value<TabsDirection>;
+    /** Whether to show tab content */
+    showContent?: Value<boolean>;
+    /** ARIA label for the tab list */
+    ariaLabel?: Value<string>;
+}
+/**
+ * Tabs component that provides tabbed navigation with content panels.
+ * Follows WAI-ARIA tabs pattern with proper keyboard navigation and accessibility.
+ *
+ * @example
+ * ```typescript
+ * const activeTab = prop('tab1')
+ *
+ * Tabs({
+ *   items: [
+ *     { key: 'tab1', label: 'First Tab', content: html.div('Content 1') },
+ *     { key: 'tab2', label: 'Second Tab', content: html.div('Content 2') },
+ *   ],
+ *   value: activeTab,
+ *   onChange: activeTab.set
+ * })
+ * ```
+ */
+export declare function Tabs(options: TabsOptions): TNode;

package/dist/types/utils/color-validation.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Color validation utilities for BeatUI color inputs
+ */
+/**
+ * Validates if a string is a valid hex color
+ * @param color - The color string to validate
+ * @returns true if valid hex color, false otherwise
+ */
+export declare function isValidHexColor(color: string): boolean;
+/**
+ * Validates if a string is a valid RGB color
+ * @param color - The color string to validate (e.g., "rgb(255, 0, 0)")
+ * @returns true if valid RGB color, false otherwise
+ */
+export declare function isValidRgbColor(color: string): boolean;
+/**
+ * Validates if a string is a valid RGBA color
+ * @param color - The color string to validate (e.g., "rgba(255, 0, 0, 0.5)")
+ * @returns true if valid RGBA color, false otherwise
+ */
+export declare function isValidRgbaColor(color: string): boolean;
+/**
+ * Validates if a string is a valid HSL color
+ * @param color - The color string to validate (e.g., "hsl(120, 100%, 50%)")
+ * @returns true if valid HSL color, false otherwise
+ */
+export declare function isValidHslColor(color: string): boolean;
+/**
+ * Validates if a string is any valid color format
+ * @param color - The color string to validate
+ * @returns true if valid color in any supported format, false otherwise
+ */
+export declare function isValidColor(color: string): boolean;
+/**
+ * Normalizes a hex color to always include the # prefix and be 6 characters
+ * @param color - The hex color to normalize
+ * @returns normalized hex color or null if invalid
+ */
+export declare function normalizeHexColor(color: string): string | null;
+/**
+ * Converts RGB values to hex color
+ * @param r - Red value (0-255)
+ * @param g - Green value (0-255)
+ * @param b - Blue value (0-255)
+ * @returns hex color string
+ */
+export declare function rgbToHex(r: number, g: number, b: number): string;
+/**
+ * Converts hex color to RGB values
+ * @param hex - Hex color string (with or without #)
+ * @returns RGB values object or null if invalid
+ */
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Gets the contrast ratio between two colors
+ * @param color1 - First color (hex format)
+ * @param color2 - Second color (hex format)
+ * @returns contrast ratio or null if invalid colors
+ */
+export declare function getContrastRatio(color1: string, color2: string): number | null;

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

@@ -1,3 +1,4 @@
+export * from './color-validation';
 export * from './delay-signal';
 export * from './focus-trap';
 export * from './session-id';

package/dist/ur-BThJLsvD.js

@@ -0,0 +1,38 @@
+const r = {
+  // Sign In
+  signInTitle: () => "سائن ان",
+  signInButton: () => "سائن ان",
+  emailLabel: () => "ای میل",
+  passwordLabel: () => "پاس ورڈ",
+  rememberMeLabel: () => "مجھے یاد رکھیں",
+  forgotPasswordLink: () => "پاس ورڈ بھول گئے؟",
+  noAccountLink: () => "اکاؤنٹ نہیں ہے؟ سائن اپ کریں",
+  // Sign Up
+  signUpTitle: () => "سائن اپ",
+  signUpButton: () => "سائن اپ",
+  nameLabel: () => "نام",
+  confirmPasswordLabel: () => "پاس ورڈ کی تصدیق کریں",
+  acceptTermsLabel: () => "میں شرائط و ضوابط کو قبول کرتا ہوں",
+  hasAccountLink: () => "پہلے سے اکاؤنٹ ہے؟ سائن ان کریں",
+  // Reset Password
+  resetPasswordTitle: () => "پاس ورڈ ری سیٹ کریں",
+  resetPasswordButton: () => "پاس ورڈ ری سیٹ کریں",
+  resetPasswordDescription: () => "اپنا پاس ورڈ ری سیٹ کرنے کے لیے اپنا ای میل درج کریں۔",
+  backToSignInLink: () => "سائن ان پر واپس جائیں",
+  // Social Login
+  continueWithProvider: (e) => `${e} کے ساتھ جاری رکھیں`,
+  // Password Strength
+  passwordStrengthWeak: () => "کمزور",
+  passwordStrengthFair: () => "ٹھیک",
+  passwordStrengthGood: () => "اچھا",
+  passwordStrengthStrong: () => "مضبوط",
+  // Common
+  orDivider: () => "یا",
+  error: () => "ایک خرابی ہوئی",
+  required: () => "ضروری",
+  // Modal
+  authenticationTitle: () => "تصدیق"
+};
+export {
+  r as default
+};

package/dist/{ur-B7AcyGH1.js → ur-BVAP8WLA.js}

@@ -37,7 +37,9 @@ const e = {
   vi: () => "ویتنامی",
   zh: () => "چینی",
   fa: () => "فارسی",
-  ur: () => "اردو"
+  ur: () => "اردو",
+  // input
+  emailPlaceholderText: () => "اپنا ای میل داخل کریں"
 };
 export {
   e as default

package/dist/vi-Cd6F8iSa.js

@@ -0,0 +1,38 @@
+const t = {
+  // Sign In
+  signInTitle: () => "Đăng nhập",
+  signInButton: () => "Đăng nhập",
+  emailLabel: () => "Email",
+  passwordLabel: () => "Mật khẩu",
+  rememberMeLabel: () => "Ghi nhớ tôi",
+  forgotPasswordLink: () => "Quên mật khẩu?",
+  noAccountLink: () => "Chưa có tài khoản? Đăng ký",
+  // Sign Up
+  signUpTitle: () => "Đăng ký",
+  signUpButton: () => "Đăng ký",
+  nameLabel: () => "Tên",
+  confirmPasswordLabel: () => "Xác nhận mật khẩu",
+  acceptTermsLabel: () => "Tôi chấp nhận các điều khoản và điều kiện",
+  hasAccountLink: () => "Đã có tài khoản? Đăng nhập",
+  // Reset Password
+  resetPasswordTitle: () => "Đặt lại mật khẩu",
+  resetPasswordButton: () => "Đặt lại mật khẩu",
+  resetPasswordDescription: () => "Nhập email của bạn để đặt lại mật khẩu.",
+  backToSignInLink: () => "Quay lại đăng nhập",
+  // Social Login
+  continueWithProvider: (n) => `Tiếp tục với ${n}`,
+  // Password Strength
+  passwordStrengthWeak: () => "Yếu",
+  passwordStrengthFair: () => "Khá",
+  passwordStrengthGood: () => "Tốt",
+  passwordStrengthStrong: () => "Mạnh",
+  // Common
+  orDivider: () => "hoặc",
+  error: () => "Đã xảy ra lỗi",
+  required: () => "Bắt buộc",
+  // Modal
+  authenticationTitle: () => "Xác thực"
+};
+export {
+  t as default
+};

package/dist/{vi-CaJ4-itr.js → vi-Dv4aIcRH.js}

@@ -37,7 +37,9 @@ const n = {
   zh: () => "Tiếng Trung",
   he: () => "Tiếng Do Thái",
   fa: () => "Tiếng Ba Tư",
-  ur: () => "Tiếng Urdu"
+  ur: () => "Tiếng Urdu",
+  // input
+  emailPlaceholderText: () => "Nhập email của bạn"
 };
 export {
   n as default

package/dist/{zh-cAmOB1FQ.js → zh-BcAbijvs.js}

@@ -37,7 +37,9 @@ const e = {
   zh: () => "简体中文",
   he: () => "希伯来语",
   fa: () => "波斯语",
-  ur: () => "乌尔都语"
+  ur: () => "乌尔都语",
+  // input
+  emailPlaceholderText: () => "请输入邮箱"
 };
 export {
   e as default

package/dist/{zh-Cy7W0TAv.js → zh-Boy-i2zO.js}

@@ -29,7 +29,9 @@ const r = {
   // Common
   orDivider: () => "或",
   error: () => "发生错误",
-  required: () => "必填"
+  required: () => "必填",
+  // Modal
+  authenticationTitle: () => "认证"
 };
 export {
   r as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/beatui",
-  "version": "0.13.0",
+  "version": "0.15.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.3.1",
+    "@tempots/dom": "28.4.5",
     "@tempots/std": "0.22.1",
-    "@tempots/ui": "6.2.0"
+    "@tempots/ui": "6.4.1"
   },
   "peerDependenciesMeta": {
     "@tempots/dom": {