@rotki/ui-library 2.15.0 → 2.16.1

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

@@ -0,0 +1,251 @@
+import { tv } from "../../../utils/tv.js";
+import { textInputBase, underlinePseudo } 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.
+*
+* 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 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-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))]",
+			"peer-autofill:text-xs 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"
+	},
+	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-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",
+				input: "text-rui-primary",
+				icon: "text-rui-primary"
+			},
+			secondary: {
+				prepend: "text-rui-secondary",
+				append: "text-rui-secondary",
+				input: "text-rui-secondary",
+				icon: "text-rui-secondary"
+			},
+			error: {
+				prepend: "text-rui-error",
+				append: "text-rui-error",
+				input: "text-rui-error",
+				icon: "text-rui-error"
+			},
+			warning: {
+				prepend: "text-rui-warning",
+				append: "text-rui-warning",
+				input: "text-rui-warning",
+				icon: "text-rui-warning"
+			},
+			info: {
+				prepend: "text-rui-info",
+				append: "text-rui-info",
+				input: "text-rui-info",
+				icon: "text-rui-info"
+			},
+			success: {
+				prepend: "text-rui-success",
+				append: "text-rui-success",
+				input: "text-rui-success",
+				icon: "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: "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-1/2 pl-4"
+			}
+		},
+		{
+			variant: "outlined",
+			dense: true,
+			class: {
+				input: "py-2",
+				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" }
+});
+//#endregion
+export { textFieldStyles };
+
+//# sourceMappingURL=text-field-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-field-styles.js","names":[],"sources":["../../../../src/components/forms/text-field/text-field-styles.ts"],"sourcesContent":["import { textInputBase, type TextInputVariant, underlinePseudo } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type TextFieldVariant = TextInputVariant;\n\n/**\n * tv() styles for RuiTextField. Extends textInputBase for shared\n * fieldset/legend/label/validation core.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes\n * between base and extension. Never put a class in the base slot that a\n * variant needs to override — put variant-specific classes in the variants.\n */\n\nexport const textFieldStyles = tv({\n  extend: textInputBase,\n  slots: {\n    // Re-declare base slots for type inference (extend merges classes at runtime)\n    fieldset: '',\n    legend: '',\n    // No pt-* here — each variant sets its own padding-top\n    wrapper: 'relative w-full flex items-center rounded bg-white dark:bg-transparent',\n    input: [\n      'peer leading-6 text-rui-text w-full bg-transparent pr-4',\n      'outline-0 outline-none transition-all',\n      'placeholder:opacity-0 focus:placeholder:opacity-100',\n    ].join(' '),\n    // No border-b or display here — each variant sets its own\n    label: [\n      'left-0 text-base pointer-events-none',\n      'absolute top-0 h-full w-full select-none',\n      // Dynamic padding via CSS variables\n      '[padding-left:calc(var(--x-padding,0px)+var(--prepend-w,0px))]',\n      '[padding-right:calc(var(--x-padding,0px)+var(--append-w,0px))]',\n      // CSS-only autofill fallback (before JS catches up)\n      'peer-autofill:text-xs peer-autofill:leading-tight',\n    ].join(' '),\n    labelText: 'truncate transition-all duration-75',\n    inputWrapper: 'flex flex-1 overflow-hidden',\n    prepend: 'flex items-center gap-1 shrink-0',\n    append: 'flex items-center gap-1 shrink-0',\n    icon: 'text-black/[0.54] dark:text-white/[0.56]',\n    details: 'pt-1 px-4',\n    required: 'text-rui-error',\n    clearButton: '!p-2',\n  },\n  variants: {\n    variant: {\n      default: {\n        wrapper: 'pt-3',\n        input: 'py-1.5',\n        label: `flex leading-[3.75] ${underlinePseudo}`,\n        prepend: 'pr-3',\n        append: 'pl-3',\n      },\n      filled: {\n        input: 'px-4 py-4',\n        label: `flex leading-[3.5] [--x-padding:1rem] rounded-t bg-black/[0.06] dark:bg-white/[0.09] ${underlinePseudo}`,\n        prepend: 'pl-3',\n        append: 'pr-3',\n      },\n      outlined: {\n        inputWrapper: '!overflow-visible',\n        input: 'px-4 py-4',\n        label: [\n          'flex leading-[3.5] [--x-padding:1rem]',\n          'border-0 border-transparent',\n          'after:content-none',\n        ].join(' '),\n        fieldset: '!mt-0 !h-full',\n        prepend: 'pl-3',\n        append: 'pr-3',\n      },\n    },\n    dense: {\n      true: {},\n    },\n    hovered: {\n      true: {\n        label: 'border-black dark:border-white',\n      },\n    },\n    focused: {\n      true: {},\n    },\n    active: {\n      true: {\n        label: [\n          'text-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', input: 'text-rui-primary', icon: 'text-rui-primary' },\n      secondary: { prepend: 'text-rui-secondary', append: 'text-rui-secondary', input: 'text-rui-secondary', icon: 'text-rui-secondary' },\n      error: { prepend: 'text-rui-error', append: 'text-rui-error', input: 'text-rui-error', icon: 'text-rui-error' },\n      warning: { prepend: 'text-rui-warning', append: 'text-rui-warning', input: 'text-rui-warning', icon: 'text-rui-warning' },\n      info: { prepend: 'text-rui-info', append: 'text-rui-info', input: 'text-rui-info', icon: 'text-rui-info' },\n      success: { prepend: 'text-rui-success', append: 'text-rui-success', input: 'text-rui-success', icon: 'text-rui-success' },\n    },\n    validation: {\n      error: {\n        input: '!border-rui-error',\n        label: '!text-rui-error !after:border-rui-error',\n      },\n      success: {\n        input: '!border-rui-success',\n        label: '!text-rui-success !after:border-rui-success',\n      },\n    },\n  },\n  compoundVariants: [\n    // --- Default variant ---\n    { variant: 'default', focused: true, class: { label: 'after:scale-x-100' } },\n    { variant: 'default', dense: true, class: { input: 'py-1', label: 'leading-[3.5]' } },\n\n    // --- Filled variant ---\n    { variant: 'filled', focused: true, class: { label: 'bg-black/[0.09] dark:bg-white/[0.13]' } },\n    { variant: 'filled', active: true, class: { label: 'leading-[1.5]' } },\n    { variant: 'filled', dense: true, class: { input: 'pt-5 pb-1', label: 'leading-[3]' } },\n    { variant: 'filled', dense: true, active: true, class: { label: 'leading-[2.25]' } },\n    { variant: 'filled', noLabel: true, class: { input: 'py-4' } },\n    { variant: 'filled', noLabel: true, dense: true, class: { input: 'py-3' } },\n\n    // --- Outlined variant ---\n    { variant: 'outlined', active: true, class: {\n      input: 'border-t-transparent',\n      label: '!h-auto -translate-y-1/2 pl-4',\n    } },\n    { variant: 'outlined', dense: true, class: { input: 'py-2', 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  },\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,422 @@
+export declare const TextInputVariant: {
+    readonly default: "default";
+    readonly filled: "filled";
+    readonly outlined: "outlined";
+};
+export type TextInputVariant = (typeof TextInputVariant)[keyof typeof TextInputVariant];
+/**
+ * Shared underline pseudo-element classes for default and filled variants.
+ * Used by TextField and TextArea label slots.
+ */
+export declare const underlinePseudo: string;
+/**
+ * Shared base tv() for all text-input-family components.
+ * Extended by: TextField, TextArea, MenuSelect, AutoComplete, DateTimePicker.
+ *
+ * Provides the common core: floating label, fieldset/legend (outlined),
+ * validation colors, disabled state, dark mode, and focus color.
+ *
+ * ## State approach (JS-driven for all 5 components)
+ *
+ * - `focused`: from useFocus (Group A) or computed from isOpen (Group B)
+ * - `active`: focused || hasValue — drives label float
+ * - `hovered`: mouseenter/mouseleave ref
+ *
+ * ## Legend content
+ *
+ * The legend's `after:content` uses CSS variable `--rui-legend`.
+ * Bind via `:style="{ '--rui-legend': labelWithQuote }"` on the legend element.
+ */
+export declare const textInputBase: 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>>;
+/**
+ * Shared tv() styles for the activator-based components (Group B):
+ * MenuSelect, AutoComplete, DateTimePicker.
+ *
+ * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes.
+ * Never put a class in the base slot that a variant needs to override.
+ *
+ * State-driven via JS refs: `outlined`, `float` (open || hasValue),
+ * `opened`, `disabled`, `readonly`, `dense`.
+ */
+export declare const activatorStyles: import("tailwind-variants").TVReturnType<{
+    dense: {
+        true: {
+            activator: string;
+        };
+    };
+    disabled: {
+        true: {
+            activator: string;
+        };
+    };
+    readonly: {
+        true: {
+            activator: string;
+        };
+    };
+    filled: {
+        true: {
+            activator: string;
+        };
+    };
+    outlined: {
+        true: {
+            activator: string;
+            label: string;
+            fieldset: string;
+        };
+        false: {
+            activator: string;
+        };
+    };
+    float: {
+        true: {
+            label: string;
+        };
+    };
+    opened: {
+        true: {
+            icon: string;
+        };
+    };
+    active: {
+        true: {
+            highlighted: string;
+        };
+    };
+    hasError: {
+        true: {};
+    };
+    hasSuccess: {
+        true: {};
+    };
+}, {
+    fieldset: string;
+    legend: string;
+    wrapper: string;
+    activator: string;
+    label: string;
+    value: string;
+    clear: string;
+    menu: string;
+    highlighted: string;
+    progress: string;
+    icon: string;
+    iconWrapper: string;
+    required: 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>>>;