@tempots/beatui 0.14.0 → 0.16.0

package/dist/{it-CWTDpmhc.js → it-BeJHf7Ur.js}

@@ -39,7 +39,10 @@ const a = {
   fa: () => "Persiano",
   ur: () => "Urdu",
   // input
-  emailPlaceholderText: () => "Inserisci la tua email"
+  emailPlaceholderText: () => "Inserisci la tua email",
+  // drop zone
+  dropZoneInstructions: () => "Trascina e rilascia i file qui",
+  dropZoneInstructionsWithClick: () => "Trascina e rilascia i file qui, o premi Invio o Spazio per aprire il selettore file"
 };
 export {
   a as default

package/dist/{ja-C1Nynl79.js → ja-D5YyTu5k.js}

@@ -39,7 +39,10 @@ const e = {
   fa: () => "ペルシア語",
   ur: () => "ウルドゥー語",
   // input
-  emailPlaceholderText: () => "メールアドレスを入力"
+  emailPlaceholderText: () => "メールアドレスを入力",
+  // drop zone
+  dropZoneInstructions: () => "ファイルをここにドラッグ＆ドロップ",
+  dropZoneInstructionsWithClick: () => "ファイルをここにドラッグ＆ドロップ、またはEnterキーまたはSpaceキーを押してファイル選択を開く"
 };
 export {
   e as default,

package/dist/{ko-BnQv3_8f.js → ko-DNqvHWiZ.js}

@@ -39,7 +39,10 @@ const e = {
   fa: () => "페르시아어",
   ur: () => "우르두어",
   // input
-  emailPlaceholderText: () => "이메일을 입력하세요"
+  emailPlaceholderText: () => "이메일을 입력하세요",
+  // drop zone
+  dropZoneInstructions: () => "파일을 여기에 드래그 앤 드롭하세요",
+  dropZoneInstructionsWithClick: () => "파일을 여기에 드래그 앤 드롭하거나, Enter 또는 Space 키를 눌러 파일 선택기를 여세요"
 };
 export {
   e as default

package/dist/{nl-CH2009II.js → nl-Cdbu51NB.js}

@@ -39,7 +39,10 @@ const e = {
   fa: () => "Perzisch",
   ur: () => "Urdu",
   // input
-  emailPlaceholderText: () => "Voer je e-mail in"
+  emailPlaceholderText: () => "Voer je e-mail in",
+  // drop zone
+  dropZoneInstructions: () => "Sleep bestanden hierheen",
+  dropZoneInstructionsWithClick: () => "Sleep bestanden hierheen, of druk op Enter of Spatie om bestandskiezer te openen"
 };
 export {
   e as default,

package/dist/{pl-Cd4dZDyG.js → pl-Bru8UPLn.js}

@@ -1,4 +1,4 @@
-const a = {
+const i = {
   loadingExtended: () => "Ładowanie, proszę czekać",
   loadingShort: () => "Ładowanie...",
   locale: () => "Język",
@@ -39,9 +39,12 @@ const a = {
   fa: () => "Perski",
   ur: () => "Urdu",
   // input
-  emailPlaceholderText: () => "Wprowadź adres e-mail"
+  emailPlaceholderText: () => "Wprowadź adres e-mail",
+  // drop zone
+  dropZoneInstructions: () => "Przeciągnij i upuść pliki tutaj",
+  dropZoneInstructionsWithClick: () => "Przeciągnij i upuść pliki tutaj, lub naciśnij Enter lub Spację, aby otworzyć selektor plików"
 };
 export {
-  a as default,
-  a as pl
+  i as default,
+  i as pl
 };

package/dist/{pt-CZER9j0r.js → pt-LCfmUFgc.js}

@@ -39,7 +39,10 @@ const a = {
   fa: () => "Persa",
   ur: () => "Urdu",
   // input
-  emailPlaceholderText: () => "Digite seu e-mail"
+  emailPlaceholderText: () => "Digite seu e-mail",
+  // drop zone
+  dropZoneInstructions: () => "Arraste e solte arquivos aqui",
+  dropZoneInstructionsWithClick: () => "Arraste e solte arquivos aqui, ou pressione Enter ou Espaço para abrir o seletor de arquivos"
 };
 export {
   a as default

package/dist/{ru-CCEGJYwF.js → ru-D7gTuXxP.js}

@@ -39,7 +39,10 @@ const e = {
   fa: () => "Персидский",
   ur: () => "Урду",
   // input
-  emailPlaceholderText: () => "Введите электронную почту"
+  emailPlaceholderText: () => "Введите электронную почту",
+  // drop zone
+  dropZoneInstructions: () => "Перетащите файлы сюда",
+  dropZoneInstructionsWithClick: () => "Перетащите файлы сюда, или нажмите Enter или Пробел, чтобы открыть выбор файлов"
 };
 export {
   e as default,

package/dist/{tr-BVIGQcgy.js → tr-DlFekEUg.js}

@@ -39,7 +39,10 @@ const e = {
   fa: () => "Farsça",
   ur: () => "Urduca",
   // input
-  emailPlaceholderText: () => "E-postanızı girin"
+  emailPlaceholderText: () => "E-postanızı girin",
+  // drop zone
+  dropZoneInstructions: () => "Dosyaları buraya sürükleyip bırakın",
+  dropZoneInstructionsWithClick: () => "Dosyaları buraya sürükleyip bırakın, veya dosya seçiciyi açmak için Enter veya Boşluk tuşuna basın"
 };
 export {
   e as default

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

@@ -38,6 +38,8 @@ export declare const defaultMessages: {
     fa: () => string;
     ur: () => string;
     emailPlaceholderText: () => string;
+    dropZoneInstructions: () => string;
+    dropZoneInstructionsWithClick: () => string;
 };
 export declare const defaultLocale = "en";
 export type BeatUIMessages = typeof defaultMessages;

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

@@ -38,5 +38,7 @@ declare const en: {
     fa: () => string;
     ur: () => string;
     emailPlaceholderText: () => string;
+    dropZoneInstructions: () => string;
+    dropZoneInstructionsWithClick: () => string;
 };
 export default en;

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

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

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

@@ -1,2 +1,3 @@
 export * from './icon';
 export * from './tag';
+export * from './unstyled-drop-zone';

package/dist/types/components/data/unstyled-drop-zone.d.ts

@@ -0,0 +1,12 @@
+import { TNode, Value, Signal } from '@tempots/dom';
+export type DropZoneOptions = {
+    onDrop: (files: File[]) => void;
+    accept?: Value<string>;
+    enableClick?: Value<boolean>;
+    content: (options: {
+        files: Signal<File[]>;
+        clear: () => void;
+    }) => TNode;
+    allowMultiple?: Value<boolean>;
+};
+export declare function UnstyledDropZone({ onDrop, accept, enableClick, content, allowMultiple, }: DropZoneOptions): import("@tempots/dom").Renderable;

package/dist/types/components/form/control/file-control.d.ts

@@ -0,0 +1,11 @@
+import { TNode, Value } from '@tempots/dom';
+import { ControlOptions } from './control-options';
+import { Merge } from '@tempots/std';
+export type FileControlOptions = Merge<ControlOptions<File[]>, {
+    accept?: Value<string>;
+    allowMultiple?: Value<boolean>;
+    maxFiles?: Value<number>;
+    maxFileSize?: Value<number>;
+    showFileList?: Value<boolean>;
+}>;
+export declare const FileControl: (options: FileControlOptions, ...children: TNode[]) => import("@tempots/dom").Renderable;

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

@@ -4,6 +4,7 @@ export * from './control-options';
 export * from './date-control';
 export * from './date-time-control';
 export * from './email-control';
+export * from './file-control';
 export * from './form-status';
 export * from './lazy-native-select-control';
 export * from './native-select-control';

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/file-input.d.ts

@@ -0,0 +1,11 @@
+import { Value } from '@tempots/dom';
+import { InputOptions } from './input-options';
+import { Merge } from '@tempots/std';
+export type FileInputOptions = Merge<InputOptions<File[]>, {
+    accept?: Value<string>;
+    allowMultiple?: Value<boolean>;
+    maxFiles?: Value<number>;
+    maxFileSize?: Value<number>;
+    showFileList?: Value<boolean>;
+}>;
+export declare const FileInput: (options: FileInputOptions) => import("@tempots/dom").Renderable;

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

@@ -1,10 +1,12 @@
 export * from './appearance-selector';
 export * from './checkbox-input';
+export * from './color-input';
 export * from './combobox';
 export * from './date-input';
 export * from './date-time-input';
 export * from './editable-text';
 export * from './email-input';
+export * from './file-input';
 export * from './input-container';
 export * from './input-options';
 export * from './input-wrapper';

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-BVAP8WLA.js → ur-mIO25A6L.js}

@@ -39,7 +39,10 @@ const e = {
   fa: () => "فارسی",
   ur: () => "اردو",
   // input
-  emailPlaceholderText: () => "اپنا ای میل داخل کریں"
+  emailPlaceholderText: () => "اپنا ای میل داخل کریں",
+  // drop zone
+  dropZoneInstructions: () => "فائلوں کو یہاں گھسیٹ کر چھوڑیں",
+  dropZoneInstructionsWithClick: () => "فائلوں کو یہاں گھسیٹ کر چھوڑیں، یا فائل منتخب کرنے کے لیے Enter یا Space دبائیں"
 };
 export {
   e as default

package/dist/{vi-Dv4aIcRH.js → vi-Dw_DDZWP.js}

@@ -39,7 +39,10 @@ const n = {
   fa: () => "Tiếng Ba Tư",
   ur: () => "Tiếng Urdu",
   // input
-  emailPlaceholderText: () => "Nhập email của bạn"
+  emailPlaceholderText: () => "Nhập email của bạn",
+  // drop zone
+  dropZoneInstructions: () => "Kéo và thả tệp vào đây",
+  dropZoneInstructionsWithClick: () => "Kéo và thả tệp vào đây, hoặc nhấn Enter hoặc Space để mở trình chọn tệp"
 };
 export {
   n as default

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

@@ -39,7 +39,10 @@ const e = {
   fa: () => "波斯语",
   ur: () => "乌尔都语",
   // input
-  emailPlaceholderText: () => "请输入邮箱"
+  emailPlaceholderText: () => "请输入邮箱",
+  // drop zone
+  dropZoneInstructions: () => "将文件拖拽到此处",
+  dropZoneInstructionsWithClick: () => "将文件拖拽到此处，或按 Enter 或空格键打开文件选择器"
 };
 export {
   e as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/beatui",
-  "version": "0.14.0",
+  "version": "0.16.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.3.0"
+    "@tempots/ui": "6.4.1"
   },
   "peerDependenciesMeta": {
     "@tempots/dom": {