@rotki/ui-library 3.1.7 → 3.3.0

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

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

@@ -1,4 +1,5 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
+import type { InputAttributes } from '../../../types/attributes.js';
 import type { VueClassValue } from '../../../types/class-value.js';
 import { type FormDetails } from '../../../utils/form-text-detail.js';
 export interface RuiSliderClassNames {
@@ -28,7 +29,7 @@ export interface Props {
     classNames?: RuiSliderClassNames;
     required?: boolean;
 }
-type __VLS_Props = Props;
+type __VLS_Props = Props & /* @vue-ignore */ Omit<InputAttributes, keyof Props>;
 type __VLS_ModelProps = {
     modelValue?: number;
 };

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

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

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 type { InputAttributes } from '@/types/attributes';\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 & /* @vue-ignore */ Omit<InputAttributes, keyof 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.d.ts

@@ -1,4 +1,5 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
+import type { InputAttributes } from '../../../types/attributes.js';
 import { type FormDetails } from '../../../utils/form-text-detail.js';
 export interface Props {
     disabled?: boolean;
@@ -16,7 +17,7 @@ export interface Props {
     detailsUnderLabel?: boolean;
     required?: boolean;
 }
-type __VLS_Props = Props;
+type __VLS_Props = Props & /* @vue-ignore */ Omit<InputAttributes, keyof Props>;
 type __VLS_Slots = {
     default?: () => any;
 };

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 type { InputAttributes } from '@/types/attributes';\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 & /* @vue-ignore */ Omit<InputAttributes, keyof 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,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;
+}>>;

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

@@ -0,0 +1,131 @@
+import { tv } from "../../../utils/tv.js";
+//#region src/components/forms/switch/switch-styles.ts
+var 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
+	}
+});
+//#endregion
+export { switchStyles };
+
+//# sourceMappingURL=switch-styles.js.map