feat(system): ✨ add createHook function

src/accordion/Accordion.ts

@@ -1,7 +1,6 @@
-import { createHook } from "reakit-system";
 import { CompositeHTMLProps, CompositeOptions, useComposite } from "reakit";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { ACCORDION_KEYS } from "./__keys";
 

src/accordion/AccordionPanel.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { createHook } from "reakit-system";
 import {
   DisclosureContentHTMLProps,
   DisclosureContentOptions,
@@ -10,7 +9,7 @@ import {
 } from "reakit";
 import { useForkRef } from "reakit-utils";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { ACCORDION_PANEL_KEYS } from "./__keys";
 import { AccordionMultiStateReturn } from "./AccordionMultiState";

src/accordion/AccordionTrigger.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { createHook } from "reakit-system";
 import {
   ButtonHTMLProps,
   ButtonOptions,
@@ -10,7 +9,7 @@ import {
 } from "reakit";
 import { callAllHandlers } from "@chakra-ui/utils";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 import { ariaAttr } from "../utils";
 
 import { ACCORDION_TRIGGER_KEYS } from "./__keys";

src/breadcrumbs/BreadcrumbLink.ts

@@ -1,7 +1,5 @@
-import { createHook } from "reakit-system";
-
 import { LinkHTMLProps, LinkOptions, useLink } from "../link";
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { BREADCRUMB_LINK_KEYS } from "./__keys";
 

src/calendar/Calendar.ts

@@ -3,10 +3,9 @@
  * We improved the Calendar from Aria [useCalendarBase](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/calendar/src/useCalendarBase.ts)
  * to work with Reakit System
  */
-import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { CALENDAR_KEYS } from "./__keys";
 import { CalendarStateReturn } from "./CalendarState";

src/calendar/CalendarButton.ts

@@ -3,11 +3,10 @@
  * We improved the Calendar from Aria [useCalendarBase](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/calendar/src/useCalendarBase.ts)
  * to work with Reakit System
  */
-import { createHook } from "reakit-system";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 import { callAllHandlers } from "@chakra-ui/utils";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { CALENDAR_BUTTON_KEYS } from "./__keys";
 import { CalendarStateReturn } from "./CalendarState";

src/calendar/CalendarCell.ts

@@ -4,11 +4,10 @@
  * to work with Reakit System
  */
 import { useCallback } from "react";
-import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { callAllHandlers } from "@chakra-ui/utils";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 import {
   ariaAttr,
   dataAttr,

src/calendar/CalendarCellButton.ts

@@ -4,13 +4,12 @@
  * to work with Reakit System
  */
 import * as React from "react";
-import { createHook } from "reakit-system";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 import { ensureFocus, useForkRef } from "reakit-utils";
 import { callAllHandlers } from "@chakra-ui/utils";
 import { useDateFormatter } from "@react-aria/i18n";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 import { isSameDay } from "../utils";
 
 import { CALENDAR_CELL_BUTTON_KEYS } from "./__keys";

src/calendar/CalendarGrid.ts

@@ -4,13 +4,12 @@
  * to work with Reakit System
  */
 import { KeyboardEvent, useRef } from "react";
-import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { createOnKeyDown, useForkRef } from "reakit-utils";
 import { callAllHandlers } from "@chakra-ui/utils";
 import { chain } from "@react-aria/utils";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 import { ariaAttr } from "../utils";
 
 import { CALENDAR_GRID_KEYS } from "./__keys";

src/calendar/CalendarHeader.ts

@@ -1,8 +1,7 @@
-import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { useDateFormatter } from "@react-aria/i18n";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { CALENDAR_HEADER_KEYS } from "./__keys";
 import { CalendarStateReturn } from "./CalendarState";

src/calendar/CalendarWeekTitle.ts

@@ -1,7 +1,6 @@
-import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { CALENDAR_WEEK_TITLE_KEYS } from "./__keys";
 import { CalendarStateReturn } from "./CalendarState";

src/checkbox/Checkbox.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
-import { createHook } from "reakit-system";
 import { ClickableHTMLProps, ClickableOptions, useClickable } from "reakit";
 import { removeIndexFromArray, useForkRef, useLiveRef } from "reakit-utils";
 import { warning } from "reakit-warning";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { CHECKBOX_KEYS } from "./__keys";
 import { CheckboxStateReturn } from "./CheckboxState";

src/datepicker/DatePicker.ts

@@ -1,11 +1,9 @@
-import { createHook } from "reakit-system";
-
 import {
   PickerBaseHTMLProps,
   PickerBaseOptions,
   usePickerBase,
 } from "../picker-base";
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 import { ariaAttr } from "../utils";
 
 import { DATE_PICKER_KEYS } from "./__keys";

src/datepicker/DatePickerContent.ts

@@ -1,11 +1,9 @@
-import { createHook } from "reakit-system";
-
 import {
   PickerBaseHTMLProps,
   PickerBaseOptions,
   usePickerBaseContent,
 } from "../picker-base";
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { DATE_PICKER_CONTENT_KEYS } from "./__keys";
 

src/datepicker/DatePickerSegment.ts

@@ -1,8 +1,7 @@
-import { createHook } from "reakit-system";
 import { unstable_useId as useId } from "reakit";
 
 import { SegmentHTMLProps, SegmentOptions, useSegment } from "../segment";
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { DATE_PICKER_SEGMENT_KEYS } from "./__keys";
 import { DatePickerStateReturn } from ".";

src/datepicker/DatePickerSegmentField.ts

@@ -1,11 +1,9 @@
-import { createHook } from "reakit-system";
-
 import {
   SegmentFieldHTMLProps,
   SegmentFieldOptions,
   useSegmentField,
 } from "../segment";
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { DATE_PICKER_SEGMENT_FIELD_KEYS } from "./__keys";
 import { DatePickerStateReturn } from "./DatePickerState";

src/datepicker/DatePickerTrigger.ts

@@ -1,11 +1,9 @@
-import { createHook } from "reakit-system";
-
 import {
   PickerBaseTriggerHTMLProps,
   PickerBaseTriggerOptions,
   usePickerBaseTrigger,
 } from "../picker-base";
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { DATE_PICKER_TRIGGER_KEYS } from "./__keys";
 

src/dialog/DialogBackdrop.tsx

@@ -1,14 +1,13 @@
 import * as React from "react";
 import { RemoveScroll } from "react-remove-scroll";
-import { createHook } from "reakit-system";
 import { Portal } from "reakit";
 
 import {
   DisclosureContentHTMLProps,
   DisclosureContentOptions,
   useDisclosureContent,
 } from "../disclosure/DisclosureContent";
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { DIALOG_BACKDROP_KEYS } from "./__keys";
 import { DialogStateReturn } from "./DialogState";

src/dialog/DialogDisclosure.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { createHook } from "reakit-system";
 import { useForkRef, useLiveRef } from "reakit-utils";
 import { warning } from "reakit-warning";
 import { useSafeLayoutEffect } from "@chakra-ui/hooks";
@@ -9,7 +8,7 @@ import {
   DisclosureOptions,
   useDisclosure,
 } from "../disclosure";
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { DIALOG_DISCLOSURE_KEYS } from "./__keys";
 import { DialogStateReturn } from "./DialogState";

src/drawer/Drawer.ts

@@ -1,7 +1,5 @@
-import { createHook } from "reakit-system";
-
 import { DialogHTMLProps, DialogOptions, useDialog } from "../dialog";
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { DRAWER_KEYS } from "./__keys";
 

src/drawer/DrawerBackdrop.ts

@@ -1,11 +1,9 @@
-import { createHook } from "reakit-system";
-
 import {
   DialogBackdropHTMLProps,
   DialogBackdropOptions,
   useDialogBackdrop,
 } from "../dialog";
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { DRAWER_BACKDROP_KEYS } from "./__keys";
 

src/drawer/DrawerDisclosure.tsx

@@ -1,11 +1,9 @@
-import { createHook } from "reakit-system";
-
 import {
   DialogDisclosureHTMLProps,
   DialogDisclosureOptions,
   useDialogDisclosure,
 } from "../dialog";
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { DRAWER_DISCLOSURE_KEYS } from "./__keys";
 

src/link/Link.ts

@@ -1,10 +1,9 @@
 import * as React from "react";
-import { createHook } from "reakit-system";
 import { ClickableHTMLProps, ClickableOptions, useClickable } from "reakit";
 import { useForkRef } from "reakit-utils";
 import { useWarning } from "reakit-warning";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { LINK_KEYS } from "./__keys";
 

src/number-input/NumberInput.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { createHook } from "reakit-system";
 import { InputHTMLProps, InputOptions, useInput } from "reakit";
 import { EventKeyMap, mergeRefs } from "@chakra-ui/react-utils";
 import {
@@ -8,7 +7,7 @@ import {
   StringOrNumber,
 } from "@chakra-ui/utils";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 import { ariaAttr } from "../utils";
 
 import { NUMBER_INPUT_KEYS } from "./__keys";

src/number-input/NumberInputDecrementButton.ts

@@ -1,9 +1,8 @@
 import * as React from "react";
-import { createHook } from "reakit-system";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 import { callAllHandlers } from "@chakra-ui/utils";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { NUMBER_INPUT_DECREMENT_BUTTON_KEYS } from "./__keys";
 import { NumberInputStateReturn } from "./index";

src/number-input/NumberInputIncrementButton.ts

@@ -1,9 +1,8 @@
 import * as React from "react";
-import { createHook } from "reakit-system";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 import { callAllHandlers } from "@chakra-ui/utils";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { NUMBER_INPUT_INCREMENT_BUTTON_KEYS } from "./__keys";
 import { NumberInputStateReturn } from "./index";

src/pagination/PaginationButton.ts

@@ -1,9 +1,8 @@
 import * as React from "react";
-import { createHook } from "reakit-system";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 import { callAllHandlers, isNumber } from "@chakra-ui/utils";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { PAGINATION_BUTTON_KEYS } from "./__keys";
 import { PaginationStateReturn } from "./PaginationState";

src/picker-base/PickerBase.ts

@@ -1,10 +1,9 @@
 import * as React from "react";
-import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { createOnKeyDown } from "reakit-utils";
 import { callAllHandlers } from "@chakra-ui/utils";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 import { ariaAttr, isTouch } from "../utils";
 
 import { PICKER_BASE_KEYS } from "./__keys";

src/picker-base/PickerBaseContent.ts

@@ -1,7 +1,6 @@
-import { createHook } from "reakit-system";
 import { PopoverHTMLProps, PopoverOptions, usePopover } from "reakit";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { PICKER_BASE_CONTENT_KEYS } from "./__keys";
 import { PickerBaseStateReturn } from "./PickerBaseState";

src/picker-base/PickerBaseTrigger.ts

@@ -1,12 +1,11 @@
-import { createHook } from "reakit-system";
 import {
   PopoverDisclosureHTMLProps,
   PopoverDisclosureOptions,
   usePopoverDisclosure,
 } from "reakit";
 import { callAllHandlers } from "@chakra-ui/utils";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { PICKER_BASE_TRIGGER_KEYS } from "./__keys";
 import { PickerBaseStateReturn } from "./PickerBaseState";

src/popover/Popover.tsx

@@ -1,8 +1,7 @@
 import { CSSProperties } from "react";
-import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { POPOVER_KEYS } from "./__keys";
 import { PopoverStateReturn } from "./PopoverState";

src/popover/PopoverAnchor.tsx

@@ -1,8 +1,7 @@
-import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 import { useForkRef } from "reakit-utils";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { POPOVER_ANCHOR_KEYS } from "./__keys";
 import { PopoverStateReturn } from "./PopoverState";

src/popover/PopoverArrow.tsx

@@ -1,8 +1,7 @@
 import { CSSProperties } from "react";
-import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
 
-import { createComponent } from "../system";
+import { createComponent, createHook } from "../system";
 
 import { POPOVER_ARROW_KEYS } from "./__keys";
 import { PopoverStateReturn } from "./PopoverState";