ropav 0.0.5 → 0.0.7

package/dist/icon-button.css

@@ -1,14 +1,26 @@
-.rp-button[data-v-4a239144] {
-  --_rp-button-accent: var(--rp-color-primary);
-  --_rp-button-accent-hover: var(--rp-color-primary-hover);
-  --_rp-button-accent-active: var(--rp-color-primary-active);
-  --_rp-button-accent-on: var(--rp-color-on-primary);
-  --_rp-button-accent-subtle-bg: var(--rp-color-primary-subtle-bg);
-  --_rp-button-accent-subtle-bg-hover: var(--rp-color-primary-subtle-bg-hover);
-  --_rp-button-accent-subtle-bg-active: var(--rp-color-primary-subtle-bg-active);
-  --_rp-button-accent-border: var(--rp-color-primary-border);
-  --_rp-button-accent-border-hover: var(--rp-color-primary-border-hover);
-  --_rp-button-accent-fg: var(--rp-color-primary-fg);
+.rp-button[data-v-7005752e] {
+  --_rp-button-accent: var(--_rp-button-custom-color, var(--rp-color-primary));
+  --_rp-button-accent-hover: var(--_rp-button-custom-hover, var(--rp-color-primary-hover));
+  --_rp-button-accent-active: var(--_rp-button-custom-active, var(--rp-color-primary-active));
+  --_rp-button-accent-on: var(--_rp-button-custom-on, var(--rp-color-on-primary));
+  --_rp-button-accent-subtle-bg: var(
+      --_rp-button-custom-subtle-bg,
+      var(--rp-color-primary-subtle-bg)
+  );
+  --_rp-button-accent-subtle-bg-hover: var(
+      --_rp-button-custom-subtle-bg-hover,
+      var(--rp-color-primary-subtle-bg-hover)
+  );
+  --_rp-button-accent-subtle-bg-active: var(
+      --_rp-button-custom-subtle-bg-active,
+      var(--rp-color-primary-subtle-bg-active)
+  );
+  --_rp-button-accent-border: var(--_rp-button-custom-border, var(--rp-color-primary-border));
+  --_rp-button-accent-border-hover: var(
+      --_rp-button-custom-border-hover,
+      var(--rp-color-primary-border-hover)
+  );
+  --_rp-button-accent-fg: var(--_rp-button-custom-fg, var(--rp-color-primary-fg));
   --_rp-button-bg: var(--rp-color-button-default-bg);
   --_rp-button-bg-hover: var(--rp-color-button-default-bg-hover);
   --_rp-button-bg-active: var(--rp-color-button-default-bg-active);
@@ -26,8 +38,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  position: relative;
   box-sizing: border-box;
-  gap: var(--rp-spacing-2);
   font-family: var(--rp-font-family);
   font-weight: var(--rp-font-weight-medium);
   line-height: var(--rp-line-height-none);
@@ -45,18 +57,18 @@
   font-size: var(--_rp-button-font-size);
   border-radius: var(--_rp-button-radius);
 }
-.rp-button[data-v-4a239144]:hover:not(:disabled) {
+.rp-button[data-v-7005752e]:hover:not(:disabled) {
   background-color: var(--_rp-button-bg-hover);
   border-color: var(--_rp-button-border-hover);
   box-shadow: var(--_rp-button-shadow-hover);
 }
-.rp-button[data-v-4a239144]:active:not(:disabled) {
+.rp-button[data-v-7005752e]:active:not(:disabled) {
   background-color: var(--_rp-button-bg-active);
   border-color: var(--_rp-button-border-active);
   box-shadow: var(--_rp-button-shadow-active);
   transform: translateY(1px);
 }
-.rp-button--color-primary[data-v-4a239144] {
+.rp-button--color-primary[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-primary);
   --_rp-button-accent-hover: var(--rp-color-primary-hover);
   --_rp-button-accent-active: var(--rp-color-primary-active);
@@ -73,7 +85,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-secondary[data-v-4a239144] {
+.rp-button--color-secondary[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-secondary);
   --_rp-button-accent-hover: var(--rp-color-secondary-hover);
   --_rp-button-accent-active: var(--rp-color-secondary-active);
@@ -90,7 +102,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-success[data-v-4a239144] {
+.rp-button--color-success[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-success);
   --_rp-button-accent-hover: var(--rp-color-success-hover);
   --_rp-button-accent-active: var(--rp-color-success-active);
@@ -107,7 +119,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-warning[data-v-4a239144] {
+.rp-button--color-warning[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-warning);
   --_rp-button-accent-hover: var(--rp-color-warning-hover);
   --_rp-button-accent-active: var(--rp-color-warning-active);
@@ -124,7 +136,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-danger[data-v-4a239144] {
+.rp-button--color-danger[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-danger);
   --_rp-button-accent-hover: var(--rp-color-danger-hover);
   --_rp-button-accent-active: var(--rp-color-danger-active);
@@ -141,7 +153,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-info[data-v-4a239144] {
+.rp-button--color-info[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-info);
   --_rp-button-accent-hover: var(--rp-color-info-hover);
   --_rp-button-accent-active: var(--rp-color-info-active);
@@ -158,7 +170,7 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--color-neutral[data-v-4a239144] {
+.rp-button--color-neutral[data-v-7005752e] {
   --_rp-button-accent: var(--rp-color-neutral);
   --_rp-button-accent-hover: var(--rp-color-neutral-hover);
   --_rp-button-accent-active: var(--rp-color-neutral-active);
@@ -175,42 +187,42 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--size-xs[data-v-4a239144] {
+.rp-button--size-xs[data-v-7005752e] {
   --_rp-button-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
   --_rp-button-padding-x: var(--rp-spacing-2);
   --_rp-button-font-size: var(--rp-font-size-xs);
 }
-.rp-button--size-sm[data-v-4a239144] {
+.rp-button--size-sm[data-v-7005752e] {
   --_rp-button-height: var(--rp-size-control-sm);
   --_rp-button-padding-x: var(--rp-spacing-3);
   --_rp-button-font-size: var(--rp-font-size-sm);
 }
-.rp-button--size-lg[data-v-4a239144] {
+.rp-button--size-lg[data-v-7005752e] {
   --_rp-button-height: var(--rp-size-control-lg);
   --_rp-button-padding-x: var(--rp-spacing-5);
   --_rp-button-font-size: var(--rp-font-size-lg);
 }
-.rp-button--size-xl[data-v-4a239144] {
+.rp-button--size-xl[data-v-7005752e] {
   --_rp-button-height: calc(var(--rp-size-control-lg) + var(--rp-spacing-2));
   --_rp-button-padding-x: var(--rp-spacing-6);
   --_rp-button-font-size: var(--rp-font-size-lg);
 }
-.rp-button--radius-xs[data-v-4a239144] {
+.rp-button--radius-xs[data-v-7005752e] {
   --_rp-button-radius: var(--rp-radius-xs);
 }
-.rp-button--radius-sm[data-v-4a239144] {
+.rp-button--radius-sm[data-v-7005752e] {
   --_rp-button-radius: var(--rp-radius-sm);
 }
-.rp-button--radius-md[data-v-4a239144] {
+.rp-button--radius-md[data-v-7005752e] {
   --_rp-button-radius: var(--rp-radius-md);
 }
-.rp-button--radius-lg[data-v-4a239144] {
+.rp-button--radius-lg[data-v-7005752e] {
   --_rp-button-radius: var(--rp-radius-lg);
 }
-.rp-button--radius-xl[data-v-4a239144] {
+.rp-button--radius-xl[data-v-7005752e] {
   --_rp-button-radius: var(--rp-radius-xl);
 }
-.rp-button--solid[data-v-4a239144] {
+.rp-button--solid[data-v-7005752e] {
   --_rp-button-bg: var(--_rp-button-accent);
   --_rp-button-bg-hover: var(--_rp-button-accent-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-active);
@@ -219,7 +231,7 @@
   --_rp-button-border-active: var(--_rp-button-accent-active);
   --_rp-button-fg: var(--_rp-button-accent-on);
 }
-.rp-button--subtle[data-v-4a239144] {
+.rp-button--subtle[data-v-7005752e] {
   --_rp-button-bg: var(--_rp-button-accent-subtle-bg);
   --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
@@ -231,7 +243,7 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--surface[data-v-4a239144] {
+.rp-button--surface[data-v-7005752e] {
   --_rp-button-bg: var(--_rp-button-accent-subtle-bg);
   --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
@@ -243,7 +255,7 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--outline[data-v-4a239144] {
+.rp-button--outline[data-v-7005752e] {
   --_rp-button-bg: transparent;
   --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
@@ -255,7 +267,7 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--ghost[data-v-4a239144] {
+.rp-button--ghost[data-v-7005752e] {
   --_rp-button-bg: transparent;
   --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
   --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
@@ -267,7 +279,7 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button--plain[data-v-4a239144] {
+.rp-button--plain[data-v-7005752e] {
   --_rp-button-bg: transparent;
   --_rp-button-bg-hover: transparent;
   --_rp-button-bg-active: transparent;
@@ -279,60 +291,81 @@
   --_rp-button-shadow-hover: none;
   --_rp-button-shadow-active: none;
 }
-.rp-button[data-v-4a239144]:disabled {
+.rp-button[data-v-7005752e]:disabled {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
   box-shadow: none;
   transform: none;
 }
-.rp-button[data-v-4a239144]:focus-visible {
+.rp-button[data-v-7005752e]:focus-visible {
   outline: none;
   border-color: var(--rp-color-primary);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-button__left[data-v-4a239144], .rp-button__right[data-v-4a239144] {
+.rp-button--loading .rp-button__content[data-v-7005752e] {
+  visibility: hidden;
+}
+.rp-button__content[data-v-7005752e] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rp-spacing-2);
+}
+.rp-button__left[data-v-7005752e], .rp-button__right[data-v-7005752e] {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
 }
-.rp-button__spinner[data-v-4a239144] {
+.rp-button__loading[data-v-7005752e] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+.rp-button__spinner[data-v-7005752e] {
   display: block;
   width: 1em;
   height: 1em;
   flex-shrink: 0;
   transform-origin: center;
-  animation: rp-button-spin-4a239144 700ms linear infinite;
+  animation: rp-spinner-spin-7005752e 700ms linear infinite;
 }
-@keyframes rp-button-spin-4a239144 {
+@keyframes rp-spinner-spin-7005752e {
 to {
     transform: rotate(360deg);
 }
-}.rp-icon-button[data-v-4a239144] {
+}.rp-icon-button[data-v-7005752e] {
   width: var(--_rp-button-height);
   padding: 0;
 }
-.rp-icon-button__icon[data-v-4a239144], .rp-icon-button__spinner[data-v-4a239144] {
+.rp-icon-button__icon[data-v-7005752e] {
   width: 1em;
   height: 1em;
   flex-shrink: 0;
 }
-.rp-icon-button__icon[data-v-4a239144] {
+.rp-icon-button__icon[data-v-7005752e] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: 0;
 }
-.rp-icon-button__icon svg[data-v-4a239144-s] {
+.rp-icon-button__icon[data-v-7005752e] >  svg {
   display: block;
   width: 1em;
   height: 1em;
 }
-.rp-icon-button__spinner[data-v-4a239144] {
+.rp-icon-button__spinner[data-v-7005752e] {
   display: block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
   transform-origin: center;
-  animation: rp-icon-button-spin-4a239144 700ms linear infinite;
+  animation: rp-spinner-spin-7005752e 700ms linear infinite;
 }
-@keyframes rp-icon-button-spin-4a239144 {
+@keyframes rp-spinner-spin-7005752e {
 to {
     transform: rotate(360deg);
 }

package/dist/icon-button.js

@@ -1,10 +1,12 @@
 import './icon-button.css';
-import { t as loader_circle_default } from "./loader-circle.js";
-import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { r as isComponentPresetColor } from "./componentColors.js";
+import { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.js";
+import { computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
 //#region src/components/icon-button/icon-button.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-4a239144 class=rp-icon-button__icon aria-hidden=true>");
-var t1 = template("<button data-v-4a239144>", 1);
+var t0 = template("<span data-v-7005752e class=rp-icon-button__icon aria-hidden=true>");
+var t1 = template("<button data-v-7005752e>", 1);
 //#endregion
 //#region src/components/icon-button/icon-button.vue
 var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -28,22 +30,25 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	},
 	setup(__props) {
 		const props = __props;
-		const isLoading = computed(() => props.loading && !props.disabled);
 		const rootClass = computed(() => [...bem("rp-button", {
 			[props.variant ?? ""]: Boolean(props.variant),
-			[`color-${props.color}`]: Boolean(props.color),
+			[`color-${props.color}`]: isComponentPresetColor(props.color),
 			[`size-${props.size}`]: Boolean(props.size),
 			[`radius-${props.radius}`]: Boolean(props.radius)
 		}), "rp-icon-button"]);
+		const rootStyle = computed(() => getButtonColorStyle(props.color));
 		const n6 = t1();
 		renderEffect(() => {
+			const _loading = __props.loading;
 			setClass(n6, rootClass.value);
-			setProp(n6, "disabled", __props.disabled || isLoading.value || void 0);
+			setStyle(n6, rootStyle.value);
+			setProp(n6, "disabled", __props.disabled || _loading || void 0);
 			setProp(n6, "type", __props.type);
 			setAttr(n6, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n6, "aria-busy", _loading || void 0);
 		});
 		setInsertionState(n6, null, 0);
-		createIf(() => isLoading.value, () => {
+		createIf(() => __props.loading, () => {
 			return createComponent(unref(loader_circle_default), {
 				class: "rp-icon-button__spinner",
 				"aria-hidden": "true"
@@ -56,7 +61,7 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		}, 261);
 		return n6;
 	}
-}), [["__scopeId", "data-v-4a239144"]]);
+}), [["__scopeId", "data-v-7005752e"]]);
 //#endregion
 export { icon_button_default as t };
 

package/dist/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","names":[],"sources":["../src/components/icon-button/icon-button.vue","../src/components/icon-button/icon-button.vue"],"sourcesContent":["<template>\n    <button\n        :class=\"rootClass\"\n        :disabled=\"disabled || isLoading || undefined\"\n        :type=\"type\"\n        :aria-label=\"ariaLabel || undefined\"\n    >\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-icon-button__spinner\" aria-hidden=\"true\" />\n        <span v-else class=\"rp-icon-button__icon\" aria-hidden=\"true\">\n            <slot />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { bem } from '@/utils/bem';\nimport type { IconButtonProps } from './types';\n\ndefineOptions({ name: 'RpIconButton' });\n\nconst props = withDefaults(defineProps<IconButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst isLoading = computed(() => props.loading && !props.disabled);\n\nconst rootClass = computed(() => [\n    ...bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: Boolean(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n    }),\n    'rp-icon-button',\n]);\n</script>\n\n<style src=\"../button/button.scss\" lang=\"scss\" scoped></style>\n<style src=\"./icon-button.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <button\n        :class=\"rootClass\"\n        :disabled=\"disabled || isLoading || undefined\"\n        :type=\"type\"\n        :aria-label=\"ariaLabel || undefined\"\n    >\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-icon-button__spinner\" aria-hidden=\"true\" />\n        <span v-else class=\"rp-icon-button__icon\" aria-hidden=\"true\">\n            <slot />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { bem } from '@/utils/bem';\nimport type { IconButtonProps } from './types';\n\ndefineOptions({ name: 'RpIconButton' });\n\nconst props = withDefaults(defineProps<IconButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst isLoading = computed(() => props.loading && !props.disabled);\n\nconst rootClass = computed(() => [\n    ...bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: Boolean(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n    }),\n    'rp-icon-button',\n]);\n</script>\n\n<style src=\"../button/button.scss\" lang=\"scss\" scoped></style>\n<style src=\"./icon-button.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,MAAM,QAAQ;EAMd,MAAM,YAAY,eAAe,MAAM,WAAW,CAAC,MAAM,QAAQ;EAEjE,MAAM,YAAY,eAAe,CAC7B,GAAG,IAAI,aAAa;IACf,MAAM,WAAW,KAAK,QAAQ,MAAM,OAAO;IAC3C,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;IAC5C,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;IACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;EACpD,CAAC,GACD,gBACJ,CAAC;;;gBApCe,UAAA,KAAS;eAChB,YAAU,QAAA,YAAY,UAAA,SAAa,KAAA,CAAS;eAC5C,QAAM,QAAA,IAAI;eACV,cAAY,QAAA,aAAa,KAAA,CAAS;;;iBAEX,UAAA,aAAS;;IAAE,OAAM;IAA0B,eAAY"}
+{"version":3,"file":"icon-button.js","names":[],"sources":["../src/components/icon-button/icon-button.vue","../src/components/icon-button/icon-button.vue"],"sourcesContent":["<template>\n    <button\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :disabled=\"disabled || loading || undefined\"\n        :type=\"type\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-busy=\"loading || undefined\"\n    >\n        <IconLoaderCircle v-if=\"loading\" class=\"rp-icon-button__spinner\" aria-hidden=\"true\" />\n        <span v-else class=\"rp-icon-button__icon\" aria-hidden=\"true\">\n            <slot />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { isComponentPresetColor } from '@/utils/componentColors';\nimport { bem } from '@/utils/bem';\nimport { getButtonColorStyle } from '../button/useButtonColor';\nimport type { IconButtonProps } from './types';\n\ndefineOptions({ name: 'RpIconButton' });\n\nconst props = withDefaults(defineProps<IconButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst rootClass = computed(() => [\n    ...bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: isComponentPresetColor(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n    }),\n    'rp-icon-button',\n]);\n\nconst rootStyle = computed(() => getButtonColorStyle(props.color));\n</script>\n\n<style src=\"../button/button.scss\" lang=\"scss\" scoped></style>\n<style src=\"./icon-button.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <button\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :disabled=\"disabled || loading || undefined\"\n        :type=\"type\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-busy=\"loading || undefined\"\n    >\n        <IconLoaderCircle v-if=\"loading\" class=\"rp-icon-button__spinner\" aria-hidden=\"true\" />\n        <span v-else class=\"rp-icon-button__icon\" aria-hidden=\"true\">\n            <slot />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { isComponentPresetColor } from '@/utils/componentColors';\nimport { bem } from '@/utils/bem';\nimport { getButtonColorStyle } from '../button/useButtonColor';\nimport type { IconButtonProps } from './types';\n\ndefineOptions({ name: 'RpIconButton' });\n\nconst props = withDefaults(defineProps<IconButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst rootClass = computed(() => [\n    ...bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: isComponentPresetColor(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n    }),\n    'rp-icon-button',\n]);\n\nconst rootStyle = computed(() => getButtonColorStyle(props.color));\n</script>\n\n<style src=\"../button/button.scss\" lang=\"scss\" scoped></style>\n<style src=\"./icon-button.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,QAAQ;EAMd,MAAM,YAAY,eAAe,CAC7B,GAAG,IAAI,aAAa;IACf,MAAM,WAAW,KAAK,QAAQ,MAAM,OAAO;IAC3C,SAAS,MAAM,UAAU,uBAAuB,MAAM,KAAK;IAC3D,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;IACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;EACpD,CAAC,GACD,gBACJ,CAAC;EAED,MAAM,YAAY,eAAe,oBAAoB,MAAM,KAAK,CAAC;;;;gBAxCjD,UAAA,KAAS;gBACT,UAAA,KAAS;eAChB,YAAU,QAAA,YAAY,YAAW,KAAA,CAAS;eAC1C,QAAM,QAAA,IAAI;eACV,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,aAAW,YAAW,KAAA,CAAS;;;iBAER,QAAA,eAAO;;IAAE,OAAM;IAA0B,eAAY"}

package/dist/index.d.ts

@@ -1,10 +1,22 @@
+export * from './components/accordion';
+export * from './components/badge';
 export * from './components/button';
+export * from './components/button-group';
 export * from './components/card';
 export * from './components/checkbox';
+export * from './components/collapse';
+export * from './components/dropdown-menu';
 export * from './components/field';
 export * from './components/icon-button';
 export * from './components/input';
+export * from './components/modal';
+export * from './components/overlay';
+export * from './components/popover';
+export * from './components/progress';
 export * from './components/radio';
 export * from './components/select';
+export * from './components/slider';
 export * from './components/switch';
+export * from './components/tabs';
 export * from './components/textarea';
+export * from './components/tooltip';

package/dist/index.js

@@ -1,11 +1,27 @@
+import { t as useCollapse } from "./useCollapse.js";
+import { i as useAccordionItem, n as accordion_default, r as useAccordion, t as accordion_item_default } from "./accordion.js";
+import { a as badge_default, i as badgeVariants, n as badgeRadiuses, r as badgeSizes, t as badgeColors } from "./badge.js";
 import { t as button_default } from "./button.js";
+import { t as button_group_default } from "./button-group.js";
 import { t as card_default } from "./card.js";
 import { t as checkbox_default } from "./checkbox.js";
+import { t as collapse_default } from "./collapse.js";
+import { n as useDropdownMenu, t as dropdown_menu_default } from "./dropdown-menu.js";
 import { t as field_default } from "./field.js";
 import { t as icon_button_default } from "./icon-button.js";
+import "./components/icon-button/index.js";
 import { t as input_default } from "./input.js";
+import { t as overlay_default } from "./overlay.js";
+import { t as modal_default } from "./modal.js";
+import "./components/overlay/index.js";
+import { t as popover_default } from "./popover.js";
+import { i as progress_default, n as progressRadiuses, r as progressSizes, t as progressColors } from "./progress.js";
 import { n as radio_default, t as radio_group_default } from "./radio.js";
 import { t as select_default } from "./select.js";
+import { t as tooltip_default } from "./tooltip.js";
+import { i as sliderSizes, n as sliderColors, r as sliderOrientations, t as slider_default } from "./slider.js";
 import { t as switch_default } from "./switch.js";
+import { a as useTabs, c as useTabsTrigger, i as tabs_default, n as tabs_list_default, o as useTabsContent, r as tabs_content_default, s as useTabsList, t as tabs_trigger_default } from "./tabs.js";
 import { t as textarea_default } from "./textarea.js";
-export { button_default as Button, card_default as Card, checkbox_default as Checkbox, field_default as Field, icon_button_default as IconButton, input_default as Input, radio_default as Radio, radio_group_default as RadioGroup, select_default as Select, switch_default as Switch, textarea_default as Textarea };
+import "./components/tooltip/index.js";
+export { accordion_default as Accordion, accordion_item_default as AccordionItem, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, dropdown_menu_default as DropdownMenu, field_default as Field, icon_button_default as IconButton, input_default as Input, modal_default as Modal, overlay_default as Overlay, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, textarea_default as Textarea, tooltip_default as Tooltip, badgeColors, badgeRadiuses, badgeSizes, badgeVariants, progressColors, progressRadiuses, progressSizes, sliderColors, sliderOrientations, sliderSizes, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useTabs, useTabsContent, useTabsList, useTabsTrigger };

package/dist/input.css

@@ -1,4 +1,4 @@
-.rp-input[data-v-fedf15e7] {
+.rp-input[data-v-e5ad32a7] {
   --_rp-input-height: var(--rp-size-control-md);
   --_rp-input-padding-x: var(--rp-spacing-3);
   --_rp-input-font-size: var(--rp-font-size-base);
@@ -19,87 +19,87 @@
   cursor: text;
   transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
-.rp-input[data-v-fedf15e7]:hover:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+.rp-input[data-v-e5ad32a7]:hover:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
   border-color: var(--rp-color-control-border-hover);
 }
-.rp-input[data-v-fedf15e7]:focus-within:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+.rp-input[data-v-e5ad32a7]:focus-within:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
   border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-input[data-v-fedf15e7] {
+.rp-input[data-v-e5ad32a7] {
   height: var(--_rp-input-height);
   padding: 0 var(--_rp-input-padding-x);
   font-size: var(--_rp-input-font-size);
   border-radius: var(--_rp-input-radius);
 }
-.rp-input--size-xs[data-v-fedf15e7] {
+.rp-input--size-xs[data-v-e5ad32a7] {
   --_rp-input-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
   --_rp-input-padding-x: var(--rp-spacing-1);
   --_rp-input-font-size: var(--rp-font-size-xs);
 }
-.rp-input--size-sm[data-v-fedf15e7] {
+.rp-input--size-sm[data-v-e5ad32a7] {
   --_rp-input-height: var(--rp-size-control-sm);
   --_rp-input-padding-x: var(--rp-spacing-2);
   --_rp-input-font-size: var(--rp-font-size-sm);
 }
-.rp-input--size-md[data-v-fedf15e7] {
+.rp-input--size-md[data-v-e5ad32a7] {
   --_rp-input-height: var(--rp-size-control-md);
   --_rp-input-padding-x: var(--rp-spacing-3);
   --_rp-input-font-size: var(--rp-font-size-base);
 }
-.rp-input--size-lg[data-v-fedf15e7] {
+.rp-input--size-lg[data-v-e5ad32a7] {
   --_rp-input-height: var(--rp-size-control-lg);
   --_rp-input-padding-x: var(--rp-spacing-4);
   --_rp-input-font-size: var(--rp-font-size-lg);
 }
-.rp-input--size-xl[data-v-fedf15e7] {
+.rp-input--size-xl[data-v-e5ad32a7] {
   --_rp-input-height: calc(var(--rp-size-control-lg) + var(--rp-spacing-2));
   --_rp-input-padding-x: var(--rp-spacing-5);
   --_rp-input-font-size: var(--rp-font-size-lg);
 }
-.rp-input--radius-xs[data-v-fedf15e7] {
+.rp-input--radius-xs[data-v-e5ad32a7] {
   --_rp-input-radius: var(--rp-radius-xs);
 }
-.rp-input--radius-sm[data-v-fedf15e7] {
+.rp-input--radius-sm[data-v-e5ad32a7] {
   --_rp-input-radius: var(--rp-radius-sm);
 }
-.rp-input--radius-md[data-v-fedf15e7] {
+.rp-input--radius-md[data-v-e5ad32a7] {
   --_rp-input-radius: var(--rp-radius-md);
 }
-.rp-input--radius-lg[data-v-fedf15e7] {
+.rp-input--radius-lg[data-v-e5ad32a7] {
   --_rp-input-radius: var(--rp-radius-lg);
 }
-.rp-input--radius-xl[data-v-fedf15e7] {
+.rp-input--radius-xl[data-v-e5ad32a7] {
   --_rp-input-radius: var(--rp-radius-xl);
 }
-html.dark .rp-input[data-v-fedf15e7] {
+html.dark .rp-input[data-v-e5ad32a7] {
   --_rp-input-valid-border: var(--rp-color-success-fg);
   --_rp-input-valid-ring: color-mix(in srgb, var(--rp-color-success-fg) 32%, transparent);
   --_rp-input-invalid-border: var(--rp-color-danger-fg);
   --_rp-input-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
 }
-.rp-input--disabled[data-v-fedf15e7] {
+.rp-input--disabled[data-v-e5ad32a7] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-input--valid[data-v-fedf15e7] {
+.rp-input--valid[data-v-e5ad32a7] {
   border-color: var(--_rp-input-valid-border);
 }
-.rp-input--valid[data-v-fedf15e7]:focus-within:not(.rp-input--disabled) {
+.rp-input--valid[data-v-e5ad32a7]:focus-within:not(.rp-input--disabled) {
   border-color: var(--_rp-input-valid-border);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-valid-ring);
 }
-.rp-input--invalid[data-v-fedf15e7] {
+.rp-input--invalid[data-v-e5ad32a7] {
   border-color: var(--_rp-input-invalid-border);
 }
-.rp-input--invalid[data-v-fedf15e7]:focus-within:not(.rp-input--disabled) {
+.rp-input--invalid[data-v-e5ad32a7]:focus-within:not(.rp-input--disabled) {
   border-color: var(--_rp-input-invalid-border);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-invalid-ring);
 }
-.rp-input--readonly[data-v-fedf15e7] {
+.rp-input--readonly[data-v-e5ad32a7] {
   background-color: var(--rp-color-control-readonly-bg);
 }
-.rp-input__native[data-v-fedf15e7] {
+.rp-input__native[data-v-e5ad32a7] {
   box-sizing: border-box;
   flex: 1;
   width: 100%;
@@ -113,13 +113,13 @@ html.dark .rp-input[data-v-fedf15e7] {
   color: var(--rp-color-control-fg);
   line-height: var(--rp-line-height-none);
 }
-.rp-input__native[data-v-fedf15e7]::placeholder {
+.rp-input__native[data-v-e5ad32a7]::placeholder {
   color: var(--rp-color-control-placeholder);
 }
-.rp-input__native[data-v-fedf15e7]:disabled {
+.rp-input__native[data-v-e5ad32a7]:disabled {
   cursor: not-allowed;
 }
-.rp-input__left[data-v-fedf15e7], .rp-input__right[data-v-fedf15e7] {
+.rp-input__left[data-v-e5ad32a7], .rp-input__right[data-v-e5ad32a7] {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;