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

package/dist/components/forms/select/RuiSimpleSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSimpleSelect.js","names":[],"sources":["../../../../src/components/forms/select/RuiSimpleSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  options: string[] | number[];\n  disabled?: boolean;\n  label?: string;\n  name?: string;\n  variant?: 'default' | 'outlined';\n}\n\ndefineOptions({\n  name: 'RuiSimpleSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string | number>({ required: true });\n\nconst { options, disabled = false, label, name = '', variant: selectVariant = 'default' } = defineProps<Props>();\n\nconst selectClass = tv({\n  base: [\n    'outline-none focus:outline-none appearance-none cursor-pointer pl-2 py-1 pr-8 rounded',\n    'm-0 w-full transition [font:inherit]',\n    'bg-white hover:bg-gray-50',\n    'dark:bg-transparent dark:hover:bg-white/10 dark:text-rui-text-disabled',\n    'disabled:bg-black/[.12] disabled:text-rui-text-disabled disabled:active:text-rui-text-disabled disabled:cursor-default',\n    'dark:disabled:bg-white/10',\n  ].join(' '),\n  variants: {\n    variant: {\n      default: '',\n      outlined: 'border border-rui-text-disabled disabled:border-transparent dark:border-rui-text-disabled',\n    },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\nconst ui = computed<string>(() => selectClass({ variant: selectVariant }));\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex\"\n    v-bind=\"$attrs\"\n  >\n    <select\n      v-model=\"modelValue\"\n      :class=\"ui\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :aria-label=\"label\"\n      data-id=\"select\"\n    >\n      <option\n        v-for=\"option in options\"\n        :key=\"option\"\n        :value=\"option\"\n      >\n        {{ option }}\n      </option>\n    </select>\n    <span\n      class=\"flex items-center justify-end absolute right-1 top-px bottom-0 pointer-events-none\"\n      aria-hidden=\"true\"\n    >\n      <RuiIcon\n        class=\"text-rui-text-disabled pointer-events-none\"\n        name=\"lu-chevron-down\"\n        size=\"16\"\n      />\n    </span>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiSimpleSelect.js","names":[],"sources":["../../../../src/components/forms/select/RuiSimpleSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  options: string[] | number[];\n  disabled?: boolean;\n  label?: string;\n  name?: string;\n}\n\ndefineOptions({\n  name: 'RuiSimpleSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string | number>({ required: true });\n\nconst { options, disabled = false, label, name = '' } = defineProps<Props>();\n\n/** The native select dressed as the other fields: a 36px bordered box with their hover, focus and disabled looks. */\nconst selectClass = tv({\n  base: [\n    'appearance-none cursor-pointer m-0 w-full h-9 pl-3 pr-8 rounded-rui-control [font:inherit] text-sm text-rui-text',\n    'border border-rui-outline bg-transparent transition-colors',\n    'hover:border-rui-neutral-500 dark:hover:border-rui-neutral-400',\n    'outline-hidden focus-visible:border-rui-primary focus-visible:ring-3 focus-visible:ring-rui-primary/20',\n    'disabled:cursor-default disabled:border-rui-divider disabled:bg-rui-neutral-50 disabled:text-rui-text-disabled',\n    'dark:disabled:bg-rui-neutral-900',\n  ].join(' '),\n});\n\nconst ui = computed<string>(() => selectClass());\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex\"\n    v-bind=\"$attrs\"\n  >\n    <select\n      v-model=\"modelValue\"\n      :class=\"ui\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :aria-label=\"label\"\n      data-id=\"select\"\n    >\n      <option\n        v-for=\"option in options\"\n        :key=\"option\"\n        :value=\"option\"\n      >\n        {{ option }}\n      </option>\n    </select>\n    <span\n      class=\"flex items-center justify-end absolute right-3 inset-y-0 pointer-events-none\"\n      aria-hidden=\"true\"\n    >\n      <RuiIcon\n        class=\"text-rui-text-secondary pointer-events-none\"\n        name=\"lu-chevron-down\"\n        size=\"16\"\n      />\n    </span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/select/RuiSimpleSelect.vue.d.ts

@@ -3,7 +3,6 @@ export interface Props {
     disabled?: boolean;
     label?: string;
     name?: string;
-    variant?: 'default' | 'outlined';
 }
 type __VLS_Props = Props;
 type __VLS_ModelProps = {

package/dist/components/forms/select/RuiSimpleSelect.vue_vue_type_script_setup_true_lang.js

@@ -9,7 +9,7 @@ var _hoisted_1 = [
 ];
 var _hoisted_2 = ["value"];
 var _hoisted_3 = {
-	class: "flex items-center justify-end absolute right-1 top-px bottom-0 pointer-events-none",
+	class: "flex items-center justify-end absolute right-3 inset-y-0 pointer-events-none",
 	"aria-hidden": "true"
 };
 var RuiSimpleSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -23,8 +23,7 @@ var RuiSimpleSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			default: false
 		},
 		label: {},
-		name: { default: "" },
-		variant: { default: "default" }
+		name: { default: "" }
 	}, {
 		"modelValue": { required: true },
 		"modelModifiers": {}
@@ -32,22 +31,16 @@ var RuiSimpleSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
-		const selectClass = tv({
-			base: [
-				"outline-none focus:outline-none appearance-none cursor-pointer pl-2 py-1 pr-8 rounded",
-				"m-0 w-full transition [font:inherit]",
-				"bg-white hover:bg-gray-50",
-				"dark:bg-transparent dark:hover:bg-white/10 dark:text-rui-text-disabled",
-				"disabled:bg-black/[.12] disabled:text-rui-text-disabled disabled:active:text-rui-text-disabled disabled:cursor-default",
-				"dark:disabled:bg-white/10"
-			].join(" "),
-			variants: { variant: {
-				default: "",
-				outlined: "border border-rui-text-disabled disabled:border-transparent dark:border-rui-text-disabled"
-			} },
-			defaultVariants: { variant: "default" }
-		});
-		const ui = computed(() => selectClass({ variant: __props.variant }));
+		/** The native select dressed as the other fields: a 36px bordered box with their hover, focus and disabled looks. */
+		const selectClass = tv({ base: [
+			"appearance-none cursor-pointer m-0 w-full h-9 pl-3 pr-8 rounded-rui-control [font:inherit] text-sm text-rui-text",
+			"border border-rui-outline bg-transparent transition-colors",
+			"hover:border-rui-neutral-500 dark:hover:border-rui-neutral-400",
+			"outline-hidden focus-visible:border-rui-primary focus-visible:ring-3 focus-visible:ring-rui-primary/20",
+			"disabled:cursor-default disabled:border-rui-divider disabled:bg-rui-neutral-50 disabled:text-rui-text-disabled",
+			"dark:disabled:bg-rui-neutral-900"
+		].join(" ") });
+		const ui = computed(() => selectClass());
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ class: "relative inline-flex" }, _ctx.$attrs), [withDirectives(createElementVNode("select", {
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
@@ -62,7 +55,7 @@ var RuiSimpleSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					value: option
 				}, toDisplayString(option), 9, _hoisted_2);
 			}), 128))], 10, _hoisted_1), [[vModelSelect, modelValue.value]]), createElementVNode("span", _hoisted_3, [createVNode(RuiIcon_default, {
-				class: "text-rui-text-disabled pointer-events-none",
+				class: "text-rui-text-secondary pointer-events-none",
 				name: "lu-chevron-down",
 				size: "16"
 			})])], 16);

package/dist/components/forms/select/RuiSimpleSelect.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSimpleSelect.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/select/RuiSimpleSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  options: string[] | number[];\n  disabled?: boolean;\n  label?: string;\n  name?: string;\n  variant?: 'default' | 'outlined';\n}\n\ndefineOptions({\n  name: 'RuiSimpleSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string | number>({ required: true });\n\nconst { options, disabled = false, label, name = '', variant: selectVariant = 'default' } = defineProps<Props>();\n\nconst selectClass = tv({\n  base: [\n    'outline-none focus:outline-none appearance-none cursor-pointer pl-2 py-1 pr-8 rounded',\n    'm-0 w-full transition [font:inherit]',\n    'bg-white hover:bg-gray-50',\n    'dark:bg-transparent dark:hover:bg-white/10 dark:text-rui-text-disabled',\n    'disabled:bg-black/[.12] disabled:text-rui-text-disabled disabled:active:text-rui-text-disabled disabled:cursor-default',\n    'dark:disabled:bg-white/10',\n  ].join(' '),\n  variants: {\n    variant: {\n      default: '',\n      outlined: 'border border-rui-text-disabled disabled:border-transparent dark:border-rui-text-disabled',\n    },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\nconst ui = computed<string>(() => selectClass({ variant: selectVariant }));\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex\"\n    v-bind=\"$attrs\"\n  >\n    <select\n      v-model=\"modelValue\"\n      :class=\"ui\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :aria-label=\"label\"\n      data-id=\"select\"\n    >\n      <option\n        v-for=\"option in options\"\n        :key=\"option\"\n        :value=\"option\"\n      >\n        {{ option }}\n      </option>\n    </select>\n    <span\n      class=\"flex items-center justify-end absolute right-1 top-px bottom-0 pointer-events-none\"\n      aria-hidden=\"true\"\n    >\n      <RuiIcon\n        class=\"text-rui-text-disabled pointer-events-none\"\n        name=\"lu-chevron-down\"\n        size=\"16\"\n      />\n    </span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,aAAa,SAA4B,SAAA,YAAmB;EAIlE,MAAM,cAAc,GAAG;GACrB,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;GACF,CAAC,CAAC,KAAK,GAAG;GACV,UAAU,EACR,SAAS;IACP,SAAS;IACT,UAAU;GACZ,EACF;GACA,iBAAiB,EAAE,SAAS,UAAU;EACxC,CAAC;EAED,MAAM,KAAK,eAAuB,YAAY,EAAE,SAAS,QAAA,QAAc,CAAC,CAAC;;GAIvE,OAAA,UAAA,GAAA,mBA8BM,OA9BN,WA8BM,EA7BJ,OAAM,uBAAsB,GACpBA,KAAAA,MAAM,GAAA,CAEd,eAAA,mBAeS,UAAA;IAdE,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,QAAA;IAClB,OAAK,eAAE,MAAA,EAAA,CAAE;IACT,MAAM,QAAA;IACN,UAAU,QAAA;IACV,cAAY,QAAA;IACb,WAAQ;GAER,GAAA,EAAA,UAAA,IAAA,GAAA,mBAMS,UAAA,MAAA,WALU,QAAA,UAAV,WAAM;IADf,OAAA,UAAA,GAAA,mBAMS,UAAA;KAJN,KAAK;KACL,OAAO;IAEL,GAAA,gBAAA,MAAM,GAAA,GAAA,UAAA;GAZF,CAAA,GAAA,GAAA,EAAA,GAAA,IAAA,UAAA,GAAA,CAAA,CAAA,cAAA,WAAA,KAAU,CAAA,CAAA,GAerB,mBASO,QATP,YASO,CALL,YAIE,iBAAA;IAHA,OAAM;IACN,MAAK;IACL,MAAK"}
+{"version":3,"file":"RuiSimpleSelect.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/select/RuiSimpleSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  options: string[] | number[];\n  disabled?: boolean;\n  label?: string;\n  name?: string;\n}\n\ndefineOptions({\n  name: 'RuiSimpleSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string | number>({ required: true });\n\nconst { options, disabled = false, label, name = '' } = defineProps<Props>();\n\n/** The native select dressed as the other fields: a 36px bordered box with their hover, focus and disabled looks. */\nconst selectClass = tv({\n  base: [\n    'appearance-none cursor-pointer m-0 w-full h-9 pl-3 pr-8 rounded-rui-control [font:inherit] text-sm text-rui-text',\n    'border border-rui-outline bg-transparent transition-colors',\n    'hover:border-rui-neutral-500 dark:hover:border-rui-neutral-400',\n    'outline-hidden focus-visible:border-rui-primary focus-visible:ring-3 focus-visible:ring-rui-primary/20',\n    'disabled:cursor-default disabled:border-rui-divider disabled:bg-rui-neutral-50 disabled:text-rui-text-disabled',\n    'dark:disabled:bg-rui-neutral-900',\n  ].join(' '),\n});\n\nconst ui = computed<string>(() => selectClass());\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex\"\n    v-bind=\"$attrs\"\n  >\n    <select\n      v-model=\"modelValue\"\n      :class=\"ui\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :aria-label=\"label\"\n      data-id=\"select\"\n    >\n      <option\n        v-for=\"option in options\"\n        :key=\"option\"\n        :value=\"option\"\n      >\n        {{ option }}\n      </option>\n    </select>\n    <span\n      class=\"flex items-center justify-end absolute right-3 inset-y-0 pointer-events-none\"\n      aria-hidden=\"true\"\n    >\n      <RuiIcon\n        class=\"text-rui-text-secondary pointer-events-none\"\n        name=\"lu-chevron-down\"\n        size=\"16\"\n      />\n    </span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,aAAa,SAA4B,SAAA,YAAmB;;EAKlE,MAAM,cAAc,GAAG,EACrB,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG,EACZ,CAAC;EAED,MAAM,KAAK,eAAuB,YAAY,CAAC;;GAI7C,OAAA,UAAA,GAAA,mBA8BM,OA9BN,WA8BM,EA7BJ,OAAM,uBAAsB,GACpBA,KAAAA,MAAM,GAAA,CAEd,eAAA,mBAeS,UAAA;IAdE,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,QAAA;IAClB,OAAK,eAAE,MAAA,EAAA,CAAE;IACT,MAAM,QAAA;IACN,UAAU,QAAA;IACV,cAAY,QAAA;IACb,WAAQ;GAER,GAAA,EAAA,UAAA,IAAA,GAAA,mBAMS,UAAA,MAAA,WALU,QAAA,UAAV,WAAM;IADf,OAAA,UAAA,GAAA,mBAMS,UAAA;KAJN,KAAK;KACL,OAAO;IAEL,GAAA,gBAAA,MAAM,GAAA,GAAA,UAAA;GAZF,CAAA,GAAA,GAAA,EAAA,GAAA,IAAA,UAAA,GAAA,CAAA,CAAA,cAAA,WAAA,KAAU,CAAA,CAAA,GAerB,mBASO,QATP,YASO,CALL,YAIE,iBAAA;IAHA,OAAM;IACN,MAAK;IACL,MAAK"}

package/dist/components/forms/select/menu-select-styles.d.ts

@@ -1,114 +1,78 @@
-import { type TextInputVariant } from '../text-input-styles.js';
-export type MenuSelectVariant = TextInputVariant;
-export declare const menuSelectStyles: import("tailwind-variants").TVReturnType<{
-    filled: {
-        true: {};
-    };
-}, undefined, undefined, {
+export declare const menuSelectStyles: import("tailwind-variants").TVReturnType<{} | {
     dense: {
-        true: {
-            activator: string;
-        };
+        true: import("tailwind-variants").ClassValue | {};
     };
     disabled: {
-        true: {
-            activator: string;
-        };
+        true: import("tailwind-variants").ClassValue | {};
     };
     readonly: {
+        true: import("tailwind-variants").ClassValue | {};
+    };
+    hovered: {
+        true: import("tailwind-variants").ClassValue | {};
+    };
+    opened: {
+        true: import("tailwind-variants").ClassValue | {};
+    };
+    hasError: {
+        true: import("tailwind-variants").ClassValue | {};
+    };
+    hasSuccess: {
+        true: import("tailwind-variants").ClassValue | {};
+    };
+    active: {
+        true: import("tailwind-variants").ClassValue | {};
+    };
+}, undefined, undefined, {
+    dense: {
         true: {
             activator: string;
         };
     };
-    filled: {
+    disabled: {
         true: {
             activator: string;
+            icon: string;
+            fieldset: string;
         };
     };
-    outlined: {
+    readonly: {
         true: {
             activator: string;
-            label: string;
             fieldset: string;
-        };
-        false: {
-            activator: string;
+            iconWrapper: string;
         };
     };
-    float: {
+    hovered: {
         true: {
-            label: string;
+            fieldset: string;
         };
     };
     opened: {
         true: {
             icon: string;
-        };
-    };
-    active: {
-        true: {
-            highlighted: string;
-        };
-    };
-    hasError: {
-        true: {};
-    };
-    hasSuccess: {
-        true: {};
-    };
-    hovered: {
-        true: {};
-    };
-    showLabel: {
-        true: {};
-    };
-} & {
-    focused: {
-        true: {
             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: {};
-    };
 }, {
-    fieldset: string;
-    legend: string;
     wrapper: string;
     activator: string;
-    label: string;
+    fieldset: string;
     value: string;
     clear: string;
     menu: string;
@@ -116,11 +80,6 @@ export declare const menuSelectStyles: import("tailwind-variants").TVReturnType<
     progress: string;
     icon: string;
     iconWrapper: string;
-    required: string;
-} & {
-    label: string;
-    fieldset: string;
-    legend: string;
 }, import("tailwind-variants").TVReturnType<{
     dense: {
         true: {
@@ -130,36 +89,36 @@ export declare const menuSelectStyles: 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: {
@@ -167,24 +126,10 @@ export declare const menuSelectStyles: 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;
@@ -192,185 +137,118 @@ export declare const menuSelectStyles: 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;
+}>>>;

package/dist/components/forms/select/menu-select-styles.js

@@ -1,10 +1,7 @@
 import { tv } from "../../../utils/tv.js";
 import { activatorStyles } from "../text-input-styles.js";
 //#region src/components/forms/select/menu-select-styles.ts
-var menuSelectStyles = tv({
-	extend: activatorStyles,
-	variants: { filled: { true: {} } }
-});
+var menuSelectStyles = tv({ extend: activatorStyles });
 //#endregion
 export { menuSelectStyles };
 

package/dist/components/forms/select/menu-select-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-select-styles.js","names":[],"sources":["../../../../src/components/forms/select/menu-select-styles.ts"],"sourcesContent":["import { activatorStyles, type TextInputVariant } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type MenuSelectVariant = TextInputVariant;\n\nexport const menuSelectStyles = tv({\n  extend: activatorStyles,\n  variants: {\n    // Re-declare for type inference — actual styles are in activatorStyles\n    filled: { true: {} },\n  },\n});\n"],"mappings":";;;AAKA,IAAa,mBAAmB,GAAG;CACjC,QAAQ;CACR,UAAU,EAER,QAAQ,EAAE,MAAM,CAAC,EAAE,EACrB;AACF,CAAC"}
+{"version":3,"file":"menu-select-styles.js","names":[],"sources":["../../../../src/components/forms/select/menu-select-styles.ts"],"sourcesContent":["import { activatorStyles } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport const menuSelectStyles = tv({\n  extend: activatorStyles,\n});\n"],"mappings":";;;AAGA,IAAa,mBAAmB,GAAG,EACjC,QAAQ,gBACV,CAAC"}

package/dist/components/forms/slider/RuiSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSlider.js","names":[],"sources":["../../../../src/components/forms/slider/RuiSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiSliderTicks from '@/components/forms/slider/RuiSliderTicks.vue';\nimport { HIGHLIGHT_COLOR_MAP, HIGHLIGHT_DEFAULT, SliderInteraction, sliderStyles } from '@/components/forms/slider/slider-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiSliderClassNames {\n  root?: VueClassValue;\n  slider?: VueClassValue;\n  tick?: VueClassValue;\n}\n\nexport interface Props {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  showThumbLabel?: boolean;\n  showTicks?: boolean;\n  hideTrack?: boolean;\n  tickSize?: number;\n  vertical?: boolean;\n  color?: ContextColorsType;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  classNames?: RuiSliderClassNames;\n  /** @deprecated Use `classNames.slider` instead */\n  sliderClass?: string;\n  /** @deprecated Use `classNames.tick` instead */\n  tickClass?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSlider',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ default: 0 });\n\nconst {\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  showThumbLabel = false,\n  showTicks = false,\n  hideTrack = false,\n  vertical = false,\n  tickSize = 2,\n  color = 'primary',\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  classNames,\n  sliderClass = '',\n  tickClass = '',\n  required = false,\n} = defineProps<Props>();\n\nconst BIG_TICK_THRESHOLD = 4;\n\nconst isHovered = ref<boolean>(false);\nconst isFocused = ref<boolean>(false);\nconst isActive = ref<boolean>(false);\n\nconst outer = useTemplateRef<HTMLDivElement>('outer');\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst { width, height } = useElementBounding(outer);\n\nconst bigTick = computed<boolean>(() => tickSize > BIG_TICK_THRESHOLD);\n\nuseEventListener(document, 'mouseup', () => set(isActive, false));\n\nconst interaction = computed<SliderInteraction>(() => {\n  if (disabled)\n    return SliderInteraction.idle;\n  if (get(isActive))\n    return SliderInteraction.active;\n  if (get(isFocused))\n    return SliderInteraction.focus;\n  if (get(isHovered))\n    return SliderInteraction.hover;\n  return SliderInteraction.idle;\n});\n\n// Layout ui: stable props only (not interaction), used for wrapper/label/outer/inner/input\nconst ui = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n  disabled,\n  vertical,\n  validation: get(validation),\n  color,\n  bigTick: get(bigTick),\n}));\n\n// Track ui: includes interaction state, used for slider/thumb/ticks (changes on hover/focus/active)\nconst trackUi = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n  disabled,\n  vertical,\n  interaction: get(interaction),\n  color,\n  bigTick: get(bigTick),\n}));\n\nconst totalTicks = computed<number>(() => (max - min) / step);\n\nconst currentTick = computed<number>(() => Math.round((get(modelValue) - min) / step));\n\nconst trackWidth = computed<string>(() => {\n  const percentage = Math.min(100, Math.max(0, Math.round((get(currentTick) / get(totalTicks)) * 100)));\n  return `${percentage}%`;\n});\n\nconst innerStyle = computed<Record<string, string>>(() => {\n  const w = `${get(width)}px`;\n  const h = `${get(height)}px`;\n  const style: Record<string, string> = { width: vertical ? h : w, height: vertical ? w : h };\n  if (vertical) {\n    style['transform-origin'] = '0 0';\n    style['--tw-translate-y'] = h;\n  }\n  return style;\n});\n\nconst tickSizePx = computed<string>(() => `${tickSize}px`);\n\nconst ticksStyle = computed<Record<string, string>>(() => {\n  const size = get(tickSizePx);\n  return { margin: `0 calc(${size} / -2)`, width: `calc(100% + ${size})` };\n});\n\nconst tickStyle = computed<Record<string, string>>(() => {\n  const size = get(tickSizePx);\n  return { width: size, height: size };\n});\n\nconst highlightClass = computed<string>(() => get(bigTick) ? HIGHLIGHT_COLOR_MAP[color] : HIGHLIGHT_DEFAULT);\n\nconst tickClassOverride = computed<string | undefined>(() => cn(classNames?.tick) ?? (tickClass || undefined));\n\nfunction isHighlightedTick(index: number): boolean {\n  return index <= get(currentTick);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"ui.wrapper()\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div\n        v-if=\"label\"\n        :class=\"ui.label()\"\n      >\n        {{ label }}\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </div>\n      <div\n        ref=\"outer\"\n        :class=\"ui.outer()\"\n      >\n        <div\n          :class=\"ui.inner()\"\n          :style=\"innerStyle\"\n        >\n          <input\n            v-model=\"modelValue\"\n            :class=\"ui.input()\"\n            type=\"range\"\n            :max=\"max\"\n            :min=\"min\"\n            :step=\"step\"\n            :disabled=\"disabled\"\n            :aria-invalid=\"hasError\"\n            :aria-label=\"label || undefined\"\n            :aria-valuetext=\"String(modelValue)\"\n            v-bind=\"getNonRootAttrs($attrs)\"\n            @mouseenter=\"isHovered = true\"\n            @mouseleave=\"isHovered = false\"\n            @focus=\"isFocused = true\"\n            @blur=\"isFocused = false\"\n            @mousedown=\"isActive = true\"\n            @mouseup=\"isActive = false\"\n          />\n          <div :class=\"trackUi.slider()\">\n            <div :class=\"trackUi.sliderInner()\">\n              <div :class=\"trackUi.container({ class: cn(classNames?.slider) ?? sliderClass })\">\n                <div\n                  v-if=\"!hideTrack\"\n                  :class=\"trackUi.track()\"\n                  :style=\"{ width: trackWidth }\"\n                  data-id=\"slider-track\"\n                />\n                <RuiSliderTicks\n                  v-if=\"showTicks && !disabled\"\n                  :count=\"totalTicks\"\n                  :container-class=\"trackUi.ticks()\"\n                  :container-style=\"ticksStyle\"\n                  :tick-class=\"trackUi.tick()\"\n                  :tick-style=\"tickStyle\"\n                  :hide-track=\"hideTrack\"\n                  :highlight-class=\"highlightClass\"\n                  :tick-class-override=\"tickClassOverride\"\n                  :is-highlighted=\"isHighlightedTick\"\n                />\n              </div>\n              <div\n                :class=\"[trackUi.thumb(), trackUi.thumbRipple()]\"\n                :style=\"{ left: trackWidth }\"\n                data-id=\"slider-thumb\"\n              />\n              <div\n                v-if=\"showThumbLabel && !disabled\"\n                :class=\"trackUi.thumbLabel()\"\n                :style=\"{ left: trackWidth }\"\n                data-id=\"slider-thumb-label\"\n              >\n                {{ modelValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiSlider.js","names":[],"sources":["../../../../src/components/forms/slider/RuiSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiSliderTicks from '@/components/forms/slider/RuiSliderTicks.vue';\nimport { HIGHLIGHT_COLOR_MAP, HIGHLIGHT_DEFAULT, SliderInteraction, sliderStyles } from '@/components/forms/slider/slider-styles';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiSliderClassNames {\n  root?: VueClassValue;\n  slider?: VueClassValue;\n  tick?: VueClassValue;\n}\n\nexport interface Props {\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  showThumbLabel?: boolean;\n  showTicks?: boolean;\n  hideTrack?: boolean;\n  tickSize?: number;\n  vertical?: boolean;\n  color?: ContextColorsType;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  classNames?: RuiSliderClassNames;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSlider',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ default: 0 });\n\nconst {\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  showThumbLabel = false,\n  showTicks = false,\n  hideTrack = false,\n  vertical = false,\n  tickSize = 2,\n  color = 'primary',\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  classNames,\n  required = false,\n} = defineProps<Props>();\n\nconst BIG_TICK_THRESHOLD = 4;\n\nconst isHovered = ref<boolean>(false);\nconst isFocused = ref<boolean>(false);\nconst isActive = ref<boolean>(false);\n\nconst outer = useTemplateRef<HTMLDivElement>('outer');\n\nconst generatedId = useId();\nconst attrs = useAttrs();\n\nconst { hasError } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\n// the label above points at the range input, keeping a consumer's own id\nconst inputId = computed<string>(() => {\n  const id = attrs.id;\n  return typeof id === 'string' && id ? id : generatedId;\n});\n\nconst { width, height } = useElementBounding(outer);\n\nconst bigTick = computed<boolean>(() => tickSize > BIG_TICK_THRESHOLD);\n\nuseEventListener(document, 'mouseup', () => set(isActive, false));\n\nconst interaction = computed<SliderInteraction>(() => {\n  if (disabled)\n    return SliderInteraction.idle;\n  if (get(isActive))\n    return SliderInteraction.active;\n  if (get(isFocused))\n    return SliderInteraction.focus;\n  if (get(isHovered))\n    return SliderInteraction.hover;\n  return SliderInteraction.idle;\n});\n\n// Layout ui: stable props only (not interaction), used for wrapper/label/outer/inner/input\nconst ui = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n  disabled,\n  vertical,\n  color,\n  bigTick: get(bigTick),\n  hasLabel: !!label,\n}));\n\n// Track ui: includes interaction state, used for slider/thumb/ticks (changes on hover/focus/active)\nconst trackUi = computed<ReturnType<typeof sliderStyles>>(() => sliderStyles({\n  disabled,\n  vertical,\n  interaction: get(interaction),\n  color,\n  bigTick: get(bigTick),\n}));\n\nconst totalTicks = computed<number>(() => (max - min) / step);\n\nconst currentTick = computed<number>(() => Math.round((get(modelValue) - min) / step));\n\nconst trackWidth = computed<string>(() => {\n  const percentage = Math.min(100, Math.max(0, Math.round((get(currentTick) / get(totalTicks)) * 100)));\n  return `${percentage}%`;\n});\n\nconst innerStyle = computed<Record<string, string>>(() => {\n  const w = `${get(width)}px`;\n  const h = `${get(height)}px`;\n  const style: Record<string, string> = { width: vertical ? h : w, height: vertical ? w : h };\n  if (vertical) {\n    style['transform-origin'] = '0 0';\n    style['--rui-slider-shift'] = h;\n  }\n  return style;\n});\n\nconst tickSizePx = computed<string>(() => `${tickSize}px`);\n\nconst ticksStyle = computed<Record<string, string>>(() => {\n  const size = get(tickSizePx);\n  return { margin: `0 calc(${size} / -2)`, width: `calc(100% + ${size})` };\n});\n\nconst tickStyle = computed<Record<string, string>>(() => {\n  const size = get(tickSizePx);\n  return { width: size, height: size };\n});\n\nconst highlightClass = computed<string>(() => get(bigTick) ? HIGHLIGHT_COLOR_MAP[color] : HIGHLIGHT_DEFAULT);\n\nconst tickClassOverride = computed<string | undefined>(() => cn(classNames?.tick));\n\nfunction isHighlightedTick(index: number): boolean {\n  return index <= get(currentTick);\n}\n</script>\n\n<template>\n  <div\n    v-bind=\"getRootAttrs($attrs)\"\n    :class=\"ui.root()\"\n  >\n    <!-- above the rail like any field's label, neutral in every state; the messages below carry the validation -->\n    <RuiFieldLabel\n      v-if=\"label\"\n      :text=\"label\"\n      :for=\"inputId\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n      :class=\"ui.label()\"\n    />\n    <div\n      :class=\"ui.wrapper()\"\n      :data-error=\"hasError ? '' : undefined\"\n      data-id=\"slider-wrapper\"\n    >\n      <div\n        ref=\"outer\"\n        :class=\"ui.outer()\"\n      >\n        <div\n          :class=\"ui.inner()\"\n          :style=\"innerStyle\"\n        >\n          <input\n            :id=\"inputId\"\n            v-model.number=\"modelValue\"\n            :class=\"ui.input()\"\n            type=\"range\"\n            :max=\"max\"\n            :min=\"min\"\n            :step=\"step\"\n            :disabled=\"disabled\"\n            :aria-invalid=\"hasError\"\n            :aria-label=\"label || undefined\"\n            :aria-valuetext=\"String(modelValue)\"\n            v-bind=\"getNonRootAttrs($attrs, ['class', 'id'])\"\n            @mouseenter=\"isHovered = true\"\n            @mouseleave=\"isHovered = false\"\n            @focus=\"isFocused = true\"\n            @blur=\"isFocused = false\"\n            @mousedown=\"isActive = true\"\n            @mouseup=\"isActive = false\"\n          />\n          <div :class=\"trackUi.slider()\">\n            <div :class=\"trackUi.sliderInner()\">\n              <div :class=\"trackUi.container({ class: cn(classNames?.slider) })\">\n                <div\n                  v-if=\"!hideTrack\"\n                  :class=\"trackUi.track()\"\n                  :style=\"{ width: trackWidth }\"\n                  data-id=\"slider-track\"\n                />\n                <RuiSliderTicks\n                  v-if=\"showTicks && !disabled\"\n                  :count=\"totalTicks\"\n                  :container-class=\"trackUi.ticks()\"\n                  :container-style=\"ticksStyle\"\n                  :tick-class=\"trackUi.tick()\"\n                  :tick-style=\"tickStyle\"\n                  :hide-track=\"hideTrack\"\n                  :highlight-class=\"highlightClass\"\n                  :tick-class-override=\"tickClassOverride\"\n                  :is-highlighted=\"isHighlightedTick\"\n                />\n              </div>\n              <div\n                :class=\"trackUi.thumb()\"\n                :style=\"{ left: trackWidth }\"\n                data-id=\"slider-thumb\"\n              />\n              <div\n                v-if=\"showThumbLabel && !disabled\"\n                :class=\"trackUi.thumbLabel()\"\n                :style=\"{ left: trackWidth }\"\n                data-id=\"slider-thumb-label\"\n              >\n                {{ modelValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/slider/RuiSlider.vue.d.ts

@@ -22,10 +22,6 @@ export interface Props {
     successMessages?: string | string[];
     hideDetails?: boolean;
     classNames?: RuiSliderClassNames;
-    /** @deprecated Use `classNames.slider` instead */
-    sliderClass?: string;
-    /** @deprecated Use `classNames.tick` instead */
-    tickClass?: string;
     required?: boolean;
 }
 type __VLS_Props = Props;