ropav 0.0.5 → 0.0.7

package/dist/badge.css

@@ -0,0 +1,169 @@
+.rp-badge[data-v-ab51b365] {
+  --_rp-badge-accent: var(--_rp-badge-custom-color, var(--rp-color-primary));
+  --_rp-badge-accent-fg: var(--_rp-badge-custom-fg, var(--rp-color-primary-fg));
+  --_rp-badge-accent-on: var(--_rp-badge-custom-on, var(--rp-color-on-primary));
+  --_rp-badge-accent-subtle-bg: var(
+      --_rp-badge-custom-subtle-bg,
+      var(--rp-color-primary-subtle-bg)
+  );
+  --_rp-badge-accent-border: var(--_rp-badge-custom-border, var(--rp-color-primary-border));
+  --_rp-badge-height: 1.5rem;
+  --_rp-badge-padding-x: var(--rp-spacing-2);
+  --_rp-badge-font-size: var(--rp-font-size-sm);
+  --_rp-badge-radius: var(--rp-radius-full);
+  --_rp-badge-bg: var(--rp-color-button-default-bg);
+  --_rp-badge-fg: var(--rp-color-text);
+  --_rp-badge-border: var(--rp-color-border);
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  min-width: 0;
+  height: var(--_rp-badge-height);
+  padding: 0 var(--_rp-badge-padding-x);
+  gap: var(--rp-spacing-1);
+  color: var(--_rp-badge-fg);
+  font-family: var(--rp-font-family);
+  font-size: var(--_rp-badge-font-size);
+  font-weight: var(--rp-font-weight-medium);
+  line-height: var(--rp-line-height-none);
+  vertical-align: middle;
+  white-space: nowrap;
+  background-color: var(--_rp-badge-bg);
+  border: var(--rp-border-width-thin) solid var(--_rp-badge-border);
+  border-radius: var(--_rp-badge-radius);
+  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast);
+}
+.rp-badge--color-primary[data-v-ab51b365] {
+  --_rp-badge-accent: var(--rp-color-primary);
+  --_rp-badge-accent-fg: var(--rp-color-primary-fg);
+  --_rp-badge-accent-on: var(--rp-color-on-primary);
+  --_rp-badge-accent-subtle-bg: var(--rp-color-primary-subtle-bg);
+  --_rp-badge-accent-border: var(--rp-color-primary-border);
+}
+.rp-badge--color-secondary[data-v-ab51b365] {
+  --_rp-badge-accent: var(--rp-color-secondary);
+  --_rp-badge-accent-fg: var(--rp-color-secondary-fg);
+  --_rp-badge-accent-on: var(--rp-color-on-secondary);
+  --_rp-badge-accent-subtle-bg: var(--rp-color-secondary-subtle-bg);
+  --_rp-badge-accent-border: var(--rp-color-secondary-border);
+}
+.rp-badge--color-success[data-v-ab51b365] {
+  --_rp-badge-accent: var(--rp-color-success);
+  --_rp-badge-accent-fg: var(--rp-color-success-fg);
+  --_rp-badge-accent-on: var(--rp-color-on-success);
+  --_rp-badge-accent-subtle-bg: var(--rp-color-success-subtle-bg);
+  --_rp-badge-accent-border: var(--rp-color-success-border);
+}
+.rp-badge--color-warning[data-v-ab51b365] {
+  --_rp-badge-accent: var(--rp-color-warning);
+  --_rp-badge-accent-fg: var(--rp-color-warning-fg);
+  --_rp-badge-accent-on: var(--rp-color-on-warning);
+  --_rp-badge-accent-subtle-bg: var(--rp-color-warning-subtle-bg);
+  --_rp-badge-accent-border: var(--rp-color-warning-border);
+}
+.rp-badge--color-danger[data-v-ab51b365] {
+  --_rp-badge-accent: var(--rp-color-danger);
+  --_rp-badge-accent-fg: var(--rp-color-danger-fg);
+  --_rp-badge-accent-on: var(--rp-color-on-danger);
+  --_rp-badge-accent-subtle-bg: var(--rp-color-danger-subtle-bg);
+  --_rp-badge-accent-border: var(--rp-color-danger-border);
+}
+.rp-badge--color-info[data-v-ab51b365] {
+  --_rp-badge-accent: var(--rp-color-info);
+  --_rp-badge-accent-fg: var(--rp-color-info-fg);
+  --_rp-badge-accent-on: var(--rp-color-on-info);
+  --_rp-badge-accent-subtle-bg: var(--rp-color-info-subtle-bg);
+  --_rp-badge-accent-border: var(--rp-color-info-border);
+}
+.rp-badge--color-neutral[data-v-ab51b365] {
+  --_rp-badge-accent: var(--rp-color-neutral);
+  --_rp-badge-accent-fg: var(--rp-color-neutral-fg);
+  --_rp-badge-accent-on: var(--rp-color-on-neutral);
+  --_rp-badge-accent-subtle-bg: var(--rp-color-neutral-subtle-bg);
+  --_rp-badge-accent-border: var(--rp-color-neutral-border);
+}
+.rp-badge--solid[data-v-ab51b365] {
+  --_rp-badge-bg: var(--_rp-badge-accent);
+  --_rp-badge-fg: var(--_rp-badge-accent-on);
+  --_rp-badge-border: var(--_rp-badge-accent);
+}
+.rp-badge--subtle[data-v-ab51b365] {
+  --_rp-badge-bg: var(--_rp-badge-accent-subtle-bg);
+  --_rp-badge-fg: var(--_rp-badge-accent-fg);
+  --_rp-badge-border: transparent;
+}
+.rp-badge--surface[data-v-ab51b365] {
+  --_rp-badge-bg: var(--_rp-badge-accent-subtle-bg);
+  --_rp-badge-fg: var(--_rp-badge-accent-fg);
+  --_rp-badge-border: var(--_rp-badge-accent-border);
+}
+.rp-badge--outline[data-v-ab51b365] {
+  --_rp-badge-bg: transparent;
+  --_rp-badge-fg: var(--_rp-badge-accent-fg);
+  --_rp-badge-border: var(--_rp-badge-accent-border);
+}
+.rp-badge--size-xs[data-v-ab51b365] {
+  --_rp-badge-height: 1rem;
+  --_rp-badge-padding-x: var(--rp-spacing-1);
+  --_rp-badge-font-size: var(--rp-font-size-xs);
+}
+.rp-badge--size-sm[data-v-ab51b365] {
+  --_rp-badge-height: 1.25rem;
+  --_rp-badge-padding-x: var(--rp-spacing-2);
+  --_rp-badge-font-size: var(--rp-font-size-xs);
+}
+.rp-badge--size-md[data-v-ab51b365] {
+  --_rp-badge-height: 1.5rem;
+  --_rp-badge-padding-x: var(--rp-spacing-2);
+  --_rp-badge-font-size: var(--rp-font-size-sm);
+}
+.rp-badge--size-lg[data-v-ab51b365] {
+  --_rp-badge-height: 1.75rem;
+  --_rp-badge-padding-x: var(--rp-spacing-3);
+  --_rp-badge-font-size: var(--rp-font-size-base);
+}
+.rp-badge--size-xl[data-v-ab51b365] {
+  --_rp-badge-height: 2rem;
+  --_rp-badge-padding-x: var(--rp-spacing-4);
+  --_rp-badge-font-size: var(--rp-font-size-base);
+}
+.rp-badge--radius-none[data-v-ab51b365] {
+  --_rp-badge-radius: var(--rp-radius-none);
+}
+.rp-badge--radius-xs[data-v-ab51b365] {
+  --_rp-badge-radius: var(--rp-radius-xs);
+}
+.rp-badge--radius-sm[data-v-ab51b365] {
+  --_rp-badge-radius: var(--rp-radius-sm);
+}
+.rp-badge--radius-md[data-v-ab51b365] {
+  --_rp-badge-radius: var(--rp-radius-md);
+}
+.rp-badge--radius-lg[data-v-ab51b365] {
+  --_rp-badge-radius: var(--rp-radius-lg);
+}
+.rp-badge--radius-xl[data-v-ab51b365] {
+  --_rp-badge-radius: var(--rp-radius-xl);
+}
+.rp-badge--radius-full[data-v-ab51b365] {
+  --_rp-badge-radius: var(--rp-radius-full);
+}
+.rp-badge__left[data-v-ab51b365], .rp-badge__right[data-v-ab51b365] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  line-height: 0;
+}
+.rp-badge__left[data-v-ab51b365] >  svg, .rp-badge__right[data-v-ab51b365] >  svg {
+  display: block;
+  width: 1em;
+  height: 1em;
+}
+.rp-badge__label[data-v-ab51b365] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/badge.js

@@ -0,0 +1,103 @@
+import './badge.css';
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { n as getComponentCustomColor, r as isComponentPresetColor, t as componentColors } from "./componentColors.js";
+import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setStyle, template } from "vue";
+//#region src/components/badge/useBadgeColor.ts
+function getBadgeColorStyle(color) {
+	const customColor = getComponentCustomColor(color);
+	if (!customColor) return void 0;
+	return {
+		"--_rp-badge-custom-color": customColor,
+		"--_rp-badge-custom-fg": customColor,
+		"--_rp-badge-custom-on": "var(--rp-color-on-primary)",
+		"--_rp-badge-custom-subtle-bg": `color-mix(in srgb, ${customColor} 12%, transparent)`,
+		"--_rp-badge-custom-border": `color-mix(in srgb, ${customColor} 45%, transparent)`
+	};
+}
+//#endregion
+//#region src/components/badge/badge.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span data-v-ab51b365 class=rp-badge__left>");
+var t1 = template("<span data-v-ab51b365 class=rp-badge__label>");
+var t2 = template("<span data-v-ab51b365 class=rp-badge__right>");
+var t3 = template("<span data-v-ab51b365>", 1);
+//#endregion
+//#region src/components/badge/badge.vue
+var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpBadge",
+	__name: "badge",
+	props: {
+		variant: {},
+		color: {},
+		size: {},
+		radius: {},
+		ariaLabel: {}
+	},
+	setup(__props, { slots: $slots }) {
+		const props = __props;
+		const rootClass = computed(() => bem("rp-badge", {
+			[props.variant ?? ""]: Boolean(props.variant),
+			[`color-${props.color}`]: isComponentPresetColor(props.color),
+			[`size-${props.size}`]: Boolean(props.size),
+			[`radius-${props.radius}`]: Boolean(props.radius)
+		}));
+		const rootStyle = computed(() => getBadgeColorStyle(props.color));
+		const n12 = t3();
+		renderEffect(() => {
+			setClass(n12, rootClass.value);
+			setStyle(n12, rootStyle.value);
+			setAttr(n12, "aria-label", __props.ariaLabel || void 0);
+		});
+		setInsertionState(n12, null, 0);
+		createIf(() => $slots.left, () => {
+			const n3 = t0();
+			setInsertionState(n3, null, 0);
+			createSlot("left", null, null, 1);
+			return n3;
+		});
+		setInsertionState(n12, null, 1);
+		createIf(() => $slots.default, () => {
+			const n7 = t1();
+			setInsertionState(n7, null, 0);
+			createSlot("default", null, null, 1);
+			return n7;
+		});
+		setInsertionState(n12, null, 2);
+		createIf(() => $slots.right, () => {
+			const n11 = t2();
+			setInsertionState(n11, null, 0);
+			createSlot("right", null, null, 1);
+			return n11;
+		});
+		return n12;
+	}
+}), [["__scopeId", "data-v-ab51b365"]]);
+//#endregion
+//#region src/components/badge/types.ts
+var badgeColors = componentColors;
+var badgeSizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var badgeRadiuses = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"full"
+];
+var badgeVariants = [
+	"solid",
+	"subtle",
+	"surface",
+	"outline"
+];
+//#endregion
+export { badge_default as a, badgeVariants as i, badgeRadiuses as n, badgeSizes as r, badgeColors as t };
+
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../src/components/badge/useBadgeColor.ts","../src/components/badge/badge.vue","../src/components/badge/badge.vue","../src/components/badge/types.ts"],"sourcesContent":["import type { CSSProperties } from 'vue';\nimport { getComponentCustomColor } from '@/utils/componentColors';\nimport type { BadgeColor } from './types';\n\nexport function getBadgeColorStyle(color: BadgeColor | undefined) {\n    const customColor = getComponentCustomColor(color);\n    if (!customColor) return undefined;\n\n    return {\n        '--_rp-badge-custom-color': customColor,\n        '--_rp-badge-custom-fg': customColor,\n        '--_rp-badge-custom-on': 'var(--rp-color-on-primary)',\n        '--_rp-badge-custom-subtle-bg': `color-mix(in srgb, ${customColor} 12%, transparent)`,\n        '--_rp-badge-custom-border': `color-mix(in srgb, ${customColor} 45%, transparent)`,\n    } satisfies CSSProperties;\n}\n","<template>\n    <span :class=\"rootClass\" :style=\"rootStyle\" :aria-label=\"ariaLabel || undefined\">\n        <span v-if=\"$slots.left\" class=\"rp-badge__left\">\n            <slot name=\"left\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-badge__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-badge__right\">\n            <slot name=\"right\" />\n        </span>\n    </span>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport { isComponentPresetColor } from '@/utils/componentColors';\nimport type { BadgeProps } from './types';\nimport { getBadgeColorStyle } from './useBadgeColor';\n\ndefineOptions({ name: 'RpBadge' });\n\nconst props = defineProps<BadgeProps>();\n\nconst rootClass = computed(() =>\n    bem('rp-badge', {\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);\n\nconst rootStyle = computed(() => getBadgeColorStyle(props.color));\n</script>\n\n<style src=\"./badge.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <span :class=\"rootClass\" :style=\"rootStyle\" :aria-label=\"ariaLabel || undefined\">\n        <span v-if=\"$slots.left\" class=\"rp-badge__left\">\n            <slot name=\"left\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-badge__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-badge__right\">\n            <slot name=\"right\" />\n        </span>\n    </span>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport { isComponentPresetColor } from '@/utils/componentColors';\nimport type { BadgeProps } from './types';\nimport { getBadgeColorStyle } from './useBadgeColor';\n\ndefineOptions({ name: 'RpBadge' });\n\nconst props = defineProps<BadgeProps>();\n\nconst rootClass = computed(() =>\n    bem('rp-badge', {\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);\n\nconst rootStyle = computed(() => getBadgeColorStyle(props.color));\n</script>\n\n<style src=\"./badge.scss\" lang=\"scss\" scoped></style>\n","import { componentColors, type ComponentColorValue } from '../../utils/componentColors';\n\nexport const badgeColors = componentColors;\n\nexport const badgeSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const badgeRadiuses = ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'full'] as const;\n\nexport const badgeVariants = ['solid', 'subtle', 'surface', 'outline'] as const;\n\nexport type BadgeColor = ComponentColorValue;\n\nexport type BadgeSize = (typeof badgeSizes)[number];\n\nexport type BadgeRadius = (typeof badgeRadiuses)[number];\n\nexport type BadgeVariant = (typeof badgeVariants)[number];\n\nexport interface BadgeProps {\n    variant?: BadgeVariant;\n    color?: BadgeColor;\n    size?: BadgeSize;\n    radius?: BadgeRadius;\n    ariaLabel?: string;\n}\n"],"mappings":";;;;;AAIA,SAAgB,mBAAmB,OAA+B;CAC9D,MAAM,cAAc,wBAAwB,KAAK;CACjD,IAAI,CAAC,aAAa,OAAO,KAAA;CAEzB,OAAO;EACH,4BAA4B;EAC5B,yBAAyB;EACzB,yBAAyB;EACzB,gCAAgC,sBAAsB,YAAY;EAClE,6BAA6B,sBAAsB,YAAY;CACnE;AACJ;;;;;;;;;;;;;;;;;;;;ECQA,MAAM,QAAQ;EAEd,MAAM,YAAY,eACd,IAAI,YAAY;IACX,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,CACL;EAEA,MAAM,YAAY,eAAe,mBAAmB,MAAM,KAAK,CAAC;;;iBAjC9C,UAAA,KAAS;iBAAU,UAAA,KAAS;gBAAG,cAAY,QAAA,aAAa,KAAA,CAAS;;;iBAC/D,OAAM,YAAA;;;cACR,QAAW,MAAA,MAAA,CAAA;;;;iBAET,OAAM,eAAA;;;;;;;iBAGN,OAAM,aAAA;;;cACR,SAAY,MAAA,MAAA,CAAA;;;;;;;;AEP9B,IAAa,cAAc;AAE3B,IAAa,aAAa;CAAC;CAAM;CAAM;CAAM;CAAM;AAAI;AAEvD,IAAa,gBAAgB;CAAC;CAAQ;CAAM;CAAM;CAAM;CAAM;CAAM;AAAM;AAE1E,IAAa,gBAAgB;CAAC;CAAS;CAAU;CAAW;AAAS"}

package/dist/base.css

@@ -221,4 +221,25 @@ html.dark {
   --rp-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
   --rp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
   --rp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+}
+
+.rp-spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  transform-origin: center;
+  animation: rp-spinner-spin 700ms linear infinite;
+}
+
+.rp-spinner > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes rp-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }

package/dist/bem.js

@@ -0,0 +1,11 @@
+//#region src/utils/bem.ts
+function bem(block, ...modifiers) {
+	const classes = [block];
+	for (const mod of modifiers) if (typeof mod === "string") classes.push(`${block}--${mod}`);
+	else for (const [key, val] of Object.entries(mod)) if (val) classes.push(`${block}--${key}`);
+	return classes;
+}
+//#endregion
+export { bem as t };
+
+//# sourceMappingURL=bem.js.map

package/dist/bem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bem.js","names":[],"sources":["../src/utils/bem.ts"],"sourcesContent":["type BemModifier = string | Record<string, boolean | undefined>;\n\nexport function bem(block: string, ...modifiers: BemModifier[]): string[] {\n    const classes = [block];\n    for (const mod of modifiers) {\n        if (typeof mod === 'string') {\n            classes.push(`${block}--${mod}`);\n        } else {\n            for (const [key, val] of Object.entries(mod)) {\n                if (val) classes.push(`${block}--${key}`);\n            }\n        }\n    }\n    return classes;\n}\n"],"mappings":";AAEA,SAAgB,IAAI,OAAe,GAAG,WAAoC;CACtE,MAAM,UAAU,CAAC,KAAK;CACtB,KAAK,MAAM,OAAO,WACd,IAAI,OAAO,QAAQ,UACf,QAAQ,KAAK,GAAG,MAAM,IAAI,KAAK;MAE/B,KAAK,MAAM,CAAC,KAAK,QAAQ,OAAO,QAAQ,GAAG,GACvC,IAAI,KAAK,QAAQ,KAAK,GAAG,MAAM,IAAI,KAAK;CAIpD,OAAO;AACX"}

package/dist/button-group.css

@@ -0,0 +1,50 @@
+.rp-button-group[data-v-d9f79a5b] {
+  display: inline-flex;
+  align-items: stretch;
+  gap: var(--rp-spacing-2);
+  font-family: var(--rp-font-family);
+  vertical-align: middle;
+}
+.rp-button-group--vertical[data-v-d9f79a5b] {
+  flex-direction: column;
+}
+.rp-button-group--wrap[data-v-d9f79a5b] {
+  flex-wrap: wrap;
+}
+.rp-button-group--attached[data-v-d9f79a5b] {
+  gap: 0;
+}
+.rp-button-group--attached[data-v-d9f79a5b]:focus-within {
+  position: relative;
+  z-index: 1;
+}
+.rp-button-group--attached[data-v-d9f79a5b] >  .rp-button {
+  position: relative;
+  border-radius: 0;
+  box-shadow: none;
+}
+.rp-button-group--attached[data-v-d9f79a5b] >  .rp-button:is(:hover, :focus-visible) {
+  z-index: 1;
+}
+.rp-button-group--attached[data-v-d9f79a5b]:not(.rp-button-group--vertical) >  .rp-button:not(:first-child) {
+  margin-inline-start: calc(var(--rp-border-width-thin) * -1);
+}
+.rp-button-group--attached[data-v-d9f79a5b]:not(.rp-button-group--vertical) >  .rp-button:first-child {
+  border-start-start-radius: var(--_rp-button-radius);
+  border-end-start-radius: var(--_rp-button-radius);
+}
+.rp-button-group--attached[data-v-d9f79a5b]:not(.rp-button-group--vertical) >  .rp-button:last-child {
+  border-start-end-radius: var(--_rp-button-radius);
+  border-end-end-radius: var(--_rp-button-radius);
+}
+.rp-button-group--attached.rp-button-group--vertical[data-v-d9f79a5b] >  .rp-button:not(:first-child) {
+  margin-block-start: calc(var(--rp-border-width-thin) * -1);
+}
+.rp-button-group--attached.rp-button-group--vertical[data-v-d9f79a5b] >  .rp-button:first-child {
+  border-start-start-radius: var(--_rp-button-radius);
+  border-start-end-radius: var(--_rp-button-radius);
+}
+.rp-button-group--attached.rp-button-group--vertical[data-v-d9f79a5b] >  .rp-button:last-child {
+  border-end-start-radius: var(--_rp-button-radius);
+  border-end-end-radius: var(--_rp-button-radius);
+}

package/dist/button-group.js

@@ -0,0 +1,50 @@
+import './button-group.css';
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, template } from "vue";
+//#region src/components/button-group/button-group.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-d9f79a5b role=group>", 1);
+//#endregion
+//#region src/components/button-group/button-group.vue
+var button_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpButtonGroup",
+	__name: "button-group",
+	props: {
+		id: {},
+		orientation: { default: "horizontal" },
+		attached: {
+			type: Boolean,
+			default: false
+		},
+		wrap: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const rootClass = computed(() => bem("rp-button-group", {
+			vertical: props.orientation === "vertical",
+			attached: props.attached,
+			wrap: props.wrap
+		}));
+		const n1 = t0();
+		renderEffect(() => {
+			setProp(n1, "id", __props.id);
+			setClass(n1, rootClass.value);
+			setAttr(n1, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n1, "aria-labelledby", __props.labelledby);
+			setAttr(n1, "aria-describedby", __props.describedby);
+		});
+		setInsertionState(n1, null, 0);
+		createSlot("default", null, null, 1);
+		return n1;
+	}
+}), [["__scopeId", "data-v-d9f79a5b"]]);
+//#endregion
+export { button_group_default as t };
+
+//# sourceMappingURL=button-group.js.map

package/dist/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":[],"sources":["../src/components/button-group/button-group.vue","../src/components/button-group/button-group.vue"],"sourcesContent":["<template>\n    <div\n        :id=\"id\"\n        :class=\"rootClass\"\n        role=\"group\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"labelledby\"\n        :aria-describedby=\"describedby\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { ButtonGroupProps } from './types';\n\ndefineOptions({ name: 'RpButtonGroup' });\n\nconst props = withDefaults(defineProps<ButtonGroupProps>(), {\n    orientation: 'horizontal',\n    attached: false,\n    wrap: false,\n});\n\nconst rootClass = computed(() =>\n    bem('rp-button-group', {\n        vertical: props.orientation === 'vertical',\n        attached: props.attached,\n        wrap: props.wrap,\n    }),\n);\n</script>\n\n<style src=\"./button-group.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"id\"\n        :class=\"rootClass\"\n        role=\"group\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"labelledby\"\n        :aria-describedby=\"describedby\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { ButtonGroupProps } from './types';\n\ndefineOptions({ name: 'RpButtonGroup' });\n\nconst props = withDefaults(defineProps<ButtonGroupProps>(), {\n    orientation: 'horizontal',\n    attached: false,\n    wrap: false,\n});\n\nconst rootClass = computed(() =>\n    bem('rp-button-group', {\n        vertical: props.orientation === 'vertical',\n        attached: props.attached,\n        wrap: props.wrap,\n    }),\n);\n</script>\n\n<style src=\"./button-group.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ;EAMd,MAAM,YAAY,eACd,IAAI,mBAAmB;GACnB,UAAU,MAAM,gBAAgB;GAChC,UAAU,MAAM;GAChB,MAAM,MAAM;EAChB,CAAC,CACL;;;eA9BS,MAAI,QAAA,EAAE;gBACC,UAAA,KAAS;eAEhB,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,QAAA,UAAU;eAC3B,oBAAkB,QAAA,WAAW"}