@onereach/ui-components 5.0.2-beta.3149.0 → 5.0.2-beta.3150.0

package/dist/bundled/v2/components/OrBottomSheetV3/OrBottomSheet.js

@@ -1,8 +1,8 @@
 import { o as onClickOutside } from '../../index-509d77a1.js';
-import { defineComponent, ref, toRefs, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import useBottomSheetSwipeState from './hooks/useBottomSheetSwipeState.js';
 import { BottomSheetVariant } from './props.js';
-import { BottomSheet, BottomSheetVariants, BottomSheetHandle, BottomSheetHeader, BottomSheetContent } from './styles.js';
+import { BottomSheet, BottomSheetVariants, BottomSheetHandle, BottomSheetHeader } from './styles.js';
 import __vue_component__$1 from '../OrOverlayV3/OrOverlay.js';
 import { usePopoverState } from '../../hooks/usePopoverState.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
@@ -39,29 +39,23 @@ var script = defineComponent({
     // Refs
     const root = ref();
     const content = ref();
-    // Props
-    const {
-      variant,
-      isOpen
-    } = toRefs(props);
+    // Styles
+    const rootStyles = computed(() => ['or-bottom-sheet-v3', ...BottomSheet, ...BottomSheetVariants[props.variant]]);
+    const handleStyles = computed(() => [...BottomSheetHandle]);
+    const headerStyles = computed(() => [...BottomSheetHeader]);
     // State
     const {
       state,
       open,
       close,
       toggle
-    } = usePopoverState(isOpen, context.emit);
+    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const fullscreen = ref(false);
-    // Styles
-    const rootStyles = computed(() => ['or-bottom-sheet-v3', ...BottomSheet, ...BottomSheetVariants[props.variant]]);
-    const handleStyles = computed(() => [...BottomSheetHandle]);
-    const headerStyles = computed(() => [...BottomSheetHeader]);
-    const contentStyles = computed(() => [...BottomSheetContent, fullscreen.value || variant.value === 'basic' ? 'overflow-y-auto' : 'overflow-hidden']);
     // Effects
     // #region Swipe
     const {
       rootInlineStyles
-    } = useBottomSheetSwipeState(root, content, fullscreen, variant, close);
+    } = useBottomSheetSwipeState(root, content, fullscreen, toRef(props, 'variant'), close);
     // #endregion
     watch(state, value => {
       if (value === 'closed') {
@@ -88,7 +82,6 @@ var script = defineComponent({
       rootInlineStyles,
       handleStyles,
       headerStyles,
-      contentStyles,
       state,
       fullscreen,
       open,
@@ -120,7 +113,7 @@ var __vue_render__ = function () {
     class: _vm.headerStyles
   }, [_vm._t("header")], 2), _vm._v(" "), _c('div', {
     ref: "content",
-    class: _vm.contentStyles
+    class: ['grow', _vm.fullscreen || _vm.variant === 'basic' ? 'overflow-y-auto' : 'overflow-hidden']
   }, [_vm._t("default")], 2)], 2)]) : _vm._e();
 };
 var __vue_staticRenderFns__ = [];

package/dist/bundled/v2/components/OrBottomSheetV3/OrBottomSheet.vue.d.ts

@@ -531,7 +531,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     }>;
     handleStyles: import("@vue/composition-api").ComputedRef<string[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     fullscreen: import("@vue/composition-api").Ref<boolean>;
     open: () => void;
@@ -1091,7 +1090,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     }>;
     handleStyles: import("@vue/composition-api").ComputedRef<string[]>;
     headerStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    contentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     fullscreen: import("@vue/composition-api").Ref<boolean>;
     open: () => void;

package/dist/bundled/v2/components/OrBottomSheetV3/styles.d.ts

@@ -3,4 +3,3 @@ export declare const BottomSheet: string[];
 export declare const BottomSheetVariants: Record<BottomSheetVariant, string[]>;
 export declare const BottomSheetHandle: string[];
 export declare const BottomSheetHeader: string[];
-export declare const BottomSheetContent: string[];

package/dist/bundled/v2/components/OrBottomSheetV3/styles.js

@@ -41,8 +41,5 @@ const BottomSheetHeader = [
 'px-lg', 'py-md',
 // Typography
 'typography-headline-3'];
-const BottomSheetContent = [
-// Layout
-'layout-column', 'grow'];
 
-export { BottomSheet, BottomSheetContent, BottomSheetHandle, BottomSheetHeader, BottomSheetVariants };
+export { BottomSheet, BottomSheetHandle, BottomSheetHeader, BottomSheetVariants };

package/dist/bundled/v2/components/OrCheckboxV3/OrCheckbox.js

@@ -104,7 +104,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-07623e1e]{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:0}";
+var css_248z = "input[data-v-9968416e]{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:0}";
 styleInject(css_248z);
 
 /* script */
@@ -145,6 +145,7 @@ var __vue_render__ = function () {
     attrs: {
       "control-id": _vm.controlAttributes.id,
       "variant": _vm.labelVariant,
+      "selected": _vm.isChecked,
       "required": _vm.required,
       "disabled": _vm.disabled
     },
@@ -164,7 +165,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-07623e1e";
+const __vue_scope_id__ = "data-v-9968416e";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrCheckboxV3/OrCheckbox.vue.d.ts

@@ -29,7 +29,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     labelVariant: {
-        type: PropType<"input" | "toggle">;
+        type: PropType<"input" | "toggle" | "menu-item">;
         default: LabelVariant;
     };
     indeterminate: {
@@ -58,7 +58,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     labelVariant: {
-        type: PropType<"input" | "toggle">;
+        type: PropType<"input" | "toggle" | "menu-item">;
         default: LabelVariant;
     };
     indeterminate: {
@@ -77,7 +77,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: any;
     value: string | number | boolean | object;
     label: string;
-    labelVariant: "input" | "toggle";
+    labelVariant: "input" | "toggle" | "menu-item";
     indeterminate: boolean;
     required: boolean;
     disabled: boolean;
@@ -102,7 +102,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: any;
     value: string | number | boolean | object;
     label: string;
-    labelVariant: "input" | "toggle";
+    labelVariant: "input" | "toggle" | "menu-item";
     indeterminate: boolean;
     required: boolean;
     disabled: boolean;
@@ -112,7 +112,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: any;
     value: string | number | boolean | object;
     label: string;
-    labelVariant: "input" | "toggle";
+    labelVariant: "input" | "toggle" | "menu-item";
     indeterminate: boolean;
     required: boolean;
     disabled: boolean;

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-f013aba1.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-a4f77733.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a3097661.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import { DatePicker, DatePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';

package/dist/bundled/v2/components/OrDatePickerV3/index.js

@@ -2,7 +2,7 @@ export { default as OrDatePickerV3 } from './OrDatePicker.js';
 export { InputBoxSize as DatePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-f013aba1.js';
+import '../../OrDateTimePickerMonthSelect-a3097661.js';
 import '../OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';
@@ -46,7 +46,7 @@ import '../OrMenuV3/OrMenu.js';
 import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-a4f77733.js';
+import '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from './hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-f013aba1.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-a4f77733.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a3097661.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-e57095bf.js';
 import { DateTimePickerTimeFormat } from './props.js';
 import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './styles.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/index.js

@@ -3,7 +3,7 @@ export { DateTimePickerTimeFormat } from './props.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import './hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-f013aba1.js';
+import '../../OrDateTimePickerMonthSelect-a3097661.js';
 import './hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';
@@ -47,7 +47,7 @@ import '../OrMenuV3/OrMenu.js';
 import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-a4f77733.js';
+import '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';

package/dist/bundled/v2/components/OrInputV3/OrInput.js

@@ -171,7 +171,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-76960543]{min-width:0;background:0 0;outline:0}input[type=number][data-v-76960543]::-webkit-inner-spin-button{display:none}input[type=search][data-v-76960543]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-fea72d76]{min-width:0;background:0 0;outline:0}input[type=number][data-v-fea72d76]::-webkit-inner-spin-button{display:none}input[type=search][data-v-fea72d76]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -431,7 +431,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-76960543";
+const __vue_scope_id__ = "data-v-fea72d76";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrLabelV3/OrLabel.js

@@ -1,10 +1,9 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { LabelVariant } from './props.js';
-import { LabelRoot, LabelRootVariants, LabelText, LabelAddon } from './styles.js';
+import { Label, LabelVariants, LabelText, LabelAddon } from './styles.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
-  name: 'OrLabel',
   props: {
     controlId: {
       type: String,
@@ -14,6 +13,10 @@ var script = defineComponent({
       type: String,
       default: LabelVariant.Input
     },
+    selected: {
+      type: Boolean,
+      default: false
+    },
     required: {
       type: Boolean,
       default: false
@@ -28,7 +31,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-label-v3', ...LabelRoot, ...LabelRootVariants[props.variant]]);
+    const rootStyles = computed(() => ['or-label-v3', ...Label, ...LabelVariants[props.variant]]);
     const textStyles = computed(() => [...LabelText]);
     const addonStyles = computed(() => [...LabelAddon]);
     return {
@@ -52,6 +55,7 @@ var __vue_render__ = function () {
     ref: "root",
     class: _vm.rootStyles,
     attrs: {
+      "selected": _vm.selected ? '' : null,
       "disabled": _vm.disabled ? '' : null
     }
   }, [_c('label', {

package/dist/bundled/v2/components/OrLabelV3/OrLabel.vue.d.ts

@@ -11,9 +11,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     variant: {
-        type: PropType<"input" | "toggle">;
+        type: PropType<"input" | "toggle" | "menu-item">;
         default: LabelVariant;
     };
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     required: {
         type: BooleanConstructor;
         default: boolean;
@@ -28,9 +32,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     variant: {
-        type: PropType<"input" | "toggle">;
+        type: PropType<"input" | "toggle" | "menu-item">;
         default: LabelVariant;
     };
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     required: {
         type: BooleanConstructor;
         default: boolean;
@@ -41,7 +49,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     controlId: string;
-    variant: "input" | "toggle";
+    variant: "input" | "toggle" | "menu-item";
+    selected: boolean;
     required: boolean;
     disabled: boolean;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -51,12 +60,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     addonStyles: import("@vue/composition-api").ComputedRef<string[]>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
     controlId: string;
-    variant: "input" | "toggle";
+    variant: "input" | "toggle" | "menu-item";
+    selected: boolean;
     required: boolean;
     disabled: boolean;
 } & {}, {
     controlId: string;
-    variant: "input" | "toggle";
+    variant: "input" | "toggle" | "menu-item";
+    selected: boolean;
     required: boolean;
     disabled: boolean;
 }, true>);

package/dist/bundled/v2/components/OrLabelV3/props.d.ts

@@ -1,4 +1,5 @@
 export declare enum LabelVariant {
     Input = "input",
-    Toggle = "toggle"
+    Toggle = "toggle",
+    MenuItem = "menu-item"
 }

package/dist/bundled/v2/components/OrLabelV3/props.js

@@ -2,6 +2,7 @@ var LabelVariant;
 (function (LabelVariant) {
   LabelVariant["Input"] = "input";
   LabelVariant["Toggle"] = "toggle";
+  LabelVariant["MenuItem"] = "menu-item";
 })(LabelVariant || (LabelVariant = {}));
 
 export { LabelVariant };

package/dist/bundled/v2/components/OrLabelV3/styles.d.ts

@@ -1,5 +1,5 @@
 import { LabelVariant } from './props';
-export declare const LabelRoot: string[];
-export declare const LabelRootVariants: Record<LabelVariant, string[]>;
+export declare const Label: string[];
+export declare const LabelVariants: Record<LabelVariant, string[]>;
 export declare const LabelText: string[];
 export declare const LabelAddon: string[];

package/dist/bundled/v2/components/OrLabelV3/styles.js

@@ -1,17 +1,26 @@
-const LabelRoot = [
+import { LabelVariant } from './props.js';
+
+const Label = [
 // Layout
 'layout-row justify-between',
 // Spacing
 'gap-sm'];
-const LabelRootVariants = {
-  'input': [
+const LabelVariants = {
+  [LabelVariant.Input]: [
   // Typography
   'typography-caption-regular',
   // Theme
   'theme-foreground-outline', 'dark:theme-foreground-outline-dark'],
-  'toggle': [
+  [LabelVariant.Toggle]: [
+  // Typography
+  'typography-body-2-regular',
+  // Theme
+  'theme-foreground-default', 'dark:theme-foreground-default-dark'],
+  [LabelVariant.MenuItem]: [
   // Typography
   'typography-body-2-regular',
+  // Typography (selected)
+  'selected:typography-body-2-semibold',
   // Theme
   'theme-foreground-default', 'dark:theme-foreground-default-dark']
 };
@@ -26,4 +35,4 @@ const LabelAddon = [
 // Typography
 'whitespace-nowrap'];
 
-export { LabelAddon, LabelRoot, LabelRootVariants, LabelText };
+export { Label, LabelAddon, LabelText, LabelVariants };