@rotki/ui-library 2.26.1 → 3.0.0-beta.1

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

@@ -1,8 +1,9 @@
 import { cn } from "../../../utils/tv.js";
+import { ButtonGroupKey } from "../button-group/button-group-context.js";
 import { ButtonVariant, getButtonSpinnerSize } from "./button-props.js";
 import { buttonStyles } from "./button-styles.js";
 import RuiProgress_default from "../../progress/RuiProgress.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, useSlots, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, useSlots, withCtx } from "vue";
 import { get } from "@vueuse/shared";
 //#region src/components/buttons/button/RuiButton.vue?vue&type=script&setup=true&lang.ts
 var RuiButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -23,7 +24,6 @@ var RuiButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			type: Boolean,
 			default: false
 		},
-		elevation: { default: null },
 		variant: { default: () => ButtonVariant.default },
 		icon: {
 			type: Boolean,
@@ -46,32 +46,42 @@ var RuiButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const slots = useSlots();
+		const group = inject(ButtonGroupKey, void 0);
 		const btnValue = computed(() => __props.modelValue);
-		const defaultElevation = computed(() => __props.variant === ButtonVariant.fab ? 6 : 0);
-		const usedElevation = computed(() => __props.disabled ? 0 : __props.elevation ?? get(defaultElevation));
-		const spinnerSize = computed(() => getButtonSpinnerSize(__props.size));
+		const resolvedVariant = computed(() => group?.variant() ?? __props.variant);
+		const resolvedSize = computed(() => __props.size ?? group?.size());
+		const resolvedDisabled = computed(() => __props.disabled || (group?.disabled() ?? false));
+		const resolvedActive = computed(() => __props.active || !!group && __props.modelValue !== void 0 && group.isActive(__props.modelValue));
+		const resolvedColor = computed(() => group?.color(get(resolvedActive)) ?? __props.color);
+		const spinnerSize = computed(() => getButtonSpinnerSize(get(resolvedSize)));
 		const ui = computed(() => buttonStyles({
-			variant: __props.variant,
-			color: __props.color ?? "grey",
-			size: __props.size,
+			variant: get(resolvedVariant),
+			color: get(resolvedColor) ?? "grey",
+			size: get(resolvedSize),
 			rounded: __props.rounded,
 			icon: __props.icon,
-			active: __props.active,
+			active: get(resolvedActive),
 			loading: __props.loading,
 			hideFocusIndicator: __props.hideFocusIndicator
 		}));
+		function onClick() {
+			emit("update:model-value", get(btnValue));
+			if (group && __props.modelValue !== void 0) group.toggle(__props.modelValue);
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps({
-				class: [unref(ui).root({ class: unref(cn)(_ctx.$attrs.class) }), `shadow-${unref(usedElevation)}`],
-				disabled: __props.disabled || __props.loading,
+				class: unref(ui).root({ class: unref(cn)([unref(group)?.itemClass(), _ctx.$attrs.class]) }),
+				disabled: unref(resolvedDisabled) || __props.loading,
 				type: __props.tag === "button" ? __props.type : void 0,
-				"data-variant": __props.variant,
-				"data-color": __props.color,
-				"data-active": __props.active || void 0
+				"data-variant": unref(resolvedVariant),
+				"data-size": unref(resolvedSize) ?? "md",
+				"data-color": unref(resolvedColor),
+				"data-active": unref(resolvedActive) || void 0,
+				"aria-busy": __props.loading || void 0
 			}, {
 				..._ctx.$attrs,
 				class: void 0
-			}, { onClick: _cache[0] || (_cache[0] = ($event) => emit("update:model-value", unref(btnValue))) }), {
+			}, { onClick: _cache[0] || (_cache[0] = ($event) => onClick()) }), {
 				default: withCtx(() => [
 					renderSlot(_ctx.$slots, "prepend"),
 					slots.default ? (openBlock(), createElementBlock("span", {
@@ -84,6 +94,7 @@ var RuiButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						key: 1,
 						circular: "",
 						"data-spinner": "",
+						"aria-hidden": "true",
 						class: normalizeClass(unref(ui).spinner()),
 						variant: "indeterminate",
 						thickness: "2",
@@ -96,8 +107,10 @@ var RuiButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				"disabled",
 				"type",
 				"data-variant",
+				"data-size",
 				"data-color",
-				"data-active"
+				"data-active",
+				"aria-busy"
 			]);
 		};
 	}

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';\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:model-value': [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:model-value', 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,SAAA;EAMd,MAAM,WAAW,eAA8B,QAAA,UAAU;EAEzD,MAAM,mBAAmB,eAAuB,QAAA,YAAY,cAAc,MAAA,IAAA,CAA0C;EACpH,MAAM,gBAAgB,eAAgC,QAAA,WAAA,IAA0B,QAAA,aAAa,IAAI,gBAAgB,CAAC;EAElH,MAAM,cAAc,eAAuB,qBAAqB,QAAA,IAAI,CAAC;EAErE,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;EACnB,CAAC,CAAC;;GAIA,OAAA,UAAA,GAAA,YAgCY,wBA/BL,QAAA,GAAG,GADV,WAgCY;IA9BT,OAAK,CAAU,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA,GAAsB,UAAA,MAAA,aAAA,GAAA;IAIrE,UAAU,QAAA,YAAY,QAAA;IACtB,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO,KAAA;IAChC,gBAAc,QAAA;IACd,cAAY,QAAA;IACZ,eAAa,QAAA,UAAU,KAAA;GACXA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,sBAAuB,MAAA,QAAA,CAAQ,GAAA,CAAA,GAAA;IAE3C,SAAA,cAAuB;KAAvB,WAAuB,KAAA,QAAA,SAAA;KAEf,MAAM,WADd,UAAA,GAAA,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;MAChB,WAAQ;KAER,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEV,WAAsB,KAAA,QAAA,QAAA;KAEd,QAAA,WADR,UAAA,GAAA,YAQE,qBAAA;;MANA,UAAA;MACA,gBAAA;MACC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;MAClB,SAAQ;MACR,WAAU;MACT,MAAM,MAAA,WAAA"}
+{"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 { ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ButtonSize, ButtonVariant, getButtonSpinnerSize } 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  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  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:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\n// a RuiButtonGroup anywhere above, unless an overlay's content sits in between\nconst group = inject(ButtonGroupKey, undefined);\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant() ?? variant);\n\nconst resolvedSize = computed<ButtonSize | undefined>(() => size ?? group?.size());\n\nconst resolvedDisabled = computed<boolean>(() => disabled || (group?.disabled() ?? false));\n\n// a grouped button is pressed when the group's model holds its value; it needs one to take part\nconst resolvedActive = computed<boolean>(() => active || (!!group && modelValue !== undefined && group.isActive(modelValue)));\n\nconst resolvedColor = computed<ContextColorsType | undefined>(() => group?.color(get(resolvedActive)) ?? color);\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant: get(resolvedVariant),\n  color: get(resolvedColor) ?? 'grey',\n  size: get(resolvedSize),\n  rounded,\n  icon,\n  active: get(resolvedActive),\n  loading,\n  hideFocusIndicator,\n}));\n\nfunction onClick(): void {\n  emit('update:model-value', get(btnValue));\n  if (group && modelValue !== undefined)\n    group.toggle(modelValue);\n}\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"ui.root({ class: cn([group?.itemClass(), $attrs.class]) })\"\n    :disabled=\"resolvedDisabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-size=\"resolvedSize ?? 'md'\"\n    :data-color=\"resolvedColor\"\n    :data-active=\"resolvedActive || undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"onClick()\"\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    <!-- the button's aria-busy announces the wait, so the spinner stays out of the accessibility tree -->\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      aria-hidden=\"true\"\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,SAAA;EAOd,MAAM,QAAQ,OAAO,gBAAgB,KAAA,CAAS;EAE9C,MAAM,WAAW,eAA8B,QAAA,UAAU;EAEzD,MAAM,kBAAkB,eAA8B,OAAO,QAAQ,KAAK,QAAA,OAAO;EAEjF,MAAM,eAAe,eAAuC,QAAA,QAAQ,OAAO,KAAK,CAAC;EAEjF,MAAM,mBAAmB,eAAwB,QAAA,aAAa,OAAO,SAAS,KAAK,MAAM;EAGzF,MAAM,iBAAiB,eAAwB,QAAA,UAAW,CAAC,CAAC,SAAS,QAAA,eAAe,KAAA,KAAa,MAAM,SAAS,QAAA,UAAU,CAAE;EAE5H,MAAM,gBAAgB,eAA8C,OAAO,MAAM,IAAI,cAAc,CAAC,KAAK,QAAA,KAAK;EAE9G,MAAM,cAAc,eAAuB,qBAAqB,IAAI,YAAY,CAAC,CAAC;EAElF,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAS,IAAI,eAAe;GAC5B,OAAO,IAAI,aAAa,KAAK;GAC7B,MAAM,IAAI,YAAY;GACtB,SAAM,QAAA;GACN,MAAG,QAAA;GACH,QAAQ,IAAI,cAAc;GAC1B,SAAM,QAAA;GACN,oBAAiB,QAAA;EACnB,CAAC,CAAC;EAEF,SAAS,UAAgB;GACvB,KAAK,sBAAsB,IAAI,QAAQ,CAAC;GACxC,IAAI,SAAS,QAAA,eAAe,KAAA,GAC1B,MAAM,OAAO,QAAA,UAAU;EAC3B;;GAIE,OAAA,UAAA,GAAA,YAiCY,wBAhCL,QAAA,GAAG,GADV,WAiCY;IA/BT,OAAO,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAU,MAAA,EAAA,CAAE,CAAA,CAAE,MAAA,KAAA,CAAK,EAAE,UAAS,GAAIA,KAAAA,OAAO,KAAK,CAAA,EAAA,CAAA;IAC5D,UAAU,MAAA,gBAAA,KAAoB,QAAA;IAC9B,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO,KAAA;IAChC,gBAAc,MAAA,eAAA;IACd,aAAW,MAAA,YAAA,KAAY;IACvB,cAAY,MAAA,aAAA;IACZ,eAAa,MAAA,cAAA,KAAkB,KAAA;IAC/B,aAAW,QAAA,WAAW,KAAA;GACVA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA;IAEf,SAAA,cAAuB;KAAvB,WAAuB,KAAA,QAAA,SAAA;KAEf,MAAM,WADd,UAAA,GAAA,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;MAChB,WAAQ;KAER,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEV,WAAsB,KAAA,QAAA,QAAA;KAGd,QAAA,WADR,UAAA,GAAA,YASE,qBAAA;;MAPA,UAAA;MACA,gBAAA;MACA,eAAY;MACX,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;MAClB,SAAQ;MACR,WAAU;MACT,MAAM,MAAA,WAAA"}

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

@@ -14,6 +14,4 @@ export declare const ButtonSize: {
     readonly '2xl': "2xl";
 };
 export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
-export declare const FAB_DEFAULT_ELEVATION = 6;
-export declare const NO_ELEVATION = 0;
 export declare function getButtonSpinnerSize(size?: ButtonSize): number;

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

@@ -8,12 +8,12 @@ var ButtonVariant = {
 };
 var SPINNER_SIZES = {
 	"xs": 12,
-	"sm": 18,
-	"lg": 26,
-	"xl": 26,
-	"2xl": 28
+	"sm": 16,
+	"lg": 22,
+	"xl": 24,
+	"2xl": 24
 };
-var DEFAULT_SPINNER_SIZE = 22;
+var DEFAULT_SPINNER_SIZE = 18;
 function getButtonSpinnerSize(size) {
 	return size && SPINNER_SIZES[size] || DEFAULT_SPINNER_SIZE;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"button-props.js","names":[],"sources":["../../../../src/components/buttons/button/button-props.ts"],"sourcesContent":["export const ButtonVariant = {\n  default: 'default',\n  outlined: 'outlined',\n  text: 'text',\n  fab: 'fab',\n  list: 'list',\n} as const;\n\nexport type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];\n\nexport const ButtonSize = {\n  'xs': 'xs',\n  'sm': 'sm',\n  'lg': 'lg',\n  'xl': 'xl',\n  '2xl': '2xl',\n} as const;\n\nexport type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];\n\nconst SPINNER_SIZES: Record<string, number> = { 'xs': 12, 'sm': 18, 'lg': 26, 'xl': 26, '2xl': 28 };\nconst DEFAULT_SPINNER_SIZE = 22;\n\nexport const FAB_DEFAULT_ELEVATION = 6;\n\nexport const NO_ELEVATION = 0;\n\nexport function getButtonSpinnerSize(size?: ButtonSize): number {\n  return (size && SPINNER_SIZES[size]) || DEFAULT_SPINNER_SIZE;\n}\n"],"mappings":";AAAA,IAAa,gBAAgB;CAC3B,SAAS;CACT,UAAU;CACV,MAAM;CACN,KAAK;CACL,MAAM;AACR;AAcA,IAAM,gBAAwC;CAAE,MAAM;CAAI,MAAM;CAAI,MAAM;CAAI,MAAM;CAAI,OAAO;AAAG;AAClG,IAAM,uBAAuB;AAM7B,SAAgB,qBAAqB,MAA2B;CAC9D,OAAQ,QAAQ,cAAc,SAAU;AAC1C"}
+{"version":3,"file":"button-props.js","names":[],"sources":["../../../../src/components/buttons/button/button-props.ts"],"sourcesContent":["export const ButtonVariant = {\n  default: 'default',\n  outlined: 'outlined',\n  text: 'text',\n  fab: 'fab',\n  list: 'list',\n} as const;\n\nexport type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];\n\nexport const ButtonSize = {\n  'xs': 'xs',\n  'sm': 'sm',\n  'lg': 'lg',\n  'xl': 'xl',\n  '2xl': '2xl',\n} as const;\n\nexport type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];\n\n// the icon size plus 2px: the spinner takes the icon's place, a thin ring reading lighter than a glyph\nconst SPINNER_SIZES: Record<string, number> = { 'xs': 12, 'sm': 16, 'lg': 22, 'xl': 24, '2xl': 24 };\nconst DEFAULT_SPINNER_SIZE = 18;\n\nexport function getButtonSpinnerSize(size?: ButtonSize): number {\n  return (size && SPINNER_SIZES[size]) || DEFAULT_SPINNER_SIZE;\n}\n"],"mappings":";AAAA,IAAa,gBAAgB;CAC3B,SAAS;CACT,UAAU;CACV,MAAM;CACN,KAAK;CACL,MAAM;AACR;AAeA,IAAM,gBAAwC;CAAE,MAAM;CAAI,MAAM;CAAI,MAAM;CAAI,MAAM;CAAI,OAAO;AAAG;AAClG,IAAM,uBAAuB;AAE7B,SAAgB,qBAAqB,MAA2B;CAC9D,OAAQ,QAAQ,cAAc,SAAU;AAC1C"}

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

@@ -30,7 +30,7 @@
  * ```
  * xs            p-[0.1875rem] + 0.875rem icon = 1.25rem (20px)   70%
  * sm            p-1           + 1.25rem  icon = 1.75rem (28px)   71%
- * md (default)  p-1.5         + 1.25rem  icon = 2rem    (32px)   63%
+ * md (default)  p-2           + 1.25rem  icon = 2.25rem (36px)   56%
  * lg            p-1.5         + 1.5rem   icon = 2.25rem (36px)   67%
  * xl            p-2           + 1.5rem   icon = 2.5rem  (40px)   60%
  * 2xl           p-2           + 1.75rem  icon = 2.75rem (44px)   64%
@@ -99,6 +99,7 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
     icon: {
         true: {
             root: string;
+            label: string;
         };
     };
     active: {
@@ -183,6 +184,7 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
     icon: {
         true: {
             root: string;
+            label: string;
         };
     };
     active: {
@@ -267,6 +269,7 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
     icon: {
         true: {
             root: string;
+            label: string;
         };
     };
     active: {

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

@@ -32,7 +32,7 @@ import { tv } from "../../../utils/tv.js";
 * ```
 * xs            p-[0.1875rem] + 0.875rem icon = 1.25rem (20px)   70%
 * sm            p-1           + 1.25rem  icon = 1.75rem (28px)   71%
-* md (default)  p-1.5         + 1.25rem  icon = 2rem    (32px)   63%
+* md (default)  p-2           + 1.25rem  icon = 2.25rem (36px)   56%
 * lg            p-1.5         + 1.5rem   icon = 2.25rem (36px)   67%
 * xl            p-2           + 1.5rem   icon = 2.5rem  (40px)   60%
 * 2xl           p-2           + 1.75rem  icon = 2.75rem (44px)   64%
@@ -41,12 +41,12 @@ import { tv } from "../../../utils/tv.js";
 var buttonStyles = tv({
 	slots: {
 		root: [
-			"text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]",
+			"text-sm leading-5 font-medium inset-ring inset-ring-transparent",
 			"flex items-center justify-center gap-x-2",
-			"px-4 py-1.5 rounded transition-all",
-			"[--rui-icon-size:1.125rem]",
+			"px-4 py-2 rounded-rui-control transition-colors duration-150",
+			"[--rui-icon-size:1rem]",
 			"disabled:cursor-not-allowed",
-			"focus-visible:!ring-2"
+			"focus-visible:focus-ring"
 		].join(" "),
 		label: "inline-block text-nowrap",
 		spinner: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
@@ -56,49 +56,64 @@ var buttonStyles = tv({
 			default: {},
 			outlined: {},
 			text: { root: "px-2" },
-			fab: { root: "rounded-full py-2" },
+			fab: { root: "rounded-full py-2 shadow-rui-control disabled:shadow-none" },
 			list: {
-				root: "p-3 px-3 rounded-none w-full justify-start text-left",
-				label: "w-full leading-[1.125rem]"
+				root: "p-3 px-3 rounded-rui-sm w-full justify-start text-left",
+				label: "w-full leading-4"
 			}
 		},
 		size: {
 			"xs": { root: "px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]" },
-			"sm": { root: "px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:1rem]" },
+			"sm": { root: "px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:0.875rem]" },
 			"lg": { root: "px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]" },
 			"xl": { root: "px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]" },
 			"2xl": { root: "px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]" }
 		},
 		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" },
-			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" },
-			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" },
-			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" },
-			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" },
-			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" },
-			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" }
+			grey: { root: "bg-rui-neutral-100 hover:bg-rui-neutral-200 active:bg-rui-neutral-300 text-rui-text dark:bg-rui-neutral-800 dark:hover:bg-rui-neutral-700 dark:active:bg-rui-neutral-600" },
+			primary: { root: "bg-rui-primary active:bg-rui-primary-darker text-rui-dark-text dark:text-rui-text" },
+			secondary: { root: "bg-rui-secondary active:bg-rui-secondary-darker text-rui-dark-text dark:text-rui-text" },
+			error: { root: "bg-rui-error active:bg-rui-error-darker text-rui-dark-text dark:text-rui-text" },
+			warning: { root: "bg-rui-warning active:bg-rui-warning-darker text-rui-dark-text dark:text-rui-text" },
+			info: { root: "bg-rui-info active:bg-rui-info-darker text-rui-dark-text dark:text-rui-text" },
+			success: { root: "bg-rui-success active:bg-rui-success-darker text-rui-dark-text dark:text-rui-text" }
 		},
 		rounded: { true: { root: "rounded-full" } },
-		icon: { true: { root: "rounded-full" } },
+		icon: { true: {
+			root: "rounded-full",
+			label: "inline-flex"
+		} },
 		active: {
 			true: {},
 			false: {}
 		},
 		loading: {
-			true: { root: "relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible" },
+			true: { root: "relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0" },
 			false: {}
 		},
-		hideFocusIndicator: { true: { root: "focus-visible:!ring-0" } }
+		hideFocusIndicator: { true: { root: "focus-visible:!outline-hidden" } }
 	},
 	compoundVariants: [
+		{
+			variant: ["default", "fab"],
+			color: [
+				"primary",
+				"secondary",
+				"error",
+				"warning",
+				"info",
+				"success"
+			],
+			class: { root: "not-disabled:hover:state-layer-pressed" }
+		},
 		{
 			loading: false,
-			class: { root: "disabled:!bg-black/[.12] dark:disabled:!bg-white/[.12] disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled" }
+			class: { root: "disabled:!bg-rui-neutral-100 dark:disabled:!bg-rui-neutral-800 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" }
+			class: { root: "disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:inset-ring-rui-text-disabled dark:disabled:inset-ring-rui-text-disabled" }
 		},
 		{
 			loading: false,
@@ -113,7 +128,7 @@ var buttonStyles = tv({
 		{
 			color: "grey",
 			active: true,
-			class: { root: "bg-rui-grey-50" }
+			class: { root: "bg-rui-neutral-200 dark:bg-rui-neutral-700" }
 		},
 		{
 			color: "grey",
@@ -122,7 +137,7 @@ var buttonStyles = tv({
 				"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" }
+			class: { root: "bg-transparent hover:bg-rui-hover active:bg-rui-pressed dark:bg-transparent dark:text-rui-text" }
 		},
 		{
 			color: "grey",
@@ -132,12 +147,12 @@ var buttonStyles = tv({
 				"list"
 			],
 			active: true,
-			class: { root: "bg-black/10 dark:bg-white/30" }
+			class: { root: "bg-rui-pressed dark:bg-rui-pressed" }
 		},
 		{
 			color: "grey",
 			variant: "outlined",
-			class: { root: "outline-black/[0.23] dark:outline-white/[0.23]" }
+			class: { root: "inset-ring-rui-outline" }
 		},
 		{
 			color: "grey",
@@ -151,7 +166,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 dark:text-rui-primary" }
+			class: { root: "bg-transparent hover:bg-rui-primary/6 active:bg-rui-primary/10 text-rui-primary dark:text-rui-primary-lighter" }
 		},
 		{
 			color: "secondary",
@@ -160,7 +175,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 dark:text-rui-secondary" }
+			class: { root: "bg-transparent hover:bg-rui-secondary/6 active:bg-rui-secondary/10 text-rui-secondary dark:text-rui-secondary-lighter" }
 		},
 		{
 			color: "error",
@@ -169,7 +184,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 dark:text-rui-error" }
+			class: { root: "bg-transparent hover:bg-rui-error/6 active:bg-rui-error/10 text-rui-error dark:text-rui-error-lighter" }
 		},
 		{
 			color: "warning",
@@ -178,7 +193,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 dark:text-rui-warning" }
+			class: { root: "bg-transparent hover:bg-rui-warning/6 active:bg-rui-warning/10 text-rui-warning dark:text-rui-warning" }
 		},
 		{
 			color: "info",
@@ -187,7 +202,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 dark:text-rui-info" }
+			class: { root: "bg-transparent hover:bg-rui-info/6 active:bg-rui-info/10 text-rui-info dark:text-rui-info" }
 		},
 		{
 			color: "success",
@@ -196,7 +211,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 dark:text-rui-success" }
+			class: { root: "bg-transparent hover:bg-rui-success/6 active:bg-rui-success/10 text-rui-success dark:text-rui-success" }
 		},
 		{
 			color: "primary",
@@ -236,7 +251,7 @@ var buttonStyles = tv({
 				"list"
 			],
 			active: true,
-			class: { root: "bg-rui-primary-lighter/30" }
+			class: { root: "bg-rui-primary/[0.08] text-rui-primary-darker" }
 		},
 		{
 			color: "secondary",
@@ -246,7 +261,7 @@ var buttonStyles = tv({
 				"list"
 			],
 			active: true,
-			class: { root: "bg-rui-secondary-lighter/30" }
+			class: { root: "bg-rui-secondary/[0.08] text-rui-secondary-darker" }
 		},
 		{
 			color: "error",
@@ -256,7 +271,7 @@ var buttonStyles = tv({
 				"list"
 			],
 			active: true,
-			class: { root: "bg-rui-error-lighter/30" }
+			class: { root: "bg-rui-error/[0.08] text-rui-error-darker" }
 		},
 		{
 			color: "warning",
@@ -266,7 +281,7 @@ var buttonStyles = tv({
 				"list"
 			],
 			active: true,
-			class: { root: "bg-rui-warning-lighter/30" }
+			class: { root: "bg-rui-warning/[0.08] text-rui-warning-darker" }
 		},
 		{
 			color: "info",
@@ -276,7 +291,7 @@ var buttonStyles = tv({
 				"list"
 			],
 			active: true,
-			class: { root: "bg-rui-info-lighter/30" }
+			class: { root: "bg-rui-info/[0.08] text-rui-info-darker" }
 		},
 		{
 			color: "success",
@@ -286,37 +301,37 @@ var buttonStyles = tv({
 				"list"
 			],
 			active: true,
-			class: { root: "bg-rui-success-lighter/30" }
+			class: { root: "bg-rui-success/[0.08] text-rui-success-darker" }
 		},
 		{
 			color: "primary",
 			variant: "outlined",
-			class: { root: "outline-rui-primary/[0.5]" }
+			class: { root: "inset-ring-rui-primary/50 dark:inset-ring-rui-primary" }
 		},
 		{
 			color: "secondary",
 			variant: "outlined",
-			class: { root: "outline-rui-secondary/[0.5]" }
+			class: { root: "inset-ring-rui-secondary/50 dark:inset-ring-rui-secondary" }
 		},
 		{
 			color: "error",
 			variant: "outlined",
-			class: { root: "outline-rui-error/[0.5]" }
+			class: { root: "inset-ring-rui-error/50" }
 		},
 		{
 			color: "warning",
 			variant: "outlined",
-			class: { root: "outline-rui-warning/[0.5]" }
+			class: { root: "inset-ring-rui-warning/50" }
 		},
 		{
 			color: "info",
 			variant: "outlined",
-			class: { root: "outline-rui-info/[0.5]" }
+			class: { root: "inset-ring-rui-info/50" }
 		},
 		{
 			color: "success",
 			variant: "outlined",
-			class: { root: "outline-rui-success/[0.5]" }
+			class: { root: "inset-ring-rui-success/50" }
 		},
 		{
 			variant: "text",
@@ -366,11 +381,11 @@ var buttonStyles = tv({
 		{
 			variant: "list",
 			size: "sm",
-			class: { root: "px-3 py-1" }
+			class: { root: "px-3 py-2" }
 		},
 		{
 			icon: true,
-			class: { root: "p-1.5 ![--rui-icon-size:1.25rem]" }
+			class: { root: "p-2 ![--rui-icon-size:1.25rem]" }
 		},
 		{
 			icon: true,
@@ -407,13 +422,27 @@ var buttonStyles = tv({
 	compoundSlots: [
 		{
 			slots: ["root"],
-			color: [
-				"warning",
-				"success",
-				"info"
-			],
-			variant: "default",
-			class: "dark:text-rui-light-text"
+			color: "error",
+			variant: ["default", "fab"],
+			class: "dark:bg-rui-error-darker dark:active:bg-rui-error-darker/75"
+		},
+		{
+			slots: ["root"],
+			color: "warning",
+			variant: ["default", "fab"],
+			class: "dark:bg-rui-warning-darker dark:active:bg-rui-warning-darker/75"
+		},
+		{
+			slots: ["root"],
+			color: "info",
+			variant: ["default", "fab"],
+			class: "dark:bg-rui-info-darker dark:active:bg-rui-info-darker/75"
+		},
+		{
+			slots: ["root"],
+			color: "success",
+			variant: ["default", "fab"],
+			class: "dark:bg-rui-success-darker dark:active:bg-rui-success-darker/75"
 		},
 		{
 			slots: ["root"],
@@ -424,7 +453,7 @@ var buttonStyles = tv({
 				"list"
 			],
 			active: true,
-			class: "dark:bg-rui-primary-darker/60 dark:text-rui-primary-lighter"
+			class: "dark:bg-rui-primary/[0.16] dark:text-rui-primary-lighter"
 		},
 		{
 			slots: ["root"],
@@ -435,7 +464,51 @@ var buttonStyles = tv({
 				"list"
 			],
 			active: true,
-			class: "dark:bg-rui-secondary-darker/60 dark:text-rui-secondary-lighter"
+			class: "dark:bg-rui-secondary/[0.16] dark:text-rui-secondary-lighter"
+		},
+		{
+			slots: ["root"],
+			color: "error",
+			variant: [
+				"outlined",
+				"text",
+				"list"
+			],
+			active: true,
+			class: "dark:bg-rui-error/[0.16] dark:text-rui-error-lighter"
+		},
+		{
+			slots: ["root"],
+			color: "warning",
+			variant: [
+				"outlined",
+				"text",
+				"list"
+			],
+			active: true,
+			class: "dark:bg-rui-warning/[0.16] dark:text-rui-warning-lighter"
+		},
+		{
+			slots: ["root"],
+			color: "info",
+			variant: [
+				"outlined",
+				"text",
+				"list"
+			],
+			active: true,
+			class: "dark:bg-rui-info/[0.16] dark:text-rui-info-lighter"
+		},
+		{
+			slots: ["root"],
+			color: "success",
+			variant: [
+				"outlined",
+				"text",
+				"list"
+			],
+			active: true,
+			class: "dark:bg-rui-success/[0.16] dark:text-rui-success-lighter"
 		}
 	],
 	defaultVariants: {