ropav 0.0.8 → 0.0.9

package/dist/input.css

@@ -1,12 +1,12 @@
-.rp-input[data-v-e5ad32a7] {
+.rp-input[data-v-67d291cf] {
   --_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-padding-x: calc(var(--rp-size-control-md) / 3);
+  --_rp-input-font-size: var(--rp-font-size-md);
   --_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);
-  --_rp-input-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
+  --_rp-input-valid-border: var(--rp-color-green-outline);
+  --_rp-input-valid-ring: color-mix(in srgb, var(--rp-color-green-outline) 32%, transparent);
+  --_rp-input-invalid-border: var(--rp-color-red-outline);
+  --_rp-input-invalid-ring: color-mix(in srgb, var(--rp-color-red-outline) 32%, transparent);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -19,87 +19,81 @@
   cursor: text;
   transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
-.rp-input[data-v-e5ad32a7]:hover:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+.rp-input[data-v-67d291cf]: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-e5ad32a7]:focus-within:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+.rp-input[data-v-67d291cf]: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-e5ad32a7] {
+.rp-input[data-v-67d291cf] {
   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-e5ad32a7] {
-  --_rp-input-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
-  --_rp-input-padding-x: var(--rp-spacing-1);
+.rp-input--size-xs[data-v-67d291cf] {
+  --_rp-input-height: var(--rp-size-control-xs);
+  --_rp-input-padding-x: calc(var(--rp-size-control-xs) / 3);
   --_rp-input-font-size: var(--rp-font-size-xs);
 }
-.rp-input--size-sm[data-v-e5ad32a7] {
+.rp-input--size-sm[data-v-67d291cf] {
   --_rp-input-height: var(--rp-size-control-sm);
-  --_rp-input-padding-x: var(--rp-spacing-2);
+  --_rp-input-padding-x: calc(var(--rp-size-control-sm) / 3);
   --_rp-input-font-size: var(--rp-font-size-sm);
 }
-.rp-input--size-md[data-v-e5ad32a7] {
+.rp-input--size-md[data-v-67d291cf] {
   --_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-padding-x: calc(var(--rp-size-control-md) / 3);
+  --_rp-input-font-size: var(--rp-font-size-md);
 }
-.rp-input--size-lg[data-v-e5ad32a7] {
+.rp-input--size-lg[data-v-67d291cf] {
   --_rp-input-height: var(--rp-size-control-lg);
-  --_rp-input-padding-x: var(--rp-spacing-4);
+  --_rp-input-padding-x: calc(var(--rp-size-control-lg) / 3);
   --_rp-input-font-size: var(--rp-font-size-lg);
 }
-.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--size-xl[data-v-67d291cf] {
+  --_rp-input-height: var(--rp-size-control-xl);
+  --_rp-input-padding-x: calc(var(--rp-size-control-xl) / 3);
+  --_rp-input-font-size: var(--rp-font-size-xl);
 }
-.rp-input--radius-xs[data-v-e5ad32a7] {
+.rp-input--radius-xs[data-v-67d291cf] {
   --_rp-input-radius: var(--rp-radius-xs);
 }
-.rp-input--radius-sm[data-v-e5ad32a7] {
+.rp-input--radius-sm[data-v-67d291cf] {
   --_rp-input-radius: var(--rp-radius-sm);
 }
-.rp-input--radius-md[data-v-e5ad32a7] {
+.rp-input--radius-md[data-v-67d291cf] {
   --_rp-input-radius: var(--rp-radius-md);
 }
-.rp-input--radius-lg[data-v-e5ad32a7] {
+.rp-input--radius-lg[data-v-67d291cf] {
   --_rp-input-radius: var(--rp-radius-lg);
 }
-.rp-input--radius-xl[data-v-e5ad32a7] {
+.rp-input--radius-xl[data-v-67d291cf] {
   --_rp-input-radius: var(--rp-radius-xl);
 }
-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-e5ad32a7] {
+.rp-input--disabled[data-v-67d291cf] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-input--valid[data-v-e5ad32a7] {
+.rp-input--valid[data-v-67d291cf] {
   border-color: var(--_rp-input-valid-border);
 }
-.rp-input--valid[data-v-e5ad32a7]:focus-within:not(.rp-input--disabled) {
+.rp-input--valid[data-v-67d291cf]: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-e5ad32a7] {
+.rp-input--invalid[data-v-67d291cf] {
   border-color: var(--_rp-input-invalid-border);
 }
-.rp-input--invalid[data-v-e5ad32a7]:focus-within:not(.rp-input--disabled) {
+.rp-input--invalid[data-v-67d291cf]: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-e5ad32a7] {
+.rp-input--readonly[data-v-67d291cf] {
   background-color: var(--rp-color-control-readonly-bg);
 }
-.rp-input__native[data-v-e5ad32a7] {
+.rp-input__native[data-v-67d291cf] {
   box-sizing: border-box;
   flex: 1;
   width: 100%;
@@ -111,15 +105,15 @@ html.dark .rp-input[data-v-e5ad32a7] {
   background: transparent;
   font: inherit;
   color: var(--rp-color-control-fg);
-  line-height: var(--rp-line-height-none);
+  line-height: 1;
 }
-.rp-input__native[data-v-e5ad32a7]::placeholder {
+.rp-input__native[data-v-67d291cf]::placeholder {
   color: var(--rp-color-control-placeholder);
 }
-.rp-input__native[data-v-e5ad32a7]:disabled {
+.rp-input__native[data-v-67d291cf]:disabled {
   cursor: not-allowed;
 }
-.rp-input__left[data-v-e5ad32a7], .rp-input__right[data-v-e5ad32a7] {
+.rp-input__left[data-v-67d291cf], .rp-input__right[data-v-67d291cf] {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;

package/dist/input.js

@@ -2,7 +2,7 @@ import './input.css';
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setValue, template, unref } from "vue";
+import { child, computed, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, ref, renderEffect, setClass, setDynamicProps, setInsertionState, template, unref, watch } from "vue";
 //#region src/components/input/useInput.ts
 var INTERACTIVE_SELECTOR = [
 	"button",
@@ -46,10 +46,10 @@ function useInput(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/input/input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-e5ad32a7 class=rp-input__left>");
-var t1 = template("<span data-v-e5ad32a7 class=rp-input__right>");
-var t2 = template("<label data-v-e5ad32a7><input data-v-e5ad32a7 class=rp-input__native>", 1);
-delegateEvents("input", "mousedown");
+var t0 = template("<span data-v-67d291cf class=rp-input__left>");
+var t1 = template("<span data-v-67d291cf class=rp-input__right>");
+var t2 = template("<label data-v-67d291cf><input data-v-67d291cf>", 1);
+delegateEvents("mousedown");
 //#endregion
 //#region src/components/input/input.vue
 var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -85,7 +85,9 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		},
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit, slots: $slots }) {
@@ -94,6 +96,20 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const { inputRef, control, rootClass, onInput, focusInput } = useInput(props, (value) => {
 			emit("update:modelValue", value);
 		});
+		const nativeInputAttrs = computed(() => {
+			const attrs = props.inputAttrs ?? {};
+			return {
+				...attrs,
+				onInput(event) {
+					onInput(event);
+					attrs.onInput?.(event);
+				}
+			};
+		});
+		watch([inputRef, () => props.validationMessage], ([input, validationMessage]) => input?.setCustomValidity(validationMessage ?? ""), {
+			flush: "post",
+			immediate: true
+		});
 		const _setTemplateRef = createTemplateRefSetter();
 		const n9 = t2();
 		const n4 = child(n9, 1);
@@ -105,24 +121,26 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			createSlot("left", null, null, 1);
 			return n3;
 		});
-		n4.$evtinput = createInvoker((e) => unref(onInput)(e));
 		_setTemplateRef(n4, inputRef, null, "inputRef");
 		renderEffect(() => {
 			const _control = unref(control);
 			const _control_required = _control.required;
-			setProp(n4, "id", _control.id);
-			setProp(n4, "name", __props.name);
-			setProp(n4, "type", __props.type);
-			setValue(n4, __props.modelValue);
-			setProp(n4, "placeholder", __props.placeholder);
-			setProp(n4, "disabled", _control.disabled || void 0);
-			setProp(n4, "readonly", __props.readonly || void 0);
-			setProp(n4, "required", _control_required || void 0);
-			setAttr(n4, "aria-label", __props.ariaLabel || void 0);
-			setAttr(n4, "aria-labelledby", _control.ariaLabelledby);
-			setAttr(n4, "aria-describedby", _control.ariaDescribedby);
-			setAttr(n4, "aria-invalid", _control.invalid || void 0);
-			setAttr(n4, "aria-required", _control_required || void 0);
+			setDynamicProps(n4, [nativeInputAttrs.value, {
+				id: _control.id,
+				name: __props.name,
+				class: "rp-input__native",
+				type: __props.type,
+				value: __props.modelValue,
+				placeholder: __props.placeholder,
+				disabled: _control.disabled || void 0,
+				readonly: __props.readonly || void 0,
+				required: _control_required || void 0,
+				"aria-label": __props.ariaLabel || void 0,
+				"aria-labelledby": _control.ariaLabelledby,
+				"aria-describedby": _control.ariaDescribedby,
+				"aria-invalid": _control.invalid || void 0,
+				"aria-required": _control_required || void 0
+			}]);
 		});
 		setInsertionState(n9, null, 2);
 		createIf(() => $slots.right, () => {
@@ -134,6 +152,6 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		n9.$evtmousedown = createInvoker((e) => unref(focusInput)(e));
 		return n9;
 	}
-}), [["__scopeId", "data-v-e5ad32a7"]]);
+}), [["__scopeId", "data-v-67d291cf"]]);
 //#endregion
 export { input_default as t };

package/dist/minus.js

@@ -0,0 +1,12 @@
+import { defineVaporComponent, markRaw, template } from "vue";
+//#region ~icons/lucide/minus
+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=\"M5 12h14\">", 3, 1);
+function render(_ctx) {
+	return t0();
+}
+var minus_default = markRaw(defineVaporComponent({
+	name: "lucide-minus",
+	render
+}));
+//#endregion
+export { minus_default as t };

package/dist/modal.css

@@ -40,8 +40,8 @@
   max-height: var(--_rp-modal-max-height);
   color: var(--rp-color-text);
   overflow: hidden;
-  background-color: var(--rp-color-surface-raised);
-  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  background-color: var(--rp-color-default);
+  border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
   border-radius: var(--_rp-modal-radius);
   box-shadow: var(--rp-shadow-lg);
   outline: none;
@@ -53,7 +53,7 @@
 .rp-modal__header[data-v-657f313d] {
   box-sizing: border-box;
   padding: var(--rp-spacing-5) calc(var(--rp-spacing-6) + var(--rp-size-control-sm)) var(--rp-spacing-4) var(--rp-spacing-5);
-  border-bottom: var(--rp-border-width-thin) solid var(--rp-color-border);
+  border-bottom: var(--rp-border-width-thin) solid var(--rp-color-default-border);
 }
 .rp-modal__heading[data-v-657f313d] {
   display: grid;
@@ -64,13 +64,13 @@
   color: var(--rp-color-text);
   font-size: var(--rp-font-size-xl);
   font-weight: var(--rp-font-weight-semibold);
-  line-height: var(--rp-line-height-tight);
+  line-height: var(--rp-line-height-xs);
 }
 .rp-modal__description[data-v-657f313d] {
   margin: 0;
-  color: var(--rp-color-text-secondary);
+  color: var(--rp-color-dimmed);
   font-size: var(--rp-font-size-sm);
-  line-height: var(--rp-line-height-normal);
+  line-height: var(--rp-line-height-md);
 }
 .rp-modal__close[data-v-657f313d] {
   position: absolute;
@@ -85,8 +85,8 @@
   padding: var(--rp-spacing-5);
   overflow: auto;
   color: var(--rp-color-text);
-  font-size: var(--rp-font-size-base);
-  line-height: var(--rp-line-height-normal);
+  font-size: var(--rp-font-size-md);
+  line-height: var(--rp-line-height-md);
 }
 .rp-modal--closable.rp-modal--headerless .rp-modal__body[data-v-657f313d] {
   padding-right: calc(var(--rp-spacing-6) + var(--rp-size-control-sm));
@@ -99,7 +99,7 @@
   gap: var(--rp-spacing-2);
   justify-content: flex-end;
   padding: var(--rp-spacing-4) var(--rp-spacing-5);
-  border-top: var(--rp-border-width-thin) solid var(--rp-color-border);
+  border-top: var(--rp-border-width-thin) solid var(--rp-color-default-border);
 }
 .rp-modal-enter-active[data-v-657f313d],
 .rp-modal-leave-active[data-v-657f313d] {

package/dist/modal.js

@@ -1,8 +1,8 @@
 import './modal.css';
+import { t as x_default } from "./x.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as icon_button_default } from "./icon-button.js";
-import { t as x_default } from "./x.js";
 import { t as overlay_default } from "./overlay.js";
 import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, nextTick, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, txt, unref, useId, useSlots, watch } from "vue";
 //#region src/components/modal/useModal.ts

package/dist/number-input.css

@@ -0,0 +1,86 @@
+.rp-number-input[data-v-b5d8edf1] {
+  --_rp-number-input-control-size: var(--_rp-input-height);
+  --_rp-number-input-text-align: left;
+  overflow: hidden;
+  vertical-align: middle;
+}
+.rp-number-input[data-v-b5d8edf1] .rp-input__native {
+  appearance: textfield;
+  text-align: var(--_rp-number-input-text-align);
+}
+.rp-number-input--text-align-center[data-v-b5d8edf1] {
+  --_rp-number-input-text-align: center;
+}
+.rp-number-input--text-align-right[data-v-b5d8edf1] {
+  --_rp-number-input-text-align: right;
+}
+.rp-number-input[data-v-b5d8edf1] .rp-input__native::-webkit-inner-spin-button,
+.rp-number-input[data-v-b5d8edf1] .rp-input__native::-webkit-outer-spin-button {
+  margin: 0;
+  appearance: none;
+}
+.rp-number-input[data-v-b5d8edf1] .rp-input__left,
+.rp-number-input[data-v-b5d8edf1] .rp-input__right {
+  align-self: stretch;
+  margin-block: calc(-1 * var(--rp-border-width-thin));
+}
+.rp-number-input[data-v-b5d8edf1] .rp-input__left {
+  margin-inline-start: calc(-1 * var(--_rp-input-padding-x));
+}
+.rp-number-input[data-v-b5d8edf1] .rp-input__right {
+  margin-inline-end: calc(-1 * var(--_rp-input-padding-x));
+}
+.rp-number-input__controls[data-v-b5d8edf1] {
+  display: inline-flex;
+  height: var(--_rp-input-height);
+  flex-shrink: 0;
+}
+.rp-number-input__controls--left[data-v-b5d8edf1] {
+  border-inline-end: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+}
+.rp-number-input__controls--right[data-v-b5d8edf1] {
+  border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+}
+.rp-number-input__control[data-v-b5d8edf1] {
+  padding: 0;
+  font: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_rp-number-input-control-size);
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  color: var(--rp-color-control-icon);
+  transition: color var(--rp-transition-fast), background-color var(--rp-transition-fast), opacity var(--rp-transition-fast);
+}
+.rp-number-input__control + .rp-number-input__control[data-v-b5d8edf1] {
+  border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+}
+.rp-number-input__control[data-v-b5d8edf1]:hover:not(:disabled) {
+  color: var(--rp-color-control-fg);
+  background-color: var(--rp-color-default-hover);
+}
+.rp-number-input__control[data-v-b5d8edf1]:disabled {
+  cursor: not-allowed;
+  opacity: var(--rp-opacity-disabled);
+}
+.rp-number-input__control-icon[data-v-b5d8edf1] {
+  display: inline-flex;
+  align-items: center;
+  width: 0.875em;
+  height: 0.875em;
+  flex-shrink: 0;
+}
+.rp-number-input__control-icon svg[data-v-b5d8edf1] {
+  width: 100%;
+  height: 100%;
+}
+.rp-number-input__control-icon[data-v-b5d8edf1] >  svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}