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

package/dist/components/forms/slider/RuiSlider.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSlider.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/slider/RuiSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiSliderTicks from '@/components/forms/slider/RuiSliderTicks.vue';\nimport { HIGHLIGHT_COLOR_MAP, HIGHLIGHT_DEFAULT, SliderInteraction, sliderStyles } from '@/components/forms/slider/slider-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiSliderClassNames {\n  root?: VueClassValue;\n  slider?: VueClassValue;\n  tick?: VueClassValue;\n}\n\nexport interface Props {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  showThumbLabel?: boolean;\n  showTicks?: boolean;\n  hideTrack?: boolean;\n  tickSize?: number;\n  vertical?: boolean;\n  color?: ContextColorsType;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  classNames?: RuiSliderClassNames;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSlider',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ default: 0 });\n\nconst {\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  showThumbLabel = false,\n  showTicks = false,\n  hideTrack = false,\n  vertical = false,\n  tickSize = 2,\n  color = 'primary',\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  classNames,\n  required = false,\n} = defineProps<Props>();\n\nconst BIG_TICK_THRESHOLD = 4;\n\nconst isHovered = ref<boolean>(false);\nconst isFocused = ref<boolean>(false);\nconst isActive = ref<boolean>(false);\n\nconst outer = useTemplateRef<HTMLDivElement>('outer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { hasError } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\n// the label above points at the range input, keeping a consumer's own id\nconst inputId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst { width, height } = useElementBounding(outer);\n\nconst bigTick = computed<boolean>(() => tickSize > BIG_TICK_THRESHOLD);\n\nuseEventListener(document, 'mouseup', () => set(isActive, false));\n\nconst interaction = computed<SliderInteraction>(() => {\n  if (disabled)\n    return SliderInteraction.idle;\n  if (get(isActive))\n    return SliderInteraction.active;\n  if (get(isFocused))\n    return SliderInteraction.focus;\n  if (get(isHovered))\n    return SliderInteraction.hover;\n  return SliderInteraction.idle;\n});\n\n// Layout ui: stable props only (not interaction), used for wrapper/label/outer/inner/input\nconst ui = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n  disabled,\n  vertical,\n  color,\n  bigTick: get(bigTick),\n  hasLabel: !!label,\n}));\n\n// Track ui: includes interaction state, used for slider/thumb/ticks (changes on hover/focus/active)\nconst trackUi = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n  disabled,\n  vertical,\n  interaction: get(interaction),\n  color,\n  bigTick: get(bigTick),\n}));\n\nconst totalTicks = computed<number>(() => (max - min) / step);\n\nconst currentTick = computed<number>(() => Math.round((get(modelValue) - min) / step));\n\nconst trackWidth = computed<string>(() => {\n  const percentage = Math.min(100, Math.max(0, Math.round((get(currentTick) / get(totalTicks)) * 100)));\n  return `${percentage}%`;\n});\n\nconst innerStyle = computed<Record<string, string>>(() => {\n  const w = `${get(width)}px`;\n  const h = `${get(height)}px`;\n  const style: Record<string, string> = { width: vertical ? h : w, height: vertical ? w : h };\n  if (vertical) {\n    style['transform-origin'] = '0 0';\n    style['--rui-slider-shift'] = h;\n  }\n  return style;\n});\n\nconst tickSizePx = computed<string>(() => `${tickSize}px`);\n\nconst ticksStyle = computed<Record<string, string>>(() => {\n  const size = get(tickSizePx);\n  return { margin: `0 calc(${size} / -2)`, width: `calc(100% + ${size})` };\n});\n\nconst tickStyle = computed<Record<string, string>>(() => {\n  const size = get(tickSizePx);\n  return { width: size, height: size };\n});\n\nconst highlightClass = computed<string>(() => get(bigTick) ? HIGHLIGHT_COLOR_MAP[color] : HIGHLIGHT_DEFAULT);\n\nconst tickClassOverride = computed<string | undefined>(() => cn(classNames?.tick));\n\nfunction isHighlightedTick(index: number): boolean {\n  return index <= get(currentTick);\n}\n</script>\n\n<template>\n  <div\n    v-bind=\"getRootAttrs($attrs)\"\n    :class=\"ui.root()\"\n  >\n    <!-- above the rail like any field's label, neutral in every state; the messages below carry the validation -->\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"inputId\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n      :class=\"ui.label()\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      :data-error=\"hasError ? '' : undefined\"\n      data-id=\"slider-wrapper\"\n    >\n      <div\n        ref=\"outer\"\n        :class=\"ui.outer()\"\n      >\n        <div\n          :class=\"ui.inner()\"\n          :style=\"innerStyle\"\n        >\n          <input\n            :id=\"inputId\"\n            v-model.number=\"modelValue\"\n            :class=\"ui.input()\"\n            type=\"range\"\n            :max=\"max\"\n            :min=\"min\"\n            :step=\"step\"\n            :disabled=\"disabled\"\n            :aria-invalid=\"hasError\"\n            :aria-label=\"label || undefined\"\n            :aria-valuetext=\"String(modelValue)\"\n            v-bind=\"getNonRootAttrs($attrs, ['class', 'id'])\"\n            @mouseenter=\"isHovered = true\"\n            @mouseleave=\"isHovered = false\"\n            @focus=\"isFocused = true\"\n            @blur=\"isFocused = false\"\n            @mousedown=\"isActive = true\"\n            @mouseup=\"isActive = false\"\n          />\n          <div :class=\"trackUi.slider()\">\n            <div :class=\"trackUi.sliderInner()\">\n              <div :class=\"trackUi.container({ class: cn(classNames?.slider) })\">\n                <div\n                  v-if=\"!hideTrack\"\n                  :class=\"trackUi.track()\"\n                  :style=\"{ width: trackWidth }\"\n                  data-id=\"slider-track\"\n                />\n                <RuiSliderTicks\n                  v-if=\"showTicks && !disabled\"\n                  :count=\"totalTicks\"\n                  :container-class=\"trackUi.ticks()\"\n                  :container-style=\"ticksStyle\"\n                  :tick-class=\"trackUi.tick()\"\n                  :tick-style=\"tickStyle\"\n                  :hide-track=\"hideTrack\"\n                  :highlight-class=\"highlightClass\"\n                  :tick-class-override=\"tickClassOverride\"\n                  :is-highlighted=\"isHighlightedTick\"\n                />\n              </div>\n              <div\n                :class=\"trackUi.thumb()\"\n                :style=\"{ left: trackWidth }\"\n                data-id=\"slider-thumb\"\n              />\n              <div\n                v-if=\"showThumbLabel && !disabled\"\n                :class=\"trackUi.thumbLabel()\"\n                :style=\"{ left: trackWidth }\"\n                data-id=\"slider-thumb-label\"\n              >\n                {{ modelValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\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":"RuiSlider.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/slider/RuiSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiSliderTicks from '@/components/forms/slider/RuiSliderTicks.vue';\nimport { HIGHLIGHT_COLOR_MAP, HIGHLIGHT_DEFAULT, SliderInteraction, sliderStyles } from '@/components/forms/slider/slider-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiSliderClassNames {\n  root?: VueClassValue;\n  slider?: VueClassValue;\n  tick?: VueClassValue;\n}\n\nexport interface Props {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  showThumbLabel?: boolean;\n  showTicks?: boolean;\n  hideTrack?: boolean;\n  tickSize?: number;\n  vertical?: boolean;\n  color?: ContextColorsType;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  classNames?: RuiSliderClassNames;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSlider',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ default: 0 });\n\nconst {\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  showThumbLabel = false,\n  showTicks = false,\n  hideTrack = false,\n  vertical = false,\n  tickSize = 2,\n  color = 'primary',\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  classNames,\n  required = false,\n} = defineProps<Props>();\n\nconst BIG_TICK_THRESHOLD = 4;\n\nconst isHovered = ref<boolean>(false);\nconst isFocused = ref<boolean>(false);\nconst isActive = ref<boolean>(false);\n\nconst outer = useTemplateRef<HTMLDivElement>('outer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { hasError } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\n// the label above points at the range input, keeping a consumer's own id\nconst inputId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst { width, height } = useElementBounding(outer);\n\nconst bigTick = computed<boolean>(() => tickSize > BIG_TICK_THRESHOLD);\n\nuseEventListener(document, 'mouseup', () => set(isActive, false));\n\nconst interaction = computed<SliderInteraction>(() => {\n  if (disabled)\n    return SliderInteraction.idle;\n  if (get(isActive))\n    return SliderInteraction.active;\n  if (get(isFocused))\n    return SliderInteraction.focus;\n  if (get(isHovered))\n    return SliderInteraction.hover;\n  return SliderInteraction.idle;\n});\n\n// Layout ui: stable props only (not interaction), used for wrapper/label/outer/inner/input\nconst ui = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n  disabled,\n  vertical,\n  color,\n  bigTick: get(bigTick),\n  hasLabel: !!label,\n}));\n\n// Track ui: includes interaction state, used for slider/thumb/ticks (changes on hover/focus/active)\nconst trackUi = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n  disabled,\n  vertical,\n  interaction: get(interaction),\n  color,\n  bigTick: get(bigTick),\n}));\n\nconst totalTicks = computed<number>(() => (max - min) / step);\n\nconst currentTick = computed<number>(() => Math.round((get(modelValue) - min) / step));\n\nconst trackWidth = computed<string>(() => {\n  const percentage = Math.min(100, Math.max(0, Math.round((get(currentTick) / get(totalTicks)) * 100)));\n  return `${percentage}%`;\n});\n\nconst innerStyle = computed<Record<string, string>>(() => {\n  const w = `${get(width)}px`;\n  const h = `${get(height)}px`;\n  const style: Record<string, string> = { width: vertical ? h : w, height: vertical ? w : h };\n  if (vertical) {\n    style['transform-origin'] = '0 0';\n    style['--rui-slider-shift'] = h;\n  }\n  return style;\n});\n\nconst tickSizePx = computed<string>(() => `${tickSize}px`);\n\nconst ticksStyle = computed<Record<string, string>>(() => {\n  const size = get(tickSizePx);\n  return { margin: `0 calc(${size} / -2)`, width: `calc(100% + ${size})` };\n});\n\nconst tickStyle = computed<Record<string, string>>(() => {\n  const size = get(tickSizePx);\n  return { width: size, height: size };\n});\n\nconst highlightClass = computed<string>(() => get(bigTick) ? HIGHLIGHT_COLOR_MAP[color] : HIGHLIGHT_DEFAULT);\n\nconst tickClassOverride = computed<string | undefined>(() => cn(classNames?.tick));\n\nfunction isHighlightedTick(index: number): boolean {\n  return index <= get(currentTick);\n}\n</script>\n\n<template>\n  <div\n    v-bind=\"getRootAttrs($attrs)\"\n    :class=\"ui.root()\"\n  >\n    <!-- above the rail like any field's label, neutral in every state; the messages below carry the validation -->\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"inputId\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n      :class=\"ui.label()\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      :data-error=\"hasError ? '' : undefined\"\n      data-id=\"slider-wrapper\"\n    >\n      <div\n        ref=\"outer\"\n        :class=\"ui.outer()\"\n      >\n        <div\n          :class=\"ui.inner()\"\n          :style=\"innerStyle\"\n        >\n          <input\n            :id=\"inputId\"\n            v-model.number=\"modelValue\"\n            :class=\"ui.input()\"\n            type=\"range\"\n            :max=\"max\"\n            :min=\"min\"\n            :step=\"step\"\n            :disabled=\"disabled\"\n            :aria-invalid=\"hasError\"\n            :aria-label=\"label || undefined\"\n            :aria-valuetext=\"String(modelValue)\"\n            v-bind=\"getNonRootAttrs($attrs, ['class', 'id'])\"\n            @mouseenter=\"isHovered = true\"\n            @mouseleave=\"isHovered = false\"\n            @focus=\"isFocused = true\"\n            @blur=\"isFocused = false\"\n            @mousedown=\"isActive = true\"\n            @mouseup=\"isActive = false\"\n          />\n          <div :class=\"trackUi.slider()\">\n            <div :class=\"trackUi.sliderInner()\">\n              <div :class=\"trackUi.container({ class: cn(classNames?.slider) })\">\n                <div\n                  v-if=\"!hideTrack\"\n                  :class=\"trackUi.track()\"\n                  :style=\"{ width: trackWidth }\"\n                  data-id=\"slider-track\"\n                />\n                <RuiSliderTicks\n                  v-if=\"showTicks && !disabled\"\n                  :count=\"totalTicks\"\n                  :container-class=\"trackUi.ticks()\"\n                  :container-style=\"ticksStyle\"\n                  :tick-class=\"trackUi.tick()\"\n                  :tick-style=\"tickStyle\"\n                  :hide-track=\"hideTrack\"\n                  :highlight-class=\"highlightClass\"\n                  :tick-class-override=\"tickClassOverride\"\n                  :is-highlighted=\"isHighlightedTick\"\n                />\n              </div>\n              <div\n                :class=\"trackUi.thumb()\"\n                :style=\"{ left: trackWidth }\"\n                data-id=\"slider-thumb\"\n              />\n              <div\n                v-if=\"showThumbLabel && !disabled\"\n                :class=\"trackUi.thumbLabel()\"\n                :style=\"{ left: trackWidth }\"\n                data-id=\"slider-thumb-label\"\n              >\n                {{ modelValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\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/switch/RuiSwitch.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { tv } from "../../../utils/tv.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
 import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.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/switch/RuiSwitch.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-disabled",

package/dist/components/forms/text-area/RuiTextArea.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,6 @@
 import { useLabelPlacement } from "../../../composables/defaults/field.js";
+import { get, set, watchDebounced } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { useFocus } from "../../../vendor/@vueuse/core/dist/index.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import RuiButton_default from "../../buttons/button/RuiButton.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
@@ -9,8 +11,6 @@ import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
 import { textAreaStyles } from "./text-area-styles.js";
 import { usePrependAppendWidth } from "../../../composables/forms/use-prepend-append-width.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onMounted, openBlock, ref, renderSlot, unref, useAttrs, useId, useModel, useTemplateRef, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
-import { useFocus, watchDebounced } from "@vueuse/core";
-import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/forms/text-area/RuiTextArea.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["value"];
 var _hoisted_2 = [
@@ -95,27 +95,27 @@ var RuiTextArea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			const id = attrs.id;
 			return typeof id === "string" && id ? id : generatedId;
 		});
-		const showClearIcon = computed(() => __props.clearable && !!get$1(modelValue) && !__props.disabled && !__props.readonly);
+		const showClearIcon = computed(() => __props.clearable && !!get(modelValue) && !__props.disabled && !__props.readonly);
 		const effectiveTextColor = computed(() => {
-			if (get$1(hasError)) return "error";
-			if (get$1(hasSuccess)) return "success";
-			if (__props.textColor && !get$1(hasMessages)) return __props.textColor;
+			if (get(hasError)) return "error";
+			if (get(hasSuccess)) return "success";
+			if (__props.textColor && !get(hasMessages)) return __props.textColor;
 		});
-		const effectiveColor = computed(() => get$1(validation) ?? __props.color);
+		const effectiveColor = computed(() => get(validation) ?? __props.color);
 		const ui = computed(() => textAreaStyles({
 			dense: __props.dense,
 			disabled: __props.disabled,
 			readonly: __props.readonly,
 			noResize: __props.noResize,
-			hovered: get$1(isHovered),
-			focused: get$1(focused),
-			color: get$1(effectiveColor),
-			textColor: get$1(effectiveTextColor),
-			validation: get$1(validation)
+			hovered: get(isHovered),
+			focused: get(focused),
+			color: get(effectiveColor),
+			textColor: get(effectiveTextColor),
+			validation: get(validation)
 		}));
 		const wrapperStyle = computed(() => ({
-			"--prepend-w": get$1(prependWidth),
-			"--append-w": get$1(appendWidth)
+			"--prepend-w": get(prependWidth),
+			"--append-w": get(appendWidth)
 		}));
 		const fieldStyles = computed(() => {
 			const height = Number(__props.rowHeight);
@@ -126,14 +126,14 @@ var RuiTextArea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			return value;
 		});
 		function clearIconClicked() {
-			set$1(modelValue, "");
+			set(modelValue, "");
 			emit("click:clear");
 		}
 		function computeFieldHeight(newVal, oldVal) {
 			if (!__props.autoGrow) return;
-			const field = get$1(textarea);
-			const fieldValue = newVal ?? get$1(modelValue);
-			const fieldSizer = get$1(textareaSizer);
+			const field = get(textarea);
+			const fieldValue = newVal ?? get(modelValue);
+			const fieldSizer = get(textareaSizer);
 			if (!(field && fieldSizer)) return;
 			nextTick(() => {
 				const sizerHeight = fieldSizer.scrollHeight;
@@ -146,13 +146,13 @@ var RuiTextArea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		watch(focused, (value) => {
 			if (value) {
 				cancelClearHide();
-				set$1(showClearButton, true);
-			} else delayClearHide(() => set$1(showClearButton, false), 500);
+				set(showClearButton, true);
+			} else delayClearHide(() => set(showClearButton, false), 500);
 		});
 		watchDebounced(modelValue, computeFieldHeight, { debounce: 50 });
 		onMounted(computeFieldHeight);
 		__expose({
-			focus: () => get$1(textarea)?.focus(),
+			focus: () => get(textarea)?.focus(),
 			element: textarea
 		});
 		return (_ctx, _cache) => {

package/dist/components/forms/text-area/RuiTextArea.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTextArea.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/text-area/RuiTextArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textAreaStyles } from '@/components/forms/text-area/text-area-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextAreaProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  noResize?: boolean;\n  minRows?: number | string;\n  maxRows?: number | string;\n  rowHeight?: number | string;\n  autoGrow?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextArea',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  labelPlacement = undefined,\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  noResize = false,\n  minRows = 2,\n  rowHeight = 1.5,\n  maxRows = undefined,\n  autoGrow = false,\n  required = false,\n} = defineProps<TextAreaProps>();\n\nconst emit = defineEmits<{\n  'click:clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea');\nconst textareaSizer = useTemplateRef<HTMLTextAreaElement>('textareaSizer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(textarea);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst textareaId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textAreaStyles>>(() => textAreaStyles({\n  dense,\n  disabled,\n  readonly,\n  noResize,\n  hovered: get(isHovered),\n  focused: get(focused),\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n}));\n\nconst wrapperStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst fieldStyles = computed<{ minHeight: string; maxHeight?: string }>(() => {\n  const height = Number(rowHeight);\n  const min = Number(minRows);\n  const max = Number(maxRows);\n  const value: { minHeight: string; maxHeight?: string } = {\n    minHeight: `${min * height + 0.75}rem`,\n  };\n  if (max)\n    value.maxHeight = `${max * height + 0.75}rem`;\n\n  return value;\n});\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string): void {\n  if (!autoGrow)\n    return;\n\n  const field = get(textarea);\n  const fieldValue = newVal ?? get(modelValue);\n  const fieldSizer = get(textareaSizer);\n  if (!(field && fieldSizer))\n    return;\n\n  nextTick(() => {\n    const sizerHeight = fieldSizer.scrollHeight;\n    const fieldHeight = field.scrollHeight;\n    let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n    if (oldVal && oldVal.length > fieldValue.length)\n      height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n    field.style.height = height;\n  });\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    // a refocus within the delay keeps the button\n    cancelClearHide();\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\nwatchDebounced(modelValue, computeFieldHeight, { debounce: 50 });\n\nonMounted(computeFieldHeight);\n\ndefineExpose({\n  focus: () => get(textarea)?.focus(),\n  element: textarea,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"textareaId\"\n      :hidden=\"placement === 'hidden'\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      :style=\"wrapperStyle\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"prependIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n      <div :class=\"ui.inputWrapper()\">\n        <textarea\n          v-if=\"autoGrow\"\n          ref=\"textareaSizer\"\n          :value=\"modelValue\"\n          :class=\"ui.textareaSizer()\"\n          :style=\"fieldStyles\"\n          aria-hidden=\"true\"\n          disabled\n          readonly\n        />\n        <textarea\n          :id=\"textareaId\"\n          ref=\"textarea\"\n          v-model=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.textarea()\"\n          :style=\"fieldStyles\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n        />\n        <fieldset :class=\"ui.fieldset()\" />\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          data-id=\"clear-btn\"\n          aria-label=\"Clear\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"appendIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\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":"RuiTextArea.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/text-area/RuiTextArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textAreaStyles } from '@/components/forms/text-area/text-area-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextAreaProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  noResize?: boolean;\n  minRows?: number | string;\n  maxRows?: number | string;\n  rowHeight?: number | string;\n  autoGrow?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextArea',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  labelPlacement = undefined,\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  noResize = false,\n  minRows = 2,\n  rowHeight = 1.5,\n  maxRows = undefined,\n  autoGrow = false,\n  required = false,\n} = defineProps<TextAreaProps>();\n\nconst emit = defineEmits<{\n  'click:clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea');\nconst textareaSizer = useTemplateRef<HTMLTextAreaElement>('textareaSizer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(textarea);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst textareaId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textAreaStyles>>(() => textAreaStyles({\n  dense,\n  disabled,\n  readonly,\n  noResize,\n  hovered: get(isHovered),\n  focused: get(focused),\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n}));\n\nconst wrapperStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst fieldStyles = computed<{ minHeight: string; maxHeight?: string }>(() => {\n  const height = Number(rowHeight);\n  const min = Number(minRows);\n  const max = Number(maxRows);\n  const value: { minHeight: string; maxHeight?: string } = {\n    minHeight: `${min * height + 0.75}rem`,\n  };\n  if (max)\n    value.maxHeight = `${max * height + 0.75}rem`;\n\n  return value;\n});\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string): void {\n  if (!autoGrow)\n    return;\n\n  const field = get(textarea);\n  const fieldValue = newVal ?? get(modelValue);\n  const fieldSizer = get(textareaSizer);\n  if (!(field && fieldSizer))\n    return;\n\n  nextTick(() => {\n    const sizerHeight = fieldSizer.scrollHeight;\n    const fieldHeight = field.scrollHeight;\n    let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n    if (oldVal && oldVal.length > fieldValue.length)\n      height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n    field.style.height = height;\n  });\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    // a refocus within the delay keeps the button\n    cancelClearHide();\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\nwatchDebounced(modelValue, computeFieldHeight, { debounce: 50 });\n\nonMounted(computeFieldHeight);\n\ndefineExpose({\n  focus: () => get(textarea)?.focus(),\n  element: textarea,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"textareaId\"\n      :hidden=\"placement === 'hidden'\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      :style=\"wrapperStyle\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"prependIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n      <div :class=\"ui.inputWrapper()\">\n        <textarea\n          v-if=\"autoGrow\"\n          ref=\"textareaSizer\"\n          :value=\"modelValue\"\n          :class=\"ui.textareaSizer()\"\n          :style=\"fieldStyles\"\n          aria-hidden=\"true\"\n          disabled\n          readonly\n        />\n        <textarea\n          :id=\"textareaId\"\n          ref=\"textarea\"\n          v-model=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.textarea()\"\n          :style=\"fieldStyles\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n        />\n        <fieldset :class=\"ui.fieldset()\" />\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          data-id=\"clear-btn\"\n          aria-label=\"Clear\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"appendIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\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/text-field/RuiTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTextField.js","names":[],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textFieldStyles } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextField',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  labelPlacement = undefined,\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n  'focus-input': [event: Event];\n  'blur': [event: Event];\n  'remove': [value: unknown];\n  'clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(inputRef);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst inputId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n  dense,\n  disabled,\n  readonly,\n  hovered: get(isHovered),\n  focused: get(focused),\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement) {\n    set(modelValue, target.value);\n  }\n}\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('clear');\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    // a refocus within the delay keeps the button\n    cancelClearHide();\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\ndefineExpose({\n  setSelectionRange: (start: number, end: number) => {\n    get(inputRef)?.setSelectionRange(start, end);\n  },\n  focus: () => get(inputRef)?.focus(),\n  element: inputRef,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"inputId\"\n      :hidden=\"placement === 'hidden'\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"prependIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n      <div\n        :class=\"ui.inputWrapper()\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          :id=\"inputId\"\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n          @blur=\"emit('blur', $event)\"\n          @remove=\"emit('remove', $event)\"\n        />\n        <fieldset :class=\"ui.fieldset()\" />\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          data-id=\"clear-btn\"\n          aria-label=\"Clear\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"appendIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTextField.js","names":[],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textFieldStyles } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextField',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  labelPlacement = undefined,\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n  'focus-input': [event: Event];\n  'blur': [event: Event];\n  'remove': [value: unknown];\n  'clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  /** Rich hint content under the field, in place of the `hint` text; error and success messages still take precedence. */\n  hint?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(inputRef);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst inputId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n  dense,\n  disabled,\n  readonly,\n  hovered: get(isHovered),\n  focused: get(focused),\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement) {\n    set(modelValue, target.value);\n  }\n}\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('clear');\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    // a refocus within the delay keeps the button\n    cancelClearHide();\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\ndefineExpose({\n  setSelectionRange: (start: number, end: number) => {\n    get(inputRef)?.setSelectionRange(start, end);\n  },\n  focus: () => get(inputRef)?.focus(),\n  element: inputRef,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"inputId\"\n      :hidden=\"placement === 'hidden'\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"prependIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n      <div\n        :class=\"ui.inputWrapper()\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          :id=\"inputId\"\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n          @blur=\"emit('blur', $event)\"\n          @remove=\"emit('remove', $event)\"\n        />\n        <fieldset :class=\"ui.fieldset()\" />\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          data-id=\"clear-btn\"\n          aria-label=\"Clear\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"appendIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    >\n      <template\n        v-if=\"$slots.hint\"\n        #hint\n      >\n        <slot name=\"hint\" />\n      </template>\n    </RuiFormTextDetail>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/text-field/RuiTextField.vue.d.ts

@@ -24,6 +24,8 @@ type __VLS_Props = TextFieldProps;
 type __VLS_Slots = {
     prepend?: () => any;
     append?: () => any;
+    /** Rich hint content under the field, in place of the `hint` text; error and success messages still take precedence. */
+    hint?: () => any;
 };
 type __VLS_ModelProps = {
     modelValue: string;

package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,6 @@
 import { useLabelPlacement } from "../../../composables/defaults/field.js";
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { useFocus } from "../../../vendor/@vueuse/core/dist/index.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import RuiButton_default from "../../buttons/button/RuiButton.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
@@ -7,9 +9,7 @@ import { useTimeoutManager } from "../../../composables/timeout-manager.js";
 import RuiFieldLabel_default from "../field-label/RuiFieldLabel.js";
 import { textFieldStyles } from "./text-field-styles.js";
 import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
-import { useFocus } from "@vueuse/core";
-import { get as get$1, set as set$1 } from "@vueuse/shared";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 //#region src/components/forms/text-field/RuiTextField.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"id",
@@ -84,42 +84,42 @@ var RuiTextField_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			const id = attrs.id;
 			return typeof id === "string" && id ? id : generatedId;
 		});
-		const showClearIcon = computed(() => __props.clearable && !!get$1(modelValue) && !__props.disabled && !__props.readonly);
+		const showClearIcon = computed(() => __props.clearable && !!get(modelValue) && !__props.disabled && !__props.readonly);
 		const effectiveTextColor = computed(() => {
-			if (get$1(hasError)) return "error";
-			if (get$1(hasSuccess)) return "success";
-			if (__props.textColor && !get$1(hasMessages)) return __props.textColor;
+			if (get(hasError)) return "error";
+			if (get(hasSuccess)) return "success";
+			if (__props.textColor && !get(hasMessages)) return __props.textColor;
 		});
-		const effectiveColor = computed(() => get$1(validation) ?? __props.color);
+		const effectiveColor = computed(() => get(validation) ?? __props.color);
 		const ui = computed(() => textFieldStyles({
 			dense: __props.dense,
 			disabled: __props.disabled,
 			readonly: __props.readonly,
-			hovered: get$1(isHovered),
-			focused: get$1(focused),
-			color: get$1(effectiveColor),
-			textColor: get$1(effectiveTextColor),
-			validation: get$1(validation)
+			hovered: get(isHovered),
+			focused: get(focused),
+			color: get(effectiveColor),
+			textColor: get(effectiveTextColor),
+			validation: get(validation)
 		}));
 		function input(event) {
 			const target = event.target;
-			if (target instanceof HTMLInputElement) set$1(modelValue, target.value);
+			if (target instanceof HTMLInputElement) set(modelValue, target.value);
 		}
 		function clearIconClicked() {
-			set$1(modelValue, "");
+			set(modelValue, "");
 			emit("clear");
 		}
 		watch(focused, (value) => {
 			if (value) {
 				cancelClearHide();
-				set$1(showClearButton, true);
-			} else delayClearHide(() => set$1(showClearButton, false), 500);
+				set(showClearButton, true);
+			} else delayClearHide(() => set(showClearButton, false), 500);
 		});
 		__expose({
 			setSelectionRange: (start, end) => {
-				get$1(inputRef)?.setSelectionRange(start, end);
+				get(inputRef)?.setSelectionRange(start, end);
 			},
-			focus: () => get$1(inputRef)?.focus(),
+			focus: () => get(inputRef)?.focus(),
 			element: inputRef
 		});
 		return (_ctx, _cache) => {
@@ -207,7 +207,11 @@ var RuiTextField_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					"error-messages": __props.errorMessages,
 					"success-messages": __props.successMessages,
 					hint: __props.hint
-				}, null, 8, [
+				}, createSlots({ _: 2 }, [_ctx.$slots.hint ? {
+					name: "hint",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "hint")]),
+					key: "0"
+				} : void 0]), 1032, [
 					"class",
 					"error-messages",
 					"success-messages",

package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTextField.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textFieldStyles } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextField',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  labelPlacement = undefined,\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n  'focus-input': [event: Event];\n  'blur': [event: Event];\n  'remove': [value: unknown];\n  'clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(inputRef);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst inputId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n  dense,\n  disabled,\n  readonly,\n  hovered: get(isHovered),\n  focused: get(focused),\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement) {\n    set(modelValue, target.value);\n  }\n}\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('clear');\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    // a refocus within the delay keeps the button\n    cancelClearHide();\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\ndefineExpose({\n  setSelectionRange: (start: number, end: number) => {\n    get(inputRef)?.setSelectionRange(start, end);\n  },\n  focus: () => get(inputRef)?.focus(),\n  element: inputRef,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"inputId\"\n      :hidden=\"placement === 'hidden'\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"prependIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n      <div\n        :class=\"ui.inputWrapper()\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          :id=\"inputId\"\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n          @blur=\"emit('blur', $event)\"\n          @remove=\"emit('remove', $event)\"\n        />\n        <fieldset :class=\"ui.fieldset()\" />\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          data-id=\"clear-btn\"\n          aria-label=\"Clear\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"appendIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\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":"RuiTextField.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textFieldStyles } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextField',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  labelPlacement = undefined,\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n  'focus-input': [event: Event];\n  'blur': [event: Event];\n  'remove': [value: unknown];\n  'clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  /** Rich hint content under the field, in place of the `hint` text; error and success messages still take precedence. */\n  hint?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(inputRef);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst inputId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n  dense,\n  disabled,\n  readonly,\n  hovered: get(isHovered),\n  focused: get(focused),\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement) {\n    set(modelValue, target.value);\n  }\n}\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('clear');\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    // a refocus within the delay keeps the button\n    cancelClearHide();\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\ndefineExpose({\n  setSelectionRange: (start: number, end: number) => {\n    get(inputRef)?.setSelectionRange(start, end);\n  },\n  focus: () => get(inputRef)?.focus(),\n  element: inputRef,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"inputId\"\n      :hidden=\"placement === 'hidden'\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"prependIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n      <div\n        :class=\"ui.inputWrapper()\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          :id=\"inputId\"\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n          @blur=\"emit('blur', $event)\"\n          @remove=\"emit('remove', $event)\"\n        />\n        <fieldset :class=\"ui.fieldset()\" />\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          data-id=\"clear-btn\"\n          aria-label=\"Clear\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"appendIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    >\n      <template\n        v-if=\"$slots.hint\"\n        #hint\n      >\n        <slot name=\"hint\" />\n      </template>\n    </RuiFormTextDetail>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/helpers/RuiFormTextDetail.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFormTextDetail.js","names":[],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-6\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error dark:text-rui-error-lighter text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      {{ hint }}\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiFormTextDetail.js","names":[],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\ndefineSlots<{\n  /** Rich hint content, shown in place of the `hint` text while there is no error or success message. */\n  hint?: () => any;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-6\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error dark:text-rui-error-lighter text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"$slots.hint || hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      <slot name=\"hint\">\n        {{ hint }}\n      </slot>\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":""}

package/dist/components/helpers/RuiFormTextDetail.vue.d.ts

@@ -3,6 +3,16 @@ type __VLS_Props = {
     successMessages?: string | string[];
     hint?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Slots = {
+    /** Rich hint content, shown in place of the `hint` text while there is no error or success message. */
+    hint?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
 import { useFormTextDetail } from "../../utils/form-text-detail.js";
-import { TransitionGroup, createBlock, createCommentVNode, createElementBlock, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { TransitionGroup, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
 //#region src/components/helpers/RuiFormTextDetail.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: "error",
@@ -34,8 +34,8 @@ var RuiFormTextDetail_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 				"leave-to-class": "opacity-0 -translate-y-2 h-0",
 				appear: ""
 			}, {
-				default: withCtx(() => [unref(hasError) ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(unref(formattedErrorMessages)[0]), 1)) : unref(hasSuccess) ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(formattedSuccessMessages)[0]), 1)) : __props.hint ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)]),
-				_: 1
+				default: withCtx(() => [unref(hasError) ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(unref(formattedErrorMessages)[0]), 1)) : unref(hasSuccess) ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(formattedSuccessMessages)[0]), 1)) : _ctx.$slots.hint || __props.hint ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "hint", {}, () => [createTextVNode(toDisplayString(__props.hint), 1)])])) : createCommentVNode("", true)]),
+				_: 3
 			});
 		};
 	}

package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-6\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error dark:text-rui-error-lighter text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      {{ hint }}\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,EAAE,wBAAwB,0BAA0B,UAAU,eAClE,wBACQ,QAAA,qBACA,QAAA,eACR;;GAIA,OAAA,UAAA,GAAA,YAgCkB,iBAAA;IA/BhB,KAAI;IACJ,OAAM;IACN,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,QAAA;;IAEA,SAAA,cAMM,CALE,MAAA,QAAA,KADR,UAAA,GAAA,mBAMM,OANN,YAMM,gBADD,MAAA,sBAAA,CAAsB,CAAA,EAAA,GAAA,CAAA,KAGd,MAAA,UAAA,KADb,UAAA,GAAA,mBAMM,OANN,YAMM,gBADD,MAAA,wBAAA,CAAwB,CAAA,EAAA,GAAA,CAAA,KAGhB,QAAA,QADb,UAAA,GAAA,mBAMM,OANN,YAMM,gBADD,QAAA,IAAI,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\ndefineSlots<{\n  /** Rich hint content, shown in place of the `hint` text while there is no error or success message. */\n  hint?: () => any;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-6\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error dark:text-rui-error-lighter text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"$slots.hint || hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      <slot name=\"hint\">\n        {{ hint }}\n      </slot>\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,EAAE,wBAAwB,0BAA0B,UAAU,eAClE,wBACQ,QAAA,qBACA,QAAA,eACR;;GAIA,OAAA,UAAA,GAAA,YAkCkB,iBAAA;IAjChB,KAAI;IACJ,OAAM;IACN,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,QAAA;;IAEA,SAAA,cAMM,CALE,MAAA,QAAA,KADR,UAAA,GAAA,mBAMM,OANN,YAMM,gBADD,MAAA,sBAAA,CAAsB,CAAA,EAAA,GAAA,CAAA,KAGd,MAAA,UAAA,KADb,UAAA,GAAA,mBAMM,OANN,YAMM,gBADD,MAAA,wBAAA,CAAwB,CAAA,EAAA,GAAA,CAAA,KAGhBA,KAAAA,OAAO,QAAQ,QAAA,QAD5B,UAAA,GAAA,mBAQM,OARN,YAQM,CAHJ,WAEO,KAAA,QAAA,QAAA,CAAA,SAAA,CADF,gBAAA,gBAAA,QAAA,IAAI,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { useIcons } from "../../composables/icons.js";
+import { get, objectOmit } from "../../vendor/@vueuse/shared/dist/index.js";
 import { cn, tv } from "../../utils/tv.js";
 import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, renderList, resolveDynamicComponent, unref } from "vue";
-import { get, objectOmit } from "@vueuse/shared";
 //#region src/components/icons/RuiIcon.vue?vue&type=script&setup=true&lang.ts
 /**
 * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is

package/dist/components/logos/RuiLogo.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { useLogoOptions } from "../../composables/defaults/logo.js";
+import { get, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import logo_default from "./logo.js";
 import { getVerifiedLogoUrl, removeVerifiedLogoUrl, setVerifiedLogoUrl } from "./verified-logo.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, toDisplayString, unref, useTemplateRef, watch, watchEffect } from "vue";
-import { get, set } from "@vueuse/shared";
 //#region src/components/logos/RuiLogo.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src"];
 var _hoisted_2 = ["src"];

package/dist/components/overlays/badge/RuiBadge.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
+import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { tv } from "../../../utils/tv.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import { BadgePlacement, BadgeRounded, BadgeSize } from "./badge-props.js";
 import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
-import { get } from "@vueuse/shared";
 //#region src/components/overlays/badge/RuiBadge.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-placement",

package/dist/components/overlays/dialog/RuiDialog.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { cn, tv } from "../../../utils/tv.js";
 import { ButtonGroupBoundary } from "../../buttons/button-group/button-group-context.js";
 import { useTimeoutManager } from "../../../composables/timeout-manager.js";
 import { getNonRootAttrs, getRootAttrs, transformPropsUnit } from "../../../utils/helpers.js";
 import { useDismissableOverlay } from "../../../composables/overlay-stack.js";
 import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
-import { get, set } from "@vueuse/shared";
 //#region src/components/overlays/dialog/RuiDialog.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
 var _hoisted_2 = ["data-bottom-sheet"];