tabler-react-2 0.1.87 → 0.1.88

package/dist/modal/modal.js

@@ -120,7 +120,6 @@ var useModal = exports.useModal = function useModal(options) {
     });
   }, []);
   var handleDecision = function handleDecision(decision) {
-    console.log(decision);
     if (modalState.resolve) {
       modalState.resolve(decision);
       setModalState(function (prevState) {

package/dist/provider/tabler.js

@@ -29,7 +29,9 @@ var TablerProvider = exports.TablerProvider = function TablerProvider(_ref3) {
     _ref3$colorScheme = _ref3.colorScheme,
     colorScheme = _ref3$colorScheme === void 0 ? "light" : _ref3$colorScheme,
     _ref3$theme = _ref3.theme,
-    themeColors = _ref3$theme === void 0 ? {} : _ref3$theme;
+    themeColors = _ref3$theme === void 0 ? {} : _ref3$theme,
+    _ref3$fallbackAnchor = _ref3.fallbackAnchor,
+    fallbackAnchor = _ref3$fallbackAnchor === void 0 ? true : _ref3$fallbackAnchor;
   (0, _react.useEffect)(function () {
     var script1 = document.createElement("script");
     script1.src = "https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js";
@@ -38,7 +40,7 @@ var TablerProvider = exports.TablerProvider = function TablerProvider(_ref3) {
     link.rel = "stylesheet";
     link.href = "https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/css/tabler.min.css";
     var script2 = document.createElement("script");
-    script2.textContent = "window.USE_FALLBACK_ANCHOR = true;";
+    script2.textContent = "window.USE_FALLBACK_ANCHOR = ".concat(fallbackAnchor, ";");
     document.head.appendChild(link);
     document.head.appendChild(script1);
     document.head.appendChild(script2);

package/dist/steps/index.js

@@ -10,13 +10,15 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var Steps = exports.Steps = function Steps(_ref) {
   var steps = _ref.steps,
-    color = _ref.color,
+    passedColor = _ref.color,
+    passedVariant = _ref.variant,
     _ref$numbered = _ref.numbered,
     numbered = _ref$numbered === void 0 ? false : _ref$numbered,
     _ref$hideText = _ref.hideText,
     hideText = _ref$hideText === void 0 ? false : _ref$hideText,
     _ref$vertical = _ref.vertical,
     vertical = _ref$vertical === void 0 ? false : _ref$vertical;
+  var color = passedColor || passedVariant;
   var stepClass = "steps ".concat(color ? "steps-".concat(color) : "", " ").concat(numbered ? "steps-counter" : "", " ").concat(vertical ? "steps-vertical" : "");
   return /*#__PURE__*/_react["default"].createElement("ul", {
     className: stepClass

package/docs/package.json

@@ -22,7 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.15",
-    "tabler-react-2": "0.1.86"
+    "tabler-react-2": "0.1.87"
   },
   "devDependencies": {},
   "keywords": [

package/docs/src/components/ButtonedHookModal.jsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { Button, useModal } from "tabler-react-2";
 
-export const ButtonedHookModal = ({ hookProps, on = () => {} }) => {
+export const ButtonedHookModal = ({ hookProps, buttonOn, on = () => {} }) => {
   const { modal, ModalElement } = useModal(hookProps);
 
   return (
     <>
-      <Button onClick={async () => on(await modal())}>
+      <Button onClick={async () => on(await modal(buttonOn))}>
         Open hook-driven modal
       </Button>
       {ModalElement}

package/docs/src/components/ConfirmModal.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Button, useConfirm } from "tabler-react-2";
+
+export const ConfirmModal = ({ on = () => {}, hookProps, buttonOn }) => {
+  const { confirm, ConfirmModal } = useConfirm(hookProps);
+
+  return (
+    <>
+      <Button onClick={async () => on(await confirm(buttonOn))}>
+        Open confirm modal
+      </Button>
+      {ConfirmModal}
+    </>
+  );
+};

package/docs/src/components/Excerpt.jsx

@@ -9,7 +9,7 @@ const _Excerpt = styled.div`
   background-size: 20px 20px;
   background-position: -19px -19px;
   border: 1.5px solid #e4e4e4;
-  border-radius: 8px;
+  border-radius: 5px;
   min-height: 100px;
   width: 100%;
   padding: 16px;
@@ -18,6 +18,7 @@ const _Excerpt = styled.div`
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
+  overflow: auto;
 `;
 
 export const Excerpt = ({ children, f }) => {

package/docs/src/components/LoadableTabler.jsx

@@ -39,6 +39,9 @@ export const Modal = loadable(() =>
 export const ButtonedHookModal = loadable(() =>
   import("./ButtonedHookModal").then((mod) => mod.ButtonedHookModal)
 );
+export const ConfirmModal = loadable(() =>
+  import("./ConfirmModal").then((mod) => mod.ConfirmModal)
+);
 export const Ribbon = loadable(() =>
   import("tabler-react-2").then((mod) => mod.Ribbon)
 );

package/docs/src/config/sidebar.yml

@@ -30,10 +30,16 @@
       link: "/components/modals"
     - label: "Hook-driven modals"
       link: "/components/hook-driven-modals"
+    - label: "Hook-driven confirm"
+      link: "/components/hook-confirm"
     - label: "Ribbons"
       link: "/components/ribbons"
     - label: "Spinners"
       link: "/components/spinners"
+    - label: "Steps"
+      link: "/components/steps"
+    - label: "Tables"
+      link: "/components/tables"
 - label: "Utilities"
   items:
     - label: "Colors"

package/docs/src/data/congressPeople.json

@@ -0,0 +1,90 @@
+[
+  {
+    "name": "Ed Case",
+    "email": "ed.case@mail.house.gov",
+    "party": "Democrat",
+    "region": {
+      "state": "Hawaii",
+      "abbr": "HI",
+      "district": "1st"
+    },
+    "website": "https://case.house.gov"
+  },
+  {
+    "name": "Mike Carey",
+    "email": "mike.carey@mail.house.gov",
+    "party": "Republican",
+    "region": {
+      "state": "Ohio",
+      "abbr": "OH",
+      "district": "15th"
+    },
+    "website": "https://carey.house.gov"
+  },
+  {
+    "name": "Andrew Clyde",
+    "email": "andrew.clyde@mail.house.gov",
+    "party": "Republican",
+    "region": {
+      "state": "Georgia",
+      "abbr": "GA",
+      "district": "9th"
+    },
+    "website": "https://clyde.house.gov"
+  },
+  {
+    "name": "Angie Craig",
+    "email": "angie.craig@mail.house.gov",
+    "party": "Democrat",
+    "region": {
+      "state": "Minnesota",
+      "abbr": "MN",
+      "district": "2nd"
+    },
+    "website": "https://craig.house.gov"
+  },
+  {
+    "name": "Rick Crawford",
+    "email": "rick.crawford@mail.house.gov",
+    "party": "Republican",
+    "region": {
+      "state": "Arkansas",
+      "abbr": "AR",
+      "district": "1st"
+    },
+    "website": "https://crawford.house.gov"
+  },
+  {
+    "name": "Jared Golden",
+    "email": "jared.golden@mail.house.gov",
+    "party": "Democrat",
+    "region": {
+      "state": "Maine",
+      "abbr": "ME",
+      "district": "2nd"
+    },
+    "website": "https://golden.house.gov"
+  },
+  {
+    "name": "Dusty Johnson",
+    "email": "dusty.johnson@mail.house.gov",
+    "party": "Republican",
+    "region": {
+      "state": "South Dakota",
+      "abbr": "SD",
+      "district": "At-Large"
+    },
+    "website": "https://dustyjohnson.house.gov"
+  },
+  {
+    "name": "Susie Lee",
+    "email": "susie.lee@mail.house.gov",
+    "party": "Democrat",
+    "region": {
+      "state": "Nevada",
+      "abbr": "NV",
+      "district": "3rd"
+    },
+    "website": "https://susielee.house.gov"
+  }
+]

package/docs/src/docs/components/buttons.mdx

@@ -12,7 +12,7 @@ Buttons are used to trigger actions.
 ```jsx
 import { Button } from "tabler-react-2";
 
-<ButtonButton {...props} />;
+<Button {...props} />;
 ```
 
 ### Props

package/docs/src/docs/components/hook-confirm.mdx

@@ -0,0 +1,106 @@
+---
+title: Hook-driven confirm
+---
+
+import { ConfirmModal } from "../../components/LoadableTabler.jsx";
+import { Excerpt } from "../../components/Excerpt.jsx";
+
+Hook-driven confirms are used to display content in a layer above the main content. They can be used to display forms, confirmations, or other types of content.
+
+The hook will provide a `confirm` function that returns a promise. The promise will resolve with the value of the button clicked, or `false` if the modal is closed without a button click. It will also return a `<ConfirmModal />` component that you need to render in your application.
+
+If the user clicks the cancel button, the promise will resolve with `false`, functionally the same as if the user clicked cancel.
+
+## Signature
+
+```jsx
+import { useConfirm } from "tabler-react-2";
+
+const { confirm, ConfirmModal } = useConfirm({
+  title: "Confirm Title",
+  text: "Text",
+  commitText: "Commit",
+  cancelText: "Cancel",
+});
+
+<ConfirmModal />
+<Button onClick={() => confirm()}>Open hook-driven confirm</Button>
+```
+
+### Props
+
+| Prop         | Required | Type           | Default | Description                           |
+| ------------ | -------- | -------------- | ------- | ------------------------------------- |
+| `title`      | No       | String         |         | The title of the modal.               |
+| `text`       | No       | String \| node |         | The text of the modal.                |
+| `commitText` | No       | String         |         | The text of the commit button.        |
+| `cancelText` | No       | String         |         | The text of the cancel button.        |
+| `modalProps` | No       | Object         |         | Additional props to pass to the modal |
+
+<blockquote>
+<p>
+
+**Tip**: If you need to use multiple hook driven confirms in a single scope or want to descriptively name the confirm variables you can re-assign the variable names in the deconstruction:
+
+```jsx
+const Home = () => {
+  const { confirm: signup, ConfirmModal: SignupPopup } = useConfirm({
+    title: "Confirm Title",
+    text: "Text",
+    commitText: "Commit",
+    cancelText: "Cancel",
+  });
+
+  return (
+    <>
+      <Button onClick={() => signup()}>Open hook-driven confirm</Button>
+      {SignupPopup}
+    </>
+  );
+};
+```
+
+</p>
+</blockquote>
+
+> **Note**: You don't need to use a `<Button />` component to open the confirm. The `confirm()` function is in scope and can be called directly or any other way you would typically call a function.
+
+## Basic Usage
+
+The `useConfirm` hook is used to display a confirm.
+
+<Excerpt>
+  <ConfirmModal
+    on={(d) => window && window.alert(d)}
+    hookProps={{
+      title: "Confirm Title",
+      text: <kbd>A hook-driven confirm.</kbd>,
+      commitText: "Commit",
+      cancelText: "Cancel",
+    }}
+  />
+</Excerpt>
+
+For the basic usage, this shows the entire component, not just the implementation like usual. This is because of the extra implementation steps.
+
+```jsx title="./index.jsx"
+import { useConfirm, Button } from "tabler-react-2";
+
+const Home = () => {
+  const { confirm, ConfirmModal } = useConfirm({
+    title: "Confirm Title",
+    text: "Text",
+    commitText: "Commit",
+    cancelText: "Cancel",
+  });
+
+  return (
+    <>
+      <Button onClick={async () => alert(await confirm())}>
+        Open hook-driven confirm
+      </Button>
+      {ConfirmModal}
+    </>
+  );
+};
+```

package/docs/src/docs/components/hook-driven-modals.mdx

@@ -7,6 +7,8 @@ import { Excerpt } from "../../components/Excerpt.jsx";
 
 Hook-driven modals are used to display content in a layer above the main content. They can be used to display forms, confirmations, or other types of content.
 
+The hook will provide a `modal` function that returns a promise. The promise will resolve with the value of the button clicked, or `false` if the modal is closed without a button click. It will also return a `<ModalElement />` component that you need to render in your application.
+
 ## Signature
 
 ```jsx
@@ -27,10 +29,37 @@ const { modal, ModalElement } = useModal({
 | Prop         | Required | Type                      | Default | Description                           |
 | ------------ | -------- | ------------------------- | ------- | ------------------------------------- |
 | `title`      | No       | String                    |         | The title of the modal.               |
-| `text`       | No       | String                    |         | The text of the modal.                |
+| `text`       | No       | String \| node            |         | The text of the modal.                |
 | `buttons`    | No       | [ButtonList](#buttonlist) |         | An array of buttons to display        |
 | `modalProps` | No       | Object                    |         | Additional props to pass to the modal |
 
+<blockquote>
+<p>
+
+**Tip**: If you need to use multiple hook driven modals in a single scope or want to descriptively name the modal variables you can re-assign the variable names in the deconstruction:
+
+```jsx
+const Home = () => {
+  const { modal: signup, ModalElement: SignupPopup } = useModal({
+    title: "Modal Title",
+    text: "Text",
+    buttons: [],
+  });
+
+  return (
+    <>
+      <Button onClick={() => signup()}>Open hook-driven modal</Button>
+      {SignupPopup}
+    </>
+  );
+};
+```
+
+</p>
+</blockquote>
+
+> **Note**: You don't need to use a `<Button />` component to open the modal. The `modal()` function is in scope and can be called directly or any other way you would typically call a function.
+
 ## Basic Usage
 
 The `useModal` hook is used to display a modal.
@@ -41,6 +70,118 @@ The `useModal` hook is used to display a modal.
     hookProps={{
       title: "Modal Title",
       text: <kbd>A hook-driven modal.</kbd>,
+    }}
+  />
+</Excerpt>
+
+For the basic usage, this shows the entire component, not just the implementation like usual. This is because of the extra implementation steps.
+
+```jsx title="./index.jsx"
+import { useModal, Button } from "tabler-react-2";
+
+const Home = () => {
+  const { modal, ModalElement } = useModal({
+    title: "Modal Title",
+    text: "Text",
+  });
+
+  return (
+    <>
+      <Button onClick={() => modal()}>Open hook-driven modal</Button>
+      {ModalElement}
+    </>
+  );
+};
+
+export default Home;
+```
+
+## Buttons
+
+You can pass [`ButtonList`](#buttonlist) to the `buttons` prop to display buttons in the modal footer. When the button is clicked, the modal will close and the promise returned by the `modal` function will resolve with the value of the clicked button.
+
+<Excerpt f>
+  <ButtonedHookModal
+    on={(d) => alert(d)}
+    hookProps={{
+      title: "Modal Title",
+      text: <kbd>A hook-driven modal with buttons.</kbd>,
+      buttons: [
+        {
+          text: "Button 1",
+          variant: "danger",
+          value: "one",
+        },
+        {
+          text: "Button 2",
+          variant: "success",
+          value: "two",
+        },
+      ],
+    }}
+  />
+</Excerpt>
+
+```jsx
+const Home = () => {
+  const {} = useModal({
+    title: "Modal Title",
+    text: "Text",
+    buttons: [
+      {
+        text: "Button 1",
+        variant: "danger",
+        value: "one",
+      },
+      {
+        text: "Button 2",
+        variant: "success",
+        value: "two",
+      },
+    ],
+  });
+
+  return (
+    <>
+      <Button onClick={async () => alert(await modal())}>
+        Open hook-driven modal
+      </Button>
+      {ModalElement}
+    </>
+  );
+};
+```
+
+### ButtonList
+
+The `buttons` prop of the `useModal` hook accepts an array of objects.
+
+A `button` object has the following properties:
+
+| Prop      | Required | Type   | Default | Description                                     |
+| --------- | -------- | ------ | ------- | ----------------------------------------------- |
+| `text`    | Yes      | String |         | The text to display in the button.              |
+| `variant` | No       | String |         | The color variant of the button.                |
+| `value`   | No       | Any    |         | The value to return when the button is clicked. |
+
+```ts
+type ButtonList = Array<{
+  text: string;
+  variant?: string;
+  value?: any;
+}
+```
+
+## Overriding modal setup
+
+You can pass an object to the `modal()` function to override the default modal setup:
+
+<Excerpt f>
+  <ButtonedHookModal
+    on={(d) => alert(d)}
+    hookProps={{
+      title: "This not show up",
+      text: <kbd>A hook-driven modal with buttons.</kbd>,
       buttons: [
         {
           text: "Button 1",
@@ -54,5 +195,25 @@ The `useModal` hook is used to display a modal.
         },
       ],
     }}
+    buttonOn={{ title: "This will though!" }}
   />
 </Excerpt>
+
+```jsx
+const Home = () => {
+  const { modal, ModalElement } = useModal({
+    title: "This will not show up",
+    text: "Text",
+    buttons: [],
+  });
+
+  return (
+    <>
+      <Button onClick={() => modal({ title: "This will though!" })}>
+        Open hook-driven modal
+      </Button>
+      {ModalElement}
+    </>
+  );
+};
+```

package/docs/src/docs/components/modals.mdx

@@ -113,13 +113,13 @@ You can pass [`ButtonList`](#buttonlist) to the `buttons` prop to display button
         text: "Button 1",
         variant: "danger",
         attrs: { outline: true },
-        onClick: () => alert("Clicked button 1"),
+        onClick: () => window && window.alert("Clicked button 1"),
       },
       {
         text: "Button 2",
         variant: "success",
         attrs: { outline: true },
-        onClick: () => alert("Clicked button 2"),
+        onClick: () => window && window.alert("Clicked button 2"),
       },
     ]}
   >

package/docs/src/docs/components/steps.mdx

@@ -0,0 +1,221 @@
+---
+title: Steps
+---
+
+import { Steps } from "../../components/LoadableTabler.jsx";
+import { Excerpt } from "../../components/Excerpt.jsx";
+
+Steps are used to display a series of steps to communicate a process or workflow.
+
+## Signature
+
+```jsx
+import { Steps } from "tabler-react-2";
+
+<Steps {...props} />;
+```
+
+### Props
+
+| Prop       | Required | Type                       | Default | Description                               |
+| ---------- | -------- | -------------------------- | ------- | ----------------------------------------- |
+| `steps`    | Yes      | [`StepList`](#steplist)    |         | An array of step objects.                 |
+| `variant`  | No       | [Color](/utilities/colors) |         | The color of the steps.                   |
+| `color`    | No       | [Color](/utilities/colors) |         | The color of the steps. Alias of variant  |
+| `numbered` | No       | Boolean                    | false   | Whether to display the steps as numbered. |
+| `hideText` | No       | Boolean                    | false   | Whether to hide the text of the steps.    |
+| `vertical` | No       | Boolean                    | false   | Whether to display the steps vertically.  |
+
+## Basic Usage
+
+<Excerpt>
+  <div style={{ width: 350 }}>
+    <Steps
+      steps={[{ text: "Step 1" }, { text: "Step 2" }, { text: "Step 3" }]}
+    />
+  </div>
+</Excerpt>
+
+{/* prettier-ignore */}
+```jsx
+<Steps steps={[
+  { text: "Step 1" },
+  { text: "Step 2" },
+  { text: "Step 3" }
+]} />
+```
+
+### StepList
+
+The `steps` prop is an array of step objects. Each step object can have the following properties:
+
+| Prop      | Required | Type     | Description                           |
+| --------- | -------- | -------- | ------------------------------------- |
+| `text`    | true     | String   | The text to display inside the step.  |
+| `tooltip` | false    | String   | The tooltip description for the step. |
+| `active`  | false    | Bool     | Whether the step is active.           |
+| `href`    | false    | String   | The href of the step.                 |
+| `onClick` | false    | Function | The onClick function of the step.     |
+
+## Links & Clickable Steps
+
+You can use the `href` or `onClick` props to make steps links or clickable.
+
+<Excerpt>
+  <div style={{ width: 350 }}>
+    <Steps
+      steps={[
+        { text: "Step 1", href: "#" },
+        { text: "Step 2", href: "#" },
+        {
+          text: "Step 3",
+          onClick: () => alert("You clicked on step 3!"),
+        },
+      ]}
+    />
+  </div>
+</Excerpt>
+
+{/* prettier-ignore */}
+```jsx
+<Steps steps={[
+  { text: "Step 1", href: "#" },
+  { text: "Step 2", href: "#" },
+  { text: "Step 3", onClick: () => alert("You clicked on step 3!") }
+]} />
+```
+
+## Progress
+
+You can set an `active` attribute on a step. Steps after the `active` step will be greyed out, and the `active` step will be bold.
+
+<Excerpt>
+  <div style={{ width: 350 }}>
+    <Steps
+      steps={[
+        { text: "Step 1" },
+        { text: "Step 2", active: true },
+        { text: "Step 3" },
+      ]}
+    />
+  </div>
+</Excerpt>
+
+```jsx
+<Steps
+  steps={[
+    { text: "Step 1" },
+    { text: "Step 2", active: true },
+    { text: "Step 3" },
+  ]}
+/>
+```
+
+## Colors & Variants
+
+Steps can be colored using [Bold Colors](/utilities/color#bold-colors). Semantic, light, and brand colors do not work.
+
+<Excerpt f>
+  {[
+    "blue",
+    "azure",
+    "indigo",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "lime",
+    "green",
+    "teal",
+    "cyan",
+  ].map((variant) => (
+    <div style={{ width: 350 }}>
+      <Steps
+        color={variant}
+        steps={[{ text: "Step 1" }, { text: "Step 2" }, { text: "Step 3" }]}
+      />
+    </div>
+  ))}
+</Excerpt>
+
+```jsx
+<Steps
+  color="blue"
+  steps={[{ text: "Step 1" }, { text: "Step 2" }, { text: "Step 3" }]}
+/>
+<Steps
+  color="yellow"
+  steps={[{ text: "Step 1" }, { text: "Step 2" }, { text: "Step 3" }]}
+/>
+```
+
+## Numbered Steps
+
+You can include a number in the circle on the timeline of the steps by passing the `numbered` prop
+
+<Excerpt>
+  <div style={{ width: 350 }}>
+    <Steps
+      numbered
+      steps={[{ text: "Step 1" }, { text: "Step 2" }, { text: "Step 3" }]}
+    />
+  </div>
+</Excerpt>
+
+```jsx highlight={2}
+<Steps
+  numbered
+  steps={[{ text: "Step 1" }, { text: "Step 2" }, { text: "Step 3" }]}
+/>
+```
+
+## Vertical Steps
+
+You can change the direction.
+
+<Excerpt>
+  <div style={{ width: 350 }}>
+    <Steps
+      vertical
+      steps={[{ text: "Step 1" }, { text: "Step 2" }, { text: "Step 3" }]}
+    />
+  </div>
+</Excerpt>
+
+```jsx highlight={2}
+<Steps
+  vertical
+  steps={[{ text: "Step 1" }, { text: "Step 2" }, { text: "Step 3" }]}
+/>
+```
+
+## Hide Text
+
+You can hide the text on each step with the `hideText` attribute.
+
+<Excerpt>
+  <div style={{ width: 350 }}>
+    <Steps
+      hideText
+      steps={[{ text: "Step 1" }, { text: "Step 2" }, { text: "Step 3" }]}
+    />
+    <Steps
+      hideText
+      numbered
+      steps={[{ text: "Step 1" }, { text: "Step 2" }, { text: "Step 3" }]}
+    />
+  </div>
+</Excerpt>
+
+```jsx highlight={2,6}
+<Steps
+  hideText
+  steps={[{ text: "Step 1" }, { text: "Step 2" }, { text: "Step 3" }]}
+/>
+<Steps
+  hideText
+  numbered
+  steps={[{ text: "Step 1" }, { text: "Step 2" }, { text: "Step 3" }]}
+/>
+```

package/docs/src/docs/components/tables.mdx

@@ -0,0 +1,454 @@
+---
+title: Tables
+---
+
+import { Table } from "../../components/LoadableTabler.jsx";
+import { Excerpt } from "../../components/Excerpt.jsx";
+import { IconMail } from "@tabler/icons-react";
+import congressPeople from "../../data/congressPeople.json";
+
+Tables are used to display tabular data. They can be used to display data in a table, list, or any other tabular data.
+
+## Signature
+
+```jsx
+import { Table } from "tabler-react-2";
+
+<Table {...props} />;
+```
+
+### Props
+
+| Prop      | Required | Type                | Default | Description                 |
+| --------- | -------- | ------------------- | ------- | --------------------------- |
+| `columns` | Yes      | [`Column`](#column) |         | An array of column objects. |
+| `data`    | Yes      | Array               |         | An array of data objects.   |
+
+<blockquote>
+<p>
+
+<details>
+<summary>For all of the tables on this page, we will use this list of congress people. (click to expand)</summary>
+
+```json
+[
+  {
+    "name": "Ed Case",
+    "email": "ed.case@mail.house.gov",
+    "party": "Democrat",
+    "region": {
+      "state": "Hawaii",
+      "abbr": "HI",
+      "district": "1st"
+    },
+    "website": "https://case.house.gov"
+  },
+  {
+    "name": "Mike Carey",
+    "email": "mike.carey@mail.house.gov",
+    "party": "Republican",
+    "region": {
+      "state": "Ohio",
+      "abbr": "OH",
+      "district": "15th"
+    },
+    "website": "https://carey.house.gov"
+  },
+  {
+    "name": "Andrew Clyde",
+    "email": "andrew.clyde@mail.house.gov",
+    "party": "Republican",
+    "region": {
+      "state": "Georgia",
+      "abbr": "GA",
+      "district": "9th"
+    },
+    "website": "https://clyde.house.gov"
+  },
+  {
+    "name": "Angie Craig",
+    "email": "angie.craig@mail.house.gov",
+    "party": "Democrat",
+    "region": {
+      "state": "Minnesota",
+      "abbr": "MN",
+      "district": "2nd"
+    },
+    "website": "https://craig.house.gov"
+  },
+  {
+    "name": "Rick Crawford",
+    "email": "rick.crawford@mail.house.gov",
+    "party": "Republican",
+    "region": {
+      "state": "Arkansas",
+      "abbr": "AR",
+      "district": "1st"
+    },
+    "website": "https://crawford.house.gov"
+  },
+  {
+    "name": "Jared Golden",
+    "email": "jared.golden@mail.house.gov",
+    "party": "Democrat",
+    "region": {
+      "state": "Maine",
+      "abbr": "ME",
+      "district": "2nd"
+    },
+    "website": "https://golden.house.gov"
+  },
+  {
+    "name": "Dusty Johnson",
+    "email": "dusty.johnson@mail.house.gov",
+    "party": "Republican",
+    "region": {
+      "state": "South Dakota",
+      "abbr": "SD",
+      "district": "At-Large"
+    },
+    "website": "https://dustyjohnson.house.gov"
+  },
+  {
+    "name": "Susie Lee",
+    "email": "susie.lee@mail.house.gov",
+    "party": "Democrat",
+    "region": {
+      "state": "Nevada",
+      "abbr": "NV",
+      "district": "3rd"
+    },
+    "website": "https://susielee.house.gov"
+  }
+]
+```
+
+</details>
+
+</p>
+</blockquote>
+
+## Basic Usage
+
+The `Table` component is used to display tabular data. It takes an array of objects as a prop called `columns`. Each object in the array represents a column in the table. The object should have a `label` property that is the text to display in the column header, and a `accessor` property that is the key of the object to use for the data in that column.
+
+The `Table` component also takes a `data` prop that is an array of objects. Each object in the array represents a row in the table. The object should have a key for each column in the `columns` array.
+
+<Excerpt>
+  <Table
+    columns={[
+      { label: "Name", accessor: "name", sortable: true },
+      {
+        label: "Party",
+        accessor: "party",
+        render: (party) => (<><img src={`/${party}.png`} style={{width: 25}} /> {party}</>)
+      },
+      {
+        label: "State",
+        accessor: "region.state"
+      },
+      {
+        label: "District",
+        accessor: "region.district",
+        render: (district, row) => (
+          <>
+          <span className="text-secondary">{ row.region.abbr }</span> {district}
+          </>
+        ),
+          },
+      {
+        label: "Email",
+        accessor: "email",
+        className: "text-secondary",
+        render: (email) => (
+          <a href={`mailto:${email}`} className="text-reset">
+            <IconMail strokeWidth={1.5} />
+          </a>
+        ),
+      },
+    ]}
+    data={congressPeople}
+/>
+
+</Excerpt>
+
+```jsx
+import congressPeople from "./congressPeople.json";
+
+<Table
+  columns={[
+    { label: "Name", accessor: "name", sortable: true },
+    {
+      label: "Party",
+      accessor: "party",
+      render: (party) => (
+        <>
+          <img src={`/${party}.png`} style={{ width: 25 }} /> {party}
+        </>
+      ),
+    },
+    {
+      label: "State",
+      accessor: "region.state",
+    },
+    {
+      label: "District",
+      accessor: "region.district",
+      render: (district, row) => (
+        <>
+          <span className="text-secondary">{row.region.abbr}</span> {district}
+        </>
+      ),
+    },
+    {
+      label: "Email",
+      accessor: "email",
+      className: "text-secondary",
+      render: (email) => (
+        <a href={`mailto:${email}`} className="text-reset">
+          <IconMail strokeWidth={1.5} />
+        </a>
+      ),
+    },
+  ]}
+  data={congressPeople}
+/>;
+```
+
+## Constructing the `columns` array
+
+The `columns` prop is an array of objects. Each object represents a column in the table. It has the following properties:
+
+| Prop        | Required | Type     | Default | Description                                               |
+| ----------- | -------- | -------- | ------- | --------------------------------------------------------- |
+| `label`     | Yes      | String   |         | The text to display in the column header.                 |
+| `accessor`  | Yes      | String   |         | The key of the object to use for the data in that column. |
+| `className` | No       | String   |         | Additional CSS classes to apply to the column.            |
+| `render`    | No       | Function |         | Custom render function for the cell content.              |
+| `sortable`  | No       | Boolean  | false   | Whether the column is sortable.                           |
+| `sortFn`    | No       | Function |         | Custom sorting function.                                  |
+
+### accessor
+
+The `accessor` prop is the key of the object to use for the data in that column. It is a string that corresponds to the key of the object in the `data` array. It supports nested keys using dot notation.
+
+Use the `accessor` prop to render simple text in your table. If you need any customization, use the `render` prop as well as `accessor`.
+
+Setting the `accessor` prop to the string 'name' will return the values
+
+<Excerpt>
+  <Table
+    columns={[{ label: "Name", accessor: "name" }]}
+    data={congressPeople.slice(0, 4)}
+  />
+</Excerpt>
+
+```jsx
+<Table columns={[{ label: "Name", accessor: "name" }]} data={congressPeople} />
+```
+
+You can access the nested keys of (in this case) the `region` object by using dot notation. For example, setting the `accessor` prop to `region.district` will return the values
+
+<Excerpt>
+  <Table
+    columns={[{ label: "District", accessor: "region.district" }]}
+    data={congressPeople.slice(0, 4)}
+  />
+</Excerpt>
+
+```jsx
+<Table
+  columns={[{ label: "District", accessor: "region.district" }]}
+  data={congressPeople}
+/>
+```
+
+To access other keys in the object (combining multiple keys in a single cell), you cannot use the accessor. Still provide something to the `accessor` prop so there is not an error, but use the `render` prop to display the content.
+
+### render
+
+The `render` prop is an optional function that will be called with the value of the cell and the row object.
+
+It has the following signature:
+
+```ts
+render(value: any, row: object): React.ReactNode;
+```
+
+Where value is the value provided by the `accessor` and `row` is the entire row.
+
+So, to render the congress person's party with the symbol, (assuming [`/democrat.png`](/democrat.png) and [`/republican.png`](/republican.png) exist), you can use the `render` prop to display the party.
+
+<Excerpt>
+  <Table
+    columns={[
+      {
+        label: "Person's Party",
+        accessor: "party",
+        render: (party) => (
+          <>
+            <img src={`/${party}.png`} style={{ width: 25 }} /> {party}
+          </>
+        ),
+      },
+    ]}
+    data={congressPeople.slice(0, 4)}
+  />
+</Excerpt>
+
+```jsx
+<Table
+  columns={[
+    {
+      label: "Person's Party",
+      accessor: "party",
+      render: (partyFromAccessor) => (
+        <>
+          <img src={`/${partyFromAccessor}.png`} style={{ width: 25 }} />
+          {partyFromAccessor}
+        </>
+      ),
+    },
+  ]}
+  data={congressPeople}
+/>
+```
+
+To include other values from the row in the cell, you can use the second argument passed to the `render` function. In this case, we will leave the accessor the same, so the first argument will be either `"democrat"` or `"republican"`. The second argument is the entire row object that we will pull the `region.state` value from.
+
+<Excerpt>
+  <Table
+    columns={[
+      {
+        label: "Person's Party",
+        accessor: "party",
+        render: (party, row) => (
+          <>
+            {party} ({row.region.state})
+          </>
+        ),
+      },
+    ]}
+    data={congressPeople.slice(0, 4)}
+  />
+</Excerpt>
+
+```jsx
+<Table
+  columns={[
+    {
+      label: "Person's Party",
+      accessor: "party",
+      render: (party, row) => (
+        <>
+          {party} ({row.region.state})
+        </>
+      ),
+    },
+  ]}
+  data={congressPeople}
+/>
+```
+
+### sortable
+
+The `sortable` prop is an optional boolean that determines whether the column is sortable. If it is set to `true`, the column will be sortable. The default value is `false`. It will sort based on the value of the column's accessor.
+
+<Excerpt>
+  <Table
+    columns={[
+      {
+        label: "Name",
+        accessor: "name",
+      },
+      {
+        label: "Party",
+        accessor: "party",
+        render: (party) => (
+          <>
+            <img src={`/${party}.png`} style={{ width: 25 }} /> {party}
+          </>
+        ),
+        sortable: true,
+      },
+      {
+        label: "State",
+        accessor: "region.state",
+        sortable: true,
+      },
+    ]}
+    data={congressPeople.slice(0, 4)}
+  />
+</Excerpt>
+
+```jsx highlight={11,16}
+<Table
+  columns={[
+    {
+      label: "Name",
+      accessor: "name",
+    },
+    {
+      label: "Party",
+      accessor: "party",
+      render: ...,
+      sortable: true,
+    },
+    {
+      label: "State",
+      accessor: "region.state",
+      sortable: true,
+    },
+  ]}
+  data={congressPeople}
+/>
+```
+
+You can also pass a custom sorting function to the `sortFn` prop. The sorting function should take two arguments and return `-1`, `0`, or `1`. The first argument is the value of the first cell, and the second argument is the value of the second cell.
+
+The default sorting function is
+
+```js title="Default sorting function"
+const defaultSortFn = (a, b) => {
+  if (a === b) return 0;
+  return a > b ? 1 : -1;
+};
+```
+
+If, for some reason, you wanted to sort by the length of the name, you could do the following:
+
+<Excerpt>
+  <Table
+    columns={[
+      {
+        label: "Name",
+        accessor: "name",
+        sortFn: (a, b) => {
+          if (a.length === b.length) return 0;
+          return a.length > b.length ? 1 : -1;
+        },
+        sortable: true,
+      },
+    ]}
+    data={congressPeople.slice(0, 4)}
+  />
+</Excerpt>
+
+```jsx
+const customSortFn = (a, b) => {
+  if (a.length === b.length) return 0;
+  return a.length > b.length ? 1 : -1;
+};
+
+<Table
+  columns={[
+    {
+      label: "Name",
+      accessor: "name",
+      sortFn: customSortFn,
+      sortable: true,
+    },
+  ]}
+  data={congressPeople}
+/>;
+```

package/docs/src/docs/components/typography.mdx

@@ -101,12 +101,10 @@ import { Typography } from "tabler-react-2";
 <blockquote>
 <p>
 
-It will default to a `Link` component from the `react-router-dom` library, but you can make it use an `a` tag by setting `window.USE_FALLBACK_ANCHOR` to `true`.
+It will default to an `a` tag, but you can make it use a `Link` component from the `react-router-dom` library by setting `fallbackAnchor` to `false` in your `TablerProvider` component.
 
-```html
-<script>
-  window.USE_FALLBACK_ANCHOR = true;
-</script>
+```jsx
+<TablerProvider fallbackAnchor={false}>...</TablerProvider>
 ```
 
 </p>

package/docs/src/docs/getting-started.mdx

@@ -32,3 +32,15 @@ function App() {
   );
 }
 ```
+
+<blockquote>
+<p>
+
+**Note:** If you are using the `react-router-dom` library, you will need to set the `fallbackAnchor` prop to `false` in the `TablerProvider` component. This way, links will use the `Link` component from `react-router-dom` instead of the default anchor tag.
+
+```jsx
+<TablerProvider fallbackAnchor={false}>...</TablerProvider>
+```
+
+</p>
+</blockquote>

package/docs/src/home/index.mdx

@@ -13,19 +13,3 @@ npm install tabler-react-2 @tabler/icons-react
 ```bash
 yarn add tabler-react-2 @tabler/icons-react
 ```
-
-## Usage
-
-To use Tabler React 2, you need to wrap your application with the `TablerProvider` component. This component provides the necessary CSS and JavaScript files for Tabler React 2.
-
-```jsx
-import { TablerProvider } from "tabler-react-2";
-
-function App() {
-  return (
-    <TablerProvider>
-      <YourApp />
-    </TablerProvider>
-  );
-}
-```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabler-react-2",
-  "version": "0.1.87",
+  "version": "0.1.88",
   "description": "A react implementation of Tabler ui",
   "main": "dist/index.js",
   "scripts": {