ropav 0.0.3 → 0.0.5

package/README.md

@@ -12,13 +12,22 @@ pnpm add ropav vue
 
 ```ts
 import 'ropav/base.css';
-import { Button, Input } from 'ropav';
+import { Button, Card, Field, Input } from 'ropav';
 ```
 
 Deep imports are available for individual components:
 
 ```ts
-import { Button } from 'ropav/button';
+import { Card } from 'ropav/card';
+```
+
+Field wrappers can pass accessible ids and state into form controls through slot
+props:
+
+```vue
+<Field id="email" label="Email" error="Enter a valid email" v-slot="{ controlProps }">
+  <Input v-bind="controlProps" v-model="email" />
+</Field>
 ```
 
 ## Theming and tokens

package/dist/base.css

@@ -6,29 +6,43 @@
   --rp-color-warning: #cc4e00;
   --rp-color-danger: #ce2c31;
   --rp-color-info: #107d98;
+  --rp-color-neutral: #646464;
   --rp-color-text: #202020;
   --rp-color-text-secondary: #646464;
   --rp-color-text-disabled: #8d8d8d;
   --rp-color-text-inverted: #ffffff;
-  --rp-color-background: #ffffff;
-  --rp-color-surface: #ffffff;
+  --rp-color-background: #f9f9f9;
+  --rp-color-surface: #fcfcfc;
   --rp-color-surface-raised: #ffffff;
   --rp-color-surface-muted: #f9f9f9;
   --rp-color-surface-hover: #f0f0f0;
-  --rp-color-button-default-bg: #f9f9f9;
-  --rp-color-button-default-bg-hover: #f0f0f0;
+  --rp-color-button-default-bg: var(--rp-color-surface);
+  --rp-color-button-default-bg-hover: var(--rp-color-surface-hover);
   --rp-color-button-default-bg-active: #e8e8e8;
   --rp-color-surface-inverted: #202020;
   --rp-color-overlay: rgba(17, 17, 17, 0.55);
   --rp-color-border: #d9d9d9;
   --rp-color-border-hover: #bbbbbb;
   --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-border);
+  --rp-color-control-thumb-bg: #ffffff;
+  --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-on-neutral: #ffffff;
   --rp-color-primary-hover: color-mix(in srgb, var(--rp-color-primary) 90%, #111111);
   --rp-color-primary-active: color-mix(in srgb, var(--rp-color-primary) 80%, #111111);
   --rp-color-primary-subtle-bg: #e6f4fe;
@@ -77,6 +91,14 @@
   --rp-color-info-border: #7dcedc;
   --rp-color-info-border-hover: #3db9cf;
   --rp-color-info-fg: #0d3c48;
+  --rp-color-neutral-hover: color-mix(in srgb, var(--rp-color-neutral) 90%, #111111);
+  --rp-color-neutral-active: color-mix(in srgb, var(--rp-color-neutral) 80%, #111111);
+  --rp-color-neutral-subtle-bg: #f0f0f0;
+  --rp-color-neutral-subtle-bg-hover: #e8e8e8;
+  --rp-color-neutral-subtle-bg-active: #e0e0e0;
+  --rp-color-neutral-border: #cecece;
+  --rp-color-neutral-border-hover: #bbbbbb;
+  --rp-color-neutral-fg: #202020;
   --rp-font-size-xs: 0.75rem;
   --rp-font-size-sm: 0.875rem;
   --rp-font-size-base: 1rem;
@@ -104,6 +126,7 @@
   --rp-spacing-10: 2.5rem;
   --rp-spacing-12: 3rem;
   --rp-radius-none: 0;
+  --rp-radius-xs: 0.25rem;
   --rp-radius-sm: 0.375rem;
   --rp-radius-md: 0.75rem;
   --rp-radius-lg: 1rem;
@@ -114,6 +137,7 @@
   --rp-size-control-sm: 32px;
   --rp-size-control-md: 40px;
   --rp-size-control-lg: 48px;
+  --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);
@@ -128,19 +152,29 @@ html.dark {
   --rp-color-text-secondary: #b4b4b4;
   --rp-color-text-disabled: #6e6e6e;
   --rp-color-text-inverted: #202020;
-  --rp-color-background: #111111;
-  --rp-color-surface: #111111;
-  --rp-color-surface-raised: #191919;
-  --rp-color-surface-muted: #191919;
-  --rp-color-surface-hover: #222222;
-  --rp-color-button-default-bg: #191919;
-  --rp-color-button-default-bg-hover: #222222;
-  --rp-color-button-default-bg-active: #2a2a2a;
+  --rp-color-background: #191919;
+  --rp-color-surface: #222222;
+  --rp-color-surface-raised: #2a2a2a;
+  --rp-color-surface-muted: #222222;
+  --rp-color-surface-hover: #2a2a2a;
+  --rp-color-button-default-bg: var(--rp-color-surface);
+  --rp-color-button-default-bg-hover: var(--rp-color-surface-hover);
+  --rp-color-button-default-bg-active: #313131;
   --rp-color-surface-inverted: #f9f9f9;
   --rp-color-overlay: rgba(17, 17, 17, 0.75);
   --rp-color-border: #3a3a3a;
   --rp-color-border-hover: #606060;
   --rp-color-focus-ring: color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
+  --rp-color-control-bg: var(--rp-color-surface);
+  --rp-color-control-readonly-bg: var(--rp-color-surface-muted);
+  --rp-color-control-fg: #eeeeee;
+  --rp-color-control-placeholder: #6e6e6e;
+  --rp-color-control-icon: #b4b4b4;
+  --rp-color-control-border: #3a3a3a;
+  --rp-color-control-border-hover: #606060;
+  --rp-color-control-border-focus: var(--rp-color-primary);
+  --rp-color-control-track-bg: var(--rp-color-border);
+  --rp-color-control-thumb-bg: var(--rp-color-surface-inverted);
   --rp-color-primary-subtle-bg: #0d2847;
   --rp-color-primary-subtle-bg-hover: #003362;
   --rp-color-primary-subtle-bg-active: #004074;
@@ -177,6 +211,12 @@ html.dark {
   --rp-color-info-border: #12677e;
   --rp-color-info-border-hover: #11809c;
   --rp-color-info-fg: #4ccce6;
+  --rp-color-neutral-subtle-bg: #222222;
+  --rp-color-neutral-subtle-bg-hover: #2a2a2a;
+  --rp-color-neutral-subtle-bg-active: #313131;
+  --rp-color-neutral-border: #484848;
+  --rp-color-neutral-border-hover: #606060;
+  --rp-color-neutral-fg: #eeeeee;
   --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);

package/dist/button.css

@@ -158,6 +158,23 @@
   --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
   --_rp-button-fg: var(--_rp-button-accent-fg);
 }
+.rp-button--color-neutral[data-v-b8d57358] {
+  --_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-b8d57358] {
   --_rp-button-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
   --_rp-button-padding-x: var(--rp-spacing-2);
@@ -179,7 +196,7 @@
   --_rp-button-font-size: var(--rp-font-size-lg);
 }
 .rp-button--radius-xs[data-v-b8d57358] {
-  --_rp-button-radius: var(--rp-radius-sm);
+  --_rp-button-radius: var(--rp-radius-xs);
 }
 .rp-button--radius-sm[data-v-b8d57358] {
   --_rp-button-radius: var(--rp-radius-sm);

package/dist/button.js

@@ -1,27 +1,7 @@
 import './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 { child, computed, createComponent, createElementBlock, createElementVNode, createIf, createSlot, defineVaporComponent, markRaw, openBlock, renderEffect, setClass, setInsertionState, setProp, template, unref } from "vue";
-//#region ~icons/lucide/loader-circle
-var _hoisted_1 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("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"
-	}, null, -1)])]);
-}
-var loader_circle_default = markRaw({
-	name: "lucide-loader-circle",
-	render
-});
-//#endregion
+import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, setProp, template, unref } from "vue";
 //#region src/components/button/button.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<span data-v-b8d57358 class=rp-button__left>");
 var t1 = template("<span data-v-b8d57358 class=rp-button__right>");

package/dist/button.js.map

@@ -1 +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 || isLoading || undefined\" :type=\"type\">\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.left && !isLoading\" class=\"rp-button__left\">\n            <slot name=\"left\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-button__right\">\n            <slot name=\"right\" />\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 { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\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);\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || isLoading || undefined\" :type=\"type\">\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.left && !isLoading\" class=\"rp-button__left\">\n            <slot name=\"left\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-button__right\">\n            <slot name=\"right\" />\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 { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\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);\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAMd,MAAM,YAAY,eAAe,MAAM,WAAW,CAAC,MAAM,QAAQ;EAEjE,MAAM,YAAY,eACd,IAAI,aAAa;IACZ,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,CACL;;;;iBArCoB,UAAA,KAAS;gBAAG,YAAU,QAAA,YAAY,UAAA,SAAa,KAAA,CAAS;gBAAG,QAAM,QAAA,IAAI;;;iBACzD,UAAA,aAAS;;IAAE,OAAM;IAAqB,eAAY;;;;iBAC9D,OAAM,QAAA,CAAU,UAAA,aAAS;;;cAC3B,QAAW,MAAA,MAAA,CAAA;;;;;;iBAKT,OAAM,aAAA;;;cACR,SAAY,MAAA,MAAA,CAAA"}
+{"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 || isLoading || undefined\" :type=\"type\">\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.left && !isLoading\" class=\"rp-button__left\">\n            <slot name=\"left\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-button__right\">\n            <slot name=\"right\" />\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 { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\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);\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || isLoading || undefined\" :type=\"type\">\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.left && !isLoading\" class=\"rp-button__left\">\n            <slot name=\"left\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-button__right\">\n            <slot name=\"right\" />\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 { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\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);\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAMd,MAAM,YAAY,eAAe,MAAM,WAAW,CAAC,MAAM,QAAQ;EAEjE,MAAM,YAAY,eACd,IAAI,aAAa;IACZ,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,CACL;;;;iBArCoB,UAAA,KAAS;gBAAG,YAAU,QAAA,YAAY,UAAA,SAAa,KAAA,CAAS;gBAAG,QAAM,QAAA,IAAI;;;iBACzD,UAAA,aAAS;;IAAE,OAAM;IAAqB,eAAY;;;;iBAC9D,OAAM,QAAA,CAAU,UAAA,aAAS;;;cAC3B,QAAW,MAAA,MAAA,CAAA;;;;;;iBAKT,OAAM,aAAA;;;cACR,SAAY,MAAA,MAAA,CAAA"}

package/dist/card.css

@@ -0,0 +1,88 @@
+.rp-card[data-v-c3ae62b7] {
+  --_rp-card-bg: var(--rp-color-surface-raised);
+  --_rp-card-border: var(--rp-color-border);
+  --_rp-card-fg: var(--rp-color-text);
+  --_rp-card-padding: var(--rp-spacing-5);
+  --_rp-card-radius: var(--rp-radius-sm);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  font-family: var(--rp-font-family);
+  color: var(--_rp-card-fg);
+  background-color: var(--_rp-card-bg);
+  border: var(--rp-border-width-thin) solid var(--_rp-card-border);
+  border-radius: var(--_rp-card-radius);
+  transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
+}
+.rp-card--layer-base[data-v-c3ae62b7] {
+  --_rp-card-bg: var(--rp-color-background);
+}
+.rp-card--layer-surface[data-v-c3ae62b7] {
+  --_rp-card-bg: var(--rp-color-surface);
+}
+.rp-card--layer-raised[data-v-c3ae62b7] {
+  --_rp-card-bg: var(--rp-color-surface-raised);
+}
+.rp-card--borderless[data-v-c3ae62b7] {
+  --_rp-card-border: transparent;
+}
+.rp-card--padding-none[data-v-c3ae62b7] {
+  --_rp-card-padding: var(--rp-spacing-0);
+}
+.rp-card--padding-sm[data-v-c3ae62b7] {
+  --_rp-card-padding: var(--rp-spacing-3);
+}
+.rp-card--padding-md[data-v-c3ae62b7] {
+  --_rp-card-padding: var(--rp-spacing-5);
+}
+.rp-card--padding-lg[data-v-c3ae62b7] {
+  --_rp-card-padding: var(--rp-spacing-6);
+}
+.rp-card--radius-none[data-v-c3ae62b7] {
+  --_rp-card-radius: var(--rp-radius-none);
+}
+.rp-card--radius-xs[data-v-c3ae62b7] {
+  --_rp-card-radius: var(--rp-radius-xs);
+}
+.rp-card--radius-sm[data-v-c3ae62b7] {
+  --_rp-card-radius: var(--rp-radius-sm);
+}
+.rp-card--radius-md[data-v-c3ae62b7] {
+  --_rp-card-radius: var(--rp-radius-md);
+}
+.rp-card--radius-lg[data-v-c3ae62b7] {
+  --_rp-card-radius: var(--rp-radius-lg);
+}
+.rp-card--radius-xl[data-v-c3ae62b7] {
+  --_rp-card-radius: var(--rp-radius-xl);
+}
+.rp-card__header[data-v-c3ae62b7], .rp-card__body[data-v-c3ae62b7] {
+  box-sizing: border-box;
+  padding: var(--_rp-card-padding);
+}
+.rp-card__header[data-v-c3ae62b7] {
+  display: grid;
+  gap: var(--rp-spacing-1);
+}
+.rp-card__body[data-v-c3ae62b7] {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--rp-color-text);
+  font-size: var(--rp-font-size-base);
+  line-height: var(--rp-line-height-normal);
+}
+.rp-card__title[data-v-c3ae62b7] {
+  margin: 0;
+  color: var(--rp-color-text);
+  font-size: var(--rp-font-size-lg);
+  font-weight: var(--rp-font-weight-semibold);
+  line-height: var(--rp-line-height-tight);
+}
+.rp-card__description[data-v-c3ae62b7] {
+  margin: 0;
+  color: var(--rp-color-text-secondary);
+  font-size: var(--rp-font-size-sm);
+  line-height: var(--rp-line-height-normal);
+}

package/dist/card.js

@@ -0,0 +1,71 @@
+import './card.css';
+import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, setText, template, toDisplayString, txt } from "vue";
+//#region src/components/card/card.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-c3ae62b7 class=rp-card__title> ");
+var t1 = template("<p data-v-c3ae62b7 class=rp-card__description> ");
+var t2 = template("<div data-v-c3ae62b7 class=rp-card__header>");
+var t3 = template("<div data-v-c3ae62b7 class=rp-card__body>");
+var t4 = template("<div data-v-c3ae62b7>", 1);
+//#endregion
+//#region src/components/card/card.vue
+var card_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpCard",
+	__name: "card",
+	props: {
+		layer: {},
+		padding: {},
+		radius: {},
+		border: {
+			type: Boolean,
+			default: true
+		},
+		title: { default: "" },
+		description: { default: "" }
+	},
+	setup(__props, { slots: $slots }) {
+		const props = __props;
+		const hasTitle = computed(() => Boolean(props.title));
+		const hasDescription = computed(() => Boolean(props.description));
+		const hasHeader = computed(() => Boolean(hasTitle.value || hasDescription.value));
+		const rootClass = computed(() => bem("rp-card", {
+			[`layer-${props.layer}`]: Boolean(props.layer),
+			[`padding-${props.padding}`]: Boolean(props.padding),
+			[`radius-${props.radius}`]: Boolean(props.radius),
+			borderless: !props.border
+		}));
+		const n13 = t4();
+		renderEffect(() => setClass(n13, rootClass.value));
+		setInsertionState(n13, null, 0);
+		createIf(() => hasHeader.value, () => {
+			const n8 = t2();
+			setInsertionState(n8, null, 0);
+			createIf(() => hasTitle.value, () => {
+				const n4 = t0();
+				const x4 = txt(n4);
+				renderEffect(() => setText(x4, toDisplayString(__props.title)));
+				return n4;
+			});
+			setInsertionState(n8, null, 1);
+			createIf(() => hasDescription.value, () => {
+				const n7 = t1();
+				const x7 = txt(n7);
+				renderEffect(() => setText(x7, toDisplayString(__props.description)));
+				return n7;
+			});
+			return n8;
+		});
+		setInsertionState(n13, null, 1);
+		createIf(() => $slots.default, () => {
+			const n12 = t3();
+			setInsertionState(n12, null, 0);
+			createSlot("default", null, null, 1);
+			return n12;
+		});
+		return n13;
+	}
+}), [["__scopeId", "data-v-c3ae62b7"]]);
+//#endregion
+export { card_default as t };
+
+//# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../src/components/card/card.vue","../src/components/card/card.vue"],"sourcesContent":["<template>\n    <div :class=\"rootClass\">\n        <div v-if=\"hasHeader\" class=\"rp-card__header\">\n            <div v-if=\"hasTitle\" class=\"rp-card__title\">\n                {{ title }}\n            </div>\n            <p v-if=\"hasDescription\" class=\"rp-card__description\">\n                {{ description }}\n            </p>\n        </div>\n\n        <div v-if=\"$slots.default\" class=\"rp-card__body\">\n            <slot />\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { CardProps } from './types';\n\ndefineOptions({ name: 'RpCard' });\n\nconst props = withDefaults(defineProps<CardProps>(), {\n    border: true,\n    title: '',\n    description: '',\n});\n\nconst hasTitle = computed(() => Boolean(props.title));\nconst hasDescription = computed(() => Boolean(props.description));\nconst hasHeader = computed(() => Boolean(hasTitle.value || hasDescription.value));\n\nconst rootClass = computed(() =>\n    bem('rp-card', {\n        [`layer-${props.layer}`]: Boolean(props.layer),\n        [`padding-${props.padding}`]: Boolean(props.padding),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n        borderless: !props.border,\n    }),\n);\n</script>\n\n<style src=\"./card.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\">\n        <div v-if=\"hasHeader\" class=\"rp-card__header\">\n            <div v-if=\"hasTitle\" class=\"rp-card__title\">\n                {{ title }}\n            </div>\n            <p v-if=\"hasDescription\" class=\"rp-card__description\">\n                {{ description }}\n            </p>\n        </div>\n\n        <div v-if=\"$slots.default\" class=\"rp-card__body\">\n            <slot />\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { CardProps } from './types';\n\ndefineOptions({ name: 'RpCard' });\n\nconst props = withDefaults(defineProps<CardProps>(), {\n    border: true,\n    title: '',\n    description: '',\n});\n\nconst hasTitle = computed(() => Boolean(props.title));\nconst hasDescription = computed(() => Boolean(props.description));\nconst hasHeader = computed(() => Boolean(hasTitle.value || hasDescription.value));\n\nconst rootClass = computed(() =>\n    bem('rp-card', {\n        [`layer-${props.layer}`]: Boolean(props.layer),\n        [`padding-${props.padding}`]: Boolean(props.padding),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n        borderless: !props.border,\n    }),\n);\n</script>\n\n<style src=\"./card.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,QAAQ;EAMd,MAAM,WAAW,eAAe,QAAQ,MAAM,KAAK,CAAC;EACpD,MAAM,iBAAiB,eAAe,QAAQ,MAAM,WAAW,CAAC;EAChE,MAAM,YAAY,eAAe,QAAQ,SAAS,SAAS,eAAe,KAAK,CAAC;EAEhF,MAAM,YAAY,eACd,IAAI,WAAW;IACV,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;IAC5C,WAAW,MAAM,YAAY,QAAQ,MAAM,OAAO;IAClD,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;GAChD,YAAY,CAAC,MAAM;EACvB,CAAC,CACL;;mCAxCiB,UAAA,KAAS,CAAA;;iBACP,UAAA,aAAS;;;kBACL,SAAA,aAAQ;;;mDACZ,QAAA,KAAK,CAAA,CAAA;;;;kBAEH,eAAA,aAAc;;;mDAChB,QAAA,WAAW,CAAA,CAAA;;;;;;iBAIX,OAAM,eAAA"}

package/dist/checkbox.css

@@ -1,6 +1,6 @@
 .rp-checkbox[data-v-7333dac7] {
-  --_checkbox-color: var(--rp-color-primary);
-  --_checkbox-on-color: var(--rp-color-on-primary);
+  --_checkbox-color: var(--rp-color-control-selected-bg);
+  --_checkbox-on-color: var(--rp-color-control-selected-fg);
   --_checkbox-size: 18px;
   --_checkbox-icon-size: 14px;
   --_checkbox-font-size: var(--rp-font-size-base);
@@ -8,11 +8,18 @@
   --_checkbox-checked-bg: var(--_checkbox-color);
   --_checkbox-checked-border: var(--_checkbox-color);
   --_checkbox-checked-icon: var(--_checkbox-on-color);
+  --_checkbox-invalid-border: var(--rp-color-danger);
+  --_checkbox-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   font-family: var(--rp-font-family);
   user-select: none;
+  vertical-align: top;
+}
+html.dark .rp-checkbox[data-v-7333dac7] {
+  --_checkbox-invalid-border: var(--rp-color-danger-fg);
+  --_checkbox-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
 }
 .rp-checkbox--disabled[data-v-7333dac7] {
   opacity: var(--rp-opacity-disabled);
@@ -45,9 +52,9 @@
   width: var(--_checkbox-size);
   height: var(--_checkbox-size);
   flex-shrink: 0;
-  border: var(--rp-border-width-medium) solid var(--rp-color-border);
+  border: var(--rp-border-width-medium) solid var(--rp-color-control-border);
   border-radius: var(--_checkbox-radius);
-  background-color: var(--rp-color-button-default-bg);
+  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-7333dac7], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-7333dac7] {
@@ -55,7 +62,11 @@
   border-color: var(--_checkbox-checked-border);
 }
 .rp-checkbox--invalid .rp-checkbox__box[data-v-7333dac7] {
-  border-color: var(--rp-color-danger-fg);
+  border-color: var(--_checkbox-invalid-border);
+}
+.rp-checkbox--invalid .rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-7333dac7] {
+  border-color: var(--_checkbox-invalid-border);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_checkbox-invalid-ring);
 }
 .rp-checkbox__icon[data-v-7333dac7] {
   width: var(--_checkbox-icon-size);
@@ -94,8 +105,12 @@
   --_checkbox-color: var(--rp-color-info);
   --_checkbox-on-color: var(--rp-color-on-info);
 }
+.rp-checkbox--color-neutral[data-v-7333dac7] {
+  --_checkbox-color: var(--rp-color-neutral);
+  --_checkbox-on-color: var(--rp-color-on-neutral);
+}
 .rp-checkbox--outline[data-v-7333dac7] {
-  --_checkbox-checked-bg: var(--rp-color-button-default-bg);
+  --_checkbox-checked-bg: var(--rp-color-control-bg);
   --_checkbox-checked-border: var(--_checkbox-color);
   --_checkbox-checked-icon: var(--_checkbox-color);
 }

package/dist/checkbox.js

@@ -1,48 +1,26 @@
 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 { VaporTransition, child, computed, createComponent, createElementBlock, createElementVNode, createIf, createSlot, defineVaporComponent, extend, markRaw, next, on, openBlock, renderEffect, setAttr, setBlockKey, setClass, setInsertionState, setProp, template, unref } from "vue";
+import { VaporTransition, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, markRaw, next, on, renderEffect, setAttr, setBlockKey, setClass, setInsertionState, setProp, template, unref } from "vue";
 //#region ~icons/lucide/check
-var _hoisted_1$1 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render$1(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"stroke-width": "2",
-		d: "M20 6L9 17l-5-5"
-	}, null, -1)])]);
+var t0$2 = 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=\"M20 6L9 17l-5-5\">", 3, 1);
+function render$1(_ctx) {
+	return t0$2();
 }
-var check_default = markRaw({
+var check_default = markRaw(defineVaporComponent({
 	name: "lucide-check",
 	render: render$1
-});
+}));
 //#endregion
 //#region ~icons/lucide/minus
-var _hoisted_1 = {
-	viewBox: "0 0 24 24",
-	width: "1.2em",
-	height: "1.2em"
-};
-function render(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"stroke-width": "2",
-		d: "M5 12h14"
-	}, null, -1)])]);
+var t0$1 = 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$1();
 }
-var minus_default = markRaw({
+var minus_default = markRaw(defineVaporComponent({
 	name: "lucide-minus",
 	render
-});
+}));
 //#endregion
 //#region src/components/checkbox/useCheckbox.ts
 function useCheckbox(props, emitUpdate) {

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../src/components/checkbox/useCheckbox.ts","../src/components/checkbox/checkbox.vue","../src/components/checkbox/checkbox.vue"],"sourcesContent":["import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { CheckboxProps } from './types';\n\nexport function useCheckbox(props: Readonly<CheckboxProps>, emitUpdate: (value: boolean) => void) {\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            [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    );\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            <Transition name=\"rp-checkbox-icon\" mode=\"out-in\">\n                <MinusIcon v-if=\"indeterminate\" key=\"minus\" class=\"rp-checkbox__icon\" />\n                <CheckIcon v-else-if=\"modelValue\" key=\"check\" class=\"rp-checkbox__icon\" />\n            </Transition>\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 from '~icons/lucide/check';\nimport MinusIcon from '~icons/lucide/minus';\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            <Transition name=\"rp-checkbox-icon\" mode=\"out-in\">\n                <MinusIcon v-if=\"indeterminate\" key=\"minus\" class=\"rp-checkbox__icon\" />\n                <CheckIcon v-else-if=\"modelValue\" key=\"check\" class=\"rp-checkbox__icon\" />\n            </Transition>\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 from '~icons/lucide/check';\nimport MinusIcon from '~icons/lucide/minus';\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,SAAgB,YAAY,OAAgC,YAAsC;CAC9F,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,eAAe;EACf,SAAS,MAAM;EACf,eAAe,MAAM;EACrB,UAAU,QAAQ;EAClB,SAAS,QAAQ;GAChB,MAAM,WAAW,KAAK,QAAQ,MAAM,OAAO;GAC3C,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;GAC5C,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;GACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;CACpD,CAAC,CACL;CAEA,SAAS,SAAS,GAAU;EACxB,WAAY,EAAE,OAA4B,OAAO;CACrD;CAEA,OAAO;EACH;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECaA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,aAAa,YAAY,QAAQ,UAAU;GACnE,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;;SAnCY,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;;;;GAIjC,MAAK;GAAmB,MAAK;;yBACpB,QAAA,qBAAa;uDAAc,OAAM,oBAAmB,CAAA;oBAAjC,OAAO;;2BACrB,QAAA,kBAAU;uDAAc,OAAM,oBAAmB,CAAA;oBAAjC,OAAO;;;;;iBAGzC,OAAM,eAAA"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../src/components/checkbox/useCheckbox.ts","../src/components/checkbox/checkbox.vue","../src/components/checkbox/checkbox.vue"],"sourcesContent":["import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { CheckboxProps } from './types';\n\nexport function useCheckbox(props: Readonly<CheckboxProps>, emitUpdate: (value: boolean) => void) {\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            [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    );\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            <Transition name=\"rp-checkbox-icon\" mode=\"out-in\">\n                <MinusIcon v-if=\"indeterminate\" key=\"minus\" class=\"rp-checkbox__icon\" />\n                <CheckIcon v-else-if=\"modelValue\" key=\"check\" class=\"rp-checkbox__icon\" />\n            </Transition>\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 from '~icons/lucide/check';\nimport MinusIcon from '~icons/lucide/minus';\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            <Transition name=\"rp-checkbox-icon\" mode=\"out-in\">\n                <MinusIcon v-if=\"indeterminate\" key=\"minus\" class=\"rp-checkbox__icon\" />\n                <CheckIcon v-else-if=\"modelValue\" key=\"check\" class=\"rp-checkbox__icon\" />\n            </Transition>\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 from '~icons/lucide/check';\nimport MinusIcon from '~icons/lucide/minus';\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":";;;;;;;;;;;;;;;;;;;;;;;;AAKA,SAAgB,YAAY,OAAgC,YAAsC;CAC9F,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,eAAe;EACf,SAAS,MAAM;EACf,eAAe,MAAM;EACrB,UAAU,QAAQ;EAClB,SAAS,QAAQ;GAChB,MAAM,WAAW,KAAK,QAAQ,MAAM,OAAO;GAC3C,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;GAC5C,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;GACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;CACpD,CAAC,CACL;CAEA,SAAS,SAAS,GAAU;EACxB,WAAY,EAAE,OAA4B,OAAO;CACrD;CAEA,OAAO;EACH;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECaA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,aAAa,YAAY,QAAQ,UAAU;GACnE,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;;SAnCY,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;;;;GAIjC,MAAK;GAAmB,MAAK;;yBACpB,QAAA,qBAAa;uDAAc,OAAM,oBAAmB,CAAA;oBAAjC,OAAO;;2BACrB,QAAA,kBAAU;uDAAc,OAAM,oBAAmB,CAAA;oBAAjC,OAAO;;;;;iBAGzC,OAAM,eAAA"}

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

@@ -1,4 +1,4 @@
-export type ButtonColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type ButtonColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonVariant = 'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain';

package/dist/components/card/card.d.ts

@@ -0,0 +1,21 @@
+import { CardProps } 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<CardProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (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/card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Card } from './card';
+export type { CardLayer, CardPadding, CardProps, CardRadius } from './types';

package/dist/components/card/index.js

@@ -0,0 +1,2 @@
+import { t as card_default } from "../../card.js";
+export { card_default as Card };

package/dist/components/card/types.d.ts

@@ -0,0 +1,11 @@
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+export type CardRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type CardLayer = 'base' | 'surface' | 'raised';
+export interface CardProps {
+    layer?: CardLayer;
+    padding?: CardPadding;
+    radius?: CardRadius;
+    border?: boolean;
+    title?: string;
+    description?: string;
+}

package/dist/components/checkbox/types.d.ts

@@ -1,4 +1,4 @@
-export type CheckboxColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type CheckboxColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 export type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type CheckboxRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type CheckboxVariant = 'solid' | 'outline';