@tabler/core 1.1.1 → 1.2.0

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

@@ -1,91 +0,0 @@
----
-title: Form helpers
-summary: Use form helpers to provide additional information about a form element. You can use input help, required field, form hint, and additional info inside the label.
-description: Provide additional guidance in forms.
----
-
-## Input help
-
-Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. To add an input helper, use the `.form-help` class.
-
-```html
-<span
-  class="form-help"
-  data-bs-toggle="popover"
-  data-bs-placement="top"
-  data-bs-html="true"
-  data-bs-content="<p>...</p>"
-  >?</span
->
-```
-
-Look at the example below to see how the input help works:
-
-```html example centered height="25rem" columns={1}
-<div>
-  <label class="form-label">
-    ZIP Code
-    <span
-      class="form-help"
-      data-bs-toggle="popover"
-      data-bs-placement="top"
-      data-bs-html="true"
-      data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>"
-      >?</span
-    >
-  </label>
-  <input type="text" class="form-control" placeholder="Your ZIP Code" />
-</div>
-```
-
-## Required field
-
-Use the `.required` class to indicate that a field is required. It will add a red asterisk to the label.
-
-```html
-<label class="form-label required">Required</label>
-```
-
-Look at the example below to see how the required field works:
-
-```html example centered columns={1}
-<div>
-  <label class="form-label required">Required</label>
-  <input type="text" class="form-control" name="..." placeholder="Required..." />
-</div>
-```
-
-## Form hint
-
-Use a form hint to provide users with additional information about a form element. The text will appear below the input field. To add a form hint, use the `.form-hint` class.
-
-```html
-<div class="form-hint">We'll never share your email with anyone else.</div>
-```
-
-Look at the example below to see how the form hint works:
-
-```html example centered columns={1}
-<div>
-  <label class="form-label">Email address</label>
-  <input type="email" class="form-control" placeholder="Enter your email address" />
-  <div class="form-hint">We'll never share your email with anyone else.</div>
-</div>
-```
-
-## Additional info inside label
-
-Use the `.form-label-description` class to add additional information to the label. The text will appear next to the label. You can use it to add for example a character counter.
-
-```html
-<label class="form-label">Textarea <span class="form-label-description">56/100</span> </label>
-```
-
-This example shows how to use the additional info inside the label:
-
-```html example centered columns={1} height="15rem"
-<div>
-  <label class="form-label">Textarea <span class="form-label-description">56/100</span> </label>
-  <textarea class="form-control" name="" rows="3" placeholder="Content.."></textarea>
-</div>
-```

package/docs/ui/forms/form-image-check.mdx

@@ -1,213 +0,0 @@
----
-title: Image check
-summary: The image check is a great way to make your form more user-friendly and engaging. You can use the image check to create a visually appealing form that will help users make decisions quickly and easily.
-description: Add visual appeal to forms with images.
----
-
-## Default markup
-
-To build an image check, you need to use the `.form-imagecheck` class and the `.form-imagecheck-input` class for the input element. You can also use the `.form-imagecheck-figure` class to display the custom checkbox and the `.form-imagecheck-image` class to style the image itself.
-
-```html
-<label class="form-imagecheck">
-  <input name="..." type="checkbox" value="" class="form-imagecheck-input" checked />
-  <span class="form-imagecheck-figure">
-    <img src="..." alt="" class="form-imagecheck-image" />
-  </span>
-</label>
-```
-
-Look at the examples below to see how the image check works:
-
-```html example centered columns="2" height="15rem"
-<div class="mb-3">
-  <label class="form-label">Image Check</label>
-  <div class="row g-2">
-    <div class="col-3">
-      <label class="form-imagecheck">
-        <input name="image" type="checkbox" value="1" class="form-imagecheck-input" />
-        <span class="form-imagecheck-figure">
-          <img
-            src="/samples/photos/everything-you-need-to-work-from-your-bed-2.jpg"
-            alt=""
-            class="form-imagecheck-image"
-          />
-        </span>
-      </label>
-    </div>
-    <div class="col-3">
-      <label class="form-imagecheck">
-        <input name="image" type="checkbox" value="2" class="form-imagecheck-input" checked />
-        <span class="form-imagecheck-figure">
-          <img
-            src="/samples/photos/color-palette-guide-sample-colors-catalog-.jpg"
-            alt=""
-            class="form-imagecheck-image"
-          />
-        </span>
-      </label>
-    </div>
-    <div class="col-3">
-      <label class="form-imagecheck">
-        <input name="image" type="checkbox" value="3" class="form-imagecheck-input" />
-        <span class="form-imagecheck-figure">
-          <img
-            src="/samples/photos/woman-read-book-and-drink-coffee-2.jpg"
-            alt=""
-            class="form-imagecheck-image"
-          />
-        </span>
-      </label>
-    </div>
-    <div class="col-3">
-      <label class="form-imagecheck">
-        <input name="image" type="checkbox" value="4" class="form-imagecheck-input" checked />
-        <span class="form-imagecheck-figure">
-          <img
-            src="/samples/photos/stylish-workspace-with-macbook-pro-2.jpg"
-            alt=""
-            class="form-imagecheck-image"
-          />
-        </span>
-      </label>
-    </div>
-  </div>
-</div>
-```
-
-## Radio buttons
-
-If you want to use the image check as a radio button, you can change the input type to `radio`. 
-
-```html example centered columns="2" height="15rem"
-<div class="mb-3">
-  <label class="form-label">Image Check Radio</label>
-  <div class="row g-2">
-    <div class="col-3">
-      <label class="form-imagecheck mb-2">
-        <input name="image" type="radio" value="1" class="form-imagecheck-input" />
-        <span class="form-imagecheck-figure">
-          <img
-            src="/samples/photos/woman-drinking-hot-tea-in-her-home-office.jpg"
-            alt=""
-            class="form-imagecheck-image"
-          />
-        </span>
-      </label>
-    </div>
-    <div class="col-3">
-      <label class="form-imagecheck mb-2">
-        <input name="image" type="radio" value="2" class="form-imagecheck-input" checked />
-        <span class="form-imagecheck-figure">
-          <img
-            src="/samples/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-3.jpg"
-            alt=""
-            class="form-imagecheck-image"
-          />
-        </span>
-      </label>
-    </div>
-    <div class="col-3">
-      <label class="form-imagecheck mb-2">
-        <input name="image" type="radio" value="3" class="form-imagecheck-input" />
-        <span class="form-imagecheck-figure">
-          <img
-            src="/samples/photos/beautiful-blonde-woman-relaxing-with-a-can-of-coke-on-a-tree-stump-by-the-beach.jpg"
-            alt=""
-            class="form-imagecheck-image"
-          />
-        </span>
-      </label>
-    </div>
-    <div class="col-3">
-      <label class="form-imagecheck mb-2">
-        <input name="image" type="radio" value="4" class="form-imagecheck-input" checked />
-        <span class="form-imagecheck-figure">
-          <img src="/samples/photos/book-on-the-grass.jpg" alt="" class="form-imagecheck-image" />
-        </span>
-      </label>
-    </div>
-  </div>
-</div>
-```
-
-```html
-<label class="form-imagecheck">
-  <input name="..." type="radio" value="1" class="form-imagecheck-input" />
-  <span class="form-imagecheck-figure">
-    <img src="..." alt="" class="form-imagecheck-image" />
-  </span>
-</label>
-```
-
-## Avatars
-
-If you want to use the image check with avatars, you can use an [avatar component](/docs/ui/components/avatars) instead of an image.
-
-```html example centered columns={2} height="15rem"
-<div class="mb-3">
-  <label class="form-label">Person Check</label>
-  <div class="row g-2">
-    <div class="col-auto">
-      <label class="form-imagecheck mb-2">
-        <input name="image" type="checkbox" value="1" class="form-imagecheck-input" />
-        <span class="form-imagecheck-figure">
-          <span class="form-imagecheck-image">
-            <span
-              class="avatar avatar-xl"
-              style="background-image: url(/samples/avatars/057f.jpg)"
-            ></span>
-          </span>
-        </span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-imagecheck mb-2">
-        <input name="image" type="checkbox" value="2" class="form-imagecheck-input" checked />
-        <span class="form-imagecheck-figure">
-          <span class="form-imagecheck-image">
-            <span class="avatar avatar-xl">HS</span>
-          </span>
-        </span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-imagecheck mb-2">
-        <input name="image" type="checkbox" value="3" class="form-imagecheck-input" />
-        <span class="form-imagecheck-figure">
-          <span class="form-imagecheck-image">
-            <span
-              class="avatar avatar-xl"
-              style="background-image: url(/samples/avatars/062m.jpg)"
-            ></span>
-          </span>
-        </span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-imagecheck mb-2">
-        <input name="image" type="checkbox" value="4" class="form-imagecheck-input" checked />
-        <span class="form-imagecheck-figure">
-          <span class="form-imagecheck-image">
-            <span
-              class="avatar avatar-xl"
-              style="background-image: url(/samples/avatars/070m.jpg)"
-            ></span>
-          </span>
-        </span>
-      </label>
-    </div>
-  </div>
-</div>
-```
-
-```html
-<label class="form-imagecheck">
-  <input name="..." type="checkbox" value="..." class="form-imagecheck-input" />
-  <span class="form-imagecheck-figure">
-    <span class="form-imagecheck-image">
-      <span class="avatar avatar-md" style="background-image: url(...)"></span>
-    </span>
-  </span>
-</label>
-```

package/docs/ui/forms/form-input-mask.mdx

@@ -1,61 +0,0 @@
----
-title: Input mask
-summary: An input mask is used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
-description: Clarify input formats for users.
----
-
-## Installation
-
-To be able to use the input mask in your application you will need to install the imask dependency. You can do this by running the following command:
-
-<TabsPackage name="imask" />
-
-And import or require:
-
-```javascript
-import IMask from 'imask';
-```
-
-You can also use the CDN link to include the script in your project:
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/imask"></script>
-```
-
-If you struggle with the installation, you can find more information in the [IMask documentation](https://imask.js.org/guide.html#installation).
-
-## Default markup
-
-Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.
-
-To create an input mask, add the `data-mask` attribute to the input element:
-
-```html
-<input
-  type="text"
-  name="input-mask"
-  class="form-control"
-  data-mask="(00) 0000-0000"
-  placeholder="(00) 0000-0000"
-  autocomplete="off"
-/>
-```
-
-Look at the example below to see how the input mask works:
-
-```html example centered columns={1}
-<label class="form-label">Telephone mask</label>
-<input
-  type="text"
-  name="input-mask"
-  class="form-control"
-  data-mask="(00) 0000-0000"
-  data-mask-visible="true"
-  placeholder="(00) 0000-0000"
-  autocomplete="off"
-/>
-```
-
-## More examples
-
-If you need more examples of input masks, you can find them in the [IMask documentation](https://imask.js.org/guide.html#masked-input).