npm - @rotki/ui-library - Versions diffs - 3.1.7 → 3.2.0 - Mend

@rotki/ui-library 3.1.7 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (257) hide show

package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,10 +1,11 @@
 import { get, set, whenever } from "../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../utils/tv.js";
+import { cn } from "../../utils/tv.js";
 import { Color } from "./utils.js";
 import RuiColorBoard_default from "./RuiColorBoard.js";
 import RuiColorDisplay_default from "./RuiColorDisplay.js";
 import RuiColorHue_default from "./RuiColorHue.js";
 import RuiColorInput_default from "./RuiColorInput.js";
+import { colorPickerStyles } from "./color-picker-styles.js";
 import { createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, reactive, unref, useModel, watch } from "vue";
 //#region src/components/color-picker/RuiColorPicker.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex flex-col gap-5 p-4" };
@@ -31,13 +32,12 @@ var RuiColorPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		watch(() => state.color.hex, (hex) => {
 			set(modelValue, hex);
 		}, { immediate: true });
-		const rootStyle = tv({ base: "relative select-none" });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				role: "application",
 				"aria-label": "Color picker",
 				"data-id": "color-picker",
-				class: unref(rootStyle)({ class: unref(cn)(_ctx.$attrs.class) })
+				class: unref(colorPickerStyles)({ class: unref(cn)(_ctx.$attrs.class) })
 			}, {
 				..._ctx.$attrs,
 				class: void 0

package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiColorPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","RuiColorBoard","_createElementVNode","RuiColorDisplay","RuiColorHue","RuiColorInput"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn, tv } from '@/utils/tv';\nimport { Color } from './utils';\n\ndefineOptions({\n name: 'RuiColorPicker',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n saturation,\n brightness,\n}: {\n saturation: number;\n brightness: number;\n}): void {\n state.color.saturation = saturation;\n state.color.brightness = brightness;\n}\n\nwhenever(\n modelValue,\n (value: string) => {\n if (state.color.hex !== value)\n state.color = new Color(value);\n },\n);\n\nwatch(\n () => state.color.hex,\n (hex: string) => {\n set(modelValue, hex);\n },\n { immediate: true },\n);\n~~\nconst rootStyle = tv({ base: 'relative select-none' });\n~~</script>\n\n<template>\n <div\n role=\"application\"\n aria-label=\"Color picker\"\n data-id=\"color-picker\"\n :class=\"~~rootStyle~~({ class: cn($attrs.class) })\"\n v-bind=\"{ ...$attrs, class: undefined }\"\n >\n <RuiColorBoard\n :color=\"state.color\"\n @update:board=\"onBoardChange($event)\"\n />\n <div class=\"flex flex-col gap-5 p-4\">\n <div class=\"flex items-center gap-4\">\n <RuiColorDisplay :color=\"state.color.hexString\" />\n <RuiColorHue\n v-model=\"state.color.hue\"\n class=\"flex-1\"\n />\n </div>\n\n <RuiColorInput v-model=\"state.color\" />\n </div>\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;EAcA~~,MAAM,aAAaC,SAAmB,SAAA,YAAgB;EAEtD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,IAAI,UAAU,CAAC,EAClC,CAAC;EAED,SAAS,cAAc,EACrB,YACA,cAIO;GACP,MAAM,MAAM,aAAa;GACzB,MAAM,MAAM,aAAa;EAC3B;EAEA,SACE,aACC,UAAkB;GACjB,IAAI,MAAM,MAAM,QAAQ,OACtB,MAAM,QAAQ,IAAI,MAAM,KAAK;EACjC,CACF;EAEA,YACQ,MAAM,MAAM,MACjB,QAAgB;GACf,IAAI,YAAY,GAAG;EACrB,GACA,EAAE,WAAW,KAAK,CACpB~~;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,uBAAuB,CAAC~~;;~~GAInD~~,OAAAC,UAAA,GAAAC,mBAsBM,OAtBNC,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACP,OAAOC,MAAA,~~SAAA~~,~~CAAS~~,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACL,KAAAA,OAAO,KAAK,EAAA,CAAA;~~GAC7BA~~,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErCM,YAGEC,uBAAA;IAFC,OAAOF,MAAA,KAAA,CAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,MAAM;GAErCG,GAAAA,MAAAA,GAAAA,CAAAA,OAAAA,CAAAA,GAAAA,mBAUM,OAVN,YAUM,CATJA,mBAMM,OANN,YAMM,CALJF,YAAkDG,yBAAA,EAAhC,OAAOJ,MAAA,KAAA,CAAK,CAAC,MAAM,UAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrCC,YAGEI,qBAAA;IAFS,YAAAL,MAAA,KAAA,CAAK,CAAC,MAAM;IAAZ,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAG;IACxB,OAAM;GAIVC,GAAAA,MAAAA,GAAAA,CAAAA,YAAAA,CAAAA,CAAAA,CAAAA,GAAAA,YAAuCK,uBAAA;IAAf,YAAAN,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,QAAK"}
1	+ {"version":3,"file":"RuiColorPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_createVNode","RuiColorBoard","_createElementVNode","RuiColorDisplay","RuiColorHue","RuiColorInput"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn } from '@/utils/tv';\nimport { colorPickerStyles } from './color-picker-styles';\nimport { Color } from './utils';\n\ndefineOptions({\n name: 'RuiColorPicker',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n saturation,\n brightness,\n}: {\n saturation: number;\n brightness: number;\n}): void {\n state.color.saturation = saturation;\n state.color.brightness = brightness;\n}\n\nwhenever(\n modelValue,\n (value: string) => {\n if (state.color.hex !== value)\n state.color = new Color(value);\n },\n);\n\nwatch(\n () => state.color.hex,\n (hex: string) => {\n set(modelValue, hex);\n },\n { immediate: true },\n);\n</script>\n\n<template>\n <div\n role=\"application\"\n aria-label=\"Color picker\"\n data-id=\"color-picker\"\n :class=\"colorPickerStyles({ class: cn($attrs.class) })\"\n v-bind=\"{ ...$attrs, class: undefined }\"\n >\n <RuiColorBoard\n :color=\"state.color\"\n @update:board=\"onBoardChange($event)\"\n />\n <div class=\"flex flex-col gap-5 p-4\">\n <div class=\"flex items-center gap-4\">\n <RuiColorDisplay :color=\"state.color.hexString\" />\n <RuiColorHue\n v-model=\"state.color.hue\"\n class=\"flex-1\"\n />\n </div>\n\n <RuiColorInput v-model=\"state.color\" />\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,aAAaC,SAAmB,SAAA,YAAgB;EAEtD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,IAAI,UAAU,CAAC,EAClC,CAAC;EAED,SAAS,cAAc,EACrB,YACA,cAIO;GACP,MAAM,MAAM,aAAa;GACzB,MAAM,MAAM,aAAa;EAC3B;EAEA,SACE,aACC,UAAkB;GACjB,IAAI,MAAM,MAAM,QAAQ,OACtB,MAAM,QAAQ,IAAI,MAAM,KAAK;EACjC,CACF;EAEA,YACQ,MAAM,MAAM,MACjB,QAAgB;GACf,IAAI,YAAY,GAAG;EACrB,GACA,EAAE,WAAW,KAAK,CACpB;;GAIE,OAAAC,UAAA,GAAAC,mBAsBM,OAtBNC,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACP,OAAOC,MAAA,iBAAA,CAAiB,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACL,KAAAA,OAAO,KAAK,EAAA,CAAA;GACrCA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErCM,YAGEC,uBAAA;IAFC,OAAOF,MAAA,KAAA,CAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,MAAM;GAErCG,GAAAA,MAAAA,GAAAA,CAAAA,OAAAA,CAAAA,GAAAA,mBAUM,OAVN,YAUM,CATJA,mBAMM,OANN,YAMM,CALJF,YAAkDG,yBAAA,EAAhC,OAAOJ,MAAA,KAAA,CAAK,CAAC,MAAM,UAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrCC,YAGEI,qBAAA;IAFS,YAAAL,MAAA,KAAA,CAAK,CAAC,MAAM;IAAZ,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAG;IACxB,OAAM;GAIVC,GAAAA,MAAAA,GAAAA,CAAAA,YAAAA,CAAAA,CAAAA,CAAAA,GAAAA,YAAuCK,uBAAA;IAAf,YAAAN,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,QAAK"}

package/dist/components/color-picker/color-board-styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const colorBoardStyles: import("tailwind-variants").TVReturnType<{} \| {} \| {}, undefined, "relative w-full h-40 overflow-hidden cursor-pointer rounded-rui-control", {} \| {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;

package/dist/components/color-picker/color-board-styles.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/color-picker/color-board-styles.ts
+var colorBoardStyles = tv({ base: "relative w-full h-40 overflow-hidden cursor-pointer rounded-rui-control" });
+//#endregion
+export { colorBoardStyles };
+//# sourceMappingURL=color-board-styles.js.map

package/dist/components/color-picker/color-board-styles.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"color-board-styles.js","names":[],"sources":["../../../src/components/color-picker/color-board-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const colorBoardStyles = tv({ base: 'relative w-full h-40 overflow-hidden cursor-pointer rounded-rui-control' });\n"],"mappings":";;AAEA,IAAa,mBAAmB,GAAG,EAAE,MAAM,0EAA0E,CAAC"}

package/dist/components/color-picker/color-hue-styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const colorHueStyles: import("tailwind-variants").TVReturnType<{} \| {} \| {}, undefined, "relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum", {} \| {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;

package/dist/components/color-picker/color-hue-styles.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/color-picker/color-hue-styles.ts
+var colorHueStyles = tv({ base: "relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum" });
+//#endregion
+export { colorHueStyles };
+//# sourceMappingURL=color-hue-styles.js.map

package/dist/components/color-picker/color-hue-styles.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"color-hue-styles.js","names":[],"sources":["../../../src/components/color-picker/color-hue-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const colorHueStyles = tv({ base: 'relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum' });\n"],"mappings":";;AAEA,IAAa,iBAAiB,GAAG,EAAE,MAAM,oEAAoE,CAAC"}

package/dist/components/color-picker/color-picker-styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const colorPickerStyles: import("tailwind-variants").TVReturnType<{} \| {} \| {}, undefined, "relative select-none", {} \| {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;

package/dist/components/color-picker/color-picker-styles.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/color-picker/color-picker-styles.ts
+var colorPickerStyles = tv({ base: "relative select-none" });
+//#endregion
+export { colorPickerStyles };
+//# sourceMappingURL=color-picker-styles.js.map

package/dist/components/color-picker/color-picker-styles.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"color-picker-styles.js","names":[],"sources":["../../../src/components/color-picker/color-picker-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const colorPickerStyles = tv({ base: 'relative select-none' });\n"],"mappings":";;AAEA,IAAa,oBAAoB,GAAG,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/forms/field-label/RuiFieldLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiFieldLabel.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '~~@/utils/tv~~';\n\n/*\n The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n /\nexport interface FieldLabelProps {\n text: string;\n hidden?: boolean;\n required?: boolean;\n disabled?: boolean;\n for?: string;\n id?: string;\n}\n\ndefineOptions({\n name: 'RuiFieldLabel',\n});\n\nconst {\n text,\n hidden = false,\n required = false,\n disabled = false,\n for: forId = undefined,\n id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst labelStyles = tv({\n slots: {\n root: 'block mb-1 text-sm leading-5 font-medium text-rui-text',\n required: 'text-rui-error',\n },\n variants: {\n hidden: {\n true: { root: 'sr-only' },\n },\n disabled: {\n true: { root: 'text-rui-text-disabled' },\n },\n },\n});\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n <label\n :id=\"id\"\n :for=\"forId\"\n :class=\"ui.root()\"\n data-id=\"field-label\"\n >\n {{ text }}\n <span\n v-if=\"required\"\n :class=\"ui.required()\"\n aria-hidden=\"true\"\n >\n \n </span>\n </label>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiFieldLabel.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { labelStyles } from './field-label-styles';\n\n/*\n The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n /\nexport interface FieldLabelProps {\n text: string;\n hidden?: boolean;\n required?: boolean;\n disabled?: boolean;\n for?: string;\n id?: string;\n}\n\ndefineOptions({\n name: 'RuiFieldLabel',\n});\n\nconst {\n text,\n hidden = false,\n required = false,\n disabled = false,\n for: forId = undefined,\n id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n <label\n :id=\"id\"\n :for=\"forId\"\n :class=\"ui.root()\"\n data-id=\"field-label\"\n >\n {{ text }}\n <span\n v-if=\"required\"\n :class=\"ui.required()\"\n aria-hidden=\"true\"\n >\n \n </span>\n </label>\n</template>\n"],"mappings":""}

package/dist/components/forms/field-label/RuiFieldLabel.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { tv } from "../../../utils/tv.js";
+import { labelStyles } from "./field-label-styles.js";
 import { computed, createCommentVNode, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
 //#region src/components/forms/field-label/RuiFieldLabel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["id", "for"];
@@ -23,16 +23,6 @@ var RuiFieldLabel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		id: { default: () => void 0 }
 	},
 	setup(__props) {
-		const labelStyles = tv({
-			slots: {
-				root: "block mb-1 text-sm leading-5 font-medium text-rui-text",
-				required: "text-rui-error"
-			},
-			variants: {
-				hidden: { true: { root: "sr-only" } },
-				disabled: { true: { root: "text-rui-text-disabled" } }
-			}
-		});
 		const ui = computed(() => labelStyles({
 			hidden: __props.hidden,
 			disabled: __props.disabled

package/dist/components/forms/field-label/RuiFieldLabel.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiFieldLabel.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createTextVNode","_toDisplayString","_createCommentVNode"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '~~@/utils/tv~~';\n\n/*\n The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n /\nexport interface FieldLabelProps {\n text: string;\n hidden?: boolean;\n required?: boolean;\n disabled?: boolean;\n for?: string;\n id?: string;\n}\n\ndefineOptions({\n name: 'RuiFieldLabel',\n});\n\nconst {\n text,\n hidden = false,\n required = false,\n disabled = false,\n for: forId = undefined,\n id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst labelStyles = tv({\n slots: {\n root: 'block mb-1 text-sm leading-5 font-medium text-rui-text',\n required: 'text-rui-error',\n },\n variants: {\n hidden: {\n true: { root: 'sr-only' },\n },\n disabled: {\n true: { root: 'text-rui-text-disabled' },\n },\n },\n});\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n <label\n :id=\"id\"\n :for=\"forId\"\n :class=\"ui.root()\"\n data-id=\"field-label\"\n >\n {{ text }}\n <span\n v-if=\"required\"\n :class=\"ui.required()\"\n aria-hidden=\"true\"\n >\n \n </span>\n </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,~~cAAc,GAAG;GACrB,OAAO;IACL,MAAM;IACN,UAAU;GACZ;GACA,UAAU;IACR,QAAQ,EACN,MAAM,EAAE,MAAM,UAAU,EAC1B;IACA,UAAU,EACR,MAAM,EAAE,MAAM,yBAAyB,EACzC;GACF;EACF,CAAC;EAED,MAAM,~~KAAK,eAA+C,YAAY;GAAE,QAAK,QAAA;GAAG,UAAO,QAAA;EAAE,CAAC,CAAC;;GAIzF,OAAAA,UAAA,GAAAC,mBAcQ,SAAA;IAbL,IAAI,QAAA;IACJ,KAAK,QAAA;IACL,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IACf,WAAQ;GAELC,GAAAA,CAAAA,gBAAAC,gBAAA,QAAA,IAAI,IAAG,KACV,CAAA,GACQ,QAAA,YADRL,UAAA,GAAAC,mBAMO,QAAA;;IAJJ,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;IACnB,eAAY;GACb,GAAA,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}
1	+ {"version":3,"file":"RuiFieldLabel.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createTextVNode","_toDisplayString","_createCommentVNode"],"sources":["../../../../src/components/forms/field-label/RuiFieldLabel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { labelStyles } from './field-label-styles';\n\n/*\n The label a field shows above itself when its label placement is `top`, or\n * keeps for screen readers alone when it is `hidden`. A text input links it\n * through `for`; a select or picker, whose activator is not a labelable\n * element, points at its `id` with `aria-labelledby` instead.\n /\nexport interface FieldLabelProps {\n text: string;\n hidden?: boolean;\n required?: boolean;\n disabled?: boolean;\n for?: string;\n id?: string;\n}\n\ndefineOptions({\n name: 'RuiFieldLabel',\n});\n\nconst {\n text,\n hidden = false,\n required = false,\n disabled = false,\n for: forId = undefined,\n id = undefined,\n} = defineProps<FieldLabelProps>();\n\nconst ui = computed<ReturnType<typeof labelStyles>>(() => labelStyles({ hidden, disabled }));\n</script>\n\n<template>\n <label\n :id=\"id\"\n :for=\"forId\"\n :class=\"ui.root()\"\n data-id=\"field-label\"\n >\n {{ text }}\n <span\n v-if=\"required\"\n :class=\"ui.required()\"\n aria-hidden=\"true\"\n >\n \n </span>\n </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,MAAM,KAAK,eAA+C,YAAY;GAAE,QAAK,QAAA;GAAG,UAAO,QAAA;EAAE,CAAC,CAAC;;GAIzF,OAAAA,UAAA,GAAAC,mBAcQ,SAAA;IAbL,IAAI,QAAA;IACJ,KAAK,QAAA;IACL,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IACf,WAAQ;GAELC,GAAAA,CAAAA,gBAAAC,gBAAA,QAAA,IAAI,IAAG,KACV,CAAA,GACQ,QAAA,YADRL,UAAA,GAAAC,mBAMO,QAAA;;IAJJ,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,SAAQ,CAAA;IACnB,eAAY;GACb,GAAA,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/forms/field-label/field-label-styles.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+export declare const labelStyles: import("tailwind-variants").TVReturnType<{
+    hidden: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    required: string;
+}, undefined, {
+    hidden: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    required: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    hidden: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    required: string;
+}>>;

package/dist/components/forms/field-label/field-label-styles.js ADDED Viewed

@@ -0,0 +1,16 @@
+import { tv } from "../../../utils/tv.js";
+//#region src/components/forms/field-label/field-label-styles.ts
+var labelStyles = tv({
+	slots: {
+		root: "block mb-1 text-sm leading-5 font-medium text-rui-text",
+		required: "text-rui-error"
+	},
+	variants: {
+		hidden: { true: { root: "sr-only" } },
+		disabled: { true: { root: "text-rui-text-disabled" } }
+	}
+});
+//#endregion
+export { labelStyles };
+//# sourceMappingURL=field-label-styles.js.map

package/dist/components/forms/field-label/field-label-styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"field-label-styles.js","names":[],"sources":["../../../../src/components/forms/field-label/field-label-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const labelStyles = tv({\n slots: {\n root: 'block mb-1 text-sm leading-5 font-medium text-rui-text',\n required: 'text-rui-error',\n },\n variants: {\n hidden: {\n true: { root: 'sr-only' },\n },\n disabled: {\n true: { root: 'text-rui-text-disabled' },\n },\n },\n});\n"],"mappings":";;AAEA,IAAa,cAAc,GAAG;CAC5B,OAAO;EACL,MAAM;EACN,UAAU;CACZ;CACA,UAAU;EACR,QAAQ,EACN,MAAM,EAAE,MAAM,UAAU,EAC1B;EACA,UAAU,EACR,MAAM,EAAE,MAAM,yBAAyB,EACzC;CACF;AACF,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiSimpleSelect.js","names":["_sfc_main"],"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":""}
1	+ {"version":3,"file":"RuiSimpleSelect.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/select/RuiSimpleSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { simpleSelectStyles } from './simple-select-styles';\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\nconst ui = computed<string>(() => simpleSelectStyles());\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_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { tv } from "../../../utils/tv.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
+import { simpleSelectStyles } from "./simple-select-styles.js";
 import { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, vModelSelect, withDirectives } from "vue";
 //#region src/components/forms/select/RuiSimpleSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -31,16 +31,7 @@ var RuiSimpleSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
-		/** 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());
+		const ui = computed(() => simpleSelectStyles());
 		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),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiSimpleSelect.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_withDirectives","_createElementVNode","_normalizeClass","_unref","_Fragment","_renderList","_toDisplayString","_vModelSelect","_createVNode","RuiIcon"],"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,aAAaC,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~~,OAAAC,UAAA,GAAAC,mBA8BM,OA9BNC,WA8BM,EA7BJ,OAAM,uBAAsB,GACpBJ,KAAAA,MAAM,GAAA,CAEdK,eAAAC,mBAeS,UAAA;IAdE,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,QAAA;IAClB,OAAKC,eAAEC,MAAA,EAAA,CAAE;IACT,MAAM,QAAA;IACN,UAAU,QAAA;IACV,cAAY,QAAA;IACb,WAAQ;GAERN,GAAAA,EAAAA,UAAA,IAAA,GAAAC,mBAMSM,UAAA,MAAAC,WALU,QAAA,UAAV,WAAM;IADf,OAAAR,UAAA,GAAAC,mBAMS,UAAA;KAJN,KAAK;KACL,OAAO;IAEL,GAAAQ,gBAAA,MAAM,GAAA,GAAA,UAAA;GAZF,CAAA,GAAA,GAAA,EAAA,GAAA,IAAA,UAAA,GAAA,CAAA,CAAAC,cAAA,WAAA,KAAU,CAAA,CAAA,GAerBN,mBASO,QATP,YASO,CALLO,YAIEC,iBAAA;IAHA,OAAM;IACN,MAAK;IACL,MAAK"}
1	+ {"version":3,"file":"RuiSimpleSelect.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_withDirectives","_createElementVNode","_normalizeClass","_unref","_Fragment","_renderList","_toDisplayString","_vModelSelect","_createVNode","RuiIcon"],"sources":["../../../../src/components/forms/select/RuiSimpleSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { simpleSelectStyles } from './simple-select-styles';\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\nconst ui = computed<string>(() => simpleSelectStyles());\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,aAAaC,SAA4B,SAAA,YAAmB;EAIlE,MAAM,KAAK,eAAuB,mBAAmB,CAAC;;GAIpD,OAAAC,UAAA,GAAAC,mBA8BM,OA9BNC,WA8BM,EA7BJ,OAAM,uBAAsB,GACpBJ,KAAAA,MAAM,GAAA,CAEdK,eAAAC,mBAeS,UAAA;IAdE,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,QAAA;IAClB,OAAKC,eAAEC,MAAA,EAAA,CAAE;IACT,MAAM,QAAA;IACN,UAAU,QAAA;IACV,cAAY,QAAA;IACb,WAAQ;GAERN,GAAAA,EAAAA,UAAA,IAAA,GAAAC,mBAMSM,UAAA,MAAAC,WALU,QAAA,UAAV,WAAM;IADf,OAAAR,UAAA,GAAAC,mBAMS,UAAA;KAJN,KAAK;KACL,OAAO;IAEL,GAAAQ,gBAAA,MAAM,GAAA,GAAA,UAAA;GAZF,CAAA,GAAA,GAAA,EAAA,GAAA,IAAA,UAAA,GAAA,CAAA,CAAAC,cAAA,WAAA,KAAU,CAAA,CAAA,GAerBN,mBASO,QATP,YASO,CALLO,YAIEC,iBAAA;IAHA,OAAM;IACN,MAAK;IACL,MAAK"}

package/dist/components/forms/select/simple-select-styles.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ /** The native select dressed as the other fields: a 36px bordered box with their hover, focus and disabled looks. */
2	+ export declare const simpleSelectStyles: import("tailwind-variants").TVReturnType<{} \| {} \| {}, undefined, string, {} \| {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;

package/dist/components/forms/select/simple-select-styles.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { tv } from "../../../utils/tv.js";
+//#region src/components/forms/select/simple-select-styles.ts
+/** The native select dressed as the other fields: a 36px bordered box with their hover, focus and disabled looks. */
+var simpleSelectStyles = 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(" ") });
+//#endregion
+export { simpleSelectStyles };
+//# sourceMappingURL=simple-select-styles.js.map

package/dist/components/forms/select/simple-select-styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"simple-select-styles.js","names":[],"sources":["../../../../src/components/forms/select/simple-select-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/** The native select dressed as the other fields: a 36px bordered box with their hover, focus and disabled looks. */\nexport const simpleSelectStyles = 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"],"mappings":";;;AAGA,IAAa,qBAAqB,GAAG,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG,EACZ,CAAC"}

package/dist/components/forms/switch/RuiSwitch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiSwitch.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { tv } from '~~@/utils/tv~~';\n\nexport interface Props {\n disabled?: boolean;\n color?: ContextColorsType;\n size?: 'sm';\n label?: string;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n /** The line under the control for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. /\n details?: FormDetails;\n /* @deprecated Use `details=\"hidden\"`. Removed in 4.0. /\n hideDetails?: boolean;\n /* Puts the hint or message under the label text instead of under the track, so a list of switches keeps one text column. /\n detailsUnderLabel?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiSwitch',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n disabled = false,\n color = undefined,\n size = undefined,\n label = '',\n hint = '',\n errorMessages = [],\n successMessages = [],\n details = undefined,\n hideDetails = false,\n detailsUnderLabel = false,\n required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst ~~switchStyles = tv(~~{~~\n slots:~~ {\n // 13px to the label, the gap a checkbox or radio leaves, so the focus ring clears the text\n wrapper: 'relative flex gap-3.25 items-start cursor-pointer group/switch',\n // 40 × 22, nudged down a pixel to sit centred on the label's 24px line\n inner: 'relative w-10 h-5.5 mt-px shrink-0',\n // the off track is the control edge color, 3:1 against the page in both themes\n input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-outline transition-colors duration-150 cursor-pointer focus-visible:focus-ring',\n toggle: [\n 'absolute size-4.5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n 'bg-white left-0.5 shadow-rui-control',\n ].join(' '),\n label: 'text-rui-text text-sm/6',\n details: '',\n },\n variants: {\n // indented by the track and the 13px gap, so the message starts where the label does\n underLabel: {\n true: { details: 'pl-13.25' },\n false: {},\n },\n checked: {\n true: {\n toggle: 'left-5',\n },\n false: {},\n },\n disabled: {\n true: {\n wrapper: 'cursor-not-allowed',\n input: 'bg-rui-neutral-200! dark:bg-rui-neutral-800! cursor-not-allowed',\n toggle: 'bg-rui-neutral-50! dark:bg-rui-neutral-600! shadow-none!',\n label: 'text-rui-text-disabled',\n },\n },\n size: {\n sm: {\n inner: 'w-8.5 h-4.5 mt-0.75',\n toggle: 'size-3.5',\n },\n },\n // a ring and the message below mark the state; a filled red or green track would read as \"on\"\n validation: {\n error: {\n input: 'ring-1 ring-rui-error',\n },\n success: {\n input: 'ring-1 ring-rui-success',\n },\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n { checked: false, disabled: false, class: { input: 'group-hover/switch:bg-rui-neutral-500 dark:group-hover/switch:bg-rui-neutral-400' } },\n\n // Checked (no color): an inverted neutral track, with a dark knob in dark mode\n { checked: true, disabled: false, class: { input: 'bg-rui-neutral-900 dark:bg-rui-neutral-100', toggle: 'dark:bg-rui-neutral-900' } },\n\n // Checked + color: a solid track with the white knob, in both themes\n { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary', toggle: 'dark:bg-white' } },\n // a status color's dark `main` is a text tone, so the track takes the deep `darker` under the white knob\n { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success-darker', toggle: 'dark:bg-white' } },\n\n // Size sm + checked: 34 - 14 - 2\n { size: 'sm', checked: true, class: { toggle: 'left-4.5' } },\n // sm: a 34px track\n { size: 'sm', underLabel: true, class: { details: 'pl-11.75' } },\n ],\n defaultVariants: {\n checked: false,\n disabled: false,\n },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n checked: get(modelValue),\n disabled,\n size,\n validation: get(validation),\n color,\n underLabel: detailsUnderLabel,\n}));\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement)\n set(modelValue, target.checked);\n}\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <label\n :class=\"ui.wrapper()\"\n :data-disabled=\"disabled \|\| undefined\"\n :data-checked=\"modelValue \|\| undefined\"\n :data-error=\"hasError ? '' : undefined\"\n >\n <div :class=\"ui.inner()\">\n <input\n :checked=\"modelValue\"\n type=\"checkbox\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n />\n <div :class=\"ui.toggle()\" />\n </div>\n <span\n v-if=\"label \|\| $slots.default\"\n :class=\"ui.label()\"\n >\n <slot>{{ label }}</slot>\n <span\n v-if=\"required\"\n class=\"text-rui-error\"\n >\n \n </span>\n </span>\n </label>\n <RuiFormTextDetail\n v-if=\"detailsMode !== 'hidden'\"\n :class=\"ui.details()\"\n :details=\"detailsMode\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiSwitch.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { switchStyles } from './switch-styles';\n\nexport interface Props {\n disabled?: boolean;\n color?: ContextColorsType;\n size?: 'sm';\n label?: string;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n /** The line under the control for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. /\n details?: FormDetails;\n /* @deprecated Use `details=\"hidden\"`. Removed in 4.0. /\n hideDetails?: boolean;\n /* Puts the hint or message under the label text instead of under the track, so a list of switches keeps one text column. /\n detailsUnderLabel?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiSwitch',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n disabled = false,\n color = undefined,\n size = undefined,\n label = '',\n hint = '',\n errorMessages = [],\n successMessages = [],\n details = undefined,\n hideDetails = false,\n detailsUnderLabel = false,\n required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst { hasError, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n checked: get(modelValue),\n disabled,\n size,\n validation: get(validation),\n color,\n underLabel: detailsUnderLabel,\n}));\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement)\n set(modelValue, target.checked);\n}\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <label\n :class=\"ui.wrapper()\"\n :data-disabled=\"disabled \|\| undefined\"\n :data-checked=\"modelValue \|\| undefined\"\n :data-error=\"hasError ? '' : undefined\"\n >\n <div :class=\"ui.inner()\">\n <input\n :checked=\"modelValue\"\n type=\"checkbox\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n />\n <div :class=\"ui.toggle()\" />\n </div>\n <span\n v-if=\"label \|\| $slots.default\"\n :class=\"ui.label()\"\n >\n <slot>{{ label }}</slot>\n <span\n v-if=\"required\"\n class=\"text-rui-error\"\n >\n \n </span>\n </span>\n </label>\n <RuiFormTextDetail\n v-if=\"detailsMode !== 'hidden'\"\n :class=\"ui.details()\"\n :details=\"detailsMode\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/switch/RuiSwitch.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
-import { tv } from "../../../utils/tv.js";
 import { useFormDetails, useFormTextDetail } from "../../../utils/form-text-detail.js";
 import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
 import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
+import { switchStyles } from "./switch-styles.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, toDisplayString, unref, useModel } from "vue";
 //#region src/components/forms/switch/RuiSwitch.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -57,131 +57,6 @@ var RuiSwitch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
-		const switchStyles = tv({
-			slots: {
-				wrapper: "relative flex gap-3.25 items-start cursor-pointer group/switch",
-				inner: "relative w-10 h-5.5 mt-px shrink-0",
-				input: "peer appearance-none relative w-full h-full rounded-full bg-rui-outline transition-colors duration-150 cursor-pointer focus-visible:focus-ring",
-				toggle: ["absolute size-4.5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none", "bg-white left-0.5 shadow-rui-control"].join(" "),
-				label: "text-rui-text text-sm/6",
-				details: ""
-			},
-			variants: {
-				underLabel: {
-					true: { details: "pl-13.25" },
-					false: {}
-				},
-				checked: {
-					true: { toggle: "left-5" },
-					false: {}
-				},
-				disabled: { true: {
-					wrapper: "cursor-not-allowed",
-					input: "bg-rui-neutral-200! dark:bg-rui-neutral-800! cursor-not-allowed",
-					toggle: "bg-rui-neutral-50! dark:bg-rui-neutral-600! shadow-none!",
-					label: "text-rui-text-disabled"
-				} },
-				size: { sm: {
-					inner: "w-8.5 h-4.5 mt-0.75",
-					toggle: "size-3.5"
-				} },
-				validation: {
-					error: { input: "ring-1 ring-rui-error" },
-					success: { input: "ring-1 ring-rui-success" }
-				},
-				color: {
-					primary: {},
-					secondary: {},
-					error: {},
-					warning: {},
-					info: {},
-					success: {}
-				}
-			},
-			compoundVariants: [
-				{
-					checked: false,
-					disabled: false,
-					class: { input: "group-hover/switch:bg-rui-neutral-500 dark:group-hover/switch:bg-rui-neutral-400" }
-				},
-				{
-					checked: true,
-					disabled: false,
-					class: {
-						input: "bg-rui-neutral-900 dark:bg-rui-neutral-100",
-						toggle: "dark:bg-rui-neutral-900"
-					}
-				},
-				{
-					checked: true,
-					disabled: false,
-					color: "primary",
-					class: {
-						input: "bg-rui-primary dark:bg-rui-primary",
-						toggle: "dark:bg-white"
-					}
-				},
-				{
-					checked: true,
-					disabled: false,
-					color: "secondary",
-					class: {
-						input: "bg-rui-secondary dark:bg-rui-secondary",
-						toggle: "dark:bg-white"
-					}
-				},
-				{
-					checked: true,
-					disabled: false,
-					color: "error",
-					class: {
-						input: "bg-rui-error dark:bg-rui-error-darker",
-						toggle: "dark:bg-white"
-					}
-				},
-				{
-					checked: true,
-					disabled: false,
-					color: "warning",
-					class: {
-						input: "bg-rui-warning dark:bg-rui-warning-darker",
-						toggle: "dark:bg-white"
-					}
-				},
-				{
-					checked: true,
-					disabled: false,
-					color: "info",
-					class: {
-						input: "bg-rui-info dark:bg-rui-info-darker",
-						toggle: "dark:bg-white"
-					}
-				},
-				{
-					checked: true,
-					disabled: false,
-					color: "success",
-					class: {
-						input: "bg-rui-success dark:bg-rui-success-darker",
-						toggle: "dark:bg-white"
-					}
-				},
-				{
-					size: "sm",
-					checked: true,
-					class: { toggle: "left-4.5" }
-				},
-				{
-					size: "sm",
-					underLabel: true,
-					class: { details: "pl-11.75" }
-				}
-			],
-			defaultVariants: {
-				checked: false,
-				disabled: false
-			}
-		});
 		const { hasError, validation } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
 		const detailsMode = useFormDetails(() => __props.details, () => __props.hideDetails);
 		const ui = computed(() => switchStyles({

package/dist/components/forms/switch/RuiSwitch.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiSwitch.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createElementVNode","_normalizeClass","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createBlock","RuiFormTextDetail"],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n disabled?: boolean;\n color?: ContextColorsType;\n size?: 'sm';\n label?: string;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n /** The line under the control for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. /\n details?: FormDetails;\n /* @deprecated Use `details=\"hidden\"`. Removed in 4.0. /\n hideDetails?: boolean;\n /* Puts the hint or message under the label text instead of under the track, so a list of switches keeps one text column. /\n detailsUnderLabel?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiSwitch',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n disabled = false,\n color = undefined,\n size = undefined,\n label = '',\n hint = '',\n errorMessages = [],\n successMessages = [],\n details = undefined,\n hideDetails = false,\n detailsUnderLabel = false,\n required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst switchStyles = tv({\n slots: {\n // 13px to the label, the gap a checkbox or radio leaves, so the focus ring clears the text\n wrapper: 'relative flex gap-3.25 items-start cursor-pointer group/switch',\n // 40 × 22, nudged down a pixel to sit centred on the label's 24px line\n inner: 'relative w-10 h-5.5 mt-px shrink-0',\n // the off track is the control edge color, 3:1 against the page in both themes\n input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-outline transition-colors duration-150 cursor-pointer focus-visible:focus-ring',\n toggle: [\n 'absolute size-4.5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n 'bg-white left-0.5 shadow-rui-control',\n ].join(' '),\n label: 'text-rui-text text-sm/6',\n details: '',\n },\n variants: {\n // indented by the track and the 13px gap, so the message starts where the label does\n underLabel: {\n true: { details: 'pl-13.25' },\n false: {},\n },\n checked: {\n true: {\n toggle: 'left-5',\n },\n false: {},\n },\n disabled: {\n true: {\n wrapper: 'cursor-not-allowed',\n input: 'bg-rui-neutral-200! dark:bg-rui-neutral-800! cursor-not-allowed',\n toggle: 'bg-rui-neutral-50! dark:bg-rui-neutral-600! shadow-none!',\n label: 'text-rui-text-disabled',\n },\n },\n size: {\n sm: {\n inner: 'w-8.5 h-4.5 mt-0.75',\n toggle: 'size-3.5',\n },\n },\n // a ring and the message below mark the state; a filled red or green track would read as \"on\"\n validation: {\n error: {\n input: 'ring-1 ring-rui-error',\n },\n success: {\n input: 'ring-1 ring-rui-success',\n },\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n { checked: false, disabled: false, class: { input: 'group-hover/switch:bg-rui-neutral-500 dark:group-hover/switch:bg-rui-neutral-400' } },\n\n // Checked (no color): an inverted neutral track, with a dark knob in dark mode\n { checked: true, disabled: false, class: { input: 'bg-rui-neutral-900 dark:bg-rui-neutral-100', toggle: 'dark:bg-rui-neutral-900' } },\n\n // Checked + color: a solid track with the white knob, in both themes\n { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary', toggle: 'dark:bg-white' } },\n // a status color's dark `main` is a text tone, so the track takes the deep `darker` under the white knob\n { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info-darker', toggle: 'dark:bg-white' } },\n { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success-darker', toggle: 'dark:bg-white' } },\n\n // Size sm + checked: 34 - 14 - 2\n { size: 'sm', checked: true, class: { toggle: 'left-4.5' } },\n // sm: a 34px track\n { size: 'sm', underLabel: true, class: { details: 'pl-11.75' } },\n ],\n defaultVariants: {\n checked: false,\n disabled: false,\n },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n checked: get(modelValue),\n disabled,\n size,\n validation: get(validation),\n color,\n underLabel: detailsUnderLabel,\n}));\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement)\n set(modelValue, target.checked);\n}\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <label\n :class=\"ui.wrapper()\"\n :data-disabled=\"disabled \|\| undefined\"\n :data-checked=\"modelValue \|\| undefined\"\n :data-error=\"hasError ? '' : undefined\"\n >\n <div :class=\"ui.inner()\">\n <input\n :checked=\"modelValue\"\n type=\"checkbox\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n />\n <div :class=\"ui.toggle()\" />\n </div>\n <span\n v-if=\"label \|\| $slots.default\"\n :class=\"ui.label()\"\n >\n <slot>{{ label }}</slot>\n <span\n v-if=\"required\"\n class=\"text-rui-error\"\n >\n \n </span>\n </span>\n </label>\n <RuiFormTextDetail\n v-if=\"detailsMode !== 'hidden'\"\n :class=\"ui.details()\"\n :details=\"detailsMode\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"RuiSwitch.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useModel","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createElementVNode","_normalizeClass","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createBlock","RuiFormTextDetail"],"sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { switchStyles } from './switch-styles';\n\nexport interface Props {\n disabled?: boolean;\n color?: ContextColorsType;\n size?: 'sm';\n label?: string;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n /** The line under the control for its hint and messages: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. /\n details?: FormDetails;\n /* @deprecated Use `details=\"hidden\"`. Removed in 4.0. /\n hideDetails?: boolean;\n /* Puts the hint or message under the label text instead of under the track, so a list of switches keeps one text column. /\n detailsUnderLabel?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiSwitch',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n disabled = false,\n color = undefined,\n size = undefined,\n label = '',\n hint = '',\n errorMessages = [],\n successMessages = [],\n details = undefined,\n hideDetails = false,\n detailsUnderLabel = false,\n required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst { hasError, validation } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n checked: get(modelValue),\n disabled,\n size,\n validation: get(validation),\n color,\n underLabel: detailsUnderLabel,\n}));\n\nfunction input(event: Event): void {\n const target = event.target;\n if (target instanceof HTMLInputElement)\n set(modelValue, target.checked);\n}\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <label\n :class=\"ui.wrapper()\"\n :data-disabled=\"disabled \|\| undefined\"\n :data-checked=\"modelValue \|\| undefined\"\n :data-error=\"hasError ? '' : undefined\"\n >\n <div :class=\"ui.inner()\">\n <input\n :checked=\"modelValue\"\n type=\"checkbox\"\n :class=\"ui.input()\"\n :disabled=\"disabled\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n />\n <div :class=\"ui.toggle()\" />\n </div>\n <span\n v-if=\"label \|\| $slots.default\"\n :class=\"ui.label()\"\n >\n <slot>{{ label }}</slot>\n <span\n v-if=\"required\"\n class=\"text-rui-error\"\n >\n \n </span>\n </span>\n </label>\n <RuiFormTextDetail\n v-if=\"detailsMode !== 'hidden'\"\n :class=\"ui.details()\"\n :details=\"detailsMode\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,aAAaE,SAAoB,SAAA,YAAmB;EAoB1D,MAAM,EAAE,UAAU,eAAe,wBACzB,QAAA,qBACA,QAAA,eACR;EACA,MAAM,cAAc,qBAAqB,QAAA,eAAe,QAAA,WAAW;EAEnE,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAS,IAAI,UAAU;GACvB,UAAO,QAAA;GACP,MAAG,QAAA;GACH,YAAY,IAAI,UAAU;GAC1B,OAAI,QAAA;GACJ,YAAY,QAAA;EACd,CAAC,CAAC;EAEF,SAAS,MAAM,OAAoB;GACjC,MAAM,SAAS,MAAM;GACrB,IAAI,kBAAkB,kBACpB,IAAI,YAAY,OAAO,OAAO;EAClC;;GAIE,OAAAC,UAAA,GAAAC,mBAwCM,OAAAC,eAAAC,mBAxCOC,MAAA,YAAA,CAAY,CAACP,KAAAA,MAAM,CAAA,CAAA,GAAA,CAC9BQ,mBA8BQ,SAAA;IA7BL,OAAKC,eAAEF,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IACjB,iBAAe,QAAA,YAAY,KAAA;IAC3B,gBAAc,WAAA,SAAc,KAAA;IAC5B,cAAYA,MAAA,QAAA,IAAQ,KAAQ,KAAA;GAE7BC,GAAAA,CAAAA,mBAWM,OAAA,EAXA,OAAKC,eAAEF,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA,EAAA,GAAA,CACnBC,mBAQE,SARFE,WAQE;IAPC,SAAS,WAAA;IACV,MAAK;IACJ,OAAOH,MAAA,EAAA,CAAE,CAAC,MAAK;IACf,UAAU,QAAA;IACV,gBAAcA,MAAA,QAAA;GACP,GAAAA,MAAA,eAAA,CAAe,CAACP,KAAAA,MAAM,GAAA,EAC7B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAM,MAAM,GAAA,CAAA,GAAA,MAAA,IAAA,UAAA,GAEtBQ,mBAA4B,OAAA,EAAtB,OAAKC,eAAEF,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA,EAAA,GAAA,MAAA,CAAA,CAAA,GAAA,CAAA,GAGhB,QAAA,SAASN,KAAAA,OAAO,WADxBE,UAAA,GAAAC,mBAWO,QAAA;;IATJ,OAAKK,eAAEF,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;GAEhBI,GAAAA,CAAAA,WAAwB,KAAA,QAAA,WAAA,CAAA,SAAA,CAAfC,gBAAAC,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,GAEN,QAAA,YADRV,UAAA,GAAAC,mBAKO,QALP,YAGC,KAED,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA,GAIIG,MAAA,WAAA,MAAW,YADnBJ,UAAA,GAAAY,YAOEC,2BAAA;;IALC,OAAKP,eAAEF,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IACjB,SAASA,MAAA,WAAA;IACT,kBAAgB,QAAA;IAChB,oBAAkB,QAAA;IAClB,MAAM,QAAA"}