@onereach/ui-components 4.7.5 → 4.7.6

package/dist/bundled/v3/{OrExpansionPanel.vue_vue_type_script_lang-ca9d5307.js → OrExpansionPanel.vue_vue_type_script_lang-d4ed6199.js}

@@ -1,8 +1,7 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import { ExpansionPanelVariant, ExpansionPanelColor, ExpansionPanelBackgroundColor } from './components/OrExpansionPanelV3/props.js';
-import { ExpansionPanel, ExpansionPanelVariants, ExpansionPanelBackgroundColors, ExpansionPanelHeader, ExpansionPanelHeaderColors, ExpansionPanelAddon } from './components/OrExpansionPanelV3/styles.js';
+import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { ExpansionPanelVariant, ExpansionPanelColor } from './components/OrExpansionPanelV3/props.js';
+import { ExpansionPanelRoot, ExpansionPanelRootVariants, ExpansionPanelHeader, ExpansionPanelHeaderColors, ExpansionPanelAddon } from './components/OrExpansionPanelV3/styles.js';
 import './components/OrIconV3/OrIcon.js';
-import { usePopoverState } from './hooks/usePopoverState.js';
 import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-73f9cc63.js';
 
 var script = defineComponent({
@@ -27,40 +26,50 @@ var script = defineComponent({
       type: String,
       default: ExpansionPanelColor.Default
     },
-    backgroundColor: {
-      type: String,
-      default: ExpansionPanelBackgroundColor.Primary
-    },
     disabled: {
       type: Boolean,
       default: false
     }
   },
-  emits: ['update:state', 'open', 'close'],
-  expose: ['root', 'state', 'open', 'close', 'toggle'],
+  emits: ['open', 'close'],
+  expose: ['root', 'open', 'close'],
   setup(props, context) {
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-expansion-panel-v3', ...ExpansionPanel, ...ExpansionPanelVariants[props.variant], ...ExpansionPanelBackgroundColors[`${props.backgroundColor}-${props.variant}`]]);
+    const rootStyles = computed(() => ['or-expansion-panel-v3', ...ExpansionPanelRoot, ...ExpansionPanelRootVariants[props.variant]]);
     const headerStyles = computed(() => [...ExpansionPanelHeader, ...ExpansionPanelHeaderColors[props.color]]);
     const addonStyles = computed(() => [...ExpansionPanelAddon]);
     // State
-    const {
-      state,
-      open,
-      close,
-      toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context);
+    const expanded = ref(false);
+    // Events
+    watch(expanded, value => {
+      context.emit(value ? 'open' : 'close');
+    });
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
+    // Methods
+    function open() {
+      expanded.value = true;
+    }
+    function close() {
+      expanded.value = false;
+    }
     return {
       root,
       rootStyles,
       headerStyles,
       addonStyles,
-      state,
+      expanded,
       open,
-      close,
-      toggle
+      close
     };
   }
 });

package/dist/bundled/v3/{OrSelect.vue_vue_type_script_lang-85fcf3fa.js → OrSelect.vue_vue_type_script_lang-ba73f458.js}

@@ -4,7 +4,7 @@ import { SelectRoot, SelectControl, SelectPlaceholder, SelectDropdown, SelectDro
 import './components/OrCheckboxV3/OrCheckbox.js';
 import './components/OrErrorV3/OrError.js';
 import './components/OrExpansionPanelV3/OrExpansionPanel.js';
-import { s as script$3 } from './OrExpansionPanel.vue_vue_type_script_lang-ca9d5307.js';
+import { s as script$3 } from './OrExpansionPanel.vue_vue_type_script_lang-d4ed6199.js';
 import './components/OrHintV3/OrHint.js';
 import './components/OrIconV3/OrIcon.js';
 import './components/OrInputV3/OrInput.js';

package/dist/bundled/v3/components/OrExpansionPanelV3/OrExpansionPanel.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrExpansionPanel.vue_vue_type_script_lang-ca9d5307.js';
-export { s as default } from '../../OrExpansionPanel.vue_vue_type_script_lang-ca9d5307.js';
+import { s as script } from '../../OrExpansionPanel.vue_vue_type_script_lang-d4ed6199.js';
+export { s as default } from '../../OrExpansionPanel.vue_vue_type_script_lang-d4ed6199.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, createVNode, toDisplayString, renderSlot, withDirectives, vShow } from 'vue';
 import 'vue-demi';
 import './props.js';
@@ -8,8 +8,6 @@ import '../OrIconV3/OrIcon.js';
 import '../../OrIcon.vue_vue_type_script_lang-73f9cc63.js';
 import '../OrIconV3/props.js';
 import '../OrIconV3/styles.js';
-import '../../hooks/usePopoverState.js';
-import '../../index-f4d8e24c.js';
 
 const _hoisted_1 = ["disabled"];
 const _hoisted_2 = {
@@ -29,14 +27,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.headerStyles),
     tabindex: !_ctx.disabled ? 0 : null,
     disabled: _ctx.disabled ? '' : null,
-    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.toggle(), ["stop"]))
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.expanded ? _ctx.close() : _ctx.open(), ["stop"]))
   }, [createVNode(_component_OrIcon, {
-    class: normalizeClass([_ctx.state === 'open' ? 'rotate-0' : 'rotate-[-90deg]']),
+    class: normalizeClass([_ctx.expanded ? 'rotate-0' : 'rotate-[-90deg]']),
     icon: 'expand_more',
     variant: 'filled-bold'
   }, null, 8 /* PROPS */, ["class"]), createElementVNode("span", _hoisted_4, toDisplayString(_ctx.label), 1 /* TEXT */)], 10 /* CLASS, PROPS */, _hoisted_3), createElementVNode("div", {
     class: normalizeClass(_ctx.addonStyles)
-  }, [renderSlot(_ctx.$slots, "addon")], 2 /* CLASS */)]), withDirectives(createElementVNode("div", null, [renderSlot(_ctx.$slots, "default")], 512 /* NEED_PATCH */), [[vShow, _ctx.state === 'open']])], 10 /* CLASS, PROPS */, _hoisted_1);
+  }, [renderSlot(_ctx.$slots, "addon")], 2 /* CLASS */)]), withDirectives(createElementVNode("div", null, [renderSlot(_ctx.$slots, "default")], 512 /* NEED_PATCH */), [[vShow, _ctx.expanded]])], 10 /* CLASS, PROPS */, _hoisted_1);
 }
 
 script.render = render;

package/dist/bundled/v3/components/OrExpansionPanelV3/OrExpansionPanel.vue.d.ts

@@ -1,26 +1,22 @@
 import { PropType } from 'vue-demi';
-import { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant } from './props';
+import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
 declare const _default: import("vue-demi").DefineComponent<{
     label: {
         type: StringConstructor;
         required: true;
     };
     isOpen: {
-        type: BooleanConstructor;
+        type: PropType<boolean>;
         default: boolean;
     };
     variant: {
-        type: PropType<"default" | "card">;
+        type: PropType<ExpansionPanelVariant>;
         default: ExpansionPanelVariant;
     };
     color: {
-        type: PropType<"default" | "danger">;
+        type: PropType<ExpansionPanelColor>;
         default: ExpansionPanelColor;
     };
-    backgroundColor: {
-        type: PropType<"primary" | "secondary" | "inherit">;
-        default: ExpansionPanelBackgroundColor;
-    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -30,44 +26,37 @@ declare const _default: import("vue-demi").DefineComponent<{
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     headerStyles: import("vue-demi").ComputedRef<string[]>;
     addonStyles: import("vue-demi").ComputedRef<string[]>;
-    state: import("vue-demi").Ref<"open" | "closed">;
+    expanded: import("vue-demi").Ref<boolean>;
     open: () => void;
     close: () => void;
-    toggle: () => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:state" | "open" | "close")[], "update:state" | "open" | "close", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("open" | "close")[], "open" | "close", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     label: {
         type: StringConstructor;
         required: true;
     };
     isOpen: {
-        type: BooleanConstructor;
+        type: PropType<boolean>;
         default: boolean;
     };
     variant: {
-        type: PropType<"default" | "card">;
+        type: PropType<ExpansionPanelVariant>;
         default: ExpansionPanelVariant;
     };
     color: {
-        type: PropType<"default" | "danger">;
+        type: PropType<ExpansionPanelColor>;
         default: ExpansionPanelColor;
     };
-    backgroundColor: {
-        type: PropType<"primary" | "secondary" | "inherit">;
-        default: ExpansionPanelBackgroundColor;
-    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>> & {
-    "onUpdate:state"?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     isOpen: boolean;
-    variant: "default" | "card";
-    color: "default" | "danger";
-    backgroundColor: "primary" | "secondary" | "inherit";
+    variant: ExpansionPanelVariant;
+    color: ExpansionPanelColor;
     disabled: boolean;
 }>;
 export default _default;

package/dist/bundled/v3/components/OrExpansionPanelV3/index.js

@@ -1,5 +1,5 @@
-export { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant } from './props.js';
-export { s as OrExpansionPanelV3 } from '../../OrExpansionPanel.vue_vue_type_script_lang-ca9d5307.js';
+export { ExpansionPanelColor, ExpansionPanelVariant } from './props.js';
+export { s as OrExpansionPanelV3 } from '../../OrExpansionPanel.vue_vue_type_script_lang-d4ed6199.js';
 import 'vue-demi';
 import './styles.js';
 import '../OrIconV3/OrIcon.js';
@@ -7,5 +7,3 @@ import '../../OrIcon.vue_vue_type_script_lang-73f9cc63.js';
 import '../OrIconV3/props.js';
 import '../OrIconV3/styles.js';
 import 'vue';
-import '../../hooks/usePopoverState.js';
-import '../../index-f4d8e24c.js';

package/dist/bundled/v3/components/OrExpansionPanelV3/props.d.ts

@@ -6,8 +6,3 @@ export declare enum ExpansionPanelColor {
     Default = "default",
     Danger = "danger"
 }
-export declare enum ExpansionPanelBackgroundColor {
-    Primary = "primary",
-    Secondary = "secondary",
-    Inherit = "inherit"
-}

package/dist/bundled/v3/components/OrExpansionPanelV3/props.js

@@ -8,11 +8,5 @@ var ExpansionPanelColor;
   ExpansionPanelColor["Default"] = "default";
   ExpansionPanelColor["Danger"] = "danger";
 })(ExpansionPanelColor || (ExpansionPanelColor = {}));
-var ExpansionPanelBackgroundColor;
-(function (ExpansionPanelBackgroundColor) {
-  ExpansionPanelBackgroundColor["Primary"] = "primary";
-  ExpansionPanelBackgroundColor["Secondary"] = "secondary";
-  ExpansionPanelBackgroundColor["Inherit"] = "inherit";
-})(ExpansionPanelBackgroundColor || (ExpansionPanelBackgroundColor = {}));
 
-export { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant };
+export { ExpansionPanelColor, ExpansionPanelVariant };

package/dist/bundled/v3/components/OrExpansionPanelV3/styles.d.ts

@@ -1,7 +1,6 @@
-import { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant } from './props';
-export declare const ExpansionPanel: string[];
-export declare const ExpansionPanelVariants: Record<ExpansionPanelVariant, string[]>;
-export declare const ExpansionPanelBackgroundColors: Record<`${ExpansionPanelBackgroundColor}-${ExpansionPanelVariant}`, string[]>;
+import { ExpansionPanelColor, ExpansionPanelVariant } from './props';
+export declare const ExpansionPanelRoot: string[];
+export declare const ExpansionPanelRootVariants: Record<ExpansionPanelVariant, string[]>;
 export declare const ExpansionPanelHeader: string[];
 export declare const ExpansionPanelHeaderColors: Record<ExpansionPanelColor, string[]>;
 export declare const ExpansionPanelAddon: string[];

package/dist/bundled/v3/components/OrExpansionPanelV3/styles.js

@@ -1,7 +1,7 @@
-const ExpansionPanel = [
+const ExpansionPanelRoot = [
 // Layout
 'layout-column'];
-const ExpansionPanelVariants = {
+const ExpansionPanelRootVariants = {
   'default': [
   // Spacing
   'gap-sm'],
@@ -9,21 +9,9 @@ const ExpansionPanelVariants = {
   // Shape
   'rounded-md',
   // Spacing
-  'px-md', 'py-md', 'gap-md']
-};
-const ExpansionPanelBackgroundColors = {
-  'primary-default': [],
-  'primary-card': [
-  // Theme
-  'theme-background-surface-1', 'dark:theme-background-surface-1-dark'],
-  'secondary-default': [],
-  'secondary-card': [
-  // Theme
-  'theme-background-surface-3', 'dark:theme-background-surface-3-dark'],
-  'inherit-default': [],
-  'inherit-card': [
+  'px-md', 'py-md', 'gap-md',
   // Theme
-  'theme-background-inherit', 'dark:theme-background-inherit']
+  'theme-background-surface-1', 'dark:theme-background-surface-1-dark']
 };
 const ExpansionPanelHeader = [
 // Layout
@@ -62,4 +50,4 @@ const ExpansionPanelAddon = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
-export { ExpansionPanel, ExpansionPanelAddon, ExpansionPanelBackgroundColors, ExpansionPanelHeader, ExpansionPanelHeaderColors, ExpansionPanelVariants };
+export { ExpansionPanelAddon, ExpansionPanelHeader, ExpansionPanelHeaderColors, ExpansionPanelRoot, ExpansionPanelRootVariants };

package/dist/bundled/v3/components/OrSelectV3/OrSelect.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrSelect.vue_vue_type_script_lang-85fcf3fa.js';
-export { s as default } from '../../OrSelect.vue_vue_type_script_lang-85fcf3fa.js';
+import { s as script } from '../../OrSelect.vue_vue_type_script_lang-ba73f458.js';
+export { s as default } from '../../OrSelect.vue_vue_type_script_lang-ba73f458.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, createVNode, withModifiers, vShow } from 'vue';
 import 'vue-demi';
 import '../../utils/isEmptyValue.js';
@@ -20,14 +20,13 @@ import '../OrErrorV3/OrError.js';
 import '../../OrError.vue_vue_type_script_lang-df7b5e32.js';
 import '../OrErrorV3/styles.js';
 import '../OrExpansionPanelV3/OrExpansionPanel.js';
-import '../../OrExpansionPanel.vue_vue_type_script_lang-ca9d5307.js';
+import '../../OrExpansionPanel.vue_vue_type_script_lang-d4ed6199.js';
 import '../OrExpansionPanelV3/props.js';
 import '../OrExpansionPanelV3/styles.js';
 import '../OrIconV3/OrIcon.js';
 import '../../OrIcon.vue_vue_type_script_lang-73f9cc63.js';
 import '../OrIconV3/props.js';
 import '../OrIconV3/styles.js';
-import '../../hooks/usePopoverState.js';
 import '../OrHintV3/OrHint.js';
 import '../../OrHint.vue_vue_type_script_lang-0f5e8377.js';
 import '../OrHintV3/styles.js';
@@ -59,6 +58,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import '../../OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrInputBoxV3/OrInputBox.js';
 import '../../OrInputBox.vue_vue_type_script_lang-ede24b04.js';

package/dist/bundled/v3/components/OrSelectV3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-85fcf3fa.js';
+export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-ba73f458.js';
 export { InputBoxSize as SelectSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../../utils/isEmptyValue.js';
@@ -20,14 +20,13 @@ import '../OrErrorV3/OrError.js';
 import '../../OrError.vue_vue_type_script_lang-df7b5e32.js';
 import '../OrErrorV3/styles.js';
 import '../OrExpansionPanelV3/OrExpansionPanel.js';
-import '../../OrExpansionPanel.vue_vue_type_script_lang-ca9d5307.js';
+import '../../OrExpansionPanel.vue_vue_type_script_lang-d4ed6199.js';
 import '../OrExpansionPanelV3/props.js';
 import '../OrExpansionPanelV3/styles.js';
 import '../OrIconV3/OrIcon.js';
 import '../../OrIcon.vue_vue_type_script_lang-73f9cc63.js';
 import '../OrIconV3/props.js';
 import '../OrIconV3/styles.js';
-import '../../hooks/usePopoverState.js';
 import '../OrHintV3/OrHint.js';
 import '../../OrHint.vue_vue_type_script_lang-0f5e8377.js';
 import '../OrHintV3/styles.js';
@@ -58,6 +57,7 @@ import '../OrTeleportV3/OrTeleport.js';
 import '../../OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrInputBoxV3/OrInputBox.js';
 import '../../OrInputBox.vue_vue_type_script_lang-ede24b04.js';

package/dist/bundled/v3/components/index.js

@@ -44,8 +44,8 @@ export { EmptyStateSize } from './OrEmptyStateV3/props.js';
 export { s as OrError } from '../OrError.vue_vue_type_script_lang-450321b8.js';
 export { s as OrErrorTagV3 } from '../OrErrorTag.vue_vue_type_script_lang-a4be8f6a.js';
 export { s as OrErrorV3 } from '../OrError.vue_vue_type_script_lang-df7b5e32.js';
-export { s as OrExpansionPanelV3 } from '../OrExpansionPanel.vue_vue_type_script_lang-ca9d5307.js';
-export { ExpansionPanelBackgroundColor, ExpansionPanelColor, ExpansionPanelVariant } from './OrExpansionPanelV3/props.js';
+export { s as OrExpansionPanelV3 } from '../OrExpansionPanel.vue_vue_type_script_lang-d4ed6199.js';
+export { ExpansionPanelColor, ExpansionPanelVariant } from './OrExpansionPanelV3/props.js';
 export { s as OrFabV3 } from '../OrFab.vue_vue_type_script_lang-e2723ddc.js';
 export { FabColor } from './OrFabV3/props.js';
 export { s as OrFloating } from '../OrFloating.vue_vue_type_script_lang-d762f4b0.js';
@@ -113,7 +113,7 @@ export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-8a82fdc6.j
 export { s as OrSegmentedControlV3 } from '../OrSegmentedControl.vue_vue_type_script_lang-ed0d9fe7.js';
 export { SegmentedControlSize } from './OrSegmentedControlV3/props.js';
 export { s as OrSelect } from '../OrSelect.vue_vue_type_script_lang-45cf8f8c.js';
-export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-85fcf3fa.js';
+export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-ba73f458.js';
 export { s as OrSidebar } from '../OrSidebar.vue_vue_type_script_lang-56608f4a.js';
 export { OrSidebarSide } from './OrSidebar/constants.js';
 export { s as OrSidebarV3 } from '../OrSidebar.vue_vue_type_script_lang-3d9676ea.js';