@tempots/beatui 1.0.0 → 1.1.0

package/dist/text-input-dDUEUmlC.js

@@ -0,0 +1,57 @@
+import { Fragment as C, attr as n, aria as r, Value as b, html as f, Empty as m, on as s, emitValue as c } from "@tempots/dom";
+import { I as g } from "./input-container-BvEcp7FU.js";
+function T(t, e, u) {
+  const { value: a, onChange: l, onInput: o, ...i } = t;
+  return {
+    ...i,
+    value: b.map(a, e),
+    onChange: l != null ? (p) => l(u(p)) : void 0,
+    onInput: o != null ? (p) => o(u(p)) : void 0
+  };
+}
+const h = ({
+  autocomplete: t,
+  ariaLabel: e,
+  autofocus: u,
+  classes: a,
+  disabled: l,
+  name: o,
+  placeholder: i,
+  id: p,
+  required: I,
+  tabIndex: v,
+  hasError: d
+}) => C(
+  n.autocomplete(t),
+  n.autofocus(u),
+  n.class(a?.input),
+  n.disabled(l),
+  n.name(o ?? p),
+  n.placeholder(i),
+  n.id(p),
+  r.required(I),
+  e != null ? r.label(e) : null,
+  n.tabindex(v),
+  d != null ? r.invalid(
+    d ?? !1
+  ) : null
+), V = (t) => {
+  const { value: e, onBlur: u, onChange: a, onInput: l, type: o } = t;
+  return g({
+    ...t,
+    input: f.input(
+      n.type(o ?? "text"),
+      h(t),
+      n.value(e),
+      n.class("bc-input"),
+      u != null ? s.blur(c(u)) : m,
+      a != null ? s.change(c(a)) : m,
+      l != null ? s.input(c(l)) : m
+    )
+  });
+};
+export {
+  h as C,
+  V as T,
+  T as m
+};

package/dist/types/components/data/data-table-context.d.ts

@@ -23,12 +23,13 @@ export interface DataTableContext<T, C extends string = string> {
     selectable: Value<boolean>;
     selectableSignal: Signal<boolean>;
     selectOnRowClickSignal: Signal<boolean>;
-    selectionAfter: boolean;
+    selectionAfter: Value<boolean>;
     sortable: Value<boolean>;
+    multiSort: Value<boolean>;
     size: Value<ControlSize>;
     onRowClick?: (row: T) => void;
-    filterLayout: 'header' | 'row';
-    hasFilters: boolean;
+    filterLayout: Value<'header' | 'row'>;
+    hasFilters: Value<boolean>;
     loading: Value<boolean>;
     showFooter: Value<boolean>;
     emptyContent?: TNode;

package/dist/types/components/data/data-table-types.d.ts

@@ -112,6 +112,15 @@ export interface DataTableToolbarOptions {
     /** Bulk actions available when rows are selected */
     bulkActions?: BulkAction[];
 }
+/**
+ * Options for row selection behavior.
+ */
+export interface SelectionOptions {
+    /** Position of selection checkboxes. @default 'before' */
+    position?: 'before' | 'after';
+    /** Toggle row selection when clicking anywhere on the row. @default false */
+    selectOnRowClick?: boolean;
+}
 /**
  * Configuration options for the {@link DataTable} component.
  *
@@ -125,25 +134,30 @@ export interface DataTableOptions<T, C extends string = string> {
     columns: DataColumnDef<T, C>[];
     /** Returns a unique string ID for each row */
     rowId: (row: T) => string;
-    /** Enable sorting (columns opt-in via `column.sortable`). @default false */
-    sortable?: Value<boolean>;
-    /** Allow sorting by multiple columns. @default false */
-    multiSort?: Value<boolean>;
-    /** Enable filtering (columns opt-in via `column.filter`). @default false */
-    filterable?: Value<boolean>;
     /**
-     * Where to render filter controls.
-     * - `'header'`: all filters render inline in the header row as icon triggers
-     * - `'row'`: all filters render in a dedicated row below the header
-     * @default 'header'
+     * Enable sorting. Columns opt-in via `column.sortable`.
+     * - `false` — sorting disabled (default)
+     * - `true` or `'single'` — single-column sorting
+     * - `'multi'` — multi-column sorting
+     * @default false
      */
-    filterLayout?: 'header' | 'row';
-    /** Show selection checkboxes. @default false */
-    selectable?: Value<boolean>;
-    /** Position of selection checkboxes. @default 'before' */
-    selectionPosition?: 'before' | 'after';
-    /** Toggle row selection when clicking anywhere on the row. @default false */
-    selectOnRowClick?: Value<boolean>;
+    sortable?: Value<false | true | 'single' | 'multi'>;
+    /**
+     * Enable filtering. Columns opt-in via `column.filter`.
+     * - `false` — filtering disabled (default)
+     * - `true` or `'header'` — filters render inline in column header menus
+     * - `'row'` — filters render in a dedicated row below the header
+     * @default false
+     */
+    filterable?: Value<false | true | 'header' | 'row'>;
+    /**
+     * Enable row selection with checkboxes.
+     * - `false` — selection disabled (default)
+     * - `true` — selection enabled with default options
+     * - `SelectionOptions` — selection enabled with custom options
+     * @default false
+     */
+    selectable?: Value<false | true | SelectionOptions>;
     /** Enable drag-to-reorder columns. @default false */
     reorderableColumns?: Value<boolean>;
     /** Called when column order changes via drag-and-drop */

package/dist/types/components/data/data-table.d.ts

@@ -26,9 +26,9 @@ import { DataTableOptions } from './data-table-types';
  *       ] } },
  *   ],
  *   rowId: u => u.id,
- *   sortable: true,
- *   filterable: true,
- *   selectable: true,
+ *   sortable: 'multi',
+ *   filterable: 'header',
+ *   selectable: { position: 'before', selectOnRowClick: true },
  *   pagination: { pageSize: 20 },
  *   toolbar: { bulkActions: [{ label: 'Delete', onClick: sel => deleteUsers(sel) }] },
  *   fullWidth: true,

package/dist/types/components/data/sortable-header.d.ts

@@ -20,8 +20,10 @@ export interface SortableHeaderOptions<T, C extends string = string> {
     menu?: TNode;
     /** Hide the sort icon when no sort is active. @default false */
     hideInactiveIcon?: boolean;
+    /** Whether multi-sort is enabled (shows "Hold Shift" hint). @default true */
+    multiSort?: Value<boolean>;
     /** Whether this header is draggable (for column reordering). @default false */
-    draggable?: boolean;
+    draggable?: Value<boolean>;
     /** Drag start handler */
     onDragStart?: (e: DragEvent) => void;
     /** Drag over handler */
@@ -52,4 +54,4 @@ export interface SortableHeaderOptions<T, C extends string = string> {
  * )
  * ```
  */
-export declare function SortableHeader<T, C extends string = string>({ dataSource, column, size, actions, menu, hideInactiveIcon, draggable: isDraggable, onDragStart, onDragOver, onDrop, onDragEnd, }: SortableHeaderOptions<T, C>, ...children: TNode[]): import("@tempots/dom").Renderable;
+export declare function SortableHeader<T, C extends string = string>({ dataSource, column, size, actions, menu, hideInactiveIcon, multiSort: multiSortEnabled, draggable: isDraggable, onDragStart, onDragOver, onDrop, onDragEnd, }: SortableHeaderOptions<T, C>, ...children: TNode[]): import("@tempots/dom").Renderable;

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

@@ -6,11 +6,11 @@ import { InputOptions } from './input-options';
  * Extends standard `InputOptions` for `bigint` values with stepper and range constraints.
  */
 export type BigintInputOptions = Merge<InputOptions<bigint>, {
-    /** Step value for increment/decrement buttons. If provided, stepper buttons are shown. */
+    /** Step value for increment/decrement buttons. If provided, stepper buttons are shown. @default 1n */
     step?: Value<bigint>;
-    /** Minimum allowed value. Values below this are clamped. */
+    /** Minimum allowed value. Values below this are clamped. @default 0n */
     min?: Value<bigint>;
-    /** Maximum allowed value. Values above this are clamped. */
+    /** Maximum allowed value. Values above this are clamped. @default 100n */
     max?: Value<bigint>;
 }>;
 /**

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

@@ -6,7 +6,9 @@ import { InputOptions } from './input-options';
  * Extends {@link InputOptions} for string color values with an optional size
  * property for the color swatch preview.
  */
-export type ColorInputOptions = InputOptions<string> & {
+export type ColorInputOptions = Omit<InputOptions<string>, 'value'> & {
+    /** The current color value as a CSS color string. @default '#000000' */
+    value?: Value<string>;
     /** Size in pixels of the color swatch preview (square). @default 32 */
     swatchSize?: Value<number>;
 };

package/dist/types/components/form/input/create-nullable-string-input.d.ts

@@ -12,13 +12,13 @@ export declare const nullToEmpty: (value: null | string) => string;
  * Factory function to create nullable string input components.
  * Eliminates duplication across nullable text-based inputs.
  *
- * @param BaseInput - The base input component (e.g., TextInput, NativeEmailInput, PasswordInput)
+ * @param BaseInput - The base input component (e.g., TextInput, EmailInput, PasswordInput)
  * @returns A nullable version of the input component
  *
  * @example
  * ```ts
  * export const NullableTextInput = createNullableStringInput(TextInput)
- * export const NativeNullableEmailInput = createNullableStringInput(NativeEmailInput)
+ * export const NullableEmailInput = createNullableStringInput(EmailInput)
  * ```
  */
 export declare function createNullableStringInput(BaseInput: (options: InputOptions<string>) => Renderable): (options: InputOptions<null | string>) => Renderable;

package/dist/types/components/form/input/date-time-input.d.ts

@@ -13,10 +13,10 @@ import { InputOptions } from './input-options';
  * @example
  * ```ts
  * import { prop } from '@tempots/dom'
- * import { DateTimeInput } from '@tempots/beatui'
+ * import { NativeDateTimeInput } from '@tempots/beatui'
  *
  * const appointment = prop(new Date())
- * DateTimeInput({
+ * NativeDateTimeInput({
  *   value: appointment,
  *   onChange: appointment.set,
  * })
@@ -25,7 +25,7 @@ import { InputOptions } from './input-options';
  * @example
  * ```ts
  * // With label via InputWrapper
- * DateTimeInput({
+ * NativeDateTimeInput({
  *   value: prop(new Date()),
  *   onChange: (d) => console.log('Selected:', d.toISOString()),
  *   disabled: false,
@@ -33,4 +33,4 @@ import { InputOptions } from './input-options';
  * })
  * ```
  */
-export declare const DateTimeInput: (options: InputOptions<Date>) => import("@tempots/dom").Renderable;
+export declare const NativeDateTimeInput: (options: InputOptions<Date>) => import("@tempots/dom").Renderable;

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

@@ -13,10 +13,10 @@ import { InputOptions } from './input-options';
  * @example
  * ```ts
  * import { prop } from '@tempots/dom'
- * import { NativeEmailInput } from '@tempots/beatui'
+ * import { EmailInput } from '@tempots/beatui'
  *
  * const email = prop('')
- * NativeEmailInput({
+ * EmailInput({
  *   value: email,
  *   onChange: email.set,
  * })
@@ -25,7 +25,7 @@ import { InputOptions } from './input-options';
  * @example
  * ```ts
  * // Override the default before icon
- * NativeEmailInput({
+ * EmailInput({
  *   value: prop(''),
  *   onChange: (v) => console.log('Email:', v),
  *   before: Icon({ icon: 'custom-email-icon' }),
@@ -33,4 +33,4 @@ import { InputOptions } from './input-options';
  * })
  * ```
  */
-export declare const NativeEmailInput: (options: InputOptions<string>) => import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;
+export declare const EmailInput: (options: InputOptions<string>) => import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

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

@@ -54,6 +54,8 @@ export type CommonInputOptions = {
     required?: Value<boolean>;
     /** Tab index for keyboard navigation order */
     tabIndex?: Value<number>;
+    /** Accessible label for the input (applied as aria-label) */
+    ariaLabel?: Value<string>;
     /**
      * Visual size of the control, aligned with Button sizes.
      * @default 'md'
@@ -145,4 +147,4 @@ export declare function mapInputOptions<Outer, Inner>(options: InputOptions<Oute
  * )
  * ```
  */
-export declare const CommonInputAttributes: ({ autocomplete, autofocus, classes, disabled, name, placeholder, id, required, tabIndex, hasError, }: CommonInputOptions) => import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;
+export declare const CommonInputAttributes: ({ autocomplete, ariaLabel, autofocus, classes, disabled, name, placeholder, id, required, tabIndex, hasError, }: CommonInputOptions) => import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

package/dist/types/components/form/input/nullable-bigint-input.d.ts

@@ -6,11 +6,11 @@ import { InputOptions } from './input-options';
  * Extends standard `InputOptions` for `bigint | null` values with stepper and range constraints.
  */
 export type NullableBigintInputOptions = Merge<InputOptions<bigint | null>, {
-    /** Step value for increment/decrement buttons. If provided, stepper buttons are shown. */
+    /** Step value for increment/decrement buttons. If provided, stepper buttons are shown. @default 1n */
     step?: Value<bigint>;
-    /** Minimum allowed value. Values below this are clamped. */
+    /** Minimum allowed value. Values below this are clamped. @default 0n */
     min?: Value<bigint>;
-    /** Maximum allowed value. Values above this are clamped. */
+    /** Maximum allowed value. Values above this are clamped. @default 100n */
     max?: Value<bigint>;
 }>;
 /**

package/dist/types/components/form/input/nullable-date-time-input.d.ts

@@ -12,10 +12,10 @@ import { InputOptions } from './input-options';
  *
  * @example
  * ```ts
- * NullableDateTimeInput({
+ * NativeNullableDateTimeInput({
  *   value: prop<Date | null>(new Date()),
  *   onChange: date => console.log('DateTime:', date),
  * })
  * ```
  */
-export declare const NullableDateTimeInput: (options: InputOptions<Date | null>) => import("@tempots/dom").Renderable;
+export declare const NativeNullableDateTimeInput: (options: InputOptions<Date | null>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/nullable-email-input.d.ts

@@ -1,5 +1,5 @@
 /**
- * A nullable variant of {@link NativeEmailInput} that maps between `string | null` and `string`.
+ * A nullable variant of {@link EmailInput} that maps between `string | null` and `string`.
  *
  * Empty strings are converted to `null` on change, and `null` values are displayed
  * as empty strings. Includes a reset button to clear the value back to `null`.
@@ -9,11 +9,11 @@
  *
  * @example
  * ```ts
- * NativeNullableEmailInput({
+ * NullableEmailInput({
  *   value: prop<string | null>(null),
  *   placeholder: 'Enter email or leave empty...',
  *   onChange: v => console.log('Email:', v), // null or string
  * })
  * ```
  */
-export declare const NativeNullableEmailInput: (options: import("./input-options").InputOptions<null | string>) => import("@tempots/dom").Renderable;
+export declare const NullableEmailInput: (options: import("./input-options").InputOptions<null | string>) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/nullable-plain-date-input.d.ts

@@ -28,6 +28,7 @@ export declare const NullablePlainDateInput: (options: {
     id?: import("@tempots/core").Value<string> | undefined;
     required?: import("@tempots/core").Value<boolean> | undefined;
     tabIndex?: import("@tempots/core").Value<number> | undefined;
+    ariaLabel?: import("@tempots/core").Value<string> | undefined;
     size?: import("@tempots/core").Value<import("../../theme").ControlSize> | undefined;
     value: import("@tempots/core").Value<import("@js-temporal/polyfill").Temporal.PlainDate | null>;
     before?: import("@tempots/dom").TNode;

package/dist/types/components/form/input/nullable-plain-date-time-input.d.ts

@@ -28,6 +28,7 @@ export declare const NullablePlainDateTimeInput: (options: {
     id?: import("@tempots/core").Value<string> | undefined;
     required?: import("@tempots/core").Value<boolean> | undefined;
     tabIndex?: import("@tempots/core").Value<number> | undefined;
+    ariaLabel?: import("@tempots/core").Value<string> | undefined;
     size?: import("@tempots/core").Value<import("../../theme").ControlSize> | undefined;
     value: import("@tempots/core").Value<import("@js-temporal/polyfill").Temporal.PlainDateTime | null>;
     before?: import("@tempots/dom").TNode;

package/dist/types/components/form/input/nullable-plain-time-input.d.ts

@@ -28,6 +28,7 @@ export declare const NullablePlainTimeInput: (options: {
     id?: import("@tempots/core").Value<string> | undefined;
     required?: import("@tempots/core").Value<boolean> | undefined;
     tabIndex?: import("@tempots/core").Value<number> | undefined;
+    ariaLabel?: import("@tempots/core").Value<string> | undefined;
     size?: import("@tempots/core").Value<import("../../theme").ControlSize> | undefined;
     value: import("@tempots/core").Value<import("@js-temporal/polyfill").Temporal.PlainTime | null>;
     before?: import("@tempots/dom").TNode;

package/dist/types/components/form/input/nullable-plain-year-month-input.d.ts

@@ -28,6 +28,7 @@ export declare const NullablePlainYearMonthInput: (options: {
     id?: import("@tempots/core").Value<string> | undefined;
     required?: import("@tempots/core").Value<boolean> | undefined;
     tabIndex?: import("@tempots/core").Value<number> | undefined;
+    ariaLabel?: import("@tempots/core").Value<string> | undefined;
     size?: import("@tempots/core").Value<import("../../theme").ControlSize> | undefined;
     value: import("@tempots/core").Value<import("@js-temporal/polyfill").Temporal.PlainYearMonth | null>;
     before?: import("@tempots/dom").TNode;

package/dist/types/components/form/input/plain-date-input.d.ts

@@ -27,6 +27,7 @@ export declare const PlainDateInput: (options: {
     id?: import("@tempots/core").Value<string> | undefined;
     required?: import("@tempots/core").Value<boolean> | undefined;
     tabIndex?: import("@tempots/core").Value<number> | undefined;
+    ariaLabel?: import("@tempots/core").Value<string> | undefined;
     size?: import("@tempots/core").Value<import("../../theme").ControlSize> | undefined;
     value: import("@tempots/core").Value<import("@js-temporal/polyfill").Temporal.PlainDate>;
     before?: import("@tempots/dom").TNode;

package/dist/types/components/form/input/plain-date-time-input.d.ts

@@ -27,6 +27,7 @@ export declare const PlainDateTimeInput: (options: {
     id?: import("@tempots/core").Value<string> | undefined;
     required?: import("@tempots/core").Value<boolean> | undefined;
     tabIndex?: import("@tempots/core").Value<number> | undefined;
+    ariaLabel?: import("@tempots/core").Value<string> | undefined;
     size?: import("@tempots/core").Value<import("../../theme").ControlSize> | undefined;
     value: import("@tempots/core").Value<import("@js-temporal/polyfill").Temporal.PlainDateTime>;
     before?: import("@tempots/dom").TNode;

package/dist/types/components/form/input/plain-time-input.d.ts

@@ -27,6 +27,7 @@ export declare const PlainTimeInput: (options: {
     id?: import("@tempots/core").Value<string> | undefined;
     required?: import("@tempots/core").Value<boolean> | undefined;
     tabIndex?: import("@tempots/core").Value<number> | undefined;
+    ariaLabel?: import("@tempots/core").Value<string> | undefined;
     size?: import("@tempots/core").Value<import("../../theme").ControlSize> | undefined;
     value: import("@tempots/core").Value<import("@js-temporal/polyfill").Temporal.PlainTime>;
     before?: import("@tempots/dom").TNode;

package/dist/types/components/form/input/plain-year-month-input.d.ts

@@ -27,6 +27,7 @@ export declare const PlainYearMonthInput: (options: {
     id?: import("@tempots/core").Value<string> | undefined;
     required?: import("@tempots/core").Value<boolean> | undefined;
     tabIndex?: import("@tempots/core").Value<number> | undefined;
+    ariaLabel?: import("@tempots/core").Value<string> | undefined;
     size?: import("@tempots/core").Value<import("../../theme").ControlSize> | undefined;
     value: import("@tempots/core").Value<import("@js-temporal/polyfill").Temporal.PlainYearMonth>;
     before?: import("@tempots/dom").TNode;

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

@@ -8,11 +8,20 @@ import { Merge } from '@tempots/std';
  * slider range boundaries and step increment.
  */
 export type SliderInputOptions = Merge<InputOptions<number>, {
-    /** Step increment between valid values on the slider */
+    /**
+     * Step increment between valid values on the slider.
+     * @default 1
+     */
     step?: Value<number>;
-    /** Minimum value of the slider range */
+    /**
+     * Minimum value of the slider range.
+     * @default 0
+     */
     min?: Value<number>;
-    /** Maximum value of the slider range */
+    /**
+     * Maximum value of the slider range.
+     * @default 100
+     */
     max?: Value<number>;
 }>;
 /**
@@ -61,11 +70,20 @@ export declare const SliderInput: (options: SliderInputOptions) => import("@temp
  * (or 0) when the value is null.
  */
 export type NullableSliderInputOptions = Merge<InputOptions<number | null>, {
-    /** Step increment between valid values on the slider */
+    /**
+     * Step increment between valid values on the slider.
+     * @default 1
+     */
     step?: Value<number>;
-    /** Minimum value of the slider range */
+    /**
+     * Minimum value of the slider range.
+     * @default 0
+     */
     min?: Value<number>;
-    /** Maximum value of the slider range */
+    /**
+     * Maximum value of the slider range.
+     * @default 100
+     */
     max?: Value<number>;
 }>;
 /**

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

@@ -32,6 +32,8 @@ export type SwitchOptions = {
     tabIndex?: Value<number>;
     /** Whether to add vertical padding so the switch matches the height of text inputs at the same size. @default true */
     matchInputHeight?: boolean;
+    /** Accessible label for the switch (applied as aria-label) */
+    ariaLabel?: Value<string>;
 };
 /**
  * A toggle switch component for boolean on/off states with animated thumb transition.
@@ -73,4 +75,4 @@ export type SwitchOptions = {
  * })
  * ```
  */
-export declare const Switch: ({ value, onChange, onInput, onBlur, offLabel, onLabel, disabled, size, id, color, tabIndex, matchInputHeight, }: SwitchOptions) => import("@tempots/dom").Renderable;
+export declare const Switch: ({ value, onChange, onInput, onBlur, offLabel, onLabel, disabled, size, id, color, tabIndex, matchInputHeight, ariaLabel, }: SwitchOptions) => import("@tempots/dom").Renderable;

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

@@ -6,10 +6,12 @@ import { ThemeColorName } from '../../tokens';
 export interface ConfirmationDialogOptions {
     /**
      * Dialog title displayed next to the icon.
+     * @default 'Confirm action'
      */
     title: Value<string>;
     /**
      * Descriptive body text explaining what the action does.
+     * @default 'Are you sure you want to proceed? This action cannot be undone.'
      */
     body: Value<string>;
     /**
@@ -25,13 +27,15 @@ export interface ConfirmationDialogOptions {
     /**
      * Optional list of consequences displayed as bullet points.
      */
-    consequences?: string[];
+    consequences?: Value<string[]>;
     /**
      * Custom label for the confirm button. Falls back to i18n `confirm` string.
+     * @default 'Confirm'
      */
     confirmText?: Value<string>;
     /**
      * Custom label for the cancel button. Falls back to i18n `cancel` string.
+     * @default 'Cancel'
      */
     cancelText?: Value<string>;
     /**
@@ -148,6 +152,7 @@ export declare function AlertDialog(options: AlertDialogOptions, fn: (open: () =
 export interface PromptDialogOptions {
     /**
      * Dialog title displayed in the header.
+     * @default 'Enter a value'
      */
     title: Value<string>;
     /**
@@ -156,19 +161,22 @@ export interface PromptDialogOptions {
     body?: TNode;
     /**
      * Placeholder text for the input field.
+     * @default 'Type here...'
      */
     placeholder?: Value<string>;
     /**
      * Default value pre-filled in the input field.
      * @default ''
      */
-    defaultValue?: string;
+    defaultValue?: Value<string>;
     /**
      * Custom label for the confirm button. Falls back to i18n `confirm` string.
+     * @default 'Save'
      */
     confirmText?: Value<string>;
     /**
      * Custom label for the cancel button. Falls back to i18n `cancel` string.
+     * @default 'Cancel'
      */
     cancelText?: Value<string>;
     /**

package/dist/widget-customization-DOWmUuPU.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("@tempots/dom"),k=require("./deep-merge-Bz9HHpRt.cjs"),mt=require("@tempots/std"),B=require("./input-container-Di1YvVB_.cjs"),N=require("./text-input-DL9FvpTZ.cjs"),v=require("./translations-Dbx7L7Q1.cjs"),ft=require("@tempots/ui"),Q=require("./notice-BNghd0oS.cjs"),bt=require("./session-id-B5lJMzbB.cjs"),yt=require("./utils-DmEuG3Np.cjs");function Y(e){if(typeof e!="string")return!1;const n=e.startsWith("#")?e.slice(1):e;return/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(n)}function Z(e){if(typeof e!="string")return!1;const n=/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i,s=e.match(n);if(!s)return!1;const[,a,o,r]=s,l=parseInt(a,10),i=parseInt(o,10),c=parseInt(r,10);return l>=0&&l<=255&&i>=0&&i<=255&&c>=0&&c<=255}function J(e){if(typeof e!="string")return!1;const n=/^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0|1|0?\.\d+)\s*\)$/i,s=e.match(n);if(!s)return!1;const[,a,o,r,l]=s,i=parseInt(a,10),c=parseInt(o,10),u=parseInt(r,10),p=parseFloat(l);return i>=0&&i<=255&&c>=0&&c<=255&&u>=0&&u<=255&&p>=0&&p<=1}function tt(e){if(typeof e!="string")return!1;const n=/^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/i,s=e.match(n);if(!s)return!1;const[,a,o,r]=s,l=parseInt(a,10),i=parseInt(o,10),c=parseInt(r,10);return l>=0&&l<=360&&i>=0&&i<=100&&c>=0&&c<=100}function wt(e){return Y(e)||Z(e)||J(e)||tt(e)}function et(e){if(!Y(e))return null;let n=e.startsWith("#")?e.slice(1):e;return n.length===3&&(n=n.split("").map(s=>s+s).join("")),`#${n.toLowerCase()}`}function q(e,n,s){const a=o=>{const r=Math.round(Math.max(0,Math.min(255,o))).toString(16);return r.length===1?"0"+r:r};return`#${a(e)}${a(n)}${a(s)}`}function D(e){const n=et(e);if(!n)return null;const s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);return s?{r:parseInt(s[1],16),g:parseInt(s[2],16),b:parseInt(s[3],16)}:null}function It(e,n){const s=D(e),a=D(n);if(!s||!a)return null;const o=(u,p,d)=>{const[b,g,h]=[u,p,d].map(y=>(y=y/255,y<=.03928?y/12.92:Math.pow((y+.055)/1.055,2.4)));return .2126*b+.7152*g+.0722*h},r=o(s.r,s.g,s.b),l=o(a.r,a.g,a.b),i=Math.max(r,l),c=Math.min(r,l);return(i+.05)/(c+.05)}function nt(e){if(!e)return[0,0,0,1];const s=e.trim().match(/^#?([a-fA-F0-9]{3,4}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/);if(s){const u=s[1];if(u.length===8){const p=parseInt(u.slice(0,2),16),d=parseInt(u.slice(2,4),16),b=parseInt(u.slice(4,6),16),g=parseInt(u.slice(6,8),16)/255;return[p,d,b,g]}if(u.length===6)return[parseInt(u.slice(0,2),16),parseInt(u.slice(2,4),16),parseInt(u.slice(4,6),16),1];if(u.length===4){const p=parseInt(u[0]+u[0],16),d=parseInt(u[1]+u[1],16),b=parseInt(u[2]+u[2],16),g=parseInt(u[3]+u[3],16)/255;return[p,d,b,g]}if(u.length===3){const p=parseInt(u[0]+u[0],16),d=parseInt(u[1]+u[1],16),b=parseInt(u[2]+u[2],16);return[p,d,b,1]}}const a=e.match(/^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0|1|0?\.\d+)\s*\)$/i);if(a)return[parseInt(a[1],10),parseInt(a[2],10),parseInt(a[3],10),parseFloat(a[4])];const o=e.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i);if(o)return[parseInt(o[1],10),parseInt(o[2],10),parseInt(o[3],10),1];const r=e.match(/^hsla?\(\s*([+-]?[\d.]+)(?:deg)?\s*[ ,]?\s*([\d.]+)%\s*[ ,]?\s*([\d.]+)%\s*(?:[/,]\s*(\d?(?:\.\d+)?))?\s*\)$/i);if(r){const u=parseFloat(r[1]),p=parseFloat(r[2]),d=parseFloat(r[3]),b=r[4]!=null?parseFloat(r[4]):1,[g,h,y]=G(u,p/100,d/100);return[g,h,y,b]}const l=e.match(/^hwb\(\s*([+-]?[\d.]+)(?:deg)?\s*[, ]\s*([\d.]+)%\s*[, ]\s*([\d.]+)%\s*(?:[/]\s*(\d?(?:\.\d+)?))?\s*\)$/i);if(l){const u=parseFloat(l[1]),p=parseFloat(l[2])/100,d=parseFloat(l[3])/100,b=l[4]!=null?parseFloat(l[4]):1,[g,h,y]=st(u,p,d);return[g,h,y,b]}const i=e.match(/^oklch\(\s*([+-]?[\d.]+%?)\s+([\d.]+)\s+([+-]?[\d.]+)(?:deg)?(?:\s*\/\s*(\d?(?:\.\d+)?))?\s*\)$/i);if(i){const u=i[1],p=parseFloat(i[2]),d=parseFloat(i[3]),b=i[4]!=null?parseFloat(i[4]):1,g=u.endsWith("%")?Math.max(0,Math.min(1,parseFloat(u)/100)):Math.max(0,Math.min(1,parseFloat(u))),[h,y,M]=lt(g,p,d);return[h,y,M,b]}const c=D(e);return c?[c.r,c.g,c.b,1]:[0,0,0,1]}function at(e,n,s,a){return`rgba(${Math.round(e)}, ${Math.round(n)}, ${Math.round(s)}, ${Math.max(0,Math.min(1,Math.round(a*100)/100))})`}function rt(e){let n=e+1831565813;return function(){return n=Math.imul(n^n>>>15,n|1),n^=n+Math.imul(n^n>>>7,n|61),((n^n>>>14)>>>0)/4294967296}}function G(e,n,s){e=(e%360+360)%360;const a=(1-Math.abs(2*s-1))*n,o=a*(1-Math.abs(e/60%2-1)),r=s-a/2;let l,i,c;return 0<=e&&e<60?[l,i,c]=[a,o,0]:60<=e&&e<120?[l,i,c]=[o,a,0]:120<=e&&e<180?[l,i,c]=[0,a,o]:180<=e&&e<240?[l,i,c]=[0,o,a]:240<=e&&e<300?[l,i,c]=[o,0,a]:[l,i,c]=[a,0,o],[Math.round((l+r)*255),Math.round((i+r)*255),Math.round((c+r)*255)]}function st(e,n,s){e=(e%360+360)%360;const a=n+s;a>1&&(n/=a,s/=a);const[o,r,l]=G(e,1,.5).map(d=>d/255),i=1-n-s,c=o*i+n,u=r*i+n,p=l*i+n;return[Math.round(c*255),Math.round(u*255),Math.round(p*255)]}function z(e,n,s){e/=255,n/=255,s/=255;const a=Math.max(e,n,s),o=Math.min(e,n,s);let r=0,l=0;const i=(a+o)/2,c=a-o;if(c!==0){switch(l=i>.5?c/(2-a-o):c/(a+o),a){case e:r=(n-s)/c+(n<s?6:0);break;case n:r=(s-e)/c+2;break;default:r=(e-n)/c+4}r*=60}return[Math.round(r),Math.round(l*100),Math.round(i*100)]}function ot(e,n,s){const[a]=z(e,n,s),o=e/255,r=n/255,l=s/255,i=Math.min(o,r,l),c=1-Math.max(o,r,l);return[a,Math.round(i*100),Math.round(c*100)]}function U(e){const n=e/255;return n<=.04045?n/12.92:Math.pow((n+.055)/1.055,2.4)}function L(e){const n=e<=.0031308?12.92*e:1.055*Math.pow(e,.4166666666666667)-.055;return Math.round(Math.max(0,Math.min(1,n))*255)}function lt(e,n,s){const a=s*Math.PI/180,o=Math.cos(a)*n,r=Math.sin(a)*n,l=e+.3963377774*o+.2158037573*r,i=e-.1055613458*o-.0638541728*r,c=e-.0894841775*o-1.291485548*r,u=l*l*l,p=i*i*i,d=c*c*c,b=4.0767416621*u-3.3077115913*p+.2309699292*d,g=-1.2684380046*u+2.6097574011*p-.3413193965*d,h=-.0041960863*u-.7034186147*p+1.707614701*d;return[L(b),L(g),L(h)]}function it(e,n,s){const a=U(e),o=U(n),r=U(s),l=.4122214708*a+.5363325363*o+.0514459929*r,i=.2119034982*a+.6806995451*o+.1073969566*r,c=.0883024619*a+.2817188376*o+.6299787005*r,u=Math.cbrt(l),p=Math.cbrt(i),d=Math.cbrt(c),b=.2104542553*u+.793617785*p-.0040720468*d,g=1.9779984951*u-2.428592205*p+.4505937099*d,h=.0259040371*u+.7827717662*p-.808675766*d,y=Math.sqrt(g*g+h*h);let M=Math.atan2(h,g)*180/Math.PI;return M<0&&(M+=360),[b,y,M]}function R(e,n,s,a,o,r){switch(o){case"hex":if(r){const l=c=>c.toString(16).padStart(2,"0"),i=Math.max(0,Math.min(255,Math.round(a*255)));return`#${l(e)}${l(n)}${l(s)}${l(i)}`}return q(e,n,s);case"rgb":return`rgb(${e}, ${n}, ${s})`;case"rgba":return`rgba(${e}, ${n}, ${s}, ${Math.round(a*100)/100})`;case"hsl":{const[l,i,c]=z(e,n,s);return`hsl(${l}, ${i}%, ${c}%)`}case"hsla":{const[l,i,c]=z(e,n,s);return`hsla(${l}, ${i}%, ${c}%, ${Math.round(a*100)/100})`}case"hwb":{const[l,i,c]=ot(e,n,s);return a<1?`hwb(${l} ${i}% ${c}% / ${Math.round(a*100)/100})`:`hwb(${l} ${i}% ${c}%)`}case"oklch":{const[l,i,c]=it(e,n,s),u=(Math.round(l*1e3)/1e3).toFixed(3),p=(Math.round(i*1e3)/1e3).toFixed(3),d=(Math.round(c*10)/10).toFixed(1),b=Math.round(a*100)/100;return r||a<1?`oklch(${u} ${p} ${d} / ${b})`:`oklch(${u} ${p} ${d})`}}}function E(e,n){return n?e==="rgb"?"rgba":e==="hsl"?"hsla":e:e==="rgba"?"rgb":e==="hsla"?"hsl":e}async function ct(e){return new Promise((n,s)=>{const a=new FileReader;a.readAsDataURL(e),a.onload=()=>{const o=a.result;n(o.split(",")[1])},a.onerror=o=>s(o)})}function Vt(e){return Promise.all(e.map(ct))}function xt(e){if(e.length>=4){if(e[0]===137&&e[1]===80&&e[2]===78&&e[3]===71)return"image/png";if(e[0]===255&&e[1]===216)return"image/jpeg";if(e[0]===71&&e[1]===73&&e[2]===70)return"image/gif";if(e[0]===82&&e[1]===73&&e[2]===70&&e[3]===70&&e.length>=12&&e[8]===87&&e[9]===69&&e[10]===66&&e[11]===80)return"image/webp"}try{if(new TextDecoder("utf-8").decode(e.slice(0,256)).includes("<svg"))return"image/svg+xml"}catch{}return"application/octet-stream"}function Mt(e){const n=mt.decodeBase64(e??""),s=n.length,a=new Uint8Array(s);for(let o=0;o<s;o++)a[o]=n.charCodeAt(o);return a}function ut(e){const{value:n,onChange:s,onInput:a,...o}=e,r=new Map,l=t.Value.toSignal(n).map(p=>p.map((d,b)=>{const g=r.get(d),h=Mt(d??""),y=g?.type||xt(h),M=g?.name??`file-${b}`,_=h.buffer.slice(h.byteOffset,h.byteOffset+h.byteLength),w=new Blob([_],{type:y});return new File([w],M,{type:y})})),i=p=>d=>{p&&Vt(d).then(b=>{for(const[g,h]of b.entries())r.set(h,{name:d[g].name,type:d[g].type});p(b)})},c=i(s),u=i(a);return k.FilesInput({...o,value:l,onChange:c,onInput:u})}function $t(e){const{value:n,onInput:s,onChange:a,...o}=e;return ut({...o,maxFiles:1,value:t.Value.map(n,r=>r==null?[]:[r]),onChange:r=>{a?.(r[0])},onInput:r=>{s?.(r[0])}})}function _t(e,n){const[s,a,o]=e,r=s<<16^a<<8^o,l=rt(r),i=6+Math.floor(l()*5),c=.18+l()*.06,u=[];for(let g=0;g<i;g++){const h=g/i*Math.PI*2,y=n*(1+(l()*2-1)*c),M=Math.cos(h)*y,_=Math.sin(h)*y;u.push({x:M,y:_})}const p=(u[0].x+u[i-1].x)/2,d=(u[0].y+u[i-1].y)/2;let b=`M ${p.toFixed(3)} ${d.toFixed(3)}`;for(let g=0;g<i;g++){const h=u[g],y=u[(g+1)%i],M=(h.x+y.x)/2,_=(h.y+y.y)/2;b+=` Q ${h.x.toFixed(3)} ${h.y.toFixed(3)} ${M.toFixed(3)} ${_.toFixed(3)}`}return b+=" Z",b}const Ct=e=>{const{value:n,onBlur:s,onChange:a,onInput:o,displayValue:r,swatchSize:l,withAlpha:i}=e,c={xs:20,sm:26,md:32,lg:40,xl:52},u=l!=null?t.Value.map(l,m=>Number(m)):t.Value.map(e.size??"md",m=>c[m]??32),p=t.Value.map(n,m=>nt(m??"#000000")),d=t.Value.map(p,([m,V,$])=>[m,V,$]),b=t.Value.map(p,([,,,m])=>m),g=t.prop(t.Value.get(b)??1),h=t.Value.map(i??!1,m=>m),y=t.Value.map(e.colorTextFormat??"rgb",m=>m),M=t.computedOf(d,g,y,h)(([m,V,$],T,A,F)=>R(m,V,$,T??1,E(A,F),F)),_=t.Value.map(e.colorTextFormat??"hex",m=>m),w=t.Value.map(u,m=>`${-m/2} ${-m/2} ${m} ${m}`),f=t.computedOf(d,u)((m,V)=>_t(m,V/2)),I=t.computedOf(d,g,h)(([m,V,$],T,A)=>A||T<1?at(m,V,$,T):q(m,V,$)),C=t.html.div(t.attr.class("bc-color-swatch-input__control"),t.attr.class(t.Value.map(h,m=>m?"bc-color-swatch-input__control--alpha":"")),t.attr.style(t.computedOf(u)(m=>`width:${m+2}px;height:${m+2}px`)),t.svg.svg(t.attr.class("bc-color-swatch-input__svg"),t.svgAttr.viewBox(w),t.svg.path(t.svgAttr.d(f),t.svgAttr.fill(I))),t.html.input(t.attr.type("color"),N.CommonInputAttributes(e),t.attr.value(t.Value.map(d,([m,V,$])=>q(m,V,$))),t.attr.class("bc-input bc-color-swatch-input bc-color-swatch-input__native"),s!=null?t.on.blur(s):t.Empty,a!=null?t.on.change(m=>{const V=m.target.value;if(!a)return;const{r:$,g:T,b:A}=D(V)??{r:0,g:0,b:0},F=t.Value.get(g)??1,S=E(t.Value.get(_),t.Value.get(h)),X=R($,T,A,F,S,t.Value.get(h));a(X)}):t.Empty,o!=null?t.on.input(m=>{const V=m.target.value;if(!o)return;const{r:$,g:T,b:A}=D(V)??{r:0,g:0,b:0},F=t.Value.get(g)??1,S=E(t.Value.get(_),t.Value.get(h)),X=R($,T,A,F,S,t.Value.get(h));o(X)}):t.Empty)),x=t.When(h,()=>t.html.input(t.attr.type("range"),t.attr.class("bc-color-swatch-input__alpha"),t.attr.min(0),t.attr.max(1),t.attr.step(.01),t.attr.value(t.Value.map(g,m=>String(m??1))),t.attr.disabled(e.disabled),t.on.input(m=>{const V=parseFloat(m.target.value);g.set(V);const[$,T,A]=t.Value.get(d),F=E(t.Value.get(_),t.Value.get(h)),S=R($,T,A,V,F,t.Value.get(h));o?.(S)}),t.on.change(m=>{const V=parseFloat(m.target.value);g.set(V);const[$,T,A]=t.Value.get(d),F=E(t.Value.get(_),t.Value.get(h)),S=R($,T,A,V,F,t.Value.get(h));a?.(S)}))),{swatchSize:W,displayValue:H,withAlpha:j,colorTextFormat:K,...P}=e;return B.InputContainer({baseContainer:!0,...P,growInput:!1,input:C,after:t.Fragment(t.When(r??!1,()=>t.html.span(t.attr.class("bc-color-swatch-input__rgb"),M)),x,e.after)})},pt=e=>typeof e=="string"&&e.trim()===""?null:e,dt=e=>e??"";function O(e){return n=>{const{after:s,disabled:a}=n,o=N.mapInputOptions(n,dt,pt),r=k.NullableResetAfter(n.value,a,n.onChange??n.onInput);return e({...o,after:s!=null?t.Fragment(r,s):r})}}const Tt=({startEditing:e,value:n,onChange:s,placeholder:a,disabled:o})=>{const r=t.Value.deriveProp(e??!1),l=t.prop(!1),i=t.Value.map(o??!1,c=>c);return t.html.div(t.attr.class("bc-editable-text"),t.attr.class(t.Value.map(i,c=>c?"bc-editable-text--disabled":"")),t.aria.disabled(i),t.When(r,()=>t.html.input(t.attr.placeholder(a),t.attr.value(n),t.attr.class("bc-editable-text__input"),ft.AutoSelect(),t.on.keydown(c=>{c.key==="Enter"?r.set(!1):c.key==="Escape"&&(l.set(!0),r.set(!1))}),t.on.blur(t.emitValue(c=>{if(r.set(!1),l.value){l.set(!1);return}s(c)}))),()=>t.html.span(t.on.click(()=>{t.Value.get(i)||r.set(!0)}),t.attr.class("bc-editable-text__display"),t.When(t.Value.map(n,c=>c!=null&&c.trim()!==""),()=>t.html.span(t.attr.class("bc-editable-text__text"),n),()=>t.html.span(t.attr.class("bc-editable-text__placeholder"),a)),t.When(t.Value.map(i,c=>!c),()=>t.html.button(t.attr.type("button"),t.attr.class("bc-editable-text__edit-button"),t.Use(v.BeatUII18n,c=>t.aria.label(c.$.editLabel)),t.on.click(()=>r.set(!0)),v.Icon({icon:"line-md/pencil",color:"neutral"}))))))},At=e=>{const{value:n,onBlur:s,onChange:a,onInput:o,after:r,disabled:l}=e,i=k.NullableResetAfter(n,l,a??o);return B.InputContainer({...e,input:t.input.date(N.CommonInputAttributes(e),t.attr.valueAsDate(n),t.attr.class("bc-input"),s!=null?t.on.blur(t.emitValue(s)):t.Empty,a!=null?t.on.change(t.emitValueAsNullableDate(a)):t.Empty,o!=null?t.on.input(t.emitValueAsNullableDate(o)):t.Empty),after:r!=null?t.Fragment(i,r):i})},Ft=e=>{const n=e.getFullYear(),s=e.getMonth()+1,a=e.getDate(),o=e.getHours(),r=e.getMinutes(),l=e.getSeconds();return`${n}-${s.toString().padStart(2,"0")}-${a.toString().padStart(2,"0")}T${o.toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}:${l.toString().padStart(2,"0")}`},kt=e=>{const{value:n,onBlur:s,onChange:a,onInput:o,after:r,disabled:l}=e,i=t.Value.map(n,u=>u!=null?Ft(u):null),c=k.NullableResetAfter(n,l,a??o);return B.InputContainer({...e,input:t.input["datetime-local"](N.CommonInputAttributes(e),t.attr.value(t.Value.map(i,u=>u??null)),t.attr.class("bc-input"),s!=null?t.on.blur(t.emitValue(s)):t.Empty,a!=null?t.on.change(t.emitValueAsNullableDateTime(a)):t.Empty,o!=null?t.on.input(t.emitValueAsNullableDateTime(o)):t.Empty),after:r!=null?t.Fragment(c,r):c})},Nt=O(Q.EmailInput),St=O(N.TextInput),vt=O(Q.PasswordInput),Rt=O(k.TextArea),Et=({value:e,onChange:n,onInput:s,onBlur:a,offLabel:o,onLabel:r,disabled:l=!1,size:i="md",id:c,color:u="primary",tabIndex:p=0,matchInputHeight:d=!0,ariaLabel:b})=>{const g=c??bt.sessionId("switch");function h(w,f){const I=["bc-switch",`bc-switch--size-${f}`,`bc-switch--${f}`];return d&&I.push("bc-switch--match-input"),w&&I.push("bc-switch--disabled"),I.join(" ")}function y(w){const f=w??"primary",I=new Map,C=v.backgroundValue(f,"solid","light"),x=v.backgroundValue(f,"solid","dark");return I.set("--switch-track-on-bg",C.backgroundColor),I.set("--switch-track-on-label",C.textColor),I.set("--switch-track-on-bg-dark",x.backgroundColor),I.set("--switch-track-on-label-dark",x.textColor),I.set("--switch-track-on-border-dark",v.borderColorValue(f,"dark")),Array.from(I.entries()).map(([W,H])=>`${W}: ${H}`).join("; ")}const M=()=>{t.Value.get(l)||(n?.(!t.Value.get(e)),s?.(!t.Value.get(e)))},_=w=>{t.Value.get(l)||(w.key===" "||w.key==="Enter")&&(w.preventDefault(),M())};return t.html.div(t.attr.class(t.computedOf(l??!1,i)((w,f)=>h(w??!1,f??"md"))),t.attr.style(t.computedOf(u)(w=>y(w))),t.attr.id(g),t.attr.role("switch"),t.attr.tabindex(t.computedOf(l??!1,p)((w,f)=>w?-1:f??0)),t.aria.checked(e),t.aria.disabled(l),b!=null?t.aria.label(b):null,t.on.click(M),t.on.keydown(_),a!=null?t.on.blur(a):null,t.html.div(t.attr.class("bc-switch__track"),t.attr.class(t.Value.map(e,w=>w?"bc-switch__track--on":"bc-switch__track--off")),o!=null?t.html.div(t.aria.hidden(!0),t.attr.class("bc-switch__track-label bc-switch__track-label--off"),t.attr.class(t.Value.map(e,w=>w?"bc-switch__track-label--hidden":"bc-switch__track-label--visible")),o):null,r!=null?t.html.div(t.attr.class("bc-switch__track-label bc-switch__track-label--on"),t.attr.class(t.Value.map(e,w=>w?"bc-switch__track-label--visible":"bc-switch__track-label--hidden")),r):null,t.html.div(t.attr.class("bc-switch__thumb"),t.attr.class(t.Value.map(e,w=>w?"bc-switch__thumb--on":"bc-switch__thumb--off")))))},Dt=O(k.UuidInput),Bt="line-md:star-alt-filled",Ot="line-md:star-alt",ht=e=>{const{value:n,onChange:s,onInput:a,disabled:o,max:r=5,fullColor:l="yellow",emptyColor:i="neutral",activeIcon:c=Bt,inactiveIcon:u=Ot,size:p="md",onBlur:d,rounding:b=1}=e,g=()=>{const f=t.Value.get(b);return f>0?f:1},h=f=>Math.min(Math.max(f,0),t.Value.get(r)),y=(f,I)=>{if(t.Value.get(o??!1))return;const x=f.currentTarget.getBoundingClientRect(),W=(f.clientX-x.left)/x.width,H=I-1+W,j=g(),K=Math.ceil(H/j)*j,P=h(K);s?.(P),a?.(P)},M=f=>{if(t.Value.get(o??!1))return;const I=g(),C=t.Value.get(n)??0;let x;switch(f.key){case"ArrowRight":case"ArrowUp":x=h(C+I);break;case"ArrowLeft":case"ArrowDown":x=h(C-I);break;case"Home":x=0;break;case"End":x=t.Value.get(r);break;default:return}f.preventDefault(),s?.(x),a?.(x)},_=t.Value.map(p,f=>`bc-icon--${f}`),w=({index:f,counter:I})=>t.html.span(t.attr.class("bc-rating-input__icon-container"),t.attr.class(_),t.on.click(t.emit(C=>y(C,I),{preventDefault:!0,stopPropagation:!0})),v.Icon({icon:u,size:p,color:i,tone:"soft"},t.attr.class("bc-rating-input__icon-empty")),t.html.span(t.attr.class("bc-rating-input__icon-clipper"),t.attr.class(_),t.style.width(t.Value.map(n,C=>{const x=Math.floor(C);return x>f?"100%":x<f?"0%":`${(C-f)*100}%`})),v.Icon({icon:c,size:p,color:l,tone:"soft"},t.attr.class("bc-rating-input__icon-full"))));return B.InputContainer({baseContainer:!0,growInput:!1,focusableSelector:'[role="slider"]',...e,input:t.html.div(N.CommonInputAttributes(e),t.attr.class("bc-rating-input"),t.attr.role("slider"),t.attr.tabindex(t.Value.map(o??!1,f=>f?-1:0)),t.aria.disabled(o??!1),t.aria.valuemin(0),t.aria.valuemax(t.Value.map(r,f=>f??0)),t.aria.valuenow(t.Value.map(n,f=>f??0)),t.aria.valuetext(t.computedOf(n,r)((f,I)=>{const C=f??0,x=I??0;return`${String(C)} / ${String(x)}`})),t.on.keydown(M),d!=null?t.on.blur(d):null,t.Repeat(r,w))})},Wt=e=>{const{after:n,disabled:s}=e,a=N.mapInputOptions(e,r=>r??0,r=>r),o=k.NullableResetAfter(e.value,s,e.onChange??e.onInput);return ht({...a,after:n!=null?t.Fragment(o,n):o})},Ht=e=>{const{value:n,step:s,min:a,max:o,onBlur:r,onChange:l,onInput:i}=e;return B.InputContainer({...e,focusableSelector:'input[type="range"]',input:t.html.input(t.attr.type("range"),N.CommonInputAttributes(e),t.attr.min(a),t.attr.max(o),t.attr.step(s),t.attr.valueAsNumber(n),t.attr.class("bc-input bc-slider-input"),r!=null?t.on.blur(t.emitValueAsNumber(r)):t.Empty,l!=null?t.on.change(t.emitValueAsNumber(l)):t.Empty,i!=null?t.on.input(t.emitValueAsNumber(i)):t.Empty)})},Pt=e=>{const{value:n,step:s,min:a,max:o,onBlur:r,onChange:l,onInput:i}=e,c=t.Value.map(n,p=>{if(p!=null)return p;const d=a!=null?t.Value.get(a):void 0;return typeof d=="number"?d:0}),u=k.NullableResetAfter(n,e.disabled,l??i);return B.InputContainer({...e,focusableSelector:'input[type="range"]',after:u,input:t.html.input(t.attr.type("range"),N.CommonInputAttributes(e),t.attr.min(a),t.attr.max(o),t.attr.step(s),t.attr.valueAsNumber(c),t.attr.class("bc-input bc-slider-input"),r!=null?t.on.blur(t.emitValueAsNumber(r)):t.Empty,l!=null?t.on.change(t.emitValueAsNumber(p=>{l(p)})):t.Empty,i!=null?t.on.input(t.emitValueAsNumber(p=>{i(p)})):t.Empty)})},Ut=O(k.UrlInput);class gt{widgets=new Map;typeMapping=new Map;register(n,s){if(this.widgets.set(n,s),s.supportedTypes)for(const a of s.supportedTypes)this.typeMapping.has(a)||this.typeMapping.set(a,[]),this.typeMapping.get(a).push(n),this.typeMapping.get(a).sort((o,r)=>{const l=this.widgets.get(o)?.priority||0;return(this.widgets.get(r)?.priority||0)-l})}unregister(n){const s=this.widgets.get(n);if(s&&(this.widgets.delete(n),s.supportedTypes))for(const a of s.supportedTypes){const o=this.typeMapping.get(a);if(o){const r=o.indexOf(n);r>=0&&o.splice(r,1),o.length===0&&this.typeMapping.delete(a)}}}get(n){return this.widgets.get(n)}getAll(){return new Map(this.widgets)}getForType(n){return(this.typeMapping.get(n)||[]).map(a=>this.widgets.get(a)).filter(Boolean)}findBestWidget(n){const s=yt.resolveWidget(n.definition,n.name);if(s?.widget){const o=this.widgets.get(s.widget);if(o)return{name:s.widget,registration:o,resolved:s}}const a=[];for(const[o,r]of this.widgets.entries())if(r.matcher)try{r.matcher(n)&&a.push({name:o,registration:r,priority:r.priority??0})}catch(l){console.warn(`Error in matcher for widget "${o}":`,l)}if(a.length>0){a.sort((r,l)=>l.priority-r.priority);const o=a[0];return{name:o.name,registration:o.registration,resolved:{widget:o.name,source:"heuristics"}}}if(typeof n.definition=="object"&&n.definition.type){const o=Array.isArray(n.definition.type)?n.definition.type[0]:n.definition.type,r=this.getForType(o);if(r.length>0){const l=this.typeMapping.get(o)[0];return{name:l,registration:r[0],resolved:{widget:l,source:"type-fallback"}}}}return null}}const Lt=new gt;function qt(e,n,s){return{factory:n,matcher:a=>{const r=a.definition["x:ui"];return r===e||typeof r=="object"&&r!==null&&r.widget===e},displayName:s?.displayName??e,priority:s?.priority??100,...s}}function zt(e,n,s){return{factory:n,matcher:a=>a.definition.format===e,displayName:s?.displayName??`${e} widget`,priority:s?.priority??75,...s}}function jt(e,n,s,a){return{factory:s,matcher:o=>{const r=o.definition;return r.type===e&&r.format===n},displayName:a?.displayName??`${e}:${n} widget`,priority:a?.priority??80,...a}}function Xt(e){const n=e?.logPrefix??"WIDGET_DIAG",s=e?.filterFn??(()=>!0);return{factory:()=>null,displayName:"Diagnostic Widget (never matches)",priority:-1e3,matcher:a=>{if(!s(a))return!1;const o=a.definition,r={name:a.name,path:a.path.map(String),type:o?.type,hasRegistry:a.widgetRegistry!==void 0,definition:o};return console.log(`[${n}] name="${r.name??"ROOT"}" path=[${r.path.join(", ")}] type="${r.type??"unknown"}" hasRegistry=${r.hasRegistry}`),e?.onProcess?.(r),!1}}}exports.Base64Input=$t;exports.Base64sInput=ut;exports.ColorSwatchInput=Ct;exports.EditableText=Tt;exports.NativeNullableDateInput=At;exports.NativeNullableDateTimeInput=kt;exports.NullableEmailInput=Nt;exports.NullablePasswordInput=vt;exports.NullableRatingInput=Wt;exports.NullableSliderInput=Pt;exports.NullableTextArea=Rt;exports.NullableTextInput=St;exports.NullableUrlInput=Ut;exports.NullableUuidInput=Dt;exports.RatingInput=ht;exports.SliderInput=Ht;exports.Switch=Et;exports.WidgetRegistry=gt;exports.createDiagnosticWidget=Xt;exports.emptyToNull=pt;exports.fileToBase64=ct;exports.forFormat=zt;exports.forTypeAndFormat=jt;exports.forXUI=qt;exports.formatColor=R;exports.getContrastRatio=It;exports.globalWidgetRegistry=Lt;exports.hexToRgb=D;exports.hslToRgb=G;exports.hwbToRgb=st;exports.isValidColor=wt;exports.isValidHexColor=Y;exports.isValidHslColor=tt;exports.isValidRgbColor=Z;exports.isValidRgbaColor=J;exports.linearToSrgb=L;exports.mulberry32=rt;exports.normalizeHexColor=et;exports.nullToEmpty=dt;exports.oklchToRgb=lt;exports.parseAnyColor=nt;exports.resolveEffectiveFormat=E;exports.rgbToHex=q;exports.rgbToHsl=z;exports.rgbToHwb=ot;exports.rgbToOklch=it;exports.srgbToLinear=U;exports.toRgbaString=at;