@onereach/ui-components 2.56.1-beta.1823.0 → 2.57.0-beta.1809.0

package/dist/v3/index76.js

@@ -1,13 +1,16 @@
-export { s as OrTag } from './OrTag-7e24fdbc.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-e1662dd9.js';
+import '@vueuse/core';
 import 'vue-demi';
-import './OrIcon-e23028f8.js';
-import 'lodash';
-import './OrTooltip-121eae2b.js';
+import './useClassAttribute-47fdb016.js';
+import './OrIcon-7aea0897.js';
 import 'vue';
-import './style-inject.es-4c6f2515.js';
-import './OrFloating-3da814a2.js';
+import './OrMenuItem-397a57e8.js';
+import './OrMenu-ae5443ce.js';
+import './OrPopover-45b1b10c.js';
 import '@floating-ui/dom';
-import './OrTeleportVue3-ad639f12.js';
-import './dom-7a41831b.js';
-import './px-to-rem-0b26b83e.js';
-import './color-1f348774.js';
+import './useElevation-0e973238.js';
+import './useResponsive-a02e95b7.js';
+import './OrBottomSheet-c554736e.js';
+import './OrOverlay-f7aa1e20.js';
+import './OrTeleport.vue3-8099178c.js';
+import './OrTab-5603c197.js';

package/dist/v3/index77.js

@@ -1,15 +1,13 @@
-export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-86441466.js';
+export { s as OrTag } from './OrTag-7e24fdbc.js';
 import 'vue-demi';
-import './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-import './OrIconButton-4eb5be4a.js';
-import './OrIcon-7aea0897.js';
+import './OrIcon-e23028f8.js';
+import 'lodash';
+import './OrTooltip-121eae2b.js';
 import 'vue';
-import './OrTooltip-46d77128.js';
-import './OrPopover-45b1b10c.js';
+import './style-inject.es-4c6f2515.js';
+import './OrFloating-3da814a2.js';
 import '@floating-ui/dom';
-import './useElevation-0e973238.js';
-import './useResponsive-a02e95b7.js';
-import './OrBottomSheet-c554736e.js';
-import './OrOverlay-f7aa1e20.js';
-import './OrTeleport.vue3-8099178c.js';
+import './OrTeleportVue3-ad639f12.js';
+import './dom-7a41831b.js';
+import './px-to-rem-0b26b83e.js';
+import './color-1f348774.js';

package/dist/v3/index78.js

@@ -1,3 +1,15 @@
-export { s as OrTeleport } from './OrTeleportVue3-ad639f12.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-86441466.js';
 import 'vue-demi';
+import './useClassAttribute-47fdb016.js';
+import '@vueuse/core';
+import './OrIconButton-4eb5be4a.js';
+import './OrIcon-7aea0897.js';
 import 'vue';
+import './OrTooltip-46d77128.js';
+import './OrPopover-45b1b10c.js';
+import '@floating-ui/dom';
+import './useElevation-0e973238.js';
+import './useResponsive-a02e95b7.js';
+import './OrBottomSheet-c554736e.js';
+import './OrOverlay-f7aa1e20.js';
+import './OrTeleport.vue3-8099178c.js';

package/dist/v3/index79.js

@@ -1,3 +1,3 @@
-export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
+export { s as OrTeleport } from './OrTeleportVue3-ad639f12.js';
 import 'vue-demi';
 import 'vue';

package/dist/v3/index80.js

@@ -1,5 +1,3 @@
-export { s as OrTextV3 } from './OrText-ecb46923.js';
+export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 import 'vue-demi';
-import './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
 import 'vue';

package/dist/v3/index81.js

@@ -1,10 +1,5 @@
-export { s as OrTextareaV3 } from './OrTextarea-4eb4b448.js';
-export { a as TextareaSize } from './OrInputBox-052e85ce.js';
+export { s as OrTextV3 } from './OrText-ecb46923.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import './OrError-a37964bc.js';
 import 'vue';
-import './OrHint-7016dc0d.js';
-import './OrLabel-0d19ba7a.js';
-import './style-inject.es-4c6f2515.js';

package/dist/v3/index82.js

@@ -1,20 +1,10 @@
-export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-faa4f81a.js';
+export { s as OrTextareaV3 } from './OrTextarea-37ec6826.js';
+export { a as TextareaSize } from './OrInputBox-e0c82161.js';
 import 'vue-demi';
+import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import './useToggle-29e4d7c7.js';
-import './px-to-rem-0b26b83e.js';
-import './dom-7a41831b.js';
-import 'lodash';
-import './OrLabel-876f8729.js';
+import './OrError-a37964bc.js';
 import 'vue';
+import './OrHint-7016dc0d.js';
+import './OrLabel-0d19ba7a.js';
 import './style-inject.es-4c6f2515.js';
-import './OrIconButton-f72cb8d9.js';
-import './OrIcon-e23028f8.js';
-import './OrTooltip-121eae2b.js';
-import './OrFloating-3da814a2.js';
-import '@floating-ui/dom';
-import './OrTeleportVue3-ad639f12.js';
-import './OrLoader-15174477.js';
-import './OrHint-1414c530.js';
-import './OrError-f90296db.js';
-import './OrCollapse-37a52e8f.js';

package/dist/v3/index83.js

@@ -1,17 +1,20 @@
-export { s as OrToast, a as OrToastContainer } from './OrToastContainer-fe6abe90.js';
-export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-4fbe0e5a.js';
-import './OrIconButton-f72cb8d9.js';
+export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-faa4f81a.js';
 import 'vue-demi';
-import './OrIcon-e23028f8.js';
+import '@vueuse/core';
+import './useToggle-29e4d7c7.js';
+import './px-to-rem-0b26b83e.js';
+import './dom-7a41831b.js';
 import 'lodash';
-import './OrTooltip-121eae2b.js';
+import './OrLabel-876f8729.js';
 import 'vue';
 import './style-inject.es-4c6f2515.js';
+import './OrIconButton-f72cb8d9.js';
+import './OrIcon-e23028f8.js';
+import './OrTooltip-121eae2b.js';
 import './OrFloating-3da814a2.js';
 import '@floating-ui/dom';
 import './OrTeleportVue3-ad639f12.js';
-import './dom-7a41831b.js';
-import './px-to-rem-0b26b83e.js';
 import './OrLoader-15174477.js';
-import './OrProgress-d0d52c86.js';
-import '@vueuse/core';
+import './OrHint-1414c530.js';
+import './OrError-f90296db.js';
+import './OrCollapse-37a52e8f.js';

package/dist/v3/index84.js

@@ -1,3 +1,17 @@
-export { a as useQueue, u as useToast } from './useToast-4fbe0e5a.js';
+export { s as OrToast, a as OrToastContainer } from './OrToastContainer-fe6abe90.js';
+export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-4fbe0e5a.js';
+import './OrIconButton-f72cb8d9.js';
 import 'vue-demi';
+import './OrIcon-e23028f8.js';
+import 'lodash';
+import './OrTooltip-121eae2b.js';
+import 'vue';
+import './style-inject.es-4c6f2515.js';
+import './OrFloating-3da814a2.js';
+import '@floating-ui/dom';
+import './OrTeleportVue3-ad639f12.js';
+import './dom-7a41831b.js';
+import './px-to-rem-0b26b83e.js';
+import './OrLoader-15174477.js';
+import './OrProgress-d0d52c86.js';
 import '@vueuse/core';

package/dist/v3/index85.js

@@ -1,18 +1,3 @@
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-0fd6e18c.js';
-export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
-import '@vueuse/core';
+export { a as useQueue, u as useToast } from './useToast-4fbe0e5a.js';
 import 'vue-demi';
-import './OrTeleport.vue3-8099178c.js';
-import 'vue';
-import './OrIconButton-4eb5be4a.js';
-import './useClassAttribute-47fdb016.js';
-import './OrIcon-7aea0897.js';
-import './OrTooltip-46d77128.js';
-import './OrPopover-45b1b10c.js';
-import '@floating-ui/dom';
-import './useElevation-0e973238.js';
-import './useResponsive-a02e95b7.js';
-import './OrBottomSheet-c554736e.js';
-import './OrOverlay-f7aa1e20.js';
-import './OrLoader-60943812.js';
-import './style-inject.es-4c6f2515.js';
+import '@vueuse/core';

package/dist/v3/index86.js

@@ -1,3 +1,18 @@
-export { a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
-import 'vue-demi';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-38b5d49f.js';
+export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 import '@vueuse/core';
+import 'vue-demi';
+import './OrTeleport.vue3-8099178c.js';
+import 'vue';
+import './OrIconButton-4eb5be4a.js';
+import './useClassAttribute-47fdb016.js';
+import './OrIcon-7aea0897.js';
+import './OrTooltip-46d77128.js';
+import './OrPopover-45b1b10c.js';
+import '@floating-ui/dom';
+import './useElevation-0e973238.js';
+import './useResponsive-a02e95b7.js';
+import './OrBottomSheet-c554736e.js';
+import './OrOverlay-f7aa1e20.js';
+import './OrLoader-60943812.js';
+import './style-inject.es-4c6f2515.js';

package/dist/v3/index87.js

@@ -1,9 +1,3 @@
-export { s as OrTooltip, a as OrTooltipContent } from './OrTooltip-121eae2b.js';
+export { a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 import 'vue-demi';
-import 'lodash';
-import 'vue';
-import './style-inject.es-4c6f2515.js';
-import './OrFloating-3da814a2.js';
-import '@floating-ui/dom';
-import './OrTeleportVue3-ad639f12.js';
-import './dom-7a41831b.js';
+import '@vueuse/core';

package/dist/v3/index88.js

@@ -1,12 +1,9 @@
-export { s as OrTooltipV3 } from './OrTooltip-46d77128.js';
-export { P as TooltipPlacement } from './OrPopover-45b1b10c.js';
-import '@vueuse/core';
+export { s as OrTooltip, a as OrTooltipContent } from './OrTooltip-121eae2b.js';
 import 'vue-demi';
-import './useClassAttribute-47fdb016.js';
+import 'lodash';
 import 'vue';
+import './style-inject.es-4c6f2515.js';
+import './OrFloating-3da814a2.js';
 import '@floating-ui/dom';
-import './useElevation-0e973238.js';
-import './useResponsive-a02e95b7.js';
-import './OrBottomSheet-c554736e.js';
-import './OrOverlay-f7aa1e20.js';
-import './OrTeleport.vue3-8099178c.js';
+import './OrTeleportVue3-ad639f12.js';
+import './dom-7a41831b.js';

package/dist/v3/index89.js

@@ -1,7 +1,12 @@
-export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-export { u as useElevation } from './useElevation-0e973238.js';
-export { u as useOverflow } from './useOverflow-ac506c65.js';
-export { u as useResponsive } from './useResponsive-a02e95b7.js';
-export { u as useToggle } from './useToggle-29e4d7c7.js';
-import 'vue-demi';
+export { s as OrTooltipV3 } from './OrTooltip-46d77128.js';
+export { P as TooltipPlacement } from './OrPopover-45b1b10c.js';
 import '@vueuse/core';
+import 'vue-demi';
+import './useClassAttribute-47fdb016.js';
+import 'vue';
+import '@floating-ui/dom';
+import './useElevation-0e973238.js';
+import './useResponsive-a02e95b7.js';
+import './OrBottomSheet-c554736e.js';
+import './OrOverlay-f7aa1e20.js';
+import './OrTeleport.vue3-8099178c.js';

package/dist/v3/index90.js

@@ -1,3 +1,7 @@
+export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+export { u as useElevation } from './useElevation-0e973238.js';
+export { u as useOverflow } from './useOverflow-ac506c65.js';
 export { u as useResponsive } from './useResponsive-a02e95b7.js';
-import '@vueuse/core';
+export { u as useToggle } from './useToggle-29e4d7c7.js';
 import 'vue-demi';
+import '@vueuse/core';

package/dist/v3/index91.js

@@ -0,0 +1,3 @@
+export { u as useResponsive } from './useResponsive-a02e95b7.js';
+import '@vueuse/core';
+import 'vue-demi';

package/dist/v3/{types-0fd6e18c.js → types-38b5d49f.js}

@@ -12,7 +12,7 @@ const ToastRoot = [
 'flex', 'justify-normal', 'items-start',
 // Box
 'w-[343px] md:w-[512px]', 'rounded-md',
-// Spacing
+// Sizing
 'px-md', 'py-md', 'gap-[16px]',
 // Typography
 'typography-caption-regular',
@@ -23,7 +23,7 @@ const ToastContainer = [
 'absolute',
 // Layout
 'flex', 'flex-col', 'items-center',
-// Spacing
+// Sizing
 'gap-[8px]',
 // Overflow
 'overflow-hidden'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.56.1-beta.1823.0",
+  "version": "2.57.0-beta.1809.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -29,7 +29,7 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.26.0",
+    "@onereach/styles": "^2.26.1-beta.1809.0",
     "@splidejs/splide": "4.0.6",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",

package/src/components/index.ts

@@ -21,6 +21,7 @@ export * from './or-error';
 export * from './or-error-tag-v3';
 export * from './or-error-v3';
 export * from './or-expansion-panel-v3';
+export * from './or-fab-v3';
 export * from './or-floating';
 export * from './or-hint';
 export * from './or-hint-v3';

package/src/components/or-fab-v3/OrFab.docs.mdx

@@ -0,0 +1,3 @@
+import { DocsPage } from '@storybook/addon-docs';
+
+<DocsPage />

package/src/components/or-fab-v3/OrFab.stories3.ts

@@ -0,0 +1,57 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import OrFabDocs from './OrFab.docs.mdx';
+import OrFab from './OrFab.vue';
+import { FabColor } from './props';
+
+export default {
+  title: 'Components/FAB',
+  component: OrFab,
+
+  argTypes: {
+    // Props
+    icon: {
+      control: { type: 'text' },
+    },
+
+    color: {
+      control: { type: 'select' },
+      options: Object.values(FabColor),
+    },
+
+    disabled: {
+      control: { type: 'boolean' },
+    },
+  },
+
+  parameters: {
+    docs: {
+      page: OrFabDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=202%3A9',
+    },
+  },
+} as Meta<typeof OrFab>;
+
+const Template: StoryFn<typeof OrFab> = (args) => ({
+  components: {
+    OrFab,
+    OrIcon,
+  },
+
+  setup() {
+    return { args };
+  },
+
+  template: '<OrFab v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  // Props
+  icon: 'add',
+};

package/src/components/or-fab-v3/OrFab.vue

@@ -0,0 +1,65 @@
+<template>
+  <button
+    ref="root"
+    v-bind="$attrs"
+    :class="rootStyles"
+    :type="'button'"
+    :disabled="disabled"
+  >
+    <OrIcon
+      :icon="icon"
+      :size="'l'"
+    />
+  </button>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import { FabColor } from './props';
+import { FabRoot, FabRootColors } from './styles';
+
+export default defineComponent({
+  name: 'OrFab',
+
+  components: {
+    OrIcon,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+
+    color: {
+      type: String as PropType<FabColor>,
+      default: FabColor.Primary,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup(props) {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-fab',
+      ...FabRoot,
+      ...FabRootColors[props.color],
+    ]);
+
+    return {
+      root,
+      rootStyles,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,2 @@
+export { default as OrFabV3 } from './OrFab.vue';
+export * from './props';

package/src/components/or-fab-v3/props.ts

@@ -0,0 +1,4 @@
+export enum FabColor {
+  Primary = 'primary',
+  Danger = 'danger',
+}

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

@@ -0,0 +1,33 @@
+import { FabColor } from './props';
+
+export const FabRoot: string[] = [
+  // Layout
+  'flex',
+  'justify-center',
+  'items-center',
+
+  // Box
+  'rounded-full',
+
+  // Sizing
+  'px-md',
+  'py-md',
+
+  // Theme
+  'shadow-button',
+  'dark:shadow-button-dark',
+];
+
+export const FabRootColors: Record<FabColor, string[]> = {
+  'primary': [
+    // Theme
+    'theme-preset-1-primary',
+    'dark:theme-preset-1-primary-dark',
+  ],
+
+  'danger': [
+    // Theme
+    'theme-preset-1-error',
+    'dark:theme-preset-1-error-dark',
+  ],
+};

package/src/components/or-input-box-v3/styles.ts

@@ -80,11 +80,7 @@ export const InputBoxRootVariants: Record<InputBoxVariant, string[]> = {
     'dark:invalid:read-only:!border-transparent',
   ],
 
-  'unstyled': [
-    // Theme (disabled)
-    'disabled:theme-foreground-disabled',
-    'dark:disabled:theme-foreground-disabled-dark',
-  ],
+  'unstyled': [],
 };
 
 export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {

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

@@ -10,7 +10,7 @@ export const ToastRoot = [
   'w-[343px] md:w-[512px]',
   'rounded-md',
 
-  // Spacing
+  // Sizing
   'px-md',
   'py-md',
   'gap-[16px]',
@@ -42,7 +42,7 @@ export const ToastContainer = [
 
   'items-center',
 
-  // Spacing
+  // Sizing
   'gap-[8px]',
 
   // Overflow