@bridge-ui/vue 0.0.0

package/dist/Components/Checkbox/composables/useCheckbox.d.ts

@@ -0,0 +1,279 @@
+import { MaybeRefOrGetter } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { CheckboxOwnProps } from '../checkbox.types';
+type CheckboxLibDefaults = LibDefaultsShape<CheckboxOwnProps, "size" | "color" | "rounded">;
+type CheckboxMerged = MergeLibDefaults<CheckboxOwnProps, CheckboxLibDefaults>;
+export declare function useCheckbox(props: MaybeRefOrGetter<CheckboxOwnProps>, libDefaults: CheckboxLibDefaults, checked: MaybeRefOrGetter<boolean | undefined>): {
+    merged: import('vue').ComputedRef<CheckboxMerged>;
+    iconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').InputHTMLAttributes | undefined, {}>>;
+    inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    fieldBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+    inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {
+        type: string;
+        id: string;
+        disabled: boolean;
+        readonly: boolean;
+        "aria-describedby": string | undefined;
+        required: true | undefined;
+        "aria-invalid": true | undefined;
+        accept?: string | undefined;
+        alt?: string | undefined;
+        autocomplete?: import('vue').InputAutoCompleteAttribute | undefined;
+        autofocus?: (boolean | "true" | "false") | undefined;
+        capture?: boolean | "user" | "environment" | undefined;
+        checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
+        crossorigin?: string | undefined;
+        form?: string | undefined;
+        formaction?: string | undefined;
+        formenctype?: string | undefined;
+        formmethod?: string | undefined;
+        formnovalidate?: (boolean | "true" | "false") | undefined;
+        formtarget?: string | undefined;
+        height?: (string | number) | undefined;
+        indeterminate?: boolean | undefined;
+        list?: string | undefined;
+        max?: (string | number) | undefined;
+        maxlength?: (string | number) | undefined;
+        min?: (string | number) | undefined;
+        minlength?: (string | number) | undefined;
+        multiple?: (boolean | "true" | "false") | undefined;
+        name?: string | undefined;
+        pattern?: string | undefined;
+        placeholder?: string | undefined;
+        size?: (string | number) | undefined;
+        src?: string | undefined;
+        step?: (string | number) | undefined;
+        value?: any;
+        width?: (string | number) | undefined;
+        onCancel?: ((payload: Event) => void) | undefined;
+        innerHTML?: string | undefined;
+        class?: import('vue').ClassValue | undefined;
+        style?: import('vue').StyleValue | undefined;
+        accesskey?: string | undefined;
+        contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextmenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        enterKeyHint?: import('vue').HTMLAttributes["enterkeyhint"];
+        hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
+        inert?: (boolean | "true" | "false") | undefined;
+        lang?: string | undefined;
+        spellcheck?: (boolean | "true" | "false") | undefined;
+        tabindex?: (string | number) | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radiogroup?: string | undefined;
+        role?: string | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autocapitalize?: string | undefined;
+        autocorrect?: string | undefined;
+        autosave?: string | undefined;
+        color?: string | undefined;
+        itemprop?: string | undefined;
+        itemscope?: (boolean | "true" | "false") | undefined;
+        itemtype?: string | undefined;
+        itemid?: string | undefined;
+        itemref?: string | undefined;
+        results?: (string | number) | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        exportparts?: string;
+        part?: string;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
+        'aria-busy'?: (boolean | "true" | "false") | undefined;
+        'aria-checked'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-colcount'?: (string | number) | undefined;
+        'aria-colindex'?: (string | number) | undefined;
+        'aria-colspan'?: (string | number) | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: (boolean | "true" | "false") | "page" | "step" | "location" | "date" | "time" | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: (boolean | "true" | "false") | undefined;
+        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+        'aria-haspopup'?: (boolean | "true" | "false") | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: (string | number) | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: (boolean | "true" | "false") | undefined;
+        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: (string | number) | undefined;
+        'aria-pressed'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: (string | number) | undefined;
+        'aria-rowindex'?: (string | number) | undefined;
+        'aria-rowspan'?: (string | number) | undefined;
+        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-setsize'?: (string | number) | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: (string | number) | undefined;
+        'aria-valuemin'?: (string | number) | undefined;
+        'aria-valuenow'?: (string | number) | undefined;
+        'aria-valuetext'?: string | undefined;
+        onCopy?: ((payload: ClipboardEvent) => void) | undefined;
+        onCut?: ((payload: ClipboardEvent) => void) | undefined;
+        onPaste?: ((payload: ClipboardEvent) => void) | undefined;
+        onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
+        onDrag?: ((payload: DragEvent) => void) | undefined;
+        onDragend?: ((payload: DragEvent) => void) | undefined;
+        onDragenter?: ((payload: DragEvent) => void) | undefined;
+        onDragexit?: ((payload: DragEvent) => void) | undefined;
+        onDragleave?: ((payload: DragEvent) => void) | undefined;
+        onDragover?: ((payload: DragEvent) => void) | undefined;
+        onDragstart?: ((payload: DragEvent) => void) | undefined;
+        onDrop?: ((payload: DragEvent) => void) | undefined;
+        onFocus?: ((payload: FocusEvent) => void) | undefined;
+        onFocusin?: ((payload: FocusEvent) => void) | undefined;
+        onFocusout?: ((payload: FocusEvent) => void) | undefined;
+        onBlur?: ((payload: FocusEvent) => void) | undefined;
+        onChange?: ((payload: Event) => void) | undefined;
+        onBeforeinput?: ((payload: InputEvent) => void) | undefined;
+        onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+        onInput?: ((payload: InputEvent) => void) | undefined;
+        onReset?: ((payload: Event) => void) | undefined;
+        onSubmit?: ((payload: SubmitEvent) => void) | undefined;
+        onInvalid?: ((payload: Event) => void) | undefined;
+        onFullscreenchange?: ((payload: Event) => void) | undefined;
+        onFullscreenerror?: ((payload: Event) => void) | undefined;
+        onLoad?: ((payload: Event) => void) | undefined;
+        onError?: ((payload: Event) => void) | undefined;
+        onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
+        onDblclick?: ((payload: MouseEvent) => void) | undefined;
+        onMousedown?: ((payload: MouseEvent) => void) | undefined;
+        onMouseenter?: ((payload: MouseEvent) => void) | undefined;
+        onMouseleave?: ((payload: MouseEvent) => void) | undefined;
+        onMousemove?: ((payload: MouseEvent) => void) | undefined;
+        onMouseout?: ((payload: MouseEvent) => void) | undefined;
+        onMouseover?: ((payload: MouseEvent) => void) | undefined;
+        onMouseup?: ((payload: MouseEvent) => void) | undefined;
+        onAbort?: ((payload: UIEvent) => void) | undefined;
+        onCanplay?: ((payload: Event) => void) | undefined;
+        onCanplaythrough?: ((payload: Event) => void) | undefined;
+        onDurationchange?: ((payload: Event) => void) | undefined;
+        onEmptied?: ((payload: Event) => void) | undefined;
+        onEncrypted?: ((payload: MediaEncryptedEvent) => void) | undefined;
+        onEnded?: ((payload: Event) => void) | undefined;
+        onLoadeddata?: ((payload: Event) => void) | undefined;
+        onLoadedmetadata?: ((payload: Event) => void) | undefined;
+        onLoadstart?: ((payload: Event) => void) | undefined;
+        onPause?: ((payload: Event) => void) | undefined;
+        onPlay?: ((payload: Event) => void) | undefined;
+        onPlaying?: ((payload: Event) => void) | undefined;
+        onProgress?: ((payload: ProgressEvent<EventTarget>) => void) | undefined;
+        onRatechange?: ((payload: Event) => void) | undefined;
+        onSeeked?: ((payload: Event) => void) | undefined;
+        onSeeking?: ((payload: Event) => void) | undefined;
+        onStalled?: ((payload: Event) => void) | undefined;
+        onSuspend?: ((payload: Event) => void) | undefined;
+        onTimeupdate?: ((payload: Event) => void) | undefined;
+        onVolumechange?: ((payload: Event) => void) | undefined;
+        onWaiting?: ((payload: Event) => void) | undefined;
+        onSelect?: ((payload: Event) => void) | undefined;
+        onScroll?: ((payload: Event) => void) | undefined;
+        onScrollend?: ((payload: Event) => void) | undefined;
+        onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
+        onTouchend?: ((payload: TouchEvent) => void) | undefined;
+        onTouchmove?: ((payload: TouchEvent) => void) | undefined;
+        onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+        onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+        onClick?: ((payload: PointerEvent) => void) | undefined;
+        onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+        onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onPointerdown?: ((payload: PointerEvent) => void) | undefined;
+        onPointermove?: ((payload: PointerEvent) => void) | undefined;
+        onPointerup?: ((payload: PointerEvent) => void) | undefined;
+        onPointercancel?: ((payload: PointerEvent) => void) | undefined;
+        onPointerenter?: ((payload: PointerEvent) => void) | undefined;
+        onPointerleave?: ((payload: PointerEvent) => void) | undefined;
+        onPointerover?: ((payload: PointerEvent) => void) | undefined;
+        onPointerout?: ((payload: PointerEvent) => void) | undefined;
+        onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+        onToggle?: ((payload: ToggleEvent) => void) | undefined;
+        onWheel?: ((payload: WheelEvent) => void) | undefined;
+        onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+        onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+        onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
+    }, Partial<Omit<CheckboxOwnProps, "color" | "size" | "classes" | "customProps" | "rounded" | "indeterminate">>>>;
+    isChecked: import('vue').ComputedRef<boolean>;
+    formControl: {
+        slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        merged: import('vue').ComputedRef<Omit<import('../../FormControl').FormControlOwnProps, "size" | "error" | "withoutErrorMessage"> & {
+            size: NonNullable<keyof import('@bridge-ui/core').LabelSize | undefined>;
+            error: NonNullable<boolean | undefined>;
+            withoutErrorMessage: NonNullable<boolean | undefined>;
+        }>;
+        rowBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<Omit<import('../../FormControl').FormControlOwnProps, "field">, "size" | "classes" | "customProps" | "error" | "disabled" | "controlId" | "description" | "endLabel" | "errorMessage" | "mainLabel" | "readonly" | "required" | "startLabel" | "withoutErrorMessage">>>>;
+        controlId: import('vue').ComputedRef<string>;
+        isDisabled: import('vue').ComputedRef<boolean>;
+        isReadonly: import('vue').ComputedRef<boolean>;
+        controlBind: import('vue').ComputedRef<{
+            id: string;
+            disabled: boolean;
+            readonly: boolean;
+            "aria-describedby": string | undefined;
+            required: true | undefined;
+            "aria-invalid": true | undefined;
+        }>;
+        invalidated: import('vue').ComputedRef<boolean>;
+        endLabelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            for: string;
+        }>>;
+        mainLabelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            for: string;
+        }>>;
+        startLabelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            for: string;
+        }>>;
+        descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            id: string;
+        }>>;
+        errorMessageBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            id: string;
+        }>>;
+        showErrorMessageContent: import('vue').ComputedRef<boolean>;
+        reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
+    };
+    controlBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').InputHTMLAttributes | undefined, {
+        "aria-hidden": boolean;
+    }>>;
+};
+export {};

package/dist/Components/Checkbox/composables/useCheckbox.js

@@ -0,0 +1,76 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { useFormControl as r } from "../../FormControl/composables/useFormControl.js";
+import { computed as i, ref as a, toValue as o, useAttrs as s, watchEffect as c } from "vue";
+import { get as l, omit as u } from "es-toolkit/compat";
+import { cn as d, mergeBridgeUILayeredClasses as f, splitComponentProps as p } from "@bridge-ui/core";
+import { colorProps as m, invalidatedProps as h, roundedProps as g, sizeProps as _ } from "@bridge-ui/core/Components/Checkbox";
+//#region src/Components/Checkbox/composables/useCheckbox.ts
+var v = [
+	"size",
+	"color",
+	"classes",
+	"rounded",
+	"customProps",
+	"indeterminate"
+];
+function y(y, b, x) {
+	let S = s(), C = a(null), w = r(() => ({
+		...S,
+		...o(y)
+	}), {
+		error: !1,
+		withoutErrorMessage: !1,
+		size: b.size ?? "sm"
+	}), T = i(() => p({
+		bridgeKeys: v,
+		props: {
+			...S,
+			...o(y)
+		}
+	})), { merged: E, entry: D } = t({
+		libDefaults: b,
+		componentName: "Checkbox",
+		props: () => T.value.componentProps
+	}), O = i(() => E.value.customProps), k = n({
+		entry: D,
+		props: () => T.value.componentProps
+	}), A = i(() => !!o(x)), j = i(() => l(f(m, D.value?.customProps?.color), E.value.color ?? "primary")), M = i(() => f(h, D.value?.customProps?.invalidated)), N = i(() => w.invalidated.value ? M.value : j.value), P = i(() => l(f(_, D.value?.customProps?.size), E.value.size ?? "sm")), F = i(() => l(f(g, D.value?.customProps?.rounded), E.value.rounded ?? "sm"));
+	c(() => {
+		C.value && (C.value.indeterminate = !!E.value.indeterminate);
+	});
+	let I = i(() => e({
+		...O.value?.input,
+		...w.controlBind.value,
+		type: "checkbox"
+	}, u(T.value.inheritedAttrs, ["class"]), d({
+		"sr-only": !0,
+		[k.value.input ?? ""]: !0
+	}))), L = i(() => e(O.value?.control, { "aria-hidden": !0 }, d({
+		"inline-flex shrink-0 items-center justify-center border shadow-sm transition ease-in-out duration-100": !0,
+		"pointer-events-none": !0,
+		[P.value ?? ""]: !0,
+		[F.value ?? ""]: !0,
+		[N.value?.base ?? ""]: !A.value,
+		[N.value?.checked ?? ""]: A.value,
+		[k.value.control ?? ""]: !0
+	})));
+	return {
+		merged: E,
+		iconBind: i(() => e(O.value?.icon, {}, d({
+			"text-white": !0,
+			[k.value.icon ?? ""]: !0
+		}))),
+		inputRef: C,
+		fieldBind: i(() => e({}, {}, d({
+			"relative inline-flex shrink-0 cursor-pointer items-center": !0,
+			"has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-offset-2": !0,
+			[N.value?.focus ?? ""]: !0
+		}))),
+		inputBind: I,
+		isChecked: A,
+		formControl: w,
+		controlBind: L
+	};
+}
+//#endregion
+export { y as useCheckbox };

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

@@ -0,0 +1,3 @@
+export type { CheckboxClasses, CheckboxColorOverrides, CheckboxCustomProps, CheckboxEmits, CheckboxOwnProps, CheckboxProps, CheckboxRoundedOverrides, CheckboxSizeOverrides, CheckboxSlots, } from './checkbox.types';
+export { default as Checkbox } from './Checkbox.vue';
+export { useCheckbox } from './composables/useCheckbox';

package/dist/Components/Checkbox/index.js

@@ -0,0 +1,3 @@
+import { useCheckbox as e } from "./composables/useCheckbox.js";
+import t from "./Checkbox.js";
+export { t as Checkbox, e as useCheckbox };

package/dist/Components/FormControl/FormControl.js

@@ -0,0 +1,5 @@
+import e from "./FormControl.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/FormControl/FormControl.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/FormControl/FormControl.vue.d.ts

@@ -0,0 +1,17 @@
+import { UseFormControlReturn } from './composables/useFormControl';
+type __VLS_Props = {
+    field: UseFormControlReturn;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/FormControl/FormControl.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,31 @@
+import { hasSlotOrProp as e, resolveSlotOrProp as t } from "../../Utils/slotOrProp.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, guardReactiveProps as c, mergeProps as l, normalizeProps as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, unref as m } from "vue";
+//#region src/Components/FormControl/FormControl.vue?vue&type=script&setup=true&lang.ts
+var h = [
+	"data-invalid",
+	"aria-disabled",
+	"aria-readonly"
+], g = ["aria-hidden"], _ = /* @__PURE__ */ s({
+	inheritAttrs: !1,
+	__name: "FormControl",
+	props: { field: {} },
+	setup(s) {
+		let _ = s, v = n(() => _.field);
+		return (n, s) => (d(), a("div", l(v.value.rootBind.value, {
+			"data-invalid": v.value.invalidated.value || void 0,
+			"aria-disabled": v.value.isDisabled.value || void 0,
+			"aria-readonly": v.value.isReadonly.value || void 0
+		}), [
+			o("div", u(c(v.value.rowBind.value)), [
+				m(e)(v.value.slots, "startLabel", v.value.merged.value.startLabel) ? (d(), a("label", u(l({ key: 0 }, v.value.startLabelBind.value)), [(d(), r(p(m(t)(v.value.slots, "startLabel", v.value.merged.value.startLabel))))], 16)) : i("", !0),
+				f(n.$slots, "default"),
+				m(e)(v.value.slots, "mainLabel", v.value.merged.value.mainLabel) ? (d(), a("label", u(l({ key: 1 }, v.value.mainLabelBind.value)), [(d(), r(p(m(t)(v.value.slots, "mainLabel", v.value.merged.value.mainLabel))))], 16)) : i("", !0),
+				m(e)(v.value.slots, "endLabel", v.value.merged.value.endLabel) ? (d(), a("label", u(l({ key: 2 }, v.value.endLabelBind.value)), [(d(), r(p(m(t)(v.value.slots, "endLabel", v.value.merged.value.endLabel))))], 16)) : i("", !0)
+			], 16),
+			!v.value.invalidated.value && m(e)(v.value.slots, "description", v.value.merged.value.description) ? (d(), a("p", u(l({ key: 0 }, v.value.descriptionBind.value)), [(d(), r(p(m(t)(v.value.slots, "description", v.value.merged.value.description))))], 16)) : i("", !0),
+			v.value.merged.value.withoutErrorMessage ? i("", !0) : (d(), a("p", l({ key: 1 }, v.value.errorMessageBind.value, { "aria-hidden": v.value.showErrorMessageContent.value ? void 0 : !0 }), [v.value.showErrorMessageContent.value ? (d(), r(p(m(t)(v.value.slots, "errorMessage", v.value.merged.value.errorMessage)), { key: 0 })) : i("", !0)], 16, g))
+		], 16, h));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/Components/FormControl/composables/useFormControl.d.ts

@@ -0,0 +1,45 @@
+import { HTMLAttributes, MaybeRefOrGetter } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { FormControlOwnProps } from '../formControl.types';
+export declare const formControlBridgeKeys: readonly ["size", "error", "classes", "disabled", "endLabel", "readonly", "required", "controlId", "mainLabel", "startLabel", "customProps", "description", "errorMessage", "withoutErrorMessage"];
+type FormControlLibDefaults = LibDefaultsShape<FormControlOwnProps, "size" | "error" | "withoutErrorMessage">;
+type FormControlMerged = MergeLibDefaults<FormControlOwnProps, FormControlLibDefaults>;
+export declare function useFormControl(props: MaybeRefOrGetter<Omit<FormControlOwnProps, "field">>, libDefaults: FormControlLibDefaults): {
+    slots: Readonly<{
+        [name: string]: import('vue').Slot<any> | undefined;
+    }>;
+    merged: import('vue').ComputedRef<FormControlMerged>;
+    rowBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, Partial<Omit<Omit<FormControlOwnProps, "field">, "size" | "classes" | "customProps" | "error" | "disabled" | "controlId" | "description" | "endLabel" | "errorMessage" | "mainLabel" | "readonly" | "required" | "startLabel" | "withoutErrorMessage">>>>;
+    controlId: import('vue').ComputedRef<string>;
+    isDisabled: import('vue').ComputedRef<boolean>;
+    isReadonly: import('vue').ComputedRef<boolean>;
+    controlBind: import('vue').ComputedRef<{
+        id: string;
+        disabled: boolean;
+        readonly: boolean;
+        "aria-describedby": string | undefined;
+        required: true | undefined;
+        "aria-invalid": true | undefined;
+    }>;
+    invalidated: import('vue').ComputedRef<boolean>;
+    endLabelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {
+        for: string;
+    }>>;
+    mainLabelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {
+        for: string;
+    }>>;
+    startLabelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {
+        for: string;
+    }>>;
+    descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {
+        id: string;
+    }>>;
+    errorMessageBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {
+        id: string;
+    }>>;
+    showErrorMessageContent: import('vue').ComputedRef<boolean>;
+    reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
+};
+export type UseFormControlReturn = ReturnType<typeof useFormControl>;
+export {};

package/dist/Components/FormControl/composables/useFormControl.js

@@ -0,0 +1,110 @@
+import { hasSlotOrProp as e } from "../../../Utils/slotOrProp.js";
+import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
+import { computed as i, toValue as a, useAttrs as o, useId as s, useSlots as c } from "vue";
+import { get as l, omit as u } from "es-toolkit/compat";
+import { cn as d, mergeBridgeUILayeredClasses as f, splitComponentProps as p } from "@bridge-ui/core";
+import { invalidatedProps as m } from "@bridge-ui/core/Components/FormControl";
+import { sizeProps as h } from "@bridge-ui/core/Components/Label";
+//#region src/Components/FormControl/composables/useFormControl.ts
+var g = [
+	"size",
+	"error",
+	"classes",
+	"disabled",
+	"endLabel",
+	"readonly",
+	"required",
+	"controlId",
+	"mainLabel",
+	"startLabel",
+	"customProps",
+	"description",
+	"errorMessage",
+	"withoutErrorMessage"
+];
+function _(_, v) {
+	let y = s(), b = c(), x = o(), S = i(() => p({
+		bridgeKeys: g,
+		props: {
+			...x,
+			...a(_)
+		}
+	})), { merged: C, entry: w } = n({
+		libDefaults: v,
+		componentName: "FormControl",
+		props: () => S.value.componentProps
+	}), T = i(() => C.value.customProps), E = r({
+		entry: w,
+		props: () => S.value.componentProps
+	}), D = i(() => C.value.error === !0), O = i(() => !!C.value.disabled), k = i(() => !!C.value.readonly), A = i(() => D.value), j = i(() => {
+		let e = S.value.inheritedAttrs.id;
+		return C.value.controlId ?? e ?? y;
+	}), M = i(() => !C.value.withoutErrorMessage), N = i(() => D.value && e(b, "errorMessage", C.value.errorMessage)), P = i(() => {
+		let t = [];
+		return !D.value && e(b, "description", C.value.description) && t.push(`${j.value}-description`), D.value && M.value && e(b, "errorMessage", C.value.errorMessage) && t.push(`${j.value}-error`), t.length > 0 ? t.join(" ") : void 0;
+	}), F = i(() => l(h, C.value.size ?? "md")), I = i(() => f(m, w.value?.customProps?.invalidated, C.value.customProps?.invalidated)), L = i(() => t(T.value?.root, u(S.value.inheritedAttrs, ["class"]), d({
+		"group/form-control relative w-full": !0,
+		"aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-60 aria-disabled:cursor-not-allowed": !0,
+		"aria-readonly:pointer-events-none aria-readonly:select-none": !0,
+		[E.value.root ?? ""]: !0,
+		[x.class]: !!x.class
+	}))), R = i(() => t(T.value?.row, {}, d({
+		"flex items-center gap-x-2": !0,
+		[E.value.row ?? ""]: !0
+	}))), z = i(() => t(T.value?.startLabel, { for: j.value }, d({
+		"inline-flex cursor-pointer items-center gap-x-0.5 font-medium leading-none": !0,
+		[F.value ?? ""]: !0,
+		"text-gray-700 dark:text-gray-300": !A.value,
+		[I.value.label ?? ""]: A.value,
+		[E.value.startLabel ?? ""]: !0
+	}))), B = i(() => t(T.value?.mainLabel, { for: j.value }, d({
+		"inline-flex cursor-pointer items-center gap-x-0.5 font-medium leading-none": !0,
+		[F.value ?? ""]: !0,
+		"text-gray-700 dark:text-gray-300": !A.value,
+		[I.value.label ?? ""]: A.value,
+		[E.value.mainLabel ?? ""]: !0
+	}))), V = i(() => t(T.value?.endLabel, { for: j.value }, d({
+		"inline-flex cursor-pointer items-center gap-x-0.5 font-medium leading-none": !0,
+		[F.value ?? ""]: !0,
+		"text-gray-700 dark:text-gray-300": !A.value,
+		[I.value.label ?? ""]: A.value,
+		[E.value.endLabel ?? ""]: !0
+	}))), H = i(() => t(T.value?.description, { id: `${j.value}-description` }, d({
+		"mt-2 text-gray-500 dark:text-gray-400": !0,
+		[F.value ?? ""]: !0,
+		[E.value.description ?? ""]: !0
+	}))), U = i(() => t(T.value?.errorMessage, { id: `${j.value}-error` }, d({
+		"mt-2": !0,
+		"min-h-[1lh]": M.value,
+		[I.value.errorMessage ?? ""]: !0,
+		[F.value ?? ""]: !0,
+		[E.value.errorMessage ?? ""]: !0
+	})));
+	return {
+		slots: b,
+		merged: C,
+		rowBind: R,
+		rootBind: L,
+		controlId: j,
+		isDisabled: O,
+		isReadonly: k,
+		controlBind: i(() => ({
+			id: j.value,
+			disabled: O.value,
+			readonly: k.value,
+			"aria-describedby": P.value,
+			required: C.value.required || void 0,
+			"aria-invalid": D.value || void 0
+		})),
+		invalidated: D,
+		endLabelBind: V,
+		mainLabelBind: B,
+		startLabelBind: z,
+		descriptionBind: H,
+		errorMessageBind: U,
+		showErrorMessageContent: N,
+		reservesErrorMessageSpace: M
+	};
+}
+//#endregion
+export { g as formControlBridgeKeys, _ as useFormControl };