@tabler/core 1.0.0-beta16 → 1.0.0-beta18

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta16",
+  "version": "1.0.0-beta18",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
     "start": "gulp start",
     "start-plugins": "gulp start --with-plugins",
     "build": "gulp build",
+    "build-docs": "mkdir public && touch public/index.html && echo 'ok'",
     "preview": "gulp build --preview",
     "svg-optimize": "svgo -f svg/brand --pretty",
     "unused-files": "node build/unused-files.js",
@@ -17,9 +18,11 @@
     "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
     "storybook": "start-storybook -p 6006",
     "changelog": "gulp changelog",
-    "icons": "ncu -u @tabler/icons && npm install && gulp svg-icons && git add . && git commit -am \"update icons to v`npm info @tabler/icons version`\" && git push",
+    "icons": "ncu -u @tabler/icons && pnpm install && gulp svg-icons && git add . && git commit -am \"update icons to v`pnpm info @tabler/icons version`\" && git push",
     "download-images": "node build/download-images.js",
-    "optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done"
+    "optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done",
+    "format:check": "prettier --check src/**/*.{js,scss} --cache",
+    "format:write": "prettier --write src/**/*.{js,scss} --cache"
   },
   "repository": {
     "type": "git",
@@ -44,7 +47,7 @@
     "url": "https://github.com/sponsors/codecalm"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   },
   "files": [
     "dist/**/*",
@@ -62,19 +65,19 @@
     "files": [
       {
         "path": "./dist/css/tabler.css",
-        "maxSize": "65 kB"
+        "maxSize": "75 kB"
       },
       {
         "path": "./dist/css/tabler.min.css",
-        "maxSize": "60 kB"
+        "maxSize": "70 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.css",
-        "maxSize": "65 kB"
+        "maxSize": "75 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.min.css",
-        "maxSize": "60 kB"
+        "maxSize": "70 kB"
       },
       {
         "path": "./dist/css/tabler-flags.css",
@@ -92,6 +95,14 @@
         "path": "./dist/css/tabler-payments.min.css",
         "maxSize": "2 kB"
       },
+      {
+        "path": "./dist/css/tabler-social.css",
+        "maxSize": "2 kB"
+      },
+      {
+        "path": "./dist/css/tabler-social.min.css",
+        "maxSize": "2 kB"
+      },
       {
         "path": "./dist/css/tabler-vendors.css",
         "maxSize": "7 kB"
@@ -119,25 +130,29 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
-    "@babel/preset-env": "^7.20.2",
-    "@rollup/plugin-commonjs": "^23.0.2",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^5.0.1",
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@changesets/cli": "^2.26.1",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-replace": "^5.0.2",
     "@rollup/pluginutils": "^5.0.2",
     "@rollup/stream": "^2.0.0",
-    "apexcharts": "^3.36.3",
-    "autoprefixer": "^10.4.13",
-    "autosize": "^5.0.1",
-    "browser-sync": "^2.27.10",
+    "@shopify/prettier-plugin-liquid": "^1.0.6",
+    "@tabler/icons": "^2.18.0",
+    "all-contributors-cli": "^6.25.0",
+    "apexcharts": "^3.40.0",
+    "autoprefixer": "^10.4.14",
+    "autosize": "^6.0.1",
+    "browser-sync": "^2.29.1",
     "bundlewatch": "^0.3.3",
-    "choices.js": "^10.1.0",
-    "chromatic": "^6.11.4",
-    "countup.js": "^2.3.2",
+    "choices.js": "^10.2.0",
+    "chromatic": "^6.17.4",
+    "countup.js": "^2.6.2",
     "cross-spawn": "^7.0.3",
     "dropzone": "^6.0.0-beta.2",
     "flatpickr": "^4.6.13",
-    "fslightbox": "^3.3.1",
+    "fslightbox": "^3.4.1",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-clean-css": "^4.3.0",
@@ -150,46 +165,46 @@
     "gulp-sass": "^5.1.0",
     "gulp-terser": "^2.1.0",
     "imageoptim-cli": "^3.0.7",
-    "imask": "^6.4.3",
-    "jsvectormap": "^1.5.1",
+    "imask": "^6.6.1",
+    "jsvectormap": "^1.5.3",
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
-    "nouislider": "^15.6.1",
-    "plyr": "^3.7.2",
-    "postcss": "^8.4.18",
-    "release-it": "^15.5.0",
+    "nouislider": "^15.7.0",
+    "plyr": "^3.7.8",
+    "postcss": "^8.4.23",
+    "prettier": "^2.8.8",
+    "release-it": "^15.10.3",
     "request": "^2.88.2",
-    "rollup": "^2.79.1",
+    "rollup": "2.79.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "sass": "^1.56.1",
-    "tinymce": "^6.2.0",
+    "sass": "^1.62.1",
+    "tinymce": "^6.4.2",
     "tom-select": "^2.2.2",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "yaml": "^2.1.3",
-    "yargs": "^17.6.2"
+    "yaml": "^2.2.2",
+    "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.6",
-    "@tabler/icons": "^1.111.0",
-    "bootstrap": "~5.2.2"
+    "@popperjs/core": "^2.11.7",
+    "bootstrap": "5.3.0-alpha3"
   },
   "peerDependencies": {
-    "apexcharts": "^3.36.3",
-    "autosize": "^5.0.1",
-    "choices.js": "^10.1.0",
-    "countup.js": "^2.3.2",
+    "apexcharts": "^3.40.0",
+    "autosize": "^6.0.1",
+    "choices.js": "^10.2.0",
+    "countup.js": "^2.6.2",
     "dropzone": "^6.0.0-beta.2",
     "flatpickr": "^4.6.13",
-    "fslightbox": "^3.3.1",
-    "imask": "^6.4.3",
-    "jsvectormap": "^1.5.1",
+    "fslightbox": "^3.4.1",
+    "imask": "^6.6.1",
+    "jsvectormap": "^1.5.3",
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
-    "nouislider": "^15.6.1",
-    "plyr": "^3.7.2",
-    "tinymce": "^6.2.0",
+    "nouislider": "^15.7.0",
+    "plyr": "^3.7.8",
+    "tinymce": "^6.4.2",
     "tom-select": "^2.2.2"
   },
   "peerDependenciesMeta": {
@@ -217,6 +232,9 @@
     "imask": {
       "optional": true
     },
+    "jsvectormap": {
+      "optional": true
+    },
     "list.js": {
       "optional": true
     },
@@ -226,22 +244,16 @@
     "nouislider": {
       "optional": true
     },
-    "tom-select": {
+    "plyr": {
       "optional": true
     },
     "tinymce": {
       "optional": true
     },
-    "jsvectormap": {
-      "optional": true
-    },
-    "plyr": {
+    "tom-select": {
       "optional": true
     }
   },
-  "resolutions": {
-    "**/**/node-gyp": "^5.0.0"
-  },
   "release-it": {
     "hooks": {
       "after:bump": "gulp build --latest-version ${latestVersion} --new-version ${version} && gulp build-demo",
@@ -255,5 +267,8 @@
     "github": {
       "release": true
     }
+  },
+  "directories": {
+    "doc": "docs"
   }
 }

package/src/js/demo-theme.js

@@ -4,22 +4,25 @@
  * This will prevent any flashes of the light theme (default) before switching.
  */
 
-const themeStorageKey = 'tablerTheme'
-const defaultTheme = 'light'
+const themeStorageKey = "tablerTheme"
+const defaultTheme = "light"
 let selectedTheme
 
 // https://stackoverflow.com/a/901144
 const params = new Proxy(new URLSearchParams(window.location.search), {
-	 get: (searchParams, prop) => searchParams.get(prop),
-});
+	get: (searchParams, prop) => searchParams.get(prop),
+})
 
 if (!!params.theme) {
-	 localStorage.setItem(themeStorageKey, params.theme)
-	 selectedTheme = params.theme
+	localStorage.setItem(themeStorageKey, params.theme)
+	selectedTheme = params.theme
 } else {
-	 const storedTheme = localStorage.getItem(themeStorageKey)
-	 selectedTheme = storedTheme ? storedTheme : defaultTheme
+	const storedTheme = localStorage.getItem(themeStorageKey)
+	selectedTheme = storedTheme ? storedTheme : defaultTheme
 }
 
-document.body.classList.remove('theme-dark', 'theme-light');
-document.body.classList.add(`theme-${selectedTheme}`);
+if (selectedTheme === 'dark') {
+	document.body.setAttribute("data-bs-theme", selectedTheme)
+} else {
+	document.body.removeAttribute("data-bs-theme")
+}

package/src/js/demo.js

@@ -1,24 +1,27 @@
 // Setting items
 const items = {
-	'menu-position': { localStorage: 'tablerMenuPosition', default: 'top' },
-	'menu-behavior': { localStorage: 'tablerMenuBehavior', default: 'sticky' },
-	'container-layout': { localStorage: 'tablerContainerLayout', default: 'boxed' }
+	"menu-position": { localStorage: "tablerMenuPosition", default: "top" },
+	"menu-behavior": { localStorage: "tablerMenuBehavior", default: "sticky" },
+	"container-layout": {
+		localStorage: "tablerContainerLayout",
+		default: "boxed",
+	},
 }
 
 // Theme config
 const config = {}
 for (const [key, params] of Object.entries(items)) {
-   const lsParams = localStorage.getItem(params.localStorage)
-   config[key] = lsParams ? lsParams : params.default
+	const lsParams = localStorage.getItem(params.localStorage)
+	config[key] = lsParams ? lsParams : params.default
 }
 
 // Parse url params
 const parseUrl = () => {
 	const search = window.location.search.substring(1)
-	const params = search.split('&')
+	const params = search.split("&")
 
 	for (let i = 0; i < params.length; i++) {
-		const arr = params[i].split('=')
+		const arr = params[i].split("=")
 		const key = arr[0]
 		const value = arr[1]
 
@@ -35,7 +38,9 @@ const parseUrl = () => {
 // Toggle form controls
 const toggleFormControls = (form) => {
 	for (const [key, params] of Object.entries(items)) {
-		const elem = form.querySelector(`[name="settings-${key}"][value="${config[key]}"]`)
+		const elem = form.querySelector(
+			`[name="settings-${key}"][value="${config[key]}"]`,
+		)
 
 		if (elem) {
 			elem.checked = true
@@ -55,26 +60,24 @@ const submitForm = (form) => {
 		config[key] = value
 	}
 
-	window.dispatchEvent(new Event('resize'));
+	window.dispatchEvent(new Event("resize"))
 
-	(new bootstrap.Offcanvas(form)).hide()
+	new bootstrap.Offcanvas(form).hide()
 }
 
-
 // Parse url
 parseUrl()
 
 // Elements
-const form = document.querySelector('#offcanvasSettings')
+const form = document.querySelector("#offcanvasSettings")
 
 // Toggle form controls
 if (form) {
-
-	form.addEventListener('submit', function (e) {
+	form.addEventListener("submit", function (e) {
 		e.preventDefault()
 
 		submitForm(form)
 	})
 
 	toggleFormControls(form)
-}
+}

package/src/js/tabler.esm.js

@@ -1,10 +1,9 @@
 //Vendor
 
-import './src/autosize';
-import './src/input-mask';
-import './src/dropdown';
-import './src/tooltip';
-import './src/popover';
-import './src/switch-icon';
-import './src/toast';
-
+import "./src/autosize"
+import "./src/input-mask"
+import "./src/dropdown"
+import "./src/tooltip"
+import "./src/popover"
+import "./src/switch-icon"
+import "./src/toast"

package/src/js/tabler.js

@@ -1,15 +1,15 @@
 //Vendor
 
-import './src/autosize';
-import './src/input-mask';
-import './src/dropdown';
-import './src/tooltip';
-import './src/popover';
-import './src/switch-icon';
-import './src/tab';
-import './src/toast';
-import * as bootstrap from 'bootstrap';
-import * as tabler from './src/tabler';
+import "./src/autosize"
+import "./src/input-mask"
+import "./src/dropdown"
+import "./src/tooltip"
+import "./src/popover"
+import "./src/switch-icon"
+import "./src/tab"
+import "./src/toast"
+import * as bootstrap from "bootstrap"
+import * as tabler from "./src/tabler"
 
-globalThis.bootstrap = bootstrap;
-globalThis.tabler = tabler;
+globalThis.bootstrap = bootstrap
+globalThis.tabler = tabler

package/src/scss/_bootstrap-components.scss

@@ -1,38 +1,38 @@
 // Layout & components
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/containers";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/accordion";
-@import "~bootstrap/scss/breadcrumb";
-@import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/close";
-@import "~bootstrap/scss/toasts";
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/tooltip";
-@import "~bootstrap/scss/popover";
-@import "~bootstrap/scss/carousel";
-@import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/offcanvas";
-@import "~bootstrap/scss/placeholders";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
 
 // Helpers
-@import "~bootstrap/scss/helpers";
+@import "bootstrap/scss/helpers";
 
 // Utilities
-@import "~bootstrap/scss/utilities/api";
+@import "bootstrap/scss/utilities/api";

package/src/scss/_bootstrap-config.scss

@@ -1,6 +1,7 @@
 // Config
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/maps";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/utilities";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";

package/src/scss/_bootstrap-override.scss

@@ -1,8 +1,8 @@
 @mixin caret($direction: down) {
-  $selector: 'after';
+  $selector: "after";
 
-  @if $direction == 'left' {
-    $selector: 'before'
+  @if $direction == "left" {
+    $selector: "before";
   }
 
   &:#{$selector} {
@@ -13,9 +13,9 @@
     height: $caret-width;
     border-bottom: 1px var(--#{$prefix}border-style);
     border-left: 1px var(--#{$prefix}border-style);
-    margin-right: .1em;
+    margin-right: 0.1em;
 
-    @if $direction != 'left' {
+    @if $direction != "left" {
       margin-left: $caret-spacing;
     } @else {
       margin-right: $caret-spacing;
@@ -32,18 +32,14 @@
     }
   }
 
-  @if $direction == 'left' {
+  @if $direction == "left" {
     &:after {
       content: none;
     }
   }
 }
 
-@mixin alert-variant(
-  $background: null,
-  $border: null,
-  $color: null
-) {
+@mixin alert-variant($background: null, $border: null, $color: null) {
   // Override bootstrap core
 }
 
@@ -79,4 +75,4 @@
 //
 @function opaque($background, $foreground) {
   @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
-}
+}

package/src/scss/_config.scss

@@ -1,6 +1,7 @@
-@import "~bootstrap/scss/functions";
+@import "bootstrap/scss/functions";
 
 @import "variables";
+@import "variables-dark";
 @import "utilities";
 @import "mixins";
 

package/src/scss/_core.scss

@@ -56,6 +56,7 @@
 @import "ui/toasts";
 @import "ui/toolbar";
 @import "ui/tracking";
+@import "ui/timeline";
 @import "ui/type";
 @import "ui/charts";
 @import "ui/offcanvas";
@@ -68,4 +69,4 @@
 @import "utils/shadow";
 @import "utils/text";
 
-@import "debug";
+@import "debug";

package/src/scss/_debug.scss

@@ -1,38 +1,49 @@
 $debug: false;
 
 @if $debug {
-	$colors: ("blue": $blue, "azure": $azure, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "lime": $lime, "green": $green, "teal": $teal, "cyan": $cyan);
+  $colors: (
+    "blue": $blue,
+    "azure": $azure,
+    "indigo": $indigo,
+    "purple": $purple,
+    "pink": $pink,
+    "red": $red,
+    "orange": $orange,
+    "yellow": $yellow,
+    "lime": $lime,
+    "green": $green,
+    "teal": $teal,
+    "cyan": $cyan,
+  );
 
-	@each $name, $color in $colors {
-		@debug ("#{$name}: '#{$color}'");
-		@debug ("#{$name}-100: '#{tint-color($color, 8)}'");
-		@debug ("#{$name}-200: '#{tint-color($color, 6)}'");
-		@debug ("#{$name}-300: '#{tint-color($color, 4)}'");
-		@debug ("#{$name}-400: '#{tint-color($color, 2)}'");
-		@debug ("#{$name}-500: '#{$color}'");
-		@debug ("#{$name}-600: '#{shade-color($color, 2)}'");
-		@debug ("#{$name}-700: '#{shade-color($color, 4)}'");
-		@debug ("#{$name}-800: '#{shade-color($color, 6)}'");
-		@debug ("#{$name}-900: '#{shade-color($color, 8)}'");
-	}
+  @each $name, $color in $colors {
+    @debug ("#{$name}: '#{$color}'");
+    @debug ("#{$name}-100: '#{tint-color($color, 8)}'");
+    @debug ("#{$name}-200: '#{tint-color($color, 6)}'");
+    @debug ("#{$name}-300: '#{tint-color($color, 4)}'");
+    @debug ("#{$name}-400: '#{tint-color($color, 2)}'");
+    @debug ("#{$name}-500: '#{$color}'");
+    @debug ("#{$name}-600: '#{shade-color($color, 2)}'");
+    @debug ("#{$name}-700: '#{shade-color($color, 4)}'");
+    @debug ("#{$name}-800: '#{shade-color($color, 6)}'");
+    @debug ("#{$name}-900: '#{shade-color($color, 8)}'");
+  }
 
-	@debug ("gray: '#{$gray-500}'");
-	@debug ("gray-100: '#{$gray-100}'");
-	@debug ("gray-200: '#{$gray-200}'");
-	@debug ("gray-300: '#{$gray-300}'");
-	@debug ("gray-400: '#{$gray-400}'");
-	@debug ("gray-500: '#{$gray-500}'");
-	@debug ("gray-600: '#{$gray-600}'");
-	@debug ("gray-700: '#{$gray-700}'");
-	@debug ("gray-800: '#{$gray-800}'");
-	@debug ("gray-900: '#{$gray-900}'");
+  @debug ("gray: '#{$gray-500}'");
+  @debug ("gray-100: '#{$gray-100}'");
+  @debug ("gray-200: '#{$gray-200}'");
+  @debug ("gray-300: '#{$gray-300}'");
+  @debug ("gray-400: '#{$gray-400}'");
+  @debug ("gray-500: '#{$gray-500}'");
+  @debug ("gray-600: '#{$gray-600}'");
+  @debug ("gray-700: '#{$gray-700}'");
+  @debug ("gray-800: '#{$gray-800}'");
+  @debug ("gray-900: '#{$gray-900}'");
 
-	@debug ("border-color: '#{$border-color}'");
-	@debug ("text-muted: '#{$text-muted}'");
+  @debug ("border-color: '#{$border-color}'");
+  @debug ("text-muted: '#{$text-muted}'");
 
-	@each $name, $color in $social-colors {
-     @debug ("#{$name}: '#{$color}'");
-   }
+  @each $name, $color in $social-colors {
+    @debug ("#{$name}: '#{$color}'");
+  }
 }
-
-