@rotki/ui-library 2.14.1 → 2.16.0

package/dist/components/forms/text-area/text-area-styles.d.ts

@@ -0,0 +1,313 @@
+import { type TextInputVariant } from '../../../components/forms/text-input-styles.js';
+export type TextAreaVariant = TextInputVariant;
+/**
+ * tv() styles for RuiTextArea. Extends textInputBase for shared
+ * fieldset/legend/label/validation core.
+ *
+ * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes
+ * between base and extension. Never put a class in the base slot that a
+ * variant needs to override — put variant-specific classes in the variants.
+ */
+export declare const textAreaStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {
+            inputWrapper: string;
+            textarea: string;
+            label: string;
+        };
+        filled: {
+            inputWrapper: string;
+            textarea: string;
+            textareaSizer: string;
+            label: string;
+            prepend: string;
+            append: string;
+        };
+        outlined: {
+            inputWrapper: string;
+            textarea: string;
+            textareaSizer: string;
+            label: string;
+            fieldset: string;
+            prepend: string;
+            append: string;
+        };
+    };
+    dense: {
+        true: {
+            inputWrapper: string;
+            textarea: string;
+            textareaSizer: string;
+        };
+    };
+    noResize: {
+        true: {
+            textarea: string;
+        };
+        false: {
+            textarea: string;
+        };
+    };
+    hovered: {
+        true: {
+            label: string;
+        };
+    };
+    focused: {
+        true: {};
+    };
+    active: {
+        true: {
+            label: string;
+        };
+    };
+    noLabel: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    textColor: {
+        primary: {
+            prepend: string;
+            append: string;
+            textarea: string;
+            icon: string;
+        };
+        secondary: {
+            prepend: string;
+            append: string;
+            textarea: string;
+            icon: string;
+        };
+        error: {
+            prepend: string;
+            append: string;
+            textarea: string;
+            icon: string;
+        };
+        warning: {
+            prepend: string;
+            append: string;
+            textarea: string;
+            icon: string;
+        };
+        info: {
+            prepend: string;
+            append: string;
+            textarea: string;
+            icon: string;
+        };
+        success: {
+            prepend: string;
+            append: string;
+            textarea: string;
+            icon: string;
+        };
+    };
+    validation: {
+        error: {
+            textarea: string;
+            label: string;
+        };
+        success: {
+            textarea: string;
+            label: string;
+        };
+    };
+}, {
+    fieldset: string;
+    legend: string;
+    wrapper: string;
+    inputWrapper: string;
+    textarea: string;
+    textareaSizer: string;
+    label: string;
+    labelText: string;
+    prepend: string;
+    append: string;
+    icon: string;
+    details: string;
+    required: string;
+    clearButton: string;
+}, undefined, {
+    focused: {
+        true: {
+            fieldset: string;
+        };
+    };
+    hovered: {
+        true: {
+            fieldset: string;
+        };
+    };
+    disabled: {
+        true: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    validation: {
+        error: {
+            fieldset: string;
+            label: string;
+        };
+        success: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    label: string;
+    fieldset: string;
+    legend: string;
+}, import("tailwind-variants").TVReturnType<{
+    focused: {
+        true: {
+            fieldset: string;
+        };
+    };
+    hovered: {
+        true: {
+            fieldset: string;
+        };
+    };
+    disabled: {
+        true: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    validation: {
+        error: {
+            fieldset: string;
+            label: string;
+        };
+        success: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    label: string;
+    fieldset: string;
+    legend: string;
+}, undefined, {
+    focused: {
+        true: {
+            fieldset: string;
+        };
+    };
+    hovered: {
+        true: {
+            fieldset: string;
+        };
+    };
+    disabled: {
+        true: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    validation: {
+        error: {
+            fieldset: string;
+            label: string;
+        };
+        success: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    label: string;
+    fieldset: string;
+    legend: string;
+}, import("tailwind-variants").TVReturnType<{
+    focused: {
+        true: {
+            fieldset: string;
+        };
+    };
+    hovered: {
+        true: {
+            fieldset: string;
+        };
+    };
+    disabled: {
+        true: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    active: {
+        true: {};
+    };
+    showLabel: {
+        true: {};
+    };
+    validation: {
+        error: {
+            fieldset: string;
+            label: string;
+        };
+        success: {
+            fieldset: string;
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    label: string;
+    fieldset: string;
+    legend: string;
+}, undefined, unknown, unknown, undefined>>>;

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

@@ -0,0 +1,239 @@
+import { tv } from "../../../utils/tv.js";
+import { textInputBase, underlinePseudo } from "../text-input-styles.js";
+//#region src/components/forms/text-area/text-area-styles.ts
+/**
+* tv() styles for RuiTextArea. Extends textInputBase for shared
+* fieldset/legend/label/validation core.
+*
+* IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes
+* between base and extension. Never put a class in the base slot that a
+* variant needs to override — put variant-specific classes in the variants.
+*/
+var textAreaStyles = tv({
+	extend: textInputBase,
+	slots: {
+		fieldset: "",
+		legend: "",
+		wrapper: "relative w-full min-w-[12.5rem] flex items-start rounded bg-white dark:bg-transparent",
+		inputWrapper: "flex flex-1 overflow-hidden",
+		textarea: [
+			"peer leading-6 text-rui-text w-full bg-transparent pb-2 pt-0",
+			"outline-0 outline-none",
+			"placeholder:opacity-0 focus:placeholder:opacity-100"
+		].join(" "),
+		textareaSizer: "invisible absolute top-0 left-0 w-full h-0 -z-10 pointer-events-none",
+		label: [
+			"left-0 text-base pointer-events-none",
+			"absolute top-0 h-full w-full select-none",
+			"[padding-left:calc(var(--x-padding,0px)+var(--prepend-w,0px))]",
+			"[padding-right:calc(var(--x-padding,0px)+var(--append-w,0px))]"
+		].join(" "),
+		labelText: "truncate transition-all duration-75",
+		prepend: "flex items-center gap-1 shrink-0 mt-4 mx-3",
+		append: "flex items-center gap-1 shrink-0 absolute right-0 mt-4 mx-3",
+		icon: "text-black/[0.54] dark:text-white/[0.56]",
+		details: "pt-1 px-4",
+		required: "text-rui-error",
+		clearButton: "!p-2"
+	},
+	variants: {
+		variant: {
+			default: {
+				inputWrapper: "pt-4",
+				textarea: "[padding-right:calc(var(--x-padding,1rem)+var(--append-w,0px))]",
+				label: `flex leading-[3.2] ${underlinePseudo}`
+			},
+			filled: {
+				inputWrapper: "pt-4",
+				textarea: "px-4 [padding-right:calc(var(--x-padding,1rem)+var(--append-w,0px))]",
+				textareaSizer: "px-4",
+				label: `flex leading-[3.2] [--x-padding:1rem] rounded-t bg-black/[0.06] dark:bg-white/[0.09] ${underlinePseudo}`,
+				prepend: "!mr-0",
+				append: "!ml-0"
+			},
+			outlined: {
+				inputWrapper: "!overflow-visible pt-4",
+				textarea: "px-4 [padding-right:calc(var(--x-padding,1rem)+var(--append-w,0px))]",
+				textareaSizer: "px-4",
+				label: [
+					"flex leading-[3.2] [--x-padding:1rem]",
+					"border-0 border-transparent",
+					"after:content-none"
+				].join(" "),
+				fieldset: "!mt-0 !h-full",
+				prepend: "!mr-0",
+				append: "!ml-0"
+			}
+		},
+		dense: { true: {
+			inputWrapper: "!pt-2",
+			textarea: "py-1",
+			textareaSizer: "py-1"
+		} },
+		noResize: {
+			true: { textarea: "resize-none" },
+			false: { textarea: "resize-y" }
+		},
+		hovered: { true: { label: "border-black dark:border-white" } },
+		focused: { true: {} },
+		active: { true: { label: [
+			"text-xs leading-tight",
+			"[padding-left:var(--x-padding,0px)]",
+			"[padding-right:var(--x-padding,0px)]"
+		].join(" ") } },
+		noLabel: { true: {} },
+		showLabel: { true: {} },
+		textColor: {
+			primary: {
+				prepend: "text-rui-primary",
+				append: "text-rui-primary",
+				textarea: "text-rui-primary",
+				icon: "text-rui-primary"
+			},
+			secondary: {
+				prepend: "text-rui-secondary",
+				append: "text-rui-secondary",
+				textarea: "text-rui-secondary",
+				icon: "text-rui-secondary"
+			},
+			error: {
+				prepend: "text-rui-error",
+				append: "text-rui-error",
+				textarea: "text-rui-error",
+				icon: "text-rui-error"
+			},
+			warning: {
+				prepend: "text-rui-warning",
+				append: "text-rui-warning",
+				textarea: "text-rui-warning",
+				icon: "text-rui-warning"
+			},
+			info: {
+				prepend: "text-rui-info",
+				append: "text-rui-info",
+				textarea: "text-rui-info",
+				icon: "text-rui-info"
+			},
+			success: {
+				prepend: "text-rui-success",
+				append: "text-rui-success",
+				textarea: "text-rui-success",
+				icon: "text-rui-success"
+			}
+		},
+		validation: {
+			error: {
+				textarea: "!border-rui-error",
+				label: "!text-rui-error !after:border-rui-error"
+			},
+			success: {
+				textarea: "!border-rui-success",
+				label: "!text-rui-success !after:border-rui-success"
+			}
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "default",
+			focused: true,
+			class: { label: "after:scale-x-100" }
+		},
+		{
+			variant: "filled",
+			focused: true,
+			class: { label: "bg-black/[0.09] dark:bg-white/[0.13]" }
+		},
+		{
+			variant: "filled",
+			noLabel: true,
+			class: {
+				textarea: "py-4",
+				textareaSizer: "py-4"
+			}
+		},
+		{
+			variant: "filled",
+			noLabel: true,
+			dense: true,
+			class: {
+				textarea: "py-3",
+				textareaSizer: "py-3"
+			}
+		},
+		{
+			variant: "outlined",
+			active: true,
+			class: {
+				textarea: "border-t-transparent",
+				label: "!h-auto -translate-y-1/2 pl-4"
+			}
+		},
+		{
+			variant: "outlined",
+			dense: true,
+			class: { label: "leading-[2.5]" }
+		},
+		{
+			focused: true,
+			color: "primary",
+			class: { label: "text-rui-primary" }
+		},
+		{
+			focused: true,
+			color: "secondary",
+			class: { label: "text-rui-secondary" }
+		},
+		{
+			focused: true,
+			color: "error",
+			class: { label: "text-rui-error" }
+		},
+		{
+			focused: true,
+			color: "warning",
+			class: { label: "text-rui-warning" }
+		},
+		{
+			focused: true,
+			color: "info",
+			class: { label: "text-rui-info" }
+		},
+		{
+			focused: true,
+			color: "success",
+			class: { label: "text-rui-success" }
+		},
+		{
+			color: "primary",
+			class: { label: "after:border-rui-primary" }
+		},
+		{
+			color: "secondary",
+			class: { label: "after:border-rui-secondary" }
+		},
+		{
+			color: "error",
+			class: { label: "after:border-rui-error" }
+		},
+		{
+			color: "warning",
+			class: { label: "after:border-rui-warning" }
+		},
+		{
+			color: "info",
+			class: { label: "after:border-rui-info" }
+		},
+		{
+			color: "success",
+			class: { label: "after:border-rui-success" }
+		}
+	],
+	defaultVariants: {
+		variant: "default",
+		noResize: false
+	}
+});
+//#endregion
+export { textAreaStyles };
+
+//# sourceMappingURL=text-area-styles.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiTextField.js","names":[],"sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { textFieldStyles, type TextFieldVariant } from '@/components/forms/text-field/text-field-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  variant?: TextFieldVariant;\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextField',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  variant = 'default',\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n  'focus-input': [event: Event];\n  'blur': [event: Event];\n  'remove': [value: unknown];\n  'clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n}>();\n\nconst isHovered = ref<boolean>(false);\nconst showClearButton = ref<boolean>(false);\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst { focused } = useFocus(inputRef);\nconst { create: delayClearHide } = useTimeoutManager();\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append);\nconst { hasError, hasSuccess, hasMessages, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst active = computed<boolean>(() => get(focused) || !!get(modelValue));\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst effectiveTextColor = computed<ContextColorsType | undefined>(() => {\n  if (get(hasError))\n    return 'error';\n  if (get(hasSuccess))\n    return 'success';\n  if (textColor && !get(hasMessages))\n    return textColor;\n  return undefined;\n});\n\nconst effectiveColor = computed<ContextColorsType | undefined>(() => get(validation) ?? color);\n\nconst ui = computed<ReturnType<typeof textFieldStyles>>(() => textFieldStyles({\n  variant,\n  dense,\n  disabled,\n  hovered: get(isHovered),\n  focused: get(focused),\n  active: get(active),\n  noLabel: !label,\n  color: get(effectiveColor),\n  textColor: get(effectiveTextColor),\n  validation: get(validation),\n  showLabel: !!label,\n}));\n\nconst labelStyle = computed<Record<string, string>>(() => ({\n  '--prepend-w': get(prependWidth),\n  '--append-w': get(appendWidth),\n}));\n\nconst legendText = computed<string>(() => {\n  if (!get(active) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nfunction input(event: Event): void {\n  const target = event.target;\n  if (target instanceof HTMLInputElement) {\n    set(modelValue, target.value);\n  }\n}\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('clear');\n}\n\nwatch(focused, (value) => {\n  if (value) {\n    set(showClearButton, true);\n  }\n  else {\n    delayClearHide(() => set(showClearButton, false), 500);\n  }\n});\n\ndefineExpose({\n  setSelectionRange: (start: number, end: number) => {\n    get(inputRef)?.setSelectionRange(start, end);\n  },\n  focus: () => get(inputRef)?.focus(),\n  element: inputRef,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      :class=\"ui.wrapper()\"\n      data-id=\"wrapper\"\n      @mouseenter=\"isHovered = true\"\n      @mouseleave=\"isHovered = false\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        :class=\"ui.prepend()\"\n        data-id=\"prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon :name=\"prependIcon\" />\n        </div>\n      </div>\n      <div\n        :class=\"ui.inputWrapper()\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"ui.input()\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n          @blur=\"emit('blur', $event)\"\n          @remove=\"emit('remove', $event)\"\n        />\n        <label\n          :class=\"ui.label()\"\n          :style=\"labelStyle\"\n        >\n          <span :class=\"ui.labelText()\">\n            {{ label }}\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </fieldset>\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        :class=\"ui.append()\"\n        data-id=\"append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"[ui.clearButton(), { hidden: !showClearButton }]\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          color=\"error\"\n          data-id=\"clear-btn\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"20\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"ui.icon()\"\n        >\n          <RuiIcon :name=\"appendIcon\" />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

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

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