orio-ui 1.13.1 → 1.15.0

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.13.1",
+  "version": "1.15.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/Button.vue

@@ -56,13 +56,13 @@ button {
   background-color: var(--color-accent);
   color: var(--color-accent-ink);
   border: 1px solid transparent;
-  border-radius: var(--border-radius-md);
-  padding: 8px 16px;
+  border-radius: var(--control-radius);
+  padding: var(--control-py) var(--control-px);
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--control-gap);
   user-select: none;
 }
 button.icon-only {

package/dist/runtime/components/CheckBox.d.vue.ts

@@ -1,7 +1,8 @@
-type __VLS_Props = {
+export interface CheckBoxProps {
     checkedIcon?: string;
     uncheckedIcon?: string;
-};
+}
+type __VLS_Props = CheckBoxProps;
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };

package/dist/runtime/components/CheckBox.vue

@@ -37,14 +37,14 @@ defineProps({
 
 <style scoped>
 .checkbox {
-  --box-size: 1rem;
+  --box-size: var(--control-icon-size, 1rem);
 }
 .checkbox-label {
   position: relative;
   user-select: none;
   display: inline-flex;
   align-items: center;
-  gap: 0.4rem;
+  gap: var(--control-gap, 0.4rem);
   cursor: pointer;
   color: var(--color-text);
 }
@@ -73,10 +73,9 @@ defineProps({
 }
 .checkbox .checkbox-input:checked + .checkbox-box.defaultChecked::after {
   content: "";
-  width: 0.3rem;
-  height: 0.6rem;
-  position: relative;
-  bottom: 0.1rem;
+  width: calc(var(--box-size) * 0.3);
+  height: calc(var(--box-size) * 0.6);
+  position: absolute;
   border: solid var(--color-accent-ink);
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);

package/dist/runtime/components/CheckBox.vue.d.ts

@@ -1,7 +1,8 @@
-type __VLS_Props = {
+export interface CheckBoxProps {
     checkedIcon?: string;
     uncheckedIcon?: string;
-};
+}
+type __VLS_Props = CheckBoxProps;
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };

package/dist/runtime/components/CheckboxGroup.d.vue.ts

@@ -0,0 +1,35 @@
+import { type ControlProps } from "./ControlElement.vue.js";
+export interface CheckboxOption {
+    label: string;
+    value: unknown;
+}
+export interface CheckboxGroupProps extends Omit<ControlProps, "appearance" | "group" | "id"> {
+    options?: CheckboxOption[];
+}
+type __VLS_Props = CheckboxGroupProps;
+type __VLS_ModelProps = {
+    modelValue?: unknown[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown[]) => any) | undefined;
+}>, {
+    error: string | null;
+    layout: import("./ControlElement.vue.js").ControlLayout;
+    size: import("./ControlElement.vue.js").ControlSize;
+    options: CheckboxOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/CheckboxGroup.vue

@@ -0,0 +1,50 @@
+<script setup>
+import {} from "./ControlElement.vue";
+const props = defineProps({
+  options: { type: Array, required: false, default: () => [] },
+  error: { type: [String, null], required: false, default: null },
+  label: { type: String, required: false },
+  layout: { type: String, required: false, default: "vertical" },
+  size: { type: String, required: false, default: "md" }
+});
+const modelValue = defineModel({ type: Array, ...{ default: () => [] } });
+function isChecked(value) {
+  return modelValue.value.includes(value);
+}
+function toggle(value) {
+  if (isChecked(value)) {
+    modelValue.value = modelValue.value.filter((v) => v !== value);
+  } else {
+    modelValue.value = [...modelValue.value, value];
+  }
+}
+</script>
+
+<template>
+  <orio-control-element group :label :layout :size :error class="group-control">
+    <div class="checkboxes">
+      <slot>
+        <orio-check-box
+          v-for="option in options"
+          :key="String(option.value)"
+          appearance="minimal"
+          :model-value="isChecked(option.value)"
+          @update:model-value="toggle(option.value)"
+        >
+          {{ option.label }}
+        </orio-check-box>
+      </slot>
+    </div>
+  </orio-control-element>
+</template>
+
+<style scoped>
+.checkboxes {
+  display: flex;
+  flex-direction: column;
+}
+
+.group-control.control.horizontal {
+  align-items: flex-start;
+}
+</style>

package/dist/runtime/components/CheckboxGroup.vue.d.ts

@@ -0,0 +1,35 @@
+import { type ControlProps } from "./ControlElement.vue.js";
+export interface CheckboxOption {
+    label: string;
+    value: unknown;
+}
+export interface CheckboxGroupProps extends Omit<ControlProps, "appearance" | "group" | "id"> {
+    options?: CheckboxOption[];
+}
+type __VLS_Props = CheckboxGroupProps;
+type __VLS_ModelProps = {
+    modelValue?: unknown[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown[]) => any) | undefined;
+}>, {
+    error: string | null;
+    layout: import("./ControlElement.vue.js").ControlLayout;
+    size: import("./ControlElement.vue.js").ControlSize;
+    options: CheckboxOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ControlElement.d.vue.ts

@@ -1,4 +1,5 @@
 export type ControlLayout = "vertical" | "horizontal";
+export type ControlSize = "sm" | "md" | "lg" | "xl";
 export interface ControlProps {
     /**
      * Minimal will reset margin and remove border and box shadow from every element inside the slot
@@ -8,26 +9,42 @@ export interface ControlProps {
      * Error message to display below the control
      */
     error?: string | null;
+    /**
+     * Marks this control as a group (adds role="group" and aria-labelledby).
+     * The label renders as a <span> instead of <label>.
+     * Use for groups of related controls (e.g. CheckboxGroup).
+     */
+    group?: boolean;
     /**
      * ID for the control's form element, auto-generated if not provided
      */
     id?: string;
+    /**
+     * Label text for the control (or legend text when group is true)
+     */
+    label?: string;
     /**
      * Label position relative to the control
      */
     layout?: ControlLayout;
+    /**
+     * Size of the control and its inner elements
+     */
+    size?: ControlSize;
 }
-declare var __VLS_1: {
+declare var __VLS_7: {
     id: string;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ControlProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ControlProps> & Readonly<{}>, {
     appearance: "normal" | "minimal";
     error: string | null;
+    group: boolean;
     id: string;
     layout: ControlLayout;
+    size: ControlSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ControlElement.vue

@@ -3,16 +3,28 @@ import { useId } from "vue";
 const props = defineProps({
   appearance: { type: String, required: false, default: "normal" },
   error: { type: [String, null], required: false, default: null },
+  group: { type: Boolean, required: false, default: false },
   id: { type: String, required: false, default: () => useId() },
-  layout: { type: String, required: false, default: "vertical" }
+  label: { type: String, required: false },
+  layout: { type: String, required: false, default: "vertical" },
+  size: { type: String, required: false, default: "md" }
 });
 </script>
 
 <template>
-  <div class="control" :class="[appearance, layout, { 'has-error': error }]">
-    <label v-if="$attrs.label" class="control-label" :for="id">
-      {{ $attrs.label }}
-    </label>
+  <div
+    class="control"
+    :class="[appearance, layout, `size-${size}`, { 'has-error': error, group }]"
+    v-bind="group ? { role: 'group', 'aria-labelledby': id } : {}"
+  >
+    <component
+      :is="group ? 'span' : 'label'"
+      v-if="label"
+      class="control-label"
+      v-bind="group ? { id } : { for: id }"
+    >
+      {{ label }}
+    </component>
     <div class="control-group">
       <div class="slot-wrapper" v-bind="$attrs">
         <slot :id />
@@ -23,6 +35,50 @@ const props = defineProps({
 </template>
 
 <style scoped>
+.control {
+  --control-font-size: var(--font-md);
+  --control-py: 0.5rem;
+  --control-px: 0.75rem;
+  --control-gap: 0.5rem;
+  --control-radius: var(--border-radius-md);
+  --control-icon-size: 1rem;
+  --control-inner-block-start: 1.25rem;
+  --control-inner-block-end: 0.25rem;
+  --control-label-block-start: 0.25rem;
+}
+.control.size-sm {
+  --control-font-size: var(--font-sm);
+  --control-py: 0.25rem;
+  --control-px: 0.5rem;
+  --control-gap: 0.25rem;
+  --control-radius: var(--border-radius-sm);
+  --control-icon-size: 0.75rem;
+  --control-inner-block-start: 1rem;
+  --control-inner-block-end: 0.15rem;
+  --control-label-block-start: 0.2rem;
+}
+.control.size-lg {
+  --control-font-size: var(--font-lg);
+  --control-py: 0.625rem;
+  --control-px: 1rem;
+  --control-gap: 0.5rem;
+  --control-radius: var(--border-radius-md);
+  --control-icon-size: 1.25rem;
+  --control-inner-block-start: 1.75rem;
+  --control-inner-block-end: 0.25rem;
+  --control-label-block-start: 0.25rem;
+}
+.control.size-xl {
+  --control-font-size: var(--font-xl);
+  --control-py: 0.75rem;
+  --control-px: 1.25rem;
+  --control-gap: 0.75rem;
+  --control-radius: var(--border-radius-lg);
+  --control-icon-size: 1.5rem;
+  --control-inner-block-start: 2.25rem;
+  --control-inner-block-end: 0.375rem;
+  --control-label-block-start: 0.25rem;
+}
 .control {
   margin: 0.5rem;
   display: flex;
@@ -30,7 +86,7 @@ const props = defineProps({
   gap: 0.1rem;
 }
 .control .control-label {
-  font-size: var(--font-md);
+  font-size: var(--control-font-size);
   user-select: none;
 }
 .control .control-group {
@@ -38,11 +94,14 @@ const props = defineProps({
 }
 .control .control-error {
   color: var(--color-danger);
-  font-size: var(--font-md);
+  font-size: var(--control-font-size);
+}
+.control .slot-wrapper :deep(*) {
+  font-size: var(--control-font-size);
 }
 .control.has-error .slot-wrapper :deep(*) {
   border-color: var(--color-danger);
-  font-size: var(--font-md);
+  font-size: var(--control-font-size);
 }
 .control.minimal {
   margin: 0;

package/dist/runtime/components/ControlElement.vue.d.ts

@@ -1,4 +1,5 @@
 export type ControlLayout = "vertical" | "horizontal";
+export type ControlSize = "sm" | "md" | "lg" | "xl";
 export interface ControlProps {
     /**
      * Minimal will reset margin and remove border and box shadow from every element inside the slot
@@ -8,26 +9,42 @@ export interface ControlProps {
      * Error message to display below the control
      */
     error?: string | null;
+    /**
+     * Marks this control as a group (adds role="group" and aria-labelledby).
+     * The label renders as a <span> instead of <label>.
+     * Use for groups of related controls (e.g. CheckboxGroup).
+     */
+    group?: boolean;
     /**
      * ID for the control's form element, auto-generated if not provided
      */
     id?: string;
+    /**
+     * Label text for the control (or legend text when group is true)
+     */
+    label?: string;
     /**
      * Label position relative to the control
      */
     layout?: ControlLayout;
+    /**
+     * Size of the control and its inner elements
+     */
+    size?: ControlSize;
 }
-declare var __VLS_1: {
+declare var __VLS_7: {
     id: string;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ControlProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ControlProps> & Readonly<{}>, {
     appearance: "normal" | "minimal";
     error: string | null;
+    group: boolean;
     id: string;
     layout: ControlLayout;
+    size: ControlSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Input.vue

@@ -21,7 +21,7 @@ const modelValue = defineModel({ type: String, ...{ default: "" } });
 <style scoped>
 :deep(.slot-wrapper) {
   border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-md);
+  border-radius: var(--control-radius);
   background-color: var(--color-bg);
   transition: border-color 0.2s ease;
 }
@@ -39,15 +39,15 @@ const modelValue = defineModel({ type: String, ...{ default: "" } });
 :deep(.slot-wrapper) {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0 0.75rem;
+  gap: var(--control-gap);
+  padding: 0 var(--control-px);
 }
 
 input {
   border: 0;
   background: transparent;
   outline: none;
-  font-size: var(--font-md);
+  font-size: var(--control-font-size);
   color: var(--color-text);
 }
 input::placeholder {
@@ -57,7 +57,7 @@ input::placeholder {
 input {
   flex: 1;
   min-width: 0;
-  padding: 0.5rem 0;
+  padding: var(--control-py) 0;
 }
 
 .inner {
@@ -67,11 +67,11 @@ input {
   position: absolute;
   z-index: 1;
   pointer-events: none;
-  left: 0.75rem;
-  top: 0.25rem;
+  left: var(--control-px);
+  top: var(--control-label-block-start);
   color: var(--color-muted);
 }
 .inner input {
-  padding: 1.25rem 0 0.25rem;
+  padding: var(--control-inner-block-start) 0 var(--control-inner-block-end);
 }
 </style>

package/dist/runtime/components/NavButton.vue

@@ -42,17 +42,17 @@ button {
   background-color: transparent;
   color: var(--color-text);
   border: none;
-  border-radius: var(--border-radius-md);
-  padding: 8px 16px;
+  border-radius: var(--control-radius);
+  padding: var(--control-py) var(--control-px);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--control-gap);
   user-select: none;
   transition: color 0.2s ease;
 }
 button.icon-only {
-  padding: 8px;
+  padding: var(--control-py);
   border-radius: 50%;
   aspect-ratio: 1;
   justify-content: center;

package/dist/runtime/components/NumberInput/index.vue

@@ -85,10 +85,10 @@ input[type=number] {
 
 .number-input {
   width: 100%;
-  padding: 0.5rem 0.75rem;
+  padding: var(--control-py) var(--control-px);
   border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  font-size: var(--font-md);
+  border-radius: var(--control-radius);
+  font-size: var(--control-font-size);
   color: var(--color-text);
   background-color: var(--color-bg);
   box-sizing: border-box;
@@ -118,12 +118,12 @@ input[type=number] {
   position: absolute;
   z-index: 1;
   pointer-events: none;
-  left: 0.75rem;
-  top: 0.25rem;
+  left: var(--control-px);
+  top: var(--control-label-block-start);
   color: var(--color-muted);
 }
 .inner .number-input {
-  padding: 1.25rem 0.75rem 0.25rem;
+  padding: var(--control-inner-block-start) var(--control-px) var(--control-inner-block-end);
 }
 
 .controls {

package/dist/runtime/components/RadioButton.d.vue.ts

@@ -0,0 +1,32 @@
+export interface RadioButtonProps {
+    /** The value this radio represents; compared to v-model to determine checked state */
+    value?: unknown;
+    /** HTML name attribute — groups radios together so only one is selected at a time */
+    name?: string;
+    /** Inline label text (alternative to default slot) */
+    label?: string;
+    /** Visually hides the label while keeping it accessible to SR (screen readers) */
+    hideLabel?: boolean;
+}
+type __VLS_Props = RadioButtonProps;
+type __VLS_ModelProps = {
+    modelValue?: unknown;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/RadioButton.vue

@@ -0,0 +1,100 @@
+<script setup>
+const modelValue = defineModel({ type: null });
+defineProps({
+  value: { type: null, required: false },
+  name: { type: String, required: false },
+  label: { type: String, required: false },
+  hideLabel: { type: Boolean, required: false }
+});
+</script>
+
+<template>
+  <orio-control-element class="radio">
+    <label class="radio-label">
+      <input
+        v-model="modelValue"
+        type="radio"
+        :name="name"
+        :value="value"
+        class="radio-input"
+        tabindex="-1"
+      />
+      <span class="radio-box" />
+      <span
+        v-if="label || $slots.default"
+        class="radio-text"
+        :class="{ 'sr-only': hideLabel }"
+      >
+        <slot>{{ label }}</slot>
+      </span>
+    </label>
+  </orio-control-element>
+</template>
+
+<style scoped>
+.radio {
+  --box-size: var(--control-icon-size, 1rem);
+}
+.radio-label {
+  position: relative;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--control-gap, 0.4rem);
+  color: var(--color-text);
+  cursor: pointer;
+}
+.radio-input {
+  position: absolute;
+  inset: 0;
+  width: var(--box-size);
+  height: 1rem;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.radio-box {
+  cursor: pointer;
+  flex-shrink: 0;
+  width: var(--box-size);
+  height: var(--box-size);
+  border: 2px solid var(--color-border);
+  border-radius: var(--border-radius-pill);
+  background-color: var(--color-bg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+.radio .radio-input:checked + .radio-box {
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+.radio .radio-input:checked + .radio-box::after {
+  position: absolute;
+  content: "";
+  width: calc(var(--box-size) * 0.4);
+  height: calc(var(--box-size) * 0.4);
+  border-radius: var(--border-radius-pill);
+  background-color: var(--color-accent-ink);
+}
+.radio-label:hover .radio-box {
+  border-color: var(--color-accent);
+}
+.radio .radio-input:focus-visible + .radio-box {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+</style>

package/dist/runtime/components/RadioButton.vue.d.ts

@@ -0,0 +1,32 @@
+export interface RadioButtonProps {
+    /** The value this radio represents; compared to v-model to determine checked state */
+    value?: unknown;
+    /** HTML name attribute — groups radios together so only one is selected at a time */
+    name?: string;
+    /** Inline label text (alternative to default slot) */
+    label?: string;
+    /** Visually hides the label while keeping it accessible to SR (screen readers) */
+    hideLabel?: boolean;
+}
+type __VLS_Props = RadioButtonProps;
+type __VLS_ModelProps = {
+    modelValue?: unknown;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Selector.vue

@@ -136,8 +136,8 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
   cursor: pointer;
   background: var(--color-bg);
   border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  padding: 0.5rem 0.75rem;
+  border-radius: var(--control-radius);
+  padding: var(--control-py) var(--control-px);
   color: var(--color-text);
   transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
 }
@@ -163,7 +163,7 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
   overflow: auto;
   background: var(--color-bg);
   border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-md);
+  border-radius: var(--control-radius);
   margin-top: 0.25rem;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
@@ -173,7 +173,7 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
   margin: 0;
 }
 .selector-content ul li {
-  padding: 0.5rem 0.75rem;
+  padding: var(--control-py) var(--control-px);
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease;
   color: var(--color-text);

package/dist/runtime/components/SwitchButton.vue

@@ -30,12 +30,12 @@ function toggle() {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
-  border-radius: var(--border-radius-md);
+  gap: var(--control-gap);
+  border-radius: var(--control-radius);
   background-color: var(--color-surface);
   color: var(--color-muted);
   border: 1px solid var(--color-border);
-  padding: 8px 16px;
+  padding: var(--control-py) var(--control-px);
   cursor: pointer;
   user-select: none;
   transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

package/dist/runtime/components/Textarea.vue

@@ -23,12 +23,12 @@ defineProps({
   align-items: flex-start;
 }
 .control.horizontal :deep(.control-label) {
-  padding-top: 0.5rem;
+  padding-top: var(--control-py);
 }
 
 :deep(.slot-wrapper) {
   border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-md);
+  border-radius: var(--control-radius);
   background-color: var(--color-bg);
   transition: border-color 0.2s ease;
 }
@@ -48,7 +48,7 @@ textarea {
   border: 0;
   background: transparent;
   outline: none;
-  font-size: var(--font-md);
+  font-size: var(--control-font-size);
   color: var(--color-text);
 }
 textarea::placeholder {
@@ -57,7 +57,7 @@ textarea::placeholder {
 }
 textarea {
   width: 100%;
-  padding: 0.5rem 0.75rem;
+  padding: var(--control-py) var(--control-px);
   resize: vertical;
 }
 
@@ -68,11 +68,11 @@ textarea {
   position: absolute;
   z-index: 1;
   pointer-events: none;
-  left: 0.75rem;
-  top: 0.25rem;
+  left: var(--control-px);
+  top: var(--control-label-block-start);
   color: var(--color-muted);
 }
 .inner textarea {
-  padding: 1.25rem 0.75rem 0.25rem;
+  padding: var(--control-inner-block-start) var(--control-px) var(--control-inner-block-end);
 }
 </style>

package/dist/runtime/index.d.ts

@@ -7,6 +7,8 @@ export { default as NumberInputVertical } from "./components/NumberInput/Vertica
 export { default as NumberInputHorizontal } from "./components/NumberInput/Horizontal.vue.js";
 export { default as Textarea } from "./components/Textarea.vue.js";
 export { default as CheckBox } from "./components/CheckBox.vue.js";
+export { default as CheckboxGroup, type CheckboxOption, type CheckboxGroupProps, } from "./components/CheckboxGroup.vue.js";
+export { default as RadioButton, type RadioButtonProps, } from "./components/RadioButton.vue.js";
 export { default as SwitchButton } from "./components/SwitchButton.vue.js";
 export { default as DatePicker } from "./components/DatePicker.vue.js";
 export { default as DateRangePicker } from "./components/DateRangePicker.vue.js";

package/dist/runtime/index.js

@@ -7,6 +7,12 @@ export { default as NumberInputVertical } from "./components/NumberInput/Vertica
 export { default as NumberInputHorizontal } from "./components/NumberInput/Horizontal.vue";
 export { default as Textarea } from "./components/Textarea.vue";
 export { default as CheckBox } from "./components/CheckBox.vue";
+export {
+  default as CheckboxGroup
+} from "./components/CheckboxGroup.vue";
+export {
+  default as RadioButton
+} from "./components/RadioButton.vue";
 export { default as SwitchButton } from "./components/SwitchButton.vue";
 export { default as DatePicker } from "./components/DatePicker.vue";
 export { default as DateRangePicker } from "./components/DateRangePicker.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "1.13.1",
+  "version": "1.15.0",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",