@tabler/core 1.1.0 → 1.1.1

package/docs/ui/components/spinners.mdx

@@ -0,0 +1,135 @@
+---
+title: Spinners
+summary: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
+bootstrapLink: components/spinners/
+description: Indicate loading state with spinners.
+---
+
+## Default markup
+
+Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.
+
+```html
+<div class="spinner-border"></div>
+```
+
+Look at the example below to see how the spinner works:
+
+```html example centered
+<div class="spinner-border"></div>
+```
+
+## Colors
+
+Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section.
+
+```html example centered separated
+<div class="spinner-border text-blue" role="status"></div>
+<div class="spinner-border text-azure" role="status"></div>
+<div class="spinner-border text-indigo" role="status"></div>
+<div class="spinner-border text-purple" role="status"></div>
+<div class="spinner-border text-pink" role="status"></div>
+<div class="spinner-border text-red" role="status"></div>
+<div class="spinner-border text-orange" role="status"></div>
+<div class="spinner-border text-yellow" role="status"></div>
+<div class="spinner-border text-lime" role="status"></div>
+<div class="spinner-border text-green" role="status"></div>
+<div class="spinner-border text-teal" role="status"></div>
+<div class="spinner-border text-cyan" role="status"></div>
+```
+
+```html
+<div class="spinner-border text-blue" role="status"></div>
+<div class="spinner-border text-red" role="status"></div>
+```
+
+## Size
+
+Choose the size of your spinner. You can use the default size or use the `spinner-border-sm` class to display a smaller spinner.
+
+```html example centered separated
+<div class="spinner-border" role="status"></div>
+<div class="spinner-border spinner-border-sm" role="status"></div>
+```
+
+## Growing spinner
+
+Use the growing spinner, if you are looking for a more original design than a border spinner. The spinner grows to show the loading state.
+
+```html example centered
+<div class="spinner-grow" role="status"></div>
+```
+
+Growing spinners also come in a variety of colors to choose from.
+
+```html example centered separated
+<div class="spinner-grow text-blue" role="status"></div>
+<div class="spinner-grow text-azure" role="status"></div>
+<div class="spinner-grow text-indigo" role="status"></div>
+<div class="spinner-grow text-purple" role="status"></div>
+<div class="spinner-grow text-pink" role="status"></div>
+<div class="spinner-grow text-red" role="status"></div>
+<div class="spinner-grow text-orange" role="status"></div>
+<div class="spinner-grow text-yellow" role="status"></div>
+<div class="spinner-grow text-lime" role="status"></div>
+<div class="spinner-grow text-green" role="status"></div>
+<div class="spinner-grow text-teal" role="status"></div>
+<div class="spinner-grow text-cyan" role="status"></div>
+```
+
+```html
+<div class="spinner-grow text-blue" role="status"></div>
+<div class="spinner-grow text-azure" role="status"></div>
+```
+
+## Button with spinner
+
+Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
+
+```html
+<a href="#" class="btn btn-primary">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+  Button
+</a>
+```
+
+Look at the example below to see how the button with a spinner works:
+
+```html example centered separated code
+<a href="#" class="btn btn-primary">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+  Button
+</a>
+<a href="#" class="btn btn-danger">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+  Button
+</a>
+<a href="#" class="btn btn-warning">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+  Button
+</a>
+<a href="#" class="btn btn-success">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+  Button
+</a>
+<a href="#" class="btn">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+  Button
+</a>
+```
+
+## Animated dots
+
+Use animated dots to show the loading state of a component. They provide feedback for an action a user has taken, when it takes a bit longer to complete. To do it you need to use the `.animated-dots` class on a `span` element.
+
+```html example centered code
+<h1>Loading<span class="animated-dots"></span></h1>
+```
+
+Use buttons with animated dots to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
+
+```html example centered separated
+<a href="#" class="btn btn-primary"> Loading<span class="animated-dots"></span> </a>
+<a href="#" class="btn btn-primary disabled"> Loading<span class="animated-dots"></span> </a>
+```
+

package/docs/ui/components/statuses.mdx

@@ -0,0 +1,322 @@
+---
+title: Statuses
+summary: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
+description: Highlight interface elements with status dots.
+---
+
+## Default markup
+
+Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section.
+
+```html
+<span class="status status-blue">Blue</span>
+<span class="status status-azure">Azure</span>
+...
+```
+
+Look at the example below to see how the status works:
+
+```html example centered separated columns={2}
+<span class="status status-blue">Blue</span>
+<span class="status status-azure">Azure</span>
+<span class="status status-indigo">Indigo</span>
+<span class="status status-purple">Purple</span>
+<span class="status status-pink">Pink</span>
+<span class="status status-red">Red</span>
+<span class="status status-orange">Orange</span>
+<span class="status status-yellow">Yellow</span>
+<span class="status status-lime">Lime</span>
+<span class="status status-green">Green</span>
+<span class="status status-teal">Teal</span>
+<span class="status status-cyan">Cyan</span>
+```
+
+
+## Status with dot
+
+You can add a dot to the status to make it more noticeable. To do this, use the `.status-dot` element inside the `.status` element.
+
+```html
+<span class="status status-blue">
+  <span class="status-dot"></span>
+  Blue
+</span>
+```
+
+Look at the example below to see how the status with a dot works:
+
+```html example centered separated columns={2}
+<span class="status status-blue">
+  <span class="status-dot"></span>
+  Blue
+</span>
+<span class="status status-azure">
+  <span class="status-dot"></span>
+  Azure
+</span>
+<span class="status status-indigo">
+  <span class="status-dot"></span>
+  Indigo
+</span>
+<span class="status status-purple">
+  <span class="status-dot"></span>
+  Purple
+</span>
+<span class="status status-pink">
+  <span class="status-dot"></span>
+  Pink
+</span>
+<span class="status status-red">
+  <span class="status-dot"></span>
+  Red
+</span>
+<span class="status status-orange">
+  <span class="status-dot"></span>
+  Orange
+</span>
+<span class="status status-yellow">
+  <span class="status-dot"></span>
+  Yellow
+</span>
+<span class="status status-lime">
+  <span class="status-dot"></span>
+  Lime
+</span>
+<span class="status status-green">
+  <span class="status-dot"></span>
+  Green
+</span>
+<span class="status status-teal">
+  <span class="status-dot"></span>
+  Teal
+</span>
+<span class="status status-cyan">
+  <span class="status-dot"></span>
+  Cyan
+</span>
+```
+
+### Animated dot
+
+You can also animate the dot to make it more noticeable. To do this, add a `.status-dot-animated` class to the `.status-dot` element.
+
+```html example centered separated columns={2}
+<span class="status status-blue">
+  <span class="status-dot status-dot-animated"></span>
+  Blue
+</span>
+<span class="status status-azure">
+  <span class="status-dot status-dot-animated"></span>
+  Azure
+</span>
+<span class="status status-indigo">
+  <span class="status-dot status-dot-animated"></span>
+  Indigo
+</span>
+<span class="status status-purple">
+  <span class="status-dot status-dot-animated"></span>
+  Purple
+</span>
+<span class="status status-pink">
+  <span class="status-dot status-dot-animated"></span>
+  Pink
+</span>
+<span class="status status-red">
+  <span class="status-dot status-dot-animated"></span>
+  Red
+</span>
+<span class="status status-orange">
+  <span class="status-dot status-dot-animated"></span>
+  Orange
+</span>
+<span class="status status-yellow">
+  <span class="status-dot status-dot-animated"></span>
+  Yellow
+</span>
+<span class="status status-lime">
+  <span class="status-dot status-dot-animated"></span>
+  Lime
+</span>
+<span class="status status-green">
+  <span class="status-dot status-dot-animated"></span>
+  Green
+</span>
+<span class="status status-teal">
+  <span class="status-dot status-dot-animated"></span>
+  Teal
+</span>
+<span class="status status-cyan">
+  <span class="status-dot status-dot-animated"></span>
+  Cyan
+</span>
+```
+
+## Lite status
+
+Use the lite status to make the status less noticeable. To do this, add a `.status-lite` class to the `.status` element.
+
+```html example centered separated columns={2}
+<span class="status status-blue status-lite">
+  <span class="status-dot"></span>
+  Blue
+</span>
+<span class="status status-azure status-lite">
+  <span class="status-dot"></span>
+  Azure
+</span>
+<span class="status status-indigo status-lite">
+  <span class="status-dot"></span>
+  Indigo
+</span>
+<span class="status status-purple status-lite">
+  <span class="status-dot"></span>
+  Purple
+</span>
+<span class="status status-pink status-lite">
+  <span class="status-dot"></span>
+  Pink
+</span>
+<span class="status status-red status-lite">
+  <span class="status-dot"></span>
+  Red
+</span>
+<span class="status status-orange status-lite">
+  <span class="status-dot"></span>
+  Orange
+</span>
+<span class="status status-yellow status-lite">
+  <span class="status-dot"></span>
+  Yellow
+</span>
+<span class="status status-lime status-lite">
+  <span class="status-dot"></span>
+  Lime
+</span>
+<span class="status status-green status-lite">
+  <span class="status-dot"></span>
+  Green
+</span>
+<span class="status status-teal status-lite">
+  <span class="status-dot"></span>
+  Teal
+</span>
+<span class="status status-cyan status-lite">
+  <span class="status-dot"></span>
+  Cyan
+</span>
+```
+
+## Status dots
+
+If you need only dot status, you can use the `.status-dot` class.
+
+```html
+<span class="status-dot status-blue"></span>
+```
+
+Look at the example below to see how the status dots work:
+
+```html example centered separated
+<span class="status-dot status-blue"></span>
+<span class="status-dot status-azure"></span>
+<span class="status-dot status-indigo"></span>
+<span class="status-dot status-purple"></span>
+<span class="status-dot status-pink"></span>
+<span class="status-dot status-red"></span>
+<span class="status-dot status-orange"></span>
+<span class="status-dot status-yellow"></span>
+<span class="status-dot status-lime"></span>
+<span class="status-dot status-green"></span>
+<span class="status-dot status-teal"></span>
+<span class="status-dot status-cyan"></span>
+```
+
+The dots can also be animated. To do this, add the `.status-dot-animated` class.
+
+```html
+<span class="status-dot status-dot-animated status-blue"></span>
+```
+
+The animated status dots can be used in the same way as the regular status dots. 
+
+```html example centered separated
+<span class="status-dot status-dot-animated status-blue"></span>
+<span class="status-dot status-dot-animated status-azure"></span>
+<span class="status-dot status-dot-animated status-indigo"></span>
+<span class="status-dot status-dot-animated status-purple"></span>
+<span class="status-dot status-dot-animated status-pink"></span>
+<span class="status-dot status-dot-animated status-red"></span>
+<span class="status-dot status-dot-animated status-orange"></span>
+<span class="status-dot status-dot-animated status-yellow"></span>
+<span class="status-dot status-dot-animated status-lime"></span>
+<span class="status-dot status-dot-animated status-green"></span>
+<span class="status-dot status-dot-animated status-teal"></span>
+<span class="status-dot status-dot-animated status-cyan"></span>
+```
+
+## Status indicator
+
+Use the status indicator to show the status of a component or page. The status indicator can be animated. To do this, also add the `.status-indicator-animated` class.
+
+```html example centered separated columns={1}
+<span class="status-indicator status-blue status-indicator-animated">
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+</span>
+<span class="status-indicator status-azure status-indicator-animated">
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+</span>
+<span class="status-indicator status-indigo status-indicator-animated">
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+</span>
+<span class="status-indicator status-purple status-indicator-animated">
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+</span>
+<span class="status-indicator status-pink status-indicator-animated">
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+</span>
+<span class="status-indicator status-red status-indicator-animated">
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+</span>
+<span class="status-indicator status-orange status-indicator-animated">
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+</span>
+<span class="status-indicator status-yellow status-indicator-animated">
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+</span>
+<span class="status-indicator status-lime status-indicator-animated">
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+</span>
+<span class="status-indicator status-green status-indicator-animated">
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+</span>
+<span class="status-indicator status-teal status-indicator-animated">
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+</span>
+<span class="status-indicator status-cyan status-indicator-animated">
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+  <span class="status-indicator-circle"></span>
+</span>
+```

package/docs/ui/components/steps.mdx

@@ -0,0 +1,174 @@
+---
+title: Steps
+summary: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
+new: true
+description: Simplify complex processes with steps.
+---
+
+## Default markup
+
+Steps provide a clear visual representation of a user’s progress through a multi-step process. By showing what has been completed and what remains, steps enhance usability and encourage task completion.
+
+To create a default progress tracker, use the `.steps` class and define each step as a `.step-item`. The active step clearly indicates the current position in the process. 
+
+```html
+<div class="steps">
+  <a href="#" class="step-item"> Step 1 </a>
+  <a href="#" class="step-item"> Step 2 </a>
+  <a href="#" class="step-item active"> Step 3 </a>
+</div>
+```
+
+The example below demonstrates a simple progress tracker with four steps, where the third step is active.
+
+```html example centered
+<div class="steps">
+  <a href="#" class="step-item"> Step 1 </a>
+  <a href="#" class="step-item"> Step 2 </a>
+  <a href="#" class="step-item active"> Step 3 </a>
+  <span href="#" class="step-item"> Step 4 </span>
+</div>
+```
+
+## Tooltips
+
+Add tooltips if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.
+
+To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the tooltip content with the `title` attribute.
+
+```html
+<a
+  href="#"
+  class="step-item"
+  data-bs-toggle="tooltip"
+  data-bs-placement="top"
+  title="Step 1 description"
+>
+  Step 1
+</a>
+```
+
+The example below demonstrates a progress tracker with tooltips for each step.
+
+```html example centered height="20rem"
+<div class="steps">
+  <a
+    href="#"
+    class="step-item"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Step 1 description"
+  >
+    Step 1
+  </a>
+  <a
+    href="#"
+    class="step-item"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Step 2 description"
+  >
+    Step 2
+  </a>
+  <a
+    href="#"
+    class="step-item active"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Step 3 description"
+  >
+    Step 3
+  </a>
+  <span
+    href="#"
+    class="step-item"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Step 4 description"
+  >
+    Step 4
+  </span>
+</div>
+```
+
+## Color
+
+You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/base/colors) to see the range of available colors.
+
+```html
+<div class="steps steps-green">...</div>
+```
+
+The example below demonstrates a progress tracker with two different color schemes.
+
+```html example centered
+<div class="steps steps-green">
+  <a href="#" class="step-item"> Step 1 </a>
+  <a href="#" class="step-item"> Step 2 </a>
+  <a href="#" class="step-item active"> Step 3 </a>
+  <span href="#" class="step-item"> Step 4 </span>
+</div>
+<div class="steps steps-red">
+  <a href="#" class="step-item"> Step 1 </a>
+  <a href="#" class="step-item"> Step 2 </a>
+  <a href="#" class="step-item active"> Step 3 </a>
+  <span href="#" class="step-item"> Step 4 </span>
+</div>
+```
+
+## Steps without title
+
+For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
+
+```html example centered
+<div class="steps">
+  <a
+    href="#"
+    class="step-item"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Step 1 description"
+  ></a>
+  <a
+    href="#"
+    class="step-item"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Step 2 description"
+  ></a>
+  <a
+    href="#"
+    class="step-item active"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Step 3 description"
+  ></a>
+  <span
+    href="#"
+    class="step-item"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Step 4 description"
+  ></span>
+</div>
+```
+
+## Steps with numbers
+
+Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it. 
+
+```html
+<div class="steps steps-counter">...</div>
+```
+
+The example below demonstrates a progress tracker with numbers and a different color scheme.
+
+```html example centered
+<div class="steps steps-counter">
+  <a href="#" class="step-item"></a>
+  <a href="#" class="step-item active"></a>
+  <span href="#" class="step-item"></span>
+  <span href="#" class="step-item"></span>
+  <span href="#" class="step-item"></span>
+</div>
+```