tabler-react-2 0.1.92 → 0.1.93

package/dist/index.js

@@ -180,5 +180,17 @@ Object.keys(_index17).forEach(function (key) {
     }
   });
 });
+var _index18 = require("./navbar/index");
+Object.keys(_index18).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index18[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index18[key];
+    }
+  });
+});
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/dist/navbar/index.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Navbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Navbar = exports.Navbar = function Navbar(_ref) {
+  var type = _ref.type,
+    items = _ref.items;
+  // Determine the nav classes based on type: tabs, pills, underline, or default horizontal
+  var navTypeClass = type ? "nav-".concat(type) : "";
+  var navClass = ["nav", navTypeClass].filter(Boolean).join(" ");
+  var currentPath = window.location.pathname;
+  return /*#__PURE__*/_react["default"].createElement("ul", {
+    className: navClass
+  }, items.map(function (item, idx) {
+    // Dropdown
+    if (item.type === "dropdown") {
+      var isOpenOnThisPage = item.items.some(function (child) {
+        return child.href === currentPath;
+      });
+      return /*#__PURE__*/_react["default"].createElement("li", {
+        key: idx,
+        className: "nav-item dropdown"
+      }, /*#__PURE__*/_react["default"].createElement("a", {
+        href: "#",
+        className: "nav-link dropdown-toggle".concat(isOpenOnThisPage ? " active" : ""),
+        "data-bs-toggle": "dropdown",
+        role: "button",
+        "aria-expanded": isOpenOnThisPage,
+        "aria-current": isOpenOnThisPage ? "page" : undefined
+      }, item.text), /*#__PURE__*/_react["default"].createElement("ul", {
+        className: "dropdown-menu"
+      }, item.items.map(function (child, cidx) {
+        var isChildActive = child.href === currentPath;
+        return /*#__PURE__*/_react["default"].createElement("li", {
+          key: cidx
+        }, /*#__PURE__*/_react["default"].createElement("a", {
+          href: child.href,
+          className: "dropdown-item".concat(isChildActive ? " active" : "").concat(child.disabled ? " disabled" : ""),
+          "aria-disabled": child.disabled ? "true" : undefined,
+          "aria-current": isChildActive ? "page" : undefined,
+          onClick: function onClick(e) {
+            return child.disabled && e.preventDefault();
+          }
+        }, child.text));
+      })));
+    }
+
+    // Simple link
+    var isLinkActive = item.href === currentPath;
+    return /*#__PURE__*/_react["default"].createElement("li", {
+      key: idx,
+      className: "nav-item"
+    }, /*#__PURE__*/_react["default"].createElement("a", {
+      href: item.href,
+      className: "nav-link".concat(isLinkActive ? " active" : "").concat(item.disabled ? " disabled" : ""),
+      "aria-current": isLinkActive ? "page" : undefined,
+      "aria-disabled": item.disabled ? "true" : undefined,
+      onClick: function onClick(e) {
+        return item.disabled && e.preventDefault();
+      }
+    }, item.text));
+  }));
+};
+Navbar.propTypes = {
+  /** one of 'tabs', 'pills', 'underline'; omit or undefined for default horizontal */
+  type: _propTypes["default"].oneOf(["tabs", "pills", "underline"]),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    type: _propTypes["default"].oneOf(["link", "dropdown"]).isRequired,
+    href: _propTypes["default"].string,
+    // for link
+    text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
+    /** only for dropdown */
+    items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      href: _propTypes["default"].string.isRequired,
+      text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
+      disabled: _propTypes["default"].bool
+    })),
+    disabled: _propTypes["default"].bool
+  })).isRequired
+};
+Navbar.defaultProps = {
+  type: undefined
+};

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.91"
+    "tabler-react-2": "file:../"
   },
   "devDependencies": {},
   "keywords": [

package/docs/src/components/LoadableTabler.jsx

@@ -162,3 +162,9 @@ export const Typography = {
 export const TablerProvider = loadable(() =>
   import("tabler-react-2").then((mod) => mod.TablerProvider)
 );
+export const Navbar = loadable(() =>
+  import("tabler-react-2").then((mod) => {
+    console.log(mod);
+    return mod.Navbar;
+  })
+);

package/docs/src/config/sidebar.yml

@@ -42,6 +42,8 @@
       link: "/components/tables"
     - label: "Timeline"
       link: "/components/timeline"
+    - label: "Navbar"
+      link: "/components/navbar"
 - label: "Utilities"
   items:
     - label: "Colors"

package/docs/src/docs/components/navbar.mdx

@@ -0,0 +1,267 @@
+---
+title: Navbar
+---
+
+import { Navbar } from "../../components/LoadableTabler.jsx";
+import { Excerpt } from "../../components/Excerpt.jsx";
+import {
+  IconBrandTwitter,
+  IconCheck,
+  IconMessage,
+  IconUser,
+} from "@tabler/icons-react";
+
+Navbars are used to display navigation links. They can be used to display a list of links, or a list of dropdowns.
+
+## Signature
+
+```jsx
+import { Navbar } from "tabler-react-2";
+
+<Navbar {...props} />;
+```
+
+### Props
+
+## Basic Usage
+
+The `Navbar` component is used to display a navbar.
+
+<Excerpt>
+  <Navbar
+    items={[
+      {
+        type: "link",
+        href: "#",
+        text: "Link 1",
+      },
+      { type: "link", href: "#", text: "Link 2", disabled: true },
+      {
+        type: "dropdown",
+        text: "Drop 1",
+        items: [
+          {
+            type: "link",
+            href: "#",
+            text: "Link 1",
+          },
+          {
+            type: "link",
+            href: "#",
+            text: "Link 2",
+          },
+        ],
+      },
+    ]}
+  />
+</Excerpt>
+
+```jsx
+<Navbar
+  items={[
+    {
+      type: "link",
+      href: "#",
+      text: "Link 1",
+    },
+    {
+      type: "link",
+      href: "#",
+      text: "Link 2",
+      disabled: true,
+    },
+    {
+      type: "dropdown",
+      text: "Drop 1",
+      items: [
+        {
+          type: "link",
+          href: "#",
+          text: "Link 1",
+        },
+        {
+          type: "link",
+          href: "#",
+          text: "Link 2",
+        },
+      ],
+    },
+  ]}
+/>
+```
+
+## Tabs
+
+Setting the `type` prop to `tabs` will display the navbar as tabs.
+
+<Excerpt>
+  <Navbar
+    type="tabs"
+    items={[
+      {
+        type: "link",
+        href: "#",
+        text: "Link 1",
+      },
+      {
+        type: "link",
+        href: "#",
+        text: "Link 2",
+      },
+      {
+        type: "link",
+        disabled: true,
+        href: "#",
+        text: "Disabled",
+      },
+    ]}
+  />
+</Excerpt>
+
+```jsx
+<Navbar
+  type="tabs"
+  items={[
+    {
+      type: "link",
+      href: "#",
+      text: "Link 1",
+    },
+    {
+      type: "link",
+      href: "#",
+      text: "Link 2",
+    },
+    {
+      type: "link",
+      disabled: true,
+      href: "#",
+      text: "Disabled",
+    },
+  ]}
+/>
+```
+
+## Pills
+
+Setting the `type` prop to `pills` will display the navbar as pills.
+
+<Excerpt>
+  <Navbar
+    type="pills"
+    items={[
+      {
+        type: "link",
+        href: "#",
+        text: "Link 1",
+      },
+      {
+        type: "link",
+        href: "#",
+        text: "Link 2",
+      },
+      {
+        type: "link",
+        disabled: true,
+        href: "#",
+        text: "Disabled",
+      },
+    ]}
+  />
+</Excerpt>
+
+```jsx
+<Navbar
+  type="pills"
+  items={[
+    {
+      type: "link",
+      href: "#",
+      text: "Link 1",
+    },
+    {
+      type: "link",
+      href: "#",
+      text: "Link 2",
+    },
+    {
+      type: "link",
+      disabled: true,
+      href: "#",
+      text: "Disabled",
+    },
+  ]}
+/>
+```
+
+## Underline
+
+Setting the `type` prop to `underline` will display the navbar as underline.
+
+<Excerpt>
+  <Navbar
+    type="underline"
+    items={[
+      {
+        type: "link",
+        href: "#",
+        text: "Link 1",
+      },
+      {
+        type: "link",
+        href: "#",
+        text: "Link 2",
+      },
+      {
+        type: "link",
+        href: "#",
+        text: "Link 3",
+      },
+      {
+        type: "dropdown",
+        text: "Drop 1",
+        items: [
+          {
+            type: "link",
+            href: "#",
+            text: "Link 1",
+          },
+          {
+            type: "link",
+            href: "#",
+            text: "Link 2",
+          },
+          {
+            type: "link",
+            disabled: true,
+            href: "#",
+            text: "Disabled",
+          },
+        ],
+      },
+    ]}
+  />
+</Excerpt>
+
+```jsx
+<Navbar
+  type="underline"
+  items={[
+    {
+      type: "link",
+      href: "#",
+      text: "Link 1",
+    },
+    {
+      type: "link",
+      href: "#",
+      text: "Link 2",
+    },
+    {
+      type: "link",
+      href: "#",
+      text: "Link 3",
+    },
+  ]}
+/>
+```

package/package.json

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