@webx-ui/core 0.0.1 → 0.1.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 webx-ui
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 webx-ui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/Card/Card.d.ts

@@ -4,6 +4,8 @@ declare function __VLS_template(): {
     slots: {
         header?(_: {}): any;
         extra?(_: {}): any;
+        sidebar?(_: {}): any;
+        default?(_: {}): any;
         default?(_: {}): any;
         footer?(_: {}): any;
     };
@@ -15,7 +17,7 @@ declare const __VLS_component: import('vue').DefineComponent<CardProps, {}, {},
     title: string;
     shadow: import('./types').CardShadow;
     padding: import('./types').CardPadding;
-    borderless: boolean;
+    bordered: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/Card/types.d.ts

@@ -7,6 +7,6 @@ export interface CardProps {
     shadow?: CardShadow;
     /** Inner padding of the body (and of header/footer). */
     padding?: CardPadding;
-    /** Removes the outer border, keeping only the surface colour. */
-    borderless?: boolean;
+    /** Adds an outline. Cards are borderless by default and separate by shadow alone. */
+    bordered?: boolean;
 }

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,41 @@
+import { CheckboxProps } from './types';
+type __VLS_Props = CheckboxProps;
+type __VLS_PublicProps = {
+    modelValue?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        inputRef: HTMLInputElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (checked: boolean) => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((checked: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    name: string;
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    label: string;
+    value: import('../../composables/useFormField').ChoiceValue;
+    indeterminate: boolean;
+    id: string;
+    ariaLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: HTMLInputElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as WxCheckbox } from './Checkbox';
+export type * from './types';

package/dist/components/Checkbox/types.d.ts

@@ -0,0 +1,18 @@
+import { ChoiceValue, ControlSize } from '../../composables/useFormField';
+export interface CheckboxProps {
+    /** Value contributed to a `WxCheckboxGroup`. Ignored when used standalone. */
+    value?: ChoiceValue;
+    /** Label text. Use the default slot for anything richer. */
+    label?: string;
+    /** Third visual state: neither checked nor unchecked. */
+    indeterminate?: boolean;
+    disabled?: boolean;
+    size?: ControlSize;
+    id?: string;
+    name?: string;
+    /** Accessible label used when there is no visible one. */
+    ariaLabel?: string;
+}
+export interface CheckboxEmits {
+    change: [checked: boolean];
+}

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,37 @@
+import { ChoiceValue } from '../../composables/useFormField';
+import { CheckboxGroupProps } from './types';
+type __VLS_Props = CheckboxGroupProps;
+type __VLS_PublicProps = {
+    modelValue?: ChoiceValue[];
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: ChoiceValue[]) => any;
+    "update:modelValue": (value: ChoiceValue[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: ChoiceValue[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: ChoiceValue[]) => any) | undefined;
+}>, {
+    name: string;
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    options: import('./types').CheckboxOption[];
+    inline: boolean;
+    min: number;
+    max: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/CheckboxGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as WxCheckboxGroup } from './CheckboxGroup';
+export type * from './types';

package/dist/components/CheckboxGroup/types.d.ts

@@ -0,0 +1,23 @@
+import { ChoiceValue, ControlSize } from '../../composables/useFormField';
+export interface CheckboxOption {
+    label: string;
+    value: ChoiceValue;
+    disabled?: boolean;
+}
+export interface CheckboxGroupProps {
+    /** Renders the children for you. Omit it and pass `WxCheckbox`es in the slot instead. */
+    options?: CheckboxOption[];
+    disabled?: boolean;
+    size?: ControlSize;
+    /** Shared `name` for the underlying inputs. */
+    name?: string;
+    /** Lay the boxes out in a row instead of a column. */
+    inline?: boolean;
+    /** Smallest number of checked values the user may end up with. */
+    min?: number;
+    /** Largest number of checked values the user may end up with. */
+    max?: number;
+}
+export interface CheckboxGroupEmits {
+    change: [value: ChoiceValue[]];
+}

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,25 @@
+import { ColorPickerProps } from './types';
+type __VLS_Props = ColorPickerProps;
+type __VLS_PublicProps = {
+    modelValue?: string | null;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: string | null) => any;
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: string | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    name: string;
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    id: string;
+    ariaLabel: string;
+    presets: string[];
+    clearable: boolean;
+    placeholder: string;
+    teleport: boolean;
+    readonly: boolean;
+    status: import('../..').ControlStatus;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/ColorPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as WxColorPicker } from './ColorPicker';
+export type * from './types';

package/dist/components/ColorPicker/types.d.ts

@@ -0,0 +1,21 @@
+import { ControlSize, ControlStatus } from '../../composables/useFormField';
+export interface ColorPickerProps {
+    /** Swatches offered under the picker, as hex strings. */
+    presets?: string[];
+    /** Show a button that empties the field. */
+    clearable?: boolean;
+    placeholder?: string;
+    /** Render the panel in a portal so it escapes `overflow: hidden`. */
+    teleport?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: ControlSize;
+    status?: ControlStatus;
+    id?: string;
+    name?: string;
+    /** Accessible label used when the field has no visible `<label>`. */
+    ariaLabel?: string;
+}
+export interface ColorPickerEmits {
+    change: [value: string | null];
+}

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,54 @@
+import { DatePickerModelValue, DatePickerProps } from './types';
+type __VLS_Props = DatePickerProps;
+type __VLS_PublicProps = {
+    modelValue?: DatePickerModelValue;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: any;
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: DatePickerModelValue) => any;
+    "update:modelValue": (value: DatePickerModelValue) => any;
+    open: () => any;
+    clear: () => any;
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: DatePickerModelValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: DatePickerModelValue) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    name: string;
+    type: import('./types').DatePickerType;
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    id: string;
+    ariaLabel: string;
+    clearable: boolean;
+    placeholder: string;
+    teleport: boolean | string;
+    readonly: boolean;
+    status: import('../..').ControlStatus;
+    valueFormat: string;
+    format: string;
+    minDate: string | Date;
+    maxDate: string | Date;
+    seconds: boolean;
+    minutesIncrement: number;
+    is24: boolean;
+    weekStart: number;
+    autoApply: boolean;
+    textInput: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as WxDatePicker } from './DatePicker';
+export type * from './types';

package/dist/components/DatePicker/types.d.ts

@@ -0,0 +1,47 @@
+import { ControlSize, ControlStatus } from '../../composables/useFormField';
+export type DatePickerType = 'date' | 'datetime' | 'time';
+export type DatePickerModelValue = string | Date | null;
+export interface DatePickerProps {
+    /** What the picker asks for. `WxTimePicker` and `WxDateTimePicker` are presets of this. */
+    type?: DatePickerType;
+    /**
+     * Format the value is *stored* in. Defaults to what a Laravel column expects:
+     * `yyyy-MM-dd`, `yyyy-MM-dd HH:mm:ss` or `HH:mm:ss`. Pass `'date'` to keep the
+     * model as a `Date` object instead of a string.
+     */
+    valueFormat?: string;
+    /** Format the value is *shown* in. Defaults to `dd.MM.yyyy`, plus the time part. */
+    format?: string;
+    placeholder?: string;
+    clearable?: boolean;
+    minDate?: string | Date;
+    maxDate?: string | Date;
+    /** Include seconds in the time part. */
+    seconds?: boolean;
+    /** Step of the minutes column. */
+    minutesIncrement?: number;
+    /** 24-hour clock. Off means AM/PM. */
+    is24?: boolean;
+    /** First day of the week: 0 is Sunday, 1 is Monday. */
+    weekStart?: number;
+    /** Apply the value as soon as it is picked, with no confirm button. */
+    autoApply?: boolean;
+    /** Let the value be typed as well as picked. */
+    textInput?: boolean;
+    /** Render the menu in a portal so it escapes `overflow: hidden` containers. */
+    teleport?: boolean | string;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: ControlSize;
+    status?: ControlStatus;
+    id?: string;
+    name?: string;
+    /** Accessible label used when the field has no visible `<label>`. */
+    ariaLabel?: string;
+}
+export interface DatePickerEmits {
+    change: [value: DatePickerModelValue];
+    clear: [];
+    open: [];
+    close: [];
+}

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,51 @@
+import { DateRangePickerModelValue, DateRangePickerProps } from './types';
+type __VLS_Props = DateRangePickerProps;
+type __VLS_PublicProps = {
+    modelValue?: DateRangePickerModelValue;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: any;
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: DateRangePickerModelValue) => any;
+    "update:modelValue": (value: DateRangePickerModelValue) => any;
+    open: () => any;
+    clear: () => any;
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: DateRangePickerModelValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: DateRangePickerModelValue) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    name: string;
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    id: string;
+    ariaLabel: string;
+    clearable: boolean;
+    placeholder: string;
+    teleport: boolean;
+    readonly: boolean;
+    status: import('../..').ControlStatus;
+    valueFormat: string;
+    format: string;
+    minDate: string | Date;
+    maxDate: string | Date;
+    weekStart: number;
+    autoApply: boolean;
+    textInput: boolean;
+    months: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/DateRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as WxDateRangePicker } from './DateRangePicker';
+export type * from './types';

package/dist/components/DateRangePicker/types.d.ts

@@ -0,0 +1,37 @@
+import { ControlSize, ControlStatus } from '../../composables/useFormField';
+/** `[start, end]`, or `null` while nothing is picked. */
+export type DateRangePickerModelValue = string[] | Date[] | null;
+export interface DateRangePickerProps {
+    /** Format each end is stored in. Defaults to `yyyy-MM-dd`; `'date'` keeps `Date` objects. */
+    valueFormat?: string;
+    /** Format the field shows. */
+    format?: string;
+    placeholder?: string;
+    clearable?: boolean;
+    minDate?: string | Date;
+    maxDate?: string | Date;
+    /** How many months to show side by side. Two makes picking across a boundary easy. */
+    months?: number;
+    /** First day of the week: 0 is Sunday, 1 is Monday. */
+    weekStart?: number;
+    /** Apply as soon as the second date is picked, with no confirm button. */
+    autoApply?: boolean;
+    /** Let the range be typed as well as picked. */
+    textInput?: boolean;
+    /** Render the calendar in a portal so it escapes `overflow: hidden`. */
+    teleport?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: ControlSize;
+    status?: ControlStatus;
+    id?: string;
+    name?: string;
+    /** Accessible label used when the field has no visible `<label>`. */
+    ariaLabel?: string;
+}
+export interface DateRangePickerEmits {
+    change: [value: DateRangePickerModelValue];
+    clear: [];
+    open: [];
+    close: [];
+}

package/dist/components/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,52 @@
+import { DatePickerModelValue, DatePickerProps } from '../DatePicker/types';
+/**
+ * Every prop defaults to `undefined` on purpose. Vue casts an absent boolean prop
+ * to `false`, and this preset forwards its whole prop object — without these the
+ * preset would hand `WxDatePicker` an explicit `false` for `is24`, `clearable`,
+ * `autoApply` and `teleport`, overriding that component's own defaults. Passing
+ * `undefined` lets each default apply as if the prop had never been written.
+ */
+type __VLS_Props = Omit<DatePickerProps, 'type'>;
+type __VLS_PublicProps = {
+    modelValue?: DatePickerModelValue;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: any;
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: DatePickerModelValue) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DatePickerModelValue) => any) | undefined;
+}>, {
+    name: string;
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    id: string;
+    ariaLabel: string;
+    clearable: boolean;
+    placeholder: string;
+    teleport: boolean | string;
+    readonly: boolean;
+    status: import('../..').ControlStatus;
+    valueFormat: string;
+    format: string;
+    minDate: string | Date;
+    maxDate: string | Date;
+    seconds: boolean;
+    minutesIncrement: number;
+    is24: boolean;
+    weekStart: number;
+    autoApply: boolean;
+    textInput: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/DateTimePicker/index.d.ts

@@ -0,0 +1 @@
+export { default as WxDateTimePicker } from './DateTimePicker';

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,32 @@
+import { ValidationErrors } from '../../composables/useFormField';
+import { FormProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLFormElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<FormProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    submit: (event: SubmitEvent) => any;
+    reset: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<FormProps> & Readonly<{
+    onSubmit?: ((event: SubmitEvent) => any) | undefined;
+    onReset?: ((event: Event) => any) | undefined;
+}>, {
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    errors: ValidationErrors;
+    labelPosition: "top" | "left";
+    labelWidth: string;
+    gap: "sm" | "md" | "lg";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLFormElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Form/index.d.ts

@@ -0,0 +1,2 @@
+export { default as WxForm } from './Form';
+export type * from './types';

package/dist/components/Form/types.d.ts

@@ -0,0 +1,22 @@
+import { ControlSize, ValidationErrors } from '../../composables/useFormField';
+export interface FormProps {
+    /**
+     * Server-side validation errors, keyed by field name — the shape Laravel's 422
+     * responses use. `WxFormItem` picks up the messages for its own `name`.
+     */
+    errors?: ValidationErrors;
+    /** Disables every control inside the form. */
+    disabled?: boolean;
+    /** Default size for controls that do not set their own. */
+    size?: ControlSize;
+    /** Where labels sit relative to their control. */
+    labelPosition?: 'top' | 'left';
+    /** Label column width when `labelPosition` is `left`, e.g. `"160px"`. */
+    labelWidth?: string;
+    /** Space between form items. */
+    gap?: 'sm' | 'md' | 'lg';
+}
+export interface FormEmits {
+    submit: [event: SubmitEvent];
+    reset: [event: Event];
+}

package/dist/components/FormItem/FormItem.d.ts

@@ -0,0 +1,33 @@
+import { ControlSize } from '../../composables/useFormField';
+import { FormItemProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        label?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<FormItemProps, {
+    messages: import('vue').ComputedRef<string[]>;
+    hasError: import('vue').ComputedRef<boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FormItemProps> & Readonly<{}>, {
+    name: string;
+    size: ControlSize;
+    disabled: boolean;
+    label: string;
+    error: string | string[];
+    required: boolean;
+    labelWidth: string;
+    help: string;
+    reserveErrorSpace: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/FormItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default as WxFormItem } from './FormItem';
+export type * from './types';

package/dist/components/FormItem/types.d.ts

@@ -0,0 +1,24 @@
+import { ControlSize } from '../../composables/useFormField';
+export interface FormItemProps {
+    /** Visible label. Use the `label` slot for anything richer than text. */
+    label?: string;
+    /**
+     * Field name. When the enclosing `WxForm` has `errors`, messages for this name
+     * are shown automatically.
+     */
+    name?: string;
+    /** Marks the label with an asterisk. Does not validate anything by itself. */
+    required?: boolean;
+    /** Error message(s) shown under the control; overrides the form's errors. */
+    error?: string | string[];
+    /** Hint shown under the control while there is no error. */
+    help?: string;
+    /** Disables every control inside this item. */
+    disabled?: boolean;
+    /** Size for controls inside this item. */
+    size?: ControlSize;
+    /** Label column width when the form uses `labelPosition="left"`. */
+    labelWidth?: string;
+    /** Renders the error slot area even when empty, so rows do not jump. */
+    reserveErrorSpace?: boolean;
+}