tabler-react-2 0.1.91 → 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/input/dropdown.js

@@ -44,6 +44,17 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
   // Allow aliasing: pass either `values` or `items`
   var values = ivalues || items || [];
 
+  // Helper: extract text from label or dropdownText for filtering
+  var getLabelText = function getLabelText(val) {
+    var _val$dropdownText;
+    var node = (_val$dropdownText = val.dropdownText) !== null && _val$dropdownText !== void 0 ? _val$dropdownText : val.label;
+    if (typeof node === "string" || typeof node === "number") return String(node);
+    var children = _react.Children.toArray(node);
+    return children.map(function (child) {
+      return typeof child === "string" ? child : "";
+    }).join("");
+  };
+
   // When loading, show a Button in a container with an optional label.
   if (loading) {
     return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && label && /*#__PURE__*/_react["default"].createElement("label", {
@@ -92,17 +103,15 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
     setSelectedValue(matchedValue);
   }, [value, values]);
 
-  // Filter values based on the search query.
+  // Filter values based on the search query using getLabelText
   (0, _react.useEffect)(function () {
     setFilteredValues(values.filter(function (val) {
-      return JSON.stringify(val).toLowerCase().includes(searchQuery.toLowerCase());
+      return getLabelText(val).toLowerCase().includes(searchQuery.toLowerCase());
     }));
   }, [searchQuery, values]);
   var handleSelection = function handleSelection(val) {
     setSelectedValue(val);
-    if (onChange) {
-      onChange(val);
-    }
+    if (onChange) onChange(val);
   };
 
   // The main dropdown markup.
@@ -123,6 +132,7 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
       return setSearchQuery(value);
     }
   })), filteredValues.map(function (val, index) {
+    var _val$dropdownText2;
     return /*#__PURE__*/_react["default"].createElement("a", {
       key: index,
       className: "dropdown-item".concat(selectedValue && selectedValue.id === val.id ? " active" : ""),
@@ -132,7 +142,7 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
       style: {
         cursor: "pointer"
       }
-    }, val.dropdownText || val.label);
+    }, (_val$dropdownText2 = val.dropdownText) !== null && _val$dropdownText2 !== void 0 ? _val$dropdownText2 : val.label);
   }), filteredValues.length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "dropdown-item text-muted"
   }, "No results found")));

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.90"
+    "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/dropdown-input.mdx

@@ -39,7 +39,7 @@ The `DropdownInput` component is used to select an option from a list of options
     values={[
       { id: 1, label: "Sam" },
       { id: 2, label: "Bob" },
-      { id: 3, label: "John" },
+      { id: 3, label: <b>John</b> },
     ]}
     onChange={(value) => alert(`Selected value: ${JSON.stringify(value)}`)}
   />

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/docs/src/docs/components/timeline.mdx

@@ -4,7 +4,12 @@ title: Timeline
 
 import { Timeline } from "../../components/LoadableTabler";
 import { Excerpt } from "../../components/Excerpt.jsx";
-import { IconCheck, IconMessage, IconUser } from "@tabler/icons-react";
+import {
+  IconBrandTwitter,
+  IconCheck,
+  IconMessage,
+  IconUser,
+} from "@tabler/icons-react";
 
 Timeline is a component that displays a list of events. Used to communicate a series of related events, usually in a chronological order.
 
@@ -48,7 +53,106 @@ The `events` prop is an array of objects that define the events to display. Each
           title: "+1150 Followers",
           description: "Joined the community",
         },
+        {
+          icon: <IconMessage />,
+          time: "1 hr ago",
+          title: "New message",
+          description: "You have 1 new message",
+        },
+        {
+          icon: <IconUser />,
+          time: "1 hr ago",
+          title: "New user",
+          description: "You have 1 new user",
+        },
       ]}
     />
   </div>
 </Excerpt>
+
+```jsx
+<Timeline
+  events={[
+    {
+      icon: <IconCheck />,
+      time: "10 hrs ago",
+      title: "+1150 Followers",
+      description: "Joined the community",
+    },
+    {
+      icon: <IconMessage />,
+      time: "1 hr ago",
+      title: "New message",
+      description: "You have 1 new message",
+    },
+    {
+      icon: <IconUser />,
+      time: "1 hr ago",
+      title: "New user",
+      description: "You have 1 new user",
+    },
+  ]}
+/>
+```
+
+## Colors
+
+You can set the color of the icon using the `iconBgColor` prop to any of the [colors](/utilities/colors).
+
+<Excerpt>
+  <div style={{ width: 400 }}>
+    <Timeline
+      dense
+      events={[
+        {
+          icon: <IconBrandTwitter />,
+          time: "10 hrs ago",
+          title: "+1150 Followers",
+          description: "New Twitter followers",
+          iconBgColor: "twitter",
+        },
+        {
+          icon: <IconMessage />,
+          time: "1 hr ago",
+          title: "New message",
+          description: "You have 1 new message",
+          iconBgColor: "red",
+        },
+        {
+          icon: <IconUser />,
+          time: "1 hr ago",
+          title: "New user",
+          description: "You have 1 new user",
+        },
+      ]}
+    />
+  </div>
+</Excerpt>
+
+```jsx
+<Timeline
+  dense
+  events={[
+    {
+      icon: <IconBrandTwitter />,
+      time: "10 hrs ago",
+      title: "+1150 Followers",
+      description: "New Twitter followers",
+      iconBgColor: "twitter",
+    },
+    {
+      icon: <IconMessage />,
+      time: "1 hr ago",
+      title: "New message",
+      description: "You have 1 new message",
+      iconBgColor: "red",
+    },
+    {
+      icon: <IconUser />,
+      time: "1 hr ago",
+      title: "New user",
+      description: "You have 1 new user",
+    },
+  ]}
+/>
+```

package/package.json

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