@tabler/core 1.1.1 → 1.2.0

package/docs/ui/components/tracking.mdx

@@ -1,548 +0,0 @@
----
-title: Tracking
-summary: Component for visualizing activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
-description: Monitor data activity visually.
----
-
-## Basic example
-
-```html example centered columns={1}
-<div class="tracking">
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-danger"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Downtime"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-warning"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Big load"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-danger"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Downtime"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="No data"
-  ></div>
-  <div
-    class="tracking-block"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="No data"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-</div>
-```
-
-```html
-<div class="tracking">
-  ...
-  <div
-    class="tracking-block bg-success"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  <div
-    class="tracking-block"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="No data"
-  ></div>
-  <div
-    class="tracking-block bg-failed"
-    data-bs-toggle="tooltip"
-    data-bs-placement="top"
-    title="Operational"
-  ></div>
-  ...
-</div>
-```
-
-## Tracking inside a card
-
-You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/docs/components/cards).
-
-```html example centered columns={1}
-<div class="card">
-  <div class="card-body">
-    <div class="d-flex align-items-center">
-      <div class="subheader">Status monitoring</div>
-      <div class="ms-auto lh-1">
-        <div class="dropdown">
-          <a
-            class="dropdown-toggle text-secondary"
-            href="#"
-            data-bs-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="false"
-            >Current month</a
-          >
-          <div class="dropdown-menu dropdown-menu-end">
-            <a class="dropdown-item active" href="#">Current month</a>
-            <a class="dropdown-item" href="#">Last month</a>
-            <a class="dropdown-item" href="#">Last 3 months</a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="d-flex align-items-baseline">
-      <div class="h1 mb-3 me-2">99.5%</div>
-      <div class="me-auto">
-        <span class="text-green d-inline-flex align-items-center lh-1">
-          2%
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon ms-1"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            stroke-width="2"
-            stroke="currentColor"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <polyline points="3 17 9 11 13 15 21 7" />
-            <polyline points="14 7 21 7 21 14" />
-          </svg>
-        </span>
-      </div>
-    </div>
-    <div class="mt-2">
-      <div class="tracking">
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-danger"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Downtime"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-warning"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Big load"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-danger"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Downtime"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="No data"
-        ></div>
-        <div
-          class="tracking-block"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="No data"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-```html
-<div class="card">
-  <div class="card-body">
-    <div class="d-flex align-items-center">
-      <div class="subheader">Status monitoring</div>
-      <div class="ms-auto lh-1">
-        <div class="dropdown">
-          <a
-            class="dropdown-toggle text-secondary"
-            href="#"
-            data-bs-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="false"
-            >Current month</a
-          >
-          <div class="dropdown-menu dropdown-menu-end">
-            <a class="dropdown-item active" href="#">Current month</a>
-            <a class="dropdown-item" href="#">Last month</a>
-            <a class="dropdown-item" href="#">Last 3 months</a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="d-flex align-items-baseline">
-      <div class="h1 mb-3 me-2">99.5%</div>
-      <div class="me-auto">
-        <span class="text-green d-inline-flex align-items-center lh-1">
-          2%
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon ms-1"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            stroke-width="2"
-            stroke="currentColor"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <polyline points="3 17 9 11 13 15 21 7" />
-            <polyline points="14 7 21 7 21 14" />
-          </svg>
-        </span>
-      </div>
-    </div>
-    <div class="mt-2">
-      <div class="tracking">
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-danger"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Downtime"
-        ></div>
-        <div
-          class="tracking-block bg-success"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Operational"
-        ></div>
-        <div
-          class="tracking-block bg-warning"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Big load"
-        ></div>
-        <div
-          class="tracking-block"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="No data"
-        ></div>
-        <div
-          class="tracking-block"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="No data"
-        ></div>
-        ...
-      </div>
-    </div>
-  </div>
-</div>
-```

package/docs/ui/components/vector-maps.mdx

@@ -1,166 +0,0 @@
----
-title: Vector Maps
-description: Interactive guide to creating vector maps with jsVectorMap.
-summary: Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap.
----
-
-## Installation
-
-To use vector maps in your project, you need to include the jsVectorMap library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the jsVectorMap library from a CDN:
-
-```html
-<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
-<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
-```
-
-## Sample demo
-
-Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
-
-```html
-<div id="map-world" class="w-100 h-100"></div>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    const map = new jsVectorMap({
-      selector: "#map-world",
-      map: "world",
-    });
-  });
-</script>
-```
-
-Look at the example below to see how the vector map works with a world map.
-
-```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world" columns={2} centered
-<div class="card">
-  <div class="card-body">
-    <div class="ratio ratio-16x9">
-      <div>
-        <div id="map-world" class="w-100 h-100"></div>
-      </div>
-    </div>
-  </div>
-</div>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    const map = new jsVectorMap({
-      selector: "#map-world",
-      map: "world",
-      backgroundColor: "transparent",
-      regionStyle: {
-        initial: {
-          fill: tabler.getColor("body-bg"),
-          stroke: tabler.getColor("border-color"),
-          strokeWidth: 2,
-        },
-      },
-      zoomOnScroll: false,
-      zoomButtons: false,
-    });
-    window.addEventListener("resize", () => {
-      map.updateSize();
-    });
-  });
-</script>
-```
-
-## Markers
-
-You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
-
-```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world-merc" columns={2} centered
-<div class="card">
-  <div class="card-body">
-    <div class="ratio ratio-16x9">
-      <div>
-        <div id="map-world-markers" class="w-100 h-100"></div>
-      </div>
-    </div>
-  </div>
-</div>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    const map = new jsVectorMap({
-      selector: "#map-world-markers",
-      map: "world_merc",
-      backgroundColor: "transparent",
-      regionStyle: {
-        initial: {
-          fill: tabler.getColor("body-bg"),
-          stroke: tabler.getColor("border-color"),
-          strokeWidth: 2,
-        },
-      },
-      zoomOnScroll: false,
-      zoomButtons: false,
-      markers: [
-        {
-          coords: [61.524, 105.3188],
-          name: "Russia",
-        },
-        {
-          coords: [56.1304, -106.3468],
-          name: "Canada",
-        },
-        {
-          coords: [71.7069, -42.6043],
-          name: "Greenland",
-        },
-        {
-          coords: [26.8206, 30.8025],
-          name: "Egypt",
-        },
-        {
-          coords: [-14.235, -51.9253],
-          name: "Brazil",
-        },
-        {
-          coords: [35.8617, 104.1954],
-          name: "China",
-        },
-        {
-          coords: [37.0902, -95.7129],
-          name: "United States",
-        },
-        {
-          coords: [60.472024, 8.468946],
-          name: "Norway",
-        },
-        {
-          coords: [48.379433, 31.16558],
-          name: "Ukraine",
-        },
-      ],
-      markerStyle: {
-        initial: {
-          r: 4,
-          stroke: "#fff",
-          opacity: 1,
-          strokeWidth: 3,
-          stokeOpacity: 0.5,
-          fill: tabler.getColor("blue"),
-        },
-        hover: {
-          fill: tabler.getColor("blue"),
-          stroke: tabler.getColor("blue"),
-        },
-      },
-      markerLabelStyle: {
-        initial: {
-          fontSize: 10,
-        },
-      },
-      labels: {
-        markers: {
-          render: function (marker) {
-            return marker.name;
-          },
-        },
-      },
-    });
-    window.addEventListener("resize", () => {
-      map.updateSize();
-    });
-  });
-</script>
-```