@tempots/beatui 1.3.0 → 1.5.0

package/dist/types/components/format/format-display-name.d.ts

@@ -0,0 +1,70 @@
+import { TNode, Value } from '@tempots/dom';
+/**
+ * Type of display name to resolve.
+ */
+export type DisplayNameType = 'language' | 'region' | 'script' | 'currency' | 'calendar' | 'dateTimeField';
+/**
+ * Format verbosity for display names.
+ */
+export type DisplayNameStyle = 'long' | 'short' | 'narrow';
+/**
+ * Language display style (only for type 'language').
+ */
+export type DisplayNameLanguageDisplay = 'dialect' | 'standard';
+/**
+ * Options for the {@link FormatDisplayName} component.
+ */
+export interface FormatDisplayNameOptions {
+    /** The code to look up (e.g., 'en-US', 'USD', 'Latn'). @default 'en-US' */
+    value: Value<string>;
+    /** The type of display name to resolve. @default 'language' */
+    type: Value<DisplayNameType>;
+    /** BCP 47 locale override. If omitted, uses the Locale provider. @default undefined */
+    locale?: Value<string>;
+    /** Format verbosity. @default 'long' */
+    style?: Value<DisplayNameStyle>;
+    /** Language display style (only for type 'language'). @default 'dialect' */
+    languageDisplay?: Value<DisplayNameLanguageDisplay>;
+    /** Fallback behavior when code is not found. @default 'code' */
+    fallback?: Value<'code' | 'none'>;
+}
+/**
+ * Formats a display name for a language, region, script, currency, calendar,
+ * or dateTimeField code.
+ *
+ * @param value - The code to look up
+ * @param type - The type of display name
+ * @param locale - BCP 47 locale string (uses browser default if omitted)
+ * @param options - Additional display name options
+ * @returns The formatted display name string, or the code itself if not found
+ *
+ * @example
+ * ```ts
+ * formatDisplayName('en-US', 'language', 'en')  // 'American English'
+ * formatDisplayName('USD', 'currency', 'en')    // 'US Dollar'
+ * formatDisplayName('JP', 'region', 'en')       // 'Japan'
+ * ```
+ */
+export declare function formatDisplayName(value: string, type: DisplayNameType, locale?: string, options?: {
+    style?: DisplayNameStyle;
+    languageDisplay?: DisplayNameLanguageDisplay;
+    fallback?: 'code' | 'none';
+}): string;
+/**
+ * Locale-aware display name formatting component.
+ *
+ * Renders the locale-aware name for a language, region, script, currency,
+ * calendar, or dateTimeField code as a `<span>` that automatically updates
+ * when the locale or value changes.
+ *
+ * @param options - Configuration for the display name format
+ * @returns A reactive `<span>` containing the formatted display name
+ *
+ * @example
+ * ```ts
+ * FormatDisplayName({ value: 'en-US', type: 'language' })
+ * FormatDisplayName({ value: 'USD', type: 'currency' })
+ * FormatDisplayName({ value: 'JP', type: 'region' })
+ * ```
+ */
+export declare function FormatDisplayName(options: FormatDisplayNameOptions): TNode;

package/dist/types/components/format/format-file-size.d.ts

@@ -0,0 +1,30 @@
+import { TNode, Value } from '@tempots/dom';
+/**
+ * Options for the {@link FormatFileSize} component.
+ */
+export interface FormatFileSizeComponentOptions {
+    /** Byte count to format. @default 1536000 */
+    value: Value<number | bigint>;
+    /** BCP 47 locale override. If omitted, uses the Locale provider. @default undefined */
+    locale?: Value<string>;
+    /** Unit labels. @default ['B', 'KB', 'MB', 'GB', 'TB'] */
+    units?: string[];
+    /** Decimal places for non-byte units. @default 0 */
+    decimalPlaces?: Value<number>;
+}
+/**
+ * Locale-aware file size formatting component.
+ *
+ * Wraps the existing {@link formatFileSize} utility as a reactive component
+ * that reads the locale from the Locale provider.
+ *
+ * @param options - Configuration for the file size format
+ * @returns A reactive `<span>` containing the formatted file size
+ *
+ * @example
+ * ```ts
+ * FormatFileSize({ value: 1024 })          // '1 KB'
+ * FormatFileSize({ value: 1536, decimalPlaces: 1 }) // '1.5 KB'
+ * ```
+ */
+export declare function FormatFileSize(options: FormatFileSizeComponentOptions): TNode;

package/dist/types/components/format/format-list.d.ts

@@ -0,0 +1,61 @@
+import { TNode, Value } from '@tempots/dom';
+/**
+ * List semantics type for `Intl.ListFormat`.
+ */
+export type FormatListType = 'conjunction' | 'disjunction' | 'unit';
+/**
+ * Format verbosity for list formatting.
+ */
+export type FormatListStyle = 'long' | 'short' | 'narrow';
+/**
+ * Options for `Intl.ListFormat` (polyfill for ES2020 lib).
+ */
+interface ListFormatOptions {
+    type?: FormatListType;
+    style?: FormatListStyle;
+}
+/**
+ * Options for the {@link FormatList} component.
+ */
+export interface FormatListOptions {
+    /** Array of string items to join. @default undefined */
+    value: Value<string[]>;
+    /** BCP 47 locale override. If omitted, uses the Locale provider. @default undefined */
+    locale?: Value<string>;
+    /** List semantics. @default 'conjunction' */
+    type?: Value<FormatListType>;
+    /** Format verbosity. @default 'long' */
+    style?: Value<FormatListStyle>;
+}
+/**
+ * Formats a list of strings with locale and Intl options.
+ *
+ * @param value - Array of strings to join
+ * @param locale - BCP 47 locale string (uses browser default if omitted)
+ * @param options - ListFormat options
+ * @returns The formatted list string
+ *
+ * @example
+ * ```ts
+ * formatList(['Red', 'Green', 'Blue'], 'en-US')          // 'Red, Green, and Blue'
+ * formatList(['A', 'B'], 'en-US', { type: 'disjunction' }) // 'A or B'
+ * ```
+ */
+export declare function formatList(value: string[], locale?: string, options?: ListFormatOptions): string;
+/**
+ * Locale-aware list formatting component.
+ *
+ * Renders a formatted list (e.g., "A, B, and C") as a `<span>` that
+ * automatically updates when the locale or value changes.
+ *
+ * @param options - Configuration for the list format
+ * @returns A reactive `<span>` containing the formatted list
+ *
+ * @example
+ * ```ts
+ * FormatList({ value: ['Red', 'Green', 'Blue'] })
+ * FormatList({ value: ['A', 'B'], type: 'disjunction' })
+ * ```
+ */
+export declare function FormatList(options: FormatListOptions): TNode;
+export {};

package/dist/types/components/format/format-number.d.ts

@@ -0,0 +1,88 @@
+import { TNode, Value } from '@tempots/dom';
+/**
+ * Style of number formatting.
+ */
+export type FormatNumberStyle = 'decimal' | 'currency' | 'percent' | 'unit';
+/**
+ * Currency display mode when style is 'currency'.
+ */
+export type FormatNumberCurrencyDisplay = 'symbol' | 'narrowSymbol' | 'code' | 'name';
+/**
+ * How to display the sign for the number.
+ */
+export type FormatNumberSignDisplay = 'auto' | 'never' | 'always' | 'exceptZero';
+/**
+ * Notation style for number formatting.
+ */
+export type FormatNumberNotation = 'standard' | 'scientific' | 'engineering' | 'compact';
+/**
+ * Options for the {@link FormatNumber} component.
+ */
+export interface FormatNumberOptions {
+    /** The number to format. @default 1234.56 */
+    value: Value<number>;
+    /** BCP 47 locale override. If omitted, uses the Locale provider. @default undefined */
+    locale?: Value<string>;
+    /** Formatting style. @default 'decimal' */
+    style?: Value<FormatNumberStyle>;
+    /** ISO 4217 currency code (required when style is 'currency'). @default undefined */
+    currency?: Value<string>;
+    /** How to display the currency. @default 'symbol' */
+    currencyDisplay?: Value<FormatNumberCurrencyDisplay>;
+    /** Sign display mode. @default 'auto' */
+    signDisplay?: Value<FormatNumberSignDisplay>;
+    /** Notation. @default 'standard' */
+    notation?: Value<FormatNumberNotation>;
+    /** Compact display mode (used when notation is 'compact'). @default undefined */
+    compactDisplay?: Value<'short' | 'long'>;
+    /** Unit identifier (e.g., 'kilometer', 'liter') for style 'unit'. @default undefined */
+    unit?: Value<string>;
+    /** Unit display mode. @default 'short' */
+    unitDisplay?: Value<'short' | 'long' | 'narrow'>;
+    /** Use grouping separators (e.g., thousand commas). @default true */
+    useGrouping?: Value<boolean>;
+    /** Minimum integer digits. @default undefined */
+    minimumIntegerDigits?: Value<number>;
+    /** Minimum fraction digits. @default undefined */
+    minimumFractionDigits?: Value<number>;
+    /** Maximum fraction digits. @default undefined */
+    maximumFractionDigits?: Value<number>;
+    /** Minimum significant digits. @default undefined */
+    minimumSignificantDigits?: Value<number>;
+    /** Maximum significant digits. @default undefined */
+    maximumSignificantDigits?: Value<number>;
+}
+/**
+ * Formats a number with locale and Intl options.
+ *
+ * @param value - The number to format
+ * @param locale - BCP 47 locale string (uses browser default if omitted)
+ * @param options - Intl.NumberFormat options
+ * @returns The formatted number string
+ *
+ * @example
+ * ```ts
+ * formatNumber(1234.5, 'en-US')              // '1,234.5'
+ * formatNumber(1234, 'en-US', { style: 'currency', currency: 'EUR' }) // '€1,234.00'
+ * formatNumber(0.85, 'en-US', { style: 'percent' }) // '85%'
+ * ```
+ */
+export declare function formatNumber(value: number, locale?: string, options?: Intl.NumberFormatOptions): string;
+/**
+ * Locale-aware number formatting component.
+ *
+ * Renders a formatted number as a `<span>` that automatically updates when
+ * the locale or value changes. Supports decimal, currency, percent, unit,
+ * and compact notation styles.
+ *
+ * @param options - Configuration for the number format
+ * @returns A reactive `<span>` containing the formatted number
+ *
+ * @example
+ * ```ts
+ * FormatNumber({ value: 1234.5 })
+ * FormatNumber({ value: 1234, style: 'currency', currency: 'EUR' })
+ * FormatNumber({ value: 0.85, style: 'percent' })
+ * ```
+ */
+export declare function FormatNumber(options: FormatNumberOptions): TNode;

package/dist/types/components/format/format-plural.d.ts

@@ -0,0 +1,96 @@
+import { TNode, Value } from '@tempots/dom';
+/**
+ * CLDR plural category returned by `Intl.PluralRules`.
+ */
+export type PluralCategory = 'zero' | 'one' | 'two' | 'few' | 'many' | 'other';
+/**
+ * Plural rule type: 'cardinal' for counting, 'ordinal' for ordering.
+ */
+export type PluralType = 'cardinal' | 'ordinal';
+/**
+ * A mapping from plural category to the string to display.
+ * The `other` category is required as a fallback.
+ * Strings may contain `{count}` which is replaced with the locale-formatted number.
+ */
+export type PluralMessages = Partial<Record<PluralCategory, string>> & {
+    /** Required fallback for any unmatched category. */
+    other: string;
+};
+/**
+ * Options for the {@link FormatPlural} component.
+ */
+export interface FormatPluralOptions {
+    /** The numeric value to determine plural category for. @default 3 @min 0 @max 1000 @step 1 */
+    value: Value<number>;
+    /** Mapping from plural category to display string. Supports {count} interpolation. */
+    messages: PluralMessages;
+    /** BCP 47 locale override. If omitted, uses the Locale provider. @default undefined */
+    locale?: Value<string>;
+    /** Plural rule type. @default 'cardinal' */
+    type?: Value<PluralType>;
+    /** Minimum integer digits. @default undefined */
+    minimumIntegerDigits?: Value<number>;
+    /** Minimum fraction digits. @default undefined */
+    minimumFractionDigits?: Value<number>;
+    /** Maximum fraction digits. @default undefined */
+    maximumFractionDigits?: Value<number>;
+    /** Minimum significant digits. @default undefined */
+    minimumSignificantDigits?: Value<number>;
+    /** Maximum significant digits. @default undefined */
+    maximumSignificantDigits?: Value<number>;
+}
+/**
+ * Resolves the CLDR plural category for a number.
+ *
+ * @param value - The number to categorize
+ * @param locale - BCP 47 locale string (uses browser default if omitted)
+ * @param options - Intl.PluralRules options
+ * @returns The plural category
+ *
+ * @example
+ * ```ts
+ * resolvePluralCategory(1, 'en-US')  // 'one'
+ * resolvePluralCategory(5, 'en-US')  // 'other'
+ * resolvePluralCategory(3, 'en-US', { type: 'ordinal' }) // 'few'
+ * ```
+ */
+export declare function resolvePluralCategory(value: number, locale?: string, options?: Intl.PluralRulesOptions): PluralCategory;
+/**
+ * Selects a message based on the plural category of a number and replaces
+ * `{count}` with the locale-formatted number.
+ *
+ * @param value - The number to categorize
+ * @param messages - Plural messages mapping
+ * @param locale - BCP 47 locale string (uses browser default if omitted)
+ * @param options - Intl.PluralRules options
+ * @returns The selected and interpolated message string
+ *
+ * @example
+ * ```ts
+ * formatPlural(1, { one: '{count} item', other: '{count} items' }, 'en-US')    // '1 item'
+ * formatPlural(5, { one: '{count} item', other: '{count} items' }, 'en-US')    // '5 items'
+ * formatPlural(1000, { one: '{count} item', other: '{count} items' }, 'de-DE') // '1.000 items'
+ * ```
+ */
+export declare function formatPlural(value: number, messages: PluralMessages, locale?: string, options?: Intl.PluralRulesOptions): string;
+/**
+ * Locale-aware plural formatting component.
+ *
+ * Selects a message from a plural category map based on the value and renders
+ * it as a `<span>` that automatically updates when the locale or value changes.
+ * The `{count}` placeholder in messages is replaced with the locale-formatted number.
+ *
+ * @param options - Configuration for the plural format
+ * @returns A reactive `<span>` containing the selected plural message
+ *
+ * @example
+ * ```ts
+ * FormatPlural({ value: 1, messages: { one: '{count} item', other: '{count} items' } })
+ * FormatPlural({
+ *   value: 3,
+ *   type: 'ordinal',
+ *   messages: { one: '{count}st', two: '{count}nd', few: '{count}rd', other: '{count}th' },
+ * })
+ * ```
+ */
+export declare function FormatPlural(options: FormatPluralOptions): TNode;

package/dist/types/components/format/format-relative-time.d.ts

@@ -0,0 +1,62 @@
+import { TNode, Value } from '@tempots/dom';
+/**
+ * Relative time unit for `Intl.RelativeTimeFormat`.
+ */
+export type RelativeTimeUnit = 'year' | 'quarter' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second';
+/**
+ * Numeric display style: 'always' => "1 day ago", 'auto' => "yesterday".
+ */
+export type RelativeTimeNumeric = 'always' | 'auto';
+/**
+ * Format verbosity for relative time.
+ */
+export type RelativeTimeStyle = 'long' | 'short' | 'narrow';
+/**
+ * Options for the {@link FormatRelativeTime} component.
+ */
+export interface FormatRelativeTimeOptions {
+    /** Numeric offset (e.g., -2 for "2 days ago", 3 for "in 3 hours"). @default -2 @min -100 @max 100 @step 1 */
+    value: Value<number>;
+    /** The unit for the relative time. @default 'day' */
+    unit: Value<RelativeTimeUnit>;
+    /** BCP 47 locale override. If omitted, uses the Locale provider. @default undefined */
+    locale?: Value<string>;
+    /** Numeric display. @default 'auto' */
+    numeric?: Value<RelativeTimeNumeric>;
+    /** Format verbosity. @default 'long' */
+    style?: Value<RelativeTimeStyle>;
+}
+/**
+ * Formats a relative time value with locale and Intl options.
+ *
+ * @param value - Numeric offset (negative = past, positive = future)
+ * @param unit - Time unit
+ * @param locale - BCP 47 locale string (uses browser default if omitted)
+ * @param options - Intl.RelativeTimeFormat options
+ * @returns The formatted relative time string
+ *
+ * @example
+ * ```ts
+ * formatRelativeTime(-2, 'day', 'en-US')                    // '2 days ago'
+ * formatRelativeTime(-1, 'day', 'en-US', { numeric: 'auto' }) // 'yesterday'
+ * formatRelativeTime(3, 'hour', 'en-US')                    // 'in 3 hours'
+ * ```
+ */
+export declare function formatRelativeTime(value: number, unit: RelativeTimeUnit, locale?: string, options?: Intl.RelativeTimeFormatOptions): string;
+/**
+ * Locale-aware relative time formatting component.
+ *
+ * Renders a relative time expression (e.g., "2 days ago", "in 3 hours") as a
+ * `<span>` that automatically updates when the locale, value, or unit changes.
+ *
+ * @param options - Configuration for the relative time format
+ * @returns A reactive `<span>` containing the formatted relative time
+ *
+ * @example
+ * ```ts
+ * FormatRelativeTime({ value: -2, unit: 'day' })
+ * FormatRelativeTime({ value: -1, unit: 'day', numeric: 'auto' })
+ * FormatRelativeTime({ value: 3, unit: 'hour', style: 'narrow' })
+ * ```
+ */
+export declare function FormatRelativeTime(options: FormatRelativeTimeOptions): TNode;

package/dist/types/components/format/format-time.d.ts

@@ -0,0 +1,66 @@
+import { TNode, Value } from '@tempots/dom';
+import type { DateValue } from './format-date';
+/**
+ * Preset time format styles matching `Intl.DateTimeFormat` timeStyle.
+ */
+export type TimeFormatStyle = 'full' | 'long' | 'medium' | 'short';
+/**
+ * Options for the {@link FormatTime} component.
+ */
+export interface FormatTimeOptions {
+    /** The date/time value to extract time from. @default '2026-03-17T14:30:00' */
+    value: Value<DateValue>;
+    /** BCP 47 locale override. If omitted, uses the Locale provider. @default undefined */
+    locale?: Value<string>;
+    /** Time format preset. @default 'medium' */
+    timeStyle?: Value<TimeFormatStyle>;
+    /** Time zone. @default undefined (browser default) */
+    timeZone?: Value<string>;
+    /** Whether to use 12-hour time. @default undefined (locale default) */
+    hour12?: Value<boolean>;
+    /** Hour cycle override. @default undefined */
+    hourCycle?: Value<'h11' | 'h12' | 'h23' | 'h24'>;
+    /** Hour representation (mutually exclusive with timeStyle). @default undefined */
+    hour?: Value<'numeric' | '2-digit'>;
+    /** Minute representation (mutually exclusive with timeStyle). @default undefined */
+    minute?: Value<'numeric' | '2-digit'>;
+    /** Second representation (mutually exclusive with timeStyle). @default undefined */
+    second?: Value<'numeric' | '2-digit'>;
+    /** Fractional second digits (0-3, mutually exclusive with timeStyle). @default undefined */
+    fractionalSecondDigits?: Value<0 | 1 | 2 | 3>;
+    /** Time zone name display style (mutually exclusive with timeStyle). @default undefined */
+    timeZoneName?: Value<'long' | 'short' | 'shortOffset' | 'longOffset' | 'shortGeneric' | 'longGeneric'>;
+    /** Day period display (mutually exclusive with timeStyle). @default undefined */
+    dayPeriod?: Value<'narrow' | 'short' | 'long'>;
+}
+/**
+ * Formats a time value with locale and Intl options.
+ *
+ * @param value - The date/time value to extract time from
+ * @param locale - BCP 47 locale string (uses browser default if omitted)
+ * @param options - Intl.DateTimeFormat options
+ * @returns The formatted time string
+ *
+ * @example
+ * ```ts
+ * formatTime(new Date(), 'en-US', { timeStyle: 'short' }) // '2:30 PM'
+ * formatTime(new Date(), 'de-DE', { timeStyle: 'short' }) // '14:30'
+ * ```
+ */
+export declare function formatTime(value: DateValue, locale?: string, options?: Intl.DateTimeFormatOptions): string;
+/**
+ * Locale-aware time formatting component.
+ *
+ * Renders a formatted time as a `<span>` that automatically updates when
+ * the locale or value changes.
+ *
+ * @param options - Configuration for the time format
+ * @returns A reactive `<span>` containing the formatted time
+ *
+ * @example
+ * ```ts
+ * FormatTime({ value: new Date(), timeStyle: 'short' })
+ * FormatTime({ value: plainTime, hour: 'numeric', minute: '2-digit', hour12: false })
+ * ```
+ */
+export declare function FormatTime(options: FormatTimeOptions): TNode;

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

@@ -0,0 +1,11 @@
+export * from './format-number';
+export * from './format-bigint';
+export * from './format-date';
+export * from './format-time';
+export * from './format-date-time';
+export * from './format-relative-time';
+export * from './format-list';
+export * from './format-display-name';
+export * from './format-plural';
+export { FormatFileSize } from './format-file-size';
+export type { FormatFileSizeComponentOptions } from './format-file-size';

package/dist/types/components/i18n/locale-selector.d.ts

@@ -27,7 +27,7 @@ export type LocaleSelectorOptions = {
 /**
  * A dropdown component for selecting the application locale.
  *
- * Renders a native `<select>` element wrapped in an `InputWrapper` with a language icon.
+ * Renders a native `<select>` element wrapped in a `Field` with a language icon.
  * The component reads the current locale from the `Locale` provider and optionally updates it
  * when the user makes a selection.
  *

package/dist/types/components/json-schema/controls/composition-shared.d.ts

@@ -29,6 +29,6 @@ export interface WithSelectorLayoutParams {
 /**
  * Wrap inner control with selector and layout based on context.
  * - At root: show selector + inner in a vertical Stack when showSelector is true
- * - Non-root: wrap content in InputWrapper and include selector when needed
+ * - Non-root: wrap content in Field and include selector when needed
  */
 export declare function WithSelectorLayout({ ctx, showSelector, selector, inner, }: WithSelectorLayoutParams): Renderable;

package/dist/types/components/json-schema/controls/shared-utils.d.ts

@@ -1,13 +1,13 @@
 import type { JSONSchema } from '../schema-context';
-import type { InputWrapperOptions, Controller } from '../../form';
+import type { FieldOptions, Controller } from '../../form';
 import type { Renderable } from '@tempots/dom';
 import type { ResolvedWidget } from '../widgets/utils';
 /**
  * Convert schema definition to input wrapper options
  */
-export declare function definitionToInputWrapperOptions({ ctx, }: {
+export declare function definitionToFieldOptions({ ctx, }: {
     ctx: import('../schema-context').SchemaContext;
-}): Partial<InputWrapperOptions>;
+}): Partial<FieldOptions>;
 /**
  * Create placeholder value from schema definition
  */

package/dist/types/components/json-schema/widgets/string-controls.d.ts

@@ -1,8 +1,8 @@
-import { Controller, InputWrapperOptions } from '../../form';
+import { Controller, FieldOptions } from '../../form';
 import { SchemaContext } from '../schema-context';
 import { Renderable } from '@tempots/dom';
 export declare function StringControl({ ctx, options, controller, }: {
     ctx: SchemaContext;
-    options: Partial<InputWrapperOptions>;
+    options: Partial<FieldOptions>;
     controller: Controller<string | undefined>;
 }): Renderable;

package/dist/types/components/json-schema-display/display-wrapper.d.ts

@@ -5,7 +5,7 @@ import type { Mismatch } from './mismatch';
  * Display wrapper component.
  * Renders label (from ctx.widgetLabel), required indicator, deprecated badge,
  * description, and mismatch indicators around content.
- * Analog of InputWrapper + WithSchemaIssues for display mode.
+ * Analog of Field + WithSchemaIssues for display mode.
  */
 export declare function DisplayWrapper({ ctx, mismatches, children, }: {
     ctx: SchemaContext;

package/dist/types/index.d.ts

@@ -18,6 +18,7 @@ export * from './components/beatui';
 export * from './components/button';
 export * from './components/content';
 export * from './components/data';
+export * from './components/format';
 export * from './components/form';
 export * from './components/i18n';
 export * from './components/layout';

package/dist/use-form-CP6nftVl.cjs

@@ -0,0 +1,2 @@
+"use strict";const s=require("@tempots/dom"),w=require("./translations-qefRsdGi.cjs"),P=require("./input-container-BkPcNDaZ.cjs"),B=require("./stack-dwLevGa2.cjs"),_=require("./session-id-B5lJMzbB.cjs"),p=require("@tempots/std"),j={layout:"vertical",labelWidth:"7.5rem",size:"md",gap:"md",columns:1,minFieldWidth:"15rem",compact:!1},E={mark:s.makeProviderMark("FieldLayout"),create:(i={},e)=>{let t=j;try{t=e.getProvider(E.mark).value}catch(a){if(!(a instanceof s.ProviderNotFoundError))throw a}return{value:{layout:i.layout??t.layout,labelWidth:i.labelWidth??t.labelWidth,size:i.size??t.size,gap:i.gap??t.gap,columns:i.columns??t.columns,minFieldWidth:i.minFieldWidth??t.minFieldWidth,compact:i.compact??t.compact},dispose:()=>{}}}},q=s.html.span(s.attr.class("bc-field__required")," *");function te(i,e){const t=["bc-field"];return i!=="vertical"&&t.push(`bc-field--${i}`),e&&t.push("bc-field--compact"),t.join(" ")}function se(i,e){const t=["bc-field__label-text"];return i?t.push("bc-field__label-text--error"):e?t.push("bc-field__label-text--disabled"):t.push("bc-field__label-text--default"),t.join(" ")}function ie(i,e,t){const n=[];return(i==="horizontal-fixed"||i==="horizontal-end"||i==="responsive")&&e!=null&&n.push(`--field-label-width: ${e}`),t!=null&&t>0&&n.push(`grid-column: span ${t}`),n.length>0?n.join("; "):void 0}function ne(i,e,t){const{fullWidth:n=!1,required:a,label:o,labelChildren:l,context:r,description:c,content:u,error:h,labelFor:m,hasError:g,disabled:y,span:b}=e,d=g??h!=null,C=y??!1,V=e.layout??i.layout,J=e.labelWidth??i.labelWidth,Q=e.compact??i.compact,x=_.sessionId("input-wrapper"),T=c?`${x}-description`:void 0,I=h!=null?`${x}-error`:void 0,W=s.computedOf(V)(f=>f!=="vertical"&&f!=="responsive"),X=s.computedOf(V,J,b??void 0)((f,v,ee)=>ie(f,s.Value.get(v),ee)),Z=s.computedOf(V,Q)((f,v)=>te(f,v??!1));return s.html.div(s.attr.class(Z),s.attr.class(s.Value.map(n,f=>f?"bc-field--full-width":"")),s.attr.style(X),o!=null||r!=null?s.html.div(s.attr.class("bc-field__header"),s.html.div(s.attr.class("bc-field__label-section"),s.html.label(s.attr.class("bc-field__label"),m!=null?s.attr.for(m):s.Empty,s.html.span(s.attr.class(s.computedOf(d,C)((f,v)=>se(f??!1,v??!1))),o),o!=null&&a?q:s.Empty),s.When(s.computedOf(W,c)((f,v)=>f&&v!=null),()=>s.html.div(s.attr.class("bc-field__description bc-field__description--under-label"),s.attr.id(T),c))),r!=null?B.Label(r):s.Empty,l):s.Empty,s.html.div(s.attr.class("bc-field__content"),[T,I].filter(Boolean).length>0?s.dataAttr("describedby",[T,I].filter(Boolean).join(" ")):s.Empty,a?s.dataAttr("required","true"):s.Empty,s.When(d,()=>s.dataAttr("invalid","true")),u),s.When(s.computedOf(W,c)((f,v)=>!f&&v!=null),()=>s.html.div(s.attr.class("bc-field__description"),s.attr.id(T),c)),s.When(d,()=>s.html.div(s.attr.class("bc-field__error"),s.attr.id(I),s.aria.live("polite"),s.attr.role("alert"),h)),...t)}const S=(i,...e)=>{const t={};return i.layout!==void 0&&(t.layout=i.layout),i.labelWidth!==void 0&&(t.labelWidth=i.labelWidth),i.compact!==void 0&&(t.compact=i.compact),s.Provide(E,t,()=>s.Use(E,n=>ne(n,i,e)))};function ae({size:i="sm",icon:e="line-md:close",disabled:t,roundedness:n="full",color:a="base",onClick:o,label:l},...r){return s.Use(w.BeatUII18n,c=>{const u=s.coalesce(l,c.$.closeModal);return P.Button({variant:"text",size:i,roundedness:n,disabled:t,color:a,onClick:o},s.attr.title(u),s.aria.label(u),...r,w.Icon({icon:e,size:i??"sm"}))})}const re=i=>{const{value:e,onBlur:t,onChange:n,onInput:a,placeholder:o,disabled:l,id:r,activeIcon:c,inactiveIcon:u,size:h="md"}=i,m=r??_.sessionId("checkbox"),g=`${m}-label`,y=()=>{if(s.Value.get(l??!1))return;const d=s.Value.get(e);n?.(!d),a?.(!d)},b=d=>{s.Value.get(l??!1)||(d.key===" "||d.key==="Enter")&&(d.preventDefault(),y())};return P.InputContainer({baseContainer:!0,growInput:!1,...i,input:s.html.span(s.attr.class("bc-checkbox-input"),s.html.span(s.attr.class("bc-checkbox-input__checkbox"),s.attr.class(s.Value.map(e,d=>d?"bc-checkbox-input__checkbox--checked":"bc-checkbox-input__checkbox--unchecked")),s.attr.class(s.Value.map(l??!1,d=>d?"bc-checkbox-input__checkbox--disabled":"")),s.attr.id(m),s.attr.role("checkbox"),s.attr.tabindex(s.Value.map(l??!1,d=>d?-1:0)),s.aria.checked(e),s.aria.disabled(l),o!=null?s.aria.labelledby(g):s.Empty,s.on.keydown(b),t!=null?s.on.blur(t):s.Empty,w.Icon({icon:s.computedOf(e,c,u)((d,C,V)=>d?C??"ri:checkbox-fill":V??"mdi:checkbox-blank-outline"),accessibility:"decorative",size:h})),o!=null?s.html.label(s.attr.class("bc-checkbox-input__label"),s.attr.id(g),s.attr.for(m),B.MutedLabel(o)):s.Empty)},s.on.click(y))},L=((i,e)=>()=>{i.markTouched(),e?.()}),F=(i,e)=>t=>{i.change(t),e?.(t)};function M(i,e){const{controller:t,onBlur:n,onChange:a,id:o,triggerOn:l,...r}=e;return i({id:o??t.name,disabled:t.disabled,value:t.signal,hasError:t.errorVisible,name:t.name,...r,onInput:l==="input"?F(t,a):void 0,onChange:l!=="input"?F(t,a):void 0,onBlur:L(t,n)})}function le(i,{id:e,labelFor:t,...n},...a){const o=e??n.controller.name??_.sessionId("control"),l=t??o;return S({...n,hasError:n.controller.errorVisible,error:s.TextNode(n.controller.error.map(r=>r??"")),labelFor:l,content:M(r=>i({...r,id:o}),n)},...a)}function H(i,e){const{toInput:t,fromInput:n,controller:a,...o}=e,l=a.transform(t,n);return M(i,{...o,controller:l})}function oe(i,{id:e,labelFor:t,...n},...a){const o=e??n.controller.name??_.sessionId("control");return S({...n,labelFor:t??o,content:H(i,{...n,id:o})},...a)}function ce(i){return i.split(".").map(t=>{const n=t.match(/^\[(\d+)\]$/);return n?Number(n[1]):t})}function $(i){return typeof i=="number"?`[${i}]`:`.${i}`}function z(i){if(i.length===0)return"";const[e,...t]=i;return[typeof e=="number"?`[${e}]`:e,...t.map($)].join("")}const de={valid:p.Validation.valid,invalid(i){return p.Validation.invalid({message:i})},invalidFields(i){const e={};for(const[t,n]of Object.entries(i))e[t]=typeof n=="string"?{message:n}:n;return p.Validation.invalid({dependencies:e})},fromError(i){return p.Validation.invalid(i)}};function D(i){return function(t){if(t.type==="valid")return t;let n=t.error;for(const a of i)if(n=n?.dependencies?.[a],n==null)return p.Validation.valid;return p.Validation.invalid(n)}}class k{path;change;signal;status;error;hasError;touched;errorVisible;dirty;dependencyErrors;#e={disabled:s.prop(!1),touched:s.prop(!1)};#s;#t=s.prop(void 0);parent;disabled;#i=[];disabledOrHasErrors;constructor(e,t,n,a,o,l=p.strictEqual){this.path=e,this.change=t,this.signal=n,this.status=a,this.#s=l,this.#t.set(n.value),this.error=a.map(r=>r?.type==="invalid"?r.error?.message:void 0),this.hasError=this.error.map(r=>r!=null),this.touched=this.#e.touched,o.validationMode?this.errorVisible=s.computedOf(this.hasError,this.touched,o.validationMode)((r,c,u)=>u==="eager"?!!r:!!r&&!!c):this.errorVisible=s.computedOf(this.hasError,this.touched)((r,c)=>!!r&&!!c),this.dirty=s.computedOf(this.signal,this.#t)((r,c)=>!this.#s(r,c)),this.dependencyErrors=a.map(r=>r?.type==="invalid"?r.error?.dependencies:void 0),this.parent=o,this.disabled=s.computedOf(this.#e.disabled,o.disabled)((r,c)=>r||c),this.disabledOrHasErrors=s.computedOf(this.disabled,this.hasError)((r,c)=>r||c),this.onDispose(()=>{this.#e.disabled.dispose(),this.#e.touched.dispose(),this.disabled.dispose(),this.error.dispose(),this.errorVisible.dispose(),this.dirty.dispose(),this.#t.dispose(),this.dependencyErrors.dispose(),this.disabledOrHasErrors.dispose()})}get name(){return z(this.path)}onDispose=e=>{this.#i.push(e)};dispose=()=>{for(const e of this.#i)try{e()}catch(t){console.error("Error in dispose callback:",t)}this.#i.length=0};setDisabled=e=>{this.#e.disabled.set(e)};disable=()=>this.setDisabled(!0);enable=()=>this.setDisabled(!1);markTouched=()=>{this.#e.touched.set(!0)};resetTouched=()=>{this.#e.touched.set(!1)};markPristine=()=>{this.#t.set(this.signal.value)};reset=()=>{this.change(this.#t.value)};array=(e=p.strictEqual)=>new U(this.path,this.change,this.signal,this.status,this.parent,e);object=(e=p.strictEqual)=>new N(this.path,this.change,this.signal,this.status,this.parent,e);transform=(e,t,n=[],a=p.strictEqual)=>new k([...this.path,...n],o=>this.change(t(o)),this.signal.map(e,a),this.status.map(D(n)),this.parent,a);asyncTransform=(e,t,n,a=[],o=p.strictEqual)=>new k([...this.path,...a],l=>{t(l).then(r=>this.change(r))},this.signal.mapAsync(e,n,void 0,o),this.status.map(D(a)),this.parent,o)}class N extends k{#e=new Map;#s=new Map;#t=new Map;#i=s.prop(!1);touchedDeep=this.#i;#a=new Map;#n=new Map;#l=s.prop(!1);dirtyDeep=this.#l;#c;#d;#o=()=>{let e=!1;for(const t of this.#s.values())if(t){e=!0;break}this.#i.set(this.touched.value||e)};constructor(e,t,n,a,o,l){super(e,t,n.map(c=>c??{},l),a,o,l),this.#c=this.touched.on(()=>{this.#o()}),this.#d=this.dirty.on(()=>{this.#r()});const r=this.signal.on(()=>this.#r());this.onDispose(()=>{for(const c of this.#e.values())c.dispose();this.#e.clear();for(const c of this.#t.values())c();this.#t.clear(),this.#s.clear(),this.#i.dispose();for(const c of this.#n.values())c();this.#n.clear(),this.#a.clear(),this.#l.dispose(),this.#c(),this.#d(),r()})}field=e=>{if(this.#e.has(e))return this.#e.get(e);const t=async l=>{this.change({...this.signal.value,[e]:l})},n=new k([...this.path,e],t,this.signal.map(l=>l[e]),this.status.map(D([e])),{disabled:this.disabled,validationMode:this.parent.validationMode});this.#e.set(e,n);const a=n.touched.on(l=>{this.#s.set(e,l),this.#o()});this.#t.set(e,a);const o=n.dirty.on(l=>{this.#a.set(e,l),this.#r()});return this.#n.set(e,o),n};markAllTouched=()=>{this.markTouched();const e=this.signal.value;for(const t of Object.keys(e))this.field(t).markTouched();for(const t of this.#e.values())t.markTouched()};markAllPristine=()=>{this.markPristine();const e=this.signal.value;for(const t of Object.keys(e))this.field(t).markPristine?.();for(const t of this.#e.values())t.markPristine?.()};#r=()=>{let e=!1;for(const t of this.#a.values())if(t){e=!0;break}this.#l.set(this.dirty.value||e)}}class U extends k{#e=new Array;length;#s=new Map;#t=new Map;#i=s.prop(!1);touchedDeep=this.#i;#a=new Map;#n=new Map;#l=s.prop(!1);dirtyDeep=this.#l;#c;#d;#o=()=>{let e=!1;for(const t of this.#s.values())if(t){e=!0;break}this.#i.set(this.touched.value||e)};constructor(e,t,n,a,o,l){const r=n.map(h=>h??[],l);super(e,t,r,a,o,l);const c=r.on(h=>{const m=this.#e.length-h.length;m>0&&(this.#e.splice(h.length,m).forEach((g,y)=>{const b=h.length+y;g.dispose(),this.#t.get(b)?.(),this.#t.delete(b),this.#s.delete(b),this.#n.get(b)?.(),this.#n.delete(b),this.#a.delete(b)}),this.#o(),this.#r())});this.length=r.map(h=>h.length),this.#c=this.touched.on(()=>{this.#o()}),this.#d=this.dirty.on(()=>{this.#r()});const u=this.signal.on(()=>this.#r());this.onDispose(()=>{for(const h of this.#e)h.dispose();this.length.dispose(),this.#e.length=0,c(),r.dispose();for(const h of this.#t.values())h();this.#t.clear(),this.#s.clear(),this.#i.dispose();for(const h of this.#n.values())h();this.#n.clear(),this.#a.clear(),this.#l.dispose(),this.#c(),this.#d(),u()})}item=e=>{if(this.#e[e])return this.#e[e];const t=async l=>{const r=this.signal.value.slice();r[e]=l,this.change(r)},n=new k([...this.path,e],t,this.signal.map(l=>l[e]),this.status.map(D([e])),{disabled:this.disabled,validationMode:this.parent.validationMode});this.#e[e]=n;const a=n.touched.on(l=>{this.#s.set(e,l),this.#o()});this.#t.set(e,a);const o=n.dirty.on(l=>{this.#a.set(e,l),this.#r()});return this.#n.set(e,o),n};push=(...e)=>{this.change([...this.signal.value,...e])};pop=()=>{this.splice(this.signal.value.length-1,1)};shift=()=>{this.splice(0,1)};unshift=(...e)=>{this.change([...e,...this.signal.value])};removeAt=e=>{this.splice(e,1)};splice=(e,t)=>{const n=this.signal.value.slice();n.splice(e,t),this.change(n)};move=(e,t,n=1)=>{if(n<1||e===t)return;const a=this.signal.value.slice(),o=a.splice(e,n);a.splice(t,0,...o),this.change(a)};markAllTouched=()=>{this.markTouched();const e=this.signal.value.length;for(let t=0;t<e;t++)this.item(t).markTouched()};markAllPristine=()=>{this.markPristine();const e=this.signal.value.length;for(let t=0;t<e;t++)this.item(t).markPristine?.()};#r=()=>{let e=!1;for(const t of this.#a.values())if(t){e=!0;break}this.#l.set(this.dirty.value||e)}}function R(i){function e(t){return typeof t=="number"?t:t.toString()}return i.map(t=>typeof t=="object"&&t.key!=null?e(t.key):e(t))}function Y(i){const e=i.filter(a=>a.path==null||a.path.length===0).map(a=>a.message),t=i.filter(a=>a.path!=null&&a.path.length>0).reduce((a,o)=>{const l=R(o.path),r=l.pop();let c=a;for(const u of l)c.dependencies==null&&(c.dependencies={}),c.dependencies[u]==null&&(c.dependencies[u]={}),c=c.dependencies[u];return c.dependencies==null&&(c.dependencies={}),c.dependencies[r]={message:o.message},a},{}),n=e.join(`
+`);return{...t,message:n!=""?n:void 0}}function K({initialValue:i,onChange:e,validate:t,equals:n,validationMode:a,validateDebounceMs:o}){const l=s.Value.deriveProp(i),r=s.prop(p.Validation.valid),c=s.prop(!1),u=s.prop(a??"onTouched"),h=d=>{r.set(d)};let m;const g=async d=>{if(t!=null){const C=await t(d);h(C)}},y=async d=>{l.set(d),e?.(d);const C=u.value;if(t!=null){if(C==="onSubmit")return;const V=o??0;V>0?(m&&clearTimeout(m),m=setTimeout(()=>{g(d)},V)):await g(d)}},b=new k([],y,l,r,{disabled:c,validationMode:u},n??p.strictEqual);return b.onDispose(()=>{c.dispose(),l.dispose(),r.dispose(),u.dispose(),m&&clearTimeout(m)}),{controller:b,setStatus:h}}function A(i){return s.Fragment(s.attr.disabled(i.disabled),s.attr.name(i.name))}function he(i,{triggerOn:e="change"}={}){return s.Fragment(A(i),s.attr.value(i.signal),(e==="input"?s.on.input:s.on.change)(s.emitValue(i.change)))}function ue(i,{triggerOn:e="change"}={}){return s.Fragment(A(i),s.attr.valueAsNumber(i.signal),(e==="input"?s.on.input:s.on.change)(s.emitValueAsNumber(i.change)))}function O(i){return i.issues!=null?p.Validation.invalid(Y(i.issues)):p.Validation.valid}async function pe({task:i,errorMessage:e,errorPath:t=["root"],validation:n}){try{const a=await i();return n!=null?n(a):p.Validation.valid}catch(a){const o=e??(a instanceof Error?a.message:"Operation failed");return t.length===1&&t[0]==="root"?p.Validation.invalid({message:o}):p.Validation.invalid({dependencies:G(t,o)})}}function G(i,e){if(i.length===1)return{[i[0]]:{message:e}};const[t,...n]=i;return{[t]:{dependencies:G(n,e)}}}function me({initialValue:i={},schema:e,onSubmit:t=async()=>p.Validation.valid,validationMode:n,validateDebounceMs:a}){const{controller:o,setStatus:l}=K({initialValue:i,validationMode:n??"onTouched",validateDebounceMs:a,validate:(n??"onTouched")==="onSubmit"||e==null?void 0:async h=>O(await e["~standard"].validate(h))}),r=s.prop(!1),c=o.object();return c.onDispose(()=>r.dispose()),{controller:c,setStatus:l,submit:async h=>{if(r.set(!0),h?.preventDefault(),c.markAllTouched(),e!=null){const g=c.signal.value,y=O(await e["~standard"].validate(g));if(l(y),y.type==="invalid"){r.set(!1);return}}const m=await t(c.signal.value);r.set(!1),m.type==="invalid"&&l(m)},submitting:r}}exports.ArrayController=U;exports.BaseControl=M;exports.BaseMappedControl=H;exports.CheckboxInput=re;exports.CloseButton=ae;exports.Control=le;exports.Controller=k;exports.ControllerValidation=de;exports.FIELD_LAYOUT_DEFAULTS=j;exports.Field=S;exports.FieldLayout=E;exports.MappedControl=oe;exports.ObjectController=N;exports.RequiredSymbol=q;exports.connectCommonAttributes=A;exports.connectNumberInput=ue;exports.connectStringInput=he;exports.convertStandardSchemaIssues=Y;exports.convertStandardSchemaPathToPath=R;exports.makeMapValidation=D;exports.makeOnBlurHandler=L;exports.makeOnChangeHandler=F;exports.parsePath=ce;exports.pathToString=z;exports.standardSchemaResultToValidation=O;exports.taskToValidation=pe;exports.useController=K;exports.useForm=me;exports.wrapSegment=$;