@tabler/core 1.0.0-beta20 → 1.0.0-beta21

package/docs/menu.json

@@ -0,0 +1,317 @@
+[
+  {
+    "title": "Getting started",
+    "items": [
+      {
+        "title": "Introduction",
+        "href": "/docs/getting-started"
+      },
+      {
+        "title": "Browser Support",
+        "href": "/docs/getting-started/browser-support"
+      },
+      {
+        "title": "Customize Tabler",
+        "href": "/docs/getting-started/customize"
+      },
+      {
+        "title": "Download",
+        "href": "/docs/getting-started/download"
+      },
+      {
+        "title": "FAQ",
+        "href": "/docs/getting-started/faq"
+      }
+    ]
+  },
+  {
+    "title": "Base",
+    "items": [
+      {
+        "title": "Colors",
+        "label": "new",
+        "href": "/docs/base/colors"
+      },
+      {
+        "title": "Typography",
+        "href": "/docs/base/typography"
+      }
+    ]
+  },
+  {
+    "title": "Layout",
+    "items": [
+      {
+        "title": "Page layouts",
+        "label": "new",
+        "href": "/docs/layout/page-layouts"
+      },
+      {
+        "title": "Page headers",
+        "href": "/docs/layout/page-headers"
+      }
+    ]
+  },
+  {
+    "title": "Components",
+    "items": [
+      {
+        "title": "Alerts",
+        "href": "/docs/components/alerts"
+      },
+      {
+        "title": "Autosize",
+        "href": "/docs/components/autosize"
+      },
+      {
+        "title": "Avatars",
+        "href": "/docs/components/avatars"
+      },
+      {
+        "title": "Badges",
+        "href": "/docs/components/badges"
+      },
+      {
+        "title": "Breadcrumb",
+        "href": "/docs/components/breadcrumb"
+      },
+      {
+        "title": "Buttons",
+        "href": "/docs/components/buttons"
+      },
+      {
+        "title": "Cards",
+        "href": "/docs/components/cards"
+      },
+      {
+        "title": "Carousel",
+        "href": "/docs/components/carousel"
+      },
+      {
+        "title": "Charts",
+        "href": "/docs/components/charts"
+      },
+      {
+        "title": "Datagrid",
+        "href": "/docs/components/datagrid"
+      },
+      {
+        "title": "Divider",
+        "href": "/docs/components/divider"
+      },
+      {
+        "title": "Dropdowns",
+        "href": "/docs/components/dropdowns"
+      },
+      {
+        "title": "Dropzone",
+        "href": "/docs/components/dropzone"
+      },
+      {
+        "title": "Empty",
+        "href": "/docs/components/empty"
+      },
+      {
+        "title": "Icons",
+        "href": "/docs/components/icons"
+      },
+      {
+        "title": "Inline Player",
+        "href": "/docs/components/inline-player"
+      },
+      {
+        "title": "Modals",
+        "href": "/docs/components/modals"
+      },
+      {
+        "title": "Placeholder",
+        "href": "/docs/components/placeholder"
+      },
+      {
+        "title": "Popover",
+        "href": "/docs/components/popover"
+      },
+      {
+        "title": "Progress",
+        "href": "/docs/components/progress"
+      },
+      {
+        "title": "Progress background",
+        "href": "/docs/components/progressbg"
+      },
+      {
+        "title": "Range slider",
+        "href": "/docs/components/range-slider"
+      },
+      {
+        "title": "Ribbons",
+        "href": "/docs/components/ribbons"
+      },
+      {
+        "title": "Spinners",
+        "href": "/docs/components/spinners"
+      },
+      {
+        "title": "Statuses",
+        "href": "/docs/components/statuses"
+      },
+      {
+        "title": "Steps",
+        "href": "/docs/components/steps"
+      },
+      {
+        "title": "Switch icon",
+        "href": "/docs/components/switch-icon"
+      },
+      {
+        "title": "Tables",
+        "href": "/docs/components/tables"
+      },
+      {
+        "title": "Tabs",
+        "href": "/docs/components/tabs"
+      },
+      {
+        "title": "Timelines",
+        "href": "/docs/components/timelines"
+      },
+      {
+        "title": "Tinymce",
+        "href": "/docs/components/tinymce"
+      },
+      {
+        "title": "Toasts",
+        "href": "/docs/components/toasts"
+      },
+      {
+        "title": "Tooltips",
+        "href": "/docs/components/tooltips"
+      },
+      {
+        "title": "Tracking",
+        "href": "/docs/components/tracking"
+      }
+    ]
+  },
+  {
+    "title": "Forms",
+    "items": [
+      {
+        "title": "Base elements",
+        "href": "/docs/forms/form-elements"
+      },
+      {
+        "title": "Fieldset",
+        "href": "/docs/forms/form-fieldset"
+      },
+      {
+        "title": "Color check",
+        "href": "/docs/forms/form-color-check"
+      },
+      {
+        "title": "Image check",
+        "href": "/docs/forms/form-image-check"
+      },
+      {
+        "title": "Selectbox",
+        "href": "/docs/forms/form-selectboxes"
+      },
+      {
+        "title": "Validation",
+        "href": "/docs/forms/form-validation"
+      },
+      {
+        "title": "Input mask",
+        "href": "/docs/forms/form-input-mask"
+      },
+      {
+        "title": "Form helpers",
+        "href": "/docs/forms/form-helpers"
+      }
+    ]
+  },
+  {
+    "title": "Plugins",
+    "items": [
+      {
+        "title": "Flags",
+        "href": "/docs/plugins/flags"
+      },
+      {
+        "title": "Payments",
+        "href": "/docs/plugins/payments"
+      }
+    ]
+  },
+  {
+    "title": "Utilities",
+    "items": [
+      {
+        "title": "Borders",
+        "href": "/docs/utilities/borders"
+      },
+      {
+        "title": "Cursors",
+        "href": "/docs/utilities/cursors"
+      },
+      {
+        "title": "Interactions",
+        "href": "/docs/utilities/interactions"
+      }
+    ]
+  },
+  {
+    "title": "Tabler Icons",
+    "items": [
+      {
+        "title": "Introduction",
+        "href": "/docs/icons",
+        "label": "new"
+      },
+      {
+        "title": "SVG version",
+        "href": "/docs/icons/svg"
+      },
+      {
+        "title": "React plugin",
+        "href": "/docs/icons/react"
+      },
+      {
+        "title": "Preact plugin",
+        "href": "/docs/icons/preact"
+      },
+      {
+        "title": "Vue plugin",
+        "href": "/docs/icons/vue"
+      },
+      {
+        "title": "SolidJS plugin",
+        "href": "/docs/icons/solidjs"
+      },
+      {
+        "title": "Svelte plugin",
+        "href": "/docs/icons/svelte"
+      },
+      {
+        "title": "Figma plugin",
+        "href": "/docs/icons/figma"
+      },
+      {
+        "title": "PNG version",
+        "href": "/docs/icons/png"
+      },
+      {
+        "title": "PDF version",
+        "href": "/docs/icons/pdf"
+      },
+      {
+        "title": "EPS version",
+        "href": "/docs/icons/eps"
+      },
+      {
+        "title": "Webfont version",
+        "href": "/docs/icons/webfont"
+      }
+    ]
+  }
+]

package/docs/plugins/flags.mdx

@@ -0,0 +1,52 @@
+---
+title: Flags
+description: Thanks to the Tabler flags plugin, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.
+plugin: flags
+libs: tabler-flags
+---
+
+## Installation
+
+This part of Tabler is distributed as plugin. To enable it you should include `tabler-flags.css` or `tabler-flags.min.css` file to your page.
+
+You can also include plugin via CDN:
+
+```html
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-flags.min.css">
+```
+
+## Flag
+
+To create a flag, add the `flag` class to a component and choose the country whose flag you want to use. The full list of countries can be found below.
+
+```html code example centered separated plugins="flags"
+<span class="flag flag-country-tg"></span>
+<span class="flag flag-country-br"></span>
+<span class="flag flag-country-pt"></span>
+```
+
+## Flag sizes
+
+Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up or down to different sizes based on what’s needed.
+
+```html example centered separated plugins="flags"
+<span class="flag flag-xl flag-country-us"></span>
+<span class="flag flag-lg flag-country-us"></span>
+<span class="flag flag-md flag-country-us"></span>
+<span class="flag flag-sm flag-country-us"></span>
+<span class="flag flag-xs flag-country-us"></span>
+```
+
+```html
+<span class="flag flag-xl ..."></span>
+<span class="flag flag-lg ..."></span>
+<span class="flag flag-md ..."></span>
+<span class="flag flag-sm ..."></span>
+<span class="flag flag-xs ..."></span>
+```
+
+## Types
+
+To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra should use the following class: `.flag-country-ad`.
+
+<FlagsTable />

package/docs/plugins/payments.mdx

@@ -0,0 +1,43 @@
+---
+title: Payments
+description: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.
+plugin: payments
+---
+
+## Installation
+
+This part of Tabler is distributed as plugin. To enable it you should include `tabler-payments.css` or `tabler-payments.min.css` file to your page.
+
+You can also include plugin via CDN:
+
+```html
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-payments.min.css">
+```
+
+## Payment
+
+To create a payment provider icon, add the `payment` class to a component and specify the payment provider. The full list of payment providers can be found below.
+
+```html example code plugins="payments" separated centered
+<span class="payment payment-provider-shopify"></span>
+<span class="payment payment-provider-visa"></span>
+<span class="payment payment-provider-paypal"></span>
+```
+
+## Payment sizes
+
+Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up or down to different sizes based on what’s needed.
+
+```html example code plugins="payments" separated centered
+<span class="payment payment-xl payment-provider-shopify"></span>
+<span class="payment payment-lg payment-provider-visa"></span>
+<span class="payment payment-md payment-provider-paypal"></span>
+<span class="payment payment-sm payment-provider-amazon"></span>
+<span class="payment payment-xs payment-provider-blik"></span>
+```
+
+## List of available payment providers
+
+Select an icon from the list of payment providers. Each icon comes in two color variants - light and dark, so you can choose the one that goes well with your design.
+
+<PaymentsTable />

package/docs/utilities/borders.mdx

@@ -0,0 +1,114 @@
+---
+title: Borders
+description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
+---
+
+## Border direction
+
+The following border utilities classes will add border to any side of an element.
+
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-top">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-end">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-bottom">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-start">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-x">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-y">7</div>
+```
+
+```html
+<div class="border">1</div>
+<div class="border-top">2</div>
+<div class="border-end">3</div>
+<div class="border-bottom">4</div>
+<div class="border-start">5</div>
+<div class="border-x">6</div>
+<div class="border-y">7</div>
+```
+
+## Border size
+
+Below are the available border size utilities classes.
+
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide">3</div>
+```
+
+```html
+<div class="border-0">1</div>
+<div class="border">2</div>
+<div class="border-wide">3</div>
+```
+
+## Remove border
+
+You can remove a border on a single side of an element by using the following border utilities classes.
+
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-top-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-end-0">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-bottom-0">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-start-0">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-x-0">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-y-0">6</div>
+```
+
+```html
+<div class="border border-top-0">1</div>
+<div class="border border-end-0">2</div>
+<div class="border border-bottom-0">3</div>
+<div class="border border-start-0">4</div>
+<div class="border border-x-0">5</div>
+<div class="border border-y-0">6</div>
+```
+
+## Border color
+
+You can set a border color of any side of an element by adding the following utilities classes below.
+
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark">7</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light">8</div>
+```
+
+```html
+<div class="border border-primary">1</div>
+<div class="border border-secondary">2</div>
+<div class="border border-success">3</div>
+<div class="border border-warning">4</div>
+<div class="border border-danger">5</div>
+<div class="border border-info">6</div>
+<div class="border border-dark">7</div>
+<div class="border border-light">8</div>
+```
+
+## Border radius
+
+You can set a border to any element by using the following utilities classes below.
+
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-1">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-2">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-3">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-circle">6</div>
+```
+
+```html
+<div class="border rounded-0">1</div>
+<div class="border rounded">2</div>
+<div class="border rounded-1">3</div>
+<div class="border rounded-2">4</div>
+<div class="border rounded-3">5</div>
+<div class="border rounded-circle">6</div>
+```

package/docs/utilities/cursors.mdx

@@ -0,0 +1,92 @@
+---
+title: Cursors
+description: You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.
+---
+
+## Cursor utilities
+
+Use one of the available cursor utilities depending on the action you want to indicate.
+
+- `.cursor-auto`- the cursor style depends on what's inside a given element
+- `.cursor-pointer` - a pointing cursor, used to show that an element is clickable
+- `.cursor-move` - a cursor which shows that a given element can be moved
+- `.cursor-not-allowed` - a cursor which shows that a user is not allowed to perform an action on an element
+- `.cursor-zoom-in` - a cursor which shows that a user can zoom in
+- `.cursor-zoom-out` - a cursor which shows that a user can zoom out
+- `.cursor-default` - the default cursor
+- `.cursor-none` - no cursor
+- `.cursor-help` - a cursor which shows that help information is available
+- `.cursor-progress` - a cursor which shows that an action is in progress
+- `.cursor-wait` - a cursor which shows that a user cannot interact with the element because it is busy
+- `.cursor-text` - a cursor which shows that a user can type
+- `.cursor-v-text` - a cursor which shows that a user can type in a vertical text input
+- `.cursor-grab` - a cursor which shows that a user can grab an element
+- `.cursor-grabbing` - a cursor which shows that a user is grabbing an element
+
+```html example background="white" height="20rem" vcentered
+<div class="row row-cards text-center">
+  <div class="col-2">
+    <div class="cursor-auto bg-light py-3">auto</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-pointer bg-light py-3">pointer</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-move bg-light py-3">move</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-not-allowed bg-light py-3">not-allowed</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-zoom-in bg-light py-3">zoom-in</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-zoom-out bg-light py-3">zoom-out</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-default bg-light py-3">default</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-none bg-light py-3">none</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-help bg-light py-3">help</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-progress bg-light py-3">progress</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-wait bg-light py-3">wait</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-text bg-light py-3">text</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-v-text bg-light py-3">vertical-text</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-grab bg-light py-3">grab</div>
+  </div>
+  <div class="col-2">
+    <div class="cursor-grabbing bg-light py-3">grabbing</div>
+  </div>
+</div>
+```
+
+```html
+<div class="cursor-auto">auto</div>
+<div class="cursor-pointer">pointer</div>
+<div class="cursor-move">move</div>
+<div class="cursor-not-allowed">not-allowed</div>
+<div class="cursor-zoom-in">zoom-in</div>
+<div class="cursor-zoom-out">zoom-out</div>
+<div class="cursor-default">default</div>
+<div class="cursor-none">none</div>
+<div class="cursor-help">help</div>
+<div class="cursor-progress">progress</div>
+<div class="cursor-wait">wait</div>
+<div class="cursor-text">text</div>
+<div class="cursor-v-text">vertical-text</div>
+<div class="cursor-grab">grab</div>
+<div class="cursor-grabbing">grabbing</div>
+```

package/docs/utilities/interactions.mdx

@@ -0,0 +1,23 @@
+---
+title: Interactions
+description: Utility classes that change how users interact with contents of a website.
+---
+
+## Text selection
+
+Change the way in which the content is selected when the user interacts with it.
+
+```html code example
+<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
+<p class="user-select-auto">This paragraph has default select behavior.</p>
+<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
+```
+
+## Pointer events
+
+Tabler provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions.
+
+```html code example
+<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
+<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
+```