@rotki/ui-library 3.1.6 → 3.2.0

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

@@ -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

@@ -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/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiMenuSelect.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createBlock","RuiMenu","_mergeProps","_unref","_isRef","_createSlots","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_withKeys","_withModifiers","_createElementBlock","_normalizeClass","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","RuiIcon","RuiProgress","_normalizeStyle","_Fragment","_renderList","RuiButton","RuiFieldLabel"],"sources":["../../../../src/components/forms/select/RuiMenuSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { menuSelectStyles } from '@/components/forms/select/menu-select-styles';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu, { type MenuProps } from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { getOptionHeight, type KeyOfType, useDropdownMenu } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiMenuSelectClassNames {\n  root?: VueClassValue;\n  label?: VueClassValue;\n  menu?: VueClassValue;\n  option?: VueClassValue;\n}\n\nexport interface MenuSelectProps<TValue, TItem> {\n  options: TItem[];\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem;\n  disabled?: boolean;\n  loading?: boolean;\n  readOnly?: boolean;\n  dense?: boolean;\n  clearable?: boolean;\n  label?: string;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  menuOptions?: MenuProps;\n  classNames?: RuiMenuSelectClassNames;\n  prependWidth?: number;\n  appendWidth?: number;\n  itemHeight?: number;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the field 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  autoSelectFirst?: boolean;\n  hideNoData?: boolean;\n  noDataText?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenuSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue | undefined>({ required: true });\n\nconst {\n  options,\n  disabled = false,\n  loading = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  details = undefined,\n  hideDetails = false,\n  label = 'Select',\n  labelPlacement = undefined,\n  menuOptions,\n  classNames,\n  hint,\n  keyAttr,\n  textAttr,\n  itemHeight,\n  prependWidth,\n  appendWidth,\n  errorMessages = [],\n  successMessages = [],\n  autoSelectFirst = false,\n  hideNoData = false,\n  noDataText = 'No data available',\n  required = false,\n} = defineProps<MenuSelectProps<TValue, TItem>>();\n\ndefineSlots<{\n  'activator'?: (props: {\n    disabled: boolean;\n    value: TItem | undefined;\n    readOnly: boolean;\n    attrs: Record<string, unknown>;\n    open: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  'selection.prepend'?: (props: { item: TItem }) => any;\n  'selection'?: (props: { item: TItem }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'no-data'?: () => any;\n}>();\n\nconst menuRef = useTemplateRef<HTMLDivElement>('menuRef');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst { focused } = useFocus(activator);\nconst isHovered = ref<boolean>(false);\nconst labelId = useId();\n\nconst placement = useLabelPlacement(() => labelPlacement);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst value = computed<TItem | undefined>({\n  get: () => {\n    const value = get(modelValue);\n    if (keyAttr)\n      return options.find(option => option[keyAttr] === value);\n    // eslint-disable-next-line slop/no-chained-type-assertions -- without keyAttr the model holds the item itself, which the two generics cannot express\n    return value as unknown as TItem;\n  },\n  set: (selected?: TItem) => {\n    const selection = keyAttr && selected ? selected[keyAttr] : selected;\n    set(modelValue, selection as TValue);\n  },\n});\n\nfunction setValue(val: TItem): void {\n  set(value, val);\n  set(focused, true);\n}\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  isOpen,\n  menuWidth,\n  getText,\n  getIdentifier,\n  isActiveItem,\n  modelHighlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  valueKey,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: itemHeight ?? getOptionHeight(dense),\n  keyAttr,\n  textAttr,\n  options: () => options,\n  dense: () => dense,\n  value,\n  menuRef,\n  disabled: () => disabled,\n  autoSelectFirst,\n  setValue,\n  prependWidth,\n  appendWidth,\n});\n\nconst ui = computed<ReturnType<typeof menuSelectStyles>>(() => menuSelectStyles({\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly: readOnly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = menuSelectStyles({}).highlighted();\n\nfunction clear(): void {\n  set(modelValue, undefined);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n  placement: Placement.bottomStart,\n  ...menuOptions?.options,\n}));\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    :class-names=\"{ ...menuOptions?.classNames, details: ['px-0', cn(menuOptions?.classNames?.details) ?? ''] }\"\n    :options=\"menuFloatingOptions\"\n    close-on-content-click\n    full-width\n    :error-messages=\"errorMessages\"\n    :success-messages=\"successMessages\"\n    :hint=\"hint\"\n    :dense=\"dense\"\n    :show-details=\"detailsMode !== 'hidden'\"\n    :details=\"detailsMode === 'auto' ? 'auto' : 'reserve'\"\n    :disabled=\"disabled\"\n    disable-auto-focus\n    role=\"listbox\"\n  >\n    <template\n      v-if=\"label\"\n      #label\n    >\n      <RuiFieldLabel\n        :id=\"labelId\"\n        :text=\"label\"\n        :hidden=\"placement === 'hidden'\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n      />\n    </template>\n    <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ disabled, value, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n      >\n        <!-- a select-only combobox: the button opens a listbox of options, and carries the field's state -->\n        <button\n          ref=\"activator\"\n          role=\"combobox\"\n          :disabled=\"disabled\"\n          :aria-disabled=\"disabled\"\n          :aria-expanded=\"isOpen\"\n          :aria-readonly=\"readOnly || undefined\"\n          :aria-required=\"required || undefined\"\n          :aria-busy=\"loading || undefined\"\n          :aria-labelledby=\"label ? labelId : undefined\"\n          type=\"button\"\n          :tabindex=\"disabled || readOnly ? -1 : 0\"\n          :class=\"ui.activator({ class: cn(classNames?.label) })\"\n          v-bind=\"{\n            ...getNonRootAttrs($attrs),\n            ...(readOnly ? {} : attrs),\n          }\"\n          data-id=\"activator\"\n          :aria-invalid=\"hasError\"\n          @mouseenter=\"isHovered = true\"\n          @mouseleave=\"isHovered = false\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n          @keydown.enter.prevent=\"applyHighlighted()\"\n          @keydown.space.prevent=\"applyHighlighted()\"\n          @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n          @keydown.end.prevent=\"modelHighlightedIndex = options.length - 1\"\n        >\n          <span\n            v-if=\"value\"\n            :class=\"ui.value()\"\n          >\n            <slot\n              name=\"selection.prepend\"\n              v-bind=\"{ item: value }\"\n            />\n            <slot\n              name=\"selection\"\n              v-bind=\"{ item: value }\"\n            >\n              {{ getText(value) }}\n            </slot>\n          </span>\n\n          <span\n            v-if=\"clearable && value && !disabled && !readOnly\"\n            data-id=\"clear\"\n            :class=\"[ui.clear(), focused && 'visible!', { 'mr-2': !dense }]\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              name=\"lu-x\"\n              size=\"16\"\n            />\n          </span>\n\n          <span :class=\"ui.iconWrapper()\">\n            <RuiIcon\n              :class=\"ui.icon()\"\n              :size=\"dense ? 16 : 20\"\n              name=\"lu-chevron-down\"\n            />\n          </span>\n\n          <RuiProgress\n            v-if=\"loading\"\n            :class=\"ui.progress()\"\n            color=\"primary\"\n            thickness=\"2\"\n            variant=\"indeterminate\"\n          />\n        </button>\n        <fieldset :class=\"ui.fieldset()\" />\n      </slot>\n      <input\n        :value=\"valueKey\"\n        class=\"hidden\"\n        type=\"hidden\"\n      />\n    </template>\n    <template #default=\"{ width }\">\n      <div\n        v-if=\"options.length > 0\"\n        :ref=\"containerProps.ref\"\n        :class=\"ui.menu({ class: cn(classNames?.menu) })\"\n        :style=\"[containerProps.style, { width: `${width}px`, minWidth: menuWidth }]\"\n        @scroll=\"containerProps.onScroll\"\n        @keydown.up.prevent=\"moveHighlight(true)\"\n        @keydown.down.prevent=\"moveHighlight(false)\"\n      >\n        <div\n          v-bind=\"wrapperProps\"\n          ref=\"menuRef\"\n        >\n          <RuiButton\n            v-for=\"{ item, _index } in renderedData\"\n            :key=\"getIdentifier(item)\"\n            :active=\"isActiveItem(item)\"\n            role=\"option\"\n            :aria-selected=\"isActiveItem(item)\"\n            :size=\"dense ? 'sm' : undefined\"\n            variant=\"list\"\n            :data-highlighted=\"modelHighlightedIndex === _index\"\n            :class=\"{\n              [highlightedClass]: !isActiveItem(item) && modelHighlightedIndex === _index,\n            }\"\n            @click=\"setValue(item)\"\n          >\n            <template #prepend>\n              <slot\n                name=\"item.prepend\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n            <slot\n              name=\"item\"\n              v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n            >\n              {{ getText(item) }}\n            </slot>\n            <template #append>\n              <slot\n                name=\"item.append\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n          </RuiButton>\n        </div>\n      </div>\n\n      <div\n        v-else-if=\"!hideNoData\"\n        data-id=\"no-data\"\n        :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n        :class=\"classNames?.menu\"\n      >\n        <slot name=\"no-data\">\n          <div class=\"p-4\">\n            {{ noDataText }}\n          </div>\n        </slot>\n      </div>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiMenuSelect.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createBlock","RuiMenu","_mergeProps","_unref","_isRef","_createSlots","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_withKeys","_withModifiers","_createElementBlock","_normalizeClass","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","RuiIcon","RuiProgress","_normalizeStyle","_Fragment","_renderList","RuiButton","RuiFieldLabel"],"sources":["../../../../src/components/forms/select/RuiMenuSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport { menuSelectStyles } from '@/components/forms/select/menu-select-styles';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu, { type MenuProps } from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type LabelPlacement, useLabelPlacement } from '@/composables/defaults/field';\nimport { getOptionHeight, type KeyOfType, useDropdownMenu } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiMenuSelectClassNames {\n  root?: VueClassValue;\n  label?: VueClassValue;\n  menu?: VueClassValue;\n  option?: VueClassValue;\n}\n\nexport interface MenuSelectProps<TValue, TItem> {\n  options: TItem[];\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem;\n  disabled?: boolean;\n  loading?: boolean;\n  readOnly?: boolean;\n  dense?: boolean;\n  clearable?: boolean;\n  label?: string;\n  /** Where the label shows; falls back to the nearest `RuiFieldDefaults`, then the app default, then `top`. */\n  labelPlacement?: LabelPlacement;\n  menuOptions?: MenuProps;\n  classNames?: RuiMenuSelectClassNames;\n  prependWidth?: number;\n  appendWidth?: number;\n  itemHeight?: number;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  /** The line under the field 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  autoSelectFirst?: boolean;\n  hideNoData?: boolean;\n  noDataText?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenuSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue | undefined>({ required: true });\n\nconst {\n  options,\n  disabled = false,\n  loading = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  details = undefined,\n  hideDetails = false,\n  label = 'Select',\n  labelPlacement = undefined,\n  menuOptions,\n  classNames,\n  hint,\n  keyAttr,\n  textAttr,\n  itemHeight,\n  prependWidth,\n  appendWidth,\n  errorMessages = [],\n  successMessages = [],\n  autoSelectFirst = false,\n  hideNoData = false,\n  noDataText = 'No data available',\n  required = false,\n} = defineProps<MenuSelectProps<TValue, TItem>>();\n\ndefineSlots<{\n  'activator'?: (props: {\n    disabled: boolean;\n    value: TItem | undefined;\n    readOnly: boolean;\n    attrs: Record<string, unknown>;\n    open: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  'selection.prepend'?: (props: { item: TItem }) => any;\n  'selection'?: (props: { item: TItem }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'no-data'?: () => any;\n}>();\n\nconst menuRef = useTemplateRef<HTMLDivElement>('menuRef');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst { focused } = useFocus(activator);\nconst isHovered = ref<boolean>(false);\nconst labelId = useId();\n\nconst placement = useLabelPlacement(() => labelPlacement);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\nconst value = computed<TItem | undefined>({\n  get: () => {\n    const value = get(modelValue);\n    if (keyAttr)\n      return options.find(option => option[keyAttr] === value);\n    // eslint-disable-next-line slop/no-chained-type-assertions -- without keyAttr the model holds the item itself, which the two generics cannot express\n    return value as unknown as TItem;\n  },\n  set: (selected?: TItem) => {\n    const selection = keyAttr && selected ? selected[keyAttr] : selected;\n    set(modelValue, selection as TValue);\n  },\n});\n\nfunction setValue(val: TItem): void {\n  set(value, val);\n  set(focused, true);\n}\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  isOpen,\n  menuWidth,\n  getText,\n  getIdentifier,\n  isActiveItem,\n  modelHighlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  valueKey,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: itemHeight ?? getOptionHeight(dense),\n  keyAttr,\n  textAttr,\n  options: () => options,\n  dense: () => dense,\n  value,\n  menuRef,\n  disabled: () => disabled,\n  autoSelectFirst,\n  setValue,\n  prependWidth,\n  appendWidth,\n});\n\nconst ui = computed<ReturnType<typeof menuSelectStyles>>(() => menuSelectStyles({\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly: readOnly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = menuSelectStyles({}).highlighted();\n\nfunction clear(): void {\n  set(modelValue, undefined);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n  placement: Placement.bottomStart,\n  ...menuOptions?.options,\n}));\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    :class-names=\"{ ...menuOptions?.classNames, details: ['px-0', cn(menuOptions?.classNames?.details) ?? ''] }\"\n    :options=\"menuFloatingOptions\"\n    close-on-content-click\n    full-width\n    :error-messages=\"errorMessages\"\n    :success-messages=\"successMessages\"\n    :hint=\"hint\"\n    :dense=\"dense\"\n    :show-details=\"detailsMode !== 'hidden'\"\n    :details=\"detailsMode === 'auto' ? 'auto' : 'reserve'\"\n    :disabled=\"disabled\"\n    disable-auto-focus\n    role=\"listbox\"\n  >\n    <template\n      v-if=\"label\"\n      #label\n    >\n      <RuiFieldLabel\n        :id=\"labelId\"\n        :text=\"label\"\n        :hidden=\"placement === 'hidden'\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n      />\n    </template>\n    <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ disabled, value, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n      >\n        <!-- a select-only combobox: the button opens a listbox of options, and carries the field's state -->\n        <button\n          ref=\"activator\"\n          role=\"combobox\"\n          :disabled=\"disabled\"\n          :aria-disabled=\"disabled\"\n          :aria-expanded=\"isOpen\"\n          :aria-readonly=\"readOnly || undefined\"\n          :aria-required=\"required || undefined\"\n          :aria-busy=\"loading || undefined\"\n          :aria-labelledby=\"label ? labelId : undefined\"\n          type=\"button\"\n          :tabindex=\"disabled || readOnly ? -1 : 0\"\n          :class=\"ui.activator({ class: cn(classNames?.label) })\"\n          v-bind=\"{\n            ...getNonRootAttrs($attrs),\n            ...(readOnly ? {} : attrs),\n          }\"\n          data-id=\"activator\"\n          :aria-invalid=\"hasError\"\n          @mouseenter=\"isHovered = true\"\n          @mouseleave=\"isHovered = false\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n          @keydown.enter.prevent=\"applyHighlighted()\"\n          @keydown.space.prevent=\"applyHighlighted()\"\n          @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n          @keydown.end.prevent=\"modelHighlightedIndex = options.length - 1\"\n        >\n          <span\n            v-if=\"value\"\n            :class=\"ui.value()\"\n          >\n            <slot\n              name=\"selection.prepend\"\n              v-bind=\"{ item: value }\"\n            />\n            <slot\n              name=\"selection\"\n              v-bind=\"{ item: value }\"\n            >\n              {{ getText(value) }}\n            </slot>\n          </span>\n\n          <span\n            v-if=\"clearable && value && !disabled && !readOnly\"\n            data-id=\"clear\"\n            :class=\"[ui.clear(), focused && 'visible!', { 'mr-2': !dense }]\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              name=\"lu-x\"\n              size=\"16\"\n            />\n          </span>\n\n          <span :class=\"ui.iconWrapper()\">\n            <RuiIcon\n              :class=\"ui.icon()\"\n              :size=\"dense ? 16 : 20\"\n              name=\"lu-chevron-down\"\n            />\n          </span>\n\n          <RuiProgress\n            v-if=\"loading\"\n            :class=\"ui.progress()\"\n            color=\"primary\"\n            thickness=\"2\"\n            variant=\"indeterminate\"\n          />\n        </button>\n        <fieldset :class=\"ui.fieldset()\" />\n      </slot>\n      <input\n        :value=\"valueKey\"\n        class=\"hidden\"\n        type=\"hidden\"\n      />\n    </template>\n    <template #default=\"{ width }\">\n      <div\n        v-if=\"options.length > 0\"\n        :ref=\"containerProps.ref\"\n        :class=\"ui.menu({ class: cn(classNames?.menu) })\"\n        :style=\"[containerProps.style, { width: `${width}px`, minWidth: menuWidth }]\"\n        @scroll=\"containerProps.onScroll\"\n        @keydown.up.prevent=\"moveHighlight(true)\"\n        @keydown.down.prevent=\"moveHighlight(false)\"\n      >\n        <div\n          v-bind=\"wrapperProps\"\n          ref=\"menuRef\"\n        >\n          <RuiButton\n            v-for=\"{ item, _index } in renderedData\"\n            :key=\"getIdentifier(item)\"\n            :active=\"isActiveItem(item)\"\n            role=\"option\"\n            :aria-selected=\"isActiveItem(item)\"\n            :size=\"dense ? 'sm' : undefined\"\n            variant=\"list\"\n            :data-highlighted=\"modelHighlightedIndex === _index\"\n            :class=\"{\n              [highlightedClass]: !isActiveItem(item) && modelHighlightedIndex === _index,\n            }\"\n            @click=\"setValue(item)\"\n          >\n            <template #prepend>\n              <slot\n                name=\"item.prepend\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n            <slot\n              name=\"item\"\n              v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n            >\n              {{ getText(item) }}\n            </slot>\n            <template #append>\n              <slot\n                name=\"item.append\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n          </RuiButton>\n        </div>\n      </div>\n\n      <div\n        v-else-if=\"!hideNoData\"\n        data-id=\"no-data\"\n        :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n        :class=\"classNames?.menu\"\n      >\n        <slot name=\"no-data\">\n          <div class=\"p-4\">\n            {{ noDataText }}\n          </div>\n        </slot>\n      </div>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":"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"}

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

@@ -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":""}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -0,0 +1,2 @@
+/** The native select dressed as the other fields: a 36px bordered box with their hover, focus and disabled looks. */
+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

@@ -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

@@ -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

@@ -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":""}
+{"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

@@ -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

@@ -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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"}
+{"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"}

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

@@ -0,0 +1,151 @@
+export declare const switchStyles: import("tailwind-variants").TVReturnType<{
+    underLabel: {
+        true: {
+            details: string;
+        };
+        false: {};
+    };
+    checked: {
+        true: {
+            toggle: string;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            wrapper: string;
+            input: string;
+            toggle: string;
+            label: string;
+        };
+    };
+    size: {
+        sm: {
+            inner: string;
+            toggle: string;
+        };
+    };
+    validation: {
+        error: {
+            input: string;
+        };
+        success: {
+            input: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    wrapper: string;
+    inner: string;
+    input: string;
+    toggle: string;
+    label: string;
+    details: string;
+}, undefined, {
+    underLabel: {
+        true: {
+            details: string;
+        };
+        false: {};
+    };
+    checked: {
+        true: {
+            toggle: string;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            wrapper: string;
+            input: string;
+            toggle: string;
+            label: string;
+        };
+    };
+    size: {
+        sm: {
+            inner: string;
+            toggle: string;
+        };
+    };
+    validation: {
+        error: {
+            input: string;
+        };
+        success: {
+            input: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    wrapper: string;
+    inner: string;
+    input: string;
+    toggle: string;
+    label: string;
+    details: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    underLabel: {
+        true: {
+            details: string;
+        };
+        false: {};
+    };
+    checked: {
+        true: {
+            toggle: string;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            wrapper: string;
+            input: string;
+            toggle: string;
+            label: string;
+        };
+    };
+    size: {
+        sm: {
+            inner: string;
+            toggle: string;
+        };
+    };
+    validation: {
+        error: {
+            input: string;
+        };
+        success: {
+            input: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    wrapper: string;
+    inner: string;
+    input: string;
+    toggle: string;
+    label: string;
+    details: string;
+}>>;