@tempots/beatui 1.4.0 → 1.6.0

package/dist/types/components/data/stat-card.d.ts

@@ -0,0 +1,108 @@
+import { TNode, Value } from '@tempots/dom';
+import { ControlSize } from '../theme';
+import { ThemeColorName } from '../../tokens';
+/** Visual style variant for {@link StatCard}. */
+export type StatCardVariant = 'default' | 'elevated' | 'outlined';
+/** Trend direction for {@link StatCardTrend}. */
+export type TrendDirection = 'up' | 'down' | 'flat';
+/** Configuration options for the {@link StatCard} component. */
+export interface StatCardOptions {
+    /** Visual style variant. @default 'default' */
+    variant?: Value<StatCardVariant>;
+    /** Controls internal padding. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Theme color accent. @default 'primary' */
+    color?: Value<ThemeColorName>;
+}
+/** Options for a {@link StatCardSection}. */
+export interface StatCardSectionOptions {
+    /** Additional CSS classes. */
+    class?: Value<string>;
+}
+/** Configuration for the {@link StatCardTrend} sub-component. */
+export interface StatCardTrendOptions {
+    /** The trend value to display (e.g. "+12%", "3.2"). */
+    value: Value<string | number>;
+    /** Direction of the trend. */
+    direction: Value<TrendDirection>;
+    /** Override the auto-derived color. When omitted, uses success/danger/neutral based on direction. */
+    color?: Value<ThemeColorName>;
+}
+/**
+ * A dashboard metric card that displays a statistic with optional label,
+ * trend indicator, icon, and sparkline slot.
+ *
+ * Uses a composition pattern — combine with {@link StatCardValue},
+ * {@link StatCardLabel}, {@link StatCardTrend}, {@link StatCardIcon},
+ * and {@link StatCardSparkline} to build rich stat displays.
+ *
+ * @param options - Configuration for variant, size, and color
+ * @param children - Sub-components to render inside the card
+ * @returns A stat card element
+ *
+ * @example
+ * ```ts
+ * StatCard({ variant: 'elevated' },
+ *   StatCardIcon({}, Icon({ icon: 'lucide:users', size: 'lg' })),
+ *   StatCardValue({}, '1,234'),
+ *   StatCardLabel({}, 'Active Users'),
+ *   StatCardTrend({ value: '+12%', direction: 'up' }),
+ * )
+ * ```
+ */
+export declare function StatCard({ variant, size, color }?: StatCardOptions, ...children: TNode[]): TNode;
+/**
+ * The primary metric value of a {@link StatCard}.
+ *
+ * @example
+ * ```ts
+ * StatCardValue({}, '1,234')
+ * StatCardValue({}, formattedRevenue)
+ * ```
+ */
+export declare function StatCardValue({ class: className }?: StatCardSectionOptions, ...children: TNode[]): TNode;
+/**
+ * A descriptive label for a {@link StatCard} metric.
+ *
+ * @example
+ * ```ts
+ * StatCardLabel({}, 'Monthly Revenue')
+ * ```
+ */
+export declare function StatCardLabel({ class: className }?: StatCardSectionOptions, ...children: TNode[]): TNode;
+/**
+ * A trend indicator showing a value with a directional arrow.
+ *
+ * When no `color` is provided, the color is auto-derived from `direction`:
+ * up → success, down → danger, flat → neutral.
+ *
+ * @param options - Trend value, direction, and optional color override
+ * @returns A trend indicator element
+ *
+ * @example
+ * ```ts
+ * StatCardTrend({ value: '+12.5%', direction: 'up' })
+ * StatCardTrend({ value: '-3%', direction: 'down' })
+ * StatCardTrend({ value: '0%', direction: 'flat' })
+ * ```
+ */
+export declare function StatCardTrend(options: StatCardTrendOptions): TNode;
+/**
+ * An icon slot for a {@link StatCard}, typically placed at the top or side.
+ *
+ * @example
+ * ```ts
+ * StatCardIcon({}, Icon({ icon: 'lucide:dollar-sign', size: 'lg', color: 'primary' }))
+ * ```
+ */
+export declare function StatCardIcon({ class: className }?: StatCardSectionOptions, ...children: TNode[]): TNode;
+/**
+ * A sparkline/chart slot for a {@link StatCard}.
+ * Renders a container where you can place any chart or visualization component.
+ *
+ * @example
+ * ```ts
+ * StatCardSparkline({}, mySparklineChart)
+ * ```
+ */
+export declare function StatCardSparkline({ class: className }?: StatCardSectionOptions, ...children: TNode[]): TNode;

package/dist/types/components/data/time-picker.d.ts

@@ -0,0 +1,54 @@
+import { Value, type Renderable } from '@tempots/dom';
+import { ControlSize } from '../theme';
+import { ThemeColorName } from '../../tokens';
+import type { PlainTime } from '../../temporal/types';
+/**
+ * Configuration options for the {@link TimePicker} component.
+ * Uses Temporal `PlainTime` for time values — no date or timezone concerns.
+ */
+export interface TimePickerOptions {
+    /** The currently selected time. */
+    value?: Value<PlainTime | null>;
+    /** Callback invoked when a time is selected. */
+    onSelect?: (time: PlainTime) => void;
+    /** Whether to show the seconds column. @default false */
+    showSeconds?: Value<boolean>;
+    /** Whether the picker uses 12-hour format with AM/PM. When omitted, auto-detected from the current locale. */
+    use12Hour?: Value<boolean>;
+    /** Theme color for the selected highlight. @default 'primary' */
+    color?: Value<ThemeColorName>;
+    /** Visual size of the time picker. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Whether the time picker is disabled. @default false */
+    disabled?: Value<boolean>;
+    /** Step for minutes column. @default 1 */
+    minuteStep?: Value<number>;
+    /** Step for seconds column. @default 1 */
+    secondStep?: Value<number>;
+    /** Whether to show a "Now" button that sets the time to the current local time. @default false */
+    showNow?: Value<boolean>;
+}
+/**
+ * A time picker component for selecting hours, minutes, and optionally seconds.
+ *
+ * Uses Temporal `PlainTime` internally — a time-only type with no date or
+ * timezone concerns. Renders scrollable columns for hours and minutes (and
+ * optionally seconds), with support for 12-hour format with AM/PM.
+ *
+ * @param options - Configuration for the time picker
+ * @returns A time picker element with time selection capability
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { TimePicker } from '@tempots/beatui'
+ * import { Temporal } from '@js-temporal/polyfill'
+ *
+ * const time = prop<PlainTime | null>(Temporal.PlainTime.from('14:30'))
+ * TimePicker({
+ *   value: time,
+ *   onSelect: v => time.set(v),
+ * })
+ * ```
+ */
+export declare function TimePicker(options?: TimePickerOptions): Renderable;

package/dist/types/components/data/virtual-scrolling/index.d.ts

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

package/dist/types/components/data/virtual-scrolling/virtual-list.d.ts

@@ -0,0 +1,91 @@
+import { TNode, Value } from '@tempots/dom';
+/**
+ * Configuration options for the {@link VirtualList} component.
+ *
+ * A virtualized list that renders only visible items for performance with
+ * large datasets. Items outside the visible viewport are not rendered in the
+ * DOM, dramatically reducing memory usage and rendering time.
+ *
+ * @typeParam T - The type of items in the list
+ */
+export interface VirtualListOptions<T> {
+    /** The array of items to render. May be a static array or a reactive signal. */
+    items: Value<T[]>;
+    /**
+     * A function that renders a single item. Called only for visible items.
+     *
+     * @param item - The item data
+     * @param index - The item's index in the full items array
+     * @returns A TNode representing the rendered item
+     */
+    renderItem: (item: T, index: number) => TNode;
+    /**
+     * The height of each item. Can be a fixed number (pixels) for uniform-height
+     * lists, or a function that returns the height for a given index for
+     * variable-height lists.
+     *
+     * Fixed heights are more performant as they avoid cumulative height calculations.
+     */
+    itemHeight: number | ((index: number) => number);
+    /**
+     * Number of extra items to render above and below the visible viewport.
+     * Larger values reduce the chance of blank flickers during fast scrolling
+     * at the cost of rendering more items.
+     *
+     * @default 5
+     */
+    overscan?: Value<number>;
+    /**
+     * The height of the scroll container. Can be a pixel number (e.g. 400) or
+     * a CSS string (e.g. '100%', '50vh').
+     */
+    containerHeight: Value<number | string>;
+    /** Additional CSS class names to apply to the outer container element. */
+    class?: Value<string>;
+}
+/**
+ * A virtualized list component that renders only visible items for high
+ * performance with large datasets (10,000+ items).
+ *
+ * The component maintains a scroll container with a spacer element sized to
+ * the total height of all items. Only items within the visible viewport (plus
+ * an overscan buffer) are rendered in the DOM.
+ *
+ * Supports both fixed-height items (more performant) and variable-height items
+ * via a height function.
+ *
+ * @typeParam T - The type of items in the list
+ * @param options - Configuration for the virtual list
+ * @returns A scroll container with virtualized item rendering
+ *
+ * @example
+ * ```typescript
+ * // Fixed-height virtual list with 10,000 items
+ * const items = prop(Array.from({ length: 10000 }, (_, i) => ({ id: i, label: `Item ${i}` })))
+ *
+ * VirtualList({
+ *   items,
+ *   itemHeight: 48,
+ *   containerHeight: 400,
+ *   renderItem: (item, index) =>
+ *     html.div(
+ *       attr.class('flex items-center px-4 border-b'),
+ *       attr.style('height: 48px'),
+ *       `${index}: ${item.label}`
+ *     ),
+ * })
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Variable-height items
+ * VirtualList({
+ *   items: myItems,
+ *   itemHeight: index => index % 3 === 0 ? 72 : 48,
+ *   containerHeight: '100%',
+ *   overscan: 10,
+ *   renderItem: (item) => html.div(item.label),
+ * })
+ * ```
+ */
+export declare function VirtualList<T>({ items, renderItem, itemHeight, overscan: overscanOpt, containerHeight, class: className, }: VirtualListOptions<T>): TNode;

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

@@ -1,7 +1,7 @@
 import { Merge, TNode } from '@tempots/dom';
 import { InputOptions } from '../input/input-options';
 import { Controller } from '../controller';
-import { InputWrapperOptions } from '../input';
+import { FieldOptions } from '../input';
 /**
  * Creates a blur event handler that marks the controller as touched.
  *
@@ -26,7 +26,7 @@ export type BaseControlInputOptions = InputOptions<any>;
 /**
  * Options for a control that includes both input and wrapper options.
  */
-export type ControlInputOptions = Merge<BaseControlInputOptions, InputWrapperOptions>;
+export type ControlInputOptions = Merge<BaseControlInputOptions, FieldOptions>;
 /**
  * Options for connecting a controller to an input component without a wrapper.
  *
@@ -43,7 +43,7 @@ export type BaseControlOptions<T, O extends BaseControlInputOptions> = Merge<Omi
  * @template T - The controller value type
  * @template O - The input component options type
  */
-export type ControlOptions<T, O extends BaseControlInputOptions> = Merge<Omit<InputWrapperOptions, 'content'>, Merge<Omit<O, 'value'>, {
+export type ControlOptions<T, O extends BaseControlInputOptions> = Merge<Omit<FieldOptions, 'content'>, Merge<Omit<O, 'value'>, {
     controller: Controller<T>;
     triggerOn?: 'input' | 'change';
 }>>;
@@ -116,7 +116,7 @@ export declare function BaseControl<T, O extends BaseControlInputOptions>(InputC
  * })
  * ```
  */
-export declare function Control<T, O extends BaseControlInputOptions>(InputComponent: (options: O) => TNode, { id: idArg, labelFor: labelForArg, ...options }: ControlOptions<T, O>, ...children: TNode[]): import("@tempots/dom").Renderable;
+export declare function Control<T, O extends BaseControlInputOptions>(InputComponent: (options: O) => TNode, { id: idArg, labelFor: labelForArg, ...options }: ControlOptions<T, O>, ...children: TNode[]): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;
 /**
  * Connects an input component to a controller with bidirectional value transformation, without a wrapper.
  * Useful when the controller value type differs from the input component's expected value type.
@@ -176,4 +176,4 @@ export declare function BaseMappedControl<T, U, O extends BaseControlInputOption
  * })
  * ```
  */
-export declare function MappedControl<T, U, O extends BaseControlInputOptions>(InputComponent: (options: O) => TNode, { id: idArg, labelFor: labelForArg, ...options }: MappedControlOptions<T, U, O>, ...children: TNode[]): import("@tempots/dom").Renderable;
+export declare function MappedControl<T, U, O extends BaseControlInputOptions>(InputComponent: (options: O) => TNode, { id: idArg, labelFor: labelForArg, ...options }: MappedControlOptions<T, U, O>, ...children: TNode[]): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

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

@@ -1,7 +1,7 @@
 import { TNode, ElementPosition, Value, Merge } from '@tempots/dom';
 import { ArrayController } from '../controller/controller';
 import { ListInputPayload, MoveDirection, MovableDirection } from '../input/list-input';
-import { InputWrapperOptions } from '../input';
+import { FieldOptions } from '../input';
 import { ListControlsLayout } from './list-item-controls';
 /**
  * Payload provided to each list item element renderer, re-exported from {@link ListInputPayload}.
@@ -11,7 +11,7 @@ import { ListControlsLayout } from './list-item-controls';
 export type ListControllerPayload<T> = ListInputPayload<T>;
 export type { MoveDirection, MovableDirection };
 /**
- * Base configuration options for {@link BaseListControl} (without InputWrapper).
+ * Base configuration options for {@link BaseListControl} (without Field).
  *
  * @typeParam T - The type of each item in the list
  */
@@ -52,16 +52,16 @@ export type BaseListControlOptions<T> = {
     controlsLayout?: Value<ListControlsLayout>;
 };
 /**
- * Configuration options for {@link ListControl}, combining InputWrapper options with list control options.
+ * Configuration options for {@link ListControl}, combining Field options with list control options.
  *
- * Inherits all properties from {@link InputWrapperOptions} (except `content`, which is generated)
+ * Inherits all properties from {@link FieldOptions} (except `content`, which is generated)
  * and {@link BaseListControlOptions}.
  *
  * @typeParam T - The type of each item in the list
  */
-export type ListControlOptions<T> = Merge<Omit<InputWrapperOptions, 'content'>, BaseListControlOptions<T>>;
+export type ListControlOptions<T> = Merge<Omit<FieldOptions, 'content'>, BaseListControlOptions<T>>;
 /**
- * Renders a list of items with move, remove, and add controls -- without an InputWrapper.
+ * Renders a list of items with move, remove, and add controls -- without an Field.
  *
  * Each item is rendered using the `element` callback and can optionally include
  * move up/down buttons, a remove button, and an "Add" button at the bottom.
@@ -92,15 +92,15 @@ export type ListControlOptions<T> = Merge<Omit<InputWrapperOptions, 'content'>,
  */
 export declare const BaseListControl: <T>(options: BaseListControlOptions<T>) => import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;
 /**
- * Renders a list of items with move, remove, and add controls inside an InputWrapper.
+ * Renders a list of items with move, remove, and add controls inside an Field.
  *
- * Combines {@link BaseListControl} with {@link InputWrapper} to provide a complete
+ * Combines {@link BaseListControl} with {@link Field} to provide a complete
  * form field for managing a list of values, including label, description, and error display.
  *
  * @typeParam T - The type of each item in the list
  *
- * @param options - Configuration options combining InputWrapper and list control settings
- * @param children - Additional child nodes to render inside the InputWrapper
+ * @param options - Configuration options combining Field and list control settings
+ * @param children - Additional child nodes to render inside the Field
  *
  * @returns A renderable TNode representing the wrapped list control
  *
@@ -121,4 +121,4 @@ export declare const BaseListControl: <T>(options: BaseListControlOptions<T>) =>
  * })
  * ```
  */
-export declare const ListControl: <T>(options: ListControlOptions<T>, ...children: TNode[]) => import("@tempots/dom").Renderable;
+export declare const ListControl: <T>(options: ListControlOptions<T>, ...children: TNode[]) => import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

package/dist/types/components/form/fieldset/fieldset.d.ts

@@ -0,0 +1,60 @@
+import { TNode, Value } from '@tempots/dom';
+import type { ControlSize } from '../../theme';
+import type { FieldLabelLayout } from '../input/field';
+/**
+ * Configuration options for the `Fieldset` component.
+ */
+export interface FieldsetOptions {
+    /** Legend content (always visible header for the fieldset) */
+    legend?: TNode;
+    /** Description text displayed below the legend */
+    description?: TNode;
+    /** Visual variant of the fieldset container. @default 'plain' */
+    variant?: Value<'bordered' | 'plain' | 'card'>;
+    /** Whether the fieldset body can be collapsed/expanded. @default false */
+    collapsible?: Value<boolean>;
+    /** Initial collapsed state (only used when collapsible is true). @default false */
+    defaultCollapsed?: Value<boolean>;
+    /** Whether the entire fieldset (and all children) is disabled. @default false */
+    disabled?: Value<boolean>;
+    /** Label position cascaded to descendant Field components. @default 'vertical' */
+    layout?: Value<FieldLabelLayout>;
+    /** Label column width cascaded to descendant Field components. @default '7.5rem' */
+    labelWidth?: Value<string>;
+    /** Control size cascaded to descendant Field components. @default 'md' */
+    size?: Value<ControlSize>;
+    /** Gap between fields in the grid. @default 'md' */
+    gap?: Value<ControlSize>;
+    /** Number of explicit grid columns. When > 1, overrides auto-fit behaviour. @default 1 */
+    columns?: Value<number>;
+    /** Minimum field width before columns auto-collapse. @default '15rem' */
+    minFieldWidth?: Value<string>;
+    /** Reduced spacing mode cascaded to descendant Field components. @default false */
+    compact?: Value<boolean>;
+}
+/**
+ * Groups related `Field` components with a shared layout context and optional header.
+ *
+ * Fieldset wraps its children in a `FieldLayout` provider, cascading layout configuration
+ * (layout mode, label width, column count, etc.) to all descendant `Field` components.
+ * Individual fields can still override provider values locally.
+ *
+ * Supports three visual variants (`bordered`, `plain`, `card`) and optional
+ * animated collapse behaviour.
+ *
+ * @example
+ * ```ts
+ * Fieldset(
+ *   {
+ *     legend: 'Personal Information',
+ *     variant: 'bordered',
+ *     layout: 'horizontal-fixed',
+ *     labelWidth: '160px',
+ *     columns: 2,
+ *   },
+ *   Field({ label: 'First Name', content: TextInput({ ... }) }),
+ *   Field({ label: 'Last Name', content: TextInput({ ... }) }),
+ * )
+ * ```
+ */
+export declare function Fieldset({ legend, description, variant, collapsible, defaultCollapsed, disabled, layout, labelWidth, size, gap, columns, minFieldWidth, compact, }: FieldsetOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

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

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

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

@@ -1,5 +1,6 @@
 export * from './control';
 export * from './controller';
+export * from './fieldset';
 export * from './input';
 export * from './schema';
 export * from './use-form';

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

@@ -35,7 +35,7 @@ export type CheckboxInputOptions = InputOptions<boolean> & {
  * const agreed = prop(false)
  * CheckboxInput({
  *   value: agreed,
- *   onChange: agreed.set,
+ *   onChange: v => agreed.set(v),
  *   placeholder: 'I agree to the terms and conditions',
  * })
  * ```

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

@@ -31,7 +31,7 @@ export type ColorInputOptions = Omit<InputOptions<string>, 'value'> & {
  * const color = prop('#ff6600')
  * ColorInput({
  *   value: color,
- *   onChange: color.set,
+ *   onChange: v => color.set(v),
  *   placeholder: '#rrggbb',
  * })
  * ```

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

@@ -0,0 +1,12 @@
+/**
+ * Draw a full hue rainbow strip (0→360) on a canvas.
+ */
+export declare function drawHueCanvas({ ctx, width, height, }: {
+    ctx: CanvasRenderingContext2D;
+    width: number;
+    height: number;
+}): void;
+/**
+ * Draw a checkerboard pattern (used as background for alpha strips/swatches).
+ */
+export declare function drawCheckerboard(ctx: CanvasRenderingContext2D, width: number, height: number, size?: number): void;

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

@@ -0,0 +1,71 @@
+import { Renderable, Value, TNode, Signal, Prop } from '@tempots/dom';
+import { Color } from '@tempots/std';
+export interface RenderOptions {
+    canvas: HTMLCanvasElement;
+    width: number;
+    height: number;
+    ctx: CanvasRenderingContext2D;
+}
+export interface ChannelPickerOptions {
+    /** Current value. */
+    value: Value<number>;
+    /** Callback on value change. */
+    onChange?: (value: number) => void;
+    /** Callback on value input. */
+    onInput?: (value: number) => void;
+    /** Function to draw the strip background. */
+    draw: (options: RenderOptions) => void;
+    /** Dependencies that trigger a redraw. */
+    dependencies?: (Signal<any> | Prop<never>)[];
+    /** Min for the number input. */
+    min: Value<number>;
+    /** Max for the number input. */
+    max: Value<number>;
+    /** Step for the number input. */
+    step?: Value<number>;
+    unit?: TNode;
+    /** Handle color as CSS string. */
+    handleColor?: Value<string>;
+    /** Whether disabled. @default false */
+    disabled?: Value<boolean>;
+    /** Strip height. @default 14 */
+    stripHeight?: Value<number>;
+    label: Value<string>;
+}
+export declare function ChannelPicker(options: ChannelPickerOptions): Renderable;
+export interface AlphaChannelPickerOptions {
+    /** Current value. */
+    value: Value<number>;
+    /** The color to use for the strip. */
+    color: Signal<Color>;
+    /** Callback on value change. */
+    onChange?: (value: number) => void;
+    /** Callback on value input. */
+    onInput?: (value: number) => void;
+    /** Dependencies that trigger a redraw. */
+    dependencies?: (Signal<any> | Prop<never>)[];
+    /** Whether disabled. @default false */
+    disabled?: Value<boolean>;
+    /** Label for the alpha channel. @default 'Alpha' */
+    label?: Value<string>;
+}
+export declare function AlphaChannelPicker(options: AlphaChannelPickerOptions): Renderable;
+export interface ColorFieldOptions {
+    render: (options: RenderOptions) => void;
+    dependencies?: Signal<any>[];
+    handlePosition?: Signal<{
+        x: number;
+        y: number;
+    }>;
+    handleColor?: Value<string>;
+    disabled?: Value<boolean>;
+    onChange?: (value: {
+        x: number;
+        y: number;
+    }) => void;
+    onInput?: (value: {
+        x: number;
+        y: number;
+    }) => void;
+}
+export declare function ColorField(options: ColorFieldOptions): Renderable;

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

@@ -0,0 +1,20 @@
+import { Renderable, Value } from '@tempots/dom';
+export interface HexColorPickerOptions {
+    /** The current color as a hex string (e.g. '#ff0000', '#ff000080'). */
+    value: Value<string>;
+    /** Callback with the new hex string. */
+    onChange?: (value: string) => void;
+    /** Callback with the new hex string (on input). */
+    onInput?: (value: string) => void;
+    withAlpha?: Value<boolean>;
+    disabled?: Value<boolean>;
+    displayColorSwatch?: Value<boolean>;
+}
+/**
+ * Standalone hex color picker with color field, hue channel strip,
+ * hex text input, optional alpha, and color swatch preview.
+ *
+ * Accepts and emits hex strings. Internally converts to RGBA (0-1) for
+ * the color field and channel strips.
+ */
+export declare function HexColorPicker(options: HexColorPickerOptions): Renderable;

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

@@ -0,0 +1,14 @@
+import { Renderable, Value } from '@tempots/dom';
+import { type HSLA } from '@tempots/std/color';
+export interface HslColorPickerOptions {
+    value: Value<HSLA>;
+    onChange?: (value: HSLA) => void;
+    onInput?: (value: HSLA) => void;
+    withAlpha?: Value<boolean>;
+    disabled?: Value<boolean>;
+    displayColorSwatch?: Value<boolean>;
+}
+/**
+ * The HSL format input panel.
+ */
+export declare function HslColorPicker(options: HslColorPickerOptions): Renderable;

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

@@ -0,0 +1,15 @@
+import { Renderable, Value } from '@tempots/dom';
+import { type HWBA } from '@tempots/std/color';
+export interface HwbColorPickerOptions {
+    value: Value<HWBA>;
+    onChange?: (value: HWBA) => void;
+    onInput?: (value: HWBA) => void;
+    withAlpha?: Value<boolean>;
+    disabled?: Value<boolean>;
+    displayColorSwatch?: Value<boolean>;
+}
+/**
+ * Standalone HWB color picker with color field, H/W/B channel strips,
+ * optional alpha, and color swatch preview.
+ */
+export declare function HwbColorPicker(options: HwbColorPickerOptions): Renderable;

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

@@ -0,0 +1,7 @@
+export * from './canvas-draw';
+export * from './channel-picker';
+export * from './hex-color-picker';
+export * from './rgb-color-picker';
+export * from './hsl-color-picker';
+export * from './hwb-color-picker';
+export * from './oklch-color-picker';

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

@@ -0,0 +1,15 @@
+import { Renderable, Value } from '@tempots/dom';
+import { type OKLCHA } from '@tempots/std/color';
+export interface OklchColorPickerOptions {
+    value: Value<OKLCHA>;
+    onChange?: (value: OKLCHA) => void;
+    onInput?: (value: OKLCHA) => void;
+    withAlpha?: Value<boolean>;
+    disabled?: Value<boolean>;
+    displayColorSwatch?: Value<boolean>;
+}
+/**
+ * Standalone OKLCH color picker with color field, L/C/H channel strips,
+ * optional alpha, and color swatch preview.
+ */
+export declare function OklchColorPicker(options: OklchColorPickerOptions): Renderable;

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

@@ -0,0 +1,17 @@
+import { Renderable, Value } from '@tempots/dom';
+import { type RGBA } from '@tempots/std/color';
+export interface RgbColorPickerOptions {
+    value: Value<RGBA>;
+    onChange?: (value: RGBA) => void;
+    onInput?: (value: RGBA) => void;
+    withAlpha?: Value<boolean>;
+    disabled?: Value<boolean>;
+    displayColorSwatch?: Value<boolean>;
+}
+/**
+ * Standalone RGB color picker with color field, R/G/B channel strips,
+ * optional alpha, and color swatch preview.
+ *
+ * RGBA channels are 0–1 internally. Displayed as 0–100% in the inputs.
+ */
+export declare function RgbColorPicker(options: RgbColorPickerOptions): Renderable;

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

@@ -40,7 +40,7 @@ export type ColorSwatchInputOptions = InputOptions<string> & {
  * const color = prop('#3498db')
  * ColorSwatchInput({
  *   value: color,
- *   onChange: color.set,
+ *   onChange: v => color.set(v),
  *   displayValue: true,
  *   swatchSize: 40,
  * })