ropav 0.2.0 → 0.3.0

package/dist/button-group.css

@@ -1,52 +0,0 @@
-@layer ropav.components {
-.rp-button-group[data-v-60c77338] {
-    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-60c77338] {
-    flex-direction: column;
-}
-.rp-button-group--wrap[data-v-60c77338] {
-    flex-wrap: wrap;
-}
-.rp-button-group--attached[data-v-60c77338] {
-    gap: 0;
-}
-.rp-button-group--attached[data-v-60c77338]:focus-within {
-    position: relative;
-    z-index: 1;
-}
-.rp-button-group--attached[data-v-60c77338] >  .rp-button {
-    position: relative;
-    border-radius: 0;
-    box-shadow: none;
-}
-.rp-button-group--attached[data-v-60c77338] >  .rp-button:is(:hover, :focus-visible) {
-    z-index: 1;
-}
-.rp-button-group--attached[data-v-60c77338]: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-60c77338]: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-60c77338]: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-60c77338] >  .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-60c77338] >  .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-60c77338] >  .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

@@ -1,59 +0,0 @@
-import './button-group.css';
-import { t as useStylesApi } from "./styles-api.js";
-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, setDynamicProps, setInsertionState, 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-60c77338>", 1);
-//#endregion
-//#region src/components/button-group/button-group.vue
-var button_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
-	name: "RpButtonGroup",
-	inheritAttrs: false,
-	__name: "button-group",
-	props: {
-		id: {},
-		orientation: { default: "horizontal" },
-		attached: {
-			type: Boolean,
-			default: false
-		},
-		wrap: {
-			type: Boolean,
-			default: false
-		},
-		ariaLabel: {},
-		describedby: {},
-		labelledby: {},
-		classNames: {},
-		styles: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const rootClass = computed(() => bem("rp-button-group", {
-			vertical: props.orientation === "vertical",
-			attached: props.attached,
-			wrap: props.wrap
-		}));
-		const { getRootAttrs } = useStylesApi(props, "root");
-		const rootAttrs = computed(() => getRootAttrs({
-			id: props.id,
-			class: rootClass.value,
-			role: "group",
-			"data-orientation": props.orientation,
-			"aria-label": props.ariaLabel || void 0,
-			"aria-labelledby": props.labelledby,
-			"aria-describedby": props.describedby
-		}));
-		const n1 = t0();
-		renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
-		setInsertionState(n1, null, 0);
-		createSlot("default", null, null, 1);
-		return n1;
-	}
-}), [["__scopeId", "data-v-60c77338"]]);
-//#endregion
-//#region src/components/button-group/types.ts
-var buttonGroupParts = ["root"];
-//#endregion
-export { button_group_default as n, buttonGroupParts as t };

package/dist/button-link.js

@@ -1,130 +0,0 @@
-import { t as useStylesApi } from "./styles-api.js";
-import { n as toPresenceAttribute } from "./attributes.js";
-import { t as bem } from "./bem.js";
-import { n as loader_circle_default, t as getButtonColorStyle } from "./button.scss_vue_type_style_index_0_src_true_lang.js";
-import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
-//#region src/components/button-link/button-link.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span>");
-var t1 = template("<a><span class=rp-button__content><span></span>", 1);
-//#endregion
-//#region src/components/button-link/button-link.vue
-var button_link_default = /* @__PURE__ */ defineVaporComponent({
-	name: "RpButtonLink",
-	inheritAttrs: false,
-	__name: "button-link",
-	props: {
-		href: {},
-		target: {},
-		rel: {},
-		download: { type: [String, Boolean] },
-		hreflang: {},
-		variant: {},
-		color: {},
-		autoContrast: {
-			type: Boolean,
-			default: true
-		},
-		contrastColor: {},
-		size: {},
-		radius: {},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		loading: {
-			type: Boolean,
-			default: false
-		},
-		classNames: {},
-		styles: {}
-	},
-	setup(__props, { slots: $slots }) {
-		const props = __props;
-		const isUnavailable = computed(() => props.disabled || props.loading);
-		const rootClass = computed(() => bem("rp-button", {
-			[props.variant ?? ""]: Boolean(props.variant),
-			[`size-${props.size}`]: Boolean(props.size),
-			[`radius-${props.radius}`]: Boolean(props.radius),
-			disabled: isUnavailable.value,
-			loading: props.loading
-		}));
-		const rootStyle = computed(() => getButtonColorStyle(props.color, props.variant, props.autoContrast, props.contrastColor));
-		const resolvedHref = computed(() => isUnavailable.value ? void 0 : props.href);
-		const resolvedTarget = computed(() => isUnavailable.value ? void 0 : props.target);
-		const resolvedRel = computed(() => {
-			if (isUnavailable.value) return void 0;
-			return props.rel ?? (props.target === "_blank" ? "noopener noreferrer" : void 0);
-		});
-		const resolvedDownload = computed(() => {
-			if (isUnavailable.value || props.download === false) return void 0;
-			return props.download === true ? "" : props.download;
-		});
-		const resolvedHrefLang = computed(() => isUnavailable.value ? void 0 : props.hreflang);
-		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
-		const rootAttrs = computed(() => getRootAttrs({
-			class: rootClass.value,
-			style: rootStyle.value,
-			href: resolvedHref.value,
-			target: resolvedTarget.value,
-			rel: resolvedRel.value,
-			download: resolvedDownload.value,
-			hreflang: resolvedHrefLang.value,
-			"aria-disabled": isUnavailable.value || void 0,
-			"aria-busy": props.loading || void 0,
-			tabindex: isUnavailable.value ? -1 : void 0,
-			"data-disabled": toPresenceAttribute(isUnavailable.value),
-			"data-loading": toPresenceAttribute(props.loading),
-			onClickCapture: onDisabledClick
-		}));
-		function onDisabledClick(event) {
-			if (!isUnavailable.value) return;
-			event.preventDefault();
-			event.stopImmediatePropagation();
-		}
-		const n17 = t1();
-		const n16 = child(n17, 1);
-		const n11 = child(n16, 1);
-		renderEffect(() => setDynamicProps(n17, [rootAttrs.value]));
-		setInsertionState(n17, 0);
-		createIf(() => __props.loading, () => {
-			const n5 = t0();
-			renderEffect(() => setDynamicProps(n5, [unref(getPartAttrs)("loader", { class: "rp-button__loading" }), { "aria-hidden": "true" }]));
-			setInsertionState(n5, null, 0);
-			createSlot("loading", null, () => {
-				return createComponent(unref(loader_circle_default), { class: "rp-button__spinner" });
-			});
-			return n5;
-		});
-		setInsertionState(n16, 0);
-		createIf(() => $slots.left, () => {
-			const n9 = t0();
-			renderEffect(() => setDynamicProps(n9, [unref(getPartAttrs)("left", { class: "rp-button__left" })]));
-			setInsertionState(n9, null, 0);
-			createSlot("left");
-			return n9;
-		});
-		renderEffect(() => setDynamicProps(n11, [unref(getPartAttrs)("label", { class: "rp-button__label" })]));
-		setInsertionState(n11, null, 0);
-		createSlot();
-		setInsertionState(n16, null, 2);
-		createIf(() => $slots.right, () => {
-			const n15 = t0();
-			renderEffect(() => setDynamicProps(n15, [unref(getPartAttrs)("right", { class: "rp-button__right" })]));
-			setInsertionState(n15, null, 0);
-			createSlot("right");
-			return n15;
-		});
-		return n17;
-	}
-});
-//#endregion
-//#region src/components/button-link/types.ts
-var buttonLinkParts = [
-	"root",
-	"loader",
-	"left",
-	"label",
-	"right"
-];
-//#endregion
-export { button_link_default as n, buttonLinkParts as t };

package/dist/button.css

@@ -1,172 +0,0 @@
-@layer ropav.components {
-.rp-button {
-    --_rp-button-bg: var(--rp-color-default);
-    --_rp-button-bg-hover: var(--rp-color-default-hover);
-    --_rp-button-bg-active: var(--rp-color-disabled);
-    --_rp-button-border: var(--rp-color-default-border);
-    --_rp-button-border-hover: var(--_rp-button-border);
-    --_rp-button-border-active: var(--_rp-button-border-hover);
-    --_rp-button-fg: var(--rp-color-default-color);
-    --_rp-button-fg-hover: var(--_rp-button-fg);
-    --_rp-button-fg-active: var(--_rp-button-fg-hover);
-    --_rp-button-height: var(--rp-size-control-md);
-    --_rp-button-padding-x: 22px;
-    --_rp-button-font-size: var(--rp-font-size-md);
-    --_rp-button-radius: var(--rp-radius-sm);
-    --_rp-button-shadow: var(--rp-shadow-sm);
-    --_rp-button-shadow-hover: var(--rp-shadow-base);
-    --_rp-button-shadow-active: var(--rp-shadow-sm);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    box-sizing: border-box;
-    font-family: var(--rp-font-family);
-    font-weight: var(--rp-font-weight-medium);
-    line-height: 1;
-    appearance: none;
-    background-color: var(--_rp-button-bg);
-    border: var(--rp-border-width-thin) solid var(--_rp-button-border);
-    box-shadow: var(--_rp-button-shadow);
-    color: var(--_rp-button-fg);
-    cursor: pointer;
-    text-decoration: none;
-    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast), transform var(--rp-transition-fast);
-    white-space: nowrap;
-    user-select: none;
-    height: var(--_rp-button-height);
-    padding: 0 var(--_rp-button-padding-x);
-    font-size: var(--_rp-button-font-size);
-    border-radius: var(--_rp-button-radius);
-}
-.rp-button:hover:not(:disabled):not(.rp-button--disabled) {
-    background-color: var(--_rp-button-bg-hover);
-    border-color: var(--_rp-button-border-hover);
-    box-shadow: var(--_rp-button-shadow-hover);
-    color: var(--_rp-button-fg-hover);
-}
-.rp-button:active:not(:disabled):not(.rp-button--disabled) {
-    background-color: var(--_rp-button-bg-active);
-    border-color: var(--_rp-button-border-active);
-    box-shadow: var(--_rp-button-shadow-active);
-    color: var(--_rp-button-fg-active);
-    transform: translateY(1px);
-}
-.rp-button--size-xs {
-    --_rp-button-height: var(--rp-size-control-xs);
-    --_rp-button-padding-x: 14px;
-    --_rp-button-font-size: var(--rp-font-size-xs);
-}
-.rp-button--size-sm {
-    --_rp-button-height: var(--rp-size-control-sm);
-    --_rp-button-padding-x: 18px;
-    --_rp-button-font-size: var(--rp-font-size-sm);
-}
-.rp-button--size-md {
-    --_rp-button-height: var(--rp-size-control-md);
-    --_rp-button-padding-x: 22px;
-    --_rp-button-font-size: var(--rp-font-size-md);
-}
-.rp-button--size-lg {
-    --_rp-button-height: var(--rp-size-control-lg);
-    --_rp-button-padding-x: 26px;
-    --_rp-button-font-size: var(--rp-font-size-lg);
-}
-.rp-button--size-xl {
-    --_rp-button-height: var(--rp-size-control-xl);
-    --_rp-button-padding-x: 32px;
-    --_rp-button-font-size: var(--rp-font-size-xl);
-}
-.rp-button--radius-xs {
-    --_rp-button-radius: var(--rp-radius-xs);
-}
-.rp-button--radius-sm {
-    --_rp-button-radius: var(--rp-radius-sm);
-}
-.rp-button--radius-md {
-    --_rp-button-radius: var(--rp-radius-md);
-}
-.rp-button--radius-lg {
-    --_rp-button-radius: var(--rp-radius-lg);
-}
-.rp-button--radius-xl {
-    --_rp-button-radius: var(--rp-radius-xl);
-}
-.rp-button--subtle {
-    --_rp-button-shadow: none;
-    --_rp-button-shadow-hover: none;
-    --_rp-button-shadow-active: none;
-}
-.rp-button--surface {
-    --_rp-button-shadow: none;
-    --_rp-button-shadow-hover: none;
-    --_rp-button-shadow-active: none;
-}
-.rp-button--outline {
-    --_rp-button-shadow: none;
-    --_rp-button-shadow-hover: none;
-    --_rp-button-shadow-active: none;
-}
-.rp-button--ghost {
-    --_rp-button-shadow: none;
-    --_rp-button-shadow-hover: none;
-    --_rp-button-shadow-active: none;
-}
-.rp-button--plain {
-    --_rp-button-shadow: none;
-    --_rp-button-shadow-hover: none;
-    --_rp-button-shadow-active: none;
-}
-.rp-button:disabled, .rp-button--disabled {
-    opacity: var(--rp-opacity-disabled);
-    cursor: not-allowed;
-    box-shadow: none;
-    transform: none;
-}
-.rp-button:focus-visible {
-    outline: none;
-    border-color: var(--rp-color-control-border-focus);
-    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
-}
-.rp-button--loading .rp-button__content {
-    opacity: 0;
-}
-.rp-button__content {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--rp-spacing-2);
-}
-.rp-button__left, .rp-button__right {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-}
-.rp-button__loading {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    translate: -50% -50%;
-}
-.rp-button__spinner {
-    display: block;
-    width: 1em;
-    height: 1em;
-    flex-shrink: 0;
-    transform-origin: center;
-    animation: rp-spinner-spin 700ms linear infinite;
-}
-@media (prefers-reduced-motion: reduce) {
-.rp-button__spinner {
-      animation: none;
-}
-}
-@keyframes rp-spinner-spin {
-to {
-      transform: rotate(360deg);
-}
-}
-}

package/dist/button.js

@@ -1,102 +0,0 @@
-import { t as useStylesApi } from "./styles-api.js";
-import { n as toPresenceAttribute } from "./attributes.js";
-import { t as bem } from "./bem.js";
-import { n as loader_circle_default, t as getButtonColorStyle } from "./button.scss_vue_type_style_index_0_src_true_lang.js";
-import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
-//#region src/components/button/button.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span>");
-var t1 = template("<button><span class=rp-button__content><span></span>", 1);
-//#endregion
-//#region src/components/button/button.vue
-var button_default = /* @__PURE__ */ defineVaporComponent({
-	name: "RpButton",
-	inheritAttrs: false,
-	__name: "button",
-	props: {
-		variant: {},
-		color: {},
-		autoContrast: {
-			type: Boolean,
-			default: true
-		},
-		contrastColor: {},
-		size: {},
-		radius: {},
-		type: { default: "button" },
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		loading: {
-			type: Boolean,
-			default: false
-		},
-		classNames: {},
-		styles: {}
-	},
-	setup(__props, { slots: $slots }) {
-		const props = __props;
-		const rootClass = computed(() => bem("rp-button", {
-			[props.variant ?? ""]: Boolean(props.variant),
-			[`size-${props.size}`]: Boolean(props.size),
-			[`radius-${props.radius}`]: Boolean(props.radius),
-			loading: props.loading
-		}));
-		const rootStyle = computed(() => getButtonColorStyle(props.color, props.variant, props.autoContrast, props.contrastColor));
-		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
-		const rootAttrs = computed(() => getRootAttrs({
-			class: rootClass.value,
-			style: rootStyle.value,
-			disabled: props.disabled || props.loading || void 0,
-			type: props.type,
-			"aria-busy": props.loading || void 0,
-			"data-disabled": toPresenceAttribute(props.disabled || props.loading),
-			"data-loading": toPresenceAttribute(props.loading)
-		}));
-		const n17 = t1();
-		const n16 = child(n17, 1);
-		const n11 = child(n16, 1);
-		renderEffect(() => setDynamicProps(n17, [rootAttrs.value]));
-		setInsertionState(n17, 0);
-		createIf(() => __props.loading, () => {
-			const n5 = t0();
-			renderEffect(() => setDynamicProps(n5, [unref(getPartAttrs)("loader", { class: "rp-button__loading" }), { "aria-hidden": "true" }]));
-			setInsertionState(n5, null, 0);
-			createSlot("loading", null, () => {
-				return createComponent(unref(loader_circle_default), { class: "rp-button__spinner" });
-			});
-			return n5;
-		});
-		setInsertionState(n16, 0);
-		createIf(() => $slots.left, () => {
-			const n9 = t0();
-			renderEffect(() => setDynamicProps(n9, [unref(getPartAttrs)("left", { class: "rp-button__left" })]));
-			setInsertionState(n9, null, 0);
-			createSlot("left");
-			return n9;
-		});
-		renderEffect(() => setDynamicProps(n11, [unref(getPartAttrs)("label", { class: "rp-button__label" })]));
-		setInsertionState(n11, null, 0);
-		createSlot();
-		setInsertionState(n16, null, 2);
-		createIf(() => $slots.right, () => {
-			const n15 = t0();
-			renderEffect(() => setDynamicProps(n15, [unref(getPartAttrs)("right", { class: "rp-button__right" })]));
-			setInsertionState(n15, null, 0);
-			createSlot("right");
-			return n15;
-		});
-		return n17;
-	}
-});
-//#endregion
-//#region src/components/button/types.ts
-var buttonParts = [
-	"root",
-	"loader",
-	"left",
-	"label",
-	"right"
-];
-//#endregion
-export { button_default as n, buttonParts as t };

package/dist/button.scss_vue_type_style_index_0_src_true_lang.js

@@ -1,37 +0,0 @@
-import './button.css';
-import { a as getComponentVariantColorRoles } from "./componentColors.js";
-import { defineVaporComponent, markRaw, template } from "vue";
-//#region ~icons/lucide/loader-circle
-var t0 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M21 12a9 9 0 1 1-6.219-8.56\">", 3, 1);
-function render(_ctx) {
-	return t0();
-}
-var loader_circle_default = markRaw(defineVaporComponent({
-	name: "lucide-loader-circle",
-	render
-}));
-//#endregion
-//#region src/components/button/buttonColor.ts
-function getButtonColorStyle(color, variant, autoContrast, contrastColor) {
-	if (!color && !variant) return void 0;
-	const roles = getComponentVariantColorRoles({
-		color,
-		variant,
-		autoContrast,
-		contrastColor
-	});
-	if (!roles) return void 0;
-	return {
-		"--_rp-button-bg": roles.background,
-		"--_rp-button-bg-hover": roles.hover,
-		"--_rp-button-bg-active": roles.active,
-		"--_rp-button-border": roles.border,
-		"--_rp-button-border-hover": roles.borderHover,
-		"--_rp-button-border-active": roles.borderActive,
-		"--_rp-button-fg": roles.color,
-		"--_rp-button-fg-hover": roles.colorHover,
-		"--_rp-button-fg-active": roles.colorActive
-	};
-}
-//#endregion
-export { loader_circle_default as n, getButtonColorStyle as t };