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

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

@@ -1,161 +1,77 @@
-import { type TextInputVariant } from '../text-input-styles.js';
-export type TextFieldVariant = TextInputVariant;
 /**
- * tv() styles for RuiTextField. Extends textInputBase for shared
- * fieldset/legend/label/validation core.
+ * tv() styles for RuiTextField: a 36px box (32px dense) with 14px text and the bordered `fieldset`
+ * 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.
+ * `text-sm/6` rather than `text-sm`: the bare class sets a 20px line, which makes a 32px box.
  *
- * Choices the class lists cannot state themselves:
- *
- * The label's font size is the arbitrary `text-[1rem]` rather than
- * `text-base`, because the named class also carries `line-height: 1.5rem` and
- * a consumer's later-loaded `.text-base` rule would then beat the per-variant
- * `leading-*`. The arbitrary form emits font-size alone.
- *
- * A floated label keeps `--prepend-w` / `--append-w` in its padding so it sits
- * above the input column rather than above the prepend icon or append button.
- * Outlined is the exception: per MD3 its floated label straddles the border at
- * the start of the field, so it drops `--prepend-w` and anchors to the left
- * edge.
- *
- * Dense mode lifts the labelText glyphs rather than the label container: the
- * container carries the `after:` underline pseudo, which would float above the
- * input row if it moved with the label. Non-dense has enough room that no lift
- * is needed.
- *
- * The outlined float translates by a fixed rem, roughly half the active
- * label's 0.9375rem height, and not by a percentage. A percentage is
- * recomputed against the current label height, which jumps to the input's full
- * height the moment `!h-auto` is removed on blur, producing a visible upward
- * overshoot before the transition settles.
- *
- * Outlined + dense + active re-asserts `leading-tight`: the dense rule's
- * `leading-[2.5]` appears later, so twMerge keeps it, which inflates the
- * floated label's line-box from ~15px to ~30px and pushes its centre below the
- * fieldset border.
- *
- * A field with no label strips the wrapper's `pt-3` floating-label reserve and
- * tightens the input padding, so its underline sits at the same baseline as a
- * RuiMenuSelect activator (40px, or 32px dense).
+ * 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 textFieldStyles: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: {
-            wrapper: string;
-            input: string;
-            label: string;
-            prepend: string;
-            append: string;
-        };
-        filled: {
-            input: string;
-            label: string;
-            prepend: string;
-            append: string;
-        };
-        outlined: {
-            inputWrapper: string;
-            input: string;
-            label: string;
-            fieldset: string;
-            prepend: string;
-            append: string;
-        };
-    };
     dense: {
-        true: {};
-    };
-    hovered: {
-        true: {
-            label: string;
-        };
-    };
-    focused: {
-        true: {};
-    };
-    active: {
         true: {
-            label: string;
+            input: string;
         };
     };
-    noLabel: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
     textColor: {
         primary: {
             prepend: string;
             append: string;
             input: string;
-            icon: string;
         };
         secondary: {
             prepend: string;
             append: string;
             input: string;
-            icon: string;
         };
         error: {
             prepend: string;
             append: string;
             input: string;
-            icon: string;
         };
         warning: {
             prepend: string;
             append: string;
             input: string;
-            icon: string;
         };
         info: {
             prepend: string;
             append: string;
             input: string;
-            icon: string;
         };
         success: {
             prepend: string;
             append: string;
             input: string;
-            icon: string;
         };
     };
-    validation: {
-        error: {
-            input: string;
-            label: string;
+    disabled: {
+        true: {
+            wrapper: string;
         };
-        success: {
-            input: string;
-            label: string;
+    };
+    readonly: {
+        true: {
+            wrapper: string;
         };
     };
 }, {
     fieldset: string;
-    legend: string;
     wrapper: string;
     input: string;
-    label: string;
-    labelText: string;
     inputWrapper: string;
     prepend: string;
     append: string;
     icon: string;
     details: string;
-    required: string;
     clearButton: string;
 }, undefined, {
-    focused: {
+    hovered: {
         true: {
             fieldset: string;
         };
     };
-    hovered: {
+    focused: {
         true: {
             fieldset: string;
         };
@@ -163,23 +79,19 @@ export declare const textFieldStyles: 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: {
@@ -191,16 +103,14 @@ export declare const textFieldStyles: 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;
         };
@@ -208,23 +118,19 @@ export declare const textFieldStyles: 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: {
@@ -236,16 +142,14 @@ export declare const textFieldStyles: import("tailwind-variants").TVReturnType<{
         success: {};
     };
 }, {
-    label: string;
     fieldset: string;
-    legend: string;
 }, undefined, {
-    focused: {
+    hovered: {
         true: {
             fieldset: string;
         };
     };
-    hovered: {
+    focused: {
         true: {
             fieldset: string;
         };
@@ -253,23 +157,19 @@ export declare const textFieldStyles: 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: {
@@ -281,16 +181,14 @@ export declare const textFieldStyles: 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;
         };
@@ -298,23 +196,19 @@ export declare const textFieldStyles: 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: {
@@ -326,7 +220,5 @@ export declare const textFieldStyles: import("tailwind-variants").TVReturnType<{
         success: {};
     };
 }, {
-    label: string;
     fieldset: string;
-    legend: string;
 }>>>;

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

@@ -1,308 +1,65 @@
 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-field/text-field-styles.ts
 /**
-* tv() styles for RuiTextField. Extends textInputBase for shared
-* fieldset/legend/label/validation core.
+* tv() styles for RuiTextField: a 36px box (32px dense) with 14px text and the bordered `fieldset`
+* 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.
+* `text-sm/6` rather than `text-sm`: the bare class sets a 20px line, which makes a 32px box.
 *
-* Choices the class lists cannot state themselves:
-*
-* The label's font size is the arbitrary `text-[1rem]` rather than
-* `text-base`, because the named class also carries `line-height: 1.5rem` and
-* a consumer's later-loaded `.text-base` rule would then beat the per-variant
-* `leading-*`. The arbitrary form emits font-size alone.
-*
-* A floated label keeps `--prepend-w` / `--append-w` in its padding so it sits
-* above the input column rather than above the prepend icon or append button.
-* Outlined is the exception: per MD3 its floated label straddles the border at
-* the start of the field, so it drops `--prepend-w` and anchors to the left
-* edge.
-*
-* Dense mode lifts the labelText glyphs rather than the label container: the
-* container carries the `after:` underline pseudo, which would float above the
-* input row if it moved with the label. Non-dense has enough room that no lift
-* is needed.
-*
-* The outlined float translates by a fixed rem, roughly half the active
-* label's 0.9375rem height, and not by a percentage. A percentage is
-* recomputed against the current label height, which jumps to the input's full
-* height the moment `!h-auto` is removed on blur, producing a visible upward
-* overshoot before the transition settles.
-*
-* Outlined + dense + active re-asserts `leading-tight`: the dense rule's
-* `leading-[2.5]` appears later, so twMerge keeps it, which inflates the
-* floated label's line-box from ~15px to ~30px and pushes its centre below the
-* fieldset border.
-*
-* A field with no label strips the wrapper's `pt-3` floating-label reserve and
-* tightens the input padding, so its underline sits at the same baseline as a
-* RuiMenuSelect activator (40px, or 32px dense).
+* IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes between base and
+* extension, so the fieldset's classes live only in textInputBase.
 */
 var textFieldStyles = tv({
 	extend: textInputBase,
 	slots: {
 		fieldset: "",
-		legend: "",
-		wrapper: "relative w-full flex items-center rounded bg-white dark:bg-transparent",
-		input: [
-			"peer leading-6 text-rui-text w-full bg-transparent pr-4",
-			"outline-0 outline-none transition-all",
-			"placeholder:opacity-0 focus:placeholder:opacity-100"
-		].join(" "),
-		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-autofill:text-[0.75rem] peer-autofill:leading-tight"
-		].join(" "),
-		labelText: "truncate transition-all duration-75",
-		inputWrapper: "flex flex-1 overflow-hidden",
-		prepend: "flex items-center gap-1 shrink-0",
-		append: "flex items-center gap-1 shrink-0",
-		icon: "text-black/[0.54] dark:text-white/[0.56]",
-		details: "pt-1 px-4",
-		required: "text-rui-error",
-		clearButton: "!p-2"
+		wrapper: "relative w-full flex items-center rounded-rui-control bg-white dark:bg-transparent",
+		input: ["peer w-full bg-transparent px-3 py-1.5 text-sm/6 text-rui-text outline-hidden", "placeholder:text-rui-neutral-500 dark:placeholder:text-rui-neutral-400"].join(" "),
+		inputWrapper: "flex flex-1",
+		prepend: "flex items-center gap-1 shrink-0 pl-3",
+		append: "flex items-center gap-1 shrink-0 pr-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: {
-				wrapper: "pt-3",
-				input: "py-1.5",
-				label: `flex leading-[3.75] ${underlinePseudo}`,
-				prepend: "pr-3",
-				append: "pl-3"
-			},
-			filled: {
-				input: "px-4 py-4",
-				label: `flex leading-[3.5] [--x-padding:1rem] rounded-t bg-black/[0.06] dark:bg-white/[0.09] ${underlinePseudo}`,
-				prepend: "pl-3",
-				append: "pr-3"
-			},
-			outlined: {
-				inputWrapper: "!overflow-visible",
-				input: "px-4 py-4",
-				label: [
-					"flex leading-[3.5] [--x-padding:1rem]",
-					"border-0 border-transparent",
-					"after:content-none"
-				].join(" "),
-				fieldset: "!mt-0 !h-full",
-				prepend: "pl-3",
-				append: "pr-3"
-			}
-		},
-		dense: { true: {} },
-		hovered: { true: { label: "border-black dark:border-white" } },
-		focused: { true: {} },
-		active: { true: { label: [
-			"text-[0.75rem] leading-tight",
-			"[padding-left:calc(var(--x-padding,0px)+var(--prepend-w,0px))]",
-			"[padding-right:calc(var(--x-padding,0px)+var(--append-w,0px))]"
-		].join(" ") } },
-		noLabel: { true: {} },
-		showLabel: { true: {} },
+		dense: { true: { input: "py-1" } },
 		textColor: {
 			primary: {
 				prepend: "text-rui-primary",
 				append: "text-rui-primary",
-				input: "text-rui-primary",
-				icon: "text-rui-primary"
+				input: "text-rui-primary"
 			},
 			secondary: {
 				prepend: "text-rui-secondary",
 				append: "text-rui-secondary",
-				input: "text-rui-secondary",
-				icon: "text-rui-secondary"
+				input: "text-rui-secondary"
 			},
 			error: {
 				prepend: "text-rui-error",
 				append: "text-rui-error",
-				input: "text-rui-error",
-				icon: "text-rui-error"
+				input: "text-rui-error"
 			},
 			warning: {
 				prepend: "text-rui-warning",
 				append: "text-rui-warning",
-				input: "text-rui-warning",
-				icon: "text-rui-warning"
+				input: "text-rui-warning"
 			},
 			info: {
 				prepend: "text-rui-info",
 				append: "text-rui-info",
-				input: "text-rui-info",
-				icon: "text-rui-info"
+				input: "text-rui-info"
 			},
 			success: {
 				prepend: "text-rui-success",
 				append: "text-rui-success",
-				input: "text-rui-success",
-				icon: "text-rui-success"
+				input: "text-rui-success"
 			}
 		},
-		validation: {
-			error: {
-				input: "!border-rui-error",
-				label: "!text-rui-error !after:border-rui-error"
-			},
-			success: {
-				input: "!border-rui-success",
-				label: "!text-rui-success !after:border-rui-success"
-			}
-		}
-	},
-	compoundVariants: [
-		{
-			variant: "default",
-			focused: true,
-			class: { label: "after:scale-x-100" }
-		},
-		{
-			variant: "default",
-			dense: true,
-			class: {
-				input: "py-1",
-				label: "leading-[3.5]"
-			}
-		},
-		{
-			variant: "default",
-			dense: true,
-			active: true,
-			class: { labelText: "-translate-y-[0.5rem]" }
-		},
-		{
-			variant: "default",
-			noLabel: true,
-			class: {
-				wrapper: "!pt-0",
-				input: "py-2"
-			}
-		},
-		{
-			variant: "default",
-			noLabel: true,
-			dense: true,
-			class: { input: "py-1" }
-		},
-		{
-			variant: "filled",
-			focused: true,
-			class: { label: "bg-black/[0.09] dark:bg-white/[0.13]" }
-		},
-		{
-			variant: "filled",
-			active: true,
-			class: { label: "leading-[1.5]" }
-		},
-		{
-			variant: "filled",
-			dense: true,
-			class: {
-				input: "pt-5 pb-1",
-				label: "leading-[3]"
-			}
-		},
-		{
-			variant: "filled",
-			dense: true,
-			active: true,
-			class: { label: "leading-[2.25]" }
-		},
-		{
-			variant: "filled",
-			noLabel: true,
-			class: { input: "py-4" }
-		},
-		{
-			variant: "filled",
-			noLabel: true,
-			dense: true,
-			class: { input: "py-3" }
-		},
-		{
-			variant: "outlined",
-			active: true,
-			class: {
-				input: "border-t-transparent",
-				label: "!h-auto -translate-y-[0.5rem] [padding-left:var(--x-padding,0px)]"
-			}
-		},
-		{
-			variant: "outlined",
-			dense: true,
-			class: {
-				input: "py-2",
-				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" }
+		disabled: { true: { wrapper: "bg-rui-neutral-50 dark:bg-rui-neutral-900" } },
+		readonly: { true: { wrapper: "bg-rui-surface-muted dark:bg-rui-surface-muted" } }
+	}
 });
 //#endregion
 export { textFieldStyles };