@rotki/ui-library 3.1.7 → 3.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-styles.js","names":[],"sources":["../../../../src/components/forms/switch/switch-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const switchStyles = tv({\n  slots: {\n    // 13px to the label, the gap a checkbox or radio leaves, so the focus ring clears the text\n    wrapper: 'relative flex gap-3.25 items-start cursor-pointer group/switch',\n    // 40 × 22, nudged down a pixel to sit centred on the label's 24px line\n    inner: 'relative w-10 h-5.5 mt-px shrink-0',\n    // the off track is the control edge color, 3:1 against the page in both themes\n    input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-outline transition-colors duration-150 cursor-pointer focus-visible:focus-ring',\n    toggle: [\n      'absolute size-4.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 shadow-rui-control',\n    ].join(' '),\n    label: 'text-rui-text text-sm/6',\n    details: '',\n  },\n  variants: {\n    // indented by the track and the 13px gap, so the message starts where the label does\n    underLabel: {\n      true: { details: 'pl-13.25' },\n      false: {},\n    },\n    checked: {\n      true: {\n        toggle: 'left-5',\n      },\n      false: {},\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        input: 'bg-rui-neutral-200! dark:bg-rui-neutral-800! cursor-not-allowed',\n        toggle: 'bg-rui-neutral-50! dark:bg-rui-neutral-600! shadow-none!',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    size: {\n      sm: {\n        inner: 'w-8.5 h-4.5 mt-0.75',\n        toggle: 'size-3.5',\n      },\n    },\n    // a ring and the message below mark the state; a filled red or green track would read as \"on\"\n    validation: {\n      error: {\n        input: 'ring-1 ring-rui-error',\n      },\n      success: {\n        input: 'ring-1 ring-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    { checked: false, disabled: false, class: { input: 'group-hover/switch:bg-rui-neutral-500 dark:group-hover/switch:bg-rui-neutral-400' } },\n\n    // Checked (no color): an inverted neutral track, with a dark knob in dark mode\n    { checked: true, disabled: false, class: { input: 'bg-rui-neutral-900 dark:bg-rui-neutral-100', toggle: 'dark:bg-rui-neutral-900' } },\n\n    // Checked + color: a solid track with the white knob, in both themes\n    { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary', toggle: 'dark:bg-white' } },\n    // a status color's dark `main` is a text tone, so the track takes the deep `darker` under the white knob\n    { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error-darker', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning-darker', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info-darker', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success-darker', toggle: 'dark:bg-white' } },\n\n    // Size sm + checked: 34 - 14 - 2\n    { size: 'sm', checked: true, class: { toggle: 'left-4.5' } },\n    // sm: a 34px track\n    { size: 'sm', underLabel: true, class: { details: 'pl-11.75' } },\n  ],\n  defaultVariants: {\n    checked: false,\n    disabled: false,\n  },\n});\n"],"mappings":";;AAEA,IAAa,eAAe,GAAG;CAC7B,OAAO;EAEL,SAAS;EAET,OAAO;EAEP,OAAO;EACP,QAAQ,CACN,sHACA,sCACF,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;EACP,SAAS;CACX;CACA,UAAU;EAER,YAAY;GACV,MAAM,EAAE,SAAS,WAAW;GAC5B,OAAO,CAAC;EACV;EACA,SAAS;GACP,MAAM,EACJ,QAAQ,SACV;GACA,OAAO,CAAC;EACV;EACA,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,QAAQ;GACR,OAAO;EACT,EACF;EACA,MAAM,EACJ,IAAI;GACF,OAAO;GACP,QAAQ;EACV,EACF;EAEA,YAAY;GACV,OAAO,EACL,OAAO,wBACT;GACA,SAAS,EACP,OAAO,0BACT;EACF;EACA,OAAO;GACL,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAO,UAAU;GAAO,OAAO,EAAE,OAAO,mFAAmF;EAAE;EAGxI;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;IAAE,OAAO;IAA8C,QAAQ;GAA0B;EAAE;EAGpI;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;GAAW,OAAO;IAAE,OAAO;IAAsC,QAAQ;GAAgB;EAAE;EACpI;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;GAAa,OAAO;IAAE,OAAO;IAA0C,QAAQ;GAAgB;EAAE;EAE1I;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;GAAS,OAAO;IAAE,OAAO;IAAyC,QAAQ;GAAgB;EAAE;EACrI;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;GAAW,OAAO;IAAE,OAAO;IAA6C,QAAQ;GAAgB;EAAE;EAC3I;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;GAAQ,OAAO;IAAE,OAAO;IAAuC,QAAQ;GAAgB;EAAE;EAClI;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;GAAW,OAAO;IAAE,OAAO;IAA6C,QAAQ;GAAgB;EAAE;EAG3I;GAAE,MAAM;GAAM,SAAS;GAAM,OAAO,EAAE,QAAQ,WAAW;EAAE;EAE3D;GAAE,MAAM;GAAM,YAAY;GAAM,OAAO,EAAE,SAAS,WAAW;EAAE;CACjE;CACA,iBAAiB;EACf,SAAS;EACT,UAAU;CACZ;AACF,CAAC"}

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

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

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

@@ -1,3 +1,4 @@
+import type { TextareaHTMLAttributes } from 'vue';
 import type { ContextColorsType } from '../../../consts/colors.js';
 import type { RuiIcons } from '../../../icons/index.js';
 import { type LabelPlacement } from '../../../composables/defaults/field.js';
@@ -29,13 +30,14 @@ export interface TextAreaProps {
     autoGrow?: boolean;
     required?: boolean;
 }
-type __VLS_Props = TextAreaProps;
+type __VLS_Props = TextAreaProps & /* @vue-ignore */ Omit<TextareaHTMLAttributes, keyof TextAreaProps>;
 type __VLS_Slots = {
     prepend?: () => any;
     append?: () => any;
 };
 type __VLS_ModelProps = {
     modelValue: string;
+    'modelModifiers'?: Partial<Record<'trim', true>>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {

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","_useModel","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createBlock","RuiFieldLabel","_createCommentVNode","_createElementVNode","_normalizeClass","_normalizeStyle","_renderSlot","_createVNode","RuiIcon","_withDirectives","_mergeProps","_vModelText","RuiButton","_withModifiers","_withCtx","RuiFormTextDetail"],"sources":["../../../../src/components/forms/text-area/RuiTextArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textAreaStyles } from '@/components/forms/text-area/text-area-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextAreaProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the field for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  noResize?: boolean;\n  minRows?: number | string;\n  maxRows?: number | string;\n  rowHeight?: number | string;\n  autoGrow?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextArea',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  labelPlacement = undefined,\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  details = undefined,\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  noResize = false,\n  minRows = 2,\n  rowHeight = 1.5,\n  maxRows = undefined,\n  autoGrow = false,\n  required = false,\n} = defineProps<TextAreaProps>();\n\nconst emit = defineEmits<{\n  'click:clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea');\nconst textareaSizer = useTemplateRef<HTMLTextAreaElement>('textareaSizer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(textarea);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst textareaId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textAreaStyles>>(() => textAreaStyles({\n  dense,\n  disabled,\n  readonly,\n  noResize,\n  hovered: get(isHovered),\n  focused: get(focused),\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n}));\n\nconst wrapperStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst fieldStyles = computed<{ minHeight: string; maxHeight?: string }>(() => {\n  const height = Number(rowHeight);\n  const min = Number(minRows);\n  const max = Number(maxRows);\n  const value: { minHeight: string; maxHeight?: string } = {\n    minHeight: `${min * height + 0.75}rem`,\n  };\n  if (max)\n    value.maxHeight = `${max * height + 0.75}rem`;\n\n  return value;\n});\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string): void {\n  if (!autoGrow)\n    return;\n\n  const field = get(textarea);\n  const fieldValue = newVal ?? get(modelValue);\n  const fieldSizer = get(textareaSizer);\n  if (!(field && fieldSizer))\n    return;\n\n  nextTick(() => {\n    const sizerHeight = fieldSizer.scrollHeight;\n    const fieldHeight = field.scrollHeight;\n    let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n    if (oldVal && oldVal.length > fieldValue.length)\n      height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n    field.style.height = height;\n  });\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    // a refocus within the delay keeps the button\n    cancelClearHide();\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\nwatchDebounced(modelValue, computeFieldHeight, { debounce: 50 });\n\nonMounted(computeFieldHeight);\n\ndefineExpose({\n  focus: () => get(textarea)?.focus(),\n  element: textarea,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"textareaId\"\n      :hidden=\"placement === 'hidden'\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      :style=\"wrapperStyle\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"prependIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n      <div :class=\"ui.inputWrapper()\">\n        <textarea\n          v-if=\"autoGrow\"\n          ref=\"textareaSizer\"\n          :value=\"modelValue\"\n          :class=\"ui.textareaSizer()\"\n          :style=\"fieldStyles\"\n          aria-hidden=\"true\"\n          disabled\n          readonly\n        />\n        <textarea\n          :id=\"textareaId\"\n          ref=\"textarea\"\n          v-model=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.textarea()\"\n          :style=\"fieldStyles\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n        />\n        <fieldset :class=\"ui.fieldset()\" />\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          data-id=\"clear-btn\"\n          aria-label=\"Clear\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"appendIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CA,MAAM,aAAaE,SAAmB,SAAA,YAAmB;EA2BzD,MAAM,OAAO;EASb,MAAM,YAAY,IAAa,KAAK;EACpC,MAAM,kBAAkB,IAAa,KAAK;EAE1C,MAAM,UAAU,eAA+B,SAAS;EACxD,MAAM,SAAS,eAA+B,QAAQ;EACtD,MAAM,WAAW,eAAoC,UAAU;EAC/D,MAAM,gBAAgB,eAAoC,eAAe;EAEzE,MAAM,cAAc,MAAM;EAC1B,MAAM,QAAQ,SAAS;EAEvB,MAAM,EAAE,YAAY,SAAS,QAAQ;EACrC,MAAM,YAAY,wBAAwB,QAAA,cAAc;EACxD,MAAM,EAAE,OAAO,iBAAiB,QAAQ,mBAAmB,kBAAkB;EAC7E,MAAM,EAAE,cAAc,gBAAgB,sBAAsB,SAAS,QAAQ,EAAE;EAC/E,MAAM,EAAE,UAAU,YAAY,aAAa,eAAe,wBAClD,QAAA,qBACA,QAAA,eACR;EACA,MAAM,cAAc,qBAAqB,QAAA,eAAe,QAAA,WAAW;EAEnE,MAAM,aAAa,eAAuB;GACxC,MAAM,KAAK,MAAM;GACjB,OAAO,OAAO,OAAO,YAAY,KAAK,KAAK;EAC7C,CAAC;EAED,MAAM,gBAAgB,eAAwB,QAAA,aAAa,CAAC,CAAC,IAAI,UAAU,KAAK,CAAC,QAAA,YAAY,CAAC,QAAA,QAAQ;EAEtG,MAAM,qBAAqB,eAA8C;GACvE,IAAI,IAAI,QAAQ,GACd,OAAO;GACT,IAAI,IAAI,UAAU,GAChB,OAAO;GACT,IAAI,QAAA,aAAa,CAAC,IAAI,WAAW,GAC/B,OAAO,QAAA;EAEX,CAAC;EAED,MAAM,iBAAiB,eAA8C,IAAI,UAAU,KAAK,QAAA,KAAK;EAE7F,MAAM,KAAK,eAAkD,eAAe;GAC1E,OAAI,QAAA;GACJ,UAAO,QAAA;GACP,UAAO,QAAA;GACP,UAAO,QAAA;GACP,SAAS,IAAI,SAAS;GACtB,SAAS,IAAI,OAAO;GACpB,OAAO,IAAI,cAAc;GACzB,WAAW,IAAI,kBAAkB;GACjC,YAAY,IAAI,UAAU;EAC5B,CAAC,CAAC;EAEF,MAAM,eAAe,gBAAwC;GAC3D,eAAe,IAAI,YAAY;GAC/B,cAAc,IAAI,WAAW;EAC/B,EAAE;EAEF,MAAM,cAAc,eAA0D;GAC5E,MAAM,SAAS,OAAO,QAAA,SAAS;GAC/B,MAAM,MAAM,OAAO,QAAA,OAAO;GAC1B,MAAM,MAAM,OAAO,QAAA,OAAO;GAC1B,MAAM,QAAmD,EACvD,WAAW,GAAG,MAAM,SAAS,IAAK,KACpC;GACA,IAAI,KACF,MAAM,YAAY,GAAG,MAAM,SAAS,IAAK;GAE3C,OAAO;EACT,CAAC;EAED,SAAS,mBAAyB;GAChC,IAAI,YAAY,EAAE;GAClB,KAAK,aAAa;EACpB;EAEA,SAAS,mBAAmB,QAAiB,QAAuB;GAClE,IAAI,CAAC,QAAA,UACH;GAEF,MAAM,QAAQ,IAAI,QAAQ;GAC1B,MAAM,aAAa,UAAU,IAAI,UAAU;GAC3C,MAAM,aAAa,IAAI,aAAa;GACpC,IAAI,EAAE,SAAS,aACb;GAEF,eAAe;IACb,MAAM,cAAc,WAAW;IAC/B,MAAM,cAAc,MAAM;IAC1B,IAAI,SAAS,GAAG,KAAK,IAAI,aAAa,WAAW,IAAI,GAAG;IACxD,IAAI,UAAU,OAAO,SAAS,WAAW,QACvC,SAAS,GAAG,KAAK,IAAI,aAAa,WAAW,IAAI,GAAG;IAEtD,MAAM,MAAM,SAAS;GACvB,CAAC;EACH;EAEA,MAAM,UAAU,UAAU;GACxB,IAAI,OAAO;IAET,gBAAgB;IAChB,IAAI,iBAAiB,IAAI;GAC3B,OAEE,qBAAqB,IAAI,iBAAiB,KAAK,GAAG,GAAG;EAEzD,CAAC;EAED,eAAe,YAAY,oBAAoB,EAAE,UAAU,GAAG,CAAC;EAE/D,UAAU,kBAAkB;EAE5B,SAAa;GACX,aAAa,IAAI,QAAQ,CAAC,EAAE,MAAM;GAClC,SAAS;EACX,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAyGM,OAAAC,eAAAC,mBAzGOC,MAAA,YAAA,CAAY,CAACP,KAAAA,MAAM,CAAA,CAAA,GAAA;IAEtB,QAAA,SADRG,UAAA,GAAAK,YAOEC,uBAAA;;KALC,MAAM,QAAA;KACN,KAAKF,MAAA,UAAA;KACL,QAAQA,MAAA,SAAA,MAAS;KACjB,UAAU,QAAA;KACV,UAAU,QAAA;;;;;;;;IAEbI,mBAwFM,OAAA;KAvFH,OAAKC,eAAEL,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;KACjB,OAAKM,eAAEN,MAAA,YAAA,CAAY;KACpB,WAAQ;KACP,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;KACrB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;;KAGdN,KAAAA,OAAO,WAAW,QAAA,eAD1BE,UAAA,GAAAC,mBAmBM,OAAA;;MAjBA,SAAA;MAAJ,KAAI;MACH,OAAKQ,eAAEL,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;MAClB,WAAQ;KAGAN,GAAAA,CAAAA,KAAAA,OAAO,UADfa,WAGE,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAEW,QAAA,eADbX,UAAA,GAAAC,mBAQM,OAAA;;MANH,OAAKQ,eAAEL,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;KAEfQ,GAAAA,CAAAA,YAGEC,iBAAA;MAFC,MAAM,QAAA;MACN,MAAM;;KAIbL,mBAwBM,OAAA,EAxBA,OAAKC,eAAEL,MAAA,EAAA,CAAE,CAAC,aAAY,CAAA,EAAA,GAAA;MAElB,QAAA,YADRJ,UAAA,GAAAC,mBASE,YAAA;;OAPI,SAAA;OAAJ,KAAI;OACH,OAAO,WAAA;OACP,OAAKQ,eAAEL,MAAA,EAAA,CAAE,CAAC,cAAa,CAAA;OACvB,OAAKM,eAAEN,MAAA,WAAA,CAAW;OACnB,eAAY;OACZ,UAAA;OACA,UAAA;;MAEFU,eAAAN,mBAWE,YAXFO,WAWE;OAVC,IAAIX,MAAA,UAAA;OACD,SAAA;OAAJ,KAAI;OACK,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,QAAA;OAClB,aAAa,QAAA,eAAW;OACxB,OAAOA,MAAA,EAAA,CAAE,CAAC,SAAQ;OAClB,OAAOA,MAAA,WAAA;OACP,UAAU,QAAA;OACV,UAAU,QAAA;OACV,gBAAcA,MAAA,QAAA;MACP,GAAAA,MAAA,eAAA,CAAe,CAACP,KAAAA,MAAM,CAAA,GAAA,MAAA,IAAA,UAAA,GAAA,CAPrB,CAAAmB,YAAA,WAAA,KAAU,CAAA,CAAA;MASrBR,mBAAmC,YAAA,EAAxB,OAAKC,eAAEL,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA,EAAA,GAAA,MAAA,CAAA;;KAGvBN,KAAAA,OAAO,UAAU,QAAA,cAAcM,MAAA,aAAA,KADvCJ,UAAA,GAAAC,mBAmCM,OAAA;;MAjCA,SAAA;MAAJ,KAAI;MACH,OAAKQ,eAAEL,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;MACjB,WAAQ;KAGAA,GAAAA,CAAAA,MAAA,aAAA,KADRJ,UAAA,GAAAK,YAeYY,mBAAA;;MAbT,OAAKR,eAAA,CAAGL,MAAA,EAAA,CAAE,CAAC,YAAW,GAAA,EAAA,QAAA,CAAeA,MAAA,eAAA,EAAe,CAAA,CAAA;MACrD,SAAQ;MACR,MAAK;MACL,MAAA;MACA,WAAQ;MACR,cAAW;MACX,UAAS;MACR,SAAK,OAAA,OAAA,OAAA,KAAAc,eAAA,WAAO,iBAAgB,GAAA,CAAA,MAAA,CAAA;;MAE7B,SAAAC,cAGE,CAHFP,YAGEC,iBAAA;OAFA,MAAK;OACL,MAAK;;;KAIDf,GAAAA,GAAAA,CAAAA,OAAAA,CAAAA,KAAAA,mBAAAA,IAAAA,IAAAA,GAAAA,KAAAA,OAAO,SADfa,WAGE,KAAA,QAAA,UAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAEW,QAAA,cADbX,UAAA,GAAAC,mBAQM,OAAA;;MANH,OAAKQ,eAAEL,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;KAEfQ,GAAAA,CAAAA,YAGEC,iBAAA;MAFC,MAAM,QAAA;MACN,MAAM;;;IAMPT,MAAA,WAAA,MAAW,YADnBJ,UAAA,GAAAK,YAMEe,2BAAA;;KAJC,SAAShB,MAAA,WAAA;KACT,kBAAgB,QAAA;KAChB,oBAAkB,QAAA;KAClB,MAAM,QAAA"}
+{"version":3,"file":"RuiTextArea.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createBlock","RuiFieldLabel","_createCommentVNode","_createElementVNode","_normalizeClass","_normalizeStyle","_renderSlot","_createVNode","RuiIcon","_withDirectives","_mergeProps","_vModelText","RuiButton","_withModifiers","_withCtx","RuiFormTextDetail"],"sources":["../../../../src/components/forms/text-area/RuiTextArea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { TextareaHTMLAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { textAreaStyles } from '@/components/forms/text-area/text-area-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextAreaProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the field for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. */\n  details?: FormDetails;\n  /** @deprecated Use `details=\"hidden\"`. Removed in 4.0. */\n  hideDetails?: boolean;\n  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\n// `v-model.trim` trims the update, which Vue applies to any model event\nconst modelValue = defineModel<string, 'trim'>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  labelPlacement = undefined,\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  details = undefined,\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 & /* @vue-ignore */ Omit<TextareaHTMLAttributes, keyof TextAreaProps>>();\n\nconst emit = defineEmits<{\n  'click:clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst textarea = useTemplateRef<HTMLTextAreaElement>('textarea');\nconst textareaSizer = useTemplateRef<HTMLTextAreaElement>('textareaSizer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { focused } = useFocus(textarea);\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { clear: cancelClearHide, create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append, 24);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst textareaId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textAreaStyles>>(() => textAreaStyles({\n  dense,\n  disabled,\n  readonly,\n  noResize,\n  hovered: get(isHovered),\n  focused: get(focused),\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n}));\n\nconst wrapperStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst fieldStyles = computed<{ minHeight: string; maxHeight?: string }>(() => {\n  const height = Number(rowHeight);\n  const min = Number(minRows);\n  const max = Number(maxRows);\n  const value: { minHeight: string; maxHeight?: string } = {\n    minHeight: `${min * height + 0.75}rem`,\n  };\n  if (max)\n    value.maxHeight = `${max * height + 0.75}rem`;\n\n  return value;\n});\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string): void {\n  if (!autoGrow)\n    return;\n\n  const field = get(textarea);\n  const fieldValue = newVal ?? get(modelValue);\n  const fieldSizer = get(textareaSizer);\n  if (!(field && fieldSizer))\n    return;\n\n  nextTick(() => {\n    const sizerHeight = fieldSizer.scrollHeight;\n    const fieldHeight = field.scrollHeight;\n    let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n    if (oldVal && oldVal.length > fieldValue.length)\n      height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n    field.style.height = height;\n  });\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    // a refocus within the delay keeps the button\n    cancelClearHide();\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\nwatchDebounced(modelValue, computeFieldHeight, { debounce: 50 });\n\nonMounted(computeFieldHeight);\n\ndefineExpose({\n  focus: () => get(textarea)?.focus(),\n  element: textarea,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"textareaId\"\n      :hidden=\"placement === 'hidden'\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      :style=\"wrapperStyle\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"prependIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n      <div :class=\"ui.inputWrapper()\">\n        <textarea\n          v-if=\"autoGrow\"\n          ref=\"textareaSizer\"\n          :value=\"modelValue\"\n          :class=\"ui.textareaSizer()\"\n          :style=\"fieldStyles\"\n          aria-hidden=\"true\"\n          disabled\n          readonly\n        />\n        <textarea\n          :id=\"textareaId\"\n          ref=\"textarea\"\n          v-model=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.textarea()\"\n          :style=\"fieldStyles\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n        />\n        <fieldset :class=\"ui.fieldset()\" />\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          data-id=\"clear-btn\"\n          aria-label=\"Clear\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"16\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon\n            :name=\"appendIcon\"\n            :size=\"18\"\n          />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"detailsMode !== 'hidden'\"\n      :details=\"detailsMode\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

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

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

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

@@ -1,5 +1,6 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
 import type { RuiIcons } from '../../../icons/index.js';
+import type { InputAttributes } from '../../../types/attributes.js';
 import { type LabelPlacement } from '../../../composables/defaults/field.js';
 import { type FormDetails } from '../../../utils/form-text-detail.js';
 export interface TextFieldProps {
@@ -24,7 +25,7 @@ export interface TextFieldProps {
     clearable?: boolean;
     required?: boolean;
 }
-type __VLS_Props = TextFieldProps;
+type __VLS_Props = TextFieldProps & /* @vue-ignore */ Omit<InputAttributes, keyof TextFieldProps | 'onBlur'>;
 type __VLS_Slots = {
     prepend?: () => any;
     append?: () => any;
@@ -33,6 +34,7 @@ type __VLS_Slots = {
 };
 type __VLS_ModelProps = {
     modelValue: string;
+    'modelModifiers'?: Partial<Record<'trim', true>>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {

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

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

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.js","names":["_sfc_main"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, 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  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n *\n * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n *\n * The svg also carries the default paint, outlined in `currentColor`, and\n * every primitive inherits it unless it sets its own `fill` or `stroke`. That\n * is how lucide draws, so its solid dots (tag, palette) stay solid, and how an\n * icon mixes a stroked outline with a solid mark.\n */\nconst iconStyles = tv({\n  base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\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);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\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\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\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($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n    />\n  </svg>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiIcon.js","names":["_sfc_main"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue, SVGAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn } from '@/utils/tv';\nimport { iconStyles } from './icon-styles';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props & /* @vue-ignore */ Omit<SVGAttributes, keyof Props>>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\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\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\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($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n    />\n  </svg>\n</template>\n"],"mappings":""}

package/dist/components/icons/RuiIcon.vue.d.ts

@@ -1,3 +1,4 @@
+import type { SVGAttributes } from 'vue';
 import type { ContextColorsType } from '../../consts/colors.js';
 import type { RuiIcons } from '../../icons/index.js';
 export interface Props {
@@ -5,6 +6,7 @@ export interface Props {
     size?: number | string;
     color?: ContextColorsType;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = Props & /* @vue-ignore */ Omit<SVGAttributes, keyof Props>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,24 +1,9 @@
 import { useIcons } from "../../composables/icons.js";
 import { get, objectOmit } from "../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../utils/tv.js";
+import { cn } from "../../utils/tv.js";
+import { iconStyles } from "./icon-styles.js";
 import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, renderList, resolveDynamicComponent, unref } from "vue";
 //#region src/components/icons/RuiIcon.vue?vue&type=script&setup=true&lang.ts
-/**
-* The icon's box is always driven by `--rui-icon-size`, so flex shrinking is
-* never wanted: `shrink-0` keeps the size beside a long grow sibling,
-* such as a `w-full` button label in `variant="list"`. Without it the svg is
-* compressed along the main axis while its height stays put, drawing a sliver
-* of a glyph.
-*
-* The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.
-* Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a
-* single, blurry pixel.
-*
-* The svg also carries the default paint, outlined in `currentColor`, and
-* every primitive inherits it unless it sets its own `fill` or `stroke`. That
-* is how lucide draws, so its solid dots (tag, palette) stay solid, and how an
-* icon mixes a stroked outline with a solid mark.
-*/
 var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiIcon",
 	inheritAttrs: false,
@@ -30,17 +15,6 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 	},
 	setup(__props) {
 		const { registeredIcons } = useIcons();
-		const iconStyles = tv({
-			base: "shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]",
-			variants: { color: {
-				primary: "text-rui-primary",
-				secondary: "text-rui-secondary",
-				error: "text-rui-error",
-				warning: "text-rui-warning",
-				info: "text-rui-info",
-				success: "text-rui-success"
-			} }
-		});
 		const hasExplicitSize = computed(() => __props.size !== void 0);
 		function ui(attrsClass) {
 			return iconStyles({

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":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, 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  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n *\n * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n *\n * The svg also carries the default paint, outlined in `currentColor`, and\n * every primitive inherits it unless it sets its own `fill` or `stroke`. That\n * is how lucide draws, so its solid dots (tag, palette) stay solid, and how an\n * icon mixes a stroked outline with a solid mark.\n */\nconst iconStyles = tv({\n  base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\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);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\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\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\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($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,MAAM,EAAE,oBAAoB,SAAS;EAoBrC,MAAM,aAAa,GAAG;GACpB,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;EAElE,SAAS,GAAG,YAAgC;GAC1C,OAAO,WAAW;IAAE,OAAI,QAAA;IAAG,OAAO,GAAG,UAAU;GAAE,CAAC;EACpD;;;;;;;;;;;EAYA,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;;;;;;;;;;EAWD,MAAM,aAAa,eAA2C;GAC5D,MAAM,QAAQ,gBAAgB,QAAA;GAE9B,IAAI,CAAC,OACH,QAAQ,MACN,UAAU,QAAA,KAAK,qFACjB;GAEF,OAAO;EACT,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAmBM,OAnBNC,WAmBM;IAlBJ,eAAY;IACZ,OAAK,CAAC,YACE,GAAGH,KAAAA,OAAO,KAAK,CAAA;IACtB,OAAOI,MAAA,SAAA;IACR,SAAQ;IACR,OAAM;IACN,MAAK;IACL,QAAO;IACP,kBAAe;IACf,mBAAgB;GACR,GAAAA,MAAA,UAAA,CAAU,CAACJ,KAAAA,QAAM,CAAA,OAAA,CAAA,CAAA,GAAA,EAEzBC,UAAA,IAAA,GAAAC,mBAKEG,UAAA,MAAAC,WAH6BF,MAAA,UAAA,IAArB,WAAW,UAAK;IAF1B,OAAAH,UAAA,GAAAM,YAKEC,wBAJK,UAAS,EAAA,GADhBL,WAKE,EAFC,KAAK,MAAK,GAAA,EAAA,SAAA,KAAA,GACH,UAAS,EAAA,GAAA,MAAA,EAAA"}
+{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue, SVGAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn } from '@/utils/tv';\nimport { iconStyles } from './icon-styles';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props & /* @vue-ignore */ Omit<SVGAttributes, keyof Props>>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\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\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\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($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAuBA,MAAM,EAAE,oBAAoB,SAAS;EAIrC,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,CAAS;EAElE,SAAS,GAAG,YAAgC;GAC1C,OAAO,WAAW;IAAE,OAAI,QAAA;IAAG,OAAO,GAAG,UAAU;GAAE,CAAC;EACpD;;;;;;;;;;;EAYA,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;;;;;;;;;;EAWD,MAAM,aAAa,eAA2C;GAC5D,MAAM,QAAQ,gBAAgB,QAAA;GAE9B,IAAI,CAAC,OACH,QAAQ,MACN,UAAU,QAAA,KAAK,qFACjB;GAEF,OAAO;EACT,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAmBM,OAnBNC,WAmBM;IAlBJ,eAAY;IACZ,OAAK,CAAC,YACE,GAAGH,KAAAA,OAAO,KAAK,CAAA;IACtB,OAAOI,MAAA,SAAA;IACR,SAAQ;IACR,OAAM;IACN,MAAK;IACL,QAAO;IACP,kBAAe;IACf,mBAAgB;GACR,GAAAA,MAAA,UAAA,CAAU,CAACJ,KAAAA,QAAM,CAAA,OAAA,CAAA,CAAA,GAAA,EAEzBC,UAAA,IAAA,GAAAC,mBAKEG,UAAA,MAAAC,WAH6BF,MAAA,UAAA,IAArB,WAAW,UAAK;IAF1B,OAAAH,UAAA,GAAAM,YAKEC,wBAJK,UAAS,EAAA,GADhBL,WAKE,EAFC,KAAK,MAAK,GAAA,EAAA,SAAA,KAAA,GACH,UAAS,EAAA,GAAA,MAAA,EAAA"}

package/dist/components/icons/icon-styles.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is
+ * never wanted: `shrink-0` keeps the size beside a long grow sibling,
+ * such as a `w-full` button label in `variant="list"`. Without it the svg is
+ * compressed along the main axis while its height stays put, drawing a sliver
+ * of a glyph.
+ *
+ * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.
+ * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a
+ * single, blurry pixel.
+ *
+ * The svg also carries the default paint, outlined in `currentColor`, and
+ * every primitive inherits it unless it sets its own `fill` or `stroke`. That
+ * is how lucide draws, so its solid dots (tag, palette) stay solid, and how an
+ * icon mixes a stroked outline with a solid mark.
+ */
+export declare const iconStyles: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "text-rui-primary";
+        secondary: "text-rui-secondary";
+        error: "text-rui-error";
+        warning: "text-rui-warning";
+        info: "text-rui-info";
+        success: "text-rui-success";
+    };
+}, undefined, "shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]", {
+    color: {
+        primary: "text-rui-primary";
+        secondary: "text-rui-secondary";
+        error: "text-rui-error";
+        warning: "text-rui-warning";
+        info: "text-rui-info";
+        success: "text-rui-success";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "text-rui-primary";
+        secondary: "text-rui-secondary";
+        error: "text-rui-error";
+        warning: "text-rui-warning";
+        info: "text-rui-info";
+        success: "text-rui-success";
+    };
+}, undefined>>;

package/dist/components/icons/icon-styles.js

@@ -0,0 +1,33 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/icons/icon-styles.ts
+/**
+* The icon's box is always driven by `--rui-icon-size`, so flex shrinking is
+* never wanted: `shrink-0` keeps the size beside a long grow sibling,
+* such as a `w-full` button label in `variant="list"`. Without it the svg is
+* compressed along the main axis while its height stays put, drawing a sliver
+* of a glyph.
+*
+* The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.
+* Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a
+* single, blurry pixel.
+*
+* The svg also carries the default paint, outlined in `currentColor`, and
+* every primitive inherits it unless it sets its own `fill` or `stroke`. That
+* is how lucide draws, so its solid dots (tag, palette) stay solid, and how an
+* icon mixes a stroked outline with a solid mark.
+*/
+var iconStyles = tv({
+	base: "shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]",
+	variants: { color: {
+		primary: "text-rui-primary",
+		secondary: "text-rui-secondary",
+		error: "text-rui-error",
+		warning: "text-rui-warning",
+		info: "text-rui-info",
+		success: "text-rui-success"
+	} }
+});
+//#endregion
+export { iconStyles };
+
+//# sourceMappingURL=icon-styles.js.map

package/dist/components/icons/icon-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-styles.js","names":[],"sources":["../../../src/components/icons/icon-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n *\n * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n *\n * The svg also carries the default paint, outlined in `currentColor`, and\n * every primitive inherits it unless it sets its own `fill` or `stroke`. That\n * is how lucide draws, so its solid dots (tag, palette) stay solid, and how an\n * icon mixes a stroked outline with a solid mark.\n */\nexport const iconStyles = tv({\n  base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\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"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,IAAa,aAAa,GAAG;CAC3B,MAAM;CACN,UAAU,EACR,OAAO;EACL,SAAS;EACT,WAAW;EACX,OAAO;EACP,SAAS;EACT,MAAM;EACN,SAAS;CACX,EACF;AACF,CAAC"}

package/dist/components/index.d.ts

@@ -35,7 +35,7 @@ import RuiSkeletonLoader, { type Props as SkeletonLoaderProps } from './loaders/
 import RuiLogo, { type Props as LogoProps } from './logos/RuiLogo.vue.js';
 import RuiBadge, { type Props as BadgeProps } from './overlays/badge/RuiBadge.vue.js';
 import RuiBottomSheet, { type BottomSheetProps } from './overlays/bottom-sheet/RuiBottomSheet.vue.js';
-import RuiDialog, { type DialogProps, type RuiDialogClassNames } from './overlays/dialog/RuiDialog.vue.js';
+import RuiDialog, { type DialogProps, type DialogSlots, type RuiDialogClassNames } from './overlays/dialog/RuiDialog.vue.js';
 import RuiMenu, { type MenuProps, type RuiMenuClassNames, type RuiMenuRole } from './overlays/menu/RuiMenu.vue.js';
 import RuiNavigationDrawer, { type NavigationDrawerProps, type RuiNavigationDrawerClassNames } from './overlays/navigation-drawer/RuiNavigationDrawer.vue.js';
 import RuiNotification, { type NotificationProps } from './overlays/notification/RuiNotification.vue.js';
@@ -55,5 +55,5 @@ import RuiTabItems from './tabs/tab-items/RuiTabItems.vue.js';
 import RuiTab, { type RuiTabClassNames, type Props as TabProps } from './tabs/tab/RuiTab.vue.js';
 import RuiTabs, { type Props as TabsProps } from './tabs/tabs/RuiTabs.vue.js';
 import RuiTimePicker, { type RuiTimePickerProps } from './time-picker/RuiTimePicker.vue.js';
-export type { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, AvatarGroupProps, AvatarProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FieldDefaultsProps, FileUploadProps, FooterStepperProps, GroupData, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiAccordionClassNames, RuiAutoCompleteClassNames, RuiCardClassNames, RuiCategoryPickerClassNames, RuiCategoryPickerProps, RuiChipClassNames, RuiDateTimePickerProps, RuiDialogClassNames, RuiMenuClassNames, RuiMenuRole, RuiMenuSelectClassNames, RuiNavigationDrawerClassNames, RuiSliderClassNames, RuiStepperClassNames, RuiTabClassNames, RuiTimePickerProps, RuiTimezoneSelectProps, RuiTooltipClassNames, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TableEmpty, TableEmptyStateProps, TableErrorStateProps, TableLoadingStateProps, TablePaginationData, TablePaginationProps, TableProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
+export type { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, AvatarGroupProps, AvatarProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DialogSlots, DividerProps, ExpandButtonProps, FieldDefaultsProps, FileUploadProps, FooterStepperProps, GroupData, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiAccordionClassNames, RuiAutoCompleteClassNames, RuiCardClassNames, RuiCategoryPickerClassNames, RuiCategoryPickerProps, RuiChipClassNames, RuiDateTimePickerProps, RuiDialogClassNames, RuiMenuClassNames, RuiMenuRole, RuiMenuSelectClassNames, RuiNavigationDrawerClassNames, RuiSliderClassNames, RuiStepperClassNames, RuiTabClassNames, RuiTimePickerProps, RuiTimezoneSelectProps, RuiTooltipClassNames, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TableEmpty, TableEmptyStateProps, TableErrorStateProps, TableLoadingStateProps, TablePaginationData, TablePaginationProps, TableProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
 export { RuiAccordion, RuiAccordions, RuiAlert, RuiAutoComplete, RuiAvatar, RuiAvatarGroup, RuiBadge, RuiBottomSheet, RuiButton, RuiButtonGroup, RuiCalendar, RuiCard, RuiCardHeader, RuiCategoryPicker, RuiCheckbox, RuiCheckboxGroup, RuiChip, RuiColorPicker, RuiDataTable, RuiDateTimePicker, RuiDialog, RuiDivider, RuiFieldDefaults, RuiFileUpload, RuiFooterStepper, RuiIcon, RuiLogo, RuiMenu, RuiMenuSelect, RuiNavigationDrawer, RuiNotification, RuiProgress, RuiRadio, RuiRadioGroup, RuiRevealableTextField, RuiSimpleSelect, RuiSkeletonLoader, RuiSlider, RuiStepper, RuiSwitch, RuiTab, RuiTabItem, RuiTabItems, RuiTable, RuiTableEmptyState, RuiTableErrorState, RuiTableLoadingState, RuiTablePagination, RuiTableRowExpander, RuiTabs, RuiTextArea, RuiTextField, RuiTimePicker, RuiTimezoneSelect, RuiTooltip, };

package/dist/components/loaders/RuiSkeletonBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonBase.js","names":["_sfc_main"],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\nconst skeleton = tv({\n  // zinc steps rather than translucent black and white, which in dark came out lighter than any surface\n  base: 'animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-xs',\n      md: 'rounded-rui-control',\n      lg: 'rounded-rui-card',\n      full: 'rounded-full',\n    },\n  },\n});\n\n// the bar is decoration only, so it is aria-hidden: an alert role made a screen reader announce every bar\nconst ui = computed<string>(() => skeleton({ rounded }));\n</script>\n\n<template>\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiSkeletonBase.js","names":["_sfc_main"],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { skeletonBaseStyles } from './skeleton-base-styles';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\n// the bar is decoration only, so it is aria-hidden: an alert role made a screen reader announce every bar\nconst ui = computed<string>(() => skeletonBaseStyles({ rounded }));\n</script>\n\n<template>\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/loaders/RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { tv } from "../../utils/tv.js";
+import { skeletonBaseStyles } from "./skeleton-base-styles.js";
 import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
 //#region src/components/loaders/RuiSkeletonBase.vue?vue&type=script&setup=true&lang.ts
 var RuiSkeletonBase_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -6,17 +6,7 @@ var RuiSkeletonBase_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	__name: "RuiSkeletonBase",
 	props: { rounded: {} },
 	setup(__props) {
-		const skeleton = tv({
-			base: "animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800",
-			variants: { rounded: {
-				none: "rounded-none",
-				sm: "rounded-xs",
-				md: "rounded-rui-control",
-				lg: "rounded-rui-card",
-				full: "rounded-full"
-			} }
-		});
-		const ui = computed(() => skeleton({ rounded: __props.rounded }));
+		const ui = computed(() => skeletonBaseStyles({ rounded: __props.rounded }));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				class: normalizeClass(unref(ui)),

package/dist/components/loaders/RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref"],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\nconst skeleton = tv({\n  // zinc steps rather than translucent black and white, which in dark came out lighter than any surface\n  base: 'animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-xs',\n      md: 'rounded-rui-control',\n      lg: 'rounded-rui-card',\n      full: 'rounded-full',\n    },\n  },\n});\n\n// the bar is decoration only, so it is aria-hidden: an alert role made a screen reader announce every bar\nconst ui = computed<string>(() => skeleton({ rounded }));\n</script>\n\n<template>\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":";;;;;;;;EAaA,MAAM,WAAW,GAAG;GAElB,MAAM;GACN,UAAU,EACR,SAAS;IACP,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,MAAM;GACR,EACF;EACF,CAAC;EAGD,MAAM,KAAK,eAAuB,SAAS,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAIrD,OAAAA,UAAA,GAAAC,mBAIE,OAAA;IAHC,OAAKC,eAAEC,MAAA,EAAA,CAAE;IACV,WAAQ;IACR,eAAY"}
+{"version":3,"file":"RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref"],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { skeletonBaseStyles } from './skeleton-base-styles';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\n// the bar is decoration only, so it is aria-hidden: an alert role made a screen reader announce every bar\nconst ui = computed<string>(() => skeletonBaseStyles({ rounded }));\n</script>\n\n<template>\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":";;;;;;;;EAcA,MAAM,KAAK,eAAuB,mBAAmB,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAI/D,OAAAA,UAAA,GAAAC,mBAIE,OAAA;IAHC,OAAKC,eAAEC,MAAA,EAAA,CAAE;IACV,WAAQ;IACR,eAAY"}

package/dist/components/loaders/RuiSkeletonLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonLoader.js","names":["_sfc_main"],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, {\n  type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props extends SkeletonBaseProps {\n  type?: SkeletonType;\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst skeletonType = tv({\n  variants: {\n    type: {\n      [SkeletonType.CUSTOM]: 'box-border',\n      [SkeletonType.TEXT]: 'w-full h-4 rounded-rui-control',\n      [SkeletonType.HEADING]: 'w-full h-6 rounded-rui-control',\n      [SkeletonType.BUTTON]: 'w-full max-w-24 h-9 rounded-rui-control',\n      [SkeletonType.ICON]: 'w-6 h-6 rounded-full',\n      [SkeletonType.AVATAR]: 'w-10 h-10 rounded-full',\n      [SkeletonType.THUMBNAIL]: 'w-14 h-14 rounded-xs',\n      [SkeletonType.PARAGRAPH]: 'flex flex-col gap-2',\n      [SkeletonType.ARTICLE]: 'flex flex-col gap-2',\n    },\n  },\n});\n\nconst attrs = useAttrs();\nconst ui = computed<string>(() => skeletonType({ type, class: cn(attrs.class) }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!isMultiLine\"\n    :class=\"ui\"\n    :rounded=\"rounded\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  />\n  <div\n    v-else\n    :class=\"ui\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === SkeletonType.ARTICLE\"\n      class=\"w-full h-6 rounded-rui-control mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[90%]\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiSkeletonLoader.js","names":["_sfc_main"],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport RuiSkeletonBase, {\n  type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { cn } from '@/utils/tv';\nimport { skeletonLoaderStyles } from './skeleton-loader-styles';\n\nexport interface Props extends SkeletonBaseProps {\n  type?: SkeletonType;\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst attrs = useAttrs();\nconst ui = computed<string>(() => skeletonLoaderStyles({ type, class: cn(attrs.class) }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!isMultiLine\"\n    :class=\"ui\"\n    :rounded=\"rounded\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  />\n  <div\n    v-else\n    :class=\"ui\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === SkeletonType.ARTICLE\"\n      class=\"w-full h-6 rounded-rui-control mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[90%]\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n"],"mappings":""}