@onereach/ui-components 2.62.7-beta.1922.0 → 2.62.7-beta.1928.0

package/dist/v2/{OrSegmentedControls-cd8b1cd3.js → OrSegmentedControl-58b5db14.js}

@@ -3,7 +3,7 @@ import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
-const SegmentedControlsItemRoot = [
+const SegmentedControlItemRoot = [
 // Layout
 'flex', 'items-center', 'justify-center',
 // Shape
@@ -16,7 +16,7 @@ const SegmentedControlsItemRoot = [
 'selected:theme-background-default', 'dark:selected:theme-background-default-dark',
 // Theme (selected, enabled)
 'selected:enabled:shadow-card', 'dark:selected:enabled:shadow-card-dark'];
-const SegmentedControlsItemRootSizes = {
+const SegmentedControlItemRootSizes = {
   'm': [
   // Box
   'h-[44px] md:h-[36px]',
@@ -34,7 +34,7 @@ const SegmentedControlsItemRootSizes = {
 };
 
 var script$1 = defineComponent({
-  name: 'OrSegmentedControlsItem',
+  name: 'OrSegmentedControlItem',
   inheritAttrs: false,
   props: {
     size: {
@@ -55,7 +55,7 @@ var script$1 = defineComponent({
     const root = ref();
     // Styles
     const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-segmented-controls-item', ...SegmentedControlsItemRoot, ...SegmentedControlsItemRootSizes[props.size], classAttribute.value]);
+    const rootStyles = computed(() => ['or-segmented-control-item', ...SegmentedControlItemRoot, ...SegmentedControlItemRootSizes[props.size], classAttribute.value]);
     return {
       root,
       rootStyles
@@ -103,13 +103,13 @@ const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__$1
 }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
 
-var SegmentedControlsSize;
-(function (SegmentedControlsSize) {
-  SegmentedControlsSize["M"] = "m";
-  SegmentedControlsSize["S"] = "s";
-})(SegmentedControlsSize || (SegmentedControlsSize = {}));
+var SegmentedControlSize;
+(function (SegmentedControlSize) {
+  SegmentedControlSize["M"] = "m";
+  SegmentedControlSize["S"] = "s";
+})(SegmentedControlSize || (SegmentedControlSize = {}));
 
-const SegmentedControlsRoot = [
+const SegmentedControlRoot = [
 // Layout
 'grid', 'grid-flow-col', 'auto-cols-fr',
 // Shape
@@ -118,15 +118,15 @@ const SegmentedControlsRoot = [
 'px-[2px]', 'py-[2px]',
 // Theme
 'theme-background-surface-variant', 'dark:theme-background-surface-variant-dark'];
-const SegmentedControlsRootSizes = {
+const SegmentedControlRootSizes = {
   'm': [],
   's': []
 };
 
 var script = defineComponent({
-  name: 'OrSegmentedControls',
+  name: 'OrSegmentedControl',
   components: {
-    OrSegmentedControlsItem: __vue_component__$1
+    OrSegmentedControlItem: __vue_component__$1
   },
   inheritAttrs: false,
   props: {
@@ -144,7 +144,7 @@ var script = defineComponent({
     },
     size: {
       type: String,
-      default: SegmentedControlsSize.M
+      default: SegmentedControlSize.M
     },
     disabled: {
       type: Boolean,
@@ -158,7 +158,7 @@ var script = defineComponent({
     const root = ref();
     // Styles
     const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-segmented-controls', ...SegmentedControlsRoot, ...SegmentedControlsRootSizes[props.size], classAttribute.value]);
+    const rootStyles = computed(() => ['or-segmented-control', ...SegmentedControlRoot, ...SegmentedControlRootSizes[props.size], classAttribute.value]);
     // State
     const proxyModelValue = computed({
       get: () => {
@@ -191,7 +191,7 @@ var __vue_render__ = function () {
     ref: "root",
     class: _vm.rootStyles
   }, 'div', _vm.$attrs, false), _vm._l(_vm.options, function (option) {
-    return _c('OrSegmentedControlsItem', {
+    return _c('OrSegmentedControlItem', {
       key: option.value,
       attrs: {
         "size": _vm.size,
@@ -200,6 +200,7 @@ var __vue_render__ = function () {
       },
       on: {
         "click": function ($event) {
+          $event.stopPropagation();
           _vm.proxyModelValue = option.value;
         }
       }
@@ -227,4 +228,4 @@ const __vue_component__ = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__
 }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
 
-export { SegmentedControlsSize as S, __vue_component__ as _ };
+export { SegmentedControlSize as S, __vue_component__ as _ };

package/dist/v2/components/index.d.ts

@@ -58,7 +58,7 @@ export * from './or-radio';
 export * from './or-radio-group';
 export * from './or-radio-v3';
 export * from './or-search-v3';
-export * from './or-segmented-controls-v3';
+export * from './or-segmented-control-v3';
 export * from './or-select';
 export * from './or-select-v3';
 export * from './or-sidebar';

package/dist/{v3/components/or-segmented-controls-v3/OrSegmentedControls.vue.d.ts → v2/components/or-segmented-control-v3/OrSegmentedControl.vue.d.ts}

@@ -1,14 +1,14 @@
 import { PropType } from 'vue-demi';
-import { SegmentedControlsSize } from './props';
-import { SegmentedControlsOption } from './types';
+import { SegmentedControlSize } from './props';
+import { SegmentedControlOption } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     options: {
-        type: PropType<SegmentedControlsOption[]>;
-        default: SegmentedControlsOption[];
+        type: PropType<SegmentedControlOption[]>;
+        default: SegmentedControlOption[];
     };
     modelValue: {
         type: StringConstructor;
@@ -19,8 +19,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     size: {
-        type: PropType<SegmentedControlsSize>;
-        default: SegmentedControlsSize;
+        type: PropType<SegmentedControlSize>;
+        default: SegmentedControlSize;
     };
     disabled: {
         type: BooleanConstructor;
@@ -28,8 +28,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     options: {
-        type: PropType<SegmentedControlsOption[]>;
-        default: SegmentedControlsOption[];
+        type: PropType<SegmentedControlOption[]>;
+        default: SegmentedControlOption[];
     };
     modelValue: {
         type: StringConstructor;
@@ -40,18 +40,18 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     size: {
-        type: PropType<SegmentedControlsSize>;
-        default: SegmentedControlsSize;
+        type: PropType<SegmentedControlSize>;
+        default: SegmentedControlSize;
     };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    options: SegmentedControlsOption[];
+    options: SegmentedControlOption[];
     modelValue: string;
     value: string;
-    size: SegmentedControlsSize;
+    size: SegmentedControlSize;
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -60,18 +60,18 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
-    options: SegmentedControlsOption[];
+    options: SegmentedControlOption[];
     modelValue: string;
     value: string;
-    size: SegmentedControlsSize;
+    size: SegmentedControlSize;
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    options: SegmentedControlsOption[];
+    options: SegmentedControlOption[];
     modelValue: string;
     value: string;
-    size: SegmentedControlsSize;
+    size: SegmentedControlSize;
     disabled: boolean;
 }, true>);
 export default _default;

package/dist/{v3/components/or-segmented-controls-v3/components/or-segmented-controls-item/OrSegmentedControlsItem.vue.d.ts → v2/components/or-segmented-control-v3/components/or-segmented-control-item/OrSegmentedControlItem.vue.d.ts}

@@ -1,11 +1,11 @@
 import { PropType } from 'vue-demi';
-import { SegmentedControlsSize } from '../../props';
+import { SegmentedControlSize } from '../../props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     size: {
-        type: PropType<SegmentedControlsSize>;
+        type: PropType<SegmentedControlSize>;
         required: true;
     };
     selected: {
@@ -18,7 +18,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     size: {
-        type: PropType<SegmentedControlsSize>;
+        type: PropType<SegmentedControlSize>;
         required: true;
     };
     selected: {
@@ -30,14 +30,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: boolean;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    size: SegmentedControlsSize;
+    size: SegmentedControlSize;
     selected: boolean;
     disabled: boolean;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
-    size: SegmentedControlsSize;
+    size: SegmentedControlSize;
     selected: boolean;
     disabled: boolean;
 } & {}, {

package/dist/v2/components/or-segmented-control-v3/components/or-segmented-control-item/styles.d.ts

@@ -0,0 +1,3 @@
+import { SegmentedControlSize } from '../../props';
+export declare const SegmentedControlItemRoot: string[];
+export declare const SegmentedControlItemRootSizes: Record<SegmentedControlSize, string[]>;

package/dist/v2/components/or-segmented-control-v3/index.d.ts

@@ -0,0 +1,3 @@
+export { default as OrSegmentedControlV3 } from './OrSegmentedControl.vue';
+export * from './props';
+export * from './types';

package/dist/v2/components/or-segmented-control-v3/props.d.ts

@@ -0,0 +1,4 @@
+export declare enum SegmentedControlSize {
+    M = "m",
+    S = "s"
+}

package/dist/v2/components/or-segmented-control-v3/styles.d.ts

@@ -0,0 +1,3 @@
+import { SegmentedControlSize } from './props';
+export declare const SegmentedControlRoot: string[];
+export declare const SegmentedControlRootSizes: Record<SegmentedControlSize, string[]>;

package/dist/v2/components/or-segmented-control-v3/types.d.ts

@@ -0,0 +1,4 @@
+export interface SegmentedControlOption {
+    value: string;
+    label: string;
+}

package/dist/v2/index.js

@@ -63,7 +63,7 @@ export { _ as OrRadio } from './OrRadio-514e8de8.js';
 export { _ as OrRadioGroup } from './OrRadioGroup-11424644.js';
 export { _ as OrRadioV3 } from './OrRadio-4ba56887.js';
 export { _ as OrSearchV3 } from './OrSearch-978a3a6e.js';
-export { _ as OrSegmentedControlsV3, S as SegmentedControlsSize } from './OrSegmentedControls-cd8b1cd3.js';
+export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-58b5db14.js';
 export { _ as OrSelect } from './OrSelect-ea27a70e.js';
 export { _ as OrSelectV3 } from './OrSelect-c6d0a69e.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-feacf13a.js';

package/dist/v2/index2.js

@@ -63,7 +63,7 @@ export { _ as OrRadio } from './OrRadio-514e8de8.js';
 export { _ as OrRadioGroup } from './OrRadioGroup-11424644.js';
 export { _ as OrRadioV3 } from './OrRadio-4ba56887.js';
 export { _ as OrSearchV3 } from './OrSearch-978a3a6e.js';
-export { _ as OrSegmentedControlsV3, S as SegmentedControlsSize } from './OrSegmentedControls-cd8b1cd3.js';
+export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-58b5db14.js';
 export { _ as OrSelect } from './OrSelect-ea27a70e.js';
 export { _ as OrSelectV3 } from './OrSelect-c6d0a69e.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-feacf13a.js';

package/dist/v2/index63.js

@@ -1,4 +1,4 @@
-export { _ as OrSegmentedControlsV3, S as SegmentedControlsSize } from './OrSegmentedControls-cd8b1cd3.js';
+export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-58b5db14.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/v3/{OrSegmentedControls-e4522910.js → OrSegmentedControl-e45af169.js}

@@ -1,9 +1,9 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, normalizeClass, resolveComponent, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, normalizeClass, resolveComponent, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString } from 'vue';
 
-const SegmentedControlsItemRoot = [
+const SegmentedControlItemRoot = [
 // Layout
 'flex', 'items-center', 'justify-center',
 // Shape
@@ -16,7 +16,7 @@ const SegmentedControlsItemRoot = [
 'selected:theme-background-default', 'dark:selected:theme-background-default-dark',
 // Theme (selected, enabled)
 'selected:enabled:shadow-card', 'dark:selected:enabled:shadow-card-dark'];
-const SegmentedControlsItemRootSizes = {
+const SegmentedControlItemRootSizes = {
   'm': [
   // Box
   'h-[44px] md:h-[36px]',
@@ -34,7 +34,7 @@ const SegmentedControlsItemRootSizes = {
 };
 
 var script$1 = defineComponent({
-  name: 'OrSegmentedControlsItem',
+  name: 'OrSegmentedControlItem',
   inheritAttrs: false,
   props: {
     size: {
@@ -55,7 +55,7 @@ var script$1 = defineComponent({
     const root = ref();
     // Styles
     const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-segmented-controls-item', ...SegmentedControlsItemRoot, ...SegmentedControlsItemRootSizes[props.size], classAttribute.value]);
+    const rootStyles = computed(() => ['or-segmented-control-item', ...SegmentedControlItemRoot, ...SegmentedControlItemRootSizes[props.size], classAttribute.value]);
     return {
       root,
       rootStyles
@@ -78,15 +78,15 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 script$1.render = render$1;
-script$1.__file = "src/components/or-segmented-controls-v3/components/or-segmented-controls-item/OrSegmentedControlsItem.vue";
+script$1.__file = "src/components/or-segmented-control-v3/components/or-segmented-control-item/OrSegmentedControlItem.vue";
 
-var SegmentedControlsSize;
-(function (SegmentedControlsSize) {
-  SegmentedControlsSize["M"] = "m";
-  SegmentedControlsSize["S"] = "s";
-})(SegmentedControlsSize || (SegmentedControlsSize = {}));
+var SegmentedControlSize;
+(function (SegmentedControlSize) {
+  SegmentedControlSize["M"] = "m";
+  SegmentedControlSize["S"] = "s";
+})(SegmentedControlSize || (SegmentedControlSize = {}));
 
-const SegmentedControlsRoot = [
+const SegmentedControlRoot = [
 // Layout
 'grid', 'grid-flow-col', 'auto-cols-fr',
 // Shape
@@ -95,15 +95,15 @@ const SegmentedControlsRoot = [
 'px-[2px]', 'py-[2px]',
 // Theme
 'theme-background-surface-variant', 'dark:theme-background-surface-variant-dark'];
-const SegmentedControlsRootSizes = {
+const SegmentedControlRootSizes = {
   'm': [],
   's': []
 };
 
 var script = defineComponent({
-  name: 'OrSegmentedControls',
+  name: 'OrSegmentedControl',
   components: {
-    OrSegmentedControlsItem: script$1
+    OrSegmentedControlItem: script$1
   },
   inheritAttrs: false,
   props: {
@@ -121,7 +121,7 @@ var script = defineComponent({
     },
     size: {
       type: String,
-      default: SegmentedControlsSize.M
+      default: SegmentedControlSize.M
     },
     disabled: {
       type: Boolean,
@@ -135,7 +135,7 @@ var script = defineComponent({
     const root = ref();
     // Styles
     const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-segmented-controls', ...SegmentedControlsRoot, ...SegmentedControlsRootSizes[props.size], classAttribute.value]);
+    const rootStyles = computed(() => ['or-segmented-control', ...SegmentedControlRoot, ...SegmentedControlRootSizes[props.size], classAttribute.value]);
     // State
     const proxyModelValue = computed({
       get: () => {
@@ -157,18 +157,18 @@ var script = defineComponent({
 });
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrSegmentedControlsItem = resolveComponent("OrSegmentedControlsItem");
+  const _component_OrSegmentedControlItem = resolveComponent("OrSegmentedControlItem");
   return openBlock(), createElementBlock("div", mergeProps({
     ref: "root"
   }, _ctx.$attrs, {
     class: _ctx.rootStyles
   }), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, option => {
-    return openBlock(), createBlock(_component_OrSegmentedControlsItem, {
+    return openBlock(), createBlock(_component_OrSegmentedControlItem, {
       key: option.value,
       size: _ctx.size,
       selected: option.value === _ctx.proxyModelValue,
       disabled: _ctx.disabled,
-      onClick: $event => _ctx.proxyModelValue = option.value
+      onClick: withModifiers($event => _ctx.proxyModelValue = option.value, ["stop"])
     }, {
       default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)]),
 
@@ -178,6 +178,6 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 script.render = render;
-script.__file = "src/components/or-segmented-controls-v3/OrSegmentedControls.vue";
+script.__file = "src/components/or-segmented-control-v3/OrSegmentedControl.vue";
 
-export { SegmentedControlsSize as S, script as s };
+export { SegmentedControlSize as S, script as s };

package/dist/v3/components/index.d.ts

@@ -58,7 +58,7 @@ export * from './or-radio';
 export * from './or-radio-group';
 export * from './or-radio-v3';
 export * from './or-search-v3';
-export * from './or-segmented-controls-v3';
+export * from './or-segmented-control-v3';
 export * from './or-select';
 export * from './or-select-v3';
 export * from './or-sidebar';

package/dist/{v2/components/or-segmented-controls-v3/OrSegmentedControls.vue.d.ts → v3/components/or-segmented-control-v3/OrSegmentedControl.vue.d.ts}

@@ -1,14 +1,14 @@
 import { PropType } from 'vue-demi';
-import { SegmentedControlsSize } from './props';
-import { SegmentedControlsOption } from './types';
+import { SegmentedControlSize } from './props';
+import { SegmentedControlOption } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     options: {
-        type: PropType<SegmentedControlsOption[]>;
-        default: SegmentedControlsOption[];
+        type: PropType<SegmentedControlOption[]>;
+        default: SegmentedControlOption[];
     };
     modelValue: {
         type: StringConstructor;
@@ -19,8 +19,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     size: {
-        type: PropType<SegmentedControlsSize>;
-        default: SegmentedControlsSize;
+        type: PropType<SegmentedControlSize>;
+        default: SegmentedControlSize;
     };
     disabled: {
         type: BooleanConstructor;
@@ -28,8 +28,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     options: {
-        type: PropType<SegmentedControlsOption[]>;
-        default: SegmentedControlsOption[];
+        type: PropType<SegmentedControlOption[]>;
+        default: SegmentedControlOption[];
     };
     modelValue: {
         type: StringConstructor;
@@ -40,18 +40,18 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     size: {
-        type: PropType<SegmentedControlsSize>;
-        default: SegmentedControlsSize;
+        type: PropType<SegmentedControlSize>;
+        default: SegmentedControlSize;
     };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    options: SegmentedControlsOption[];
+    options: SegmentedControlOption[];
     modelValue: string;
     value: string;
-    size: SegmentedControlsSize;
+    size: SegmentedControlSize;
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -60,18 +60,18 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
-    options: SegmentedControlsOption[];
+    options: SegmentedControlOption[];
     modelValue: string;
     value: string;
-    size: SegmentedControlsSize;
+    size: SegmentedControlSize;
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    options: SegmentedControlsOption[];
+    options: SegmentedControlOption[];
     modelValue: string;
     value: string;
-    size: SegmentedControlsSize;
+    size: SegmentedControlSize;
     disabled: boolean;
 }, true>);
 export default _default;

package/dist/{v2/components/or-segmented-controls-v3/components/or-segmented-controls-item/OrSegmentedControlsItem.vue.d.ts → v3/components/or-segmented-control-v3/components/or-segmented-control-item/OrSegmentedControlItem.vue.d.ts}

@@ -1,11 +1,11 @@
 import { PropType } from 'vue-demi';
-import { SegmentedControlsSize } from '../../props';
+import { SegmentedControlSize } from '../../props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     size: {
-        type: PropType<SegmentedControlsSize>;
+        type: PropType<SegmentedControlSize>;
         required: true;
     };
     selected: {
@@ -18,7 +18,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     size: {
-        type: PropType<SegmentedControlsSize>;
+        type: PropType<SegmentedControlSize>;
         required: true;
     };
     selected: {
@@ -30,14 +30,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: boolean;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    size: SegmentedControlsSize;
+    size: SegmentedControlSize;
     selected: boolean;
     disabled: boolean;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
-    size: SegmentedControlsSize;
+    size: SegmentedControlSize;
     selected: boolean;
     disabled: boolean;
 } & {}, {

package/dist/v3/components/or-segmented-control-v3/components/or-segmented-control-item/styles.d.ts

@@ -0,0 +1,3 @@
+import { SegmentedControlSize } from '../../props';
+export declare const SegmentedControlItemRoot: string[];
+export declare const SegmentedControlItemRootSizes: Record<SegmentedControlSize, string[]>;

package/dist/v3/components/or-segmented-control-v3/index.d.ts

@@ -0,0 +1,3 @@
+export { default as OrSegmentedControlV3 } from './OrSegmentedControl.vue';
+export * from './props';
+export * from './types';

package/dist/v3/components/or-segmented-control-v3/props.d.ts

@@ -0,0 +1,4 @@
+export declare enum SegmentedControlSize {
+    M = "m",
+    S = "s"
+}

package/dist/v3/components/or-segmented-control-v3/styles.d.ts

@@ -0,0 +1,3 @@
+import { SegmentedControlSize } from './props';
+export declare const SegmentedControlRoot: string[];
+export declare const SegmentedControlRootSizes: Record<SegmentedControlSize, string[]>;

package/dist/v3/components/or-segmented-control-v3/types.d.ts

@@ -0,0 +1,4 @@
+export interface SegmentedControlOption {
+    value: string;
+    label: string;
+}

package/dist/v3/index.js

@@ -58,7 +58,7 @@ export { s as OrRadio } from './OrRadio-c3ab11f2.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioV3 } from './OrRadio-0c1883f2.js';
 export { s as OrSearchV3 } from './OrSearch-375eab55.js';
-export { s as OrSegmentedControlsV3, S as SegmentedControlsSize } from './OrSegmentedControls-e4522910.js';
+export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-e45af169.js';
 export { s as OrSelect } from './OrSelect-056731af.js';
 export { s as OrSelectV3 } from './OrSelect-52cfb10d.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';

package/dist/v3/index2.js

@@ -58,7 +58,7 @@ export { s as OrRadio } from './OrRadio-c3ab11f2.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioV3 } from './OrRadio-0c1883f2.js';
 export { s as OrSearchV3 } from './OrSearch-375eab55.js';
-export { s as OrSegmentedControlsV3, S as SegmentedControlsSize } from './OrSegmentedControls-e4522910.js';
+export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-e45af169.js';
 export { s as OrSelect } from './OrSelect-056731af.js';
 export { s as OrSelectV3 } from './OrSelect-52cfb10d.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';

package/dist/v3/index63.js

@@ -1,4 +1,4 @@
-export { s as OrSegmentedControlsV3, S as SegmentedControlsSize } from './OrSegmentedControls-e4522910.js';
+export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-e45af169.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.62.7-beta.1922.0",
+  "version": "2.62.7-beta.1928.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

package/src/components/index.ts

@@ -58,7 +58,7 @@ export * from './or-radio';
 export * from './or-radio-group';
 export * from './or-radio-v3';
 export * from './or-search-v3';
-export * from './or-segmented-controls-v3';
+export * from './or-segmented-control-v3';
 export * from './or-select';
 export * from './or-select-v3';
 export * from './or-sidebar';

package/src/components/or-checkbox-v3/OrCheckbox.stories3.ts

@@ -27,7 +27,7 @@ export default {
     },
 
     value: { // TODO: Remove Vue 2 fallback
-      control: { type: 'object' },
+      table: { disable: true },
     },
 
     inputValue: { // TODO: Rename to `value` after complete migration to Vue 3

package/src/components/or-radio-v3/OrRadio.stories3.ts

@@ -27,7 +27,7 @@ export default {
     },
 
     value: { // TODO: Remove Vue 2 fallback
-      control: { type: 'object' },
+      table: { disable: true },
     },
 
     inputValue: { // TODO: Rename to `value` after complete migration to Vue 3

package/src/components/or-segmented-control-v3/OrSegmentedControl.docs.mdx

@@ -0,0 +1,7 @@
+import { DocsPage } from '@storybook/addon-docs';
+
+```ts
+import { OrSegmentedControlV3 as OrSegmentedControl } from '@onereach/ui-components';
+```
+
+<DocsPage />

package/src/components/{or-segmented-controls-v3/OrSegmentedControls.stories3.ts → or-segmented-control-v3/OrSegmentedControl.stories3.ts}

@@ -1,14 +1,14 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/vue3';
 import { ref, watch } from 'vue-demi';
-import OrSegmentedControlsDocs from './OrSegmentedControls.docs.mdx';
-import OrSegmentedControls from './OrSegmentedControls.vue';
-import { SegmentedControlsSize } from './props';
-import { SegmentedControlsOption } from './types';
+import OrSegmentedControlDocs from './OrSegmentedControl.docs.mdx';
+import OrSegmentedControl from './OrSegmentedControl.vue';
+import { SegmentedControlSize } from './props';
+import { SegmentedControlOption } from './types';
 
 export default {
-  title: 'Components/Forms/Segmented Controls',
-  component: OrSegmentedControls,
+  title: 'Components/Forms/Segmented Control',
+  component: OrSegmentedControl,
 
   argTypes: {
     // Props
@@ -21,12 +21,12 @@ export default {
     },
 
     value: { // TODO: Remove Vue 2 fallback
-      control: { type: 'object' },
+      table: { disable: true },
     },
 
     size: {
       control: { type: 'select' },
-      options: Object.values(SegmentedControlsSize),
+      options: Object.values(SegmentedControlSize),
     },
 
     disabled: {
@@ -55,7 +55,7 @@ export default {
     layout: 'centered',
 
     docs: {
-      page: OrSegmentedControlsDocs,
+      page: OrSegmentedControlDocs,
     },
 
     design: {
@@ -63,11 +63,11 @@ export default {
       url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=410%3A2097&t=7N93DAotOYMOX2kx-1',
     },
   },
-} as Meta<typeof OrSegmentedControls>;
+} as Meta<typeof OrSegmentedControl>;
 
-const Template: StoryFn<typeof OrSegmentedControls> = (args) => ({
+const Template: StoryFn<typeof OrSegmentedControl> = (args) => ({
   components: {
-    OrSegmentedControls,
+    OrSegmentedControl,
   },
 
   setup() {
@@ -90,7 +90,7 @@ const Template: StoryFn<typeof OrSegmentedControls> = (args) => ({
   },
 
   template: `
-    <OrSegmentedControls
+    <OrSegmentedControl
       v-model="model"
       v-bind="args"
       @update:modelValue="onUpdateModelValue"
@@ -105,7 +105,7 @@ export const Base = Template.bind({});
 
 Base.args = {
   // Props
-  options: Array.from<string, SegmentedControlsOption>([
+  options: Array.from<string, SegmentedControlOption>([
     'Alfa',
     'Bravo',
     'Charlie',

package/src/components/{or-segmented-controls-v3/OrSegmentedControls.vue → or-segmented-control-v3/OrSegmentedControl.vue}

@@ -4,40 +4,40 @@
     v-bind="$attrs"
     :class="rootStyles"
   >
-    <OrSegmentedControlsItem
+    <OrSegmentedControlItem
       v-for="option in options"
       :key="option.value"
       :size="size"
       :selected="option.value === proxyModelValue"
       :disabled="disabled"
-      @click="proxyModelValue = option.value"
+      @click.stop="proxyModelValue = option.value"
     >
       {{ option.label }}
-    </OrSegmentedControlsItem>
+    </OrSegmentedControlItem>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
-import OrSegmentedControlsItem from './components/or-segmented-controls-item/OrSegmentedControlsItem.vue';
-import { SegmentedControlsSize } from './props';
-import { SegmentedControlsRoot, SegmentedControlsRootSizes } from './styles';
-import { SegmentedControlsOption } from './types';
+import OrSegmentedControlItem from './components/or-segmented-control-item/OrSegmentedControlItem.vue';
+import { SegmentedControlSize } from './props';
+import { SegmentedControlRoot, SegmentedControlRootSizes } from './styles';
+import { SegmentedControlOption } from './types';
 
 export default defineComponent({
-  name: 'OrSegmentedControls',
+  name: 'OrSegmentedControl',
 
   components: {
-    OrSegmentedControlsItem,
+    OrSegmentedControlItem,
   },
 
   inheritAttrs: false,
 
   props: {
     options: {
-      type: Array as PropType<SegmentedControlsOption[]>,
-      default: [] as SegmentedControlsOption[],
+      type: Array as PropType<SegmentedControlOption[]>,
+      default: [] as SegmentedControlOption[],
     },
 
     modelValue: {
@@ -51,8 +51,8 @@ export default defineComponent({
     },
 
     size: {
-      type: String as PropType<SegmentedControlsSize>,
-      default: SegmentedControlsSize.M,
+      type: String as PropType<SegmentedControlSize>,
+      default: SegmentedControlSize.M,
     },
 
     disabled: {
@@ -81,9 +81,9 @@ export default defineComponent({
     const classAttribute = useClassAttribute();
 
     const rootStyles = computed(() => [
-      'or-segmented-controls',
-      ...SegmentedControlsRoot,
-      ...SegmentedControlsRootSizes[props.size],
+      'or-segmented-control',
+      ...SegmentedControlRoot,
+      ...SegmentedControlRootSizes[props.size],
       classAttribute.value,
     ]);
 

package/src/components/{or-segmented-controls-v3/components/or-segmented-controls-item/OrSegmentedControlsItem.vue → or-segmented-control-v3/components/or-segmented-control-item/OrSegmentedControlItem.vue}

@@ -15,17 +15,17 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { useClassAttribute } from '../../../../hooks';
-import { SegmentedControlsSize } from '../../props';
-import { SegmentedControlsItemRoot, SegmentedControlsItemRootSizes } from './styles';
+import { SegmentedControlSize } from '../../props';
+import { SegmentedControlItemRoot, SegmentedControlItemRootSizes } from './styles';
 
 export default defineComponent({
-  name: 'OrSegmentedControlsItem',
+  name: 'OrSegmentedControlItem',
 
   inheritAttrs: false,
 
   props: {
     size: {
-      type: String as PropType<SegmentedControlsSize>,
+      type: String as PropType<SegmentedControlSize>,
       required: true,
     },
 
@@ -48,9 +48,9 @@ export default defineComponent({
     const classAttribute = useClassAttribute();
 
     const rootStyles = computed(() => [
-      'or-segmented-controls-item',
-      ...SegmentedControlsItemRoot,
-      ...SegmentedControlsItemRootSizes[props.size],
+      'or-segmented-control-item',
+      ...SegmentedControlItemRoot,
+      ...SegmentedControlItemRootSizes[props.size],
       classAttribute.value,
     ]);
 

package/src/components/{or-segmented-controls-v3/components/or-segmented-controls-item → or-segmented-control-v3/components/or-segmented-control-item}/styles.ts

@@ -1,6 +1,6 @@
-import { SegmentedControlsSize } from '../../props';
+import { SegmentedControlSize } from '../../props';
 
-export const SegmentedControlsItemRoot: string[] = [
+export const SegmentedControlItemRoot: string[] = [
   // Layout
   'flex',
   'items-center',
@@ -25,7 +25,7 @@ export const SegmentedControlsItemRoot: string[] = [
   'dark:selected:enabled:shadow-card-dark',
 ];
 
-export const SegmentedControlsItemRootSizes: Record<SegmentedControlsSize, string[]> = {
+export const SegmentedControlItemRootSizes: Record<SegmentedControlSize, string[]> = {
   'm': [
     // Box
     'h-[44px] md:h-[36px]',

package/src/components/or-segmented-control-v3/index.ts

@@ -0,0 +1,3 @@
+export { default as OrSegmentedControlV3 } from './OrSegmentedControl.vue';
+export * from './props';
+export * from './types';

package/src/components/or-segmented-control-v3/props.ts

@@ -0,0 +1,4 @@
+export enum SegmentedControlSize {
+  M = 'm',
+  S = 's',
+}

package/src/components/{or-segmented-controls-v3 → or-segmented-control-v3}/styles.ts

@@ -1,6 +1,6 @@
-import { SegmentedControlsSize } from './props';
+import { SegmentedControlSize } from './props';
 
-export const SegmentedControlsRoot: string[] = [
+export const SegmentedControlRoot: string[] = [
   // Layout
   'grid',
   'grid-flow-col',
@@ -18,7 +18,7 @@ export const SegmentedControlsRoot: string[] = [
   'dark:theme-background-surface-variant-dark',
 ];
 
-export const SegmentedControlsRootSizes: Record<SegmentedControlsSize, string[]> = {
+export const SegmentedControlRootSizes: Record<SegmentedControlSize, string[]> = {
   'm': [],
   's': [],
 };

package/src/components/or-segmented-control-v3/types.ts

@@ -0,0 +1,4 @@
+export interface SegmentedControlOption {
+  value: string;
+  label: string;
+}

package/src/components/or-switch-v3/OrSwitch.stories3.ts

@@ -27,7 +27,7 @@ export default {
     },
 
     value: { // TODO: Remove Vue 2 fallback
-      control: { type: 'object' },
+      table: { disable: true },
     },
 
     inputValue: { // TODO: Rename to `value` after complete migration to Vue 3

package/dist/v2/components/or-segmented-controls-v3/components/or-segmented-controls-item/styles.d.ts

@@ -1,3 +0,0 @@
-import { SegmentedControlsSize } from '../../props';
-export declare const SegmentedControlsItemRoot: string[];
-export declare const SegmentedControlsItemRootSizes: Record<SegmentedControlsSize, string[]>;

package/dist/v2/components/or-segmented-controls-v3/index.d.ts

@@ -1,3 +0,0 @@
-export { default as OrSegmentedControlsV3 } from './OrSegmentedControls.vue';
-export * from './props';
-export * from './types';

package/dist/v2/components/or-segmented-controls-v3/props.d.ts

@@ -1,4 +0,0 @@
-export declare enum SegmentedControlsSize {
-    M = "m",
-    S = "s"
-}

package/dist/v2/components/or-segmented-controls-v3/styles.d.ts

@@ -1,3 +0,0 @@
-import { SegmentedControlsSize } from './props';
-export declare const SegmentedControlsRoot: string[];
-export declare const SegmentedControlsRootSizes: Record<SegmentedControlsSize, string[]>;

package/dist/v2/components/or-segmented-controls-v3/types.d.ts

@@ -1,4 +0,0 @@
-export interface SegmentedControlsOption {
-    value: string;
-    label: string;
-}

package/dist/v3/components/or-segmented-controls-v3/components/or-segmented-controls-item/styles.d.ts

@@ -1,3 +0,0 @@
-import { SegmentedControlsSize } from '../../props';
-export declare const SegmentedControlsItemRoot: string[];
-export declare const SegmentedControlsItemRootSizes: Record<SegmentedControlsSize, string[]>;

package/dist/v3/components/or-segmented-controls-v3/index.d.ts

@@ -1,3 +0,0 @@
-export { default as OrSegmentedControlsV3 } from './OrSegmentedControls.vue';
-export * from './props';
-export * from './types';

package/dist/v3/components/or-segmented-controls-v3/props.d.ts

@@ -1,4 +0,0 @@
-export declare enum SegmentedControlsSize {
-    M = "m",
-    S = "s"
-}

package/dist/v3/components/or-segmented-controls-v3/styles.d.ts

@@ -1,3 +0,0 @@
-import { SegmentedControlsSize } from './props';
-export declare const SegmentedControlsRoot: string[];
-export declare const SegmentedControlsRootSizes: Record<SegmentedControlsSize, string[]>;

package/dist/v3/components/or-segmented-controls-v3/types.d.ts

@@ -1,4 +0,0 @@
-export interface SegmentedControlsOption {
-    value: string;
-    label: string;
-}

package/src/components/or-segmented-controls-v3/OrSegmentedControls.docs.mdx

@@ -1,7 +0,0 @@
-import { DocsPage } from '@storybook/addon-docs';
-
-```ts
-import { OrSegmentedControlsV3 as OrSegmentedControls } from '@onereach/ui-components';
-```
-
-<DocsPage />

package/src/components/or-segmented-controls-v3/index.ts

@@ -1,3 +0,0 @@
-export { default as OrSegmentedControlsV3 } from './OrSegmentedControls.vue';
-export * from './props';
-export * from './types';

package/src/components/or-segmented-controls-v3/props.ts

@@ -1,4 +0,0 @@
-export enum SegmentedControlsSize {
-  M = 'm',
-  S = 's',
-}

package/src/components/or-segmented-controls-v3/types.ts

@@ -1,4 +0,0 @@
-export interface SegmentedControlsOption {
-  value: string;
-  label: string;
-}