@tabler/core 1.5.1 → 1.6.1

package/js/tabler.ts

@@ -1,5 +1,8 @@
 import './src/autosize'
+import './src/clipboard'
+import './src/confetti'
 import './src/countup'
+import './src/datepicker'
 import './src/input-mask'
 import './src/dropdown'
 import './src/sidebar'
@@ -9,9 +12,25 @@ import './src/switch-icon'
 import './src/tab'
 import './src/toast'
 import './src/sortable'
+import './src/otp-input'
+import './src/sparkline'
+import './src/strength'
 
 // Re-export everything from bootstrap.ts (single source of truth)
 export * from './src/bootstrap'
 
-// Re-export tabler namespace
-export * as tabler from './src/tabler'
+// Tabler's own components
+export { default as Autosize } from './src/autosize'
+export { default as Clipboard } from './src/clipboard'
+export { default as Confetti } from './src/confetti'
+export { default as CountUp } from './src/countup'
+export { default as Datepicker } from './src/datepicker'
+export { default as InputMask } from './src/input-mask'
+export { default as OtpInput } from './src/otp-input'
+export { default as Sortable } from './src/sortable'
+export { default as Sparkline } from './src/sparkline'
+export { default as Strength } from './src/strength'
+export { default as SwitchIcon } from './src/switch-icon'
+
+// deprecated(2.0): the `tabler` namespace with `getColor()`, `hexToRgba()` and `prefix`
+export * as tabler from './src/deprecated'

package/libs.json

@@ -1,104 +1,72 @@
 {
   "imask": {
     "npm": "imask",
-    "js": [
-      "dist/imask.min.js"
-    ]
+    "js": ["dist/imask.min.js"]
   },
   "autosize": {
     "npm": "autosize",
-    "js": [
-      "dist/autosize.min.js"
-    ]
+    "js": ["dist/autosize.min.js"]
+  },
+  "clipboard": {
+    "npm": "clipboard",
+    "js": ["dist/clipboard.min.js"]
+  },
+  "countup": {
+    "npm": "countup.js",
+    "js": ["dist/countUp.umd.js"]
+  },
+  "litepicker": {
+    "npm": "litepicker",
+    "js": ["dist/litepicker.js"]
   },
   "apexcharts": {
     "npm": "apexcharts",
-    "js": [
-      "dist/apexcharts.min.js"
-    ]
+    "js": ["dist/apexcharts.min.js"]
   },
   "nouislider": {
     "npm": "nouislider",
-    "js": [
-      "dist/nouislider.min.js"
-    ],
-    "css": [
-      "dist/nouislider.min.css"
-    ]
-  },
-  "countup": {
-    "npm": "countup.js",
-    "js": [
-      "dist/countUp.umd.js"
-    ]
+    "js": ["dist/nouislider.min.js"],
+    "css": ["dist/nouislider.min.css"]
   },
   "lists": {
     "npm": "list.js",
-    "js": [
-      "dist/list.min.js"
-    ]
+    "js": ["dist/list.min.js"]
   },
   "sortablejs": {
     "npm": "sortablejs",
-    "js": [
-      "Sortable.min.js"
-    ]
+    "js": ["Sortable.min.js"]
   },
   "masonry": {
-    "js": [
-      "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
-    ]
+    "js": ["https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"]
   },
   "mapbox": {
-    "js": [
-      "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"
-    ],
-    "css": [
-      "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
-    ]
+    "js": ["https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"],
+    "css": ["https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"]
   },
   "google-maps": {
-    "js": [
-      "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY"
-    ]
+    "js": ["https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY"]
   },
-  "litepicker": {
-    "npm": "litepicker",
-    "js": [
-      "dist/litepicker.js"
-    ]
+  "vanilla-calendar-pro": {
+    "npm": "vanilla-calendar-pro",
+    "js": ["index.js"]
   },
   "tom-select": {
     "npm": "tom-select",
-    "js": [
-      "dist/js/tom-select.base.min.js"
-    ],
-    "css": [
-      "dist/css/tom-select.bootstrap5.min.css"
-    ]
+    "js": ["dist/js/tom-select.base.min.js"],
+    "css": ["dist/css/tom-select.bootstrap5.min.css"]
   },
   "jsvectormap": {
     "npm": "jsvectormap",
-    "js": [
-      "dist/jsvectormap.min.js",
-      "dist/maps/world.js",
-      "dist/maps/world-merc.js"
-    ],
-    "css": [
-      "dist/jsvectormap.css"
-    ]
+    "js": ["dist/jsvectormap.min.js", "dist/maps/world.js", "dist/maps/world-merc.js"],
+    "css": ["dist/jsvectormap.css"]
   },
   "fslightbox": {
     "npm": "fslightbox",
-    "js": [
-      "index.js"
-    ]
+    "js": ["index.js"]
   },
   "hugerte": {
     "npm": "hugerte",
-    "js": [
-      "hugerte.min.js"
-    ],
+    "js": ["hugerte.min.js"],
     "extra": [
       "themes/silver/theme.min.js",
       "models/dom/model.min.js",
@@ -114,71 +82,39 @@
   },
   "plyr": {
     "npm": "plyr",
-    "js": [
-      "dist/plyr.min.js"
-    ],
-    "css": [
-      "dist/plyr.css"
-    ]
+    "js": ["dist/plyr.min.js"],
+    "css": ["dist/plyr.css"]
   },
   "dropzone": {
     "npm": "dropzone",
-    "js": [
-      "dist/dropzone-min.js"
-    ],
-    "css": [
-      "dist/dropzone.css"
-    ]
+    "js": ["dist/dropzone-min.js"],
+    "css": ["dist/dropzone.css"]
   },
   "star-rating.js": {
     "npm": "star-rating.js",
-    "js": [
-      "dist/star-rating.min.js"
-    ],
-    "css": [
-      "dist/star-rating.min.css"
-    ]
+    "js": ["dist/star-rating.min.js"],
+    "css": ["dist/star-rating.min.css"]
   },
   "coloris.js": {
     "npm": "@melloware/coloris",
-    "js": [
-      "dist/umd/coloris.min.js"
-    ],
-    "css": [
-      "dist/coloris.min.css"
-    ]
+    "js": ["dist/umd/coloris.min.js"],
+    "css": ["dist/coloris.min.css"]
   },
   "typed.js": {
     "npm": "typed.js",
-    "js": [
-      "dist/typed.umd.js"
-    ]
+    "js": ["dist/typed.umd.js"]
   },
   "signature_pad": {
     "npm": "signature_pad",
-    "js": [
-      "dist/signature_pad.umd.min.js"
-    ]
-  },
-  "clipboard": {
-    "npm": "clipboard",
-    "js": [
-      "dist/clipboard.min.js"
-    ]
+    "js": ["dist/signature_pad.umd.min.js"]
   },
   "fullcalendar": {
     "npm": "fullcalendar",
-    "js": [
-      "index.global.min.js"
-    ]
+    "js": ["index.global.min.js"]
   },
   "driver.js": {
     "npm": "driver.js",
-    "js": [
-      "dist/driver.js.iife.js"
-    ],
-    "css": [
-      "dist/driver.css"
-    ]
+    "js": ["dist/driver.js.iife.js"],
+    "css": ["dist/driver.css"]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.5.1",
+  "version": "1.6.1",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "repository": {
@@ -31,7 +31,9 @@
   "files": [
     "dist/**/*",
     "js/**/*.{ts,js,map}",
+    "!js/tests/**",
     "scss/**/*.scss",
+    "!scss/tests/**",
     "libs.json"
   ],
   "style": "dist/css/tabler.css",
@@ -45,19 +47,19 @@
     "files": [
       {
         "path": "./dist/css/tabler.css",
-        "maxSize": "84 kB"
+        "maxSize": "88 kB"
       },
       {
         "path": "./dist/css/tabler.min.css",
-        "maxSize": "78 kB"
+        "maxSize": "80 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.css",
-        "maxSize": "84 kB"
+        "maxSize": "88 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.min.css",
-        "maxSize": "78 kB"
+        "maxSize": "80 kB"
       },
       {
         "path": "./dist/css/tabler-flags.css",
@@ -109,83 +111,83 @@
       },
       {
         "path": "./dist/css/tabler-props.css",
-        "maxSize": "5 kB"
+        "maxSize": "4.2 kB"
       },
       {
         "path": "./dist/css/tabler-props.min.css",
-        "maxSize": "4.6 kB"
+        "maxSize": "3.7 kB"
       },
       {
         "path": "./dist/css/tabler-props.rtl.css",
-        "maxSize": "5 kB"
+        "maxSize": "4.2 kB"
       },
       {
         "path": "./dist/css/tabler-props.rtl.min.css",
-        "maxSize": "4.6 kB"
+        "maxSize": "3.7 kB"
       },
       {
         "path": "./dist/css/tabler-socials.css",
-        "maxSize": "2.1 kB"
+        "maxSize": "1.3 kB"
       },
       {
         "path": "./dist/css/tabler-socials.min.css",
-        "maxSize": "2.1 kB"
+        "maxSize": "0.9 kB"
       },
       {
         "path": "./dist/css/tabler-socials.rtl.css",
-        "maxSize": "2.1 kB"
+        "maxSize": "1.3 kB"
       },
       {
         "path": "./dist/css/tabler-socials.rtl.min.css",
-        "maxSize": "2.1 kB"
+        "maxSize": "0.9 kB"
       },
       {
         "path": "./dist/css/tabler-themes.css",
-        "maxSize": "1.7 kB"
+        "maxSize": "2 kB"
       },
       {
         "path": "./dist/css/tabler-themes.min.css",
-        "maxSize": "1.4 kB"
+        "maxSize": "1.6 kB"
       },
       {
         "path": "./dist/css/tabler-themes.rtl.css",
-        "maxSize": "1.7 kB"
+        "maxSize": "2 kB"
       },
       {
         "path": "./dist/css/tabler-themes.rtl.min.css",
-        "maxSize": "1.4 kB"
+        "maxSize": "1.6 kB"
       },
       {
         "path": "./dist/css/tabler-vendors.css",
-        "maxSize": "7.7 kB"
+        "maxSize": "4 kB"
       },
       {
         "path": "./dist/css/tabler-vendors.min.css",
-        "maxSize": "6.7 kB"
+        "maxSize": "3.5 kB"
       },
       {
         "path": "./dist/css/tabler-vendors.rtl.css",
-        "maxSize": "7.7 kB"
+        "maxSize": "4 kB"
       },
       {
         "path": "./dist/css/tabler-vendors.rtl.min.css",
-        "maxSize": "6.7 kB"
+        "maxSize": "3.5 kB"
       },
       {
         "path": "./dist/js/tabler.js",
-        "maxSize": "64 kB"
+        "maxSize": "58 kB"
       },
       {
         "path": "./dist/js/tabler.min.js",
-        "maxSize": "48 kB"
+        "maxSize": "40 kB"
       },
       {
         "path": "./dist/js/tabler.esm.js",
-        "maxSize": "64 kB"
+        "maxSize": "58 kB"
       },
       {
         "path": "./dist/js/tabler.esm.min.js",
-        "maxSize": "48 kB"
+        "maxSize": "40 kB"
       },
       {
         "path": "./dist/js/tabler-theme.js",
@@ -208,11 +210,18 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8"
   },
+  "peerDependencies": {
+    "vanilla-calendar-pro": "^3.3.2"
+  },
+  "peerDependenciesMeta": {
+    "vanilla-calendar-pro": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@melloware/coloris": "^0.25.0",
     "@types/node": "^26.4.0",
     "@vitest/browser-playwright": "4.1.11",
-    "playwright": "1.62.1",
     "@vitest/coverage-istanbul": "4.1.11",
     "apexcharts": "7.0.0",
     "autosize": "^6.0.1",
@@ -231,15 +240,17 @@
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
     "nouislider": "^15.8.1",
+    "playwright": "1.62.1",
     "plyr": "^3.8.4",
-    "signature_pad": "^5.1.4",
     "sass": "1.103.1",
     "sass-true": "^10.1.0",
+    "signature_pad": "^5.1.4",
     "sortablejs": "^1.15.7",
     "star-rating.js": "^4.3.1",
     "tom-select": "^2.6.2",
     "typed.js": "^3.0.0",
     "typescript": "^7.0.2",
+    "vanilla-calendar-pro": "^3.4.0",
     "vitest": "4.1.11"
   },
   "scripts": {
@@ -253,7 +264,7 @@
     "lint": "pnpm run lint:scss && pnpm run lint:scss:vars",
     "lint:scss": "stylelint \"scss/**/*.scss\" --config ../stylelint.config.mjs",
     "lint:scss:fix": "pnpm run lint:scss --fix",
-    "lint:scss:vars": "find-unused-sass-variables scss/",
+    "lint:scss:vars": "find-unused-sass-variables scss/ --ignoreFiles scss/_variables-deprecated.scss",
     "js": "pnpm run js:build && pnpm run js:min && pnpm run js:types",
     "js:types": "tsc -p tsconfig.types.json",
     "js:build": "concurrently \"pnpm run js:build:standalone\" \"pnpm run js:build:theme\"",
@@ -263,7 +274,7 @@
     "js:min:standalone": "concurrently \"terser dist/js/tabler.js --compress --mangle --source-map \\\"content=dist/js/tabler.js.map,filename=dist/js/tabler.min.js.map,url=tabler.min.js.map\\\" -o dist/js/tabler.min.js\" \"terser dist/js/tabler.esm.js --module --compress --mangle --source-map \\\"content=dist/js/tabler.esm.js.map,filename=dist/js/tabler.esm.min.js.map,url=tabler.esm.min.js.map\\\" -o dist/js/tabler.esm.min.js\"",
     "js:min:theme": "concurrently \"terser dist/js/tabler-theme.js --compress --mangle --source-map \\\"content=dist/js/tabler-theme.js.map,filename=dist/js/tabler-theme.min.js.map,url=tabler-theme.min.js.map\\\" -o dist/js/tabler-theme.min.js\" \"terser dist/js/tabler-theme.esm.js --module --compress --mangle --source-map \\\"content=dist/js/tabler-theme.esm.js.map,filename=dist/js/tabler-theme.esm.min.js.map,url=tabler-theme.esm.min.js.map\\\" -o dist/js/tabler-theme.esm.min.js\"",
     "copy": "concurrently \"pnpm run copy:img\" \"pnpm run copy:libs\"",
-    "copy:img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
+    "copy:img": "tsx .build/copy-img.ts",
     "copy:libs": "tsx .build/copy-libs.ts",
     "watch": "concurrently \"pnpm run watch:css\" \"pnpm run watch:js\"",
     "watch:css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css:dev\"",

package/scss/_config.scss

@@ -6,6 +6,7 @@
 @forward 'settings';
 @forward 'variables';
 @forward 'variables-dark';
+@forward 'variables-deprecated';
 @forward 'maps';
 @forward 'mixins';
 @forward 'utilities';

package/scss/_core.scss

@@ -50,6 +50,7 @@
 @forward 'ui/buttons';
 @forward 'ui/button-group';
 @forward 'ui/calendars';
+@forward 'ui/datepicker';
 @forward 'ui/carousel';
 @forward 'ui/cards';
 @forward 'ui/close';
@@ -66,7 +67,9 @@
 @forward 'ui/forms/form-selectgroup';
 @forward 'ui/forms/form-custom';
 @forward 'ui/forms/form-check';
+@forward 'ui/forms/form-otp';
 @forward 'ui/forms/validation';
+@forward 'ui/forms/strength';
 @forward 'ui/legend';
 @forward 'ui/lists';
 @forward 'ui/loaders';
@@ -81,6 +84,7 @@
 @forward 'ui/markdown';
 @forward 'ui/placeholder';
 @forward 'ui/segmented';
+@forward 'ui/signal';
 @forward 'ui/steps';
 @forward 'ui/status';
 @forward 'ui/switch-icon';
@@ -92,10 +96,12 @@
 @forward 'ui/timeline';
 @forward 'ui/type';
 @forward 'ui/charts';
+@forward 'ui/sparkline';
 @forward 'ui/offcanvas';
 @forward 'ui/chat';
 @forward 'ui/signature';
 @forward 'ui/patterns';
+@forward 'ui/sortable';
 
 @forward 'helpers/index';
 

package/scss/_deprecated-props.scss

@@ -0,0 +1,40 @@
+// The `--tblr-*-rgb` custom properties of older 1.x releases, as mixins: three
+// bundles emit them (`tabler.css`, `tabler-props.css`, `tabler-themes.css`), so
+// this module emits nothing on its own. See `_deprecated.scss` for the rest.
+//
+// Removed in 2.0, together with this file.
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+@use 'config' as *;
+
+// `6, 111, 209`: whole numbers, as the 1.5 stylesheet had them.
+@function deprecated-rgb-triplet($color) {
+  $rgb: color.to-gamut($color, $space: rgb, $method: clip);
+  @return math.round(color.channel($rgb, 'red', $space: rgb)), math.round(color.channel($rgb, 'green', $space: rgb)), math.round(color.channel($rgb, 'blue', $space: rgb));
+}
+
+// deprecated(2.0): `--tblr-*-rgb`. Tabler mixes colours with `color-mix()` and
+// reads none of these. They are static, as they were in 1.5: overriding
+// `--tblr-primary` does not change `--tblr-primary-rgb`.
+@mixin deprecated-color-props() {
+  @if $enable-deprecated {
+    :root {
+      @each $name, $color in map.merge($theme-colors, $social-colors) {
+        --#{$name}-rgb: #{deprecated-rgb-triplet($color)};
+        --#{$name}-lt-rgb: #{deprecated-rgb-triplet(color.mix($color, #fff, 10%, $method: rgb))};
+      }
+    }
+  }
+}
+
+@mixin deprecated-theme-props() {
+  @if $enable-deprecated {
+    @each $name, $value in $extra-colors {
+      [data-bs-theme-primary='#{$name}'],
+      [data-theme-primary='#{$name}'] {
+        --primary-rgb: #{deprecated-rgb-triplet($value)};
+      }
+    }
+  }
+}