ropav 0.0.4 → 0.0.5

package/dist/field.js

@@ -0,0 +1,128 @@
+import './field.css';
+import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { child, computed, createIf, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, setProp, setText, template, toDisplayString, useId, useSlots } from "vue";
+//#region src/components/field/field.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var t1 = template("<span data-v-b8c3dcbe class=rp-field__required aria-hidden=true>*", 2);
+var t2 = template("<label data-v-b8c3dcbe class=rp-field__label>");
+var t3 = template("<p data-v-b8c3dcbe class=rp-field__description>");
+var t4 = template("<p data-v-b8c3dcbe class=rp-field__message>");
+var t5 = template("<div data-v-b8c3dcbe><div data-v-b8c3dcbe class=rp-field__control></div>", 1);
+//#endregion
+//#region src/components/field/field.vue
+var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpField",
+	__name: "field",
+	props: {
+		id: {},
+		label: { default: "" },
+		description: { default: "" },
+		message: { default: "" },
+		error: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const generatedId = useId();
+		const controlId = computed(() => props.id ?? `${generatedId}-control`);
+		const labelId = computed(() => `${controlId.value}-label`);
+		const descriptionId = computed(() => `${controlId.value}-description`);
+		const messageId = computed(() => `${controlId.value}-message`);
+		const isInvalid = computed(() => Boolean(props.invalid || props.error));
+		const messageText = computed(() => props.error || props.message);
+		const hasLabel = computed(() => Boolean(props.label || slots.label));
+		const hasDescription = computed(() => Boolean(props.description || slots.description));
+		const hasMessage = computed(() => Boolean(messageText.value || slots.message));
+		const controlLabelledby = computed(() => hasLabel.value ? labelId.value : void 0);
+		const controlDescribedby = computed(() => [hasDescription.value ? descriptionId.value : void 0, hasMessage.value ? messageId.value : void 0].filter(Boolean).join(" ") || void 0);
+		const rootClass = computed(() => bem("rp-field", {
+			disabled: props.disabled,
+			required: props.required,
+			invalid: isInvalid.value
+		}));
+		const controlProps = computed(() => ({
+			id: controlId.value,
+			disabled: props.disabled || void 0,
+			required: props.required || void 0,
+			invalid: isInvalid.value || void 0,
+			labelledby: controlLabelledby.value,
+			describedby: controlDescribedby.value
+		}));
+		const n23 = t5();
+		const n10 = child(n23, 1);
+		renderEffect(() => setClass(n23, rootClass.value));
+		setInsertionState(n23, 0, 0);
+		createIf(() => hasLabel.value, () => {
+			const n8 = t2();
+			renderEffect(() => {
+				setProp(n8, "id", labelId.value);
+				setProp(n8, "for", controlId.value);
+			});
+			setInsertionState(n8, null, 0);
+			createSlot("label", null, () => {
+				const n4 = t0();
+				renderEffect(() => setText(n4, toDisplayString(__props.label)));
+				return n4;
+			}, 1);
+			setInsertionState(n8, null, 1);
+			createIf(() => __props.required, () => {
+				return t1();
+			});
+			return n8;
+		});
+		setInsertionState(n10, null, 0);
+		createSlot("default", {
+			id: () => controlId.value,
+			disabled: () => __props.disabled || void 0,
+			required: () => __props.required || void 0,
+			invalid: () => isInvalid.value || void 0,
+			labelledby: () => controlLabelledby.value,
+			describedby: () => controlDescribedby.value,
+			controlProps: () => controlProps.value
+		}, null, 1);
+		setInsertionState(n23, null, 2);
+		createIf(() => hasDescription.value, () => {
+			const n16 = t3();
+			renderEffect(() => setProp(n16, "id", descriptionId.value));
+			setInsertionState(n16, null, 0);
+			createSlot("description", null, () => {
+				const n15 = t0();
+				renderEffect(() => setText(n15, toDisplayString(__props.description)));
+				return n15;
+			}, 1);
+			return n16;
+		});
+		setInsertionState(n23, null, 3);
+		createIf(() => hasMessage.value, () => {
+			const n22 = t4();
+			renderEffect(() => {
+				setProp(n22, "id", messageId.value);
+				setProp(n22, "role", isInvalid.value ? "alert" : void 0);
+			});
+			setInsertionState(n22, null, 0);
+			createSlot("message", null, () => {
+				const n21 = t0();
+				renderEffect(() => setText(n21, toDisplayString(messageText.value)));
+				return n21;
+			}, 1);
+			return n22;
+		});
+		return n23;
+	}
+}), [["__scopeId", "data-v-b8c3dcbe"]]);
+//#endregion
+export { field_default as t };
+
+//# sourceMappingURL=field.js.map

package/dist/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":[],"sources":["../src/components/field/field.vue","../src/components/field/field.vue"],"sourcesContent":["<template>\n    <div :class=\"rootClass\">\n        <label v-if=\"hasLabel\" :id=\"labelId\" class=\"rp-field__label\" :for=\"controlId\">\n            <slot name=\"label\">{{ label }}</slot>\n            <span v-if=\"required\" class=\"rp-field__required\" aria-hidden=\"true\">*</span>\n        </label>\n\n        <div class=\"rp-field__control\">\n            <slot\n                :id=\"controlId\"\n                :disabled=\"disabled || undefined\"\n                :required=\"required || undefined\"\n                :invalid=\"isInvalid || undefined\"\n                :labelledby=\"controlLabelledby\"\n                :describedby=\"controlDescribedby\"\n                :control-props=\"controlProps\"\n            />\n        </div>\n\n        <p v-if=\"hasDescription\" :id=\"descriptionId\" class=\"rp-field__description\">\n            <slot name=\"description\">{{ description }}</slot>\n        </p>\n\n        <p\n            v-if=\"hasMessage\"\n            :id=\"messageId\"\n            class=\"rp-field__message\"\n            :role=\"isInvalid ? 'alert' : undefined\"\n        >\n            <slot name=\"message\">{{ messageText }}</slot>\n        </p>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed, useId, useSlots } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { FieldControlProps, FieldProps } from './types';\n\ndefineOptions({ name: 'RpField' });\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n    label: '',\n    description: '',\n    message: '',\n    error: '',\n    disabled: undefined,\n    required: false,\n    invalid: undefined,\n});\n\nconst slots = useSlots();\nconst generatedId = useId();\n\nconst controlId = computed(() => props.id ?? `${generatedId}-control`);\nconst labelId = computed(() => `${controlId.value}-label`);\nconst descriptionId = computed(() => `${controlId.value}-description`);\nconst messageId = computed(() => `${controlId.value}-message`);\n\nconst isInvalid = computed(() => Boolean(props.invalid || props.error));\nconst messageText = computed(() => props.error || props.message);\n\nconst hasLabel = computed(() => Boolean(props.label || slots.label));\nconst hasDescription = computed(() => Boolean(props.description || slots.description));\nconst hasMessage = computed(() => Boolean(messageText.value || slots.message));\n\nconst controlLabelledby = computed(() => (hasLabel.value ? labelId.value : undefined));\nconst controlDescribedby = computed(\n    () =>\n        [\n            hasDescription.value ? descriptionId.value : undefined,\n            hasMessage.value ? messageId.value : undefined,\n        ]\n            .filter(Boolean)\n            .join(' ') || undefined,\n);\n\nconst rootClass = computed(() =>\n    bem('rp-field', {\n        disabled: props.disabled,\n        required: props.required,\n        invalid: isInvalid.value,\n    }),\n);\n\nconst controlProps = computed<FieldControlProps>(() => ({\n    id: controlId.value,\n    disabled: props.disabled || undefined,\n    required: props.required || undefined,\n    invalid: isInvalid.value || undefined,\n    labelledby: controlLabelledby.value,\n    describedby: controlDescribedby.value,\n}));\n</script>\n\n<style src=\"./field.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\">\n        <label v-if=\"hasLabel\" :id=\"labelId\" class=\"rp-field__label\" :for=\"controlId\">\n            <slot name=\"label\">{{ label }}</slot>\n            <span v-if=\"required\" class=\"rp-field__required\" aria-hidden=\"true\">*</span>\n        </label>\n\n        <div class=\"rp-field__control\">\n            <slot\n                :id=\"controlId\"\n                :disabled=\"disabled || undefined\"\n                :required=\"required || undefined\"\n                :invalid=\"isInvalid || undefined\"\n                :labelledby=\"controlLabelledby\"\n                :describedby=\"controlDescribedby\"\n                :control-props=\"controlProps\"\n            />\n        </div>\n\n        <p v-if=\"hasDescription\" :id=\"descriptionId\" class=\"rp-field__description\">\n            <slot name=\"description\">{{ description }}</slot>\n        </p>\n\n        <p\n            v-if=\"hasMessage\"\n            :id=\"messageId\"\n            class=\"rp-field__message\"\n            :role=\"isInvalid ? 'alert' : undefined\"\n        >\n            <slot name=\"message\">{{ messageText }}</slot>\n        </p>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed, useId, useSlots } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { FieldControlProps, FieldProps } from './types';\n\ndefineOptions({ name: 'RpField' });\n\nconst props = withDefaults(defineProps<FieldProps>(), {\n    label: '',\n    description: '',\n    message: '',\n    error: '',\n    disabled: undefined,\n    required: false,\n    invalid: undefined,\n});\n\nconst slots = useSlots();\nconst generatedId = useId();\n\nconst controlId = computed(() => props.id ?? `${generatedId}-control`);\nconst labelId = computed(() => `${controlId.value}-label`);\nconst descriptionId = computed(() => `${controlId.value}-description`);\nconst messageId = computed(() => `${controlId.value}-message`);\n\nconst isInvalid = computed(() => Boolean(props.invalid || props.error));\nconst messageText = computed(() => props.error || props.message);\n\nconst hasLabel = computed(() => Boolean(props.label || slots.label));\nconst hasDescription = computed(() => Boolean(props.description || slots.description));\nconst hasMessage = computed(() => Boolean(messageText.value || slots.message));\n\nconst controlLabelledby = computed(() => (hasLabel.value ? labelId.value : undefined));\nconst controlDescribedby = computed(\n    () =>\n        [\n            hasDescription.value ? descriptionId.value : undefined,\n            hasMessage.value ? messageId.value : undefined,\n        ]\n            .filter(Boolean)\n            .join(' ') || undefined,\n);\n\nconst rootClass = computed(() =>\n    bem('rp-field', {\n        disabled: props.disabled,\n        required: props.required,\n        invalid: isInvalid.value,\n    }),\n);\n\nconst controlProps = computed<FieldControlProps>(() => ({\n    id: controlId.value,\n    disabled: props.disabled || undefined,\n    required: props.required || undefined,\n    invalid: isInvalid.value || undefined,\n    labelledby: controlLabelledby.value,\n    describedby: controlDescribedby.value,\n}));\n</script>\n\n<style src=\"./field.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,QAAQ;EAUd,MAAM,QAAQ,SAAS;EACvB,MAAM,cAAc,MAAM;EAE1B,MAAM,YAAY,eAAe,MAAM,MAAM,GAAG,YAAY,SAAS;EACrE,MAAM,UAAU,eAAe,GAAG,UAAU,MAAM,OAAO;EACzD,MAAM,gBAAgB,eAAe,GAAG,UAAU,MAAM,aAAa;EACrE,MAAM,YAAY,eAAe,GAAG,UAAU,MAAM,SAAS;EAE7D,MAAM,YAAY,eAAe,QAAQ,MAAM,WAAW,MAAM,KAAK,CAAC;EACtE,MAAM,cAAc,eAAe,MAAM,SAAS,MAAM,OAAO;EAE/D,MAAM,WAAW,eAAe,QAAQ,MAAM,SAAS,MAAM,KAAK,CAAC;EACnE,MAAM,iBAAiB,eAAe,QAAQ,MAAM,eAAe,MAAM,WAAW,CAAC;EACrF,MAAM,aAAa,eAAe,QAAQ,YAAY,SAAS,MAAM,OAAO,CAAC;EAE7E,MAAM,oBAAoB,eAAgB,SAAS,QAAQ,QAAQ,QAAQ,KAAA,CAAU;EACrF,MAAM,qBAAqB,eAEnB,CACI,eAAe,QAAQ,cAAc,QAAQ,KAAA,GAC7C,WAAW,QAAQ,UAAU,QAAQ,KAAA,CACzC,CAAA,CACK,OAAO,OAAO,CAAA,CACd,KAAK,GAAG,KAAK,KAAA,CAC1B;EAEA,MAAM,YAAY,eACd,IAAI,YAAY;GACZ,UAAU,MAAM;GAChB,UAAU,MAAM;GAChB,SAAS,UAAU;EACvB,CAAC,CACL;EAEA,MAAM,eAAe,gBAAmC;GACpD,IAAI,UAAU;GACd,UAAU,MAAM,YAAY,KAAA;GAC5B,UAAU,MAAM,YAAY,KAAA;GAC5B,SAAS,UAAU,SAAS,KAAA;GAC5B,YAAY,kBAAkB;GAC9B,aAAa,mBAAmB;EACpC,EAAE;;;mCA3Fe,UAAA,KAAS,CAAA;;iBACL,SAAA,aAAQ;;;gBAAG,MAAI,QAAA,KAAO;gBAA2B,OAAK,UAAA,KAAS;;;cAClE,SAAY,YAAA;;mDAAI,QAAA,KAAK,CAAA,CAAA;;;;kBACf,QAAA,gBAAQ;;;;;;;GAKf,UAAI,UAAA;GACJ,gBAAU,QAAA,YAAY,KAAA;GACtB,gBAAU,QAAA,YAAY,KAAA;GACtB,eAAS,UAAA,SAAa,KAAA;GACtB,kBAAY,kBAAA;GACZ,mBAAa,mBAAA;GACb,oBAAe,aAAA;;;iBAIf,eAAA,aAAc;;mCAAG,MAAI,cAAA,KAAa,CAAA;;cACjC,eAAkB,YAAA;;oDAAI,QAAA,WAAW,CAAA,CAAA;;;;;;iBAIjC,WAAA,aAAU;;;iBACf,MAAI,UAAA,KAAS;iBAEb,QAAM,UAAA,QAAS,UAAa,KAAA,CAAS;;;cAEhC,WAAc,YAAA;;oDAAI,YAAA,KAAW,CAAA,CAAA"}

package/dist/icon-button.css

@@ -0,0 +1,339 @@
+.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-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);
+  --_rp-button-border: var(--rp-color-border);
+  --_rp-button-border-hover: var(--rp-color-border-hover);
+  --_rp-button-border-active: var(--_rp-button-border-hover);
+  --_rp-button-fg: var(--rp-color-text);
+  --_rp-button-height: var(--rp-size-control-md);
+  --_rp-button-padding-x: var(--rp-spacing-4);
+  --_rp-button-font-size: var(--rp-font-size-base);
+  --_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;
+  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);
+  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;
+  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), 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[data-v-4a239144]: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) {
+  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-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-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_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-accent: var(--rp-color-secondary);
+  --_rp-button-accent-hover: var(--rp-color-secondary-hover);
+  --_rp-button-accent-active: var(--rp-color-secondary-active);
+  --_rp-button-accent-on: var(--rp-color-on-secondary);
+  --_rp-button-accent-subtle-bg: var(--rp-color-secondary-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-secondary-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-secondary-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-secondary-border);
+  --_rp-button-accent-border-hover: var(--rp-color-secondary-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-secondary-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_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-accent: var(--rp-color-success);
+  --_rp-button-accent-hover: var(--rp-color-success-hover);
+  --_rp-button-accent-active: var(--rp-color-success-active);
+  --_rp-button-accent-on: var(--rp-color-on-success);
+  --_rp-button-accent-subtle-bg: var(--rp-color-success-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-success-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-success-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-success-border);
+  --_rp-button-accent-border-hover: var(--rp-color-success-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-success-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_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-accent: var(--rp-color-warning);
+  --_rp-button-accent-hover: var(--rp-color-warning-hover);
+  --_rp-button-accent-active: var(--rp-color-warning-active);
+  --_rp-button-accent-on: var(--rp-color-on-warning);
+  --_rp-button-accent-subtle-bg: var(--rp-color-warning-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-warning-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-warning-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-warning-border);
+  --_rp-button-accent-border-hover: var(--rp-color-warning-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-warning-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_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-accent: var(--rp-color-danger);
+  --_rp-button-accent-hover: var(--rp-color-danger-hover);
+  --_rp-button-accent-active: var(--rp-color-danger-active);
+  --_rp-button-accent-on: var(--rp-color-on-danger);
+  --_rp-button-accent-subtle-bg: var(--rp-color-danger-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-danger-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-danger-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-danger-border);
+  --_rp-button-accent-border-hover: var(--rp-color-danger-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-danger-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_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-accent: var(--rp-color-info);
+  --_rp-button-accent-hover: var(--rp-color-info-hover);
+  --_rp-button-accent-active: var(--rp-color-info-active);
+  --_rp-button-accent-on: var(--rp-color-on-info);
+  --_rp-button-accent-subtle-bg: var(--rp-color-info-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-info-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-info-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-info-border);
+  --_rp-button-accent-border-hover: var(--rp-color-info-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-info-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_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-accent: var(--rp-color-neutral);
+  --_rp-button-accent-hover: var(--rp-color-neutral-hover);
+  --_rp-button-accent-active: var(--rp-color-neutral-active);
+  --_rp-button-accent-on: var(--rp-color-on-neutral);
+  --_rp-button-accent-subtle-bg: var(--rp-color-neutral-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-neutral-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-neutral-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-neutral-border);
+  --_rp-button-accent-border-hover: var(--rp-color-neutral-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-neutral-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_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-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-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-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-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: var(--rp-radius-xs);
+}
+.rp-button--radius-sm[data-v-4a239144] {
+  --_rp-button-radius: var(--rp-radius-sm);
+}
+.rp-button--radius-md[data-v-4a239144] {
+  --_rp-button-radius: var(--rp-radius-md);
+}
+.rp-button--radius-lg[data-v-4a239144] {
+  --_rp-button-radius: var(--rp-radius-lg);
+}
+.rp-button--radius-xl[data-v-4a239144] {
+  --_rp-button-radius: var(--rp-radius-xl);
+}
+.rp-button--solid[data-v-4a239144] {
+  --_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);
+  --_rp-button-border: var(--_rp-button-accent);
+  --_rp-button-border-hover: var(--_rp-button-accent-hover);
+  --_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-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);
+  --_rp-button-border: transparent;
+  --_rp-button-border-hover: transparent;
+  --_rp-button-border-active: transparent;
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--surface[data-v-4a239144] {
+  --_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);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-border-active: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--outline[data-v-4a239144] {
+  --_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);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-border-active: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--ghost[data-v-4a239144] {
+  --_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);
+  --_rp-button-border: transparent;
+  --_rp-button-border-hover: transparent;
+  --_rp-button-border-active: transparent;
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--plain[data-v-4a239144] {
+  --_rp-button-bg: transparent;
+  --_rp-button-bg-hover: transparent;
+  --_rp-button-bg-active: transparent;
+  --_rp-button-border: transparent;
+  --_rp-button-border-hover: transparent;
+  --_rp-button-border-active: transparent;
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button[data-v-4a239144]:disabled {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+  box-shadow: none;
+  transform: none;
+}
+.rp-button[data-v-4a239144]: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] {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.rp-button__spinner[data-v-4a239144] {
+  display: block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  transform-origin: center;
+  animation: rp-button-spin-4a239144 700ms linear infinite;
+}
+@keyframes rp-button-spin-4a239144 {
+to {
+    transform: rotate(360deg);
+}
+}.rp-icon-button[data-v-4a239144] {
+  width: var(--_rp-button-height);
+  padding: 0;
+}
+.rp-icon-button__icon[data-v-4a239144], .rp-icon-button__spinner[data-v-4a239144] {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+.rp-icon-button__icon[data-v-4a239144] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.rp-icon-button__icon svg[data-v-4a239144-s] {
+  display: block;
+  width: 1em;
+  height: 1em;
+}
+.rp-icon-button__spinner[data-v-4a239144] {
+  display: block;
+  transform-origin: center;
+  animation: rp-icon-button-spin-4a239144 700ms linear infinite;
+}
+@keyframes rp-icon-button-spin-4a239144 {
+to {
+    transform: rotate(360deg);
+}
+}

package/dist/icon-button.js

@@ -0,0 +1,63 @@
+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";
+//#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);
+//#endregion
+//#region src/components/icon-button/icon-button.vue
+var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpIconButton",
+	__name: "icon-button",
+	props: {
+		ariaLabel: {},
+		variant: {},
+		color: {},
+		size: {},
+		radius: {},
+		type: { default: "button" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		}
+	},
+	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),
+			[`size-${props.size}`]: Boolean(props.size),
+			[`radius-${props.radius}`]: Boolean(props.radius)
+		}), "rp-icon-button"]);
+		const n6 = t1();
+		renderEffect(() => {
+			setClass(n6, rootClass.value);
+			setProp(n6, "disabled", __props.disabled || isLoading.value || void 0);
+			setProp(n6, "type", __props.type);
+			setAttr(n6, "aria-label", __props.ariaLabel || void 0);
+		});
+		setInsertionState(n6, null, 0);
+		createIf(() => isLoading.value, () => {
+			return createComponent(unref(loader_circle_default), {
+				class: "rp-icon-button__spinner",
+				"aria-hidden": "true"
+			});
+		}, () => {
+			const n5 = t0();
+			setInsertionState(n5, null, 0);
+			createSlot("default", null, null, 1);
+			return n5;
+		}, 261);
+		return n6;
+	}
+}), [["__scopeId", "data-v-4a239144"]]);
+//#endregion
+export { icon_button_default as t };
+
+//# sourceMappingURL=icon-button.js.map

package/dist/icon-button.js.map

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -1,5 +1,8 @@
 export * from './components/button';
+export * from './components/card';
 export * from './components/checkbox';
+export * from './components/field';
+export * from './components/icon-button';
 export * from './components/input';
 export * from './components/radio';
 export * from './components/select';

package/dist/index.js

@@ -1,8 +1,11 @@
 import { t as button_default } from "./button.js";
+import { t as card_default } from "./card.js";
 import { t as checkbox_default } from "./checkbox.js";
+import { t as field_default } from "./field.js";
+import { t as icon_button_default } from "./icon-button.js";
 import { t as input_default } from "./input.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 switch_default } from "./switch.js";
 import { t as textarea_default } from "./textarea.js";
-export { button_default as Button, checkbox_default as Checkbox, 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 };
+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 };

package/dist/input.css

@@ -5,7 +5,7 @@
   --_rp-input-radius: var(--rp-radius-sm);
   --_rp-input-valid-border: var(--rp-color-success-border-hover);
   --_rp-input-valid-ring: color-mix(in srgb, var(--rp-color-success) 32%, transparent);
-  --_rp-input-invalid-border: var(--rp-color-danger-border-hover);
+  --_rp-input-invalid-border: var(--rp-color-danger);
   --_rp-input-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
   display: inline-flex;
   align-items: center;
@@ -58,7 +58,7 @@
   --_rp-input-font-size: var(--rp-font-size-lg);
 }
 .rp-input--radius-xs[data-v-fedf15e7] {
-  --_rp-input-radius: var(--rp-radius-sm);
+  --_rp-input-radius: var(--rp-radius-xs);
 }
 .rp-input--radius-sm[data-v-fedf15e7] {
   --_rp-input-radius: var(--rp-radius-sm);

package/dist/loader-circle.js

@@ -0,0 +1,14 @@
+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
+export { loader_circle_default as t };
+
+//# sourceMappingURL=loader-circle.js.map

package/dist/loader-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-circle.js","names":[],"sources":[],"mappings":""}

package/dist/select.css

@@ -1,11 +1,17 @@
 .rp-select[data-v-9838513c] {
   --_rp-select-radius: var(--rp-radius-sm);
+  --_rp-select-invalid-border: var(--rp-color-danger);
+  --_rp-select-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
   position: relative;
   display: inline-flex;
   font-family: var(--rp-font-family);
   font-weight: var(--rp-font-weight-normal);
   line-height: var(--rp-line-height-none);
 }
+html.dark .rp-select[data-v-9838513c] {
+  --_rp-select-invalid-border: var(--rp-color-danger-fg);
+  --_rp-select-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
+}
 .rp-select--disabled[data-v-9838513c] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
@@ -36,7 +42,7 @@
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
 .rp-select--radius-xs[data-v-9838513c] {
-  --_rp-select-radius: var(--rp-radius-sm);
+  --_rp-select-radius: var(--rp-radius-xs);
 }
 .rp-select--radius-sm[data-v-9838513c] {
   --_rp-select-radius: var(--rp-radius-sm);
@@ -55,7 +61,11 @@
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
 .rp-select--invalid .rp-select__trigger[data-v-9838513c] {
-  border-color: var(--rp-color-danger-fg);
+  border-color: var(--_rp-select-invalid-border);
+}
+.rp-select--invalid .rp-select__trigger[data-v-9838513c]:focus-visible, .rp-select--open.rp-select--invalid .rp-select__trigger[data-v-9838513c] {
+  border-color: var(--_rp-select-invalid-border);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-select-invalid-ring);
 }
 .rp-select__value[data-v-9838513c] {
   flex: 1;
@@ -134,7 +144,7 @@
 }
 .rp-select__dropdown[data-v-9838513c] {
   position: absolute;
-  top: calc(100% + var(--rp-spacing-1));
+  top: calc(100% + var(--rp-spacing-2));
   left: 0;
   right: 0;
   z-index: 100;