ropav 0.0.2

package/README.md

@@ -0,0 +1,31 @@
+# Ropav
+
+Experimental UI component library for Vue Vapor.
+
+## Install
+
+```bash
+pnpm add ropav vue
+```
+
+## Usage
+
+```ts
+import 'ropav/base.css'
+import { Button, Input } from 'ropav'
+```
+
+Deep imports are available for individual components:
+
+```ts
+import { Button } from 'ropav/button'
+```
+
+## Development
+
+```bash
+pnpm install
+pnpm dev
+pnpm test
+pnpm build
+```

package/dist/_plugin-vue_export-helper.js

@@ -0,0 +1,18 @@
+//#region src/utils/bem.ts
+function bem(block, ...modifiers) {
+	const classes = [block];
+	for (const mod of modifiers) if (typeof mod === "string") classes.push(`${block}--${mod}`);
+	else for (const [key, val] of Object.entries(mod)) if (val) classes.push(`${block}--${key}`);
+	return classes;
+}
+//#endregion
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+export { bem as n, _plugin_vue_export_helper_default as t };
+
+//# sourceMappingURL=_plugin-vue_export-helper.js.map

package/dist/_plugin-vue_export-helper.js.map

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

package/dist/base.css

@@ -0,0 +1,147 @@
+:root {
+  --rp-font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+  --rp-color-primary: #2563eb;
+  --rp-color-secondary: #4f46e5;
+  --rp-color-success: #15803d;
+  --rp-color-warning: #b45309;
+  --rp-color-danger: #dc2626;
+  --rp-color-info: #0e7490;
+  --rp-color-white: #ffffff;
+  --rp-color-black: #09090b;
+  --rp-color-gray-50: #fafafa;
+  --rp-color-gray-100: #f4f4f5;
+  --rp-color-gray-200: #e4e4e7;
+  --rp-color-gray-300: #d4d4d8;
+  --rp-color-gray-400: #a1a1aa;
+  --rp-color-gray-500: #71717a;
+  --rp-color-gray-600: #52525b;
+  --rp-color-gray-700: #3f3f46;
+  --rp-color-gray-800: #27272a;
+  --rp-color-gray-900: #18181b;
+  --rp-color-text: #18181b;
+  --rp-color-text-secondary: #52525b;
+  --rp-color-text-disabled: #71717a;
+  --rp-color-text-inverted: var(--rp-color-white);
+  --rp-color-background: #ffffff;
+  --rp-color-surface: var(--rp-color-white);
+  --rp-color-surface-raised: var(--rp-color-white);
+  --rp-color-surface-muted: var(--rp-color-gray-50);
+  --rp-color-surface-hover: var(--rp-color-gray-100);
+  --rp-color-surface-inverted: var(--rp-color-gray-900);
+  --rp-color-overlay: rgba(3, 7, 18, 0.55);
+  --rp-color-border: #e4e4e7;
+  --rp-color-border-hover: #a1a1aa;
+  --rp-color-focus-ring: color-mix(in srgb, var(--rp-color-primary) 32%, transparent);
+  --rp-color-control-bg: var(--rp-color-surface);
+  --rp-color-control-readonly-bg: var(--rp-color-surface-muted);
+  --rp-color-control-fg: var(--rp-color-text);
+  --rp-color-control-placeholder: var(--rp-color-text-secondary);
+  --rp-color-control-icon: var(--rp-color-text-secondary);
+  --rp-color-control-border: var(--rp-color-border);
+  --rp-color-control-border-hover: var(--rp-color-border-hover);
+  --rp-color-control-border-focus: var(--rp-color-primary);
+  --rp-color-control-track-bg: var(--rp-color-gray-300);
+  --rp-color-control-thumb-bg: var(--rp-color-white);
+  --rp-color-control-selected-bg: var(--rp-color-primary);
+  --rp-color-control-selected-fg: var(--rp-color-on-primary);
+  --rp-color-on-primary: #ffffff;
+  --rp-color-on-secondary: #ffffff;
+  --rp-color-on-success: #ffffff;
+  --rp-color-on-warning: #ffffff;
+  --rp-color-on-danger: #ffffff;
+  --rp-color-on-info: #ffffff;
+  --rp-color-primary-fg: var(--rp-color-primary);
+  --rp-color-secondary-fg: var(--rp-color-secondary);
+  --rp-color-success-fg: var(--rp-color-success);
+  --rp-color-warning-fg: var(--rp-color-warning);
+  --rp-color-danger-fg: var(--rp-color-danger);
+  --rp-color-info-fg: var(--rp-color-info);
+  --rp-font-size-xs: 0.75rem;
+  --rp-font-size-sm: 0.875rem;
+  --rp-font-size-base: 1rem;
+  --rp-font-size-lg: 1.125rem;
+  --rp-font-size-xl: 1.25rem;
+  --rp-font-size-2xl: 1.5rem;
+  --rp-font-size-3xl: 1.875rem;
+  --rp-font-weight-normal: 400;
+  --rp-font-weight-medium: 500;
+  --rp-font-weight-semibold: 600;
+  --rp-font-weight-bold: 700;
+  --rp-line-height-none: 1;
+  --rp-line-height-tight: 1.25;
+  --rp-line-height-normal: 1.4;
+  --rp-line-height-relaxed: 1.5;
+  --rp-line-height-loose: 1.6;
+  --rp-spacing-0: 0;
+  --rp-spacing-1: 0.25rem;
+  --rp-spacing-2: 0.5rem;
+  --rp-spacing-3: 0.75rem;
+  --rp-spacing-4: 1rem;
+  --rp-spacing-5: 1.25rem;
+  --rp-spacing-6: 1.5rem;
+  --rp-spacing-8: 2rem;
+  --rp-spacing-10: 2.5rem;
+  --rp-spacing-12: 3rem;
+  --rp-radius-none: 0;
+  --rp-radius-sm: 0.125rem;
+  --rp-radius-base: 0.25rem;
+  --rp-radius-md: 0.375rem;
+  --rp-radius-lg: 0.5rem;
+  --rp-radius-xl: 0.75rem;
+  --rp-radius-2xl: 1rem;
+  --rp-radius-full: 9999px;
+  --rp-border-width-thin: 1px;
+  --rp-border-width-medium: 2px;
+  --rp-size-control-sm: 32px;
+  --rp-size-control-md: 40px;
+  --rp-size-control-lg: 48px;
+  --rp-component-menu-min-width: 180px;
+  --rp-component-menu-max-height: 240px;
+  --rp-z-index-dropdown: 100;
+  --rp-z-index-tooltip: 1000;
+  --rp-opacity-disabled: 0.5;
+  --rp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --rp-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --rp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --rp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --rp-transition-fast: 150ms ease;
+  --rp-transition-base: 200ms ease;
+  --rp-transition-slow: 300ms ease;
+}
+
+html.dark {
+  --rp-color-text: var(--rp-color-gray-50);
+  --rp-color-text-secondary: var(--rp-color-gray-400);
+  --rp-color-text-disabled: var(--rp-color-gray-600);
+  --rp-color-text-inverted: var(--rp-color-gray-900);
+  --rp-color-background: var(--rp-color-gray-900);
+  --rp-color-surface: var(--rp-color-gray-900);
+  --rp-color-surface-raised: var(--rp-color-gray-800);
+  --rp-color-surface-muted: var(--rp-color-gray-800);
+  --rp-color-surface-hover: var(--rp-color-gray-700);
+  --rp-color-surface-inverted: var(--rp-color-gray-100);
+  --rp-color-overlay: rgba(3, 7, 18, 0.75);
+  --rp-color-border: var(--rp-color-gray-700);
+  --rp-color-border-hover: var(--rp-color-gray-600);
+  --rp-color-focus-ring: color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
+  --rp-color-control-bg: var(--rp-color-gray-900);
+  --rp-color-control-readonly-bg: var(--rp-color-gray-800);
+  --rp-color-control-fg: var(--rp-color-gray-50);
+  --rp-color-control-placeholder: var(--rp-color-gray-500);
+  --rp-color-control-icon: var(--rp-color-gray-400);
+  --rp-color-control-border: var(--rp-color-gray-700);
+  --rp-color-control-border-hover: var(--rp-color-gray-600);
+  --rp-color-control-border-focus: var(--rp-color-primary);
+  --rp-color-control-track-bg: var(--rp-color-gray-700);
+  --rp-color-control-thumb-bg: var(--rp-color-gray-50);
+  --rp-color-primary-fg: color-mix(in srgb, var(--rp-color-primary) 65%, var(--rp-color-white));
+  --rp-color-secondary-fg: color-mix(in srgb, var(--rp-color-secondary) 65%, var(--rp-color-white));
+  --rp-color-success-fg: color-mix(in srgb, var(--rp-color-success) 65%, var(--rp-color-white));
+  --rp-color-warning-fg: color-mix(in srgb, var(--rp-color-warning) 65%, var(--rp-color-white));
+  --rp-color-danger-fg: color-mix(in srgb, var(--rp-color-danger) 65%, var(--rp-color-white));
+  --rp-color-info-fg: color-mix(in srgb, var(--rp-color-info) 65%, var(--rp-color-white));
+  --rp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --rp-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
+  --rp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --rp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+}

package/dist/button.css

@@ -0,0 +1,66 @@
+.rp-button[data-v-c2d151de] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rp-spacing-2);
+  font-family: var(--rp-font-family);
+  font-weight: var(--rp-font-weight-normal);
+  line-height: var(--rp-line-height-none);
+  border: var(--rp-border-width-thin) solid transparent;
+  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);
+  white-space: nowrap;
+  user-select: none;
+  height: var(--rp-size-control-md);
+  padding: 0 var(--rp-spacing-4);
+  font-size: var(--rp-font-size-base);
+  border-radius: var(--rp-radius-lg);
+}
+.rp-button--solid[data-v-c2d151de] {
+  background-color: var(--rp-color-primary);
+  color: var(--rp-color-on-primary);
+}
+.rp-button--solid[data-v-c2d151de]:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--rp-color-primary) 90%, var(--rp-color-black));
+}
+.rp-button--solid[data-v-c2d151de]:active:not(:disabled) {
+  background-color: color-mix(in srgb, var(--rp-color-primary) 80%, var(--rp-color-black));
+}
+.rp-button--ghost[data-v-c2d151de] {
+  background-color: transparent;
+  color: var(--rp-color-primary-fg);
+}
+.rp-button--ghost[data-v-c2d151de]:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--rp-color-primary) 14%, transparent);
+}
+.rp-button--ghost[data-v-c2d151de]:active:not(:disabled) {
+  background-color: color-mix(in srgb, var(--rp-color-primary) 18%, transparent);
+}
+.rp-button[data-v-c2d151de]:disabled {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+}
+.rp-button[data-v-c2d151de]: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__prefix[data-v-c2d151de], .rp-button__suffix[data-v-c2d151de] {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.rp-button__spinner[data-v-c2d151de] {
+  width: 1em;
+  height: 1em;
+  border: var(--rp-border-width-medium) solid currentColor;
+  border-right-color: transparent;
+  border-radius: var(--rp-radius-full);
+  flex-shrink: 0;
+  animation: rp-button-spin-c2d151de 700ms linear infinite;
+}
+@keyframes rp-button-spin-c2d151de {
+to {
+    transform: rotate(360deg);
+}
+}

package/dist/button.js

@@ -0,0 +1,62 @@
+import './button.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, template } from "vue";
+//#region src/components/button/button.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span data-v-c2d151de class=rp-button__spinner aria-hidden=true>", 2);
+var t1 = template("<span data-v-c2d151de class=rp-button__prefix>");
+var t2 = template("<span data-v-c2d151de class=rp-button__suffix>");
+var t3 = template("<button data-v-c2d151de><span data-v-c2d151de class=rp-button__label></span>", 1);
+//#endregion
+//#region src/components/button/button.vue
+var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpButton",
+	__name: "button",
+	props: {
+		variant: { default: "solid" },
+		type: { default: "button" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props, { slots: $slots }) {
+		const props = __props;
+		const rootClass = computed(() => bem("rp-button", props.variant));
+		const n13 = t3();
+		const n8 = child(n13, 2);
+		renderEffect(() => {
+			setClass(n13, rootClass.value);
+			setProp(n13, "disabled", __props.disabled || __props.loading || void 0);
+			setProp(n13, "type", __props.type);
+		});
+		setInsertionState(n13, 0, 0);
+		createIf(() => __props.loading, () => {
+			return t0();
+		}, null, 33);
+		setInsertionState(n13, 0, 1);
+		createIf(() => $slots.prefix && !__props.loading, () => {
+			const n6 = t1();
+			setInsertionState(n6, null, 0);
+			createSlot("prefix", null, null, 1);
+			return n6;
+		});
+		setInsertionState(n8, null, 0);
+		createSlot("default", null, null, 1);
+		setInsertionState(n13, null, 3);
+		createIf(() => $slots.suffix, () => {
+			const n12 = t2();
+			setInsertionState(n12, null, 0);
+			createSlot("suffix", null, null, 1);
+			return n12;
+		});
+		return n13;
+	}
+}), [["__scopeId", "data-v-c2d151de"]]);
+//#endregion
+export { button_default as t };
+
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":[],"sources":["../src/components/button/button.vue","../src/components/button/button.vue"],"sourcesContent":["<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || loading || undefined\" :type=\"type\">\n        <span v-if=\"loading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.prefix && !loading\" class=\"rp-button__prefix\">\n            <slot name=\"prefix\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.suffix\" class=\"rp-button__suffix\">\n            <slot name=\"suffix\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    variant: 'solid',\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst rootClass = computed(() => bem('rp-button', props.variant));\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || loading || undefined\" :type=\"type\">\n        <span v-if=\"loading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.prefix && !loading\" class=\"rp-button__prefix\">\n            <slot name=\"prefix\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.suffix\" class=\"rp-button__suffix\">\n            <slot name=\"suffix\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    variant: 'solid',\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst rootClass = computed(() => bem('rp-button', props.variant));\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,MAAM,QAAQ;EAOd,MAAM,YAAY,eAAe,IAAI,aAAa,MAAM,OAAO,CAAC;;;;iBA5B5C,UAAA,KAAS;gBAAG,YAAU,QAAA,YAAY,QAAA,WAAW,KAAA,CAAS;gBAAG,QAAM,QAAA,IAAI;;;iBACnE,QAAA,eAAO;;;;iBACP,OAAM,UAAA,CAAY,QAAA,eAAO;;;cAC3B,UAAa,MAAA,MAAA,CAAA;;;;;;iBAKX,OAAM,cAAA;;;cACR,UAAa,MAAA,MAAA,CAAA"}

package/dist/checkbox.css

@@ -0,0 +1,60 @@
+.rp-checkbox[data-v-03521fec] {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  font-family: var(--rp-font-family);
+  user-select: none;
+}
+.rp-checkbox--disabled[data-v-03521fec] {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+}
+.rp-checkbox[data-v-03521fec] {
+  gap: var(--rp-spacing-2);
+  font-size: var(--rp-font-size-base);
+  --_checkbox-size: 18px;
+}
+.rp-checkbox__native[data-v-03521fec] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  pointer-events: none;
+}
+.rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-03521fec] {
+  border-color: var(--rp-color-control-border-focus);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-checkbox__box[data-v-03521fec] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_checkbox-size);
+  height: var(--_checkbox-size);
+  flex-shrink: 0;
+  border: var(--rp-border-width-medium) solid var(--rp-color-control-border);
+  border-radius: var(--rp-radius-base);
+  background-color: var(--rp-color-control-bg);
+  transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
+}
+.rp-checkbox--checked .rp-checkbox__box[data-v-03521fec], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-03521fec] {
+  background-color: var(--rp-color-control-selected-bg);
+  border-color: var(--rp-color-control-selected-bg);
+}
+.rp-checkbox--invalid .rp-checkbox__box[data-v-03521fec] {
+  border-color: var(--rp-color-danger-fg);
+}
+.rp-checkbox__icon[data-v-03521fec] {
+  width: 12px;
+  height: 12px;
+  color: var(--rp-color-control-selected-fg);
+}
+.rp-checkbox__label[data-v-03521fec] {
+  line-height: var(--rp-line-height-normal);
+  color: var(--rp-color-text);
+}

package/dist/checkbox.js

@@ -0,0 +1,132 @@
+import './checkbox.css';
+import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as useControlState } from "./useControlState.js";
+import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, next, on, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";
+//#region src/components/_internal/icons/CheckIcon.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0$2 = template("<svg viewBox=\"0 0 16 16\"fill=none stroke=currentColor stroke-width=2><path d=\"M3.5 8.5L6.5 11.5L12.5 4.5\">", 3, 1);
+//#endregion
+//#region src/components/_internal/icons/CheckIcon.vue
+var CheckIcon_default = /* @__PURE__ */ defineVaporComponent({
+	name: "CheckIcon",
+	__name: "CheckIcon",
+	setup(__props) {
+		return t0$2();
+	}
+});
+//#endregion
+//#region src/components/_internal/icons/MinusIcon.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0$1 = template("<svg viewBox=\"0 0 16 16\"fill=none stroke=currentColor stroke-width=2><path d=\"M4 8h8\">", 3, 1);
+//#endregion
+//#region src/components/_internal/icons/MinusIcon.vue
+var MinusIcon_default = /* @__PURE__ */ defineVaporComponent({
+	name: "MinusIcon",
+	__name: "MinusIcon",
+	setup(__props) {
+		return t0$1();
+	}
+});
+//#endregion
+//#region src/components/checkbox/useCheckbox.ts
+function useCheckbox(props, emitUpdate) {
+	const control = useControlState(props);
+	const rootClass = computed(() => bem("rp-checkbox", {
+		checked: props.modelValue,
+		indeterminate: props.indeterminate,
+		disabled: control.disabled,
+		invalid: control.invalid
+	}));
+	function onChange(e) {
+		emitUpdate(e.target.checked);
+	}
+	return {
+		control,
+		rootClass,
+		onChange
+	};
+}
+//#endregion
+//#region src/components/checkbox/checkbox.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span data-v-03521fec class=rp-checkbox__label>");
+var t1 = template("<label data-v-03521fec><input data-v-03521fec type=checkbox class=rp-checkbox__native><span data-v-03521fec class=rp-checkbox__box></span>", 1);
+//#endregion
+//#region src/components/checkbox/checkbox.vue
+var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpCheckbox",
+	__name: "checkbox",
+	props: {
+		id: {},
+		name: {},
+		modelValue: { type: Boolean },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		indeterminate: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit, slots: $slots }) {
+		const props = __props;
+		const emit = __emit;
+		const { control, rootClass, onChange } = useCheckbox(props, (value) => {
+			emit("update:modelValue", value);
+		});
+		const n11 = t1();
+		const n0 = child(n11);
+		const n6 = next(n0, 1);
+		on(n0, "change", (e) => unref(onChange)(e));
+		renderEffect(() => {
+			const _control = unref(control);
+			const _indeterminate = __props.indeterminate;
+			const _modelValue = __props.modelValue;
+			const _control_disabled = _control.disabled;
+			const _control_required = _control.required;
+			setClass(n11, unref(rootClass));
+			setAttr(n11, "data-disabled", _control_disabled || void 0);
+			setAttr(n11, "data-state", _indeterminate ? "indeterminate" : _modelValue ? "checked" : "unchecked");
+			setProp(n0, "id", _control.id);
+			setProp(n0, "name", __props.name);
+			setProp(n0, "checked", _modelValue);
+			setProp(n0, "disabled", _control_disabled || void 0);
+			setProp(n0, "required", _control_required || void 0);
+			setProp(n0, "indeterminate", _indeterminate);
+			setAttr(n0, "aria-checked", _indeterminate ? "mixed" : _modelValue);
+			setAttr(n0, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n0, "aria-labelledby", _control.ariaLabelledby);
+			setAttr(n0, "aria-describedby", _control.ariaDescribedby);
+			setAttr(n0, "aria-invalid", _control.invalid || void 0);
+			setAttr(n0, "aria-required", _control_required || void 0);
+		});
+		setInsertionState(n6, null, 0);
+		createIf(() => __props.indeterminate, () => {
+			return createComponent(unref(MinusIcon_default), { class: "rp-checkbox__icon" });
+		}, () => createIf(() => __props.modelValue, () => {
+			return createComponent(unref(CheckIcon_default), { class: "rp-checkbox__icon" });
+		}), 261);
+		setInsertionState(n11, null, 2);
+		createIf(() => $slots.default, () => {
+			const n10 = t0();
+			setInsertionState(n10, null, 0);
+			createSlot("default", null, null, 1);
+			return n10;
+		});
+		return n11;
+	}
+}), [["__scopeId", "data-v-03521fec"]]);
+//#endregion
+export { checkbox_default as t };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../src/components/_internal/icons/CheckIcon.vue","../src/components/_internal/icons/CheckIcon.vue","../src/components/_internal/icons/MinusIcon.vue","../src/components/_internal/icons/MinusIcon.vue","../src/components/checkbox/useCheckbox.ts","../src/components/checkbox/checkbox.vue","../src/components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M3.5 8.5L6.5 11.5L12.5 4.5\" />\n    </svg>\n</template>\n\n<script lang=\"ts\" setup vapor>\ndefineOptions({ name: 'CheckIcon' });\n</script>\n","<template>\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M3.5 8.5L6.5 11.5L12.5 4.5\" />\n    </svg>\n</template>\n\n<script lang=\"ts\" setup vapor>\ndefineOptions({ name: 'CheckIcon' });\n</script>\n","<template>\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M4 8h8\" />\n    </svg>\n</template>\n\n<script lang=\"ts\" setup vapor>\ndefineOptions({ name: 'MinusIcon' });\n</script>\n","<template>\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M4 8h8\" />\n    </svg>\n</template>\n\n<script lang=\"ts\" setup vapor>\ndefineOptions({ name: 'MinusIcon' });\n</script>\n","import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { CheckboxProps } from './types';\n\nexport function useCheckbox(\n    props: Readonly<CheckboxProps>,\n    emitUpdate: (value: boolean) => void,\n) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-checkbox', {\n            checked: props.modelValue,\n            indeterminate: props.indeterminate,\n            disabled: control.disabled,\n            invalid: control.invalid,\n        }),\n    );\n\n    function onChange(e: Event) {\n        emitUpdate((e.target as HTMLInputElement).checked);\n    }\n\n    return {\n        control,\n        rootClass,\n        onChange,\n    };\n}\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"indeterminate ? 'indeterminate' : modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-checkbox__native\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :indeterminate=\"indeterminate\"\n            :aria-checked=\"indeterminate ? 'mixed' : modelValue\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @change=\"onChange\"\n        />\n        <span class=\"rp-checkbox__box\">\n            <MinusIcon v-if=\"indeterminate\" class=\"rp-checkbox__icon\" />\n            <CheckIcon v-else-if=\"modelValue\" class=\"rp-checkbox__icon\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-checkbox__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { CheckIcon, MinusIcon } from '@/components/_internal/icons';\nimport { useCheckbox } from './useCheckbox';\nimport type { CheckboxProps } from './types';\n\ndefineOptions({ name: 'RpCheckbox' });\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    indeterminate: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useCheckbox(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./checkbox.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"indeterminate ? 'indeterminate' : modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-checkbox__native\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :indeterminate=\"indeterminate\"\n            :aria-checked=\"indeterminate ? 'mixed' : modelValue\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @change=\"onChange\"\n        />\n        <span class=\"rp-checkbox__box\">\n            <MinusIcon v-if=\"indeterminate\" class=\"rp-checkbox__icon\" />\n            <CheckIcon v-else-if=\"modelValue\" class=\"rp-checkbox__icon\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-checkbox__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { CheckIcon, MinusIcon } from '@/components/_internal/icons';\nimport { useCheckbox } from './useCheckbox';\nimport type { CheckboxProps } from './types';\n\ndefineOptions({ name: 'RpCheckbox' });\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    indeterminate: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useCheckbox(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./checkbox.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AIKA,SAAgB,YACZ,OACA,YACF;CACE,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,eAAe;EACf,SAAS,MAAM;EACf,eAAe,MAAM;EACrB,UAAU,QAAQ;EAClB,SAAS,QAAQ;CACrB,CAAC,CACL;CAEA,SAAS,SAAS,GAAU;EACxB,WAAY,EAAE,OAA4B,OAAO;CACrD;CAEA,OAAO;EACH;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECWA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,aAAa,YAAY,QAAQ,UAAU;GACnE,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;;SAhCY,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;;;;iBAnBb,MAAA,SAAA,CAAS;gBAChB,iBAAe,qBAAoB,KAAA,CAAS;gBAC5C,cAAY,iBAAa,kBAAqB,cAAU,YAAA,WAAA;eAGpD,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;eAGV,WAAS,WAAU;eACnB,YAAU,qBAAoB,KAAA,CAAS;eACvC,YAAU,qBAAoB,KAAA,CAAS;eACvC,iBAAe,cAAa;eAC5B,gBAAc,iBAAa,UAAa,WAAU;eAClD,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;iBAI5B,QAAA,qBAAa;sDAAE,OAAM,oBAAmB,CAAA;0BACnC,QAAA,kBAAU;sDAAE,OAAM,oBAAmB,CAAA;;;iBAEnD,OAAM,eAAA"}

package/dist/components/_internal/icons/CheckIcon.d.ts

@@ -0,0 +1,18 @@
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/_internal/icons/ChevronDownIcon.d.ts

@@ -0,0 +1,18 @@
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/_internal/icons/MinusIcon.d.ts

@@ -0,0 +1,18 @@
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/_internal/icons/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CheckIcon } from './CheckIcon';
+export { default as ChevronDownIcon } from './ChevronDownIcon';
+export { default as MinusIcon } from './MinusIcon';

package/dist/components/_internal/optionList.d.ts

@@ -0,0 +1,9 @@
+export interface OptionListItem {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+export type OptionListValue = string | number | null;
+export declare function hasOptionListValue(value: OptionListValue): boolean;
+export declare function getOptionListDisplayLabel<T extends OptionListItem>(options: T[] | undefined, value: OptionListValue): string;
+export declare function getOptionListActiveDescendantId(baseId: string, focusedIndex: number): string | undefined;

package/dist/components/button/button.d.ts

@@ -0,0 +1,25 @@
+import { ButtonProps } from './types';
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<ButtonProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        prefix?: (props: {}) => any;
+    } & {
+        default?: (props: {}) => any;
+    } & {
+        suffix?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './button';
+export type { ButtonProps } from './types';

package/dist/components/button/index.js

@@ -0,0 +1,2 @@
+import { t as button_default } from "../../button.js";
+export { button_default as Button };