arvue-ui 0.6.0 → 0.7.0

package/dist/select/selectContent.js

@@ -0,0 +1,101 @@
+import { clsx } from "../clsx.js";
+import { _sfc_main as _sfc_main$1 } from "./selectScrollDownButton.js";
+import { _sfc_main as _sfc_main$2 } from "./selectScrollUpButton.js";
+import { createBlock, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { SelectContent, SelectViewport, useForwardPropsEmits } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+import { AnimatePresence, Motion } from "motion-v";
+//#region src/select/SelectContent.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "SelectContent",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		forceMount: { type: Boolean },
+		bodyLock: { type: Boolean },
+		side: {},
+		sideOffset: { default: 8 },
+		sideFlip: { type: Boolean },
+		align: {},
+		alignOffset: {},
+		alignFlip: { type: Boolean },
+		avoidCollisions: { type: Boolean },
+		collisionBoundary: {},
+		collisionPadding: {},
+		arrowPadding: {},
+		hideShiftedArrow: { type: Boolean },
+		sticky: {},
+		hideWhenDetached: { type: Boolean },
+		positionStrategy: {},
+		updatePositionStrategy: {},
+		disableUpdateOnLayoutShift: { type: Boolean },
+		prioritizePosition: { type: Boolean },
+		reference: {},
+		asChild: { type: Boolean },
+		as: {},
+		disableOutsidePointerEvents: { type: Boolean }
+	},
+	emits: [
+		"closeAutoFocus",
+		"escapeKeyDown",
+		"pointerDownOutside"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(AnimatePresence), null, {
+				default: withCtx(() => [createVNode(unref(SelectContent), mergeProps({
+					..._ctx.$attrs,
+					...unref(forwarded)
+				}, {
+					class: unref(clsx)("arvue-select-content", props.class),
+					position: "popper",
+					"as-child": ""
+				}), {
+					default: withCtx(() => [createVNode(unref(Motion), {
+						initial: {
+							y: "-5px",
+							opacity: 0
+						},
+						animate: {
+							y: 0,
+							opacity: 1
+						},
+						exit: {
+							y: "-5px",
+							opacity: 0
+						},
+						transition: {
+							duration: .15,
+							ease: "easeInOut"
+						}
+					}, {
+						default: withCtx(() => [
+							createVNode(unref(_sfc_main$2)),
+							createVNode(unref(SelectViewport), { class: "arvue-select-content-viewport" }, {
+								default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+								_: 3
+							}),
+							createVNode(unref(_sfc_main$1))
+						]),
+						_: 3
+					})]),
+					_: 3
+				}, 16, ["class"])]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { _sfc_main };
+
+//# sourceMappingURL=selectContent.js.map

package/dist/select/selectContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectContent.js","names":["$attrs"],"sources":["../../src/select/SelectContent.vue"],"sourcesContent":["<style>\n@import './select-content.css';\n</style>\n\n<template>\n    <AnimatePresence>\n        <SelectContent\n            v-bind=\"{ ...$attrs, ...forwarded }\"\n            :class=\"clsx('arvue-select-content', props.class)\"\n            position=\"popper\"\n            as-child\n        >\n            <Motion\n                :initial=\"{\n                    y: '-5px',\n                    opacity: 0,\n                }\"\n                :animate=\"{\n                    y: 0,\n                    opacity: 1,\n                }\"\n                :exit=\"{\n                    y: '-5px',\n                    opacity: 0,\n                }\"\n                :transition=\"{\n                    duration: .15,\n                    ease: 'easeInOut',\n                }\"\n            >\n                <SelectScrollUpButton/>\n                <SelectViewport class=\"arvue-select-content-viewport\">\n                    <slot/>\n                </SelectViewport>\n                <SelectScrollDownButton/>\n            </Motion>\n        </SelectContent>\n    </AnimatePresence>\n</template>\n\n<script lang=\"ts\">\nimport type {\n    SelectContentEmits as RekaSelectContentEmits,\n    SelectContentProps as RekaSelectContentProps,\n} from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport interface SelectContentProps extends Omit<RekaSelectContentProps, 'position'> {\n    class?: HTMLAttributes['class']\n}\nexport interface SelectContentEmits extends RekaSelectContentEmits {}\n</script>\n\n<script setup lang=\"ts\">\nimport { reactiveOmit } from '@vueuse/core'\nimport { clsx } from 'clsx'\nimport { AnimatePresence, Motion } from 'motion-v'\nimport {\n    SelectContent,\n    SelectViewport,\n    useForwardPropsEmits,\n} from 'reka-ui'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n    inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SelectContentProps>(), {\n    sideOffset: 8,\n})\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA,MAAM,QAAQ;EAGd,MAAM,QAAQ;EAId,MAAM,YAAY,qBAFK,aAAa,OAAO,OAEJ,GAAgB,KAAK;;uBAtExD,YAgCkB,MAAA,eAAA,GAAA,MAAA;2BADE,CA9BhB,YA8BgB,MAAA,aAAA,GA9BhB,WA8BgB;KAAA,GA7BCA,KAAAA;KAAM,GAAK,MAAA,SAAA;IAAS,GAAA;KAChC,OAAO,MAAA,IAAA,EAAI,wBAAyB,MAAM,KAAK;KAChD,UAAS;KACT,YAAA;;4BAyBS,CAvBT,YAuBS,MAAA,MAAA,GAAA;MAtBJ,SAAS;;;;MAIT,SAAS;;;;MAIT,MAAM;;;;MAIN,YAAY;;;;;6BAKU;OAAvB,YAAuB,MAAA,WAAA,CAAA;OACvB,YAEiB,MAAA,cAAA,GAAA,EAFD,OAAM,gCAA+B,GAAA;+BAC1C,CAAP,WAAO,KAAA,QAAA,SAAA,CAAA,CAAA;;;OAEX,YAAyB,MAAA,WAAA,CAAA"}

package/dist/select/selectGroup.js

@@ -0,0 +1,23 @@
+import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { SelectGroup } from "reka-ui";
+//#region src/select/SelectGroup.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "SelectGroup",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SelectGroup), normalizeProps(guardReactiveProps(props)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { _sfc_main };
+
+//# sourceMappingURL=selectGroup.js.map

package/dist/select/selectGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectGroup.js","names":[],"sources":["../../src/select/SelectGroup.vue"],"sourcesContent":["<template>\n    <SelectGroup v-bind=\"props\">\n        <slot/>\n    </SelectGroup>\n</template>\n\n<script lang=\"ts\">\nimport type { SelectGroupProps as RekaSelectGroupProps } from 'reka-ui'\n\nexport interface SelectGroupProps extends RekaSelectGroupProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { SelectGroup } from 'reka-ui'\n\nconst props = defineProps<SelectGroupProps>()\n</script>\n"],"mappings":";;;;;;;;;;EAeA,MAAM,QAAQ;;uBAdV,YAEc,MAAA,WAAA,GAAA,eAAA,mBAFO,KAAK,CAAA,GAAA;2BACf,CAAP,WAAO,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/select/selectItem.js

@@ -0,0 +1,43 @@
+import { clsx } from "../clsx.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { SelectItem, SelectItemIndicator, SelectItemText, useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+//#region src/select/SelectItem.vue
+const _hoisted_1 = { class: "arvue-select-item-indicator-wrapper" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "SelectItem",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		value: {},
+		disabled: { type: Boolean },
+		textValue: {},
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const forwardedProps = useForwardProps(reactiveOmit(props, "class"));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SelectItem), mergeProps(unref(forwardedProps), { class: unref(clsx)("arvue-select-item", props.class) }), {
+				default: withCtx(() => [createElementVNode("span", _hoisted_1, [createVNode(unref(SelectItemIndicator), null, {
+					default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("i", { class: "fas fa-check" }, null, -1)])]),
+					_: 1
+				})]), createVNode(unref(SelectItemText), null, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				})]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main };
+
+//# sourceMappingURL=selectItem.js.map

package/dist/select/selectItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectItem.js","names":[],"sources":["../../src/select/SelectItem.vue"],"sourcesContent":["<style>\n@import './select-item.css';\n</style>\n\n<template>\n    <SelectItem\n        v-bind=\"forwardedProps\"\n        :class=\"clsx('arvue-select-item', props.class)\"\n    >\n        <span class=\"arvue-select-item-indicator-wrapper\">\n            <SelectItemIndicator>\n                <i class=\"fas fa-check\"/>\n            </SelectItemIndicator>\n        </span>\n\n        <SelectItemText>\n            <slot/>\n        </SelectItemText>\n    </SelectItem>\n</template>\n\n<script lang=\"ts\">\nimport type { SelectItemProps as RekaSelectItemProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport interface SelectItemProps extends RekaSelectItemProps {\n    class?: HTMLAttributes['class']\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { reactiveOmit } from '@vueuse/core'\nimport { clsx } from 'clsx'\nimport {\n    SelectItem,\n    SelectItemIndicator,\n    SelectItemText,\n    useForwardProps,\n} from 'reka-ui'\n\nconst props = defineProps<SelectItemProps>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAwCA,MAAM,QAAQ;EAId,MAAM,iBAAiB,gBAFA,aAAa,OAAO,OAEJ,CAAc;;uBAvCjD,YAaa,MAAA,UAAA,GAbb,WACY,MAYC,cAAA,GAZa,EACrB,OAAO,MAAA,IAAA,EAAI,qBAAsB,MAAM,KAAK,EAAA,CAAA,GAAA;2BAMtC,CAJP,mBAIO,QAJP,YAIO,CAHH,YAEsB,MAAA,mBAAA,GAAA,MAAA;4BADO,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAzB,mBAAyB,KAAA,EAAtB,OAAM,eAAc,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA;;UAI/B,YAEiB,MAAA,cAAA,GAAA,MAAA;4BADN,CAAP,WAAO,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/select/selectItemText.js

@@ -0,0 +1,23 @@
+import { createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { SelectItemText } from "reka-ui";
+//#region src/select/SelectItemText.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "SelectItemText",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SelectItemText), normalizeProps(guardReactiveProps(props)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { _sfc_main };
+
+//# sourceMappingURL=selectItemText.js.map

package/dist/select/selectItemText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectItemText.js","names":[],"sources":["../../src/select/SelectItemText.vue"],"sourcesContent":["<template>\n    <SelectItemText v-bind=\"props\">\n        <slot/>\n    </SelectItemText>\n</template>\n\n<script lang=\"ts\">\nimport type { SelectItemTextProps as RekaSelectItemTextProps } from 'reka-ui'\n\nexport interface SelectItemTextProps extends RekaSelectItemTextProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { SelectItemText } from 'reka-ui'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n"],"mappings":";;;;;;;;;;EAeA,MAAM,QAAQ;;uBAdV,YAEiB,MAAA,cAAA,GAAA,eAAA,mBAFO,KAAK,CAAA,GAAA;2BAClB,CAAP,WAAO,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/select/selectLabel.js

@@ -0,0 +1,34 @@
+import { clsx } from "../clsx.js";
+import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { SelectLabel } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+//#region src/select/SelectLabel.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "SelectLabel",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		for: {},
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const delegatedProps = reactiveOmit(props, "class");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SelectLabel), mergeProps({ class: unref(clsx)("arvue-select-label", props.class) }, unref(delegatedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main };
+
+//# sourceMappingURL=selectLabel.js.map

package/dist/select/selectLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectLabel.js","names":[],"sources":["../../src/select/SelectLabel.vue"],"sourcesContent":["<style>\n@import './select-label.css';\n</style>\n\n<template>\n    <SelectLabel\n        :class=\"clsx('arvue-select-label', props.class)\"\n        v-bind=\"delegatedProps\"\n    >\n        <slot/>\n    </SelectLabel>\n</template>\n\n<script lang=\"ts\">\nimport type { SelectLabelProps as RekaSelectLabelProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport interface SelectLabelProps extends RekaSelectLabelProps {\n    class?: HTMLAttributes['class']\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { reactiveOmit } from '@vueuse/core'\nimport { clsx } from 'clsx'\nimport { SelectLabel } from 'reka-ui'\n\nconst props = defineProps<SelectLabelProps>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,QAAQ;EAEd,MAAM,iBAAiB,aAAa,OAAO,OAAO;;uBAxB9C,YAKc,MAAA,WAAA,GALd,WAKc,EAJT,OAAO,MAAA,IAAA,EAAI,sBAAuB,MAAM,KAAK,EAAA,GACtC,MAAA,cAAA,CAAc,GAAA;2BAEf,CAAP,WAAO,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/select/selectRootPatch.js

@@ -0,0 +1,24 @@
+import { defineComponent, onBeforeUnmount, renderSlot } from "vue";
+import { injectSelectRootContext } from "reka-ui";
+//#region src/select/SelectRootPatch.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "SelectRootPatch",
+	setup(__props) {
+		const ctx = injectSelectRootContext();
+		const original = ctx.onOptionRemove;
+		ctx.onOptionRemove = (option) => {
+			if (!ctx.open.value) return;
+			original(option);
+		};
+		onBeforeUnmount(() => {
+			ctx.onOptionRemove = original;
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+//#endregion
+export { _sfc_main };
+
+//# sourceMappingURL=selectRootPatch.js.map

package/dist/select/selectRootPatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectRootPatch.js","names":[],"sources":["../../src/select/SelectRootPatch.vue"],"sourcesContent":["<!-- Фиксит мерцание SelectValue при закрытии  -->\n<!-- TODO удалить после фикса https://github.com/unovue/reka-ui/issues/2160 -->\n<template>\n    <slot/>\n</template>\n\n<script setup lang=\"ts\">\nimport { injectSelectRootContext } from 'reka-ui'\nimport { onBeforeUnmount } from 'vue'\n\nconst ctx = injectSelectRootContext()\nconst original = ctx.onOptionRemove\n\nctx.onOptionRemove = (option) => {\n    if (!ctx.open.value) {\n        return\n    }\n    original(option)\n}\n\nonBeforeUnmount(() => {\n    ctx.onOptionRemove = original\n})\n</script>\n"],"mappings":";;;;;;EAUA,MAAM,MAAM,wBAAwB;EACpC,MAAM,WAAW,IAAI;EAErB,IAAI,kBAAkB,WAAW;GAC7B,IAAI,CAAC,IAAI,KAAK,OACV;GAEJ,SAAS,MAAM;EACnB;EAEA,sBAAsB;GAClB,IAAI,iBAAiB;EACzB,CAAC;;UAnBG,WAAO,KAAA,QAAA,SAAA"}

package/dist/select/selectScrollDownButton.js

@@ -0,0 +1,33 @@
+import { clsx } from "../clsx.js";
+import { createBlock, createElementVNode, defineComponent, mergeProps, openBlock, unref, withCtx } from "vue";
+import { SelectScrollDownButton, useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+//#region src/select/SelectScrollDownButton.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "SelectScrollDownButton",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const forwardedProps = useForwardProps(reactiveOmit(props, "class"));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SelectScrollDownButton), mergeProps(unref(forwardedProps), { class: unref(clsx)("arvue-select-scroll-button", props.class) }), {
+				default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("i", { class: "fas fa-chevron-down" }, null, -1)])]),
+				_: 1
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main };
+
+//# sourceMappingURL=selectScrollDownButton.js.map

package/dist/select/selectScrollDownButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectScrollDownButton.js","names":[],"sources":["../../src/select/SelectScrollDownButton.vue"],"sourcesContent":["<style>\n@import './select-scroll-button.css';\n</style>\n\n<template>\n    <SelectScrollDownButton\n        v-bind=\"forwardedProps\"\n        :class=\"clsx('arvue-select-scroll-button', props.class)\"\n    >\n        <i class=\"fas fa-chevron-down\"/>\n    </SelectScrollDownButton>\n</template>\n\n<script lang=\"ts\">\nimport type { SelectScrollDownButtonProps as RekaSelectScrollDownButtonProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport interface SelectScrollDownButtonProps extends RekaSelectScrollDownButtonProps {\n    class?: HTMLAttributes['class']\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { reactiveOmit } from '@vueuse/core'\nimport { clsx } from 'clsx'\nimport { SelectScrollDownButton, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<SelectScrollDownButtonProps>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EA2BA,MAAM,QAAQ;EAId,MAAM,iBAAiB,gBAFA,aAAa,OAAO,OAEJ,CAAc;;uBA1BjD,YAKyB,MAAA,sBAAA,GALzB,WACY,MAIa,cAAA,GAJC,EACrB,OAAO,MAAA,IAAA,EAAI,8BAA+B,MAAM,KAAK,EAAA,CAAA,GAAA;2BAEtB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAhC,mBAAgC,KAAA,EAA7B,OAAM,sBAAqB,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA"}

package/dist/select/selectScrollUpButton.js

@@ -0,0 +1,33 @@
+import { clsx } from "../clsx.js";
+import { createBlock, createElementVNode, defineComponent, mergeProps, openBlock, unref, withCtx } from "vue";
+import { SelectScrollUpButton, useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+//#region src/select/SelectScrollUpButton.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "SelectScrollUpButton",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const forwardedProps = useForwardProps(reactiveOmit(props, "class"));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SelectScrollUpButton), mergeProps(unref(forwardedProps), { class: unref(clsx)("arvue-select-scroll-button", props.class) }), {
+				default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("i", { class: "fas fa-chevron-up" }, null, -1)])]),
+				_: 1
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main };
+
+//# sourceMappingURL=selectScrollUpButton.js.map

package/dist/select/selectScrollUpButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectScrollUpButton.js","names":[],"sources":["../../src/select/SelectScrollUpButton.vue"],"sourcesContent":["<style>\n@import './select-scroll-button.css';\n</style>\n\n<template>\n    <SelectScrollUpButton\n        v-bind=\"forwardedProps\"\n        :class=\"clsx('arvue-select-scroll-button', props.class)\"\n    >\n        <i class=\"fas fa-chevron-up\"/>\n    </SelectScrollUpButton>\n</template>\n\n<script lang=\"ts\">\nimport type { SelectScrollUpButtonProps as RekaSelectScrollUpButtonProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport interface SelectScrollUpButtonProps extends RekaSelectScrollUpButtonProps {\n    class?: HTMLAttributes['class']\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { reactiveOmit } from '@vueuse/core'\nimport { clsx } from 'clsx'\nimport { SelectScrollUpButton, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<SelectScrollUpButtonProps>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EA2BA,MAAM,QAAQ;EAId,MAAM,iBAAiB,gBAFA,aAAa,OAAO,OAEJ,CAAc;;uBA1BjD,YAKuB,MAAA,oBAAA,GALvB,WACY,MAIW,cAAA,GAJG,EACrB,OAAO,MAAA,IAAA,EAAI,8BAA+B,MAAM,KAAK,EAAA,CAAA,GAAA;2BAExB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAA9B,mBAA8B,KAAA,EAA3B,OAAM,oBAAmB,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA"}

package/dist/select/selectSeparator.js

@@ -0,0 +1,30 @@
+import { clsx } from "../clsx.js";
+import { createBlock, defineComponent, mergeProps, openBlock, unref } from "vue";
+import { SelectSeparator } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+//#region src/select/SelectSeparator.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "SelectSeparator",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const delegatedProps = reactiveOmit(props, "class");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SelectSeparator), mergeProps(unref(delegatedProps), { class: unref(clsx)("arvue-select-separator", props.class) }), null, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main };
+
+//# sourceMappingURL=selectSeparator.js.map

package/dist/select/selectSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectSeparator.js","names":[],"sources":["../../src/select/SelectSeparator.vue"],"sourcesContent":["<style>\n@import './select-separator.css';\n</style>\n\n<template>\n    <SelectSeparator\n        v-bind=\"delegatedProps\"\n        :class=\"clsx('arvue-select-separator', props.class)\"\n    />\n</template>\n\n<script lang=\"ts\">\nimport type { SelectSeparatorProps as RekaSelectSeparatorProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport interface SelectSeparatorProps extends RekaSelectSeparatorProps {\n    class?: HTMLAttributes['class']\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { reactiveOmit } from '@vueuse/core'\nimport { clsx } from 'clsx'\nimport { SelectSeparator } from 'reka-ui'\n\nconst props = defineProps<SelectSeparatorProps>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAyBA,MAAM,QAAQ;EAEd,MAAM,iBAAiB,aAAa,OAAO,OAAO;;uBAtB9C,YAGE,MAAA,eAAA,GAHF,WACY,MAEV,cAAA,GAFwB,EACrB,OAAO,MAAA,IAAA,EAAI,0BAA2B,MAAM,KAAK,EAAA,CAAA,GAAA,MAAA,IAAA,CAAA,OAAA,CAAA"}

package/dist/select/selectTrigger.js

@@ -0,0 +1,41 @@
+import { clsx } from "../clsx.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+//#region src/select/SelectTrigger.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "SelectTrigger",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		disabled: { type: Boolean },
+		reference: {},
+		asChild: { type: Boolean },
+		as: { default: "div" }
+	},
+	setup(__props) {
+		const props = __props;
+		const forwardedProps = useForwardProps(reactiveOmit(props, "class"));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SelectTrigger), mergeProps(unref(forwardedProps), {
+				class: unref(clsx)("arvue-select-trigger", props.class),
+				tabindex: __props.disabled ? -1 : 0
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createVNode(unref(SelectIcon), { "as-child": "" }, {
+					default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "arvue-select-trigger-icon" }, [createElementVNode("i", { class: "fas fa-chevron-down" })], -1)])]),
+					_: 1
+				})]),
+				_: 3
+			}, 16, ["class", "tabindex"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main };
+
+//# sourceMappingURL=selectTrigger.js.map

package/dist/select/selectTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectTrigger.js","names":[],"sources":["../../src/select/SelectTrigger.vue"],"sourcesContent":["<style>\n@import './select-trigger.css';\n</style>\n\n<template>\n    <SelectTrigger\n        v-bind=\"forwardedProps\"\n        :class=\"clsx('arvue-select-trigger', props.class)\"\n        :tabindex=\"disabled ? -1 : 0\"\n    >\n        <slot/>\n        <SelectIcon as-child>\n            <span class=\"arvue-select-trigger-icon\">\n                <i class=\"fas fa-chevron-down\"/>\n            </span>\n        </SelectIcon>\n    </SelectTrigger>\n</template>\n\n<script lang=\"ts\">\nimport type { SelectTriggerProps as RekaSelectTriggerProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport interface SelectTriggerProps extends RekaSelectTriggerProps {\n    class?: HTMLAttributes['class']\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { reactiveOmit } from '@vueuse/core'\nimport { clsx } from 'clsx'\nimport { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'\n\nconst props = withDefaults(defineProps<SelectTriggerProps>(), {\n    as: 'div',\n})\n\nconst delegatedProps = reactiveOmit(props, 'class')\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,QAAQ;EAKd,MAAM,iBAAiB,gBADA,aAAa,OAAO,OACJ,CAAc;;uBAjCjD,YAWgB,MAAA,aAAA,GAXhB,WACY,MAUI,cAAA,GAVU;IACrB,OAAO,MAAA,IAAA,EAAI,wBAAyB,MAAM,KAAK;IAC/C,UAAU,QAAA,WAAQ,KAAA;;2BAEZ,CAAP,WAAO,KAAA,QAAA,SAAA,GACP,YAIa,MAAA,UAAA,GAAA,EAJD,YAAA,GAAQ,GAAA;4BAGT,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAFP,mBAEO,QAAA,EAFD,OAAM,4BAA2B,GAAA,CACnC,mBAAgC,KAAA,EAA7B,OAAM,sBAAqB,CAAA,CAAA,GAAA,EAAA,CAAA,EAAA,CAAA"}

package/dist/select/selectValue.js

@@ -0,0 +1,34 @@
+import { clsx } from "../clsx.js";
+import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { SelectValue, useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+//#region src/select/SelectValue.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "SelectValue",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		placeholder: {},
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const forwardedProps = useForwardProps(reactiveOmit(props, "class"));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(SelectValue), mergeProps(unref(forwardedProps), { class: unref(clsx)("arvue-select-value", props.class) }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main };
+
+//# sourceMappingURL=selectValue.js.map

package/dist/select/selectValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectValue.js","names":[],"sources":["../../src/select/SelectValue.vue"],"sourcesContent":["<style>\n@import './select-value.css';\n</style>\n\n<template>\n    <SelectValue\n        v-bind=\"forwardedProps\"\n        :class=\"clsx('arvue-select-value', props.class)\"\n    >\n        <slot/>\n    </SelectValue>\n</template>\n\n<script lang=\"ts\">\nimport type { SelectValueProps as RekaSelectValueProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport interface SelectValueProps extends RekaSelectValueProps {\n    class?: HTMLAttributes['class']\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { reactiveOmit } from '@vueuse/core'\nimport { clsx } from 'clsx'\nimport { SelectValue, useForwardProps } from 'reka-ui'\n\nconst props = defineProps<SelectValueProps>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,QAAQ;EAId,MAAM,iBAAiB,gBAFA,aAAa,OAAO,OAEJ,CAAc;;uBA1BjD,YAKc,MAAA,WAAA,GALd,WACY,MAIE,cAAA,GAJY,EACrB,OAAO,MAAA,IAAA,EAAI,sBAAuB,MAAM,KAAK,EAAA,CAAA,GAAA;2BAEvC,CAAP,WAAO,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/sheet/sheetContent.js

@@ -1,8 +1,8 @@
 import { clsx } from "../clsx.js";
 import { _sfc_main as _sfc_main$1 } from "./sheetOverlay.js";
 import { createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
-import { reactiveOmit } from "@vueuse/core";
 import { useForwardPropsEmits } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
 import { DrawerContent, DrawerPortal } from "vaul-vue";
 //#region src/sheet/SheetContent.vue
 const _hoisted_1 = {

package/dist/sheet/sheetFooter.js

@@ -1,7 +1,7 @@
 import { clsx } from "../clsx.js";
 import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
-import { reactiveOmit } from "@vueuse/core";
 import { Primitive } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
 //#region src/sheet/SheetFooter.vue
 const _sfc_main = /* @__PURE__ */ defineComponent({
 	__name: "SheetFooter",

package/dist/sheet/sheetHeader.js

@@ -1,7 +1,7 @@
 import { clsx } from "../clsx.js";
 import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
-import { reactiveOmit } from "@vueuse/core";
 import { Primitive } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
 //#region src/sheet/SheetHeader.vue
 const _sfc_main = /* @__PURE__ */ defineComponent({
 	__name: "SheetHeader",

package/dist/style.css

@@ -69,6 +69,22 @@
 
 @import './dropdown-menu-sub-trigger.css';
 
+@import './select-content.css';
+
+@import './select-item.css';
+
+@import './select-label.css';
+
+@import './select-scroll-button.css';
+
+@import './select-scroll-button.css';
+
+@import './select-separator.css';
+
+@import './select-trigger.css';
+
+@import './select-value.css';
+
 @import './sheet-content.css';
 
 @import './sheet-description.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arvue-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Articus-Company/arvue-ui.git",

package/src/aspect-ratio/AspectRatio.vue

@@ -0,0 +1,20 @@
+<template>
+    <AspectRatio
+        v-slot="slotProps"
+        v-bind="props"
+    >
+        <slot v-bind="slotProps"/>
+    </AspectRatio>
+</template>
+
+<script lang="ts">
+import type { AspectRatioProps as RekaAspectRatioProps } from 'reka-ui'
+
+export interface AspectRatioProps extends RekaAspectRatioProps {}
+</script>
+
+<script setup lang="ts">
+import { AspectRatio } from 'reka-ui'
+
+const props = defineProps<AspectRatioProps>()
+</script>

package/src/aspect-ratio/index.ts

@@ -0,0 +1,4 @@
+export {
+    default as AspectRatio,
+    type AspectRatioProps,
+} from './AspectRatio.vue'

package/src/autocomplete/AutocompleteItem.vue

@@ -22,11 +22,14 @@ export interface AutocompleteItemEmits extends ComboboxItemEmits {}
 </script>
 
 <script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
 import { clsx } from 'clsx'
 import { AutocompleteItem, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<AutocompleteItemProps>()
 const emits = defineEmits<AutocompleteItemEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

package/src/autocomplete/autocomplete-label.css

@@ -1,6 +1,7 @@
 .arvue-autocomplete-label {
-    padding: .25em .75em;
+    color: var(--text-color-hint-strong);
+    padding: 0.5rem 1rem;
     font-size: .75em;
-    line-height: 1.2em;
-    font-weight: 600;
+    line-height: 1rem;
+    font-weight: bold;
 }

package/src/combobox/ComboboxItem.vue

@@ -25,11 +25,14 @@ export interface ComboboxItemEmits extends RekaComboboxItemEmits {}
 </script>
 
 <script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
 import { clsx } from 'clsx'
 import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<ComboboxItemProps>()
 const emits = defineEmits<ComboboxItemEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits)
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>

package/src/combobox/combobox-label.css

@@ -1,6 +1,7 @@
 .arvue-combobox-label {
-    padding: .25em .75em;
+    color: var(--text-color-hint-strong);
+    padding: 0.5rem 1rem;
     font-size: .75em;
-    line-height: 1.2em;
-    font-weight: 600;
+    line-height: 1rem;
+    font-weight: bold;
 }