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

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

@@ -1,43 +1,22 @@
-import { type TextInputVariant } from '../text-input-styles.js';
-export type TextAreaVariant = TextInputVariant;
 /**
- * tv() styles for RuiTextArea. Extends textInputBase for shared
- * fieldset/legend/label/validation core.
+ * tv() styles for RuiTextArea: an even 8px padding, 14px text and the text field's bordered
+ * `fieldset`, focus and disabled treatment from textInputBase. The label sits above in
+ * RuiFieldLabel, so the placeholder is always shown.
  *
- * 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.
+ * The append area is absolutely placed, so the textarea reserves its width (`--append-w`) as right
+ * padding.
+ *
+ * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes between base and
+ * extension, so the fieldset's classes live only in textInputBase.
  */
 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;
+            prepend: string;
+            append: string;
         };
     };
     noResize: {
@@ -48,95 +27,66 @@ export declare const textAreaStyles: import("tailwind-variants").TVReturnType<{
             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;
+    disabled: {
+        true: {
+            wrapper: string;
         };
-        success: {
-            textarea: string;
-            label: string;
+    };
+    readonly: {
+        true: {
+            wrapper: 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: {
+    hovered: {
         true: {
             fieldset: string;
         };
     };
-    hovered: {
+    focused: {
         true: {
             fieldset: string;
         };
@@ -144,23 +94,19 @@ export declare const textAreaStyles: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: {
             fieldset: string;
-            label: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
+    readonly: {
+        true: {
+            fieldset: string;
+        };
     };
     validation: {
         error: {
             fieldset: string;
-            label: string;
         };
         success: {
             fieldset: string;
-            label: string;
         };
     };
     color: {
@@ -172,16 +118,14 @@ export declare const textAreaStyles: import("tailwind-variants").TVReturnType<{
         success: {};
     };
 }, {
-    label: string;
     fieldset: string;
-    legend: string;
 }, import("tailwind-variants").TVReturnType<{
-    focused: {
+    hovered: {
         true: {
             fieldset: string;
         };
     };
-    hovered: {
+    focused: {
         true: {
             fieldset: string;
         };
@@ -189,23 +133,19 @@ export declare const textAreaStyles: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: {
             fieldset: string;
-            label: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
+    readonly: {
+        true: {
+            fieldset: string;
+        };
     };
     validation: {
         error: {
             fieldset: string;
-            label: string;
         };
         success: {
             fieldset: string;
-            label: string;
         };
     };
     color: {
@@ -217,16 +157,14 @@ export declare const textAreaStyles: import("tailwind-variants").TVReturnType<{
         success: {};
     };
 }, {
-    label: string;
     fieldset: string;
-    legend: string;
 }, undefined, {
-    focused: {
+    hovered: {
         true: {
             fieldset: string;
         };
     };
-    hovered: {
+    focused: {
         true: {
             fieldset: string;
         };
@@ -234,23 +172,19 @@ export declare const textAreaStyles: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: {
             fieldset: string;
-            label: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
+    readonly: {
+        true: {
+            fieldset: string;
+        };
     };
     validation: {
         error: {
             fieldset: string;
-            label: string;
         };
         success: {
             fieldset: string;
-            label: string;
         };
     };
     color: {
@@ -262,16 +196,14 @@ export declare const textAreaStyles: import("tailwind-variants").TVReturnType<{
         success: {};
     };
 }, {
-    label: string;
     fieldset: string;
-    legend: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
-    focused: {
+    hovered: {
         true: {
             fieldset: string;
         };
     };
-    hovered: {
+    focused: {
         true: {
             fieldset: string;
         };
@@ -279,23 +211,19 @@ export declare const textAreaStyles: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: {
             fieldset: string;
-            label: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
+    readonly: {
+        true: {
+            fieldset: string;
+        };
     };
     validation: {
         error: {
             fieldset: string;
-            label: string;
         };
         success: {
             fieldset: string;
-            label: string;
         };
     };
     color: {
@@ -307,7 +235,5 @@ export declare const textAreaStyles: import("tailwind-variants").TVReturnType<{
         success: {};
     };
 }, {
-    label: string;
     fieldset: string;
-    legend: string;
 }>>>;

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

@@ -1,243 +1,83 @@
 import { tv } from "../../../utils/tv.js";
-import { textInputBase, underlinePseudo } from "../text-input-styles.js";
+import { textInputBase } 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.
+* tv() styles for RuiTextArea: an even 8px padding, 14px text and the text field's bordered
+* `fieldset`, focus and disabled treatment from textInputBase. The label sits above in
+* RuiFieldLabel, so the placeholder is always shown.
 *
-* 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.
+* The append area is absolutely placed, so the textarea reserves its width (`--append-w`) as right
+* padding.
+*
+* IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes between base and
+* extension, so the fieldset's classes live only in textInputBase.
 */
 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",
+		wrapper: "relative w-full min-w-[12.5rem] flex items-start rounded-rui-control bg-white dark:bg-transparent",
+		inputWrapper: "flex flex-1 pt-2",
 		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-[1rem] 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))]"
+			"peer w-full bg-transparent pt-0 pb-2 px-3 [padding-right:calc(0.75rem+var(--append-w,0px))]",
+			"text-sm/6 text-rui-text outline-hidden",
+			"placeholder:text-rui-neutral-500 dark:placeholder:text-rui-neutral-400"
 		].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"
+		textareaSizer: "invisible absolute top-0 left-0 w-full h-0 -z-10 pointer-events-none px-3 text-sm",
+		prepend: "flex items-center gap-1 shrink-0 h-6 mt-2 ml-3",
+		append: "flex items-center gap-1 shrink-0 absolute right-0 h-6 mt-2 mr-3",
+		icon: "text-rui-neutral-500 dark:text-rui-neutral-400",
+		details: "pt-1",
+		clearButton: ["!p-1 last:-mr-1", "text-rui-neutral-500 dark:text-rui-neutral-400 hover:text-rui-text dark:hover:text-rui-text"].join(" ")
 	},
 	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"
+			inputWrapper: "pt-1",
+			textarea: "pb-1",
+			textareaSizer: "pb-1",
+			prepend: "mt-1",
+			append: "mt-1"
 		} },
 		noResize: {
 			true: { textarea: "resize-none" },
 			false: { textarea: "resize-y" }
 		},
-		hovered: { true: { label: "border-black dark:border-white" } },
-		focused: { true: {} },
-		active: { true: { label: [
-			"text-[0.75rem] 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"
+				textarea: "text-rui-primary"
 			},
 			secondary: {
 				prepend: "text-rui-secondary",
 				append: "text-rui-secondary",
-				textarea: "text-rui-secondary",
-				icon: "text-rui-secondary"
+				textarea: "text-rui-secondary"
 			},
 			error: {
 				prepend: "text-rui-error",
 				append: "text-rui-error",
-				textarea: "text-rui-error",
-				icon: "text-rui-error"
+				textarea: "text-rui-error"
 			},
 			warning: {
 				prepend: "text-rui-warning",
 				append: "text-rui-warning",
-				textarea: "text-rui-warning",
-				icon: "text-rui-warning"
+				textarea: "text-rui-warning"
 			},
 			info: {
 				prepend: "text-rui-info",
 				append: "text-rui-info",
-				textarea: "text-rui-info",
-				icon: "text-rui-info"
+				textarea: "text-rui-info"
 			},
 			success: {
 				prepend: "text-rui-success",
 				append: "text-rui-success",
-				textarea: "text-rui-success",
-				icon: "text-rui-success"
+				textarea: "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"
-			}
-		}
+		disabled: { true: { wrapper: "bg-rui-neutral-50 dark:bg-rui-neutral-900" } },
+		readonly: { true: { wrapper: "bg-rui-surface-muted dark:bg-rui-surface-muted" } }
 	},
-	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-[0.5rem] pl-4"
-			}
-		},
-		{
-			variant: "outlined",
-			dense: true,
-			class: { label: "leading-[2.5]" }
-		},
-		{
-			variant: "outlined",
-			dense: true,
-			active: true,
-			class: { label: "!leading-tight" }
-		},
-		{
-			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
-	}
+	defaultVariants: { noResize: false }
 });
 //#endregion
 export { textAreaStyles };

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

@@ -1 +1 @@
-{"version":3,"file":"text-area-styles.js","names":[],"sources":["../../../../src/components/forms/text-area/text-area-styles.ts"],"sourcesContent":["import { textInputBase, type TextInputVariant, underlinePseudo } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type TextAreaVariant = TextInputVariant;\n\n/**\n * tv() styles for RuiTextArea. Extends textInputBase for shared\n * fieldset/legend/label/validation core.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes\n * between base and extension. Never put a class in the base slot that a\n * variant needs to override — put variant-specific classes in the variants.\n */\nexport const textAreaStyles = tv({\n  extend: textInputBase,\n  slots: {\n    fieldset: '',\n    legend: '',\n    wrapper: 'relative w-full min-w-[12.5rem] flex items-start rounded bg-white dark:bg-transparent',\n    inputWrapper: 'flex flex-1 overflow-hidden',\n    textarea: [\n      'peer leading-6 text-rui-text w-full bg-transparent pb-2 pt-0',\n      'outline-0 outline-none',\n      'placeholder:opacity-0 focus:placeholder:opacity-100',\n    ].join(' '),\n    textareaSizer: 'invisible absolute top-0 left-0 w-full h-0 -z-10 pointer-events-none',\n    label: [\n      'left-0 text-[1rem] pointer-events-none',\n      'absolute top-0 h-full w-full select-none',\n      '[padding-left:calc(var(--x-padding,0px)+var(--prepend-w,0px))]',\n      '[padding-right:calc(var(--x-padding,0px)+var(--append-w,0px))]',\n    ].join(' '),\n    labelText: 'truncate transition-all duration-75',\n    prepend: 'flex items-center gap-1 shrink-0 mt-4 mx-3',\n    append: 'flex items-center gap-1 shrink-0 absolute right-0 mt-4 mx-3',\n    icon: 'text-black/[0.54] dark:text-white/[0.56]',\n    details: 'pt-1 px-4',\n    required: 'text-rui-error',\n    clearButton: '!p-2',\n  },\n  variants: {\n    variant: {\n      default: {\n        inputWrapper: 'pt-4',\n        textarea: '[padding-right:calc(var(--x-padding,1rem)+var(--append-w,0px))]',\n        label: `flex leading-[3.2] ${underlinePseudo}`,\n      },\n      filled: {\n        inputWrapper: 'pt-4',\n        textarea: 'px-4 [padding-right:calc(var(--x-padding,1rem)+var(--append-w,0px))]',\n        textareaSizer: 'px-4',\n        label: `flex leading-[3.2] [--x-padding:1rem] rounded-t bg-black/[0.06] dark:bg-white/[0.09] ${underlinePseudo}`,\n        prepend: '!mr-0',\n        append: '!ml-0',\n      },\n      outlined: {\n        inputWrapper: '!overflow-visible pt-4',\n        textarea: 'px-4 [padding-right:calc(var(--x-padding,1rem)+var(--append-w,0px))]',\n        textareaSizer: 'px-4',\n        label: [\n          'flex leading-[3.2] [--x-padding:1rem]',\n          'border-0 border-transparent',\n          'after:content-none',\n        ].join(' '),\n        fieldset: '!mt-0 !h-full',\n        prepend: '!mr-0',\n        append: '!ml-0',\n      },\n    },\n    dense: {\n      true: {\n        inputWrapper: '!pt-2',\n        textarea: 'py-1',\n        textareaSizer: 'py-1',\n      },\n    },\n    noResize: {\n      true: {\n        textarea: 'resize-none',\n      },\n      false: {\n        textarea: 'resize-y',\n      },\n    },\n    hovered: {\n      true: {\n        label: 'border-black dark:border-white',\n      },\n    },\n    focused: {\n      true: {},\n    },\n    active: {\n      true: {\n        label: [\n          'text-[0.75rem] leading-tight',\n          '[padding-left:var(--x-padding,0px)]',\n          '[padding-right:var(--x-padding,0px)]',\n        ].join(' '),\n      },\n    },\n    noLabel: {\n      true: {},\n    },\n    showLabel: {\n      true: {},\n    },\n    textColor: {\n      primary: { prepend: 'text-rui-primary', append: 'text-rui-primary', textarea: 'text-rui-primary', icon: 'text-rui-primary' },\n      secondary: { prepend: 'text-rui-secondary', append: 'text-rui-secondary', textarea: 'text-rui-secondary', icon: 'text-rui-secondary' },\n      error: { prepend: 'text-rui-error', append: 'text-rui-error', textarea: 'text-rui-error', icon: 'text-rui-error' },\n      warning: { prepend: 'text-rui-warning', append: 'text-rui-warning', textarea: 'text-rui-warning', icon: 'text-rui-warning' },\n      info: { prepend: 'text-rui-info', append: 'text-rui-info', textarea: 'text-rui-info', icon: 'text-rui-info' },\n      success: { prepend: 'text-rui-success', append: 'text-rui-success', textarea: 'text-rui-success', icon: 'text-rui-success' },\n    },\n    validation: {\n      error: {\n        textarea: '!border-rui-error',\n        label: '!text-rui-error !after:border-rui-error',\n      },\n      success: {\n        textarea: '!border-rui-success',\n        label: '!text-rui-success !after:border-rui-success',\n      },\n    },\n  },\n  compoundVariants: [\n    // --- Default variant ---\n    { variant: 'default', focused: true, class: { label: 'after:scale-x-100' } },\n\n    // --- Filled variant ---\n    { variant: 'filled', focused: true, class: { label: 'bg-black/[0.09] dark:bg-white/[0.13]' } },\n    { variant: 'filled', noLabel: true, class: { textarea: 'py-4', textareaSizer: 'py-4' } },\n    { variant: 'filled', noLabel: true, dense: true, class: { textarea: 'py-3', textareaSizer: 'py-3' } },\n\n    // --- Outlined variant ---\n    { variant: 'outlined', active: true, class: {\n      textarea: 'border-t-transparent',\n      // Anchored in rem for the reason textFieldStyles gives: a percentage overshoots on blur\n      label: '!h-auto -translate-y-[0.5rem] pl-4',\n    } },\n    { variant: 'outlined', dense: true, class: { label: 'leading-[2.5]' } },\n    // Re-asserted because the dense rule's later `leading-[2.5]` wins in twMerge otherwise\n    { variant: 'outlined', dense: true, active: true, class: { label: '!leading-tight' } },\n\n    // --- Focus label color (per color) ---\n    { focused: true, color: 'primary', class: { label: 'text-rui-primary' } },\n    { focused: true, color: 'secondary', class: { label: 'text-rui-secondary' } },\n    { focused: true, color: 'error', class: { label: 'text-rui-error' } },\n    { focused: true, color: 'warning', class: { label: 'text-rui-warning' } },\n    { focused: true, color: 'info', class: { label: 'text-rui-info' } },\n    { focused: true, color: 'success', class: { label: 'text-rui-success' } },\n\n    // --- Label after border color (always applied when color set) ---\n    { color: 'primary', class: { label: 'after:border-rui-primary' } },\n    { color: 'secondary', class: { label: 'after:border-rui-secondary' } },\n    { color: 'error', class: { label: 'after:border-rui-error' } },\n    { color: 'warning', class: { label: 'after:border-rui-warning' } },\n    { color: 'info', class: { label: 'after:border-rui-info' } },\n    { color: 'success', class: { label: 'after:border-rui-success' } },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    noResize: false,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"text-area-styles.js","names":[],"sources":["../../../../src/components/forms/text-area/text-area-styles.ts"],"sourcesContent":["import { textInputBase } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\n/**\n * tv() styles for RuiTextArea: an even 8px padding, 14px text and the text field's bordered\n * `fieldset`, focus and disabled treatment from textInputBase. The label sits above in\n * RuiFieldLabel, so the placeholder is always shown.\n *\n * The append area is absolutely placed, so the textarea reserves its width (`--append-w`) as right\n * padding.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes between base and\n * extension, so the fieldset's classes live only in textInputBase.\n */\nexport const textAreaStyles = tv({\n  extend: textInputBase,\n  slots: {\n    fieldset: '',\n    wrapper: 'relative w-full min-w-[12.5rem] flex items-start rounded-rui-control bg-white dark:bg-transparent',\n    inputWrapper: 'flex flex-1 pt-2',\n    textarea: [\n      'peer w-full bg-transparent pt-0 pb-2 px-3 [padding-right:calc(0.75rem+var(--append-w,0px))]',\n      'text-sm/6 text-rui-text outline-hidden',\n      'placeholder:text-rui-neutral-500 dark:placeholder:text-rui-neutral-400',\n    ].join(' '),\n    textareaSizer: 'invisible absolute top-0 left-0 w-full h-0 -z-10 pointer-events-none px-3 text-sm',\n    // both sides are one 24px line tall and start where the text does, so icons center on the first line\n    prepend: 'flex items-center gap-1 shrink-0 h-6 mt-2 ml-3',\n    append: 'flex items-center gap-1 shrink-0 absolute right-0 h-6 mt-2 mr-3',\n    icon: 'text-rui-neutral-500 dark:text-rui-neutral-400',\n    details: 'pt-1',\n    // 24px round a 16px glyph; as the last control it pulls into the inset by its own padding\n    clearButton: [\n      '!p-1 last:-mr-1',\n      'text-rui-neutral-500 dark:text-rui-neutral-400 hover:text-rui-text dark:hover:text-rui-text',\n    ].join(' '),\n  },\n  variants: {\n    // 4px above and below the text rather than 8px, the 4px the dense text field drops\n    dense: {\n      true: {\n        inputWrapper: 'pt-1',\n        textarea: 'pb-1',\n        textareaSizer: 'pb-1',\n        prepend: 'mt-1',\n        append: 'mt-1',\n      },\n    },\n    noResize: {\n      true: { textarea: 'resize-none' },\n      false: { textarea: 'resize-y' },\n    },\n    // Icons keep the neutral tone; the color goes to the text around them\n    textColor: {\n      primary: { prepend: 'text-rui-primary', append: 'text-rui-primary', textarea: 'text-rui-primary' },\n      secondary: { prepend: 'text-rui-secondary', append: 'text-rui-secondary', textarea: 'text-rui-secondary' },\n      error: { prepend: 'text-rui-error', append: 'text-rui-error', textarea: 'text-rui-error' },\n      warning: { prepend: 'text-rui-warning', append: 'text-rui-warning', textarea: 'text-rui-warning' },\n      info: { prepend: 'text-rui-info', append: 'text-rui-info', textarea: 'text-rui-info' },\n      success: { prepend: 'text-rui-success', append: 'text-rui-success', textarea: 'text-rui-success' },\n    },\n    disabled: {\n      true: { wrapper: 'bg-rui-neutral-50 dark:bg-rui-neutral-900' },\n    },\n    // the activators' read-only fill, restated for dark over the base `dark:bg-transparent`\n    readonly: {\n      true: { wrapper: 'bg-rui-surface-muted dark:bg-rui-surface-muted' },\n    },\n  },\n  defaultVariants: {\n    noResize: false,\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAa,iBAAiB,GAAG;CAC/B,QAAQ;CACR,OAAO;EACL,UAAU;EACV,SAAS;EACT,cAAc;EACd,UAAU;GACR;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,eAAe;EAEf,SAAS;EACT,QAAQ;EACR,MAAM;EACN,SAAS;EAET,aAAa,CACX,mBACA,6FACF,CAAC,CAAC,KAAK,GAAG;CACZ;CACA,UAAU;EAER,OAAO,EACL,MAAM;GACJ,cAAc;GACd,UAAU;GACV,eAAe;GACf,SAAS;GACT,QAAQ;EACV,EACF;EACA,UAAU;GACR,MAAM,EAAE,UAAU,cAAc;GAChC,OAAO,EAAE,UAAU,WAAW;EAChC;EAEA,WAAW;GACT,SAAS;IAAE,SAAS;IAAoB,QAAQ;IAAoB,UAAU;GAAmB;GACjG,WAAW;IAAE,SAAS;IAAsB,QAAQ;IAAsB,UAAU;GAAqB;GACzG,OAAO;IAAE,SAAS;IAAkB,QAAQ;IAAkB,UAAU;GAAiB;GACzF,SAAS;IAAE,SAAS;IAAoB,QAAQ;IAAoB,UAAU;GAAmB;GACjG,MAAM;IAAE,SAAS;IAAiB,QAAQ;IAAiB,UAAU;GAAgB;GACrF,SAAS;IAAE,SAAS;IAAoB,QAAQ;IAAoB,UAAU;GAAmB;EACnG;EACA,UAAU,EACR,MAAM,EAAE,SAAS,4CAA4C,EAC/D;EAEA,UAAU,EACR,MAAM,EAAE,SAAS,iDAAiD,EACpE;CACF;CACA,iBAAiB,EACf,UAAU,MACZ;AACF,CAAC"}