@tabler/core 1.1.0 → 1.1.1

package/docs/ui/forms/form-selectboxes.mdx

@@ -0,0 +1,398 @@
+---
+title: Form selectgroup
+summary: Use selectgroup to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectgroup with a label, use icons only or icons with labels. Alternatively, you can use pill selectgroup if they go well with your design.
+description: Improve form UX with select groups.
+---
+
+## Simple selectgroup
+
+To create a simple selectgroup, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label.
+
+```html
+<label class="form-selectgroup-item">
+  <input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
+  <span class="form-selectgroup-label">...</span>
+</label>
+```
+
+Look at the example below to see how the simple selectgroup works:
+
+```html example columns={1} centered
+<div>
+  <div class="form-selectgroup">
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="HTML" class="form-selectgroup-input" checked />
+      <span class="form-selectgroup-label">HTML</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="CSS" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">CSS</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="PHP" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">PHP</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="JavaScript" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">JavaScript</span>
+    </label>
+  </div>
+</div>
+```
+
+## Multiple choices
+
+You can also create a selectgroup with multiple choices. To do this, change the `type` attribute of the input element to `checkbox`.
+
+```html
+<label class="form-selectgroup-item">
+  <input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
+  <span class="form-selectgroup-label">...</span>
+</label>
+```
+
+Look at the example below to see how the multiple choices selectgroup works:
+
+```html example columns={1} centered
+<div>
+  <div class="form-selectgroup">
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked />
+      <span class="form-selectgroup-label">HTML</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">CSS</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">PHP</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">JavaScript</span>
+    </label>
+  </div>
+</div>
+```
+
+## Icon input
+
+To create an icon input, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label. You can use the `.icon` class to style the icon.
+
+```html
+<label class="form-selectgroup-item">
+  <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked />
+  <span class="form-selectgroup-label">
+    <svg class="icon" width="24" height="24">...</svg>
+  </span>
+</label>
+```
+
+We recommend you use Tabler Icons for the best experience. You can find over <IconsCount rounded /> free icons in the [Tabler Icons](https://tabler-icons.io/) library. Just copy the SVG code and paste it into your project.
+
+```html example columns={1} centered
+<div class="mb-3">
+  <label class="form-label">Icon input</label>
+  <div class="form-selectgroup">
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked />
+      <span class="form-selectgroup-label">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon"
+          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="4" />
+          <path
+            d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
+          />
+        </svg>
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="moon" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon"
+          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 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"
+          />
+        </svg>
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon"
+          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="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7" />
+          <path d="M11 13v2m0 3v2m4 -5v2m0 3v2" />
+        </svg>
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon"
+          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="M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 .996c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878"
+          />
+        </svg>
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="Other" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">Other</span>
+    </label>
+  </div>
+</div>
+```
+
+You can also add text to the element. Look at the example below to see how it works:
+
+```html example columns={1} centered
+<div class="mb-3">
+  <label class="form-label">Selectgroup with icons and text</label>
+  <div class="form-selectgroup">
+    <label class="form-selectgroup-item">
+      <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked />
+      <span class="form-selectgroup-label">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon me-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="5 12 3 12 12 3 21 12 19 12" />
+          <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
+          <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
+        </svg>
+        Home
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="icons" value="user" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon me-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" />
+          <circle cx="12" cy="7" r="4" />
+          <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
+        </svg>
+        User
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="icons" value="circle" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon me-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" />
+          <circle cx="12" cy="12" r="9" />
+        </svg>
+        Circle
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="icons" value="square" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="icon me-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" />
+          <rect x="4" y="4" width="16" height="16" rx="2" />
+        </svg>
+        Square
+      </span>
+    </label>
+  </div>
+</div>
+```
+
+## Pill selectgroup
+
+If you want to use pill selectgroup, use the `.form-selectgroup-pills` class. All the other classes are the same as in the simple selectgroup.
+
+```html
+<div class="form-selectgroup form-selectgroup-pills">...</div>
+```
+
+Look at the example below to see how the pill selectgroup works:
+
+```html example columns={1} centered
+<div class="mb-3">
+  <label class="form-label">Different style</label>
+  <div class="form-selectgroup form-selectgroup-pills">
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked />
+      <span class="form-selectgroup-label">HTML</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">CSS</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">PHP</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">JavaScript</span>
+    </label>
+  </div>
+</div>
+```
+
+## Advanced selectboxes
+
+Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons if you want users to select only one option, or with checkboxes if they are allowed to choose multiple options.
+
+```html example height="30rem" centered columns="1" plugins="payments"
+<div class="mb-3">
+  <label class="form-label">Payment method</label>
+  <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
+    <label class="form-selectgroup-item flex-fill">
+      <input type="radio" name="form-payment" value="visa" class="form-selectgroup-input" />
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div>
+          <span class="payment payment-provider-visa payment-xs me-2"></span>
+          ending in <strong>7998</strong>
+        </div>
+      </div>
+    </label>
+    <label class="form-selectgroup-item flex-fill">
+      <input
+        type="radio"
+        name="form-payment"
+        value="mastercard"
+        class="form-selectgroup-input"
+        checked
+      />
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div>
+          <span class="payment payment-provider-mastercard payment-xs me-2"></span>
+          ending in <strong>2807</strong>
+        </div>
+      </div>
+    </label>
+    <label class="form-selectgroup-item flex-fill">
+      <input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input" />
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div>
+          <span class="payment payment-provider-paypal payment-xs me-2"></span>
+        </div>
+      </div>
+    </label>
+  </div>
+</div>
+```
+
+```html
+<label class="form-selectgroup-item flex-fill">
+  <input
+    type="radio"
+    name="form-payment"
+    value="mastercard"
+    class="form-selectgroup-input"
+    checked
+  />
+  <div class="form-selectgroup-label d-flex align-items-center p-3">
+    <div class="me-3">
+      <span class="form-selectgroup-check"></span>
+    </div>
+    <div>
+      <span class="payment payment-provider-mastercard payment-xs me-2"></span>
+      ending in <strong>2807</strong>
+    </div>
+  </div>
+</label>
+```
+

package/docs/ui/forms/form-validation.mdx

@@ -0,0 +1,62 @@
+---
+title: Validation states
+summary: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
+description: Indicate valid or invalid inputs.
+---
+
+## Validation states
+
+To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
+
+To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes.
+
+```html example centered separated columns="1" height="20rem"
+<input type="text" class="form-control is-valid" placeholder="Valid State..." />
+<input type="text" class="form-control is-invalid" placeholder="Invalid State..." />
+```
+
+## Validation feedback
+
+To provide users with additional information about the validation state, you can use the `.valid-feedback` and `.invalid-feedback` classes.
+
+```html
+<input type="text" class="form-control is-valid" placeholder="Valid State..." />
+<div class="valid-feedback">Looks good!</div>
+```
+
+This is how it works in the example below:
+
+```html example centered columns="1" height="20rem"
+<div>
+  <label class="form-label required">City</label>
+  <input type="text" class="form-control is-invalid" required />
+  <div class="invalid-feedback">Please provide a valid city.</div>
+</div>
+```
+
+You can also use the `.valid-feedback` to provide users with positive feedback.
+
+```html example centered columns="1" height="20rem"
+<div>
+  <label class="form-label required">City</label>
+  <input type="text" class="form-control is-valid" value="Warsaw" />
+  <div class="valid-feedback">Looks good!</div>
+</div>
+```
+
+## Subtle validation states
+
+If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and refrain from using colored control frames and the validation feedback.
+
+To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.
+
+```html
+<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
+```
+
+Look how it works in the example below:
+
+```html example centered separated vertical columns="1" height="20rem"
+<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
+<input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />
+```

package/docs/ui/forms/index.mdx

@@ -0,0 +1,6 @@
+---
+title: Forms
+order: 5
+description: Build and manage web forms.
+summary: The forms section provides a collection of components and tools for creating user-friendly and accessible forms, enhancing user interaction and improving data collection.
+---

package/docs/ui/getting-started/browser-support.mdx

@@ -0,0 +1,28 @@
+---
+title: Browser Support
+description: Check browser compatibility for Tabler.
+summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
+---
+
+Tabler is fully optimized for all modern browsers, including the latest versions of Chrome, Firefox, Edge, Safari, and Opera. These browsers ensure a seamless and responsive experience, allowing users to enjoy Tabler's advanced UI components without compatibility issues.
+
+In this latest release, Tabler introduces modern features like CSS Grid, object fit, and sticky positioning, which enhance design flexibility but may not be fully supported on older browsers. While Tabler has dropped most vendor prefixes to streamline its styles, partial support remains for Internet Explorer, with some features potentially limited.
+
+For the best experience, we recommend using one of the latest supported browsers to take full advantage of Tabler’s capabilities and design precision.
+
+## Supported Browsers
+
+Browser|Version
+---|----------
+<img src="/docs/browsers/edge.svg" width="48" height="48" alt="Edge Logo"/>|last 3 versions
+<img src="/docs/browsers/firefox.svg" width="48" height="48" alt="Firefox Logo"/>|last 3 versions, ESR
+<img src="/docs/browsers/chrome.svg" width="48" height="48" alt="Chrome Logo"/>|last 3 versions
+<img src="/docs/browsers/safari.svg" width="48" height="48" alt="Safari Logo"/>|last 3 versions
+<img src="/docs/browsers/opera.svg" width="48" height="48" alt="Opera Logo"/>|last 3 versions
+<img src="/docs/browsers/electron.svg" width="48" height="48" alt="Electron Logo"/>|last 3 versions
+<img src="/docs/browsers/brave.svg" width="48" height="48" alt="Brave Logo"/>|last 3 versions
+<img src="/docs/browsers/vivaldi.svg" width="48" height="48" alt="Vivaldi Logo"/>|last 3 versions
+
+## Internet Explorer
+
+Internet Explorer is not supported.

package/docs/ui/getting-started/customize.mdx

@@ -0,0 +1,28 @@
+---
+title: Customize Tabler
+summary: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
+description: Adjust fonts, colors, and styles.	
+---
+
+## Custom Google Font
+
+To use a custom Google Fonts font in Tabler you must import the font in the `<head>` section of the page. In this example we will use the _Inter_ font:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
+  rel="stylesheet"
+/>
+```
+
+Now you just need to tell Tabler to use your favorite font:
+
+```html
+<style>
+  :root {
+    --tblr-font-sans-serif: "Inter";
+  }
+</style>
+```

package/docs/ui/getting-started/download.mdx

@@ -0,0 +1,44 @@
+---
+title: Download
+summary: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
+description: Get Tabler CSS, JS, and source code.
+---
+
+## CDN via jsDelivr
+
+All files included in the `@tabler/core` npm package are available over a jsDelivr CDN. Use it to deliver cached versions of Tabler’s compiled CSS and JS to your project.
+
+```html
+<script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css" />
+```
+
+You can also include additional Tabler plugins:
+
+```html
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-flags.min.css" />
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-payments.min.css" />
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-social.min.css" />
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-vendors.min.css" />
+```
+
+## Package managers
+
+Install Tabler in your Node.js powered apps with the npm package:
+
+<TabsPackage name="@tabler/core" />
+
+Tabler uses other packages to enhance its functionality - for example, charts and input masks. These are not automatically installed to avoid huge
+dependency trees and need to be installed by using npm install. We support the following packages as of writing.
+
+- [apexcharts](https://apexcharts.com/)
+- [autosize](http://www.jacklmoore.com/autosize/)
+- [choices.js](https://github.com/Choices-js/Choices)
+- [countup.js](https://inorganik.github.io/countUp.js/)
+- [flatpickr](https://flatpickr.js.org/)
+- [imask](https://imask.js.org/)
+- [litepicker](https://litepicker.com/)
+- [nouislider](https://refreshless.com/nouislider/)
+- [tom-select](https://tom-select.js.org/)
+
+For the complete list of supported packages you can check the peerDependencies section in our [package.json](https://github.com/tabler/tabler/blob/dev/package.json)

package/docs/ui/getting-started/faq.mdx

@@ -0,0 +1,30 @@
+---
+title: FAQ
+summary: Answers to the most frequently asked questions.
+description: Common questions and answers.
+order: 12
+---
+
+## I found an issue, what can I do?
+
+If you think you have found an issue that can only be fixed by the maintainers, feel free to open an issue on [GitHub](https://github.com/tabler/tabler).
+
+## Will there be a version for Vue or React?
+
+We are evaluating adding support for Vue 3 and React to all of our components, but it is not a top priority at the moment.
+
+## Can I use Tabler in open source projects?
+
+Yes, absolutely.
+
+## Can I use Tabler in commercial projects?
+
+Of course! Tabler is under MIT license, so you can confidently use it in commercial projects. However, remember to include a note that your project uses Tabler. You can read about our license here: [License](/license)
+
+## Can Tabler be used with WordPress?
+
+Tabler is an HTML template that can be used for any purpose. However, it is not made to be easily installed on WordPress. It will require some effort and enough knowledge of the WordPress script to do so.
+
+## How do I get notified of new Tabler versions?
+
+You may watch the releases on GitHub or follow me on Twitter.