@tabler/core 1.1.1 → 1.2.0

package/docs/ui/components/placeholder.mdx

@@ -1,273 +0,0 @@
----
-title: Placeholder
-summary: Placeholder is used to reserve space for content that will soon appear in a layout.
-description: Reserve space for upcoming content.
----
-
-## Placeholder line
-
-Placeholder lines can contain lines of text. Their length is different and depends on the `col-` class.
-
-```html example columns={1}
-<div class="placeholder col-9"></div>
-<div class="placeholder col-11"></div>
-<div class="placeholder col-10"></div>
-<div class="placeholder col-8"></div>
-```
-
-However, it may be useful to specify the full width in order to fit the content more effectively.
-
-```html example columns={1}
-<div class="placeholder col-12"></div>
-<div class="placeholder col-12"></div>
-<div class="placeholder col-12"></div>
-<div class="placeholder col-12"></div>
-```
-
-You can also move the lines to the right or center them:
-
-```html example columns={1}
-<div class="text-end">
-  <div class="placeholder col-11"></div>
-  <div class="placeholder col-10"></div>
-  <div class="placeholder col-8"></div>
-</div>
-<div class="text-center mt-3">
-  <div class="placeholder col-11"></div>
-  <div class="placeholder col-10"></div>
-  <div class="placeholder col-8"></div>
-</div>
-```
-
-## Placeholder heading
-
-A placeholder can also contain an element that looks like a header:
-
-```html example columns={1}
-<div class="placeholder col-9 mb-3"></div>
-<div class="placeholder placeholder-xs col-10"></div>
-<div class="placeholder placeholder-xs col-11"></div>
-```
-
-## Placeholder avatar
-
-You can use a placeholder that will look like an avatar. You can use the `avatar` component, and get the image in the right proportions.
-
-```html
-<div class="avatar placeholder"></div>
-```
-
-Look at the example below to see how the avatar placeholder looks.
-
-```html example columns={1} centered
-<div class="row">
-  <div class="col-auto">
-    <div class="avatar placeholder"></div>
-  </div>
-  <div class="col">
-    <div class="placeholder col-9"></div>
-    <div class="placeholder col-11"></div>
-  </div>
-</div>
-```
-
-You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks.
-
-```html example centered separated
-<div class="avatar avatar-xl placeholder"></div>
-<div class="avatar avatar-lg placeholder"></div>
-<div class="avatar avatar-md placeholder"></div>
-<div class="avatar placeholder"></div>
-<div class="avatar avatar-sm placeholder"></div>
-<div class="avatar avatar-xs placeholder"></div>
-```
-
-## Placeholder image
-
-You can use a placeholder that will look like a picture. You can use the `ratio` component, and get the image in the right proportions.
-
-```html example columns={1} height={500} scrollable separated vertical
-<div class="ratio ratio-1x1 placeholder">
-  <div class="placeholder-image"></div>
-</div>
-<div class="ratio ratio-4x3 placeholder">
-  <div class="placeholder-image"></div>
-</div>
-<div class="ratio ratio-16x9 placeholder">
-  <div class="placeholder-image"></div>
-</div>
-<div class="ratio ratio-21x9 placeholder">
-  <div class="placeholder-image"></div>
-</div>
-```
-
-## Placeholder color
-
-By default, the placeholder uses `currentColor`. This can be overridden with a custom color or utility class. Full color classes are available for background colors.
-
-```html
-<span class="placeholder col-12 bg-dark"></span>
-```
-
-Look at the example below to see how the color affects the placeholder.
-
-```html example columns={1} height={240}
-<span class="placeholder col-12"></span>
-<span class="placeholder col-12 bg-primary"></span>
-<span class="placeholder col-12 bg-secondary"></span>
-<span class="placeholder col-12 bg-success"></span>
-<span class="placeholder col-12 bg-danger"></span>
-<span class="placeholder col-12 bg-warning"></span>
-<span class="placeholder col-12 bg-info"></span>
-<span class="placeholder col-12 bg-light"></span>
-<span class="placeholder col-12 bg-dark"></span>
-```
-
-## Placeholder sizing
-
-The sizes of placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.
-
-```html example columns={1}
-<span class="placeholder col-12 placeholder-lg"></span>
-<span class="placeholder col-12"></span>
-<span class="placeholder col-12 placeholder-sm"></span>
-<span class="placeholder col-12 placeholder-xs"></span>
-```
-
-## Animation
-
-Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.
-
-```html example columns={1}
-<p class="placeholder-glow">
-  <span class="placeholder col-12"></span>
-</p>
-<p class="placeholder-wave">
-  <span class="placeholder col-12"></span>
-</p>
-```
-
-## Live examples
-
-See in the following examples how else you can use the placeholder component
-
-```html example columns={1} height={1000} separated vertical scrollable
-<div class="card placeholder-glow">
-  <div class="ratio ratio-21x9 card-img-top placeholder"></div>
-  <div class="card-body">
-    <div class="placeholder col-9 mb-3"></div>
-    <div class="placeholder placeholder-xs col-10"></div>
-    <div class="placeholder placeholder-xs col-11"></div>
-    <div class="mt-3">
-      <a
-        href="#"
-        tabindex="-1"
-        class="btn btn-primary disabled placeholder col-4"
-        aria-hidden="true"
-      ></a>
-    </div>
-  </div>
-</div>
-<div class="card">
-  <div class="row g-0 align-items-center placeholder-glow">
-    <div class="col-3">
-      <div class="ratio ratio-1x1 card-img-start placeholder"></div>
-    </div>
-    <div class="col">
-      <div class="card-body">
-        <div class="placeholder col-9 mb-3"></div>
-        <div class="placeholder placeholder-xs col-10"></div>
-        <div class="placeholder placeholder-xs col-11"></div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="card">
-  <div class="card-body">
-    <div class="row">
-      <div class="col-auto">
-        <div class="avatar avatar-rounded placeholder"></div>
-      </div>
-      <div class="col">
-        <div class="placeholder placeholder-xs col-9"></div>
-        <div class="placeholder placeholder-xs col-7"></div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="card">
-  <div class="card-body py-5 text-center">
-    <div>
-      <div class="avatar avatar-rounded avatar-lg placeholder mb-3"></div>
-    </div>
-    <div class="mt w-75 mx-auto">
-      <div class="placeholder col-9 mb-3"></div>
-      <div class="placeholder placeholder-xs col-10"></div>
-    </div>
-  </div>
-</div>
-<div class="card">
-  <ul class="list-group list-group-flush placeholder-glow">
-    <li class="list-group-item">
-      <div class="row align-items-center">
-        <div class="col-auto">
-          <div class="avatar avatar-rounded placeholder"></div>
-        </div>
-        <div class="col-7">
-          <div class="placeholder placeholder-xs col-9"></div>
-          <div class="placeholder placeholder-xs col-7"></div>
-        </div>
-        <div class="col-2 ms-auto text-end">
-          <div class="placeholder placeholder-xs col-8"></div>
-          <div class="placeholder placeholder-xs col-10"></div>
-        </div>
-      </div>
-    </li>
-    <li class="list-group-item">
-      <div class="row align-items-center">
-        <div class="col-auto">
-          <div class="avatar avatar-rounded placeholder"></div>
-        </div>
-        <div class="col-7">
-          <div class="placeholder placeholder-xs col-9"></div>
-          <div class="placeholder placeholder-xs col-7"></div>
-        </div>
-        <div class="col-2 ms-auto text-end">
-          <div class="placeholder placeholder-xs col-8"></div>
-          <div class="placeholder placeholder-xs col-10"></div>
-        </div>
-      </div>
-    </li>
-    <li class="list-group-item">
-      <div class="row align-items-center">
-        <div class="col-auto">
-          <div class="avatar avatar-rounded placeholder"></div>
-        </div>
-        <div class="col-7">
-          <div class="placeholder placeholder-xs col-9"></div>
-          <div class="placeholder placeholder-xs col-7"></div>
-        </div>
-        <div class="col-2 ms-auto text-end">
-          <div class="placeholder placeholder-xs col-8"></div>
-          <div class="placeholder placeholder-xs col-10"></div>
-        </div>
-      </div>
-    </li>
-    <li class="list-group-item">
-      <div class="row align-items-center">
-        <div class="col-auto">
-          <div class="avatar avatar-rounded placeholder"></div>
-        </div>
-        <div class="col-7">
-          <div class="placeholder placeholder-xs col-9"></div>
-          <div class="placeholder placeholder-xs col-7"></div>
-        </div>
-        <div class="col-2 ms-auto text-end">
-          <div class="placeholder placeholder-xs col-8"></div>
-          <div class="placeholder placeholder-xs col-10"></div>
-        </div>
-      </div>
-    </li>
-  </ul>
-</div>
-```

package/docs/ui/components/popover.mdx

@@ -1,142 +0,0 @@
----
-title: Popovers
-summary: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
-bootstrapLink: components/popovers
-description: Provide extra information with popovers.
----
-
-## Default markup
-
-To create a default popover use:
-
-```html example centered
-<button
-  type="button"
-  class="btn"
-  data-bs-toggle="popover"
-  title="Popover title"
-  data-bs-content="And here's some amazing content. It's very engaging. Right?"
->
-  Click to toggle popover
-</button>
-```
-
-## Four directions
-
-Four options are available: `top`, `right`, `bottom`, and `left` aligned. Directions are mirrored when using Bootstrap in RTL.
-
-```html example centered separated
-<button
-  type="button"
-  class="btn"
-  data-bs-container="body"
-  data-bs-toggle="popover"
-  data-bs-placement="top"
-  data-bs-content="Top popover"
->
-  Popover on top
-</button>
-<button
-  type="button"
-  class="btn"
-  data-bs-container="body"
-  data-bs-toggle="popover"
-  data-bs-placement="right"
-  data-bs-content="Right popover"
->
-  Popover on right
-</button>
-<button
-  type="button"
-  class="btn"
-  data-bs-container="body"
-  data-bs-toggle="popover"
-  data-bs-placement="bottom"
-  data-bs-content="Bottom popover"
->
-  Popover on bottom
-</button>
-<button
-  type="button"
-  class="btn"
-  data-bs-container="body"
-  data-bs-toggle="popover"
-  data-bs-placement="left"
-  data-bs-content="Left popover"
->
-  Popover on left
-</button>
-```
-
-```html
-<button
-  type="button"
-  class="btn"
-  data-bs-container="body"
-  data-bs-toggle="popover"
-  data-bs-placement="top"
-  data-bs-content="Top popover"
->
-  Popover on top
-</button>
-<button
-  type="button"
-  class="btn"
-  data-bs-container="body"
-  data-bs-toggle="popover"
-  data-bs-placement="right"
-  data-bs-content="Right popover"
->
-  Popover on right
-</button>
-<button
-  type="button"
-  class="btn"
-  data-bs-container="body"
-  data-bs-toggle="popover"
-  data-bs-placement="bottom"
-  data-bs-content="Bottom popover"
->
-  Popover on bottom
-</button>
-<button
-  type="button"
-  class="btn"
-  data-bs-container="body"
-  data-bs-toggle="popover"
-  data-bs-placement="left"
-  data-bs-content="Left popover"
->
-  Popover on left
-</button>
-```
-
-## Popover on hover
-
-Popover can be triggered in one or more of the following styles: `manual`, with a `click`, on `focus`, and on `hover`. This one reacts on hover. See more details on the Popover component page of [Bootstrap's documentation](https://getbootstrap.com/docs)
-
-```html example centered
-<button
-  type="button"
-  class="btn btn-primary"
-  data-bs-trigger="hover"
-  data-bs-toggle="popover"
-  title="Popover title"
-  data-bs-content="And here's some amazing content. It's very engaging. Right?"
->
-  Hover to toggle popover
-</button>
-```
-
-```html
-<button
-  type="button"
-  class="btn btn-primary"
-  data-bs-trigger="hover"
-  data-bs-toggle="popover"
-  title="Popover title"
-  data-bs-content="And here's some amazing content. It's very engaging. Right?"
->
-  Hover to toggle popover
-</button>
-```

package/docs/ui/components/progress.mdx

@@ -1,241 +0,0 @@
----
-title: Progress bars
-summary: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
-bootstrapLink: components/progress
-description: Track and display progress visually.
----
-
-## Default markup
-
-To create a default progress bar, add a `.progress` class to a `<div>` element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.
-
-```html example columns={1} centered
-<div class="progress">
-  <div class="progress-bar" style="width: 38%"></div>
-</div>
-```
-
-```html
-<div class="progress">
-  <div
-    class="progress-bar"
-    style="width: 38%"
-    role="progressbar"
-    aria-valuenow="38"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-label="38% Complete"
-  >
-    <span class="visually-hidden">38% Complete</span>
-  </div>
-</div>
-```
-
-## Progress size
-
-Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.
-
-```html
-<div class="progress progress-sm">...</div>
-```
-
-Look at the example below to see how it works:
-
-```html example columns={1} centered
-<div class="progress progress-sm">
-  <div
-    class="progress-bar"
-    style="width: 57%"
-    role="progressbar"
-    aria-valuenow="57"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-label="57% Complete"
-  >
-    <span class="visually-hidden">57% Complete</span>
-  </div>
-</div>
-```
-
-## Indeterminate progress
-
-You can create a progress bar which shows indeterminate progress by adding `.progress-bar-indeterminate` to the `.progress-bar` element.
-
-```html example columns={1} centered
-<div class="progress progress-sm">
-  <div class="progress-bar progress-bar-indeterminate"></div>
-</div>
-```
-
-## Native progress element
-
-You can also use native HTML5 `<progress>` element. It is a great way to create a progress bar without the need for additional HTML elements.
-
-```html
-<progress class="progress progress-sm" value="15" max="100" />
-```
-
-This is how it looks:
-
-```html example columns={1} centered
-<progress class="progress progress-sm" value="15" max="100" />
-```
-
-## Progress color
-
-You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar.
-
-Full list of available colors can be found [here](/docs/ui/base/colors).
-
-```html example columns={1} centered separated
-<div class="progress">
-  <div
-    class="progress-bar bg-red"
-    style="width: 24%"
-    role="progressbar"
-    aria-valuenow="24"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-label="24% Complete"
-  >
-    <span class="visually-hidden">24% Complete</span>
-  </div>
-</div>
-<div class="progress">
-  <div
-    class="progress-bar bg-green"
-    style="width: 45%"
-    role="progressbar"
-    aria-valuenow="45"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-label="45% Complete"
-  >
-    <span class="visually-hidden">45% Complete</span>
-  </div>
-</div>
-<div class="progress">
-  <div
-    class="progress-bar bg-purple"
-    style="width: 64%"
-    role="progressbar"
-    aria-valuenow="64"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-label="64% Complete"
-  >
-    <span class="visually-hidden">64% Complete</span>
-  </div>
-</div>
-<div class="progress">
-  <div
-    class="progress-bar bg-blue"
-    style="width: 38%"
-    role="progressbar"
-    aria-valuenow="38"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-label="38% Complete"
-  >
-    <span class="visually-hidden">38% Complete</span>
-  </div>
-</div>
-```
-
-## Multiple progress bars
-
-You can stack multiple progress bars on top of each other to create a visually appealing design. This can be done by adding multiple `.progress` elements inside a `.progress-stacked` container.
-
-```html
-<div class="progress-stacked">
-  <div class="progress">...</div>
-</div>
-```
-
-This is how it looks:
-
-```html example columns={2} centered 
-<div class="progress-stacked">
-  <div class="progress" style="width: 15%">
-    <div class="progress-bar"></div>
-  </div>
-  <div class="progress" style="width: 30%">
-    <div class="progress-bar bg-success"></div>
-  </div>
-  <div class="progress" style="width: 20%">
-    <div class="progress-bar bg-info"></div>
-  </div>
-</div>
-```
-
-## Striped progress
-
-You can create a striped progress bar by adding the `.progress-bar-striped` class to the `.progress-bar` element.
-
-```html
-<div class="progress">
-  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
-</div>
-```
-
-This is how it looks:
-
-```html example columns={1} centered separated 
-<div class="progress">
-  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
-</div>
-```
-
-## Progress background
-
-By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the page, the progress bar could gradually fill up, creating a sense of momentum and progress.
-
-```html
-<div class="progressbg">
-  <div class="progress progressbg-progress">
-    <div class="progress-bar bg-primary-lt" style="width: 65%"></div>
-  </div>
-  <div class="progressbg-text">Poland</div>
-  <div class="progressbg-value">65%</div>
-</div>
-```
-
-Thanks to this you can create a nice looking statistics section:
-
-```html example vertical separated centered columns={1} plugins="flags" height="20rem"
-<div class="progressbg">
-  <div class="progress progressbg-progress">
-    <div class="progress-bar bg-primary-lt" style="width: 65%"></div>
-  </div>
-  <div class="progressbg-text">Poland</div>
-  <div class="progressbg-value">65%</div>
-</div>
-<div class="progressbg">
-  <div class="progress progressbg-progress">
-    <div class="progress-bar bg-primary-lt" style="width: 35%"></div>
-  </div>
-  <div class="progressbg-text">Germany</div>
-  <div class="progressbg-value">35%</div>
-</div>
-<div class="progressbg">
-  <div class="progress progressbg-progress">
-    <div class="progress-bar bg-primary-lt" style="width: 28%"></div>
-  </div>
-  <div class="progressbg-text">United Stated</div>
-  <div class="progressbg-value">28%</div>
-</div>
-<div class="progressbg">
-  <div class="progress progressbg-progress">
-    <div class="progress-bar bg-primary-lt" style="width: 20%"></div>
-  </div>
-  <div class="progressbg-text">United Kingdom</div>
-  <div class="progressbg-value">20%</div>
-</div>
-<div class="progressbg">
-  <div class="progress progressbg-progress">
-    <div class="progress-bar bg-primary-lt" style="width: 15%"></div>
-  </div>
-  <div class="progressbg-text">France</div>
-  <div class="progressbg-value">15%</div>
-</div>
-```

package/docs/ui/components/range-slider.mdx

@@ -1,32 +0,0 @@
----
-title: Range slider
-libs: nouislider
-description: Adjust values with range sliders.
-summary: Range sliders allow users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
----
-
-To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
-
-All options and features can be found [**here**](https://refreshless.com/nouislider/).
-
-## Basic range slider
-
-```html example centered vendors libs="nouislider" columns={1}
-<div id="range-simple"></div>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    window.noUiSlider &&
-      noUiSlider.create(document.getElementById("range-simple"), {
-        start: 20,
-        connect: [true, false],
-        step: 10,
-        range: {
-          min: 0,
-          max: 100,
-        },
-      });
-  });
-</script>
-```
-
-That's only the basic features and options of range slider. More possibilities can be found [**here**](https://refreshless.com/nouislider/).