npm - @tabler/core - Versions diffs - 1.1.0 → 1.1.1 - Mend

@tabler/core 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

package/docs/emails/index.mdx +14 -0
package/docs/emails/introduction/compiled-html.mdx +29 -0
package/docs/emails/introduction/contents.mdx +63 -0
package/docs/emails/introduction/index.mdx +9 -0
package/docs/emails/introduction/source-html.mdx +26 -0
package/docs/icons/index.mdx +13 -0
package/docs/icons/libraries/index.mdx +5 -0
package/docs/icons/libraries/preact.mdx +42 -0
package/docs/icons/libraries/react.mdx +42 -0
package/docs/icons/libraries/solidjs.mdx +42 -0
package/docs/icons/libraries/svelte.mdx +43 -0
package/docs/icons/libraries/vue.mdx +50 -0
package/docs/icons/libraries/webfont.mdx +60 -0
package/docs/icons/plugins/figma.mdx +15 -0
package/docs/icons/plugins/index.mdx +4 -0
package/docs/icons/static-files/eps.mdx +15 -0
package/docs/icons/static-files/index.mdx +5 -0
package/docs/icons/static-files/pdf.mdx +15 -0
package/docs/icons/static-files/png.mdx +31 -0
package/docs/icons/static-files/svg.mdx +85 -0
package/docs/illustrations/index.mdx +8 -0
package/docs/illustrations/introduction/contents.mdx +77 -0
package/docs/illustrations/introduction/customization.mdx +1198 -0
package/docs/illustrations/introduction/index.mdx +5 -0
package/docs/illustrations/introduction/license.mdx +90 -0
package/docs/img/browsers/brave.svg +1 -0
package/docs/img/browsers/chrome.svg +1 -0
package/docs/img/browsers/edge.svg +1 -0
package/docs/img/browsers/electron.svg +1 -0
package/docs/img/browsers/firefox.svg +1 -0
package/docs/img/browsers/internet-explorer.svg +1 -0
package/docs/img/browsers/opera.svg +1 -0
package/docs/img/browsers/safari.svg +1 -0
package/docs/img/browsers/vivaldi.svg +1 -0
package/docs/img/cover-illustrations-dark.png +0 -0
package/docs/img/cover-illustrations.png +0 -0
package/docs/img/cover-tabler-dark.png +0 -0
package/docs/img/cover-tabler.png +0 -0
package/docs/img/icons/figma-plugin.png +0 -0
package/docs/img/icons/package-angular-dark.png +0 -0
package/docs/img/icons/package-angular.png +0 -0
package/docs/img/icons/package-eps-dark.png +0 -0
package/docs/img/icons/package-eps.png +0 -0
package/docs/img/icons/package-js-dark.png +0 -0
package/docs/img/icons/package-js.png +0 -0
package/docs/img/icons/package-pdf-dark.png +0 -0
package/docs/img/icons/package-pdf.png +0 -0
package/docs/img/icons/package-png-dark.png +0 -0
package/docs/img/icons/package-png.png +0 -0
package/docs/img/icons/package-preact-dark.png +0 -0
package/docs/img/icons/package-preact.png +0 -0
package/docs/img/icons/package-react-dark.png +0 -0
package/docs/img/icons/package-react-native-dark.png +0 -0
package/docs/img/icons/package-react-native.png +0 -0
package/docs/img/icons/package-react.png +0 -0
package/docs/img/icons/package-solidjs-dark.png +0 -0
package/docs/img/icons/package-solidjs.png +0 -0
package/docs/img/icons/package-sprite-dark.png +0 -0
package/docs/img/icons/package-sprite.png +0 -0
package/docs/img/icons/package-svelte-dark.png +0 -0
package/docs/img/icons/package-svelte.png +0 -0
package/docs/img/icons/package-svg-dark.png +0 -0
package/docs/img/icons/package-svg.png +0 -0
package/docs/img/icons/package-vue-dark.png +0 -0
package/docs/img/icons/package-vue.png +0 -0
package/docs/img/icons/package-webfont-dark.png +0 -0
package/docs/img/icons/package-webfont.png +0 -0
package/docs/index.mdx +16 -0
package/docs/ui/base/colors.mdx +83 -0
package/docs/ui/base/index.mdx +6 -0
package/docs/ui/base/typography.mdx +311 -0
package/docs/ui/components/alerts.mdx +406 -0
package/docs/ui/components/autosize.mdx +25 -0
package/docs/ui/components/avatars.mdx +227 -0
package/docs/ui/components/badges.mdx +112 -0
package/docs/ui/components/breadcrumb.mdx +199 -0
package/docs/ui/components/buttons.mdx +1213 -0
package/docs/ui/components/cards.mdx +417 -0
package/docs/ui/components/carousel.mdx +459 -0
package/docs/ui/components/charts.mdx +697 -0
package/docs/ui/components/countup.mdx +165 -0
package/docs/ui/components/datagrid.mdx +120 -0
package/docs/ui/components/divider.mdx +68 -0
package/docs/ui/components/dropdowns.mdx +302 -0
package/docs/ui/components/dropzone.mdx +88 -0
package/docs/ui/components/empty.mdx +149 -0
package/docs/ui/components/icons.mdx +392 -0
package/docs/ui/components/index.mdx +6 -0
package/docs/ui/components/inline-player.mdx +58 -0
package/docs/ui/components/modals.mdx +297 -0
package/docs/ui/components/offcanvas.mdx +70 -0
package/docs/ui/components/placeholder.mdx +273 -0
package/docs/ui/components/popover.mdx +142 -0
package/docs/ui/components/progress.mdx +241 -0
package/docs/ui/components/range-slider.mdx +32 -0
package/docs/ui/components/ribbons.mdx +207 -0
package/docs/ui/components/segmented-control.mdx +401 -0
package/docs/ui/components/spinners.mdx +135 -0
package/docs/ui/components/statuses.mdx +322 -0
package/docs/ui/components/steps.mdx +174 -0
package/docs/ui/components/switch-icon.mdx +386 -0
package/docs/ui/components/tables.mdx +397 -0
package/docs/ui/components/tabs.mdx +396 -0
package/docs/ui/components/timelines.mdx +697 -0
package/docs/ui/components/tinymce.mdx +46 -0
package/docs/ui/components/toasts.mdx +126 -0
package/docs/ui/components/tooltips.mdx +65 -0
package/docs/ui/components/tracking.mdx +548 -0
package/docs/ui/components/vector-maps.mdx +166 -0
package/docs/ui/forms/form-color-check.mdx +220 -0
package/docs/ui/forms/form-elements.mdx +632 -0
package/docs/ui/forms/form-fieldset.mdx +45 -0
package/docs/ui/forms/form-helpers.mdx +91 -0
package/docs/ui/forms/form-image-check.mdx +213 -0
package/docs/ui/forms/form-input-mask.mdx +61 -0
package/docs/ui/forms/form-selectboxes.mdx +398 -0
package/docs/ui/forms/form-validation.mdx +62 -0
package/docs/ui/forms/index.mdx +6 -0
package/docs/ui/getting-started/browser-support.mdx +28 -0
package/docs/ui/getting-started/customize.mdx +28 -0
package/docs/ui/getting-started/download.mdx +44 -0
package/docs/ui/getting-started/faq.mdx +30 -0
package/docs/ui/getting-started/how-to-contribute.mdx +84 -0
package/docs/ui/getting-started/index.mdx +16 -0
package/docs/ui/getting-started/installation.mdx +67 -0
package/docs/ui/getting-started/license.mdx +30 -0
package/docs/ui/index.mdx +8 -0
package/docs/ui/layout/index.mdx +6 -0
package/docs/ui/layout/navbars.mdx +164 -0
package/docs/ui/layout/navs-tabls.mdx +201 -0
package/docs/ui/layout/page-headers.mdx +365 -0
package/docs/ui/layout/page-layouts.mdx +213 -0
package/docs/ui/plugins/flags.mdx +316 -0
package/docs/ui/plugins/index.mdx +6 -0
package/docs/ui/plugins/payments.mdx +152 -0
package/docs/ui/plugins/social-icons.mdx +135 -0
package/docs/ui/utilities/borders.mdx +260 -0
package/docs/ui/utilities/cursors.mdx +63 -0
package/docs/ui/utilities/index.mdx +5 -0
package/docs/ui/utilities/interactions.mdx +26 -0
package/docs/ui/utilities/margins.mdx +234 -0
package/docs/ui/utilities/vertical-align.mdx +66 -0
package/docs/ui/utilities/visually-hidden.mdx +12 -0
package/package.json +6 -6
package/LICENSE +0 -21

package/docs/ui/components/inline-player.mdx ADDED Viewed

@@ -0,0 +1,58 @@
+---
+title: Inline player
+libs: plyr
+summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
+description: Lightweight media player for websites.
+---
+## Overview
+The Inline Player is a versatile, modern media player designed for seamless integration into websites. It supports HTML5, YouTube, and Vimeo content, offering a lightweight and accessible solution for media playback. Built with customization and ease of use in mind, this player ensures compatibility with modern browsers and enhances user experience.
+## Installation
+To use the Inline Player, you need to include the Plyr 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 Plyr library from a CDN:
+```html
+<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
+```
+## Sample demo
+Integrating the Inline Player into your website is straightforward. Below is a sample implementation for a YouTube video:
+```html
+<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    window.Plyr && new Plyr("#player-youtube");
+  });
+</script>
+```
+Look at the example below to see how the Inline Player works with a YouTube video.
+```html example vendors height="500px" libs="plyr"
+<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
+<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    window.Plyr && new Plyr("#player-youtube");
+  });
+</script>
+```
+## Vimeo file
+Here’s how to embed a Vimeo video using the Inline Player:
+```html example vendors height="500px" libs="plyr"
+<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="515937365"></div>
+<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    window.Plyr && new Plyr("#player-vimeo");
+  });
+</script>
+```

package/docs/ui/components/modals.mdx ADDED Viewed

@@ -0,0 +1,297 @@
+---
+title: Modals
+summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
+description: Dialogs for notifications and content.
+---
+Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
+## Default markup
+To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal’s header, body, and footer.
+```html
+<div class="modal" tabindex="-1">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">...</div>
+      <div class="modal-body">...</div>
+      <div class="modal-footer">...</div>
+    </div>
+  </div>
+</div>
+```
+Look at the example below to see how the modal looks.
+```html example centered height="30rem"
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
+  Launch demo modal
+</button>
+<div class="modal" id="exampleModal" tabindex="-1">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Modal title</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus
+        deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis
+        reprehenderit sit tempora totam unde.
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+## Prompt and alert
+You can use the modal to create a prompt or alert. Look at the example below to see how the prompt and alert look.
+```html example centered height="30rem"
+<div class="modal" id="exampleModal" tabindex="-1">
+  <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-content">
+      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      <div class="modal-status bg-danger"></div>
+      <div class="modal-body text-center py-4">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon mb-2 text-danger icon-lg"
+          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" />
+          <path d="M12 9v2m0 4v.01" />
+          <path
+            d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"
+          />
+        </svg>
+        <h3>Are you sure?</h3>
+        <div class="text-secondary">
+          Do you really want to remove 84 files? What you've done cannot be undone.
+        </div>
+      </div>
+      <div class="modal-footer">
+        <div class="w-100">
+          <div class="row">
+            <div class="col">
+              <a href="#" class="btn w-100" data-bs-dismiss="modal"> Cancel </a>
+            </div>
+            <div class="col">
+              <a href="#" class="btn btn-danger w-100" data-bs-dismiss="modal"> Delete 84 items </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var myModal = new bootstrap.Modal(document.getElementById("exampleModal"));
+    myModal.show();
+  });
+</script>
+```
+```html example centered height="30rem"
+<div class="modal" id="exampleModal" tabindex="-1">
+  <div class="modal-dialog modal-sm" role="document">
+    <div class="modal-content">
+      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      <div class="modal-status bg-success"></div>
+      <div class="modal-body text-center py-4">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon mb-2 text-green icon-lg"
+          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" />
+          <circle cx="12" cy="12" r="9" />
+          <path d="M9 12l2 2l4 -4" />
+        </svg>
+        <h3>Payment succeeded</h3>
+        <div class="text-secondary">
+          Your payment of $290 has been successfully submitted. Your invoice has been sent to
+          support@tabler.io.
+        </div>
+      </div>
+      <div class="modal-footer">
+        <div class="w-100">
+          <div class="row">
+            <div class="col">
+              <a href="#" class="btn w-100" data-bs-dismiss="modal"> Go to dashboard </a>
+            </div>
+            <div class="col">
+              <a href="#" class="btn btn-success w-100" data-bs-dismiss="modal"> View invoice </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var myModal = new bootstrap.Modal(document.getElementById("exampleModal"));
+    myModal.show();
+  });
+</script>
+```
+## Modal with form
+You can use the modal to create a form. Look at the example below to see how the form looks.
+```html example centered height="30rem"
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
+  Launch modal with form
+</button>
+<div class="modal" id="exampleModal" tabindex="-1">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">New report</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="mb-3">
+          <label class="form-label">Name</label>
+          <input
+            type="text"
+            class="form-control"
+            name="example-text-input"
+            placeholder="Your report name"
+          />
+        </div>
+        <label class="form-label">Report type</label>
+        <div class="form-selectgroup-boxes row mb-3">
+          <div class="col-md-6">
+            <label class="form-selectgroup-item">
+              <input
+                type="radio"
+                name="report-type"
+                value="1"
+                class="form-selectgroup-input"
+                checked
+              />
+              <span class="form-selectgroup-label d-flex align-items-center p-3">
+                <span class="me-3">
+                  <span class="form-selectgroup-check"></span>
+                </span>
+                <span class="form-selectgroup-label-content">
+                  <span class="form-selectgroup-title strong mb-1">Simple</span>
+                  <span class="d-block text-secondary"
+                    >Provide only basic data needed for the report</span
+                  >
+                </span>
+              </span>
+            </label>
+          </div>
+          <div class="col-md-6">
+            <label class="form-selectgroup-item">
+              <input type="radio" name="report-type" value="1" class="form-selectgroup-input" />
+              <span class="form-selectgroup-label d-flex align-items-center p-3">
+                <span class="me-3">
+                  <span class="form-selectgroup-check"></span>
+                </span>
+                <span class="form-selectgroup-label-content">
+                  <span class="form-selectgroup-title strong mb-1">Advanced</span>
+                  <span class="d-block text-secondary"
+                    >Insert charts and additional advanced analyses to be inserted in the
+                    report</span
+                  >
+                </span>
+              </span>
+            </label>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-lg-8">
+            <div class="mb-3">
+              <label class="form-label">Report url</label>
+              <div class="input-group input-group-flat">
+                <span class="input-group-text"> https://tabler.io/reports/ </span>
+                <input type="text" class="form-control ps-0" value="report-01" autocomplete="off" />
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-4">
+            <div class="mb-3">
+              <label class="form-label">Visibility</label>
+              <select class="form-select">
+                <option value="1" selected>Private</option>
+                <option value="2">Public</option>
+                <option value="3">Hidden</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-lg-6">
+            <div class="mb-3">
+              <label class="form-label">Client name</label>
+              <input type="text" class="form-control" />
+            </div>
+          </div>
+          <div class="col-lg-6">
+            <div class="mb-3">
+              <label class="form-label">Reporting period</label>
+              <input type="date" class="form-control" />
+            </div>
+          </div>
+          <div class="col-lg-12">
+            <div>
+              <label class="form-label">Additional information</label>
+              <textarea class="form-control" rows="3"></textarea>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal"> Cancel </a>
+        <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon icon-tabler icon-tabler-plus"
+            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"></path>
+            <path d="M12 5l0 14"></path>
+            <path d="M5 12l14 0"></path>
+          </svg>
+          Create new report
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+```

package/docs/ui/components/offcanvas.mdx ADDED Viewed

@@ -0,0 +1,70 @@
+---
+title: Offcanvas
+---
+Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
+## Basic usage
+To create an offcanvas, add the `.offcanvas` class to a container element. You can also add the `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top`, or `.offcanvas-bottom` class to specify the position of the offcanvas. The `.show` class is used to display the offcanvas.
+```html
+<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas">
+  <div class="offcanvas-body">
+    Content for the offcanvas goes here. You can place just about any Tabler component or custom
+    elements here.
+  </div>
+</div>
+```
+Look at the example below to see how the offcanvas works.
+```html example vendors height="25rem"
+<div
+  class="offcanvas offcanvas-start show"
+  tabindex="-1"
+  id="offcanvas"
+  aria-labelledby="offcanvasLabel"
+>
+  <div class="offcanvas-body">
+    Content for the offcanvas goes here. You can place just about any Tabler component or custom
+    elements here.
+  </div>
+</div>
+```
+## Cookies banner
+The offcanvas component is used to display a cookies banner. It is a great way to inform users about the use of cookies on your website and to get their consent.
+```html example vendors height="25rem"
+<div
+  class="offcanvas offcanvas-bottom h-auto show"
+  tabindex="-1"
+  id="offcanvasBottom"
+  aria-modal="true"
+  role="dialog"
+>
+  <div class="offcanvas-body">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col">
+          <strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best
+          experience on our website.
+          <a href="./terms-of-service.html" target="_blank">Learn more</a>
+        </div>
+        <div class="col-auto">
+          <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
+            Essential Cookies Only
+          </button>
+        </div>
+        <div class="col-auto">
+          <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
+            Allow All Cookies
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```