@rotki/ui-library 2.16.1 → 2.16.2

package/dist/components/accordions/accordion/RuiAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordion.js","names":[],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n  /** @deprecated Use `classNames.header` instead */\n  headerClass?: string;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n  headerClass = '',\n  contentClass = '',\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col items-start\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"flex gap-2 items-center cursor-pointer outline-none focus-visible:bg-rui-primary/10 rounded\"\n      :class=\"[classNames?.header ?? headerClass, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"text-rui-text-secondary transition-transform\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-all overflow-hidden w-full\"\n      :class=\"classNames?.content ?? contentClass\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAccordion.js","names":[],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n  /** @deprecated Use `classNames.header` instead */\n  headerClass?: string;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n  headerClass = '',\n  contentClass = '',\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"flex gap-2 items-center cursor-pointer outline-none focus-visible:bg-rui-primary/10 rounded\"\n      :class=\"[classNames?.header ?? headerClass, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"text-rui-text-secondary transition-transform\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-all overflow-hidden w-full\"\n      :class=\"classNames?.content ?? contentClass\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { cn, tv } from "../../../utils/tv.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, unref, useId, useTemplateRef } from "vue";
 import { useElementSize } from "@vueuse/core";
@@ -48,12 +49,16 @@ var RuiAccordion_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				toggle();
 			}
 		}
+		const rootStyle = tv({ base: "flex flex-col items-start" });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
-				class: "flex flex-col items-start",
+				class: unref(rootStyle)({ class: unref(cn)(__props.classNames?.root ?? _ctx.$attrs.class) }),
 				"data-state": __props.open ? "open" : "closed",
 				"data-accordion": ""
-			}, _ctx.$attrs), [_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+			}, {
+				..._ctx.$attrs,
+				class: void 0
+			}), [_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				id: unref(triggerId),
 				class: normalizeClass(["flex gap-2 items-center cursor-pointer outline-none focus-visible:bg-rui-primary/10 rounded", [__props.classNames?.header ?? __props.headerClass, { "w-full": __props.headerGrow }]]),

package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordion.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n  /** @deprecated Use `classNames.header` instead */\n  headerClass?: string;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n  headerClass = '',\n  contentClass = '',\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col items-start\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"flex gap-2 items-center cursor-pointer outline-none focus-visible:bg-rui-primary/10 rounded\"\n      :class=\"[classNames?.header ?? headerClass, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"text-rui-text-secondary transition-transform\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-all overflow-hidden w-full\"\n      :class=\"classNames?.content ?? contentClass\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,MAAM,OAAO;EASb,MAAM,QAAQ,eAA+B,QAAQ;EAErD,MAAM,YAAY,OAAO;EACzB,MAAM,YAAY,OAAO;EACzB,MAAM,EAAE,QAAQ,gBAAgB,eAAe,MAAM;EAErD,MAAM,gBAAgB,eAAwB,QAAA,OAAO,GAAG,MAAI,YAAY,CAAC,MAAM,MAAO;EAEtF,SAAS,SAAe;AACtB,QAAK,QAAQ;;EAGf,SAAS,UAAU,OAA4B;AAC7C,OAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,gBAAgB;AACtB,YAAQ;;;;uBAMV,mBA6CM,OA7CN,WA6CM;IA5CJ,OAAM;IACL,cAAY,QAAA,OAAI,SAAA;IACjB,kBAAA;MACQA,KAAAA,OAAM,EAAA,CAGNC,KAAAA,OAAO,UAAA,WAAA,EADf,mBAwBM,OAAA;;IAtBH,IAAI,MAAA,UAAS;IACd,OAAK,eAAA,CAAC,+FAA6F,CAC1F,QAAA,YAAY,UAAU,QAAA,aAAW,EAAA,UAAc,QAAA,YAAU,CAAA,CAAA,CAAA;IAClE,MAAK;IACL,UAAS;IACR,iBAAe,QAAA;IACf,iBAAe,MAAA,UAAS;IACzB,0BAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAM;IACb,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,OAAM;OAE1B,mBAKM,OAAA,EALA,OAAK,eAAA,EAAA,MAAU,QAAA,YAAU,CAAA,EAAA,EAAA,CAC7B,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,MAAI,CAAA,CAAA,EAAA,EAAA,EAGf,YAIE,iBAAA;IAHA,OAAK,eAAA,CAAC,gDAA8C,EAAA,eAC3B,QAAA,MAAI,CAAA,CAAA;IAC7B,MAAK;6EAID,QAAA,QAAQ,QAAA,SAAA,WAAA,EADhB,mBAaM,OAAA;;IAXH,IAAI,MAAA,UAAS;IACd,OAAK,eAAA,CAAC,8CACE,QAAA,YAAY,WAAW,QAAA,aAAY,CAAA;IAC1C,OAAK,eAAA,EAAA,QAAY,MAAA,cAAa,EAAA,CAAA;IAC/B,MAAK;IACJ,mBAAiB,MAAA,UAAS;IAC3B,0BAAA;OAEA,mBAEM,OAAA;aAFG;IAAJ,KAAI;OACP,WAAuB,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,CAAA,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA"}
+{"version":3,"file":"RuiAccordion.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n  /** @deprecated Use `classNames.header` instead */\n  headerClass?: string;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n  headerClass = '',\n  contentClass = '',\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"flex gap-2 items-center cursor-pointer outline-none focus-visible:bg-rui-primary/10 rounded\"\n      :class=\"[classNames?.header ?? headerClass, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"text-rui-text-secondary transition-transform\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-all overflow-hidden w-full\"\n      :class=\"classNames?.content ?? contentClass\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,OAAO;EASb,MAAM,QAAQ,eAA+B,QAAQ;EAErD,MAAM,YAAY,OAAO;EACzB,MAAM,YAAY,OAAO;EACzB,MAAM,EAAE,QAAQ,gBAAgB,eAAe,MAAM;EAErD,MAAM,gBAAgB,eAAwB,QAAA,OAAO,GAAG,MAAI,YAAY,CAAC,MAAM,MAAO;EAEtF,SAAS,SAAe;AACtB,QAAK,QAAQ;;EAGf,SAAS,UAAU,OAA4B;AAC7C,OAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,gBAAgB;AACtB,YAAQ;;;EAIZ,MAAM,YAAY,GAAG,EAAE,MAAM,6BAA6B,CAAC;;uBAIzD,mBA6CM,OA7CN,WA6CM;IA5CH,OAAO,MAAA,UAAS,CAAA,EAAA,OAAU,MAAA,GAAE,CAAC,QAAA,YAAY,QAAQA,KAAAA,OAAO,MAAK,EAAA,CAAA;IAC7D,cAAY,QAAA,OAAI,SAAA;IACjB,kBAAA;;OACaA,KAAAA;IAAM,OAAS,KAAA;IAAS,CAAA,EAAA,CAG7BC,KAAAA,OAAO,UAAA,WAAA,EADf,mBAwBM,OAAA;;IAtBH,IAAI,MAAA,UAAS;IACd,OAAK,eAAA,CAAC,+FAA6F,CAC1F,QAAA,YAAY,UAAU,QAAA,aAAW,EAAA,UAAc,QAAA,YAAU,CAAA,CAAA,CAAA;IAClE,MAAK;IACL,UAAS;IACR,iBAAe,QAAA;IACf,iBAAe,MAAA,UAAS;IACzB,0BAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAM;IACb,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,OAAM;OAE1B,mBAKM,OAAA,EALA,OAAK,eAAA,EAAA,MAAU,QAAA,YAAU,CAAA,EAAA,EAAA,CAC7B,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,MAAI,CAAA,CAAA,EAAA,EAAA,EAGf,YAIE,iBAAA;IAHA,OAAK,eAAA,CAAC,gDAA8C,EAAA,eAC3B,QAAA,MAAI,CAAA,CAAA;IAC7B,MAAK;6EAID,QAAA,QAAQ,QAAA,SAAA,WAAA,EADhB,mBAaM,OAAA;;IAXH,IAAI,MAAA,UAAS;IACd,OAAK,eAAA,CAAC,8CACE,QAAA,YAAY,WAAW,QAAA,aAAY,CAAA;IAC1C,OAAK,eAAA,EAAA,QAAY,MAAA,cAAa,EAAA,CAAA;IAC/B,MAAK;IACJ,mBAAiB,MAAA,UAAS;IAC3B,0BAAA;OAEA,mBAEM,OAAA;aAFG;IAAJ,KAAI;OACP,WAAuB,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,CAAA,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA"}

package/dist/components/buttons/button/RuiButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButton.js","names":[],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonSize, ButtonVariant, FAB_DEFAULT_ELEVATION, getButtonSpinnerSize, NO_ELEVATION } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  elevation?: number | string | null;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  elevation = null,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:modelValue': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst defaultElevation = computed<number>(() => variant === ButtonVariant.fab ? FAB_DEFAULT_ELEVATION : NO_ELEVATION);\nconst usedElevation = computed<number | string>(() => disabled ? NO_ELEVATION : elevation ?? get(defaultElevation));\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(size));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant,\n  color: color ?? 'grey',\n  size,\n  rounded,\n  icon,\n  active,\n  loading,\n  hideFocusIndicator,\n}));\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"[\n      ui.root(),\n      `shadow-${usedElevation}`,\n    ]\"\n    :disabled=\"disabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-active=\"active || undefined\"\n    v-bind=\"$attrs\"\n    @click=\"emit('update:modelValue', btnValue)\"\n  >\n    <slot name=\"prepend\" />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n  </Component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiButton.js","names":[],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonSize, ButtonVariant, FAB_DEFAULT_ELEVATION, getButtonSpinnerSize, NO_ELEVATION } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  elevation?: number | string | null;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  elevation = null,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:modelValue': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst defaultElevation = computed<number>(() => variant === ButtonVariant.fab ? FAB_DEFAULT_ELEVATION : NO_ELEVATION);\nconst usedElevation = computed<number | string>(() => disabled ? NO_ELEVATION : elevation ?? get(defaultElevation));\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(size));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant,\n  color: color ?? 'grey',\n  size,\n  rounded,\n  icon,\n  active,\n  loading,\n  hideFocusIndicator,\n}));\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"[\n      ui.root({ class: cn($attrs.class) }),\n      `shadow-${usedElevation}`,\n    ]\"\n    :disabled=\"disabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-active=\"active || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"emit('update:modelValue', btnValue)\"\n  >\n    <slot name=\"prepend\" />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n  </Component>\n</template>\n"],"mappings":""}

package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { cn } from "../../../utils/tv.js";
 import { ButtonVariant, getButtonSpinnerSize } from "./button-props.js";
 import { buttonStyles } from "./button-styles.js";
 import RuiProgress_default from "../../progress/RuiProgress.js";
@@ -61,13 +62,16 @@ var RuiButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps({
-				class: [unref(ui).root(), `shadow-${unref(usedElevation)}`],
+				class: [unref(ui).root({ class: unref(cn)(_ctx.$attrs.class) }), `shadow-${unref(usedElevation)}`],
 				disabled: __props.disabled || __props.loading,
 				type: __props.tag === "button" ? __props.type : void 0,
 				"data-variant": __props.variant,
 				"data-color": __props.color,
 				"data-active": __props.active || void 0
-			}, _ctx.$attrs, { onClick: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", unref(btnValue))) }), {
+			}, {
+				..._ctx.$attrs,
+				class: void 0
+			}, { onClick: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", unref(btnValue))) }), {
 				default: withCtx(() => [
 					renderSlot(_ctx.$slots, "prepend"),
 					slots.default ? (openBlock(), createElementBlock("span", {

package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonSize, ButtonVariant, FAB_DEFAULT_ELEVATION, getButtonSpinnerSize, NO_ELEVATION } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  elevation?: number | string | null;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  elevation = null,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:modelValue': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst defaultElevation = computed<number>(() => variant === ButtonVariant.fab ? FAB_DEFAULT_ELEVATION : NO_ELEVATION);\nconst usedElevation = computed<number | string>(() => disabled ? NO_ELEVATION : elevation ?? get(defaultElevation));\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(size));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant,\n  color: color ?? 'grey',\n  size,\n  rounded,\n  icon,\n  active,\n  loading,\n  hideFocusIndicator,\n}));\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"[\n      ui.root(),\n      `shadow-${usedElevation}`,\n    ]\"\n    :disabled=\"disabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-active=\"active || undefined\"\n    v-bind=\"$attrs\"\n    @click=\"emit('update:modelValue', btnValue)\"\n  >\n    <slot name=\"prepend\" />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n  </Component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,OAAO;EAIb,MAAM,QAAQ,UAIV;EAEJ,MAAM,WAAW,eAA8B,QAAA,WAAW;EAE1D,MAAM,mBAAmB,eAAuB,QAAA,YAAY,cAAc,MAAA,IAAA,EAA2C;EACrH,MAAM,gBAAgB,eAAgC,QAAA,WAAA,IAA0B,QAAA,aAAa,IAAI,iBAAiB,CAAC;EAEnH,MAAM,cAAc,eAAuB,qBAAqB,QAAA,KAAK,CAAC;EAEtE,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAM,QAAA;GACN,OAAO,QAAA,SAAS;GAChB,MAAG,QAAA;GACH,SAAM,QAAA;GACN,MAAG,QAAA;GACH,QAAK,QAAA;GACL,SAAM,QAAA;GACN,oBAAiB,QAAA;GAClB,CAAC,CAAC;;uBAID,YAgCY,wBA/BL,QAAA,IAAG,EADV,WAgCY;IA9BT,OAAK,CAAU,MAAA,GAAE,CAAC,MAAI,EAAA,UAAoB,MAAA,cAAa,GAAA;IAIvD,UAAU,QAAA,YAAY,QAAA;IACtB,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO,KAAA;IAChC,gBAAc,QAAA;IACd,cAAY,QAAA;IACZ,eAAa,QAAA,UAAU,KAAA;MAChBA,KAAAA,QAAM,EACb,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,qBAAsB,MAAA,SAAQ,CAAA,GAAA,CAAA,EAAA;2BAEnB;KAAvB,WAAuB,KAAA,QAAA,UAAA;KAEf,MAAM,WAAA,WAAA,EADd,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,GAAE,CAAC,OAAK,CAAA;MAChB,WAAQ;SAER,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAEV,WAAsB,KAAA,QAAA,SAAA;KAEd,QAAA,WAAA,WAAA,EADR,YAQE,qBAAA;;MANA,UAAA;MACA,gBAAA;MACC,OAAK,eAAE,MAAA,GAAE,CAAC,SAAO,CAAA;MAClB,SAAQ;MACR,WAAU;MACT,MAAM,MAAA,YAAA"}
+{"version":3,"file":"RuiButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonSize, ButtonVariant, FAB_DEFAULT_ELEVATION, getButtonSpinnerSize, NO_ELEVATION } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  elevation?: number | string | null;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  elevation = null,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:modelValue': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst defaultElevation = computed<number>(() => variant === ButtonVariant.fab ? FAB_DEFAULT_ELEVATION : NO_ELEVATION);\nconst usedElevation = computed<number | string>(() => disabled ? NO_ELEVATION : elevation ?? get(defaultElevation));\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(size));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant,\n  color: color ?? 'grey',\n  size,\n  rounded,\n  icon,\n  active,\n  loading,\n  hideFocusIndicator,\n}));\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"[\n      ui.root({ class: cn($attrs.class) }),\n      `shadow-${usedElevation}`,\n    ]\"\n    :disabled=\"disabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-active=\"active || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"emit('update:modelValue', btnValue)\"\n  >\n    <slot name=\"prepend\" />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n  </Component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,OAAO;EAIb,MAAM,QAAQ,UAIV;EAEJ,MAAM,WAAW,eAA8B,QAAA,WAAW;EAE1D,MAAM,mBAAmB,eAAuB,QAAA,YAAY,cAAc,MAAA,IAAA,EAA2C;EACrH,MAAM,gBAAgB,eAAgC,QAAA,WAAA,IAA0B,QAAA,aAAa,IAAI,iBAAiB,CAAC;EAEnH,MAAM,cAAc,eAAuB,qBAAqB,QAAA,KAAK,CAAC;EAEtE,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAM,QAAA;GACN,OAAO,QAAA,SAAS;GAChB,MAAG,QAAA;GACH,SAAM,QAAA;GACN,MAAG,QAAA;GACH,QAAK,QAAA;GACL,SAAM,QAAA;GACN,oBAAiB,QAAA;GAClB,CAAC,CAAC;;uBAID,YAgCY,wBA/BL,QAAA,IAAG,EADV,WAgCY;IA9BT,OAAK,CAAU,MAAA,GAAE,CAAC,KAAI,EAAA,OAAU,MAAA,GAAE,CAACA,KAAAA,OAAO,MAAK,EAAA,CAAA,EAAA,UAAsB,MAAA,cAAa,GAAA;IAIlF,UAAU,QAAA,YAAY,QAAA;IACtB,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO,KAAA;IAChC,gBAAc,QAAA;IACd,cAAY,QAAA;IACZ,eAAa,QAAA,UAAU,KAAA;;OACXA,KAAAA;IAAM,OAAS,KAAA;IAAS,EAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,qBAAsB,MAAA,SAAQ,CAAA,GAAA,CAAA,EAAA;2BAEnB;KAAvB,WAAuB,KAAA,QAAA,UAAA;KAEf,MAAM,WAAA,WAAA,EADd,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,GAAE,CAAC,OAAK,CAAA;MAChB,WAAQ;SAER,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAEV,WAAsB,KAAA,QAAA,SAAA;KAEd,QAAA,WAAA,WAAA,EADR,YAQE,qBAAA;;MANA,UAAA;MACA,gBAAA;MACC,OAAK,eAAE,MAAA,GAAE,CAAC,SAAO,CAAA;MAClB,SAAQ;MACR,WAAU;MACT,MAAM,MAAA,YAAA"}

package/dist/components/buttons/button/button-styles.d.ts

@@ -1,9 +1,7 @@
 export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
     variant: {
         default: {};
-        outlined: {
-            root: string;
-        };
+        outlined: {};
         text: {
             root: string;
         };
@@ -64,6 +62,7 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
         true: {
             root: string;
         };
+        false: {};
     };
     hideFocusIndicator: {
         true: {
@@ -77,9 +76,7 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     variant: {
         default: {};
-        outlined: {
-            root: string;
-        };
+        outlined: {};
         text: {
             root: string;
         };
@@ -140,6 +137,7 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
         true: {
             root: string;
         };
+        false: {};
     };
     hideFocusIndicator: {
         true: {
@@ -153,9 +151,7 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
 }, import("tailwind-variants").TVReturnType<{
     variant: {
         default: {};
-        outlined: {
-            root: string;
-        };
+        outlined: {};
         text: {
             root: string;
         };
@@ -216,6 +212,7 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
         true: {
             root: string;
         };
+        false: {};
     };
     hideFocusIndicator: {
         true: {

package/dist/components/buttons/button/button-styles.js

@@ -4,10 +4,10 @@ var buttonStyles = tv({
 	slots: {
 		root: [
 			"text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]",
-			"flex items-center justify-center gap-x-2 relative",
-			"px-6 py-2.5 rounded transition-all",
-			"!disabled:bg-black/[.12] dark:!disabled:bg-white/[.12] !disabled:text-rui-text-disabled !disabled:active:text-rui-text-disabled",
-			"!focus-visible:ring-2"
+			"flex items-center justify-center gap-x-2",
+			"px-4 py-1.5 rounded transition-all",
+			"disabled:cursor-not-allowed",
+			"focus-visible:!ring-2"
 		].join(" "),
 		label: "inline-block text-nowrap",
 		spinner: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
@@ -15,17 +15,17 @@ var buttonStyles = tv({
 	variants: {
 		variant: {
 			default: {},
-			outlined: { root: "!disabled:bg-transparent !disabled:active:bg-transparent disabled:outline-rui-text-disabled" },
-			text: { root: "px-3 !disabled:bg-transparent !disabled:active:bg-transparent" },
+			outlined: {},
+			text: { root: "px-2" },
 			fab: { root: "rounded-full py-2" },
 			list: {
-				root: "p-3 px-3 rounded-none w-full justify-start text-left !disabled:bg-transparent !disabled:active:bg-transparent",
+				root: "p-3 px-3 rounded-none w-full justify-start text-left",
 				label: "w-full"
 			}
 		},
 		size: {
-			sm: { root: "px-4 py-1.5 text-[.8125rem] leading-5" },
-			lg: { root: "px-8 py-3 text-base leading-5" }
+			sm: { root: "px-2.5 py-1 text-[.8125rem] leading-5" },
+			lg: { root: "px-6 py-2 text-[1rem] leading-5" }
 		},
 		color: {
 			grey: { root: "bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600" },
@@ -42,10 +42,32 @@ var buttonStyles = tv({
 			true: {},
 			false: {}
 		},
-		loading: { true: { root: "space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible" } },
-		hideFocusIndicator: { true: { root: "!focus-visible:ring-0" } }
+		loading: {
+			true: { root: "relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible" },
+			false: {}
+		},
+		hideFocusIndicator: { true: { root: "focus-visible:!ring-0" } }
 	},
 	compoundVariants: [
+		{
+			loading: false,
+			class: { root: "disabled:!bg-black/[.12] dark:disabled:!bg-white/[.12] disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled" }
+		},
+		{
+			loading: false,
+			variant: "outlined",
+			class: { root: "disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:outline-rui-text-disabled" }
+		},
+		{
+			loading: false,
+			variant: "text",
+			class: { root: "disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent" }
+		},
+		{
+			loading: false,
+			variant: "list",
+			class: { root: "disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent" }
+		},
 		{
 			color: "grey",
 			active: true,
@@ -58,7 +80,7 @@ var buttonStyles = tv({
 				"text",
 				"list"
 			],
-			class: { root: "bg-transparent hover:bg-black/[.04] active:bg-black/10 dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text" }
+			class: { root: "bg-transparent hover:bg-black/[.04] active:bg-black/10 dark:bg-transparent dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text" }
 		},
 		{
 			color: "grey",
@@ -87,7 +109,7 @@ var buttonStyles = tv({
 				"text",
 				"list"
 			],
-			class: { root: "bg-transparent hover:bg-rui-primary-lighter/[.04] active:bg-rui-primary-lighter/10 text-rui-primary" }
+			class: { root: "bg-transparent hover:bg-rui-primary-lighter/[.04] active:bg-rui-primary-lighter/10 text-rui-primary dark:text-rui-primary" }
 		},
 		{
 			color: "secondary",
@@ -96,7 +118,7 @@ var buttonStyles = tv({
 				"text",
 				"list"
 			],
-			class: { root: "bg-transparent hover:bg-rui-secondary-lighter/[.04] active:bg-rui-secondary-lighter/10 text-rui-secondary" }
+			class: { root: "bg-transparent hover:bg-rui-secondary-lighter/[.04] active:bg-rui-secondary-lighter/10 text-rui-secondary dark:text-rui-secondary" }
 		},
 		{
 			color: "error",
@@ -105,7 +127,7 @@ var buttonStyles = tv({
 				"text",
 				"list"
 			],
-			class: { root: "bg-transparent hover:bg-rui-error-lighter/[.04] active:bg-rui-error-lighter/10 text-rui-error" }
+			class: { root: "bg-transparent hover:bg-rui-error-lighter/[.04] active:bg-rui-error-lighter/10 text-rui-error dark:text-rui-error" }
 		},
 		{
 			color: "warning",
@@ -114,7 +136,7 @@ var buttonStyles = tv({
 				"text",
 				"list"
 			],
-			class: { root: "bg-transparent hover:bg-rui-warning-lighter/[.04] active:bg-rui-warning-lighter/10 text-rui-warning" }
+			class: { root: "bg-transparent hover:bg-rui-warning-lighter/[.04] active:bg-rui-warning-lighter/10 text-rui-warning dark:text-rui-warning" }
 		},
 		{
 			color: "info",
@@ -123,7 +145,7 @@ var buttonStyles = tv({
 				"text",
 				"list"
 			],
-			class: { root: "bg-transparent hover:bg-rui-info-lighter/[.04] active:bg-rui-info-lighter/10 text-rui-info" }
+			class: { root: "bg-transparent hover:bg-rui-info-lighter/[.04] active:bg-rui-info-lighter/10 text-rui-info dark:text-rui-info" }
 		},
 		{
 			color: "success",
@@ -132,7 +154,7 @@ var buttonStyles = tv({
 				"text",
 				"list"
 			],
-			class: { root: "bg-transparent hover:bg-rui-success-lighter/[.04] active:bg-rui-success-lighter/10 text-rui-success" }
+			class: { root: "bg-transparent hover:bg-rui-success-lighter/[.04] active:bg-rui-success-lighter/10 text-rui-success dark:text-rui-success" }
 		},
 		{
 			color: "primary",
@@ -257,12 +279,12 @@ var buttonStyles = tv({
 		{
 			variant: "text",
 			size: "sm",
-			class: { root: "px-2" }
+			class: { root: "px-1.5" }
 		},
 		{
 			variant: "text",
 			size: "lg",
-			class: { root: "px-4" }
+			class: { root: "px-2.5" }
 		},
 		{
 			variant: "fab",

package/dist/components/buttons/button/button-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]',\n      'flex items-center justify-center gap-x-2 relative',\n      'px-6 py-2.5 rounded transition-all',\n      '!disabled:bg-black/[.12] dark:!disabled:bg-white/[.12] !disabled:text-rui-text-disabled !disabled:active:text-rui-text-disabled',\n      '!focus-visible:ring-2',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: { root: '!disabled:bg-transparent !disabled:active:bg-transparent disabled:outline-rui-text-disabled' },\n      text: { root: 'px-3 !disabled:bg-transparent !disabled:active:bg-transparent' },\n      fab: { root: 'rounded-full py-2' },\n      list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left !disabled:bg-transparent !disabled:active:bg-transparent', label: 'w-full' },\n    },\n    size: {\n      sm: { root: 'px-4 py-1.5 text-[.8125rem] leading-5' },\n      lg: { root: 'px-8 py-3 text-base leading-5' },\n    },\n    color: {\n      grey: { root: 'bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600' },\n      primary: { root: 'bg-rui-primary hover:bg-rui-primary-darker active:bg-rui-primary-darker/90 text-rui-dark-text ring-rui-primary/40 dark:text-rui-text dark:ring-rui-primary/60' },\n      secondary: { root: 'bg-rui-secondary hover:bg-rui-secondary-darker active:bg-rui-secondary-darker/90 text-rui-dark-text ring-rui-secondary/40 dark:text-rui-text dark:ring-rui-secondary/60' },\n      error: { root: 'bg-rui-error hover:bg-rui-error-darker active:bg-rui-error-darker/90 text-rui-dark-text ring-rui-error/40 dark:text-rui-text dark:ring-rui-error/60' },\n      warning: { root: 'bg-rui-warning hover:bg-rui-warning-darker active:bg-rui-warning-darker/90 text-rui-dark-text ring-rui-warning/40 dark:text-rui-text dark:ring-rui-warning/60' },\n      info: { root: 'bg-rui-info hover:bg-rui-info-darker active:bg-rui-info-darker/90 text-rui-dark-text ring-rui-info/40 dark:text-rui-text dark:ring-rui-info/60' },\n      success: { root: 'bg-rui-success hover:bg-rui-success-darker active:bg-rui-success-darker/90 text-rui-dark-text ring-rui-success/40 dark:text-rui-text dark:ring-rui-success/60' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      true: { root: 'rounded-full px-3 py-3' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible' },\n    },\n    hideFocusIndicator: {\n      true: { root: '!focus-visible:ring-0' },\n    },\n  },\n  compoundVariants: [\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-grey-50' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-black/[.04] active:bg-black/10 dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-black/10 dark:bg-white/30' } },\n    { color: 'grey', variant: 'outlined', class: { root: 'outline-rui-text' } },\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n    // === Context colors — outlined/text variants ===\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary-lighter/[.04] active:bg-rui-primary-lighter/10 text-rui-primary' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary-lighter/[.04] active:bg-rui-secondary-lighter/10 text-rui-secondary' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error-lighter/[.04] active:bg-rui-error-lighter/10 text-rui-error' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning-lighter/[.04] active:bg-rui-warning-lighter/10 text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info-lighter/[.04] active:bg-rui-info-lighter/10 text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success-lighter/[.04] active:bg-rui-success-lighter/10 text-rui-success' } },\n\n    // === Context colors — active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // === Context colors — active outlined/text ===\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary-lighter/30' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary-lighter/30' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error-lighter/30' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning-lighter/30' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info-lighter/30' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success-lighter/30' } },\n\n    // === Context colors — outlined border ===\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'sm', class: { root: 'px-2' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-4' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-1' } },\n    { icon: true, size: 'sm', class: { root: 'px-1 py-1' } },\n    { icon: true, size: 'lg', class: { root: 'px-4 py-4' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n  ],\n  compoundSlots: [\n    // Dark mode default variant text override for warning/success/info\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'default', class: 'dark:text-rui-light-text' },\n    // Dark mode active outlined/text override for primary/secondary\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary-darker/60 dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary-darker/60 dark:text-rui-secondary-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]',\n      // `position: relative` is only needed as a positioning context for the\n      // absolute-positioned loading spinner; applied via the `loading` variant\n      // below. Putting it here would collide with consumers that need to pin\n      // the button with `fixed`/`absolute` (cascade order picks the later\n      // utility — usually `relative` — and the consumer's `right-*`/`bottom-*`\n      // end up as relative offsets, which misplaces FABs).\n      'flex items-center justify-center gap-x-2',\n      'px-4 py-1.5 rounded transition-all',\n      // `disabled` on the element covers two states: actually disabled and\n      // loading (RuiButton sets `disabled = disabled || loading`). The\n      // color/bg/text overrides for the \"grey disabled\" look live in the\n      // `loading: false` compounds below so they skip firing on loading\n      // buttons — where we want the variant color to stay visible behind\n      // the spinner. Cursor stays here since both states are non-clickable.\n      'disabled:cursor-not-allowed',\n      'focus-visible:!ring-2',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2' },\n      list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full' },\n    },\n    size: {\n      sm: { root: 'px-2.5 py-1 text-[.8125rem] leading-5' },\n      lg: { root: 'px-6 py-2 text-[1rem] leading-5' },\n    },\n    color: {\n      grey: { root: 'bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600' },\n      primary: { root: 'bg-rui-primary hover:bg-rui-primary-darker active:bg-rui-primary-darker/90 text-rui-dark-text ring-rui-primary/40 dark:text-rui-text dark:ring-rui-primary/60' },\n      secondary: { root: 'bg-rui-secondary hover:bg-rui-secondary-darker active:bg-rui-secondary-darker/90 text-rui-dark-text ring-rui-secondary/40 dark:text-rui-text dark:ring-rui-secondary/60' },\n      error: { root: 'bg-rui-error hover:bg-rui-error-darker active:bg-rui-error-darker/90 text-rui-dark-text ring-rui-error/40 dark:text-rui-text dark:ring-rui-error/60' },\n      warning: { root: 'bg-rui-warning hover:bg-rui-warning-darker active:bg-rui-warning-darker/90 text-rui-dark-text ring-rui-warning/40 dark:text-rui-text dark:ring-rui-warning/60' },\n      info: { root: 'bg-rui-info hover:bg-rui-info-darker active:bg-rui-info-darker/90 text-rui-dark-text ring-rui-info/40 dark:text-rui-text dark:ring-rui-info/60' },\n      success: { root: 'bg-rui-success hover:bg-rui-success-darker active:bg-rui-success-darker/90 text-rui-dark-text ring-rui-success/40 dark:text-rui-text dark:ring-rui-success/60' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      true: { root: 'rounded-full px-3 py-3' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!ring-0' },\n    },\n  },\n  compoundVariants: [\n    // === Disabled (not loading) appearance ===\n    // Applied only when `loading: false` so that loading buttons keep their\n    // variant color/outline visible behind the spinner; pure disabled buttons\n    // fade to the Material disabled palette.\n    { loading: false, class: { root: 'disabled:!bg-black/[.12] dark:disabled:!bg-white/[.12] disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n    { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:outline-rui-text-disabled' } },\n    { loading: false, variant: 'text', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n    { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-grey-50' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-black/[.04] active:bg-black/10 dark:bg-transparent dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-black/10 dark:bg-white/30' } },\n    { color: 'grey', variant: 'outlined', class: { root: 'outline-rui-text' } },\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n    // === Context colors — outlined/text variants ===\n    // `dark:text-rui-<color>` is required to beat `dark:text-rui-text` set by\n    // the base color variant (meant for filled buttons where text sits on a\n    // colored bg). Without the override, outlined/text/list buttons in dark\n    // mode render white text against a themed outline/underline.\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary-lighter/[.04] active:bg-rui-primary-lighter/10 text-rui-primary dark:text-rui-primary' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary-lighter/[.04] active:bg-rui-secondary-lighter/10 text-rui-secondary dark:text-rui-secondary' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error-lighter/[.04] active:bg-rui-error-lighter/10 text-rui-error dark:text-rui-error' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning-lighter/[.04] active:bg-rui-warning-lighter/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info-lighter/[.04] active:bg-rui-info-lighter/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success-lighter/[.04] active:bg-rui-success-lighter/10 text-rui-success dark:text-rui-success' } },\n\n    // === Context colors — active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // === Context colors — active outlined/text ===\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary-lighter/30' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary-lighter/30' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error-lighter/30' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning-lighter/30' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info-lighter/30' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success-lighter/30' } },\n\n    // === Context colors — outlined border ===\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-1' } },\n    { icon: true, size: 'sm', class: { root: 'px-1 py-1' } },\n    { icon: true, size: 'lg', class: { root: 'px-4 py-4' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n  ],\n  compoundSlots: [\n    // Dark mode default variant text override for warning/success/info\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'default', class: 'dark:text-rui-light-text' },\n    // Dark mode active outlined/text override for primary/secondary\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary-darker/60 dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary-darker/60 dark:text-rui-secondary-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":";;AAEA,IAAa,eAAe,GAAG;CAC7B,OAAO;EACL,MAAM;GACJ;GAOA;GACA;GAOA;GACA;GACD,CAAC,KAAK,IAAI;EACX,OAAO;EACP,SAAS;EACV;CACD,UAAU;EACR,SAAS;GACP,SAAS,EAAE;GACX,UAAU,EAAE;GACZ,MAAM,EAAE,MAAM,QAAQ;GACtB,KAAK,EAAE,MAAM,qBAAqB;GAClC,MAAM;IAAE,MAAM;IAAwD,OAAO;IAAU;GACxF;EACD,MAAM;GACJ,IAAI,EAAE,MAAM,yCAAyC;GACrD,IAAI,EAAE,MAAM,mCAAmC;GAChD;EACD,OAAO;GACL,MAAM,EAAE,MAAM,oKAAoK;GAClL,SAAS,EAAE,MAAM,iKAAiK;GAClL,WAAW,EAAE,MAAM,2KAA2K;GAC9L,OAAO,EAAE,MAAM,uJAAuJ;GACtK,SAAS,EAAE,MAAM,iKAAiK;GAClL,MAAM,EAAE,MAAM,kJAAkJ;GAChK,SAAS,EAAE,MAAM,iKAAiK;GACnL;EACD,SAAS,EACP,MAAM,EAAE,MAAM,gBAAgB,EAC/B;EACD,MAAM,EACJ,MAAM,EAAE,MAAM,0BAA0B,EACzC;EACD,QAAQ;GACN,MAAM,EAAE;GACR,OAAO,EAAE;GACV;EACD,SAAS;GACP,MAAM,EAAE,MAAM,+GAA+G;GAC7H,OAAO,EAAE;GACV;EACD,oBAAoB,EAClB,MAAM,EAAE,MAAM,yBAAyB,EACxC;EACF;CACD,kBAAkB;EAKhB;GAAE,SAAS;GAAO,OAAO,EAAE,MAAM,mIAAmI;GAAE;EACtK;GAAE,SAAS;GAAO,SAAS;GAAY,OAAO,EAAE,MAAM,6HAA6H;GAAE;EACrL;GAAE,SAAS;GAAO,SAAS;GAAQ,OAAO,EAAE,MAAM,0FAA0F;GAAE;EAC9I;GAAE,SAAS;GAAO,SAAS;GAAQ,OAAO,EAAE,MAAM,0FAA0F;GAAE;EAG9I;GAAE,OAAO;GAAQ,QAAQ;GAAM,OAAO,EAAE,MAAM,kBAAkB;GAAE;EAClE;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,mJAAmJ;GAAE;EAC5N;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,gCAAgC;GAAE;EACvH;GAAE,OAAO;GAAQ,SAAS;GAAY,OAAO,EAAE,MAAM,oBAAoB;GAAE;EAC3E;GAAE,OAAO;GAAQ,SAAS;GAAQ,OAAO,EAAE,MAAM,2BAA2B;GAAE;EAO9E;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,6HAA6H;GAAE;EACzM;GAAE,OAAO;GAAa,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,qIAAqI;GAAE;EACnN;GAAE,OAAO;GAAS,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,qHAAqH;GAAE;EAC/L;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,6HAA6H;GAAE;EACzM;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,iHAAiH;GAAE;EAC1L;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,6HAA6H;GAAE;EAGzM;GAAE,OAAO;GAAW,QAAQ;GAAM,OAAO,EAAE,MAAM,yBAAyB;GAAE;EAC5E;GAAE,OAAO;GAAa,QAAQ;GAAM,OAAO,EAAE,MAAM,2BAA2B;GAAE;EAChF;GAAE,OAAO;GAAS,QAAQ;GAAM,OAAO,EAAE,MAAM,uBAAuB;GAAE;EACxE;GAAE,OAAO;GAAW,QAAQ;GAAM,OAAO,EAAE,MAAM,yBAAyB;GAAE;EAC5E;GAAE,OAAO;GAAQ,QAAQ;GAAM,OAAO,EAAE,MAAM,sBAAsB;GAAE;EACtE;GAAE,OAAO;GAAW,QAAQ;GAAM,OAAO,EAAE,MAAM,yBAAyB;GAAE;EAG5E;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,6BAA6B;GAAE;EACvH;GAAE,OAAO;GAAa,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,+BAA+B;GAAE;EAC3H;GAAE,OAAO;GAAS,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,2BAA2B;GAAE;EACnH;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,6BAA6B;GAAE;EACvH;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,0BAA0B;GAAE;EACjH;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,6BAA6B;GAAE;EAGvH;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,6BAA6B;GAAE;EACvF;GAAE,OAAO;GAAa,SAAS;GAAY,OAAO,EAAE,MAAM,+BAA+B;GAAE;EAC3F;GAAE,OAAO;GAAS,SAAS;GAAY,OAAO,EAAE,MAAM,2BAA2B;GAAE;EACnF;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,6BAA6B;GAAE;EACvF;GAAE,OAAO;GAAQ,SAAS;GAAY,OAAO,EAAE,MAAM,0BAA0B;GAAE;EACjF;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,6BAA6B;GAAE;EAGvF;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,UAAU;GAAE;EAC1D;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,UAAU;GAAE;EAC1D;GAAE,SAAS;GAAO,MAAM;GAAM,OAAO,EAAE,MAAM,eAAe;GAAE;EAC9D;GAAE,SAAS;GAAO,MAAM;GAAM,OAAO,EAAE,MAAM,QAAQ;GAAE;EACvD;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,aAAa;GAAE;EAC7D;GAAE,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,aAAa;GAAE;EACxD;GAAE,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,aAAa;GAAE;EACxD;GAAE,SAAS;GAAO,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,aAAa;GAAE;EACzE;CACD,eAAe;EAEb;GAAE,OAAO,CAAC,OAAO;GAAE,OAAO;IAAC;IAAW;IAAW;IAAO;GAAE,SAAS;GAAW,OAAO;GAA4B;EAEjH;GAAE,OAAO,CAAC,OAAO;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO;GAA+D;EAChK;GAAE,OAAO,CAAC,OAAO;GAAE,OAAO;GAAa,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO;GAAmE;EACvK;CACD,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CACF,CAAC"}

package/dist/components/cards/RuiCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCard.js","names":[],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  elevation?: number;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  classNames?: RuiCardClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  elevation = 0,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  classNames,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst card = tv({\n  slots: {\n    root: 'flex flex-col h-full w-full bg-white dark:bg-[#1E1E1E]',\n    image: 'overflow-hidden',\n    content: 'text-body-1 text-rui-light-text dark:text-rui-dark-text overflow-y-auto',\n    footer: 'flex space-x-2 items-center justify-start mt-auto',\n  },\n  variants: {\n    variant: {\n      flat: { root: '' },\n      outlined: { root: 'border border-black/[0.12] dark:border-white/[0.12]' },\n    },\n    rounded: {\n      sm: { root: 'rounded-[.25rem]', image: 'rounded-t-[.25rem]' },\n      md: { root: 'rounded-[.5rem]', image: 'rounded-t-[.5rem]' },\n      lg: { root: 'rounded-[1rem]', image: 'rounded-t-[1rem]' },\n    },\n    divide: {\n      true: { root: 'divide-y divide-black/[0.12] dark:divide-white/[0.12]' },\n    },\n    padding: {\n      none: { content: 'p-0' },\n      dense: { content: 'p-3' },\n      normal: { content: 'p-4' },\n    },\n    dense: {\n      true: { footer: 'py-1' },\n      false: { footer: 'p-4 pt-2' },\n    },\n  },\n  defaultVariants: { variant: 'outlined', rounded: 'md', padding: 'normal', dense: false },\n});\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\nconst ui = computed<ReturnType<typeof card>>(() => card({ variant: cardVariant, rounded, divide, dense, padding: contentPadding.value }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: [`shadow-${elevation}`, cn(classNames?.root)] })\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      data-id=\"card-content\"\n      :class=\"ui.content({ class: cn(classNames?.content) ?? contentClass })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCard.js","names":[],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  elevation?: number;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  classNames?: RuiCardClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  elevation = 0,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  classNames,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst card = tv({\n  slots: {\n    root: 'flex flex-col h-full w-full bg-white dark:bg-[#1E1E1E]',\n    image: 'overflow-hidden',\n    content: 'text-body-1 text-rui-light-text dark:text-rui-dark-text overflow-y-auto',\n    footer: 'flex space-x-2 items-center justify-start mt-auto',\n  },\n  variants: {\n    variant: {\n      flat: { root: '' },\n      outlined: { root: 'border border-black/[0.12] dark:border-white/[0.12]' },\n    },\n    rounded: {\n      sm: { root: 'rounded-[.25rem]', image: 'rounded-t-[.25rem]' },\n      md: { root: 'rounded-[.5rem]', image: 'rounded-t-[.5rem]' },\n      lg: { root: 'rounded-[1rem]', image: 'rounded-t-[1rem]' },\n    },\n    divide: {\n      true: { root: 'divide-y divide-black/[0.12] dark:divide-white/[0.12]' },\n    },\n    padding: {\n      none: { content: 'p-0' },\n      dense: { content: 'p-3' },\n      normal: { content: 'p-4' },\n    },\n    dense: {\n      true: { footer: 'py-1' },\n      false: { footer: 'p-4 pt-2' },\n    },\n  },\n  defaultVariants: { variant: 'outlined', rounded: 'md', padding: 'normal', dense: false },\n});\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\nconst ui = computed<ReturnType<typeof card>>(() => card({ variant: cardVariant, rounded, divide, dense, padding: contentPadding.value }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: [`shadow-${elevation}`, cn(classNames?.root ?? $attrs.class)] })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      data-id=\"card-content\"\n      :class=\"ui.content({ class: cn(classNames?.content) ?? contentClass })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/cards/RuiCard.vue_vue_type_script_setup_true_lang.js

@@ -84,7 +84,10 @@ var RuiCard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			padding: contentPadding.value
 		}));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ class: ui.value.root({ class: [`shadow-${__props.elevation}`, unref(cn)(__props.classNames?.root)] }) }, _ctx.$attrs), [
+			return openBlock(), createElementBlock("div", mergeProps({ class: ui.value.root({ class: [`shadow-${__props.elevation}`, unref(cn)(__props.classNames?.root ?? _ctx.$attrs.class)] }) }, {
+				..._ctx.$attrs,
+				class: void 0
+			}), [
 				slots.image ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					"data-id": "card-image",

package/dist/components/cards/RuiCard.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCard.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  elevation?: number;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  classNames?: RuiCardClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  elevation = 0,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  classNames,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst card = tv({\n  slots: {\n    root: 'flex flex-col h-full w-full bg-white dark:bg-[#1E1E1E]',\n    image: 'overflow-hidden',\n    content: 'text-body-1 text-rui-light-text dark:text-rui-dark-text overflow-y-auto',\n    footer: 'flex space-x-2 items-center justify-start mt-auto',\n  },\n  variants: {\n    variant: {\n      flat: { root: '' },\n      outlined: { root: 'border border-black/[0.12] dark:border-white/[0.12]' },\n    },\n    rounded: {\n      sm: { root: 'rounded-[.25rem]', image: 'rounded-t-[.25rem]' },\n      md: { root: 'rounded-[.5rem]', image: 'rounded-t-[.5rem]' },\n      lg: { root: 'rounded-[1rem]', image: 'rounded-t-[1rem]' },\n    },\n    divide: {\n      true: { root: 'divide-y divide-black/[0.12] dark:divide-white/[0.12]' },\n    },\n    padding: {\n      none: { content: 'p-0' },\n      dense: { content: 'p-3' },\n      normal: { content: 'p-4' },\n    },\n    dense: {\n      true: { footer: 'py-1' },\n      false: { footer: 'p-4 pt-2' },\n    },\n  },\n  defaultVariants: { variant: 'outlined', rounded: 'md', padding: 'normal', dense: false },\n});\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\nconst ui = computed<ReturnType<typeof card>>(() => card({ variant: cardVariant, rounded, divide, dense, padding: contentPadding.value }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: [`shadow-${elevation}`, cn(classNames?.root)] })\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      data-id=\"card-content\"\n      :class=\"ui.content({ class: cn(classNames?.content) ?? contentClass })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,QAAQ,UAQV;EAEJ,MAAM,OAAO,GAAG;GACd,OAAO;IACL,MAAM;IACN,OAAO;IACP,SAAS;IACT,QAAQ;IACT;GACD,UAAU;IACR,SAAS;KACP,MAAM,EAAE,MAAM,IAAI;KAClB,UAAU,EAAE,MAAM,uDAAuD;KAC1E;IACD,SAAS;KACP,IAAI;MAAE,MAAM;MAAoB,OAAO;MAAsB;KAC7D,IAAI;MAAE,MAAM;MAAmB,OAAO;MAAqB;KAC3D,IAAI;MAAE,MAAM;MAAkB,OAAO;MAAoB;KAC1D;IACD,QAAQ,EACN,MAAM,EAAE,MAAM,yDAAyD,EACxE;IACD,SAAS;KACP,MAAM,EAAE,SAAS,OAAO;KACxB,OAAO,EAAE,SAAS,OAAO;KACzB,QAAQ,EAAE,SAAS,OAAO;KAC3B;IACD,OAAO;KACL,MAAM,EAAE,QAAQ,QAAQ;KACxB,OAAO,EAAE,QAAQ,YAAY;KAC9B;IACF;GACD,iBAAiB;IAAE,SAAS;IAAY,SAAS;IAAM,SAAS;IAAU,OAAO;IAAO;GACzF,CAAC;EAEF,MAAM,iBAAiB,eAAwB,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,MAAM,UAAU;EAEnF,MAAM,iBAAiB,eAA4C;AACjE,OAAI,QAAA,UACF,QAAO;AACT,UAAO,QAAA,QAAQ,UAAU;IACzB;EAEF,MAAM,KAAK,eAAwC,KAAK;GAAE,SAAS,QAAA;GAAa,SAAM,QAAA;GAAG,QAAK,QAAA;GAAG,OAAI,QAAA;GAAG,SAAS,eAAe;GAAO,CAAC,CAAC;;uBAIvI,mBAkDM,OAlDN,WAkDM,EAjDH,OAAO,GAAA,MAAG,KAAI,EAAA,OAAA,CAAA,UAAqB,QAAA,aAAa,MAAA,GAAE,CAAC,QAAA,YAAY,KAAI,CAAA,EAAA,CAAA,EAAA,EAC5DA,KAAAA,OAAM,EAAA;IAGN,MAAM,SAAA,WAAA,EADd,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAK,eAAE,GAAA,MAAG,MAAK,EAAA,OAAU,MAAA,GAAE,CAAC,QAAA,YAAY,MAAK,EAAA,CAAA,CAAA;QAE9C,WAAqB,KAAA,QAAA,QAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAEvB,WAwBO,KAAA,QAAA,iBAAA,EAAA,QAAA,CAtBG,eAAA,SAAA,WAAA,EADR,YAsBgB,uBAAA;;KApBb,OAAO,QAAA;;KAGA,MAAM,UAAA;YACX;wBAEsB,CAAvB,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA;;;KAGjB,MAAM,SAAA;YACX;wBAEqB,CAAtB,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA;;;KAGhB,MAAM,YAAA;YACX;wBAEwB,CAAzB,WAAyB,KAAA,QAAA,YAAA,CAAA,CAAA;;;;IAKvB,MAAM,WAAA,WAAA,EADd,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAK,eAAE,GAAA,MAAG,QAAO,EAAA,OAAU,MAAA,GAAE,CAAC,QAAA,YAAY,QAAO,IAAK,QAAA,cAAY,CAAA,CAAA;QAEnE,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAGF,MAAM,UAAA,WAAA,EADd,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAK,eAAE,GAAA,MAAG,OAAM,EAAA,OAAU,MAAA,GAAE,CAAC,QAAA,YAAY,OAAM,EAAA,CAAA,CAAA;QAEhD,WAAsB,KAAA,QAAA,SAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}
+{"version":3,"file":"RuiCard.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  elevation?: number;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  classNames?: RuiCardClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  elevation = 0,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  classNames,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst card = tv({\n  slots: {\n    root: 'flex flex-col h-full w-full bg-white dark:bg-[#1E1E1E]',\n    image: 'overflow-hidden',\n    content: 'text-body-1 text-rui-light-text dark:text-rui-dark-text overflow-y-auto',\n    footer: 'flex space-x-2 items-center justify-start mt-auto',\n  },\n  variants: {\n    variant: {\n      flat: { root: '' },\n      outlined: { root: 'border border-black/[0.12] dark:border-white/[0.12]' },\n    },\n    rounded: {\n      sm: { root: 'rounded-[.25rem]', image: 'rounded-t-[.25rem]' },\n      md: { root: 'rounded-[.5rem]', image: 'rounded-t-[.5rem]' },\n      lg: { root: 'rounded-[1rem]', image: 'rounded-t-[1rem]' },\n    },\n    divide: {\n      true: { root: 'divide-y divide-black/[0.12] dark:divide-white/[0.12]' },\n    },\n    padding: {\n      none: { content: 'p-0' },\n      dense: { content: 'p-3' },\n      normal: { content: 'p-4' },\n    },\n    dense: {\n      true: { footer: 'py-1' },\n      false: { footer: 'p-4 pt-2' },\n    },\n  },\n  defaultVariants: { variant: 'outlined', rounded: 'md', padding: 'normal', dense: false },\n});\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\nconst ui = computed<ReturnType<typeof card>>(() => card({ variant: cardVariant, rounded, divide, dense, padding: contentPadding.value }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: [`shadow-${elevation}`, cn(classNames?.root ?? $attrs.class)] })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      data-id=\"card-content\"\n      :class=\"ui.content({ class: cn(classNames?.content) ?? contentClass })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,QAAQ,UAQV;EAEJ,MAAM,OAAO,GAAG;GACd,OAAO;IACL,MAAM;IACN,OAAO;IACP,SAAS;IACT,QAAQ;IACT;GACD,UAAU;IACR,SAAS;KACP,MAAM,EAAE,MAAM,IAAI;KAClB,UAAU,EAAE,MAAM,uDAAuD;KAC1E;IACD,SAAS;KACP,IAAI;MAAE,MAAM;MAAoB,OAAO;MAAsB;KAC7D,IAAI;MAAE,MAAM;MAAmB,OAAO;MAAqB;KAC3D,IAAI;MAAE,MAAM;MAAkB,OAAO;MAAoB;KAC1D;IACD,QAAQ,EACN,MAAM,EAAE,MAAM,yDAAyD,EACxE;IACD,SAAS;KACP,MAAM,EAAE,SAAS,OAAO;KACxB,OAAO,EAAE,SAAS,OAAO;KACzB,QAAQ,EAAE,SAAS,OAAO;KAC3B;IACD,OAAO;KACL,MAAM,EAAE,QAAQ,QAAQ;KACxB,OAAO,EAAE,QAAQ,YAAY;KAC9B;IACF;GACD,iBAAiB;IAAE,SAAS;IAAY,SAAS;IAAM,SAAS;IAAU,OAAO;IAAO;GACzF,CAAC;EAEF,MAAM,iBAAiB,eAAwB,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,MAAM,UAAU;EAEnF,MAAM,iBAAiB,eAA4C;AACjE,OAAI,QAAA,UACF,QAAO;AACT,UAAO,QAAA,QAAQ,UAAU;IACzB;EAEF,MAAM,KAAK,eAAwC,KAAK;GAAE,SAAS,QAAA;GAAa,SAAM,QAAA;GAAG,QAAK,QAAA;GAAG,OAAI,QAAA;GAAG,SAAS,eAAe;GAAO,CAAC,CAAC;;uBAIvI,mBAkDM,OAlDN,WAkDM,EAjDH,OAAO,GAAA,MAAG,KAAI,EAAA,OAAA,CAAA,UAAqB,QAAA,aAAa,MAAA,GAAE,CAAC,QAAA,YAAY,QAAQA,KAAAA,OAAO,MAAK,CAAA,EAAA,CAAA,EAAA,EAAA;OACvEA,KAAAA;IAAM,OAAS,KAAA;IAAS,CAAA,EAAA;IAG7B,MAAM,SAAA,WAAA,EADd,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAK,eAAE,GAAA,MAAG,MAAK,EAAA,OAAU,MAAA,GAAE,CAAC,QAAA,YAAY,MAAK,EAAA,CAAA,CAAA;QAE9C,WAAqB,KAAA,QAAA,QAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAEvB,WAwBO,KAAA,QAAA,iBAAA,EAAA,QAAA,CAtBG,eAAA,SAAA,WAAA,EADR,YAsBgB,uBAAA;;KApBb,OAAO,QAAA;;KAGA,MAAM,UAAA;YACX;wBAEsB,CAAvB,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA;;;KAGjB,MAAM,SAAA;YACX;wBAEqB,CAAtB,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA;;;KAGhB,MAAM,YAAA;YACX;wBAEwB,CAAzB,WAAyB,KAAA,QAAA,YAAA,CAAA,CAAA;;;;IAKvB,MAAM,WAAA,WAAA,EADd,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAK,eAAE,GAAA,MAAG,QAAO,EAAA,OAAU,MAAA,GAAE,CAAC,QAAA,YAAY,QAAO,IAAK,QAAA,cAAY,CAAA,CAAA;QAEnE,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAGF,MAAM,UAAA,WAAA,EADd,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAK,eAAE,GAAA,MAAG,OAAM,EAAA,OAAU,MAAA,GAAE,CAAC,QAAA,YAAY,OAAM,EAAA,CAAA,CAAA;QAEhD,WAAsB,KAAA,QAAA,SAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/components/color-picker/RuiColorBoard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorBoard.js","names":[],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    class=\"relative w-full h-40 overflow-hidden cursor-pointer\"\n    v-bind=\"$attrs\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiColorBoard.js","names":[],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { cn, tv } from '@/utils/tv';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-40 overflow-hidden cursor-pointer' });\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/color-picker/RuiColorBoard.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { cn, tv } from "../../utils/tv.js";
 import { useElementDrag } from "./utils.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, onMounted, openBlock, reactive, ref, unref, useTemplateRef, watch } from "vue";
 import { clamp, get, set } from "@vueuse/shared";
@@ -68,6 +69,7 @@ var RuiColorBoard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		onMounted(() => {
 			updatePosition();
 		});
+		const rootStyle = tv({ base: "relative w-full h-40 overflow-hidden cursor-pointer" });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				ref_key: "wrapper",
@@ -76,8 +78,11 @@ var RuiColorBoard_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				"aria-label": "Color saturation and brightness",
 				"aria-valuetext": `Saturation ${Math.round(unref(state).saturation * 100)}%, Brightness ${Math.round(unref(state).brightness * 100)}%`,
 				"data-id": "color-board",
-				class: "relative w-full h-40 overflow-hidden cursor-pointer"
-			}, _ctx.$attrs, {
+				class: unref(rootStyle)({ class: unref(cn)(_ctx.$attrs.class) })
+			}, {
+				..._ctx.$attrs,
+				class: void 0
+			}, {
 				style: { backgroundColor: unref(state).hexString },
 				onClick: _cache[0] || (_cache[0] = ($event) => unref(handleClick)($event)),
 				onMousedown: _cache[1] || (_cache[1] = ($event) => unref(onMouseDown)($event)),

package/dist/components/color-picker/RuiColorBoard.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorBoard.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    class=\"relative w-full h-40 overflow-hidden cursor-pointer\"\n    v-bind=\"$attrs\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAcA,MAAM,OAAO;EAIb,MAAM,UAAU,eAA4B,UAAU;EAEtD,MAAM,QAAQ,SAAS;GACrB,WAAW,SAAS,QAAA,MAAM,IAAI;GAC9B,YAAY,QAAA,MAAM;GAClB,YAAY,QAAA,MAAM;GACnB,CAAC;EAEF,MAAM,YAAY,IAAY,EAAE;EAChC,MAAM,aAAa,IAAY,EAAE;EAEjC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,UAAU;EAE5E,MAAM,cAAc,gBAA+C;GACjE,KAAK,GAAG,IAAI,UAAU,GAAG,IAAI;GAC7B,MAAM,GAAG,IAAI,WAAW,GAAG,IAAI;GAChC,EAAE;EAEH,SAAS,SAAS,KAAqB;AACrC,UAAO,UAAU;IAAE,GAAG;IAAK,GAAG;IAAG,GAAG;IAAG,CAAC,CAAC,aAAa;;EAGxD,SAAS,iBAAuB;AAC9B,OAAI,YAAY,MAAM,WAAW;AACjC,OAAI,WAAW,IAAI,MAAM,WAAW;;EAGtC,SAAS,UAAU,GAAW,GAAiB;GAC7C,MAAM,KAAK,IAAI,QAAQ;AACvB,OAAI,CAAC,GACH;GAGF,MAAM,EAAE,OAAO,QAAQ,MAAM,QADhB,GAAG,uBAAuB;GAEvC,IAAI,cAAc,IAAI;GACtB,IAAI,cAAc,IAAI;AAEtB,iBAAc,MAAM,aAAa,GAAG,MAAM;AAC1C,iBAAc,MAAM,aAAa,GAAG,OAAO;GAE3C,MAAM,aAAa,cAAc;GACjC,MAAM,aAAa,MAAM,EAAE,cAAc,UAAU,GAAG,GAAG,EAAE;AAE3D,OAAI,YAAY,cAAc,MAAM;AACpC,OAAI,WAAW,cAAc,OAAO;AAEpC,SAAM,aAAa;AACnB,SAAM,aAAa;AAEnB,QAAK,gBAAgB;IAAE;IAAY;IAAY,CAAC;;AAGlD,cACQ;GAAC,QAAA,MAAM;GAAK,QAAA,MAAM;GAAY,QAAA,MAAM;GAAW,GACpD,CAAC,KAAK,YAAY,gBAAgB;AACjC,SAAM,YAAY,SAAS,IAAI;AAC/B,SAAM,aAAa;AACnB,SAAM,aAAa;AACnB,mBAAgB;IAEnB;AAED,kBAAgB;AACd,mBAAgB;IAChB;;uBAIA,mBAoBM,OApBN,WAoBM;aAnBA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,kBAAc,cAAgB,KAAK,MAAM,MAAA,MAAK,CAAC,aAAU,IAAA,CAAA,gBAAwB,KAAK,MAAM,MAAA,MAAK,CAAC,aAAU,IAAA,CAAA;IAC7G,WAAQ;IACR,OAAM;MACEA,KAAAA,QAAM;IACb,OAAK,EAAA,iBAAqB,MAAA,MAAK,CAAC,WAAS;IACzC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAW,CAAC,OAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAW,CAAC,OAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,aAAY,CAAC,OAAM;;8BAEhC,mBAA2E,OAAA,EAAtE,OAAM,+DAA6D,EAAA,MAAA,GAAA;8BACxE,mBAA2E,OAAA,EAAtE,OAAM,+DAA6D,EAAA,MAAA,GAAA;IACxE,mBAIE,OAAA;KAHA,WAAQ;KACR,OAAM;KACL,OAAK,eAAE,MAAA,YAAW,CAAA"}
+{"version":3,"file":"RuiColorBoard.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorBoard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport { cn, tv } from '@/utils/tv';\nimport { type Color, useElementDrag } from './utils';\n\ndefineOptions({\n  name: 'RuiColorBoard',\n  inheritAttrs: false,\n});\n\nconst { color } = defineProps<{\n  color: Color;\n}>();\n\nconst emit = defineEmits<{\n  'update:board': [event: { saturation: number; brightness: number }];\n}>();\n\nconst wrapper = useTemplateRef<HTMLElement>('wrapper');\n\nconst state = reactive({\n  hexString: hueToHex(color.hue),\n  saturation: color.saturation,\n  brightness: color.brightness,\n});\n\nconst cursorTop = ref<number>(0);\nconst cursorLeft = ref<number>(0);\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitColor);\n\nconst cursorStyle = computed<{ top: string; left: string }>(() => ({\n  top: `${get(cursorTop) * 100}%`,\n  left: `${get(cursorLeft) * 100}%`,\n}));\n\nfunction hueToHex(hue: number): string {\n  return tinycolor({ h: hue, s: 1, v: 1 }).toHexString();\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, state.saturation);\n  set(cursorTop, 1 - state.brightness);\n}\n\nfunction emitColor(x: number, y: number): void {\n  const el = get(wrapper);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  const { width, height, left, top } = rect;\n  let calculatedX = x - left;\n  let calculatedY = y - top;\n\n  calculatedX = clamp(calculatedX, 0, width);\n  calculatedY = clamp(calculatedY, 0, height);\n\n  const saturation = calculatedX / width;\n  const brightness = clamp(-(calculatedY / height) + 1, 0, 1);\n\n  set(cursorLeft, calculatedX / width);\n  set(cursorTop, calculatedY / height);\n\n  state.saturation = saturation;\n  state.brightness = brightness;\n\n  emit('update:board', { saturation, brightness });\n}\n\nwatch(\n  () => [color.hue, color.saturation, color.brightness] as const,\n  ([hue, saturation, brightness]) => {\n    state.hexString = hueToHex(hue);\n    state.saturation = saturation;\n    state.brightness = brightness;\n    updatePosition();\n  },\n);\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-40 overflow-hidden cursor-pointer' });\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    role=\"slider\"\n    aria-label=\"Color saturation and brightness\"\n    :aria-valuetext=\"`Saturation ${Math.round(state.saturation * 100)}%, Brightness ${Math.round(state.brightness * 100)}%`\"\n    data-id=\"color-board\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :style=\"{ backgroundColor: state.hexString }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-r from-white\" />\n    <div class=\"absolute inset-0 to-transparent bg-gradient-to-t from-black\" />\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-5 h-5 -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow rounded-full after:content-[''] after:absolute after:inset-0 after:rounded-full after:border-2 after:border-black/15\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAeA,MAAM,OAAO;EAIb,MAAM,UAAU,eAA4B,UAAU;EAEtD,MAAM,QAAQ,SAAS;GACrB,WAAW,SAAS,QAAA,MAAM,IAAI;GAC9B,YAAY,QAAA,MAAM;GAClB,YAAY,QAAA,MAAM;GACnB,CAAC;EAEF,MAAM,YAAY,IAAY,EAAE;EAChC,MAAM,aAAa,IAAY,EAAE;EAEjC,MAAM,EAAE,aAAa,aAAa,iBAAiB,eAAe,UAAU;EAE5E,MAAM,cAAc,gBAA+C;GACjE,KAAK,GAAG,IAAI,UAAU,GAAG,IAAI;GAC7B,MAAM,GAAG,IAAI,WAAW,GAAG,IAAI;GAChC,EAAE;EAEH,SAAS,SAAS,KAAqB;AACrC,UAAO,UAAU;IAAE,GAAG;IAAK,GAAG;IAAG,GAAG;IAAG,CAAC,CAAC,aAAa;;EAGxD,SAAS,iBAAuB;AAC9B,OAAI,YAAY,MAAM,WAAW;AACjC,OAAI,WAAW,IAAI,MAAM,WAAW;;EAGtC,SAAS,UAAU,GAAW,GAAiB;GAC7C,MAAM,KAAK,IAAI,QAAQ;AACvB,OAAI,CAAC,GACH;GAGF,MAAM,EAAE,OAAO,QAAQ,MAAM,QADhB,GAAG,uBAAuB;GAEvC,IAAI,cAAc,IAAI;GACtB,IAAI,cAAc,IAAI;AAEtB,iBAAc,MAAM,aAAa,GAAG,MAAM;AAC1C,iBAAc,MAAM,aAAa,GAAG,OAAO;GAE3C,MAAM,aAAa,cAAc;GACjC,MAAM,aAAa,MAAM,EAAE,cAAc,UAAU,GAAG,GAAG,EAAE;AAE3D,OAAI,YAAY,cAAc,MAAM;AACpC,OAAI,WAAW,cAAc,OAAO;AAEpC,SAAM,aAAa;AACnB,SAAM,aAAa;AAEnB,QAAK,gBAAgB;IAAE;IAAY;IAAY,CAAC;;AAGlD,cACQ;GAAC,QAAA,MAAM;GAAK,QAAA,MAAM;GAAY,QAAA,MAAM;GAAW,GACpD,CAAC,KAAK,YAAY,gBAAgB;AACjC,SAAM,YAAY,SAAS,IAAI;AAC/B,SAAM,aAAa;AACnB,SAAM,aAAa;AACnB,mBAAgB;IAEnB;AAED,kBAAgB;AACd,mBAAgB;IAChB;EAEF,MAAM,YAAY,GAAG,EAAE,MAAM,uDAAuD,CAAC;;uBAInF,mBAoBM,OApBN,WAoBM;aAnBA;IAAJ,KAAI;IACJ,MAAK;IACL,cAAW;IACV,kBAAc,cAAgB,KAAK,MAAM,MAAA,MAAK,CAAC,aAAU,IAAA,CAAA,gBAAwB,KAAK,MAAM,MAAA,MAAK,CAAC,aAAU,IAAA,CAAA;IAC7G,WAAQ;IACP,OAAO,MAAA,UAAS,CAAA,EAAA,OAAU,MAAA,GAAE,CAACA,KAAAA,OAAO,MAAK,EAAA,CAAA;;OAC7BA,KAAAA;IAAM,OAAS,KAAA;IAAS,EAAA;IACpC,OAAK,EAAA,iBAAqB,MAAA,MAAK,CAAC,WAAS;IACzC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAW,CAAC,OAAM;IACzB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAW,CAAC,OAAM;IAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,aAAY,CAAC,OAAM;;8BAEhC,mBAA2E,OAAA,EAAtE,OAAM,+DAA6D,EAAA,MAAA,GAAA;8BACxE,mBAA2E,OAAA,EAAtE,OAAM,+DAA6D,EAAA,MAAA,GAAA;IACxE,mBAIE,OAAA;KAHA,WAAQ;KACR,OAAM;KACL,OAAK,eAAE,MAAA,YAAW,CAAA"}

package/dist/components/color-picker/RuiColorHue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorHue.js","names":[],"sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ninterface Limit {\n  lowerLimit: number;\n  upperLimit: number;\n  availableWidth: number;\n}\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = useTemplateRef<HTMLElement>('barElement');\n\nconst MAX_HUE = 360;\nconst CURSOR_WIDTH = 16;\nconst cursorLeft = ref<string>('');\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitHue);\n\nconst cursorStyle = computed<{ left: string }>(() => ({\n  left: get(cursorLeft),\n}));\n\nfunction getLimit(width: number): Limit {\n  const lowerLimit = CURSOR_WIDTH / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, getCursorLeft());\n}\n\nfunction getCursorLeft(): string {\n  const el = get(barElement);\n  if (!el)\n    return '0';\n\n  const rect = el.getBoundingClientRect();\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === MAX_HUE ? MAX_HUE : hueVal % MAX_HUE;\n\n  const percentage = roundTwoDecimal((usedHue / MAX_HUE) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number): void {\n  const el = get(barElement);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * MAX_HUE));\n}\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n\nonMounted(() => {\n  updatePosition();\n});\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    role=\"slider\"\n    aria-label=\"Hue\"\n    :aria-valuenow=\"modelValue\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"360\"\n    data-id=\"color-hue\"\n    class=\"relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum\"\n    v-bind=\"$attrs\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-2 bg-white rounded-full\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiColorHue.js","names":[],"sources":["../../../src/components/color-picker/RuiColorHue.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { clamp } from '@vueuse/shared';\nimport { cn, tv } from '@/utils/tv';\nimport { roundTwoDecimal, useElementDrag } from './utils';\n\ninterface Limit {\n  lowerLimit: number;\n  upperLimit: number;\n  availableWidth: number;\n}\n\ndefineOptions({\n  name: 'RuiColorHue',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<number>({ required: true });\n\nconst barElement = useTemplateRef<HTMLElement>('barElement');\n\nconst MAX_HUE = 360;\nconst CURSOR_WIDTH = 16;\nconst cursorLeft = ref<string>('');\n\nconst { handleClick, onMouseDown, onTouchStart } = useElementDrag(emitHue);\n\nconst cursorStyle = computed<{ left: string }>(() => ({\n  left: get(cursorLeft),\n}));\n\nfunction getLimit(width: number): Limit {\n  const lowerLimit = CURSOR_WIDTH / 2;\n  const upperLimit = width - lowerLimit;\n  const availableWidth = upperLimit - lowerLimit;\n\n  return { lowerLimit, upperLimit, availableWidth };\n}\n\nfunction updatePosition(): void {\n  set(cursorLeft, getCursorLeft());\n}\n\nfunction getCursorLeft(): string {\n  const el = get(barElement);\n  if (!el)\n    return '0';\n\n  const rect = el.getBoundingClientRect();\n  const actualWidth = rect.width;\n  const { lowerLimit, availableWidth } = getLimit(actualWidth);\n\n  const hueVal = get(modelValue);\n  const usedHue = hueVal === MAX_HUE ? MAX_HUE : hueVal % MAX_HUE;\n\n  const percentage = roundTwoDecimal((usedHue / MAX_HUE) * (availableWidth / actualWidth) * 100);\n  return `calc(${percentage}% + ${lowerLimit}px)`;\n}\n\nfunction emitHue(x: number): void {\n  const el = get(barElement);\n  if (!el)\n    return;\n\n  const rect = el.getBoundingClientRect();\n  let calculatedX = x - rect.left;\n\n  const { lowerLimit, upperLimit, availableWidth } = getLimit(rect.width);\n  calculatedX = clamp(calculatedX, lowerLimit, upperLimit);\n\n  set(modelValue, Math.round(((calculatedX - lowerLimit) / availableWidth) * MAX_HUE));\n}\n\nwatch(modelValue, () => {\n  updatePosition();\n});\n\nonMounted(() => {\n  updatePosition();\n});\n\nconst rootStyle = tv({ base: 'relative w-full h-3.5 rounded-full cursor-pointer bg-hue-spectrum' });\n</script>\n\n<template>\n  <div\n    ref=\"barElement\"\n    role=\"slider\"\n    aria-label=\"Hue\"\n    :aria-valuenow=\"modelValue\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"360\"\n    data-id=\"color-hue\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"handleClick($event)\"\n    @mousedown=\"onMouseDown($event)\"\n    @touchstart=\"onTouchStart($event)\"\n  >\n    <div\n      data-id=\"cursor\"\n      class=\"absolute w-4 h-4 transform top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-2 bg-white rounded-full\"\n      :style=\"cursorStyle\"\n    />\n  </div>\n</template>\n"],"mappings":""}