@tabler/core 1.0.0-beta22 → 1.0.0-beta23

package/docs/ui/plugins/payments.mdx

@@ -1,7 +1,8 @@
 ---
 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.
+summary: 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
+description: User-friendly payment provider icons.
 ---
 
 ## Installation
@@ -18,7 +19,7 @@ You can also include plugin via CDN:
 
 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
+```html example plugins="payments" separated centered background="bg-light"
 <span class="payment payment-provider-shopify"></span>
 <span class="payment payment-provider-visa"></span>
 <span class="payment payment-provider-paypal"></span>
@@ -28,7 +29,7 @@ To create a payment provider icon, add the `payment` class to a component and sp
 
 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
+```html example plugins="payments" separated centered background="bg-light"
 <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>
@@ -40,4 +41,107 @@ Using Bootstrap’s typical naming structure, you can create a standard payment,
 
 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 />
+<PaymentsTable providers={[
+	{ "name": "2c2p", "code": "2c2p" },
+  { "name": "2checkout", "code": "2checkout" },
+  { "name": "Adyen", "code": "adyen" },
+  { "name": "Affirm", "code": "affirm" },
+  { "name": "Alipay Plus", "code": "alipay-plus" },
+  { "name": "Alipay", "code": "alipay" },
+  { "name": "Allegro Pay", "code": "allegro-pay" },
+  { "name": "Amazon Pay", "code": "amazon-pay" },
+  { "name": "Amazon", "code": "amazon" },
+  { "name": "American Express", "code": "americanexpress" },
+  { "name": "Apple Pay", "code": "applepay" },
+  { "name": "Authorize", "code": "authorize" },
+  { "name": "Autopay", "code": "autopay" },
+  { "name": "Bancontact", "code": "bancontact" },
+  { "name": "Binance USD", "code": "binance-usd" },
+  { "name": "Bitcoin", "code": "bitcoin" },
+  { "name": "BitPay", "code": "bitpay" },
+  { "name": "Bkash", "code": "bkash" },
+  { "name": "Blik", "code": "blik" },
+  { "name": "Braintree", "code": "braintree" },
+  { "name": "Cash App", "code": "cash-app" },
+  { "name": "Chime", "code": "chime" },
+  { "name": "Cirrus", "code": "cirrus" },
+  { "name": "ClickandBuy", "code": "clickandbuy" },
+  { "name": "Coinkite", "code": "coinkite" },
+  { "name": "Diners Club", "code": "dinersclub" },
+  { "name": "Direct Debit", "code": "directdebit" },
+  { "name": "Discover", "code": "discover" },
+  { "name": "Dotpay", "code": "dotpay" },
+  { "name": "Dwolla", "code": "dwolla" },
+  { "name": "EasyPaisa", "code": "easypaisa" },
+  { "name": "eBay", "code": "ebay" },
+  { "name": "Elo", "code": "elo" },
+  { "name": "ePayco", "code": "epayco" },
+  { "name": "Ethereum", "code": "ethereum" },
+  { "name": "eWay", "code": "eway" },
+  { "name": "Giropay", "code": "giropay" },
+  { "name": "Google Pay", "code": "google-pay" },
+  { "name": "Google Wallet", "code": "googlewallet" },
+  { "name": "HubSpot", "code": "hubspot" },
+  { "name": "Ingenico", "code": "ingenico" },
+  { "name": "iDeal", "code": "ideal" },
+  { "name": "JCB", "code": "jcb" },
+  { "name": "Klarna", "code": "klarna" },
+  { "name": "Laser", "code": "laser" },
+  { "name": "Litecoin", "code": "litecoin" },
+  { "name": "Maestro", "code": "maestro" },
+  { "name": "Mastercard", "code": "mastercard" },
+  { "name": "Mercado Pago", "code": "mercado-pago" },
+  { "name": "MetaMask", "code": "metamask" },
+  { "name": "MIR", "code": "mir" },
+  { "name": "Monero", "code": "monero" },
+  { "name": "MoneyGram", "code": "moneygram" },
+  { "name": "Neteller", "code": "neteller" },
+  { "name": "Ogone", "code": "ogone" },
+  { "name": "OKPay", "code": "okpay" },
+  { "name": "OpenSea", "code": "opensea" },
+  { "name": "Paybox", "code": "paybox" },
+  { "name": "Payconiq", "code": "payconiq" },
+  { "name": "Payka", "code": "payka" },
+  { "name": "Payline", "code": "payline" },
+  { "name": "Paymill", "code": "paymill" },
+  { "name": "Payone", "code": "payone" },
+  { "name": "Payoneer", "code": "payoneer" },
+  { "name": "PayPal", "code": "paypal" },
+  { "name": "PayPo", "code": "paypo" },
+  { "name": "Paysafe", "code": "paysafe" },
+  { "name": "Paysafecard", "code": "paysafecard" },
+  { "name": "PayU", "code": "payu" },
+  { "name": "Payza", "code": "payza" },
+  { "name": "Poli", "code": "poli" },
+  { "name": "Przelewy24", "code": "przelewy24" },
+  { "name": "Revolut Pay", "code": "revolut-pay" },
+  { "name": "Ripple", "code": "ripple" },
+  { "name": "Sage", "code": "sage" },
+  { "name": "Samsung Pay", "code": "samsung-pay" },
+  { "name": "SEPA", "code": "sepa" },
+  { "name": "Shop Pay", "code": "shop-pay" },
+  { "name": "Shopify", "code": "shopify" },
+  { "name": "Skrill", "code": "skrill" },
+  { "name": "Solana", "code": "solana" },
+  { "name": "Solo", "code": "solo" },
+  { "name": "Spingo", "code": "spingo" },
+  { "name": "Square", "code": "square" },
+  { "name": "Stax", "code": "stax" },
+  { "name": "Stripe", "code": "stripe" },
+  { "name": "Switch", "code": "switch" },
+  { "name": "Tether", "code": "tether" },
+  { "name": "Tpay", "code": "tpay" },
+  { "name": "True USD", "code": "true-usd" },
+  { "name": "Ukash", "code": "ukash" },
+  { "name": "UnionPay", "code": "unionpay" },
+  { "name": "Venmo", "code": "venmo" },
+  { "name": "Verifone", "code": "verifone" },
+  { "name": "Verisign", "code": "verisign" },
+  { "name": "Visa", "code": "visa" },
+  { "name": "WeChat Pay", "code": "we-chat-pay" },
+  { "name": "WebMoney", "code": "webmoney" },
+  { "name": "Western Union", "code": "westernunion" },
+  { "name": "Wise", "code": "wise" },
+  { "name": "Worldpay", "code": "worldpay" },
+  { "name": "Zelle", "code": "zelle" }
+]}/>

package/docs/ui/plugins/social-icons.mdx

@@ -0,0 +1,135 @@
+---
+title: Social Icons
+summary: Social icons are a great way to make your website more engaging and user-friendly. You can use social icons to help users quickly find your social media profiles and connect with you.
+plugin: socials
+libs: tabler-socials
+description: Connect users to your social profiles.
+---
+
+## Installation
+
+This part of Tabler is distributed as plugin. To enable it you should include `tabler-socials.css` or `tabler-socials.min.css` file to your page.
+
+You can also include plugin via CDN:
+
+```html
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-socials.min.css">
+```
+
+## Social icons
+
+To create a social icon, add the `social` class to a component and choose the country whose flag you want to use. 
+
+```html example centered separated plugins="socials"
+<span class="social social-app-facebook"></span>
+<span class="social social-app-x"></span>
+<span class="social social-app-instagram"></span>
+```
+
+## Social apps list
+
+Here is a list of all available social apps:
+
+<SocialsTable apps={[
+  {
+    "name": "Apple",
+    "file": "apple"
+  },
+  {
+    "name": "Discord",
+    "file": "discord"
+  },
+  {
+    "name": "Dribbble",
+    "file": "dribbble"
+  },
+  {
+    "name": "Facebook",
+    "file": "facebook"
+  },
+  {
+    "name": "Figma",
+    "file": "figma"
+  },
+  {
+    "name": "GitHub",
+    "file": "github"
+  },
+  {
+    "name": "Google",
+    "file": "google"
+  },
+  {
+    "name": "Instagram",
+    "file": "instagram"
+  },
+  {
+    "name": "LinkedIn",
+    "file": "linkedin"
+  },
+  {
+    "name": "Medium",
+    "file": "medium"
+  },
+  {
+    "name": "Meta",
+    "file": "meta"
+  },
+  {
+    "name": "MetaMask",
+    "file": "metamask"
+  },
+  {
+    "name": "Pinterest",
+    "file": "pinterest"
+  },
+  {
+    "name": "Reddit",
+    "file": "reddit"
+  },
+  {
+    "name": "Signal",
+    "file": "signal"
+  },
+  {
+    "name": "Skype",
+    "file": "skype"
+  },
+  {
+    "name": "Snapchat",
+    "file": "snapchat"
+  },
+  {
+    "name": "Spotify",
+    "file": "spotify"
+  },
+  {
+    "name": "Telegram",
+    "file": "telegram"
+  },
+  {
+    "name": "TikTok",
+    "file": "tiktok"
+  },
+  {
+    "name": "Tumblr",
+    "file": "tumblr"
+  },
+  {
+    "name": "Twitch",
+    "file": "twitch"
+  },
+  {
+    "name": "VK",
+    "file": "vk"
+  },
+  {
+    "name": "X (Twitter)",
+    "file": "x"
+  },
+  {
+    "name": "YouTube",
+    "file": "youtube"
+  }
+]} />
+

package/docs/ui/utilities/borders.mdx

@@ -1,6 +1,7 @@
 ---
 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.
+summary: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
+description: Style elements with border utilities.
 ---
 
 ## Border direction

package/docs/ui/utilities/cursors.mdx

@@ -1,6 +1,7 @@
 ---
 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.
+summary: 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.
+description: Custom cursors for enhanced interaction.
 ---
 
 ## Cursor utilities

package/docs/ui/utilities/index.mdx

@@ -0,0 +1,5 @@
+---
+title: Utilities
+order: 6
+description: Helper classes for layout and design.
+---

package/docs/ui/utilities/interactions.mdx

@@ -1,13 +1,14 @@
 ---
 title: Interactions
-description: Utility classes that change how users interact with contents of a website.
+summary: Utility classes that change how users interact with contents of a website.
+description: Modify user interactions efficiently.
 ---
 
 ## Text selection
 
 Change the way in which the content is selected when the user interacts with it.
 
-```html code example
+```html 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>
@@ -17,7 +18,11 @@ Change the way in which the content is selected when the user interacts with it.
 
 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>
+```html 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>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta22",
+  "version": "1.0.0-beta23",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
@@ -97,11 +97,11 @@
         "maxSize": "2 kB"
       },
       {
-        "path": "./dist/css/tabler-social.css",
+        "path": "./dist/css/tabler-socials.css",
         "maxSize": "2 kB"
       },
       {
-        "path": "./dist/css/tabler-social.min.css",
+        "path": "./dist/css/tabler-socials.min.css",
         "maxSize": "2 kB"
       },
       {
@@ -173,6 +173,7 @@
     "plyr": "^3.7.8",
     "postcss": "^8.4.49",
     "prettier": "^2.8.8",
+    "js-beautify": "^1.15.1",
     "release-it": "^15.11.0",
     "request": "^2.88.2",
     "rollup": "2.79.2",

package/src/js/src/countup.js

@@ -0,0 +1,17 @@
+const elements = document.querySelectorAll('[data-countup]');
+
+if (elements.length) {
+	elements.forEach(function (element) {
+		let options = {};
+		try {
+			options = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
+		} catch (error) {}
+
+		const value = parseInt(element.innerHTML, 10);
+
+		const countUp = new window.countUp.CountUp(element, value, options);
+		if (!countUp.error) {
+			countUp.start();
+		}
+	});
+}

package/src/js/tabler.esm.js

@@ -1,6 +1,7 @@
 //Vendor
 
 import "./src/autosize"
+import "./src/countup"
 import "./src/input-mask"
 import "./src/dropdown"
 import "./src/tooltip"

package/src/js/tabler.js

@@ -1,6 +1,7 @@
 //Vendor
 
 import "./src/autosize"
+import "./src/countup"
 import "./src/input-mask"
 import "./src/dropdown"
 import "./src/tooltip"

package/src/scss/_variables.scss

@@ -26,7 +26,7 @@ $font-icons: () !default;
 /* prettier-ignore */
 $font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") 'Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
 /* prettier-ignore */
-$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 
 //Icons
@@ -605,8 +605,6 @@ $card-header-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $cards-grid-gap: var(--#{$prefix}page-padding) !default;
 $cards-grid-breakpoint: lg !default;
 
-$zindex-dropdown: 1;
-
 // Carousel
 $carousel-control-color: $white !default;
 $carousel-control-icon-width: 1.5rem !default;
@@ -732,7 +730,7 @@ $navbar-light-color: var(--#{$prefix}body-color) !default;
 $navbar-light-brand-color: var(--#{$prefix}body-color) !default;
 $navbar-light-active-color: var(--#{$prefix}body-color) color !default;
 $navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
-$navbar-light-active-bg: rgba(0, 0, 0, 0.06) !default;
+$navbar-light-active-bg: rgba(0, 0, 0, 0.2) !default;
 
 $navbar-dark-color: rgba($white, $text-secondary-opacity) !default;
 $navbar-dark-brand-color: $white !default;

package/src/scss/tabler-socials.scss

@@ -0,0 +1,2 @@
+@import "config";
+@import "ui/social";

package/src/scss/ui/_buttons.scss

@@ -23,6 +23,7 @@
     width: var(--#{$prefix}btn-icon-size);
     height: var(--#{$prefix}btn-icon-size);
     min-width: var(--#{$prefix}btn-icon-size);
+    font-size: var(--#{$prefix}btn-icon-size);
     margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
     vertical-align: bottom;
     color: inherit;

package/src/scss/ui/_forms.scss

@@ -130,6 +130,10 @@ Form control
   border-radius: var(--#{$prefix}border-radius);
 }
 
+fieldset:empty {
+  display: none;
+}
+
 /**
 Form help
  */

package/src/scss/ui/_social.scss

@@ -0,0 +1,52 @@
+$apps: (
+  "apple",
+  "discord",
+  "dribbble",
+  "facebook",
+  "figma",
+  "github",
+  "google",
+  "instagram",
+  "linkedin",
+  "medium",
+  "meta",
+  "metamask",
+  "pinterest",
+  "reddit",
+  "signal",
+  "skype",
+  "snapchat",
+  "spotify",
+  "telegram",
+  "tiktok",
+  "tumblr",
+  "twitch",
+  "vk",
+  "x",
+  "youtube"
+);
+
+.social {
+  position: relative;
+  display: inline-block;
+  height: $avatar-size;
+  aspect-ratio: 1;
+  background: no-repeat center/cover;
+  vertical-align: bottom;
+}
+
+@each $app in $apps {
+  .social-app-#{$app} {
+    background-image: url("#{$assets-base}/img/social/#{$app}.svg");
+
+    &.social-gray {
+      background-image: url("#{$assets-base}/img/social/#{$app}-gray.svg");
+    }
+  }
+}
+
+@each $flag-size, $size in $flag-sizes {
+  .social-#{$flag-size} {
+    height: map-get($size, size);
+  }
+}

package/src/scss/ui/_tables.scss

@@ -1,7 +1,6 @@
 .table {
   thead {
     th {
-      color: $table-th-color;
       background: $table-th-bg;
       @include subheader;
       padding-top: $table-th-padding-y;

package/src/scss/ui/_type.scss

@@ -163,6 +163,10 @@ Links
   }
 }
 
+a:hover:has(.icon) {
+  text-decoration: none;
+}
+
 /**
 Subheader
  */

package/src/scss/vendor/_tom-select.scss

@@ -42,6 +42,7 @@ $input-border-width: 1px;
   background: var(--#{$prefix}bg-surface);
   color: var(--#{$prefix}body-color);
   box-shadow: var(--#{$prefix}box-shadow-dropdown);
+  z-index: $zindex-dropdown;
 
   .option {
     padding: $dropdown-item-padding-y $dropdown-item-padding-x;

package/dist/css/tabler-social.css

@@ -1,10 +0,0 @@
-/*!
-* Tabler v1.0.0-beta22 (https://tabler.io)
-* @version 1.0.0-beta22
-* @link https://tabler.io
-* Copyright 2018-2025 The Tabler Authors
-* Copyright 2018-2025 codecalm.net Paweł Kuna
-* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-*/
-/* prettier-ignore */
-/* prettier-ignore */

package/dist/css/tabler-social.min.css

@@ -1,8 +0,0 @@
-/*!
-* Tabler v1.0.0-beta22 (https://tabler.io)
-* @version 1.0.0-beta22
-* @link https://tabler.io
-* Copyright 2018-2025 The Tabler Authors
-* Copyright 2018-2025 codecalm.net Paweł Kuna
-* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-*/

package/dist/css/tabler-social.rtl.css

@@ -1,10 +0,0 @@
-/*!
-* Tabler v1.0.0-beta22 (https://tabler.io)
-* @version 1.0.0-beta22
-* @link https://tabler.io
-* Copyright 2018-2025 The Tabler Authors
-* Copyright 2018-2025 codecalm.net Paweł Kuna
-* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-*/
-/* prettier-ignore */
-/* prettier-ignore */

package/dist/css/tabler-social.rtl.min.css

@@ -1,8 +0,0 @@
-/*!
-* Tabler v1.0.0-beta22 (https://tabler.io)
-* @version 1.0.0-beta22
-* @link https://tabler.io
-* Copyright 2018-2025 The Tabler Authors
-* Copyright 2018-2025 codecalm.net Paweł Kuna
-* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-*/

package/docs/icons/figma.mdx

@@ -1,7 +0,0 @@
----
-title: Figma plugin
----
-
-![Tabler Figma Plugin](/docs/icons/figma-plugin.png)
-
-[Download Plugin](https://www.figma.com/community/plugin/1169807996149376642/Tabler-Icons)

package/docs/icons/png.mdx

@@ -1,19 +0,0 @@
----
-title: PNG version
----
-
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-png.png)
-
-## Installation
-
-<TabsPackage name="@tabler/icons-png" />
-
-or just [download from Github](https://github.com/tabler/tabler-icons/releases).
-
-All PNG files are stored in `icons` subdirectory.
-
-## CDN
-
-```html
-<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/home.png" />
-```