orio-ui 1.14.0 → 1.16.0

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.14.0",
+  "version": "1.16.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/composables/useUrlSync.d.ts

@@ -0,0 +1,38 @@
+import { Ref } from "vue";
+/**
+ * Syncs a reactive object's keys to/from URL query params.
+ *
+ * Behaviour:
+ * - **On call (synchronous)**: reads current URL params and pre-populates the
+ *   state so child components see the correct values before they mount.
+ * - **Reactive**: watches the state and updates the URL whenever synced keys
+ *   change (via `router.replace` — no new history entry).
+ *
+ * SSR-safe: initial population uses `route.query` (available on the server),
+ * so the server renders the same HTML as the client hydrates — no mismatches.
+ * Reactive URL writes use `useUrlSearchParams` (client-only, via window).
+ *
+ * Value handling:
+ * - Nested objects  → dot notation    (`filters.category=shirts`)
+ * - Arrays          → bracket notation (`tags[0]=cats&tags[1]=dogs`)
+ * - Combinations    → mixed           (`items[0].name=John`)
+ * - File / Blob     → silently skipped (not serialisable)
+ * - Empty strings   → removed from URL
+ *
+ * @param state  Reactive object to sync
+ * @param keys   Explicit list of top-level keys to sync.
+ *               When omitted, ALL top-level keys currently in the URL are
+ *               used for initial population, and ALL keys in the state are
+ *               watched going forward.
+ *
+ * @example
+ * // Sync specific keys (recommended — avoids accidentally syncing private state)
+ * const properties = ref<Record<string, string | File[]>>({})
+ * useUrlSync(properties, ['variant', 'size', 'product-color'])
+ *
+ * @example
+ * // Sync all — useful when state IS the URL state
+ * const filters = ref({ category: '', sort: 'newest' })
+ * useUrlSync(filters)
+ */
+export declare function useUrlSync(state: Ref<Record<string, unknown>>, keys?: string[]): void;

package/dist/runtime/composables/useUrlSync.js

@@ -0,0 +1,37 @@
+import { useUrlSearchParams } from "@vueuse/core";
+import {
+  flattenParams,
+  unflattenParams,
+  topLevelKeys
+} from "../utils/urlParams.js";
+import { computed, watch } from "vue";
+export function useUrlSync(state, keys) {
+  const routeQuery = useRoute().query;
+  const initKeys = keys ?? topLevelKeys(routeQuery);
+  for (const key of initKeys) {
+    const flat = {};
+    for (const [k, v] of Object.entries(routeQuery)) {
+      if (v !== null && (k === key || k.startsWith(`${key}.`) || k.startsWith(`${key}[`))) {
+        flat[k] = v;
+      }
+    }
+    if (Object.keys(flat).length === 0) continue;
+    const reconstructed = unflattenParams(flat);
+    if (key in reconstructed) state.value[key] = reconstructed[key];
+  }
+  const urlParams = useUrlSearchParams("history");
+  const syncKeys = computed(() => keys ?? Object.keys(state.value));
+  watch(
+    () => syncKeys.value.map((k) => JSON.stringify(flattenParams(state.value[k], k))).join("|"),
+    () => {
+      for (const key of syncKeys.value) {
+        for (const k of Object.keys(urlParams)) {
+          if (k === key || k.startsWith(`${key}.`) || k.startsWith(`${key}[`)) {
+            delete urlParams[k];
+          }
+        }
+        Object.assign(urlParams, flattenParams(state.value[key], key));
+      }
+    }
+  );
+}

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";
@@ -36,3 +38,5 @@ export { usePressAndHold } from "./composables/usePressAndHold.js";
 export { useSound, type SoundOptions } from "./composables/useSound.js";
 export { useValidation, isFilled, isEmail, type ValidationRule, } from "./composables/useValidation.js";
 export { iconRegistry, type IconName } from "./utils/icon-registry.js";
+export { flattenParams, unflattenParams, parsePath, topLevelKeys, } from "./utils/urlParams.js";
+export { useUrlSync } from "./composables/useUrlSync.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";
@@ -44,3 +50,10 @@ export {
   isEmail
 } from "./composables/useValidation.js";
 export { iconRegistry } from "./utils/icon-registry.js";
+export {
+  flattenParams,
+  unflattenParams,
+  parsePath,
+  topLevelKeys
+} from "./utils/urlParams.js";
+export { useUrlSync } from "./composables/useUrlSync.js";

package/dist/runtime/utils/urlParams.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Utilities for serialising/deserialising nested values to/from flat URL query params.
+ *
+ * Encoding conventions:
+ *   Object keys  →  dot notation      e.g.  filters.category=shirts
+ *   Array items  →  bracket notation  e.g.  tags[0]=cats&tags[1]=dogs
+ *   Combined     →                    e.g.  items[0].name=John
+ *
+ * Non-serialisable values (File, Blob, null, undefined) are silently skipped.
+ * Empty strings produce no URL entry.
+ */
+/**
+ * Recursively flattens a value to flat URL-compatible key-value pairs.
+ *
+ * @param value   The value to flatten (any depth)
+ * @param prefix  URL param prefix / key name (e.g. "filters", "items[0]")
+ *
+ * @example
+ * flattenParams({ category: 'shirts', tags: ['a', 'b'] }, 'filters')
+ * // → { 'filters.category': 'shirts', 'filters.tags[0]': 'a', 'filters.tags[1]': 'b' }
+ */
+export declare function flattenParams(value: unknown, prefix: string): Record<string, string>;
+/**
+ * Reconstructs a nested object from flat URL query params.
+ * Handles dot notation (obj.key) and bracket notation (arr[0]), and combinations.
+ *
+ * When a URL param has multiple values (string[]) only the first is used.
+ *
+ * @example
+ * unflattenParams({ 'filters.category': 'shirts', 'tags[0]': 'cats', 'tags[1]': 'dogs' })
+ * // → { filters: { category: 'shirts' }, tags: ['cats', 'dogs'] }
+ */
+export declare function unflattenParams(flat: Record<string, string | string[]>): Record<string, unknown>;
+/**
+ * Parses a flat URL param key into path segments.
+ *
+ * Supports dot notation and bracket notation, including keys with hyphens.
+ *
+ * @example
+ * parsePath('a.b.c')          // ['a', 'b', 'c']
+ * parsePath('product-color')  // ['product-color']
+ * parsePath('items[0].name')  // ['items', 0, 'name']
+ * parsePath('a[0][1].c')      // ['a', 0, 1, 'c']
+ */
+export declare function parsePath(path: string): (string | number)[];
+/**
+ * Extracts the distinct top-level keys from a flat params record.
+ *
+ * @example
+ * topLevelKeys({ 'a': '1', 'b.c': '2', 'd[0]': '3' }) // ['a', 'b', 'd']
+ */
+export declare function topLevelKeys(flat: Record<string, unknown>): string[];

package/dist/runtime/utils/urlParams.js

@@ -0,0 +1,67 @@
+export function flattenParams(value, prefix) {
+  const result = {};
+  _flatten(value, prefix, result);
+  return result;
+}
+function _flatten(value, key, out) {
+  if (value === null || value === void 0) return;
+  if (value instanceof File || value instanceof Blob) return;
+  if (typeof value === "string") {
+    if (value !== "") out[key] = value;
+    return;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    out[key] = String(value);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const [i, item] of value.entries()) {
+      _flatten(item, `${key}[${i}]`, out);
+    }
+    return;
+  }
+  if (typeof value === "object") {
+    for (const [k, v] of Object.entries(value)) {
+      _flatten(v, `${key}.${k}`, out);
+    }
+  }
+}
+export function unflattenParams(flat) {
+  const result = {};
+  for (const [key, raw] of Object.entries(flat)) {
+    const value = Array.isArray(raw) ? raw[0] : raw;
+    if (value === void 0 || value === "") continue;
+    _setByPath(result, parsePath(key), value);
+  }
+  return result;
+}
+function _setByPath(root, path, value) {
+  if (path.length === 0) return;
+  let current = root;
+  for (let i = 0; i < path.length - 1; i++) {
+    const seg = path[i];
+    const nextSeg = path[i + 1];
+    const parent = current;
+    if (parent[seg] == null || typeof parent[seg] !== "object") {
+      parent[seg] = typeof nextSeg === "number" ? [] : {};
+    }
+    current = parent[seg];
+  }
+  const lastSeg = path[path.length - 1];
+  current[lastSeg] = value;
+}
+export function parsePath(path) {
+  const segments = [];
+  for (const match of path.matchAll(/([^.[]+)|\[(\d+)\]/g)) {
+    segments.push(match[1] !== void 0 ? match[1] : parseInt(match[2], 10));
+  }
+  return segments;
+}
+export function topLevelKeys(flat) {
+  const keys = /* @__PURE__ */ new Set();
+  for (const k of Object.keys(flat)) {
+    const match = k.match(/^([^.[]+)/);
+    if (match) keys.add(match[1]);
+  }
+  return [...keys];
+}

package/package.json

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