@tabler/core 1.0.0-beta23 → 1.0.0-beta24

package/dist/js/demo-theme.js

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta23 (https://tabler.io)
-* @version 1.0.0-beta23
+* Tabler v1.0.0-beta24 (https://tabler.io)
+* @version 1.0.0-beta24
 * @link https://tabler.io
 * Copyright 2018-2025 The Tabler Authors
 * Copyright 2018-2025 codecalm.net Paweł Kuna

package/dist/js/demo-theme.min.js

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta23 (https://tabler.io)
-* @version 1.0.0-beta23
+* Tabler v1.0.0-beta24 (https://tabler.io)
+* @version 1.0.0-beta24
 * @link https://tabler.io
 * Copyright 2018-2025 The Tabler Authors
 * Copyright 2018-2025 codecalm.net Paweł Kuna

package/dist/js/demo.js

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta23 (https://tabler.io)
-* @version 1.0.0-beta23
+* Tabler v1.0.0-beta24 (https://tabler.io)
+* @version 1.0.0-beta24
 * @link https://tabler.io
 * Copyright 2018-2025 The Tabler Authors
 * Copyright 2018-2025 codecalm.net Paweł Kuna

package/dist/js/demo.min.js

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta23 (https://tabler.io)
-* @version 1.0.0-beta23
+* Tabler v1.0.0-beta24 (https://tabler.io)
+* @version 1.0.0-beta24
 * @link https://tabler.io
 * Copyright 2018-2025 The Tabler Authors
 * Copyright 2018-2025 codecalm.net Paweł Kuna

package/dist/js/tabler.esm.js

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta23 (https://tabler.io)
-* @version 1.0.0-beta23
+* Tabler v1.0.0-beta24 (https://tabler.io)
+* @version 1.0.0-beta24
 * @link https://tabler.io
 * Copyright 2018-2025 The Tabler Authors
 * Copyright 2018-2025 codecalm.net Paweł Kuna

package/dist/js/tabler.esm.min.js

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta23 (https://tabler.io)
-* @version 1.0.0-beta23
+* Tabler v1.0.0-beta24 (https://tabler.io)
+* @version 1.0.0-beta24
 * @link https://tabler.io
 * Copyright 2018-2025 The Tabler Authors
 * Copyright 2018-2025 codecalm.net Paweł Kuna

package/dist/js/tabler.js

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta23 (https://tabler.io)
-* @version 1.0.0-beta23
+* Tabler v1.0.0-beta24 (https://tabler.io)
+* @version 1.0.0-beta24
 * @link https://tabler.io
 * Copyright 2018-2025 The Tabler Authors
 * Copyright 2018-2025 codecalm.net Paweł Kuna

package/dist/js/tabler.min.js

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta23 (https://tabler.io)
-* @version 1.0.0-beta23
+* Tabler v1.0.0-beta24 (https://tabler.io)
+* @version 1.0.0-beta24
 * @link https://tabler.io
 * Copyright 2018-2025 The Tabler Authors
 * Copyright 2018-2025 codecalm.net Paweł Kuna

package/docs/illustrations/introduction/contents.mdx

@@ -0,0 +1,77 @@
+---
+title: Contents
+description: Explore Tabler Illustrations folder structure
+summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
+---
+
+The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.
+
+## Folder Structure
+
+Once downloaded, unzip the compressed folder and you’ll see something like this:
+
+```
+tabler-illustrations/
+├── eps/
+|	├── dark/
+|	└── light/
+├── figma/ 
+├── pdf/ 
+|  ├── dark/
+|  └── light/
+├── png/ 
+|  ├── dark/
+|  └── light/
+├── png-background/ 
+|	├── dark/
+|	└── light/
+├── svg/ 
+|  ├── dark/
+|  └── light/
+├── svg-css-autodark/ 
+└── svg-css-variables/
+ 	├── dark/
+ 	└── light/
+```
+
+## Understanding the File Structure in Tabler Illustrations
+
+The **Tabler Illustrations** package is organized into a clear and efficient folder structure to streamline the use of its high-quality assets. Below is a breakdown of its key directories:
+
+### 1. Vector Files: `eps/`
+This folder contains EPS files for scalable vector illustrations.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 2. Design File: `figma/`
+This folder contains a Figma file, perfect for designers who work directly in Figma.
+
+### 3. Document Files: `pdf/`
+This folder contains PDF files, ideal for print or presentation use.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 4. Transparent Images: `png/`
+This folder stores PNG files with transparent backgrounds at 1600 × 1200px resolution.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 5. Background Images: `png-background/`
+This folder contains PNG files with a dark background for enhanced contrast.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 6. Scalable Vector Graphics: `svg/`
+This folder includes SVG files for scalable and customizable vector graphics.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 7. Adaptive Graphics: `svg-css-autodark/`
+This folder contains SVG files prepared to automatically adjust their colors based on user settings, providing a dynamic and adaptive visual experience.
+
+### 8. Themed Graphics: `svg-css-variables/`
+This folder contains SVG files using CSS variables for flexible theming.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+This structure ensures easy access to various formats and themes, making Tabler Illustrations a versatile tool for developers and designers alike.

package/docs/illustrations/introduction/customization.mdx

@@ -206,7 +206,6 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust
     </svg>
   </div>
 </div>
-
 <div class="row g-2">
   <div class="col-auto">
     <label class="form-colorinput">
@@ -269,7 +268,6 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust
     </label>
   </div>
 </div>
-
 <script>
   document.querySelectorAll('.form-colorinput-input').forEach((input) => {
     input.addEventListener('change', (event) => {
@@ -329,11 +327,9 @@ Illustration change theme based on the user's system preferences or `data-bs-the
 
 ```html
 <html data-bs-theme="dark">
-
 <body>
   <svg>...</svg>
 </body>
-
 </html>
 ```
 
@@ -346,25 +342,20 @@ Look at the example below to see how the illustration changes based on the user'
       fill: black;
       opacity: 0.07;
     }
-
     :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-b {
       fill: #1A2030;
     }
-
     :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-c {
       fill: #454C5E;
     }
-
     @media (prefers-color-scheme: dark) {
       .tblr-illustrations-boy-girl-a {
         fill: black;
         opacity: 0.07;
       }
-
       .tblr-illustrations-boy-girl-b {
         fill: #1A2030;
       }
-
       .tblr-illustrations-boy-girl-c {
         fill: #454C5E;
       }
@@ -422,7 +413,6 @@ Look at the example below to see how the illustration changes based on the user'
     </label>
   </div>
 </div>
-
 <script>
   const toggleTheme = (theme) => {
     if (theme === 'dark') {
@@ -431,7 +421,6 @@ Look at the example below to see how the illustration changes based on the user'
       document.documentElement.setAttribute('data-bs-theme', 'light');
     }
   }
-
   document.querySelectorAll('.form-check-input').forEach((input) => {
     input.addEventListener('change', (e) => {
       console.log(e.target.value);

package/docs/illustrations/introduction/license.mdx

@@ -0,0 +1,22 @@
+---
+title: Tabler Illustrations License
+---
+
+Codecalm.net grants you an on-going, non-exclusive license to use the Tabler Illustrations.
+
+The license grants permission to one individual (the Licensee) to access and use the Tabler Illustrations.
+
+## What You Can Do with Tabler Illustrations
+
+* Use the Tabler Illustrations to create unlimited End Products.
+* Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
+* Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
+* Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
+
+## What You Cannot Do with Tabler Illustrations
+
+* Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
+* Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product, neither in code or as design assets.
+* Share your access to the Tabler Illustrations with any other individuals.
+* Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
+* Use the Tabler Illustrations to produce anything that may be deemed by Codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of Codecalm.net

package/docs/ui/components/alerts.mdx

@@ -9,7 +9,7 @@ description: Alert messages for user notifications.
 
 Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
 
-```html example vertical height="420px"
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <h4 class="alert-title">Wow! Everything worked!</h4>
   <div class="text-secondary">Your account has been saved!</div>
@@ -39,7 +39,7 @@ Depending on the information you need to convey, you can use one of the followin
 
 Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.
 
-```html example vertical height="7rem"
+```html example vertical background="surface" columns={2} centered
 <div class="alert alert-danger m-0">
   This is a danger alert — <a href="#" class="alert-link">check it out</a>!
 </div>
@@ -49,7 +49,7 @@ Add a link to your alert message to redirect users to the details they need to c
 
 Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
 
-```html example height="420px"
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
@@ -137,7 +137,24 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
 
 Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
 
-```html example height="420px"
+```html
+<div class="alert alert-success" role="alert">
+  <div class="d-flex">
+    <div>
+      <!-- SVG icon from http://tabler.io/icons/icon/check -->
+      <svg>...</svg>
+    </div>
+    <div>
+      <h4 class="alert-title">Wow! Everything worked!</h4>
+      <div class="text-secondary">Your account has been saved!</div>
+    </div>
+  </div>
+</div>
+```
+
+To see how the icon affects the alert modal, look at the example below.
+
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
@@ -201,66 +218,17 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 </div>
 ```
 
-```html
-<div class="alert alert-success" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/check -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-info" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Did you know?</h4>
-      <div class="text-secondary">Here is something that you might like to know.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-warning" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Uh oh, something went wrong</h4>
-      <div class="text-secondary">Sorry! There was a problem with your request.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-danger" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">I'm so sorry&hellip;</h4>
-      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
-    </div>
-  </div>
-</div>
-```
+
 
 ## Alert with avatar
 
 Add an avatar to your alert modal to make it more personalized.
 
-```html example height="420px"
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/039m.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -270,7 +238,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-info" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3">JL</span>
+      <span class="avatar me-3">JL</span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -280,7 +248,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-warning" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/035f.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -290,7 +258,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-danger" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/056f.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -303,7 +271,7 @@ Add an avatar to your alert modal to make it more personalized.
 
 Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
 
-```html example height="500px" scrollable
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success alert-dismissible" role="alert">
   <h3 class="mb-1">Some Title</h3>
   <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
@@ -346,7 +314,15 @@ Add primary and secondary buttons to your alert modals if you want users to take
 
 If you want your alert to be really eye-catching, you can add a class `alert-important`.
 
-```html example vertical height="210px"
+```html
+<div class="alert alert-important alert-success alert-dismissible" role="alert">
+  ...
+</div>
+```
+
+Look at the example below to see how the important alert affects the alert modal.
+
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-important alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
@@ -356,8 +332,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
       </svg>
     </div>
     <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
+      Wow! Everything worked!
     </div>
   </div>
   <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
@@ -378,54 +353,3 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 </div>
 ```
 
-```html
-<div class="alert alert-important alert-success alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/check -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Your account has been saved!
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-important alert-info alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Here is something that you might like to know.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-important alert-warning alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Sorry! There was a problem with your request.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-important alert-danger alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Your account has been deleted and can't be restored.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-```
-