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

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

@@ -1 +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 * Choices the class lists cannot state themselves:\n *\n * The label's font size is the arbitrary `text-[1rem]` rather than\n * `text-base`, because the named class also carries `line-height: 1.5rem` and\n * a consumer's later-loaded `.text-base` rule would then beat the per-variant\n * `leading-*`. The arbitrary form emits font-size alone.\n *\n * A floated label keeps `--prepend-w` / `--append-w` in its padding so it sits\n * above the input column rather than above the prepend icon or append button.\n * Outlined is the exception: per MD3 its floated label straddles the border at\n * the start of the field, so it drops `--prepend-w` and anchors to the left\n * edge.\n *\n * Dense mode lifts the labelText glyphs rather than the label container: the\n * container carries the `after:` underline pseudo, which would float above the\n * input row if it moved with the label. Non-dense has enough room that no lift\n * is needed.\n *\n * The outlined float translates by a fixed rem, roughly half the active\n * label's 0.9375rem height, and not by a percentage. A percentage is\n * recomputed against the current label height, which jumps to the input's full\n * height the moment `!h-auto` is removed on blur, producing a visible upward\n * overshoot before the transition settles.\n *\n * Outlined + dense + active re-asserts `leading-tight`: the dense rule's\n * `leading-[2.5]` appears later, so twMerge keeps it, which inflates the\n * floated label's line-box from ~15px to ~30px and pushes its centre below the\n * fieldset border.\n *\n * A field with no label strips the wrapper's `pt-3` floating-label reserve and\n * tightens the input padding, so its underline sits at the same baseline as a\n * RuiMenuSelect activator (40px, or 32px dense).\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-[1rem] 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-[0.75rem] 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-[0.75rem] leading-tight',\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      },\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    // Lifts the glyphs, not the label container, so the focus underline stays anchored\n    { variant: 'default', dense: true, active: true, class: { labelText: '-translate-y-[0.5rem]' } },\n    // Matches min-h-10 / !min-h-8 on the menu-select activator\n    { variant: 'default', noLabel: true, class: { wrapper: '!pt-0', input: 'py-2' } },\n    { variant: 'default', noLabel: true, dense: true, class: { input: 'py-1' } },\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-[0.5rem] [padding-left:var(--x-padding,0px)]',\n    } },\n    { variant: 'outlined', dense: true, class: { input: 'py-2', 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  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,IAAa,kBAAkB,GAAG;CAChC,QAAQ;CACR,OAAO;EAEL,UAAU;EACV,QAAQ;EAER,SAAS;EACT,OAAO;GACL;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;EAEV,OAAO;GACL;GACA;GAEA;GACA;GAEA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,WAAW;EACX,cAAc;EACd,SAAS;EACT,QAAQ;EACR,MAAM;EACN,SAAS;EACT,UAAU;EACV,aAAa;CACf;CACA,UAAU;EACR,SAAS;GACP,SAAS;IACP,SAAS;IACT,OAAO;IACP,OAAO,uBAAuB;IAC9B,SAAS;IACT,QAAQ;GACV;GACA,QAAQ;IACN,OAAO;IACP,OAAO,wFAAwF;IAC/F,SAAS;IACT,QAAQ;GACV;GACA,UAAU;IACR,cAAc;IACd,OAAO;IACP,OAAO;KACL;KACA;KACA;IACF,CAAC,CAAC,KAAK,GAAG;IACV,UAAU;IACV,SAAS;IACT,QAAQ;GACV;EACF;EACA,OAAO,EACL,MAAM,CAAC,EACT;EACA,SAAS,EACP,MAAM,EACJ,OAAO,iCACT,EACF;EACA,SAAS,EACP,MAAM,CAAC,EACT;EACA,QAAQ,EACN,MAAM,EACJ,OAAO;GACL;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG,EACZ,EACF;EACA,SAAS,EACP,MAAM,CAAC,EACT;EACA,WAAW,EACT,MAAM,CAAC,EACT;EACA,WAAW;GACT,SAAS;IAAE,SAAS;IAAoB,QAAQ;IAAoB,OAAO;IAAoB,MAAM;GAAmB;GACxH,WAAW;IAAE,SAAS;IAAsB,QAAQ;IAAsB,OAAO;IAAsB,MAAM;GAAqB;GAClI,OAAO;IAAE,SAAS;IAAkB,QAAQ;IAAkB,OAAO;IAAkB,MAAM;GAAiB;GAC9G,SAAS;IAAE,SAAS;IAAoB,QAAQ;IAAoB,OAAO;IAAoB,MAAM;GAAmB;GACxH,MAAM;IAAE,SAAS;IAAiB,QAAQ;IAAiB,OAAO;IAAiB,MAAM;GAAgB;GACzG,SAAS;IAAE,SAAS;IAAoB,QAAQ;IAAoB,OAAO;IAAoB,MAAM;GAAmB;EAC1H;EACA,YAAY;GACV,OAAO;IACL,OAAO;IACP,OAAO;GACT;GACA,SAAS;IACP,OAAO;IACP,OAAO;GACT;EACF;CACF;CACA,kBAAkB;EAEhB;GAAE,SAAS;GAAW,SAAS;GAAM,OAAO,EAAE,OAAO,oBAAoB;EAAE;EAC3E;GAAE,SAAS;GAAW,OAAO;GAAM,OAAO;IAAE,OAAO;IAAQ,OAAO;GAAgB;EAAE;EAEpF;GAAE,SAAS;GAAW,OAAO;GAAM,QAAQ;GAAM,OAAO,EAAE,WAAW,wBAAwB;EAAE;EAE/F;GAAE,SAAS;GAAW,SAAS;GAAM,OAAO;IAAE,SAAS;IAAS,OAAO;GAAO;EAAE;EAChF;GAAE,SAAS;GAAW,SAAS;GAAM,OAAO;GAAM,OAAO,EAAE,OAAO,OAAO;EAAE;EAG3E;GAAE,SAAS;GAAU,SAAS;GAAM,OAAO,EAAE,OAAO,uCAAuC;EAAE;EAC7F;GAAE,SAAS;GAAU,QAAQ;GAAM,OAAO,EAAE,OAAO,gBAAgB;EAAE;EACrE;GAAE,SAAS;GAAU,OAAO;GAAM,OAAO;IAAE,OAAO;IAAa,OAAO;GAAc;EAAE;EACtF;GAAE,SAAS;GAAU,OAAO;GAAM,QAAQ;GAAM,OAAO,EAAE,OAAO,iBAAiB;EAAE;EACnF;GAAE,SAAS;GAAU,SAAS;GAAM,OAAO,EAAE,OAAO,OAAO;EAAE;EAC7D;GAAE,SAAS;GAAU,SAAS;GAAM,OAAO;GAAM,OAAO,EAAE,OAAO,OAAO;EAAE;EAG1E;GAAE,SAAS;GAAY,QAAQ;GAAM,OAAO;IAC1C,OAAO;IACP,OAAO;GACT;EAAE;EACF;GAAE,SAAS;GAAY,OAAO;GAAM,OAAO;IAAE,OAAO;IAAQ,OAAO;GAAgB;EAAE;EAErF;GAAE,SAAS;GAAY,OAAO;GAAM,QAAQ;GAAM,OAAO,EAAE,OAAO,iBAAiB;EAAE;EAGrF;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,OAAO,mBAAmB;EAAE;EACxE;GAAE,SAAS;GAAM,OAAO;GAAa,OAAO,EAAE,OAAO,qBAAqB;EAAE;EAC5E;GAAE,SAAS;GAAM,OAAO;GAAS,OAAO,EAAE,OAAO,iBAAiB;EAAE;EACpE;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,OAAO,mBAAmB;EAAE;EACxE;GAAE,SAAS;GAAM,OAAO;GAAQ,OAAO,EAAE,OAAO,gBAAgB;EAAE;EAClE;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,OAAO,mBAAmB;EAAE;EAGxE;GAAE,OAAO;GAAW,OAAO,EAAE,OAAO,2BAA2B;EAAE;EACjE;GAAE,OAAO;GAAa,OAAO,EAAE,OAAO,6BAA6B;EAAE;EACrE;GAAE,OAAO;GAAS,OAAO,EAAE,OAAO,yBAAyB;EAAE;EAC7D;GAAE,OAAO;GAAW,OAAO,EAAE,OAAO,2BAA2B;EAAE;EACjE;GAAE,OAAO;GAAQ,OAAO,EAAE,OAAO,wBAAwB;EAAE;EAC3D;GAAE,OAAO;GAAW,OAAO,EAAE,OAAO,2BAA2B;EAAE;CACnE;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC"}
+{"version":3,"file":"text-field-styles.js","names":[],"sources":["../../../../src/components/forms/text-field/text-field-styles.ts"],"sourcesContent":["import { textInputBase } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\n/**\n * tv() styles for RuiTextField: a 36px box (32px dense) with 14px text and the bordered `fieldset`\n * from textInputBase. The label sits above in RuiFieldLabel, so the placeholder is always shown.\n *\n * `text-sm/6` rather than `text-sm`: the bare class sets a 20px line, which makes a 32px box.\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 textFieldStyles = tv({\n  extend: textInputBase,\n  slots: {\n    // Re-declare the base slot for type inference (extend merges classes at runtime)\n    fieldset: '',\n    wrapper: 'relative w-full flex items-center rounded-rui-control bg-white dark:bg-transparent',\n    input: [\n      'peer w-full bg-transparent px-3 py-1.5 text-sm/6 text-rui-text outline-hidden',\n      'placeholder:text-rui-neutral-500 dark:placeholder:text-rui-neutral-400',\n    ].join(' '),\n    inputWrapper: 'flex flex-1',\n    // matching insets: a glyph sits 12px from either edge\n    prepend: 'flex items-center gap-1 shrink-0 pl-3',\n    append: 'flex items-center gap-1 shrink-0 pr-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    dense: {\n      true: { input: 'py-1' },\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', input: 'text-rui-primary' },\n      secondary: { prepend: 'text-rui-secondary', append: 'text-rui-secondary', input: 'text-rui-secondary' },\n      error: { prepend: 'text-rui-error', append: 'text-rui-error', input: 'text-rui-error' },\n      warning: { prepend: 'text-rui-warning', append: 'text-rui-warning', input: 'text-rui-warning' },\n      info: { prepend: 'text-rui-info', append: 'text-rui-info', input: 'text-rui-info' },\n      success: { prepend: 'text-rui-success', append: 'text-rui-success', input: '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});\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,kBAAkB,GAAG;CAChC,QAAQ;CACR,OAAO;EAEL,UAAU;EACV,SAAS;EACT,OAAO,CACL,iFACA,wEACF,CAAC,CAAC,KAAK,GAAG;EACV,cAAc;EAEd,SAAS;EACT,QAAQ;EACR,MAAM;EACN,SAAS;EAET,aAAa,CACX,mBACA,6FACF,CAAC,CAAC,KAAK,GAAG;CACZ;CACA,UAAU;EACR,OAAO,EACL,MAAM,EAAE,OAAO,OAAO,EACxB;EAEA,WAAW;GACT,SAAS;IAAE,SAAS;IAAoB,QAAQ;IAAoB,OAAO;GAAmB;GAC9F,WAAW;IAAE,SAAS;IAAsB,QAAQ;IAAsB,OAAO;GAAqB;GACtG,OAAO;IAAE,SAAS;IAAkB,QAAQ;IAAkB,OAAO;GAAiB;GACtF,SAAS;IAAE,SAAS;IAAoB,QAAQ;IAAoB,OAAO;GAAmB;GAC9F,MAAM;IAAE,SAAS;IAAiB,QAAQ;IAAiB,OAAO;GAAgB;GAClF,SAAS;IAAE,SAAS;IAAoB,QAAQ;IAAoB,OAAO;GAAmB;EAChG;EACA,UAAU,EACR,MAAM,EAAE,SAAS,4CAA4C,EAC/D;EAEA,UAAU,EACR,MAAM,EAAE,SAAS,iDAAiD,EACpE;CACF;AACF,CAAC"}

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

@@ -1,47 +1,22 @@
-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.
+ * The bordered box every text input draws: a `fieldset` laid over the field, so consumer overrides
+ * that target `[&_fieldset]` keep working. Extended by RuiTextField and RuiTextArea; the activator
+ * styles below carry their own copy, keyed by `opened` rather than `focused`.
  *
- * ## Compositing
+ * The box is 1px in every state. Hover darkens it, focus colors it and adds a soft ring, and a
+ * validation state colors both.
  *
- * The fieldset is forced onto its own GPU layer so the focused border is
- * rasterized on integer pixel boundaries. Without it, at fractional
- * y-coordinates with a non-integer device pixel ratio such as 1.25, Chromium
- * anti-aliases the 1.6-2px focus border across two physical pixel rows behind
- * the floated label, which shows up as two thin lines crossing it.
+ * The fieldset is forced onto its own GPU layer so its border is rasterized on integer pixel
+ * boundaries; at fractional y-coordinates with a device pixel ratio such as 1.25, Chromium otherwise
+ * anti-aliases it across two physical pixel rows.
  */
 export declare const textInputBase: import("tailwind-variants").TVReturnType<{
-    focused: {
+    hovered: {
         true: {
             fieldset: string;
         };
     };
-    hovered: {
+    focused: {
         true: {
             fieldset: string;
         };
@@ -49,23 +24,19 @@ export declare const textInputBase: 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: {
@@ -77,16 +48,14 @@ export declare const textInputBase: import("tailwind-variants").TVReturnType<{
         success: {};
     };
 }, {
-    label: string;
     fieldset: string;
-    legend: string;
 }, undefined, {
-    focused: {
+    hovered: {
         true: {
             fieldset: string;
         };
     };
-    hovered: {
+    focused: {
         true: {
             fieldset: string;
         };
@@ -94,23 +63,19 @@ export declare const textInputBase: 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: {
@@ -122,16 +87,14 @@ export declare const textInputBase: 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;
         };
@@ -139,23 +102,19 @@ export declare const textInputBase: 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: {
@@ -167,26 +126,17 @@ export declare const textInputBase: import("tailwind-variants").TVReturnType<{
         success: {};
     };
 }, {
-    label: string;
     fieldset: string;
-    legend: string;
 }>>;
 /**
- * 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.
+ * Shared tv() styles for the activator-based components: RuiMenuSelect, RuiAutoComplete,
+ * RuiDateTimePicker. A 36px box (32px dense) with 14px text whose content is centred, so only
+ * wrapped tags grow it.
  *
- * State-driven via JS refs: `outlined`, `float` (open || hasValue),
- * `opened`, `disabled`, `readonly`, `dense`.
- *
- * The wrapper is `w-full inline-flex flex-col` so an activator fills its
- * parent whatever the context. A consumer's own width utility would normally
- * collide with `w-full` on the same element and lose to cascade order, so
- * RuiAutoComplete, RuiMenuSelect and RuiDateTimePicker route consumer classes
- * through `ui.wrapper(\{ class \})`, where twMerge deduplicates them and the
- * consumer's width wins.
+ * The wrapper is `w-full inline-flex flex-col` so an activator fills its parent whatever the
+ * context. A consumer's own width utility would normally collide with `w-full` on the same element
+ * and lose to cascade order, so the components route consumer classes through
+ * `ui.wrapper(\{ class \})`, where twMerge deduplicates them and the consumer's width wins.
  */
 export declare const activatorStyles: import("tailwind-variants").TVReturnType<{
     dense: {
@@ -197,36 +147,36 @@ export declare const activatorStyles: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: {
             activator: string;
+            icon: string;
+            fieldset: string;
         };
     };
     readonly: {
         true: {
             activator: string;
+            fieldset: string;
+            iconWrapper: string;
         };
     };
-    filled: {
+    hovered: {
         true: {
-            activator: string;
+            fieldset: string;
         };
     };
-    outlined: {
+    opened: {
         true: {
-            activator: string;
-            label: string;
+            icon: string;
             fieldset: string;
         };
-        false: {
-            activator: string;
-        };
     };
-    float: {
+    hasError: {
         true: {
-            label: string;
+            fieldset: string;
         };
     };
-    opened: {
+    hasSuccess: {
         true: {
-            icon: string;
+            fieldset: string;
         };
     };
     active: {
@@ -234,24 +184,10 @@ export declare const activatorStyles: import("tailwind-variants").TVReturnType<{
             highlighted: string;
         };
     };
-    hasError: {
-        true: {};
-    };
-    hasSuccess: {
-        true: {};
-    };
-    hovered: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
 }, {
-    fieldset: string;
-    legend: string;
     wrapper: string;
     activator: string;
-    label: string;
+    fieldset: string;
     value: string;
     clear: string;
     menu: string;
@@ -259,185 +195,118 @@ export declare const activatorStyles: import("tailwind-variants").TVReturnType<{
     progress: string;
     icon: string;
     iconWrapper: string;
-    required: string;
 }, undefined, {
-    focused: {
+    dense: {
         true: {
-            fieldset: string;
+            activator: string;
         };
     };
-    hovered: {
+    disabled: {
         true: {
+            activator: string;
+            icon: string;
             fieldset: string;
         };
     };
-    disabled: {
+    readonly: {
         true: {
+            activator: string;
             fieldset: string;
-            label: string;
+            iconWrapper: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
+    hovered: {
+        true: {
             fieldset: string;
-            label: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
-}, {
-    label: string;
-    fieldset: string;
-    legend: string;
-}, import("tailwind-variants").TVReturnType<{
-    focused: {
+    opened: {
         true: {
+            icon: string;
             fieldset: string;
         };
     };
-    hovered: {
+    hasError: {
         true: {
             fieldset: string;
         };
     };
-    disabled: {
+    hasSuccess: {
         true: {
             fieldset: string;
-            label: string;
         };
     };
     active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
-            fieldset: string;
-            label: string;
+        true: {
+            highlighted: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
 }, {
-    label: string;
+    wrapper: string;
+    activator: string;
     fieldset: string;
-    legend: string;
-}, undefined, {
-    focused: {
+    value: string;
+    clear: string;
+    menu: string;
+    highlighted: string;
+    progress: string;
+    icon: string;
+    iconWrapper: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    dense: {
         true: {
-            fieldset: string;
+            activator: string;
         };
     };
-    hovered: {
+    disabled: {
         true: {
+            activator: string;
+            icon: string;
             fieldset: string;
         };
     };
-    disabled: {
+    readonly: {
         true: {
+            activator: string;
             fieldset: string;
-            label: string;
+            iconWrapper: string;
         };
     };
-    active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
+    hovered: {
+        true: {
             fieldset: string;
-            label: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
-}, {
-    label: string;
-    fieldset: string;
-    legend: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    focused: {
+    opened: {
         true: {
+            icon: string;
             fieldset: string;
         };
     };
-    hovered: {
+    hasError: {
         true: {
             fieldset: string;
         };
     };
-    disabled: {
+    hasSuccess: {
         true: {
             fieldset: string;
-            label: string;
         };
     };
     active: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-    validation: {
-        error: {
-            fieldset: string;
-            label: string;
-        };
-        success: {
-            fieldset: string;
-            label: string;
+        true: {
+            highlighted: string;
         };
     };
-    color: {
-        primary: {};
-        secondary: {};
-        error: {};
-        warning: {};
-        info: {};
-        success: {};
-    };
 }, {
-    label: string;
+    wrapper: string;
+    activator: string;
     fieldset: string;
-    legend: string;
-}>>>;
+    value: string;
+    clear: string;
+    menu: string;
+    highlighted: string;
+    progress: string;
+    icon: string;
+    iconWrapper: string;
+}>>;