tabler-react-2 0.1.87 → 0.1.89

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/dist/timeline/index.js

@@ -8,6 +8,11 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var i = function i(Icon) {
+  var isComponent = typeof Icon === "function" || /*#__PURE__*/_react["default"].isValidElement(Icon);
+  console.log(isComponent, typeof Icon === "function", /*#__PURE__*/_react["default"].isValidElement(Icon));
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isComponent ? /*#__PURE__*/_react["default"].createElement(Icon, null) : Icon);
+};
 var Timeline = exports.Timeline = function Timeline(_ref) {
   var events = _ref.events,
     dense = _ref.dense;
@@ -19,7 +24,7 @@ var Timeline = exports.Timeline = function Timeline(_ref) {
       key: index
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "timeline-event-icon ".concat(event.iconBgColor && "bg-".concat(event.iconBgColor, "-lt"), " ").concat(event.iconBgClass || "")
-    }, event.icon && /*#__PURE__*/_react["default"].createElement(event.icon, null)), /*#__PURE__*/_react["default"].createElement("div", {
+    }, event.icon && i(event.icon)), /*#__PURE__*/_react["default"].createElement("div", {
       className: "card timeline-event-card ".concat(dense && "card-sm")
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "card-body"

package/docs/gatsby-config.js

@@ -4,8 +4,8 @@ module.exports = {
     defaultTitle: `Tabler React 2 Docs`,
     siteTitleShort: `Tabler React 2 Docs`,
     siteDescription: `Documentation for Tabler React 2`,
-    siteUrl: `https://rocketdocs.netlify.app`,
-    siteAuthor: `@jpedroschmitz`,
+    siteUrl: `https://tabler-react-2.pages.dev`,
+    siteAuthor: `@jackcrane`,
     siteImage: `/banner.png`,
     siteLanguage: `en`,
     themeColor: `#066fd1`,
@@ -20,7 +20,7 @@ module.exports = {
         homePath: `src/home`,
         yamlFilesPath: `src/yamlFiles`,
         repositoryUrl: `https://github.com/jackcrane/tabler-react-2`,
-        baseDir: `examples/gatsby-theme-docs`,
+        baseDir: `docs`,
         gatsbyRemarkPlugins: [],
       },
     },

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.88"
   },
   "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

@@ -12,6 +12,8 @@
       link: "/components/typography"
     - label: "Cards"
       link: "/components/cards"
+    - label: "Buttons"
+      link: "/components/buttons"
     - label: "Horizontal Rule"
       link: "/components/hr"
     - label: "Alerts"
@@ -20,8 +22,6 @@
       link: "/components/avatar"
     - label: "Badges"
       link: "/components/badges"
-    - label: "Buttons"
-      link: "/components/buttons"
     - label: "Dropdown"
       link: "/components/dropdown"
     - label: "Dropdown Input"
@@ -30,23 +30,21 @@
       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: "Timeline"
+      link: "/components/timeline"
 - label: "Utilities"
   items:
     - label: "Colors"
       link: "/utilities/colors"
     - label: "Margins"
       link: "/utilities/margins"
-- label: "More"
-  items:
-    - label: "To do list"
-      link: "/todo"
-# - label: More
-#   items:
-#     - label: FAQ
-#       link: /faq
-#     - label: "Github"
-#       link: https://github.com/jpedroschmitz/rocketdocs

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"),
       },
     ]}
   >