@resee-movies/nuxt-ux 0.4.0 → 0.5.0

package/dist/runtime/components/ProgressBar.vue.d.ts

@@ -3,10 +3,6 @@ export interface ProgressBarProps {
     showValue?: boolean;
     indeterminate?: boolean;
 }
-declare const __VLS_export: import("vue").DefineComponent<ProgressBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressBarProps> & Readonly<{}>, {
-    value: number;
-    showValue: boolean;
-    indeterminate: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ProgressBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressBarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ProgressSpinner.vue.d.ts

@@ -2,8 +2,6 @@ import type { IconProps } from './Icon.vue.js';
 export interface ProgressSpinnerProps {
     size?: IconProps['size'];
 }
-declare const __VLS_export: import("vue").DefineComponent<ProgressSpinnerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressSpinnerProps> & Readonly<{}>, {
-    size: "sm" | "md" | "lg" | "xl";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ProgressSpinnerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressSpinnerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Tag.vue.d.ts

@@ -6,12 +6,6 @@ export interface TagProps {
     size?: 'sm' | 'md' | 'lg';
     tooltip?: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<TagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{}>, {
-    size: "sm" | "md" | "lg";
-    icon: string;
-    text: string;
-    severity: StatusLevel;
-    tooltip: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<TagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/form/Form.vue

@@ -0,0 +1,52 @@
+<template>
+  <PrimeForm
+    v-slot                    = "$form"
+    novalidate                = "true"
+    :validate-on-mount        = "true"
+    :validate-on-submit       = "true"
+    :validate-on-value-update = "true"
+    :validate-on-blur         = "false"
+    :initial-values           = "props.initialValues"
+    :aria-disabled            = "props.disabled"
+    @submit                   = "handleFormSubmit"
+  >
+    <slot :state="$form" />
+  </PrimeForm>
+</template>
+
+<script>
+export * from "../../types/form";
+</script>
+
+<script setup>
+import PrimeForm from "@primevue/forms/form";
+import { toNonNullableArray } from "@resee-movies/utilities/arrays/to-non-nullable-array";
+import { isPromiseLike } from "@resee-movies/utilities/objects/is-promise-like";
+import { syncRefs } from "@vueuse/core";
+import { provideFormInstance, getValuesFromFormState } from "../../utils/form";
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  initialValues: { type: Object, required: false },
+  onSubmit: { type: [Function, Array], required: false }
+});
+defineEmits(["submit"]);
+const formInstance = provideFormInstance();
+syncRefs(() => props.disabled, formInstance.isDisabled);
+async function handleFormSubmit(event) {
+  formInstance.hasSubmitted.value = true;
+  if (!event.valid) {
+    return;
+  }
+  if (props.onSubmit) {
+    const handlers = toNonNullableArray(props.onSubmit);
+    const values = getValuesFromFormState(event.states);
+    const newEvent = { ...event, values };
+    const results = handlers.map((handler) => handler(newEvent));
+    if (!!results.find((result) => isPromiseLike(result))) {
+      formInstance.isSubmitting.value = true;
+      await Promise.allSettled(results);
+      formInstance.isSubmitting.value = false;
+    }
+  }
+}
+</script>

package/dist/runtime/components/form/Form.vue.d.ts

@@ -0,0 +1,27 @@
+import type { FormValues, FormSubmitHandler, FormSubmitEvent } from '../../types/form.js';
+export * from '../../types/form.js';
+export interface FormProps<T extends FormValues = FormValues> {
+    disabled?: boolean;
+    initialValues?: Record<string, unknown>;
+    onSubmit?: FormSubmitHandler<T> | FormSubmitHandler<T>[];
+}
+declare const __VLS_export: <T extends FormValues>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<FormProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(e: "submit", evt: FormSubmitEvent<T>) => (void | Promise<void>)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            state: any;
+        }) => any;
+    };
+    emit: (e: "submit", evt: FormSubmitEvent<T>) => (void | Promise<void>);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/form/FormField.vue

@@ -0,0 +1,91 @@
+<template>
+  <PrimeFormField
+    v-slot         = "$field"
+    :as            = "props.is"
+    :name          = "props.name"
+    :resolver      = "validatorFunction"
+    :initial-value = "props.initialValue"
+    :class         = "['input-field', props.class, { disabled: isDisabled, readonly: isReadonly, required: props.required }]"
+  >
+    <FormLabelInputPair
+      :input-id       = "inputId"
+      :label-id       = "labelId"
+      :label-text     = "labelText"
+      :label-position = "props.labelPosition"
+      :label-sr-only  = "props.labelSrOnly"
+      :disabled       = "props.disabled"
+      :required       = "props.required"
+      :faux-label     = "props.fauxLabel"
+    >
+      <template #label>
+        <slot name="label" />
+      </template>
+
+      <template #input>
+        <slot
+          name        = "default"
+          :input-name = "props.name"
+          :input-id   = "inputId"
+          :label-id   = "labelId"
+          :label-text = "labelText"
+          :message-id = "$field.error ? messageId : void 0"
+          :disabled   = "isDisabled"
+          :readonly   = "isReadonly"
+        />
+      </template>
+    </FormLabelInputPair>
+
+    <FormValidationMessage
+      v-if     = "$field.error"
+      :id      = "messageId"
+      :visible = "$field.touched || formState.hasSubmitted.value"
+      :message = "$field.error.message"
+    />
+  </PrimeFormField>
+</template>
+
+<script>
+import { computed } from "vue";
+</script>
+
+<script setup>
+import PrimeFormField, {} from "@primevue/forms/formfield";
+import { humanize } from "@resee-movies/utilities/strings/humanize";
+import { useId } from "vue";
+import { injectFormInstance } from "../../utils/form";
+import FormLabelInputPair from "./FormLabelInputPair.vue";
+import FormValidationMessage from "./FormValidationMessage.vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  name: { type: String, required: true },
+  label: { type: String, required: false, default: void 0 },
+  is: { type: String, required: false, default: "div" },
+  initialValue: { type: null, required: false, default: void 0 },
+  required: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  fauxLabel: { type: Boolean, required: false },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false },
+  validator: { type: Function, required: false, default: void 0 },
+  class: { type: null, required: false }
+});
+const formState = injectFormInstance();
+const inputId = useId();
+const labelId = `${inputId}_label`;
+const messageId = `${inputId}_message`;
+const labelText = computed(() => props.label ?? humanize(props.name));
+const isDisabled = computed(() => props.disabled || formState.isDisabled.value);
+const isReadonly = computed(() => props.readonly || formState.isSubmitting.value);
+const validatorFunction = computed(() => {
+  return ({ value }) => {
+    const result = props?.validator?.(value, labelText.value)?.safeParse(value);
+    if (result?.error?.issues.length) {
+      return { errors: result.error.issues };
+    }
+    return void 0;
+  };
+});
+</script>

package/dist/runtime/components/form/FormField.vue.d.ts

@@ -0,0 +1,37 @@
+import type { ZodMiniType } from 'zod/mini';
+import type { HintedString, HTMLElementClassNames } from '../../types/index.js';
+import type { FormLabelInputPairProps } from './FormLabelInputPair.vue.js';
+export interface FormFieldProps {
+    name: string;
+    label?: string;
+    is?: HintedString<'div'>;
+    initialValue?: unknown;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    fauxLabel?: boolean;
+    labelSrOnly?: boolean;
+    labelPosition?: FormLabelInputPairProps['labelPosition'];
+    validator?: (value: unknown, label: string) => undefined | ZodMiniType;
+    class?: HTMLElementClassNames;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+} & {
+    default?: (props: {
+        inputName: string;
+        inputId: any;
+        labelId: any;
+        labelText: any;
+        messageId: any;
+        disabled: any;
+        readonly: any;
+    }) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/FormFieldCheckbox.vue

@@ -0,0 +1,51 @@
+<template>
+  <FormField v-bind="props" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ inputId, messageId, disabled, readonly }">
+      <PrimeCheckbox
+        :input-id         = "inputId"
+        :value            = "props.value"
+        :true-value       = "props.trueValue"
+        :false-value      = "props.falseValue"
+        :binary           = "props.binary"
+        :aria-describedby = "messageId"
+        :disabled         = "disabled || readonly"
+        :readonly         = "readonly"
+        class             = "input-group"
+      />
+    </template>
+  </FormField>
+</template>
+
+<script>
+import { computed } from "vue";
+</script>
+
+<script setup>
+import PrimeCheckbox from "primevue/checkbox";
+import { createBooleanValidator } from "../../utils/validation";
+import FormField from "./FormField.vue";
+const props = defineProps({
+  value: { type: null, required: false, default: void 0 },
+  trueValue: { type: null, required: false, default: () => true },
+  falseValue: { type: null, required: false, default: () => false },
+  binary: { type: Boolean, required: false, default: () => true },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  initialValue: { type: null, required: false, default: () => false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  fauxLabel: { type: Boolean, required: false },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false, default: "after" },
+  class: { type: null, required: false }
+});
+const validatorFunction = computed(() => {
+  return () => createBooleanValidator({ required: props.required });
+});
+</script>

package/dist/runtime/components/form/FormFieldCheckbox.vue.d.ts

@@ -0,0 +1,17 @@
+import type { FormFieldProps } from './FormField.vue.js';
+export interface FormFieldCheckboxProps extends Omit<FormFieldProps, 'validator'> {
+    value?: unknown;
+    trueValue?: unknown;
+    falseValue?: unknown;
+    binary?: boolean;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldCheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldCheckboxProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/FormFieldSelect.vue

@@ -0,0 +1,76 @@
+<template>
+  <FormField v-bind="props" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ inputName, inputId, labelId, messageId, disabled, readonly }">
+      <FormElementSelectOptions
+        :name                  = "inputName"
+        :input-id              = "inputId"
+        :label-id              = "labelId"
+        :disabled              = "disabled"
+        :readonly              = "readonly"
+        :aria-describedby      = "messageId"
+        :multiple              = "props.multiple"
+        :options               = "props.options"
+        :option-label          = "props.optionLabel"
+        :option-value          = "props.optionValue"
+        :option-disabled       = "props.optionDisabled"
+        :data-key              = "props.dataKey"
+        :placeholder           = "props.placeholder"
+        :show-clear            = "props.showClear"
+        :show-option-footer    = "props.showOptionFilter"
+        :filter-placeholder    = "props.filterPlaceholder"
+        :loading               = "props.loading"
+        :selection-limit       = "props.maxRequired"
+      />
+    </template>
+  </FormField>
+</template>
+
+<script>
+import {} from "./FormField.vue";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { createBooleanValidator, createListValidator } from "../../utils/validation";
+import FormField from "./FormField.vue";
+import FormElementSelectOptions from "./element/FormElementSelectOptions.vue";
+const props = defineProps({
+  options: { type: Array, required: false },
+  optionLabel: { type: String, required: false },
+  optionValue: { type: String, required: false },
+  optionDisabled: { type: String, required: false },
+  dataKey: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  showClear: { type: Boolean, required: false, default: true },
+  showOptionFilter: { type: Boolean, required: false, default: void 0 },
+  filterPlaceholder: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false, default: false },
+  minRequired: { type: [String, Number], required: false },
+  maxRequired: { type: [String, Number], required: false },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  initialValue: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  fauxLabel: { type: Boolean, required: false, default: true },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false },
+  class: { type: null, required: false }
+});
+const validatorFunction = computed(() => {
+  return props.multiple ? () => createListValidator({
+    required: props.required,
+    minRequired: props.minRequired,
+    maxRequired: props.maxRequired
+  }) : () => createBooleanValidator({
+    required: props.required
+  });
+});
+</script>

package/dist/runtime/components/form/FormFieldSelect.vue.d.ts

@@ -0,0 +1,26 @@
+import { type FormFieldProps } from './FormField.vue.js';
+export interface FormFieldSelectProps extends Omit<FormFieldProps, 'validator'> {
+    options?: unknown[];
+    optionLabel?: string;
+    optionValue?: string;
+    optionDisabled?: string;
+    dataKey?: string;
+    placeholder?: string;
+    showClear?: boolean;
+    showOptionFilter?: boolean;
+    filterPlaceholder?: string;
+    loading?: boolean;
+    multiple?: boolean;
+    minRequired?: string | number;
+    maxRequired?: string | number;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/FormFieldText.vue

@@ -0,0 +1,56 @@
+<template>
+  <FormField v-bind="props" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ inputId, messageId, disabled, readonly }">
+      <PrimeInputText
+        :id               = "inputId"
+        :aria-describedby = "messageId"
+        :disabled         = "disabled"
+        :readonly         = "readonly"
+        :type             = "props.type"
+        :required         = "props.required"
+        :minlength        = "props.minLength"
+        :maxlength        = "props.maxLength"
+        class             = "input-control"
+      />
+    </template>
+  </FormField>
+</template>
+
+<script>
+import {} from "./FormField.vue";
+</script>
+
+<script setup>
+import PrimeInputText from "primevue/inputtext";
+import { computed } from "vue";
+import FormField from "./FormField.vue";
+import { createTextValidator } from "../../utils/validation";
+const props = defineProps({
+  type: { type: String, required: false, default: "text" },
+  minLength: { type: [String, Number], required: false, default: void 0 },
+  maxLength: { type: [String, Number], required: false, default: void 0 },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  initialValue: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  fauxLabel: { type: Boolean, required: false },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false },
+  class: { type: null, required: false }
+});
+const validatorFunction = computed(() => {
+  return () => createTextValidator({
+    required: props.required,
+    type: props.type,
+    minLength: props.minLength,
+    maxLength: props.maxLength
+  });
+});
+</script>

package/dist/runtime/components/form/FormFieldText.vue.d.ts

@@ -0,0 +1,16 @@
+import { type FormFieldProps } from './FormField.vue.js';
+export interface FormFieldTextProps extends Omit<FormFieldProps, 'validator'> {
+    type?: 'text' | 'url' | 'email';
+    minLength?: string | number;
+    maxLength?: string | number;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldTextProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/FormFieldToggleSwitch.vue

@@ -0,0 +1,47 @@
+<template>
+  <FormField v-bind="props" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ inputId, messageId, disabled, readonly }">
+      <PrimeToggleSwitch
+        :input-id         = "inputId"
+        :aria-describedby = "messageId"
+        :disabled         = "disabled || readonly"
+        :readonly         = "readonly"
+        class             = "input-group toggle-switch"
+        pt:slider:class   = "slider"
+      />
+    </template>
+  </FormField>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import PrimeToggleSwitch from "primevue/toggleswitch";
+import { computed } from "vue";
+import FormField from "./FormField.vue";
+import { createBooleanValidator } from "../../utils/validation";
+const props = defineProps({
+  trueValue: { type: null, required: false, default: () => true },
+  falseValue: { type: null, required: false, default: () => false },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  initialValue: { type: null, required: false, default: () => false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  fauxLabel: { type: Boolean, required: false },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false, default: "after" },
+  class: { type: null, required: false }
+});
+const validatorFunction = computed(() => {
+  return () => createBooleanValidator({ required: props.required });
+});
+</script>

package/dist/runtime/components/form/FormFieldToggleSwitch.vue.d.ts

@@ -0,0 +1,15 @@
+import type { FormFieldProps } from './FormField.vue.js';
+export interface FormFieldToggleSwitchProps extends Omit<FormFieldProps, 'validator'> {
+    trueValue?: unknown;
+    falseValue?: unknown;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldToggleSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldToggleSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/FormLabelInputPair.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :class="['input-label-pair', `label-${props.labelPosition}`]">
+    <Component
+      :is    = "props.fauxLabel ? 'span' : 'label'"
+      :id    = "props.labelId"
+      :for   = "props.fauxLabel ? void 0 : props.inputId"
+      :class = "[
+  'input-label',
+  {
+    'sr-only': props.labelSrOnly,
+    disabled: props.disabled,
+    required: props.required
+  }
+]"
+    >
+      <slot name="label">
+        {{ props.labelText }}
+      </slot>
+    </Component>
+
+    <div>
+      <slot name="input" />
+    </div>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+const props = defineProps({
+  inputId: { type: String, required: false },
+  labelId: { type: String, required: false },
+  labelText: { type: String, required: false },
+  labelPosition: { type: String, required: false, default: "above" },
+  labelSrOnly: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  fauxLabel: { type: Boolean, required: false, default: false }
+});
+</script>

package/dist/runtime/components/form/FormLabelInputPair.vue.d.ts

@@ -0,0 +1,22 @@
+export interface FormLabelInputPairProps {
+    inputId?: string;
+    labelId?: string;
+    labelText?: string;
+    labelPosition?: 'above' | 'below' | 'before' | 'after';
+    labelSrOnly?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    fauxLabel?: boolean;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormLabelInputPairProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormLabelInputPairProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+} & {
+    input?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};