@rotki/ui-library 2.21.0 → 2.22.1

package/dist/components/forms/slider/slider-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-styles.js","names":[],"sources":["../../../../src/components/forms/slider/slider-styles.ts"],"sourcesContent":["import type { ContextColorsType } from '@/consts/colors';\nimport { tv } from '@/utils/tv';\n\nexport const SliderInteraction = {\n  idle: 'idle',\n  hover: 'hover',\n  focus: 'focus',\n  active: 'active',\n} as const;\n\nexport type SliderInteraction = (typeof SliderInteraction)[keyof typeof SliderInteraction];\n\n/** Static class map for highlighted big-tick colors (avoids dynamic class construction) */\nexport const HIGHLIGHT_COLOR_MAP: Record<ContextColorsType, string> = {\n  primary: '!bg-rui-primary',\n  secondary: '!bg-rui-secondary',\n  error: '!bg-rui-error',\n  warning: '!bg-rui-warning',\n  info: '!bg-rui-info',\n  success: '!bg-rui-success',\n};\n\n/** Default highlighted tick color (non-big-tick) */\nexport const HIGHLIGHT_DEFAULT = 'bg-rui-grey-100 dark:bg-[#121212]';\n\nexport const sliderStyles = tv({\n  slots: {\n    wrapper: 'flex items-start gap-3',\n    label: 'mt-1 text-rui-text text-body-1',\n    outer: 'relative h-8 flex-1 min-w-[7.5rem]',\n    inner: 'relative',\n    input: 'h-full w-full opacity-0 cursor-pointer',\n    slider: 'absolute h-full w-full top-0 px-2 pointer-events-none',\n    sliderInner: 'relative h-full w-full cursor-pointer',\n    container: 'absolute top-1/2 -translate-y-1/2 w-full h-1 rounded-full',\n    track: 'transition-all ease-linear duration-75 h-full rounded-full',\n    ticks: 'h-full absolute top-0 flex justify-between items-center',\n    tick: 'rounded-full',\n    thumb: 'absolute top-1/2 transition-all ease-linear duration-75 -translate-y-1/2 -translate-x-1/2 w-3 h-3 rounded-full shadow-2',\n    thumbRipple: [\n      `before:content-[''] before:w-8 before:h-8 before:rounded-full before:absolute before:top-1/2 before:left-1/2`,\n      'before:opacity-10 before:transition before:-translate-x-1/2 before:-translate-y-1/2 before:scale-0',\n    ].join(' '),\n    thumbLabel: [\n      'invisible opacity-0',\n      'absolute -mt-7 transition-all ease-linear duration-75 -translate-x-1/2',\n      'px-2 py-1 text-xs font-normal',\n      'bg-rui-grey-700/90 text-white rounded shadow',\n    ].join(' '),\n  },\n  variants: {\n    disabled: {\n      true: {\n        label: 'text-rui-text-disabled',\n        container: '!bg-rui-grey-300 dark:!bg-rui-grey-800',\n        track: '!bg-rui-grey-400 dark:!bg-rui-grey-700',\n        thumb: '!bg-rui-grey-400 dark:!bg-rui-grey-700',\n      },\n    },\n    vertical: {\n      true: {\n        wrapper: 'flex-col-reverse items-center h-full',\n        label: 'mb-2 text-center',\n        outer: 'min-w-0 min-h-[7.5rem] w-8',\n        inner: '-rotate-90',\n        thumbLabel: 'mt-6 rotate-90 translate-x-0 [transform-origin:0_50%]',\n      },\n    },\n    interaction: {\n      idle: {},\n      hover: { thumbRipple: 'before:scale-100' },\n      focus: { thumbRipple: 'before:scale-100 before:opacity-15' },\n      active: { thumbRipple: 'before:scale-100 before:opacity-30', thumbLabel: 'visible opacity-100' },\n    },\n    validation: {\n      error: { label: 'text-rui-error' },\n      success: { label: 'text-rui-success' },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n    bigTick: {\n      true: {},\n    },\n  },\n  compoundSlots: [\n    // Container bg (with opacity)\n    { slots: ['container'], color: 'primary', class: 'bg-rui-primary bg-opacity-40' },\n    { slots: ['container'], color: 'secondary', class: 'bg-rui-secondary bg-opacity-40' },\n    { slots: ['container'], color: 'error', class: 'bg-rui-error bg-opacity-40' },\n    { slots: ['container'], color: 'warning', class: 'bg-rui-warning bg-opacity-40' },\n    { slots: ['container'], color: 'info', class: 'bg-rui-info bg-opacity-40' },\n    { slots: ['container'], color: 'success', class: 'bg-rui-success bg-opacity-40' },\n\n    // Track + thumb + thumb ripple + tick color\n    { slots: ['track', 'thumb', 'tick'], color: 'primary', class: 'bg-rui-primary' },\n    { slots: ['track', 'thumb', 'tick'], color: 'secondary', class: 'bg-rui-secondary' },\n    { slots: ['track', 'thumb', 'tick'], color: 'error', class: 'bg-rui-error' },\n    { slots: ['track', 'thumb', 'tick'], color: 'warning', class: 'bg-rui-warning' },\n    { slots: ['track', 'thumb', 'tick'], color: 'info', class: 'bg-rui-info' },\n    { slots: ['track', 'thumb', 'tick'], color: 'success', class: 'bg-rui-success' },\n\n    // Thumb ripple (before pseudo) color\n    { slots: ['thumbRipple'], color: 'primary', class: 'before:bg-rui-primary' },\n    { slots: ['thumbRipple'], color: 'secondary', class: 'before:bg-rui-secondary' },\n    { slots: ['thumbRipple'], color: 'error', class: 'before:bg-rui-error' },\n    { slots: ['thumbRipple'], color: 'warning', class: 'before:bg-rui-warning' },\n    { slots: ['thumbRipple'], color: 'info', class: 'before:bg-rui-info' },\n    { slots: ['thumbRipple'], color: 'success', class: 'before:bg-rui-success' },\n  ],\n  compoundVariants: [\n    // Big tick: lighter default, color highlighted\n    { bigTick: true, color: 'primary', class: { tick: '!bg-rui-primary-lighter' } },\n    { bigTick: true, color: 'secondary', class: { tick: '!bg-rui-secondary-lighter' } },\n    { bigTick: true, color: 'error', class: { tick: '!bg-rui-error-lighter' } },\n    { bigTick: true, color: 'warning', class: { tick: '!bg-rui-warning-lighter' } },\n    { bigTick: true, color: 'info', class: { tick: '!bg-rui-info-lighter' } },\n    { bigTick: true, color: 'success', class: { tick: '!bg-rui-success-lighter' } },\n  ],\n  defaultVariants: {\n    interaction: 'idle',\n    color: 'primary',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"slider-styles.js","names":[],"sources":["../../../../src/components/forms/slider/slider-styles.ts"],"sourcesContent":["import type { ContextColorsType } from '@/consts/colors';\nimport { tv } from '@/utils/tv';\n\nexport const SliderInteraction = {\n  idle: 'idle',\n  hover: 'hover',\n  focus: 'focus',\n  active: 'active',\n} as const;\n\nexport type SliderInteraction = (typeof SliderInteraction)[keyof typeof SliderInteraction];\n\n/** Static class map for highlighted big-tick colors (avoids dynamic class construction) */\nexport const HIGHLIGHT_COLOR_MAP: Record<ContextColorsType, string> = {\n  primary: '!bg-rui-primary',\n  secondary: '!bg-rui-secondary',\n  error: '!bg-rui-error',\n  warning: '!bg-rui-warning',\n  info: '!bg-rui-info',\n  success: '!bg-rui-success',\n};\n\n/** Default highlighted tick color (non-big-tick) */\nexport const HIGHLIGHT_DEFAULT = 'bg-rui-grey-100 dark:bg-[#121212]';\n\nexport const sliderStyles = tv({\n  slots: {\n    wrapper: 'flex items-start gap-3',\n    label: 'mt-1 text-rui-text text-body-1',\n    outer: 'relative h-8 flex-1 min-w-[7.5rem]',\n    inner: 'relative',\n    input: 'h-full w-full opacity-0 cursor-pointer',\n    slider: 'absolute h-full w-full top-0 px-2 pointer-events-none',\n    sliderInner: 'relative h-full w-full cursor-pointer',\n    container: 'absolute top-1/2 -translate-y-1/2 w-full h-1 rounded-full',\n    track: 'transition-all ease-linear duration-75 h-full rounded-full',\n    ticks: 'h-full absolute top-0 flex justify-between items-center',\n    tick: 'rounded-full',\n    thumb: 'absolute top-1/2 transition-all ease-linear duration-75 -translate-y-1/2 -translate-x-1/2 w-3 h-3 rounded-full shadow-2',\n    thumbRipple: [\n      `before:content-[''] before:w-8 before:h-8 before:rounded-full before:absolute before:top-1/2 before:left-1/2`,\n      'before:opacity-10 before:transition before:-translate-x-1/2 before:-translate-y-1/2 before:scale-0',\n    ].join(' '),\n    thumbLabel: [\n      'invisible opacity-0',\n      'absolute -mt-7 transition-all ease-linear duration-75 -translate-x-1/2',\n      'px-2 py-1 text-xs font-normal',\n      'bg-rui-grey-700/90 text-white rounded shadow',\n    ].join(' '),\n  },\n  variants: {\n    disabled: {\n      true: {\n        label: 'text-rui-text-disabled',\n        container: '!bg-rui-grey-300 dark:!bg-rui-grey-800',\n        track: '!bg-rui-grey-400 dark:!bg-rui-grey-700',\n        thumb: '!bg-rui-grey-400 dark:!bg-rui-grey-700',\n      },\n    },\n    vertical: {\n      true: {\n        wrapper: 'flex-col-reverse items-center h-full',\n        label: 'mb-2 text-center',\n        outer: 'min-w-0 min-h-[7.5rem] w-8',\n        inner: '-rotate-90',\n        thumbLabel: 'mt-6 rotate-90 translate-x-0 [transform-origin:0_50%]',\n      },\n    },\n    interaction: {\n      idle: {},\n      hover: { thumbRipple: 'before:scale-100' },\n      focus: { thumbRipple: 'before:scale-100 before:opacity-15' },\n      active: { thumbRipple: 'before:scale-100 before:opacity-30', thumbLabel: 'visible opacity-100' },\n    },\n    validation: {\n      error: { label: 'text-rui-error' },\n      success: { label: 'text-rui-success' },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n    bigTick: {\n      true: {},\n    },\n  },\n  compoundSlots: [\n    // Container bg (with opacity)\n    { slots: ['container'], color: 'primary', class: 'bg-rui-primary bg-opacity-40' },\n    { slots: ['container'], color: 'secondary', class: 'bg-rui-secondary bg-opacity-40' },\n    { slots: ['container'], color: 'error', class: 'bg-rui-error bg-opacity-40' },\n    { slots: ['container'], color: 'warning', class: 'bg-rui-warning bg-opacity-40' },\n    { slots: ['container'], color: 'info', class: 'bg-rui-info bg-opacity-40' },\n    { slots: ['container'], color: 'success', class: 'bg-rui-success bg-opacity-40' },\n\n    // Track + thumb + thumb ripple + tick color\n    { slots: ['track', 'thumb', 'tick'], color: 'primary', class: 'bg-rui-primary' },\n    { slots: ['track', 'thumb', 'tick'], color: 'secondary', class: 'bg-rui-secondary' },\n    { slots: ['track', 'thumb', 'tick'], color: 'error', class: 'bg-rui-error' },\n    { slots: ['track', 'thumb', 'tick'], color: 'warning', class: 'bg-rui-warning' },\n    { slots: ['track', 'thumb', 'tick'], color: 'info', class: 'bg-rui-info' },\n    { slots: ['track', 'thumb', 'tick'], color: 'success', class: 'bg-rui-success' },\n\n    // Thumb ripple (before pseudo) color\n    { slots: ['thumbRipple'], color: 'primary', class: 'before:bg-rui-primary' },\n    { slots: ['thumbRipple'], color: 'secondary', class: 'before:bg-rui-secondary' },\n    { slots: ['thumbRipple'], color: 'error', class: 'before:bg-rui-error' },\n    { slots: ['thumbRipple'], color: 'warning', class: 'before:bg-rui-warning' },\n    { slots: ['thumbRipple'], color: 'info', class: 'before:bg-rui-info' },\n    { slots: ['thumbRipple'], color: 'success', class: 'before:bg-rui-success' },\n  ],\n  compoundVariants: [\n    // Big tick: lighter default, color highlighted\n    { bigTick: true, color: 'primary', class: { tick: '!bg-rui-primary-lighter' } },\n    { bigTick: true, color: 'secondary', class: { tick: '!bg-rui-secondary-lighter' } },\n    { bigTick: true, color: 'error', class: { tick: '!bg-rui-error-lighter' } },\n    { bigTick: true, color: 'warning', class: { tick: '!bg-rui-warning-lighter' } },\n    { bigTick: true, color: 'info', class: { tick: '!bg-rui-info-lighter' } },\n    { bigTick: true, color: 'success', class: { tick: '!bg-rui-success-lighter' } },\n  ],\n  defaultVariants: {\n    interaction: 'idle',\n    color: 'primary',\n  },\n});\n"],"mappings":"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"}

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

@@ -19,11 +19,11 @@ var _hoisted_3 = {
 	key: 0,
 	class: "text-rui-error"
 };
-var RuiSwitch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiSwitch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiSwitch",
 	inheritAttrs: false,
 	__name: "RuiSwitch",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		disabled: {
 			type: Boolean,
 			default: false

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":"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"}

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

@@ -17,11 +17,11 @@ var _hoisted_2 = [
 	"readonly",
 	"aria-invalid"
 ];
-var RuiTextArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiTextArea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiTextArea",
 	inheritAttrs: false,
 	__name: "RuiTextArea",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		label: { default: "" },
 		placeholder: { default: "" },
 		disabled: {
@@ -71,7 +71,7 @@ var RuiTextArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		"modelValue": { required: true },
 		"modelModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["click:clear"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ mergeModels(["click:clear"], ["update:modelValue"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const modelValue = useModel(__props, "modelValue");
 		const emit = __emit;

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":"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"}
+{"version":3,"file":"RuiTextArea.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/forms/text-area/RuiTextArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { 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.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      // 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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"}

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

@@ -17,11 +17,11 @@ var _hoisted_1 = [
 	"readonly",
 	"aria-invalid"
 ];
-var RuiTextField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiTextField_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiTextField",
 	inheritAttrs: false,
 	__name: "RuiTextField",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		label: { default: "" },
 		placeholder: { default: "" },
 		disabled: {
@@ -60,7 +60,7 @@ var RuiTextField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		"modelValue": { required: true },
 		"modelModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels([
+	emits: /*@__PURE__*/ mergeModels([
 		"focus-input",
 		"blur",
 		"remove",

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.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field-styles.js","names":[],"sources":["../../../../src/components/forms/text-field/text-field-styles.ts"],"sourcesContent":["import { textInputBase, type TextInputVariant, underlinePseudo } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type TextFieldVariant = TextInputVariant;\n\n/**\n * tv() styles for RuiTextField. 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 */\n\nexport const textFieldStyles = tv({\n  extend: textInputBase,\n  slots: {\n    // Re-declare base slots for type inference (extend merges classes at runtime)\n    fieldset: '',\n    legend: '',\n    // No pt-* here — each variant sets its own padding-top\n    wrapper: 'relative w-full flex items-center rounded bg-white dark:bg-transparent',\n    input: [\n      'peer leading-6 text-rui-text w-full bg-transparent pr-4',\n      'outline-0 outline-none transition-all',\n      'placeholder:opacity-0 focus:placeholder:opacity-100',\n    ].join(' '),\n    // No border-b or display here — each variant sets its own\n    label: [\n      // Use arbitrary `text-[1rem]` instead of `text-base` — the named class\n      // bundles `line-height: 1.5rem`, and the consumer's later-loaded\n      // `.text-base` rule would override our `leading-*` per variant. The\n      // arbitrary form emits font-size only, so `leading-*` stays authoritative.\n      'left-0 text-[1rem] pointer-events-none',\n      'absolute top-0 h-full w-full select-none',\n      // Dynamic padding via CSS variables\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      // CSS-only autofill fallback (before JS catches up)\n      'peer-autofill:text-[0.75rem] peer-autofill:leading-tight',\n    ].join(' '),\n    labelText: 'truncate transition-all duration-75',\n    inputWrapper: 'flex flex-1 overflow-hidden',\n    prepend: 'flex items-center gap-1 shrink-0',\n    append: 'flex items-center gap-1 shrink-0',\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        wrapper: 'pt-3',\n        input: 'py-1.5',\n        label: `flex leading-[3.75] ${underlinePseudo}`,\n        prepend: 'pr-3',\n        append: 'pl-3',\n      },\n      filled: {\n        input: 'px-4 py-4',\n        label: `flex leading-[3.5] [--x-padding:1rem] rounded-t bg-black/[0.06] dark:bg-white/[0.09] ${underlinePseudo}`,\n        prepend: 'pl-3',\n        append: 'pr-3',\n      },\n      outlined: {\n        inputWrapper: '!overflow-visible',\n        input: 'px-4 py-4',\n        label: [\n          'flex leading-[3.5] [--x-padding:1rem]',\n          'border-0 border-transparent',\n          'after:content-none',\n        ].join(' '),\n        fieldset: '!mt-0 !h-full',\n        prepend: 'pl-3',\n        append: 'pr-3',\n      },\n    },\n    dense: {\n      true: {},\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          // Keep --prepend-w / --append-w in the floated padding so the\n          // label sits above the input column, not above the prepend\n          // icon / append button.\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      },\n    },\n    noLabel: {\n      true: {},\n    },\n    showLabel: {\n      true: {},\n    },\n    textColor: {\n      primary: { prepend: 'text-rui-primary', append: 'text-rui-primary', input: 'text-rui-primary', icon: 'text-rui-primary' },\n      secondary: { prepend: 'text-rui-secondary', append: 'text-rui-secondary', input: 'text-rui-secondary', icon: 'text-rui-secondary' },\n      error: { prepend: 'text-rui-error', append: 'text-rui-error', input: 'text-rui-error', icon: 'text-rui-error' },\n      warning: { prepend: 'text-rui-warning', append: 'text-rui-warning', input: 'text-rui-warning', icon: 'text-rui-warning' },\n      info: { prepend: 'text-rui-info', append: 'text-rui-info', input: 'text-rui-info', icon: 'text-rui-info' },\n      success: { prepend: 'text-rui-success', append: 'text-rui-success', input: 'text-rui-success', icon: 'text-rui-success' },\n    },\n    validation: {\n      error: {\n        input: '!border-rui-error',\n        label: '!text-rui-error !after:border-rui-error',\n      },\n      success: {\n        input: '!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    { variant: 'default', dense: true, class: { input: 'py-1', label: 'leading-[3.5]' } },\n    // In dense mode, lift only the labelText glyphs (not the label\n    // container) so the floated label clears the compact ~32px input row.\n    // Translating the label container would drag its `after:` underline\n    // pseudo with it, leaving the focus underline floating above the\n    // input row; translating only the inner span keeps the underline\n    // anchored. Non-dense default has enough vertical breathing room\n    // (~36px input + 12px `pt-3` reserve) that the labelText sits cleanly\n    // above the input without any lift.\n    { variant: 'default', dense: true, active: true, class: { labelText: '-translate-y-[0.5rem]' } },\n    // Without a label, the wrapper's `pt-3` floating-label reserve serves no\n    // purpose and leaves the field ~4–12px taller than an equivalent\n    // RuiMenuSelect dense activator. Strip it and tighten the input padding\n    // so the underline sits at a matching baseline (40px non-dense, 32px\n    // dense) — these match min-h-10 and !min-h-8 of the menu-select\n    // activator.\n    { variant: 'default', noLabel: true, class: { wrapper: '!pt-0', input: 'py-2' } },\n    { variant: 'default', noLabel: true, dense: true, class: { input: 'py-1' } },\n\n    // --- Filled variant ---\n    { variant: 'filled', focused: true, class: { label: 'bg-black/[0.09] dark:bg-white/[0.13]' } },\n    { variant: 'filled', active: true, class: { label: 'leading-[1.5]' } },\n    { variant: 'filled', dense: true, class: { input: 'pt-5 pb-1', label: 'leading-[3]' } },\n    { variant: 'filled', dense: true, active: true, class: { label: 'leading-[2.25]' } },\n    { variant: 'filled', noLabel: true, class: { input: 'py-4' } },\n    { variant: 'filled', noLabel: true, dense: true, class: { input: 'py-3' } },\n\n    // --- Outlined variant ---\n    { variant: 'outlined', active: true, class: {\n      input: 'border-t-transparent',\n      // Use a fixed translate in rem (≈50% of the active label's\n      // 0.9375rem height — text-[0.75rem] × leading-tight). A percentage\n      // translate gets recomputed against the *current* label height,\n      // which jumps from 0.9375rem to the input's full height the moment\n      // !h-auto is removed on blur — producing a transient transform far\n      // larger than the floated value and a visible upward overshoot\n      // before the transition settles. Anchoring in rem (rather than %)\n      // keeps the start/end values consistent across the height swap and\n      // scales with the root font-size.\n      //\n      // Override the active slot's padding-left to drop `--prepend-w` and\n      // stay anchored to the field's left edge — per MD3, the floated\n      // label of an outlined field straddles the border at the start of\n      // the field, not above the input column. Filled/default both keep\n      // the prepend offset (label sits above the input), but outlined\n      // does not.\n      label: '!h-auto -translate-y-[0.5rem] [padding-left:var(--x-padding,0px)]',\n    } },\n    { variant: 'outlined', dense: true, class: { input: 'py-2', 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    // (it appears later than the active slot's `leading-tight`), inflating\n    // the floated label's line-box from ~15px to ~30px and pushing its\n    // visual centre 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  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"text-field-styles.js","names":[],"sources":["../../../../src/components/forms/text-field/text-field-styles.ts"],"sourcesContent":["import { textInputBase, type TextInputVariant, underlinePseudo } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type TextFieldVariant = TextInputVariant;\n\n/**\n * tv() styles for RuiTextField. 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 */\n\nexport const textFieldStyles = tv({\n  extend: textInputBase,\n  slots: {\n    // Re-declare base slots for type inference (extend merges classes at runtime)\n    fieldset: '',\n    legend: '',\n    // No pt-* here — each variant sets its own padding-top\n    wrapper: 'relative w-full flex items-center rounded bg-white dark:bg-transparent',\n    input: [\n      'peer leading-6 text-rui-text w-full bg-transparent pr-4',\n      'outline-0 outline-none transition-all',\n      'placeholder:opacity-0 focus:placeholder:opacity-100',\n    ].join(' '),\n    // No border-b or display here — each variant sets its own\n    label: [\n      // Use arbitrary `text-[1rem]` instead of `text-base` — the named class\n      // bundles `line-height: 1.5rem`, and the consumer's later-loaded\n      // `.text-base` rule would override our `leading-*` per variant. The\n      // arbitrary form emits font-size only, so `leading-*` stays authoritative.\n      'left-0 text-[1rem] pointer-events-none',\n      'absolute top-0 h-full w-full select-none',\n      // Dynamic padding via CSS variables\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      // CSS-only autofill fallback (before JS catches up)\n      'peer-autofill:text-[0.75rem] peer-autofill:leading-tight',\n    ].join(' '),\n    labelText: 'truncate transition-all duration-75',\n    inputWrapper: 'flex flex-1 overflow-hidden',\n    prepend: 'flex items-center gap-1 shrink-0',\n    append: 'flex items-center gap-1 shrink-0',\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        wrapper: 'pt-3',\n        input: 'py-1.5',\n        label: `flex leading-[3.75] ${underlinePseudo}`,\n        prepend: 'pr-3',\n        append: 'pl-3',\n      },\n      filled: {\n        input: 'px-4 py-4',\n        label: `flex leading-[3.5] [--x-padding:1rem] rounded-t bg-black/[0.06] dark:bg-white/[0.09] ${underlinePseudo}`,\n        prepend: 'pl-3',\n        append: 'pr-3',\n      },\n      outlined: {\n        inputWrapper: '!overflow-visible',\n        input: 'px-4 py-4',\n        label: [\n          'flex leading-[3.5] [--x-padding:1rem]',\n          'border-0 border-transparent',\n          'after:content-none',\n        ].join(' '),\n        fieldset: '!mt-0 !h-full',\n        prepend: 'pl-3',\n        append: 'pr-3',\n      },\n    },\n    dense: {\n      true: {},\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          // Keep --prepend-w / --append-w in the floated padding so the\n          // label sits above the input column, not above the prepend\n          // icon / append button.\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      },\n    },\n    noLabel: {\n      true: {},\n    },\n    showLabel: {\n      true: {},\n    },\n    textColor: {\n      primary: { prepend: 'text-rui-primary', append: 'text-rui-primary', input: 'text-rui-primary', icon: 'text-rui-primary' },\n      secondary: { prepend: 'text-rui-secondary', append: 'text-rui-secondary', input: 'text-rui-secondary', icon: 'text-rui-secondary' },\n      error: { prepend: 'text-rui-error', append: 'text-rui-error', input: 'text-rui-error', icon: 'text-rui-error' },\n      warning: { prepend: 'text-rui-warning', append: 'text-rui-warning', input: 'text-rui-warning', icon: 'text-rui-warning' },\n      info: { prepend: 'text-rui-info', append: 'text-rui-info', input: 'text-rui-info', icon: 'text-rui-info' },\n      success: { prepend: 'text-rui-success', append: 'text-rui-success', input: 'text-rui-success', icon: 'text-rui-success' },\n    },\n    validation: {\n      error: {\n        input: '!border-rui-error',\n        label: '!text-rui-error !after:border-rui-error',\n      },\n      success: {\n        input: '!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    { variant: 'default', dense: true, class: { input: 'py-1', label: 'leading-[3.5]' } },\n    // In dense mode, lift only the labelText glyphs (not the label\n    // container) so the floated label clears the compact ~32px input row.\n    // Translating the label container would drag its `after:` underline\n    // pseudo with it, leaving the focus underline floating above the\n    // input row; translating only the inner span keeps the underline\n    // anchored. Non-dense default has enough vertical breathing room\n    // (~36px input + 12px `pt-3` reserve) that the labelText sits cleanly\n    // above the input without any lift.\n    { variant: 'default', dense: true, active: true, class: { labelText: '-translate-y-[0.5rem]' } },\n    // Without a label, the wrapper's `pt-3` floating-label reserve serves no\n    // purpose and leaves the field ~4–12px taller than an equivalent\n    // RuiMenuSelect dense activator. Strip it and tighten the input padding\n    // so the underline sits at a matching baseline (40px non-dense, 32px\n    // dense) — these match min-h-10 and !min-h-8 of the menu-select\n    // activator.\n    { variant: 'default', noLabel: true, class: { wrapper: '!pt-0', input: 'py-2' } },\n    { variant: 'default', noLabel: true, dense: true, class: { input: 'py-1' } },\n\n    // --- Filled variant ---\n    { variant: 'filled', focused: true, class: { label: 'bg-black/[0.09] dark:bg-white/[0.13]' } },\n    { variant: 'filled', active: true, class: { label: 'leading-[1.5]' } },\n    { variant: 'filled', dense: true, class: { input: 'pt-5 pb-1', label: 'leading-[3]' } },\n    { variant: 'filled', dense: true, active: true, class: { label: 'leading-[2.25]' } },\n    { variant: 'filled', noLabel: true, class: { input: 'py-4' } },\n    { variant: 'filled', noLabel: true, dense: true, class: { input: 'py-3' } },\n\n    // --- Outlined variant ---\n    { variant: 'outlined', active: true, class: {\n      input: 'border-t-transparent',\n      // Use a fixed translate in rem (≈50% of the active label's\n      // 0.9375rem height — text-[0.75rem] × leading-tight). A percentage\n      // translate gets recomputed against the *current* label height,\n      // which jumps from 0.9375rem to the input's full height the moment\n      // !h-auto is removed on blur — producing a transient transform far\n      // larger than the floated value and a visible upward overshoot\n      // before the transition settles. Anchoring in rem (rather than %)\n      // keeps the start/end values consistent across the height swap and\n      // scales with the root font-size.\n      //\n      // Override the active slot's padding-left to drop `--prepend-w` and\n      // stay anchored to the field's left edge — per MD3, the floated\n      // label of an outlined field straddles the border at the start of\n      // the field, not above the input column. Filled/default both keep\n      // the prepend offset (label sits above the input), but outlined\n      // does not.\n      label: '!h-auto -translate-y-[0.5rem] [padding-left:var(--x-padding,0px)]',\n    } },\n    { variant: 'outlined', dense: true, class: { input: 'py-2', 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    // (it appears later than the active slot's `leading-tight`), inflating\n    // the floated label's line-box from ~15px to ~30px and pushing its\n    // visual centre 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  },\n});\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"text-input-styles.js","names":[],"sources":["../../../src/components/forms/text-input-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const TextInputVariant = {\n  default: 'default',\n  filled: 'filled',\n  outlined: 'outlined',\n} as const;\n\nexport type TextInputVariant = (typeof TextInputVariant)[keyof typeof TextInputVariant];\n\n/**\n * Shared underline pseudo-element classes for default and filled variants.\n * Used by TextField and TextArea label slots.\n */\nexport const underlinePseudo = [\n  'border-b border-black/[0.42] dark:border-white/[0.42]',\n  'after:content-[\\'\\'] after:absolute after:bottom-0 after:left-0 after:block after:w-full',\n  'after:scale-x-0 after:border-b-2 after:mb-[-1px] after:transition-transform after:duration-300',\n  'after:border-black dark:after:border-white',\n].join(' ');\n\n/**\n * Shared base tv() for all text-input-family components.\n * Extended by: TextField, TextArea, MenuSelect, AutoComplete, DateTimePicker.\n *\n * Provides the common core: floating label, fieldset/legend (outlined),\n * validation colors, disabled state, dark mode, and focus color.\n *\n * ## State approach (JS-driven for all 5 components)\n *\n * - `focused`: from useFocus (Group A) or computed from isOpen (Group B)\n * - `active`: focused || hasValue — drives label float\n * - `hovered`: mouseenter/mouseleave ref\n *\n * ## Legend content\n *\n * The legend's `after:content` uses CSS variable `--rui-legend`.\n * Bind via `:style=\"{ '--rui-legend': labelWithQuote }\"` on the legend element.\n */\nexport const textInputBase = tv({\n  slots: {\n    label: 'text-rui-text-secondary transition-all duration-75',\n    fieldset: [\n      'absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0',\n      'rounded pointer-events-none px-2 transition-all -mt-2',\n      'border border-black/[0.23]',\n      'dark:border-white/[0.23]',\n      // Force the fieldset onto its own GPU compositing layer so the\n      // focused border is rasterized on integer pixel boundaries. Without\n      // this, at fractional y-coordinates with non-integer device pixel\n      // ratios (e.g. DPR 1.25), Chromium anti-aliases the 1.6px-2px focus\n      // border across two physical pixel rows behind the floated label,\n      // appearing as \"two thin lines crossing the label\". translateZ(0)\n      // promotes to a layer; the layer's raster snaps to integer pixels.\n      'transform-gpu',\n    ].join(' '),\n    legend: 'invisible text-[0.75rem] truncate [max-width:calc(100%-1rem)] leading-[0]',\n  },\n  variants: {\n    focused: {\n      true: {\n        fieldset: '!border-2',\n      },\n    },\n    hovered: {\n      true: {\n        fieldset: 'border-black dark:border-white',\n      },\n    },\n    disabled: {\n      true: {\n        fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    active: {\n      true: {},\n    },\n    showLabel: {\n      true: {},\n    },\n    validation: {\n      error: {\n        fieldset: '!border-rui-error',\n        label: '!text-rui-error',\n      },\n      success: {\n        fieldset: '!border-rui-success',\n        label: '!text-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Legend padding only when label is floated (active + has label)\n    { showLabel: true, active: true, class: { legend: 'px-2' } },\n    // Focused + color → fieldset border takes the color\n    { focused: true, color: 'primary', class: { fieldset: '!border-rui-primary' } },\n    { focused: true, color: 'secondary', class: { fieldset: '!border-rui-secondary' } },\n    { focused: true, color: 'error', class: { fieldset: '!border-rui-error' } },\n    { focused: true, color: 'warning', class: { fieldset: '!border-rui-warning' } },\n    { focused: true, color: 'info', class: { fieldset: '!border-rui-info' } },\n    { focused: true, color: 'success', class: { fieldset: '!border-rui-success' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n  },\n});\n\n/**\n * Shared tv() styles for the activator-based components (Group B):\n * MenuSelect, AutoComplete, DateTimePicker.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes.\n * Never put a class in the base slot that a variant needs to override.\n *\n * State-driven via JS refs: `outlined`, `float` (open || hasValue),\n * `opened`, `disabled`, `readonly`, `dense`.\n */\nexport const activatorStyles = tv({\n  extend: textInputBase,\n  slots: {\n    // Re-declare base slots for type inference\n    fieldset: '',\n    legend: '',\n    // `w-full inline-flex flex-col` so the activator fills its parent\n    // regardless of context (block, flex-row, grid). A consumer-passed\n    // width utility like `w-[20rem]` would normally collide with `w-full`\n    // on the same element and lose to cascade order; RuiAutoComplete /\n    // RuiMenuSelect / RuiDateTimePicker route consumer classes through\n    // `ui.wrapper({ class })` so tailwind-variants' twMerge deduplicates\n    // and the consumer's width wins.\n    wrapper: 'w-full inline-flex flex-col',\n    activator: [\n      'group relative inline-flex items-center w-full',\n      'outline-none focus:outline-none focus-within:outline-none cursor-pointer',\n      'min-h-14 pl-4 py-2 pr-8 rounded',\n      'm-0 transition-all text-body-1 text-left',\n      'dark:text-rui-text',\n    ].join(' '),\n    label: [\n      'text-rui-text-secondary [max-width:calc(100%-2.5rem)]',\n      'block truncate transition-all duration-75',\n    ].join(' '),\n    value: 'w-full block truncate transition-all duration-75',\n    clear: 'ml-auto shrink-0 invisible group-hover:!visible',\n    menu: 'overflow-y-auto max-h-60 min-w-[2.5rem]',\n    highlighted: '!bg-rui-grey-200 dark:!bg-rui-grey-800',\n    progress: 'absolute left-0 bottom-0 w-full',\n    icon: 'text-rui-text transition',\n    iconWrapper: 'flex items-center justify-end absolute right-3 top-px bottom-0',\n    required: 'text-rui-error',\n  },\n  variants: {\n    dense: {\n      true: {\n        activator: 'py-1.5 min-h-10',\n      },\n    },\n    disabled: {\n      true: {\n        activator: 'opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none',\n      },\n    },\n    readonly: {\n      true: {\n        activator: 'opacity-80 pointer-events-none cursor-default bg-gray-50 dark:bg-white/10',\n      },\n    },\n    filled: {\n      true: {\n        activator: [\n          '!rounded-t !rounded-b-none !bg-black/[0.06]',\n          '!hover:bg-black/[0.09] !focus-within:bg-black/[0.09]',\n          'dark:!bg-white/[0.09]',\n          'dark:!hover:bg-white/[0.13] dark:!focus-within:bg-white/[0.13]',\n          underlinePseudo,\n        ].join(' '),\n      },\n    },\n    outlined: {\n      true: {\n        activator: 'bg-white dark:bg-transparent border-none hover:border-none',\n        label: 'absolute',\n        fieldset: '!mt-0 !h-full',\n      },\n      false: {\n        activator: `!rounded-none ${underlinePseudo}`,\n      },\n    },\n    float: {\n      true: {\n        label: '-translate-y-2 top-0 text-[0.75rem] leading-4',\n      },\n    },\n    opened: {\n      true: {\n        icon: 'rotate-180',\n      },\n    },\n    active: {\n      true: {\n        highlighted: '!bg-rui-grey-300 dark:!bg-rui-grey-700',\n      },\n    },\n    hasError: {\n      true: {},\n    },\n    hasSuccess: {\n      true: {},\n    },\n    // Re-declare for type inference — actual styles are in textInputBase\n    hovered: { true: {} },\n  },\n  compoundVariants: [\n    // Legend padding when label is floated\n    { float: true, class: { legend: 'px-2' } },\n\n    // Non-outlined + opened → underline scales up\n    { outlined: false, opened: true, class: { activator: 'after:scale-x-100 after:border-rui-primary' } },\n\n    // Non-outlined + error → underline color\n    { outlined: false, hasError: true, class: { activator: 'after:scale-x-100 after:!border-rui-error' } },\n\n    // Non-outlined + success → underline color\n    { outlined: false, hasSuccess: true, class: { activator: 'after:scale-x-100 after:!border-rui-success' } },\n\n    // Non-outlined + disabled in dark mode\n    { outlined: false, disabled: true, class: { activator: 'dark:bg-white/10' } },\n\n    // Filled + disabled\n    { filled: true, disabled: true, class: { activator: 'bg-black/[0.03] dark:bg-white/[0.05]' } },\n\n    // Outlined + hovered → fieldset border\n    { outlined: true, hovered: true, class: { fieldset: 'border-black dark:border-white' } },\n\n    // Outlined + opened/focused → primary border\n    { outlined: true, opened: true, class: {\n      fieldset: '!border-rui-primary !border-2',\n      label: 'text-rui-primary',\n    } },\n\n    // Outlined + error → fieldset + label\n    { outlined: true, hasError: true, class: {\n      fieldset: '!border-rui-error',\n      label: '!text-rui-error',\n    } },\n    // Outlined + success → fieldset + label\n    { outlined: true, hasSuccess: true, class: {\n      fieldset: '!border-rui-success',\n      label: '!text-rui-success',\n    } },\n\n    // Outlined + disabled → dotted fieldset\n    { outlined: true, disabled: true, class: {\n      fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n    } },\n\n    // Float + opened → label color\n    { float: true, opened: true, class: { label: 'text-rui-primary' } },\n  ],\n  defaultVariants: {\n    filled: false,\n    outlined: false,\n    dense: false,\n    disabled: false,\n    readonly: false,\n    float: false,\n    opened: false,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"text-input-styles.js","names":[],"sources":["../../../src/components/forms/text-input-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const TextInputVariant = {\n  default: 'default',\n  filled: 'filled',\n  outlined: 'outlined',\n} as const;\n\nexport type TextInputVariant = (typeof TextInputVariant)[keyof typeof TextInputVariant];\n\n/**\n * Shared underline pseudo-element classes for default and filled variants.\n * Used by TextField and TextArea label slots.\n */\nexport const underlinePseudo = [\n  'border-b border-black/[0.42] dark:border-white/[0.42]',\n  'after:content-[\\'\\'] after:absolute after:bottom-0 after:left-0 after:block after:w-full',\n  'after:scale-x-0 after:border-b-2 after:mb-[-1px] after:transition-transform after:duration-300',\n  'after:border-black dark:after:border-white',\n].join(' ');\n\n/**\n * Shared base tv() for all text-input-family components.\n * Extended by: TextField, TextArea, MenuSelect, AutoComplete, DateTimePicker.\n *\n * Provides the common core: floating label, fieldset/legend (outlined),\n * validation colors, disabled state, dark mode, and focus color.\n *\n * ## State approach (JS-driven for all 5 components)\n *\n * - `focused`: from useFocus (Group A) or computed from isOpen (Group B)\n * - `active`: focused || hasValue — drives label float\n * - `hovered`: mouseenter/mouseleave ref\n *\n * ## Legend content\n *\n * The legend's `after:content` uses CSS variable `--rui-legend`.\n * Bind via `:style=\"{ '--rui-legend': labelWithQuote }\"` on the legend element.\n */\nexport const textInputBase = tv({\n  slots: {\n    label: 'text-rui-text-secondary transition-all duration-75',\n    fieldset: [\n      'absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0',\n      'rounded pointer-events-none px-2 transition-all -mt-2',\n      'border border-black/[0.23]',\n      'dark:border-white/[0.23]',\n      // Force the fieldset onto its own GPU compositing layer so the\n      // focused border is rasterized on integer pixel boundaries. Without\n      // this, at fractional y-coordinates with non-integer device pixel\n      // ratios (e.g. DPR 1.25), Chromium anti-aliases the 1.6px-2px focus\n      // border across two physical pixel rows behind the floated label,\n      // appearing as \"two thin lines crossing the label\". translateZ(0)\n      // promotes to a layer; the layer's raster snaps to integer pixels.\n      'transform-gpu',\n    ].join(' '),\n    legend: 'invisible text-[0.75rem] truncate [max-width:calc(100%-1rem)] leading-[0]',\n  },\n  variants: {\n    focused: {\n      true: {\n        fieldset: '!border-2',\n      },\n    },\n    hovered: {\n      true: {\n        fieldset: 'border-black dark:border-white',\n      },\n    },\n    disabled: {\n      true: {\n        fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    active: {\n      true: {},\n    },\n    showLabel: {\n      true: {},\n    },\n    validation: {\n      error: {\n        fieldset: '!border-rui-error',\n        label: '!text-rui-error',\n      },\n      success: {\n        fieldset: '!border-rui-success',\n        label: '!text-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Legend padding only when label is floated (active + has label)\n    { showLabel: true, active: true, class: { legend: 'px-2' } },\n    // Focused + color → fieldset border takes the color\n    { focused: true, color: 'primary', class: { fieldset: '!border-rui-primary' } },\n    { focused: true, color: 'secondary', class: { fieldset: '!border-rui-secondary' } },\n    { focused: true, color: 'error', class: { fieldset: '!border-rui-error' } },\n    { focused: true, color: 'warning', class: { fieldset: '!border-rui-warning' } },\n    { focused: true, color: 'info', class: { fieldset: '!border-rui-info' } },\n    { focused: true, color: 'success', class: { fieldset: '!border-rui-success' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n  },\n});\n\n/**\n * Shared tv() styles for the activator-based components (Group B):\n * MenuSelect, AutoComplete, DateTimePicker.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes.\n * Never put a class in the base slot that a variant needs to override.\n *\n * State-driven via JS refs: `outlined`, `float` (open || hasValue),\n * `opened`, `disabled`, `readonly`, `dense`.\n */\nexport const activatorStyles = tv({\n  extend: textInputBase,\n  slots: {\n    // Re-declare base slots for type inference\n    fieldset: '',\n    legend: '',\n    // `w-full inline-flex flex-col` so the activator fills its parent\n    // regardless of context (block, flex-row, grid). A consumer-passed\n    // width utility like `w-[20rem]` would normally collide with `w-full`\n    // on the same element and lose to cascade order; RuiAutoComplete /\n    // RuiMenuSelect / RuiDateTimePicker route consumer classes through\n    // `ui.wrapper({ class })` so tailwind-variants' twMerge deduplicates\n    // and the consumer's width wins.\n    wrapper: 'w-full inline-flex flex-col',\n    activator: [\n      'group relative inline-flex items-center w-full',\n      'outline-none focus:outline-none focus-within:outline-none cursor-pointer',\n      'min-h-14 pl-4 py-2 pr-8 rounded',\n      'm-0 transition-all text-body-1 text-left',\n      'dark:text-rui-text',\n    ].join(' '),\n    label: [\n      'text-rui-text-secondary [max-width:calc(100%-2.5rem)]',\n      'block truncate transition-all duration-75',\n    ].join(' '),\n    value: 'w-full block truncate transition-all duration-75',\n    clear: 'ml-auto shrink-0 invisible group-hover:!visible',\n    menu: 'overflow-y-auto max-h-60 min-w-[2.5rem]',\n    highlighted: '!bg-rui-grey-200 dark:!bg-rui-grey-800',\n    progress: 'absolute left-0 bottom-0 w-full',\n    icon: 'text-rui-text transition',\n    iconWrapper: 'flex items-center justify-end absolute right-3 top-px bottom-0',\n    required: 'text-rui-error',\n  },\n  variants: {\n    dense: {\n      true: {\n        activator: 'py-1.5 min-h-10',\n      },\n    },\n    disabled: {\n      true: {\n        activator: 'opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none',\n      },\n    },\n    readonly: {\n      true: {\n        activator: 'opacity-80 pointer-events-none cursor-default bg-gray-50 dark:bg-white/10',\n      },\n    },\n    filled: {\n      true: {\n        activator: [\n          '!rounded-t !rounded-b-none !bg-black/[0.06]',\n          '!hover:bg-black/[0.09] !focus-within:bg-black/[0.09]',\n          'dark:!bg-white/[0.09]',\n          'dark:!hover:bg-white/[0.13] dark:!focus-within:bg-white/[0.13]',\n          underlinePseudo,\n        ].join(' '),\n      },\n    },\n    outlined: {\n      true: {\n        activator: 'bg-white dark:bg-transparent border-none hover:border-none',\n        label: 'absolute',\n        fieldset: '!mt-0 !h-full',\n      },\n      false: {\n        activator: `!rounded-none ${underlinePseudo}`,\n      },\n    },\n    float: {\n      true: {\n        label: '-translate-y-2 top-0 text-[0.75rem] leading-4',\n      },\n    },\n    opened: {\n      true: {\n        icon: 'rotate-180',\n      },\n    },\n    active: {\n      true: {\n        highlighted: '!bg-rui-grey-300 dark:!bg-rui-grey-700',\n      },\n    },\n    hasError: {\n      true: {},\n    },\n    hasSuccess: {\n      true: {},\n    },\n    // Re-declare for type inference — actual styles are in textInputBase\n    hovered: { true: {} },\n  },\n  compoundVariants: [\n    // Legend padding when label is floated\n    { float: true, class: { legend: 'px-2' } },\n\n    // Non-outlined + opened → underline scales up\n    { outlined: false, opened: true, class: { activator: 'after:scale-x-100 after:border-rui-primary' } },\n\n    // Non-outlined + error → underline color\n    { outlined: false, hasError: true, class: { activator: 'after:scale-x-100 after:!border-rui-error' } },\n\n    // Non-outlined + success → underline color\n    { outlined: false, hasSuccess: true, class: { activator: 'after:scale-x-100 after:!border-rui-success' } },\n\n    // Non-outlined + disabled in dark mode\n    { outlined: false, disabled: true, class: { activator: 'dark:bg-white/10' } },\n\n    // Filled + disabled\n    { filled: true, disabled: true, class: { activator: 'bg-black/[0.03] dark:bg-white/[0.05]' } },\n\n    // Outlined + hovered → fieldset border\n    { outlined: true, hovered: true, class: { fieldset: 'border-black dark:border-white' } },\n\n    // Outlined + opened/focused → primary border\n    { outlined: true, opened: true, class: {\n      fieldset: '!border-rui-primary !border-2',\n      label: 'text-rui-primary',\n    } },\n\n    // Outlined + error → fieldset + label\n    { outlined: true, hasError: true, class: {\n      fieldset: '!border-rui-error',\n      label: '!text-rui-error',\n    } },\n    // Outlined + success → fieldset + label\n    { outlined: true, hasSuccess: true, class: {\n      fieldset: '!border-rui-success',\n      label: '!text-rui-success',\n    } },\n\n    // Outlined + disabled → dotted fieldset\n    { outlined: true, disabled: true, class: {\n      fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n    } },\n\n    // Float + opened → label color\n    { float: true, opened: true, class: { label: 'text-rui-primary' } },\n  ],\n  defaultVariants: {\n    filled: false,\n    outlined: false,\n    dense: false,\n    disabled: false,\n    readonly: false,\n    float: false,\n    opened: false,\n  },\n});\n"],"mappings":"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"}

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

@@ -13,7 +13,7 @@ var _hoisted_3 = {
 	key: "hint",
 	class: "text-rui-text-secondary text-caption"
 };
-var RuiFormTextDetail_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiFormTextDetail_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "RuiFormTextDetail",
 	props: {
 		errorMessages: { default: () => [] },

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

@@ -1 +1 @@
-{"version":3,"file":"RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-[1.5rem]\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      {{ hint }}\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,EAAE,wBAAwB,0BAA0B,UAAU,eAClE,wBACQ,QAAA,qBACA,QAAA,gBACP;;uBAID,YAgCkB,iBAAA;IA/BhB,KAAI;IACJ,OAAM;IACN,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,QAAA;;2BAQM,CALE,MAAA,SAAQ,IAAA,WAAA,EADhB,mBAMM,OANN,YAMM,gBADD,MAAA,uBAAsB,CAAA,GAAA,EAAA,EAAA,IAGd,MAAA,WAAU,IAAA,WAAA,EADvB,mBAMM,OANN,YAMM,gBADD,MAAA,yBAAwB,CAAA,GAAA,EAAA,EAAA,IAGhB,QAAA,QAAA,WAAA,EADb,mBAMM,OANN,YAMM,gBADD,QAAA,KAAI,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-[1.5rem]\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      {{ hint }}\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,EAAE,wBAAwB,0BAA0B,UAAU,eAClE,wBACQ,QAAA,qBACA,QAAA,eACR;;uBAIA,YAgCkB,iBAAA;IA/BhB,KAAI;IACJ,OAAM;IACN,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,QAAA;;2BAQM,CALE,MAAA,QAAA,KAAA,UAAA,GADR,mBAMM,OANN,YAMM,gBADD,MAAA,sBAAA,CAAsB,CAAA,EAAA,GAAA,CAAA,KAGd,MAAA,UAAA,KAAA,UAAA,GADb,mBAMM,OANN,YAMM,gBADD,MAAA,wBAAA,CAAwB,CAAA,EAAA,GAAA,CAAA,KAGhB,QAAA,QAAA,UAAA,GADb,mBAMM,OANN,YAMM,gBADD,QAAA,IAAI,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

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

@@ -4,7 +4,7 @@ import { tv } from "../../utils/tv.js";
 import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, resolveDynamicComponent, unref } from "vue";
 import { get } from "@vueuse/shared";
 //#region src/components/icons/RuiIcon.vue?vue&type=script&setup=true&lang.ts
-var RuiIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiIcon",
 	__name: "RuiIcon",
 	props: {

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

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { useIcons } from '@/composables/icons';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  // `shrink-0` keeps the icon at its declared `--rui-icon-size` when it sits\n  // in a flex container next to a long flex-grow sibling (e.g. a `w-full`\n  // button label in `variant=\"list\"`). Without it, the SVG — even with an\n  // explicit width — gets compressed along the main axis when the row is\n  // narrower than the label's intrinsic width, while the height stays put,\n  // producing a sliver glyph. The icon's box is always intentionally driven\n  // by `--rui-icon-size`, so flex shrinking is never the desired behavior.\n  base: 'shrink-0 w-[var(--rui-icon-size,1.5rem)] h-[var(--rui-icon-size,1.5rem)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\nconst ui = computed<string>(() => iconStyles({ color }));\n\n// Render the `size` prop as an inline CSS custom property on the svg. Because\n// inline style wins against any inherited value for the same property on this\n// element, the consumer-supplied size beats the button's `--rui-icon-size`\n// assignment without needing !important. A bare number (or numeric string —\n// `:size=\"16\"` resolves to a string in the template binding) is coerced to px;\n// values that already include a unit (`1rem`, `18px`, `calc(...)`) pass\n// through unchanged. The previous SVG-attr path accepted bare numbers because\n// `width`/`height` presentation attrs treat them as px; CSS does not.\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\nconst components = computed<SvgComponent[] | undefined>(() => {\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAkBA,MAAM,EAAE,oBAAoB,UAAU;EAItC,MAAM,aAAa,GAAG;GAQpB,MAAM;GACN,UAAU,EACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;IACV,EAAA;GAEJ,CAAC;EAEF,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,EAAU;EACnE,MAAM,KAAK,eAAuB,WAAW,EAAE,OAAI,QAAA,OAAG,CAAC,CAAC;EAUxD,MAAM,YAAY,eAAmD;AACnE,OAAI,CAAC,IAAI,gBAAgB,CACvB,QAAO,KAAA;GACT,MAAM,MAAM,OAAO,QAAA,KAAK;AAExB,UAAO,EAAE,mBADK,kBAAkB,KAAK,IAAI,GAAG,GAAG,IAAI,MAAM,KACtB;IACnC;EAEF,MAAM,SAAS,eAAwB,QAAA,KAAK,SAAS,QAAQ,CAAC;EAE9D,MAAM,aAAa,eAA2C;AAC5D,OAAI,CAAC,UAAU,QAAA,KAAK,CAClB,SAAQ,KAAK,QAAQ,QAAA,KAAK,0BAA0B;GAEtD,MAAM,QAAQ,gBAAgB,QAAA;AAE9B,OAAI,CAAC,MACH,SAAQ,MACN,UAAU,QAAA,KAAK,sFAChB;AAEH,UAAO;IACP;;uBAIA,mBAqBM,OAAA;IApBJ,eAAY;IACZ,OAAK,eAAA,CAAC,YACE,MAAA,GAAE,CAAA,CAAA;IACT,OAAK,eAAE,MAAA,UAAS,CAAA;IACjB,SAAQ;IACR,OAAM;yBAEN,mBAYE,UAAA,MAAA,WAV6B,MAAA,WAAU,GAA/B,WAAW,UAAK;wBAF1B,YAYE,wBAXK,UAAS,GAAA,EADhB,WAYE,EATC,KAAK,OAAK,EAAA,EAAA,SAAA,MAAA,EACH,UAAS,IAAA;KAChB,MAAI,CAAG,MAAA,OAAM,GAAA,SAAA;KACb,QAAM,CAAG,MAAA,OAAM,GAAA,iBAAA;KAChB,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,aAAU;KACV,aAAU"}
+{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { useIcons } from '@/composables/icons';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  // `shrink-0` keeps the icon at its declared `--rui-icon-size` when it sits\n  // in a flex container next to a long flex-grow sibling (e.g. a `w-full`\n  // button label in `variant=\"list\"`). Without it, the SVG — even with an\n  // explicit width — gets compressed along the main axis when the row is\n  // narrower than the label's intrinsic width, while the height stays put,\n  // producing a sliver glyph. The icon's box is always intentionally driven\n  // by `--rui-icon-size`, so flex shrinking is never the desired behavior.\n  base: 'shrink-0 w-[var(--rui-icon-size,1.5rem)] h-[var(--rui-icon-size,1.5rem)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\nconst ui = computed<string>(() => iconStyles({ color }));\n\n// Render the `size` prop as an inline CSS custom property on the svg. Because\n// inline style wins against any inherited value for the same property on this\n// element, the consumer-supplied size beats the button's `--rui-icon-size`\n// assignment without needing !important. A bare number (or numeric string —\n// `:size=\"16\"` resolves to a string in the template binding) is coerced to px;\n// values that already include a unit (`1rem`, `18px`, `calc(...)`) pass\n// through unchanged. The previous SVG-attr path accepted bare numbers because\n// `width`/`height` presentation attrs treat them as px; CSS does not.\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\nconst components = computed<SvgComponent[] | undefined>(() => {\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAkBA,MAAM,EAAE,oBAAoB,SAAS;EAIrC,MAAM,aAAa,GAAG;GAQpB,MAAM;GACN,UAAU,EACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;GACX,EACF;EACF,CAAC;EAED,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,CAAS;EAClE,MAAM,KAAK,eAAuB,WAAW,EAAE,OAAI,QAAA,MAAE,CAAC,CAAC;EAUvD,MAAM,YAAY,eAAmD;GACnE,IAAI,CAAC,IAAI,eAAe,GACtB,OAAO,KAAA;GACT,MAAM,MAAM,OAAO,QAAA,IAAI;GAEvB,OAAO,EAAE,mBADK,kBAAkB,KAAK,GAAG,IAAI,GAAG,IAAI,MAAM,IACvB;EACpC,CAAC;EAED,MAAM,SAAS,eAAwB,QAAA,KAAK,SAAS,OAAO,CAAC;EAE7D,MAAM,aAAa,eAA2C;GAC5D,IAAI,CAAC,UAAU,QAAA,IAAI,GACjB,QAAQ,KAAK,QAAQ,QAAA,KAAK,yBAAyB;GAErD,MAAM,QAAQ,gBAAgB,QAAA;GAE9B,IAAI,CAAC,OACH,QAAQ,MACN,UAAU,QAAA,KAAK,qFACjB;GAEF,OAAO;EACT,CAAC;;uBAIC,mBAqBM,OAAA;IApBJ,eAAY;IACZ,OAAK,eAAA,CAAC,YACE,MAAA,EAAA,CAAE,CAAA;IACT,OAAK,eAAE,MAAA,SAAA,CAAS;IACjB,SAAQ;IACR,OAAM;yBAEN,mBAYE,UAAA,MAAA,WAV6B,MAAA,UAAA,IAArB,WAAW,UAAK;wBAF1B,YAYE,wBAXK,UAAS,EAAA,GADhB,WAYE,EATC,KAAK,MAAK,GAAA,EAAA,SAAA,KAAA,GACH,UAAS,IAAA;KAChB,MAAI,CAAG,MAAA,MAAA,IAAM,SAAA;KACb,QAAM,CAAG,MAAA,MAAA,IAAM,iBAAA;KAChB,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,aAAU;KACV,aAAU"}