@rotki/ui-library 2.15.0 → 2.16.0

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

@@ -0,0 +1,250 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/forms/text-input-styles.ts
+/**
+* Shared underline pseudo-element classes for default and filled variants.
+* Used by TextField and TextArea label slots.
+*/
+var underlinePseudo = [
+	"border-b border-black/[0.42] dark:border-white/[0.42]",
+	"after:content-[''] after:absolute after:bottom-0 after:left-0 after:block after:w-full",
+	"after:scale-x-0 after:border-b-2 after:mb-[-1px] after:transition-transform after:duration-300",
+	"after:border-black dark:after:border-white"
+].join(" ");
+/**
+* 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.
+*/
+var textInputBase = tv({
+	slots: {
+		label: "text-rui-text-secondary transition-all duration-75",
+		fieldset: [
+			"absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0",
+			"rounded pointer-events-none px-2 transition-all -mt-2",
+			"border border-black/[0.23]",
+			"dark:border-white/[0.23]"
+		].join(" "),
+		legend: "invisible text-xs truncate [max-width:calc(100%-1rem)] leading-[0]"
+	},
+	variants: {
+		focused: { true: { fieldset: "!border-2" } },
+		hovered: { true: { fieldset: "border-black dark:border-white" } },
+		disabled: { true: {
+			fieldset: "!border-dotted !border-black/[0.23] dark:!border-white/[0.23]",
+			label: "text-rui-text-disabled"
+		} },
+		active: { true: {} },
+		showLabel: { true: {} },
+		validation: {
+			error: {
+				fieldset: "!border-rui-error",
+				label: "!text-rui-error"
+			},
+			success: {
+				fieldset: "!border-rui-success",
+				label: "!text-rui-success"
+			}
+		},
+		color: {
+			primary: {},
+			secondary: {},
+			error: {},
+			warning: {},
+			info: {},
+			success: {}
+		}
+	},
+	compoundVariants: [
+		{
+			showLabel: true,
+			active: true,
+			class: { legend: "px-2" }
+		},
+		{
+			focused: true,
+			color: "primary",
+			class: { fieldset: "!border-rui-primary" }
+		},
+		{
+			focused: true,
+			color: "secondary",
+			class: { fieldset: "!border-rui-secondary" }
+		},
+		{
+			focused: true,
+			color: "error",
+			class: { fieldset: "!border-rui-error" }
+		},
+		{
+			focused: true,
+			color: "warning",
+			class: { fieldset: "!border-rui-warning" }
+		},
+		{
+			focused: true,
+			color: "info",
+			class: { fieldset: "!border-rui-info" }
+		},
+		{
+			focused: true,
+			color: "success",
+			class: { fieldset: "!border-rui-success" }
+		}
+	],
+	defaultVariants: { color: "primary" }
+});
+/**
+* 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`.
+*/
+var activatorStyles = tv({
+	extend: textInputBase,
+	slots: {
+		fieldset: "",
+		legend: "",
+		wrapper: "w-full inline-flex flex-col",
+		activator: [
+			"group relative inline-flex items-center w-full",
+			"outline-none focus:outline-none focus-within:outline-none cursor-pointer",
+			"min-h-14 pl-4 py-2 pr-8 rounded",
+			"m-0 transition-all text-body-1 text-left",
+			"dark:text-rui-text"
+		].join(" "),
+		label: ["text-rui-text-secondary [max-width:calc(100%-2.5rem)]", "block truncate transition-all duration-75"].join(" "),
+		value: "w-full block truncate transition-all duration-75",
+		clear: "ml-auto shrink-0 invisible group-hover:!visible",
+		menu: "overflow-y-auto max-h-60 min-w-[2.5rem]",
+		highlighted: "!bg-rui-grey-200 dark:!bg-rui-grey-800",
+		progress: "absolute left-0 bottom-0 w-full",
+		icon: "text-rui-text transition",
+		iconWrapper: "flex items-center justify-end absolute right-3 top-px bottom-0",
+		required: "text-rui-error"
+	},
+	variants: {
+		dense: { true: { activator: "py-1.5 min-h-10" } },
+		disabled: { true: { activator: "opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none" } },
+		readonly: { true: { activator: "opacity-80 pointer-events-none cursor-default bg-gray-50 dark:bg-white/10" } },
+		filled: { true: { activator: [
+			"!rounded-t !rounded-b-none !bg-black/[0.06]",
+			"!hover:bg-black/[0.09] !focus-within:bg-black/[0.09]",
+			"dark:!bg-white/[0.09]",
+			"dark:!hover:bg-white/[0.13] dark:!focus-within:bg-white/[0.13]",
+			underlinePseudo
+		].join(" ") } },
+		outlined: {
+			true: {
+				activator: "bg-white dark:bg-transparent border-none hover:border-none",
+				label: "absolute",
+				fieldset: "!mt-0 !h-full"
+			},
+			false: { activator: `!rounded-none ${underlinePseudo}` }
+		},
+		float: { true: { label: "-translate-y-2 top-0 text-xs px-1" } },
+		opened: { true: { icon: "rotate-180" } },
+		active: { true: { highlighted: "!bg-rui-grey-300 dark:!bg-rui-grey-700" } },
+		hasError: { true: {} },
+		hasSuccess: { true: {} }
+	},
+	compoundVariants: [
+		{
+			float: true,
+			class: { legend: "px-2" }
+		},
+		{
+			outlined: false,
+			opened: true,
+			class: { activator: "after:scale-x-100 after:border-rui-primary" }
+		},
+		{
+			outlined: false,
+			hasError: true,
+			class: { activator: "after:scale-x-100 after:!border-rui-error" }
+		},
+		{
+			outlined: false,
+			hasSuccess: true,
+			class: { activator: "after:scale-x-100 after:!border-rui-success" }
+		},
+		{
+			outlined: false,
+			disabled: true,
+			class: { activator: "dark:bg-white/10" }
+		},
+		{
+			filled: true,
+			disabled: true,
+			class: { activator: "bg-black/[0.03] dark:bg-white/[0.05]" }
+		},
+		{
+			outlined: true,
+			hovered: true,
+			class: { fieldset: "border-black dark:border-white" }
+		},
+		{
+			outlined: true,
+			opened: true,
+			class: {
+				fieldset: "!border-rui-primary !border-2",
+				label: "text-rui-primary"
+			}
+		},
+		{
+			outlined: true,
+			hasError: true,
+			class: {
+				fieldset: "!border-rui-error",
+				label: "!text-rui-error"
+			}
+		},
+		{
+			outlined: true,
+			hasSuccess: true,
+			class: {
+				fieldset: "!border-rui-success",
+				label: "!text-rui-success"
+			}
+		},
+		{
+			outlined: true,
+			disabled: true,
+			class: { fieldset: "!border-dotted !border-black/[0.23] dark:!border-white/[0.23]" }
+		},
+		{
+			float: true,
+			opened: true,
+			class: { label: "text-rui-primary" }
+		}
+	],
+	defaultVariants: {
+		filled: false,
+		outlined: false,
+		dense: false,
+		disabled: false,
+		readonly: false,
+		float: false,
+		opened: false
+	}
+});
+//#endregion
+export { activatorStyles, textInputBase, underlinePseudo };
+
+//# sourceMappingURL=text-input-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-input-styles.js","names":[],"sources":["../../../src/components/forms/text-input-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const TextInputVariant = {\n  default: 'default',\n  filled: 'filled',\n  outlined: 'outlined',\n} as const;\n\nexport type TextInputVariant = (typeof TextInputVariant)[keyof typeof TextInputVariant];\n\n/**\n * Shared underline pseudo-element classes for default and filled variants.\n * Used by TextField and TextArea label slots.\n */\nexport const underlinePseudo = [\n  'border-b border-black/[0.42] dark:border-white/[0.42]',\n  'after:content-[\\'\\'] after:absolute after:bottom-0 after:left-0 after:block after:w-full',\n  'after:scale-x-0 after:border-b-2 after:mb-[-1px] after:transition-transform after:duration-300',\n  'after:border-black dark:after:border-white',\n].join(' ');\n\n/**\n * Shared base tv() for all text-input-family components.\n * Extended by: TextField, TextArea, MenuSelect, AutoComplete, DateTimePicker.\n *\n * Provides the common core: floating label, fieldset/legend (outlined),\n * validation colors, disabled state, dark mode, and focus color.\n *\n * ## State approach (JS-driven for all 5 components)\n *\n * - `focused`: from useFocus (Group A) or computed from isOpen (Group B)\n * - `active`: focused || hasValue — drives label float\n * - `hovered`: mouseenter/mouseleave ref\n *\n * ## Legend content\n *\n * The legend's `after:content` uses CSS variable `--rui-legend`.\n * Bind via `:style=\"{ '--rui-legend': labelWithQuote }\"` on the legend element.\n */\nexport const textInputBase = tv({\n  slots: {\n    label: 'text-rui-text-secondary transition-all duration-75',\n    fieldset: [\n      'absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0',\n      'rounded pointer-events-none px-2 transition-all -mt-2',\n      'border border-black/[0.23]',\n      'dark:border-white/[0.23]',\n    ].join(' '),\n    legend: 'invisible text-xs truncate [max-width:calc(100%-1rem)] leading-[0]',\n  },\n  variants: {\n    focused: {\n      true: {\n        fieldset: '!border-2',\n      },\n    },\n    hovered: {\n      true: {\n        fieldset: 'border-black dark:border-white',\n      },\n    },\n    disabled: {\n      true: {\n        fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    active: {\n      true: {},\n    },\n    showLabel: {\n      true: {},\n    },\n    validation: {\n      error: {\n        fieldset: '!border-rui-error',\n        label: '!text-rui-error',\n      },\n      success: {\n        fieldset: '!border-rui-success',\n        label: '!text-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Legend padding only when label is floated (active + has label)\n    { showLabel: true, active: true, class: { legend: 'px-2' } },\n    // Focused + color → fieldset border takes the color\n    { focused: true, color: 'primary', class: { fieldset: '!border-rui-primary' } },\n    { focused: true, color: 'secondary', class: { fieldset: '!border-rui-secondary' } },\n    { focused: true, color: 'error', class: { fieldset: '!border-rui-error' } },\n    { focused: true, color: 'warning', class: { fieldset: '!border-rui-warning' } },\n    { focused: true, color: 'info', class: { fieldset: '!border-rui-info' } },\n    { focused: true, color: 'success', class: { fieldset: '!border-rui-success' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n  },\n});\n\n/**\n * Shared tv() styles for the activator-based components (Group B):\n * MenuSelect, AutoComplete, DateTimePicker.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes.\n * Never put a class in the base slot that a variant needs to override.\n *\n * State-driven via JS refs: `outlined`, `float` (open || hasValue),\n * `opened`, `disabled`, `readonly`, `dense`.\n */\nexport const activatorStyles = tv({\n  extend: textInputBase,\n  slots: {\n    // Re-declare base slots for type inference\n    fieldset: '',\n    legend: '',\n    wrapper: 'w-full inline-flex flex-col',\n    activator: [\n      'group relative inline-flex items-center w-full',\n      'outline-none focus:outline-none focus-within:outline-none cursor-pointer',\n      'min-h-14 pl-4 py-2 pr-8 rounded',\n      'm-0 transition-all text-body-1 text-left',\n      'dark:text-rui-text',\n    ].join(' '),\n    label: [\n      'text-rui-text-secondary [max-width:calc(100%-2.5rem)]',\n      'block truncate transition-all duration-75',\n    ].join(' '),\n    value: 'w-full block truncate transition-all duration-75',\n    clear: 'ml-auto shrink-0 invisible group-hover:!visible',\n    menu: 'overflow-y-auto max-h-60 min-w-[2.5rem]',\n    highlighted: '!bg-rui-grey-200 dark:!bg-rui-grey-800',\n    progress: 'absolute left-0 bottom-0 w-full',\n    icon: 'text-rui-text transition',\n    iconWrapper: 'flex items-center justify-end absolute right-3 top-px bottom-0',\n    required: 'text-rui-error',\n  },\n  variants: {\n    dense: {\n      true: {\n        activator: 'py-1.5 min-h-10',\n      },\n    },\n    disabled: {\n      true: {\n        activator: 'opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none',\n      },\n    },\n    readonly: {\n      true: {\n        activator: 'opacity-80 pointer-events-none cursor-default bg-gray-50 dark:bg-white/10',\n      },\n    },\n    filled: {\n      true: {\n        activator: [\n          '!rounded-t !rounded-b-none !bg-black/[0.06]',\n          '!hover:bg-black/[0.09] !focus-within:bg-black/[0.09]',\n          'dark:!bg-white/[0.09]',\n          'dark:!hover:bg-white/[0.13] dark:!focus-within:bg-white/[0.13]',\n          underlinePseudo,\n        ].join(' '),\n      },\n    },\n    outlined: {\n      true: {\n        activator: 'bg-white dark:bg-transparent border-none hover:border-none',\n        label: 'absolute',\n        fieldset: '!mt-0 !h-full',\n      },\n      false: {\n        activator: `!rounded-none ${underlinePseudo}`,\n      },\n    },\n    float: {\n      true: {\n        label: '-translate-y-2 top-0 text-xs px-1',\n      },\n    },\n    opened: {\n      true: {\n        icon: 'rotate-180',\n      },\n    },\n    active: {\n      true: {\n        highlighted: '!bg-rui-grey-300 dark:!bg-rui-grey-700',\n      },\n    },\n    hasError: {\n      true: {},\n    },\n    hasSuccess: {\n      true: {},\n    },\n  },\n  compoundVariants: [\n    // Legend padding when label is floated\n    { float: true, class: { legend: 'px-2' } },\n\n    // Non-outlined + opened → underline scales up\n    { outlined: false, opened: true, class: { activator: 'after:scale-x-100 after:border-rui-primary' } },\n\n    // Non-outlined + error → underline color\n    { outlined: false, hasError: true, class: { activator: 'after:scale-x-100 after:!border-rui-error' } },\n\n    // Non-outlined + success → underline color\n    { outlined: false, hasSuccess: true, class: { activator: 'after:scale-x-100 after:!border-rui-success' } },\n\n    // Non-outlined + disabled in dark mode\n    { outlined: false, disabled: true, class: { activator: 'dark:bg-white/10' } },\n\n    // Filled + disabled\n    { filled: true, disabled: true, class: { activator: 'bg-black/[0.03] dark:bg-white/[0.05]' } },\n\n    // Outlined + hovered → fieldset border\n    { outlined: true, hovered: true, class: { fieldset: 'border-black dark:border-white' } },\n\n    // Outlined + opened/focused → primary border\n    { outlined: true, opened: true, class: {\n      fieldset: '!border-rui-primary !border-2',\n      label: 'text-rui-primary',\n    } },\n\n    // Outlined + error → fieldset + label\n    { outlined: true, hasError: true, class: {\n      fieldset: '!border-rui-error',\n      label: '!text-rui-error',\n    } },\n    // Outlined + success → fieldset + label\n    { outlined: true, hasSuccess: true, class: {\n      fieldset: '!border-rui-success',\n      label: '!text-rui-success',\n    } },\n\n    // Outlined + disabled → dotted fieldset\n    { outlined: true, disabled: true, class: {\n      fieldset: '!border-dotted !border-black/[0.23] dark:!border-white/[0.23]',\n    } },\n\n    // Float + opened → label color\n    { float: true, opened: true, class: { label: 'text-rui-primary' } },\n  ],\n  defaultVariants: {\n    filled: false,\n    outlined: false,\n    dense: false,\n    disabled: false,\n    readonly: false,\n    float: false,\n    opened: false,\n  },\n});\n"],"mappings":";;;;;;AAcA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACD,CAAC,KAAK,IAAI;;;;;;;;;;;;;;;;;;;AAoBX,IAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,OAAO;EACP,UAAU;GACR;GACA;GACA;GACA;GACD,CAAC,KAAK,IAAI;EACX,QAAQ;EACT;CACD,UAAU;EACR,SAAS,EACP,MAAM,EACJ,UAAU,aACX,EACF;EACD,SAAS,EACP,MAAM,EACJ,UAAU,kCACX,EACF;EACD,UAAU,EACR,MAAM;GACJ,UAAU;GACV,OAAO;GACR,EACF;EACD,QAAQ,EACN,MAAM,EAAE,EACT;EACD,WAAW,EACT,MAAM,EAAE,EACT;EACD,YAAY;GACV,OAAO;IACL,UAAU;IACV,OAAO;IACR;GACD,SAAS;IACP,UAAU;IACV,OAAO;IACR;GACF;EACD,OAAO;GACL,SAAS,EAAE;GACX,WAAW,EAAE;GACb,OAAO,EAAE;GACT,SAAS,EAAE;GACX,MAAM,EAAE;GACR,SAAS,EAAE;GACZ;EACF;CACD,kBAAkB;EAEhB;GAAE,WAAW;GAAM,QAAQ;GAAM,OAAO,EAAE,QAAQ,QAAQ;GAAE;EAE5D;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,uBAAuB;GAAE;EAC/E;GAAE,SAAS;GAAM,OAAO;GAAa,OAAO,EAAE,UAAU,yBAAyB;GAAE;EACnF;GAAE,SAAS;GAAM,OAAO;GAAS,OAAO,EAAE,UAAU,qBAAqB;GAAE;EAC3E;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,uBAAuB;GAAE;EAC/E;GAAE,SAAS;GAAM,OAAO;GAAQ,OAAO,EAAE,UAAU,oBAAoB;GAAE;EACzE;GAAE,SAAS;GAAM,OAAO;GAAW,OAAO,EAAE,UAAU,uBAAuB;GAAE;EAChF;CACD,iBAAiB,EACf,OAAO,WACR;CACF,CAAC;;;;;;;;;;;AAYF,IAAa,kBAAkB,GAAG;CAChC,QAAQ;CACR,OAAO;EAEL,UAAU;EACV,QAAQ;EACR,SAAS;EACT,WAAW;GACT;GACA;GACA;GACA;GACA;GACD,CAAC,KAAK,IAAI;EACX,OAAO,CACL,yDACA,4CACD,CAAC,KAAK,IAAI;EACX,OAAO;EACP,OAAO;EACP,MAAM;EACN,aAAa;EACb,UAAU;EACV,MAAM;EACN,aAAa;EACb,UAAU;EACX;CACD,UAAU;EACR,OAAO,EACL,MAAM,EACJ,WAAW,mBACZ,EACF;EACD,UAAU,EACR,MAAM,EACJ,WAAW,sGACZ,EACF;EACD,UAAU,EACR,MAAM,EACJ,WAAW,6EACZ,EACF;EACD,QAAQ,EACN,MAAM,EACJ,WAAW;GACT;GACA;GACA;GACA;GACA;GACD,CAAC,KAAK,IAAI,EACZ,EACF;EACD,UAAU;GACR,MAAM;IACJ,WAAW;IACX,OAAO;IACP,UAAU;IACX;GACD,OAAO,EACL,WAAW,iBAAiB,mBAC7B;GACF;EACD,OAAO,EACL,MAAM,EACJ,OAAO,qCACR,EACF;EACD,QAAQ,EACN,MAAM,EACJ,MAAM,cACP,EACF;EACD,QAAQ,EACN,MAAM,EACJ,aAAa,0CACd,EACF;EACD,UAAU,EACR,MAAM,EAAE,EACT;EACD,YAAY,EACV,MAAM,EAAE,EACT;EACF;CACD,kBAAkB;EAEhB;GAAE,OAAO;GAAM,OAAO,EAAE,QAAQ,QAAQ;GAAE;EAG1C;GAAE,UAAU;GAAO,QAAQ;GAAM,OAAO,EAAE,WAAW,8CAA8C;GAAE;EAGrG;GAAE,UAAU;GAAO,UAAU;GAAM,OAAO,EAAE,WAAW,6CAA6C;GAAE;EAGtG;GAAE,UAAU;GAAO,YAAY;GAAM,OAAO,EAAE,WAAW,+CAA+C;GAAE;EAG1G;GAAE,UAAU;GAAO,UAAU;GAAM,OAAO,EAAE,WAAW,oBAAoB;GAAE;EAG7E;GAAE,QAAQ;GAAM,UAAU;GAAM,OAAO,EAAE,WAAW,wCAAwC;GAAE;EAG9F;GAAE,UAAU;GAAM,SAAS;GAAM,OAAO,EAAE,UAAU,kCAAkC;GAAE;EAGxF;GAAE,UAAU;GAAM,QAAQ;GAAM,OAAO;IACrC,UAAU;IACV,OAAO;IACR;GAAE;EAGH;GAAE,UAAU;GAAM,UAAU;GAAM,OAAO;IACvC,UAAU;IACV,OAAO;IACR;GAAE;EAEH;GAAE,UAAU;GAAM,YAAY;GAAM,OAAO;IACzC,UAAU;IACV,OAAO;IACR;GAAE;EAGH;GAAE,UAAU;GAAM,UAAU;GAAM,OAAO,EACvC,UAAU,iEACX;GAAE;EAGH;GAAE,OAAO;GAAM,QAAQ;GAAM,OAAO,EAAE,OAAO,oBAAoB;GAAE;EACpE;CACD,iBAAiB;EACf,QAAQ;EACR,UAAU;EACV,OAAO;EACP,UAAU;EACV,UAAU;EACV,OAAO;EACP,QAAQ;EACT;CACF,CAAC"}

package/dist/components/helpers/RuiFormTextDetail.js

@@ -0,0 +1,7 @@
+import RuiFormTextDetail_vue_vue_type_script_setup_true_lang_default from "./RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/helpers/RuiFormTextDetail.vue
+var RuiFormTextDetail_default = RuiFormTextDetail_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiFormTextDetail_default as default };
+
+//# sourceMappingURL=RuiFormTextDetail.js.map

package/dist/components/helpers/RuiFormTextDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiFormTextDetail.js","names":[],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-[1.5rem]\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      {{ hint }}\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":""}

package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,46 @@
+import { useFormTextDetail } from "../../utils/form-text-detail.js";
+import { TransitionGroup, createBlock, createCommentVNode, createElementBlock, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
+//#region src/components/helpers/RuiFormTextDetail.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: "error",
+	class: "text-rui-error text-caption"
+};
+var _hoisted_2 = {
+	key: "success",
+	class: "text-rui-success text-caption"
+};
+var _hoisted_3 = {
+	key: "hint",
+	class: "text-rui-text-secondary text-caption"
+};
+var RuiFormTextDetail_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RuiFormTextDetail",
+	props: {
+		errorMessages: { default: () => [] },
+		successMessages: { default: () => [] },
+		hint: { default: "" }
+	},
+	setup(__props) {
+		const { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(TransitionGroup, {
+				tag: "div",
+				class: "details min-h-[1.5rem]",
+				"enter-from-class": "opacity-0 -translate-y-2 h-0",
+				"enter-active-class": "transform transition",
+				"enter-to-class": "opacity-100 translate-y-0",
+				"leave-from-class": "opacity-100 -translate-y-2",
+				"leave-active-class": "transform transition",
+				"leave-to-class": "opacity-0 -translate-y-2 h-0",
+				appear: ""
+			}, {
+				default: withCtx(() => [unref(hasError) ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(unref(formattedErrorMessages)[0]), 1)) : unref(hasSuccess) ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(formattedSuccessMessages)[0]), 1)) : __props.hint ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.hint), 1)) : createCommentVNode("", true)]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { RuiFormTextDetail_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    () => errorMessages,\n    () => successMessages,\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-[1.5rem]\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      {{ hint }}\n    </div>\n  </TransitionGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,EAAE,wBAAwB,0BAA0B,UAAU,eAClE,wBACQ,QAAA,qBACA,QAAA,gBACP;;uBAID,YAgCkB,iBAAA;IA/BhB,KAAI;IACJ,OAAM;IACN,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,QAAA;;2BAQM,CALE,MAAA,SAAQ,IAAA,WAAA,EADhB,mBAMM,OANN,YAMM,gBADD,MAAA,uBAAsB,CAAA,GAAA,EAAA,EAAA,IAGd,MAAA,WAAU,IAAA,WAAA,EADvB,mBAMM,OANN,YAMM,gBADD,MAAA,yBAAwB,CAAA,GAAA,EAAA,EAAA,IAGhB,QAAA,QAAA,WAAA,EADb,mBAMM,OANN,YAMM,gBADD,QAAA,KAAI,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

package/dist/components/icons/RuiIcon.js

@@ -0,0 +1,7 @@
+import RuiIcon_vue_vue_type_script_setup_true_lang_default from "./RuiIcon.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/icons/RuiIcon.vue
+var RuiIcon_default = RuiIcon_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiIcon_default as default };
+
+//# sourceMappingURL=RuiIcon.js.map

package/dist/components/icons/RuiIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiIcon.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { useIcons } from '@/composables/icons';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size = 24, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst ui = computed<string>(() => iconStyles({ color }));\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\nconst components = computed<SvgComponent[] | undefined>(() => {\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    :class=\"ui\"\n    :height=\"size\"\n    :width=\"size\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":""}

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,58 @@
+import { isRuiIcon } from "../../icons/index.js";
+import { useIcons } from "../../composables/icons.js";
+import { tv } from "../../utils/tv.js";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, normalizeClass, openBlock, renderList, resolveDynamicComponent, unref } from "vue";
+//#region src/components/icons/RuiIcon.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["height", "width"];
+var RuiIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiIcon",
+	__name: "RuiIcon",
+	props: {
+		name: {},
+		size: { default: 24 },
+		color: {}
+	},
+	setup(__props) {
+		const { registeredIcons } = useIcons();
+		const iconStyles = tv({ variants: { color: {
+			primary: "text-rui-primary",
+			secondary: "text-rui-secondary",
+			error: "text-rui-error",
+			warning: "text-rui-warning",
+			info: "text-rui-info",
+			success: "text-rui-success"
+		} } });
+		const ui = computed(() => iconStyles({ color: __props.color }));
+		const isFill = computed(() => __props.name.endsWith("-fill"));
+		const components = computed(() => {
+			if (!isRuiIcon(__props.name)) console.warn(`icon ${__props.name} must be a valid RuiIcon`);
+			const found = registeredIcons[__props.name];
+			if (!found) console.error(`Icons "${__props.name}" not found. Make sure that you have register the icon when installing the RuiPlugin`);
+			return found;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("svg", {
+				"aria-hidden": "true",
+				class: normalizeClass(unref(ui)),
+				height: __props.size,
+				width: __props.size,
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg"
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(components), (component, index) => {
+				return openBlock(), createBlock(resolveDynamicComponent(component[0]), mergeProps({ key: index }, { ref_for: true }, component[1], {
+					fill: !unref(isFill) ? "none" : "currentColor",
+					stroke: !unref(isFill) ? "currentColor" : "none",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					"fill-rule": "evenodd",
+					"clip-rule": "evenodd"
+				}), null, 16, ["fill", "stroke"]);
+			}), 128))], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RuiIcon_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiIcon.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { useIcons } from '@/composables/icons';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size = 24, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst ui = computed<string>(() => iconStyles({ color }));\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\nconst components = computed<SvgComponent[] | undefined>(() => {\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    :class=\"ui\"\n    :height=\"size\"\n    :width=\"size\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAkBA,MAAM,EAAE,oBAAoB,UAAU;EAItC,MAAM,aAAa,GAAG,EACpB,UAAU,EACR,OAAO;GACL,SAAS;GACT,WAAW;GACX,OAAO;GACP,SAAS;GACT,MAAM;GACN,SAAS;GACV,EACF,EACF,CAAC;EAEF,MAAM,KAAK,eAAuB,WAAW,EAAE,OAAI,QAAA,OAAG,CAAC,CAAC;EAExD,MAAM,SAAS,eAAwB,QAAA,KAAK,SAAS,QAAQ,CAAC;EAE9D,MAAM,aAAa,eAA2C;AAC5D,OAAI,CAAC,UAAU,QAAA,KAAK,CAClB,SAAQ,KAAK,QAAQ,QAAA,KAAK,0BAA0B;GAEtD,MAAM,QAAQ,gBAAgB,QAAA;AAE9B,OAAI,CAAC,MACH,SAAQ,MACN,UAAU,QAAA,KAAK,sFAChB;AAEH,UAAO;IACP;;uBAIA,mBAqBM,OAAA;IApBJ,eAAY;IACX,OAAK,eAAE,MAAA,GAAE,CAAA;IACT,QAAQ,QAAA;IACR,OAAO,QAAA;IACR,SAAQ;IACR,OAAM;yBAEN,mBAYE,UAAA,MAAA,WAV6B,MAAA,WAAU,GAA/B,WAAW,UAAK;wBAF1B,YAYE,wBAXK,UAAS,GAAA,EADhB,WAYE,EATC,KAAK,OAAK,EAAA,EAAA,SAAA,MAAA,EACH,UAAS,IAAA;KAChB,MAAI,CAAG,MAAA,OAAM,GAAA,SAAA;KACb,QAAM,CAAG,MAAA,OAAM,GAAA,iBAAA;KAChB,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,aAAU;KACV,aAAU"}

package/dist/components/index.d.ts

@@ -1,47 +1,47 @@
-import type { TableColumn as DataTableColumn, GroupKeys as DataTableGroupKeys, SortColumn as DataTableSortColumn, TableSortData as DataTableSortData, GroupData } from '../components/tables/RuiTableHead.vue.js';
-import RuiAccordion, { type AccordionProps } from '../components/accordions/accordion/RuiAccordion.vue.js';
-import RuiAccordions, { type Props as AccordionsProps } from '../components/accordions/accordions/RuiAccordions.vue.js';
-import RuiAlert, { type Props as AlertProps } from '../components/alerts/RuiAlert.vue.js';
-import RuiButtonGroup, { type Props as ButtonGroupProps } from '../components/buttons/button-group/RuiButtonGroup.vue.js';
-import RuiButton, { type Props as ButtonProps } from '../components/buttons/button/RuiButton.vue.js';
-import RuiCalendar, { type CalendarProps } from '../components/calendar/RuiCalendar.vue.js';
-import RuiCard, { type Props as CardProps } from '../components/cards/RuiCard.vue.js';
-import RuiCardHeader, { type Props as CardHeaderProps } from '../components/cards/RuiCardHeader.vue.js';
-import RuiChip, { type Props as ChipProps } from '../components/chips/RuiChip.vue.js';
-import RuiColorPicker from '../components/color-picker/RuiColorPicker.vue.js';
-import RuiDateTimePicker, { type RuiDateTimePickerProps } from '../components/date-time-picker/RuiDateTimePicker.vue.js';
-import RuiDivider, { type Props as DividerProps } from '../components/divider/RuiDivider.vue.js';
-import RuiAutoComplete, { type AutoCompleteProps } from '../components/forms/auto-complete/RuiAutoComplete.vue.js';
-import RuiCheckbox, { type Props as CheckboxProps } from '../components/forms/checkbox/RuiCheckbox.vue.js';
-import RuiRadioGroup, { type Props as RadioGroupProps } from '../components/forms/radio-button/radio-group/RuiRadioGroup.vue.js';
-import RuiRadio, { type RadioProps } from '../components/forms/radio-button/radio/RuiRadio.vue.js';
-import RuiRevealableTextField, { type Props as RevealableTextFieldProps } from '../components/forms/revealable-text-field/RuiRevealableTextField.vue.js';
-import RuiMenuSelect, { type Props as MenuSelectProps } from '../components/forms/select/RuiMenuSelect.vue.js';
-import RuiSimpleSelect, { type Props as SimpleSelectProps } from '../components/forms/select/RuiSimpleSelect.vue.js';
-import RuiSlider, { type Props as SliderProps } from '../components/forms/slider/RuiSlider.vue.js';
-import RuiSwitch, { type Props as SwitchProps } from '../components/forms/switch/RuiSwitch.vue.js';
-import RuiTextArea, { type Props as TextAreaProps } from '../components/forms/text-area/RuiTextArea.vue.js';
-import RuiTextField, { type TextFieldProps } from '../components/forms/text-field/RuiTextField.vue.js';
-import RuiIcon, { type Props as IconProps } from '../components/icons/RuiIcon.vue.js';
-import RuiSkeletonLoader, { type Props as SkeletonLoaderProps } from '../components/loaders/RuiSkeletonLoader.vue.js';
-import RuiLogo, { type Props as LogoProps } from '../components/logos/RuiLogo.vue.js';
-import RuiBadge, { type Props as BadgeProps } from '../components/overlays/badge/RuiBadge.vue.js';
-import RuiBottomSheet, { type BottomSheetProps } from '../components/overlays/bottom-sheet/RuiBottomSheet.vue.js';
-import RuiDialog, { type DialogProps } from '../components/overlays/dialog/RuiDialog.vue.js';
-import RuiMenu, { type MenuProps } from '../components/overlays/menu/RuiMenu.vue.js';
-import RuiNavigationDrawer, { type NavigationDrawerProps } from '../components/overlays/navigation-drawer/RuiNavigationDrawer.vue.js';
-import RuiNotification, { type NotificationProps } from '../components/overlays/notification/RuiNotification.vue.js';
-import RuiTooltip, { type Props as TooltipProps } from '../components/overlays/tooltip/RuiTooltip.vue.js';
-import RuiProgress, { type Props as ProgressProps } from '../components/progress/RuiProgress.vue.js';
-import RuiFooterStepper, { type Props as FooterStepperProps } from '../components/steppers/RuiFooterStepper.vue.js';
-import RuiStepper, { type Props as StepperProps } from '../components/steppers/RuiStepper.vue.js';
-import RuiDataTable, { type TableOptions as DataTableOptions, type Props as DataTableProps } from '../components/tables/RuiDataTable.vue.js';
-import RuiTableRowExpander, { type Props as ExpandButtonProps } from '../components/tables/RuiExpandButton.vue.js';
-import RuiTablePagination, { type TablePaginationData, type Props as TablePaginationProps } from '../components/tables/RuiTablePagination.vue.js';
-import RuiTabItem, { type Props as TabItemProps } from '../components/tabs/tab-item/RuiTabItem.vue.js';
-import RuiTabItems from '../components/tabs/tab-items/RuiTabItems.vue.js';
-import RuiTab, { type Props as TabProps } from '../components/tabs/tab/RuiTab.vue.js';
-import RuiTabs, { type Props as TabsProps } from '../components/tabs/tabs/RuiTabs.vue.js';
-import RuiTimePicker, { type RuiTimePickerProps } from '../components/time-picker/RuiTimePicker.vue.js';
-export type { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxProps, ChipProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FooterStepperProps, GroupData, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiDateTimePickerProps, RuiTimePickerProps, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TablePaginationData, TablePaginationProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
+import type { TableColumn as DataTableColumn, GroupKeys as DataTableGroupKeys, SortColumn as DataTableSortColumn, TableSortData as DataTableSortData, GroupData } from '../components/tables/RuiTableHead.vue';
+import RuiAccordion, { type AccordionProps, type RuiAccordionClassNames } from '../components/accordions/accordion/RuiAccordion.vue';
+import RuiAccordions, { type Props as AccordionsProps } from '../components/accordions/accordions/RuiAccordions.vue';
+import RuiAlert, { type Props as AlertProps } from '../components/alerts/RuiAlert.vue';
+import RuiButtonGroup, { type Props as ButtonGroupProps } from '../components/buttons/button-group/RuiButtonGroup.vue';
+import RuiButton, { type Props as ButtonProps } from '../components/buttons/button/RuiButton.vue';
+import RuiCalendar, { type CalendarProps } from '../components/calendar/RuiCalendar.vue';
+import RuiCard, { type Props as CardProps, type RuiCardClassNames } from '../components/cards/RuiCard.vue';
+import RuiCardHeader, { type Props as CardHeaderProps } from '../components/cards/RuiCardHeader.vue';
+import RuiChip, { type Props as ChipProps, type RuiChipClassNames } from '../components/chips/RuiChip.vue';
+import RuiColorPicker from '../components/color-picker/RuiColorPicker.vue';
+import RuiDateTimePicker, { type RuiDateTimePickerProps } from '../components/date-time-picker/RuiDateTimePicker.vue';
+import RuiDivider, { type Props as DividerProps } from '../components/divider/RuiDivider.vue';
+import RuiAutoComplete, { type AutoCompleteProps, type RuiAutoCompleteClassNames } from '../components/forms/auto-complete/RuiAutoComplete.vue';
+import RuiCheckbox, { type Props as CheckboxProps } from '../components/forms/checkbox/RuiCheckbox.vue';
+import RuiRadioGroup, { type Props as RadioGroupProps } from '../components/forms/radio-button/radio-group/RuiRadioGroup.vue';
+import RuiRadio, { type RadioProps } from '../components/forms/radio-button/radio/RuiRadio.vue';
+import RuiRevealableTextField, { type Props as RevealableTextFieldProps } from '../components/forms/revealable-text-field/RuiRevealableTextField.vue';
+import RuiMenuSelect, { type MenuSelectProps, type RuiMenuSelectClassNames } from '../components/forms/select/RuiMenuSelect.vue';
+import RuiSimpleSelect, { type Props as SimpleSelectProps } from '../components/forms/select/RuiSimpleSelect.vue';
+import RuiSlider, { type RuiSliderClassNames, type Props as SliderProps } from '../components/forms/slider/RuiSlider.vue';
+import RuiSwitch, { type Props as SwitchProps } from '../components/forms/switch/RuiSwitch.vue';
+import RuiTextArea, { type TextAreaProps } from '../components/forms/text-area/RuiTextArea.vue';
+import RuiTextField, { type TextFieldProps } from '../components/forms/text-field/RuiTextField.vue';
+import RuiIcon, { type Props as IconProps } from '../components/icons/RuiIcon.vue';
+import RuiSkeletonLoader, { type Props as SkeletonLoaderProps } from '../components/loaders/RuiSkeletonLoader.vue';
+import RuiLogo, { type Props as LogoProps } from '../components/logos/RuiLogo.vue';
+import RuiBadge, { type Props as BadgeProps } from '../components/overlays/badge/RuiBadge.vue';
+import RuiBottomSheet, { type BottomSheetProps } from '../components/overlays/bottom-sheet/RuiBottomSheet.vue';
+import RuiDialog, { type DialogProps, type RuiDialogClassNames } from '../components/overlays/dialog/RuiDialog.vue';
+import RuiMenu, { type MenuProps, type RuiMenuClassNames } from '../components/overlays/menu/RuiMenu.vue';
+import RuiNavigationDrawer, { type NavigationDrawerProps, type RuiNavigationDrawerClassNames } from '../components/overlays/navigation-drawer/RuiNavigationDrawer.vue';
+import RuiNotification, { type NotificationProps } from '../components/overlays/notification/RuiNotification.vue';
+import RuiTooltip, { type RuiTooltipClassNames, type Props as TooltipProps } from '../components/overlays/tooltip/RuiTooltip.vue';
+import RuiProgress, { type Props as ProgressProps } from '../components/progress/RuiProgress.vue';
+import RuiFooterStepper, { type Props as FooterStepperProps } from '../components/steppers/RuiFooterStepper.vue';
+import RuiStepper, { type RuiStepperClassNames, type Props as StepperProps } from '../components/steppers/RuiStepper.vue';
+import RuiDataTable, { type TableOptions as DataTableOptions, type Props as DataTableProps } from '../components/tables/RuiDataTable.vue';
+import RuiTableRowExpander, { type Props as ExpandButtonProps } from '../components/tables/RuiExpandButton.vue';
+import RuiTablePagination, { type TablePaginationData, type Props as TablePaginationProps } from '../components/tables/RuiTablePagination.vue';
+import RuiTabItem, { type Props as TabItemProps } from '../components/tabs/tab-item/RuiTabItem.vue';
+import RuiTabItems from '../components/tabs/tab-items/RuiTabItems.vue';
+import RuiTab, { type RuiTabClassNames, type Props as TabProps } from '../components/tabs/tab/RuiTab.vue';
+import RuiTabs, { type Props as TabsProps } from '../components/tabs/tabs/RuiTabs.vue';
+import RuiTimePicker, { type RuiTimePickerProps } from '../components/time-picker/RuiTimePicker.vue';
+export type { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxProps, ChipProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FooterStepperProps, GroupData, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiAccordionClassNames, RuiAutoCompleteClassNames, RuiCardClassNames, RuiChipClassNames, RuiDateTimePickerProps, RuiDialogClassNames, RuiMenuClassNames, RuiMenuSelectClassNames, RuiNavigationDrawerClassNames, RuiSliderClassNames, RuiStepperClassNames, RuiTabClassNames, RuiTimePickerProps, RuiTooltipClassNames, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TablePaginationData, TablePaginationProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
 export { RuiAccordion, RuiAccordions, RuiAlert, RuiAutoComplete, RuiBadge, RuiBottomSheet, RuiButton, RuiButtonGroup, RuiCalendar, RuiCard, RuiCardHeader, RuiCheckbox, RuiChip, RuiColorPicker, RuiDataTable, RuiDateTimePicker, RuiDialog, RuiDivider, RuiFooterStepper, RuiIcon, RuiLogo, RuiMenu, RuiMenuSelect, RuiNavigationDrawer, RuiNotification, RuiProgress, RuiRadio, RuiRadioGroup, RuiRevealableTextField, RuiSimpleSelect, RuiSkeletonLoader, RuiSlider, RuiStepper, RuiSwitch, RuiTab, RuiTabItem, RuiTabItems, RuiTablePagination, RuiTableRowExpander, RuiTabs, RuiTextArea, RuiTextField, RuiTimePicker, RuiTooltip, };