@rotki/ui-library 2.23.5 → 2.25.0

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

@@ -2,8 +2,9 @@ import { cn } 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 RuiSliderTicks_default from "./RuiSliderTicks.js";
 import { HIGHLIGHT_COLOR_MAP, HIGHLIGHT_DEFAULT, SliderInteraction, sliderStyles } from "./slider-styles.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, useModel, useTemplateRef, vModelText, withDirectives } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, toDisplayString, unref, useModel, useTemplateRef, vModelText, withDirectives } from "vue";
 import { useElementBounding, useEventListener } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/forms/slider/RuiSlider.vue?vue&type=script&setup=true&lang.ts
@@ -179,18 +180,27 @@ var RuiSlider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					class: normalizeClass(unref(trackUi).track()),
 					style: normalizeStyle({ width: unref(trackWidth) }),
 					"data-id": "slider-track"
-				}, null, 6)) : createCommentVNode("", true), __props.showTicks && !__props.disabled ? (openBlock(), createElementBlock("div", {
+				}, null, 6)) : createCommentVNode("", true), __props.showTicks && !__props.disabled ? (openBlock(), createBlock(RuiSliderTicks_default, {
 					key: 1,
-					class: normalizeClass(unref(trackUi).ticks()),
-					style: normalizeStyle(unref(ticksStyle)),
-					"data-id": "slider-ticks"
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(totalTicks) + 1, (i) => {
-					return openBlock(), createElementBlock("span", {
-						key: i,
-						class: normalizeClass([unref(trackUi).tick(), __props.hideTrack ? unref(tickClassOverride) : [isHighlightedTick(i - 1) && unref(highlightClass), !isHighlightedTick(i - 1) && unref(tickClassOverride)]]),
-						style: normalizeStyle(unref(tickStyle))
-					}, null, 6);
-				}), 128))], 6)) : createCommentVNode("", true)], 2),
+					count: unref(totalTicks),
+					"container-class": unref(trackUi).ticks(),
+					"container-style": unref(ticksStyle),
+					"tick-class": unref(trackUi).tick(),
+					"tick-style": unref(tickStyle),
+					"hide-track": __props.hideTrack,
+					"highlight-class": unref(highlightClass),
+					"tick-class-override": unref(tickClassOverride),
+					"is-highlighted": isHighlightedTick
+				}, null, 8, [
+					"count",
+					"container-class",
+					"container-style",
+					"tick-class",
+					"tick-style",
+					"hide-track",
+					"highlight-class",
+					"tick-class-override"
+				])) : createCommentVNode("", true)], 2),
 				createElementVNode("div", {
 					class: normalizeClass([unref(trackUi).thumb(), unref(trackUi).thumbRipple()]),
 					style: normalizeStyle({ left: unref(trackWidth) }),

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 { 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  /** @deprecated Use `classNames.slider` instead */\n  sliderClass?: string;\n  /** @deprecated Use `classNames.tick` instead */\n  tickClass?: string;\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  sliderClass = '',\n  tickClass = '',\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 { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\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  validation: get(validation),\n  color,\n  bigTick: get(bigTick),\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['--tw-translate-y'] = 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) ?? (tickClass || undefined));\n\nfunction isHighlightedTick(index: number): boolean {\n  return index <= get(currentTick);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div\n        v-if=\"label\"\n        :class=\"ui.label()\"\n      >\n        {{ label }}\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </div>\n      <div\n        ref=\"outer\"\n        :class=\"ui.outer()\"\n      >\n        <div\n          :class=\"ui.inner()\"\n          :style=\"innerStyle\"\n        >\n          <input\n            v-model=\"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)\"\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) ?? sliderClass })\">\n                <div\n                  v-if=\"!hideTrack\"\n                  :class=\"trackUi.track()\"\n                  :style=\"{ width: trackWidth }\"\n                  data-id=\"slider-track\"\n                />\n                <div\n                  v-if=\"showTicks && !disabled\"\n                  :class=\"trackUi.ticks()\"\n                  :style=\"ticksStyle\"\n                  data-id=\"slider-ticks\"\n                >\n                  <span\n                    v-for=\"i in totalTicks + 1\"\n                    :key=\"i\"\n                    :class=\"[\n                      trackUi.tick(),\n                      hideTrack\n                        ? tickClassOverride\n                        : [\n                          isHighlightedTick(i - 1) && highlightClass,\n                          !isHighlightedTick(i - 1) && tickClassOverride,\n                        ],\n                    ]\"\n                    :style=\"tickStyle\"\n                  />\n                </div>\n              </div>\n              <div\n                :class=\"[trackUi.thumb(), trackUi.thumbRipple()]\"\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    </label>\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 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  /** @deprecated Use `classNames.slider` instead */\n  sliderClass?: string;\n  /** @deprecated Use `classNames.tick` instead */\n  tickClass?: string;\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  sliderClass = '',\n  tickClass = '',\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 { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\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  validation: get(validation),\n  color,\n  bigTick: get(bigTick),\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['--tw-translate-y'] = 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) ?? (tickClass || undefined));\n\nfunction isHighlightedTick(index: number): boolean {\n  return index <= get(currentTick);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div\n        v-if=\"label\"\n        :class=\"ui.label()\"\n      >\n        {{ label }}\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </div>\n      <div\n        ref=\"outer\"\n        :class=\"ui.outer()\"\n      >\n        <div\n          :class=\"ui.inner()\"\n          :style=\"innerStyle\"\n        >\n          <input\n            v-model=\"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)\"\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) ?? sliderClass })\">\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(), trackUi.thumbRipple()]\"\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    </label>\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":";;;;;;;;;;;;;;;;;;;;;;;;AAqEA,IAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAxB3B,MAAM,aAAa,SAAmB,SAAA,YAAe;EA0BrD,MAAM,YAAY,IAAa,KAAK;EACpC,MAAM,YAAY,IAAa,KAAK;EACpC,MAAM,WAAW,IAAa,KAAK;EAEnC,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,EAAE,UAAU,eAAe,wBACzB,QAAA,qBACA,QAAA,eACR;EAEA,MAAM,EAAE,OAAO,WAAW,mBAAmB,KAAK;EAElD,MAAM,UAAU,eAAwB,QAAA,WAAW,kBAAkB;EAErE,iBAAiB,UAAU,iBAAiB,MAAI,UAAU,KAAK,CAAC;EAEhE,MAAM,cAAc,eAAkC;GACpD,IAAI,QAAA,UACF,OAAO,kBAAkB;GAC3B,IAAI,MAAI,QAAQ,GACd,OAAO,kBAAkB;GAC3B,IAAI,MAAI,SAAS,GACf,OAAO,kBAAkB;GAC3B,IAAI,MAAI,SAAS,GACf,OAAO,kBAAkB;GAC3B,OAAO,kBAAkB;EAC3B,CAAC;EAGD,MAAM,KAAK,eAAgD,aAAa;GACtE,UAAO,QAAA;GACP,UAAO,QAAA;GACP,YAAY,MAAI,UAAU;GAC1B,OAAI,QAAA;GACJ,SAAS,MAAI,OAAO;EACtB,CAAC,CAAC;EAGF,MAAM,UAAU,eAAgD,aAAa;GAC3E,UAAO,QAAA;GACP,UAAO,QAAA;GACP,aAAa,MAAI,WAAW;GAC5B,OAAI,QAAA;GACJ,SAAS,MAAI,OAAO;EACtB,CAAC,CAAC;EAEF,MAAM,aAAa,gBAAwB,QAAA,MAAM,QAAA,OAAO,QAAA,IAAI;EAE5D,MAAM,cAAc,eAAuB,KAAK,OAAO,MAAI,UAAU,IAAI,QAAA,OAAO,QAAA,IAAI,CAAC;EAErF,MAAM,aAAa,eAAuB;GAExC,OAAO,GADY,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,MAAO,MAAI,WAAW,IAAI,MAAI,UAAU,IAAK,GAAG,CAAC,CACzF,EAAW;EACvB,CAAC;EAED,MAAM,aAAa,eAAuC;GACxD,MAAM,IAAI,GAAG,MAAI,KAAK,EAAE;GACxB,MAAM,IAAI,GAAG,MAAI,MAAM,EAAE;GACzB,MAAM,QAAgC;IAAE,OAAO,QAAA,WAAW,IAAI;IAAG,QAAQ,QAAA,WAAW,IAAI;GAAE;GAC1F,IAAI,QAAA,UAAU;IACZ,MAAM,sBAAsB;IAC5B,MAAM,sBAAsB;GAC9B;GACA,OAAO;EACT,CAAC;EAED,MAAM,aAAa,eAAuB,GAAG,QAAA,SAAS,GAAG;EAEzD,MAAM,aAAa,eAAuC;GACxD,MAAM,OAAO,MAAI,UAAU;GAC3B,OAAO;IAAE,QAAQ,UAAU,KAAK;IAAS,OAAO,eAAe,KAAK;GAAG;EACzE,CAAC;EAED,MAAM,YAAY,eAAuC;GACvD,MAAM,OAAO,MAAI,UAAU;GAC3B,OAAO;IAAE,OAAO;IAAM,QAAQ;GAAK;EACrC,CAAC;EAED,MAAM,iBAAiB,eAAuB,MAAI,OAAO,IAAI,oBAAoB,QAAA,SAAS,iBAAiB;EAE3G,MAAM,oBAAoB,eAAmC,GAAG,QAAA,YAAY,IAAI,MAAM,QAAA,aAAa,KAAA,EAAU;EAE7G,SAAS,kBAAkB,OAAwB;GACjD,OAAO,SAAS,MAAI,WAAW;EACjC;;GAIE,OAAA,UAAA,GAAA,mBA2FM,OAAA,eAAA,mBA3FO,MAAA,YAAA,CAAY,CAACA,KAAAA,MAAM,CAAA,CAAA,GAAA,CAC9B,mBAkFQ,SAAA;IAjFL,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IACjB,cAAY,MAAA,QAAA,IAAQ,KAAQ,KAAA;GAGrB,GAAA,CAAA,QAAA,SADR,UAAA,GAAA,mBAWM,OAAA;;IATH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;GAEb,GAAA,CAAA,gBAAA,gBAAA,QAAA,KAAK,IAAG,KACX,CAAA,GACQ,QAAA,YADR,UAAA,GAAA,mBAKO,QALP,YAGC,KAED,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEF,mBAiEM,OAAA;IAhEA,SAAA;IAAJ,KAAI;IACH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;GAEhB,GAAA,CAAA,mBA4DM,OAAA;IA3DH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;IACf,OAAK,eAAE,MAAA,UAAA,CAAU;GAElB,GAAA,CAAA,eAAA,mBAkBE,SAlBF,WAkBE;IAjBS,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,QAAA;IAClB,OAAO,MAAA,EAAA,CAAE,CAAC,MAAK;IAChB,MAAK;IACJ,KAAK,QAAA;IACL,KAAK,QAAA;IACL,MAAM,QAAA;IACN,UAAU,QAAA;IACV,gBAAc,MAAA,QAAA;IACd,cAAY,QAAA,SAAS,KAAA;IACrB,kBAAgB,OAAO,WAAA,KAAU;GAC1B,GAAA,MAAA,eAAA,CAAe,CAACA,KAAAA,MAAM,GAAA;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;IACrB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;IACrB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;IAChB,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;IACf,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;IACnB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;GAhBT,CAAA,GAAA,MAAA,IAAA,UAAA,GAAA,CAAA,CAAA,YAAA,WAAA,KAAU,CAAA,CAAA,GAkBrB,mBAoCM,OAAA,EApCA,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,OAAM,CAAA,EAAA,GAAA,CACzB,mBAkCM,OAAA,EAlCA,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,YAAW,CAAA,EAAA,GAAA;IAC9B,mBAmBM,OAAA,EAnBA,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,UAAS,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,MAAM,KAAK,QAAA,YAAW,CAAA,CAAA,EAAA,GAAA,CAElE,CAAA,QAAA,aADT,UAAA,GAAA,mBAKE,OAAA;;KAHC,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,MAAK,CAAA;KACpB,OAAK,eAAA,EAAA,OAAW,MAAA,UAAA,EAAU,CAAA;KAC3B,WAAQ;IAGF,GAAA,MAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,QAAA,aAAS,CAAK,QAAA,YADtB,UAAA,GAAA,YAWE,wBAAA;;KATC,OAAO,MAAA,UAAA;KACP,mBAAiB,MAAA,OAAA,CAAO,CAAC,MAAK;KAC9B,mBAAiB,MAAA,UAAA;KACjB,cAAY,MAAA,OAAA,CAAO,CAAC,KAAI;KACxB,cAAY,MAAA,SAAA;KACZ,cAAY,QAAA;KACZ,mBAAiB,MAAA,cAAA;KACjB,uBAAqB,MAAA,iBAAA;KACrB,kBAAgB;;;;;;;;;;;IAGrB,mBAIE,OAAA;KAHC,OAAK,eAAA,CAAG,MAAA,OAAA,CAAO,CAAC,MAAK,GAAI,MAAA,OAAA,CAAO,CAAC,YAAW,CAAA,CAAA;KAC5C,OAAK,eAAA,EAAA,MAAU,MAAA,UAAA,EAAU,CAAA;KAC1B,WAAQ;;IAGF,QAAA,kBAAc,CAAK,QAAA,YAD3B,UAAA,GAAA,mBAOM,OAAA;;KALH,OAAK,eAAE,MAAA,OAAA,CAAO,CAAC,WAAU,CAAA;KACzB,OAAK,eAAA,EAAA,MAAU,MAAA,UAAA,EAAU,CAAA;KAC1B,WAAQ;IAEL,GAAA,gBAAA,WAAA,KAAU,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;GAQhB,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA,GAAA,CAAA,QAAA,eADT,UAAA,GAAA,YAME,2BAAA;;IAJA,OAAM;IACL,kBAAgB,QAAA;IAChB,oBAAkB,QAAA;IAClB,MAAM,QAAA"}

package/dist/components/forms/slider/RuiSliderTicks.js

@@ -0,0 +1,7 @@
+import RuiSliderTicks_vue_vue_type_script_setup_true_lang_default from "./RuiSliderTicks.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/forms/slider/RuiSliderTicks.vue
+var RuiSliderTicks_default = RuiSliderTicks_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiSliderTicks_default as default };
+
+//# sourceMappingURL=RuiSliderTicks.js.map

package/dist/components/forms/slider/RuiSliderTicks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiSliderTicks.js","names":[],"sources":["../../../../src/components/forms/slider/RuiSliderTicks.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\n\nexport interface SliderTicksProps {\n  count: number;\n  containerClass: string;\n  containerStyle: StyleValue;\n  tickClass: string;\n  tickStyle: StyleValue;\n  hideTrack: boolean;\n  highlightClass: string;\n  tickClassOverride: string | undefined;\n  isHighlighted: (index: number) => boolean;\n}\n\nconst {\n  containerClass,\n  containerStyle,\n  count,\n  hideTrack,\n  highlightClass,\n  isHighlighted,\n  tickClass,\n  tickClassOverride,\n  tickStyle,\n} = defineProps<SliderTicksProps>();\n\n/**\n * A track-less slider paints every tick the same way; with a track, the ticks\n * up to the current value are highlighted and the rest keep the override.\n */\nfunction classesFor(index: number): (string | undefined | false)[] {\n  if (hideTrack)\n    return [tickClass, tickClassOverride];\n\n  return [\n    tickClass,\n    isHighlighted(index) && highlightClass,\n    !isHighlighted(index) && tickClassOverride,\n  ];\n}\n</script>\n\n<template>\n  <div\n    :class=\"containerClass\"\n    :style=\"containerStyle\"\n    data-id=\"slider-ticks\"\n  >\n    <span\n      v-for=\"i in count + 1\"\n      :key=\"i\"\n      :class=\"classesFor(i - 1)\"\n      :style=\"tickStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/slider/RuiSliderTicks.vue.d.ts

@@ -0,0 +1,15 @@
+import type { StyleValue } from 'vue';
+export interface SliderTicksProps {
+    count: number;
+    containerClass: string;
+    containerStyle: StyleValue;
+    tickClass: string;
+    tickStyle: StyleValue;
+    hideTrack: boolean;
+    highlightClass: string;
+    tickClassOverride: string | undefined;
+    isHighlighted: (index: number) => boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<SliderTicksProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SliderTicksProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/forms/slider/RuiSliderTicks.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+import { Fragment, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList } from "vue";
+//#region src/components/forms/slider/RuiSliderTicks.vue?vue&type=script&setup=true&lang.ts
+var RuiSliderTicks_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RuiSliderTicks",
+	props: {
+		count: {},
+		containerClass: {},
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		tickClass: {},
+		tickStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		hideTrack: { type: Boolean },
+		highlightClass: {},
+		tickClassOverride: {},
+		isHighlighted: { type: Function }
+	},
+	setup(__props) {
+		/**
+		* A track-less slider paints every tick the same way; with a track, the ticks
+		* up to the current value are highlighted and the rest keep the override.
+		*/
+		function classesFor(index) {
+			if (__props.hideTrack) return [__props.tickClass, __props.tickClassOverride];
+			return [
+				__props.tickClass,
+				__props.isHighlighted(index) && __props.highlightClass,
+				!__props.isHighlighted(index) && __props.tickClassOverride
+			];
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(__props.containerClass),
+				style: normalizeStyle(__props.containerStyle),
+				"data-id": "slider-ticks"
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.count + 1, (i) => {
+				return openBlock(), createElementBlock("span", {
+					key: i,
+					class: normalizeClass(classesFor(i - 1)),
+					style: normalizeStyle(__props.tickStyle)
+				}, null, 6);
+			}), 128))], 6);
+		};
+	}
+});
+//#endregion
+export { RuiSliderTicks_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiSliderTicks.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiSliderTicks.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/forms/slider/RuiSliderTicks.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\n\nexport interface SliderTicksProps {\n  count: number;\n  containerClass: string;\n  containerStyle: StyleValue;\n  tickClass: string;\n  tickStyle: StyleValue;\n  hideTrack: boolean;\n  highlightClass: string;\n  tickClassOverride: string | undefined;\n  isHighlighted: (index: number) => boolean;\n}\n\nconst {\n  containerClass,\n  containerStyle,\n  count,\n  hideTrack,\n  highlightClass,\n  isHighlighted,\n  tickClass,\n  tickClassOverride,\n  tickStyle,\n} = defineProps<SliderTicksProps>();\n\n/**\n * A track-less slider paints every tick the same way; with a track, the ticks\n * up to the current value are highlighted and the rest keep the override.\n */\nfunction classesFor(index: number): (string | undefined | false)[] {\n  if (hideTrack)\n    return [tickClass, tickClassOverride];\n\n  return [\n    tickClass,\n    isHighlighted(index) && highlightClass,\n    !isHighlighted(index) && tickClassOverride,\n  ];\n}\n</script>\n\n<template>\n  <div\n    :class=\"containerClass\"\n    :style=\"containerStyle\"\n    data-id=\"slider-ticks\"\n  >\n    <span\n      v-for=\"i in count + 1\"\n      :key=\"i\"\n      :class=\"classesFor(i - 1)\"\n      :style=\"tickStyle\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,SAAS,WAAW,OAA+C;GACjE,IAAI,QAAA,WACF,OAAO,CAAC,QAAA,WAAW,QAAA,iBAAiB;GAEtC,OAAO;IACL,QAAA;IACA,QAAA,cAAc,KAAK,KAAK,QAAA;IACxB,CAAC,QAAA,cAAc,KAAK,KAAK,QAAA;GAC3B;EACF;;GAIE,OAAA,UAAA,GAAA,mBAWM,OAAA;IAVH,OAAK,eAAE,QAAA,cAAc;IACrB,OAAK,eAAE,QAAA,cAAc;IACtB,WAAQ;GAER,GAAA,EAAA,UAAA,IAAA,GAAA,mBAKE,UAAA,MAAA,WAJY,QAAA,QAAK,IAAV,MAAC;IADV,OAAA,UAAA,GAAA,mBAKE,QAAA;KAHC,KAAK;KACL,OAAK,eAAE,WAAW,IAAC,CAAA,CAAA;KACnB,OAAK,eAAE,QAAA,SAAS"}

package/dist/components/forms/slider/slider-styles.d.ts

@@ -140,7 +140,7 @@ export declare const sliderStyles: import("tailwind-variants").TVReturnType<{
     thumb: string;
     thumbRipple: string;
     thumbLabel: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     disabled: {
         true: {
             label: string;
@@ -205,4 +205,4 @@ export declare const sliderStyles: import("tailwind-variants").TVReturnType<{
     thumb: string;
     thumbRipple: string;
     thumbLabel: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/forms/switch/RuiSwitch.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSwitch.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm';\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: 'RuiSwitch',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  disabled = false,\n  color = undefined,\n  size = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst switchStyles = tv({\n  slots: {\n    wrapper: 'relative flex gap-2 items-start cursor-pointer group/switch',\n    inner: 'relative w-[2.6875rem] h-6 shrink-0',\n    input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-grey-400 dark:bg-rui-grey-700 transition-all duration-75 ease-in-out cursor-pointer',\n    toggle: [\n      'absolute w-5 h-5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n      'bg-white left-0.5',\n      `before:content-[''] before:absolute before:size-10 before:bg-black dark:before:bg-white before:rounded-full`,\n      'before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:transition-all before:ease-in-out before:opacity-0',\n      'peer-active:before:opacity-20',\n      'group-hover/switch:shadow-1',\n    ].join(' '),\n    label: 'text-rui-text text-body-1',\n  },\n  variants: {\n    checked: {\n      true: {\n        toggle: 'left-[1.3125rem]',\n      },\n      false: {},\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        input: '!bg-rui-grey-300 dark:!bg-rui-grey-800 cursor-not-allowed',\n        toggle: '!bg-rui-grey-500 dark:!bg-rui-grey-600 before:!content-none group-hover/switch:!shadow-none',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    size: {\n      sm: {\n        inner: 'w-10 h-5 mt-0.5',\n        toggle: 'w-4 h-4 before:size-6',\n      },\n    },\n    validation: {\n      error: {\n        input: '!bg-rui-error dark:!bg-rui-error/[0.5]',\n        label: 'text-rui-error',\n        toggle: 'dark:!bg-rui-error',\n      },\n      success: {\n        input: '!bg-rui-success dark:!bg-rui-success/[0.5]',\n        label: 'text-rui-success',\n        toggle: 'dark:!bg-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Checked (no color): track + toggle dark mode\n    { checked: true, disabled: false, class: { input: 'bg-black dark:bg-white' } },\n    { checked: true, disabled: false, class: { toggle: 'dark:bg-black' } },\n\n    // Checked + color (light: track bg, dark: track bg/50 + toggle bg)\n    { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary/[0.5]', toggle: 'dark:bg-rui-primary' } },\n    { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary/[0.5]', toggle: 'dark:bg-rui-secondary' } },\n    { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error/[0.5]', toggle: 'dark:bg-rui-error' } },\n    { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning/[0.5]', toggle: 'dark:bg-rui-warning' } },\n    { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info/[0.5]', toggle: 'dark:bg-rui-info' } },\n    { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success/[0.5]', toggle: 'dark:bg-rui-success' } },\n\n    // Size sm + checked: different toggle position\n    { size: 'sm', checked: true, class: { toggle: 'left-[1.375rem]' } },\n  ],\n  defaultVariants: {\n    checked: false,\n    disabled: false,\n  },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n  checked: get(modelValue),\n  disabled,\n  size,\n  validation: get(validation),\n  color,\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement)\n    set(modelValue, target.checked);\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=\"modelValue || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div :class=\"ui.inner()\">\n        <input\n          :checked=\"modelValue\"\n          type=\"checkbox\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n        />\n        <div :class=\"ui.toggle()\" />\n      </div>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"ui.label()\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!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":"RuiSwitch.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm';\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: 'RuiSwitch',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  disabled = false,\n  color = undefined,\n  size = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst switchStyles = tv({\n  slots: {\n    wrapper: 'relative flex gap-2 items-start cursor-pointer group/switch',\n    inner: 'relative w-[2.6875rem] h-6 shrink-0',\n    input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-grey-400 dark:bg-rui-grey-700 transition-all duration-75 ease-in-out cursor-pointer',\n    toggle: [\n      'absolute w-5 h-5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n      'bg-white left-0.5',\n      `before:content-[''] before:absolute before:size-10 before:bg-black dark:before:bg-white before:rounded-full`,\n      'before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:transition-all before:ease-in-out before:opacity-0',\n      'peer-active:before:opacity-20',\n      'group-hover/switch:shadow-1',\n    ].join(' '),\n    label: 'text-rui-text text-body-1',\n  },\n  variants: {\n    checked: {\n      true: {\n        toggle: 'left-[1.3125rem]',\n      },\n      false: {},\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        input: '!bg-rui-grey-300 dark:!bg-rui-grey-800 cursor-not-allowed',\n        toggle: '!bg-rui-grey-500 dark:!bg-rui-grey-600 before:!content-none group-hover/switch:!shadow-none',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    size: {\n      sm: {\n        inner: 'w-10 h-5 mt-0.5',\n        toggle: 'w-4 h-4 before:size-6',\n      },\n    },\n    validation: {\n      error: {\n        input: '!bg-rui-error dark:!bg-rui-error/[0.5]',\n        label: 'text-rui-error',\n        toggle: 'dark:!bg-rui-error',\n      },\n      success: {\n        input: '!bg-rui-success dark:!bg-rui-success/[0.5]',\n        label: 'text-rui-success',\n        toggle: 'dark:!bg-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Checked (no color): track + toggle dark mode\n    { checked: true, disabled: false, class: { input: 'bg-black dark:bg-white' } },\n    { checked: true, disabled: false, class: { toggle: 'dark:bg-black' } },\n\n    // Checked + color (light: track bg, dark: track bg/50 + toggle bg)\n    { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary/[0.5]', toggle: 'dark:bg-rui-primary' } },\n    { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary/[0.5]', toggle: 'dark:bg-rui-secondary' } },\n    { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error/[0.5]', toggle: 'dark:bg-rui-error' } },\n    { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning/[0.5]', toggle: 'dark:bg-rui-warning' } },\n    { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info/[0.5]', toggle: 'dark:bg-rui-info' } },\n    { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success/[0.5]', toggle: 'dark:bg-rui-success' } },\n\n    // Size sm + checked: different toggle position\n    { size: 'sm', checked: true, class: { toggle: 'left-[1.375rem]' } },\n  ],\n  defaultVariants: {\n    checked: false,\n    disabled: false,\n  },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n  checked: get(modelValue),\n  disabled,\n  size,\n  validation: get(validation),\n  color,\n}));\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement)\n    set(modelValue, target.checked);\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=\"modelValue || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div :class=\"ui.inner()\">\n        <input\n          :checked=\"modelValue\"\n          type=\"checkbox\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n        />\n        <div :class=\"ui.toggle()\" />\n      </div>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"ui.label()\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,aAAa,SAAoB,SAAA,YAAmB;EAkB1D,MAAM,eAAe,GAAG;GACtB,OAAO;IACL,SAAS;IACT,OAAO;IACP,OAAO;IACP,QAAQ;KACN;KACA;KACA;KACA;KACA;KACA;IACF,CAAC,CAAC,KAAK,GAAG;IACV,OAAO;GACT;GACA,UAAU;IACR,SAAS;KACP,MAAM,EACJ,QAAQ,mBACV;KACA,OAAO,CAAC;IACV;IACA,UAAU,EACR,MAAM;KACJ,SAAS;KACT,OAAO;KACP,QAAQ;KACR,OAAO;IACT,EACF;IACA,MAAM,EACJ,IAAI;KACF,OAAO;KACP,QAAQ;IACV,EACF;IACA,YAAY;KACV,OAAO;MACL,OAAO;MACP,OAAO;MACP,QAAQ;KACV;KACA,SAAS;MACP,OAAO;MACP,OAAO;MACP,QAAQ;KACV;IACF;IACA,OAAO;KACL,SAAS,CAAC;KACV,WAAW,CAAC;KACZ,OAAO,CAAC;KACR,SAAS,CAAC;KACV,MAAM,CAAC;KACP,SAAS,CAAC;IACZ;GACF;GACA,kBAAkB;IAEhB;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO,EAAE,OAAO,yBAAyB;IAAE;IAC7E;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO,EAAE,QAAQ,gBAAgB;IAAE;IAGrE;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO;KAAW,OAAO;MAAE,OAAO;MAA4C,QAAQ;KAAsB;IAAE;IAChJ;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO;KAAa,OAAO;MAAE,OAAO;MAAgD,QAAQ;KAAwB;IAAE;IACxJ;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO;KAAS,OAAO;MAAE,OAAO;MAAwC,QAAQ;KAAoB;IAAE;IACxI;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO;KAAW,OAAO;MAAE,OAAO;MAA4C,QAAQ;KAAsB;IAAE;IAChJ;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO;KAAQ,OAAO;MAAE,OAAO;MAAsC,QAAQ;KAAmB;IAAE;IACpI;KAAE,SAAS;KAAM,UAAU;KAAO,OAAO;KAAW,OAAO;MAAE,OAAO;MAA4C,QAAQ;KAAsB;IAAE;IAGhJ;KAAE,MAAM;KAAM,SAAS;KAAM,OAAO,EAAE,QAAQ,kBAAkB;IAAE;GACpE;GACA,iBAAiB;IACf,SAAS;IACT,UAAU;GACZ;EACF,CAAC;EAED,MAAM,EAAE,UAAU,eAAe,wBACzB,QAAA,qBACA,QAAA,eACR;EAEA,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAS,IAAI,UAAU;GACvB,UAAO,QAAA;GACP,MAAG,QAAA;GACH,YAAY,IAAI,UAAU;GAC1B,OAAI,QAAA;EACN,CAAC,CAAC;EAEF,SAAS,MAAM,OAAoB;GACjC,MAAM,SAAS,MAAM;GACrB,IAAI,kBAAkB,kBACpB,IAAI,YAAY,OAAO,OAAO;EAClC;;GAIE,OAAA,UAAA,GAAA,mBAuCM,OAAA,eAAA,mBAvCO,MAAA,YAAA,CAAY,CAACA,KAAAA,MAAM,CAAA,CAAA,GAAA,CAC9B,mBA8BQ,SAAA;IA7BL,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IACjB,iBAAe,QAAA,YAAY,KAAA;IAC3B,gBAAc,WAAA,SAAc,KAAA;IAC5B,cAAY,MAAA,QAAA,IAAQ,KAAQ,KAAA;GAE7B,GAAA,CAAA,mBAWM,OAAA,EAXA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA,EAAA,GAAA,CACnB,mBAQE,SARF,WAQE;IAPC,SAAS,WAAA;IACV,MAAK;IACJ,OAAO,MAAA,EAAA,CAAE,CAAC,MAAK;IACf,UAAU,QAAA;IACV,gBAAc,MAAA,QAAA;GACP,GAAA,MAAA,eAAA,CAAe,CAACA,KAAAA,MAAM,GAAA,EAC7B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAM,MAAM,GAAA,CAAA,GAAA,MAAA,IAAA,UAAA,GAEtB,mBAA4B,OAAA,EAAtB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA,EAAA,GAAA,MAAA,CAAA,CAAA,GAAA,CAAA,GAGhB,QAAA,SAASC,KAAAA,OAAO,WADxB,UAAA,GAAA,mBAWO,QAAA;;IATJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;GAEhB,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,CAAA,GAAA,IAAA,UAAA,GAIK,CAAA,QAAA,eADT,UAAA,GAAA,YAME,2BAAA;;IAJA,OAAM;IACL,kBAAgB,QAAA;IAChB,oBAAkB,QAAA;IAClB,MAAM,QAAA"}

package/dist/components/forms/text-area/RuiTextArea.vue.d.ts

@@ -1,6 +1,6 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
 import type { RuiIcons } from '../../../icons/index.js';
-import { type TextAreaVariant } from '../../../components/forms/text-area/text-area-styles.js';
+import { type TextAreaVariant } from './text-area-styles.js';
 export interface TextAreaProps {
     label?: string;
     placeholder?: string;

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 { textAreaStyles, type TextAreaVariant } from '@/components/forms/text-area/text-area-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\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  variant?: TextAreaVariant;\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  variant = 'default',\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 { focused } = useFocus(textarea);\nconst { create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst active = computed<boolean>(() => get(focused) || !!get(modelValue));\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  variant,\n  dense,\n  disabled,\n  noResize,\n  hovered: get(isHovered),\n  focused: get(focused),\n  active: get(active),\n  noLabel: !label,\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n  showLabel: !!label,\n}));\n\nconst wrapperStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst legendText = computed<string>(() => {\n  if (!get(active) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\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    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    <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 :name=\"prependIcon\" />\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          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        <label :class=\"ui.label()\">\n          <span :class=\"ui.labelText()\">\n            {{ label }}\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </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          color=\"error\"\n          data-id=\"clear-btn\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"20\"\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 :name=\"appendIcon\" />\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,aAAa,SAAmB,SAAA,YAAmB;EA0BzD,MAAM,OAAO;EASb,MAAM,YAAY,IAAa,KAAK;EACpC,MAAM,kBAAkB,IAAa,KAAK;EAE1C,MAAM,UAAU,eAA+B,SAAS;EACxD,MAAM,SAAS,eAA+B,QAAQ;EACtD,MAAM,WAAW,eAAoC,UAAU;EAC/D,MAAM,gBAAgB,eAAoC,eAAe;EAEzE,MAAM,EAAE,YAAY,SAAS,QAAQ;EACrC,MAAM,EAAE,QAAQ,mBAAmB,kBAAkB;EACrD,MAAM,EAAE,cAAc,gBAAgB,sBAAsB,SAAS,QAAQ,EAAE;EAC/E,MAAM,EAAE,UAAU,YAAY,aAAa,eAAe,wBAClD,QAAA,qBACA,QAAA,eACR;EAEA,MAAM,SAAS,eAAwB,MAAI,OAAO,KAAK,CAAC,CAAC,MAAI,UAAU,CAAC;EAExE,MAAM,gBAAgB,eAAwB,QAAA,aAAa,CAAC,CAAC,MAAI,UAAU,KAAK,CAAC,QAAA,YAAY,CAAC,QAAA,QAAQ;EAEtG,MAAM,qBAAqB,eAA8C;GACvE,IAAI,MAAI,QAAQ,GACd,OAAO;GACT,IAAI,MAAI,UAAU,GAChB,OAAO;GACT,IAAI,QAAA,aAAa,CAAC,MAAI,WAAW,GAC/B,OAAO,QAAA;EAEX,CAAC;EAED,MAAM,iBAAiB,eAA8C,MAAI,UAAU,KAAK,QAAA,KAAK;EAE7F,MAAM,KAAK,eAAkD,eAAe;GAC1E,SAAM,QAAA;GACN,OAAI,QAAA;GACJ,UAAO,QAAA;GACP,UAAO,QAAA;GACP,SAAS,MAAI,SAAS;GACtB,SAAS,MAAI,OAAO;GACpB,QAAQ,MAAI,MAAM;GAClB,SAAS,CAAC,QAAA;GACV,OAAO,MAAI,cAAc;GACzB,WAAW,MAAI,kBAAkB;GACjC,YAAY,MAAI,UAAU;GAC1B,WAAW,CAAC,CAAC,QAAA;EACf,CAAC,CAAC;EAEF,MAAM,eAAe,gBAAwC;GAC3D,eAAe,MAAI,YAAY;GAC/B,cAAc,MAAI,WAAW;EAC/B,EAAE;EAEF,MAAM,aAAa,eAAuB;GACxC,IAAI,CAAC,MAAI,MAAM,KAAK,CAAC,QAAA,OACnB,OAAO;GACT,OAAO,QAAA,WAAW,GAAG,QAAA,MAAM,MAAM,QAAA;EACnC,CAAC;EAED,MAAM,cAAc,eAA0D;GAC5E,MAAM,SAAS,OAAO,QAAA,SAAS;GAC/B,MAAM,MAAM,OAAO,QAAA,OAAO;GAC1B,MAAM,MAAM,OAAO,QAAA,OAAO;GAC1B,MAAM,QAAmD,EACvD,WAAW,GAAG,MAAM,SAAS,IAAK,KACpC;GACA,IAAI,KACF,MAAM,YAAY,GAAG,MAAM,SAAS,IAAK;GAE3C,OAAO;EACT,CAAC;EAED,SAAS,mBAAyB;GAChC,MAAI,YAAY,EAAE;GAClB,KAAK,aAAa;EACpB;EAEA,SAAS,mBAAmB,QAAiB,QAAuB;GAClE,IAAI,CAAC,QAAA,UACH;GAEF,MAAM,QAAQ,MAAI,QAAQ;GAC1B,MAAM,aAAa,UAAU,MAAI,UAAU;GAC3C,MAAM,aAAa,MAAI,aAAa;GACpC,IAAI,EAAE,SAAS,aACb;GAEF,eAAe;IACb,MAAM,cAAc,WAAW;IAC/B,MAAM,cAAc,MAAM;IAC1B,IAAI,SAAS,GAAG,KAAK,IAAI,aAAa,WAAW,IAAI,GAAG;IACxD,IAAI,UAAU,OAAO,SAAS,WAAW,QACvC,SAAS,GAAG,KAAK,IAAI,aAAa,WAAW,IAAI,GAAG;IAEtD,MAAM,MAAM,SAAS;GACvB,CAAC;EACH;EAEA,MAAM,UAAU,UAAU;GACxB,IAAI,OACF,MAAI,iBAAiB,IAAI;QAGzB,qBAAqB,MAAI,iBAAiB,KAAK,GAAG,GAAG;EAEzD,CAAC;EAED,eAAe,YAAY,oBAAoB,EAAE,UAAU,GAAG,CAAC;EAE/D,UAAU,kBAAkB;EAE5B,SAAa;GACX,aAAa,MAAI,QAAQ,CAAC,EAAE,MAAM;GAClC,SAAS;EACX,CAAC;;uBAIC,mBA4GM,OAAA,eAAA,mBA5GO,MAAA,YAAA,CAAY,CAACA,KAAAA,MAAM,CAAA,CAAA,GAAA,CAC9B,mBAmGM,OAAA;IAlGH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IACjB,OAAK,eAAE,MAAA,YAAA,CAAY;IACpB,WAAQ;IACP,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;IACrB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;;IAGdC,KAAAA,OAAO,WAAW,QAAA,eAAA,UAAA,GAD1B,mBAgBM,OAAA;;cAdA;KAAJ,KAAI;KACH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;KAClB,WAAQ;QAGAA,KAAAA,OAAO,UADf,WAGE,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAEW,QAAA,eAAA,UAAA,GADb,mBAKM,OAAA;;KAHH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;QAEf,YAA+B,iBAAA,EAArB,MAAM,QAAA,YAAW,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAG/B,mBAyCM,OAAA,EAzCA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,aAAY,CAAA,EAAA,GAAA;KAElB,QAAA,YAAA,UAAA,GADR,mBASE,YAAA;;eAPI;MAAJ,KAAI;MACH,OAAO,WAAA;MACP,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,cAAa,CAAA;MACvB,OAAK,eAAE,MAAA,WAAA,CAAW;MACnB,eAAY;MACZ,UAAA;MACA,UAAA;;oBAEF,mBAUE,YAVF,WAUE;eATI;MAAJ,KAAI;8EACe,QAAA;MAClB,aAAa,QAAA,eAAW;MACxB,OAAO,MAAA,EAAA,CAAE,CAAC,SAAQ;MAClB,OAAO,MAAA,WAAA;MACP,UAAU,QAAA;MACV,UAAU,QAAA;MACV,gBAAc,MAAA,QAAA;QACP,MAAA,eAAA,CAAe,CAACD,KAAAA,MAAM,CAAA,GAAA,MAAA,IAAA,UAAA,GAAA,CAAA,CAAA,YAPrB,WAAA,KAAU,CAAA,CAAA;KASrB,mBAUQ,SAAA,EAVA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA,EAAA,GAAA,CACrB,mBAQO,QAAA,EARA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA,EAAA,GAAA,CAAA,gBAAA,gBACrB,QAAA,KAAK,IAAG,KACX,CAAA,GACQ,QAAA,YAAA,UAAA,GADR,mBAKO,QAAA;;MAHJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;QACpB,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA;KAII,QAAA,YAAO,cAAA,UAAA,GADf,mBAOW,YAAA;;MALR,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;SAEnB,mBAES,UAAA,EAFA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA,EAAA,GAAA,gBACpB,MAAA,UAAA,CAAU,GAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;;IAKXC,KAAAA,OAAO,UAAU,QAAA,cAAc,MAAA,aAAA,KAAA,UAAA,GADvC,mBAgCM,OAAA;;cA9BA;KAAJ,KAAI;KACH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;KACjB,WAAQ;QAGA,MAAA,aAAA,KAAA,UAAA,GADR,YAeY,mBAAA;;KAbT,OAAK,eAAA,CAAG,MAAA,EAAA,CAAE,CAAC,YAAW,GAAA,EAAA,QAAA,CAAe,MAAA,eAAA,EAAe,CAAA,CAAA;KACrD,SAAQ;KACR,MAAK;KACL,MAAA;KACA,OAAM;KACN,WAAQ;KACR,UAAS;KACR,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,iBAAgB,GAAA,CAAA,MAAA,CAAA;;4BAK3B,CAHF,YAGE,iBAAA;MAFA,MAAK;MACL,MAAK;;;sDAIDA,KAAAA,OAAO,SADf,WAGE,KAAA,QAAA,UAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAEW,QAAA,cAAA,UAAA,GADb,mBAKM,OAAA;;KAHH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;QAEf,YAA8B,iBAAA,EAApB,MAAM,QAAA,WAAU,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;YAKvB,QAAA,eAAA,UAAA,GADT,YAME,2BAAA;;IAJC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IACjB,kBAAgB,QAAA;IAChB,oBAAkB,QAAA;IAClB,MAAM,QAAA"}
+{"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 { textAreaStyles, type TextAreaVariant } from '@/components/forms/text-area/text-area-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\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  variant?: TextAreaVariant;\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  variant = 'default',\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 { focused } = useFocus(textarea);\nconst { create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst active = computed<boolean>(() => get(focused) || !!get(modelValue));\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  variant,\n  dense,\n  disabled,\n  noResize,\n  hovered: get(isHovered),\n  focused: get(focused),\n  active: get(active),\n  noLabel: !label,\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n  showLabel: !!label,\n}));\n\nconst wrapperStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst legendText = computed<string>(() => {\n  if (!get(active) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\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    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    <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 :name=\"prependIcon\" />\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          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        <label :class=\"ui.label()\">\n          <span :class=\"ui.labelText()\">\n            {{ label }}\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </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          color=\"error\"\n          data-id=\"clear-btn\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"20\"\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 :name=\"appendIcon\" />\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-area/text-area-styles.d.ts

@@ -1,4 +1,4 @@
-import { type TextInputVariant } from '../../../components/forms/text-input-styles.js';
+import { type TextInputVariant } from '../text-input-styles.js';
 export type TextAreaVariant = TextInputVariant;
 /**
  * tv() styles for RuiTextArea. Extends textInputBase for shared
@@ -265,7 +265,7 @@ export declare const textAreaStyles: import("tailwind-variants").TVReturnType<{
     label: string;
     fieldset: string;
     legend: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     focused: {
         true: {
             fieldset: string;
@@ -310,4 +310,4 @@ export declare const textAreaStyles: import("tailwind-variants").TVReturnType<{
     label: string;
     fieldset: string;
     legend: string;
-}, undefined, unknown, unknown, undefined>>>;
+}>>>;

package/dist/components/forms/text-area/text-area-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area-styles.js","names":[],"sources":["../../../../src/components/forms/text-area/text-area-styles.ts"],"sourcesContent":["import { textInputBase, type TextInputVariant, underlinePseudo } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type TextAreaVariant = TextInputVariant;\n\n/**\n * tv() styles for RuiTextArea. Extends textInputBase for shared\n * fieldset/legend/label/validation core.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes\n * between base and extension. Never put a class in the base slot that a\n * variant needs to override — put variant-specific classes in the variants.\n */\nexport const textAreaStyles = tv({\n  extend: textInputBase,\n  slots: {\n    fieldset: '',\n    legend: '',\n    wrapper: 'relative w-full min-w-[12.5rem] flex items-start rounded bg-white dark:bg-transparent',\n    inputWrapper: 'flex flex-1 overflow-hidden',\n    textarea: [\n      'peer leading-6 text-rui-text w-full bg-transparent pb-2 pt-0',\n      'outline-0 outline-none',\n      'placeholder:opacity-0 focus:placeholder:opacity-100',\n    ].join(' '),\n    textareaSizer: 'invisible absolute top-0 left-0 w-full h-0 -z-10 pointer-events-none',\n    label: [\n      'left-0 text-[1rem] pointer-events-none',\n      'absolute top-0 h-full w-full select-none',\n      '[padding-left:calc(var(--x-padding,0px)+var(--prepend-w,0px))]',\n      '[padding-right:calc(var(--x-padding,0px)+var(--append-w,0px))]',\n    ].join(' '),\n    labelText: 'truncate transition-all duration-75',\n    prepend: 'flex items-center gap-1 shrink-0 mt-4 mx-3',\n    append: 'flex items-center gap-1 shrink-0 absolute right-0 mt-4 mx-3',\n    icon: 'text-black/[0.54] dark:text-white/[0.56]',\n    details: 'pt-1 px-4',\n    required: 'text-rui-error',\n    clearButton: '!p-2',\n  },\n  variants: {\n    variant: {\n      default: {\n        inputWrapper: 'pt-4',\n        textarea: '[padding-right:calc(var(--x-padding,1rem)+var(--append-w,0px))]',\n        label: `flex leading-[3.2] ${underlinePseudo}`,\n      },\n      filled: {\n        inputWrapper: 'pt-4',\n        textarea: 'px-4 [padding-right:calc(var(--x-padding,1rem)+var(--append-w,0px))]',\n        textareaSizer: 'px-4',\n        label: `flex leading-[3.2] [--x-padding:1rem] rounded-t bg-black/[0.06] dark:bg-white/[0.09] ${underlinePseudo}`,\n        prepend: '!mr-0',\n        append: '!ml-0',\n      },\n      outlined: {\n        inputWrapper: '!overflow-visible pt-4',\n        textarea: 'px-4 [padding-right:calc(var(--x-padding,1rem)+var(--append-w,0px))]',\n        textareaSizer: 'px-4',\n        label: [\n          'flex leading-[3.2] [--x-padding:1rem]',\n          'border-0 border-transparent',\n          'after:content-none',\n        ].join(' '),\n        fieldset: '!mt-0 !h-full',\n        prepend: '!mr-0',\n        append: '!ml-0',\n      },\n    },\n    dense: {\n      true: {\n        inputWrapper: '!pt-2',\n        textarea: 'py-1',\n        textareaSizer: 'py-1',\n      },\n    },\n    noResize: {\n      true: {\n        textarea: 'resize-none',\n      },\n      false: {\n        textarea: 'resize-y',\n      },\n    },\n    hovered: {\n      true: {\n        label: 'border-black dark:border-white',\n      },\n    },\n    focused: {\n      true: {},\n    },\n    active: {\n      true: {\n        label: [\n          'text-[0.75rem] leading-tight',\n          '[padding-left:var(--x-padding,0px)]',\n          '[padding-right:var(--x-padding,0px)]',\n        ].join(' '),\n      },\n    },\n    noLabel: {\n      true: {},\n    },\n    showLabel: {\n      true: {},\n    },\n    textColor: {\n      primary: { prepend: 'text-rui-primary', append: 'text-rui-primary', textarea: 'text-rui-primary', icon: 'text-rui-primary' },\n      secondary: { prepend: 'text-rui-secondary', append: 'text-rui-secondary', textarea: 'text-rui-secondary', icon: 'text-rui-secondary' },\n      error: { prepend: 'text-rui-error', append: 'text-rui-error', textarea: 'text-rui-error', icon: 'text-rui-error' },\n      warning: { prepend: 'text-rui-warning', append: 'text-rui-warning', textarea: 'text-rui-warning', icon: 'text-rui-warning' },\n      info: { prepend: 'text-rui-info', append: 'text-rui-info', textarea: 'text-rui-info', icon: 'text-rui-info' },\n      success: { prepend: 'text-rui-success', append: 'text-rui-success', textarea: 'text-rui-success', icon: 'text-rui-success' },\n    },\n    validation: {\n      error: {\n        textarea: '!border-rui-error',\n        label: '!text-rui-error !after:border-rui-error',\n      },\n      success: {\n        textarea: '!border-rui-success',\n        label: '!text-rui-success !after:border-rui-success',\n      },\n    },\n  },\n  compoundVariants: [\n    // --- Default variant ---\n    { variant: 'default', focused: true, class: { label: 'after:scale-x-100' } },\n\n    // --- Filled variant ---\n    { variant: 'filled', focused: true, class: { label: 'bg-black/[0.09] dark:bg-white/[0.13]' } },\n    { variant: 'filled', noLabel: true, class: { textarea: 'py-4', textareaSizer: 'py-4' } },\n    { variant: 'filled', noLabel: true, dense: true, class: { textarea: 'py-3', textareaSizer: 'py-3' } },\n\n    // --- Outlined variant ---\n    { variant: 'outlined', active: true, class: {\n      textarea: 'border-t-transparent',\n      // Same rationale as RuiTextField's outlined+active rule: a percentage\n      // translate gets recomputed against the *current* label height, which\n      // jumps the moment !h-auto is removed on blur, producing a visible\n      // upward overshoot before the transition settles. Anchor in rem.\n      label: '!h-auto -translate-y-[0.5rem] pl-4',\n    } },\n    { variant: 'outlined', dense: true, class: { label: 'leading-[2.5]' } },\n    // Re-assert `leading-tight` for outlined+dense+active. The dense rule\n    // above sets `leading-[2.5]` which twMerge keeps as the winning leading,\n    // inflating the floated label's line-box and pushing its visual centre\n    // below the fieldset border.\n    { variant: 'outlined', dense: true, active: true, class: { label: '!leading-tight' } },\n\n    // --- Focus label color (per color) ---\n    { focused: true, color: 'primary', class: { label: 'text-rui-primary' } },\n    { focused: true, color: 'secondary', class: { label: 'text-rui-secondary' } },\n    { focused: true, color: 'error', class: { label: 'text-rui-error' } },\n    { focused: true, color: 'warning', class: { label: 'text-rui-warning' } },\n    { focused: true, color: 'info', class: { label: 'text-rui-info' } },\n    { focused: true, color: 'success', class: { label: 'text-rui-success' } },\n\n    // --- Label after border color (always applied when color set) ---\n    { color: 'primary', class: { label: 'after:border-rui-primary' } },\n    { color: 'secondary', class: { label: 'after:border-rui-secondary' } },\n    { color: 'error', class: { label: 'after:border-rui-error' } },\n    { color: 'warning', class: { label: 'after:border-rui-warning' } },\n    { color: 'info', class: { label: 'after:border-rui-info' } },\n    { color: 'success', class: { label: 'after:border-rui-success' } },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    noResize: false,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"text-area-styles.js","names":[],"sources":["../../../../src/components/forms/text-area/text-area-styles.ts"],"sourcesContent":["import { textInputBase, type TextInputVariant, underlinePseudo } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type TextAreaVariant = TextInputVariant;\n\n/**\n * tv() styles for RuiTextArea. Extends textInputBase for shared\n * fieldset/legend/label/validation core.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes\n * between base and extension. Never put a class in the base slot that a\n * variant needs to override — put variant-specific classes in the variants.\n */\nexport const textAreaStyles = tv({\n  extend: textInputBase,\n  slots: {\n    fieldset: '',\n    legend: '',\n    wrapper: 'relative w-full min-w-[12.5rem] flex items-start rounded bg-white dark:bg-transparent',\n    inputWrapper: 'flex flex-1 overflow-hidden',\n    textarea: [\n      'peer leading-6 text-rui-text w-full bg-transparent pb-2 pt-0',\n      'outline-0 outline-none',\n      'placeholder:opacity-0 focus:placeholder:opacity-100',\n    ].join(' '),\n    textareaSizer: 'invisible absolute top-0 left-0 w-full h-0 -z-10 pointer-events-none',\n    label: [\n      'left-0 text-[1rem] pointer-events-none',\n      'absolute top-0 h-full w-full select-none',\n      '[padding-left:calc(var(--x-padding,0px)+var(--prepend-w,0px))]',\n      '[padding-right:calc(var(--x-padding,0px)+var(--append-w,0px))]',\n    ].join(' '),\n    labelText: 'truncate transition-all duration-75',\n    prepend: 'flex items-center gap-1 shrink-0 mt-4 mx-3',\n    append: 'flex items-center gap-1 shrink-0 absolute right-0 mt-4 mx-3',\n    icon: 'text-black/[0.54] dark:text-white/[0.56]',\n    details: 'pt-1 px-4',\n    required: 'text-rui-error',\n    clearButton: '!p-2',\n  },\n  variants: {\n    variant: {\n      default: {\n        inputWrapper: 'pt-4',\n        textarea: '[padding-right:calc(var(--x-padding,1rem)+var(--append-w,0px))]',\n        label: `flex leading-[3.2] ${underlinePseudo}`,\n      },\n      filled: {\n        inputWrapper: 'pt-4',\n        textarea: 'px-4 [padding-right:calc(var(--x-padding,1rem)+var(--append-w,0px))]',\n        textareaSizer: 'px-4',\n        label: `flex leading-[3.2] [--x-padding:1rem] rounded-t bg-black/[0.06] dark:bg-white/[0.09] ${underlinePseudo}`,\n        prepend: '!mr-0',\n        append: '!ml-0',\n      },\n      outlined: {\n        inputWrapper: '!overflow-visible pt-4',\n        textarea: 'px-4 [padding-right:calc(var(--x-padding,1rem)+var(--append-w,0px))]',\n        textareaSizer: 'px-4',\n        label: [\n          'flex leading-[3.2] [--x-padding:1rem]',\n          'border-0 border-transparent',\n          'after:content-none',\n        ].join(' '),\n        fieldset: '!mt-0 !h-full',\n        prepend: '!mr-0',\n        append: '!ml-0',\n      },\n    },\n    dense: {\n      true: {\n        inputWrapper: '!pt-2',\n        textarea: 'py-1',\n        textareaSizer: 'py-1',\n      },\n    },\n    noResize: {\n      true: {\n        textarea: 'resize-none',\n      },\n      false: {\n        textarea: 'resize-y',\n      },\n    },\n    hovered: {\n      true: {\n        label: 'border-black dark:border-white',\n      },\n    },\n    focused: {\n      true: {},\n    },\n    active: {\n      true: {\n        label: [\n          'text-[0.75rem] leading-tight',\n          '[padding-left:var(--x-padding,0px)]',\n          '[padding-right:var(--x-padding,0px)]',\n        ].join(' '),\n      },\n    },\n    noLabel: {\n      true: {},\n    },\n    showLabel: {\n      true: {},\n    },\n    textColor: {\n      primary: { prepend: 'text-rui-primary', append: 'text-rui-primary', textarea: 'text-rui-primary', icon: 'text-rui-primary' },\n      secondary: { prepend: 'text-rui-secondary', append: 'text-rui-secondary', textarea: 'text-rui-secondary', icon: 'text-rui-secondary' },\n      error: { prepend: 'text-rui-error', append: 'text-rui-error', textarea: 'text-rui-error', icon: 'text-rui-error' },\n      warning: { prepend: 'text-rui-warning', append: 'text-rui-warning', textarea: 'text-rui-warning', icon: 'text-rui-warning' },\n      info: { prepend: 'text-rui-info', append: 'text-rui-info', textarea: 'text-rui-info', icon: 'text-rui-info' },\n      success: { prepend: 'text-rui-success', append: 'text-rui-success', textarea: 'text-rui-success', icon: 'text-rui-success' },\n    },\n    validation: {\n      error: {\n        textarea: '!border-rui-error',\n        label: '!text-rui-error !after:border-rui-error',\n      },\n      success: {\n        textarea: '!border-rui-success',\n        label: '!text-rui-success !after:border-rui-success',\n      },\n    },\n  },\n  compoundVariants: [\n    // --- Default variant ---\n    { variant: 'default', focused: true, class: { label: 'after:scale-x-100' } },\n\n    // --- Filled variant ---\n    { variant: 'filled', focused: true, class: { label: 'bg-black/[0.09] dark:bg-white/[0.13]' } },\n    { variant: 'filled', noLabel: true, class: { textarea: 'py-4', textareaSizer: 'py-4' } },\n    { variant: 'filled', noLabel: true, dense: true, class: { textarea: 'py-3', textareaSizer: 'py-3' } },\n\n    // --- Outlined variant ---\n    { variant: 'outlined', active: true, class: {\n      textarea: 'border-t-transparent',\n      // Anchored in rem for the reason textFieldStyles gives: a percentage overshoots on blur\n      label: '!h-auto -translate-y-[0.5rem] pl-4',\n    } },\n    { variant: 'outlined', dense: true, class: { label: 'leading-[2.5]' } },\n    // Re-asserted because the dense rule's later `leading-[2.5]` wins in twMerge otherwise\n    { variant: 'outlined', dense: true, active: true, class: { label: '!leading-tight' } },\n\n    // --- Focus label color (per color) ---\n    { focused: true, color: 'primary', class: { label: 'text-rui-primary' } },\n    { focused: true, color: 'secondary', class: { label: 'text-rui-secondary' } },\n    { focused: true, color: 'error', class: { label: 'text-rui-error' } },\n    { focused: true, color: 'warning', class: { label: 'text-rui-warning' } },\n    { focused: true, color: 'info', class: { label: 'text-rui-info' } },\n    { focused: true, color: 'success', class: { label: 'text-rui-success' } },\n\n    // --- Label after border color (always applied when color set) ---\n    { color: 'primary', class: { label: 'after:border-rui-primary' } },\n    { color: 'secondary', class: { label: 'after:border-rui-secondary' } },\n    { color: 'error', class: { label: 'after:border-rui-error' } },\n    { color: 'warning', class: { label: 'after:border-rui-warning' } },\n    { color: 'info', class: { label: 'after:border-rui-info' } },\n    { color: 'success', class: { label: 'after:border-rui-success' } },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    noResize: false,\n  },\n});\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
 import type { RuiIcons } from '../../../icons/index.js';
-import { type TextFieldVariant } from '../../../components/forms/text-field/text-field-styles.js';
+import { type TextFieldVariant } from './text-field-styles.js';
 export interface TextFieldProps {
     label?: string;
     placeholder?: string;
@@ -34,14 +34,14 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     element: Readonly<globalThis.ShallowRef<HTMLInputElement | null>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: () => any;
-    blur: (event: Event) => any;
     "update:modelValue": (value: string) => any;
+    blur: (event: Event) => any;
     "focus-input": (event: Event) => any;
     remove: (value: unknown) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClear?: (() => any) | undefined;
-    onBlur?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onBlur?: ((event: Event) => any) | undefined;
     "onFocus-input"?: ((event: Event) => any) | undefined;
     onRemove?: ((value: unknown) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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 { textFieldStyles, type TextFieldVariant } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\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 TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  variant?: TextFieldVariant;\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  variant = 'default',\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 prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst { focused } = useFocus(inputRef);\nconst { create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst active = computed<boolean>(() => get(focused) || !!get(modelValue));\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  variant,\n  dense,\n  disabled,\n  hovered: get(isHovered),\n  focused: get(focused),\n  active: get(active),\n  noLabel: !label,\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n  showLabel: !!label,\n}));\n\nconst labelStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst legendText = computed<string>(() => {\n  if (!get(active) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\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    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    <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        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 :name=\"prependIcon\" />\n        </div>\n      </div>\n      <div\n        :class=\"ui.inputWrapper()\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\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        <label\n          :class=\"ui.label()\"\n          :style=\"labelStyle\"\n        >\n          <span :class=\"ui.labelText()\">\n            {{ label }}\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </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          color=\"error\"\n          data-id=\"clear-btn\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"20\"\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 :name=\"appendIcon\" />\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 { textFieldStyles, type TextFieldVariant } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\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 TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  variant?: TextFieldVariant;\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  variant = 'default',\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 prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst { focused } = useFocus(inputRef);\nconst { create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst active = computed<boolean>(() => get(focused) || !!get(modelValue));\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  variant,\n  dense,\n  disabled,\n  hovered: get(isHovered),\n  focused: get(focused),\n  active: get(active),\n  noLabel: !label,\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n  showLabel: !!label,\n}));\n\nconst labelStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst legendText = computed<string>(() => {\n  if (!get(active) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\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    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    <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        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 :name=\"prependIcon\" />\n        </div>\n      </div>\n      <div\n        :class=\"ui.inputWrapper()\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\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        <label\n          :class=\"ui.label()\"\n          :style=\"labelStyle\"\n        >\n          <span :class=\"ui.labelText()\">\n            {{ label }}\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </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          color=\"error\"\n          data-id=\"clear-btn\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"20\"\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 :name=\"appendIcon\" />\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/text-field-styles.d.ts

@@ -1,4 +1,4 @@
-import { type TextInputVariant } from '../../../components/forms/text-input-styles.js';
+import { type TextInputVariant } from '../text-input-styles.js';
 export type TextFieldVariant = TextInputVariant;
 /**
  * tv() styles for RuiTextField. Extends textInputBase for shared
@@ -6,7 +6,40 @@ export type TextFieldVariant = TextInputVariant;
  *
  * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes
  * between base and extension. Never put a class in the base slot that a
- * variant needs to override — put variant-specific classes in the variants.
+ * variant needs to override, put variant-specific classes in the variants.
+ *
+ * Choices the class lists cannot state themselves:
+ *
+ * The label's font size is the arbitrary `text-[1rem]` rather than
+ * `text-base`, because the named class also carries `line-height: 1.5rem` and
+ * a consumer's later-loaded `.text-base` rule would then beat the per-variant
+ * `leading-*`. The arbitrary form emits font-size alone.
+ *
+ * A floated label keeps `--prepend-w` / `--append-w` in its padding so it sits
+ * above the input column rather than above the prepend icon or append button.
+ * Outlined is the exception: per MD3 its floated label straddles the border at
+ * the start of the field, so it drops `--prepend-w` and anchors to the left
+ * edge.
+ *
+ * Dense mode lifts the labelText glyphs rather than the label container: the
+ * container carries the `after:` underline pseudo, which would float above the
+ * input row if it moved with the label. Non-dense has enough room that no lift
+ * is needed.
+ *
+ * The outlined float translates by a fixed rem, roughly half the active
+ * label's 0.9375rem height, and not by a percentage. A percentage is
+ * recomputed against the current label height, which jumps to the input's full
+ * height the moment `!h-auto` is removed on blur, producing a visible upward
+ * overshoot before the transition settles.
+ *
+ * Outlined + dense + active re-asserts `leading-tight`: the dense rule's
+ * `leading-[2.5]` appears later, so twMerge keeps it, which inflates the
+ * floated label's line-box from ~15px to ~30px and pushes its centre below the
+ * fieldset border.
+ *
+ * A field with no label strips the wrapper's `pt-3` floating-label reserve and
+ * tightens the input padding, so its underline sits at the same baseline as a
+ * RuiMenuSelect activator (40px, or 32px dense).
  */
 export declare const textFieldStyles: import("tailwind-variants").TVReturnType<{
     variant: {
@@ -251,7 +284,7 @@ export declare const textFieldStyles: import("tailwind-variants").TVReturnType<{
     label: string;
     fieldset: string;
     legend: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     focused: {
         true: {
             fieldset: string;
@@ -296,4 +329,4 @@ export declare const textFieldStyles: import("tailwind-variants").TVReturnType<{
     label: string;
     fieldset: string;
     legend: string;
-}, undefined, unknown, unknown, undefined>>>;
+}>>>;