@onereach/ui-components 10.0.1 → 10.0.2

package/dist/esm/v3/components/or-time-range-picker-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-47f04771.js';
+export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-1f6509eb.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
 import '@vueuse/core';
@@ -9,7 +9,7 @@ import '../../useProxyModelValue-940010d2.js';
 import '../../useResponsive-1baf3485.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import '../../OrDateTimePicker-ef148446.js';
+import '../../OrDateTimePicker-b2749f72.js';
 import '../../OrError-331220bc.js';
 import 'vue';
 import '../../OrHint-262c8217.js';
@@ -27,8 +27,8 @@ import '../../useTheme-0ef25778.js';
 import '../../isPrevented-6994b101.js';
 import '../../isAncestor-9acec98b.js';
 import '../../OrInputBox-287f97ba.js';
-import '../../OrLabel-f1a581d8.js';
-import '../../OrDateTimePickerTimeSelect-d9cee31a.js';
+import '../../OrLabel-02aa56ad.js';
+import '../../OrDateTimePickerTimeSelect-c6ea3195.js';
 import '../../getTimePlaceholder-a1d75821.js';
 import '../../OrButton-c95aef65.js';
 import '../../OrLoader-5e2f359b.js';

package/dist/esm/v3/index.js

@@ -8,12 +8,12 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-c95aef65.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-a2ba0b3e.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-d632c92d.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-7eecfe1b.js';
 export { C as CardPadding, s as OrCardV3 } from './OrCard-c2ef331b.js';
 export { s as OrCheckbox } from './OrCheckbox-42ed332c.js';
-export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-11a7b74e.js';
-export { s as OrCheckboxTreeV3 } from './OrCheckboxTree-7693bcda.js';
-export { s as OrCheckboxV3 } from './OrCheckbox-abe46de1.js';
+export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-ba429495.js';
+export { s as OrCheckboxTreeV3 } from './OrCheckboxTree-e3b760d1.js';
+export { s as OrCheckboxV3 } from './OrCheckbox-91bc37d7.js';
 export { s as OrChip } from './OrChip-2e26629d.js';
 export { s as OrChips } from './OrChips-58954587.js';
 export { s as OrCode, O as OrCodeLanguages } from './OrCode-90e43a20.js';
@@ -22,22 +22,22 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-842bcdcd.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-590736cc.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { s as OrCollapse } from './OrCollapse-d7c0afae.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-7e1067a0.js';
-export { s as OrCombinedInputV3 } from './OrCombinedInput-b42c2ead.js';
+export { s as OrCombinedInputV3 } from './OrCombinedInput-1a22e413.js';
 export { s as OrConfirm } from './OrConfirm-c63285a6.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-21d06156.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-fdc47d05.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-78d02563.js';
-export { s as OrDateFormatV3 } from './OrDateFormat-e2f54d81.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-0653033d.js';
-export { s as OrDateRangePickerV3 } from './OrDateRangePicker-c2b4e6d7.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-220e33bf.js';
+export { s as OrDateFormatV3 } from './OrDateFormat-755671ca.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-a65e349c.js';
+export { s as OrDateRangePickerV3 } from './OrDateRangePicker-06b39fc4.js';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-3408f038.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-45bc8bd3.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-ef148446.js';
-export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-d9cee31a.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-b2749f72.js';
+export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-c6ea3195.js';
 export { D as DateTimePickerTimeFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-a1d75821.js';
 export { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 export { g as getNextMonthDate } from './getNextMonthDate-00c47169.js';
@@ -51,7 +51,7 @@ export { s as OrErrorV3 } from './OrError-331220bc.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-3281fa33.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-3d860eef.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-c875c590.js';
-export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-11ed3699.js';
+export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-17c3cc0a.js';
 export { s as OrHint } from './OrHint-8822005b.js';
 export { s as OrHintV3 } from './OrHint-262c8217.js';
 export { s as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-eb0a5aa2.js';
@@ -63,13 +63,13 @@ export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInli
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-7321d8d3.js';
 export { s as OrInput } from './OrInput-2c3111c2.js';
 export { a as InputBoxSize, I as InputBoxVariant, s as OrInputBoxV3 } from './OrInputBox-287f97ba.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-a442c61e.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-89bb16d6.js';
 export { s as OrLabel } from './OrLabel-a7d99df4.js';
-export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-f1a581d8.js';
+export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-02aa56ad.js';
 export { L as LinkColor, s as OrLinkV3 } from './OrLink-c83a51b2.js';
 export { s as OrList } from './OrList-59f4430e.js';
 export { s as OrListOfInputs } from './OrListOfInputs-c557cd79.js';
-export { s as OrListV3 } from './OrList-8e43f5cd.js';
+export { s as OrListV3 } from './OrList-384bf436.js';
 export { s as OrListItem } from './OrListItem-12e21bc6.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-0b463089.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-5e2f359b.js';
@@ -91,17 +91,17 @@ export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-0939955c.js';
 export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
-export { s as OrRadioGroupV3 } from './OrRadioGroup-0c1bcc17.js';
-export { s as OrRadioV3 } from './OrRadio-b4ab913e.js';
+export { s as OrRadioGroupV3 } from './OrRadioGroup-6a5af61f.js';
+export { s as OrRadioV3 } from './OrRadio-160d7841.js';
 export { s as OrRangeSliderV3 } from './OrRangeSlider-1284dce6.js';
 export { s as OrRatingV3 } from './OrRating-640f9e87.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanel-e107f883.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-a35175cf.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-87baa915.js';
 export { s as OrSearch } from './OrSearch-54a642d3.js';
-export { s as OrSearchV3 } from './OrSearch-975833d8.js';
+export { s as OrSearchV3 } from './OrSearch-42922cb7.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-4b163ea9.js';
 export { s as OrSelect } from './OrSelect-4f2ea2f2.js';
-export { s as OrSelectV3 } from './OrSelect-83c8cada.js';
+export { s as OrSelectV3 } from './OrSelect-27ede5ab.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-4ab42b93.js';
 export { s as OrSidebarV3, S as SidebarPlacement } from './props-3212cd17.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
@@ -117,25 +117,25 @@ export { s as OrSortingV3 } from './OrSorting-c8fa584a.js';
 export { s as OrStatusV3, a as StatusSize, S as StatusVariant } from './OrStatus-a33a7e88.js';
 export { s as OrStepper } from './OrStepper-b2d7dd2d.js';
 export { s as OrSwitch } from './OrSwitch-05fe7681.js';
-export { s as OrSwitchV3 } from './OrSwitch-6cd74849.js';
+export { s as OrSwitchV3 } from './OrSwitch-43616cd3.js';
 export { s as OrTab } from './OrTab-d8d4e871.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-c2af7ca3.js';
 export { s as OrTabV3 } from './OrTab-74a9bd5b.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-bc0fc18a.js';
 export { s as OrTag } from './OrTag-04abf6a7.js';
-export { s as OrTagInputV3 } from './OrTagInput-85bb35a5.js';
+export { s as OrTagInputV3 } from './OrTagInput-e768c2d1.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-a29c2113.js';
 export { s as OrTagsV3, T as TagsOverflow } from './OrTags-215da9e7.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-ea114c19.js';
 export { s as OrTextarea } from './OrTextarea-7a753c1a.js';
-export { s as OrTextareaV3 } from './OrTextarea-72acd2de.js';
+export { s as OrTextareaV3 } from './OrTextarea-97b57866.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-9524352e.js';
-export { s as OrTimeFormatV3 } from './OrTimeFormat-0434466f.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-b7445bd1.js';
-export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-47f04771.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormat-ef653117.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-9dcd20dd.js';
+export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-1f6509eb.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-71ba538b.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-05a9c81b.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-bd194714.js';
@@ -160,8 +160,8 @@ export { M as MutationObs, f as addClass, c as cancelAF, e as contains, m as get
 export { p as pxToRem } from './px-to-rem-0b26b83e.js';
 export { i as isAncestor } from './isAncestor-9acec98b.js';
 export { i as isEmpty } from './isEmpty-a3a94129.js';
-export { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
-export { i as isEqualValue } from './isEqualValue-f8bf73d9.js';
+export { i as isEmptyValue, a as isEqualValue } from './isEqualValue-b6ca4b55.js';
+export { i as isVoid } from './isVoid-36a1480c.js';
 import 'vue-demi';
 import 'vue';
 import './style-inject.es-4c6f2515.js';
@@ -207,10 +207,10 @@ import './codemirrorView-020fe885.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import './OrSelectMultipleControl-6e1e4ac2.js';
+import './OrSelectMultipleControl-c3eb2da4.js';
 import './OrSelectControlInput-62d04212.js';
 import './OrSelectPlaceholder-81502228.js';
-import './OrSelectSingleControl-a1362154.js';
+import './OrSelectSingleControl-de181844.js';
 import 'lodash/range';
 import './styles-ed564e39.js';
 import 'lodash/isNil';

package/dist/esm/v3/{isEqualValue-f8bf73d9.js → isEqualValue-b6ca4b55.js}

@@ -1,3 +1,7 @@
+function isEmptyValue(val) {
+  return val === undefined || val === null || val === '';
+}
+
 function isEqualValue(val1, val2) {
   if (typeof val1 === 'object' && typeof val2 === 'object') {
     return JSON.stringify(val1) === JSON.stringify(val2);
@@ -5,4 +9,4 @@ function isEqualValue(val1, val2) {
   return val1 === val2;
 }
 
-export { isEqualValue as i };
+export { isEqualValue as a, isEmptyValue as i };

package/dist/esm/v3/isVoid-36a1480c.js

@@ -0,0 +1,5 @@
+function isVoid(value) {
+  return value === null || value === undefined;
+}
+
+export { isVoid as i };

package/dist/esm/v3/utils/index.d.ts

@@ -13,3 +13,4 @@ export * from './isDescendant';
 export * from './isEmpty';
 export * from './isEmptyValue';
 export * from './isEqualValue';
+export * from './isVoid';

package/dist/esm/v3/utils/index.js

@@ -4,7 +4,7 @@ export { M as MutationObs, f as addClass, c as cancelAF, e as contains, m as get
 export { p as pxToRem } from '../px-to-rem-0b26b83e.js';
 export { i as isAncestor } from '../isAncestor-9acec98b.js';
 export { i as isEmpty } from '../isEmpty-a3a94129.js';
-export { i as isEmptyValue } from '../isEmptyValue-fd56a6e4.js';
-export { i as isEqualValue } from '../isEqualValue-f8bf73d9.js';
+export { i as isEmptyValue, a as isEqualValue } from '../isEqualValue-b6ca4b55.js';
+export { i as isVoid } from '../isVoid-36a1480c.js';
 import 'lodash/isElement';
 import 'lodash/get';

package/dist/esm/v3/utils/isVoid.d.ts

@@ -0,0 +1 @@
+export declare function isVoid(value: unknown): value is null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "10.0.1",
+  "version": "10.0.2",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -40,7 +40,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.4.2",
-    "@onereach/styles": "^6.9.0",
+    "@onereach/styles": "^6.9.1",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -178,5 +178,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "dbdafe98b8e52cfadfd7bfec7ce6330280f07dd7"
+  "gitHead": "f037d02d9572a276f304de9dbeb56a1ca1a33316"
 }

package/src/components/or-checkbox-v3/OrCheckbox.vue

@@ -5,14 +5,14 @@
   >
     <input
       :ref="'control'"
-      :checked="isChecked"
       v-bind="controlAttributes"
       :class="controlStyles"
       :type="'checkbox'"
+      :checked="checked"
       :indeterminate.prop="indeterminate"
       :required="required"
       :disabled="disabled"
-      @change="handleChange"
+      @change="$emit('change', $event); onChange()"
       @click="$emit('click', $event)"
       @focus="$emit('focus', $event)"
       @blur="$emit('blur', $event)"
@@ -22,7 +22,7 @@
       <OrLabel
         :control-id="controlAttributes.id"
         :variant="labelVariant"
-        :selected="isChecked"
+        :selected="checked"
         :required="required"
         :disabled="disabled"
       >
@@ -37,11 +37,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref, toRef } from 'vue-demi';
+import { PropType, computed, defineComponent, reactive, ref, toRef } from 'vue-demi';
 import { useControlAttributes, useIdAttribute, useProxyModelValue } from '../../hooks';
-import { isEmptyValue } from '../../utils/isEmptyValue';
+import { isVoid } from '../../utils';
 import { LabelVariant, OrLabelV3 as OrLabel } from '../or-label-v3';
 import { Checkbox, CheckboxControl, CheckboxControlHandle } from './styles';
+import { CheckboxModelValue, CheckboxValue } from './types';
 
 export default defineComponent({
   name: 'OrCheckbox',
@@ -57,13 +58,13 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: null as any,
-      default: null,
+      type: undefined as unknown as PropType<CheckboxModelValue>,
+      default: undefined,
     },
 
     value: {
-      type: [Object, String, Number, Boolean] as PropType<object | string | number | boolean>,
-      default: null,
+      type: [String, Number, Object] as PropType<CheckboxValue>,
+      default: undefined,
     },
 
     label: {
@@ -95,6 +96,7 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
+    'change',
     'click',
     'focus',
     'blur',
@@ -108,16 +110,16 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
-    const control = ref<HTMLInputElement>();
 
-    // Styles
     const rootStyles = computed(() => [
       'or-checkbox-v3',
       ...Checkbox,
     ]);
 
+    const control = ref<HTMLElement>();
+
     const controlStyles = computed(() => [
       ...CheckboxControl,
       ...CheckboxControlHandle,
@@ -131,18 +133,26 @@ export default defineComponent({
 
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
-    const isChecked = computed(() => {
+    const checked = computed(() => {
       if (Array.isArray(proxyModelValue.value)) {
-        return !isEmptyValue(props.value) && proxyModelValue.value.includes(props.value);
+        if (isVoid(props.value)) {
+          throw new Error('[OrCheckbox]: Property "value" must be specified.');
+        }
+
+        return proxyModelValue.value.includes(props.value);
       }
 
-      return !!proxyModelValue.value;
+      return Boolean(proxyModelValue.value);
     });
 
-    // Methods
-    function handleChange(): void {
+    // Handlers
+    function onChange(): void {
       if (Array.isArray(proxyModelValue.value)) {
-        if (isChecked.value) {
+        if (isVoid(props.value)) {
+          throw new Error('[OrCheckbox]: Property "value" must be specified.');
+        }
+
+        if (checked.value) {
           proxyModelValue.value = proxyModelValue.value.filter((value) => value !== props.value);
         } else {
           proxyModelValue.value = [...proxyModelValue.value, props.value];
@@ -152,6 +162,7 @@ export default defineComponent({
       }
     }
 
+    // Methods
     function focus(): void {
       control.value?.focus();
     }
@@ -162,12 +173,16 @@ export default defineComponent({
 
     return {
       root,
-      control,
       rootStyles,
+
+      control,
       controlStyles,
+
       controlAttributes,
-      isChecked,
-      handleChange,
+      checked,
+
+      onChange,
+
       focus,
       blur,
     };

package/src/components/or-checkbox-v3/index.ts

@@ -1 +1,2 @@
 export { default as OrCheckboxV3 } from './OrCheckbox.vue';
+export * from './types';

package/src/components/or-checkbox-v3/styles.ts

@@ -10,15 +10,15 @@ export const CheckboxControl: string[] = [
   // Layout
   'layout-inline-row justify-center',
 
-  // Box
-  'w-md+ md:w-md',
-  'h-md+ md:h-md',
+  // Interactivity
+  'interactivity-click',
 
   // Shape
   'rounded-sm',
 
-  // Interactivity
-  'interactivity-click',
+  // Box
+  'w-md+ md:w-md',
+  'h-md+ md:h-md',
 
   // Iconography
   'iconography-outlined',
@@ -33,6 +33,10 @@ export const CheckboxControl: string[] = [
   'theme-border-1-outline',
   'dark:theme-border-1-outline-dark',
 
+  // Theme (focus)
+  'focus-visible:theme-outline-2-primary',
+  'dark:focus-visible:theme-outline-2-primary-dark',
+
   // Theme (checked)
   'checked:theme-preset-1-primary',
   'dark:checked:theme-preset-1-primary-dark',
@@ -40,16 +44,12 @@ export const CheckboxControl: string[] = [
   // Theme (indeterminate)
   'indeterminate:theme-preset-1-primary',
   'dark:indeterminate:theme-preset-1-primary-dark',
-
-  // Theme (focus)
-  'focus-visible:theme-outline-2-primary',
-  'dark:focus-visible:theme-outline-2-primary-dark',
 ];
 
 export const CheckboxControlHandle: string[] = [
-  // Content (checked)
-  'checked:after:content-checkbox-checked',
+  // Content (children/checked)
+  'after:checked:content-checkbox-checked',
 
-  // Content (indeterminate)
-  'indeterminate:after:content-checkbox-indeterminate',
+  // Content (children/indeterminate)
+  'after:indeterminate:content-checkbox-indeterminate',
 ];

package/src/components/or-checkbox-v3/types.ts

@@ -0,0 +1,3 @@
+export type CheckboxModelValue = CheckboxValue[] | boolean | null | undefined;
+
+export type CheckboxValue = string | number | object;

package/src/components/or-inline-input-v3/types.ts

@@ -1,4 +1,4 @@
-export type InlineInputModelValue = string | number | null;
+export type InlineInputModelValue = string | number | null | undefined;
 
 export enum InlineInputType {
   Text = 'text',

package/src/components/or-inline-textarea-v3/types.ts

@@ -1 +1 @@
-export type InlineTextareaModelValue = string | null;
+export type InlineTextareaModelValue = string | null | undefined;

package/src/components/or-input-v3/types.ts

@@ -1,4 +1,4 @@
-export type InputModelValue = string | number | null;
+export type InputModelValue = string | number | null | undefined;
 
 export enum InputType {
   Text = 'text',

package/src/components/or-label-v3/styles.ts

@@ -42,7 +42,7 @@ export const LabelVariants: Record<LabelVariant, string[]> = {
 
 export const LabelText: string[] = [
   // Content (required)
-  'required:after:content-label-required',
+  'required:after:content-["*"]',
 
   // Interactivity
   'interactivity-default',

package/src/components/or-radio-group-v3/OrRadioGroup.vue

@@ -2,29 +2,31 @@
   <OrFormGroup
     :direction="direction"
     :label="label"
-    :error="error"
     :hint="hint"
+    :error="error"
     :disabled="disabled"
   >
     <template v-slot:addon>
       <slot name="addon" />
     </template>
+
     <OrRadio
       v-for="option in options"
-      :key="option.value"
+      :key="option.label"
       v-model="proxyModelValue"
-      :label="option.label"
       :value="option.value"
+      :label="option.label"
       :disabled="disabled || option.disabled"
     />
   </OrFormGroup>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, toRef } from 'vue-demi';
+import { PropType, defineComponent, toRef } from 'vue-demi';
 import { useProxyModelValue } from '../../hooks';
 import { FormGroupDirection, OrFormGroupV3 as OrFormGroup } from '../or-form-group-v3';
-import { OrRadioV3 as OrRadio } from '../or-radio-v3';
+import { OrRadioV3 as OrRadio, RadioModelValue } from '../or-radio-v3';
+import { RadioGroupOption } from './types';
 
 export default defineComponent({
   name: 'OrRadioGroup',
@@ -41,36 +43,47 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: null as any,
-      default: null,
+      type: undefined as unknown as PropType<RadioModelValue>,
+      default: undefined,
     },
+
+    options: {
+      type: Array as PropType<RadioGroupOption[]>,
+      default: () => [],
+    },
+
     direction: {
       type: String as PropType<`${FormGroupDirection}`>,
-      default: 'vertical',
+      default: () => FormGroupDirection.Vertical,
     },
+
     label: {
       type: String,
-      default: '',
+      default: undefined,
     },
-    options: {
-      type: Array as PropType<{ label: string; value: any; disabled?: boolean;}[]>,
-      default: () => [],
-    },
-    error: {
+
+    hint: {
       type: String,
-      default: '',
+      default: undefined,
     },
-    hint: {
+
+    error: {
       type: String,
-      default: '',
+      default: undefined,
     },
+
     disabled: {
       type: Boolean,
       default: false,
     },
   },
 
+  emits: [
+    'update:modelValue',
+  ],
+
   setup(props, context) {
+    // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     return {

package/src/components/or-radio-group-v3/index.ts

@@ -1 +1,2 @@
 export { default as OrRadioGroupV3 } from './OrRadioGroup.vue';
+export * from './types';

package/src/components/or-radio-group-v3/types.ts

@@ -0,0 +1,8 @@
+import { RadioValue } from '../or-radio-v3';
+
+export interface RadioGroupOption {
+  value: RadioValue;
+  label: string;
+
+  disabled?: boolean;
+}