@blockle/blocks 0.20.0-alpha1.0 → 1.0.1

package/dist/components/overlay/Popover/popover-utils.js

@@ -1,62 +0,0 @@
-function getPopoverPosition(align, anchorRef, popoverRef) {
-  if (!anchorRef.current || !popoverRef.current) {
-    return [0, 0];
-  }
-  popoverRef.current.style.transform = "none";
-  popoverRef.current.style.transitionDuration = "0s";
-  const anchorRect = anchorRef.current.getBoundingClientRect();
-  const popoverRect = popoverRef.current.getBoundingClientRect();
-  let popoverStyles = getComputedStyle(popoverRef.current);
-  const top = popoverStyles.getPropertyValue("top");
-  const left = popoverStyles.getPropertyValue("left");
-  popoverRef.current.style.left = "0";
-  popoverRef.current.style.top = "0";
-  popoverStyles = getComputedStyle(popoverRef.current);
-  const marginTop = Number.parseFloat(
-    popoverStyles.getPropertyValue("margin-top")
-  );
-  const marginRight = Number.parseFloat(
-    popoverStyles.getPropertyValue("margin-right")
-  );
-  const marginBottom = Number.parseFloat(
-    popoverStyles.getPropertyValue("margin-bottom")
-  );
-  const marginLeft = Number.parseFloat(
-    popoverStyles.getPropertyValue("margin-left")
-  );
-  const marginY = marginTop + marginBottom;
-  const marginX = marginRight + marginLeft;
-  const docHeight = document.documentElement.clientHeight;
-  const docWidth = document.documentElement.clientWidth;
-  const docScrollTop = document.documentElement.scrollTop;
-  const docScrollLeft = document.documentElement.scrollLeft;
-  const anchorLeft = anchorRect.left + docScrollLeft;
-  const anchorTop = anchorRect.top + docScrollTop;
-  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
-  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
-  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
-  const leftPosition = anchorRect.left - popoverRect.width;
-  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
-  const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
-  popoverRef.current.style.transform = "";
-  popoverRef.current.style.transitionDuration = "";
-  popoverRef.current.style.top = top;
-  popoverRef.current.style.left = left;
-  switch (align) {
-    case "top": {
-      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
-    }
-    case "bottom": {
-      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
-    }
-    case "left": {
-      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
-    }
-    case "right": {
-      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
-    }
-  }
-}
-export {
-  getPopoverPosition
-};

package/dist/components/overlay/Tooltip/Tooltip.cjs

@@ -1,73 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const refs = require("../../../lib/react/refs.cjs");
-const theme = require("../../../lib/theme/store/theme.cjs");
-const Popover = require("../Popover/Popover.cjs");
-const Tooltip = ({
-  align = "top",
-  children,
-  label,
-  colorScheme
-}) => {
-  const id = react.useId();
-  const ref = react.useRef(null);
-  const [open, setOpen] = react.useState(false);
-  const tooltipClassName = theme.getComponentStyles("tooltip", {
-    base: true,
-    variants: { colorScheme }
-  });
-  react.useEffect(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    function onEnter() {
-      setOpen(true);
-    }
-    function onLeave() {
-      setOpen(false);
-    }
-    element.addEventListener("mouseenter", onEnter);
-    element.addEventListener("mouseleave", onLeave);
-    element.addEventListener("focusin", onEnter);
-    element.addEventListener("focusout", onLeave);
-    return () => {
-      element.removeEventListener("mouseenter", onEnter);
-      element.removeEventListener("mouseleave", onLeave);
-      element.removeEventListener("focusin", onEnter);
-      element.removeEventListener("focusout", onLeave);
-    };
-  }, []);
-  if (react.Children.count(children) !== 1) {
-    throw new Error("Tooltip component can only have one child");
-  }
-  const child = react.Children.toArray(children)[0];
-  if (!react.isValidElement(child)) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    react.cloneElement(child, {
-      ref: refs.composeRefs(ref, child.ref),
-      ["aria-describedby"]: open ? id : void 0
-    }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Popover.Popover,
-      {
-        id,
-        role: "tooltip",
-        anchorElement: ref,
-        open,
-        onRequestClose: () => {
-          setOpen(false);
-        },
-        align,
-        className: tooltipClassName,
-        children: label
-      }
-    )
-  ] });
-};
-exports.Tooltip = Tooltip;

package/dist/components/overlay/Tooltip/Tooltip.d.ts

@@ -1,11 +0,0 @@
-import { TooltipTheme } from '../../../lib/theme/componentThemes';
-import { PopoverProps } from '../Popover/Popover';
-type ReactElement = React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-export type TooltipProps = {
-    align?: PopoverProps['align'];
-    children: ReactElement;
-    label: React.ReactNode;
-    colorScheme?: TooltipTheme['variants']['colorScheme'];
-};
-export declare const Tooltip: React.FC<TooltipProps>;
-export {};

package/dist/components/overlay/Tooltip/Tooltip.js

@@ -1,73 +0,0 @@
-"use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useId, useRef, useState, useEffect, Children, isValidElement, cloneElement } from "react";
-import { composeRefs } from "../../../lib/react/refs.js";
-import { getComponentStyles } from "../../../lib/theme/store/theme.js";
-import { Popover } from "../Popover/Popover.js";
-const Tooltip = ({
-  align = "top",
-  children,
-  label,
-  colorScheme
-}) => {
-  const id = useId();
-  const ref = useRef(null);
-  const [open, setOpen] = useState(false);
-  const tooltipClassName = getComponentStyles("tooltip", {
-    base: true,
-    variants: { colorScheme }
-  });
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    function onEnter() {
-      setOpen(true);
-    }
-    function onLeave() {
-      setOpen(false);
-    }
-    element.addEventListener("mouseenter", onEnter);
-    element.addEventListener("mouseleave", onLeave);
-    element.addEventListener("focusin", onEnter);
-    element.addEventListener("focusout", onLeave);
-    return () => {
-      element.removeEventListener("mouseenter", onEnter);
-      element.removeEventListener("mouseleave", onLeave);
-      element.removeEventListener("focusin", onEnter);
-      element.removeEventListener("focusout", onLeave);
-    };
-  }, []);
-  if (Children.count(children) !== 1) {
-    throw new Error("Tooltip component can only have one child");
-  }
-  const child = Children.toArray(children)[0];
-  if (!isValidElement(child)) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    cloneElement(child, {
-      ref: composeRefs(ref, child.ref),
-      ["aria-describedby"]: open ? id : void 0
-    }),
-    /* @__PURE__ */ jsx(
-      Popover,
-      {
-        id,
-        role: "tooltip",
-        anchorElement: ref,
-        open,
-        onRequestClose: () => {
-          setOpen(false);
-        },
-        align,
-        className: tooltipClassName,
-        children: label
-      }
-    )
-  ] });
-};
-export {
-  Tooltip
-};

package/dist/components/overlay/Tooltip/Tooltip.stories.d.ts

@@ -1,5 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { TooltipProps } from './Tooltip';
-declare const _default: Meta;
-export default _default;
-export declare const Default: StoryObj<TooltipProps>;

package/dist/components/overlay/Tooltip/index.d.ts

@@ -1 +0,0 @@
-export { Tooltip, type TooltipProps } from './Tooltip';

package/dist/components/typography/Heading/Heading.cjs

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classnames = require("../../../lib/utils/classnames.cjs");
-const heading_css = require("./heading.css.cjs");
-const Box = require("../../layout/Box/Box.cjs");
-const Heading = ({
-  className,
-  level = 1,
-  children,
-  ...restProps
-}) => {
-  const Tag = `h${level}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box.Box,
-    {
-      asChild: true,
-      className: classnames.classnames(heading_css.heading, className),
-      ...restProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
-    }
-  );
-};
-exports.Heading = Heading;

package/dist/components/typography/Heading/Heading.d.ts

@@ -1,8 +0,0 @@
-import { MarginAtoms, PaddingAtoms, TextAtoms } from '../../../lib/css/atoms';
-import { HTMLElementProps } from '../../../lib/utils/utils';
-export type HeadingProps = {
-    children: React.ReactNode;
-    className?: string;
-    level: 1 | 2 | 3 | 4 | 5 | 6;
-} & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
-export declare const Heading: React.FC<HeadingProps>;

package/dist/components/typography/Heading/Heading.js

@@ -1,24 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { heading } from "./heading.css.js";
-import { Box } from "../../layout/Box/Box.js";
-const Heading = ({
-  className,
-  level = 1,
-  children,
-  ...restProps
-}) => {
-  const Tag = `h${level}`;
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      asChild: true,
-      className: classnames(heading, className),
-      ...restProps,
-      children: /* @__PURE__ */ jsx(Tag, { children })
-    }
-  );
-};
-export {
-  Heading
-};

package/dist/components/typography/Heading/heading.css.cjs

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const layers_css = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks");
-const heading = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      margin: 0,
-      padding: 0
-    }
-  }
-});
-fileScope.endFileScope();
-exports.heading = heading;

package/dist/components/typography/Heading/heading.css.d.ts

@@ -1 +0,0 @@
-export declare const heading: string;

package/dist/components/typography/Heading/heading.css.js

@@ -1,16 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.js";
-setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks");
-const heading = style({
-  "@layer": {
-    [blocksLayer]: {
-      margin: 0,
-      padding: 0
-    }
-  }
-});
-endFileScope();
-export {
-  heading
-};

package/dist/components/typography/Heading/heading.stories.d.ts

@@ -1,12 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Heading, HeadingProps } from './Heading';
-declare const _default: Meta<typeof Heading>;
-export default _default;
-export declare const Default: StoryObj<HeadingProps>;
-export declare const All: {
-    render: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, {
-        children: React.ReactNode;
-        className?: string;
-        level: 1 | 2 | 3 | 4 | 5 | 6;
-    } & import('../../../lib/css/atoms').TextAtoms & import('../../../lib/css/atoms').MarginAtoms & import('../../../lib/css/atoms').PaddingAtoms & import('../../../lib/utils/utils').HTMLElementProps<HTMLHeadingElement>>;
-};

package/dist/components/typography/Heading/index.d.ts

@@ -1 +0,0 @@
-export { Heading, type HeadingProps } from './Heading';

package/dist/components/typography/Text/Text.cjs

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classnames = require("../../../lib/utils/classnames.cjs");
-const text_css = require("./text.css.cjs");
-const Box = require("../../layout/Box/Box.cjs");
-const Text = ({
-  asChild,
-  children,
-  className,
-  ref,
-  tag,
-  ...restProps
-}) => {
-  const Component = tag ?? "span";
-  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { asChild: true, className: classnames.classnames(text_css.text, className), ...restProps, children: asChild ? children : (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, children })
-  ) });
-};
-exports.Text = Text;

package/dist/components/typography/Text/Text.d.ts

@@ -1,12 +0,0 @@
-import { default as React } from 'react';
-import { MarginAtoms, PaddingAtoms, TextAtoms } from '../../../lib/css/atoms';
-import { HTMLElementProps } from '../../../lib/utils/utils';
-type Tags = 'del' | 'em' | 'ins' | 'label' | 'p' | 's' | 'small' | 'span' | 'strong' | 'sub' | 'sup';
-export type TextProps<Tag extends Tags = 'span'> = {
-    asChild?: boolean;
-    children: React.ReactNode;
-    ref?: React.Ref<HTMLElementTagNameMap[Tag]>;
-    tag?: Tag;
-} & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLSpanElement>;
-export declare const Text: <T extends Tags = "span">({ asChild, children, className, ref, tag, ...restProps }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/typography/Text/Text.js

@@ -1,21 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { classnames } from "../../../lib/utils/classnames.js";
-import { text } from "./text.css.js";
-import { Box } from "../../layout/Box/Box.js";
-const Text = ({
-  asChild,
-  children,
-  className,
-  ref,
-  tag,
-  ...restProps
-}) => {
-  const Component = tag ?? "span";
-  return /* @__PURE__ */ jsx(Box, { asChild: true, className: classnames(text, className), ...restProps, children: asChild ? children : (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    /* @__PURE__ */ jsx(Component, { ref, children })
-  ) });
-};
-export {
-  Text
-};

package/dist/components/typography/Text/Text.stories.d.ts

@@ -1,5 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Text, TextProps } from './Text';
-declare const _default: Meta<typeof Text>;
-export default _default;
-export declare const Default: StoryObj<TextProps>;

package/dist/components/typography/Text/index.d.ts

@@ -1 +0,0 @@
-export { Text, type TextProps } from './Text';

package/dist/components/typography/Text/text.css.cjs

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const layers_css = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/typography/Text/text.css.ts", "@blockle/blocks");
-const text = css.style({
-  "@layer": {
-    [layers_css.blocksLayer]: {
-      margin: 0,
-      padding: 0
-    }
-  }
-});
-fileScope.endFileScope();
-exports.text = text;

package/dist/components/typography/Text/text.css.d.ts

@@ -1 +0,0 @@
-export declare const text: string;

package/dist/components/typography/Text/text.css.js

@@ -1,16 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.js";
-setFileScope("src/components/typography/Text/text.css.ts", "@blockle/blocks");
-const text = style({
-  "@layer": {
-    [blocksLayer]: {
-      margin: 0,
-      padding: 0
-    }
-  }
-});
-endFileScope();
-export {
-  text
-};

package/dist/entries/themes/momotaro.d.ts

@@ -1 +0,0 @@
-export { momotaro } from '../../themes/momotaro';

package/dist/hooks/useClickOutside/useClickOutside.cjs

@@ -1,24 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
-  react.useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    const listener = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        onClickOutside();
-      }
-    };
-    const rafId = requestAnimationFrame(() => {
-      document.addEventListener("click", listener);
-    });
-    return () => {
-      cancelAnimationFrame(rafId);
-      document.removeEventListener("click", listener);
-    };
-  }, [ref, onClickOutside, enabled]);
-};
-exports.useClickOutside = useClickOutside;

package/dist/hooks/useClickOutside/useClickOutside.d.ts

@@ -1,6 +0,0 @@
-import { default as React } from 'react';
-type UseClickOutsideOptions = {
-    enabled?: boolean;
-};
-export declare const useClickOutside: (ref: React.RefObject<HTMLElement | null>, onClickOutside: () => void, { enabled }?: UseClickOutsideOptions) => void;
-export {};

package/dist/hooks/useClickOutside/useClickOutside.js

@@ -1,24 +0,0 @@
-"use client";
-import { useEffect } from "react";
-const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
-  useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    const listener = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        onClickOutside();
-      }
-    };
-    const rafId = requestAnimationFrame(() => {
-      document.addEventListener("click", listener);
-    });
-    return () => {
-      cancelAnimationFrame(rafId);
-      document.removeEventListener("click", listener);
-    };
-  }, [ref, onClickOutside, enabled]);
-};
-export {
-  useClickOutside
-};

package/dist/hooks/useControlledValue/useControlledValue.cjs

@@ -1,33 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-function useControlledValue({
-  defaultValue,
-  value,
-  onChange,
-  transformValue
-}) {
-  const [internValue, setInternValue] = react.useState(defaultValue);
-  const currentValue = (onChange ? value : internValue) ?? defaultValue;
-  const setValue = react.useCallback(
-    function setValue2(value2) {
-      const nextValue = transformValue ? transformValue(value2) : value2;
-      if (onChange) {
-        onChange(nextValue);
-      } else {
-        setInternValue(nextValue);
-      }
-    },
-    [onChange, transformValue]
-  );
-  if (process.env.NODE_ENV !== "production") {
-    react.useEffect(() => {
-      if (onChange && value === void 0) {
-        console.error("Slider is in controlled mode but no value is provided");
-      }
-    }, []);
-  }
-  return [currentValue, setValue];
-}
-exports.useControlledValue = useControlledValue;

package/dist/hooks/useControlledValue/useControlledValue.d.ts

@@ -1,8 +0,0 @@
-type ControlledValue<T> = {
-    value?: T;
-    defaultValue: T;
-    onChange?: (value: T) => void;
-    transformValue?: (value: T) => T;
-};
-export declare function useControlledValue<T>({ defaultValue, value, onChange, transformValue, }: ControlledValue<T>): [T, (value: T) => void];
-export {};

package/dist/hooks/useControlledValue/useControlledValue.js

@@ -1,33 +0,0 @@
-"use client";
-import { useState, useCallback, useEffect } from "react";
-function useControlledValue({
-  defaultValue,
-  value,
-  onChange,
-  transformValue
-}) {
-  const [internValue, setInternValue] = useState(defaultValue);
-  const currentValue = (onChange ? value : internValue) ?? defaultValue;
-  const setValue = useCallback(
-    function setValue2(value2) {
-      const nextValue = transformValue ? transformValue(value2) : value2;
-      if (onChange) {
-        onChange(nextValue);
-      } else {
-        setInternValue(nextValue);
-      }
-    },
-    [onChange, transformValue]
-  );
-  if (process.env.NODE_ENV !== "production") {
-    useEffect(() => {
-      if (onChange && value === void 0) {
-        console.error("Slider is in controlled mode but no value is provided");
-      }
-    }, []);
-  }
-  return [currentValue, setValue];
-}
-export {
-  useControlledValue
-};

package/dist/hooks/useFocusLock/index.d.ts

@@ -1 +0,0 @@
-export { useFocusLock } from './useFocusLock';

package/dist/hooks/useFocusLock/useFocusLock.d.ts

@@ -1,6 +0,0 @@
-type UseFocusLock = {
-    ref: React.RefObject<HTMLElement>;
-    active: boolean;
-};
-export declare const useFocusLock: ({ ref, active }: UseFocusLock) => void;
-export {};

package/dist/hooks/useIsomorphicLayoutEffect/index.d.ts

@@ -1 +0,0 @@
-export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs

@@ -1,6 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
-exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -1,5 +0,0 @@
-import { useEffect } from 'react';
-/**
- * useLayoutEffect is not avaible on server side use useEffect instead.
- */
-export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

@@ -1,6 +0,0 @@
-"use client";
-import { useEffect, useLayoutEffect } from "react";
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-export {
-  useIsomorphicLayoutEffect
-};

package/dist/hooks/useKeyboard/index.d.ts

@@ -1 +0,0 @@
-export { useKeyboard } from './useKeyboard';

package/dist/hooks/useKeyboard/useKeyboard.cjs

@@ -1,21 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
-  react.useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    function handleKeyDown(event) {
-      if (event.key === key) {
-        callback(event);
-      }
-    }
-    document.addEventListener(type, handleKeyDown);
-    return () => {
-      document.removeEventListener(type, handleKeyDown);
-    };
-  }, [callback, enabled, key, type]);
-};
-exports.useKeyboard = useKeyboard;