@onereach/ui-components 25.1.2 → 25.1.3-beta.5771.0

package/dist/esm/{OrInput-BqDsy3wR.mjs.map → OrInput-BrJzxNyE.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"OrInput-BqDsy3wR.mjs","sources":["../../../components/or-input-v3/src/styles.ts","../../../components/or-input-v3/src/types.ts","../../../components/or-input-v3/src/OrInput.vue"],"sourcesContent":["export const Input: string[] = [\n  // Layout\n  'layout-column',\n\n  // Spacing\n  'gap-xs',\n];\n\nexport const InputControl: string[] = [\n  // Box\n  'flex-auto',\n\n  // Typography\n  'typography-inherit',\n\n  // Theme (placeholder)\n  'placeholder:theme-foreground-outline',\n  'dark:placeholder:theme-foreground-outline-dark',\n\n  // Autofill hack,\n  // disable (delay color change)\n  'autofill:transition-colors autofill:duration-[5000s]',\n  // override background color using box-shadow\n  'autofill:shadow-[10px_0_1000px_theme(backgroundColor.primary-opacity-0-08)_inset]',\n  'dark:autofill:shadow-[0_0_0px_1000px_theme(backgroundColor.primary-opacity-0-08-dark)_inset]',\n];\n","import { ModelValue } from '@onereach/ui-components-common/types';\n\nexport type InputModelValue = ModelValue<string | number>;\n\nexport enum InputType {\n  Text = 'text',\n  Number = 'number',\n  Password = 'password',\n  Search = 'search',\n}\n\nexport enum InputMode {\n  None = 'none',\n  Text = 'text',\n  Tel = 'tel',\n  Url = 'url',\n  Email = 'email',\n  Numeric = 'numeric',\n  Decimal = 'decimal',\n  Search = 'search',\n}\n","<template>\n  <div\n    :ref=\"'root'\"\n    :class=\"rootStyles\"\n  >\n    <template v-if=\"$slots.label || $slots.addon || label\">\n      <OrLabel\n        :control-id=\"attributes.id\"\n        :variant=\"'input'\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n      >\n        <slot name=\"label\">\n          {{ label }}\n        </slot>\n\n        <template v-slot:addon>\n          <slot name=\"addon\" />\n        </template>\n      </OrLabel>\n    </template>\n\n    <div class=\"layout-row gap-md md:gap-md\">\n      <slot name=\"prepend\" />\n      <OrInputBox\n        :variant=\"variant\"\n        :size=\"size\"\n        :invalid=\"!!error\"\n        :readonly=\"readonly || loading\"\n        :disabled=\"disabled\"\n      >\n        <template\n          v-if=\"$slots.prependInner\"\n          v-slot:prepend\n        >\n          <slot name=\"prependInner\" />\n        </template>\n        <input\n          :ref=\"'control'\"\n          v-bind=\"attributes\"\n          v-model.trim=\"model\"\n          :class=\"controlStyles\"\n          :name=\"name\"\n          :type=\"type === 'password' && disclosed ? 'text' : type\"\n          :inputmode=\"inputmode\"\n          :autocomplete=\"autocomplete\"\n          :placeholder=\"placeholder\"\n          :required=\"required\"\n          :readonly=\"readonly || loading\"\n          :disabled=\"disabled\"\n          @input=\"$emit('input', $event)\"\n          @keydown=\"$emit('keydown', $event)\"\n          @keyup=\"$emit('keyup', $event)\"\n          @focus=\"$emit('focus', $event)\"\n          @blur=\"$emit('blur', $event)\"\n        >\n\n        <template\n          v-if=\"loading || type === 'password' || type === 'search' || $slots.appendInner\"\n          v-slot:addon\n        >\n          <slot name=\"appendInner\">\n            <template v-if=\"loading\">\n              <OrLoader\n                :variant=\"'circular'\"\n                :color=\"error ? 'danger' : 'primary'\"\n                :size=\"isMobile ? 'm' : 's'\"\n              />\n            </template>\n\n            <template v-else>\n              <template v-if=\"type === 'password'\">\n                <OrIconButton\n                  :icon=\"{ icon: disclosed ? 'visibility' : 'visibility_off', variant: 'filled' }\"\n                  :size=\"'l'\"\n                  :color=\"'inherit'\"\n                  :disabled=\"disabled\"\n                  @click.stop=\"disclosed = !disclosed\"\n                />\n              </template>\n\n              <template v-if=\"type === 'search'\">\n                <template v-if=\"modelValue && !readonly\">\n                  <OrIconButton\n                    :icon=\"'close'\"\n                    :color=\"'inherit'\"\n                    :size=\"'l'\"\n                    :disabled=\"disabled\"\n                    @click.stop=\"clear()\"\n                  />\n                </template>\n\n                <template v-else>\n                  <OrIcon\n                    :icon=\"'search'\"\n                    :size=\"'l'\"\n                    :variant=\"'outlined'\"\n                  />\n                </template>\n              </template>\n            </template>\n          </slot>\n        </template>\n      </OrInputBox>\n      <slot name=\"append\" />\n    </div>\n    <template v-if=\"$slots.hint || hint || maxLength\">\n      <OrHint\n        v-show=\"!error\"\n        :disabled=\"disabled\"\n      >\n        <slot name=\"hint\">\n          {{ hint }}\n        </slot>\n\n        <template\n          v-if=\"maxLength\"\n          v-slot:addon\n        >\n          {{ length }} / {{ maxLength }}\n        </template>\n      </OrHint>\n    </template>\n\n    <OrError\n      v-show=\"typeof error === 'string' && error.length > 0\"\n      :disabled=\"disabled\"\n    >\n      {{ error }}\n\n      <template\n        v-if=\"maxLength\"\n        v-slot:addon\n      >\n        {{ length }} / {{ maxLength }}\n      </template>\n    </OrError>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { PropType, computed, defineComponent, reactive, ref, toRef } from 'vue';\nimport { useControlAttributes, useIdAttribute, useProxyModelValue, useResponsive, useValidationAttributes } from '@onereach/ui-components-common/hooks';\nimport { OrErrorV3 as OrError } from '@onereach/ui-components.or-error-v3';\nimport { OrHintV3 as OrHint } from '@onereach/ui-components.or-hint-v3';\nimport { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components.or-icon-button-v3';\nimport { OrIconV3 as OrIcon } from '@onereach/ui-components.or-icon-v3';\nimport { InputBoxSize, InputBoxVariant, OrInputBoxV3 as OrInputBox } from '@onereach/ui-components.or-input-box-v3';\nimport { OrLabelV3 as OrLabel } from '@onereach/ui-components.or-label-v3';\nimport { OrLoaderV3 as OrLoader } from '@onereach/ui-components.or-loader-v3';\nimport * as Styles from './styles';\nimport { InputMode, InputModelValue, InputType } from './types';\n\nexport default defineComponent({\n  name: 'OrInput',\n\n  components: {\n    OrError,\n    OrHint,\n    OrIcon,\n    OrIconButton,\n    OrInputBox,\n    OrLabel,\n    OrLoader,\n  },\n\n  model: {\n    prop: 'modelValue',\n    event: 'update:modelValue',\n  },\n\n  props: {\n    modelValue: {\n      type: undefined as unknown as PropType<InputModelValue>,\n      default: undefined,\n    },\n\n    name: {\n      type: String,\n      default: undefined,\n    },\n\n    type: {\n      type: String as PropType<`${InputType}`>,\n      default: () => InputType.Text,\n    },\n\n    autocomplete: {\n      type: String,\n      default: 'off',\n    },\n\n    inputmode: {\n      type: String as PropType<`${InputMode}`>,\n      default: InputMode.Text,\n    },\n\n    variant: {\n      type: String as PropType<`${InputBoxVariant}`>,\n      default: undefined,\n    },\n\n    size: {\n      type: String as PropType<`${InputBoxSize}`>,\n      default: undefined,\n    },\n\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    placeholder: {\n      type: String,\n      default: undefined,\n    },\n\n    hint: {\n      type: String,\n      default: undefined,\n    },\n\n    error: {\n      type: [String, Boolean],\n      default: undefined,\n    },\n\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    required: {\n      type: Boolean,\n      default: false,\n    },\n\n    readonly: {\n      type: Boolean,\n      default: false,\n    },\n\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    'update:modelValue',\n\n    'input',\n    'keydown',\n    'keyup',\n    'focus',\n    'blur',\n  ],\n\n  expose: [\n    'root',\n\n    'clear',\n    'focus',\n    'blur',\n  ],\n\n  setup(props, context) {\n    const attributes = reactive({\n      id: useIdAttribute(),\n      ...useControlAttributes(),\n      ...useValidationAttributes(),\n    });\n\n    // Refs & Styles\n    const root = ref<HTMLElement>();\n\n    const rootStyles = computed(() => [\n      'or-input-v3',\n      ...Styles.Input,\n      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],\n    ]);\n\n    const control = ref<HTMLInputElement>();\n\n    const controlStyles = computed(() => [\n      ...Styles.InputControl,\n    ]);\n\n    // State\n    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);\n    const disclosed = ref(false);\n\n    const length = computed(() => {\n      return model.value?.toString().length ?? 0;\n    });\n\n    const maxLength = computed(() => {\n      return attributes.maxlength;\n    });\n\n    // Methods\n    function clear(): void {\n      model.value = undefined;\n    }\n\n    function focus(): void {\n      control.value?.focus();\n    }\n\n    function blur(): void {\n      control.value?.blur();\n    }\n\n    // Helpers\n    const { isMobile } = useResponsive();\n\n    return {\n      attributes,\n\n      root,\n      rootStyles,\n\n      control,\n      controlStyles,\n\n      model,\n      disclosed,\n\n      length,\n      maxLength,\n\n      clear,\n      focus,\n      blur,\n\n      isMobile,\n    };\n  },\n});\n</script>\n\n<style scoped>\ninput {\n  min-width: 0;\n  background: none;\n  outline: none;\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button {\n  display: none;\n}\n</style>\n"],"names":["Input","InputControl","InputType","InputMode","_sfc_main","defineComponent","OrError","OrHint","OrIcon","OrIconButton","OrInputBox","OrLabel","OrLoader","props","context","attributes","reactive","useIdAttribute","useControlAttributes","useValidationAttributes","root","ref","rootStyles","computed","Styles.Input","InputBoxVariant","control","controlStyles","Styles.InputControl","model","useProxyModelValue","toRef","disclosed","length","_a","maxLength","clear","focus","blur","isMobile","useResponsive","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_createBlock","_component_OrLabel","_renderSlot","_createCommentVNode","_createElementVNode","_hoisted_1","_createVNode","_component_OrInputBox","_mergeProps","_cache","$event","_withCtx","_component_OrLoader","_Fragment","_component_OrIconButton","_withModifiers","_component_OrIcon","_component_OrHint","_createSlots","_withDirectives","_component_OrError"],"mappings":"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"}
+{"version":3,"file":"OrInput-BrJzxNyE.mjs","sources":["../../../components/or-input-v3/src/styles.ts","../../../components/or-input-v3/src/types.ts","../../../components/or-input-v3/src/OrInput.vue"],"sourcesContent":["export const Input: string[] = [\n  // Layout\n  'layout-column',\n\n  // Spacing\n  'gap-xs',\n];\n\nexport const InputControl: string[] = [\n  // Box\n  'flex-auto',\n\n  // Typography\n  'typography-inherit',\n\n  // Theme (placeholder)\n  'placeholder:theme-foreground-outline',\n  'dark:placeholder:theme-foreground-outline-dark',\n\n  // Autofill hack,\n  // disable (delay color change)\n  'autofill:transition-colors autofill:duration-[5000s]',\n  // override background color using box-shadow\n  'autofill:shadow-[10px_0_1000px_theme(backgroundColor.primary-opacity-0-08)_inset]',\n  'dark:autofill:shadow-[0_0_0px_1000px_theme(backgroundColor.primary-opacity-0-08-dark)_inset]',\n];\n","import { ModelValue } from '@onereach/ui-components-common/types';\n\nexport type InputModelValue = ModelValue<string | number>;\n\nexport enum InputType {\n  Text = 'text',\n  Number = 'number',\n  Password = 'password',\n  Search = 'search',\n}\n\nexport enum InputMode {\n  None = 'none',\n  Text = 'text',\n  Tel = 'tel',\n  Url = 'url',\n  Email = 'email',\n  Numeric = 'numeric',\n  Decimal = 'decimal',\n  Search = 'search',\n}\n","<template>\n  <div\n    :ref=\"'root'\"\n    :class=\"rootStyles\"\n  >\n    <template v-if=\"$slots.label || $slots.addon || label\">\n      <OrLabel\n        :control-id=\"attributes.id\"\n        :variant=\"'input'\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n      >\n        <slot name=\"label\">\n          {{ label }}\n        </slot>\n\n        <template v-slot:addon>\n          <slot name=\"addon\" />\n        </template>\n      </OrLabel>\n    </template>\n\n    <div class=\"layout-row gap-md md:gap-md\">\n      <slot name=\"prepend\" />\n      <OrInputBox\n        :variant=\"variant\"\n        :size=\"size\"\n        :invalid=\"!!error\"\n        :readonly=\"readonly || loading\"\n        :disabled=\"disabled\"\n      >\n        <template\n          v-if=\"$slots.prependInner\"\n          v-slot:prepend\n        >\n          <slot name=\"prependInner\" />\n        </template>\n        <input\n          :ref=\"'control'\"\n          v-bind=\"attributes\"\n          v-model.trim=\"model\"\n          :class=\"controlStyles\"\n          :name=\"name\"\n          :type=\"type === 'password' && disclosed ? 'text' : type\"\n          :inputmode=\"inputmode\"\n          :autocomplete=\"autocomplete\"\n          :placeholder=\"placeholder\"\n          :required=\"required\"\n          :readonly=\"readonly || loading\"\n          :disabled=\"disabled\"\n          @input=\"$emit('input', $event)\"\n          @keydown=\"$emit('keydown', $event)\"\n          @keyup=\"$emit('keyup', $event)\"\n          @focus=\"$emit('focus', $event)\"\n          @blur=\"$emit('blur', $event)\"\n        >\n\n        <template\n          v-if=\"loading || type === 'password' || type === 'search' || $slots.appendInner\"\n          v-slot:addon\n        >\n          <slot name=\"appendInner\">\n            <template v-if=\"loading\">\n              <OrLoader\n                :variant=\"'circular'\"\n                :color=\"error ? 'danger' : 'primary'\"\n                :size=\"isMobile ? 'm' : 's'\"\n              />\n            </template>\n\n            <template v-else>\n              <template v-if=\"type === 'password'\">\n                <OrIconButton\n                  :icon=\"{ icon: disclosed ? 'visibility' : 'visibility_off', variant: 'filled' }\"\n                  :size=\"'l'\"\n                  :color=\"'inherit'\"\n                  :disabled=\"disabled\"\n                  @click.stop=\"disclosed = !disclosed\"\n                />\n              </template>\n\n              <template v-if=\"type === 'search'\">\n                <template v-if=\"modelValue && !readonly\">\n                  <OrIconButton\n                    :icon=\"'close'\"\n                    :color=\"'inherit'\"\n                    :size=\"'l'\"\n                    :disabled=\"disabled\"\n                    @click.stop=\"clear()\"\n                  />\n                </template>\n\n                <template v-else>\n                  <OrIcon\n                    :icon=\"'search'\"\n                    :size=\"'l'\"\n                    :variant=\"'outlined'\"\n                  />\n                </template>\n              </template>\n            </template>\n          </slot>\n        </template>\n      </OrInputBox>\n      <slot name=\"append\" />\n    </div>\n    <template v-if=\"$slots.hint || hint || maxLength\">\n      <OrHint\n        v-show=\"!error\"\n        :disabled=\"disabled\"\n      >\n        <slot name=\"hint\">\n          {{ hint }}\n        </slot>\n\n        <template\n          v-if=\"maxLength\"\n          v-slot:addon\n        >\n          {{ length }} / {{ maxLength }}\n        </template>\n      </OrHint>\n    </template>\n\n    <OrError\n      v-show=\"typeof error === 'string' && error.length > 0\"\n      :disabled=\"disabled\"\n    >\n      {{ error }}\n\n      <template\n        v-if=\"maxLength\"\n        v-slot:addon\n      >\n        {{ length }} / {{ maxLength }}\n      </template>\n    </OrError>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { PropType, computed, defineComponent, reactive, ref, toRef } from 'vue';\nimport { useControlAttributes, useIdAttribute, useProxyModelValue, useResponsive, useValidationAttributes } from '@onereach/ui-components-common/hooks';\nimport { OrErrorV3 as OrError } from '@onereach/ui-components.or-error-v3';\nimport { OrHintV3 as OrHint } from '@onereach/ui-components.or-hint-v3';\nimport { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components.or-icon-button-v3';\nimport { OrIconV3 as OrIcon } from '@onereach/ui-components.or-icon-v3';\nimport { InputBoxSize, InputBoxVariant, OrInputBoxV3 as OrInputBox } from '@onereach/ui-components.or-input-box-v3';\nimport { OrLabelV3 as OrLabel } from '@onereach/ui-components.or-label-v3';\nimport { OrLoaderV3 as OrLoader } from '@onereach/ui-components.or-loader-v3';\nimport * as Styles from './styles';\nimport { InputMode, InputModelValue, InputType } from './types';\n\nexport default defineComponent({\n  name: 'OrInput',\n\n  components: {\n    OrError,\n    OrHint,\n    OrIcon,\n    OrIconButton,\n    OrInputBox,\n    OrLabel,\n    OrLoader,\n  },\n\n  model: {\n    prop: 'modelValue',\n    event: 'update:modelValue',\n  },\n\n  props: {\n    modelValue: {\n      type: undefined as unknown as PropType<InputModelValue>,\n      default: undefined,\n    },\n\n    name: {\n      type: String,\n      default: undefined,\n    },\n\n    type: {\n      type: String as PropType<`${InputType}`>,\n      default: () => InputType.Text,\n    },\n\n    autocomplete: {\n      type: String,\n      default: 'off',\n    },\n\n    inputmode: {\n      type: String as PropType<`${InputMode}`>,\n      default: InputMode.Text,\n    },\n\n    variant: {\n      type: String as PropType<`${InputBoxVariant}`>,\n      default: undefined,\n    },\n\n    size: {\n      type: String as PropType<`${InputBoxSize}`>,\n      default: undefined,\n    },\n\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    placeholder: {\n      type: String,\n      default: undefined,\n    },\n\n    hint: {\n      type: String,\n      default: undefined,\n    },\n\n    error: {\n      type: [String, Boolean],\n      default: undefined,\n    },\n\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    required: {\n      type: Boolean,\n      default: false,\n    },\n\n    readonly: {\n      type: Boolean,\n      default: false,\n    },\n\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    'update:modelValue',\n\n    'input',\n    'keydown',\n    'keyup',\n    'focus',\n    'blur',\n  ],\n\n  expose: [\n    'root',\n\n    'clear',\n    'focus',\n    'blur',\n  ],\n\n  setup(props, context) {\n    const attributes = reactive({\n      id: useIdAttribute(),\n      ...useControlAttributes(),\n      ...useValidationAttributes(),\n    });\n\n    // Refs & Styles\n    const root = ref<HTMLElement>();\n\n    const rootStyles = computed(() => [\n      'or-input-v3',\n      ...Styles.Input,\n      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],\n    ]);\n\n    const control = ref<HTMLInputElement>();\n\n    const controlStyles = computed(() => [\n      ...Styles.InputControl,\n    ]);\n\n    // State\n    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);\n    const disclosed = ref(false);\n\n    const length = computed(() => {\n      return model.value?.toString().length ?? 0;\n    });\n\n    const maxLength = computed(() => {\n      return attributes.maxlength;\n    });\n\n    // Methods\n    function clear(): void {\n      model.value = undefined;\n    }\n\n    function focus(): void {\n      control.value?.focus();\n    }\n\n    function blur(): void {\n      control.value?.blur();\n    }\n\n    // Helpers\n    const { isMobile } = useResponsive();\n\n    return {\n      attributes,\n\n      root,\n      rootStyles,\n\n      control,\n      controlStyles,\n\n      model,\n      disclosed,\n\n      length,\n      maxLength,\n\n      clear,\n      focus,\n      blur,\n\n      isMobile,\n    };\n  },\n});\n</script>\n\n<style scoped>\ninput {\n  min-width: 0;\n  background: none;\n  outline: none;\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button {\n  display: none;\n}\n</style>\n"],"names":["Input","InputControl","InputType","InputMode","_sfc_main","defineComponent","OrError","OrHint","OrIcon","OrIconButton","OrInputBox","OrLabel","OrLoader","props","context","attributes","reactive","useIdAttribute","useControlAttributes","useValidationAttributes","root","ref","rootStyles","computed","Styles.Input","InputBoxVariant","control","controlStyles","Styles.InputControl","model","useProxyModelValue","toRef","disclosed","length","_a","maxLength","clear","focus","blur","isMobile","useResponsive","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_createBlock","_component_OrLabel","_renderSlot","_createCommentVNode","_createElementVNode","_hoisted_1","_createVNode","_component_OrInputBox","_mergeProps","_cache","$event","_withCtx","_component_OrLoader","_Fragment","_component_OrIconButton","_withModifiers","_component_OrIcon","_component_OrHint","_createSlots","_withDirectives","_component_OrError"],"mappings":"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"}

package/dist/esm/{OrList-Gr14z616.mjs → OrList-Ded7wJKj.mjs}

@@ -1,6 +1,6 @@
 import { useProxyModelValue as N } from "@onereach/ui-components-common/hooks";
 import { O as D } from "./OrButton-C_hXddAf.mjs";
-import { O as P } from "./OrIconButton-BlHCLpeW.mjs";
+import { O as P } from "./OrIconButton-BajZRp1k.mjs";
 import { O as z } from "./OrIcon-k8cyvh-D.mjs";
 import { O as E } from "./OrLabel-K7_HgvcK.mjs";
 import H from "sortablejs";
@@ -286,4 +286,4 @@ export {
   ye as O,
   _ as a
 };
-//# sourceMappingURL=OrList-Gr14z616.mjs.map
+//# sourceMappingURL=OrList-Ded7wJKj.mjs.map

package/dist/esm/{OrList-Gr14z616.mjs.map → OrList-Ded7wJKj.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"OrList-Gr14z616.mjs","sources":["../../../components/or-list-v3/src/partials/or-list-item/styles.ts","../../../components/or-list-v3/src/partials/or-list-item/OrListItem.vue","../../../components/or-list-v3/src/styles.ts","../../../components/or-list-v3/src/OrList.vue"],"sourcesContent":["export const ListItem: string[] = [\n  // Interactivity (draggable)\n  'draggable:interactivity-drag',\n\n  // Shape\n  'rounded-md',\n\n  // Spacing\n  'px-md md:px-sm',\n  'py-md md:py-sm',\n\n  // Theme (hover)\n  'hover:theme-background-primary-translucent-1',\n  'dark:hover:theme-background-primary-translucent-1-dark',\n\n  // Theme (focus)\n  'focus-within:theme-outline-primary focus-within:outline-2',\n  'dark:focus-within:theme-outline-primary-dark',\n\n  // Theme (selected)\n  'selected:theme-background-primary-translucent-3',\n  'dark:selected:theme-background-primary-translucent-3-dark',\n];\n\nexport const ListItemContent: string[] = [\n  // Layout\n  'layout-row',\n\n  // Spacing\n  'px-md md:px-sm',\n  'py-md md:py-sm',\n\n  'gap-sm',\n];\n","<template>\n  <div\n    :ref=\"'root'\"\n    :class=\"rootStyles\"\n    :selected=\"selected\"\n    :disabled=\"disabled\"\n    :draggable=\"draggable\"\n  >\n    <div\n      :class=\"contentStyles\"\n      :disabled=\"disabled\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue';\nimport { ListItem, ListItemContent } from './styles';\n\nexport default defineComponent({\n  name: 'OrListItem',\n\n  props: {\n    draggable: {\n      type: Boolean,\n      default: false,\n    },\n\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  setup() {\n    // Refs & Styles\n    const root = ref<HTMLElement>();\n\n    const rootStyles = computed(() => [\n      'or-list-item-v3',\n      ...ListItem,\n    ]);\n\n    const contentStyles = computed(() => [\n      ...ListItemContent,\n    ]);\n\n    return {\n      root,\n      rootStyles,\n\n      contentStyles,\n    };\n  },\n});\n</script>\n","export const List: string[] = [\n  // Layout\n  'layout-column',\n\n  // Spacing\n  'gap-md',\n];\n\nexport const ListHeader: string[] = [];\n\nexport const ListContent: string[] = [];\n\nexport const ListFooter: string[] = [];\n","<template>\n  <div\n    :ref=\"'root'\"\n    :class=\"rootStyles\"\n    :disabled=\"disabled\"\n  >\n    <template v-if=\"$slots['header'] || $slots['label'] || $slots['label-addon'] || label\">\n      <div :class=\"headerStyles\">\n        <slot\n          name=\"header\"\n          :add-item=\"addItem\"\n          :delete-item=\"deleteItem\"\n        >\n          <OrLabel :disabled=\"disabled\">\n            <slot name=\"label\">\n              {{ label }}\n            </slot>\n\n            <template v-slot:addon>\n              <slot name=\"label-addon\" />\n            </template>\n          </OrLabel>\n        </slot>\n      </div>\n    </template>\n\n    <div\n      :ref=\"'content'\"\n      :class=\"contentStyles\"\n    >\n      <OrListItem\n        v-for=\"(item, index) in model\"\n        :key=\"item.key || uuid()\"\n        :draggable=\"canReorder\"\n        :selected=\"selection.includes(item)\"\n        :disabled=\"disabled\"\n      >\n        <div :class=\"['grow']\">\n          <slot\n            v-bind=\"{\n              item,\n              index,\n              items: model,\n              addItem,\n              deleteItem\n            }\"\n          >\n            {{ item }}\n          </slot>\n        </div>\n\n        <template v-if=\"canDelete\">\n          <OrIconButton\n            :icon=\"'delete'\"\n            :disabled=\"disabled\"\n            @click=\"deleteItem(index)\"\n          />\n        </template>\n      </OrListItem>\n    </div>\n\n    <template v-if=\"$slots['footer'] || canAdd\">\n      <div :class=\"footerStyles\">\n        <slot\n          name=\"footer\"\n          :add-item=\"addItem\"\n          :delete-item=\"deleteItem\"\n        >\n          <template v-if=\"canAdd\">\n            <OrButton\n              :variant=\"'link'\"\n              :disabled=\"disabled\"\n              @click=\"addItem()\"\n            >\n              <slot name=\"add-button\">\n                <OrIcon :icon=\"'add'\" /> {{ addButtonLabel }}\n              </slot>\n            </OrButton>\n          </template>\n        </slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { useProxyModelValue } from '@onereach/ui-components-common/hooks';\nimport { OrButtonV3 as OrButton } from '@onereach/ui-components.or-button-v3';\nimport { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components.or-icon-button-v3';\nimport { OrIconV3 as OrIcon } from '@onereach/ui-components.or-icon-v3';\nimport { OrLabelV3 as OrLabel } from '@onereach/ui-components.or-label-v3';\nimport Sortable from 'sortablejs';\nimport { v4 as uuid } from 'uuid';\nimport { PropType, computed, defineComponent, ref, toRef, watch } from 'vue';\n\nimport { OrListItem } from './partials';\nimport * as Styles from './styles';\nimport { ListItem } from './types';\n\nexport default defineComponent({\n  name: 'OrList',\n\n  components: {\n    OrButton,\n    OrIcon,\n    OrIconButton,\n    OrLabel,\n    OrListItem,\n  },\n\n  model: {\n    prop: 'modelValue',\n    event: 'update:modelValue',\n  },\n\n  props: {\n    modelValue: {\n      type: Array as PropType<ListItem[]>,\n      default: () => [],\n    },\n\n    selection: {\n      type: Array as PropType<ListItem[]>,\n      default: () => [],\n    },\n\n    itemFactory: {\n      type: Function as PropType<() => ListItem>,\n      default: () => ({}),\n    },\n\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    addButtonLabel: {\n      type: String,\n      default: 'Add Item',\n    },\n\n    canAdd: {\n      type: Boolean,\n      default: true,\n    },\n\n    canDelete: {\n      type: Boolean,\n      default: true,\n    },\n\n    canReorder: {\n      type: Boolean,\n      default: true,\n    },\n\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    'update:modelValue',\n\n    'before:add',\n    'before:delete',\n    'before:reorder',\n\n    'add',\n    'delete',\n    'reorder',\n  ],\n\n  expose: [\n    'root',\n  ],\n\n  setup(props, context) {\n    // Refs & Styles\n    const root = ref<HTMLElement>();\n\n    const rootStyles = computed(() => [\n      'or-list-v3',\n      ...Styles.List,\n    ]);\n\n    const headerStyles = computed(() => [\n      ...Styles.ListHeader,\n    ]);\n\n    const content = ref<HTMLElement>();\n\n    const contentStyles = computed(() => [\n      ...Styles.ListContent,\n    ]);\n\n    const footerStyles = computed(() => [\n      ...Styles.ListFooter,\n    ]);\n\n    // State\n    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);\n\n    // Effects\n    // #region Sortable\n    let sortable: Sortable | undefined;\n\n    watch([content, () => props.canReorder], ([content, canReorder]) => {\n      sortable?.destroy();\n      sortable = undefined;\n\n      if (content && canReorder) {\n        sortable = Sortable.create(content, {\n          disabled: props.disabled,\n\n          onUpdate: (event) => {\n            context.emit('before:reorder', model.value);\n\n            const nextModelValue = [...model.value];\n            const reorderedItem = nextModelValue.splice(event.oldIndex!, 1)[0];\n\n            nextModelValue.splice(event.newIndex!, 0, reorderedItem);\n\n            context.emit('reorder', reorderedItem, event.newIndex, event.oldIndex, model.value = nextModelValue);\n          },\n        });\n      }\n    });\n\n    watch(() => props.disabled, (value) => {\n      sortable?.option('disabled', value);\n    });\n    // #endregion\n\n    // Methods\n    function addItem(): void {\n      context.emit('before:add', model.value);\n\n      const addedItem = props.itemFactory();\n      const nextModelValue = [...model.value, addedItem];\n\n      context.emit('add', addedItem, nextModelValue.indexOf(addedItem), model.value = nextModelValue);\n    }\n\n    function deleteItem(index: number): void {\n      context.emit('before:delete', model.value);\n\n      const deletedItem = model.value[index];\n      const nextModelValue = model.value.filter((item: ListItem) => item !== deletedItem);\n\n      context.emit('delete', deletedItem, index, model.value = nextModelValue);\n    }\n\n    return {\n      root,\n      rootStyles,\n\n      headerStyles,\n\n      content,\n      contentStyles,\n\n      footerStyles,\n\n      model,\n\n      addItem,\n      deleteItem,\n\n      uuid,\n    };\n  },\n});\n</script>\n"],"names":["ListItem","ListItemContent","_sfc_main$1","defineComponent","root","ref","rootStyles","computed","contentStyles","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_normalizeClass","List","ListHeader","ListContent","ListFooter","_sfc_main","OrButton","OrIcon","OrIconButton","OrLabel","OrListItem","props","context","Styles.List","headerStyles","Styles.ListHeader","content","Styles.ListContent","footerStyles","Styles.ListFooter","model","useProxyModelValue","toRef","sortable","watch","canReorder","Sortable","event","nextModelValue","reorderedItem","value","addItem","addedItem","deleteItem","index","deletedItem","item","uuid","_hoisted_1","_resolveComponent","_renderSlot","_createVNode","_component_OrLabel","_withCtx","_createCommentVNode","_createElementVNode","_Fragment","_renderList","_createBlock","_component_OrListItem","_hoisted_2","_normalizeProps","_guardReactiveProps","_component_OrIconButton","_component_OrButton","$event","_component_OrIcon"],"mappings":"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"}
+{"version":3,"file":"OrList-Ded7wJKj.mjs","sources":["../../../components/or-list-v3/src/partials/or-list-item/styles.ts","../../../components/or-list-v3/src/partials/or-list-item/OrListItem.vue","../../../components/or-list-v3/src/styles.ts","../../../components/or-list-v3/src/OrList.vue"],"sourcesContent":["export const ListItem: string[] = [\n  // Interactivity (draggable)\n  'draggable:interactivity-drag',\n\n  // Shape\n  'rounded-md',\n\n  // Spacing\n  'px-md md:px-sm',\n  'py-md md:py-sm',\n\n  // Theme (hover)\n  'hover:theme-background-primary-translucent-1',\n  'dark:hover:theme-background-primary-translucent-1-dark',\n\n  // Theme (focus)\n  'focus-within:theme-outline-primary focus-within:outline-2',\n  'dark:focus-within:theme-outline-primary-dark',\n\n  // Theme (selected)\n  'selected:theme-background-primary-translucent-3',\n  'dark:selected:theme-background-primary-translucent-3-dark',\n];\n\nexport const ListItemContent: string[] = [\n  // Layout\n  'layout-row',\n\n  // Spacing\n  'px-md md:px-sm',\n  'py-md md:py-sm',\n\n  'gap-sm',\n];\n","<template>\n  <div\n    :ref=\"'root'\"\n    :class=\"rootStyles\"\n    :selected=\"selected\"\n    :disabled=\"disabled\"\n    :draggable=\"draggable\"\n  >\n    <div\n      :class=\"contentStyles\"\n      :disabled=\"disabled\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue';\nimport { ListItem, ListItemContent } from './styles';\n\nexport default defineComponent({\n  name: 'OrListItem',\n\n  props: {\n    draggable: {\n      type: Boolean,\n      default: false,\n    },\n\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  setup() {\n    // Refs & Styles\n    const root = ref<HTMLElement>();\n\n    const rootStyles = computed(() => [\n      'or-list-item-v3',\n      ...ListItem,\n    ]);\n\n    const contentStyles = computed(() => [\n      ...ListItemContent,\n    ]);\n\n    return {\n      root,\n      rootStyles,\n\n      contentStyles,\n    };\n  },\n});\n</script>\n","export const List: string[] = [\n  // Layout\n  'layout-column',\n\n  // Spacing\n  'gap-md',\n];\n\nexport const ListHeader: string[] = [];\n\nexport const ListContent: string[] = [];\n\nexport const ListFooter: string[] = [];\n","<template>\n  <div\n    :ref=\"'root'\"\n    :class=\"rootStyles\"\n    :disabled=\"disabled\"\n  >\n    <template v-if=\"$slots['header'] || $slots['label'] || $slots['label-addon'] || label\">\n      <div :class=\"headerStyles\">\n        <slot\n          name=\"header\"\n          :add-item=\"addItem\"\n          :delete-item=\"deleteItem\"\n        >\n          <OrLabel :disabled=\"disabled\">\n            <slot name=\"label\">\n              {{ label }}\n            </slot>\n\n            <template v-slot:addon>\n              <slot name=\"label-addon\" />\n            </template>\n          </OrLabel>\n        </slot>\n      </div>\n    </template>\n\n    <div\n      :ref=\"'content'\"\n      :class=\"contentStyles\"\n    >\n      <OrListItem\n        v-for=\"(item, index) in model\"\n        :key=\"item.key || uuid()\"\n        :draggable=\"canReorder\"\n        :selected=\"selection.includes(item)\"\n        :disabled=\"disabled\"\n      >\n        <div :class=\"['grow']\">\n          <slot\n            v-bind=\"{\n              item,\n              index,\n              items: model,\n              addItem,\n              deleteItem\n            }\"\n          >\n            {{ item }}\n          </slot>\n        </div>\n\n        <template v-if=\"canDelete\">\n          <OrIconButton\n            :icon=\"'delete'\"\n            :disabled=\"disabled\"\n            @click=\"deleteItem(index)\"\n          />\n        </template>\n      </OrListItem>\n    </div>\n\n    <template v-if=\"$slots['footer'] || canAdd\">\n      <div :class=\"footerStyles\">\n        <slot\n          name=\"footer\"\n          :add-item=\"addItem\"\n          :delete-item=\"deleteItem\"\n        >\n          <template v-if=\"canAdd\">\n            <OrButton\n              :variant=\"'link'\"\n              :disabled=\"disabled\"\n              @click=\"addItem()\"\n            >\n              <slot name=\"add-button\">\n                <OrIcon :icon=\"'add'\" /> {{ addButtonLabel }}\n              </slot>\n            </OrButton>\n          </template>\n        </slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { useProxyModelValue } from '@onereach/ui-components-common/hooks';\nimport { OrButtonV3 as OrButton } from '@onereach/ui-components.or-button-v3';\nimport { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components.or-icon-button-v3';\nimport { OrIconV3 as OrIcon } from '@onereach/ui-components.or-icon-v3';\nimport { OrLabelV3 as OrLabel } from '@onereach/ui-components.or-label-v3';\nimport Sortable from 'sortablejs';\nimport { v4 as uuid } from 'uuid';\nimport { PropType, computed, defineComponent, ref, toRef, watch } from 'vue';\n\nimport { OrListItem } from './partials';\nimport * as Styles from './styles';\nimport { ListItem } from './types';\n\nexport default defineComponent({\n  name: 'OrList',\n\n  components: {\n    OrButton,\n    OrIcon,\n    OrIconButton,\n    OrLabel,\n    OrListItem,\n  },\n\n  model: {\n    prop: 'modelValue',\n    event: 'update:modelValue',\n  },\n\n  props: {\n    modelValue: {\n      type: Array as PropType<ListItem[]>,\n      default: () => [],\n    },\n\n    selection: {\n      type: Array as PropType<ListItem[]>,\n      default: () => [],\n    },\n\n    itemFactory: {\n      type: Function as PropType<() => ListItem>,\n      default: () => ({}),\n    },\n\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    addButtonLabel: {\n      type: String,\n      default: 'Add Item',\n    },\n\n    canAdd: {\n      type: Boolean,\n      default: true,\n    },\n\n    canDelete: {\n      type: Boolean,\n      default: true,\n    },\n\n    canReorder: {\n      type: Boolean,\n      default: true,\n    },\n\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    'update:modelValue',\n\n    'before:add',\n    'before:delete',\n    'before:reorder',\n\n    'add',\n    'delete',\n    'reorder',\n  ],\n\n  expose: [\n    'root',\n  ],\n\n  setup(props, context) {\n    // Refs & Styles\n    const root = ref<HTMLElement>();\n\n    const rootStyles = computed(() => [\n      'or-list-v3',\n      ...Styles.List,\n    ]);\n\n    const headerStyles = computed(() => [\n      ...Styles.ListHeader,\n    ]);\n\n    const content = ref<HTMLElement>();\n\n    const contentStyles = computed(() => [\n      ...Styles.ListContent,\n    ]);\n\n    const footerStyles = computed(() => [\n      ...Styles.ListFooter,\n    ]);\n\n    // State\n    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);\n\n    // Effects\n    // #region Sortable\n    let sortable: Sortable | undefined;\n\n    watch([content, () => props.canReorder], ([content, canReorder]) => {\n      sortable?.destroy();\n      sortable = undefined;\n\n      if (content && canReorder) {\n        sortable = Sortable.create(content, {\n          disabled: props.disabled,\n\n          onUpdate: (event) => {\n            context.emit('before:reorder', model.value);\n\n            const nextModelValue = [...model.value];\n            const reorderedItem = nextModelValue.splice(event.oldIndex!, 1)[0];\n\n            nextModelValue.splice(event.newIndex!, 0, reorderedItem);\n\n            context.emit('reorder', reorderedItem, event.newIndex, event.oldIndex, model.value = nextModelValue);\n          },\n        });\n      }\n    });\n\n    watch(() => props.disabled, (value) => {\n      sortable?.option('disabled', value);\n    });\n    // #endregion\n\n    // Methods\n    function addItem(): void {\n      context.emit('before:add', model.value);\n\n      const addedItem = props.itemFactory();\n      const nextModelValue = [...model.value, addedItem];\n\n      context.emit('add', addedItem, nextModelValue.indexOf(addedItem), model.value = nextModelValue);\n    }\n\n    function deleteItem(index: number): void {\n      context.emit('before:delete', model.value);\n\n      const deletedItem = model.value[index];\n      const nextModelValue = model.value.filter((item: ListItem) => item !== deletedItem);\n\n      context.emit('delete', deletedItem, index, model.value = nextModelValue);\n    }\n\n    return {\n      root,\n      rootStyles,\n\n      headerStyles,\n\n      content,\n      contentStyles,\n\n      footerStyles,\n\n      model,\n\n      addItem,\n      deleteItem,\n\n      uuid,\n    };\n  },\n});\n</script>\n"],"names":["ListItem","ListItemContent","_sfc_main$1","defineComponent","root","ref","rootStyles","computed","contentStyles","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_normalizeClass","List","ListHeader","ListContent","ListFooter","_sfc_main","OrButton","OrIcon","OrIconButton","OrLabel","OrListItem","props","context","Styles.List","headerStyles","Styles.ListHeader","content","Styles.ListContent","footerStyles","Styles.ListFooter","model","useProxyModelValue","toRef","sortable","watch","canReorder","Sortable","event","nextModelValue","reorderedItem","value","addItem","addedItem","deleteItem","index","deletedItem","item","uuid","_hoisted_1","_resolveComponent","_renderSlot","_createVNode","_component_OrLabel","_withCtx","_createCommentVNode","_createElementVNode","_Fragment","_renderList","_createBlock","_component_OrListItem","_hoisted_2","_normalizeProps","_guardReactiveProps","_component_OrIconButton","_component_OrButton","$event","_component_OrIcon"],"mappings":"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"}

package/dist/esm/OrMenu-BNbd6Ajl.mjs

@@ -0,0 +1,114 @@
+import { usePopoverState as y } from "@onereach/ui-components-common/hooks";
+import { O as g, a as O } from "./OrPopover-FA8G-paf.mjs";
+import "@onereach/ui-components-common/utils";
+import { defineComponent as S, ref as i, computed as u, toRef as $, resolveComponent as P, openBlock as C, createBlock as M, normalizeClass as c, withCtx as k, createElementVNode as w, mergeProps as B, withModifiers as b, renderSlot as j } from "vue";
+import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const N = [
+  // Layout
+  "overflow-y-auto",
+  // Box
+  "min-w-[160px]",
+  "md:max-w-[256px]",
+  "max-h-[340px]"
+], z = S({
+  name: "OrMenu",
+  components: {
+    OrPopover: g
+  },
+  inheritAttrs: !1,
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: !1
+    },
+    trigger: {
+      type: Object,
+      default: void 0
+    },
+    placement: {
+      type: String,
+      default: () => O.Bottom
+    },
+    offset: {
+      type: [Number, Object, Function],
+      default: 8
+    },
+    // TODO: Remove after migration to Vue 3
+    additionalStyles: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: [
+    "update:state",
+    "open",
+    "close",
+    "mouseout",
+    "mouseenter",
+    "mouseleave"
+  ],
+  expose: [
+    "root",
+    "popover",
+    "state",
+    "open",
+    "close",
+    "toggle"
+  ],
+  setup(e, o) {
+    const s = i(), p = i(), m = u(() => [
+      "or-menu-v3",
+      ...N
+    ]), l = u(() => [
+      "or-menu-popover-v3"
+    ]), { state: r, open: t, close: a, toggle: f } = y($(e, "isOpen"), o.emit);
+    function d(v) {
+      v.composedPath().some(({ classList: n }) => n == null ? void 0 : n.contains("or-menu-item-v3")) && a();
+    }
+    return {
+      root: s,
+      popover: p,
+      rootStyles: m,
+      popoverStyles: l,
+      state: r,
+      open: t,
+      close: a,
+      toggle: f,
+      onClick: d
+    };
+  }
+});
+function E(e, o, s, p, m, l) {
+  const r = P("OrPopover");
+  return C(), M(r, {
+    ref: e.popover,
+    class: c(e.popoverStyles),
+    "custom-styles": e.popoverStyles,
+    "is-open": e.state === "open",
+    variant: "auto",
+    trigger: e.trigger,
+    placement: e.placement,
+    offset: e.offset,
+    "keep-alive": !1,
+    "onUpdate:state": o[4] || (o[4] = (t) => t === "open" ? e.open() : e.close())
+  }, {
+    default: k(() => [
+      w("div", B(e.$attrs, {
+        ref: "root",
+        class: [e.rootStyles, ...e.additionalStyles],
+        onClick: o[0] || (o[0] = b((t) => e.onClick(t), ["stop"])),
+        onMouseout: o[1] || (o[1] = (t) => e.$emit("mouseout", t)),
+        onMouseleave: o[2] || (o[2] = (t) => e.$emit("mouseleave", t)),
+        onMouseenter: o[3] || (o[3] = (t) => e.$emit("mouseenter", t))
+      }), [
+        j(e.$slots, "default")
+      ], 16)
+    ]),
+    _: 3
+  }, 8, ["class", "custom-styles", "is-open", "trigger", "placement", "offset"]);
+}
+const G = /* @__PURE__ */ A(z, [["render", E]]);
+export {
+  G as O
+};
+//# sourceMappingURL=OrMenu-BNbd6Ajl.mjs.map

package/dist/esm/OrMenu-BNbd6Ajl.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrMenu-BNbd6Ajl.mjs","sources":["../../../components/or-menu-v3/src/styles.ts","../../../components/or-menu-v3/src/OrMenu.vue"],"sourcesContent":["export const Menu: string[] = [\n  // Layout\n  'overflow-y-auto',\n\n  // Box\n  'min-w-[160px]',\n  'md:max-w-[256px]',\n  'max-h-[340px]',\n];\n","<template>\n  <OrPopover\n    :ref=\"popover\"\n    :class=\"popoverStyles\"\n    :custom-styles=\"popoverStyles\"\n    :is-open=\"state === 'open'\"\n    :variant=\"'auto'\"\n    :trigger=\"trigger\"\n    :placement=\"placement\"\n    :offset=\"offset\"\n    :keep-alive=\"false\"\n    @update:state=\"$event === 'open' ? open() : close()\"\n  >\n    <div\n      v-bind=\"$attrs\"\n      :ref=\"'root'\"\n      :class=\"[rootStyles, ...additionalStyles]\"\n      @click.stop=\"onClick($event)\"\n      @mouseout=\"$emit('mouseout', $event)\"\n      @mouseleave=\"$emit('mouseleave', $event)\"\n      @mouseenter=\"$emit('mouseenter', $event)\"\n    >\n      <slot />\n    </div>\n  </OrPopover>\n</template>\n\n<script lang=\"ts\">\nimport { ReferenceElement } from '@floating-ui/dom';\nimport { usePopoverState } from '@onereach/ui-components-common/hooks';\nimport { OrPopoverV3 as OrPopover, PopoverOffset, PopoverPlacement } from '@onereach/ui-components.or-popover-v3';\nimport { computed, defineComponent, PropType, ref, toRef } from 'vue';\n\nimport { Menu } from './styles';\n\nexport default defineComponent({\n  name: 'OrMenu',\n\n  components: {\n    OrPopover,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    isOpen: {\n      type: Boolean,\n      default: false,\n    },\n\n    trigger: {\n      type: Object as PropType<ReferenceElement>,\n      default: undefined,\n    },\n\n    placement: {\n      type: String as PropType<`${PopoverPlacement}`>,\n      default: () => PopoverPlacement.Bottom,\n    },\n\n    offset: {\n      type: [Number, Object, Function] as PropType<PopoverOffset>,\n      default: 8,\n    },\n\n    // TODO: Remove after migration to Vue 3\n    additionalStyles: {\n      type: Array as PropType<string[]>,\n      default: () => [],\n    },\n  },\n\n  emits: [\n    'update:state',\n\n    'open',\n    'close',\n\n    'mouseout',\n    'mouseenter',\n    'mouseleave',\n  ],\n\n  expose: [\n    'root',\n    'popover',\n\n    'state',\n\n    'open',\n    'close',\n    'toggle',\n  ],\n\n  setup(props, context) {\n    // Refs\n    const root = ref<HTMLElement>();\n    const popover = ref();\n\n    // Styles\n    const rootStyles = computed(() => [\n      'or-menu-v3',\n      ...Menu,\n    ]);\n\n    const popoverStyles = computed(() => [\n      'or-menu-popover-v3',\n    ]);\n\n    // State\n    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);\n\n    // Handlers\n    function onClick(event: Event): void {\n      const path = event.composedPath() as HTMLElement[];\n\n      if (path.some(({ classList }) => classList?.contains('or-menu-item-v3'))) {\n        close();\n      }\n    }\n\n    return {\n      root,\n      popover,\n      rootStyles,\n      popoverStyles,\n      state,\n      open,\n      close,\n      toggle,\n      onClick,\n    };\n  },\n});\n</script>\n"],"names":["Menu","_sfc_main","defineComponent","OrPopover","PopoverPlacement","props","context","root","ref","popover","rootStyles","computed","popoverStyles","state","open","close","toggle","usePopoverState","toRef","onClick","event","classList","_resolveComponent","_openBlock","_createBlock","_component_OrPopover","_ctx","_normalizeClass","_cache","$event","_withCtx","_createElementVNode","_mergeProps","_withModifiers"],"mappings":";;;;;AAAO,MAAMA,IAAiB;AAAA;AAAA,EAE5B;AAAA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AACF,GC2BAC,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,WAAAC;AAAA,EACF;AAAA,EAEA,cAAc;AAAA,EAEd,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS,MAAMC,EAAiB;AAAA,IAClC;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM,CAAC,QAAQ,QAAQ,QAAQ;AAAA,MAC/B,SAAS;AAAA,IACX;AAAA;AAAA,IAGA,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,MAAM,CAAC;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,OAAO;AAAA,IACL;AAAA,IAEA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EAEA,QAAQ;AAAA,IACN;AAAA,IACA;AAAA,IAEA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EAEA,MAAMC,GAAOC,GAAS;AAEpB,UAAMC,IAAOC,KACPC,IAAUD,KAGVE,IAAaC,EAAS,MAAM;AAAA,MAChC;AAAA,MACA,GAAGX;AAAA,IAAA,CACJ,GAEKY,IAAgBD,EAAS,MAAM;AAAA,MACnC;AAAA,IAAA,CACD,GAGK,EAAE,OAAAE,GAAO,MAAAC,GAAM,OAAAC,GAAO,QAAAC,EAAO,IAAIC,EAAgBC,EAAMb,GAAO,QAAQ,GAAGC,EAAQ,IAAI;AAG3F,aAASa,EAAQC,GAAoB;AAG/B,MAFSA,EAAM,eAEV,KAAK,CAAC,EAAE,WAAAC,QAAgBA,KAAA,gBAAAA,EAAW,SAAS,kBAAkB,KAC/DN;IAEV;AAEO,WAAA;AAAA,MACL,MAAAR;AAAA,MACA,SAAAE;AAAA,MACA,YAAAC;AAAA,MACA,eAAAE;AAAA,MACA,OAAAC;AAAA,MACA,MAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAG;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;;YApICG,EAuBY,WAAA;AArBJ,SAAAC,EAAA,GAAAC,EAAEC,GAAa;AAAA,IACpB,KAAAC,EAAA;AAAA,IACA,OAAcC,EAAAD,EAAA,aAAA;AAAA,IACd,iBAAeA,EAAA;AAAA,IACf,WAASA,EAAO,UAAA;AAAA,IAChB,SAAS;AAAA,IACT,SAAQA,EAAA;AAAA,IACR,WAAYA,EAAA;AAAA,IACZ,QAAAA,EAAA;AAAA,IAAA,cAAA;AAAA,sBAEDE,EAUM,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAA,MAAA,SAAAH,EAAA,KAAA,IAAAA,EAAA,MAAA;AAAA,EAAA,GAAA;AAAA,aAREI,EAAM,MAAA;AAAA,MACHC,EAAA,OAAUC,EAAKN,EAAgB,QAAA;AAAA,QACvC,KAAA;AAAA,QACA,UAAQ,YAAE,GAAAA,EAAA,gBAAA;AAAA,QACV,SAAAE,EAAU,CAAO,MAAAA,EAAA,CAAA,IAAAK,EAAA,CAAAJ,MAAAH,EAAA,QAAAG,CAAe,GAAM,CAAA,MAAA,CAAA;AAAA,QACtC,YAAUD,EAAE,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAH,EAAA,MAAA,YAAKG,CAAe;AAAA,QAAA,cAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAH,EAAA,MAAA,cAAAG,CAAA;AAAA,QAEjC,cAAQD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAH,EAAA,MAAA,cAAAG,CAAA;AAAA,MAAA,CAAA,GAAA;AAAA;;;;;;;"}

package/dist/esm/{OrMenuItem-puiy5rFO.mjs → OrMenuItem-ByVkiQvE.mjs}

@@ -1,8 +1,8 @@
-import { O as h } from "./OrIconButton-BlHCLpeW.mjs";
-import { O, I as g } from "./OrIcon-k8cyvh-D.mjs";
-import { O as B } from "./OrTooltip-DqwjoE82.mjs";
-import { useIntersectionObserver as $ } from "@vueuse/core";
-import { defineComponent as S, ref as l, computed as s, resolveComponent as u, openBlock as i, createElementBlock as v, normalizeClass as m, createBlock as k, mergeProps as M, createCommentVNode as c, createElementVNode as b, renderSlot as T, Fragment as w, createVNode as C, withModifiers as V } from "vue";
+import { O as $ } from "./OrIconButton-BajZRp1k.mjs";
+import { O as B, I as g } from "./OrIcon-k8cyvh-D.mjs";
+import { O as M } from "./OrTooltip-BIJSpzmX.mjs";
+import { useIntersectionObserver as S } from "@vueuse/core";
+import { defineComponent as h, ref as s, computed as l, resolveComponent as m, openBlock as i, createElementBlock as v, normalizeClass as f, createBlock as k, mergeProps as T, createCommentVNode as p, createElementVNode as I, renderSlot as b, Fragment as w, createVNode as C, withModifiers as V } from "vue";
 import { _ as P } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
 const N = [
   // Group
@@ -41,12 +41,12 @@ const N = [
 ], F = [
   // Iconography (selected)
   "selected:iconography-filled"
-], W = S({
+], W = h({
   name: "OrMenuItem",
   components: {
-    OrIcon: O,
-    OrIconButton: h,
-    OrTooltip: B
+    OrIcon: B,
+    OrIconButton: $,
+    OrTooltip: M
   },
   props: {
     icon: {
@@ -74,84 +74,93 @@ const N = [
     "click",
     "focus",
     "blur",
+    "mouseover",
+    "mouseout",
+    "mouseenter",
+    "mouseleave",
     "close"
   ],
   expose: [
     "root"
   ],
   setup(e) {
-    const o = l(), r = l(), f = l(), n = l(!1), { stop: y } = $(o, ([{ isIntersecting: I }]) => {
-      n.value = I;
-    }), d = s(() => [
+    const o = s(), r = s(), c = s(), n = s(!1), { stop: y } = S(o, ([{ isIntersecting: O }]) => {
+      n.value = O;
+    }), d = l(() => [
       "or-menu-item-v3",
       ...N
-    ]), a = s(() => [
+    ]), u = l(() => [
       ...E,
       ...e.selected ? F : []
-    ]), p = s(() => typeof e.icon == "string" ? {
+    ]), a = l(() => typeof e.icon == "string" ? {
       icon: e.icon,
       variant: g.Inherit
     } : {
       variant: g.Inherit,
       ...e.icon
-    }), t = s(() => n.value ? r.value !== void 0 && r.value.clientWidth < r.value.scrollWidth : !1);
+    }), t = l(() => n.value ? r.value !== void 0 && r.value.clientWidth < r.value.scrollWidth : !1);
     return {
       content: r,
       root: o,
-      tooltip: f,
+      tooltip: c,
       rootStyles: d,
-      iconStyles: a,
+      iconStyles: u,
       isTooltipShown: t,
-      iconProps: p,
+      iconProps: a,
       isRootVisible: n,
       stop: y
     };
   }
-}), j = ["tabindex", "selected", "disabled"], z = /* @__PURE__ */ b("div", {
-  class: /* @__PURE__ */ m(["grow"])
+}), j = ["tabindex", "selected", "disabled"], z = /* @__PURE__ */ I("div", {
+  class: /* @__PURE__ */ f(["grow"])
 }, null, -1);
-function R(e, o, r, f, n, y) {
-  const d = u("OrIcon"), a = u("OrIconButton"), p = u("OrTooltip");
+function R(e, o, r, c, n, y) {
+  const d = m("OrIcon"), u = m("OrIconButton"), a = m("OrTooltip");
   return i(), v("div", {
     ref: "root",
-    class: m(e.rootStyles),
+    class: f(e.rootStyles),
     tabindex: e.disabled ? void 0 : 0,
     selected: e.selected,
     disabled: e.disabled,
     onClick: o[3] || (o[3] = (t) => e.$emit("click", t)),
     onFocus: o[4] || (o[4] = (t) => e.$emit("focus", t)),
-    onBlur: o[5] || (o[5] = (t) => e.$emit("blur", t))
+    onBlur: o[5] || (o[5] = (t) => e.$emit("blur", t)),
+    onMouseover: o[6] || (o[6] = (t) => e.$emit("mouseover", t)),
+    onMouseout: o[7] || (o[7] = (t) => e.$emit("mouseout", t)),
+    onMouseenter: o[8] || (o[8] = (t) => e.$emit("mouseenter", t)),
+    onMouseleave: o[9] || (o[9] = (t) => e.$emit("mouseleave", t))
   }, [
-    e.icon && e.iconProps.icon ? (i(), k(d, M({
+    e.icon && e.iconProps.icon ? (i(), k(d, T({
       key: 0,
       class: e.iconStyles
-    }, e.iconProps), null, 16, ["class"])) : c("", !0),
-    b("div", {
+    }, e.iconProps), null, 16, ["class"])) : p("", !0),
+    I("div", {
       ref: "content",
-      class: m(["truncate", "w-full"]),
+      class: f(["truncate", "w-full"]),
       onMouseover: o[0] || (o[0] = (t) => e.tooltip && e.tooltip.open()),
       onMouseout: o[1] || (o[1] = (t) => e.tooltip && e.tooltip.close())
     }, [
-      T(e.$slots, "default")
+      b(e.$slots, "default")
     ], 544),
+    b(e.$slots, "append"),
     e.closeButton ? (i(), v(w, { key: 1 }, [
       z,
-      C(a, {
+      C(u, {
         icon: "close",
         disabled: e.disabled,
         onClick: o[2] || (o[2] = V((t) => e.$emit("close"), ["stop"]))
       }, null, 8, ["disabled"])
-    ], 64)) : c("", !0),
-    e.isTooltipShown ? (i(), k(p, {
+    ], 64)) : p("", !0),
+    e.isTooltipShown ? (i(), k(a, {
       key: 2,
       ref: "tooltip",
       content: e.tooltipText,
       trigger: e.root
-    }, null, 8, ["content", "trigger"])) : c("", !0)
+    }, null, 8, ["content", "trigger"])) : p("", !0)
   ], 42, j);
 }
 const K = /* @__PURE__ */ P(W, [["render", R]]);
 export {
   K as O
 };
-//# sourceMappingURL=OrMenuItem-puiy5rFO.mjs.map
+//# sourceMappingURL=OrMenuItem-ByVkiQvE.mjs.map

package/dist/esm/OrMenuItem-ByVkiQvE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrMenuItem-ByVkiQvE.mjs","sources":["../../../components/or-menu-item-v3/src/styles.ts","../../../components/or-menu-item-v3/src/OrMenuItem.vue"],"sourcesContent":["export const MenuItem: string[] = [\n  // Group\n  'group',\n\n  // Layout\n  'layout-row',\n\n  // Spacing\n  'px-lg md:px-sm',\n  'py-sm+ md:py-sm',\n\n  'gap-sm md:gap-sm',\n\n  // Interactivity\n  'interactivity-click',\n\n  // Typography\n  'typography-body-2-regular md:typography-caption-regular',\n\n  // Typography (selected)\n  'selected:typography-body-2-semibold selected:md:typography-caption-semibold',\n\n  // Theme\n  'theme-preset-3-primary',\n  'dark:theme-preset-3-primary-dark',\n\n  'theme-foreground-outline',\n  'dark:theme-foreground-outline-dark',\n\n  // Theme (selected)\n  'selected:theme-foreground-default',\n  'dark:selected:theme-foreground-default-dark',\n\n  'selected:bg-primary-opacity-0-08',\n  'dark:selected:bg-primary-opacity-0-08-dark',\n\n\n  // Theme (hover)\n  'hover:md:theme-foreground-default',\n  'dark:hover:md:theme-foreground-default-dark',\n\n  // Theme (active)\n  'active:theme-foreground-default',\n  'dark:active:theme-foreground-default-dark',\n];\n\nexport const MenuItemIcon: string[] = [\n  // Iconography (hover)\n  'group-hover:iconography-filled',\n];\n\nexport const MenuItemIconSelected: string[] = [\n  // Iconography (selected)\n  'selected:iconography-filled',\n];\n","<template>\n  <div\n    :ref=\"'root'\"\n    :class=\"rootStyles\"\n    :tabindex=\"!disabled ? 0 : undefined\"\n    :selected=\"selected\"\n    :disabled=\"disabled\"\n    @click=\"$emit('click', $event)\"\n    @focus=\"$emit('focus', $event)\"\n    @blur=\"$emit('blur', $event)\"\n    @mouseover=\"$emit('mouseover', $event)\"\n    @mouseout=\"$emit('mouseout', $event)\"\n    @mouseenter=\"$emit('mouseenter', $event)\"\n    @mouseleave=\"$emit('mouseleave', $event)\"\n  >\n    <template v-if=\"icon && iconProps.icon\">\n      <OrIcon\n        :class=\"iconStyles\"\n        v-bind=\"iconProps\"\n      />\n    </template>\n    <div\n      ref=\"content\"\n      :class=\"['truncate', 'w-full']\"\n      @mouseover=\"tooltip && tooltip.open()\"\n      @mouseout=\"tooltip && tooltip.close()\"\n    >\n      <slot />\n    </div>\n\n    <slot name=\"append\" />\n\n    <template v-if=\"closeButton\">\n      <div :class=\"['grow']\" />\n\n      <OrIconButton\n        :icon=\"'close'\"\n        :disabled=\"disabled\"\n        @click.stop=\"$emit('close')\"\n      />\n    </template>\n    <OrTooltip\n      v-if=\"isTooltipShown\"\n      ref=\"tooltip\"\n      :content=\"tooltipText\"\n      :trigger=\"root\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components.or-icon-button-v3';\nimport { IconVariant, OrIconV3 as OrIcon } from '@onereach/ui-components.or-icon-v3';\nimport { OrTooltipV3 as OrTooltip } from '@onereach/ui-components.or-tooltip-v3';\nimport { useIntersectionObserver } from '@vueuse/core';\nimport { computed, defineComponent, PropType, ref } from 'vue';\n\nimport * as Styles from './styles';\n\nexport default defineComponent({\n  name: 'OrMenuItem',\n\n  components: {\n    OrIcon,\n    OrIconButton,\n    OrTooltip,\n  },\n\n  props: {\n    icon: {\n      type: [String, Object] as PropType<string | InstanceType<typeof OrIcon>['$props']>,\n      default: undefined,\n    },\n\n    closeButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  emits: [\n    'click',\n    'focus',\n    'blur',\n    'mouseover',\n    'mouseout',\n    'mouseenter',\n    'mouseleave',\n    'close',\n  ],\n\n  expose: [\n    'root',\n  ],\n\n  setup(props) {\n    // Refs\n    const root = ref<HTMLElement>();\n    const content = ref<HTMLDivElement>();\n    const tooltip = ref<InstanceType<typeof OrTooltip>>();\n    const isRootVisible = ref(false);\n    const { stop } = useIntersectionObserver(root, ([{ isIntersecting }]) => {\n      isRootVisible.value = isIntersecting;\n    });\n\n    // Styles\n    const rootStyles = computed(() => [\n      'or-menu-item-v3',\n      ...Styles.MenuItem,\n    ]);\n\n    const iconStyles = computed(() => [\n      ...Styles.MenuItemIcon,\n      ...props.selected ? Styles.MenuItemIconSelected : [],\n    ]);\n\n    const iconProps = computed(() => {\n      return typeof props.icon === 'string'\n        ? {\n          icon: props.icon,\n          variant: IconVariant.Inherit,\n        }\n        : {\n          variant: IconVariant.Inherit,\n          ...(props.icon as object),\n        };\n    });\n\n    // Tooltip display logic\n    const isTooltipShown = computed<boolean>(() => {\n      if (isRootVisible.value) {\n        return content.value !== undefined && content.value.clientWidth < content.value.scrollWidth;\n      }\n      return false;\n    });\n\n    return {\n      content,\n      root,\n      tooltip,\n      rootStyles,\n      iconStyles,\n      isTooltipShown,\n      iconProps,\n      isRootVisible,\n      stop,\n    };\n  },\n});\n</script>\n"],"names":["MenuItem","MenuItemIcon","MenuItemIconSelected","_sfc_main","defineComponent","OrIcon","OrIconButton","OrTooltip","props","root","ref","content","tooltip","isRootVisible","stop","useIntersectionObserver","isIntersecting","rootStyles","computed","Styles.MenuItem","iconStyles","Styles.MenuItemIcon","Styles.MenuItemIconSelected","iconProps","IconVariant","isTooltipShown","_hoisted_1","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_cache","$event","_createBlock","_component_OrIcon","_mergeProps","_createCommentVNode","_createElementVNode","_renderSlot","_Fragment","_hoisted_2","_component_OrIconButton","_component_OrTooltip"],"mappings":"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"}

package/dist/esm/{OrModal-CQhwUYFk.mjs → OrModal-Cbi6xMwA.mjs}

@@ -2,7 +2,7 @@ import { defineComponent as i, ref as f, computed as $, openBlock as p, createEl
 import { usePopoverState as b } from "@onereach/ui-components-common/hooks";
 import { O as B } from "./OrOverlay-BjrghiC-.mjs";
 import { _ as y } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
-import { O as F } from "./OrIconButton-BlHCLpeW.mjs";
+import { O as F } from "./OrIconButton-BajZRp1k.mjs";
 import { useResponsive as H } from "@onereach/ui-components-common";
 const z = [
   // Overflow
@@ -238,4 +238,4 @@ export {
   m as M,
   to as O
 };
-//# sourceMappingURL=OrModal-CQhwUYFk.mjs.map
+//# sourceMappingURL=OrModal-Cbi6xMwA.mjs.map

package/dist/esm/{OrModal-CQhwUYFk.mjs.map → OrModal-Cbi6xMwA.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"OrModal-CQhwUYFk.mjs","sources":["../../../components/or-modal-v3/src/partials/or-modal-content/styles.ts","../../../components/or-modal-v3/src/partials/or-modal-content/OrModalContent.vue","../../../components/or-modal-v3/src/partials/or-modal-footer/styles.ts","../../../components/or-modal-v3/src/partials/or-modal-footer/OrModalFooter.vue","../../../components/or-modal-v3/src/partials/or-modal-header/styles.ts","../../../components/or-modal-v3/src/partials/or-modal-header/OrModalHeader.vue","../../../components/or-modal-v3/src/props.ts","../../../components/or-modal-v3/src/styles.ts","../../../components/or-modal-v3/src/OrModal.vue"],"sourcesContent":["export const ModalContent: string[] = [\n  // Overflow\n  'overflow-auto',\n\n  // Spacing\n  'px-md md:px-lg',\n];\n","<template>\n  <div\n    :ref=\"'root'\"\n    :class=\"rootStyles\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue';\nimport { ModalContent } from './styles';\n\nexport default defineComponent({\n  name: 'OrModalContent',\n\n  expose: [\n    'root',\n  ],\n\n  setup() {\n    // Refs\n    const root = ref<HTMLElement>();\n\n    // Styles\n    const rootStyles = computed(() => [\n      'or-modal-content',\n      ...ModalContent,\n    ]);\n\n    return {\n      root,\n      rootStyles,\n    };\n  },\n});\n</script>\n","export const ModalFooter: string[] = [\n  // Spacing\n  'px-md md:px-lg',\n];\n","<template>\n  <div\n    :ref=\"'root'\"\n    :class=\"rootStyles\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue';\nimport { ModalFooter } from './styles';\n\nexport default defineComponent({\n  name: 'OrModalFooter',\n\n  expose: [\n    'root',\n  ],\n\n  setup() {\n    // Refs\n    const root = ref<HTMLElement>();\n\n    // Styles\n    const rootStyles = computed(() => [\n      'or-modal-footer',\n      ...ModalFooter,\n    ]);\n\n    return {\n      root,\n      rootStyles,\n    };\n  },\n});\n</script>\n","export const ModalHeader: string[] = [\n  // Layout\n  'layout-row',\n\n  // Spacing\n  'px-md md:px-lg pb-sm md:pb-none',\n\n  // Typography\n  'typography-headline-2',\n];\n","<template>\n  <div\n    :ref=\"'root'\"\n    :class=\"rootStyles\"\n  >\n    <div :class=\"['grow']\">\n      <slot />\n    </div>\n\n    <OrIconButton\n      :icon=\"'close'\"\n      :size=\"isMobile ? 'l': 'xl'\"\n      @click.stop=\"$emit('close')\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue';\nimport { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components.or-icon-button-v3';\nimport { useResponsive } from '@onereach/ui-components-common';\nimport { ModalHeader } from './styles';\n\n\nexport default defineComponent({\n  name: 'OrModalHeader',\n\n  components: {\n    OrIconButton,\n  },\n\n  emits: [\n    'close',\n  ],\n\n  expose: [\n    'root',\n  ],\n\n  setup() {\n    // Refs\n    const root = ref<HTMLElement>();\n\n    const { isMobile } = useResponsive();\n\n    // Styles\n    const rootStyles = computed(() => [\n      'or-modal-header',\n      ...ModalHeader,\n    ]);\n\n    return {\n      root,\n      rootStyles,\n      isMobile,\n    };\n  },\n});\n</script>\n","export enum ModalSize {\n  L = 'l',\n  M = 'm',\n  S = 's',\n}\n","import { ModalSize } from './props';\n\nexport const Modal: string[] = [\n  // Layout\n  'layout-column',\n\n  // Box\n  'xs:w-full sm:w-full',\n  'xs:h-full sm:h-full md:h-auto md:max-h-[min(calc(100%-(2*theme(spacing.3xl))),772px)]',\n\n  // Spacing\n  'py-md md:py-lg',\n  'gap-md md:gap-lg',\n\n  // Shape\n  'md:rounded-md',\n\n  // Elevation\n  'shadow-modal',\n  'dark:shadow-modal-dark',\n\n  // Typography\n  'typography-body-2-regular',\n\n  // Theme\n  'theme-background-default',\n  'dark:theme-background-default-dark',\n\n  'theme-foreground-default',\n  'dark:theme-foreground-default-dark',\n];\n\nexport const ModalSizes: Record<ModalSize, string[]> = {\n  [ModalSize.L]: [\n    // Box\n    'md:w-[1050px]',\n  ],\n\n  [ModalSize.M]: [\n    // Box\n    'md:w-[700px]',\n  ],\n\n  [ModalSize.S]: [\n    // Box\n    'md:w-[480px]',\n  ],\n};\n","<template>\n  <OrOverlay\n    v-if=\"state === 'open'\"\n    :fullscreen=\"true\"\n  >\n    <div\n      v-bind=\"$attrs\"\n      :ref=\"'root'\"\n      :class=\"rootStyles\"\n    >\n      <OrModalHeader @close=\"close()\">\n        <slot name=\"header\" />\n      </OrModalHeader>\n\n      <OrModalContent :class=\"['grow']\">\n        <slot />\n      </OrModalContent>\n\n      <OrModalFooter v-if=\"$slots.footer\">\n        <slot name=\"footer\" />\n      </OrModalFooter>\n    </div>\n  </OrOverlay>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, ref, toRef } from 'vue';\nimport { usePopoverState } from '@onereach/ui-components-common/hooks';\nimport { OrOverlayV3 as OrOverlay } from '@onereach/ui-components.or-overlay-v3';\nimport OrModalContent from './partials/or-modal-content/OrModalContent.vue';\nimport OrModalFooter from './partials/or-modal-footer/OrModalFooter.vue';\nimport OrModalHeader from './partials/or-modal-header/OrModalHeader.vue';\nimport { ModalSize } from './props';\nimport * as Styles from './styles';\n\nexport default defineComponent({\n  name: 'OrModal',\n\n  components: {\n    OrModalContent,\n    OrModalFooter,\n    OrModalHeader,\n    OrOverlay,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    isOpen: {\n      type: Boolean,\n      default: false,\n    },\n\n    size: {\n      type: String as PropType<`${ModalSize}`>,\n      default: () => ModalSize.M,\n    },\n\n    // TODO: Remove after migration to Vue 3\n    additionalStyles: {\n      type: Array as PropType<string[]>,\n      default: () => [],\n    },\n  },\n\n  emits: [\n    'update:state',\n\n    'open',\n    'close',\n  ],\n\n  expose: [\n    'root',\n\n    'state',\n\n    'open',\n    'close',\n  ],\n\n  setup(props, context) {\n    // Refs & Styles\n    const root = ref<HTMLElement>();\n\n    const rootStyles = computed(() => [\n      'or-modal-v3',\n      ...Styles.Modal,\n      ...Styles.ModalSizes[props.size],\n      ...props.additionalStyles,\n    ]);\n\n    // State\n    const { state, open, close } = usePopoverState(toRef(props, 'isOpen'), context.emit);\n\n    return {\n      root,\n      rootStyles,\n\n      state,\n\n      open,\n      close,\n    };\n  },\n});\n</script>\n"],"names":["ModalContent","_sfc_main$3","defineComponent","root","ref","rootStyles","computed","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_normalizeClass","ModalFooter","_sfc_main$2","ModalHeader","_sfc_main$1","OrIconButton","isMobile","useResponsive","_resolveComponent","_renderSlot","_component_OrIconButton","ModalSize","Modal","ModalSizes","_sfc_main","OrModalContent","OrModalFooter","OrModalHeader","OrOverlay","props","context","Styles.Modal","Styles.ModalSizes","state","open","close","usePopoverState","toRef","_component_OrOverlay","_createBlock","_withCtx","_createElementVNode","_mergeProps","_createVNode","_component_OrModalHeader","$event","_component_OrModalFooter"],"mappings":"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"}
+{"version":3,"file":"OrModal-Cbi6xMwA.mjs","sources":["../../../components/or-modal-v3/src/partials/or-modal-content/styles.ts","../../../components/or-modal-v3/src/partials/or-modal-content/OrModalContent.vue","../../../components/or-modal-v3/src/partials/or-modal-footer/styles.ts","../../../components/or-modal-v3/src/partials/or-modal-footer/OrModalFooter.vue","../../../components/or-modal-v3/src/partials/or-modal-header/styles.ts","../../../components/or-modal-v3/src/partials/or-modal-header/OrModalHeader.vue","../../../components/or-modal-v3/src/props.ts","../../../components/or-modal-v3/src/styles.ts","../../../components/or-modal-v3/src/OrModal.vue"],"sourcesContent":["export const ModalContent: string[] = [\n  // Overflow\n  'overflow-auto',\n\n  // Spacing\n  'px-md md:px-lg',\n];\n","<template>\n  <div\n    :ref=\"'root'\"\n    :class=\"rootStyles\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue';\nimport { ModalContent } from './styles';\n\nexport default defineComponent({\n  name: 'OrModalContent',\n\n  expose: [\n    'root',\n  ],\n\n  setup() {\n    // Refs\n    const root = ref<HTMLElement>();\n\n    // Styles\n    const rootStyles = computed(() => [\n      'or-modal-content',\n      ...ModalContent,\n    ]);\n\n    return {\n      root,\n      rootStyles,\n    };\n  },\n});\n</script>\n","export const ModalFooter: string[] = [\n  // Spacing\n  'px-md md:px-lg',\n];\n","<template>\n  <div\n    :ref=\"'root'\"\n    :class=\"rootStyles\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue';\nimport { ModalFooter } from './styles';\n\nexport default defineComponent({\n  name: 'OrModalFooter',\n\n  expose: [\n    'root',\n  ],\n\n  setup() {\n    // Refs\n    const root = ref<HTMLElement>();\n\n    // Styles\n    const rootStyles = computed(() => [\n      'or-modal-footer',\n      ...ModalFooter,\n    ]);\n\n    return {\n      root,\n      rootStyles,\n    };\n  },\n});\n</script>\n","export const ModalHeader: string[] = [\n  // Layout\n  'layout-row',\n\n  // Spacing\n  'px-md md:px-lg pb-sm md:pb-none',\n\n  // Typography\n  'typography-headline-2',\n];\n","<template>\n  <div\n    :ref=\"'root'\"\n    :class=\"rootStyles\"\n  >\n    <div :class=\"['grow']\">\n      <slot />\n    </div>\n\n    <OrIconButton\n      :icon=\"'close'\"\n      :size=\"isMobile ? 'l': 'xl'\"\n      @click.stop=\"$emit('close')\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue';\nimport { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components.or-icon-button-v3';\nimport { useResponsive } from '@onereach/ui-components-common';\nimport { ModalHeader } from './styles';\n\n\nexport default defineComponent({\n  name: 'OrModalHeader',\n\n  components: {\n    OrIconButton,\n  },\n\n  emits: [\n    'close',\n  ],\n\n  expose: [\n    'root',\n  ],\n\n  setup() {\n    // Refs\n    const root = ref<HTMLElement>();\n\n    const { isMobile } = useResponsive();\n\n    // Styles\n    const rootStyles = computed(() => [\n      'or-modal-header',\n      ...ModalHeader,\n    ]);\n\n    return {\n      root,\n      rootStyles,\n      isMobile,\n    };\n  },\n});\n</script>\n","export enum ModalSize {\n  L = 'l',\n  M = 'm',\n  S = 's',\n}\n","import { ModalSize } from './props';\n\nexport const Modal: string[] = [\n  // Layout\n  'layout-column',\n\n  // Box\n  'xs:w-full sm:w-full',\n  'xs:h-full sm:h-full md:h-auto md:max-h-[min(calc(100%-(2*theme(spacing.3xl))),772px)]',\n\n  // Spacing\n  'py-md md:py-lg',\n  'gap-md md:gap-lg',\n\n  // Shape\n  'md:rounded-md',\n\n  // Elevation\n  'shadow-modal',\n  'dark:shadow-modal-dark',\n\n  // Typography\n  'typography-body-2-regular',\n\n  // Theme\n  'theme-background-default',\n  'dark:theme-background-default-dark',\n\n  'theme-foreground-default',\n  'dark:theme-foreground-default-dark',\n];\n\nexport const ModalSizes: Record<ModalSize, string[]> = {\n  [ModalSize.L]: [\n    // Box\n    'md:w-[1050px]',\n  ],\n\n  [ModalSize.M]: [\n    // Box\n    'md:w-[700px]',\n  ],\n\n  [ModalSize.S]: [\n    // Box\n    'md:w-[480px]',\n  ],\n};\n","<template>\n  <OrOverlay\n    v-if=\"state === 'open'\"\n    :fullscreen=\"true\"\n  >\n    <div\n      v-bind=\"$attrs\"\n      :ref=\"'root'\"\n      :class=\"rootStyles\"\n    >\n      <OrModalHeader @close=\"close()\">\n        <slot name=\"header\" />\n      </OrModalHeader>\n\n      <OrModalContent :class=\"['grow']\">\n        <slot />\n      </OrModalContent>\n\n      <OrModalFooter v-if=\"$slots.footer\">\n        <slot name=\"footer\" />\n      </OrModalFooter>\n    </div>\n  </OrOverlay>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, ref, toRef } from 'vue';\nimport { usePopoverState } from '@onereach/ui-components-common/hooks';\nimport { OrOverlayV3 as OrOverlay } from '@onereach/ui-components.or-overlay-v3';\nimport OrModalContent from './partials/or-modal-content/OrModalContent.vue';\nimport OrModalFooter from './partials/or-modal-footer/OrModalFooter.vue';\nimport OrModalHeader from './partials/or-modal-header/OrModalHeader.vue';\nimport { ModalSize } from './props';\nimport * as Styles from './styles';\n\nexport default defineComponent({\n  name: 'OrModal',\n\n  components: {\n    OrModalContent,\n    OrModalFooter,\n    OrModalHeader,\n    OrOverlay,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    isOpen: {\n      type: Boolean,\n      default: false,\n    },\n\n    size: {\n      type: String as PropType<`${ModalSize}`>,\n      default: () => ModalSize.M,\n    },\n\n    // TODO: Remove after migration to Vue 3\n    additionalStyles: {\n      type: Array as PropType<string[]>,\n      default: () => [],\n    },\n  },\n\n  emits: [\n    'update:state',\n\n    'open',\n    'close',\n  ],\n\n  expose: [\n    'root',\n\n    'state',\n\n    'open',\n    'close',\n  ],\n\n  setup(props, context) {\n    // Refs & Styles\n    const root = ref<HTMLElement>();\n\n    const rootStyles = computed(() => [\n      'or-modal-v3',\n      ...Styles.Modal,\n      ...Styles.ModalSizes[props.size],\n      ...props.additionalStyles,\n    ]);\n\n    // State\n    const { state, open, close } = usePopoverState(toRef(props, 'isOpen'), context.emit);\n\n    return {\n      root,\n      rootStyles,\n\n      state,\n\n      open,\n      close,\n    };\n  },\n});\n</script>\n"],"names":["ModalContent","_sfc_main$3","defineComponent","root","ref","rootStyles","computed","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_normalizeClass","ModalFooter","_sfc_main$2","ModalHeader","_sfc_main$1","OrIconButton","isMobile","useResponsive","_resolveComponent","_renderSlot","_component_OrIconButton","ModalSize","Modal","ModalSizes","_sfc_main","OrModalContent","OrModalFooter","OrModalHeader","OrOverlay","props","context","Styles.Modal","Styles.ModalSizes","state","open","close","usePopoverState","toRef","_component_OrOverlay","_createBlock","_withCtx","_createElementVNode","_mergeProps","_createVNode","_component_OrModalHeader","$event","_component_OrModalFooter"],"mappings":"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"}

package/dist/esm/{OrNotification-Dz3Tr1wI.mjs → OrNotification-DVQ-x6mP.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent as p, ref as g, computed as d, resolveComponent as m, openBlock as l, createElementBlock as f, normalizeClass as t, createElementVNode as a, createVNode as y, normalizeProps as h, guardReactiveProps as _, renderSlot as v, createTextVNode as b, toDisplayString as I, createBlock as w, withModifiers as O, createCommentVNode as S } from "vue";
-import { O as C } from "./OrIconButton-BlHCLpeW.mjs";
+import { O as C } from "./OrIconButton-BajZRp1k.mjs";
 import { O as N, I as n } from "./OrIndicator-CCrOseW7.mjs";
 import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
 var o = /* @__PURE__ */ ((r) => (r.Success = "success", r.Warning = "warning", r.Error = "error", r.Info = "info", r))(o || {});
@@ -147,4 +147,4 @@ export {
   F as O,
   $ as V
 };
-//# sourceMappingURL=OrNotification-Dz3Tr1wI.mjs.map
+//# sourceMappingURL=OrNotification-DVQ-x6mP.mjs.map