@tempots/beatui 0.14.0 → 0.15.0

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/package.json

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