@rotki/ui-library 3.1.7 → 3.3.0

package/dist/components/forms/checkbox/RuiCheckbox.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCheckbox.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createElementVNode","_mergeProps","_withDirectives","_isRef","_vModelCheckbox","_normalizeClass","_createCommentVNode","_renderSlot","_createTextVNode","_toDisplayString","_createBlock","RuiFormTextDetail"],"sources":["../../../../src/components/forms/checkbox/RuiCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { objectPick } from '@vueuse/shared';\nimport { checkControlStyles } from '@/components/forms/check-control-styles';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props<TValue> {\n  value?: TValue;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the control for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  /** Puts the hint or message under the label text instead of under the box, so a list of checkboxes keeps one text column. */\n  detailsUnderLabel?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckbox',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst indeterminate = defineModel<boolean>('indeterminate', { default: false });\n\nconst {\n  value = undefined,\n  disabled: disabledProp = false,\n  color: colorProp = undefined,\n  size: sizeProp = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  details = undefined,\n  hideDetails = false,\n  detailsUnderLabel = false,\n  required = false,\n} = defineProps<Props<TValue>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst el = useTemplateRef<HTMLInputElement>('el');\n\nconst group = inject(RuiCheckboxGroupContextKey, undefined);\n\nconst disabled = computed<boolean>(() => disabledProp || (group ? toValue(group.disabled) : false));\nconst color = computed<ContextColorsType | undefined>(() => colorProp ?? (group ? toValue(group.color) : undefined));\nconst size = computed<'sm' | 'lg' | undefined>(() => sizeProp ?? (group ? toValue(group.size) : undefined));\n// Suppress per-child details inside a group so the group's own hint/error wins.\nconst detailsMode = useFormDetails(\n  () => (group !== undefined && value !== undefined ? 'hidden' : details),\n  () => hideDetails,\n);\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst internalModelValue = computed<boolean>({\n  get: () => {\n    if (group && value !== undefined)\n      return group.isChecked(value);\n    return get(modelValue);\n  },\n  set: (checked: boolean) => {\n    if (checked)\n      set(indeterminate, false);\n    if (group && value !== undefined)\n      group.toggle(value, checked);\n    else\n      set(modelValue, checked);\n  },\n});\n\nconst ui = computed<ReturnType<typeof checkControlStyles>>(() => checkControlStyles({\n  size: get(size),\n  disabled: get(disabled),\n  checked: get(internalModelValue) || get(indeterminate),\n  validation: get(validation),\n  color: get(color) ?? 'grey',\n  underLabel: detailsUnderLabel,\n}));\n\nconst markState = computed<'indeterminate' | 'checked' | 'unchecked'>(() => {\n  if (get(indeterminate))\n    return 'indeterminate';\n  return get(internalModelValue) ? 'checked' : 'unchecked';\n});\n\nwatch(indeterminate, (val) => {\n  const input = get(el);\n  if (!input) {\n    return;\n  }\n  input.checked = !val;\n  input.value = val ? 'off' : 'on';\n});\n\nwatch(internalModelValue, (val) => {\n  const input = get(el);\n  if (input && input.checked !== val)\n    input.checked = val;\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      v-bind=\"objectPick($attrs, ['onClick'])\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"internalModelValue || indeterminate || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        ref=\"el\"\n        v-model=\"internalModelValue\"\n        type=\"checkbox\"\n        :class=\"ui.input()\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs, ['onInput', 'onClick'])\"\n      />\n      <span :class=\"ui.control()\">\n        <span\n          :class=\"ui.mark()\"\n          data-mark\n          :data-state=\"markState\"\n        >\n          <svg\n            v-if=\"markState !== 'unchecked'\"\n            :class=\"ui.glyph()\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path\n              v-if=\"markState === 'indeterminate'\"\n              d=\"M3 6h6\"\n            />\n            <path\n              v-else\n              d=\"M2.5 6.2 5 8.6l4.5-5\"\n            />\n          </svg>\n        </span>\n      </span>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"ui.label()\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          *\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :class=\"ui.details()\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiCheckbox.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createElementVNode","_mergeProps","_withDirectives","_isRef","_vModelCheckbox","_normalizeClass","_createCommentVNode","_renderSlot","_createTextVNode","_toDisplayString","_createBlock","RuiFormTextDetail"],"sources":["../../../../src/components/forms/checkbox/RuiCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { InputAttributes } from '@/types/attributes';\nimport { objectPick } from '@vueuse/shared';\nimport { checkControlStyles } from '@/components/forms/check-control-styles';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props<TValue> {\n  value?: TValue;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the control for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  /** Puts the hint or message under the label text instead of under the box, so a list of checkboxes keeps one text column. */\n  detailsUnderLabel?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckbox',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst indeterminate = defineModel<boolean>('indeterminate', { default: false });\n\nconst {\n  value = undefined,\n  disabled: disabledProp = false,\n  color: colorProp = undefined,\n  size: sizeProp = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  details = undefined,\n  hideDetails = false,\n  detailsUnderLabel = false,\n  required = false,\n} = defineProps<Props<TValue> & /* @vue-ignore */ Omit<InputAttributes, keyof Props<TValue> | 'indeterminate'>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst el = useTemplateRef<HTMLInputElement>('el');\n\nconst group = inject(RuiCheckboxGroupContextKey, undefined);\n\nconst disabled = computed<boolean>(() => disabledProp || (group ? toValue(group.disabled) : false));\nconst color = computed<ContextColorsType | undefined>(() => colorProp ?? (group ? toValue(group.color) : undefined));\nconst size = computed<'sm' | 'lg' | undefined>(() => sizeProp ?? (group ? toValue(group.size) : undefined));\n// Suppress per-child details inside a group so the group's own hint/error wins.\nconst detailsMode = useFormDetails(\n  () => (group !== undefined && value !== undefined ? 'hidden' : details),\n  () => hideDetails,\n);\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst internalModelValue = computed<boolean>({\n  get: () => {\n    if (group && value !== undefined)\n      return group.isChecked(value);\n    return get(modelValue);\n  },\n  set: (checked: boolean) => {\n    if (checked)\n      set(indeterminate, false);\n    if (group && value !== undefined)\n      group.toggle(value, checked);\n    else\n      set(modelValue, checked);\n  },\n});\n\nconst ui = computed<ReturnType<typeof checkControlStyles>>(() => checkControlStyles({\n  size: get(size),\n  disabled: get(disabled),\n  checked: get(internalModelValue) || get(indeterminate),\n  validation: get(validation),\n  color: get(color) ?? 'grey',\n  underLabel: detailsUnderLabel,\n}));\n\nconst markState = computed<'indeterminate' | 'checked' | 'unchecked'>(() => {\n  if (get(indeterminate))\n    return 'indeterminate';\n  return get(internalModelValue) ? 'checked' : 'unchecked';\n});\n\n/*\n * The click listener goes to the label, which wraps the input. Typed as the record `$attrs` is,\n * so the template binds it like the root and input attributes.\n */\nfunction getLabelAttrs(attrs: Record<string, unknown>): Record<string, unknown> {\n  return objectPick(attrs, ['onClick']);\n}\n\nwatch(indeterminate, (val) => {\n  const input = get(el);\n  if (!input) {\n    return;\n  }\n  input.checked = !val;\n  input.value = val ? 'off' : 'on';\n});\n\nwatch(internalModelValue, (val) => {\n  const input = get(el);\n  if (input && input.checked !== val)\n    input.checked = val;\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      v-bind=\"getLabelAttrs($attrs)\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"internalModelValue || indeterminate || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        ref=\"el\"\n        v-model=\"internalModelValue\"\n        type=\"checkbox\"\n        :class=\"ui.input()\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs, ['onInput', 'onClick'])\"\n      />\n      <span :class=\"ui.control()\">\n        <span\n          :class=\"ui.mark()\"\n          data-mark\n          :data-state=\"markState\"\n        >\n          <svg\n            v-if=\"markState !== 'unchecked'\"\n            :class=\"ui.glyph()\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path\n              v-if=\"markState === 'indeterminate'\"\n              d=\"M3 6h6\"\n            />\n            <path\n              v-else\n              d=\"M2.5 6.2 5 8.6l4.5-5\"\n            />\n          </svg>\n        </span>\n      </span>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"ui.label()\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          *\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :class=\"ui.details()\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCheckboxGroup.js","names":["_sfc_main"],"sources":["../../../../../src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FormDetails, useFormDetails } from '@/utils/form-text-detail';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the group for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckboxGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue[]>({ default: () => [] });\n\nconst {\n  inline = false,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  details = undefined,\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nfunction arrayIncludes(arr: readonly TValue[], value: unknown): boolean {\n  return Array.prototype.includes.call(arr, value);\n}\n\nprovide(RuiCheckboxGroupContextKey, {\n  isChecked: (value: unknown): boolean => arrayIncludes(get(modelValue), value),\n  toggle: (value: unknown, checked: boolean): void => {\n    const current = get(modelValue);\n    const present = arrayIncludes(current, value);\n    if (checked === present)\n      return;\n    if (checked)\n      set(modelValue, [...current, value as TValue]);\n    else\n      set(modelValue, current.filter(v => v !== value));\n  },\n  disabled: () => disabled,\n  color: () => color,\n  size: () => size,\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"label\"\n      class=\"text-rui-text text-sm/5 font-medium\"\n    >\n      {{ label }}\n      <span\n        v-if=\"required\"\n        class=\"text-rui-error\"\n      >\n        *\n      </span>\n    </div>\n    <div :class=\"{ 'flex between:ml-6 between:mr-0': inline }\">\n      <slot />\n    </div>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCheckboxGroup.js","names":["_sfc_main"],"sources":["../../../../../src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { HTMLAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FormDetails, useFormDetails } from '@/utils/form-text-detail';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the group for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckboxGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue[]>({ default: () => [] });\n\nconst {\n  inline = false,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  details = undefined,\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nfunction arrayIncludes(arr: readonly TValue[], value: unknown): boolean {\n  return Array.prototype.includes.call(arr, value);\n}\n\nprovide(RuiCheckboxGroupContextKey, {\n  isChecked: (value: unknown): boolean => arrayIncludes(get(modelValue), value),\n  toggle: (value: unknown, checked: boolean): void => {\n    const current = get(modelValue);\n    const present = arrayIncludes(current, value);\n    if (checked === present)\n      return;\n    if (checked)\n      set(modelValue, [...current, value as TValue]);\n    else\n      set(modelValue, current.filter(v => v !== value));\n  },\n  disabled: () => disabled,\n  color: () => color,\n  size: () => size,\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"label\"\n      class=\"text-rui-text text-sm/5 font-medium\"\n    >\n      {{ label }}\n      <span\n        v-if=\"required\"\n        class=\"text-rui-error\"\n      >\n        *\n      </span>\n    </div>\n    <div :class=\"{ 'flex between:ml-6 between:mr-0': inline }\">\n      <slot />\n    </div>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import type { ContextColorsType } from '../../../../consts/colors.js';
 import { type FormDetails } from '../../../../utils/form-text-detail.js';
 export interface Props {
@@ -16,7 +17,7 @@ export interface Props {
     required?: boolean;
 }
 declare const __VLS_export: <TValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props & Omit<HTMLAttributes, keyof Props> & {
         modelValue?: TValue[];
     }) & {
         "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;

package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_createTextVNode","_toDisplayString","_createCommentVNode","_createElementVNode","_normalizeClass","_renderSlot","_unref","_createBlock","RuiFormTextDetail"],"sources":["../../../../../src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FormDetails, useFormDetails } from '@/utils/form-text-detail';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the group for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckboxGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue[]>({ default: () => [] });\n\nconst {\n  inline = false,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  details = undefined,\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nfunction arrayIncludes(arr: readonly TValue[], value: unknown): boolean {\n  return Array.prototype.includes.call(arr, value);\n}\n\nprovide(RuiCheckboxGroupContextKey, {\n  isChecked: (value: unknown): boolean => arrayIncludes(get(modelValue), value),\n  toggle: (value: unknown, checked: boolean): void => {\n    const current = get(modelValue);\n    const present = arrayIncludes(current, value);\n    if (checked === present)\n      return;\n    if (checked)\n      set(modelValue, [...current, value as TValue]);\n    else\n      set(modelValue, current.filter(v => v !== value));\n  },\n  disabled: () => disabled,\n  color: () => color,\n  size: () => size,\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"label\"\n      class=\"text-rui-text text-sm/5 font-medium\"\n    >\n      {{ label }}\n      <span\n        v-if=\"required\"\n        class=\"text-rui-error\"\n      >\n        *\n      </span>\n    </div>\n    <div :class=\"{ 'flex between:ml-6 between:mr-0': inline }\">\n      <slot />\n    </div>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,aAAaC,SAAqB,SAAA,YAAsB;EAoB9D,MAAM,cAAc,qBAAqB,QAAA,eAAe,QAAA,WAAW;EAEnE,SAAS,cAAc,KAAwB,OAAyB;GACtE,OAAO,MAAM,UAAU,SAAS,KAAK,KAAK,KAAK;EACjD;EAEA,QAAQ,4BAA4B;GAClC,YAAY,UAA4B,cAAc,IAAI,UAAU,GAAG,KAAK;GAC5E,SAAS,OAAgB,YAA2B;IAClD,MAAM,UAAU,IAAI,UAAU;IAE9B,IAAI,YADY,cAAc,SAAS,KACvB,GACd;IACF,IAAI,SACF,IAAI,YAAY,CAAC,GAAG,SAAS,KAAe,CAAC;SAE7C,IAAI,YAAY,QAAQ,QAAO,MAAK,MAAM,KAAK,CAAC;GACpD;GACA,gBAAgB,QAAA;GAChB,aAAa,QAAA;GACb,YAAY,QAAA;EACd,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBA0BM,OA1BNC,WA0BM,EAzBJ,MAAK,QAAO,GACJJ,KAAAA,MAAM,GAAA;IAGN,QAAA,SADRE,UAAA,GAAAC,mBAWM,OAXN,YAWM,CAPDE,gBAAAC,gBAAA,QAAA,KAAK,IAAG,KACX,CAAA,GACQ,QAAA,YADRJ,UAAA,GAAAC,mBAKO,QALP,YAGC,KAED,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEFK,mBAEM,OAAA,EAFA,OAAKC,eAAA,EAAA,kCAAsC,QAAA,OAAM,CAAA,EAAA,GAAA,CACrDC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;IAGFC,MAAA,WAAA,MAAW,YADnBT,UAAA,GAAAU,YAMEC,2BAAA;;KAJC,SAASF,MAAA,WAAA;KACT,kBAAgB,QAAA;KAChB,oBAAkB,QAAA;KAClB,MAAM,QAAA"}
+{"version":3,"file":"RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_createTextVNode","_toDisplayString","_createCommentVNode","_createElementVNode","_normalizeClass","_renderSlot","_unref","_createBlock","RuiFormTextDetail"],"sources":["../../../../../src/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { HTMLAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { RuiCheckboxGroupContextKey } from '@/components/forms/checkbox/checkbox-group/context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FormDetails, useFormDetails } from '@/utils/form-text-detail';\n\nexport interface Props {\n  inline?: boolean;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the group for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckboxGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue[]>({ default: () => [] });\n\nconst {\n  inline = false,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  details = undefined,\n  hideDetails = false,\n  disabled = false,\n  color,\n  size,\n  required = false,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nfunction arrayIncludes(arr: readonly TValue[], value: unknown): boolean {\n  return Array.prototype.includes.call(arr, value);\n}\n\nprovide(RuiCheckboxGroupContextKey, {\n  isChecked: (value: unknown): boolean => arrayIncludes(get(modelValue), value),\n  toggle: (value: unknown, checked: boolean): void => {\n    const current = get(modelValue);\n    const present = arrayIncludes(current, value);\n    if (checked === present)\n      return;\n    if (checked)\n      set(modelValue, [...current, value as TValue]);\n    else\n      set(modelValue, current.filter(v => v !== value));\n  },\n  disabled: () => disabled,\n  color: () => color,\n  size: () => size,\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"label\"\n      class=\"text-rui-text text-sm/5 font-medium\"\n    >\n      {{ label }}\n      <span\n        v-if=\"required\"\n        class=\"text-rui-error\"\n      >\n        *\n      </span>\n    </div>\n    <div :class=\"{ 'flex between:ml-6 between:mr-0': inline }\">\n      <slot />\n    </div>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BA,MAAM,aAAaC,SAAqB,SAAA,YAAsB;EAoB9D,MAAM,cAAc,qBAAqB,QAAA,eAAe,QAAA,WAAW;EAEnE,SAAS,cAAc,KAAwB,OAAyB;GACtE,OAAO,MAAM,UAAU,SAAS,KAAK,KAAK,KAAK;EACjD;EAEA,QAAQ,4BAA4B;GAClC,YAAY,UAA4B,cAAc,IAAI,UAAU,GAAG,KAAK;GAC5E,SAAS,OAAgB,YAA2B;IAClD,MAAM,UAAU,IAAI,UAAU;IAE9B,IAAI,YADY,cAAc,SAAS,KACvB,GACd;IACF,IAAI,SACF,IAAI,YAAY,CAAC,GAAG,SAAS,KAAe,CAAC;SAE7C,IAAI,YAAY,QAAQ,QAAO,MAAK,MAAM,KAAK,CAAC;GACpD;GACA,gBAAgB,QAAA;GAChB,aAAa,QAAA;GACb,YAAY,QAAA;EACd,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBA0BM,OA1BNC,WA0BM,EAzBJ,MAAK,QAAO,GACJJ,KAAAA,MAAM,GAAA;IAGN,QAAA,SADRE,UAAA,GAAAC,mBAWM,OAXN,YAWM,CAPDE,gBAAAC,gBAAA,QAAA,KAAK,IAAG,KACX,CAAA,GACQ,QAAA,YADRJ,UAAA,GAAAC,mBAKO,QALP,YAGC,KAED,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEFK,mBAEM,OAAA,EAFA,OAAKC,eAAA,EAAA,kCAAsC,QAAA,OAAM,CAAA,EAAA,GAAA,CACrDC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;IAGFC,MAAA,WAAA,MAAW,YADnBT,UAAA,GAAAU,YAMEC,2BAAA;;KAJC,SAASF,MAAA,WAAA;KACT,kBAAgB,QAAA;KAChB,oBAAkB,QAAA;KAClB,MAAM,QAAA"}

package/dist/components/forms/field-label/RuiFieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFieldLabel.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\n/**\n * The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n */\nexport interface FieldLabelProps {\n  text: string;\n  hidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  for?: string;\n  id?: string;\n}\n\ndefineOptions({\n  name: 'RuiFieldLabel',\n});\n\nconst {\n  text,\n  hidden = false,\n  required = false,\n  disabled = false,\n  for: forId = undefined,\n  id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst labelStyles = tv({\n  slots: {\n    root: 'block mb-1 text-sm leading-5 font-medium text-rui-text',\n    required: 'text-rui-error',\n  },\n  variants: {\n    hidden: {\n      true: { root: 'sr-only' },\n    },\n    disabled: {\n      true: { root: 'text-rui-text-disabled' },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n  <label\n    :id=\"id\"\n    :for=\"forId\"\n    :class=\"ui.root()\"\n    data-id=\"field-label\"\n  >\n    {{ text }}\n    <span\n      v-if=\"required\"\n      :class=\"ui.required()\"\n      aria-hidden=\"true\"\n    >\n      *\n    </span>\n  </label>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiFieldLabel.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { labelStyles } from './field-label-styles';\n\n/**\n * The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n */\nexport interface FieldLabelProps {\n  text: string;\n  hidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  for?: string;\n  id?: string;\n}\n\ndefineOptions({\n  name: 'RuiFieldLabel',\n});\n\nconst {\n  text,\n  hidden = false,\n  required = false,\n  disabled = false,\n  for: forId = undefined,\n  id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n  <label\n    :id=\"id\"\n    :for=\"forId\"\n    :class=\"ui.root()\"\n    data-id=\"field-label\"\n  >\n    {{ text }}\n    <span\n      v-if=\"required\"\n      :class=\"ui.required()\"\n      aria-hidden=\"true\"\n    >\n      *\n    </span>\n  </label>\n</template>\n"],"mappings":""}

package/dist/components/forms/field-label/RuiFieldLabel.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { tv } from "../../../utils/tv.js";
+import { labelStyles } from "./field-label-styles.js";
 import { computed, createCommentVNode, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
 //#region src/components/forms/field-label/RuiFieldLabel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["id", "for"];
@@ -23,16 +23,6 @@ var RuiFieldLabel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		id: { default: () => void 0 }
 	},
 	setup(__props) {
-		const labelStyles = tv({
-			slots: {
-				root: "block mb-1 text-sm leading-5 font-medium text-rui-text",
-				required: "text-rui-error"
-			},
-			variants: {
-				hidden: { true: { root: "sr-only" } },
-				disabled: { true: { root: "text-rui-text-disabled" } }
-			}
-		});
 		const ui = computed(() => labelStyles({
 			hidden: __props.hidden,
 			disabled: __props.disabled

package/dist/components/forms/field-label/RuiFieldLabel.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFieldLabel.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createTextVNode","_toDisplayString","_createCommentVNode"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\n/**\n * The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n */\nexport interface FieldLabelProps {\n  text: string;\n  hidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  for?: string;\n  id?: string;\n}\n\ndefineOptions({\n  name: 'RuiFieldLabel',\n});\n\nconst {\n  text,\n  hidden = false,\n  required = false,\n  disabled = false,\n  for: forId = undefined,\n  id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst labelStyles = tv({\n  slots: {\n    root: 'block mb-1 text-sm leading-5 font-medium text-rui-text',\n    required: 'text-rui-error',\n  },\n  variants: {\n    hidden: {\n      true: { root: 'sr-only' },\n    },\n    disabled: {\n      true: { root: 'text-rui-text-disabled' },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n  <label\n    :id=\"id\"\n    :for=\"forId\"\n    :class=\"ui.root()\"\n    data-id=\"field-label\"\n  >\n    {{ text }}\n    <span\n      v-if=\"required\"\n      :class=\"ui.required()\"\n      aria-hidden=\"true\"\n    >\n      *\n    </span>\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,cAAc,GAAG;GACrB,OAAO;IACL,MAAM;IACN,UAAU;GACZ;GACA,UAAU;IACR,QAAQ,EACN,MAAM,EAAE,MAAM,UAAU,EAC1B;IACA,UAAU,EACR,MAAM,EAAE,MAAM,yBAAyB,EACzC;GACF;EACF,CAAC;EAED,MAAM,KAAK,eAA+C,YAAY;GAAE,QAAK,QAAA;GAAG,UAAO,QAAA;EAAE,CAAC,CAAC;;GAIzF,OAAAA,UAAA,GAAAC,mBAcQ,SAAA;IAbL,IAAI,QAAA;IACJ,KAAK,QAAA;IACL,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IACf,WAAQ;GAELC,GAAAA,CAAAA,gBAAAC,gBAAA,QAAA,IAAI,IAAG,KACV,CAAA,GACQ,QAAA,YADRL,UAAA,GAAAC,mBAMO,QAAA;;IAJJ,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;IACnB,eAAY;GACb,GAAA,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}
+{"version":3,"file":"RuiFieldLabel.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createTextVNode","_toDisplayString","_createCommentVNode"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { labelStyles } from './field-label-styles';\n\n/**\n * The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n */\nexport interface FieldLabelProps {\n  text: string;\n  hidden?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  for?: string;\n  id?: string;\n}\n\ndefineOptions({\n  name: 'RuiFieldLabel',\n});\n\nconst {\n  text,\n  hidden = false,\n  required = false,\n  disabled = false,\n  for: forId = undefined,\n  id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n  <label\n    :id=\"id\"\n    :for=\"forId\"\n    :class=\"ui.root()\"\n    data-id=\"field-label\"\n  >\n    {{ text }}\n    <span\n      v-if=\"required\"\n      :class=\"ui.required()\"\n      aria-hidden=\"true\"\n    >\n      *\n    </span>\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,KAAK,eAA+C,YAAY;GAAE,QAAK,QAAA;GAAG,UAAO,QAAA;EAAE,CAAC,CAAC;;GAIzF,OAAAA,UAAA,GAAAC,mBAcQ,SAAA;IAbL,IAAI,QAAA;IACJ,KAAK,QAAA;IACL,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IACf,WAAQ;GAELC,GAAAA,CAAAA,gBAAAC,gBAAA,QAAA,IAAI,IAAG,KACV,CAAA,GACQ,QAAA,YADRL,UAAA,GAAAC,mBAMO,QAAA;;IAJJ,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;IACnB,eAAY;GACb,GAAA,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/forms/field-label/field-label-styles.d.ts

@@ -0,0 +1,43 @@
+export declare const labelStyles: import("tailwind-variants").TVReturnType<{
+    hidden: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    required: string;
+}, undefined, {
+    hidden: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    required: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    hidden: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    required: string;
+}>>;

package/dist/components/forms/field-label/field-label-styles.js

@@ -0,0 +1,16 @@
+import { tv } from "../../../utils/tv.js";
+//#region src/components/forms/field-label/field-label-styles.ts
+var labelStyles = tv({
+	slots: {
+		root: "block mb-1 text-sm leading-5 font-medium text-rui-text",
+		required: "text-rui-error"
+	},
+	variants: {
+		hidden: { true: { root: "sr-only" } },
+		disabled: { true: { root: "text-rui-text-disabled" } }
+	}
+});
+//#endregion
+export { labelStyles };
+
+//# sourceMappingURL=field-label-styles.js.map

package/dist/components/forms/field-label/field-label-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-label-styles.js","names":[],"sources":["../../../../src/components/forms/field-label/field-label-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const labelStyles = tv({\n  slots: {\n    root: 'block mb-1 text-sm leading-5 font-medium text-rui-text',\n    required: 'text-rui-error',\n  },\n  variants: {\n    hidden: {\n      true: { root: 'sr-only' },\n    },\n    disabled: {\n      true: { root: 'text-rui-text-disabled' },\n    },\n  },\n});\n"],"mappings":";;AAEA,IAAa,cAAc,GAAG;CAC5B,OAAO;EACL,MAAM;EACN,UAAU;CACZ;CACA,UAAU;EACR,QAAQ,EACN,MAAM,EAAE,MAAM,UAAU,EAC1B;EACA,UAAU,EACR,MAAM,EAAE,MAAM,yBAAyB,EACzC;CACF;AACF,CAAC"}

package/dist/components/forms/file-upload/RuiFileUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFileUpload.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/file-upload/RuiFileUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { RuiIcons } from '@/icons';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { formatFileSize, getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface FileUploadProps {\n  /** File type filter (HTML accept attribute syntax). e.g. '.csv', 'image/*', '.png,.jpg' */\n  accept?: string;\n  /** Allow multiple file selection. */\n  multiple?: boolean;\n  disabled?: boolean;\n  /** Shows a loading overlay (consumer-driven, e.g. while uploading). */\n  loading?: boolean;\n  /** Upload progress 0-100. When provided alongside `loading`, the overlay shows a determinate progress bar with percentage. */\n  progress?: number;\n  /** Renders the success state border/icon. Consumer toggles back to false. */\n  uploaded?: boolean;\n  /** Optional max size per file in bytes; failures emit `error` and set internal error state. */\n  maxSize?: number;\n  /** External error messages (e.g. from Vuelidate). Shown via the standard form detail block. */\n  errorMessages?: string | string[];\n  /** Hint text below the dropzone. */\n  hint?: string;\n  /** Disable drag-and-drop; the dropzone becomes click-only (matches rotki.com use case). */\n  noDrop?: boolean;\n  /**\n   * Replace the default \"Drag and drop or \\{button\\}\" copy. With `noDrop` the default is empty, so only the button shows.\n   * The defaults of this and the other texts, error messages included, come from the `rui.file_upload.*` translation keys.\n   */\n  uploadText?: string;\n  /** Label shown on the inline button when no file is selected. */\n  clickToUploadText?: string;\n  /** Label shown on the inline button when one or more files are already selected. */\n  replaceText?: string;\n  /** The line under the dropzone for its hint and errors: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFileUpload',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<File | File[] | undefined>({ required: true });\n\nconst {\n  accept = '*',\n  multiple = false,\n  disabled = false,\n  loading = false,\n  progress = undefined,\n  uploaded = false,\n  maxSize = undefined,\n  errorMessages = [],\n  hint = '',\n  noDrop = false,\n  uploadText = undefined,\n  clickToUploadText = undefined,\n  replaceText = undefined,\n  details = undefined,\n  hideDetails = false,\n} = defineProps<FileUploadProps>();\n\nconst emit = defineEmits<{\n  error: [message: string];\n}>();\n\ndefineSlots<{\n  preview?: (props: { files: File[]; remove: () => void }) => any;\n  icon?: () => any;\n  description?: () => any;\n}>();\n\nconst { t } = useRuiI8n();\n\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst input = useTemplateRef<HTMLInputElement>('input');\nconst internalError = ref<string>('');\n\nconst files = computed<File[]>(() => {\n  const value = get(modelValue);\n  if (!value)\n    return [];\n  return Array.isArray(value) ? value : [value];\n});\n\nconst hasFiles = computed<boolean>(() => get(files).length > 0);\n\nconst progressLabel = computed<string | undefined>(() => {\n  const value = progress;\n  return value === undefined ? undefined : `${Math.round(value)}%`;\n});\n\nconst combinedErrorMessages = computed<string[]>(() => {\n  const external = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  const internal = get(internalError);\n  return [...external.filter(Boolean), ...(internal ? [internal] : [])];\n});\n\nconst { hasError } = useFormTextDetail(combinedErrorMessages, () => []);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\n// a click-only dropzone does not offer dragging\nconst resolvedUploadText = computed<string>(() => uploadText ?? (noDrop ? '' : t(RUI_I18N_KEYS.fileUpload.dropPrefix, 'Drag and drop or')));\nconst resolvedClickToUploadText = computed<string>(() => clickToUploadText ?? t(RUI_I18N_KEYS.fileUpload.clickToUpload, 'click to upload'));\nconst resolvedReplaceText = computed<string>(() => replaceText ?? t(RUI_I18N_KEYS.fileUpload.replace, 'replace file'));\n\ntype WellTone = 'primary' | 'error' | 'success';\n\n// the icon well follows the dropzone's state, like its border\nconst wellTone = computed<WellTone>(() => {\n  if (get(hasError))\n    return 'error';\n  if (uploaded)\n    return 'success';\n  return 'primary';\n});\n\nconst wellIcon = computed<RuiIcons>(() => {\n  const tone = get(wellTone);\n  if (tone === 'error')\n    return 'lu-circle-alert';\n  if (tone === 'success')\n    return 'lu-circle-check';\n  return 'lu-file-up';\n});\n\n// the 10% tint vanishes on a dark page, so dark doubles it\nconst wellClasses: Record<WellTone, string> = {\n  primary: 'bg-rui-primary-soft dark:bg-rui-primary/20',\n  error: 'bg-rui-error-soft dark:bg-rui-error/20',\n  success: 'bg-rui-success-soft dark:bg-rui-success/20',\n};\n\nfunction matchesAccept(file: File, acceptString: string): boolean {\n  if (!acceptString || acceptString === '*' || acceptString === '*/*')\n    return true;\n\n  const fileName = file.name.toLowerCase();\n  const fileExtension = fileName.includes('.') ? fileName.slice(fileName.lastIndexOf('.')) : '';\n  const fileType = file.type.toLowerCase();\n  const acceptTypes = acceptString.split(',').map(value => value.trim().toLowerCase()).filter(Boolean);\n\n  return acceptTypes.some((type) => {\n    if (type.startsWith('.'))\n      return type === fileExtension;\n    if (type.endsWith('/*'))\n      return fileType.startsWith(type.slice(0, -1));\n    return type === fileType;\n  });\n}\n\nfunction reportError(message: string): void {\n  set(internalError, message);\n  emit('error', message);\n}\n\nfunction clearInternalError(): void {\n  set(internalError, '');\n}\n\nfunction validate(candidates: File[]): File[] | undefined {\n  if (candidates.length === 0)\n    return undefined;\n\n  if (!multiple && candidates.length > 1) {\n    reportError(t(RUI_I18N_KEYS.fileUpload.tooMany, 'Only one file can be uploaded'));\n    return undefined;\n  }\n\n  for (const file of candidates) {\n    if (!matchesAccept(file, accept)) {\n      reportError(t(RUI_I18N_KEYS.fileUpload.wrongType, { accept }, `Only ${accept} files are allowed`));\n      return undefined;\n    }\n    if (maxSize !== undefined && file.size > maxSize) {\n      const size = formatFileSize(maxSize);\n      reportError(t(RUI_I18N_KEYS.fileUpload.tooLarge, { name: file.name, size }, `${file.name} exceeds the maximum size of ${size}`));\n      return undefined;\n    }\n  }\n\n  return candidates;\n}\n\nfunction setFiles(candidates: File[]): void {\n  const validated = validate(candidates);\n  if (!validated)\n    return;\n  clearInternalError();\n  set(modelValue, multiple ? validated : validated[0]);\n}\n\nfunction removeFile(target?: File): void {\n  clearInternalError();\n  const inputEl = get(input);\n  if (inputEl)\n    inputEl.value = '';\n\n  if (!target || !multiple) {\n    set(modelValue, multiple ? [] : undefined);\n    return;\n  }\n\n  const remaining = get(files).filter(file => file !== target);\n  set(modelValue, remaining);\n}\n\nfunction onSelect(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement) || !target.files)\n    return;\n  const picked = Array.from(target.files);\n  // the model owns the selection; a cleared input fires `change` for the same file again\n  target.value = '';\n  setFiles(picked);\n}\n\nfunction onDrop(dropped: File[] | null): void {\n  if (disabled || noDrop || !dropped || dropped.length === 0)\n    return;\n  setFiles(dropped);\n}\n\nconst { isOverDropZone } = useDropZone(wrapper, {\n  onDrop,\n});\n\nfunction openPicker(): void {\n  if (disabled)\n    return;\n  get(input)?.click();\n}\n\nwatch(() => errorMessages, () => clearInternalError());\n\ndefineExpose({\n  removeFile: () => removeFile(),\n  openPicker,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      ref=\"wrapper\"\n      class=\"p-4 border border-rui-outline dark:border-rui-neutral-400 rounded-rui-panel w-full relative border-dashed transition\"\n      :class=\"{\n        'border-rui-primary! bg-rui-primary-subtle': isOverDropZone && !disabled && !noDrop,\n        'border-rui-error! border-solid! bg-rui-error-subtle': hasError,\n        'border-rui-success! border-solid! bg-rui-success-subtle': uploaded,\n        'opacity-60 pointer-events-none': disabled,\n      }\"\n      :data-disabled=\"disabled || undefined\"\n      :data-uploaded=\"uploaded || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n      :data-drop-active=\"isOverDropZone || undefined\"\n    >\n      <div\n        class=\"flex flex-col items-center justify-center gap-3\"\n        :class=\"{ 'opacity-0': loading }\"\n      >\n        <slot\n          name=\"preview\"\n          :files=\"files\"\n          :remove=\"() => removeFile()\"\n        >\n          <div\n            v-if=\"hasFiles\"\n            class=\"flex flex-col gap-1 w-full\"\n            data-id=\"file-list\"\n          >\n            <div\n              v-for=\"file in files\"\n              :key=\"`${file.name}-${file.lastModified}`\"\n              class=\"flex items-center gap-2 bg-rui-primary-soft dark:bg-rui-primary/20 rounded-full pl-3 pr-1 py-1\"\n              data-id=\"file-item\"\n            >\n              <RuiIcon\n                name=\"lu-file\"\n                color=\"primary\"\n                size=\"20\"\n              />\n              <div class=\"flex-1 overflow-hidden min-w-0\">\n                <div\n                  class=\"text-sm leading-5 truncate\"\n                  :title=\"file.name\"\n                >\n                  {{ file.name }}\n                </div>\n                <div class=\"text-rui-text-secondary text-xs leading-3\">\n                  {{ formatFileSize(file.size) }}\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                class=\"p-1 rounded-full hover:bg-rui-hover transition focus-visible:focus-ring outline-hidden\"\n                :disabled=\"disabled\"\n                :aria-label=\"t(RUI_I18N_KEYS.fileUpload.remove, { name: file.name }, `Remove ${file.name}`)\"\n                data-id=\"remove-file\"\n                @click=\"removeFile(file)\"\n              >\n                <RuiIcon\n                  name=\"lu-x\"\n                  size=\"16\"\n                />\n              </button>\n            </div>\n          </div>\n          <div\n            v-else\n            class=\"h-10 w-10 rounded-full flex items-center justify-center\"\n            :class=\"wellClasses[wellTone]\"\n            data-id=\"icon-well\"\n          >\n            <slot name=\"icon\">\n              <RuiIcon\n                :name=\"wellIcon\"\n                :color=\"wellTone\"\n                :class=\"{ 'dark:text-rui-primary-lighter': wellTone === 'primary' }\"\n              />\n            </slot>\n          </div>\n        </slot>\n\n        <div class=\"text-center text-sm\">\n          <slot name=\"description\">\n            <div class=\"flex items-center justify-center gap-1 flex-wrap\">\n              <span v-if=\"resolvedUploadText\">{{ resolvedUploadText }}</span>\n              <button\n                type=\"button\"\n                class=\"text-rui-primary dark:text-rui-primary-lighter underline disabled:no-underline disabled:text-rui-text-disabled\"\n                :class=\"{ 'first-letter:uppercase': !resolvedUploadText }\"\n                :disabled=\"disabled\"\n                data-id=\"open-picker\"\n                @click=\"openPicker()\"\n              >\n                {{ hasFiles ? resolvedReplaceText : resolvedClickToUploadText }}\n              </button>\n            </div>\n          </slot>\n        </div>\n\n        <input\n          ref=\"input\"\n          type=\"file\"\n          :accept=\"accept\"\n          :multiple=\"multiple\"\n          :disabled=\"disabled\"\n          hidden\n          data-id=\"file-input\"\n          v-bind=\"getNonRootAttrs($attrs, ['class', 'onChange'])\"\n          @change=\"onSelect($event)\"\n        />\n      </div>\n\n      <div\n        v-if=\"loading\"\n        class=\"flex flex-col items-center justify-center absolute h-full w-full top-0 left-0 gap-2\"\n        data-id=\"loading\"\n      >\n        <RuiProgress\n          circular\n          :variant=\"progress === undefined ? 'indeterminate' : 'determinate'\"\n          :value=\"progress\"\n          color=\"primary\"\n          size=\"40\"\n        />\n        <div\n          v-if=\"progressLabel\"\n          class=\"text-xs text-rui-text-secondary\"\n          data-id=\"progress-label\"\n          v-text=\"progressLabel\"\n        />\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :details=\"detailsMode\"\n      :error-messages=\"combinedErrorMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiFileUpload.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/file-upload/RuiFileUpload.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends File | File[] | undefined\">\nimport type { Ref } from 'vue';\nimport type { RuiIcons } from '@/icons';\nimport type { InputAttributes } from '@/types/attributes';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { formatFileSize, getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface FileUploadProps {\n  /** File type filter (HTML accept attribute syntax). e.g. '.csv', 'image/*', '.png,.jpg' */\n  accept?: string;\n  /** Allow multiple file selection. */\n  multiple?: boolean;\n  disabled?: boolean;\n  /** Shows a loading overlay (consumer-driven, e.g. while uploading). */\n  loading?: boolean;\n  /** Upload progress 0-100. When provided alongside `loading`, the overlay shows a determinate progress bar with percentage. */\n  progress?: number;\n  /** Renders the success state border/icon. Consumer toggles back to false. */\n  uploaded?: boolean;\n  /** Optional max size per file in bytes; failures emit `error` and set internal error state. */\n  maxSize?: number;\n  /** External error messages (e.g. from Vuelidate). Shown via the standard form detail block. */\n  errorMessages?: string | string[];\n  /** Hint text below the dropzone. */\n  hint?: string;\n  /** Disable drag-and-drop; the dropzone becomes click-only (matches rotki.com use case). */\n  noDrop?: boolean;\n  /**\n   * Replace the default \"Drag and drop or \\{button\\}\" copy. With `noDrop` the default is empty, so only the button shows.\n   * The defaults of this and the other texts, error messages included, come from the `rui.file_upload.*` translation keys.\n   */\n  uploadText?: string;\n  /** Label shown on the inline button when no file is selected. */\n  clickToUploadText?: string;\n  /** Label shown on the inline button when one or more files are already selected. */\n  replaceText?: string;\n  /** The line under the dropzone for its hint and errors: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFileUpload',\n  inheritAttrs: false,\n});\n\n/**\n * The picked file, or `undefined`; with `multiple`, the picked files in an array. `T` is the bound\n * value's type, so a `Ref<File[]>` takes the update as is. The component writes through the wider\n * ref, in the shape `multiple` asks for.\n */\nconst modelValue: Ref<File | File[] | undefined> = defineModel<T>({ required: true });\n\nconst {\n  accept = '*',\n  multiple = false,\n  disabled = false,\n  loading = false,\n  progress = undefined,\n  uploaded = false,\n  maxSize = undefined,\n  errorMessages = [],\n  hint = '',\n  noDrop = false,\n  uploadText = undefined,\n  clickToUploadText = undefined,\n  replaceText = undefined,\n  details = undefined,\n  hideDetails = false,\n} = defineProps<FileUploadProps & /* @vue-ignore */ Omit<InputAttributes, keyof FileUploadProps | 'onError'>>();\n\nconst emit = defineEmits<{\n  error: [message: string];\n}>();\n\ndefineSlots<{\n  preview?: (props: { files: File[]; remove: () => void }) => any;\n  icon?: () => any;\n  description?: () => any;\n}>();\n\nconst { t } = useRuiI8n();\n\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst input = useTemplateRef<HTMLInputElement>('input');\nconst internalError = ref<string>('');\n\nconst files = computed<File[]>(() => {\n  const value = get(modelValue);\n  if (!value)\n    return [];\n  return Array.isArray(value) ? value : [value];\n});\n\nconst hasFiles = computed<boolean>(() => get(files).length > 0);\n\nconst progressLabel = computed<string | undefined>(() => {\n  const value = progress;\n  return value === undefined ? undefined : `${Math.round(value)}%`;\n});\n\nconst combinedErrorMessages = computed<string[]>(() => {\n  const external = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  const internal = get(internalError);\n  return [...external.filter(Boolean), ...(internal ? [internal] : [])];\n});\n\nconst { hasError } = useFormTextDetail(combinedErrorMessages, () => []);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\n// a click-only dropzone does not offer dragging\nconst resolvedUploadText = computed<string>(() => uploadText ?? (noDrop ? '' : t(RUI_I18N_KEYS.fileUpload.dropPrefix, 'Drag and drop or')));\nconst resolvedClickToUploadText = computed<string>(() => clickToUploadText ?? t(RUI_I18N_KEYS.fileUpload.clickToUpload, 'click to upload'));\nconst resolvedReplaceText = computed<string>(() => replaceText ?? t(RUI_I18N_KEYS.fileUpload.replace, 'replace file'));\n\ntype WellTone = 'primary' | 'error' | 'success';\n\n// the icon well follows the dropzone's state, like its border\nconst wellTone = computed<WellTone>(() => {\n  if (get(hasError))\n    return 'error';\n  if (uploaded)\n    return 'success';\n  return 'primary';\n});\n\nconst wellIcon = computed<RuiIcons>(() => {\n  const tone = get(wellTone);\n  if (tone === 'error')\n    return 'lu-circle-alert';\n  if (tone === 'success')\n    return 'lu-circle-check';\n  return 'lu-file-up';\n});\n\n// the 10% tint vanishes on a dark page, so dark doubles it\nconst wellClasses: Record<WellTone, string> = {\n  primary: 'bg-rui-primary-soft dark:bg-rui-primary/20',\n  error: 'bg-rui-error-soft dark:bg-rui-error/20',\n  success: 'bg-rui-success-soft dark:bg-rui-success/20',\n};\n\nfunction matchesAccept(file: File, acceptString: string): boolean {\n  if (!acceptString || acceptString === '*' || acceptString === '*/*')\n    return true;\n\n  const fileName = file.name.toLowerCase();\n  const fileExtension = fileName.includes('.') ? fileName.slice(fileName.lastIndexOf('.')) : '';\n  const fileType = file.type.toLowerCase();\n  const acceptTypes = acceptString.split(',').map(value => value.trim().toLowerCase()).filter(Boolean);\n\n  return acceptTypes.some((type) => {\n    if (type.startsWith('.'))\n      return type === fileExtension;\n    if (type.endsWith('/*'))\n      return fileType.startsWith(type.slice(0, -1));\n    return type === fileType;\n  });\n}\n\nfunction reportError(message: string): void {\n  set(internalError, message);\n  emit('error', message);\n}\n\nfunction clearInternalError(): void {\n  set(internalError, '');\n}\n\nfunction validate(candidates: File[]): File[] | undefined {\n  if (candidates.length === 0)\n    return undefined;\n\n  if (!multiple && candidates.length > 1) {\n    reportError(t(RUI_I18N_KEYS.fileUpload.tooMany, 'Only one file can be uploaded'));\n    return undefined;\n  }\n\n  for (const file of candidates) {\n    if (!matchesAccept(file, accept)) {\n      reportError(t(RUI_I18N_KEYS.fileUpload.wrongType, { accept }, `Only ${accept} files are allowed`));\n      return undefined;\n    }\n    if (maxSize !== undefined && file.size > maxSize) {\n      const size = formatFileSize(maxSize);\n      reportError(t(RUI_I18N_KEYS.fileUpload.tooLarge, { name: file.name, size }, `${file.name} exceeds the maximum size of ${size}`));\n      return undefined;\n    }\n  }\n\n  return candidates;\n}\n\nfunction setFiles(candidates: File[]): void {\n  const validated = validate(candidates);\n  if (!validated)\n    return;\n  clearInternalError();\n  set(modelValue, multiple ? validated : validated[0]);\n}\n\nfunction removeFile(target?: File): void {\n  clearInternalError();\n  const inputEl = get(input);\n  if (inputEl)\n    inputEl.value = '';\n\n  if (!target || !multiple) {\n    set(modelValue, multiple ? [] : undefined);\n    return;\n  }\n\n  const remaining = get(files).filter(file => file !== target);\n  set(modelValue, remaining);\n}\n\nfunction onSelect(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement) || !target.files)\n    return;\n  const picked = Array.from(target.files);\n  // the model owns the selection; a cleared input fires `change` for the same file again\n  target.value = '';\n  setFiles(picked);\n}\n\nfunction onDrop(dropped: File[] | null): void {\n  if (disabled || noDrop || !dropped || dropped.length === 0)\n    return;\n  setFiles(dropped);\n}\n\nconst { isOverDropZone } = useDropZone(wrapper, {\n  onDrop,\n});\n\nfunction openPicker(): void {\n  if (disabled)\n    return;\n  get(input)?.click();\n}\n\nwatch(() => errorMessages, () => clearInternalError());\n\ndefineExpose({\n  removeFile: () => removeFile(),\n  openPicker,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      ref=\"wrapper\"\n      class=\"p-4 border border-rui-outline dark:border-rui-neutral-400 rounded-rui-panel w-full relative border-dashed transition\"\n      :class=\"{\n        'border-rui-primary! bg-rui-primary-subtle': isOverDropZone && !disabled && !noDrop,\n        'border-rui-error! border-solid! bg-rui-error-subtle': hasError,\n        'border-rui-success! border-solid! bg-rui-success-subtle': uploaded,\n        'opacity-60 pointer-events-none': disabled,\n      }\"\n      :data-disabled=\"disabled || undefined\"\n      :data-uploaded=\"uploaded || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n      :data-drop-active=\"isOverDropZone || undefined\"\n    >\n      <div\n        class=\"flex flex-col items-center justify-center gap-3\"\n        :class=\"{ 'opacity-0': loading }\"\n      >\n        <slot\n          name=\"preview\"\n          :files=\"files\"\n          :remove=\"() => removeFile()\"\n        >\n          <div\n            v-if=\"hasFiles\"\n            class=\"flex flex-col gap-1 w-full\"\n            data-id=\"file-list\"\n          >\n            <div\n              v-for=\"file in files\"\n              :key=\"`${file.name}-${file.lastModified}`\"\n              class=\"flex items-center gap-2 bg-rui-primary-soft dark:bg-rui-primary/20 rounded-full pl-3 pr-1 py-1\"\n              data-id=\"file-item\"\n            >\n              <RuiIcon\n                name=\"lu-file\"\n                color=\"primary\"\n                size=\"20\"\n              />\n              <div class=\"flex-1 overflow-hidden min-w-0\">\n                <div\n                  class=\"text-sm leading-5 truncate\"\n                  :title=\"file.name\"\n                >\n                  {{ file.name }}\n                </div>\n                <div class=\"text-rui-text-secondary text-xs leading-3\">\n                  {{ formatFileSize(file.size) }}\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                class=\"p-1 rounded-full hover:bg-rui-hover transition focus-visible:focus-ring outline-hidden\"\n                :disabled=\"disabled\"\n                :aria-label=\"t(RUI_I18N_KEYS.fileUpload.remove, { name: file.name }, `Remove ${file.name}`)\"\n                data-id=\"remove-file\"\n                @click=\"removeFile(file)\"\n              >\n                <RuiIcon\n                  name=\"lu-x\"\n                  size=\"16\"\n                />\n              </button>\n            </div>\n          </div>\n          <div\n            v-else\n            class=\"h-10 w-10 rounded-full flex items-center justify-center\"\n            :class=\"wellClasses[wellTone]\"\n            data-id=\"icon-well\"\n          >\n            <slot name=\"icon\">\n              <RuiIcon\n                :name=\"wellIcon\"\n                :color=\"wellTone\"\n                :class=\"{ 'dark:text-rui-primary-lighter': wellTone === 'primary' }\"\n              />\n            </slot>\n          </div>\n        </slot>\n\n        <div class=\"text-center text-sm\">\n          <slot name=\"description\">\n            <div class=\"flex items-center justify-center gap-1 flex-wrap\">\n              <span v-if=\"resolvedUploadText\">{{ resolvedUploadText }}</span>\n              <button\n                type=\"button\"\n                class=\"text-rui-primary dark:text-rui-primary-lighter underline disabled:no-underline disabled:text-rui-text-disabled\"\n                :class=\"{ 'first-letter:uppercase': !resolvedUploadText }\"\n                :disabled=\"disabled\"\n                data-id=\"open-picker\"\n                @click=\"openPicker()\"\n              >\n                {{ hasFiles ? resolvedReplaceText : resolvedClickToUploadText }}\n              </button>\n            </div>\n          </slot>\n        </div>\n\n        <input\n          ref=\"input\"\n          type=\"file\"\n          :accept=\"accept\"\n          :multiple=\"multiple\"\n          :disabled=\"disabled\"\n          hidden\n          data-id=\"file-input\"\n          v-bind=\"getNonRootAttrs($attrs, ['class', 'onChange'])\"\n          @change=\"onSelect($event)\"\n        />\n      </div>\n\n      <div\n        v-if=\"loading\"\n        class=\"flex flex-col items-center justify-center absolute h-full w-full top-0 left-0 gap-2\"\n        data-id=\"loading\"\n      >\n        <RuiProgress\n          circular\n          :variant=\"progress === undefined ? 'indeterminate' : 'determinate'\"\n          :value=\"progress\"\n          color=\"primary\"\n          size=\"40\"\n        />\n        <div\n          v-if=\"progressLabel\"\n          class=\"text-xs text-rui-text-secondary\"\n          data-id=\"progress-label\"\n          v-text=\"progressLabel\"\n        />\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :details=\"detailsMode\"\n      :error-messages=\"combinedErrorMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/file-upload/RuiFileUpload.vue.d.ts

@@ -1,3 +1,4 @@
+import type { InputAttributes } from '../../../types/attributes.js';
 import { type FormDetails } from '../../../utils/form-text-detail.js';
 export interface FileUploadProps {
     /** File type filter (HTML accept attribute syntax). e.g. '.csv', 'image/*', '.png,.jpg' */
@@ -33,35 +34,41 @@ export interface FileUploadProps {
     /** @deprecated Use `details="hidden"`. Removed in 4.0. */
     hideDetails?: boolean;
 }
-type __VLS_Props = FileUploadProps;
-type __VLS_Slots = {
-    preview?: (props: {
-        files: File[];
-        remove: () => void;
-    }) => any;
-    icon?: () => any;
-    description?: () => any;
-};
-declare function openPicker(): void;
-type __VLS_ModelProps = {
-    modelValue: File | File[] | undefined;
+declare const __VLS_export: <T extends File | File[] | undefined>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(FileUploadProps & Omit<InputAttributes, "onError" | keyof FileUploadProps> & {
+        /**
+         * The picked file, or `undefined`; with `multiple`, the picked files in an array. `T` is the bound
+         * value's type, so a `Ref<File[]>` takes the update as is. The component writes through the wider
+         * ref, in the shape `multiple` asks for.
+         */
+        modelValue: T;
+    }) & {
+        onError?: ((message: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        removeFile: () => void;
+        openPicker: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        preview?: (props: {
+            files: File[];
+            remove: () => void;
+        }) => any;
+        icon?: () => any;
+        description?: () => any;
+    };
+    emit: ((evt: "error", message: string) => void) & ((event: "update:modelValue", value: T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
-    removeFile: () => void;
-    openPicker: typeof openPicker;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    error: (message: string) => any;
-    "update:modelValue": (value: File | File[] | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onError?: ((message: string) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: File | File[] | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, 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;
-    };
-};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/forms/file-upload/RuiFileUpload.vue_vue_type_script_setup_true_lang.js

@@ -87,6 +87,11 @@ var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 	}),
 	emits: /*@__PURE__*/ mergeModels(["error"], ["update:modelValue"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* The picked file, or `undefined`; with `multiple`, the picked files in an array. `T` is the bound
+		* value's type, so a `Ref<File[]>` takes the update as is. The component writes through the wider
+		* ref, in the shape `multiple` asks for.
+		*/
 		const modelValue = useModel(__props, "modelValue");
 		const emit = __emit;
 		const { t } = useRuiI8n();

package/dist/components/forms/file-upload/RuiFileUpload.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFileUpload.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createElementVNode","_normalizeClass","_renderSlot","_Fragment","_renderList","_createVNode","RuiIcon","_toDisplayString","_createCommentVNode","_mergeProps","RuiProgress","_createBlock","RuiFormTextDetail"],"sources":["../../../../src/components/forms/file-upload/RuiFileUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { RuiIcons } from '@/icons';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { formatFileSize, getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface FileUploadProps {\n  /** File type filter (HTML accept attribute syntax). e.g. '.csv', 'image/*', '.png,.jpg' */\n  accept?: string;\n  /** Allow multiple file selection. */\n  multiple?: boolean;\n  disabled?: boolean;\n  /** Shows a loading overlay (consumer-driven, e.g. while uploading). */\n  loading?: boolean;\n  /** Upload progress 0-100. When provided alongside `loading`, the overlay shows a determinate progress bar with percentage. */\n  progress?: number;\n  /** Renders the success state border/icon. Consumer toggles back to false. */\n  uploaded?: boolean;\n  /** Optional max size per file in bytes; failures emit `error` and set internal error state. */\n  maxSize?: number;\n  /** External error messages (e.g. from Vuelidate). Shown via the standard form detail block. */\n  errorMessages?: string | string[];\n  /** Hint text below the dropzone. */\n  hint?: string;\n  /** Disable drag-and-drop; the dropzone becomes click-only (matches rotki.com use case). */\n  noDrop?: boolean;\n  /**\n   * Replace the default \"Drag and drop or \\{button\\}\" copy. With `noDrop` the default is empty, so only the button shows.\n   * The defaults of this and the other texts, error messages included, come from the `rui.file_upload.*` translation keys.\n   */\n  uploadText?: string;\n  /** Label shown on the inline button when no file is selected. */\n  clickToUploadText?: string;\n  /** Label shown on the inline button when one or more files are already selected. */\n  replaceText?: string;\n  /** The line under the dropzone for its hint and errors: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFileUpload',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<File | File[] | undefined>({ required: true });\n\nconst {\n  accept = '*',\n  multiple = false,\n  disabled = false,\n  loading = false,\n  progress = undefined,\n  uploaded = false,\n  maxSize = undefined,\n  errorMessages = [],\n  hint = '',\n  noDrop = false,\n  uploadText = undefined,\n  clickToUploadText = undefined,\n  replaceText = undefined,\n  details = undefined,\n  hideDetails = false,\n} = defineProps<FileUploadProps>();\n\nconst emit = defineEmits<{\n  error: [message: string];\n}>();\n\ndefineSlots<{\n  preview?: (props: { files: File[]; remove: () => void }) => any;\n  icon?: () => any;\n  description?: () => any;\n}>();\n\nconst { t } = useRuiI8n();\n\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst input = useTemplateRef<HTMLInputElement>('input');\nconst internalError = ref<string>('');\n\nconst files = computed<File[]>(() => {\n  const value = get(modelValue);\n  if (!value)\n    return [];\n  return Array.isArray(value) ? value : [value];\n});\n\nconst hasFiles = computed<boolean>(() => get(files).length > 0);\n\nconst progressLabel = computed<string | undefined>(() => {\n  const value = progress;\n  return value === undefined ? undefined : `${Math.round(value)}%`;\n});\n\nconst combinedErrorMessages = computed<string[]>(() => {\n  const external = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  const internal = get(internalError);\n  return [...external.filter(Boolean), ...(internal ? [internal] : [])];\n});\n\nconst { hasError } = useFormTextDetail(combinedErrorMessages, () => []);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\n// a click-only dropzone does not offer dragging\nconst resolvedUploadText = computed<string>(() => uploadText ?? (noDrop ? '' : t(RUI_I18N_KEYS.fileUpload.dropPrefix, 'Drag and drop or')));\nconst resolvedClickToUploadText = computed<string>(() => clickToUploadText ?? t(RUI_I18N_KEYS.fileUpload.clickToUpload, 'click to upload'));\nconst resolvedReplaceText = computed<string>(() => replaceText ?? t(RUI_I18N_KEYS.fileUpload.replace, 'replace file'));\n\ntype WellTone = 'primary' | 'error' | 'success';\n\n// the icon well follows the dropzone's state, like its border\nconst wellTone = computed<WellTone>(() => {\n  if (get(hasError))\n    return 'error';\n  if (uploaded)\n    return 'success';\n  return 'primary';\n});\n\nconst wellIcon = computed<RuiIcons>(() => {\n  const tone = get(wellTone);\n  if (tone === 'error')\n    return 'lu-circle-alert';\n  if (tone === 'success')\n    return 'lu-circle-check';\n  return 'lu-file-up';\n});\n\n// the 10% tint vanishes on a dark page, so dark doubles it\nconst wellClasses: Record<WellTone, string> = {\n  primary: 'bg-rui-primary-soft dark:bg-rui-primary/20',\n  error: 'bg-rui-error-soft dark:bg-rui-error/20',\n  success: 'bg-rui-success-soft dark:bg-rui-success/20',\n};\n\nfunction matchesAccept(file: File, acceptString: string): boolean {\n  if (!acceptString || acceptString === '*' || acceptString === '*/*')\n    return true;\n\n  const fileName = file.name.toLowerCase();\n  const fileExtension = fileName.includes('.') ? fileName.slice(fileName.lastIndexOf('.')) : '';\n  const fileType = file.type.toLowerCase();\n  const acceptTypes = acceptString.split(',').map(value => value.trim().toLowerCase()).filter(Boolean);\n\n  return acceptTypes.some((type) => {\n    if (type.startsWith('.'))\n      return type === fileExtension;\n    if (type.endsWith('/*'))\n      return fileType.startsWith(type.slice(0, -1));\n    return type === fileType;\n  });\n}\n\nfunction reportError(message: string): void {\n  set(internalError, message);\n  emit('error', message);\n}\n\nfunction clearInternalError(): void {\n  set(internalError, '');\n}\n\nfunction validate(candidates: File[]): File[] | undefined {\n  if (candidates.length === 0)\n    return undefined;\n\n  if (!multiple && candidates.length > 1) {\n    reportError(t(RUI_I18N_KEYS.fileUpload.tooMany, 'Only one file can be uploaded'));\n    return undefined;\n  }\n\n  for (const file of candidates) {\n    if (!matchesAccept(file, accept)) {\n      reportError(t(RUI_I18N_KEYS.fileUpload.wrongType, { accept }, `Only ${accept} files are allowed`));\n      return undefined;\n    }\n    if (maxSize !== undefined && file.size > maxSize) {\n      const size = formatFileSize(maxSize);\n      reportError(t(RUI_I18N_KEYS.fileUpload.tooLarge, { name: file.name, size }, `${file.name} exceeds the maximum size of ${size}`));\n      return undefined;\n    }\n  }\n\n  return candidates;\n}\n\nfunction setFiles(candidates: File[]): void {\n  const validated = validate(candidates);\n  if (!validated)\n    return;\n  clearInternalError();\n  set(modelValue, multiple ? validated : validated[0]);\n}\n\nfunction removeFile(target?: File): void {\n  clearInternalError();\n  const inputEl = get(input);\n  if (inputEl)\n    inputEl.value = '';\n\n  if (!target || !multiple) {\n    set(modelValue, multiple ? [] : undefined);\n    return;\n  }\n\n  const remaining = get(files).filter(file => file !== target);\n  set(modelValue, remaining);\n}\n\nfunction onSelect(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement) || !target.files)\n    return;\n  const picked = Array.from(target.files);\n  // the model owns the selection; a cleared input fires `change` for the same file again\n  target.value = '';\n  setFiles(picked);\n}\n\nfunction onDrop(dropped: File[] | null): void {\n  if (disabled || noDrop || !dropped || dropped.length === 0)\n    return;\n  setFiles(dropped);\n}\n\nconst { isOverDropZone } = useDropZone(wrapper, {\n  onDrop,\n});\n\nfunction openPicker(): void {\n  if (disabled)\n    return;\n  get(input)?.click();\n}\n\nwatch(() => errorMessages, () => clearInternalError());\n\ndefineExpose({\n  removeFile: () => removeFile(),\n  openPicker,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      ref=\"wrapper\"\n      class=\"p-4 border border-rui-outline dark:border-rui-neutral-400 rounded-rui-panel w-full relative border-dashed transition\"\n      :class=\"{\n        'border-rui-primary! bg-rui-primary-subtle': isOverDropZone && !disabled && !noDrop,\n        'border-rui-error! border-solid! bg-rui-error-subtle': hasError,\n        'border-rui-success! border-solid! bg-rui-success-subtle': uploaded,\n        'opacity-60 pointer-events-none': disabled,\n      }\"\n      :data-disabled=\"disabled || undefined\"\n      :data-uploaded=\"uploaded || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n      :data-drop-active=\"isOverDropZone || undefined\"\n    >\n      <div\n        class=\"flex flex-col items-center justify-center gap-3\"\n        :class=\"{ 'opacity-0': loading }\"\n      >\n        <slot\n          name=\"preview\"\n          :files=\"files\"\n          :remove=\"() => removeFile()\"\n        >\n          <div\n            v-if=\"hasFiles\"\n            class=\"flex flex-col gap-1 w-full\"\n            data-id=\"file-list\"\n          >\n            <div\n              v-for=\"file in files\"\n              :key=\"`${file.name}-${file.lastModified}`\"\n              class=\"flex items-center gap-2 bg-rui-primary-soft dark:bg-rui-primary/20 rounded-full pl-3 pr-1 py-1\"\n              data-id=\"file-item\"\n            >\n              <RuiIcon\n                name=\"lu-file\"\n                color=\"primary\"\n                size=\"20\"\n              />\n              <div class=\"flex-1 overflow-hidden min-w-0\">\n                <div\n                  class=\"text-sm leading-5 truncate\"\n                  :title=\"file.name\"\n                >\n                  {{ file.name }}\n                </div>\n                <div class=\"text-rui-text-secondary text-xs leading-3\">\n                  {{ formatFileSize(file.size) }}\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                class=\"p-1 rounded-full hover:bg-rui-hover transition focus-visible:focus-ring outline-hidden\"\n                :disabled=\"disabled\"\n                :aria-label=\"t(RUI_I18N_KEYS.fileUpload.remove, { name: file.name }, `Remove ${file.name}`)\"\n                data-id=\"remove-file\"\n                @click=\"removeFile(file)\"\n              >\n                <RuiIcon\n                  name=\"lu-x\"\n                  size=\"16\"\n                />\n              </button>\n            </div>\n          </div>\n          <div\n            v-else\n            class=\"h-10 w-10 rounded-full flex items-center justify-center\"\n            :class=\"wellClasses[wellTone]\"\n            data-id=\"icon-well\"\n          >\n            <slot name=\"icon\">\n              <RuiIcon\n                :name=\"wellIcon\"\n                :color=\"wellTone\"\n                :class=\"{ 'dark:text-rui-primary-lighter': wellTone === 'primary' }\"\n              />\n            </slot>\n          </div>\n        </slot>\n\n        <div class=\"text-center text-sm\">\n          <slot name=\"description\">\n            <div class=\"flex items-center justify-center gap-1 flex-wrap\">\n              <span v-if=\"resolvedUploadText\">{{ resolvedUploadText }}</span>\n              <button\n                type=\"button\"\n                class=\"text-rui-primary dark:text-rui-primary-lighter underline disabled:no-underline disabled:text-rui-text-disabled\"\n                :class=\"{ 'first-letter:uppercase': !resolvedUploadText }\"\n                :disabled=\"disabled\"\n                data-id=\"open-picker\"\n                @click=\"openPicker()\"\n              >\n                {{ hasFiles ? resolvedReplaceText : resolvedClickToUploadText }}\n              </button>\n            </div>\n          </slot>\n        </div>\n\n        <input\n          ref=\"input\"\n          type=\"file\"\n          :accept=\"accept\"\n          :multiple=\"multiple\"\n          :disabled=\"disabled\"\n          hidden\n          data-id=\"file-input\"\n          v-bind=\"getNonRootAttrs($attrs, ['class', 'onChange'])\"\n          @change=\"onSelect($event)\"\n        />\n      </div>\n\n      <div\n        v-if=\"loading\"\n        class=\"flex flex-col items-center justify-center absolute h-full w-full top-0 left-0 gap-2\"\n        data-id=\"loading\"\n      >\n        <RuiProgress\n          circular\n          :variant=\"progress === undefined ? 'indeterminate' : 'determinate'\"\n          :value=\"progress\"\n          color=\"primary\"\n          size=\"40\"\n        />\n        <div\n          v-if=\"progressLabel\"\n          class=\"text-xs text-rui-text-secondary\"\n          data-id=\"progress-label\"\n          v-text=\"progressLabel\"\n        />\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :details=\"detailsMode\"\n      :error-messages=\"combinedErrorMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiFileUpload.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createElementVNode","_normalizeClass","_renderSlot","_Fragment","_renderList","_createVNode","RuiIcon","_toDisplayString","_createCommentVNode","_mergeProps","RuiProgress","_createBlock","RuiFormTextDetail"],"sources":["../../../../src/components/forms/file-upload/RuiFileUpload.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends File | File[] | undefined\">\nimport type { Ref } from 'vue';\nimport type { RuiIcons } from '@/icons';\nimport type { InputAttributes } from '@/types/attributes';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { formatFileSize, getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface FileUploadProps {\n  /** File type filter (HTML accept attribute syntax). e.g. '.csv', 'image/*', '.png,.jpg' */\n  accept?: string;\n  /** Allow multiple file selection. */\n  multiple?: boolean;\n  disabled?: boolean;\n  /** Shows a loading overlay (consumer-driven, e.g. while uploading). */\n  loading?: boolean;\n  /** Upload progress 0-100. When provided alongside `loading`, the overlay shows a determinate progress bar with percentage. */\n  progress?: number;\n  /** Renders the success state border/icon. Consumer toggles back to false. */\n  uploaded?: boolean;\n  /** Optional max size per file in bytes; failures emit `error` and set internal error state. */\n  maxSize?: number;\n  /** External error messages (e.g. from Vuelidate). Shown via the standard form detail block. */\n  errorMessages?: string | string[];\n  /** Hint text below the dropzone. */\n  hint?: string;\n  /** Disable drag-and-drop; the dropzone becomes click-only (matches rotki.com use case). */\n  noDrop?: boolean;\n  /**\n   * Replace the default \"Drag and drop or \\{button\\}\" copy. With `noDrop` the default is empty, so only the button shows.\n   * The defaults of this and the other texts, error messages included, come from the `rui.file_upload.*` translation keys.\n   */\n  uploadText?: string;\n  /** Label shown on the inline button when no file is selected. */\n  clickToUploadText?: string;\n  /** Label shown on the inline button when one or more files are already selected. */\n  replaceText?: string;\n  /** The line under the dropzone for its hint and errors: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFileUpload',\n  inheritAttrs: false,\n});\n\n/**\n * The picked file, or `undefined`; with `multiple`, the picked files in an array. `T` is the bound\n * value's type, so a `Ref<File[]>` takes the update as is. The component writes through the wider\n * ref, in the shape `multiple` asks for.\n */\nconst modelValue: Ref<File | File[] | undefined> = defineModel<T>({ required: true });\n\nconst {\n  accept = '*',\n  multiple = false,\n  disabled = false,\n  loading = false,\n  progress = undefined,\n  uploaded = false,\n  maxSize = undefined,\n  errorMessages = [],\n  hint = '',\n  noDrop = false,\n  uploadText = undefined,\n  clickToUploadText = undefined,\n  replaceText = undefined,\n  details = undefined,\n  hideDetails = false,\n} = defineProps<FileUploadProps & /* @vue-ignore */ Omit<InputAttributes, keyof FileUploadProps | 'onError'>>();\n\nconst emit = defineEmits<{\n  error: [message: string];\n}>();\n\ndefineSlots<{\n  preview?: (props: { files: File[]; remove: () => void }) => any;\n  icon?: () => any;\n  description?: () => any;\n}>();\n\nconst { t } = useRuiI8n();\n\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst input = useTemplateRef<HTMLInputElement>('input');\nconst internalError = ref<string>('');\n\nconst files = computed<File[]>(() => {\n  const value = get(modelValue);\n  if (!value)\n    return [];\n  return Array.isArray(value) ? value : [value];\n});\n\nconst hasFiles = computed<boolean>(() => get(files).length > 0);\n\nconst progressLabel = computed<string | undefined>(() => {\n  const value = progress;\n  return value === undefined ? undefined : `${Math.round(value)}%`;\n});\n\nconst combinedErrorMessages = computed<string[]>(() => {\n  const external = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  const internal = get(internalError);\n  return [...external.filter(Boolean), ...(internal ? [internal] : [])];\n});\n\nconst { hasError } = useFormTextDetail(combinedErrorMessages, () => []);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\n// a click-only dropzone does not offer dragging\nconst resolvedUploadText = computed<string>(() => uploadText ?? (noDrop ? '' : t(RUI_I18N_KEYS.fileUpload.dropPrefix, 'Drag and drop or')));\nconst resolvedClickToUploadText = computed<string>(() => clickToUploadText ?? t(RUI_I18N_KEYS.fileUpload.clickToUpload, 'click to upload'));\nconst resolvedReplaceText = computed<string>(() => replaceText ?? t(RUI_I18N_KEYS.fileUpload.replace, 'replace file'));\n\ntype WellTone = 'primary' | 'error' | 'success';\n\n// the icon well follows the dropzone's state, like its border\nconst wellTone = computed<WellTone>(() => {\n  if (get(hasError))\n    return 'error';\n  if (uploaded)\n    return 'success';\n  return 'primary';\n});\n\nconst wellIcon = computed<RuiIcons>(() => {\n  const tone = get(wellTone);\n  if (tone === 'error')\n    return 'lu-circle-alert';\n  if (tone === 'success')\n    return 'lu-circle-check';\n  return 'lu-file-up';\n});\n\n// the 10% tint vanishes on a dark page, so dark doubles it\nconst wellClasses: Record<WellTone, string> = {\n  primary: 'bg-rui-primary-soft dark:bg-rui-primary/20',\n  error: 'bg-rui-error-soft dark:bg-rui-error/20',\n  success: 'bg-rui-success-soft dark:bg-rui-success/20',\n};\n\nfunction matchesAccept(file: File, acceptString: string): boolean {\n  if (!acceptString || acceptString === '*' || acceptString === '*/*')\n    return true;\n\n  const fileName = file.name.toLowerCase();\n  const fileExtension = fileName.includes('.') ? fileName.slice(fileName.lastIndexOf('.')) : '';\n  const fileType = file.type.toLowerCase();\n  const acceptTypes = acceptString.split(',').map(value => value.trim().toLowerCase()).filter(Boolean);\n\n  return acceptTypes.some((type) => {\n    if (type.startsWith('.'))\n      return type === fileExtension;\n    if (type.endsWith('/*'))\n      return fileType.startsWith(type.slice(0, -1));\n    return type === fileType;\n  });\n}\n\nfunction reportError(message: string): void {\n  set(internalError, message);\n  emit('error', message);\n}\n\nfunction clearInternalError(): void {\n  set(internalError, '');\n}\n\nfunction validate(candidates: File[]): File[] | undefined {\n  if (candidates.length === 0)\n    return undefined;\n\n  if (!multiple && candidates.length > 1) {\n    reportError(t(RUI_I18N_KEYS.fileUpload.tooMany, 'Only one file can be uploaded'));\n    return undefined;\n  }\n\n  for (const file of candidates) {\n    if (!matchesAccept(file, accept)) {\n      reportError(t(RUI_I18N_KEYS.fileUpload.wrongType, { accept }, `Only ${accept} files are allowed`));\n      return undefined;\n    }\n    if (maxSize !== undefined && file.size > maxSize) {\n      const size = formatFileSize(maxSize);\n      reportError(t(RUI_I18N_KEYS.fileUpload.tooLarge, { name: file.name, size }, `${file.name} exceeds the maximum size of ${size}`));\n      return undefined;\n    }\n  }\n\n  return candidates;\n}\n\nfunction setFiles(candidates: File[]): void {\n  const validated = validate(candidates);\n  if (!validated)\n    return;\n  clearInternalError();\n  set(modelValue, multiple ? validated : validated[0]);\n}\n\nfunction removeFile(target?: File): void {\n  clearInternalError();\n  const inputEl = get(input);\n  if (inputEl)\n    inputEl.value = '';\n\n  if (!target || !multiple) {\n    set(modelValue, multiple ? [] : undefined);\n    return;\n  }\n\n  const remaining = get(files).filter(file => file !== target);\n  set(modelValue, remaining);\n}\n\nfunction onSelect(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement) || !target.files)\n    return;\n  const picked = Array.from(target.files);\n  // the model owns the selection; a cleared input fires `change` for the same file again\n  target.value = '';\n  setFiles(picked);\n}\n\nfunction onDrop(dropped: File[] | null): void {\n  if (disabled || noDrop || !dropped || dropped.length === 0)\n    return;\n  setFiles(dropped);\n}\n\nconst { isOverDropZone } = useDropZone(wrapper, {\n  onDrop,\n});\n\nfunction openPicker(): void {\n  if (disabled)\n    return;\n  get(input)?.click();\n}\n\nwatch(() => errorMessages, () => clearInternalError());\n\ndefineExpose({\n  removeFile: () => removeFile(),\n  openPicker,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      ref=\"wrapper\"\n      class=\"p-4 border border-rui-outline dark:border-rui-neutral-400 rounded-rui-panel w-full relative border-dashed transition\"\n      :class=\"{\n        'border-rui-primary! bg-rui-primary-subtle': isOverDropZone && !disabled && !noDrop,\n        'border-rui-error! border-solid! bg-rui-error-subtle': hasError,\n        'border-rui-success! border-solid! bg-rui-success-subtle': uploaded,\n        'opacity-60 pointer-events-none': disabled,\n      }\"\n      :data-disabled=\"disabled || undefined\"\n      :data-uploaded=\"uploaded || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n      :data-drop-active=\"isOverDropZone || undefined\"\n    >\n      <div\n        class=\"flex flex-col items-center justify-center gap-3\"\n        :class=\"{ 'opacity-0': loading }\"\n      >\n        <slot\n          name=\"preview\"\n          :files=\"files\"\n          :remove=\"() => removeFile()\"\n        >\n          <div\n            v-if=\"hasFiles\"\n            class=\"flex flex-col gap-1 w-full\"\n            data-id=\"file-list\"\n          >\n            <div\n              v-for=\"file in files\"\n              :key=\"`${file.name}-${file.lastModified}`\"\n              class=\"flex items-center gap-2 bg-rui-primary-soft dark:bg-rui-primary/20 rounded-full pl-3 pr-1 py-1\"\n              data-id=\"file-item\"\n            >\n              <RuiIcon\n                name=\"lu-file\"\n                color=\"primary\"\n                size=\"20\"\n              />\n              <div class=\"flex-1 overflow-hidden min-w-0\">\n                <div\n                  class=\"text-sm leading-5 truncate\"\n                  :title=\"file.name\"\n                >\n                  {{ file.name }}\n                </div>\n                <div class=\"text-rui-text-secondary text-xs leading-3\">\n                  {{ formatFileSize(file.size) }}\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                class=\"p-1 rounded-full hover:bg-rui-hover transition focus-visible:focus-ring outline-hidden\"\n                :disabled=\"disabled\"\n                :aria-label=\"t(RUI_I18N_KEYS.fileUpload.remove, { name: file.name }, `Remove ${file.name}`)\"\n                data-id=\"remove-file\"\n                @click=\"removeFile(file)\"\n              >\n                <RuiIcon\n                  name=\"lu-x\"\n                  size=\"16\"\n                />\n              </button>\n            </div>\n          </div>\n          <div\n            v-else\n            class=\"h-10 w-10 rounded-full flex items-center justify-center\"\n            :class=\"wellClasses[wellTone]\"\n            data-id=\"icon-well\"\n          >\n            <slot name=\"icon\">\n              <RuiIcon\n                :name=\"wellIcon\"\n                :color=\"wellTone\"\n                :class=\"{ 'dark:text-rui-primary-lighter': wellTone === 'primary' }\"\n              />\n            </slot>\n          </div>\n        </slot>\n\n        <div class=\"text-center text-sm\">\n          <slot name=\"description\">\n            <div class=\"flex items-center justify-center gap-1 flex-wrap\">\n              <span v-if=\"resolvedUploadText\">{{ resolvedUploadText }}</span>\n              <button\n                type=\"button\"\n                class=\"text-rui-primary dark:text-rui-primary-lighter underline disabled:no-underline disabled:text-rui-text-disabled\"\n                :class=\"{ 'first-letter:uppercase': !resolvedUploadText }\"\n                :disabled=\"disabled\"\n                data-id=\"open-picker\"\n                @click=\"openPicker()\"\n              >\n                {{ hasFiles ? resolvedReplaceText : resolvedClickToUploadText }}\n              </button>\n            </div>\n          </slot>\n        </div>\n\n        <input\n          ref=\"input\"\n          type=\"file\"\n          :accept=\"accept\"\n          :multiple=\"multiple\"\n          :disabled=\"disabled\"\n          hidden\n          data-id=\"file-input\"\n          v-bind=\"getNonRootAttrs($attrs, ['class', 'onChange'])\"\n          @change=\"onSelect($event)\"\n        />\n      </div>\n\n      <div\n        v-if=\"loading\"\n        class=\"flex flex-col items-center justify-center absolute h-full w-full top-0 left-0 gap-2\"\n        data-id=\"loading\"\n      >\n        <RuiProgress\n          circular\n          :variant=\"progress === undefined ? 'indeterminate' : 'determinate'\"\n          :value=\"progress\"\n          color=\"primary\"\n          size=\"40\"\n        />\n        <div\n          v-if=\"progressLabel\"\n          class=\"text-xs text-rui-text-secondary\"\n          data-id=\"progress-label\"\n          v-text=\"progressLabel\"\n        />\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :details=\"detailsMode\"\n      :error-messages=\"combinedErrorMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/radio-button/radio/RuiRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiRadio.js","names":["_sfc_main"],"sources":["../../../../../src/components/forms/radio-button/radio/RuiRadio.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { checkControlStyles } from '@/components/forms/check-control-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface RadioProps<TValue> {\n  value: TValue;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the control for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  /** Puts the hint or message under the label text instead of under the radio, so a list of radios keeps one text column. */\n  detailsUnderLabel?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiRadio',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue>({ required: false });\n\nconst {\n  value,\n  disabled = false,\n  color,\n  size,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  details = undefined,\n  hideDetails = false,\n  detailsUnderLabel = false,\n  required = false,\n} = defineProps<RadioProps<TValue>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst selected = computed<boolean>(() => get(modelValue) === value);\n\nconst ui = computed<ReturnType<typeof checkControlStyles>>(() => checkControlStyles({\n  size,\n  shape: 'round',\n  disabled,\n  checked: get(selected),\n  validation: get(validation),\n  color: color ?? 'grey',\n  underLabel: detailsUnderLabel,\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement && target.checked)\n    set(modelValue, value);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"selected || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        :checked=\"selected\"\n        type=\"radio\"\n        :class=\"ui.input()\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        :value=\"value\"\n        @input=\"input($event)\"\n      />\n      <div :class=\"ui.control()\">\n        <span\n          :class=\"ui.mark()\"\n          data-mark\n          :data-state=\"selected ? 'checked' : 'unchecked'\"\n        >\n          <span\n            v-if=\"selected\"\n            :class=\"ui.dot()\"\n          />\n        </span>\n      </div>\n      <div\n        v-if=\"label || $slots.default\"\n        :class=\"ui.label()\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          *\n        </span>\n      </div>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :class=\"ui.details()\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiRadio.js","names":["_sfc_main"],"sources":["../../../../../src/components/forms/radio-button/radio/RuiRadio.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { InputAttributes } from '@/types/attributes';\nimport { checkControlStyles } from '@/components/forms/check-control-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type ModelValueEmits, usePropModel } from '@/composables/prop-model';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface RadioProps<TValue> {\n  value: TValue;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the control for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  /** Puts the hint or message under the label text instead of under the radio, so a list of radios keeps one text column. */\n  detailsUnderLabel?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiRadio',\n  inheritAttrs: false,\n});\n\nconst {\n  value,\n  disabled = false,\n  color,\n  size,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  details = undefined,\n  hideDetails = false,\n  detailsUnderLabel = false,\n  required = false,\n  modelValue: modelValueProp,\n} = defineProps<RadioProps<TValue> & {\n  /** The checked radio's value. Optional, and only ever updated to this radio's `value`. */\n  modelValue?: TValue;\n} & /* @vue-ignore */ Omit<InputAttributes, keyof RadioProps<TValue>>>();\n\ndefineEmits<ModelValueEmits<TValue>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\n// a prop and an event rather than `defineModel`, so the update is typed without `undefined`\nconst modelValue = usePropModel('modelValue', () => modelValueProp);\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst selected = computed<boolean>(() => get(modelValue) === value);\n\nconst ui = computed<ReturnType<typeof checkControlStyles>>(() => checkControlStyles({\n  size,\n  shape: 'round',\n  disabled,\n  checked: get(selected),\n  validation: get(validation),\n  color: color ?? 'grey',\n  underLabel: detailsUnderLabel,\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement && target.checked)\n    set(modelValue, value);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      :data-disabled=\"disabled || undefined\"\n      :data-checked=\"selected || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        :checked=\"selected\"\n        type=\"radio\"\n        :class=\"ui.input()\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        :value=\"value\"\n        @input=\"input($event)\"\n      />\n      <div :class=\"ui.control()\">\n        <span\n          :class=\"ui.mark()\"\n          data-mark\n          :data-state=\"selected ? 'checked' : 'unchecked'\"\n        >\n          <span\n            v-if=\"selected\"\n            :class=\"ui.dot()\"\n          />\n        </span>\n      </div>\n      <div\n        v-if=\"label || $slots.default\"\n        :class=\"ui.label()\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          *\n        </span>\n      </div>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :class=\"ui.details()\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/radio-button/radio/RuiRadio.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ContextColorsType } from '../../../../consts/colors.js';
+import type { InputAttributes } from '../../../../types/attributes.js';
 import { type FormDetails } from '../../../../utils/form-text-detail.js';
 export interface RadioProps<TValue> {
     value: TValue;
@@ -19,9 +20,10 @@ export interface RadioProps<TValue> {
 }
 declare const __VLS_export: <TValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(RadioProps<TValue> & {
+        /** The checked radio's value. Optional, and only ever updated to this radio's `value`. */
         modelValue?: TValue;
-    }) & {
-        "onUpdate:modelValue"?: ((value: TValue | undefined) => any) | undefined;
+    } & Omit<InputAttributes, keyof RadioProps<TValue>>) & {
+        "onUpdate:modelValue"?: ((value: TValue) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -30,7 +32,7 @@ declare const __VLS_export: <TValue>(__VLS_props: NonNullable<Awaited<typeof __V
     slots: {
         default?: () => any;
     };
-    emit: (event: "update:modelValue", value: TValue | undefined) => void;
+    emit: (evt: "update:modelValue", value: TValue) => void;
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/forms/radio-button/radio/RuiRadio.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,10 @@
 import { get, set } from "../../../../vendor/@vueuse/shared/dist/index.js";
+import { usePropModel } from "../../../../composables/prop-model.js";
 import { useFormDetails, useFormTextDetail } from "../../../../utils/form-text-detail.js";
 import RuiFormTextDetail_default from "../../../helpers/RuiFormTextDetail.js";
 import { getNonRootAttrs, getRootAttrs } from "../../../../utils/helpers.js";
 import { checkControlStyles } from "../../check-control-styles.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, toDisplayString, unref, useModel } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, toDisplayString, unref } from "vue";
 //#region src/components/forms/radio-button/radio/RuiRadio.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-disabled",
@@ -25,7 +26,7 @@ var RuiRadio_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 	name: "RuiRadio",
 	inheritAttrs: false,
 	__name: "RuiRadio",
-	props: /*@__PURE__*/ mergeModels({
+	props: {
 		value: {},
 		disabled: {
 			type: Boolean,
@@ -49,14 +50,12 @@ var RuiRadio_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		required: {
 			type: Boolean,
 			default: false
-		}
-	}, {
-		"modelValue": { required: false },
-		"modelModifiers": {}
-	}),
+		},
+		modelValue: {}
+	},
 	emits: ["update:modelValue"],
 	setup(__props) {
-		const modelValue = useModel(__props, "modelValue");
+		const modelValue = usePropModel("modelValue", () => __props.modelValue);
 		const { hasError, validation } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
 		const detailsMode = useFormDetails(() => __props.details, () => __props.hideDetails);
 		const selected = computed(() => get(modelValue) === __props.value);