orio-ui 1.14.0 → 1.15.0

package/dist/module.json

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

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

@@ -75,8 +75,7 @@ defineProps({
   content: "";
   width: calc(var(--box-size) * 0.3);
   height: calc(var(--box-size) * 0.6);
-  position: relative;
-  bottom: 0.1rem;
+  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

@@ -9,10 +9,20 @@ 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
      */
@@ -22,15 +32,16 @@ export interface ControlProps {
      */
     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;

package/dist/runtime/components/ControlElement.vue

@@ -3,7 +3,9 @@ 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() },
+  label: { type: String, required: false },
   layout: { type: String, required: false, default: "vertical" },
   size: { type: String, required: false, default: "md" }
 });
@@ -12,11 +14,17 @@ const props = defineProps({
 <template>
   <div
     class="control"
-    :class="[appearance, layout, `size-${size}`, { 'has-error': error }]"
+    :class="[appearance, layout, `size-${size}`, { 'has-error': error, group }]"
+    v-bind="group ? { role: 'group', 'aria-labelledby': id } : {}"
   >
-    <label v-if="$attrs.label" class="control-label" :for="id">
-      {{ $attrs.label }}
-    </label>
+    <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 />

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

@@ -9,10 +9,20 @@ 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
      */
@@ -22,15 +32,16 @@ export interface ControlProps {
      */
     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;

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/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.14.0",
+  "version": "1.15.0",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",