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

package/dist/v3/index64.js

@@ -1,6 +1,26 @@
-export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
-import '@vueuse/core';
-import 'lodash';
+export { s as OrSelectV3 } from './OrSelect-9aeb53ce.js';
+export { a as SelectSize } from './OrInputBox-e0c82161.js';
 import 'vue-demi';
+import './useClassAttribute-47fdb016.js';
+import './useOverflow-ac506c65.js';
+import '@vueuse/core';
+import './OrCheckbox-e4df1568.js';
+import './OrLabel-0d19ba7a.js';
 import 'vue';
 import './style-inject.es-4c6f2515.js';
+import './OrError-a37964bc.js';
+import './OrExpansionPanel-dddf09e4.js';
+import './OrIcon-7aea0897.js';
+import './OrHint-7016dc0d.js';
+import './OrInput-e70341f6.js';
+import './OrIconButton-4eb5be4a.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 './OrTeleport.vue3-8099178c.js';
+import './OrMenuItem-397a57e8.js';
+import './OrTag-86441466.js';

package/dist/v3/index65.js

@@ -1,5 +1,6 @@
-export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-96f8b7c3.js';
+export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 import '@vueuse/core';
 import 'lodash';
 import 'vue-demi';
 import 'vue';
+import './style-inject.es-4c6f2515.js';

package/dist/v3/index66.js

@@ -1,6 +1,5 @@
-export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';
-import 'vue-demi';
-import './px-to-rem-0b26b83e.js';
+export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-96f8b7c3.js';
+import '@vueuse/core';
 import 'lodash';
+import 'vue-demi';
 import 'vue';
-import './style-inject.es-4c6f2515.js';

package/dist/v3/index67.js

@@ -1,13 +1,6 @@
-export { s as OrSlider } from './OrSlider-af80bac9.js';
-import './OrIcon-e23028f8.js';
+export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';
 import 'vue-demi';
+import './px-to-rem-0b26b83e.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 '@vueuse/core';

package/dist/v3/index68.js

@@ -1,7 +1,6 @@
-export { s as OrStepper } from './OrStepper-f355b7b7.js';
-import 'vue-demi';
-import './OrIconButton-f72cb8d9.js';
+export { s as OrSlider } from './OrSlider-af80bac9.js';
 import './OrIcon-e23028f8.js';
+import 'vue-demi';
 import 'lodash';
 import './OrTooltip-121eae2b.js';
 import 'vue';
@@ -11,4 +10,4 @@ import '@floating-ui/dom';
 import './OrTeleportVue3-ad639f12.js';
 import './dom-7a41831b.js';
 import './px-to-rem-0b26b83e.js';
-import './OrLoader-15174477.js';
+import '@vueuse/core';

package/dist/v3/index69.js

@@ -1,6 +1,14 @@
-export { s as OrSwitch } from './OrSwitch-c333ee32.js';
+export { s as OrStepper } from './OrStepper-f355b7b7.js';
 import 'vue-demi';
+import './OrIconButton-f72cb8d9.js';
+import './OrIcon-e23028f8.js';
 import 'lodash';
-import './OrLoader-15174477.js';
+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';

package/dist/v3/index70.js

@@ -1,8 +1,6 @@
-export { s as OrSwitchV3 } from './OrSwitch-a3653e90.js';
+export { s as OrSwitch } from './OrSwitch-c333ee32.js';
 import 'vue-demi';
-import './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-import './OrLabel-0d19ba7a.js';
+import 'lodash';
+import './OrLoader-15174477.js';
 import 'vue';
-import './OrLoader-60943812.js';
 import './style-inject.es-4c6f2515.js';

package/dist/v3/index71.js

@@ -1,6 +1,8 @@
-export { s as OrTab } from './OrTab-bc98be02.js';
+export { s as OrSwitchV3 } from './OrSwitch-a3653e90.js';
 import 'vue-demi';
-import 'uuid';
-import 'lodash';
+import './useClassAttribute-47fdb016.js';
+import '@vueuse/core';
+import './OrLabel-0d19ba7a.js';
 import 'vue';
+import './OrLoader-60943812.js';
 import './style-inject.es-4c6f2515.js';

package/dist/v3/index72.js

@@ -1,5 +1,6 @@
-export { s as OrTabHeaderItem } from './OrTabHeaderItem-d668cc59.js';
+export { s as OrTab } from './OrTab-bc98be02.js';
 import 'vue-demi';
+import 'uuid';
 import 'lodash';
 import 'vue';
 import './style-inject.es-4c6f2515.js';

package/dist/v3/index73.js

@@ -1,5 +1,5 @@
-export { s as OrTabV3 } from './OrTab-5603c197.js';
+export { s as OrTabHeaderItem } from './OrTabHeaderItem-d668cc59.js';
 import 'vue-demi';
-import './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
+import 'lodash';
 import 'vue';
+import './style-inject.es-4c6f2515.js';

package/dist/v3/index74.js

@@ -1,6 +1,5 @@
-export { s as OrTabs } from './OrTabs-d3812c11.js';
+export { s as OrTabV3 } from './OrTab-5603c197.js';
 import 'vue-demi';
-import './OrTabHeaderItem-d668cc59.js';
-import 'lodash';
+import './useClassAttribute-47fdb016.js';
+import '@vueuse/core';
 import 'vue';
-import './style-inject.es-4c6f2515.js';

package/dist/v3/index75.js

@@ -1,16 +1,6 @@
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-e1662dd9.js';
-import '@vueuse/core';
+export { s as OrTabs } from './OrTabs-d3812c11.js';
 import 'vue-demi';
-import './useClassAttribute-47fdb016.js';
-import './OrIcon-7aea0897.js';
+import './OrTabHeaderItem-d668cc59.js';
+import 'lodash';
 import 'vue';
-import './OrMenuItem-397a57e8.js';
-import './OrMenu-ae5443ce.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';
-import './OrTab-5603c197.js';
+import './style-inject.es-4c6f2515.js';

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-15b3c712.js';
+export { s as OrTag } from './OrTag-7e24fdbc.js';
 import 'vue-demi';
-import './useClassAttribute-47fdb016.js';
-import '@vueuse/core';
-import './OrIconButton-0b2b01cb.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-37ec6826.js';
-export { a as TextareaSize } from './OrInputBox-e0c82161.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-181d36e1.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-0b2b01cb.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-181d36e1.js → types-38b5d49f.js}

@@ -2,7 +2,7 @@ import { useToggle } from '@vueuse/core';
 import { defineComponent, ref, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
 import { s as script$4 } from './OrTeleport.vue3-8099178c.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-0665462d.js';
-import { s as script$2 } from './OrIconButton-0b2b01cb.js';
+import { s as script$2 } from './OrIconButton-4eb5be4a.js';
 import { s as script$3 } from './OrLoader-60943812.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, toDisplayString, createElementVNode, createBlock, withModifiers, withCtx, TransitionGroup, Fragment, renderList, mergeProps } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.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.1824.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',
+};