address feedback

Author: jquense

src/index.ts

@@ -1,46 +1,45 @@
-import Dropdown from './Dropdown.js';
-import { useDropdownMenu } from './DropdownMenu.js';
-import { useDropdownToggle } from './DropdownToggle.js';
-import { useDropdownItem } from './DropdownItem.js';
-import Modal from './Modal.js';
-import Overlay from './Overlay.js';
-import Portal from './Portal.js';
-import useRootClose from './useRootClose.js';
-import Nav from './Nav.js';
-import NavItem, { useNavItem } from './NavItem.js';
-import Button from './Button.js';
-import Tabs from './Tabs.js';
-import TabPanel from './TabPanel.js';
-
 export {
-  Button,
-  Dropdown,
-  useDropdownMenu,
-  useDropdownToggle,
-  useDropdownItem,
-  Nav,
-  NavItem,
-  useNavItem,
-  Modal,
-  Overlay,
-  Portal,
-  useRootClose,
-  Tabs,
-  TabPanel,
-};
-
-export type { ButtonProps } from './Button.js';
-export type {
-  DropdownProps,
-  DropdownMenuProps,
-  UseDropdownMenuMetadata,
-  UseDropdownMenuOptions,
-  DropdownToggleProps,
-  UseDropdownToggleMetadata,
-  DropdownItemProps,
+  default as Dropdown,
+  type DropdownProps,
+  type DropdownMenuProps,
+  type UseDropdownMenuMetadata,
+  type UseDropdownMenuOptions,
+  type DropdownToggleProps,
+  type UseDropdownToggleMetadata,
+  type DropdownItemProps,
 } from './Dropdown.js';
-export type { NavItemProps, UseNavItemOptions, NavProps } from './Nav.js';
-export type { ModalProps } from './Modal.js';
-export type { OverlayProps } from './Overlay.js';
-export type { PortalProps } from './Portal.js';
-export type { TabsProps, TabPanelProps } from './Tabs.js';
+export { useDropdownMenu } from './DropdownMenu.js';
+export { useDropdownToggle } from './DropdownToggle.js';
+export { useDropdownItem } from './DropdownItem.js';
+export { default as Modal, type ModalProps } from './Modal.js';
+export { default as Overlay, type OverlayProps } from './Overlay.js';
+export { default as Portal, type PortalProps } from './Portal.js';
+export {
+  default as useRootClose,
+  type RootCloseOptions,
+} from './useRootClose.js';
+export {
+  default as Nav,
+  type NavItemProps,
+  type UseNavItemOptions,
+  type NavProps,
+} from './Nav.js';
+export { default as NavItem, useNavItem } from './NavItem.js';
+export { default as Button, type ButtonProps } from './Button.js';
+export { default as Tabs, type TabsProps, type TabPanelProps } from './Tabs.js';
+export { default as TabPanel } from './TabPanel.js';
+
+export {
+  default as Waypoint,
+  type WaypointProps,
+  type WaypointEvent,
+} from './Waypoint.js';
+export {
+  default as useWaypoint,
+  Position,
+  type WaypointOptions,
+} from './useWaypoint.js';
+export {
+  default as useClickOutside,
+  type ClickOutsideOptions,
+} from './useClickOutside.js';

www/docs/Button.mdx

@@ -1,10 +1,12 @@
 An abstract button component for creating accessible buttons regardless of the HTML
 element used to render it.
 
-```jsx live className=button-example
+```jsx live
 import { Button } from "@restart/ui";
 
-<Button>I'm a Button</Button>;
+<div className="button-example">
+  <Button>I'm a Button</Button>
+</div>;
 ```
 
 Not very impressive on its own, but `Button` does come with a few conveniences
@@ -14,10 +16,10 @@ over the plain HTML element.
 - Ensures that non `button` `as` options remain accessible
 - contextually renders an `<a>` if href or other anchor props are added.
 
-```jsx live className=button-example
+```jsx live
 import { Button } from "@restart/ui";
 
-<div className="space-x-4">
+<div className="space-x-4 button-example">
   <Button>I'm a Button</Button>
   <Button href="/home">I'm a link</Button>
   <Button as="span">I'm a span but also a button</Button>
@@ -73,7 +75,7 @@ function StyledButton(props) {
         !props.disabled &&
           "cursor-pointer hover:bg-primary hover:text-white",
         "active:bg-primary-600 active:text-white",
-        props.disabled && "cursor-not-allowed opacity-60"
+        props.disabled && "cursor-not-allowed opacity-60",
       )}
     />
   );

www/docs/Waypoint.mdx

@@ -39,9 +39,8 @@ to the `root` prop.
 
 ```tsx
 function ScrollArea({ items, onPositionChange }) {
-  const [element, setElement] = useState<HTMLDivElement>(
-    null
-  );
+  const [element, setElement] =
+    useState<HTMLDivElement>(null);
 
   return (
     <div ref={setElement} style={{ overflow: "auto" }}>
@@ -91,9 +90,7 @@ when you want an individual component to respond
 
 ```tsx live
 import getScrollParent from "dom-helpers/scrollParent";
-import useWaypoint, {
-  Position,
-} from "@restart/ui/useWaypoint";
+import { useWaypoint, Position } from "@restart/ui";
 
 function LazyImage({ src }) {
   const [element, attachRef] = useState(null);
@@ -112,7 +109,7 @@ function LazyImage({ src }) {
       root: "scrollParent",
       scrollDirection: "horizontal",
       rootMargin: { right: -80 },
-    }
+    },
   );
 
   return (

www/docs/useRootClose.mdx

@@ -2,28 +2,30 @@
 import { useRootClose } from "@restart/ui";
 import Button from "../src/Button";
 
-const ref = useRef();
-const [show, setShow] = useState(false);
-const handleRootClose = () => setShow(false);
+function RootCloseWrapper() {
+  const ref = useRef();
+  const [show, setShow] = useState(false);
+  const handleRootClose = () => setShow(false);
 
-useRootClose(ref, handleRootClose, {
-  disabled: !show,
-});
+  useRootClose(ref, handleRootClose, {
+    disabled: !show,
+  });
 
-return (
-  <div className="flex flex-col items-center space-y-4">
-    <Button type="button" onClick={() => setShow(true)}>
-      Render RootCloseWrapper
-    </Button>
+  return (
+    <div className="flex flex-col items-center space-y-4">
+      <Button type="button" onClick={() => setShow(true)}>
+        Render RootCloseWrapper
+      </Button>
 
-    {show && (
-      <div
-        ref={ref}
-        className="rounded shadow bg-white p-6"
-      >
-        <span>Click anywhere to dismiss me!</span>
-      </div>
-    )}
-  </div>
-);
+      {show && (
+        <div
+          ref={ref}
+          className="rounded shadow bg-white p-6"
+        >
+          <span>Click anywhere to dismiss me!</span>
+        </div>
+      )}
+    </div>
+  );
+}
 ```

www/src/LiveCodeblock.tsx

@@ -16,6 +16,9 @@ import * as RestartUi from '@restart/ui';
 import Button from './Button';
 import Dropdown from './Dropdown';
 import Tooltip from './Tooltip';
+import Transition from 'react-transition-group/Transition';
+import scrollParent from 'dom-helpers/scrollParent';
+import '../src/css/transitions.css';
 
 // @ts-ignore
 import styles from './LiveCodeBlock.module.css';
@@ -31,10 +34,13 @@ const LocalImports = {
   react: React,
   'react-dom': ReactDOM,
   '@restart/ui': RestartUi,
+  'react-transition-group/Transition': Transition,
+  'dom-helpers/scrollParent': scrollParent,
   clsx,
   '../src/Button': Button,
   '../src/Dropdown': Dropdown,
   '../src/Tooltip': Tooltip,
+  '../src/css/transitions.css': '',
 };
 
 export interface Props

www/src/css/tailwind.css

@@ -52,6 +52,10 @@ ul {
   --ifm-code-font-size: 95%;
 }
 
+svg {
+  display: initial;
+}
+
 @import 'tailwindcss/utilities';
 
 .button-example button {