@rotki/ui-library 2.14.1 → 2.16.0

package/dist/components/forms/slider/slider-styles.d.ts

@@ -0,0 +1,208 @@
+import type { ContextColorsType } from '../../../consts/colors.js';
+export declare const SliderInteraction: {
+    readonly idle: "idle";
+    readonly hover: "hover";
+    readonly focus: "focus";
+    readonly active: "active";
+};
+export type SliderInteraction = (typeof SliderInteraction)[keyof typeof SliderInteraction];
+/** Static class map for highlighted big-tick colors (avoids dynamic class construction) */
+export declare const HIGHLIGHT_COLOR_MAP: Record<ContextColorsType, string>;
+/** Default highlighted tick color (non-big-tick) */
+export declare const HIGHLIGHT_DEFAULT = "bg-rui-grey-100 dark:bg-[#121212]";
+export declare const sliderStyles: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            label: string;
+            container: string;
+            track: string;
+            thumb: string;
+        };
+    };
+    vertical: {
+        true: {
+            wrapper: string;
+            label: string;
+            outer: string;
+            inner: string;
+            thumbLabel: string;
+        };
+    };
+    interaction: {
+        idle: {};
+        hover: {
+            thumbRipple: string;
+        };
+        focus: {
+            thumbRipple: string;
+        };
+        active: {
+            thumbRipple: string;
+            thumbLabel: string;
+        };
+    };
+    validation: {
+        error: {
+            label: string;
+        };
+        success: {
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+    bigTick: {
+        true: {};
+    };
+}, {
+    wrapper: string;
+    label: string;
+    outer: string;
+    inner: string;
+    input: string;
+    slider: string;
+    sliderInner: string;
+    container: string;
+    track: string;
+    ticks: string;
+    tick: string;
+    thumb: string;
+    thumbRipple: string;
+    thumbLabel: string;
+}, undefined, {
+    disabled: {
+        true: {
+            label: string;
+            container: string;
+            track: string;
+            thumb: string;
+        };
+    };
+    vertical: {
+        true: {
+            wrapper: string;
+            label: string;
+            outer: string;
+            inner: string;
+            thumbLabel: string;
+        };
+    };
+    interaction: {
+        idle: {};
+        hover: {
+            thumbRipple: string;
+        };
+        focus: {
+            thumbRipple: string;
+        };
+        active: {
+            thumbRipple: string;
+            thumbLabel: string;
+        };
+    };
+    validation: {
+        error: {
+            label: string;
+        };
+        success: {
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+    bigTick: {
+        true: {};
+    };
+}, {
+    wrapper: string;
+    label: string;
+    outer: string;
+    inner: string;
+    input: string;
+    slider: string;
+    sliderInner: string;
+    container: string;
+    track: string;
+    ticks: string;
+    tick: string;
+    thumb: string;
+    thumbRipple: string;
+    thumbLabel: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            label: string;
+            container: string;
+            track: string;
+            thumb: string;
+        };
+    };
+    vertical: {
+        true: {
+            wrapper: string;
+            label: string;
+            outer: string;
+            inner: string;
+            thumbLabel: string;
+        };
+    };
+    interaction: {
+        idle: {};
+        hover: {
+            thumbRipple: string;
+        };
+        focus: {
+            thumbRipple: string;
+        };
+        active: {
+            thumbRipple: string;
+            thumbLabel: string;
+        };
+    };
+    validation: {
+        error: {
+            label: string;
+        };
+        success: {
+            label: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+    bigTick: {
+        true: {};
+    };
+}, {
+    wrapper: string;
+    label: string;
+    outer: string;
+    inner: string;
+    input: string;
+    slider: string;
+    sliderInner: string;
+    container: string;
+    track: string;
+    ticks: string;
+    tick: string;
+    thumb: string;
+    thumbRipple: string;
+    thumbLabel: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/forms/slider/slider-styles.js

@@ -0,0 +1,235 @@
+import { tv } from "../../../utils/tv.js";
+//#region src/components/forms/slider/slider-styles.ts
+var SliderInteraction = {
+	idle: "idle",
+	hover: "hover",
+	focus: "focus",
+	active: "active"
+};
+/** Static class map for highlighted big-tick colors (avoids dynamic class construction) */
+var HIGHLIGHT_COLOR_MAP = {
+	primary: "!bg-rui-primary",
+	secondary: "!bg-rui-secondary",
+	error: "!bg-rui-error",
+	warning: "!bg-rui-warning",
+	info: "!bg-rui-info",
+	success: "!bg-rui-success"
+};
+/** Default highlighted tick color (non-big-tick) */
+var HIGHLIGHT_DEFAULT = "bg-rui-grey-100 dark:bg-[#121212]";
+var sliderStyles = tv({
+	slots: {
+		wrapper: "flex items-start gap-3",
+		label: "mt-1 text-rui-text text-body-1",
+		outer: "relative h-8 flex-1 min-w-[7.5rem]",
+		inner: "relative",
+		input: "h-full w-full opacity-0 cursor-pointer",
+		slider: "absolute h-full w-full top-0 px-2 pointer-events-none",
+		sliderInner: "relative h-full w-full cursor-pointer",
+		container: "absolute top-1/2 -translate-y-1/2 w-full h-1 rounded-full",
+		track: "transition-all ease-linear duration-75 h-full rounded-full",
+		ticks: "h-full absolute top-0 flex justify-between items-center",
+		tick: "rounded-full",
+		thumb: "absolute top-1/2 transition-all ease-linear duration-75 -translate-y-1/2 -translate-x-1/2 w-3 h-3 rounded-full shadow-2",
+		thumbRipple: [`before:content-[''] before:w-8 before:h-8 before:rounded-full before:absolute before:top-1/2 before:left-1/2`, "before:opacity-10 before:transition before:-translate-x-1/2 before:-translate-y-1/2 before:scale-0"].join(" "),
+		thumbLabel: [
+			"invisible opacity-0",
+			"absolute -mt-7 transition-all ease-linear duration-75 -translate-x-1/2",
+			"px-2 py-1 text-xs font-normal",
+			"bg-rui-grey-700/90 text-white rounded shadow"
+		].join(" ")
+	},
+	variants: {
+		disabled: { true: {
+			label: "text-rui-text-disabled",
+			container: "!bg-rui-grey-300 dark:!bg-rui-grey-800",
+			track: "!bg-rui-grey-400 dark:!bg-rui-grey-700",
+			thumb: "!bg-rui-grey-400 dark:!bg-rui-grey-700"
+		} },
+		vertical: { true: {
+			wrapper: "flex-col-reverse items-center h-full",
+			label: "mb-2 text-center",
+			outer: "min-w-0 min-h-[7.5rem] w-8",
+			inner: "-rotate-90",
+			thumbLabel: "mt-6 rotate-90 translate-x-0 [transform-origin:0_50%]"
+		} },
+		interaction: {
+			idle: {},
+			hover: { thumbRipple: "before:scale-100" },
+			focus: { thumbRipple: "before:scale-100 before:opacity-15" },
+			active: {
+				thumbRipple: "before:scale-100 before:opacity-30",
+				thumbLabel: "visible opacity-100"
+			}
+		},
+		validation: {
+			error: { label: "text-rui-error" },
+			success: { label: "text-rui-success" }
+		},
+		color: {
+			primary: {},
+			secondary: {},
+			error: {},
+			warning: {},
+			info: {},
+			success: {}
+		},
+		bigTick: { true: {} }
+	},
+	compoundSlots: [
+		{
+			slots: ["container"],
+			color: "primary",
+			class: "bg-rui-primary bg-opacity-40"
+		},
+		{
+			slots: ["container"],
+			color: "secondary",
+			class: "bg-rui-secondary bg-opacity-40"
+		},
+		{
+			slots: ["container"],
+			color: "error",
+			class: "bg-rui-error bg-opacity-40"
+		},
+		{
+			slots: ["container"],
+			color: "warning",
+			class: "bg-rui-warning bg-opacity-40"
+		},
+		{
+			slots: ["container"],
+			color: "info",
+			class: "bg-rui-info bg-opacity-40"
+		},
+		{
+			slots: ["container"],
+			color: "success",
+			class: "bg-rui-success bg-opacity-40"
+		},
+		{
+			slots: [
+				"track",
+				"thumb",
+				"tick"
+			],
+			color: "primary",
+			class: "bg-rui-primary"
+		},
+		{
+			slots: [
+				"track",
+				"thumb",
+				"tick"
+			],
+			color: "secondary",
+			class: "bg-rui-secondary"
+		},
+		{
+			slots: [
+				"track",
+				"thumb",
+				"tick"
+			],
+			color: "error",
+			class: "bg-rui-error"
+		},
+		{
+			slots: [
+				"track",
+				"thumb",
+				"tick"
+			],
+			color: "warning",
+			class: "bg-rui-warning"
+		},
+		{
+			slots: [
+				"track",
+				"thumb",
+				"tick"
+			],
+			color: "info",
+			class: "bg-rui-info"
+		},
+		{
+			slots: [
+				"track",
+				"thumb",
+				"tick"
+			],
+			color: "success",
+			class: "bg-rui-success"
+		},
+		{
+			slots: ["thumbRipple"],
+			color: "primary",
+			class: "before:bg-rui-primary"
+		},
+		{
+			slots: ["thumbRipple"],
+			color: "secondary",
+			class: "before:bg-rui-secondary"
+		},
+		{
+			slots: ["thumbRipple"],
+			color: "error",
+			class: "before:bg-rui-error"
+		},
+		{
+			slots: ["thumbRipple"],
+			color: "warning",
+			class: "before:bg-rui-warning"
+		},
+		{
+			slots: ["thumbRipple"],
+			color: "info",
+			class: "before:bg-rui-info"
+		},
+		{
+			slots: ["thumbRipple"],
+			color: "success",
+			class: "before:bg-rui-success"
+		}
+	],
+	compoundVariants: [
+		{
+			bigTick: true,
+			color: "primary",
+			class: { tick: "!bg-rui-primary-lighter" }
+		},
+		{
+			bigTick: true,
+			color: "secondary",
+			class: { tick: "!bg-rui-secondary-lighter" }
+		},
+		{
+			bigTick: true,
+			color: "error",
+			class: { tick: "!bg-rui-error-lighter" }
+		},
+		{
+			bigTick: true,
+			color: "warning",
+			class: { tick: "!bg-rui-warning-lighter" }
+		},
+		{
+			bigTick: true,
+			color: "info",
+			class: { tick: "!bg-rui-info-lighter" }
+		},
+		{
+			bigTick: true,
+			color: "success",
+			class: { tick: "!bg-rui-success-lighter" }
+		}
+	],
+	defaultVariants: {
+		interaction: "idle",
+		color: "primary"
+	}
+});
+//#endregion
+export { HIGHLIGHT_COLOR_MAP, HIGHLIGHT_DEFAULT, SliderInteraction, sliderStyles };
+
+//# sourceMappingURL=slider-styles.js.map

package/dist/components/forms/slider/slider-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-styles.js","names":[],"sources":["../../../../src/components/forms/slider/slider-styles.ts"],"sourcesContent":["import type { ContextColorsType } from '@/consts/colors';\nimport { tv } from '@/utils/tv';\n\nexport const SliderInteraction = {\n  idle: 'idle',\n  hover: 'hover',\n  focus: 'focus',\n  active: 'active',\n} as const;\n\nexport type SliderInteraction = (typeof SliderInteraction)[keyof typeof SliderInteraction];\n\n/** Static class map for highlighted big-tick colors (avoids dynamic class construction) */\nexport const HIGHLIGHT_COLOR_MAP: Record<ContextColorsType, string> = {\n  primary: '!bg-rui-primary',\n  secondary: '!bg-rui-secondary',\n  error: '!bg-rui-error',\n  warning: '!bg-rui-warning',\n  info: '!bg-rui-info',\n  success: '!bg-rui-success',\n};\n\n/** Default highlighted tick color (non-big-tick) */\nexport const HIGHLIGHT_DEFAULT = 'bg-rui-grey-100 dark:bg-[#121212]';\n\nexport const sliderStyles = tv({\n  slots: {\n    wrapper: 'flex items-start gap-3',\n    label: 'mt-1 text-rui-text text-body-1',\n    outer: 'relative h-8 flex-1 min-w-[7.5rem]',\n    inner: 'relative',\n    input: 'h-full w-full opacity-0 cursor-pointer',\n    slider: 'absolute h-full w-full top-0 px-2 pointer-events-none',\n    sliderInner: 'relative h-full w-full cursor-pointer',\n    container: 'absolute top-1/2 -translate-y-1/2 w-full h-1 rounded-full',\n    track: 'transition-all ease-linear duration-75 h-full rounded-full',\n    ticks: 'h-full absolute top-0 flex justify-between items-center',\n    tick: 'rounded-full',\n    thumb: 'absolute top-1/2 transition-all ease-linear duration-75 -translate-y-1/2 -translate-x-1/2 w-3 h-3 rounded-full shadow-2',\n    thumbRipple: [\n      `before:content-[''] before:w-8 before:h-8 before:rounded-full before:absolute before:top-1/2 before:left-1/2`,\n      'before:opacity-10 before:transition before:-translate-x-1/2 before:-translate-y-1/2 before:scale-0',\n    ].join(' '),\n    thumbLabel: [\n      'invisible opacity-0',\n      'absolute -mt-7 transition-all ease-linear duration-75 -translate-x-1/2',\n      'px-2 py-1 text-xs font-normal',\n      'bg-rui-grey-700/90 text-white rounded shadow',\n    ].join(' '),\n  },\n  variants: {\n    disabled: {\n      true: {\n        label: 'text-rui-text-disabled',\n        container: '!bg-rui-grey-300 dark:!bg-rui-grey-800',\n        track: '!bg-rui-grey-400 dark:!bg-rui-grey-700',\n        thumb: '!bg-rui-grey-400 dark:!bg-rui-grey-700',\n      },\n    },\n    vertical: {\n      true: {\n        wrapper: 'flex-col-reverse items-center h-full',\n        label: 'mb-2 text-center',\n        outer: 'min-w-0 min-h-[7.5rem] w-8',\n        inner: '-rotate-90',\n        thumbLabel: 'mt-6 rotate-90 translate-x-0 [transform-origin:0_50%]',\n      },\n    },\n    interaction: {\n      idle: {},\n      hover: { thumbRipple: 'before:scale-100' },\n      focus: { thumbRipple: 'before:scale-100 before:opacity-15' },\n      active: { thumbRipple: 'before:scale-100 before:opacity-30', thumbLabel: 'visible opacity-100' },\n    },\n    validation: {\n      error: { label: 'text-rui-error' },\n      success: { label: 'text-rui-success' },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n    bigTick: {\n      true: {},\n    },\n  },\n  compoundSlots: [\n    // Container bg (with opacity)\n    { slots: ['container'], color: 'primary', class: 'bg-rui-primary bg-opacity-40' },\n    { slots: ['container'], color: 'secondary', class: 'bg-rui-secondary bg-opacity-40' },\n    { slots: ['container'], color: 'error', class: 'bg-rui-error bg-opacity-40' },\n    { slots: ['container'], color: 'warning', class: 'bg-rui-warning bg-opacity-40' },\n    { slots: ['container'], color: 'info', class: 'bg-rui-info bg-opacity-40' },\n    { slots: ['container'], color: 'success', class: 'bg-rui-success bg-opacity-40' },\n\n    // Track + thumb + thumb ripple + tick color\n    { slots: ['track', 'thumb', 'tick'], color: 'primary', class: 'bg-rui-primary' },\n    { slots: ['track', 'thumb', 'tick'], color: 'secondary', class: 'bg-rui-secondary' },\n    { slots: ['track', 'thumb', 'tick'], color: 'error', class: 'bg-rui-error' },\n    { slots: ['track', 'thumb', 'tick'], color: 'warning', class: 'bg-rui-warning' },\n    { slots: ['track', 'thumb', 'tick'], color: 'info', class: 'bg-rui-info' },\n    { slots: ['track', 'thumb', 'tick'], color: 'success', class: 'bg-rui-success' },\n\n    // Thumb ripple (before pseudo) color\n    { slots: ['thumbRipple'], color: 'primary', class: 'before:bg-rui-primary' },\n    { slots: ['thumbRipple'], color: 'secondary', class: 'before:bg-rui-secondary' },\n    { slots: ['thumbRipple'], color: 'error', class: 'before:bg-rui-error' },\n    { slots: ['thumbRipple'], color: 'warning', class: 'before:bg-rui-warning' },\n    { slots: ['thumbRipple'], color: 'info', class: 'before:bg-rui-info' },\n    { slots: ['thumbRipple'], color: 'success', class: 'before:bg-rui-success' },\n  ],\n  compoundVariants: [\n    // Big tick: lighter default, color highlighted\n    { bigTick: true, color: 'primary', class: { tick: '!bg-rui-primary-lighter' } },\n    { bigTick: true, color: 'secondary', class: { tick: '!bg-rui-secondary-lighter' } },\n    { bigTick: true, color: 'error', class: { tick: '!bg-rui-error-lighter' } },\n    { bigTick: true, color: 'warning', class: { tick: '!bg-rui-warning-lighter' } },\n    { bigTick: true, color: 'info', class: { tick: '!bg-rui-info-lighter' } },\n    { bigTick: true, color: 'success', class: { tick: '!bg-rui-success-lighter' } },\n  ],\n  defaultVariants: {\n    interaction: 'idle',\n    color: 'primary',\n  },\n});\n"],"mappings":"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"}

package/dist/components/forms/switch/RuiSwitch.js

@@ -0,0 +1,7 @@
+import RuiSwitch_vue_vue_type_script_setup_true_lang_default from "./RuiSwitch.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/forms/switch/RuiSwitch.vue
+var RuiSwitch_default = RuiSwitch_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiSwitch_default as default };
+
+//# sourceMappingURL=RuiSwitch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiSwitch.js","names":[],"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 { 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  hideDetails?: 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  hideDetails = false,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst switchStyles = tv({\n  slots: {\n    wrapper: 'relative flex gap-2 items-start cursor-pointer group/switch',\n    inner: 'relative w-[2.6875rem] h-6 shrink-0',\n    input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-grey-400 dark:bg-rui-grey-700 transition-all duration-75 ease-in-out cursor-pointer',\n    toggle: [\n      'absolute w-5 h-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',\n      `before:content-[''] before:absolute before:size-10 before:bg-black dark:before:bg-white before:rounded-full`,\n      'before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:transition-all before:ease-in-out before:opacity-0',\n      'peer-active:before:opacity-20',\n      'group-hover/switch:shadow-1',\n    ].join(' '),\n    label: 'text-rui-text text-body-1',\n  },\n  variants: {\n    checked: {\n      true: {\n        toggle: 'left-[1.3125rem]',\n      },\n      false: {},\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        input: '!bg-rui-grey-300 dark:!bg-rui-grey-800 cursor-not-allowed',\n        toggle: '!bg-rui-grey-500 dark:!bg-rui-grey-600 before:!content-none group-hover/switch:!shadow-none',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    size: {\n      sm: {\n        inner: 'w-10 h-5 mt-0.5',\n        toggle: 'w-4 h-4 before:size-6',\n      },\n    },\n    validation: {\n      error: {\n        input: '!bg-rui-error dark:!bg-rui-error/[0.5]',\n        label: 'text-rui-error',\n        toggle: 'dark:!bg-rui-error',\n      },\n      success: {\n        input: '!bg-rui-success dark:!bg-rui-success/[0.5]',\n        label: 'text-rui-success',\n        toggle: 'dark:!bg-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Checked (no color): track + toggle dark mode\n    { checked: true, disabled: false, class: { input: 'bg-black dark:bg-white' } },\n    { checked: true, disabled: false, class: { toggle: 'dark:bg-black' } },\n\n    // Checked + color (light: track bg, dark: track bg/50 + toggle bg)\n    { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary/[0.5]', toggle: 'dark:bg-rui-primary' } },\n    { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary/[0.5]', toggle: 'dark:bg-rui-secondary' } },\n    { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error/[0.5]', toggle: 'dark:bg-rui-error' } },\n    { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning/[0.5]', toggle: 'dark:bg-rui-warning' } },\n    { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info/[0.5]', toggle: 'dark:bg-rui-info' } },\n    { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success/[0.5]', toggle: 'dark:bg-rui-success' } },\n\n    // Size sm + checked: different toggle position\n    { size: 'sm', checked: true, class: { toggle: 'left-[1.375rem]' } },\n  ],\n  defaultVariants: {\n    checked: false,\n    disabled: false,\n  },\n});\n\nconst { hasError, validation } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst ui = computed<ReturnType<typeof switchStyles>>(() => switchStyles({\n  checked: get(modelValue),\n  disabled,\n  size,\n  validation: get(validation),\n  color,\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=\"!hideDetails\"\n      class=\"pt-1\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}