@rotki/ui-library 2.27.0 → 3.0.0-beta.2

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

@@ -0,0 +1,7 @@
+import RuiFieldLabel_vue_vue_type_script_setup_true_lang_default from "./RuiFieldLabel.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/forms/field-label/RuiFieldLabel.vue
+var RuiFieldLabel_default = RuiFieldLabel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiFieldLabel_default as default };
+
+//# sourceMappingURL=RuiFieldLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiFieldLabel.js","names":[],"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":""}

package/dist/components/forms/field-label/RuiFieldLabel.vue.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The label a field shows above itself when its label placement is `top`, or
+ * keeps for screen readers alone when it is `hidden`. A text input links it
+ * through `for`; a select or picker, whose activator is not a labelable
+ * element, points at its `id` with `aria-labelledby` instead.
+ */
+export interface FieldLabelProps {
+    text: string;
+    hidden?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    for?: string;
+    id?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<FieldLabelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FieldLabelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,57 @@
+import { tv } from "../../../utils/tv.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"];
+var RuiFieldLabel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RuiFieldLabel",
+	__name: "RuiFieldLabel",
+	props: {
+		text: {},
+		hidden: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		for: { default: () => void 0 },
+		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
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", {
+				id: __props.id,
+				for: __props.for,
+				class: normalizeClass(unref(ui).root()),
+				"data-id": "field-label"
+			}, [createTextVNode(toDisplayString(__props.text) + " ", 1), __props.required ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(unref(ui).required()),
+				"aria-hidden": "true"
+			}, " * ", 2)) : createCommentVNode("", true)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RuiFieldLabel_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiFieldLabel.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiFieldLabel.vue_vue_type_script_setup_true_lang.js","names":[],"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,OAAA,UAAA,GAAA,mBAcQ,SAAA;IAbL,IAAI,QAAA;IACJ,KAAK,QAAA;IACL,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IACf,WAAQ;GAEL,GAAA,CAAA,gBAAA,gBAAA,QAAA,IAAI,IAAG,KACV,CAAA,GACQ,QAAA,YADR,UAAA,GAAA,mBAMO,QAAA;;IAJJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;IACnB,eAAY;GACb,GAAA,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiFileUpload.js","names":[],"sources":["../../../../src/components/forms/file-upload/RuiFileUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { 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  /** Replace the default \"Drag and drop or \\{button\\}\" copy. */\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  /** Hide the bottom hint/error details strip. */\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 = 'Drag and drop or',\n  clickToUploadText = 'click to upload',\n  replaceText = 'replace file',\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 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, () => []);\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('Only one file can be uploaded');\n    return undefined;\n  }\n\n  for (const file of candidates) {\n    if (!matchesAccept(file, accept)) {\n      reportError(`Only ${accept} files are allowed`);\n      return undefined;\n    }\n    if (maxSize !== undefined && file.size > maxSize) {\n      reportError(`${file.name} exceeds the maximum size of ${formatFileSize(maxSize)}`);\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 as HTMLInputElement;\n  if (!target?.files)\n    return;\n  setFiles(Array.from(target.files));\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-grey-300 dark:border-rui-grey-800 rounded-md w-full relative border-dashed transition\"\n      :class=\"{\n        '!border-rui-primary bg-rui-primary/[0.08]': isOverDropZone && !disabled && !noDrop,\n        '!border-rui-error !border-solid bg-rui-error/[0.08]': hasError,\n        '!border-rui-success !border-solid bg-rui-success/[0.08]': 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/[0.08] 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-primary/[0.16] transition\"\n                :disabled=\"disabled\"\n                :aria-label=\"`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=\"uploaded ? 'bg-rui-success/[0.12]' : 'bg-rui-primary/[0.12]'\"\n          >\n            <slot name=\"icon\">\n              <RuiIcon\n                :name=\"uploaded ? 'lu-circle-check' : 'lu-file-up'\"\n                :color=\"uploaded ? 'success' : '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>{{ uploadText }}</span>\n              <button\n                type=\"button\"\n                class=\"text-rui-primary underline disabled:no-underline disabled:text-rui-text-disabled\"\n                :disabled=\"disabled\"\n                data-id=\"open-picker\"\n                @click=\"openPicker()\"\n              >\n                {{ hasFiles ? replaceText : clickToUploadText }}\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=\"!hideDetails\"\n      :error-messages=\"combinedErrorMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiFileUpload.js","names":[],"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 { 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  /** Replace the default \"Drag and drop or \\{button\\}\" copy. With `noDrop` the default is empty, so only the button shows. */\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  /** Hide the bottom hint/error details strip. */\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 = 'click to upload',\n  replaceText = 'replace file',\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 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, () => []);\n\n// a click-only dropzone does not offer dragging\nconst resolvedUploadText = computed<string>(() => uploadText ?? (noDrop ? '' : 'Drag and drop or'));\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('Only one file can be uploaded');\n    return undefined;\n  }\n\n  for (const file of candidates) {\n    if (!matchesAccept(file, accept)) {\n      reportError(`Only ${accept} files are allowed`);\n      return undefined;\n    }\n    if (maxSize !== undefined && file.size > maxSize) {\n      reportError(`${file.name} exceeds the maximum size of ${formatFileSize(maxSize)}`);\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=\"`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              />\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 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 ? replaceText : clickToUploadText }}\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=\"!hideDetails\"\n      :error-messages=\"combinedErrorMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -18,7 +18,7 @@ export interface FileUploadProps {
     hint?: string;
     /** Disable drag-and-drop; the dropzone becomes click-only (matches rotki.com use case). */
     noDrop?: boolean;
-    /** Replace the default "Drag and drop or \{button\}" copy. */
+    /** Replace the default "Drag and drop or \{button\}" copy. With `noDrop` the default is empty, so only the button shows. */
     uploadText?: string;
     /** Label shown on the inline button when no file is selected. */
     clickToUploadText?: string;

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

@@ -1,11 +1,11 @@
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { useDropZone } from "../../../vendor/@vueuse/core/dist/index.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import RuiProgress_default from "../../progress/RuiProgress.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
 import { formatFileSize, getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch } from "vue";
-import { useDropZone } from "@vueuse/core";
-import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/forms/file-upload/RuiFileUpload.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-disabled",
@@ -28,18 +28,19 @@ var _hoisted_6 = [
 ];
 var _hoisted_7 = { class: "text-center text-sm" };
 var _hoisted_8 = { class: "flex items-center justify-center gap-1 flex-wrap" };
-var _hoisted_9 = ["disabled"];
-var _hoisted_10 = [
+var _hoisted_9 = { key: 0 };
+var _hoisted_10 = ["disabled"];
+var _hoisted_11 = [
 	"accept",
 	"multiple",
 	"disabled"
 ];
-var _hoisted_11 = {
+var _hoisted_12 = {
 	key: 0,
 	class: "flex flex-col items-center justify-center absolute h-full w-full top-0 left-0 gap-2",
 	"data-id": "loading"
 };
-var _hoisted_12 = ["textContent"];
+var _hoisted_13 = ["textContent"];
 var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiFileUpload",
 	inheritAttrs: false,
@@ -70,7 +71,7 @@ var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			type: Boolean,
 			default: false
 		},
-		uploadText: { default: "Drag and drop or" },
+		uploadText: { default: () => void 0 },
 		clickToUploadText: { default: "click to upload" },
 		replaceText: { default: "replace file" },
 		hideDetails: {
@@ -89,21 +90,38 @@ var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		const input = useTemplateRef("input");
 		const internalError = ref("");
 		const files = computed(() => {
-			const value = get$1(modelValue);
+			const value = get(modelValue);
 			if (!value) return [];
 			return Array.isArray(value) ? value : [value];
 		});
-		const hasFiles = computed(() => get$1(files).length > 0);
+		const hasFiles = computed(() => get(files).length > 0);
 		const progressLabel = computed(() => {
 			const value = __props.progress;
 			return value === void 0 ? void 0 : `${Math.round(value)}%`;
 		});
 		const combinedErrorMessages = computed(() => {
 			const external = Array.isArray(__props.errorMessages) ? __props.errorMessages : [__props.errorMessages];
-			const internal = get$1(internalError);
+			const internal = get(internalError);
 			return [...external.filter(Boolean), ...internal ? [internal] : []];
 		});
 		const { hasError } = useFormTextDetail(combinedErrorMessages, () => []);
+		const resolvedUploadText = computed(() => __props.uploadText ?? (__props.noDrop ? "" : "Drag and drop or"));
+		const wellTone = computed(() => {
+			if (get(hasError)) return "error";
+			if (__props.uploaded) return "success";
+			return "primary";
+		});
+		const wellIcon = computed(() => {
+			const tone = get(wellTone);
+			if (tone === "error") return "lu-circle-alert";
+			if (tone === "success") return "lu-circle-check";
+			return "lu-file-up";
+		});
+		const wellClasses = {
+			primary: "bg-rui-primary-soft dark:bg-rui-primary/20",
+			error: "bg-rui-error-soft dark:bg-rui-error/20",
+			success: "bg-rui-success-soft dark:bg-rui-success/20"
+		};
 		function matchesAccept(file, acceptString) {
 			if (!acceptString || acceptString === "*" || acceptString === "*/*") return true;
 			const fileName = file.name.toLowerCase();
@@ -116,11 +134,11 @@ var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			});
 		}
 		function reportError(message) {
-			set$1(internalError, message);
+			set(internalError, message);
 			emit("error", message);
 		}
 		function clearInternalError() {
-			set$1(internalError, "");
+			set(internalError, "");
 		}
 		function validate(candidates) {
 			if (candidates.length === 0) return void 0;
@@ -144,23 +162,25 @@ var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			const validated = validate(candidates);
 			if (!validated) return;
 			clearInternalError();
-			set$1(modelValue, __props.multiple ? validated : validated[0]);
+			set(modelValue, __props.multiple ? validated : validated[0]);
 		}
 		function removeFile(target) {
 			clearInternalError();
-			const inputEl = get$1(input);
+			const inputEl = get(input);
 			if (inputEl) inputEl.value = "";
 			if (!target || !__props.multiple) {
-				set$1(modelValue, __props.multiple ? [] : void 0);
+				set(modelValue, __props.multiple ? [] : void 0);
 				return;
 			}
-			const remaining = get$1(files).filter((file) => file !== target);
-			set$1(modelValue, remaining);
+			const remaining = get(files).filter((file) => file !== target);
+			set(modelValue, remaining);
 		}
 		function onSelect(event) {
 			const target = event.target;
-			if (!target?.files) return;
-			setFiles(Array.from(target.files));
+			if (!(target instanceof HTMLInputElement) || !target.files) return;
+			const picked = Array.from(target.files);
+			target.value = "";
+			setFiles(picked);
 		}
 		function onDrop(dropped) {
 			if (__props.disabled || __props.noDrop || !dropped || dropped.length === 0) return;
@@ -169,7 +189,7 @@ var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		const { isOverDropZone } = useDropZone(wrapper, { onDrop });
 		function openPicker() {
 			if (__props.disabled) return;
-			get$1(input)?.click();
+			get(input)?.click();
 		}
 		watch(() => __props.errorMessages, () => clearInternalError());
 		__expose({
@@ -180,10 +200,10 @@ var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [createElementVNode("div", {
 				ref_key: "wrapper",
 				ref: wrapper,
-				class: normalizeClass(["p-4 border border-rui-grey-300 dark:border-rui-grey-800 rounded-md w-full relative border-dashed transition", {
-					"!border-rui-primary bg-rui-primary/[0.08]": unref(isOverDropZone) && !__props.disabled && !__props.noDrop,
-					"!border-rui-error !border-solid bg-rui-error/[0.08]": unref(hasError),
-					"!border-rui-success !border-solid bg-rui-success/[0.08]": __props.uploaded,
+				class: normalizeClass(["p-4 border border-rui-outline dark:border-rui-neutral-400 rounded-rui-panel w-full relative border-dashed transition", {
+					"border-rui-primary! bg-rui-primary-subtle": unref(isOverDropZone) && !__props.disabled && !__props.noDrop,
+					"border-rui-error! border-solid! bg-rui-error-subtle": unref(hasError),
+					"border-rui-success! border-solid! bg-rui-success-subtle": __props.uploaded,
 					"opacity-60 pointer-events-none": __props.disabled
 				}]),
 				"data-disabled": __props.disabled || void 0,
@@ -197,7 +217,7 @@ var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				}, () => [unref(hasFiles) ? (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(files), (file) => {
 					return openBlock(), createElementBlock("div", {
 						key: `${file.name}-${file.lastModified}`,
-						class: "flex items-center gap-2 bg-rui-primary/[0.08] rounded-full pl-3 pr-1 py-1",
+						class: "flex items-center gap-2 bg-rui-primary-soft dark:bg-rui-primary/20 rounded-full pl-3 pr-1 py-1",
 						"data-id": "file-item"
 					}, [
 						createVNode(RuiIcon_default, {
@@ -211,7 +231,7 @@ var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						}, toDisplayString(file.name), 9, _hoisted_4), createElementVNode("div", _hoisted_5, toDisplayString(unref(formatFileSize)(file.size)), 1)]),
 						createElementVNode("button", {
 							type: "button",
-							class: "p-1 rounded-full hover:bg-rui-primary/[0.16] transition",
+							class: "p-1 rounded-full hover:bg-rui-hover transition focus-visible:focus-ring outline-hidden",
 							disabled: __props.disabled,
 							"aria-label": `Remove ${file.name}`,
 							"data-id": "remove-file",
@@ -223,18 +243,19 @@ var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					]);
 				}), 128))])) : (openBlock(), createElementBlock("div", {
 					key: 1,
-					class: normalizeClass(["h-10 w-10 rounded-full flex items-center justify-center", __props.uploaded ? "bg-rui-success/[0.12]" : "bg-rui-primary/[0.12]"])
+					class: normalizeClass(["h-10 w-10 rounded-full flex items-center justify-center", wellClasses[unref(wellTone)]]),
+					"data-id": "icon-well"
 				}, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(RuiIcon_default, {
-					name: __props.uploaded ? "lu-circle-check" : "lu-file-up",
-					color: __props.uploaded ? "success" : "primary"
+					name: unref(wellIcon),
+					color: unref(wellTone)
 				}, null, 8, ["name", "color"])])], 2))]),
-				createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "description", {}, () => [createElementVNode("div", _hoisted_8, [createElementVNode("span", null, toDisplayString(__props.uploadText), 1), createElementVNode("button", {
+				createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "description", {}, () => [createElementVNode("div", _hoisted_8, [unref(resolvedUploadText) ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(resolvedUploadText)), 1)) : createCommentVNode("", true), createElementVNode("button", {
 					type: "button",
-					class: "text-rui-primary underline disabled:no-underline disabled:text-rui-text-disabled",
+					class: normalizeClass(["text-rui-primary underline disabled:no-underline disabled:text-rui-text-disabled", { "first-letter:uppercase": !unref(resolvedUploadText) }]),
 					disabled: __props.disabled,
 					"data-id": "open-picker",
 					onClick: _cache[0] || (_cache[0] = ($event) => openPicker())
-				}, toDisplayString(unref(hasFiles) ? __props.replaceText : __props.clickToUploadText), 9, _hoisted_9)])])]),
+				}, toDisplayString(unref(hasFiles) ? __props.replaceText : __props.clickToUploadText), 11, _hoisted_10)])])]),
 				createElementVNode("input", mergeProps({
 					ref_key: "input",
 					ref: input,
@@ -244,8 +265,8 @@ var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					disabled: __props.disabled,
 					hidden: "",
 					"data-id": "file-input"
-				}, unref(getNonRootAttrs)(_ctx.$attrs, ["class", "onChange"]), { onChange: _cache[1] || (_cache[1] = ($event) => onSelect($event)) }), null, 16, _hoisted_10)
-			], 2), __props.loading ? (openBlock(), createElementBlock("div", _hoisted_11, [createVNode(RuiProgress_default, {
+				}, unref(getNonRootAttrs)(_ctx.$attrs, ["class", "onChange"]), { onChange: _cache[1] || (_cache[1] = ($event) => onSelect($event)) }), null, 16, _hoisted_11)
+			], 2), __props.loading ? (openBlock(), createElementBlock("div", _hoisted_12, [createVNode(RuiProgress_default, {
 				circular: "",
 				variant: __props.progress === void 0 ? "indeterminate" : "determinate",
 				value: __props.progress,
@@ -256,7 +277,7 @@ var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				class: "text-xs text-rui-text-secondary",
 				"data-id": "progress-label",
 				textContent: toDisplayString(unref(progressLabel))
-			}, null, 8, _hoisted_12)) : createCommentVNode("", true)])) : createCommentVNode("", true)], 10, _hoisted_1), !__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
+			}, null, 8, _hoisted_13)) : createCommentVNode("", true)])) : createCommentVNode("", true)], 10, _hoisted_1), !__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
 				key: 0,
 				"error-messages": unref(combinedErrorMessages),
 				hint: __props.hint

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"],"sources":["../../../../src/components/forms/file-upload/RuiFileUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { 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  /** Replace the default \"Drag and drop or \\{button\\}\" copy. */\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  /** Hide the bottom hint/error details strip. */\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 = 'Drag and drop or',\n  clickToUploadText = 'click to upload',\n  replaceText = 'replace file',\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 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, () => []);\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('Only one file can be uploaded');\n    return undefined;\n  }\n\n  for (const file of candidates) {\n    if (!matchesAccept(file, accept)) {\n      reportError(`Only ${accept} files are allowed`);\n      return undefined;\n    }\n    if (maxSize !== undefined && file.size > maxSize) {\n      reportError(`${file.name} exceeds the maximum size of ${formatFileSize(maxSize)}`);\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 as HTMLInputElement;\n  if (!target?.files)\n    return;\n  setFiles(Array.from(target.files));\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-grey-300 dark:border-rui-grey-800 rounded-md w-full relative border-dashed transition\"\n      :class=\"{\n        '!border-rui-primary bg-rui-primary/[0.08]': isOverDropZone && !disabled && !noDrop,\n        '!border-rui-error !border-solid bg-rui-error/[0.08]': hasError,\n        '!border-rui-success !border-solid bg-rui-success/[0.08]': 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/[0.08] 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-primary/[0.16] transition\"\n                :disabled=\"disabled\"\n                :aria-label=\"`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=\"uploaded ? 'bg-rui-success/[0.12]' : 'bg-rui-primary/[0.12]'\"\n          >\n            <slot name=\"icon\">\n              <RuiIcon\n                :name=\"uploaded ? 'lu-circle-check' : 'lu-file-up'\"\n                :color=\"uploaded ? 'success' : '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>{{ uploadText }}</span>\n              <button\n                type=\"button\"\n                class=\"text-rui-primary underline disabled:no-underline disabled:text-rui-text-disabled\"\n                :disabled=\"disabled\"\n                data-id=\"open-picker\"\n                @click=\"openPicker()\"\n              >\n                {{ hasFiles ? replaceText : clickToUploadText }}\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=\"!hideDetails\"\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"],"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 { 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  /** Replace the default \"Drag and drop or \\{button\\}\" copy. With `noDrop` the default is empty, so only the button shows. */\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  /** Hide the bottom hint/error details strip. */\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 = 'click to upload',\n  replaceText = 'replace file',\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 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, () => []);\n\n// a click-only dropzone does not offer dragging\nconst resolvedUploadText = computed<string>(() => uploadText ?? (noDrop ? '' : 'Drag and drop or'));\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('Only one file can be uploaded');\n    return undefined;\n  }\n\n  for (const file of candidates) {\n    if (!matchesAccept(file, accept)) {\n      reportError(`Only ${accept} files are allowed`);\n      return undefined;\n    }\n    if (maxSize !== undefined && file.size > maxSize) {\n      reportError(`${file.name} exceeds the maximum size of ${formatFileSize(maxSize)}`);\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=\"`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              />\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 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 ? replaceText : clickToUploadText }}\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=\"!hideDetails\"\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":[],"sources":["../../../../../src/components/forms/radio-button/radio/RuiRadio.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { checkControlStyles, getCheckControlIconSize } from '@/components/forms/check-control-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { 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  hideDetails?: 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  hideDetails = false,\n  required = false,\n} = defineProps<RadioProps<TValue>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst selected = computed<boolean>(() => get(modelValue) === value);\n\nconst ui = computed<ReturnType<typeof checkControlStyles>>(() => checkControlStyles({\n  size,\n  disabled,\n  checked: get(selected),\n  validation: get(validation),\n  color,\n}));\n\nconst iconSize = computed<number>(() => getCheckControlIconSize(size));\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        <RuiIcon\n          v-if=\"selected\"\n          name=\"lu-radio-button-fill\"\n          :size=\"iconSize\"\n        />\n        <RuiIcon\n          v-else\n          name=\"lu-checkbox-blank-circle\"\n          :size=\"iconSize\"\n        />\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=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiRadio.js","names":[],"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 { 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  hideDetails?: 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  hideDetails = false,\n  required = false,\n} = defineProps<RadioProps<TValue>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\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}));\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=\"!hideDetails\"\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_vue_type_script_setup_true_lang.js

@@ -1,10 +1,9 @@
-import RuiIcon_default from "../../../icons/RuiIcon.js";
+import { get, set } from "../../../../vendor/@vueuse/shared/dist/index.js";
 import { useFormTextDetail } from "../../../../utils/form-text-detail.js";
 import RuiFormTextDetail_default from "../../../helpers/RuiFormTextDetail.js";
 import { getNonRootAttrs, getRootAttrs } from "../../../../utils/helpers.js";
-import { checkControlStyles, getCheckControlIconSize } from "../../check-control-styles.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 { get, set } from "@vueuse/shared";
 //#region src/components/forms/radio-button/radio/RuiRadio.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-disabled",
@@ -17,7 +16,8 @@ var _hoisted_2 = [
 	"aria-invalid",
 	"value"
 ];
-var _hoisted_3 = {
+var _hoisted_3 = ["data-state"];
+var _hoisted_4 = {
 	key: 0,
 	class: "text-rui-error"
 };
@@ -56,12 +56,12 @@ var RuiRadio_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const selected = computed(() => get(modelValue) === __props.value);
 		const ui = computed(() => checkControlStyles({
 			size: __props.size,
+			shape: "round",
 			disabled: __props.disabled,
 			checked: get(selected),
 			validation: get(validation),
-			color: __props.color
+			color: __props.color ?? "grey"
 		}));
-		const iconSize = computed(() => getCheckControlIconSize(__props.size));
 		function input(event) {
 			const target = event.target;
 			if (target instanceof HTMLInputElement && target.checked) set(modelValue, __props.value);
@@ -83,19 +83,18 @@ var RuiRadio_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					value: __props.value,
 					onInput: _cache[0] || (_cache[0] = ($event) => input($event))
 				}), null, 16, _hoisted_2),
-				createElementVNode("div", { class: normalizeClass(unref(ui).control()) }, [unref(selected) ? (openBlock(), createBlock(RuiIcon_default, {
+				createElementVNode("div", { class: normalizeClass(unref(ui).control()) }, [createElementVNode("span", {
+					class: normalizeClass(unref(ui).mark()),
+					"data-mark": "",
+					"data-state": unref(selected) ? "checked" : "unchecked"
+				}, [unref(selected) ? (openBlock(), createElementBlock("span", {
 					key: 0,
-					name: "lu-radio-button-fill",
-					size: unref(iconSize)
-				}, null, 8, ["size"])) : (openBlock(), createBlock(RuiIcon_default, {
-					key: 1,
-					name: "lu-checkbox-blank-circle",
-					size: unref(iconSize)
-				}, null, 8, ["size"]))], 2),
+					class: normalizeClass(unref(ui).dot())
+				}, null, 2)) : createCommentVNode("", true)], 10, _hoisted_3)], 2),
 				__props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: normalizeClass(unref(ui).label())
-				}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", _hoisted_3, " ﹡ ")) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)
+				}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", _hoisted_4, " * ")) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)
 			], 10, _hoisted_1), !__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
 				key: 0,
 				"error-messages": __props.errorMessages,

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

@@ -1 +1 @@
-{"version":3,"file":"RuiRadio.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../../src/components/forms/radio-button/radio/RuiRadio.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport { checkControlStyles, getCheckControlIconSize } from '@/components/forms/check-control-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { 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  hideDetails?: 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  hideDetails = false,\n  required = false,\n} = defineProps<RadioProps<TValue>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst selected = computed<boolean>(() => get(modelValue) === value);\n\nconst ui = computed<ReturnType<typeof checkControlStyles>>(() => checkControlStyles({\n  size,\n  disabled,\n  checked: get(selected),\n  validation: get(validation),\n  color,\n}));\n\nconst iconSize = computed<number>(() => getCheckControlIconSize(size));\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        <RuiIcon\n          v-if=\"selected\"\n          name=\"lu-radio-button-fill\"\n          :size=\"iconSize\"\n        />\n        <RuiIcon\n          v-else\n          name=\"lu-checkbox-blank-circle\"\n          :size=\"iconSize\"\n        />\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=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,aAAa,SAAmB,SAAA,YAAoB;EAmB1D,MAAM,EAAE,UAAU,eAAe,wBACzB,QAAA,qBACA,QAAA,eACR;EAEA,MAAM,WAAW,eAAwB,IAAI,UAAU,MAAM,QAAA,KAAK;EAElE,MAAM,KAAK,eAAsD,mBAAmB;GAClF,MAAG,QAAA;GACH,UAAO,QAAA;GACP,SAAS,IAAI,QAAQ;GACrB,YAAY,IAAI,UAAU;GAC1B,OAAI,QAAA;EACN,CAAC,CAAC;EAEF,MAAM,WAAW,eAAuB,wBAAwB,QAAA,IAAI,CAAC;EAErE,SAAS,MAAM,OAAoB;GACjC,MAAM,SAAS,MAAM;GACrB,IAAI,kBAAkB,oBAAoB,OAAO,SAC/C,IAAI,YAAY,QAAA,KAAK;EACzB;;GAIE,OAAA,UAAA,GAAA,mBAgDM,OAAA,eAAA,mBAhDO,MAAA,YAAA,CAAY,CAACA,KAAAA,MAAM,CAAA,CAAA,GAAA,CAC9B,mBAwCQ,SAAA;IAvCL,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IACjB,iBAAe,QAAA,YAAY,KAAA;IAC3B,gBAAc,MAAA,QAAA,KAAY,KAAA;IAC1B,cAAY,MAAA,QAAA,IAAQ,KAAQ,KAAA;;IAE7B,mBASE,SATF,WASE;KARC,SAAS,MAAA,QAAA;KACV,MAAK;KACJ,OAAO,MAAA,EAAA,CAAE,CAAC,MAAK;KACf,UAAU,QAAA;KACV,gBAAc,MAAA,QAAA;IACP,GAAA,MAAA,eAAA,CAAe,CAACA,KAAAA,MAAM,GAAA;KAC7B,OAAO,QAAA;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAM,MAAM;;IAEtB,mBAWM,OAAA,EAXA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA,EAAA,GAAA,CAEb,MAAA,QAAA,KADR,UAAA,GAAA,YAIE,iBAAA;;KAFA,MAAK;KACJ,MAAM,MAAA,QAAA;IAET,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,MAAA,UAAA,GAAA,YAIE,iBAAA;;KAFA,MAAK;KACJ,MAAM,MAAA,QAAA;;IAIH,QAAA,SAASC,KAAAA,OAAO,WADxB,UAAA,GAAA,mBAWM,OAAA;;KATH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;IAEhB,GAAA,CAAA,WAAwB,KAAA,QAAA,WAAA,CAAA,SAAA,CAAf,gBAAA,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,GAEN,QAAA,YADR,UAAA,GAAA,mBAKO,QALP,YAGC,KAED,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;GAIK,GAAA,IAAA,UAAA,GAAA,CAAA,QAAA,eADT,UAAA,GAAA,YAKE,2BAAA;;IAHC,kBAAgB,QAAA;IAChB,oBAAkB,QAAA;IAClB,MAAM,QAAA"}
+{"version":3,"file":"RuiRadio.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"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 { 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  hideDetails?: 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  hideDetails = false,\n  required = false,\n} = defineProps<RadioProps<TValue>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\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}));\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=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,MAAM,aAAa,SAAmB,SAAA,YAAoB;EAmB1D,MAAM,EAAE,UAAU,eAAe,wBACzB,QAAA,qBACA,QAAA,eACR;EAEA,MAAM,WAAW,eAAwB,IAAI,UAAU,MAAM,QAAA,KAAK;EAElE,MAAM,KAAK,eAAsD,mBAAmB;GAClF,MAAG,QAAA;GACH,OAAO;GACP,UAAO,QAAA;GACP,SAAS,IAAI,QAAQ;GACrB,YAAY,IAAI,UAAU;GAC1B,OAAO,QAAA,SAAS;EAClB,CAAC,CAAC;EAEF,SAAS,MAAM,OAAoB;GACjC,MAAM,SAAS,MAAM;GACrB,IAAI,kBAAkB,oBAAoB,OAAO,SAC/C,IAAI,YAAY,QAAA,KAAK;EACzB;;GAIE,OAAA,UAAA,GAAA,mBAgDM,OAAA,eAAA,mBAhDO,MAAA,YAAA,CAAY,CAACA,KAAAA,MAAM,CAAA,CAAA,GAAA,CAC9B,mBAwCQ,SAAA;IAvCL,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IACjB,iBAAe,QAAA,YAAY,KAAA;IAC3B,gBAAc,MAAA,QAAA,KAAY,KAAA;IAC1B,cAAY,MAAA,QAAA,IAAQ,KAAQ,KAAA;;IAE7B,mBASE,SATF,WASE;KARC,SAAS,MAAA,QAAA;KACV,MAAK;KACJ,OAAO,MAAA,EAAA,CAAE,CAAC,MAAK;KACf,UAAU,QAAA;KACV,gBAAc,MAAA,QAAA;IACP,GAAA,MAAA,eAAA,CAAe,CAACA,KAAAA,MAAM,GAAA;KAC7B,OAAO,QAAA;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAM,MAAM;;IAEtB,mBAWM,OAAA,EAXA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA,EAAA,GAAA,CACrB,mBASO,QAAA;KARJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;KACf,aAAA;KACC,cAAY,MAAA,QAAA,IAAQ,YAAA;IAGb,GAAA,CAAA,MAAA,QAAA,KADR,UAAA,GAAA,mBAGE,QAAA;;KADC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,IAAG,CAAA;;IAKZ,QAAA,SAASC,KAAAA,OAAO,WADxB,UAAA,GAAA,mBAWM,OAAA;;KATH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;IAEhB,GAAA,CAAA,WAAwB,KAAA,QAAA,WAAA,CAAA,SAAA,CAAf,gBAAA,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,GAEN,QAAA,YADR,UAAA,GAAA,mBAKO,QALP,YAGC,KAED,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;GAIK,GAAA,IAAA,UAAA,GAAA,CAAA,QAAA,eADT,UAAA,GAAA,YAKE,2BAAA;;IAHC,kBAAgB,QAAA;IAChB,oBAAkB,QAAA;IAClB,MAAM,QAAA"}